body {
  padding-top: 76px;
  transition: padding-top 0.3s ease;
}
body.hb-home-page {
  padding-top: 0;
}
body.hb-scrolled:not(.hb-home-page) {
  padding-top: 64px;
}

#admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100000;
}

/* ---- Header Container ----
   MẶC ĐỊNH (mọi trang): header ĐẶC màu trắng ngay từ đầu, luôn thấy rõ logo/
   chữ - an toàn cho mọi trang (sản phẩm, tin tức, liên hệ...) không có ảnh
   nền tối phía sau.
   CHỈ TRANG CHỦ (class .hb-header--transparent, gắn tự động khi đang ở "/")
   mới có hiệu ứng trong suốt/đè lên hero lúc chưa cuộn - vì trang chủ có
   sẵn ảnh nền tối ngay dưới header nên chữ trắng mới đọc được. */
.hb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--hb-z-sticky-header, 1000);
  background: var(--hb-white);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hb-header.is-scrolled {
  box-shadow: var(--hb-shadow-md);
}

/* Trang KHÔNG PHẢI trang chủ: header luôn đặc màu trắng ngay từ đầu (không
   có hiệu ứng trong suốt đè lên hero như trang chủ), nên đổ bóng ngay cả khi
   CHƯA cuộn để tách bạch rõ với nội dung bên dưới - không đợi tới lúc cuộn
   quá 50px mới có bóng như trước. */
.hb-header:not(.hb-header--transparent) {
  box-shadow: var(--hb-shadow-md);
}

/* Hiệu ứng trong suốt - CHỈ áp dụng cho trang chủ, lúc chưa cuộn.
   Đồng thời khai báo 1 lần các biến màu dùng chung cho toàn bộ phần tử con
   bên dưới thay vì mỗi phần tử tự lặp lại chuỗi
   :not(.is-scrolled):not(.is-hovered) riêng - gọn hơn và trình duyệt chỉ
   phải đánh giá chuỗi :not() phức tạp này ĐÚNG 1 LẦN thay vì 9 lần. */
.hb-header--transparent:not(.is-scrolled):not(.is-hovered) {
  background: transparent;
  box-shadow: none;
  --hb-header-fg: var(--hb-white);
  --hb-header-fg-soft: rgba(255, 255, 255, 0.9);
  --hb-header-icon-bg: rgba(255, 255, 255, 0.1);
  --hb-header-badge-border: #0b1f3a;
  --hb-header-logo-filter: brightness(0) invert(1);
}

/* ---- Top Bar ---- */
.hb-header-topbar {
  background: #071525;
  font-size: var(--hb-fs-xs);
  color: var(--hb-neutral-200);
  transition: height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  height: 36px;
  overflow: hidden;
}

.hb-header.is-scrolled .hb-header-topbar {
  height: 0;
  opacity: 0;
  border-bottom: none;
}

.hb-header-topbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--hb-space-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hb-header-topbar__left,
.hb-header-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
}

.hb-header-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hb-neutral-200);
  text-decoration: none;
  font-weight: var(--hb-fw-medium);
  transition: color 0.2s ease;
}

.hb-header-topbar__item:hover {
  color: var(--hb-white);
}

.hb-header-topbar__item svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* ---- Main Header ---- */
.hb-header__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--hb-space-6);
  height: 76px;
  display: flex;
  align-items: center;
  gap: var(--hb-space-8);
  transition: height 0.3s ease;
}

.hb-header.is-scrolled .hb-header__inner {
  height: 64px;
}

/* ---- Hamburger ---- */
.hb-header__hamburger {
  display: none;
  background: none;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  color: var(--hb-header-fg, var(--hb-neutral-900));
  cursor: pointer;
}
.hb-header__hamburger svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ---- Logo ---- */
.hb-header__logo { flex: 0 0 auto; }
.hb-header__logo a { display: block; line-height: 0; }
.hb-header__logo img {
  height: 90px;
  width: auto;
  object-fit: contain;
  transition: filter 0.3s ease, height 0.3s ease;
}
/* Thu nhỏ logo khi cuộn - hiệu ứng chung cho mọi trang, không liên quan
   tới trạng thái trong suốt */
.hb-header.is-scrolled .hb-header__logo img {
  height: 70px;
}

