.header {
  background-color: var(--color-header-bg);
  color: var(--color-header);
  min-height: var(--header-height);
  padding: var(--spacing-2) 0;
  z-index: 2000;
  width: 100%;
  transition: all .3s ease;
}

.header-logo-transparent {
  display: none;
}

.header.header-transparent .header-logo-transparent {
  display: block;
}

.header.header-transparent .header-logo {
  display: none;
}

.header.header-transparent {
  background-color: transparent;
  color: var(--color-transparent-header);
}

.logo-wrapper {
  max-width: var(--logo-width);
}

.header-icon .icon {
  font-size: 2rem;
}

.header-icon .icon-cart {
  font-size: 2.4rem;
}

.header:hover {
  background-color: var(--color-header-bg);
  color: var(--color-header);
}

.header:hover .header-logo {
  display: block
}

.header:hover .header-logo-transparent {
  display: none;
}

.cart-count {
  color: var(--color-cart-bubble);
  background-color: var(--color-cart-bubble-bg);
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.8rem;
  right: 4px;
  top: 2px;
}

.search-bar form {
  --search-button-size: 3.6rem;
  /* --search-button-width: 6.4rem; */
  /* --search-button-height: 100%; */
  /* padding-right: calc(var(--search-button-size) + 0.8rem) */
}

.header-search {
  max-width: 100%;
  width: 100%;
}

@media (min-width: 1024px) {
  .header-search {
    max-width: calc(100% - 3.6rem);
    width: 100%;
  }
}

header .search-bar .form-select {
  max-width: clamp(16rem, 12.5vw, 17.5rem);
  margin-right: 1.2rem;
  padding: 0;
  padding-right: 1.2rem;
  border-radius: 0;
  border-right: 1px solid var(--color-neutral-100) !important;
  --tw-ring-color: transparent;
  border: none;
}

.search-bar .search-button {
  width: var(--search-button-width, var(--search-button-size));
  height: var(--search-button-height, var(--search-button-size));
  font-size: 2rem;
}

header .search-dropdown {
  box-shadow: 0px 2.8rem 6.4rem 0px rgba(0, 0, 0, 0.2);
  display: none;
}

header .search-bar:has(input:focus) .search-dropdown {
  display: table;
}

.sub-header {
  background-color: var(--color-sub-header-bg);
  color: var(--color-sub-header);
}

