/* AMAC Custom Header CSS */
.amac-header {
  background: #181818;
  color: #fff;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 100;
  position: sticky;
  top: 0;
  padding: 10px 0;
}
.amac-header__container {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
/* flex-shrink: 0 — bắt buộc, không có thì logo bị flex bóp ngang -> méo hình */
.amac-header__logo {
  flex: 0 0 auto;
}
.amac-header__logo img {
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.amac-header__nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.amac-header__nav ul li {
  flex: 0 0 auto;
}
.amac-header__nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}
.amac-header__nav ul li a:hover,
.amac-header__nav ul li.active a {
  color: #86d10f;
}
.amac-header__nav ul li.active a::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: #86d10f;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.amac-header__icons {
  display: flex;
  align-items: center;
  gap: 18px;
}
.amac-header__icon {
  background: none;
  border: none;
  color: #86d10f;
  font-size: 22px;
  cursor: pointer;
  padding: 6px;
  transition: color 0.2s;
}

/* Chỉ báo kho trên header (cạnh nút search) — read-only, quyết định theo địa chỉ mặc định */
.amac-header__warehouse {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  position: relative;
}
.amac-warehouse-picker {
  position: relative;
}
.amac-address-picker {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1100;
  width: min(390px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 16px;
  color: #172018;
  background: #fff;
  border: 1px solid rgba(134, 209, 15, .24);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  animation: amac-address-picker-in .16s ease-out;
}
.amac-address-picker::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 20px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-left: 1px solid rgba(134, 209, 15, .24);
  border-top: 1px solid rgba(134, 209, 15, .24);
  transform: rotate(45deg);
}
.amac-address-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid #eef2eb;
}
.amac-address-picker__header strong,
.amac-address-picker__header div {
  display: block;
}
.amac-address-picker__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #7e8a7a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.amac-address-picker__header strong {
  font-size: 15px;
}
.amac-address-picker__close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  color: #839080;
  background: #f3f6f1;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.amac-address-picker__list {
  display: grid;
  gap: 8px;
  padding: 12px 0;
}
.amac-address-picker__item {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  gap: 10px;
  padding: 11px 10px;
  border: 1px solid #edf1eb;
  border-radius: 11px;
  color: #253025;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.amac-address-picker__item:hover,
.amac-address-picker__item.is-default {
  border-color: #86d10f;
  background: #f7fcec;
}
.amac-address-picker__item:active { transform: scale(.99); }
.amac-address-picker__item:disabled { cursor: wait; opacity: .65; }
.amac-address-picker__item-icon {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  height: 28px;
  border-radius: 8px;
  color: #6aa70c;
  background: #eff8e4;
  font-size: 18px;
}
.amac-address-picker__item-content { min-width: 0; flex: 1; }
.amac-address-picker__item-title,
.amac-address-picker__item-meta,
.amac-address-picker__item-address {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.amac-address-picker__item-title { font-size: 13px; font-weight: 800; }
.amac-address-picker__item-title em {
  margin-left: 7px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #538b08;
  background: #e9f7d7;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.amac-address-picker__item-meta { margin-top: 2px; color: #748071; font-size: 11px; }
.amac-address-picker__item-address { margin-top: 4px; color: #556052; font-size: 11px; }
.amac-address-picker__item-check { flex: 0 0 16px; align-self: center; color: #6aa70c; font-size: 17px; font-weight: 800; }
.amac-address-picker__empty { padding: 22px 8px 14px; color: #6e796b; font-size: 13px; text-align: center; }
.amac-address-picker__empty p { margin: 0 0 10px; }
.amac-address-picker__empty a,
.amac-address-picker__empty button,
.amac-address-picker__manage {
  border: 0;
  color: #5f970d;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.amac-address-picker__manage {
  display: block;
  width: 100%;
  padding: 12px 4px 1px;
  border-top: 1px solid #eef2eb;
  text-align: center;
}
.amac-address-picker__manage span { font-size: 18px; vertical-align: -1px; }
@keyframes amac-address-picker-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.amac-warehouse-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 42vw;
  color: #86d10f;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  padding: 6px 0;
  background: transparent;
  transition: color 0.2s;
}
.amac-warehouse-indicator svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.amac-warehouse-indicator__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.amac-warehouse-indicator svg,
.amac-warehouse-indicator b {
  color: inherit;
  font-weight: 700;
}
.amac-warehouse-indicator:hover {
  color: #fff;
}

/* Mobile/tablet: chip kho gọn trên cùng 1 hàng — ẩn chữ "Kho", giữ màu xanh */
@media (max-width: 1199.98px) {
  .amac-warehouse-indicator {
    gap: 4px;
    max-width: 38vw;
    font-size: 12px;
  }
  .amac-warehouse-indicator svg {
    width: 13px;
    height: 13px;
  }
}
.amac-header__icon:hover {
  color: #fff;
}
.amac-header__desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 32px;
}
/* Mobile: header 2 tầng — tầng trên (menu+logo | giỏ+user), tầng dưới (địa chỉ | search) */
.amac-header__mobile {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 4px 12px;
}
.amac-header__mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* Tầng dưới: địa chỉ (trái, co theo chữ) + ô search dạng input kéo dài lấp phần còn lại */
.amac-header__mobile-row--bottom {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  gap: 10px;
}
.amac-header__mobile-row--bottom .amac-header__warehouse {
  flex: 0 0 auto;
}
/* Ô tìm kiếm (bấm mở popup) — nền đen, gọn */
.amac-header__searchbox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  cursor: text;
  transition: border-color 0.2s;
}
.amac-header__searchbox:hover {
  border-color: #86d10f;
}
.amac-header__searchbox i {
  color: #86d10f;
  font-size: 13px;
  flex-shrink: 0;
}
.amac-header__searchbox span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.amac-header__mobile-side {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Tầng trên: grid 3 cột (1fr | auto | 1fr) -> logo CĂN GIỮA chính xác dù 2 bên lệch số icon */
.amac-header__mobile-row--top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.amac-header__mobile-row--top .amac-header__mobile-left {
  justify-self: start;
}
.amac-header__mobile-row--top .amac-header__mobile-right {
  justify-self: end;
}
.amac-header__mobile .amac-header__logo {
  justify-self: center;
  display: flex;
  align-items: center;
}
/* Logo quyết định chiều cao header mobile: ô tìm kiếm là <button> nên bị
   mobile-optimizations.css ép min-height 44px (vùng chạm) — không hạ được.
   Hạ logo 48 -> 38px là cách duy nhất rút ngắn header mà không phá vùng chạm.
   ⚠️ Đổi số này phải đổi kèm critical CSS inline ở CẢ HAI base template. */
.amac-header__mobile .amac-header__logo img {
  height: 38px;
}
/* Icon header mobile đồng bộ 1 kích thước, cùng padding */
.amac-header__mobile .amac-header__icon {
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive
 * Ngưỡng 1200px (không phải 992px): menu desktop có 11 mục (07/10/2026), dưới ~1200px là
 * không đủ chỗ -> chữ xuống dòng và logo bị bóp. Dưới ngưỡng dùng header 2 tầng.
 * ⚠️ Sửa ngưỡng ở đây phải sửa cả critical CSS inline trong base.html.twig
 * (frontend/ và home-new/) cho khớp, nếu không sẽ bị nhảy layout lúc tải trang.
 */
@media (max-width: 1199.98px) {
  .amac-header {
    padding: 0;
  }
  .amac-header__desktop {
    display: none;
  }
  .amac-header__mobile {
    display: flex;
  }
}
@media (min-width: 1200px) {
  .amac-header__mobile {
    display: none;
  }
  .amac-header__desktop {
    display: flex;
  }
}
/* 1200–1600px: thu gọn dần gap/font để 11 mục menu vừa 1 dòng.
 * Số đo thực tế (logo 92 + menu + icons + gap + padding):
 *   font 15/gap 28 -> cần ~1460px  => chỉ đủ chỗ từ ~1600px
 *   font 14/gap 18 -> cần ~1275px  => đủ chỗ từ 1400px
 *   font 13/gap 12 -> cần ~1145px  => đủ chỗ từ 1200px
 * Tên tỉnh dài ("Bà Rịa - Vũng Tàu") bị giới hạn max-width + ellipsis để
 * không đẩy menu xuống dòng.
 */
/* 07/10/2026 (thêm "BST HOT"): gap 28 tràn 15px ở 1600px ⇒ 1600–1799 gap 22,
 * ô kho 100px (đo với ô kho 74px: cụm icon kết thúc 1563/1595px). Từ 1800px giữ gap 28. */
@media (min-width: 1600px) and (max-width: 1799.98px) {
  .amac-header__nav ul {
    gap: 22px;
  }
  .amac-warehouse-indicator {
    max-width: 100px;
  }
}
/* 07/10/2026 (thêm "BST HOT"): gap 18 tràn 20px ở 1400px ⇒ gap 14, ô kho 90px. */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .amac-header__desktop {
    gap: 12px;
    padding: 8px 20px;
  }
  .amac-header__nav ul {
    gap: 14px;
  }
  .amac-header__nav ul li a {
    font-size: 14px;
  }
  .amac-header__icons {
    gap: 14px;
  }
  .amac-warehouse-indicator {
    max-width: 90px;
    font-size: 14px;
  }
}
/* 07/10/2026: thêm mục "BST HOT" (11 mục) ⇒ ở 1200px font 13/gap 12 tràn 70px (cụm
 * icon bị đẩy ra ngoài màn; trước đó chỉ còn dư ~1px). Hạ font 12/gap 9 và ô kho
 * 80px (tên tỉnh dài cắt "…"): đo ở 1200px với "TP HCM" (67px) cụm icon kết thúc ở
 * 1183/1195px ⇒ còn ~12px, đủ cho ô kho nở tối đa 80px. Thêm mục menu ⇒ đo lại. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .amac-header__desktop {
    gap: 10px;
    padding: 8px 12px;
  }
  .amac-header__nav ul {
    gap: 9px;
  }
  .amac-header__nav ul li a {
    font-size: 12px;
  }
  .amac-header__icons {
    gap: 10px;
  }
  .amac-warehouse-indicator {
    max-width: 80px;
    font-size: 12px;
  }
}
.amac-header__nav a.active {
  color: #86d10f;
  font-weight: 600;
  position: relative;
}
.amac-header__nav .header-underline {
  display: block;
  height: 2px;
  width: 50%;
  background: #86d10f;
  border-radius: 2px;
  position: absolute;
  left: 0;
  bottom: -2px;
  content: "";
}

.amac-header__nav {
  position: relative;
}
.header-underline-animated {
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 2px;
  background: #86d10f;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, width;
}
.amac-header__nav ul {
  position: relative;
}
.amac-header__nav li {
  display: inline-block;
  position: relative;
}

/* Mobile Sidebar Dropdown */
.mobile-has-dropdown .mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mobile-has-dropdown .mobile-menu-item a {
    flex-grow: 1;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mobile-has-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px; /* Ensure generic touch target size */
    cursor: pointer;
    color: #e5e5e5;
    border: 1px solid #333;
    border-left: none;
    background: #181818;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: background-color 0.2s ease;
}

.mobile-has-dropdown .dropdown-toggle:hover {
    background: #2a2a2a;
}

.mobile-dropdown-menu {
    display: none;
    list-style: none;
    padding-left: 20px !important; /* Indent submenu */
    margin-top: 5px !important;
    background-color: #222; /* Slightly Lighter Dark */
    border-radius: 8px;
    border: 1px solid #333;
}

.mobile-dropdown-menu li {
    margin-bottom: 5px !important;
}

.mobile-dropdown-menu li a {
    font-size: 15px !important;
    padding: 8px 10px !important;
    border: none !important;
    background: transparent !important;
    color: #ccc !important;
}

.mobile-dropdown-menu li a:hover {
    color: #fff !important;
}

.mobile-has-dropdown.open .mobile-dropdown-menu {
    display: block;
}

.mobile-has-dropdown.open .dropdown-toggle i {
    transform: rotate(180deg);
}

/* REFINED DROPDOWN STYLES */
.amac-header__nav ul li.has-dropdown .dropdown-menu {
    display: block; /* Always block for animation */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px; /* Slightly wider */
    background-color: #1f1f1f; /* Slightly lighter than header for contrast */
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Deep shadow */
    z-index: 1000;
    flex-direction: column;
    border-radius: 8px; /* Rounded corners */
    gap: 0;
    transform: translateY(15px); /* Start lower */
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth easeOut */
    border: 1px solid rgba(255,255,255,0.05); /* Subtle border */
}

/* Pseudo-element bridge to prevent hover loss */
.amac-header__nav ul li.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px; /* Bridge gap */
    background: transparent;
}

/* Show dropdown on hover */
.amac-header__nav ul li.has-dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.amac-header__nav ul li.has-dropdown .dropdown-menu li {
    display: block;
    width: 100%;
    margin: 0;
}

.amac-header__nav ul li.has-dropdown .dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: #e5e5e5;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    font-weight: 500;
}

.amac-header__nav ul li.has-dropdown .dropdown-menu li:last-child a {
    border-bottom: none;
}

.amac-header__nav ul li.has-dropdown .dropdown-menu li a:hover {
    background-color: rgba(134, 209, 15, 0.1); /* Green tint */
    color: #86d10f;
    padding-left: 25px; /* Enhanced movement */
}

/* Arrow indicator rotation */
.amac-header__nav ul li.has-dropdown > a i {
    transition: transform 0.3s ease;
}
.amac-header__nav ul li.has-dropdown:hover > a i {
    transform: rotate(180deg);
}

/* ===== Chuông thông báo trên header ===== */
.amac-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.amac-notif__btn {
    position: relative;
    line-height: 1;
}
.amac-notif__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #eb5757;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.amac-notif__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 88vw;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 1200;
    overflow: hidden;
    animation: amacNotifIn 0.14s ease-out;
}
@keyframes amacNotifIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.amac-notif__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
}
.amac-notif__loading {
    font-size: 12px;
    font-weight: 500;
    color: #999;
}
.amac-notif__list {
    max-height: 360px;
    overflow-y: auto;
}
.amac-notif__empty {
    padding: 28px 16px;
    text-align: center;
    color: #999;
    font-size: 14px;
}
.amac-notif__item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
a.amac-notif__item:hover {
    background: rgba(134, 209, 15, 0.08);
}
.amac-notif__icon {
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 2px;
}
.amac-notif__thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #f2f2f2;
}
.amac-notif__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.amac-notif__title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}
.amac-notif__msg {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    word-break: break-word;
}
/* Nội dung HTML trong message (đã sanitize) */
.amac-notif__msg p { margin: 0 0 4px; }
.amac-notif__msg p:last-child { margin-bottom: 0; }
.amac-notif__msg a { color: #2f80ed; text-decoration: underline; }
.amac-notif__msg ul,
.amac-notif__msg ol { margin: 4px 0; padding-left: 18px; }
.amac-notif__msg img { max-width: 100%; height: auto; border-radius: 6px; margin-top: 4px; }
.amac-notif__time {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* Mobile: panel bám mép phải, hơi rộng theo màn hình */
@media (max-width: 1199.98px) {
    .amac-notif__panel {
        width: 300px;
        top: calc(100% + 8px);
    }
}

/* ==========================================================================
   Thanh điều hướng đáy (mobile) + header 1 dòng
   --------------------------------------------------------------------------
   Header mobile gom từ 2 tầng về MỘT dòng: logo | ô tìm kiếm (giãn) | icon.
   Nút ☰ và icon tài khoản chuyển xuống thanh đáy.

   ⚠️ Mọi kích thước để px, KHÔNG dùng rem: 6 trang nạp `main.css` có
   `html{font-size:1.7362vw}` ⇒ 1rem ≈ 6.5px ở màn 375px.
   ========================================================================== */
.amac-header__mobile-row--single {
  display: flex;
  align-items: center;
  /* 8px (trước 10px): chừa chỗ cho nút "Lọc" — đo ở 360px có giỏ hàng, ô tìm còn 84px */
  gap: 8px;
  width: 100%;
}
.amac-header__mobile-row--single .amac-header__logo {
  flex: 0 0 auto;
  justify-self: auto;
}
.amac-header__mobile-row--single .amac-header__searchbox {
  height: 36px;
}
/* Thanh tìm kiếm GỘP: ô tìm + nút "Lọc" chung một khung (góp ý 28/09/2026 — hai ô
   viền riêng đứng cạnh nhau trông như hai nút rời). Khung mang nền/viền/bo góc,
   hai con trong suốt. Ô tìm là <button> nên bị mobile-optimizations.css ép
   min-height 44px ⇒ khung cao 44px; nút lọc tự đặt 44px cho khớp vùng chạm. */
.amac-header__searchgroup {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  transition: border-color 0.2s;
}
.amac-header__searchgroup:hover,
.amac-header__searchgroup:focus-within {
  border-color: #86d10f;
}
.amac-header__searchgroup .amac-header__searchbox {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  border-radius: 7px 0 0 7px;
}
/* Nút "Lọc" = phần đuôi của thanh, ngăn bằng vạch mảnh. Có chữ "Lọc" kèm icon:
   icon đứng một mình khách dễ không nhận ra. Chỉ hiện ở header mobile (<1200px). */
.amac-header__filter-btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px 0 11px;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 0 7px 7px 0;
  transition: color 0.2s, background-color 0.2s;
}
.amac-header__filter-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.amac-header__filter-btn:hover,
.amac-header__filter-btn:focus-visible {
  color: #fff;
  background: rgba(134, 209, 15, 0.08);
  outline: none;
}
.amac-header__filter-btn i {
  color: #86d10f;
  font-size: 13px;
}
/* Màn < 390px MÀ có giỏ hàng (khách đăng nhập, đang cho đặt hàng): giỏ chiếm ~45px,
   ô tìm chỉ còn 55px (đo ở 360px) nên "Tìm sản phẩm" (79px) bị cắt. Lúc đó nút lọc
   bỏ chữ, chỉ giữ icon (aria-label vẫn đủ) ⇒ ô tìm còn ~82px. Trình duyệt cũ không
   hiểu :has() thì vẫn hiện chữ "Lọc", chỉ là ô tìm bị cắt chữ — không vỡ bố cục. */
@media (max-width: 389.98px) {
  .amac-header__mobile-row--single:has(.amac-header__cart-btn) .amac-header__filter-btn {
    padding: 0 12px;
  }
  .amac-header__mobile-row--single:has(.amac-header__cart-btn) .amac-header__filter-btn span {
    display: none;
  }
}

.amac-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  /* Chia đều theo SỐ MỤC THỰC TẾ (không cố định 5 cột): lúc tạm dừng đặt hàng mục
     "Đơn hàng" bị ẩn còn 4 mục — repeat(5, 1fr) để trống 1 cột bên phải (30/09). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: #111318;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.amac-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 8px 2px;
  background: none;
  border: 0;
  color: #9aa3af;
  text-decoration: none;
  transition: color 0.15s ease;
}
.amac-bottom-nav__item:active {
  background: rgba(255, 255, 255, 0.05);
}
.amac-bottom-nav__item.is-active {
  color: #86d10f;
}
.amac-bottom-nav__item:focus-visible {
  outline: 2px solid #86d10f;
  outline-offset: -2px;
}
.amac-bottom-nav__icon {
  font-size: 17px;
  line-height: 1;
}
.amac-bottom-nav__label {
  font-size: 11px;
  line-height: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Chừa chỗ để thanh đáy không che nội dung cuối trang (fixed-element-offset). */
@media (max-width: 1023.98px) {
  .amac-bottom-nav {
    display: grid;
  }
  /* `html body` chứ không phải `body`: `main.css` (nạp SAU file này trên 6 trang)
     có reset `body, h1, h2, ... { padding: 0 }` cùng độ ưu tiên nên thắng theo thứ
     tự. Thêm `html` nâng specificity lên (0,0,2) để giữ chỗ cho thanh đáy. */
  html body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mục "BST HOT" (07/10/2026, yêu cầu "màu khác, bùng lửa lên cho nổi"):
 * chữ đổi màu lửa vàng → cam → đỏ + quầng sáng + ngọn lửa nhỏ bập bùng.
 * ⚠️ KHÔNG dùng gradient cắt theo chữ (`background-clip: text` + chữ trong suốt):
 * Safari iPhone lâu lâu không vẽ lớp gradient (nhất là trong ngăn menu trượt) ⇒
 * chữ trong suốt = MẤT CHỮ, chỉ còn ngọn lửa (gặp 08/10/2026, tải lại mới hiện).
 * Đổi `color` bằng keyframes thì chữ luôn có màu, trình duyệt nào cũng vẽ.
 * ⚠️ Ngọn lửa ở menu máy tính là `position:absolute` (chỉ số trên) — KHÔNG chiếm bề
 * ngang: menu 11 mục chỉ còn dư vài px ở 1200/1400/1600px (xem khối @media phía trên).
 * Specificity (0,3,3) để thắng `.amac-header__nav a.active` (màu xanh mục đang xem). */
.amac-header__nav ul li a.amac-nav-hot,
.amac-sidebar nav ul li a.amac-nav-hot {
  color: #ff7a00;
  -webkit-text-fill-color: currentColor;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 110, 0, 0.55);
  animation: amac-hot-flow 2.4s ease-in-out infinite;
}
.amac-nav-hot__flame {
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 13px;
  transform-origin: 50% 100%;
  animation: amac-hot-flicker 0.9s ease-in-out infinite alternate;
  pointer-events: none;
}
.amac-sidebar .amac-nav-hot__flame {
  position: static;
  display: inline-block;
  vertical-align: -1px;
  margin-left: 6px;
  width: 12px;
  height: 15px;
}
@keyframes amac-hot-flow {
  0%, 100% { color: #ffd23f; }
  50% { color: #ff3d1f; }
}
@keyframes amac-hot-flicker {
  0% { transform: scale(0.92) rotate(-4deg); opacity: 0.85; }
  100% { transform: scale(1.08) rotate(4deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .amac-header__nav ul li a.amac-nav-hot,
  .amac-sidebar nav ul li a.amac-nav-hot,
  .amac-nav-hot__flame {
    animation: none;
  }
}
/* 1200–1399px khe giữa mục chỉ 9px ⇒ lửa 10px đè chữ "BÓNG ĐÁ" 2px (đo 07/10). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .amac-nav-hot__flame {
    right: -8px;
    width: 8px;
    height: 11px;
  }
}