.hb-header__logo-link { display: block; line-height: 0; }
.hb-header__logo-text {
  display: none;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hb-header-fg, var(--hb-neutral-900));
  white-space: nowrap;
}
/* Trong drawer mobile luôn nền trắng - logo chữ luôn phải tối màu, không
   ăn theo trạng thái trong suốt của header chính (biến --hb-header-fg chỉ
   tồn tại bên trong .hb-header nên vốn dĩ không lọt vào đây, giữ !important
   để chắc chắn không bị override bởi rule nào khác trong tương lai) */
.hb-mobile-drawer .hb-header__logo-text {
  color: var(--hb-neutral-900) !important;
}

/* ---- Menu chính ---- */
.hb-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  /* Menu nhiều mục hơn khoảng trống hiện có -> cuộn ngang thay vì tràn đè
     lên cụm icon bên phải (hotline/tìm kiếm/giỏ hàng). Đây chính là phần
     "overflow-x: auto ở trên" mà comment bên dưới nhắc tới nhưng trước đó
     chưa được viết, khiến menu bị vỡ layout khi có nhiều danh mục dài. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hb-header__nav::-webkit-scrollbar { display: none; }
.hb-header__nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  /* KHÔNG cho xuống dòng dù menu có nhiều mục - luôn giữ 1 hàng duy nhất.
     Nếu tổng chiều rộng vượt quá khoảng trống còn lại, .hb-header__nav
     (cha) sẽ tự cuộn ngang (overflow-x: auto ở trên) thay vì chữ tràn đè
     lên cụm icon bên phải. */
  flex-wrap: nowrap;
}

.hb-header__nav > ul > li { position: relative; flex-shrink: 0; }

.hb-header__nav > ul > li > a {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--hb-fs-body) !important;
  font-weight: var(--hb-fw-medium) !important; /* Giảm độ dày main menu xuống Medium (500) để thanh thoát hơn */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hb-header-fg-soft, var(--hb-neutral-900));
  text-decoration: none;
  padding: 26px 0;
  transition: color 0.2s ease, padding 0.3s ease;
}
/* Thu gọn padding khi cuộn - hiệu ứng chung mọi trang, đi cùng nhịp co
   chiều cao .hb-header__inner (76px -> 64px) */
.hb-header.is-scrolled .hb-header__nav > ul > li > a {
  padding: 20px 0;
}

.hb-header__nav > ul > li:hover > a,
.hb-header__nav > ul > li.is-active > a {
  color: var(--hb-header-fg, var(--hb-primary));
}

.hb-header__nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: white;
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}
.hb-header__nav > ul > li:hover > a::after,
.hb-header__nav > ul > li.is-active > a::after {
  width: 30px;
}

/* Ẩn bớt mũi tên mega menu nếu cần đơn giản */
.hb-header__chevron {
  display: none;
}
.hb-header__nav > ul > li:hover .hb-header__chevron { transform: rotate(180deg); }

/* ---- Dropdown Menu ---- */
.hb-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 160px;
  background: var(--hb-white);
  border: 1px solid var(--hb-neutral-200);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1500;
}

.hb-header__nav > ul > li:hover > .hb-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.hb-dropdown > li {
  border-bottom: 1px solid var(--hb-neutral-100);
}
.hb-dropdown > li:last-child {
  border-bottom: none;
}

.hb-dropdown > li > a {
  display: block;
  padding: 12px 20px;
  text-align: center;
  font-size: var(--hb-fs-body);
  font-weight: var(--hb-fw-regular); /* Menu con nhẹ nhàng hơn (Regular 400) */
  color: var(--hb-neutral-500);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.hb-dropdown > li > a:hover {
  background: var(--hb-primary);
  color: var(--hb-white);
}

/* ---- Ngôn ngữ (Language Dropdown) ---- */
.hb-header__lang { position: relative; }
.hb-header__lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--hb-fs-xs);
  font-weight: 700;
  /* Nằm trong Top Bar - Top Bar LUÔN có nền tối riêng (không phụ thuộc
     trang chủ hay đang cuộn), nên chữ luôn phải sáng màu, không gated theo
     --transparent như phần nav chính bên dưới. */
  color: var(--hb-neutral-200);
}
.hb-header__lang-btn:hover { color: var(--hb-white); }
.hb-header__flag { width: 18px; height: 12px; border-radius: 0; flex-shrink: 0; }
.hb-header__lang-btn .hb-header__chevron { width: 8px; height: 8px; color: currentColor; }

