.c_menu_search {
  background-color: #fff;
}

/* Xoá phần đệm mặc định của Bootstrap; chiều cao thanh do quy tắc .myHeader ở
   cuối tệp quyết định.

   Không dùng !important như bản gốc: nó chặn luôn mọi quy tắc đặt sau, kể cả
   quy tắc của chính mình - đã mất công truy một lần vì chuyện này. */
.navbar {
  padding: 0;
}

.form-inline .nav-link {
  padding-right: 0 !important;
}

.company-name {
  border: 0 solid rgb(0 169 223);
  border-radius: 5px;
  font-size: 20px;
  font-weight: 600;
  padding: 6px 10px;
  color: rgb(85 85 85);
  margin: 0;
  text-align: center;
  line-height: 70px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  margin-top: 0 !important;
  z-index: 9999;
}

body.padd {
  margin-top: 200px;
}

.search-form {
  height: 42px;
  display: inline-block;
  border-radius: 7px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.search-form input[type="text"] {
  height: 37px;
  float: left;
  border: none;
  padding: 18px;
  font-size: 13px;
  border-radius: 72px;
  width: 80%;
  background: #eaeaea;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  outline-color: none;
  outline-style: none;
}

.search-form button {
  padding: 0 7px;
  float: left;
  background: none;
  border: none;
  line-height: 0;
  font-size: 14px;
  width: 37px;
  background-color: var(--nv-primary);
  color: #fff;
  border-radius: 56px;
  height: 37px;
  margin-left: -20px;
}

.search-form span {
  line-height: 37px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
  outline-color: none !important;
  outline-style: none;
}

input[type="text"] {
  height: 38px;
  border: 1px solid #959b99;
  padding: 0 10px;
}

.c_menu_cart i {
  font-size: 18px;
  color: #fff;
}

.c_menu_cart {
  color: #d9d9d9;
  font-size: 14px;
  margin-right: 20px;
  margin-top: 5px;
  line-height: 50px;
  float: right;
}

.c_menu_cart span:nth-child(3) {
  background: #B4D4E5;
  padding: 3px 10px;
  border-radius: 3px;
  color: #333;
}

a.c_menu_cart {
  color: #fff;
  text-decoration: none;
  margin: 0;
}

a.c_menu_cart:hover {
  color: rgb(255 228 0);
  text-decoration: none;
}

.navbar-dark .navbar-nav .nav-item {
  display: table-cell;
  text-align: center;

  padding: 0 5px 0px 5px;
}

.navbar-dark .navbar-nav .nav-item .logo {
  margin-top: -0px;
}

.navbar-dark .navbar-nav .nav-item:hover {
  /* Thanh menu giờ sáng hơn trước, nên trạng thái rê chuột phải đi xuống tông
     đậm chứ không đi lên tông nhạt - nhạt hơn nữa thì chữ trắng không đọc được. */
  background-color: var(--nv-primary-deep);
  color: yellow;
  border-radius: 5px;
}

.navbar-dark .navbar-nav .nav-item:hover .nav-link {
  color: yellow;
}

.navbar-dark .navbar-nav .nav-link {
  text-transform: uppercase;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.list-phone li {
  padding: 0 15px;
  position: relative;
}

.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.list-phone li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  height: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
  font-weight: bolder;
}

.navbar-dark .navbar-nav .nav-item.active .nav-link {
  color: #fff;
  font-weight: bolder;
}

.dropdown-item {
  font-size: 13px !important;
}

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }

  .c_menu_cart {
    float: right;
  }
}

.hotline-phone-ring-wrap {
  position: fixed;
  bottom: -40px;
  left: 0;
  z-index: 999999;
}

.text-hotline {
  color: #fff;
}

.hotline-phone-ring-wrap a:link,
.hotline-phone-ring-wrap a:active,
.hotline-phone-ring-wrap a:visited {
  color: #fff !important;
  padding: 0 !important;
}

.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 110px;
  height: 110px;
  cursor: pointer;
  z-index: 11;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transition: visibility 0.5s;
  left: 0;
  bottom: 0;
  display: block;
}