header .search-bar .form-select {
  padding-left: 4px;
  padding-right: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.header.active:not(.header-transparent) {
  box-shadow: 0px -11px 20px 3px rgba(0, 0, 0, 0.2);
}

.header.active {

  position: sticky;
  position: -webkit-sticky;
  -webkit-animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.header.header-has-transparent ~ main {
  margin-top: calc(var(--header-height) * -1);
}

@media (min-width: 1271px) {
  .header .logo-wrapper {
    transition: all 0.3s 0.1s ease;
    /* transform: translateX(-4.4rem); */
  }

  .header .menu-opener {
    /* transform: scale(0); */
    transition: transform 0.3s ease-out;
    /* display: block; */
  }

  .header.active .logo-wrapper {
    transform: translateX(0);
  }

  .header.active .menu-opener {
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .header {
    padding: var(--spacing-2) 0;
  }
}

.navigation-wrapper {
  height: 4.8rem;
}

.navigation-header .navigation-vertical {
  width: 100%;
  color: var(--color-foreground);
  z-index: 2;
  top: 100%;
}

.submenu {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--navigation-width));
  width: 100%;
  height: 100%;
  background-color: var(--color-background);
  z-index: 1;
  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
  display: none;
}

.navigation-horizontal-wrapper {
  /* KHÔNG kẹp 4.8rem: mục menu cao 5.5rem (đệm 1.4rem + dòng chữ), phần thừa bị
     `overflow: hidden` cắt mất ~7px đáy — mũi tên xổ xuống bị khuyết một góc.
     Bỏ kẹp thì wrapper cao đúng nội dung, header chỉ tăng 1px. */
  max-height: none;
  margin-inline: auto;
}

.navigation-horizontal {
  /* Dải menu KHÔNG tự cắt: việc cắt do wrapper (overflow-x: clip) đảm nhiệm.
     Nếu đặt overflow ở đây thì cửa sổ cắt trượt theo transform của thẻ cha, làm
     vùng nhìn thấy hẹp dần theo mức đã cuộn. Cũng nhờ vậy không còn thanh cuộn
     hệ thống — menu cuộn bằng cặp nút mũi tên. */
  overflow: visible;
  display: flex;
  flex-direction: row;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.navigation-horizontal::-webkit-scrollbar {
  display: none;
}


.navigation-arrows {
  display: none;
}

.navigation-horizontal .submenu {
  width: auto;
  top: initial;
  right: initial;
  bottom: initial;
  left: inherit;
  height: auto;
  width: 240px;
  color: var(--color-foreground);
}

.navigation-horizontal .submenu__list {
  background: var(--color-background);
  overflow: auto;
}

.navigation--horizontal .menu-item .submenu:hover,
.navigation--horizontal .menu-item:hover .submenu {
  /* display: block; */
  z-index: 900;
}

.navigation-horizontal .default .submenu__item--main {
  padding: var(--spacing-2) var(--spacing-4);
  font-weight: 500;
}

.navigation-horizontal .submenu-col .submenu__item--main {
  padding: 0;
}

.navigation-horizontal .submenu__item--main a {
  /* display: block; */
}

.navigation-horizontal .submenu.mega-menu {
  width: 100%;
  left: 0;
  padding: 0 var(--container-padding);
}

.navigation-horizontal .mega-menu .submenu__list {
  display: grid;
  grid-template-columns: repeat(var(--megamenu-column, 4), 1fr);
  padding: var(--spacing-8) 0;
  grid-gap: 24px;
  /* Kẹp theo chiều cao màn hình để trên laptop màn thấp panel không phủ kín viewport
     (khách không còn chỗ rê chuột ra ngoài để đóng menu). Chừa 16rem cho header + lề. */
  max-height: min(40rem, calc(100vh - 16rem));
  overflow: hidden auto;
}

/* Menu xổ xuống thông thường (menu 2 cấp hoặc khi tắt mega menu).
   KHÔNG đặt position: relative cho .menu-item: khối chứa của .submenu khi đó nằm
   trong .navigation-horizontal-wrapper (overflow: hidden) và panel bị cắt mất.
   Giữ khối chứa là <header class="header relative">; vị trí ngang do
   defer-scripts.js tính rồi ghi vào biến --submenu-left (bù phần menu đã bị cuộn
   ngang bằng margin-left âm — vị trí tĩnh mặc định bị lệch đúng bằng lượng cuộn). */
/* Giá trị dự phòng phải là `auto` (vị trí tĩnh — ngay dưới mục menu), KHÔNG phải 0.
   defer-scripts.js chỉ nạp sau tương tác đầu tiên nên trước đó biến --submenu-left
   chưa được đặt; nếu dự phòng là 0 thì panel nhảy về sát mép trái header. */
.navigation-horizontal .submenu.default {
  left: var(--submenu-left, auto);
  right: auto;
}

/* Panel KHÔNG có menu cấp 3: giữ cuộn dọc + kẹp chiều cao như thiết kế cũ. */
.navigation-horizontal .submenu.default:not(:has(.submenu__col)) {
  overflow-y: auto;
  max-height: min(40rem, calc(100vh - 16rem));
}

/* Panel CÓ menu cấp 3 (dropdown đổ tầng): overflow bắt buộc phải visible, nếu không
   panel cấp 3 đặt ở left: 100% bị cắt (overflow-y: auto kéo theo overflow-x: auto). */
.navigation-horizontal .submenu.default:has(.submenu__col),
.navigation-horizontal .submenu.default:has(.submenu__col) .submenu__list {
  overflow: visible;
  max-height: none;
}

/* Hàng cấp 2 có con = mốc định vị cho panel cấp 3. Rule này nằm BÊN TRONG panel nên
   position: relative ở đây an toàn, không đổi khối chứa của .submenu. */
.navigation-horizontal .submenu.default .submenu__col {
  position: relative;
}

.navigation-horizontal .submenu.default .submenu__col > .submenu__item--main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  /* Cùng đệm với hàng cấp 2 không có con (rule .default .submenu__item--main) để
     hai loại hàng thẳng hàng nhau và không dính mép panel. */
  padding: var(--spacing-2) var(--spacing-4);
}

/* Mũi tên báo "có menu con" chỉ dùng cho dropdown thường; mega-menu trải phẳng
   sẵn nên phải ẩn đi. */
.submenu__col-arrow {
  display: none;
  flex: none;
  font-size: 1.2rem;
}

.navigation-horizontal .submenu.default .submenu__col-arrow {
  display: inline-flex;
}

/* Panel cấp 3 bay ra bên phải hàng cấp 2 */
.navigation-horizontal .submenu.default .submenu__col > ul {
  position: absolute;
  left: 100%;
  top: 0;
  width: 24rem;
  margin-top: 0;
  /* Đệm dọc đặt ở panel, đệm ngang đặt ở từng hàng để vùng bấm trải hết bề ngang. */
  padding: var(--spacing-2) 0;
  background: var(--color-background);
  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0.1s ease-out;
  max-height: min(40rem, calc(100vh - 16rem));
  overflow-y: auto;
  z-index: 1;
}

/* Hàng cấp 3: đệm riêng cho từng hàng. Selector đủ đặc hiệu (5 class) để thắng rule
   `.submenu__list .submenu__item:not(.submenu__item--main)+.submenu__item{margin-top}`
   bên dưới — nếu không sẽ vừa có đệm vừa có margin, khoảng cách bị gấp đôi. */
.navigation-horizontal .submenu.default .submenu__col > ul > .submenu__item {
  padding: var(--spacing-2) var(--spacing-4);
  margin-top: 0;
}

.navigation-horizontal .submenu.default .submenu__col:hover > ul {
  opacity: 1;
  visibility: visible;
}

/* Lật sang trái khi panel cấp 3 sẽ tràn khỏi mép phải viewport
   (class do defer-scripts.js gắn khi rê chuột vào hàng cấp 2). */
.navigation-horizontal .submenu.default .submenu__col--flip > ul {
  left: auto;
  right: 100%;
}

.mega-menu .submenu__item--main a {
  padding: 0;
}

.submenu__col ul {
  /* padding-left: var(--spacing-5); */
  margin-top: var(--spacing-4);
}

.submenu__item--main {
  /* font-size: 1.6rem; */
  font-weight: 600;
}

/* Chỉ mega-menu mới bỏ đệm hàng cấp 2 (lưới đã có grid-gap sẵn). Dropdown thường
   giờ cũng dùng .submenu__col nên KHÔNG được gom chung, nếu không chữ dính sát mép. */
.navigation-horizontal .mega-menu .submenu__col .submenu__item--main {
  padding: 0;
  /* font-size: 1.6rem; */
}

.submenu__list .submenu__item:not(.submenu__item--main)+.submenu__item {
  margin-top: var(--spacing-3);
}

.navigation-vertical ul+ul {
  border-top: 2px solid var(--color-neutral-50);
  margin-top: 2rem;
  padding-top: 2rem;
}

/* Không dùng scroll-snap: submenu không có phần tử scroll-snap-align nào nên
   `scroll-snap-type: y mandatory` làm trình duyệt kẹt cuộn, không xem được các mục
   cấp 2 nằm dưới khi màn hình thấp. */
.submenu {
  overflow-y: auto;
  scroll-behavior: smooth;
}

.submenu.default .submenu__list {
  padding-block: var(--spacing-2);
}

#menu-drawer .submenu[class*="mega-menu--"] {
  grid-template-columns: 100%;
}