.hb-header__lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  background: var(--hb-white);
  border: 1px solid var(--hb-neutral-200);
  border-radius: 0;
  box-shadow: var(--hb-shadow-md);
  list-style: none;
  margin: 0;
  padding: var(--hb-space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}
.hb-header__lang.is-open .hb-header__lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.hb-header__lang-dropdown a {
  display: block;
  padding: 6px var(--hb-space-4);
  font-size: var(--hb-fs-sm);
  color: var(--hb-neutral-900);
  text-decoration: none;
}
.hb-header__lang-dropdown a:hover { background: var(--hb-primary-tint); color: var(--hb-primary); }

/* ---- Dropdown Tài khoản (đã đăng nhập) / Menu gộp mobile - đồng bộ giao diện
   với .hb-dropdown (menu con header chính) thay vì .hb-header__lang-dropdown
   như trước: vuông góc, shadow nhẹ, hover nền đặc màu primary, có gạch chia
   giữa các mục - chỉ giữ lại cơ chế neo bên phải (right:0) cho khớp vị trí
   icon. .hb-header__menu-group dùng chung style này cho dropdown gộp 3 icon
   tìm kiếm/tài khoản/giỏ hàng trên mobile. ---- */
.hb-header__account, .hb-header__menu-group { position: relative; }
.hb-header__account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--hb-white);
  border: 1px solid var(--hb-neutral-200);
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}
.hb-header__account.is-open .hb-header__account-dropdown,
.hb-header__menu-group.is-open .hb-header__account-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.hb-header__account-dropdown li { border-bottom: 1px solid var(--hb-neutral-100); }
.hb-header__account-dropdown li:last-child { border-bottom: none; }
.hb-header__account-dropdown a,
.hb-header__account-dropdown button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  text-align: center;
  font-size: var(--hb-fs-body);
  font-weight: var(--hb-fw-regular);
  color: var(--hb-neutral-500);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
}
.hb-header__account-dropdown a:hover,
.hb-header__account-dropdown button:hover { background: var(--hb-primary); color: var(--hb-white); }


/* ---- Actions (Search, Account, Cart) ---- */
.hb-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--hb-space-4);
  margin-left: var(--hb-space-4);
}

/* Nhóm 3 icon tìm kiếm/tài khoản/giỏ hàng - tách riêng khỏi hotline (bên web) để
   canh khoảng cách/style cho cả nhóm 1 chỗ, không lẫn với các phần tử khác trong
   .hb-header__actions. */
.hb-header__icon-group {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
}

.hb-header__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hb-fs-h4);
  font-weight: var(--hb-fw-bold);
  color: var(--hb-header-fg, var(--hb-neutral-900));
  text-decoration: none;
  margin-right: var(--hb-space-4);
  transition: color 0.3s ease;
}

.hb-header__phone svg {
  width: 16px;
  height: 16px;
  fill: var(--hb-header-fg, var(--hb-primary));
  transition: fill 0.3s ease;
}

.hb-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--hb-header-icon-bg, #333333);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.hb-header__icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hb-header__icon-btn:hover {
  background: var(--hb-primary);
  color: var(--hb-white);
}

.hb-header__cart-btn {
  position: relative;
}

.hb-header__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--hb-price);
  color: var(--hb-white);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--hb-header-badge-border, var(--hb-white));
}

