/* ===================================================================
   DecorKimVinh — Design System
   =================================================================== */


:root {
  /* Colors */
  --color-primary: #A6131C;
  --color-primary-dark: #7C0F16;
  --color-primary-light: #D94452;
  --color-secondary: #0E4430;
  --color-secondary-dark: #082E20;
  --color-secondary-light: #1B6B4C;
  --color-gold: #D4A537;
  --color-gold-light: #F0CF7B;
  --color-cream: #FBF3E7;
  --color-cream-dark: #F2E5CC;
  --color-dark: #241A14;
  --color-gray: #6B6258;
  --color-white: #FFFFFF;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Misc */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 10px rgba(36, 26, 20, 0.08);
  --shadow-md: 0 10px 30px rgba(36, 26, 20, 0.14);
  --shadow-lg: 0 20px 50px rgba(36, 26, 20, 0.18);
  --transition: 0.3s ease;
  --header-h: 100px;
  --desktop-mini-header-h: 68px;
  --mobile-contact-bar-h: 66px;
  --pdp-sticky-bar-h: 68px;
  --checkout-stickybar-h: 68px;

  /* Menu mobile 2 lớp: drawer hamburger + bảng danh mục toàn màn hình */
  --mobile-drawer-width: min(84vw, 340px);
  --mobile-menu-header-height: 52px;
  --mobile-category-sidebar-width: 92px;
  --mobile-menu-z-index: 1200;
  --mobile-menu-overlay: rgba(0, 0, 0, 0.42);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background: var(--color-cream);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select { font-family: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Số trong mọi mức giá (.price) dùng chữ số lining + tabular (cùng chiều
   cao, cùng độ rộng) thay vì mặc định của font — tránh chữ số bị lệch cao
   thấp/không thẳng hàng, đặc biệt rõ ở các nơi trước đây dùng font-display
   (Playfair Display) vốn có chữ số kiểu old-style không đều. */
.price { font-variant-numeric: lining-nums tabular-nums; }

.icon { width: 20px; height: 20px; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 34px; height: 34px; }

/* ---------- Section heading ---------- */
.section-head { text-align: center; max-width: 600px; margin: 0 auto 48px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin-bottom: 10px;
}
.section-head p { color: var(--color-gray); font-size: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--outline { border: 2px solid var(--color-white); color: var(--color-white); }
.btn--outline:hover { background: var(--color-white); color: var(--color-secondary-dark); transform: translateY(-3px); }
.btn--gold { background: var(--color-gold); color: var(--color-dark); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--color-gold-light); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--outline-dark { border: 2px solid var(--color-secondary-dark); color: var(--color-secondary-dark); }
.btn--outline-dark:hover { background: var(--color-secondary-dark); color: var(--color-white); transform: translateY(-3px); }

/* ===================================================================
   TOPBAR
   =================================================================== */
.topbar { background: var(--color-primary-dark); color: rgba(255,255,255,0.85); font-size: 13px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.topbar__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 5px; transition: color var(--transition); white-space: nowrap; }
.topbar__links a:hover { color: var(--color-gold-light); }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  /* Phải cao hơn .nav-overlay (z-index:998) — menu mobile (.site-nav) nằm
     lồng bên trong header nên bị kẹt trong stacking context của header;
     nếu header thấp hơn overlay thì menu bên trong nó luôn bị overlay tối
     phủ lên trên dù .site-nav tự đặt z-index cao hơn, khiến link không
     bấm được. */
  z-index: 1000;
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

/* Desktop (>900px): header đầy đủ (logo+search+actions+hàng nav, ~160px)
   không dính đỉnh vĩnh viễn nữa — cuộn đi bình thường như nội dung khác, đỡ
   chiếm không gian dọc cố định. .desktop-mini-header (bên dưới) thay nó dính
   đỉnh 1 thanh gọn hơn khi cuộn qua ngưỡng, dựng bằng JS (js/main.js, mục
   "Desktop: sticky mini header khi cuộn xuống"). Mobile (<=900px) giữ nguyên
   .site-header sticky như cũ — không đổi hành vi mobile. */
@media (min-width: 901px) {
  .site-header { position: static; }
}

/* ---------- Desktop: sticky mini header khi cuộn xuống ----------
   Tạo bằng JS, chèn cuối <body> — ẩn hẳn trên mobile (đã có
   .mobile-mini-header riêng), chỉ bật ở desktop. Gồm logo, danh mục sản
   phẩm, thanh tìm kiếm, yêu thích, giỏ hàng — không tạo bản sao/state riêng:
   4 thành phần này là CHÍNH các phần tử thật (mega-menu trigger+panel,
   .header__search-wrap, .wishlist-dropdown, .cart-dropdown) được reparent
   nguyên vẹn từ header chính vào đây lúc cuộn qua ngưỡng, và trả về đúng chỗ
   cũ khi cuộn lên lại (xem js/main.js) — giữ đúng state/listener/aria đã có,
   không lệch dữ liệu giữa 2 nơi. */
.desktop-mini-header { display: none; }
@media (min-width: 901px) {
  .desktop-mini-header {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--desktop-mini-header-h);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform var(--transition);
  }
  .desktop-mini-header.show { transform: translateY(0); }

  /* Bọc nội dung trong .container (giống .header__inner) để không giãn sát
     mép màn hình cực rộng — chỉ riêng thanh nền (.desktop-mini-header) mới
     full-width cho shadow/background trải hết viewport. */
  .desktop-mini-header__inner { display: flex; align-items: center; gap: 20px; height: 100%; }

  .desktop-mini-header__logo { flex-shrink: 0; display: flex; align-items: center; }
  .desktop-mini-header__logo img { display: block; height: 34px; width: auto; object-fit: contain; }

  /* Các slot rỗng = CHÍNH các flex-item thật của .desktop-mini-header__inner
     (phần tử reparent vào chỉ là con của slot, không phải flex-item trực
     tiếp) — định kích thước ở đây, không ở phần tử con, nếu không
     flex-grow/shrink vô nghĩa vì không nằm trực tiếp trong flex container. */
  .desktop-mini-header__cat-slot { flex-shrink: 0; }
  .desktop-mini-header__nav-links-slot { flex-shrink: 0; }
  /* margin-left:auto đẩy nhóm tìm kiếm + yêu thích/giỏ hàng dồn sang phải,
     tách biệt hẳn với nhóm danh mục + link điều hướng bên trái — layout 2
     nhóm chuẩn e-commerce, không phải tìm kiếm chiếm hết khoảng trống còn
     lại (từng làm ô tìm kiếm dài quá mức). */
  .desktop-mini-header__search-slot { flex: 0 1 300px; min-width: 160px; margin-left: auto; }
  .desktop-mini-header__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

  /* Mega-menu trigger thật, reparent thẳng vào slot (không phải bản sao) —
     .mega-menu (position:absolute, top:100%) tự tính lại theo containing
     block mới là .desktop-mini-header (position:fixed, tổ tiên gần nhất có
     position khác static) nên panel vẫn luôn đổ xuống đúng ngay dưới thanh
     này, không cần CSS riêng cho .mega-menu. */
  .desktop-mini-header .site-nav__megamenu-trigger {
    background: var(--color-secondary);
    color: var(--color-white);
    border-bottom: none;
    border-radius: var(--radius-full);
    padding: 10px 18px;
    font-size: 13px;
    white-space: nowrap;
  }
  .desktop-mini-header .site-nav__megamenu-trigger:hover,
  .desktop-mini-header .site-nav__megamenu-trigger[aria-expanded="true"] {
    background: var(--color-secondary-dark);
    color: var(--color-white);
  }

  /* 3 link điều hướng còn lại (Tự Trang Trí Cây / Blog / Liên Hệ) — reparent
     nguyên <li><a> thật từ .site-nav__list, nhưng selector gốc
     ".site-nav__list > li > a" không khớp nữa sau khi dời ra khỏi đó nên
     phải định nghĩa lại style ở đây (không kế thừa được), thu nhỏ hơn bản
     gốc cho vừa thanh 68px. */
  .desktop-mini-header__nav-links-slot { display: flex; align-items: center; gap: 2px; }
  .desktop-mini-header__nav-links-slot li { position: relative; }
  .desktop-mini-header__nav-links-slot a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    color: var(--color-dark);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
  }
  .desktop-mini-header__nav-links-slot a:hover { background: var(--color-cream); color: var(--color-primary); }

  /* Ô tìm kiếm thật (+ dropdown gợi ý nếu đã tạo) lấp đầy slot — bỏ
     max-width:560px gốc, slot ở trên đã tự giới hạn 300px rồi. */
  .desktop-mini-header .header__search-wrap,
  .desktop-mini-header .header__search {
    width: 100%;
    max-width: none;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.header__burger { display: none; color: var(--color-secondary-dark); }

.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo__icon { font-size: 28px; }
.logo__text { font-family: var(--font-display); font-size: 22px; color: var(--color-primary); font-weight: 600; }
.logo__text strong { color: var(--color-secondary-dark); }

/* Kích thước logo cố định bằng height + max-width + object-fit: contain —
   không phụ thuộc kích thước pixel gốc của file ảnh, không bị ảnh hưởng bởi
   rule "img { max-width:100% }" ở trên vì .logo__img cụ thể hơn (class > type
   selector) nên luôn thắng, bất kể cache CSS cũ/mới trên VPS. */
.logo__img {
  display: block;
  width: auto;
  height: 87px;
  max-width: 180px;
  object-fit: contain;
}

/* Logo gốc có chữ/hoạ tiết màu tối — nền footer rất tối (#160F0B) nên bọc
   trong khung nền trắng bo góc để không bị chìm mất. */
.logo__img-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  padding: 8px 14px;
  border-radius: var(--radius-md);
}
.logo--footer .logo__img,
.logo__img-wrap .logo__img {
  height: 73px;
  max-width: 170px;
}

@media (max-width: 768px) {
  .logo__img {
    height: 64px;
    max-width: 140px;
  }
  .logo--footer .logo__img,
  .logo__img-wrap .logo__img {
    height: 58px;
    max-width: 130px;
  }
}

.header__search-wrap { position: relative; flex: 1; max-width: 560px; }
.header__search {
  display: flex;
  border: 2px solid var(--color-cream-dark);
  border-radius: var(--radius-full);
  overflow: hidden;
  transition: border-color var(--transition);
}
.header__search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(166,19,28,0.15); }
/* Dropdown "Tất cả danh mục" cạnh ô tìm kiếm — dữ liệu tĩnh viết cứng tay từ
   bản demo ban đầu (chỉ 2 danh mục giả "Cây Thông Noel"/"Đèn Trang Trí"),
   chưa từng nối với dữ liệu danh mục thật, không lọc được gì — ẩn theo yêu
   cầu. Vẫn còn <select> này trong HTML các trang đã sinh sẵn (ẩn bằng CSS
   áp dụng ngay, không cần sinh lại trang); template mới
   (templates/*-template.html, index.html) đã bỏ hẳn khỏi markup. */
.header__search-cat { display: none; }
.header__search input { flex: 1; border: none; padding: 0 16px; font-size: 14px; min-width: 0; }
.header__search input:focus { outline: none; }
.header__search button {
  background: var(--color-primary);
  color: var(--color-white);
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.header__search button:hover { background: var(--color-primary-dark); }

/* ---------- Search suggestions dropdown ---------- */
.search-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
}
.search-suggest.show { display: block; }
.search-suggest__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gray);
  padding: 8px 10px 6px;
}
.search-suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 8px; }
.search-suggest__chip {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--color-cream);
  color: var(--color-dark);
  border: 1px solid var(--color-cream-dark);
  cursor: pointer;
  transition: background var(--transition);
}
.search-suggest__chip:hover { background: var(--color-cream-dark); }
.search-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  text-decoration: none;
  cursor: pointer;
}
.search-suggest__item:hover,
.search-suggest__item.active { background: var(--color-cream); }
.search-suggest__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  overflow: hidden;
}
.search-suggest__icon img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.search-suggest__name {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest__name mark { background: var(--color-gold-light); color: var(--color-dark); border-radius: 3px; }
.search-suggest__meta { font-size: 11.5px; color: var(--color-gray); }
.search-suggest__price { font-size: 13px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.search-suggest__empty { padding: 18px 10px; font-size: 13px; color: var(--color-gray); text-align: center; }
.search-suggest__see-all {
  display: block;
  text-align: center;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  border-top: 1px solid var(--color-cream-dark);
}
.search-suggest__see-all:hover { background: var(--color-cream); }

.header__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0; }
.header__action { position: relative; color: var(--color-secondary-dark); transition: color var(--transition); }
.header__action:hover { color: var(--color-primary); }

/* Nút bật tìm kiếm trên điện thoại — chỉ hiện khi thanh tìm kiếm chính bị
   ẩn (xem @media max-width:900px bên dưới). */
.header__search-toggle { display: none; background: none; border: none; padding: 0; cursor: pointer; }
.header__badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Mobile: mini header hiện khi cuộn xuống ----------
   Thanh rút gọn (logo + tìm kiếm + yêu thích + giỏ hàng) tạo bằng JS
   (js/main.js, không sửa markup .header trong từng file HTML) và chèn vào
   cuối <body> — ẩn hẳn trên desktop, chỉ bật flex ở mobile rồi trượt vào
   bằng transform khi JS thêm class .show lúc cuộn qua ngưỡng. */
.mobile-mini-header { display: none; }
@media (max-width: 900px) {
  .mobile-mini-header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 14px;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    z-index: 1090;
    transform: translateY(-100%);
    transition: transform var(--transition);
  }
  .mobile-mini-header.show { transform: translateY(0); }
  .mobile-mini-header__logo { flex-shrink: 0; display: flex; align-items: center; }
  .mobile-mini-header__logo img { display: block; height: 32px; width: auto; max-width: 90px; object-fit: contain; }
  .mobile-mini-header__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--color-cream-dark);
    border-radius: var(--radius-full);
    background: var(--color-cream);
    color: var(--color-gray);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
  }
  .mobile-mini-header__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Ô tìm kiếm giả bị thay chỗ bởi .header__search thật (reparent lúc bấm,
     xem js/main.js) — ẩn nút giả đi, để ô thật chiếm đúng khoảng trống đó. */
  .mobile-mini-header.search-active .mobile-mini-header__search { display: none; }
  .mobile-mini-header .header__search-wrap,
  .mobile-mini-header .header__search {
    flex: 1 1 auto;
    order: initial;
    width: auto;
    max-width: none;
  }
  .mobile-mini-header .header__search { height: 36px; }
  .mobile-mini-header .header__search button { width: 36px; }
  .mobile-mini-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .mobile-mini-header__action { position: relative; color: var(--color-secondary-dark); }
  .mobile-mini-header__badge {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Cart / Wishlist dropdown ---------- */
.cart-dropdown, .wishlist-dropdown { position: relative; display: flex; align-items: center; }
.cart-dropdown__panel, .wishlist-dropdown__panel {
  position: absolute;
  top: calc(100% + 16px);
  right: -10px;
  width: min(340px, calc(100vw - 48px));
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  /* Cao hơn .mobile-mini-header (z-index:1090) để panel không bị mini
     header che khi bấm tim/giỏ hàng từ đó trên mobile. */
  z-index: 1095;
}
.cart-dropdown.open .cart-dropdown__panel,
.wishlist-dropdown.open .wishlist-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Khi mini header (mobile, hiện lúc cuộn xuống) đang hiện: 2 dropdown này vẫn
   neo theo icon giỏ hàng/yêu thích GỐC ở header trên cùng — nếu đã cuộn qua
   khỏi header gốc, panel bung ra ở vị trí đó, ngoài màn hình, trông như
   không phản hồi. Ghim panel theo viewport, ngay dưới mini header, để nó
   "đi theo" người xem thay vì đứng yên ở header đã cuộn qua. Body được gắn
   class này bởi js/main.js đúng lúc mini header hiện/ẩn (xem onMiniHeaderScroll). */
@media (max-width: 900px) {
  body.dkv-mini-header-show .cart-dropdown__panel,
  body.dkv-mini-header-show .wishlist-dropdown__panel {
    position: fixed;
    top: 66px;
    right: 14px;
    left: auto;
  }
}

.cart-dropdown__list { display: flex; flex-direction: column; gap: 14px; max-height: 320px; overflow-y: auto; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-cream-dark); }
.cart-dropdown__line { display: flex; gap: 10px; position: relative; padding-right: 22px; }
.cart-dropdown__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.cart-dropdown__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-dropdown__info { flex: 1; min-width: 0; }
.cart-dropdown__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-dropdown__variant { font-size: 12px; color: var(--color-gray); margin-top: 2px; }
.cart-dropdown__meta { font-size: 12.5px; color: var(--color-gray); margin-top: 4px; }
.cart-dropdown__remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 12px;
  transition: all var(--transition);
}
.cart-dropdown__remove:hover { background: var(--color-cream); color: var(--color-primary); }