@media (min-width: 1023px) {
  .navigation-vertical .submenu {
    right: auto;
    border-radius: 0 4px 4px 0;
    left: calc(var(--navigation-width) - 2px);
  }

  .index-container .navigation-vertical .submenu[class*="mega-menu--"] {
    width: calc(var(--container-width) - var(--navigation-width) - var(--container-padding) * 2);
    min-height: 450px;
    min-width: 100%;
  }
}

.navigation-vertical .section-card {
  padding: 0;
}

.navigation-vertical .container {
  padding: 0;
}

#menu-drawer .brand-list {
  --grid-col: repeat(2, 1fr) !important;
}

.navigation-vertical .mega-menu__inner {
  display: flex;
  gap: 1.2rem;
}

.mega-menu .heading {
  font-size: var(--font-size-h5);
}

#menu-drawer .mega-menu__inner {
  flex-direction: column;
}

.navigation-vertical .submenu__list .submenu__col {
  margin: 0;
}

.navigation-vertical .card-product__cta {
  display: block;
}

.submenu .product-promo-tag,
.submenu .card-product__cta,
.submenu .card-product__option-wrapper {
  display: none;
}

@media (max-width: 1023px) {
  .submenu {
    right: 0;
  }

  .navigation-vertical .menu-item.group>a {
    padding-right: 4.4rem;
    position: relative;
  }

  .navigation-vertical .menu-item.group>a>[data-toggle-submenu] {
    position: absolute;
    right: 0;
    width: 4.4rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .menu-active .submenu {
    display: block;
  }
}

.navigation-horizontal .submenu {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0.1s ease-out;
  display: block;
  top: 100% !important;
}

.navigation-horizontal .menu-item:hover .submenu {
  opacity: 1;
  visibility: visible;
}

/* Menu desktop mở bằng :hover nên khi panel phủ gần kín màn hình thấp, khách không
   còn chỗ rê chuột ra để đóng. Class này (do defer-scripts.js gắn khi bấm Esc hoặc
   click ra ngoài) tạm ép đóng cho tới khi chuột rời khỏi mục menu. */
.navigation-horizontal .menu-item.submenu-dismissed:hover>.submenu {
  opacity: 0;
  visibility: hidden;
}

/* Class do defer-scripts.js gắn là `overflow-menu` (không phải `overflow`) khi tổng
   chiều rộng các mục vượt khung → hiện 2 nút mũi tên cuộn menu. */
.navigation-horizontal-wrapper.overflow-menu+.navigation-arrows {
  display: flex;
}

.quick-search .search-loading,
.quick-search.loading .search-history-list,
.quick-search.loading .search-keywords,
.quick-search.loading .search-result,
.quick-search.loaded .search-keywords,
.quick-search.loaded .search-history-list {
  display: none;
}

.quick-search.loaded .search-result {
  display: block;
}

.search-loading .loading-icon,
.quick-search.loading .search-loading {
  display: flex;
  color: var(--color-neutral-100);
}

.loading>.loading-icon {
  display: flex;
}

.search-bar form {
  /* padding-right: 0; */
  overflow: hidden;
}

.search-dropdown {
  max-height: 100%;
  width: 100%;
  word-break: break-word;
  overflow: auto;
}

header .search-bar:has(input:focus) .search-dropdown,
header .search-dropdown:hover {
  display: block;
  max-height: 24rem;
  height: fit-content;
}

.search-input-group {
  padding-right: 4px;
}

.search-bar input {
  padding-right: 1.2rem;
}

.search-bar .search-button {
  right: 0;
  /* height: calc(100% + var(--spacing-3) * 2); */
  top: calc(-1 * var(--spacing-3));
  --search-button-width: 4rem;
  --search-bar-height: 4rem;
}

#search-drawer .search-bar .search-button {
  right: 0;
  height: 100%;
  top: 0;
}