/* ---- Search Overlay Fullscreen ---- */
.hb-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Trước đây rgba(11,31,58,...) là xanh navy không thuộc bảng màu thương
     hiệu (nâu/vàng đồng) - đổi sang rgba của var(--hb-primary) (#3A2312).
     Dùng rgba viết tay vì cần chỉnh alpha, var() không tách được kênh màu. */
  background: rgba(58, 35, 18, 0.98);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* backdrop-filter: blur() đã bị bỏ khỏi overlay này - overlay đã có nền
   rgba tối gần như đặc (0.98 alpha) nên hiệu ứng blur phía sau gần như
   không nhìn thấy khác biệt, trong khi backdrop-filter lại là một trong
   những phép tính tốn GPU nhất trong CSS, nhất là trên full-viewport
   (100vw x 100vh) và có transition opacity chạy cùng lúc - bỏ đi giúp
   overlay mở/đóng mượt hơn trên máy cấu hình thấp. */

.hb-search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.hb-search-overlay__close {
  position: absolute;
  top: 32px;
  right: 48px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 0;
  color: var(--hb-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hb-search-overlay__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
.hb-search-overlay__close svg {
  width: 20px;
  height: 20px;
}

.hb-search-overlay__inner {
  width: 100%;
  max-width: 800px;
  padding: 0 var(--hb-space-6);
  text-align: center;
  transform: translateY(30px);
  transition: transform 0.4s ease;
}
.hb-search-overlay.is-active .hb-search-overlay__inner {
  transform: translateY(0);
}

.hb-search-overlay__heading {
  color: var(--hb-white);
  font-size: var(--hb-fs-h2);
  font-weight: 700;
  margin-bottom: var(--hb-space-8);
}

.hb-search-overlay__input-wrap {
  position: relative;
  width: 100%;
  margin-bottom: var(--hb-space-6);
}

.hb-search-overlay__icon {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--hb-neutral-400);
}

.hb-search-overlay__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  padding: 20px 24px 20px 64px;
  font-size: var(--hb-fs-h3);
  color: var(--hb-white);
  font-weight: 500;
  outline: none;
  transition: border-color 0.3s ease;
}
.hb-search-overlay__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.hb-search-overlay__input:focus {
  border-bottom-color: var(--hb-white);
}

.hb-search-overlay__suggestions {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--hb-space-4);
  align-items: center;
}

.hb-search-overlay__suggestions-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--hb-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.hb-search-overlay__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-3);
  justify-content: center;
}

.hb-search-tag {
  background: rgba(255, 255, 255, 0.1);
  color: var(--hb-white);
  padding: 8px 16px;
  border-radius: 0;
  font-size: var(--hb-fs-body);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hb-search-tag:hover {
  background: var(--hb-primary);
  transform: translateY(-2px);
}

/* ---- Mobile Menu Drawer ---- */
.hb-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3000;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.hb-mobile-drawer.is-active {
  opacity: 1;
  visibility: visible;
}

.hb-mobile-drawer__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 31, 58, 0.6);
}
/* backdrop-filter: blur(4px) trên overlay này cũng đã bỏ - cùng lý do
   như search overlay, đổi lại tăng alpha nền lên 0.6 để bù độ tương phản */

.hb-mobile-drawer__content {
  position: absolute;
  top: 0;
  left: -320px;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--hb-white);
  display: flex;
  flex-direction: column;
  transition: left 0.3s ease;
  box-shadow: 4px 0 24px rgba(0,0,0,0.1);
}
.hb-mobile-drawer.is-active .hb-mobile-drawer__content {
  left: 0;
}

.hb-mobile-drawer__header {
  padding: var(--hb-space-4) var(--hb-space-6);
  border-bottom: 1px solid var(--hb-neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hb-mobile-drawer__logo {
  height: 70px;
  width: auto;
}
.hb-mobile-drawer__close {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hb-neutral-500);
  cursor: pointer;
}
.hb-mobile-drawer__close svg {
  width: 20px;
  height: 20px;
}

.hb-mobile-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--hb-space-4) 0;
}

.hb-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-mobile-nav li {
  border-bottom: 1px solid var(--hb-neutral-100);
}
.hb-mobile-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hb-mobile-nav__item a {
  flex: 1;
  padding: var(--hb-space-3) var(--hb-space-6);
  font-size: var(--hb-fs-body);
  font-weight: 600;
  color: var(--hb-neutral-900);
  text-decoration: none;
}
.hb-mobile-nav li.is-active > .hb-mobile-nav__item a {
  color: var(--hb-primary);
}
.hb-mobile-nav__toggle {
  background: none;
  border: none;
  padding: var(--hb-space-3) var(--hb-space-6);
  color: var(--hb-neutral-500);
  cursor: pointer;
}
.hb-mobile-nav__toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  transition: transform 0.2s ease;
}
.hb-mobile-nav li.is-open > .hb-mobile-nav__item .hb-mobile-nav__toggle svg {
  transform: rotate(180deg);
}