.hotline-phone-ring-circle {
  width: 85px;
  height: 85px;
  top: -20px;
  left: 10px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid var(--nv-primary);
  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

.hotline-phone-ring-circle-fill {
  width: 55px;
  height: 55px;
  top: -5px;
  left: 25px;
  position: absolute;
  background-color: rgba(255, 255, 255, .78);
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all 0.5s;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.hotline-phone-ring-img-circle {
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(15, 30, 45, .22);
  width: 33px;
  height: 33px;
  top: 7px;
  left: 37px;
  position: absolute;
  background-size: 20px;
  border-radius: 100%;
  border: 2px solid transparent;
  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotline-phone-ring-img-circle .pps-btn-img {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.hotline-phone-ring-img-circle .pps-btn-img img {
  width: 20px;
  height: 20px;
}

.hotline-bar {
  position: absolute;
  background-image: linear-gradient(to right, yellow, red);
  height: 40px;
  border: 2px solid #fff;
  width: 200px;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
  background-size: 100%;
  cursor: pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  z-index: 9;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 50px !important;
  left: 33px;
  bottom: 67px;
}

.hotline-bar > a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  text-indent: 50px;
  display: block;
  letter-spacing: 1px;
  line-height: 40px;
  font-family: Arial;
}

.hotline-bar > a:hover,
.hotline-bar > a:active {
  color: #fff;
}

@-webkit-keyframes phonering-alo-circle-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.5) skew(1deg);
    -webkit-opacity: 0.1;
  }

  30% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    -webkit-opacity: 0.5;
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    -webkit-opacity: 0.1;
  }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
  0% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.6;
  }

  100% {
    -webkit-transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.6;
  }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
  }
}

@media (max-width: 800px) {
  .language_mobile {
    display: block !important;
  }
  .hotline-bar {
    display: none;
  }
  .menu_duan,
  .dropdown-toggle::after {
    display: none !important;
  }

  .c_menu_cart {
    line-height: 40px;
  }

  .c_menu_cart .c_menu_search_form_text {
    display: none;
  }

  .form-inline a {
    width: 100%;
    margin-left: 0 !important;
  }

  .navbar-collapse {
    padding-left: 30px;
  }

  /* Menu di động mở ra phải có nền riêng. Ở trang chủ thanh điều hướng trong
     suốt, không có nền thì các mục menu nổi lơ lửng trên video, đọc rất khó.
     Nhắm vào .show của Bootstrap: lớp này chỉ có lúc menu đang mở. */
  .myHeader .navbar-collapse.show,
  .myHeader .navbar-collapse.collapsing {
    background: #fff;
    margin: 10px -15px -14px;
    padding: 10px 30px 16px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgba(15, 30, 45, .18);
  }

  /* Trang chủ đang để chữ menu màu trắng cho nổi trên ảnh; menu mở ra nền trắng
     nên phải trả chữ về màu tối, không thì trắng trên trắng. */
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .nav-link,
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .navbar-nav > li > a,
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .c_menu_cart,
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .c_menu_cart i,
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .sl-nav > ul > li > i,
  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .nv-lang-code {
    color: #17242f;
  }

  body.home .myHeader:not(.is-stuck) .navbar-collapse.show .nv-search-btn {
    color: var(--nv-primary);
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-meunu-language {
    left: 0 !important;
    right: unset !important;
    width: 100%;
  }
  .map iframe {
    max-width: 100%;
  }


  .navbar-dark .navbar-nav .nav-link {
    text-align: left;
  }


  .home-list-sector .home-sector-item {
    width: 100%;
  }

  .home-title {
    font-size: 26px;
  }

  #sync1.owl-theme .owl-prev,
  #sync1.owl-theme .owl-next {
    top: 40px;
  }

  .c_footer_main .bct-logo {
    text-align: left !important;
  }

  .c_footer_main .bct-logo img {
    width: 80px !important;
  }
}

/* footer */
.go-top {
  position: fixed;
  cursor: pointer;
  bottom: 30px;
  right: 30px;
  font-size: 25px;
  color: #ffffff;
  background-color: var(--nv-primary);
  z-index: 1;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 39px;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.go-top:hover {
  box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);
}

.c_footer_bg {
  border-bottom: 2px solid yellow;
  background-color: var(--nv-primary);
  padding: 5px 0;
  color: #ddd;
  font-size: 12px;
}

.c_footer_main .bct-logo {
  text-align: left;
}

.c_footer_main .bct-logo img {
  width: 80px;
}

.c_footer_main {
  background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1),
      rgba(var(--nv-primary-rgb), 0.73)
    ),
    url("../../images/homepage/banner1.jpg");
  padding: 30px 0;
}

.c_footer_main .row {
  background: rgba(var(--nv-primary-rgb), 0.5);
  padding: 20px 0;
  border-radius: 20px;
}

.c_footer_main .company {
  line-height: 28px;
  font-size: 16px;
  padding: 20px 0;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
}

.c_footer_main .title {
  font-weight: bold;
  color: #fff;
  font-size: 16px;
}