#search-drawer .search-input-group {
  height: 4.4rem;
  border-radius: var(--rounded);
  border: 1px solid var(--color-neutral-50);
  display: flex;
  align-items: center;
  padding: 2px;
  padding-left: var(--spacing-2-5);
}

#search-drawer form {
  flex-direction: column;
  border: none;
  border-radius: 0px;
  padding: 0;
  gap: var(--spacing-3);
}

#search-drawer [name="query"] {
  display: block;
  width: 100%;
  background-color: var(--color-background);
  font-size: var(--font-size-body);
  line-height: 1;
}

#search-drawer .search-dropdown {
  position: relative;
}

#search-drawer .form-select {
  border: 1px solid var(--color-neutral-50);
  /* --rounded-input: var(--rounded-full); */
}

@media (max-width: 991px) {
  .submenu .submenu__list {
    max-height: calc(100% - 45px);
  }
}

/* Drawer mega-menu giờ có banner/sản phẩm NẰM DƯỚI danh sách danh mục → KHÔNG được
   kẹp chiều cao submenu__list (rule trên dành cho layout cũ chưa có phần này). Nếu
   kẹp, các cột danh mục tràn khỏi hộp list và ĐÈ lên khối sản phẩm. Cho list cao tự
   nhiên; cả drawer (nav.navigation-vertical overflow-y-auto) tự cuộn. */
