/* ---------------------------------------------------------------------------
   Bảng màu.

   Đổi màu chủ đạo toàn site chỉ cần sửa hai dòng đầu. Giữ thêm --nv-primary-rgb
   vì rgba() không nhận var() lồng bên trong dạng mã hex, phải tách sẵn ba số.

   --nv-primary-deep là tông đậm cùng sắc độ, dùng cho trạng thái rê chuột và
   những chỗ cần chữ trắng đọc được trên nền màu.
   --------------------------------------------------------------------------- */
:root {
  --nv-primary: #1AB0FB;
  --nv-primary-rgb: 26, 176, 251;
  --nv-primary-deep: #0079B8;
}

/* Họ chữ roboto phải khai báo đủ các mặt chữ.
   Trước đây chỉ có mỗi mặt Regular ở đây, còn mặt đậm nằm ở một họ khác tên là
   roboto-bold. Vì thẻ <strong> chỉ đổi font-weight chứ không đổi font-family
   nên trình duyệt tìm mặt đậm trong họ roboto, không thấy, và dùng lại mặt
   thường - chữ in đậm gõ trong trình soạn thảo hiện ra y như chữ thường. */
@font-face {
  font-family: roboto;
  src: url(../../font/Roboto-Regular.ttf);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: roboto;
  src: url(../../font/Roboto-Bold.ttf);
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: roboto;
  src: url(../../font/Roboto-Medium.ttf);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: roboto;
  src: url(../../font/Roboto-Italic.ttf);
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: roboto;
  src: url(../../font/Roboto-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* Giữ lại tên cũ cho những chỗ đang gọi thẳng roboto-bold. */
@font-face {
  font-family: roboto-bold;
  src: url(../../font/Roboto-Bold.ttf);
  font-weight: bold;
}

.page-heading {
  position: relative;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #C9C9C9;
}


.page-heading,
.page-heading span.h-title {
  font-family: Arial;
  font-weight: 600;
  line-height: 30px;
  font-size: 18px;
  text-align: initial;
  text-transform: initial;
  color: #333;
}

.page-heading:before {
  background-color: var(--nv-primary);
  width: 120px;
  height: 2px;
  display: inline-block;
  position: absolute;
  bottom: -2px;
  content: '';
  left: 0;
}


.show-more {
  font-size: 14px;
  text-decoration: none;
}

.show-more:hover {
  color: var(--nv-primary);
  text-decoration: underline;
}

h3.home-sector-title {
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   Bề rộng khung nội dung.

   Bootstrap 4 chặn .container ở 1140px - trên màn 1600px trở lên thì nội dung
   co cụm vào giữa, hai bên trống huếch. Nới ra theo hai mức: 1320px cho màn phổ
   thông và 1480px cho màn rộng. Không cho rộng hơn nữa: dòng chữ dài quá 100 ký
   tự thì mắt phải quét ngang nhiều, đọc mệt.
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1480px;
  }
}

/* Bo góc cho mọi nút, cùng ngôn ngữ với các thẻ và ô nhập trong trang. Bản gốc
   để nút vuông thành (.btn-primary đặt border-radius: 0). */
.btn {
  border-radius: 8px;
}

.btn i {
  opacity: 1;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.btn:hover i,
.btn:focus i {
  opacity: 1;
  margin-left: 7px;
}

.btn.out-line:hover i,
.btn.out-line:focus i {
  opacity: 1;
  margin-left: 0px;
}

.main-content {
  min-height: 60vh;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span {
  /* Phông chữ toàn site đọc từ biến --nv-font. Chọn trong quản trị ở Thông tin
     website → Giao diện; chưa chọn thì rơi về bộ Roboto kèm sẵn trong giao diện
     (khai báo @font-face ở đầu tệp này). */
  font-family: var(--nv-font, roboto);
  line-height: 28px;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 14px;
}

hr {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body .bg-primary {
  background-color: var(--nv-primary) !important;
}

.primary-text {
  color: var(--nv-primary);
}

/* Btn Primary */
.btn-primary {
  color: #ffffff;
  background-color: var(--nv-primary);
  border: 2px solid var(--nv-primary);
  padding: 8px 25px;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  color: var(--nv-primary);
  background-color: transparent;
  border-color: var(--nv-primary);
  -webkit-box-shadow: 0px 10px 30px rgba(var(--nv-primary-rgb), 0.2);
  box-shadow: 0px 10px 30px rgba(var(--nv-primary-rgb), 0.2);
}

.btn-primary::before {
  position: absolute;
  content: "";
  top: 0;
  height: 100%;
  left: -25%;
  width: 0;
  background-color: var(--nv-primary);
  -webkit-transform: skew(50deg);
  transform: skew(50deg);
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.btn-primary:hover::before {
  width: 170%;
  background-color: transparent;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #ffffff;
  background-color: var(--nv-primary);
  border-color: var(--nv-primary);
}

.btn-primary.focus,
.btn-primary:focus {
  -webkit-box-shadow: unset;
  box-shadow: unset;
  background-color: transparent;
  border-color: var(--nv-primary);
  color: var(--nv-primary);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #ffffff;
  background-color: var(--nv-primary);
  border-color: var(--nv-primary);
  opacity: 1;
}

/*
Hire Me Area CSS
*/
/* Btn Primary */
.btn-primary.white {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.white.btn-primary:hover,
.white.btn-primary:focus {
  color: #ffffff;
  background-color: transparent;
  border-color: #ffffff;
}
/*
Hire Me Area CSS
*/
/* Btn Primary */
.btn-primary.out-line {
  background-color: transparent;
  color: #fff;
  border-color: #ffffff;
}

.out-line.btn-primary:hover,
.out-line.btn-primary:focus {
  color: #ffffff;
  background-color: transparent;
  border-color: #ffffff;
}

.ca3-scroll-down-arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
  background-size: contain;
  background-repeat: no-repeat;
}
.ca3-scroll-down-link {
  cursor: pointer;
  height: 50px;
  width: 65px;

  margin: 0 0 0 -40px;

  line-height: 60px;
  position: absolute;
  left: 50%;
  bottom: 15%;
  color: #fff;
  text-align: center;
  font-size: 70px;
  z-index: 2;
  animation: ca3_fade_move_down 2s ease-in-out infinite;
}

@-webkit-keyframes ca3_fade_move_down {
  0% {
    -webkit-transform: translate(0, -15px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
}

@-moz-keyframes ca3_fade_move_down {
  0% {
    -moz-transform: translate(0, -15px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -moz-transform: translate(0, 15px);
    opacity: 0;
  }
}

@keyframes ca3_fade_move_down {
  0% {
    transform: translate(0, -15px);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(0, 15px);
    opacity: 0;
  }
}

/* .btn-primary {
  color: #fff;
  background-color: var(--nv-primary);
  border-color: var(--nv-primary);
} */

/* .btn-primary:hover {
  background-color: #e60808b3;
  border-color: #e60808b3;
  color: #fff;
} */

body {
  font-family: var(--nv-font, roboto), sans-serif;
  font-size: 14px;
  color: #212121;
  background-color: #fff;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #eee;
}

.c_introduce_page {
  line-height: 24px;
  font-family: var(--nv-font, roboto), sans-serif !important;
}

.c_introduce_page i {
  font-weight: unset;
}

/* Css modify browser scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 6px;
  z-index: -1;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #6868689c;
  border-radius: 3px;
}

::-moz-selection {
  background-color: #2f71ff9c;
}

::selection {
  background-color: #2f71ff9c;
}

.ck-editor-text img {
  max-width: 100%;
}

.home-title {
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 700;
  position: relative;
  margin-top: 20px;
}

.home-hr {
  border: 2px solid var(--nv-primary);
  width: 100px;
}

/* Dòng mô tả dưới tiêu đề section trang chủ. Bỏ trống trong quản trị thì template
   không in ra thẻ này, nên không cần lo khoảng trắng thừa. */
.home-section-desc {
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
  color: #5b6a75;
  line-height: 1.7;
}

.home-about-box,
.product_layout,
.home_layout_activities_layout {
  padding: 35px 15px;
  border: 0;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-align: center;
  border: 2px solid #ddd;
  width: 100%;
  /* Bo góc. Hiện chỉ .home-about-box còn được dùng - hai lớp kia là tàn dư của
     website cũ - nhưng để chung ở đây để nếu dùng lại thì góc vẫn khớp nhau. */
  border-radius: 10px;
}

.home-about-box {
  border: 2px solid #ddd;
  /* Khai báo transition ở trạng thái thường, không phải trong :hover - để ở
     :hover thì lúc trỏ chuột rời đi khối bật về ngay, không có hiệu ứng. */
  transition: transform .3s ease, border-color .3s linear, box-shadow .3s linear;
}

.home-about-box img {
  width: 50px;
}

/* Mô tả hiện đủ, không cắt.

   Trước đây lớp này tên là .three-row và cắt cụt ở dòng thứ ba bằng
   -webkit-line-clamp. Bốn khối này là tầm nhìn, sứ mệnh, giá trị, khẩu hiệu -
   toàn những câu người viết cân nhắc từng chữ, cắt ngang bằng dấu "…" thì
   người đọc chẳng biết đoạn sau nói gì mà cũng không bấm vào đâu để đọc tiếp
   được. Muốn ngắn thì sửa ở quản trị, chứ không để CSS quyết định hộ. */
.home-about-desc {
  line-height: 1.8;
  font-size: 14px;
}

.home-about-box:hover {
  border: 2px solid var(--nv-primary);
  box-shadow: -2px -2px 10px -3px rgb(0 0 0 / 50%);
  /* Phóng nhẹ khi trỏ vào. 1.05 là đủ thấy mà không đè lên khối bên cạnh. */
  transform: scale(1.05);
}

/* Người dùng đã tắt hiệu ứng chuyển động thì bỏ phần phóng to, giữ lại đổi màu
   viền để vẫn biết đang trỏ vào khối nào. */
@media (prefers-reduced-motion: reduce) {
  .home-about-box {
    transition: none;
  }

  .home-about-box:hover {
    transform: none;
  }
}

.padding-15 {
  padding: 15px 0;
}

/* Mô tả dài ngắn khác nhau nên hai khối cạnh nhau tự cao thấp lệch nhau. Cột là
   flex item nên chỉ cần cho khối bên trong cao 100% là hai khối trên cùng một
   hàng bằng nhau. min-height: 0 vì mặc định của flex item là auto, thiếu nó thì
   khối không co lại được. */
.list-home-about > [class*="col-"] {
  display: flex;
  min-height: 0;
}

/* Khối ngắn hơn bị kéo cao bằng khối bên cạnh, nếu để chữ dính lên trên thì
   dưới đáy hở một mảng trống trông như thiếu nội dung. Dồn cả cụm vào giữa
   chiều cao thì khoảng trống chia đều trên dưới, nhìn ra ngay là cố ý. */
.list-home-about .home-about-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Khoảng cách giữa hai hàng ô.

   Trước đây hai hàng dính sát nhau: hàng dưới được đẩy xuống bằng margin-top
   trên các ô lẻ (kiểu so le của website cũ), nên cột phải - toàn ô chẵn - không
   được đẩy gì cả, hai ô chồng lên nhau luôn. Chưa kể lúc trỏ chuột ô phóng to
   1.05 thì nó đè hẳn sang ô bên dưới.

   Giờ dùng row-gap cho cả lưới: hàng nào cũng cách nhau đúng 30px, đủ chỗ cho
   phần phóng to (5% của ô cao ~500px là ~12px mỗi mép). Bỏ luôn kiểu so le -
   từ khi hai ô cạnh nhau cao bằng nhau thì so le chỉ còn thấy ở mép trên, nhìn
   như lỗi căn hàng hơn là dụng ý. */
.list-home-about {
  row-gap: 30px;
}

/* activities */
.home_layout_activities {
  padding: 30px 0;
}

.padding-50 {
  padding: 50px 0;
}

.home-list-sector {
  display: flex;
  align-items: flex-end;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  /* Khoảng cách để cho container lo, không đặt margin trên từng thẻ: margin chỉ
     tách được hai thẻ cùng hàng, còn hai hàng thì dính sát nhau - đó chính là
     chỗ trông chật nhất. gap tách cả hai chiều. */
  gap: 30px;
}

.home-sector-item,
.home-sector-item .bg-home-sector-item {
  position: relative;
}

.home-sector-item .bg-home-sector-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all linear;
  z-index: 1;
}

.home-sector-item .col-xs-12 {
  padding: 0;
}

.home-sector-left {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.home-sector-left img {
  transition: 0.3s all linear;
  height: 250px;
  object-fit: cover;
  object-position: top center;
}

.home-sector-item .home-sector-right {
  padding: 15px;
}

.home-sector-item .home-sector-number {
  color: var(--nv-primary);
  font-size: 24px;
  font-weight: 700;
}

.home-sector-item .home-sector-des {
  line-height: 1.8;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-sector-item .home-sector-title {
  line-height: 1.8;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-list-sector .home-sector-item {
  /* Trừ đi một nửa gap ở mỗi thẻ để hai thẻ vẫn vừa đúng một hàng. */
  width: calc(50% - 15px);
  padding: 12px;
  margin: 0;
  align-items: flex-end;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 12%);
  transition: 0.4s;
  cursor: pointer;
}

.home-list-sector .home-sector-item::before,
.home-list-sector .home-sector-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20%;
  border-bottom: 3px solid #dddddd;
  border-left: 3px solid #dddddd;
  height: 20%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.home-list-sector .home-sector-item::after {
  border-left: 0;
  border-bottom: 0;
  border-top: 3px solid #dddddd;
  border-right: 3px solid #dddddd;
  top: 0;
  right: 0;
  left: auto;
}

.home-list-sector .home-sector-item:hover::before,
.home-list-sector .home-sector-item:hover::after {
  width: 45%;
  height: 45%;
  border-color: var(--nv-primary);
}

/* Phóng nhẹ khi trỏ vào, cùng kiểu với các khối "Giới thiệu".
   Hệ số nhỏ hơn (1.02 so với 1.05) vì thẻ này rộng gần nửa trang: 1.05 là nở ra
   hơn 30px mỗi bên, đè sang thẻ bên cạnh vốn chỉ cách 10px.

   z-index là bắt buộc chứ không phải cho đẹp: các thẻ đều position: relative nên
   xếp chồng theo thứ tự trong HTML, không nâng lên thì thẻ đang phóng to bị thẻ
   đứng sau vẽ đè lên.

   Vì sao có thêm dòng .is-visible: thẻ lĩnh vực mang luôn lớp nv-reveal trên
   chính nó (khối "Giới thiệu" thì nv-reveal nằm ở cột bao ngoài nên không vướng),
   mà reveal.css có quy tắc `.nv-js .nv-reveal.is-visible { transform: none }`
   cùng độ ưu tiên 0,3,0 và nạp SAU website.css - nên nó xoá sạch transform của
   quy tắc chỉ có :hover. Thêm .is-visible cho lên 0,4,0 để thắng. Vẫn giữ dòng
   không có .is-visible cho trường hợp tắt JavaScript: khi đó thẻ <html> không có
   lớp nv-js nên quy tắc reveal không áp dụng, mà lớp is-visible cũng không bao
   giờ được gắn. */
.home-list-sector .home-sector-item:hover,
.home-list-sector .home-sector-item.is-visible:hover {
  transform: scale(1.02);
  z-index: 1;
}

/* Ảnh phóng mạnh hơn hẳn cả thẻ (1.12 so với 1.02): thẻ chỉ cần nhích lên cho
   biết là đang trỏ vào, còn chuyển động thật nằm ở ảnh. Ảnh nở ra bị
   .home-sector-left (overflow: hidden) cắt gọn trong khung nên bố cục không xê
   dịch. Ảnh không mang lớp nv-reveal nên không vướng quy tắc của reveal.css,
   không cần thêm .is-visible như quy tắc của thẻ. */
.home-list-sector .home-sector-item:hover .home-sector-left img {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .home-list-sector .home-sector-item,
  .home-sector-left img {
    transition: none;
  }

  .home-list-sector .home-sector-item:hover,
  .home-list-sector .home-sector-item.is-visible:hover,
  .home-list-sector .home-sector-item:hover .home-sector-left img {
    transform: none;
  }
}

.home-sector-item .row {
  margin: 0;
}

/* product */
.home_layout_products,
/* Section Tin tức dùng đúng khoảng đệm của section Sản phẩm - hai section cùng
   một kiểu bố cục, lệch khoảng đệm là nhìn ra ngay. */
.home_layout_news {
  padding: 30px 0;
}

.home_layout_products .product_layout {
  padding: 10px;
  transition: 0.6s;
}

.home_layout_products .product_layout:hover {
  border: 2px solid var(--nv-primary);
}

@media (min-width: 700px) {
  .valign-center-lg {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
  }
  .pull-right-lg {
    float: right !important;
  }
}


/* news */

.blog .page-header {
  margin: 10px 0;
}

.blog .page-header a:hover {
  color: var(--nv-primary);
}

.page-header {
  margin: 20px 0 15px;
}

.page-header {
  background: url("../../images/homepage/line-top.png") bottom center no-repeat;
  margin: 40px 0 20px;
  padding-bottom: 10px;
}

.page-header.xcontent h1,
.page-header.xcontent h2 {
  font-family: var(--nv-font, roboto);
  font-weight: 100;
  font-size: 26px;
  color: #666666;
  margin-top: 0;
}

.page-header.xcontent h2 {
  font-family: var(--nv-font, roboto);
  font-weight: 100;
  font-size: 26px;
  color: #666666;
  margin-top: 0;
}