.c_footer_main .content a,
.c_footer_main .content {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  line-height: 24px;
}

.c_footer_key {
  color: #fff;
  font-size: 14px;
}

#i_modal_map {
  z-index: 99999;
}

.navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-meunu-language {
  left: unset;
  right: 0;
}

/* search */
.box-search-result {
  width: calc(100% - 1px) !important;
  min-height: 38px;
  max-height: 500px;
  display: none;
  padding: 4px 0 0;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  position: absolute;
  top: 34px !important;
  left: 0 !important;
  z-index: 9999;
  overflow: hidden;
  overflow-y: auto;
}

.box-search-result.search-autocomplete .search_suggest_data {
  width: 100%;
  margin-bottom: 0;
}

.box-search-result.search-autocomplete .search_suggest_data > li {
  display: flex;
  padding: 5px 0;
  border-top: 1px solid #eee;
}

.box-search-result.search-autocomplete .search_suggest_data li:hover {
  background-color: #f8f8f8;
}

.box-search-result.search-autocomplete
  .search_suggest_data
  .search_suggest_data_image {
  width: 25%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 0;
  padding: 5px;
}

.box-search-result.search-autocomplete
  .search_suggest_data
  .search_suggest_data_image
  img {
  width: auto;
  max-width: unset;
  height: 100%;
  max-height: unset;
}

.box-search-result.search-autocomplete
  .search_suggest_data
  .search_suggest_data_description {
  width: 75%;
  height: 80px;
  float: left;
  margin: 0;
  padding: 5px 5px 5px 0;
}