.navigation-vertical .submenu .submenu__list {
  max-height: none;
}

/* Banner/sản phẩm mega-menu giữ class w-1/3 (đã compile) cho desktop; trong drawer
   mobile cho full-width. KHÔNG dùng class Tailwind lg:w-1/3 vì class đó CHƯA được
   compile trong theme → sẽ rơi về w-full làm desktop bị to bất thường. */
.navigation-vertical .mega-menu__banner,
.navigation-vertical .releated-products {
  width: 100%;
}


/* Khi menu tràn: wrapper trở thành LỚP CẮT đứng yên, còn dải menu bên trong trượt
   bằng transform (defer-scripts.js).
   - `overflow: clip visible` chứ KHÔNG phải `hidden`: `clip` không tạo scroll
     container nên hợp lệ khi ghép clip (ngang) với visible (dọc) — nhờ đó menu xổ
     xuống không bị cắt. `hidden` bắt buộc cả hai trục, sẽ cắt mất dropdown.
   - `flex: 1 1 auto` để wrapper chiếm trọn rãnh, không co theo nội dung. Để mặc
     `0 1 auto` thì bỏ overflow của ul xong wrapper sụp còn ~316px. */
.navigation-horizontal-wrapper.overflow-menu {
  max-width: calc(100% - 70px);
  flex: 1 1 auto;
  overflow: clip visible;
}

/* Dải menu trượt bằng margin-left (defer-scripts.js). KHÔNG đổi sang transform:
   transform tạo khối chứa mới cho position:absolute -> mega menu mất full-width. */
.navigation--horizontal nav {
  transition: margin-left 0.3s ease;
}


.navigation-horizontal-wrapper {
  /* Không có min-width: 0 thì flex item lấy chiều rộng nội tại (tổng các mục menu,
     vốn là flex: 0 0 auto) và tràn khỏi cột 60% của header-grid, đè lên nút LIVE /
     chọn ngôn ngữ ở màn ~1024px. */
  min-width: 0;
  flex: 0 1 auto;
}

/* Cột menu trong header-grid mang class `mx-auto`. Margin ngang auto làm grid item
   KHÔNG còn stretch theo rãnh mà co giãn theo nội dung (fit-content), nên khi menu
   dài nó phình to hơn rãnh 60% và vẽ đè lên nút LIVE / chọn ngôn ngữ ở khổ ~1024px.
   max-width: 100% kẹp lại đúng bề rộng rãnh; min-width: 0 cho phép co khi cần. */
.header-nav {
  min-width: 0;
  max-width: 100%;
}


.navigation-horizontal>.menu-item {
  flex: 0 0 auto
}

.navigation-horizontal>.menu-item {
  padding: 1.4rem
}

.navigation-arrows {
  display: none;
  line-height: 1
}


.navigation--horizontal {
  justify-content: space-between
}

/* ============================================================
   Mega-menu — khối "Sản phẩm": carousel DỌC + card đẹp (scoped)
   Chỉ áp dụng trong .megamenu-products-carousel, không đụng
   card ngang dùng chung ở collection/hotspot/product-tabs...
   ============================================================ */