.cart-dropdown__subtotal { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 12px; }
.cart-dropdown__subtotal strong { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--color-primary); }
.cart-dropdown__checkout { width: 100%; }

.cart-dropdown__empty { text-align: center; padding: 30px 10px 14px; }
.cart-dropdown__empty-icon { display: block; font-size: 38px; margin-bottom: 10px; }
.cart-dropdown__empty p { color: var(--color-gray); font-size: 13.5px; }

/* ===================================================================
   NAV
   =================================================================== */
.site-nav { position: relative; background: var(--color-white); border-bottom: 1px solid var(--color-cream-dark); }
/* Chỉ hiện trong menu trượt mobile (xem @media max-width:900px) — trên
   desktop .site-nav là thanh ngang, không cần logo riêng ở đó. */
.site-nav__logo { display: none; }
/* Icon nét mảnh trước mỗi mục + mục "Danh Mục" (button riêng, mở bảng danh
   mục toàn màn hình) chỉ có ý nghĩa trong drawer mobile — ẩn hẳn ở thanh
   nav ngang desktop để không đổi giao diện desktop hiện có. */
.site-nav__item-icon { display: none; }
.site-nav__mobile-only { display: none; }
/* An toàn 2 lớp: ẩn hẳn ở mọi breakpoint theo mặc định (kể cả nếu JS chưa
   kịp chạy) — chỉ @media (max-width:900px) bên dưới mới bật lại + style
   đầy đủ, đảm bảo desktop (>900px) không bao giờ thấy bảng danh mục này. */
.cat-sheet { display: none; }
.site-nav__list { display: flex; justify-content: center; }
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.site-nav__sale { color: var(--color-primary) !important; font-weight: 700; }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 50;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 12px 20px; color: var(--color-dark); font-size: 14px; transition: background var(--transition); }
.dropdown a:hover { background: var(--color-cream); color: var(--color-primary); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 998;
}
.nav-overlay.show { opacity: 1; visibility: visible; }

/* ===================================================================
   MEGA MENU (danh mục sản phẩm)
   =================================================================== */
/* KHÔNG đặt position:relative ở đây — .mega-menu cần lấy .site-nav (rộng
   full thanh nav) làm containing block để tự căn giữa dưới toàn bộ thanh
   điều hướng, tránh bị tràn/cắt mất bên phải khi nút trigger nằm lệch trái
   trong nav (xem .mega-menu bên dưới, left:50% + translateX(-50%)).
   Selector phải cụ thể hơn ".site-nav__list > li" (position:relative dùng
   chung cho mọi <li>, xem phía trên) để thắng specificity, nếu không giá
   trị "static" ở đây sẽ bị rule đó đè mất. */
.site-nav__list > li.site-nav__megamenu-trigger-wrap { position: static; }
.site-nav__megamenu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.site-nav__megamenu-trigger:hover,
.site-nav__megamenu-trigger[aria-expanded="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.site-nav__megamenu-trigger .icon--sm:last-child { transition: transform var(--transition); }
.site-nav__megamenu-trigger[aria-expanded="true"] .icon--sm:last-child { transform: rotate(180deg); }

.mega-menu__back, .mega-menu__close { display: none; }

@keyframes megaMenuOpen {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scaleY(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scaleY(1); }
}
@keyframes megaPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes megaItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: clamp(1050px, 90vw, 1200px);
  max-width: 96vw;
  max-height: 75vh;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transform-origin: top center;
  transition: opacity 0.18s ease, visibility 0.22s;
  z-index: 900;
  overflow: hidden;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  animation: megaMenuOpen 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu__inner { display: flex; max-height: 75vh; }

.mega-menu__left {
  flex: 0 0 240px;
  border-right: 1px solid var(--color-cream-dark);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
}
.mega-menu__parent {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-dark);
  cursor: pointer;
  text-decoration: none; /* giờ là <a>, không phải <button> — bỏ gạch chân mặc định của link */
  transition: background var(--transition), color var(--transition);
}
.mega-menu__parent:hover { background: var(--color-cream); }
.mega-menu__parent.is-active {
  background: rgba(27, 107, 76, 0.12);
  color: var(--color-secondary-dark);
  font-weight: 700;
  border-left-color: var(--color-secondary);
}
.mega-menu__parent-icon { font-size: 18px; flex-shrink: 0; }
.mega-menu__parent-name { flex: 1; }
.mega-menu__parent .icon--sm { color: var(--color-gray); transform: rotate(-90deg); flex-shrink: 0; }
.mega-menu__parent.is-active .icon--sm { color: var(--color-secondary-dark); }