.box-search-result.search-autocomplete .search_suggest_data_title {
  min-height: unset;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.box-search-result.search-autocomplete .search_suggest_data_price span {
  float: left;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #d70018;
}

/* Styles for wrapping the search box */

.main {
  width: 50%;
  margin: 50px auto;
}

/* Bootstrap 4 text input with search icon */

.navbar.sticky .navbar-collapse {
  padding: 5px 0;
}

.has-search.form-group {
  margin-right: 20px;
  position: relative;
  width: 345px;
}

.has-search.form-group input {
  width: 100%;
}

.has-search .form-control {
  padding-left: 2.375rem;
}

.has-search input::placeholder {
  color: #999;
  font-size: 14px;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
}

.myHeader li:hover > .menu_duan {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/*
 * Menu Dự án nhiều cột.
 *
 * Trước đây không có ông cha nào định vị nên nó neo vào khung ban đầu của trang
 * - tức là đứng yên ở đầu tài liệu. Cuộn xuống rồi mở menu này thì nó hiện tận
 * trên đầu trang, không ai thấy. Nay mục menu đã position:relative nên nó bám
 * đúng vào mục Dự án; bề rộng đổi từ 100% (giờ sẽ là 100% của mục menu, quá
 * hẹp) sang vừa đúng nội dung.
 */
.myHeader .menu_duan {
  padding-top: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 380px;
  max-width: calc(100vw - 40px);
  z-index: 100;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu_duan > ul {
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 30, 45, .16);
  text-align: left;
  z-index: 100;
  padding: 20px 22px;
  line-height: 1.9;
}

/* Cột co theo nội dung, không chia 25% cứng: khung menu giờ rộng vừa đúng nội
   dung nên chia phần trăm sẽ bóp cột lại và chữ xuống dòng giữa chừng. */
.menu_duan > ul > li {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  padding-right: 30px;
  border: none !important;
}

.menu_duan > ul > li:last-child {
  padding-right: 0;
}

ul,
li {
  list-style: none;
  padding: 0;
}

/* Chữ trong mọi menu đổ xuống: nền của chúng là màu TRẮNG ở mọi trạng thái của
   thanh, nên màu chữ khai báo thẳng ở đây chứ không ăn theo màu thanh. */
.myHeader .navbar-nav li ul li a,
.myHeader .menu_duan ul li a {
  color: #17242F;
}

/*
 * Tiêu đề cột trong menu nhiều cột.
 *
 * Dùng tông đậm chứ không phải màu chủ đạo: màu chủ đạo trên nền trắng chỉ đạt
 * tương phản 2,43, tông đậm được 4,74.
 *
 * Cần thêm .navbar-nav vào bộ chọn. Quy tắc màu chữ chung ở trên là
 * `.myHeader .navbar-nav li ul li a` - 2 lớp + 4 phần tử, cao điểm hơn
 * `.myHeader .menu_duan > ul > li > a` (2 lớp + 3 phần tử), nên nó thắng bất kể
 * viết trước hay sau. Thêm một lớp nữa mới đủ điểm.
 */
.myHeader .navbar-nav .menu_duan > ul > li > a {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 16px;
  color: var(--nv-primary-deep);
  text-decoration: none;
}

/* Rê chuột thì cả dòng sáng lên, thay cho kiểu gạch chân cũ. */
.menu_duan > ul > li > ul > li > a {
  display: block;
  padding: 5px 10px;
  margin-left: -10px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.myHeader .navbar-nav li ul li a:hover,
.menu_duan > ul > li > ul > li > a:hover {
  background: rgba(var(--nv-primary-rgb), .12);
  color: var(--nv-primary-deep);
  text-decoration: none;
}

.menu_duan > ul > li > ul {
  padding-left: 2px;
  padding-top: 5px;
}

/* Menu con: một thẻ trắng bo góc, đổ bóng nhẹ - thay cho kiểu cũ viền vàng 2px
   trên đầu và mỗi dòng một đường kẻ xám.

   top: 100% chứ không phải một con số px: chiều cao mục menu đổi theo cỡ logo
   và bề rộng màn hình, đặt số cứng là menu con chồng lên thanh hoặc rơi hụt. */
.collapse > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 270px;
  padding: 8px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 30, 45, .16);

  /* Không dùng display:none để còn chuyển động được khi mở. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.collapse > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.collapse > ul > li > ul > li {
  width: auto;
  border: 0;
  background: none;
  text-align: left;
  line-height: 1.45;
  padding: 0;
}

/* Đệm đặt trên thẻ a để cả dòng đều bấm được và đều sáng lên khi rê chuột. */
.collapse > ul > li > ul > li > a {
  display: block;
  padding: 9px 18px;
  transition: background-color .15s ease, color .15s ease;
}

.collapse > ul > li > ul > li > a:hover {
  background: rgba(var(--nv-primary-rgb), .12);
  text-decoration: none;
}

.language_mobile {
  display: none;
}

.sl-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  line-height: 34px;
}

.sl-nav li {
  cursor: pointer;
}

.sl-nav li ul {
  display: none;
}

.sl-nav li:hover ul {
  position: absolute;
  top: 29px;
  right: -15px;
  display: block;
  background: #fff;
  width: 125px;
  padding-top: 0px;
  z-index: 999999;
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.sl-nav li:hover .triangle {
  position: absolute;
  top: 15px;
  right: -10px;
  z-index: 10;
  height: 14px;
  overflow: hidden;
  width: 30px;
  background: transparent;
}

.sl-nav li:hover .triangle:after {
  content: "";
  display: block;
  z-index: 20;
  width: 15px;
  transform: rotate(45deg) translateY(0px) translatex(10px);
  height: 15px;
  background: #fff;
  border-radius: 2px 0px 0px 0px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 10px 10px;
  padding-bottom: 0;
  z-index: 9999999;
  font-size: 15px;
  color: #3c3c3c;
}

.sl-nav li ul li:last-of-type {
  padding-bottom: 10px;
}

.sl-nav li ul li span {
  padding-left: 5px;
}

.sl-nav li ul li span:hover,
.sl-nav li ul li span.active {
  color: #146c78;
}

/* Nút gọi nhanh trên thanh điều hướng, đặt cạnh giỏ hàng.
   Nền trắng trên thanh xanh đậm để nổi lên như một nút hành động. */
.nv-call-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--nv-primary);
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.nv-call-cta:hover,
.nv-call-cta:focus {
  background: #E9F3F8;
  color: var(--nv-primary-deep);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.nv-call-cta i { font-size: 14px; }

/* Hàng chứa nút mở menu và nút gọi trên di động.
   Xếp từ trái sang thay vì dồn hai đầu: trang này có tràn ngang nhẹ ở khổ hẹp,
   dồn về phải sẽ đẩy nút ra ngoài viền màn hình. */
.nv-navbar-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 15px;
}

@media (max-width: 991px) {
  .nv-call-cta--mobile {
    margin: 0;
    padding: 6px 14px;
    font-size: 14px;
    flex: 0 1 auto;
    min-width: 0;
  }
}

@media (max-width: 400px) {
  /* Màn hẹp thì chỉ giữ biểu tượng cho khỏi tràn */
  .nv-call-cta--mobile span { display: none; }
  .nv-call-cta--mobile { padding: 8px 12px; }
}

/* Nút chọn ngôn ngữ ở topbar: chỉ cờ + mã (VN/EN) */
.nv-lang-current { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.nv-lang-current svg { display: block; border-radius: 2px; }
.nv-lang-code { font-weight: 600; letter-spacing: .3px; }

/* ---------------------------------------------------------------------------
   Thanh điều hướng: luôn nền trắng chữ đậm.

   Website gốc để thanh menu nền xanh chữ trắng. Với màu chủ đạo #1AB0FB thì chữ
   trắng chỉ đạt tương phản 2,43 - dưới chuẩn WCAG AA (4,5). Nền trắng chữ
   #17242F đạt 15,79, đọc thoải mái ở mọi điều kiện ánh sáng.

   Cuộn qua khỏi vị trí ban đầu, thanh tách khỏi luồng trang và đứng yên trên
   đỉnh màn hình. Lúc đó chỉ thêm bóng đổ chứ không đổi màu nữa.
   --------------------------------------------------------------------------- */

body .myHeader.navbar {
  background-color: #fff !important;
  border-bottom: 1px solid rgba(15, 30, 45, .09);
  transition: box-shadow .28s ease;
}

/* Chỗ giữ chân: thanh menu rời khỏi luồng trang thì phần dưới sẽ nhảy lên đúng
   bằng chiều cao của nó. Ô này chiếm chỗ trống đó, chiều cao do JavaScript đặt. */
.nv-nav-spacer {
  display: none;
}

.nv-nav-spacer.is-active {
  display: block;
}

body .myHeader.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  border-bottom-color: transparent;
  box-shadow: 0 2px 16px rgba(15, 30, 45, .13);
}

/* --- Chữ và biểu tượng --- */

.myHeader .navbar-nav .nav-link,
.myHeader .navbar-nav > li > a,
.myHeader a.c_menu_cart,
.myHeader .c_menu_cart {
  color: #17242F;
}

.myHeader .navbar-nav .nav-item:hover .nav-link,
.myHeader .navbar-nav .nav-link:hover,
.myHeader a.c_menu_cart:hover {
  color: var(--nv-primary-deep);
}

/*
 * Nền khi rê chuột: mảng màu nhạt, không tô đặc.
 *
 * Viết liền .myHeader.navbar chứ không cách ra rồi thêm .navbar-dark: chính thẻ
 * <nav> vừa mang .myHeader vừa mang .navbar-dark, viết cách ra thành ra đòi một
 * phần tử .navbar-dark nằm BÊN TRONG - không có, nên quy tắc chết lặng lẽ.
 */
.myHeader .navbar-nav .nav-item:hover {
  background-color: rgba(var(--nv-primary-rgb), .12);
}

.myHeader .navbar-nav .nav-item:hover > .nav-link,
.myHeader .navbar-nav .nav-item:hover > a {
  color: var(--nv-primary-deep);
}

/* Mục đang xem: cùng màu với mọi mục, chỉ khác ở nét đậm. */
.myHeader .navbar-nav .nav-item.active .nav-link {
  color: #17242F;
}

.myHeader .navbar-toggler {
  border-color: rgba(23, 36, 47, .28);
}

/* Ba vạch của nút mở menu là ảnh SVG nét trắng do Bootstrap gán cho navbar-dark;
   trên thanh trắng thì vô hình. Vẽ lại bằng nét đậm. */
.myHeader .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2317242F' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Biểu tượng giỏ hàng vốn tô trắng cho nổi trên thanh xanh; thanh đã trắng thì
   phải đổi, không thì nó vô hình. */
.myHeader .c_menu_cart i {
  color: var(--nv-primary);
}

.myHeader a.c_menu_cart:hover i {
  color: var(--nv-primary-deep);
}

/* Nút gọi trên thanh trắng: nền màu chủ đạo, chữ trắng. */
.myHeader .nv-call-cta {
  background: var(--nv-primary);
  color: #fff;
}

.myHeader .nv-call-cta:hover {
  background: var(--nv-primary-deep);
  color: #fff;
}

/* Menu con luôn nền trắng chữ đậm, xem phần kiểu menu con ở trên. */

/* Trên máy nhỏ, menu bung ra khi thanh đang cố định có thể dài hơn màn hình. */
@media (max-width: 991px) {
  .myHeader.is-stuck .navbar-collapse {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .myHeader.navbar { transition: none; }
}

/* ---------------------------------------------------------------------------
   Logo và cân đối thanh điều hướng.

   Kích thước logo trước đây viết thẳng vào thuộc tính style của thẻ img trong
   header.php - đổi logo là phải sửa PHP. Nay để ở đây, một dòng.
   --------------------------------------------------------------------------- */

/*
 * Ràng buộc theo CHIỀU CAO, không phải chiều rộng.
 *
 * Ràng theo chiều rộng thì logo hình gì cũng ra chiều cao khác nhau: logo vuông
 * thành cao lêu nghêu, logo chữ dài thành lùn tịt - mà chiều cao logo lại quyết
 * định chiều cao cả thanh menu. Ràng theo chiều cao thì thanh giữ nguyên độ cao
 * dù người dùng tải lên logo hình gì.
 *
 * max-width chặn logo chữ quá dài đẩy menu đi - đã thử logo chữ ngang 600x120:
 * để rộng quá thì mục "Liên hệ" bị gãy hai dòng và nút ngôn ngữ tụt xuống.
 * object-fit: contain để khi chạm mức chặn thì ảnh thu vào vừa khung chứ không
 * bị kéo méo.
 */
.myHeader .logo {
  height: 60px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}

/* Logo cao hơn hẳn dòng chữ, nên phải căn giữa theo chiều dọc; không thì chữ
   menu bị đẩy lên sát mép trên. */
.myHeader .navbar-nav {
  align-items: center;
}

/* Khoảng thở giữa logo và mục menu đầu tiên. Cần rộng hơn khoảng cách giữa các
   mục menu với nhau, để mắt tách được logo ra khỏi dãy chữ.
   Dùng clamp: logo chữ dài chiếm gần hết mức max-width thì khoảng này tự co lại
   thay vì đẩy menu vỡ hàng. */
.myHeader .navbar-nav > li:first-child {
  margin-right: clamp(16px, 3vw, 48px);
}

/* Tên mục menu không được gãy giữa chừng: thà thanh chật còn hơn "Liên hệ" nằm
   hai dòng làm lệch cả hàng. */
.myHeader .navbar-nav > li > a {
  white-space: nowrap;
}

/* Nhóm bên phải (nút gọi, giỏ hàng, ngôn ngữ) luôn nằm trên một hàng. */
.myHeader .form-inline {
  flex-wrap: nowrap;
}

/* Mốc định vị cho menu con: có dòng này thì menu con dùng được top:100% và luôn
   rơi ngay dưới đúng mục của nó, dù thanh cao bao nhiêu. */
.myHeader .navbar-nav > li {
  position: relative;
}

/* Bỏ topbar nên thanh điều hướng cao lên, gánh luôn phần khoảng trống đó. */
/* Thanh điều hướng không còn phần đệm riêng: chiều cao giờ do chính dòng chữ và
   logo quyết định, thanh gọn lại. */
.myHeader {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 991px) {
  /* Trên điện thoại trả lại chút đệm: bỏ hết thì thanh chỉ còn 41px, nút mở menu
     sát mép trên dưới, ngón tay dễ bấm trượt. */
  .myHeader {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .myHeader .logo {
    height: 46px;
    max-width: 190px;
  }

  .myHeader .navbar-nav > li:first-child {
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
   Trang chủ: đầu trang trong suốt, đè lên slide.

   Topbar và thanh điều hướng nổi trên ảnh slide chứ không chiếm chỗ riêng, nên
   slide bắt đầu ngay từ mép trên màn hình. Rê chuột vào thanh thì nó chuyển
   thành nền trắng để đọc menu cho rõ; cuộn xuống thì dùng luôn trạng thái dính
   nền trắng như mọi trang khác.
   --------------------------------------------------------------------------- */

/* Mặc định chỉ hiện logo bản chữ màu; bản trắng để dành cho thanh trong suốt. */
.myHeader .nv-logo-white {
  display: none;
}

/*
 * Trang chủ: thanh điều hướng nổi lên trên slide, không chiếm chỗ riêng - slide
 * bắt đầu ngay từ mép trên màn hình và chạy lên phía sau thanh.
 */
body.home .c_menu_search {
  position: relative;
  z-index: 1020;
}

body.home .myHeader.navbar:not(.is-stuck) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/*
 * Lớp phủ tối rất nhẹ, đậm ở mép trên rồi tan hết xuống dưới.
 *
 * Slide là ảnh do người biên tập tự chọn, có tấm sáng trắng - chữ trắng đặt
 * thẳng lên đó thì không đọc nổi. Lớp này đủ để giữ chữ rõ mà vẫn thấy ảnh
 * xuyên qua, không thành một dải màu đặc.
 */
body.home .myHeader.navbar:not(.is-stuck)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 26, 40, .38), rgba(6, 26, 40, 0));
  pointer-events: none;
  z-index: -1;
  transition: opacity .25s ease;
}

body.home .myHeader.navbar:not(.is-stuck):hover::after {
  opacity: 0;
}

body.home .myHeader.navbar:not(.is-stuck) {
  background-color: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* --- chữ trắng trên nền ảnh --- */

body.home .myHeader:not(.is-stuck) .navbar-nav .nav-link,
body.home .myHeader:not(.is-stuck) .navbar-nav > li > a,
body.home .myHeader:not(.is-stuck) .navbar-nav .nav-item.active .nav-link,
body.home .myHeader:not(.is-stuck) a.c_menu_cart,
body.home .myHeader:not(.is-stuck) .c_menu_cart,
body.home .myHeader:not(.is-stuck) .c_menu_cart i,
body.home .myHeader:not(.is-stuck) .nv-search-btn {
  color: #fff;
}

/* Nền khi rê chuột cũng phải đổi: mảng xanh nhạt trên ảnh thì gần như vô hình. */
body.home .myHeader:not(.is-stuck) .nv-search-btn:hover,
body.home .myHeader:not(.is-stuck) .nv-search-btn:focus {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

body.home .myHeader:not(.is-stuck) .nv-logo-color {
  display: none;
}

body.home .myHeader:not(.is-stuck) .nv-logo-white {
  display: block;
}

/* Nút gọi đảo lại: nền trắng chữ màu, cho nổi trên ảnh. */
body.home .myHeader:not(.is-stuck) .nv-call-cta {
  background: #fff;
  color: var(--nv-primary);
}

body.home .myHeader:not(.is-stuck) .navbar-toggler {
  border-color: rgba(255, 255, 255, .55);
}

body.home .myHeader:not(.is-stuck) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- rê chuột vào thanh: trả về nền trắng chữ đậm ---
   Viết sau khối trong suốt ở trên để thắng ở cùng độ ưu tiên. Menu con đổ xuống
   nằm bên trong thẻ <nav> nên khi chuột đi vào menu con, thanh vẫn giữ nền
   trắng. */

body.home .myHeader.navbar:not(.is-stuck):hover {
  background-color: #fff !important;
  box-shadow: 0 2px 16px rgba(15, 30, 45, .13);
}

body.home .myHeader:not(.is-stuck):hover .navbar-nav .nav-link,
body.home .myHeader:not(.is-stuck):hover .navbar-nav > li > a,
body.home .myHeader:not(.is-stuck):hover .navbar-nav .nav-item.active .nav-link,
body.home .myHeader:not(.is-stuck):hover a.c_menu_cart,
body.home .myHeader:not(.is-stuck):hover .c_menu_cart {
  color: #17242F;
}

body.home .myHeader:not(.is-stuck):hover .c_menu_cart i,
body.home .myHeader:not(.is-stuck):hover .nv-search-btn {
  color: var(--nv-primary);
}

/* Rê thẳng vào nút thì thanh cũng đang được rê, nên quy tắc này phải viết lại
   cả nền lẫn màu - không thì nó ăn quy tắc nền trắng mờ của trạng thái ảnh. */
body.home .myHeader:not(.is-stuck):hover .nv-search-btn:hover,
body.home .myHeader:not(.is-stuck):hover .nv-search-btn:focus {
  background: rgba(var(--nv-primary-rgb), .12);
  color: var(--nv-primary-deep);
}

body.home .myHeader:not(.is-stuck):hover .navbar-nav .nav-item:hover > .nav-link,
body.home .myHeader:not(.is-stuck):hover .navbar-nav .nav-item:hover > a {
  color: var(--nv-primary-deep);
}

body.home .myHeader:not(.is-stuck):hover .nv-logo-color {
  display: block;
}

body.home .myHeader:not(.is-stuck):hover .nv-logo-white {
  display: none;
}

body.home .myHeader:not(.is-stuck):hover .nv-call-cta {
  background: var(--nv-primary);
  color: #fff;
}

body.home .myHeader:not(.is-stuck):hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2317242F' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Màn hình nhỏ: menu bung ra là một mảng lớn, phải có nền đặc mới đọc được. */
@media (max-width: 991px) {
  body.home .myHeader.navbar:not(.is-stuck) {
    background-color: rgba(15, 30, 45, .35) !important;
  }
}

/* ---------------------------------------------------------------------------
   Nút gọi nổi ở góc dưới trái.

   Website gốc để nút màu đỏ - màu này không nằm trong bảng màu của site và đập
   vào mắt hơn cả nội dung. Nay là nền trắng, biểu tượng màu chủ đạo, có bóng đổ
   để nổi trên nền trang.
   --------------------------------------------------------------------------- */

.hotline-phone-ring-img-circle i {
  color: var(--nv-primary);
  font-size: 16px;
}

.hotline-bh a#button,
.hotline-bh a#button:hover {
  color: var(--nv-primary);
  text-decoration: none;
}

/* Vòng sóng lan ra ngoài: cùng tông với biểu tượng, mờ dần. */
.hotline-phone-ring-circle {
  border-color: rgba(var(--nv-primary-rgb), .85);
}

@media (prefers-reduced-motion: reduce) {
  .hotline-phone-ring-circle,
  .hotline-phone-ring-circle-fill,
  .hotline-phone-ring-img-circle {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Giỏ hàng và nút đổi ngôn ngữ ở thanh điều hướng.

   Giỏ hàng chỉ còn biểu tượng, số lượng là một chấm tròn nhỏ ở góc trên phải -
   trước đây là chữ "Giỏ hàng" kèm một ô số vuông, chiếm chỗ mà không nói thêm
   được gì. Nút đổi ngôn ngữ chuyển từ topbar xuống đây, đứng cạnh giỏ hàng.
   --------------------------------------------------------------------------- */

.myHeader .c_menu_cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px 0 10px;
  line-height: 1;
  float: none;
  border-radius: 50%;
  transition: background-color .15s ease;
}

.myHeader .c_menu_cart:hover {
  background: rgba(var(--nv-primary-rgb), .12);
}

.myHeader .c_menu_cart i {
  font-size: 19px;
}

/* Chấm số: đè lên góc trên phải của biểu tượng. */
.nv-cart-count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E8552F;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Thanh trong suốt ở trang chủ: viền chấm số phải theo nền tối, không thì lộ
   một vòng trắng giữa ảnh. */
body.home .myHeader:not(.is-stuck):not(:hover) .nv-cart-count {
  box-shadow: 0 0 0 2px rgba(6, 26, 40, .45);
}

/* --- nút đổi ngôn ngữ --- */

.myHeader .language {
  margin-left: 6px;
}

.myHeader .sl-nav > ul {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.myHeader .nv-lang-current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.myHeader .sl-nav > ul > li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .15s ease;
}

.myHeader .sl-nav > ul > li:hover {
  background: rgba(var(--nv-primary-rgb), .12);
}

/* Danh sách xổ xuống bám vào nút thay vì vào topbar như trước.
 *
 * Không dùng display: none/block như bản gốc. Hai lý do, và cả hai đều làm nút
 * này rất khó bấm:
 *   - display không hoãn được, nên chuột vừa rời khỏi nút là danh sách biến mất
 *     ngay, không kịp rê xuống.
 *   - giữa nút và danh sách có khe hở 4px; đi qua khe đó là mất :hover.
 * Nên: luôn dựng sẵn danh sách rồi ẩn bằng opacity + visibility (hoãn được), và
 * bắc một dải trong suốt che kín khe hở.
 */
.myHeader .sl-nav li ul {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 30, 45, .16);
  /* Nền, bề rộng và z-index vốn nằm trong quy tắc :hover của bản gốc. Giờ danh
     sách luôn tồn tại và chỉ mờ đi, nên phải đặt ở trạng thái thường - để trong
     :hover thì lúc mờ dần nó mất nền ngay, nhìn như giật một cái. */
  background: #fff;
  width: 125px;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  /* Rời chuột thì đợi 0,25s mới bắt đầu ẩn - đủ để rê chéo xuống danh sách mà
     không bị mất. visibility đổi sau khi mờ hẳn, không thì nó biến mất trước. */
  transition:
    opacity .15s ease .25s,
    transform .15s ease .25s,
    visibility 0s linear .4s;
}

/* Dải trong suốt lấp khe 4px giữa nút và danh sách, để rê chuột xuống không đứt
   :hover. Nằm trong chính danh sách nên lúc danh sách ẩn thì nó cũng ẩn theo,
   không chắn mất thứ gì phía sau. */
.myHeader .sl-nav li ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* :focus-within để đi bằng bàn phím cũng mở được. */
.myHeader .sl-nav li:hover ul,
.myHeader .sl-nav li:focus-within ul {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.myHeader .sl-nav li ul a {
  color: #17242F;
}

.myHeader .sl-nav li ul a:hover {
  color: var(--nv-primary-deep);
  text-decoration: none;
}

/* Trên thanh trong suốt ở trang chủ, chữ và mã ngôn ngữ phải trắng. */
body.home .myHeader:not(.is-stuck):not(:hover) .nv-lang-code,
body.home .myHeader:not(.is-stuck):not(:hover) .sl-nav > ul > li > i {
  color: #fff;
}

@media (max-width: 991px) {
  .myHeader .c_menu_cart { margin-left: 0; }
  .myHeader .language { margin-left: 0; }
}