.hb-mobile-nav__submenu,
.hb-mobile-nav__subsubmenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--hb-neutral-50);
}
.hb-mobile-nav li.is-open > .hb-mobile-nav__submenu,
.hb-mobile-nav li.is-open > .hb-mobile-nav__subsubmenu {
  display: block;
}

.hb-mobile-nav__submenu a {
  padding: var(--hb-space-2) var(--hb-space-6) var(--hb-space-2) 40px;
  font-size: var(--hb-fs-sm);
  font-weight: 500;
  color: var(--hb-neutral-900);
}
.hb-mobile-nav__subsubmenu a {
  padding-left: 56px;
  font-weight: 400;
}

.hb-mobile-drawer__footer {
  padding: var(--hb-space-4) var(--hb-space-6);
  border-top: 1px solid var(--hb-neutral-200);
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .hb-header__inner, .hb-header-topbar__inner { padding: 0 var(--hb-space-4); }
  .hb-header__nav > ul { gap: var(--hb-space-4); }
  .hb-header__nav > ul > li > a { font-size: 12px; }
  .hb-megamenu { width: 800px; }
}

@media (max-width: 992px) {
  .hb-header-topbar { display: none; }
  .hb-header__nav { display: none; }
  .hb-header__hamburger { display: block; } /* Hiển thị nút hamburger */

  /* Logo được CĂN GIỮA thật sự (grid 3 cột: hamburger | logo | actions) thay vì
     chiếm hết khoảng trống còn lại rồi căn trái - trước đây bên phải có 3 icon
     (tìm kiếm/tài khoản/giỏ hàng) nặng hơn hẳn hamburger bên trái (1 icon), khiến
     logo bị đẩy lệch trái, tổng thể header trông mất cân đối. */
  .hb-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .hb-header__logo { flex: none; display: flex; justify-content: center; margin-left: 0; }

  /* margin-left:16px ở .hb-header__actions (rule gốc) chỉ để tách cụm icon
     khỏi số hotline bên desktop - mobile không có hotline ở đây (đã chuyển
     xuống Top Bar, mà Top Bar cũng đang ẩn ở breakpoint này), giữ margin đó
     làm cụm icon bị đẩy lệch phải không cần thiết trên màn hình vốn đã chật. */
  .hb-header__actions { gap: 8px; justify-self: end; margin-left: 0; }

  /* 3 icon tìm kiếm/tài khoản/giỏ hàng - thu nhỏ + khoảng cách sát hơn để
     nhóm gọn lại, tối ưu cho màn hình hẹp thay vì dùng nguyên kích thước
     desktop (32px, cách nhau 12px) vốn chiếm nhiều chỗ hơn cần thiết cạnh
     hamburger + logo trên cùng 1 hàng chật hẹp. */
  .hb-header__icon-group { gap: 6px; }
  .hb-header__icon-btn { width: 28px; height: 28px; }
  .hb-header__icon-btn svg { width: 14px; height: 14px; }
  /* Icon co lại còn 28px nhưng badge giữ nguyên vị trí lệch -4px như bản
     28px sẽ đẩy badge ra sát/tràn mép màn hình hơn nữa (đã đo thực tế: badge
     chạm đúng mép phải viewport ở 375px) - kéo badge vào trong 1px để luôn
     có khoảng thở với mép màn hình trên mọi kích thước điện thoại. */
  .hb-header__cart-badge { top: -3px; right: -3px; }
  /* Nút menu gộp (3 icon -> 1 nút) có icon 3 chấm nằm giữa nút, khác cart
     icon cũ vốn rỗng góc trên-phải - badge ở vị trí -3px/-3px cũ đè lên
     đúng chấm bên phải. Đẩy badge ra xa thêm để không che icon. */
  #hb-header-menu-btn .hb-header__cart-badge { top: -7px; right: -7px; }

  .hb-search-overlay__heading { font-size: var(--hb-fs-h3); }
  .hb-search-overlay__input { font-size: var(--hb-fs-body-lg); padding-left: 52px; }
  .hb-search-overlay__close { right: 24px; top: 16px; }
}

/* ==========================================================================
   TẮT STICKY HEADER Ở TRANG CHỦ THEO YÊU CẦU
   ========================================================================== */