.mega-menu__right { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; }
.mega-menu__panel { display: none; }
.mega-menu__panel.is-active { display: block; animation: megaPanelIn 0.28s ease; }

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.mega-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), transform 0.15s ease;
  animation: megaItemIn 0.32s ease backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.mega-menu__item:hover { background: var(--color-cream); transform: translateY(-2px); }
.mega-menu__item-img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
}
.mega-menu__item-emoji {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
}
.mega-menu__item-name { font-size: 13px; color: var(--color-dark); font-weight: 500; line-height: 1.35; }

/* Danh mục cấp 3 (chỉ render khi có) — .mega-menu__item trở thành <div> bọc
   .mega-menu__item-link (giữ nguyên layout/animation của .mega-menu__item cũ)
   + danh sách link cấp 3 ngay dưới. Không ảnh hưởng thẻ cấp 2 không có con. */
.mega-menu__item-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; text-decoration: none; color: inherit;
}
.mega-menu__item-children {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px; width: 100%;
}
.mega-menu__subitem {
  font-size: 11px; color: var(--color-gray); text-decoration: none;
  padding: 2px 6px; border-radius: 4px; line-height: 1.4;
}
.mega-menu__subitem:hover { background: var(--color-cream); color: var(--color-dark); text-decoration: underline; }

.mega-menu__empty { text-align: center; padding: 50px 24px; color: var(--color-gray); }
.mega-menu__empty p { margin-bottom: 18px; }

/* ===================================================================
   MEGA MENU — theme "Noel đỏ ấm áp" (tablet 901px trở lên + desktop)
   Dưới 901px: khối này không áp dụng, mega menu dùng drawer mobile riêng
   (xem @media max-width:900px) với theme đỏ nhẹ + tối đa 1 chi tiết
   trang trí nhỏ. 901–1023px (tablet) dùng chung theme desktop bên dưới
   nhưng bị thu gọn/giảm số cụm trang trí bởi khối
   @media (min-width:901px) and (max-width:1023px) ngay sau.
   =================================================================== */
.mega-menu__decor { display: none; } /* chỉ bật trong @media (min-width:901px) bên dưới, hoặc mobile (xem @media max-width:900px) */

@keyframes megaGlowMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes megaSparkleFloat {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.85; }
  85% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-26px); }
}

/* ---------- Ảnh trang trí thật (images/menu-decor/*.webp) ----------
   4 cụm cố định, dùng chung markup .mega-menu__decor-* cho mọi breakpoint
   (xem scripts/lib/categories.js#buildMegaMenuDecor) — CSS chỉ điều khiển
   vị trí/kích thước/hiệu ứng theo breakpoint, không đổi cấu trúc DOM. */
@keyframes megaDecorLightsIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: var(--decor-op, 1); transform: translateY(0); }
}
@keyframes megaDecorOrnamentsIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: var(--decor-op, 1); transform: scale(1); }
}
@keyframes megaDecorPineIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes megaDecorSnowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: var(--decor-op, 1); transform: translateY(0); }
}
@keyframes megaLightsGlow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes megaOrnamentSway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