/* Custom element <related-products> mặc định display:inline. Ở desktop nó là flex
   item trong .mega-menu__inner nên bị blockify (chạy đúng); nhưng trong menu drawer
   mobile nó KHÔNG nằm trong flex → giữ inline, hộp inline bị "chẻ" quanh các block
   con (heading + carousel) → chữ đè nhau + bullet lạc. Ép block để bố cục đúng. */
.releated-products {
  display: block;
}

/* --- Carousel NGANG: mỗi slide = 1 cột chứa 2 card xếp chồng dọc ---
   Root fix "mất border sản phẩm khi scroll": JS related-products dựng carousel gán
   margin-left ÂM (-0.5rem) cho container theo mẫu gutter chung → slide RỘNG HƠN
   viewport, embla căn slide sát mép trái/phải nên card (viền 1px + bo 1.2rem) đè
   đúng mép overflow-x:clip → bị xén. Bỏ hẳn margin âm đó (dùng !important vì JS gán
   đè rule thường): container = đúng bề rộng viewport, slide = 100% viewport, card
   được đệm 0.8rem hai bên (padding của slide) → LUÔN cách mép clip 0.8rem ở MỌI
   breakpoint & mọi slide, không còn bị cắt. */
.megamenu-products-carousel .embla__container {
  margin-inline: 0 !important;
}

/* Card có viền + bo góc → phải chừa đệm ngang trong slide, nếu không viền/góc
   trái-phải của card sẽ bị viewport (overflow:clip) cắt khi embla trượt trang.
   Đệm 1.6rem (=16px; theme dùng root 10px nên 1rem=10px) = cùng cỡ padding heading
   bên dưới → card thẳng hàng với heading. */
.megamenu-products-carousel .embla__slide {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: auto !important;
  flex: 0 0 100%;
  padding-inline: 1.6rem;
}

/* Heading "Sản phẩm khuyến mãi" nằm NGOÀI carousel (sát mép cột) trong khi card
   được đệm 1.6rem trong slide → lệch trái. Cho heading cùng padding 1.6rem (16px)
   để mép chữ heading thẳng hàng với mép trái card. */
.releated-products > .heading-bar {
  padding-inline: 1.6rem;
}

.megamenu-products-carousel .embla__slide > card-product {
  display: block;
  width: 100%;
}

/* Nút trái/phải + dots gom 1 hàng canh giữa dưới carousel */
.megamenu-products-carousel .embla__nav .embla__button {
  position: static;
  transform: none;
  opacity: 1;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.4rem;
  background: var(--color-neutral-50);
}

.megamenu-products-carousel .embla__nav .embla__button:hover {
  background: var(--color-neutral-100);
}

.megamenu-products-carousel .embla__nav .embla__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.megamenu-products-carousel .embla__dots {
  margin: 0;
}

/* --- Card ngang kiểu tham chiếu (bo góc + viền + hover) --- */
.megamenu-products-carousel .card-product--horizontal {
  border: 1px solid var(--color-neutral-50);
  border-radius: 1.2rem;
  background: var(--color-background);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.megamenu-products-carousel .card-product--horizontal:hover {
  border-color: var(--color-neutral-100);
}

.megamenu-products-carousel .card-product--horizontal form {
  grid-template-columns: 9rem 1fr;
  align-items: center;
  gap: 0.4rem;
}

/* Tiêu đề card dính sát giá (chỉ cách 12px, mà tiêu đề thường xuống 2 dòng nên
   nhìn như dính liền). Nới thêm, chỉ trong carousel mega-menu. */
.megamenu-products-carousel .card-product__title {
  margin-bottom: 0.4rem;
}

.megamenu-products-carousel .card-product__top .rounded-sm {
  border-radius: 0.8rem;
}

/* Menu chật — ẩn nút thao tác nhanh, cả card click vào sản phẩm */
.megamenu-products-carousel .card-product__cta {
  display: none;
}