.hb-header--transparent {
    position: absolute !important;
}

/* ===========================================================================
   HEADER/FOOTER DUNG CHUNG TOAN SITE - chuyen tu home.css sang day de khong
   phai nap ca home.css (105KB) tren moi trang chi vi 2 khoi nay. Nguyen ban,
   khong sua noi dung, chi doi vi tri file. Xem ke hoach toi uu CSS.
   =========================================================================== */
#header .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap; }

#footer {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat; }
  #footer .footer {
    width: 100%;
    float: left;
    position: relative; }
    #footer .footer:after {
      content: "";
      background: rgba(0, 0, 0, 0.7);
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute; }
    #footer .footer__content {
      padding-top: 70px;
      padding-bottom: 40px;
      position: relative;
      z-index: 10;
      display: flex;
      width: 100%; }
      #footer .footer__content__item {
        flex: 1;
        padding-right: 30px; }
        #footer .footer__content__item:last-child {
          margin-right: 0; }
        #footer .footer__content__item h4 {
          text-transform: uppercase;
          color: #fff;
          padding-bottom: 20px;
          width: 100%;
          font-size: 18px;
          font-family: "Roboto", sans-serif; }
        #footer .footer__content__item a {
          color: #fff;
          text-transform: uppercase; }
      #footer .footer__content .form_resign {
        box-sizing: border-box;
        display: inline-table; }
        #footer .footer__content .form_resign .logo_footer {
          max-width: 100%;
          margin-bottom: 20px; }
          #footer .footer__content .form_resign .logo_footer img {
            max-width: 100%; }
        #footer .footer__content .form_resign .form_email {
          padding-bottom: 10px;
          width: 93%; }
          #footer .footer__content .form_resign .form_email form {
            border-bottom: 1px solid #fff; }
            #footer .footer__content .form_resign .form_email form input {
              height: 30px;
              width: 85%;
              padding-left: 10px;
              background: none;
              color: #fff;
              font-size: 14px; }
            #footer .footer__content .form_resign .form_email form button {
              padding: 2px 6px;
              cursor: pointer;
              border-radius: 0; }
              #footer .footer__content .form_resign .form_email form button svg {
                fill: #fabf00; }
        #footer .footer__content .form_resign .system-showroom {
          margin-left: 0;
          width: 100%; }
      #footer .footer__content .info_company {
        box-sizing: border-box;
        display: inline-table;
        line-height: 1.8em; }
        #footer .footer__content .info_company li {
          list-style-type: none;
          color: #fff; }
        #footer .footer__content .info_company p {
          color: #fff; }
        #footer .footer__content .info_company__content .item {
          margin-bottom: 15px; }
          #footer .footer__content .info_company__content .item:last-child {
            margin-bottom: 0; }
      #footer .footer__content .support_custom {
        box-sizing: border-box;
        display: inline-table; }
        #footer .footer__content .support_custom__content p {
          line-height: 2em; }
      #footer .footer__content .social_list {
        display: flex;
        margin-bottom: 25px; }
        #footer .footer__content .social_list__item:not(:last-child) {
          margin-right: 10px; }
        #footer .footer__content .social_list__item img {
          width: 25px; }
  #footer .footer_top {
    width: 100%;
    float: left;
    height: 50px;
    position: relative;
    background: #6f0015;
    /* &:after {
    	content: "";
    	background: rgba(0, 0, 0, 0.7);
    	height: 100%;
    	width: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    } */ }
    #footer .footer_top p {
      color: #fff;
      line-height: 50px;
      font-size: 15px; }
      #footer .footer_top p span {
        color: #fabf00;
        font-size: 15px;
        font-weight: bold; }
  #footer .system-showroom {
    width: 90%;
    margin-left: 5%;
    float: left;
    list-style-type: none; }
    #footer .system-showroom li {
      color: #fff;
      font-size: 14px;
      line-height: 20px;
      padding-top: 10px; }
      #footer .system-showroom li:first-child {
        padding-top: 0; }
      #footer .system-showroom li strong {
        font-size: 15px; }
  #footer .footer-map iframe {
    position: absolute;
    right: 0;
    bottom: 40px;
    max-height: 300px;
    max-width: 585px; }