.mega-menu__decor-lights,
.mega-menu__decor-ornaments,
.mega-menu__decor-pine-gifts,
.mega-menu__decor-snowflakes {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.mega-menu__decor-lights img,
.mega-menu__decor-ornaments img,
.mega-menu__decor-pine-gifts img,
.mega-menu__decor-snowflakes img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 901px) {
  .mega-menu {
    width: min(1200px, 94vw);
    border-radius: 14px;
    border: 1px solid rgba(255, 211, 145, 0.25);
    box-shadow: 0 24px 60px rgba(40, 4, 4, 0.45), var(--shadow-lg);
    background:
      radial-gradient(circle at 55% 35%, rgba(218, 45, 29, 0.85), transparent 45%),
      linear-gradient(135deg, #720707 0%, #B51212 45%, #8A0808 100%);
  }
  .mega-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 196, 138, 0.45), transparent 45%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
    animation: megaGlowMove 10s ease-in-out infinite;
    animation-play-state: paused;
  }
  .mega-menu.is-open::before { animation-play-state: running; }

  /* ---------- Lớp trang trí (ảnh WebP thật, xem images/menu-decor/) ----------
     .mega-menu__decor bám theo đúng vùng ".mega-menu__right" (chừa hẳn cột
     trái 240px — flex 0 0 240px của .mega-menu__left, xem trên) để 4 cụm ảnh
     luôn nằm trong "vùng nội dung bên phải" như yêu cầu, không đè lên cột
     danh mục cha bên trái. */
  .mega-menu__decor {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    left: 240px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  /* Dây đèn: chạy dọc cạnh trên, full chiều rộng vùng nội dung bên phải.
     File ảnh có nhiều khoảng trong suốt bên dưới dải đèn — không sao vì
     phần trong suốt không hiện gì, ảnh vẫn giữ nguyên tỉ lệ gốc. */
  .mega-menu__decor-lights {
    top: 0; left: 0; right: 0;
    width: 100%;
    animation: megaDecorLightsIn 320ms ease both;
    animation-delay: 60ms;
  }
  .mega-menu.is-open .mega-menu__decor-lights img {
    animation: megaLightsGlow 3.2s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  /* Quả châu: góc trên bên phải. Ảnh nguồn có nhiều khoảng trong suốt bên
     trái (quả châu chỉ nằm ở ~1/5 bên phải khung ảnh) nên container phải
     đủ rộng để phần quả châu hiện đủ lớn — phần trong suốt bên trái không
     che gì nên không ảnh hưởng lưới danh mục dù trông "rộng" trong DOM.
     top/right = 0 (không lùi âm) để không bị .mega-menu (overflow:hidden)
     cắt mất đúng phần có quả châu, vốn nằm sát góc trên-phải của ảnh gốc. */
  .mega-menu__decor-ornaments {
    top: 0; right: 0;
    width: 340px;
    max-width: 45%;
    animation: megaDecorOrnamentsIn 320ms ease both;
    animation-delay: 130ms;
    transform-origin: top right;
  }
  .mega-menu.is-open .mega-menu__decor-ornaments img {
    animation: megaOrnamentSway 4.5s ease-in-out infinite;
    animation-delay: 0.9s;
    transform-origin: top center;
  }

  .mega-menu__sparkles { position: absolute; inset: 0; }
  .mega-menu__sparkle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #FFE3B3;
    opacity: 0;
    animation: megaSparkleFloat 6s ease-in-out infinite;
    animation-play-state: paused;
  }
  .mega-menu.is-open .mega-menu__sparkle { animation-play-state: running; }
  .mega-menu__sparkle:nth-child(1) { left: 8%; top: 78%; animation-delay: 0s; animation-duration: 5.5s; }
  .mega-menu__sparkle:nth-child(2) { left: 18%; top: 58%; animation-delay: 0.8s; animation-duration: 6.2s; width: 4px; height: 4px; }
  .mega-menu__sparkle:nth-child(3) { left: 30%; top: 84%; animation-delay: 1.6s; animation-duration: 5s; }
  .mega-menu__sparkle:nth-child(4) { left: 42%; top: 66%; animation-delay: 0.4s; animation-duration: 6.8s; width: 5px; height: 5px; }
  .mega-menu__sparkle:nth-child(5) { left: 55%; top: 80%; animation-delay: 2.2s; animation-duration: 5.6s; }
  .mega-menu__sparkle:nth-child(6) { left: 66%; top: 52%; animation-delay: 1.1s; animation-duration: 6.4s; width: 4px; height: 4px; }
  .mega-menu__sparkle:nth-child(7) { left: 78%; top: 74%; animation-delay: 0.2s; animation-duration: 5.2s; }
  .mega-menu__sparkle:nth-child(8) { left: 88%; top: 60%; animation-delay: 1.8s; animation-duration: 6s; width: 6px; height: 6px; }
  .mega-menu__sparkle:nth-child(9) { left: 12%; top: 32%; animation-delay: 2.6s; animation-duration: 5.8s; }
  .mega-menu__sparkle:nth-child(10) { left: 46%; top: 24%; animation-delay: 0.6s; animation-duration: 6.6s; width: 4px; height: 4px; }
  .mega-menu__sparkle:nth-child(11) { left: 72%; top: 28%; animation-delay: 1.4s; animation-duration: 5.4s; }
  .mega-menu__sparkle:nth-child(12) { left: 92%; top: 36%; animation-delay: 2s; animation-duration: 6.1s; width: 5px; height: 5px; }
  .mega-menu__sparkle:nth-child(13) { left: 25%; top: 14%; animation-delay: 0.9s; animation-duration: 5.9s; }
  .mega-menu__sparkle:nth-child(14) { left: 60%; top: 12%; animation-delay: 1.7s; animation-duration: 6.3s; width: 4px; height: 4px; }

  /* Cành thông + hộp quà: góc dưới bên phải. */
  .mega-menu__decor-pine-gifts {
    bottom: -10px; right: -8px;
    width: 210px;
    max-width: 32%;
    animation: megaDecorPineIn 320ms ease both;
    animation-delay: 200ms;
  }
  /* Không animation liên tục sau khi xuất hiện — giữ tĩnh theo yêu cầu. */

  /* Hoa tuyết / ngôi sao: góc dưới bên trái (của vùng nội dung bên phải). */
  .mega-menu__decor-snowflakes {
    bottom: -6px; left: -6px;
    width: 170px;
    max-width: 26%;
    animation: megaDecorSnowIn 320ms ease both;
    animation-delay: 270ms;
  }

  /* ---------- Nội dung (nằm trên lớp trang trí) ---------- */
  .mega-menu__inner { position: relative; z-index: 2; }

  .mega-menu__left {
    background: linear-gradient(180deg, #650606 0%, #4a0404 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mega-menu__parent { color: rgba(255, 255, 255, 0.92); }
  .mega-menu__parent-icon,
  .mega-menu__parent-name { transition: transform 180ms ease; }
  .mega-menu__parent:hover { background: rgba(255, 255, 255, 0.08); }
  .mega-menu__parent:hover .mega-menu__parent-icon,
  .mega-menu__parent:hover .mega-menu__parent-name { transform: translateX(3px); }
  .mega-menu__parent .icon--sm { color: rgba(255, 255, 255, 0.65); transition: transform 180ms ease; }
  .mega-menu__parent:hover .icon--sm { transform: rotate(-90deg) translateX(2px); }
  .mega-menu__parent:focus-visible { outline: 2px solid #FFD391; outline-offset: -2px; }

  .mega-menu__parent.is-active {
    background: #F9E5D5;
    color: #8B0909;
    border-left-color: transparent;
    border-radius: 6px;
    margin: 0 8px;
    width: calc(100% - 16px);
    box-shadow: inset 0 0 0 1px rgba(255, 211, 145, 0.6);
  }
  .mega-menu__parent.is-active .icon--sm { color: #8B0909; }

  .mega-menu__grid { grid-template-columns: repeat(4, 1fr); }

  .mega-menu__item {
    position: relative;
    z-index: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 224, 190, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(2px);
    border-radius: 10px;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }
  .mega-menu__item::after {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: 0;
    background: radial-gradient(circle, rgba(255, 180, 100, 0.35), transparent 70%);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
  }
  .mega-menu__item-img, .mega-menu__item-emoji, .mega-menu__item-name {
    position: relative;
    z-index: 1;
  }
  .mega-menu__item-img, .mega-menu__item-emoji { background: rgba(255, 255, 255, 0.08); transition: transform 180ms ease; }
  .mega-menu__item-name { color: rgba(255, 250, 240, 0.92); }

  /* Danh mục cấp 3 (.mega-menu__subitem) vốn dùng var(--color-gray)/var(--color-dark)
     — 2 màu tối, thiết kế cho nền sáng — nên chìm vào nền đỏ đậm của mega
     menu ở breakpoint này, không đọc rõ. Đổi sang màu sáng cùng tông với
     .mega-menu__item-name ở trên (cấp 2) để nhất quán, nhạt hơn 1 chút cho
     đúng vai trò phụ (cấp con) so với cấp 2. */
  .mega-menu__subitem { color: rgba(255, 250, 240, 0.72); }
  .mega-menu__subitem:hover { background: rgba(255, 255, 255, 0.12); color: #FFD391; text-decoration: underline; }

  .mega-menu__item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 211, 145, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px rgba(178, 20, 12, 0.35);
  }
  .mega-menu__item:hover::after { opacity: 1; }
  .mega-menu__item:hover .mega-menu__item-img,
  .mega-menu__item:hover .mega-menu__item-emoji { transform: scale(1.08); }
  .mega-menu__item:focus-visible { outline: 2px solid #FFD391; outline-offset: 2px; }

  .mega-menu__empty { color: rgba(255, 255, 255, 0.85); }
  .mega-menu__empty p { color: rgba(255, 255, 255, 0.85); }
  .mega-menu__empty strong { color: #FFD391; }
}

/* ---------- Tablet 901–1023px: thu gọn trang trí ----------
   Dùng chung theme đỏ ở trên nhưng giảm số cụm ảnh (chỉ giữ dây đèn +
   quả châu — cụm góc phải nhẹ nhất) và giảm kích thước/độ đậm để không
   choán chỗ trên màn hình hẹp hơn. */
@media (min-width: 901px) and (max-width: 1023px) {
  .mega-menu__decor-pine-gifts,
  .mega-menu__decor-snowflakes { display: none; }
  /* --decor-op điều khiển opacity ở TRẠNG THÁI CUỐI của animation entrance
     (xem @keyframes megaDecorLightsIn/OrnamentsIn) — không đặt opacity trực
     tiếp ở đây vì animation "forwards" sẽ đè mất giá trị đó sau khi chạy xong. */
  .mega-menu__decor-lights,
  .mega-menu__decor-ornaments { --decor-op: 0.75; }
  .mega-menu__decor-ornaments { width: 110px; }
}

@media (min-width: 1280px) {
  .mega-menu__grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  background: linear-gradient(135deg, #2B0D0B 0%, #5C1414 45%, #8A2A1C 100%);
  overflow: hidden;
  padding: 90px 0 60px;
  /* Overlay dùng khi admin upload ảnh nền (xem dkv_gen_build_hero_open_tag()
     trong admin/lib/generate-site.php) — theo đúng mẫu tham khảo admin cung
     cấp: 1 mảng tối GẦN NHƯ ĐẶC phủ đúng vùng chữ (khớp bề rộng .hero__content
     580px) để chữ trắng/vàng tương phản rõ, rồi chuyển nhanh sang trong suốt
     hẳn để ảnh hiện đầy đủ, KHÔNG mờ dần lem nhem giữa 2 vùng như các bản
     trước (vừa không đủ tối để đọc chữ, vừa không đủ trong để thấy ảnh). */
  --hero-overlay: linear-gradient(90deg,
    rgba(20,6,5,.95) 0%,
    rgba(26,8,7,.94) 30%,
    rgba(32,10,8,.8) 42%,
    rgba(38,11,9,.35) 52%,
    rgba(38,11,9,.08) 62%,
    transparent 72%);
}
.hero__snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.snowflake {
  position: absolute;
  top: -10%;
  color: rgba(255,255,255,0.8);
  animation: snowfall linear infinite;
  user-select: none;
}
@keyframes snowfall {
  to { transform: translateY(110vh) translateX(20px); }
}

.hero__inner { position: relative; display: flex; align-items: center; gap: 40px; z-index: 2; }
.hero__content {
  flex: 1;
  max-width: 580px;
  /* text-shadow được kế thừa (inherited) xuống hero__eyebrow/stats — overlay
     giờ mờ hơn hẳn (xem --hero-overlay ở .hero) nên cần lớp bóng đổ nền này
     làm lưới an toàn cho MỌI chữ trong banner, không riêng title/text. */
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.hero__eyebrow {
  display: inline-block;
  color: var(--color-gold-light);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.hero__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.4);
}
/* Dòng 2 tiêu đề (title_line2) — nghiêng + vàng, tương phản với dòng 1
   (trắng, đứng) đúng mẫu tham khảo admin cung cấp. */
.hero__title-line2 { display: block; font-style: italic; font-weight: 600; color: var(--color-gold-light); }
/* Mũ Noel nhỏ "đội" lên chữ cái đầu tiêu đề — vẽ thuần CSS (không icon/emoji
   để nhất quán với hướng bỏ hẳn icon trang trí của banner), chỉ hiện ở
   desktop (::before/::after ẩn ở mobile vì tiêu đề canh giữa nên vị trí ước
   lượng theo "chữ cái đầu" không còn đúng — xem media query bên dưới).
   Vị trí gốc (-0.46em/-0.09em...) đặt bằng em (tính theo font-size hiện tại
   của .hero__title) để không lệch/đè khi font-size co giãn theo viewport
   (clamp(34px, 5vw, 56px)). --hat-dx/--hat-dy (mặc định 0em) là độ lệch admin
   TỰ KÉO CHỈNH THÊM ở admin/home-featured.php (.hat-preview) khi vị trí gốc
   vẫn chưa vừa mắt trên màn hình thật của họ — truyền vào qua style attribute
   của chính thẻ <h1> (dkv_gen_build_hero_block() trong generate-site.php). */
.hero__title::before {
  content: '';
  position: absolute;
  top: calc(-0.46em + var(--hat-dy, 0em));
  left: calc(-0.09em + var(--hat-dx, 0em));
  width: 0.5em;
  height: 0.32em;
  background: #C81E1E;
  border-radius: 4px 60% 45% 45% / 4px 100% 55% 55%;
  transform: rotate(-20deg);
  box-shadow: inset 0 -0.11em 0 -0.02em #fff;
  z-index: 3;
}
.hero__title::after {
  content: '';
  position: absolute;
  top: calc(-0.52em + var(--hat-dy, 0em));
  left: calc(0.29em + var(--hat-dx, 0em));
  width: 0.15em;
  height: 0.15em;
  border-radius: 50%;
  background: #fff;
  z-index: 3;
}
.hero__text { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 32px; max-width: 480px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero__stats { display: flex; gap: 40px; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats strong { font-family: var(--font-display); font-size: 26px; color: var(--color-gold-light); }
.hero__stats span { font-size: 13px; color: rgba(255,255,255,0.7); }

/* Không còn 5 icon emoji bay quanh banner (🎄🎁⭐🔔❄️) — banner giờ dựa vào
   ảnh nền thật (xem --hero-overlay) để tạo không khí, .hero__art chỉ còn
   giữ chỗ + quầng sáng vàng ambient, tránh rối mắt đè lên ảnh admin upload. */
.hero__art { flex: 1; position: relative; height: 420px; display: flex; align-items: center; justify-content: center; }
.hero__glow {
  position: absolute;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(212,165,55,0.35), transparent 70%);
  border-radius: 50%;
}

.hero__dots { display: flex; justify-content: center; gap: 8px; margin-top: 40px; position: relative; z-index: 2; }
.hero__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.hero__dots span.active { background: var(--color-gold); width: 24px; border-radius: 4px; transition: all var(--transition); }

/* ===================================================================
   CATEGORIES
   =================================================================== */
.categories { padding: 80px 0; }
.categories__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  color: var(--color-dark);
  font-size: 13px;
  font-weight: 600;
  transition: transform var(--transition);
}
.cat-card:hover { transform: translateY(-8px); }
.cat-card__icon {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.cat-card:hover .cat-card__icon { box-shadow: var(--shadow-md); }
.cat-card__icon--1 { background: linear-gradient(145deg, #DCEEDF, #BFE0C6); }
.cat-card__icon--2 { background: linear-gradient(145deg, #FBEFC6, #F3DD8E); }
.cat-card__icon--3 { background: linear-gradient(145deg, #E1EEDA, #C7E0BB); }
.cat-card__icon--4 { background: linear-gradient(145deg, #FBDDE0, #F3B6BD); }
.cat-card__icon--5 { background: linear-gradient(145deg, #FBE3D4, #F3C29F); }
.cat-card__icon--6 { background: linear-gradient(145deg, #F6E6F2, #E8C2DD); }
.cat-card__icon--7 { background: linear-gradient(145deg, #F8D9DA, #EFAAB0); }
.cat-card__icon--8 { background: linear-gradient(145deg, #DCEAF5, #B9D7EE); }

/* ===================================================================
   SPOTLIGHT PRODUCT
   =================================================================== */
/* padding-top 90px (không phải 0) là cố ý: trước đây section "Danh Mục Nổi
   Bật" (đã xoá) luôn đứng trước .spotlight nên tự tạo khoảng cách với hero
   bên trên — giờ .spotlight là section đầu tiên ngay sau hero (nền đỏ đậm),
   thiếu padding-top khiến khối dính sát mép dưới hero, trông như 1 phần của
   hero thay vì section riêng. */
.spotlight { padding: 90px 0; }
.spotlight > .container > .spotlight__eyebrow { text-align: center; margin: 0 auto 32px; }
/* Slider tự động lướt ngang qua từng sản phẩm nổi bật (tối đa 6, xem
   admin/home-featured.php) — mỗi sản phẩm là 1 slide .spotlight-slide đầy
   đủ (không phải lưới thẻ nhỏ), .spotlight-slider__track dịch chuyển bằng
   transform (đổi qua js/main.js), .spotlight-slider ẩn phần tràn ra ngoài. */
.spotlight-slider { position: relative; overflow: hidden; }
.spotlight-slider__track { display: flex; transition: transform 0.6s ease; }
.spotlight-slider__dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.spotlight-slider__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-cream-dark);
  border: none;
  transition: all var(--transition);
}
.spotlight-slider__dot:hover { background: var(--color-primary); opacity: 0.6; }
.spotlight-slider__dot.is-active { background: var(--color-primary); width: 24px; border-radius: 4px; }
.spotlight__inner {
  /* flex:0 0 100% ở đây là vai trò LÀM CON của .spotlight-slider__track (mỗi
     slide chiếm đúng 100% bề rộng track) — không liên quan display:grid bên
     dưới, đó là cách bố trí 2 CON của chính nó (ảnh/nội dung), 2 việc độc
     lập nên đổi flex->grid ở đây không ảnh hưởng cơ chế slider. */
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  /* Ảnh chiếm phần lớn hơn hẳn (1.3fr so với 1fr nội dung) và tự co giãn hết
     khoảng trống đang có — "to nhất có thể" theo đúng nghĩa co giãn theo màn
     hình, không phải 1 số px cố định sẽ luôn nhỏ/to lệch tuỳ màn hình. */
  grid-template-columns: minmax(280px, 1.3fr) minmax(260px, 1fr);
  align-items: center;
  gap: 60px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 50px;
}
.spotlight__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle, #DCEEDF, #9FCBAA);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.spotlight__emoji { font-size: 190px; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.18)); }
.spotlight__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.18));
}
.spotlight__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--color-gold);
  color: var(--color-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.spotlight__content { flex: 1; }
/* Cùng cỡ chữ với tiêu đề các section khác (.section-head h2, vd "Khám Phá
   Theo Danh Mục") — trước đây là nhãn nhỏ kiểu "eyebrow" (13px, in hoa thưa
   chữ), giờ dùng làm tiêu đề chính của khối nên phải to bằng các tiêu đề
   section khác để nhất quán, không còn là nhãn phụ nữa. */
.spotlight__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin-bottom: 0;
}
.spotlight__content h2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(24px, 3vw, 32px); color: var(--color-secondary-dark); margin-bottom: 14px; }
.spotlight__desc { color: var(--color-gray); margin-bottom: 20px; }
.spotlight__list { margin-bottom: 22px; }
.spotlight__list li { font-size: 14px; color: var(--color-dark); margin-bottom: 10px; }
.spotlight__price { margin-bottom: 26px; }
.spotlight__price .price { color: var(--color-primary); font-weight: 700; font-size: 26px; font-family: var(--font-body); }
.spotlight__price .price-old { color: var(--color-gray); text-decoration: line-through; font-size: 15px; margin-left: 10px; }
.spotlight__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 2px solid var(--color-cream-dark); border-radius: var(--radius-full); overflow: hidden; }
.qty button { width: 38px; height: 44px; font-size: 16px; color: var(--color-dark); transition: background var(--transition); }
.qty button:hover { background: var(--color-cream); }
.qty input { width: 36px; text-align: center; border: none; font-size: 14px; }
.spotlight__wish {
  width: 48px; height: 48px;
  border: 2px solid var(--color-cream-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-dark);
  transition: all var(--transition);
}
.spotlight__wish:hover, .spotlight__wish.active { border-color: var(--color-primary); color: var(--color-primary); }

/* Icon trái tim yêu thích — SVG path nhúng trực tiếp (KHÔNG dùng <use
   href="#icon-heart">) vì <use> tạo shadow tree, CSS ở ngoài không set
   fill được cho <path> bên trong (path của #icon-heart có fill="none"
   cứng, override im lặng bất kỳ rule fill nào nhắm vào <svg> cha — đây
   là lý do icon yêu thích cũ bấm vào không bao giờ tô đỏ được). Nhúng
   thẳng path để CSS toggle fill none/currentColor hoạt động đúng. */
.heart-icon path { fill: none; transition: fill var(--transition); }
.product-card__wish.active .heart-icon path,
.spotlight__wish.active .heart-icon path { fill: currentColor; }

/* ===================================================================
   PRODUCTS
   =================================================================== */
.products { padding: 0 0 90px; }
.tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
.tabs__btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray);
  background: var(--color-white);
  border: 2px solid var(--color-cream-dark);
  transition: all var(--transition);
}
.tabs__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tabs__btn.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
/* Thiết kế lại theo tham chiếu kiểu Shopee: ảnh chiếm gần trọn bề ngang thẻ
   (giảm padding bao quanh mạnh so với trước), phần thông tin bên dưới gọn
   lại tối đa. Dùng flex column + "order" trên từng phần tử con để xếp đúng
   thứ tự hiển thị (tên → giá → giao hàng) MÀ KHÔNG cần đổi thứ tự thật trong
   DOM — DOM vẫn là (media, h3, "rating" cũ, price) như bộ sinh trang
   (scripts/generate-site.js / admin/lib/generate-site.php) đang tạo ra, chỉ
   đổi CHỖ HIỂN THỊ bằng CSS nên áp dụng được ngay cho mọi trang đã sinh sẵn. */
.product-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  /* Padding chỉ 2 bên/dưới — KHÔNG có padding-top, để ảnh (bù trừ bằng
     margin âm ở .product-card__media bên dưới) tràn sát mép trên/2 cạnh,
     overflow:hidden bo tròn ảnh đúng theo góc thẻ (kiểu ảnh tham chiếu). */
  padding: 0 8px 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: none;
  flex-direction: column;
}
.product-card.is-active { display: flex; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* "Xem Thêm" dạng nút xổ thêm card tại chỗ (js/main.js, IIFE #productGrid
   không có pagination/sort) — trang chủ không còn dùng cơ chế này nữa (đã
   đổi sang các section theo danh mục cấp 1, mỗi section có link "Xem Thêm"
   riêng trỏ hẳn sang trang danh mục, xem .products__view-more bên dưới);
   giữ lại CSS này phòng khi có trang khác dùng lại #productGrid kiểu cũ. */
.products__load-more { display: flex; justify-content: center; margin-top: 40px; }
/* Selector class trên có cùng specificity với style mặc định [hidden] của
   trình duyệt nhưng thắng vì là CSS tác giả — nếu không khai báo lại rule
   này thì loadMoreWrap.hidden = true (js/main.js) không ẩn được nút, lộ ra
   khi #productGrid có 0 sản phẩm (0 kết quả tìm kiếm, danh mục con rỗng...). */
.products__load-more[hidden] { display: none; }

/* "Xem Thêm" của MỖI section danh mục cấp 1 trên trang chủ — link thật trỏ
   sang trang danh mục tương ứng (không xổ thêm tại chỗ), xem
   scripts/generate-home-sections.js / admin/lib/generate-site.php. */
.products__view-more { display: flex; justify-content: center; margin-top: 32px; }
.products__load-more-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none !important;
  background: none;
  color: var(--color-gray);
  border-color: var(--color-cream-dark);
}
.products__load-more-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.products__load-more-error { text-align: center; }
.products__load-more-error p { color: var(--color-gray); font-size: 14px; margin-bottom: 12px; }
.products__load-more-retry:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.product-card__media {
  order: 0;
  position: relative;
  aspect-ratio: 1/1;
  /* Không bo góc riêng nữa — .product-card (cha) đã overflow:hidden + bo
     góc, tự cắt ảnh full-bleed đúng theo góc thẻ. Margin âm 2 bên bù trừ
     padding ngang của .product-card để ảnh chạm sát 2 cạnh + mép trên. */
  margin: 0 -8px 8px;
  width: calc(100% + 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
/* Nguồn duy nhất định vị + phủ kín ảnh trong khung — trước đây rải làm 2
   rule cách nhau (1 rule set position:absolute/inset, 1 rule set
   width/height/object-fit riêng ở chỗ khác), dễ lệch khi 1 trong 2 bị
   cache cũ trên hosting. Gộp về đây, luôn đi cùng nhau. */
.product-card__media > .product-card__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.product-card:hover .product-card__media > .product-card__photo { transform: scale(1.06); }
.product-card__media--1 { background: linear-gradient(160deg, #DCEEDF, #A9D2B3); }
.product-card__media--2 { background: linear-gradient(160deg, #FBEFC6, #EBCF6B); }
.product-card__media--3 { background: linear-gradient(160deg, #E1EEDA, #AECF9C); }
.product-card__media--4 { background: linear-gradient(160deg, #FBDDE0, #EE93A0); }
.product-card__media--5 { background: linear-gradient(160deg, #FBE3D4, #EFAD79); }
.product-card__media--6 { background: linear-gradient(160deg, #F6E6F2, #DDA0CB); }
.product-card__media--7 { background: linear-gradient(160deg, #F8D9DA, #E58088); }
.product-card__media--8 { background: linear-gradient(160deg, #DCEAF5, #93BEE0); }

.product-card__emoji { font-size: 80px; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18)); transition: transform var(--transition); }
.product-card:hover .product-card__emoji { transform: scale(1.08) rotate(-4deg); }

.product-card__media--real { background: var(--color-cream-dark); }

.badge {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  color: var(--color-white);
  z-index: 2;
}
.badge--sale { background: var(--color-primary); }
.badge--new { background: var(--color-secondary); }
.badge--best { background: var(--color-gold); color: var(--color-dark); }

/* Thiết kế lại kiểu Shopee gọn hơn: ẩn badge "-X%" trên ảnh — trùng lặp
   thông tin với giá gạch ngang đã hiện ở .product-card__price bên dưới, bớt
   rối mắt trên ảnh. Badge--new/--best (Mới/Bán Chạy) VẪN giữ — đó là phân
   loại thật của sản phẩm (trường badge trong dữ liệu), không phải nhãn
   khuyến mãi trang trí như trong ảnh tham chiếu. Chỉ ẩn trong .product-card
   (lưới sản phẩm), không ảnh hưởng chỗ khác lỡ dùng chung class .badge. */
.product-card .badge--sale { display: none; }

/* Trước đây là nút tim độc lập, tuyệt đối ở góc ảnh — đã bỏ theo yêu cầu.
   Giờ nút yêu thích nằm trong .product-card__actions (hàng nút cạnh "Mua
   Ngay", thay chỗ icon "thêm vào giỏ" cũ) nên dùng đúng box style mà
   .product-card__add từng dùng, chỉ đổi icon + thêm state active màu đỏ. */
.product-card__wish {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  color: var(--color-secondary-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition);
}
.product-card__wish:hover { background: var(--color-secondary-dark); color: var(--color-white); }
.product-card__wish.active { color: var(--color-primary); }

.product-card__actions {
  position: absolute;
  left: 12px; right: 12px; bottom: -50px;
  display: flex;
  gap: 8px;
  transition: bottom var(--transition);
  z-index: 2;
}
.product-card:hover .product-card__actions { bottom: 12px; }

.product-card__add {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-secondary-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), color var(--transition);
}
.product-card__add:hover { background: var(--color-secondary-dark); color: var(--color-white); }

.product-card__buy {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: background var(--transition);
}
.product-card__buy:hover { background: var(--color-primary-dark); }

@media (hover: none), (max-width: 900px) {
  .product-card__actions { bottom: 12px; }
}

/* Class cũ — main.js không còn tạo hàng nút mobile riêng nữa (đã đổi sang
   chỉ nhân bản nút tim vào .product-card__rating, xem js/main.js). Giữ rule
   ẩn ở đây (không xoá hẳn) để phòng trường hợp trình duyệt còn cache bản
   main.js cũ trong lúc deploy — tránh hiện hàng nút thừa nếu JS/CSS lệch
   phiên bản tạm thời. */
.product-card__actions--mobile-row { display: none; }

/* Thứ tự hiển thị phần thông tin (ảnh đã order:0 ở trên): tên → giá →
   đánh giá — dùng "order" vì DOM thật (bộ sinh trang) đặt "rating" trước
   price; xem ghi chú ở .product-card. */
.product-card h3 {
  order: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__price { order: 2; }
.product-card__price .price { color: var(--color-primary); font-weight: 700; font-size: 16px; }
.product-card__price .price-old { color: var(--color-gray); text-decoration: line-through; font-size: 12px; margin-left: 6px; }

/* ★★★★★ (0) · Đã bán 50+ — nội dung gốc từ bộ sinh trang, giữ nguyên. Dùng
   flex + justify-content:space-between (bật ở @media max-width:640px) để
   chừa chỗ nút tim mobile (.product-card__wish--mobile, xem js/main.js)
   nằm gọn cùng hàng, đẩy sang phải. */
.product-card__rating {
  order: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-gold);
  margin-top: 4px;
}
.product-card__rating span { color: var(--color-gray); }
.product-card__sold { color: var(--color-gray); }

/* Nút tim nhân bản cho mobile (js/main.js) — mặc định ẩn, chỉ hiện ở
   @media max-width:640px (xem bên dưới). Trên desktop/tablet nút tim vẫn ở
   vị trí cũ (overlay đè ảnh khi hover), không đổi. */
.product-card__wish--mobile { display: none; }

/* ===================================================================
   FEATURES
   =================================================================== */
.features { padding: 70px 0; }
.features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature { text-align: center; color: var(--color-secondary-dark); }
.feature .icon--lg { color: var(--color-primary); margin-bottom: 16px; }
.feature h3 { font-size: 17px; margin-bottom: 6px; }
.feature p { font-size: 13px; color: var(--color-gray); }

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.testimonials { padding: 70px 0 90px; }
/* Tiêu đề "Khách Hàng Nói Gì Về Chúng Tôi" dài, hay bị rớt xuống dòng 2 vì
   .section-head (dùng chung nhiều section) giới hạn max-width:600px — nới
   riêng cho section này (không đổi rule chung, tránh ảnh hưởng tiêu đề khác
   ngắn hơn đang wrap có chủ đích) + ép 1 dòng. Chỉ áp dụng từ 641px lên —
   dưới mức đó để wrap bình thường, ép nowrap trên màn hình hẹp sẽ tràn ngang. */
@media (min-width: 641px) {
  .testimonials .section-head { max-width: none; }
  .testimonials .section-head h2 { white-space: nowrap; }
}
.testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.testimonial__stars { color: var(--color-gold); margin-bottom: 14px; font-size: 16px; }
.testimonial p { font-size: 14px; color: var(--color-gray); margin-bottom: 18px; font-style: italic; }
.testimonial strong { display: block; font-size: 15px; color: var(--color-secondary-dark); }
.testimonial span { font-size: 12px; color: var(--color-gray); }

/* ===================================================================
   NEWSLETTER
   =================================================================== */
.newsletter { background: var(--color-secondary-dark); padding: 60px 0; }
.newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.newsletter h2 { font-family: var(--font-display); color: var(--color-white); font-size: 28px; margin-bottom: 8px; }
.newsletter p { color: rgba(255,255,255,0.75); font-size: 14px; }
.newsletter__form { display: flex; gap: 12px; flex: 1; max-width: 440px; min-width: 280px; }
.newsletter__form input {
  flex: 1;
  border: none;
  border-radius: var(--radius-full);
  padding: 0 22px;
  font-size: 14px;
  min-width: 0;
}
.newsletter__form input:focus { outline: 2px solid var(--color-gold); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: #160F0B; color: rgba(255,255,255,0.7); padding: 70px 0 0; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 50px; }
.logo--footer .logo__text { color: var(--color-gold-light); }
.logo--footer .logo__text strong { color: var(--color-white); }
.footer__col p { font-size: 14px; margin: 16px 0 20px; line-height: 1.7; }
.footer__col h4 { color: var(--color-white); font-size: 16px; margin-bottom: 20px; }
.footer__col ul li { margin-bottom: 12px; font-size: 14px; }
.footer__col ul a { transition: color var(--transition); }
.footer__col ul a:hover, .footer__col ul a.active { color: var(--color-gold-light); font-weight: 600; }
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer__contact .icon { flex-shrink: 0; margin-top: 3px; color: var(--color-gold-light); }
.footer__contact a { transition: color var(--transition); }
.footer__contact a:hover { color: var(--color-gold-light); }

.social { display: flex; gap: 10px; }
.social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.social a svg { width: 20px; height: 20px; }
/* Logo thật upload qua admin (Trang chủ → Icon mạng xã hội) thay cho SVG vẽ
   tay — object-fit:cover + overflow:hidden ở trên tự cắt tròn dù ảnh vuông
   hay chữ nhật, không cần khách chuẩn bị ảnh tròn sẵn. */
.social a img { width: 100%; height: 100%; object-fit: cover; }
.social a:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
/* Icon mạng xã hội: mỗi nền tảng giữ đúng màu thương hiệu thật (giống ảnh
   mẫu người dùng gửi — icon trắng trên nền tròn màu riêng), không dùng
   chung 1 nền tối trung tính như trước nữa. */
.social a.social__fb { background: #1877F2; }
.social a.social__ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.social a.social__zalo { background: #0068FF; }
.social a.social__yt { background: #FF0000; }

/* Icon Shopee (2 gian hàng) + TikTok — khối riêng, không gộp vào .social
   (đã dùng cho FB/IG/Zalo/Youtube) vì 2 khối này cần đặt ở 2 vị trí khác
   nhau tùy viewport (xem JS reparent trong main.js): desktop nằm dưới
   "Liên Hệ" (đúng vị trí markup gốc dưới đây), mobile chuyển dưới "Liên Kết
   Nhanh". Text "S1"/"S2"/"TT" là placeholder tạm — thay bằng ảnh logo thật
   khi có, giữ nguyên cấu trúc thẻ <a> + class .social a để không phải sửa
   CSS lại. */
.social-shop { display: flex; gap: 10px; margin-top: 16px; }
.social-shop a {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: all var(--transition);
}
.social-shop a img { width: 100%; height: 100%; object-fit: cover; }
.social-shop a:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-3px); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer__bottom p { font-size: 13px; }
.payments { display: flex; gap: 10px; flex-wrap: wrap; }
.payments span {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

/* ---------- Bản đồ địa chỉ (cuối footer, chèn bằng JS — xem js/main.js) ----------
   Chèn ở cuối .site-footer trên mọi trang, phần cuối cùng của toàn bộ
   trang. iframe dùng loading="lazy" để trình duyệt tự trì hoãn tải cho
   tới khi gần vào viewport, tránh nặng trang (khối này luôn nằm cuối
   trang nên gần như không bao giờ tải ngay khi mở trang). */
.footer-map { border-top: 1px solid rgba(255,255,255,0.1); padding: 32px 0 0; }
.footer-map__head { text-align: center; margin-bottom: 20px; }
.footer-map__head h3 { color: var(--color-white); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.footer-map__head p { font-size: 13.5px; }
.footer-map__frame-wrap { width: 100%; height: 320px; }
.footer-map__frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.05); }

@media (max-width: 900px) {
  .footer-map__frame-wrap { height: 240px; }
}

/* ===================================================================
   BACK TO TOP / TOAST
   =================================================================== */
.back-to-top {
  position: fixed;
  bottom: 100px;
  right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 200;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-dark); }
/* Chú thích mờ "Về đầu trang" cạnh nút — dựng bằng ::before (không sửa markup
   .back-to-top, đang lặp lại y hệt trên hàng trăm file HTML) nên chỉ cần sửa
   1 chỗ duy nhất ở đây là áp dụng toàn site. Mờ = opacity thấp, không phải
   tooltip chỉ hiện khi hover (di động không có hover) — luôn hiện cùng lúc
   với nút nhờ ăn theo cùng transition/opacity của .show. */
.back-to-top::before {
  content: "Về đầu trang";
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(36, 26, 20, 0.75);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.back-to-top.show::before { opacity: 0.65; }

@media (max-width: 900px) {
  /* bottom:100px (giá trị desktop) đè lên .mobile-contact-bar dính đáy —
     nâng lên trên thanh đó. Trang sản phẩm còn có thêm .pdp__sticky-bar
     chồng lên nữa nên cần nâng cao hơn, xử lý riêng ở css/product.css. */
  .back-to-top { bottom: calc(var(--mobile-contact-bar-h) + 16px); right: 16px; }
}

/* ---------- Live contact widget (Zalo / Messenger / Hotline) ---------- */
.contact-widget { position: fixed; right: 24px; bottom: 24px; z-index: 210; }

.contact-widget__ping {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-primary);
  animation: contact-widget-ping 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes contact-widget-ping {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.7); opacity: 0; }
}
.contact-widget.open .contact-widget__ping { animation-play-state: paused; opacity: 0; }

.contact-widget__toggle {
  position: relative;
  z-index: 2;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: background var(--transition), transform var(--transition);
}
.contact-widget__toggle:hover { background: var(--color-primary-dark); transform: translateY(-3px); }
.contact-widget__toggle svg { width: 26px; height: 26px; }
.contact-widget__toggle .contact-widget__close-icon { display: none; }
.contact-widget.open .contact-widget__toggle .contact-widget__chat-icon { display: none; }
.contact-widget.open .contact-widget__toggle .contact-widget__close-icon { display: block; }

.contact-widget__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  pointer-events: none;
}
.contact-widget:not(.open):hover .contact-widget__label { opacity: 1; visibility: visible; }

.contact-widget__panel {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 48px);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.9) translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.contact-widget.open .contact-widget__panel { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }

.contact-widget__header {
  background: var(--color-secondary);
  color: var(--color-white);
  padding: 16px 20px;
}
.contact-widget__header h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.contact-widget__header p { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 3px; }

.contact-widget__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}

.contact-widget__zalo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.contact-widget__zalo:hover { background: var(--color-cream-dark); border-color: #0068FF; }
.contact-widget__qr {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-white);
}
.contact-widget__zalo-badge {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: #0068FF;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.contact-widget__zalo-text strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.contact-widget__zalo-text span { font-size: 12px; color: var(--color-gray); }

.contact-widget__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-cream-dark);
  transition: background var(--transition), border-color var(--transition);
}
.contact-widget__item:hover { background: var(--color-cream); border-color: var(--color-primary); }
.contact-widget__item-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
}
.contact-widget__item-icon svg { width: 19px; height: 19px; }
.contact-widget__item--messenger .contact-widget__item-icon { background: #0084FF; }
.contact-widget__item--hotline .contact-widget__item-icon { background: var(--color-primary); }
.contact-widget__item-text { display: flex; flex-direction: column; }
.contact-widget__item-text strong { font-size: 13.5px; font-weight: 600; color: var(--color-dark); }
.contact-widget__item-text small { font-size: 11.5px; color: var(--color-gray); }

/* ---------- Mobile bottom sticky contact bar ----------
   Trên mobile (<=900px), nút chat nổi .contact-widget bị ẩn hoàn toàn và
   thay bằng thanh điều hướng dính đáy này (tạo bởi js/main.js), gồm 5 mục
   từ trái sang phải: Liên hệ / Danh Mục / CTA Gọi Ngay (nổi bật, có hoạt
   ảnh) / Messenger / Zalo. Trên desktop thanh này luôn ẩn — .contact-widget
   mới là kênh liên hệ chính ở đó. */
.mobile-contact-bar { display: none; }

/* Khi drawer hamburger hoặc bảng danh mục toàn màn hình đang mở (xem
   js/main.js#lockBodyScroll), ẩn 2 thanh dính này — vừa tránh chúng đè lên
   menu (mobile-mini-header có z-index cao hơn .site-header) vừa đúng yêu
   cầu "có thể ẩn bottom navigation khi bảng danh mục đang mở". */
body.dkv-menu-open .mobile-contact-bar,
body.dkv-menu-open .mobile-mini-header { display: none; }

@media (max-width: 900px) {
  .contact-widget { display: none; }

  /* Thanh dính đáy full-width -> chừa chỗ cho footer/nội dung cuối trang
     khỏi bị che, trừ trang chi tiết sản phẩm (đã có padding riêng lớn hơn
     cho thanh "Mua Ngay", xem css/product.css). */
  body { padding-bottom: var(--mobile-contact-bar-h); }

  .mobile-contact-bar {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--mobile-contact-bar-h);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--color-white);
    box-shadow: 0 -4px 16px rgba(36,26,20,0.12);
    z-index: 300;
  }
  .mobile-contact-bar__item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    color: var(--color-dark);
    text-align: center;
  }
  .mobile-contact-bar__icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
  .mobile-contact-bar__icon svg { width: 21px; height: 21px; }
  .mobile-contact-bar__label {
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-contact-bar__item--zalo .mobile-contact-bar__icon { color: #0068FF; }
  .mobile-contact-bar__item--messenger .mobile-contact-bar__icon { color: #0084FF; }

  /* Nút CTA "Gọi Ngay" nổi bật hơn hẳn 4 mục còn lại: đẩy lên cao hơn mép
     thanh, nền đỏ thương hiệu + vòng ping lặp lại để thu hút ánh nhìn. */
  .mobile-contact-bar__item--cta { position: relative; margin-top: -20px; }
  .mobile-contact-bar__item--cta .mobile-contact-bar__icon {
    position: relative;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition);
  }
  .mobile-contact-bar__item--cta:active .mobile-contact-bar__icon { transform: scale(0.94); }
  .mobile-contact-bar__item--cta .mobile-contact-bar__icon svg { width: 22px; height: 22px; }
  .mobile-contact-bar__item--cta .mobile-contact-bar__label { color: var(--color-primary); font-weight: 700; }
  /* inset:0 (không phải left:50%+transform:translateX) để định vị —
     animation contact-widget-ping cũng animate transform (scale), nếu
     dùng transform để canh giữa thì animation sẽ ghi đè mất phần
     translateX tĩnh đó, làm vòng ping lệch hẳn sang phải so với icon. */
  .mobile-contact-bar__cta-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.55;
    animation: contact-widget-ping 2.6s ease-out infinite;
    pointer-events: none;
  }

  /* Popover 2 số hotline khi bấm "Gọi ngay" — nổi phía trên thanh dính đáy.
     Tái dùng .contact-widget__item* (khối Live Chat Widget desktop) cho
     đồng bộ giao diện, chỉ thêm khung định vị + hiệu ứng mở/đóng ở đây. */
  .mobile-call-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-contact-bar-h) + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 310;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .mobile-call-popover.show { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-call-popover .contact-widget__item { border: none; }
}

@media (max-width: 480px) {
  .contact-widget { right: 16px; bottom: 16px; }
  .contact-widget__toggle { width: 54px; height: 54px; }
  .contact-widget__panel { width: calc(100vw - 32px); right: -8px; }
  .contact-widget__label { display: none; }
}

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--color-secondary-dark);
  color: var(--color-white);
  padding: 14px 26px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
  z-index: 300;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================================================================
   SCROLL-REVEAL ANIMATION
   =================================================================== */
[data-animate] { opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; }
[data-animate="fade-up"] { transform: translateY(40px); }
[data-animate="fade"] { transform: translateY(0); }
[data-animate].in-view { opacity: 1; transform: translateY(0); }

.cat-card, .product-card, .feature, .testimonial {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cat-card.in-view, .product-card.in-view, .feature.in-view, .testimonial.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], .cat-card, .product-card, .feature, .testimonial, .category-hub-pill {
    opacity: 1;
    transform: none;
  }

  /* Mega menu: bỏ toàn bộ delay xuất hiện lần lượt + animation liên tục
     (nhấp nháy đèn, đung đưa quả châu) — hiện nội dung/ảnh ngay lập tức. */
  .mega-menu__item,
  .mega-menu__decor-lights,
  .mega-menu__decor-ornaments,
  .mega-menu__decor-pine-gifts,
  .mega-menu__decor-snowflakes {
    animation-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mega-menu__decor-lights img,
  .mega-menu__decor-ornaments img {
    animation: none !important;
  }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1100px) {
  .categories__grid { grid-template-columns: repeat(4, 1fr); }
  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Header co lại còn 2 hàng vừa khít nội dung (hàng 1: burger/logo/action,
     hàng 2: ô tìm kiếm) thay vì 1 hàng cố định height:100px như desktop —
     đó là nguồn khoảng trắng dư quanh logo trước đây (logo mobile chỉ cao
     64px nhưng hàng vẫn giữ nguyên 100px). */
  .header__inner {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px 16px;
  }
  .header__burger { display: flex; align-items: center; justify-content: center; }
  .header__actions { gap: 14px; }
  /* Nút kính lúp bật/tắt tìm kiếm không cần nữa vì ô tìm kiếm giờ hiện sẵn
     luôn (xem .header__search-wrap/.header__search bên dưới) — giữ
     display:none mặc định (khai báo gốc), không bật lại ở đây. */

  /* Ô tìm kiếm hiện sẵn luôn trên điện thoại (không ẩn sau nút bấm nữa) —
     wrap xuống thành hàng riêng full-width nhờ .header__inner flex-wrap +
     flex-basis 100% ở đây. js/main.js có thể bọc .header__search trong 1
     .header__search-wrap tạo động lúc runtime (nếu search index tải
     được) nên cả 2 lớp đều cần layout giống nhau. */
  .header__search-wrap,
  .header__search {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .header__search-wrap > .header__search { flex-basis: auto; }
  .header__search button { flex: 0 0 48px; }
  /* font-size >=16px để Safari iOS không tự động zoom khi chạm vào ô tìm kiếm. */
  .header__search input { font-size: 16px; }

  /* ---------- Drawer hamburger (trượt từ trái) ----------
     translateX (không phải "left") để dùng easing/duration đúng yêu cầu
     thiết kế (280ms, cubic-bezier mềm) và tận dụng GPU compositing. */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--mobile-drawer-width);
    height: 100vh;
    height: 100dvh;
    z-index: var(--mobile-menu-z-index);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    border-bottom: none;
    border-radius: 0 16px 16px 0;
    display: flex;
    flex-direction: column;
  }
  .site-nav.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  @media (prefers-reduced-motion: reduce) {
    .site-nav { transition-duration: 0.01ms; }
  }

  /* Header drawer: logo trái + nút đóng phải (chèn bằng js/main.js, xem
     ghi chú ở .site-nav__logo cũ — vẫn tái dùng đúng phần tử đó). */
  .site-nav__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    flex: none;
    padding: 14px 12px 14px 20px;
    border-bottom: 1px solid var(--color-cream-dark);
  }
  .site-nav__logo img { height: 36px; width: auto; }
  .site-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: none;
    background: none;
    color: var(--color-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition);
  }
  .site-nav__close:hover, .site-nav__close:active { background: var(--color-cream); }
  .site-nav__close svg { width: 22px; height: 22px; }

  .site-nav__list { flex: 1; flex-direction: column; padding: 4px 0 24px; }
  .site-nav__list > li { border-bottom: 1px solid var(--color-cream-dark); }
  .site-nav__list > li:last-child { border-bottom: none; }
  /* Desktop chỉ có mega menu hover riêng (.site-nav__megamenu-trigger-wrap)
     — trong drawer mobile thay bằng mục "Danh Mục" phẳng (site-nav__mobile-only
     bên dưới) mở thẳng bảng danh mục toàn màn hình, không dùng accordion nữa. */
  .site-nav__list > li.site-nav__megamenu-trigger-wrap { display: none; }
  .site-nav__mobile-only { display: block; }

  .site-nav__list > li > a,
  .site-nav__cat-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    color: var(--color-dark);
    cursor: pointer;
  }
  .site-nav__list > li > a:hover, .site-nav__list > li > a.active,
  .site-nav__cat-trigger:hover { border-left-color: var(--color-primary); background: var(--color-cream); }
  .site-nav__list > li > a:active,
  .site-nav__cat-trigger:active { background: var(--color-cream-dark); }

  .site-nav__item-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--color-gray); flex-shrink: 0; }
  .site-nav__item-icon svg { width: 100%; height: 100%; }
  .site-nav__item-text { flex: 1; }

  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--color-cream); display: none; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { color: var(--color-dark); padding-left: 40px; }

  /* ===================================================================
     BẢNG DANH MỤC TOÀN MÀN HÌNH — #mobileCategorySheet (.cat-sheet)
     js/main.js reparent khối này ra document.body lúc tải trang nên
     position:fixed luôn tính theo viewport thật, không kẹt trong stacking
     context z-index:1000 của <header> (xem categories.js#buildMobileCategorySheet).
     Vì đã reparent, các rule dưới đây áp dụng bất kể breakpoint tại thời
     điểm khai báo — khối "chặn desktop" cuối file mới là nơi ẩn hẳn >900px.
     =================================================================== */
  .cat-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--mobile-menu-z-index);
    background: var(--color-white);
    display: none;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 260ms ease, transform 260ms ease, visibility 260ms;
  }
  .cat-sheet.cat-sheet--open { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .cat-sheet { transition-duration: 0.01ms; }
  }

  .cat-sheet__header {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mobile-menu-header-height);
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-cream-dark);
  }
  .cat-sheet__title { font-size: 14px; font-weight: 700; color: var(--color-dark); }
  .cat-sheet__close {
    position: absolute;
    right: 6px;
    top: calc(env(safe-area-inset-top, 0px) + 2px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-gray);
    cursor: pointer;
  }
  .cat-sheet__close svg { width: 18px; height: 18px; }

  .cat-sheet__body { flex: 1; min-height: 0; display: flex; }

  .cat-sheet__left {
    flex: 0 0 var(--mobile-category-sidebar-width);
    width: var(--mobile-category-sidebar-width);
    background: rgba(166, 19, 28, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cat-sheet__parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 64px;
    padding: 10px 4px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    font-family: inherit;
    cursor: pointer;
  }
  .cat-sheet__parent-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border-radius: 50%;
    background: rgba(166, 19, 28, 0.1);
    overflow: hidden;
  }
  .cat-sheet__parent-icon img { width: 100%; height: 100%; object-fit: cover; }
  .cat-sheet__parent-name {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-dark);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-sheet__parent.is-active { background: var(--color-white); border-left-color: var(--color-primary); }
  .cat-sheet__parent.is-active .cat-sheet__parent-icon { background: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
  .cat-sheet__parent.is-active .cat-sheet__parent-name { color: var(--color-primary); font-weight: 700; }

  .cat-sheet__right {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--color-white);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cat-sheet__panel { display: none; }
  .cat-sheet__panel.is-active { display: block; animation: catSheetFade 180ms ease; }
  @keyframes catSheetFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cat-sheet__panel.is-active { animation: none; }
  }

  .cat-sheet__panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-cream-dark);
    color: var(--color-dark);
    text-decoration: none;
  }
  .cat-sheet__panel-head-name { font-size: 15px; font-weight: 700; }
  .cat-sheet__panel-head .icon--sm { width: 16px; height: 16px; color: var(--color-gray); flex-shrink: 0; }

  .cat-sheet__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 10px; padding: 16px; }
  .cat-sheet__child { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; text-align: center; }
  .cat-sheet__child-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--color-cream); }
  .cat-sheet__child-img--emoji { display: flex; align-items: center; justify-content: center; font-size: 30px; }
  .cat-sheet__child-name {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cat-sheet__empty { padding: 40px 24px; text-align: center; color: var(--color-gray); }
  .cat-sheet__empty p { margin-bottom: 16px; }

  @media (min-width: 400px) {
    .cat-sheet__grid { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
    .cat-sheet__child-img { width: 64px; height: 64px; }
  }

  .hero__inner { flex-direction: column; text-align: center; }
  .hero__content { max-width: 100%; }
  .hero__actions, .hero__stats { justify-content: center; }
  .hero__art { height: 280px; margin-top: 20px; }
  /* Tiêu đề canh giữa trên mobile nên vị trí ước lượng "chữ cái đầu" của mũ
     Noel (::before/::after ở desktop, xem .hero__title) không còn đúng nữa
     — ẩn đi thay vì để trôi giữa dòng chữ. */
  .hero__title::before, .hero__title::after { display: none; }
  /* Mobile xếp chữ lên trên ảnh trang trí (flex-direction: column) nên
     overlay phải đậm ở TRÊN (nơi có chữ) rồi mờ dần xuống dưới — gradient
     ngang trái→phải của desktop không hợp bố cục xếp cột. Cùng nguyên tắc
     "mảng đặc + chuyển nhanh" như desktop (xem .hero) thay vì mờ dần lem
     nhem: đặc qua hết khối chữ rồi nhường chỗ rõ cho ảnh phía dưới. */
  .hero {
    --hero-overlay: linear-gradient(180deg,
      rgba(20,6,5,.94) 0%,
      rgba(26,8,7,.9) 34%,
      rgba(32,10,8,.65) 48%,
      rgba(38,11,9,.25) 60%,
      rgba(38,11,9,.06) 72%,
      transparent 82%);
  }

  /* 1 cột trên mobile — ảnh giờ tự lấp đầy hết bề rộng cột (width:100% +
     aspect-ratio kế thừa từ base rule), không còn kích cỡ cố định 260px. */
  .spotlight__inner { grid-template-columns: 1fr; text-align: center; padding: 36px 24px; gap: 32px; }
  .spotlight__emoji { font-size: 140px; }
  .spotlight__actions { justify-content: center; }

  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .newsletter__inner { flex-direction: column; text-align: center; }
  .newsletter__form { width: 100%; }
}

@media (max-width: 640px) {
  .topbar__links a:nth-child(1) { display: none; }
  .categories__grid { grid-template-columns: repeat(3, 1fr); }
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .products__grid > .product-card { min-width: 0; }
  .product-card__emoji { font-size: 56px; }

  /* Thẻ sản phẩm kiểu Shopee trên điện thoại: ảnh chiếm phần lớn thẻ, bớt
     khung viền trắng, tên sản phẩm/giá thu nhỏ và cắt còn 2 dòng. Chỉ áp
     dụng trong media query này — giao diện máy tính không đổi. Giữ đúng
     kiểu "padding-top:0 + margin âm bù trừ" như base để ảnh vẫn tràn sát
     mép trên/2 cạnh (không chỉ đổi mỗi padding-bottom). */
  .product-card { padding: 0 6px 6px; border-radius: var(--radius-sm); }
  /* KHÔNG đổi display của .product-card__media ở đây (giữ flex như base)
     — ảnh dùng position:absolute/inset:0 nên tự phủ kín khung bất kể
     display của cha là gì; đổi sang block từng làm card fallback-emoji
     (sản phẩm chưa có ảnh) mất canh giữa vì mất context flex. */
  .product-card__media { margin: 0 -6px 6px; width: calc(100% + 12px); }

  /* Mobile: bỏ hẳn nút "Xem Ngay" (ẩn luôn hàng overlay gốc trên ảnh, kể cả
     nút tim gốc trong đó) — nút tim RIÊNG cho mobile
     (.product-card__wish--mobile, nhân bản qua js/main.js) nằm cùng hàng
     với phần đánh giá ★★★★★ ảo (.product-card__rating), đẩy sang phải bằng
     justify-content:space-between. */
  .product-card__media > .product-card__actions { display: none; }
  .product-card__rating { justify-content: space-between; }
  .product-card__wish--mobile {
    display: flex;
    position: static;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
  .product-card__wish--mobile .icon { width: 15px; height: 15px; }

  /* line-clamp 2 dòng đã là mặc định từ base (xem .product-card h3 ở trên,
     ngoài @media) — mobile chỉ cần thu nhỏ chữ, không cần lặp lại thuộc
     tính line-clamp. */
  .product-card h3 { font-size: 12px; font-weight: 500; margin: 2px 0 4px; }
  .product-card__rating { font-size: 10px; }
  .product-card__price .price { font-size: 14px; }
  .product-card__price .price-old { font-size: 10px; margin-left: 4px; }
  /* Footer gọn cho mobile: khối thương hiệu (logo/mô tả/social) và khối Liên
     Hệ full-width, căn giữa; riêng "Liên Kết Nhanh" + "Hỗ Trợ Khách Hàng" —
     2 khối dài nhất (5 + 7 mục) — xếp CÙNG 1 HÀNG (2 cột) thay vì chồng dọc
     như trước, giúp giảm hẳn chiều cao footer. Đồng thời thu nhỏ font/
     khoảng cách toàn footer để tổng thể gọn nhất có thể. */
  .site-footer { padding-top: 40px; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    padding-bottom: 28px;
    text-align: left;
  }
  .footer__col:nth-child(1) { grid-column: 1 / -1; text-align: center; margin-bottom: 4px; }
  /* .logo là flex box block-level (display:flex trong rule gốc) nên rộng
     full-width theo mặc định — text-align:center ở trên không có tác dụng,
     margin:auto cũng vô nghĩa vì không còn khoảng trống nào để dồn margin.
     Phải canh giữa NỘI DUNG bên trong chính flex container này. */
  .footer__col:nth-child(1) .logo--footer { justify-content: center; }
  /* Đoạn mô tả thương hiệu: ẩn trên mobile theo yêu cầu, chỉ còn logo +
     social (social được main.js chuyển xuống dưới khối Liên Hệ, xem
     "Footer mobile: chuyển social xuống dưới Liên Hệ" trong main.js). */
  .footer__col:nth-child(1) p { display: none; }
  .footer__col:nth-child(4) { grid-column: 1 / -1; text-align: left; margin-top: 8px; }
  .footer__col:nth-child(4) .social { margin-top: 16px; }
  .footer__col p { font-size: 12.5px; margin: 10px 0 12px; line-height: 1.55; }
  .footer__col h4 { font-size: 13.5px; margin-bottom: 10px; }
  .footer__col ul li { margin-bottom: 7px; font-size: 12.5px; }
  /* Liên Hệ: căn trái, mỗi dòng (địa chỉ/SĐT/email/giờ mở cửa) chỉ nằm gọn
     trên 1 dòng — thu nhỏ font + không cho wrap, thay vì canh giữa/2 dòng
     như phần còn lại của footer. */
  .footer__contact { max-width: none; margin: 0; }
  .footer__contact li { justify-content: flex-start; align-items: center; font-size: 10.5px; }
  /* text-overflow không hoạt động trên chính .footer__contact li (flex
     container nhiều item: icon + text) — phải áp lên đúng span bọc phần chữ
     địa chỉ (dòng duy nhất đủ dài để tràn ở màn hình hẹp) thì "..." mới hiện
     ra thay vì chữ bị cắt cụt không dấu hiệu. overflow:hidden trên 1 flex
     item tự đưa min-width về 0 theo spec nên không cần khai thêm. */
  .footer__contact-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .social { justify-content: center; gap: 8px; }
  .social a { width: 36px; height: 36px; }
  .social a svg { width: 17px; height: 17px; }
  /* Shopee x2 + TikTok: main.js chuyển khối này sang dưới "Liên Kết Nhanh"
     trên mobile (xem "Footer mobile: chuyển social-shop..." trong main.js). */
  .social-shop { justify-content: center; gap: 8px; margin-top: 20px; }
  .social-shop a { width: 36px; height: 36px; }
  .footer__bottom { padding: 14px 0; }
  .footer__bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
  .footer__bottom p { font-size: 11.5px; }
  .section-head h2 { font-size: 26px; }
  .hero { padding: 70px 0 40px; }
  .spotlight { padding: 60px 0; }
}

@media (max-width: 420px) {
  .categories__grid { grid-template-columns: repeat(2, 1fr); }
  /* Giữ 2 sản phẩm mỗi hàng cả trên Android viewport 360–412px. */
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features__grid { grid-template-columns: 1fr; }
}