/* ============ LAPTOP STORE — modern VN tech-retail ============ */

/* color-scheme bám theo toggle site (data-theme), KHÔNG theo OS —
   tránh input/checkbox không-style bị OS dark mode làm tối khi site đang light (vd filter). */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

:root {
  --red: #d42626;
  --red-600: #c42828;
  --red-50: #fff0f0;
  --red-ink: #d42626;      /* đỏ CHỮ trên nền trang (contrast) */
  --red-10: rgba(212,38,38,.08); /* nền tint đỏ nhạt */
  --ink: #0f1419;
  --ink-2: #2b3139;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: #e5e7eb;
  --line-2: #f1f3f5;
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --bg-3: #eef0f3;
  --surface: #ffffff;   /* Card/panel background — LUÔN dùng var(--surface) thay cho #fff hardcode */
  --ok: #12a150;
  --warn: #f5a524;
  --yellow: #ffd60a;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, .05);
  --shadow: 0 2px 8px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 20, 25, .16);
  --container: 1320px;
  --header-h: 128px;
}

[data-theme="dark"] {
  --ink: #f5f7fa;
  --ink-2: #d1d5db;
  --muted: #9ca3af;
  --muted-2: #6b7280;
  --line: #2a2f36;
  --line-2: #1c2025;
  --bg: #0d1117;
  --bg-2: #151a21;
  --bg-3: #1c222b;
  --surface: #0d1117; /* = var(--bg) — cards tối hơn body (#151a21) để tạo depth */
  --red-50: #2a0f0f;
  --red-ink: #ff5050;      /* đỏ chữ SÁNG cho nền tối (contrast AA) */
  --red-10: rgba(255,80,80,.14);
  /* Remap WP preset vars → dark-mode aware, fix heading color trên policy/block pages */
  --wp--preset--color--ink: var(--ink);
  --wp--preset--color--ink-soft: var(--ink-2);
  --wp--preset--color--bg: var(--bg);
  --wp--preset--color--bg-soft: var(--bg-2);
  --wp--preset--color--muted: var(--muted);
  --wp--preset--color--line: var(--line);
}

/* Chuyển trang mượt (View Transitions API) — Chromium; trình khác bỏ qua an toàn */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  background: var(--bg-2);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0; }

/* ============ TOP UTILITY BAR ============ */
.topbar {
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
}
.topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 36px;
}
.topbar-inner a { opacity: .85; }
.topbar-inner a:hover { opacity: 1; color: #fff; }
.topbar-left, .topbar-right { display: flex; gap: 20px; align-items: center; }
.topbar .sep { opacity: .3; }
.topbar .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ============ HEADER ============ */
.header {
  background: #fff;
  color: var(--ink);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* Header dùng container 1320px (giống meganav) để search align với menu nav.
   Dark-mode toggle floating absolute ra ngoài, sát mép phải viewport.
   Sticky đã tạo containing block cho .hp-theme-toggle absolute child — không cần relative. */
.header > .container { max-width: 1280px; }
.header-inner {
  display: grid;
  /* Col 1 = 234px (logo, căn trái với "Trang chủ" trong nav),
     Col 2 = 1fr (search co dãn, kết thúc tại "Bảo hành"),
     Col 3 = 284px (header-actions justify-self:end, align phải container). */
  grid-template-columns: 234px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}
.header-inner > .header-actions { justify-self: end; min-width: max-content; }
/* Theme toggle giờ nằm trong .header-actions — không còn absolute floating
   sát mép viewport. Hiển thị ở mọi breakpoint. */
.header-actions > .hp-theme-toggle,
.header-actions > .hp-lang-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.logo {
  display: flex; align-items: baseline; gap: 2px;
  cursor: pointer;
}
.logo .l-img { height: 44px; width: auto; }
/* Logo light/dark — hiện theo [data-theme] (set trước paint), không JS swap → không flash */
.hp-logo--dark { display: none; }
[data-theme="dark"] .hp-logo--light { display: none; }
[data-theme="dark"] .hp-logo--dark { display: block; }
/* Card clickable → con trỏ bàn tay (news-card có onclick toàn card; product .card có link ảnh+tên) */
 .card.card { cursor: pointer; }

form.search {
  position: relative;
  background: #fff;
  border-radius: 10px;
  height: 48px;
  display: flex; align-items: center;
  padding: 0 8px 0 18px;
  border: 1.5px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
form.search:hover { border-color: var(--muted-2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
form.search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(221, 51, 51, .12), 0 2px 8px rgba(0,0,0,.06);
}
[data-theme="dark"] .search { background: var(--bg-2); border-color: var(--line); }
form.search input {
  flex: 1; border: 0; outline: 0; font: inherit; font-size: 14.5px;
  color: var(--ink); background: transparent; padding: 0 10px;
  box-shadow: none !important;
}
/* Override plugin instant-search-v2-r3.css force border-color #446084 + box-shadow khi focus */
form.search input,
form.searchform input,
form.search input[type="search"],
form.searchform input[type="search"],
form.search input[name="s"],
form.searchform input[name="s"],
form.search input[type="search"]:focus,
form.searchform input[type="search"]:focus,
form.search input[name="s"]:focus,
form.searchform input[name="s"]:focus,
form.search input:focus,
form.searchform input:focus,
form.search input:focus-visible,
form.searchform input:focus-visible {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
form.search input::placeholder { color: var(--muted); }

/* Khi plugin instant-search active → ẩn fallback hints của theme */
body.hungphat-instant-search-active .search-hints { display: none !important; }

/* Position dropdown td-search-results của plugin theo form */
form.search .td-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
/* Plugin tự control display via JS — chỉ chắc chắn ẩn khi chưa khởi tạo */
form.search .td-search-results:empty { display: none !important; }
form.search .s-btn {
  background: var(--red); color: #fff; border: 0;
  height: 32px; padding: 0 16px; border-radius: 7px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
form.search .s-btn:hover { background: var(--red-600); }
form.search .s-icon { color: var(--muted); }
.search-hints {
  position: absolute; top: 46px; left: 0; right: 0;
  background: var(--bg); color: var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px 0;
  display: none;
  border: 1px solid var(--line);
}
[data-theme="dark"] .search-hints { background: var(--bg-2); border-color: var(--line-2); }
form.search:focus-within .search-hints { display: block; }
.search-hints .ttl { padding: 8px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.search-hints a { display: flex; justify-content: space-between; padding: 8px 16px; font-size: 13.5px; color: var(--ink); }
.search-hints a:hover { background: var(--bg-2); }
[data-theme="dark"] .search-hints a:hover { background: var(--bg); }
.search-hints a .tag { background: var(--red-50); color: var(--red-ink); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.hp-search-toggle { display: none; }
.ha {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: background .15s;
  font-size: 13px;
  position: relative;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}
.ha > svg, .ha .s-icon { color: var(--red-ink); width: 20px; height: 20px; flex-shrink: 0; }
.ha:hover { background: var(--bg-2); }
.ha .ha-label { display: flex; flex-direction: column; line-height: 1.15; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ha .ha-label strong { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ha .badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--yellow); color: var(--ink);
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
@media (max-width: 1080px) {
  .header-actions .ha.ha-hide-md { display: none; }
  /* Ham-btn là child đầu tiên → cần 4 cột */
  .header-inner { grid-template-columns: 40px 128px minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; }
  .header-inner > .logo { margin-left: 2px; min-width: 128px; }
  .meganav { display: none !important; }
  /* Tablet: thêm padding 2 bên để nội dung không bị ép sát màn hình */
  .container,
  .hp-container,
  .topbar > .container,
  .header > .container { padding-left: 16px; padding-right: 16px; }
  /* Logo nhỏ lại ở tablet */
  .logo .l-img { height: 36px; }
  .header-actions { gap: 6px; }
  .header-actions .ha-label { display: none; }
  /* Search giới hạn chiều cao + padding compact */
  .header-inner > form.search { max-width: none; width: 100%; min-width: 0; height: 40px; margin-left: 4px; }
  .header-inner > form.search input { font-size: 13px; }
}
@media (max-width: 860px) {
  .ha .ha-label { display: none; }
}

/* ============ MEGA NAV ============ */
.meganav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 76px; z-index: 40;
}
[data-theme="dark"] .meganav { background: var(--bg); }
.meganav-inner {
  display: flex; align-items: stretch;
  height: 52px;
  gap: 4px;
  padding: 0 15px;
}
.meganav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; font-size: 13.5px;
  white-space: nowrap;
  color: var(--ink-2); position: relative; font-weight: 500;
}
.meganav a:hover { color: var(--red-ink); }
.meganav a.active { color: var(--red-ink); font-weight: 600; }
.meganav a.active::after {
  content: ""; position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 2px; background: var(--red);
}
.meganav .cat-btn {
  background: linear-gradient(135deg, var(--red), #b82525); color: #fff;
  padding: 0 22px; font-weight: 700; margin: 6px 12px 6px 0;
  display: inline-flex; align-items: center; gap: 12px;
  border: 0; cursor: pointer; font: inherit;
  height: 40px; border-radius: 10px;
  white-space: nowrap;
  transition: all .18s;
  box-shadow: 0 6px 16px -4px rgba(221,51,51,.45), inset 0 1px 0 rgba(255,255,255,.18);
  letter-spacing: .01em;
}
.meganav .cat-btn:hover { color: #fff; background: linear-gradient(135deg, #c42828, #8e1a1a); transform: translateY(-1px); box-shadow: 0 10px 22px -4px rgba(221,51,51,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.meganav .cat-btn .cat-btn__menu { font-size: 13px; }
.meganav .cat-btn .cat-btn__chev { font-size: 11px; transition: transform .2s; }
.meganav .cat-btn svg { width: 14px; height: 14px; }
.meganav .cat-btn.is-open { background: linear-gradient(135deg, #c42828, #8e1a1a); transform: translateY(-1px); box-shadow: 0 10px 22px -4px rgba(221,51,51,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.meganav .cat-btn.is-open .cat-btn__chev { transform: rotate(180deg); }
.meganav .hot { color: var(--red-ink); }

/* ============ MEGA MENU PANEL ============ */
/* Backdrop ẩn — panel đứng độc lập, không overlay tối toàn trang */
.hp-megamenu__backdrop { display: none !important; }

.hp-megamenu {
  position: absolute;
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(1280px, calc(100vw - 40px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  z-index: 41;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  overflow: hidden;
  border: 1px solid var(--line);
}
.hp-megamenu.is-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
[data-theme="dark"] .hp-megamenu { background: var(--bg); border-color: var(--line); }

.hp-megamenu__inner {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 480px;
}

/* Filter "Danh mục" (shop) — list cao hơn, override plugin (mặc định max-height:150px ~5 mục) */

/* Sidebar (cột trái) */
.hp-megamenu__sidebar {
  background: #f2f7fc;
  padding: 20px 20px;
  border-right: 1px solid var(--line);
}
[data-theme="dark"] .hp-megamenu__sidebar { background: var(--bg-2); }
.mm-side-group + .mm-side-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); }
.mm-side-group__heading {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: .02em;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(221,51,51,.18);
}
.mm-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.hp-megamenu__sidebar .mm-side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  color: var(--ink); font-size: 13px; font-weight: 500;
  transition: all .12s;
  line-height: 1.5;
}
.hp-megamenu__sidebar .mm-side-link:hover { background: var(--red); color: #fff !important; padding-left: 14px; }
.hp-megamenu__sidebar .mm-side-link:hover .mm-icon { color: #fff !important; }
.hp-megamenu__sidebar .mm-side-link .mm-icon {
  width: 16px; text-align: center; color: var(--red-ink) !important; flex-shrink: 0; font-size: 15px;
}

/* Cột content */
.hp-megamenu__cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 22px 24px;
}
.mm-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mm-block__heading {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 700; color: var(--red-ink);
  letter-spacing: .02em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
}
.mm-block__heading a { color: inherit; }
.mm-block__heading a:hover { color: var(--red-600); }
.mm-block__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-block__link {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 13.5px; color: var(--ink-2);
  transition: color .12s, transform .12s;
}
.mm-block__link:hover { color: var(--red-ink); transform: translateX(2px); }
.mm-block__link .mm-chev { font-size: 9px; color: var(--muted); width: 10px; text-align: center; flex-shrink: 0; }
.mm-block__link:hover .mm-chev { color: var(--red-ink); }

/* Promo box — đặt ở ĐẦU cột cuối (in-flow, không absolute) */
.mm-promo {
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  margin-bottom: 4px;
}
.mm-promo__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: var(--yellow); text-transform: uppercase; }
.mm-promo__title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.mm-promo__sub { font-size: 12px; color: rgba(255,255,255,.7); }
a.mm-promo:hover { box-shadow: 0 8px 22px rgba(0,0,0,.25); transform: translateY(-1px); transition: transform .15s, box-shadow .15s; }

/* KHÔNG khoá scroll bằng overflow:hidden khi mở mega — nó phá position:sticky
   của .header/.meganav (header biến mất khi rê vào danh mục). Mega là dropdown
   absolute dưới nav, không có backdrop → không cần khoá scroll. */

/* Responsive: tablet trở xuống → ẩn (mobile sẽ làm drawer riêng sau) */
@media (max-width: 1080px) {
  .hp-megamenu { display: none !important; }
  .hp-megamenu__backdrop { display: none !important; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--red); color: #fff;
  font-size: 13.5px; font-weight: 600;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--red-600); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--red-ink); border: 1px solid var(--red); }
.btn.ghost:hover { background: var(--red-50); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #000; }
.btn.white { background: #fff; color: var(--red-ink); }
.btn.white:hover { background: var(--bg-2); }
.btn.large { padding: 14px 28px; font-size: 15px; }

/* ============ HERO ============ */
.hero { padding: 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 16px;
  min-height: 380px; /* khớp critical.css (min-height, không phải height cố định) → tránh CLS khi main async load */
}
.hero-sidebar {
  background: #fff; border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
[data-theme="dark"] .hero-sidebar { background: var(--bg); }

.hero-main {
  background: linear-gradient(135deg, #dd3333 0%, #a01c1c 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-main::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
}
.hero-main::after {
  content: ""; position: absolute; right: 40px; bottom: 30px;
  width: 360px; height: 240px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 16px, transparent 16px 32px);
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 8px;
}
.hero-main .hm-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  padding: 6px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  align-self: flex-start;
  position: relative; z-index: 2;
}
.hero-main h1 {
  font-size: 54px; line-height: 1.02; font-weight: 700;
  letter-spacing: -0.025em; margin: 18px 0 8px;
  max-width: 9ch;
  position: relative; z-index: 2;
}
.hero-main .hm-sub { font-size: 15px; opacity: .9; max-width: 32ch; position: relative; z-index: 2; }
.hero-main .hm-cta { display: flex; gap: 10px; position: relative; z-index: 2; }
.hero-main .hm-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 16px;
  position: relative; z-index: 2;
}
.hero-main .hm-price .now { font-size: 28px; font-weight: 700; color: var(--yellow); }

/* ===== Hero SLIDER (banner lớn) — PSI: aspect-ratio cố định chống CLS ===== */
.hero-main--slider {
  padding: 0;
  background: var(--bg-2);
  display: block;
}
/* Bỏ vòng tròn + sọc placeholder của .hero-main text banner khi là slider */
.hero-main--slider::before, .hero-main--slider::after { content: none; display: none; }
/* viewport giữ tỷ lệ 728:380 → có chiều cao ngay cả khi slide absolute → KHÔNG CLS */
.hero-slider__viewport {
  position: relative; width: 100%; border-radius: inherit; overflow: hidden;
  aspect-ratio: 1400 / 800;
  min-height: 380px;
}
/* no-JS: slide 1 luôn hiện (PSI/no-JS an toàn). */
/* Khi JS chạy → thêm .hero-slider--js: chỉ slide .is-active hiện. */
.hero-slider__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nút = vùng chạm 24×24 (a11y touch target), chấm nhỏ vẽ bằng ::before */

.hero-side {
  display: grid; grid-template-rows: 1fr 1fr; gap: 16px;
}
/* Banner nhỏ = ảnh 19:10 (ảnh gốc 760×400) → khung khớp tỷ lệ, object-fit contain
   để hiện TRỌN ảnh không cắt, không dư khoảng trắng (khung = tỷ lệ ảnh). */
.hero-banner--img { padding: 0; }
.hero-banner {
  border-radius: var(--radius);
  overflow: hidden; position: relative;
  padding: 18px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; font-weight: 600;
}
.hero-banner.b1 { background: linear-gradient(135deg, #0f1419, #2b3139); }
.hero-banner.b2 { background: linear-gradient(135deg, #1e40af, #0ea5e9); }

/* ============ BENEFIT BAR ============ */
.benefits {
  margin-top: 18px;
  background: #fff; border-radius: var(--radius);
  padding: 16px 10px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
}
[data-theme="dark"] .benefits { background: var(--bg); }
.benefits .b {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  border-right: 1px solid var(--line);
}
.benefits .b:last-child { border-right: 0; }
.benefits .b-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--red-50); color: var(--red-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.benefits .b-t { font-weight: 700; font-size: 13px; }
.benefits .b-s { font-size: 12px; color: var(--muted); }

/* ============ SECTION SHELL ============ */
.sect {
  background: #fff; border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .sect { background: var(--bg); }

/* ============ CATEGORY BANNERS ============ */
.cat-banner-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 24px 0;
  padding: 0;
}
.cat-bn {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* Ảnh banner danh mục dạng <img> thật (LCP) — phủ kín, dưới overlay + text */
/* Overlay tối CHỈ khi có ảnh (banner gradient-only không cần, tránh bị tối thêm) */
.cat-bn:has(> .cat-bn__bg)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.2));
}
.cat-bn > span { position: relative; z-index: 2; }
.cat-bn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,.25), transparent 60%);
  pointer-events: none;
}
.cat-bn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.cat-bn .cb-k { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.cat-bn .cb-s { font-size: 13px; opacity: .88; margin-top: 4px; }
.cat-bn .cb-go {
  margin-top: 14px;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.2);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  align-self: flex-start;
  transition: background .2s;
}
.cat-bn:hover .cb-go { background: rgba(255,255,255,.3); }
/* iPad Air landscape (1180px): 3 cột (8 items → 3+3+2) */
@media (max-width: 1180px) {
  .cat-banner-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cat-banner-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============ FLASH SALE ============ */

/* Countdown--full: số + label compact 2 dòng TRONG box (giữ .flash padding
   cân đối top/bottom, không cần padding-bottom extra). */

/* ============ PRODUCT CARD ============ */
/* minmax(0,1fr) CHỐNG grid blowout: track 1fr mặc định = minmax(auto,1fr) không co
   dưới min-content; card có .sp-v white-space:nowrap → min-content = cả chuỗi spec dài
   → cột đó phình rộng ("sản phẩm giữa to hơn"). minmax(0,...) + .card min-width:0 ép đều. */
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .card { background: var(--bg); }
[data-theme="dark"] .card .media { background: var(--bg-2) !important; }
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--red);
}
.card .media {
  position: relative;
  background: #fff; border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* khung vuông đồng đều — tránh card cao thấp khác nhau do ảnh khác tỉ lệ */
}
.card .card-img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .3s; }

/* --- Card hết hàng / ngừng kinh doanh: mờ ảnh (grayscale) + nhãn GIỮA ảnh ------
 * Anh Phát: nhãn to, nằm giữa hình. Slate=hết hàng, cam=ngừng KD (đều đạt AA với chữ trắng). */
.card--oos .card-img { filter: grayscale(1); opacity: .62; }
.card--oos:hover .card-img { transform: none; }        /* không phóng ảnh SP không mua được */
.card-oos-flag {
  position: absolute; z-index: 3;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;                 /* luôn 1 hàng — không vỡ "HẾT / HÀNG" */
  padding: 7px 16px; border-radius: 8px;
  background: #475569; color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32); pointer-events: none;
}
@media (max-width: 560px) {                                /* card 2 cột mobile hẹp → thu nhỏ cho vừa 1 hàng */
  .card-oos-flag { font-size: 10.5px; padding: 6px 11px; letter-spacing: .02em; }
}
.card:hover .card-img { transform: scale(1.06); }
.card .badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.card .badge-t {
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.card .badge-t.sale {
  background: linear-gradient(135deg, #dd3333, #ff6b00);
  color: #fff;
  display: inline-flex; align-items: center; gap: 3px;
  text-transform: none;
}
.card .badge-t.new { background: var(--ok); }
.card .badge-t.hot {
  background: linear-gradient(135deg, #ff6b00, #dd3333);
  display: inline-flex; align-items: center; gap: 3px;
}
.card .badge-t.bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none;
}
.card .badge-t.bubble i { font-size: 9px; }
/* .discount-pill (bottom-left) đã bỏ — badge sale gộp vào .badge-t.sale ở top-left.
   Giữ rule rỗng để legacy markup không break layout. */
.card .brand-line { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 4px; }
.card .name {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  margin-bottom: 6px;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px;
  text-align: center;
}
.card .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.card .specs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.35;
}
.card .spec { display: flex; gap: 8px; min-width: 0; align-items: baseline; }
.card .spec .sp-k {
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  width: 26px;
}
.card .spec .sp-v {
  color: var(--ink);
  font-weight: 500;
  overflow: visible;
  white-space: normal;      /* cho wrap để KHÔNG cắt spec ở màn hẹp (an toàn nhờ minmax(0,1fr)+card min-width:0) */
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1;
}
.card .chip {
  background: var(--bg-2); font-size: 10.5px; font-weight: 500;
  padding: 2px 7px; border-radius: 4px; color: var(--ink-2);
}
.card .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .price-now { font-size: 17px; font-weight: 700; color: var(--red-ink); letter-spacing: -0.01em; }
.card .price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.card .rating { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.card .rating .stars { color: var(--warn); }
.card .rating.no-rating .stars svg { color: #e5e7eb; }
.card .rating .no-rating-txt { font-size: 11px; color: var(--muted); font-style: italic; }
/* CSS stars — replaces 5 inline SVGs per card (DOM reduction) */
.hp-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1.5px; color: #d1d5db; user-select: none; }
.hp-stars::before { content: '★★★★★'; }
.hp-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; width: var(--pct, 0%); white-space: nowrap; color: #f5a524; }
.hp-stars__fill::before { content: '★★★★★'; letter-spacing: 1.5px; }
.hp-stars--empty::before { content: '★★★★★'; color: #d1d5db; }
.card .configs-pill {
  position: absolute;
  right: 8px; bottom: 8px;
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.2px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 3;
}

/* placeholder */
.ph {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 8%;
  border: 1px dashed var(--muted-2); opacity: .4; border-radius: 4px;
}
.ph span { position: relative; z-index: 1; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 3px; backdrop-filter: blur(2px); }
[data-theme="dark"] .ph span { background: rgba(15,20,25,.8); }

/* ============ BRAND STRIP ============ */
[data-theme="dark"] .brand-pill { background: var(--bg); }

/* ============ PROMO BANNER ROW ============ */

/* ============ BLOG TEASER ============ */
.post {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
[data-theme="dark"] .post { background: var(--bg); }
.post:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ============ LISTING PAGE ============ */
.listing-wrap { display: grid; grid-template-columns: 248px 1fr; gap: 20px; padding: 20px 0 40px; }
.filters-box {
  background: #fff; border-radius: var(--radius);
  padding: 4px 0;
  box-shadow: var(--shadow-sm);
  align-self: start; position: sticky; top: 148px;
}
[data-theme="dark"] .filters-box { background: var(--bg); }
.filter-group { padding: 4px 2px; }
.filter-group:last-child { border-bottom: 0; }
.filter-group h4 { font-size: 13px; margin: 0 0 12px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.filter-group h4 .count { font-size: 11px; color: var(--muted); font-weight: 500; }
.check { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.check:hover { color: var(--red-ink); }
.check .box {
  width: 16px; height: 16px; border: 1.5px solid var(--line);
  border-radius: 4px; margin-right: 10px; display: inline-block; position: relative; flex-shrink: 0;
}
.check.on .box { background: var(--red); border-color: var(--red); }
.check.on .box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.check .left { display: flex; align-items: center; }
.check .count { color: var(--muted); font-size: 11px; }

.listing-top {
  background: #fff; border-radius: var(--radius);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .listing-top { background: var(--bg); }
.listing-top h1 { font-size: 20px; font-weight: 700; margin: 0; }
.listing-top .right { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.sort-chips { display: flex; gap: 6px; align-items: center; }
.sort-chips .c {
  font-size: 12.5px; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line); cursor: pointer; color: var(--ink-2); background: var(--bg-2);
}
.sort-chips .c.active { background: var(--red); color: #fff; border-color: var(--red); }

.crumbs { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); padding: 14px 0; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--red-ink); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--ink); font-weight: 600; }

/* ============ PRODUCT DETAIL ============ */
[data-theme="dark"] .pdp-card { background: var(--bg); }
[data-theme="dark"] .pdp-price-box { background: linear-gradient(135deg, #2a0f0f, #1a0808); border-color: #3a1818; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
[data-theme="dark"] .opt { background: var(--bg); }

.qty { display: inline-flex; border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty button { width: 36px; height: 40px; background: #fff; border: 0; font-size: 16px; color: var(--ink); }
.qty input { width: 48px; border: 0; text-align: center; font: inherit; font-size: 14px; font-weight: 600; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); background: #fff; color: var(--ink); }
[data-theme="dark"] .qty button, [data-theme="dark"] .qty input { background: var(--bg); }
.qty input:focus { outline: 0; }
[data-theme="dark"] .promo-card { background: var(--bg); }

/* ============ CART + CHECKOUT ============ */
[data-theme="dark"] .cart-drawer { background: var(--bg); }
[data-theme="dark"] .mini-qty button { background: var(--bg); }

.checkout { padding: 20px 0 40px; }
[data-theme="dark"] .ck-block { background: var(--bg); }
[data-theme="dark"] .field input, [data-theme="dark"] .field select { background: var(--bg-3); }
[data-theme="dark"] .order-summary { background: var(--bg); }

/* ============ FOOTER ============ */
footer { background: var(--ink); color: #fff; }
footer .top { padding: 40px 0 32px; }
footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
footer ul a { color: rgba(255,255,255,.75); }
footer ul a:hover { color: #fff; }
footer .brand { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
footer .bottom { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.5); display: flex; justify-content: space-between; }

/* ============ TOAST ============ */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(30px);
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 13.5px;
  border-radius: 8px; z-index: 200; opacity: 0; pointer-events: none; transition: all .25s;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ RESPONSIVE ============ */
/* iPad Pro 11"/12.9" landscape (1024-1366px): grid 5 → 4 cols, grid 4 giữ 4 */
@media (max-width: 1366px) {
  .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-banner-row { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet: 768 – 1160px (iPad Air landscape & smaller) */
@media (max-width: 1160px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Hero giữ 3 cột (sidebar nhỏ + main + side banners) thay vì hide hero-side */
  .hero-grid { grid-template-columns: 200px 1fr 220px; gap: 6px; height: auto; }
  .hero-main { padding: 28px 24px; min-height: 320px; }
  .hero-main h1 { font-size: 36px !important; }
  .hero-side { gap: 12px; }
  .hero-banner { padding: 14px 16px; }
  .listing-wrap { grid-template-columns: 220px 1fr; }
  .filters-box { position: relative; top: 0; }
  /* Promo row giữ 3 cards (không hide cái thứ 3) */
  footer .grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
  footer .grid > *:nth-child(5) { display: none; }
  /* Section spacing thoáng hơn tablet */
  .sect { padding: 28px 0; }
}

/* iPad Pro dọc & tablet (≤1080px = lúc hamburger xuất hiện, meganav ẩn): TẮT menu
   dọc desktop ở hero để không trùng với menu mobile + tránh bóp méo banner. */
@media (max-width: 1080px) {
  .hero-sidebar { display: none; }
  /* Giữ cột banner dọc = 300px như desktop để 2 banner nhỏ KHÔNG bị bóp/cắt chữ. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 960px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sidebar { display: none; }
  .hero-main { padding: 28px 24px; min-height: 280px; }
  .hero-main h1 { font-size: 34px !important; }
  /* Mobile: bỏ min-height ép khung slider (380px) → để aspect-ratio 1.9 khớp ảnh
     1520×800, không còn cắt 2 bên. Banner nhỏ theo tỷ lệ ảnh 760×460 (1.65) → fit. */
  .hero-main.hero-main--slider { min-height: 0; }
  .hero-slider__viewport { min-height: 0; }
  .hero-banner { min-height: 0; }
  /* 2 banner nhỏ nằm 1 HÀNG (2 cột) trên mobile; khung 3:2 khớp ảnh 600×400 */
  .hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero-banner--img { aspect-ratio: 600 / 400; }
  .meganav-inner { overflow-x: auto; white-space: nowrap; }
  .meganav-inner::-webkit-scrollbar { display: none; }
  .benefits { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefits .b { border-right: 0; }
  .cat-banner-row { grid-template-columns: repeat(2, 1fr); }
  .listing-wrap { grid-template-columns: 1fr; }
  .filters-box { margin-bottom: 16px; }
  footer .grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (min-width: 768px) and (max-width: 1080px) {
  /* Hero giữ nguyên layout từ breakpoint 960px/1160px — không override ở đây */
  /* Tablet nhỏ (768–899px): 3 cột. iPad Pro (≥900px): 4 cột — xem block dưới. */
  .cat-banner-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .cat-bn {
    /* BỎ ép aspect-ratio: card cao THEO NỘI DUNG → không tràn/đè hàng dưới
       (vd "Dell Pro" series xuống 2 dòng). Grid tự căn đều chiều cao mỗi hàng. */
    min-height: 0;
    aspect-ratio: auto;
    padding: 16px 16px 14px;
  }
  .cat-bn .cb-k { font-size: 16px; }
  .cat-bn .cb-s { font-size: 12px; }
  /* Card 4 cột hẹp (240px): ẩn logo hãng — không đủ chỗ cho tên+series+nút+logo,
     logo sẽ đè tên/nút. Tên hãng đã rõ nên bỏ logo cho gọn. */

  /* DEAL HOT (flash sale): SLIDER ngang thay vì lưới 4+1 lệch. */
}

/* iPad Pro (≥900px, ≤1080px): lưới thương hiệu 4 cột (4+4). Dưới 900px giữ 3 cột
   để card đủ rộng, không chật. */
@media (min-width: 900px) and (max-width: 1080px) {
  .cat-banner-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Tablet/iPad: dropdown kết quả live search KHÔNG bó theo khung search (hẹp → cắt
   giá/badge cấu hình). Bung rộng ~780px (cap theo viewport), canh trái. Prefix `body`
   để thắng specificity CSS plugin (đã !important). */
@media (min-width: 769px) and (max-width: 1199px) {
  body .searchform .td-search-results {
    right: auto !important;
    width: min(780px, calc(100vw - 48px)) !important;
    max-width: none !important;
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  .container, .hp-container { padding: 0; }
  .topbar > .container,
  .header > .container { padding-left: 0; padding-right: 0; }
  .topbar { display: none; }
  /* Mobile header: flex — ham LEFT | logo CENTERED (absolute) | icons RIGHT */
  .header-inner { display: flex; justify-content: space-between; align-items: center; position: relative; gap: 10px; padding: 14px 0; }
  .meganav-inner { padding: 0 15px; }
  .header-inner > .logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; width: 96px; max-width: 96px; min-width: 0; overflow: hidden; }
  .header-inner > form.search { display: none; }
  .hp-search-toggle { display: flex; }
  .logo .l-img,
  .header-inner > .logo .custom-logo {
    height: 34px;
    width: auto;
    max-width: 100%;
  }
  .header-actions { gap: 6px; margin-right: 8px; }
  .header-actions > .hp-theme-toggle {
    position: absolute;
    left: calc(50% - 106px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }
  .header-actions > .hp-lang-toggle {
    position: absolute;
    left: calc(50% - 142px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }
  .header-actions > .hp-theme-toggle:hover,
  .header-actions > .hp-lang-toggle:hover {
    background: rgba(221, 51, 51, .08);
    border-color: var(--red);
    color: var(--red-ink);
  }
  .header-actions > .hp-theme-toggle,
  .header-actions > .hp-lang-toggle,
  .header-actions .ha,
  .hp-ham-btn {
    border-radius: 8px;
  }
  .header-actions > .hp-theme-toggle,
  .header-actions > .hp-lang-toggle,
  .header-actions .ha {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }
  .header-actions .ha {
    border: 1px solid var(--red);
    color: var(--red-ink);
    background: transparent;
  }
  .header-actions .ha:hover {
    background: rgba(221, 51, 51, .08);
  }
  .ha { padding: 6px 7px; }
  form.search { height: 40px; padding: 0 10px; }
  form.search input { font-size: 13px; padding: 0 8px; }
  form.search .s-btn { padding: 0 10px; font-size: 12px; }
  form.search .s-btn span, form.search .s-btn svg + * { display: none; }
  .meganav { top: 60px; }
  .meganav-inner { height: 44px; gap: 2px; }
  .meganav a { padding: 0 10px; font-size: 12.5px; }
  .meganav .cat-btn { padding: 0 12px; }
  .meganav .cat-btn span { display: none; }
  .hero { padding: 12px 0 20px; }
  .hero-main { padding: 22px 18px; min-height: 220px; border-radius: 10px; }
  .hero-main h1 { font-size: 26px !important; line-height: 1.15; }
  .hero-main .hm-sub { font-size: 12.5px; }
  .hero-main .hm-cta { flex-wrap: wrap; gap: 8px; }
  .hero-main .hm-cta .btn { font-size: 12.5px; padding: 10px 14px; }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 8px; }
  .card .name { font-size: 12.5px; }
  .card .price-now { font-size: 15px; }
  .card .specs { padding: 6px 8px; font-size: 10.5px; }
  .card .spec .sp-k { width: 22px; font-size: 9px; }
  .sect { padding: 20px 0; }
  .benefits { grid-template-columns: 1fr 1fr; padding: 12px 8px; gap: 8px; }
  .benefits .b { padding: 6px 8px; gap: 8px; }
  .benefits .b-ico { width: 32px; height: 32px; }
  .benefits .b-ico svg { width: 16px; height: 16px; }
  .benefits .b-t { font-size: 12px; }
  .benefits .b-s { font-size: 10.5px; }
  .cat-banner-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-bn { padding: 16px; min-height: 100px; }
  .cat-bn .cb-k { font-size: 15px; }
  .cat-bn .cb-s { font-size: 11px; }

  footer .top { padding: 24px 0 20px; }
  footer .grid { grid-template-columns: 1fr; gap: 22px; }
  footer .bottom { flex-direction: column; gap: 6px; text-align: center; padding: 14px 0; }
  /* Flash sale section: column layout + reset margin-left:auto on viewall btn */
}

@media (max-width: 420px) {
  .header-inner > .logo {
    min-width: 0;
    width: 84px;
    max-width: 84px;
  }
  .logo .l-img,
  .header-inner > .logo .custom-logo {
    height: 30px;
    width: auto;
    max-width: 100%;
  }
  .header-actions {
    gap: 4px;
    margin-right: 6px;
  }
  .header-actions > .hp-theme-toggle {
    left: calc(50% - 100px);
    width: 34px;
    height: 34px;
  }
  .header-actions > .hp-lang-toggle {
    left: calc(50% - 136px);
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
  }
  .header-actions .hp-search-toggle {
    display: none;
  }
  .ha {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .sect { padding: 16px 5px; }
  .header-actions > .hp-theme-toggle {
    left: calc(50% - 106px);
    width: 34px;
    height: 34px;
  }
  .header-actions > .hp-lang-toggle {
    left: calc(50% - 142px);
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
  }
  .grid-5, .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ha { padding: 6px 8px; }
  .ha > svg { width: 18px; height: 18px; }
  /* Flash sale compact on small phones */
}

/* ============================================================ */
/* ============ HUNG PHAT WP THEME EXTENSIONS ================ */
/* ============================================================ */

/* WP core utility classes */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important; -webkit-clip-path: none; clip-path: none;
  color: #21759b; display: block; font-size: 14px; font-weight: 700;
  height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
  text-decoration: none; top: 5px; width: auto; z-index: 100000;
}
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Skip link */
.hp-skip-link:focus {
  background: var(--red); color: #fff; padding: 12px 16px; border-radius: 6px;
  position: fixed; top: 12px; left: 12px; z-index: 999999;
}

/* Container alias */
.hp-container { max-width: var(--container); margin: 16px auto 0; padding: 0 10px; }
.hp-site { background: var(--bg-2); min-height: 100vh; min-height: 100svh; }
.hp-main { padding: 0 0 32px; }

/* Theme toggle */
.hp-theme-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.hp-theme-toggle:hover { background: var(--bg-2); border-color: var(--muted-2); }
.hp-theme-toggle .hp-theme-toggle__icon { display: none; }
[data-theme-pref="system"] .hp-theme-toggle .hp-theme-toggle__icon--system { display: block; }
[data-theme-pref="light"]  .hp-theme-toggle .hp-theme-toggle__icon--light  { display: block; }
[data-theme-pref="dark"]   .hp-theme-toggle .hp-theme-toggle__icon--dark   { display: block; }

.hp-lang-toggle {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red-ink);
  min-width: 38px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.hp-lang-toggle:hover { background: rgba(221, 51, 51, .08); }
.hp-lang-toggle__label { display: block; }

/* Breadcrumb — bar nhẹ, kích thước lớn hơn, ngăn cách bằng chevron */
.hp-breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #fff, #f8f9fb);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin-bottom: 16px;
}
.hp-breadcrumb .rank-math-breadcrumb p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hp-breadcrumb .rank-math-breadcrumb a {
  color: var(--ink-2); text-decoration: none; font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.hp-breadcrumb .rank-math-breadcrumb a:hover { background: var(--red-50); color: var(--red-ink); text-decoration: none; }
.hp-breadcrumb .rank-math-breadcrumb .separator {
  color: var(--muted-2); margin: 0;
  font-size: 0;
}
.hp-breadcrumb .rank-math-breadcrumb .separator::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  font-size: 14px;
  vertical-align: middle;
}
.hp-breadcrumb .rank-math-breadcrumb .last {
  color: var(--ink); font-weight: 700;
  padding: 4px 10px;
  background: var(--red-50);
  border-radius: 6px;
}
.hp-breadcrumb__list { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hp-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.hp-breadcrumb__link {
  color: var(--ink-2); font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.hp-breadcrumb__link:hover { background: var(--red-50); color: var(--red-ink); }
.hp-breadcrumb__current {
  color: var(--ink); font-weight: 700;
  padding: 4px 10px;
  background: var(--red-50);
  border-radius: 6px;
}
.hp-breadcrumb__sep {
  color: var(--muted-2);
  display: inline-block;
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  font-size: 0;
}

/* Pagination */
[data-theme="dark"] .hp-pagination li a, [data-theme="dark"] .hp-pagination li span { background: var(--bg); }

/* Skeleton loader — PHẢI khớp critical.css: dùng reserve động --lz/--lzd theo
   từng section (tính ở inc/lazy-sections.php), KHÔNG flat 260px. Nếu để 260px,
   main.css (load async) đè critical → section co về 260 rồi content nhảy lại →
   CLS bất ổn (0 ↔ 0.9 tuỳ tốc độ main.css tải). */
.hp-lazy-section { min-height: var(--lz, 400px); }
@media (min-width: 769px) { .hp-lazy-section { min-height: var(--lzd, 400px); } }
.hp-lazy-section.is-loaded { min-height: 0; }
@keyframes hp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast */
.hp-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.hp-toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px;
  box-shadow: var(--shadow-lg); font-size: 13.5px; display: flex; align-items: center; gap: 10px;
  pointer-events: auto; min-width: 220px; max-width: 360px; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s, transform .2s;
}
.hp-toast.is-show { opacity: 1; transform: translateY(0); }

/* Cart drawer — slide-in từ phải, không bị admin bar đè */
.hp-cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: none;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 100000;
}
.hp-cart-drawer-overlay.is-open { display: block; opacity: 1; pointer-events: auto; }
.hp-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100%;
  background: #fff;
  display: none;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 100001;
  flex-direction: column;
  box-shadow: -12px 0 48px rgba(0, 0, 0, .18);
}
/* Đẩy drawer xuống dưới admin bar (32px desktop, 46px ≤782px) */
[data-theme="dark"] .hp-cart-drawer { background: var(--bg); }
.hp-cart-drawer.is-open { display: flex; transform: translateX(0); }

/* Head */
.hp-cart-drawer__head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fafafa);
}
.hp-cart-drawer__head > span:first-child {
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.hp-cart-drawer__head > span:first-child::before {
  content: ""; display: inline-block;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd3333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") no-repeat center/contain;
}
.hp-cart-drawer__close {
  background: var(--bg-2); border: 0;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 22px; cursor: pointer;
  color: var(--ink); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.hp-cart-drawer__close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }

/* Body */
.hp-cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; scrollbar-width: thin; }
.hp-cart-drawer-body::-webkit-scrollbar { width: 6px; }
.hp-cart-drawer-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.hp-cart-drawer__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.hp-cart-drawer__was .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.hp-cart-drawer__qty {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
}
.hp-cart-drawer__qty button {
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  background: #fff; border-radius: 6px;
  cursor: pointer; color: var(--ink);
  font-size: 14px; line-height: 1;
  transition: background .15s, border-color .15s;
}
.hp-cart-drawer__qty button:hover { background: var(--red-50); border-color: var(--red); color: var(--red-ink); }
.hp-cart-drawer__qty > span {
  min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Footer */
.hp-cart-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, #fafafa, #fff);
  display: flex; flex-direction: column; gap: 10px;
}
.hp-cart-drawer__totals .woocommerce-Price-amount,
.hp-cart-drawer__totals .woocommerce-Price-amount bdi,
.hp-cart-drawer__totals .woocommerce-Price-currencySymbol { color: var(--red-ink); font-size: inherit; font-weight: inherit; }

.hp-cart-drawer-footer .hp-btn {
  height: 46px; padding: 0 18px; font-size: 14px; font-weight: 700;
  border-radius: 10px; letter-spacing: 0.02em;
}
.hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary) {
  background: transparent; color: var(--ink) !important;
  border: 1.5px solid var(--line);
}
.hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary):hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }

/* Empty state */
.hp-cart-drawer-body .hp-empty-note {
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hp-cart-drawer-body .hp-empty-note::before {
  content: "";
  display: block; width: 64px; height: 64px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") no-repeat center/contain;
  opacity: .5;
}

/* Generic empty/note */
.hp-empty-note { color: var(--muted); font-size: 13px; padding: 12px 0; }

/* Section title (theme version) */

/* Filter (sidebar wrapper khi không có widget plugin) */
.hp-filter { background: #fff; border-radius: var(--radius); padding: 12px; border: 1px solid var(--line); }
[data-theme="dark"] .hp-filter { background: var(--bg); }

/* Widget area generic */
[data-theme="dark"] .hp-widget { background: var(--bg); }

/* Buttons (.hp-btn fallback alias) */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm); border: 0;
  background: var(--red); color: #fff; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.hp-btn:hover { background: var(--red-600); color: #fff; }
.hp-btn--ghost { background: transparent; color: var(--red-ink); border: 1px solid var(--red); }
.hp-btn--dark  { background: var(--ink); color: #fff; }

/* Product card extra slots */

/* Cart count badge */
.hp-cart-count { display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.hp-cart-count[data-cart-count="0"] { display: none; }

/* Sticky mobile footer */
@media (max-width: 767px) {
  [data-theme="dark"] .hp-sticky-mobile { background: var(--bg); }
  body.hp-body { padding-bottom: 60px; }
}

/* Print stylesheet partial — fallback */
@media print {
  .hp-cart-drawer, .hp-toast-wrap, .topbar, .meganav, footer { display: none !important; }
  .header { position: static !important; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============ POST CARD (blog) ============ */
[data-theme="dark"] .hp-post-card { background: var(--bg); }
/* padding + margin bù để vùng chạm ≥24px cao (target-size WCAG) mà layout không đổi. */

/* ============ PROMO ROW ============ */
[data-theme="dark"] .promo { background: var(--bg); }

/* ============ HTML block + spacer ============ */

/* ============ Layout helper grids cho ACF ============ */

/* ============ Post detail (single.php) ============ */
[data-theme="dark"] .hp-post { background: var(--bg); }

/* Bảng nội dung — TRANG (.hp-post-content) + BÀI VIẾT (.article-content) + MÔ TẢ SP
   (.desc-main__inner). Bo góc: dùng border-collapse:separate + overflow:hidden
   (collapse KHÔNG cho border-radius). Viền trong = bottom/right từng ô. */

.article-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	margin: 16px 0;
	font-size: 14px;
}

.article-content th, .article-content td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
}
/* Bỏ viền phải cột cuối + viền dưới hàng cuối (đã có viền ngoài của table). */

.article-content tr th:last-child, .article-content tr td:last-child { border-right: 0; }

.article-content tr:last-child td { border-bottom: 0; }
/* Header row */
 .article-content tr:first-child th { background: var(--bg-2); font-weight: 700; color: var(--ink); }
/* Zebra */

.article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-2) 45%, transparent); }

/* Dark mode overrides for table inline-styles from WordPress editor */
[data-theme="dark"] .hp-post-content table,
[data-theme="dark"] .desc-main__inner table,
[data-theme="dark"] .article-content table {
  background: transparent !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .hp-post-content table tr,
[data-theme="dark"] .desc-main__inner table tr,
[data-theme="dark"] .article-content table tr {
  background: transparent !important;
}
[data-theme="dark"] .hp-post-content table th,
[data-theme="dark"] .desc-main__inner table th,
[data-theme="dark"] .article-content table th {
  background-color: var(--bg-3) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .hp-post-content table td,
[data-theme="dark"] .desc-main__inner table td,
[data-theme="dark"] .article-content table td {
  background-color: transparent !important;
  color: var(--ink-2) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .hp-post-content tbody tr:nth-child(even) td,
[data-theme="dark"] .desc-main__inner tbody tr:nth-child(even) td,
[data-theme="dark"] .article-content tbody tr:nth-child(even) td {
  background-color: var(--bg-2) !important;
}
/* Mobile: scroll ngang (mất bo góc khi scroll — chấp nhận). */
@media (max-width: 768px) {
	
	.article-content table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Code & pre trong bài viết (.article-content) + mô tả SP (.desc-main__inner). */
.article-content :not(pre) > code {
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: 2px 7px;
	border-radius: 6px;
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: .9em;
	color: var(--red, #dc2626);
	word-break: break-word;
}
/* Dải màu nhẹ trên đầu pre (kiểu code editor). */
[data-theme="dark"] .article-content :not(pre) > code,
[data-theme="dark"] .desc-main__inner :not(pre) > code { background: var(--bg-3); color: #fca5a5; }

/* Mục lục (ToC) — box collapse (mặc định ĐÓNG, click header để mở). */
.hp-toc__head i.fa-list-ul { color: var(--ink); }
/* offset khi cuộn tới heading (tránh bị sticky header che) */

/* FAB ToC nổi — hiện khi cuộn qua box; click mở panel mục lục (desktop + mobile). */ /* tránh đè dock liên hệ mobile */
/* FAB mục lục PDP hiện CẢ desktop (2026-08-13): phần mô tả cuộn mất, không có sidebar sticky
   → observer (content-enhance.php) tự hiện/ẩn theo vị trí mục lục + ẩn khi ở tab khác. */
.hp-code-block__copy {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.08); color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.18);
  padding: 5px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .15s, color .15s, border-color .15s;
}
.hp-code-block__copy::before { content: "\f0c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; }
.hp-code-block__copy:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.hp-code-block__copy.is-copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.hp-code-block__copy.is-copied::before { content: "\f00c"; }

/* ============ Policy / static pages decoration ============ */
[data-theme="dark"] .pg-sh-ic { background: var(--bg-3); }
[data-theme="dark"] .pg-table thead tr { background: var(--bg-3); }
[data-theme="dark"] .pg-contact-item .pg-ci-ic { background: var(--bg-3); }

/* ============ Author + 404 ============ */
[data-theme="dark"] .hp-author { background: var(--bg); }

/* ============ Search + Empty ============ */

/* ============ Footer styles ============ */
/* ============ FOOTER (theo design Lumen Laptop Store) ============ */
.footer { background: var(--ink); color: #fff; }
.footer, .footer * { color: #fff; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none !important; }
.footer a:hover { color: #fff; }
.footer-top { padding: 44px 0 36px; }

/* Desktop: cột co theo nội dung, space-between phân phối gap đều giữa các cột */
.footer-grid--4 { display: flex; justify-content: space-between; align-items: start; }
.footer-grid--4 > .footer-col { flex: 0 0 auto; padding: 0 28px; }
.footer-grid--4 > .footer-col:first-child { padding-left: 0; }
.footer-grid--4 > .footer-col:last-child { padding-right: 0; }
.footer-grid--4 > .footer-col:not(:first-child) { border-left: 1px solid rgba(255,255,255,.08); }

.footer-col__title { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; padding-bottom: 9px; border-bottom: 2px solid var(--red); display: inline-block; }
.footer-col__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col__menu li { margin: 0; }
.footer-col__menu a { color: rgba(255,255,255,.7); font-size: 13.5px; display: inline-block; transition: color .15s ease, padding-left .15s ease; }
.footer-col__menu a:hover { color: #fff; transform: translateX(4px); }

/* Liên hệ */
.footer-contact { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.footer-contact li > svg, .footer-contact li > i { flex-shrink: 0; margin-top: 2px; width: 15px; font-size: 14px; color: var(--red-ink); }
.footer-contact strong { color: rgba(255,255,255,.92); font-weight: 600; }
.footer-contact a:hover { color: #fff; }

/* Socials */
.footer-social { display: flex; gap: 8px; }
.footer-social__link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: #fff !important; transition: background .2s ease, transform .2s ease; }
.footer-social__link:hover { background: var(--red); color: #fff !important; transform: translateY(-1px); }
.footer-social__link svg { width: 18px; height: 18px; }

/* Giờ hoạt động */
.footer-hours { display: flex; flex-direction: column; gap: 12px; }
.footer-hours__block { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 10px 13px; }
.footer-hours__h { font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.footer-hours__h i { color: var(--red-ink); }
.footer-hours__h span { font-weight: 400; color: rgba(255,255,255,.5); font-size: 11.5px; }
.footer-hours__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,.62); padding: 1px 0; }
.footer-hours__row b { color: rgba(255,255,255,.9); font-weight: 600; }

/* Dải pháp lý + badge */
.footer-legal { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.footer-legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-legal__info { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.58); }
.footer-legal__info p { margin: 0 0 2px; }
.footer-legal__company { font-weight: 700; color: rgba(255,255,255,.85) !important; font-size: 13px; }
.footer-legal__info strong { color: rgba(255,255,255,.8); font-weight: 600; }
.footer-legal__sep { margin: 0 6px; opacity: .4; }
.footer-legal__badges { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.footer-legal__badges img { display: block; height: auto; border-radius: 4px; }

/* Bottom bar: copyright trái, logo SVG phải */
.footer-bottom { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-copyright { color: rgba(255,255,255,.5); font-size: 12.5px; }

/* Logo SVG trong cột Liên hệ — dưới tiêu đề (block, dùng bản -dark.svg) */
.footer-logo-link { display: block; margin: 4px 0 16px; }
/* width + height ĐỀU tường minh: hộp không phụ thuộc kích thước nội tại của SVG, nên
   ảnh tải xong (lazy) cũng không đổi layout. Trước đây width:auto khiến Lighthouse
   báo "Media element lacking an explicit size" và quy là thủ phạm CLS. */
.footer-logo-svg { display: block; width: 190px; height: 66px; opacity: .95; transition: opacity .15s ease; object-fit: contain; }
.footer-logo-link:hover .footer-logo-svg { opacity: 1; }

/* Chip thanh toán ở footer-bottom (chỗ logo cũ) */
.footer-pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer-pay__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.75); }
.footer-pay__chip i { color: var(--red-ink); font-size: 12px; }

/* Responsive */
@media (max-width: 1080px) {
  /* 2 cột: bỏ kẻ dọc full, dùng gap + kẻ dọc giữa 2 cột mỗi hàng + kẻ ngang hàng 2 */
  .footer-grid--4 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; align-items: start; }
  .footer-grid--4 > .footer-col { padding: 0; border-left: 0 !important; }
}
@media (max-width: 768px) {
  .footer-top { padding: 32px 12px 24px; }
  .footer-legal { padding: 20px 12px; }
  .footer-bottom { padding: 16px 12px; }
  .footer-legal-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-bottom-inner { flex-direction: column-reverse; gap: 12px; text-align: center; }
}
@media (max-width: 480px) {
  /* Liên hệ + Giờ full width; Chính sách + Hỗ trợ 2 cột song song */
  .footer-grid--4 { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-grid--4 > .footer-col:nth-child(1),
  .footer-grid--4 > .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .footer-col__title { font-size: 12.5px; }
}

/* ============ Hero edge cases ============ */
.hero-banner > * { position: relative; z-index: 1; }


/* ============ HERO REFINE (override design max-width 9ch) ============ */
.hero-main h1 {
  max-width: 18ch;
  font-size: 44px;
  line-height: 1.05;
}
@media (max-width: 1200px) {
  .hero-main h1 { font-size: 36px; max-width: 22ch; }
}
@media (max-width: 768px) {
  .hero-main h1 { font-size: 28px; max-width: none; }
}
.hero-main .hm-sub { margin: 0 0 14px; }
.hero-main .hm-cta .btn.large { padding: 12px 22px; font-size: 14px; }
.hero-main .hm-cta .btn.white { background: #fff; color: var(--red-ink); }
.hero-main .hm-cta .btn.white:hover { background: var(--bg-2); }
.hero-main .hm-kicker { margin-bottom: 4px; }

/* Liên hệ price */
.hp-price-contact { color: var(--red-ink); font-weight: 700; }

/* Hero side banner default (khi không có ảnh) — 182px khớp critical.css để
   tránh CLS: critical reserve 182, nếu main async đè 110 → banner co 72px. */
.hero-banner { min-height: 182px; }
.hero-banner > div { position: relative; z-index: 1; }
.hero-banner.b1 { background: linear-gradient(135deg, #0f1419 0%, #2b3139 60%, #dd3333 140%); }
.hero-banner.b2 { background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%); }

/* Card price contact */
.card .price-now .hp-price-contact { font-size: inherit; }


/* ============ CAT BANNERS COMPACT (8 items) ============ */

/* ============ BRAND SLIDE (marquee infinite) ============ */
@keyframes hp-brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Logo brand thiết kế cho nền SÁNG (đen/màu) → giữ chip trắng cả ở dark mode,
   nếu không logo đen/màu sẽ chìm vào nền tối. */
[data-theme="dark"] .hp-brand-slide__item { background: #fff; border-color: rgba(255,255,255,.14); }
/* Logo rất rộng (vd 1130x200) → ép vừa CHIỀU RỘNG để hiện trọn, không bị cắt ngang.
   width/height auto + object-fit contain; max-width < bề rộng content của item. */

/* ============ PRODUCT GRID 5-col override ============ */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ============ FORCE NO UNDERLINE FOR THEME LINKS ============ */
/* Plugin internal-links-premium tự inject underline. Override hard. */
.hero-sidebar a,
.hero-sidebar a:hover,
.hero-sidebar a:visited,
.cat-bn,
.cat-bn:hover,
.cat-bn:visited,
.cat-bn *,
.hero-banner,
.hero-banner:hover,
.hero-banner:visited,
.hero-banner *,
.card a,
.card .name a,
.footer-col__menu a,
.topbar a,
.topbar a:hover,
.meganav a,
.meganav a:hover,
.ha,
.ha *,
.logo,
.logo *,
.cb-k,
.cb-s,
.cb-go {
  text-decoration: none !important;
}

/* border-bottom: 0 chỉ apply cho thẻ <a> bị plugin internal-links-premium inject
 * underline-as-border. KHÔNG bao gồm .brand-tag / .brand-pill / .cat-bn /
 * .hero-banner / .hp-brand-slide__item / .cat-bn vì chúng tự có border 4 cạnh thật.
 * Dùng :not(.brand-tag):not(.brand-pill):not(...) cho .hero-sidebar a. */
.hero-sidebar a:not(.brand-tag):not(.brand-pill),
.card .name a,
.card a:not(.card-img-link),
.footer-col__menu a,
.topbar a,
.meganav a,
.ha a,
.logo a { border-bottom: 0 !important; }

/* Global anchor reset cho theme content */
.hp-site a,
.hp-site a:hover,
.hp-site a:focus,
.hp-site a:visited { text-decoration: none; }

/* Chỉ underline trong content bài viết (hp-post-content) */


/* ============ SECTION HEADER (override design — to + đẹp hơn) ============ */
.sect { padding: 28px 16px 24px; }
[data-theme="dark"] .sect-head { border-bottom-color: var(--line-2); }

@media (max-width: 768px) {
  .sect { padding: 20px 16px 20px 16px; }
  .card .name { -webkit-line-clamp: 3; min-height: 49px; }
}


/* ============ CARD PRICE REFINE ============ */
.card .price-now { font-size: 16px; font-weight: 700; color: var(--red-ink); line-height: 1.2; }
 .card .price-now > span { text-decoration: none; }
 .card .price-now .woocommerce-Price-amount:not(:last-child) {
  font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: line-through; margin-right: 6px;
}
/* Giá từ */
.hp-price-from__label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hp-price-contact { font-size: 16px; font-weight: 700; color: var(--red-ink); }
.card .hp-price-from__label { font-size: 10.5px; }


/* =========================================================== */
/* === BƯỚC 4: TEXT CONTRAST FIX — dark covers force white === */
/* =========================================================== */

/* Mọi element trên background gradient/dark đều phải có text trắng.
 * Plugin internal-links-premium có thể inject inline color, dùng !important đè. */

/* Loại biến thể .cat-bn--paper (nền trắng) — nó tự quản màu chữ mực đen. */
.cat-bn:not(.cat-bn--paper), .cat-bn:not(.cat-bn--paper):hover, .cat-bn:not(.cat-bn--paper):focus, .cat-bn:not(.cat-bn--paper):active, .cat-bn:not(.cat-bn--paper):visited,
.cat-bn:not(.cat-bn--paper) *,
.cat-bn:not(.cat-bn--paper) .cb-k, .cat-bn:not(.cat-bn--paper) .cb-s, .cat-bn:not(.cat-bn--paper) .cb-go,

.hero-banner, .hero-banner:hover, .hero-banner:focus, .hero-banner:active, .hero-banner:visited,
.hero-banner *,

.hero-main, .hero-main *,
.hero-main .hm-kicker, .hero-main .hm-sub, .hero-main p,
.hero-main h1:not(.yellow),

.badge-t, .badge-t.hot, .badge-t.sale, .badge-t.new,
.badge-t *,

.footer, .footer:hover, .footer *, .footer a,
.footer-bottom, .footer-bottom *,
.footer-col__menu a, .footer-col__title,
.footer-social__link,

.topbar, .topbar *, .topbar a, .topbar a:hover,
.topbar .sep, .topbar .live-dot,

.hp-btn--dark,
.btn.dark, .btn:not(.ghost):not(.white),

.cat-btn, .cat-btn:hover,

.hp-cart-drawer-overlay,

.media .badges *,
.media .configs-pill {
  color: #fff !important;
}

/* Discount pill = white bg + RED text — phải khác */

/* Sale stock progress bar text */

/* Restore màu đặc biệt (vàng/yellow trong hero) */

.hero-main .hm-price .now {
  color: var(--yellow) !important;
}

/* Restore old price strikethrough opacity */

/* Brand-tag KHÔNG phải dark cover → giữ màu mặc định + ép border 4 cạnh
 * (plugin internal-links-premium hay reset border-bottom của thẻ <a>) */

/* Tương tự cho brand-pill marquee + hp-brand-slide__item */

/* Hero sidebar cat-item KHÔNG phải dark → giữ ink */

/* Card vẫn light bg → text dark, plugin override không apply */
.card .name, .card .name a,
.card .price-now, .card .price-old,
.card .brand-line, .card .specs, .card .specs *,
.card .rating, .card .rating * {
  color: inherit !important;
}
/* Ngoại lệ (fix 2026-07-02): sao rating giữ màu riêng — rule `.card .rating *` inherit
   ở trên nuốt màu sao → 5 sao xám đậm nhìn như "đầy" bất kể điểm. */
.card .rating .hp-stars { color: #d1d5db !important; }
.card .rating .hp-stars__fill { color: #f5a524 !important; }
.card .name a { color: var(--ink) !important; }
.card .name a:hover { color: var(--red-ink) !important; }
.card .price-now { color: var(--red-ink) !important; }
.card .price-old, .card .brand-line, .card .sp-k { color: var(--muted) !important; }
.card .sp-v { color: var(--ink) !important; }

/* Dark mode: card + base content vẫn theo theme */
[data-theme="dark"] .card .name a { color: var(--ink) !important; }
[data-theme="dark"] .card .sp-v { color: var(--ink) !important; }


/* =========================================================== */
/* === CARD PRICE FIX — del strike + ins no-underline === */
/* =========================================================== */

/* WC `get_price_html()` trả về <del>{old}</del> <ins>{new}</ins> khi sale.
 * Force <del> = strikethrough nhỏ muted, <ins> = red không underline. */

.card .price-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-top: 8px !important;
}

.card .price-now {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
}

/* Giá từ — eyebrow xám nhỏ + price đỏ */
.card .hp-price-from__label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Liên hệ */
.card .hp-price-contact {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
}

/* Bỏ price-old dòng riêng (em render duplicate trong card.php — disable) */
.card .price-old { display: none !important; }

/* Mobile: gọn hơn nữa */
@media (max-width: 768px) {
  .card .price-now { font-size: 14px !important; }
}


/* === FINAL CARD PRICE OVERRIDE — sized smaller === */
.card .price-now,
.card .hp-price-contact { font-size: 14px !important; line-height: 1.25 !important; }

.card .hp-price-from__label { font-size: 9.5px !important; }

@media (max-width: 1200px) {
  .card .price-now,
  .card .hp-price-contact { font-size: 13px !important; }
  .card .hp-price-from__label { font-size: 9px !important; }
}


/* =========================================================== */
/* === CARD PRICE & RATING — PIXEL-PERFECT theo design === */
/* =========================================================== */

/* Override TẤT CẢ rule trước đó — về đúng design styles.css line 583-590 */
.card .price-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}
.card .price-row > * { width: auto !important; }

.card .price-now {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
}
.card .price-now .woocommerce-Price-amount { font-size: inherit !important; }
/* "Giá từ" label inline trước price */
.card .price-now .hp-price-from__label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-right: 2px !important;
}

.card .price-old {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-decoration: line-through !important;
  display: inline !important; /* override display:none cũ */
}
.card .price-old .woocommerce-Price-amount { color: inherit !important; font-size: inherit !important; }

/* "Liên hệ" */
.card .price-now.hp-price-contact {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Mobile: nhỏ hơn chút nữa */
@media (max-width: 768px) {
  .card .price-now,
  .card .price-now.hp-price-contact { font-size: 12.5px !important; }
  .card .price-old { font-size: 10px !important; }
  .card .price-now .hp-price-from__label { font-size: 8.5px !important; }
}

/* Rating — đúng design line 587-590 */
.card .rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}
.card .rating .stars {
  display: inline-flex !important;
  gap: 1px !important;
  color: #f5a524 !important; /* --warn vàng */
}
.card .rating .stars svg { width: 13px !important; height: 13px !important; }
.card .rating.no-rating .stars { color: #e5e7eb !important; } /* outline xám */
.card .rating .rating-value { font-weight: 600 !important; color: var(--ink-2) !important; }
.card .rating .rating-count { color: var(--muted) !important; }
.card .rating .no-rating-txt {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-style: italic !important;
}

/* Bỏ ALL override price-now column trước đó (chính file này có rule "display:flex column !important") */


/* =========================================================== */
/* === FIXES THEO YÊU CẦU anh Phát 2026-05-20 === */
/* =========================================================== */

/* 1. Brand slide — fix border bottom bị cắt do overflow:hidden cha + transform translateY(-1px) */

/* 2. Card price — 16.5px (theo yêu cầu anh Phát) */
.card .price-now,
.card .price-now.hp-price-contact,
.card .price-now .woocommerce-Price-amount { font-size: 16.5px !important; }
.card .price-old,
.card .price-old .woocommerce-Price-amount { font-size: 12.5px !important; }
.card .price-now .hp-price-from__label { font-size: 10.5px !important; }
@media (max-width: 768px) {
  .card .price-now,
  .card .price-now.hp-price-contact { font-size: 15px !important; }
  .card .price-old { font-size: 11.5px !important; }
}

/* 3. Configs-pill — dời sát đáy hình (sát mép trong border-radius) */
.card .configs-pill,
.media .configs-pill { bottom: 2px !important; right: 4px !important; }

/* 4. Rating + Price — căn giữa hàng */
.card .rating,
.card .rating.no-rating,
.card .price-row {
  justify-content: center !important;
  text-align: center !important;
}

/* 5. Card image — fill 1:1 media container */
.card .card-img-link { display: block; }

/* 0. WP admin bar — đẩy sticky header xuống khi user đăng nhập (admin-bar 32px desktop / 46px mobile) */ /* 32 + 76 (header height) */ /* 32 + 148 */

/* 6. Card border — fix border-bottom bị clip bởi overflow:hidden.
 *    Bỏ overflow:hidden trên .card / .hp-post-card / .press-card (giữ trên child media để clip ảnh). */
.card { overflow: visible !important; }
.card .media { overflow: hidden !important; border-radius: 8px !important; }

/* 5. Blog grid 4 cột × 2 hàng (Bản tin công nghệ 8 bài) */


/* =========================================================== */
/* === TRUYỀN THÔNG (Báo chí nói về Hưng Phát) === */
/* =========================================================== */
[data-theme="dark"] .press-headline { background: var(--surface); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .press-sub { color: rgba(255,255,255,.78); }

[data-theme="dark"] .press-card { background: var(--surface); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .press-card__title { color: #fff !important; }
[data-theme="dark"] .press-card__logo { filter: brightness(0.95) invert(0.05); }

/* ============================================================
   DARK MODE: GLOBAL FIXES (var(--ink) flips to white in dark)
   ============================================================ */

/* Flash countdown box — background: var(--ink) thành #f5f7fa trong dark mode */
[data-theme="dark"] .flash .countdown .box { background: #0f1419; }

/* Section title explicit color */
[data-theme="dark"] .sect-title { color: var(--ink); }

/* Footer — background: var(--ink) → #f5f7fa (trắng) trong dark mode */
[data-theme="dark"] footer,
[data-theme="dark"] .footer { background: #0f1419 !important; }

/* Topbar — same issue */
[data-theme="dark"] .topbar { background: #0f1419; }

/* Benefits bar text */
[data-theme="dark"] .benefits .b-t { color: var(--ink); }

/* Breadcrumb */
[data-theme="dark"] .hp-breadcrumb {
  background: var(--bg-2);
  border-color: var(--line);
}

/* Cart drawer header — hardcoded gradient #fff/#fafafa */
[data-theme="dark"] .hp-cart-drawer__head {
  background: var(--bg-2);
}

/* Cart drawer footer — hardcoded #fafafa/#fff */
[data-theme="dark"] .hp-cart-drawer-footer {
  background: var(--bg-2);
}

/* Cart drawer qty buttons — hardcoded #fff */
[data-theme="dark"] .hp-cart-drawer__qty button {
  background: var(--bg-3) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Cart drawer "Xem giỏ hàng" ghost button hover — var(--ink) flips white */
[data-theme="dark"] .hp-cart-drawer-footer .hp-btn:not(.hp-btn--primary):hover {
  background: var(--bg-3);
  color: var(--ink) !important;
  border-color: var(--line);
}

/* Cart drawer giá gạch — dark mode dùng --muted-2 (#6b7280) thay vì --muted (#9ca3af) quá sáng */
[data-theme="dark"] .hp-cart-drawer__was {
  color: var(--muted-2) !important;
}

/* hp-btn--dark — background: var(--ink) flips to #f5f7fa (trắng) trong dark mode */
[data-theme="dark"] .hp-btn--dark {
  background: var(--bg-3);
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
[data-theme="dark"] .hp-btn--dark:hover {
  background: var(--line);
}

/* ================================================================
   DARK MODE — BAREM (quy tắc bắt buộc khi tạo component mới)
   ================================================================

   TOKEN SYSTEM:
   ┌──────────────┬───────────────┬───────────────────────────────────┐
   │ Token        │ Light         │ Dark                              │
   ├──────────────┼───────────────┼───────────────────────────────────┤
   │ --surface    │ #ffffff       │ #0d1117  (card / panel)           │
   │ --bg         │ #ffffff       │ #0d1117  (page background layer 1)│
   │ --bg-2       │ #f7f8fa       │ #151a21  (body / page background) │
   │ --bg-3       │ #eef0f3       │ #1c222b  (inset / input)          │
   │ --ink        │ #0f1419       │ #f5f7fa  (text primary)           │
   │ --ink-2      │ #2b3139       │ #d1d5db  (text secondary)         │
   │ --muted      │ #6b7280       │ #9ca3af  (text muted)             │
   │ --line       │ #e5e7eb       │ #2a2f36  (border)                 │
   │ --red-50     │ #fff0f0       │ #2a0f0f  (red tint background)    │
   └──────────────┴───────────────┴───────────────────────────────────┘

   QUYẾT ĐỊNH NÀO DÙNG GÌ:
   ─ Card / panel / modal đặt trên body  → background: var(--surface)
   ─ Input / textarea / select           → background: var(--bg-3); color: var(--ink)
   ─ Inset / nested card                 → background: var(--bg-2)
   ─ Text chính                          → color: var(--ink)
   ─ Text phụ                            → color: var(--ink-2) hoặc var(--muted)
   ─ Border                              → border-color: var(--line)
   ─ Red-tint background                 → background: var(--red-50)

   TUYỆT ĐỐI KHÔNG LÀM:
   ✗  background: #fff          → Dùng var(--surface) hoặc var(--bg)
   ✗  background: #f7f8fa       → Dùng var(--bg-2)
   ✗  color: #333 / #000        → Dùng var(--ink) hoặc var(--ink-2)
   ✗  border-color: #e5e7eb     → Dùng var(--line)

   ĐƯỢC PHÉP HARDCODE:
   ✓  color: #fff              trên dark cover (gradient đỏ/đen làm nền)
   ✓  background: #ffb800      màu brand cụ thể (sao vàng, badge...)
   ✓  background: #1877f2      màu social brand (Facebook, YouTube...)
   ✓  background: linear-gradient(135deg, var(--red), ...)  — gradient đỏ luôn đúng
   ✓  background: rgba(255,255,255,.08)  — overlay mờ trên dark cover

   PATTERN MẪU KHI VIẾT COMPONENT MỚI:
   ─────────────────────────────────────
   .my-card {
     background: var(--surface);   ← KHÔNG dùng #fff
     border: 1px solid var(--line);
     color: var(--ink);
   }
   .my-input {
     background: var(--bg-3);      ← KHÔNG dùng #fff
     color: var(--ink);
     border: 1px solid var(--line);
   }
   ─────────────────────────────────────
   KHÔNG cần viết [data-theme="dark"] riêng nếu dùng đúng token.
   Chỉ viết [data-theme="dark"] khi cần thay đổi màu KHÁC BIỆT hoàn toàn
   (vd: gradient khác, shadow khác, pseudo-element khác).
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger button — ẩn desktop, hiện trên <= 1080px */
.hp-ham-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--red);
	color: #fff;
	cursor: pointer;
	border-radius: 10px;
	flex-shrink: 0;
	padding: 0;
	transition: background .18s, box-shadow .18s, transform .15s;
	box-shadow: 0 2px 8px rgba(220,38,38,.35);
	position: relative;
}
.hp-ham-btn:hover {
	background: #b91c1c;
	box-shadow: 0 4px 14px rgba(220,38,38,.5);
	transform: translateY(-1px);
}
.hp-ham-btn:active { transform: scale(.93); }
.hp-ham-btn svg { width: 20px; height: 20px; transition: opacity .18s, transform .18s; }
/* Khi nav mở: icon xoay 90° + fade nhẹ */
.hp-ham-btn[aria-expanded="true"] svg { transform: rotate(90deg); opacity: .85; }

/* Search toggle — ẩn desktop, hiện ≤768px */
@media (min-width: 769px) { .hp-search-toggle { display: none; } }
.hp-search-toggle svg { width: 20px; height: 20px; }

/* Mobile search bar — overlay centered */
.hp-search-bar {
	position: fixed; inset: 0;
	z-index: 100015;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 72px 16px 0;
	width: auto;
	max-width: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, visibility 0s .2s;
}
.hp-search-bar.is-open {
	display: flex;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity .2s ease, visibility 0s;
}
.hp-search-bar__backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.55);
	cursor: pointer;
}
.hp-search-bar__card {
	position: relative; z-index: 1;
	background: var(--bg);
	border-radius: 14px;
	box-shadow: 0 8px 40px rgba(0,0,0,.25);
	display: flex; align-items: center; gap: 6px;
	padding: 8px 8px 8px 14px;
	width: 100%; max-width: 540px;
	transform: translateY(-10px);
	transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.hp-search-bar.is-open .hp-search-bar__card {
	transform: translateY(0);
}
.hp-search-bar__card .search {
	flex: 1; height: 44px;
	background: transparent;
	border: none; box-shadow: none;
}
.hp-search-bar__card .search:hover,
.hp-search-bar__card .search:focus-within {
	border: none; box-shadow: none;
}
.hp-search-bar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border: none; background: transparent;
	color: var(--muted); cursor: pointer;
	border-radius: 10px; flex-shrink: 0; padding: 0;
	transition: background .15s, color .15s;
}
.hp-search-bar__close:hover { background: var(--bg-2); color: var(--ink); }
.hp-search-bar__close svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
	.hp-ham-btn { display: flex; margin-left: 10px; }
}

/* Drawer panel */
.hp-mnav {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: min(300px, 88vw);
	background: var(--bg);
	border-right: 1px solid var(--line);
	box-shadow: 4px 0 24px rgba(0,0,0,.12);
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
	z-index: 100010;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
}
body.hp-mnav--open .hp-mnav { transform: translateX(0); }

/* Admin bar offset */

/* Overlay backdrop */
.hp-mnav__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	z-index: 100009;
	transition: opacity .28s;
}
body.hp-mnav--open .hp-mnav__overlay {
	opacity: 1;
	pointer-events: auto;
}
/* Scroll lock via JS position:fixed để drawer touch-scroll hoạt động trên iOS */

/* Drawer head */
.hp-mnav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 1;
	flex-shrink: 0;
}
.hp-mnav__logo { display: flex; align-items: center; }
.hp-mnav__logo img,
.hp-mnav__logo .custom-logo { height: 32px; width: auto; }

.hp-mnav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: none;
	background: var(--bg-2);
	color: var(--ink-2);
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s, color .15s;
	padding: 0;
}
.hp-mnav__close:hover { background: var(--red-10); color: var(--red-ink); }
.hp-mnav__close svg { width: 18px; height: 18px; }

/* Drawer search */

/* Drawer body */
.hp-mnav__body { flex: 1; padding: 4px 0 16px; }

.hp-mnav__section {
	padding: 6px 0;
	border-bottom: 1px solid var(--line);
}
.hp-mnav__section:last-child { border-bottom: 0; }
/* Pages section không có group-head → list luôn hiện */

.hp-mnav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: background .12s, color .12s;
	line-height: 1.3;
}
.hp-mnav__link:hover,
.hp-mnav__link:focus-visible { background: var(--bg-2); color: var(--red-ink); outline: none; }

.hp-mnav__icon {
	width: 16px;
	text-align: center;
	color: var(--red-ink);
	font-size: 13px;
	flex-shrink: 0;
}

.hp-mnav__section--pages .hp-mnav__link { font-weight: 500; }

/* Drawer footer */

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Phase 4 (main.css polish)
   ═══════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------
   4a. ≤ 480px — sect-links scroll ngang, meganav ẩn, hero compact
   ------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Meganav: drawer + sticky footer đủ navigation → giải phóng space */
  .meganav { display: none !important; }

  /* Sect links: scroll ngang thay vì wrap */

  /* Hero banner compact */
  .hero-main { min-height: 180px; padding: 18px 14px; border-radius: 8px; }
  .hero-main h1 { font-size: 22px !important; }
  .hero-main .hm-sub { font-size: 12px; }

  /* Benefits 1 cột khi rất nhỏ */
  .benefits { grid-template-columns: 1fr 1fr; }

  /* Cat banner text nhỏ hơn */
  .cat-bn .cb-k { font-size: 14px; }

  /* Section header */
  .sect { padding: 16px 5px; }

  /* Flash sale */

  /* Brands 2-col: giữ nguyên, đã có rule 480px */
}

/* -------------------------------------------------------------------
   4b. ≤ 360px — header compact, grid font
   ------------------------------------------------------------------- */
@media (max-width: 360px) {
  .logo .l-img { height: 28px; }
  .header-inner { gap: 6px; }
  form.search { height: 36px; padding: 0 8px; }
  form.search input { font-size: 12px; }
  .hp-ham-btn { width: 36px; height: 36px; }
  .hp-ham-btn svg { width: 20px; height: 20px; }

  .card .name { font-size: 12px; }
  .card .price-now { font-size: 14px; }

  .benefits { grid-template-columns: 1fr; }
  .benefits .b { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .benefits .b:last-child { border-bottom: 0; }

  .container, .hp-container { padding: 0; }
}

/* -------------------------------------------------------------------
   4c. Listing page — filter sidebar dễ dùng trên mobile
   ------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Filters không sticky trên mobile, chỉ scroll bình thường */
  .filters-box { top: 0; }
}

@media (max-width: 480px) {
  /* Filter groups collapse để tiết kiệm space */
  .filter-group { }
  .filter-group h4 { cursor: pointer; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Phase 5a: Fold / narrow phones ~344px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  form.search { display: none !important; }

  .container,
  .hp-container {
    padding: 0;
  }

  .header-inner {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0 14px;
    min-height: 52px;
  }

  .header-inner > .logo {
    position: static;
    left: auto;
    transform: none;
    justify-self: center;
    margin: 0 auto;
    min-width: 0;
    width: 84px;
    max-width: 84px;
    overflow: hidden;
  }

  .logo .l-img,
  .header-inner > .logo .custom-logo {
    height: 30px;
    width: auto;
    max-width: 100%;
  }

  .header-actions {
    gap: 4px;
    margin-right: 4px;
  }
  .header-actions > .hp-theme-toggle {
    position: absolute;
    left: calc(50% - 96px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }
  .header-actions > .hp-lang-toggle {
    position: absolute;
    left: calc(50% - 132px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 4px;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }

  .header-actions .hp-search-toggle {
    display: none;
  }

  .ha-label { display: none !important; }

  .ha {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
  }

  .ha > svg {
    width: 16px;
    height: 16px;
  }

  .header-actions > .hp-theme-toggle,
  .hp-ham-btn {
    width: 34px;
    height: 34px;
  }
  .header-actions > .hp-lang-toggle {
    width: 34px;
    height: 34px;
  }

  .hp-ham-btn svg {
    width: 18px;
    height: 18px;
  }

  .sect {
    padding: 16px 5px;
    overflow-x: clip;
  }

  .grid-5,
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    overflow: hidden;
  }

  .grid-5 > *,
  .grid-4 > *,
  .grid-3 > * {
    min-width: 0;
    width: auto !important;
    max-width: none !important;
  }

  .card {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 8px;
  }

  .card .media,
  .card .card-img-link {
    display: block;
    width: 100%;
  }

  .card .media {
    margin-bottom: 10px;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
  }

  .card .card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .card .brand-line {
    font-size: 10px;
    min-height: 24px;
  }

  .card .name {
    font-size: 11.5px;
    min-height: 50px;
    margin-bottom: 6px;
  }

  .card .specs {
    padding: 7px 8px;
    margin-bottom: 8px;
    min-height: 78px;
  }

  .card .spec {
    gap: 6px;
  }

  .card .spec .sp-k {
    width: 24px;
    font-size: 8.5px;
  }

  .card .spec .sp-v {
    font-size: 10px;
  }

  .card .price-row {
    gap: 4px !important;
  }

  .card .price-now,
  .card .price-now.hp-price-contact,
  .card .hp-price-contact {
    font-size: 12px !important;
  }

  .card .price-old {
    font-size: 9.5px !important;
  }

  .card .hp-price-from__label {
    font-size: 8px !important;
  }

  .card .rating {
    font-size: 10.5px !important;
  }

  .card .rating .stars svg {
    width: 12px !important;
    height: 12px !important;
  }

  .card .configs-pill {
    right: 4px !important;
    bottom: 4px !important;
    font-size: 9.5px;
    padding: 3px 7px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Phase 5: Z Fold 280px
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 320px) {
  /* Header — ẩn search (drawer thay thế), simplify grid */
  form.search { display: none !important; }
  .header-inner {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
    min-height: 44px;
  }
  .header-inner > .logo {
    position: static;
    left: auto;
    transform: none;
    justify-self: center;
    margin: 0 auto;
    min-width: 0;
    width: 76px;
    max-width: 76px;
    overflow: hidden;
  }
  .logo .l-img,
  .header-inner > .logo .custom-logo {
    height: 26px;
    width: auto;
    max-width: 100%;
  }
  .header-actions {
    gap: 4px;
  }
  .header-actions > .hp-theme-toggle {
    position: absolute;
    left: calc(50% - 66px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }
  .header-actions > .hp-lang-toggle {
    position: absolute;
    left: calc(50% - 96px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 26px;
    min-width: 26px;
    height: 30px;
    padding: 0 4px;
    background: transparent;
    border-color: var(--red);
    color: var(--red-ink);
    box-shadow: none;
  }
  .header-actions .hp-search-toggle {
    display: none;
  }
  /* Force hide display name nếu chưa ẩn */
  .ha-label { display: none !important; }
  .ha { padding: 5px 6px; }
  .ha > svg { width: 16px; height: 16px; }
  .header-actions > .hp-theme-toggle,
  .header-actions > .hp-theme-toggle {
    width: 30px;
    height: 30px;
  }
  .header-actions > .hp-lang-toggle {
    width: 26px;
    height: 30px;
  }
  .hp-ham-btn { width: 34px; height: 34px; }
  .hp-ham-btn svg { width: 18px; height: 18px; }

  /* Container */
  .container, .hp-container { padding: 0; }

  /* Section header */
  .sect {
    padding: 16px 5px;
    overflow-x: clip;
  }

  /* Product cards */
  .grid-5,
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 8px) / 2))) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .grid-5 > *,
  .grid-4 > *,
  .grid-3 > * {
    min-width: 0;
  }
  .card {
    width: 100%;
    min-width: 0;
    padding: 6px;
  }
  .card .media {
    border-radius: 6px;
    aspect-ratio: 1 / 1;
  }
  .card .card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .card .name {
    font-size: 11px;
    min-height: 44px;
    margin-bottom: 5px;
  }
  .card .brand-line {
    font-size: 10px;
    min-height: 24px;
  }
  .card .specs {
    padding: 6px 7px;
    margin-bottom: 8px;
    min-height: 74px;
  }
  .card .spec {
    gap: 6px;
  }
  .card .spec .sp-k {
    width: 24px;
    font-size: 8.5px;
  }
  .card .spec .sp-v {
    font-size: 10px;
  }
  .card .price-row {
    gap: 4px !important;
  }
  .card .price-now,
  .card .price-now.hp-price-contact,
  .card .hp-price-contact {
    font-size: 12px !important;
  }
  .card .price-old {
    font-size: 9.5px !important;
  }
  .card .hp-price-from__label {
    font-size: 8px !important;
  }
  .card .rating {
    font-size: 10.5px !important;
  }
  .card .rating .stars svg {
    width: 12px !important;
    height: 12px !important;
  }
  .card .configs-pill {
    right: 4px !important;
    bottom: 4px !important;
    font-size: 9.5px;
    padding: 3px 7px;
  }

  /* Benefits — 1 cột */
  .benefits {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .benefits .b {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    gap: 8px;
  }
  .benefits .b:last-child { border-bottom: 0; }

  /* Hero */
  .hero-main { padding: 14px 12px; min-height: 160px; }
  .hero-main h1 { font-size: 19px !important; }
  .hero-main .hm-cta .btn { font-size: 12px; padding: 8px 12px; }

  /* Sect */
  .sect { padding: 16px 5px; }

  /* Footer */
  footer .top { padding: 20px 0 16px; }

  /* Sticky mobile nav */

  /* Drawer width maxes out at 88vw = ~246px — no change needed */
}

/* ============================================================
 * Dark mode: override WP Customizer CSS "h1-h6 { color: black }"
 * và "body { color: black }" hardcode — must use !important để
 * beat Customizer inline style được load trước main.css.
 * ============================================================ */
[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--ink) !important;
}
/* Ngoại lệ: woocommerce-tabs dùng gradient webkit-text-fill-color — giữ nguyên */
[data-theme="dark"] .woocommerce-tabs h2,
[data-theme="dark"] .woocommerce-tabs h3,
[data-theme="dark"] .woocommerce-tabs h4 {
  color: inherit !important;
}
/* Ngoại lệ: topbar, header, buttons — đã có màu riêng */
[data-theme="dark"] .topbar h1,
[data-theme="dark"] .topbar h2,
[data-theme="dark"] .hero-main h1 {
  color: #fff !important;
}

/* ============================================================
 * Customizer CSS: ".woocommerce-cart-form a { color: black }"
 * Cart form có cả class woocommerce-cart-form lẫn cart-list.
 * ============================================================ */
[data-theme="dark"] .woocommerce-cart-form a { color: var(--ink) !important; }

/* ============================================================
 * Toast (HP.toast với type='') — background: var(--ink) → trắng trong dark mode
 * ============================================================ */
[data-theme="dark"] .hp-toast { background: var(--bg-3) !important; color: var(--ink) !important; }
[data-theme="dark"] .hp-toast--ok { background: var(--ok) !important; color: #fff !important; }
[data-theme="dark"] .hp-toast--err { background: var(--red) !important; color: #fff !important; }

/* ============================================================
 * Mega menu promo card — background: var(--ink) → trắng trong dark mode
 * ============================================================ */
[data-theme="dark"] .mm-promo { background: var(--bg-3) !important; color: var(--ink) !important; }
[data-theme="dark"] .mm-promo__title { color: var(--ink) !important; }
[data-theme="dark"] .mm-promo__sub { color: var(--ink-2) !important; }

/* ============================================================
 * Search dropdown — plugin instant-search: background: #ffffff !important
 * ============================================================ */
[data-theme="dark"] .td-search-results,
[data-theme="dark"] .search .td-search-results,
[data-theme="dark"] .search-hints {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
[data-theme="dark"] .td-search-results *:not(.td-item-price):not(.woocommerce-Price-amount):not(ins):not(del) { color: var(--ink) !important; }
[data-theme="dark"] .td-search-results [class*="item"]:hover,
[data-theme="dark"] .td-search-results a:hover { background: var(--bg-2) !important; }
[data-theme="dark"] .td-search-results mark { background: rgba(255,220,0,.25) !important; color: var(--ink) !important; }

/* ============================================================
 * Float contact dock (#hp-support-dock) — inline style rgba(210,210,210,0.6)
 * ============================================================ */
[data-theme="dark"] #hp-support-dock {
  background: rgba(20, 25, 38, 0.88) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Dock peek từ mép phải ở desktop nhỏ — tránh đè lên cột nội dung */
@media (min-width: 1200px) and (max-width: 1499px) {
  #hp-support-dock {
    right: -22px !important;
    border-radius: 24px 0 0 24px !important;
    padding: 18px 10px 18px 14px !important;
    gap: 14px !important;
  }
  #hp-support-dock:hover {
    right: 10px !important;
    border-radius: 24px !important;
    padding: 18px 14px !important;
  }
  #hp-support-dock img {
    width: 42px !important;
    height: auto !important;
  }
}

/* ============================================================
 * Order summary quantity badge (.qb) — background: var(--ink) → trắng
 * ============================================================ */
[data-theme="dark"] .os-mini .thumb .qb {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--bg) !important;
}

/* Logo dark mode swap: handle by JS via [data-hp-logo-light/dark] attrs
   (xem hp_logo_render() + swapLogos() trong inc/dark-mode.php). CSS `content: url`
   cũ đã xoá vì không cover được .hp-mnav__logo trong drawer. */

/* GTranslate flag: đặt width/height rõ ràng để browser reserve space trước khi JS inject,
   tránh CLS khi Lighthouse không thấy HTML attribute từ JS-rendered widget. */
/* GTranslate float widget cũ được thay bằng nút header custom */
#gt_float_wrapper,
#gt_float_wrapper .gt_float_switcher {
  display: none !important;
}

body.hp-mnav--open #gt_float_wrapper {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
 * Dark mode: red TEXT contrast fix
 * #d42626 trên --bg (#0d1117) chỉ ~3.3:1 — fail WCAG AA.
 * Targeted override sang #ff5050 (5.3:1 trên #0d1117, 4.7:1 trên #151a21).
 * KHÔNG đổi --red global để không phá vỡ button/badge bg dùng color:#fff.
 * ============================================================ */
[data-theme="dark"] .hp-lang-toggle {
  color: var(--red-ink);
  border-color: var(--red-ink);
}
/* .card .price-now ins * { color: var(--red-ink) !important } là direct rule → beat inheritance.
   Phải add direct dark-mode rule với [data-theme] để override cả ins wrapper. */
[data-theme="dark"] .card .price-now,
[data-theme="dark"] .card .price-now ins,
[data-theme="dark"] .card .price-now ins *,
[data-theme="dark"] .card .woocommerce-Price-amount { color: var(--red-ink) !important; }

/* ============================================================
 * Content headings — blog post + product long description
 * H2/H3/H4 có thứ bậc rõ ràng (trước đây description dùng default browser).
 * Dùng var(--ink) → tự đúng cả dark mode.
 * ============================================================ */
/* Hover: thụt accent vào nhẹ (dùng padding để không đụng transform của reveal) */
/* Dark mode: chữ + accent đỏ sáng cho nền tối */
[data-theme="dark"] .desc-main__inner h2 { color: var(--red-ink); border-left-color: var(--red-ink); }

/* Blog post H2 — màu KHÁC sản phẩm (anh Phát chọn: xanh dương) */
[data-theme="dark"] .hp-post .hp-post-content h2 { color: #6ea8fe; }

/* ── Entrance reveal nhỏ (fade-up) khi cuộn tới ──
 * Chỉ bật khi JS thêm body.hp-anim-ready → no-JS vẫn hiện đầy đủ (an toàn).
 * Tôn trọng prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	/* Accent bar trượt vào nhẹ */
	[data-theme="dark"] body.hp-anim-ready .desc-main__inner h2.hp-in { border-left-color: var(--red-ink); }
}

/* ============================================================
 * FAQ Accordion — shortcode [accordion]/[accordion-item] (Flatsome-compat)
 * Dùng <details>/<summary> native: không cần JS, accessible, SEO-friendly.
 * ============================================================ */

/* Dark mode: màu đỏ active phải sáng để đạt WCAG AA trên nền tối */
[data-theme="dark"] .hp-accordion__item[open] > .hp-accordion__head,
[data-theme="dark"] .hp-accordion__item[open] > .hp-accordion__head .hp-accordion__chevron { color: var(--red-ink); }

/* Lightbox ảnh nội dung (.hp-lb) — copy vào main.css để load TRÊN MỌI TRANG
   (trước chỉ có trong woocommerce.css → blog post click ảnh hiện dưới footer). */
@keyframes lb-spin { to { transform: rotate(360deg); } }


/* ---- Trang tra cứu đơn hàng /kiem-tra-don-hang/ (2026-07-02) ---- */
[data-theme="dark"] .hp-track__head{background:var(--bg)}
[data-theme="dark"] .hp-track__panel,[data-theme="dark"] .hp-track__aside{background:var(--bg)}
/* Form WC order tracking (trang này không nạp woocommerce.css → style tự chứa) */

/* Kicker dùng chung (tag bài viết + tag sản phẩm) 2026-07-02 */
.hp-tag-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;color: var(--red-ink);text-transform:uppercase;margin-bottom:6px}

/* Fix số bước 1-2-3 trang tra cứu: .hp-track__steps span (desc xám) đè màu số → ép trắng (2026-07-02) */

/* ---- Header danh mục premium (redesign 2026-07-02) ---- */
.hp-cat-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#fff 52%,#fff3f3 100%);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:16px}
.hp-cat-hero__body{position:relative;z-index:1}
.hp-cat-hero .hp-tag-kicker a{color: var(--red-ink);text-decoration:none}
.hp-cat-hero h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:12px}
.hp-cat-hero__icon{width:48px;height:48px;border-radius:10px;object-fit:contain;background:#fff}
.hp-cat-hero__meta{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:13px}
.hp-cat-hero__meta i{color: var(--red-ink);margin-right:6px}
.hp-cat-hero .hp-subcats{margin-top:16px}
.hp-cat-hero--banner{border:0}
.hp-cat-hero--banner h1,.hp-cat-hero--banner .hp-cat-hero__meta{color:#fff}
.hp-cat-hero--banner .hp-cat-hero__meta i,.hp-cat-hero--banner .hp-tag-kicker,.hp-cat-hero--banner .hp-tag-kicker a{color:#ffb3b3}
[data-theme="dark"] .hp-cat-hero{background:linear-gradient(120deg,var(--bg) 52%,#2a1416 100%)}
@media (max-width:768px){.hp-cat-hero{padding:20px;border-radius:12px}.hp-cat-hero h1{font-size:24px}.hp-cat-hero__meta{gap:4px 14px;font-size:12px}}

/* ---- Menu ngang: giãn + icon đỏ + ngăn cách "|" (2026-07-02) ---- */
.meganav-inner > a{padding:0 19px}
.meganav-inner > a > i{color: var(--red-ink);font-size:12px;margin-right:2px}
.meganav-inner > a + a{position:relative}
.meganav-inner > a + a::before{content:"|";position:absolute;left:-2px;top:50%;transform:translateY(-50%);color:var(--line);font-size:12px;pointer-events:none}

/* ---- QA 2026-07-02: pagination blog archive (hp-pagination chưa từng có CSS màn hình) ---- */
[data-theme="dark"] ul.hp-pagination .page-numbers{background:var(--bg-2)}
[data-theme="dark"] ul.hp-pagination .page-numbers.current{background:var(--red);color:#fff}

/* ---- QA: nút disabled (vd "Cập nhật giỏ") chữ trắng trên nền nhạt → contrast rõ ---- */
.btn:disabled,.btn[disabled],button.btn[disabled]{background:var(--bg-3);color:var(--muted);border-color:var(--line);cursor:not-allowed;box-shadow:none}

/* ===== Selector sao form viết đánh giá (WC p.stars) — 5 sao NGANG (hết xổ dọc
   1-2-3-4-5), ★ Unicode + !important để thắng rule plugin review devvn (#review_form) ===== */

.woocommerce #reviews #comments #respond .comment-form-rating p.stars {
  display: inline-flex !important; gap: 3px; margin: 0 !important; line-height: 1; white-space: nowrap;
}

.woocommerce #reviews #comments #respond .comment-form-rating p.stars a {
  position: relative !important; width: 30px !important; height: 30px !important;
  font-size: 26px !important; /* px tuyệt đối — parent p.stars có font-size:0 làm em collapse */
  display: inline-block !important; float: none !important; overflow: hidden;
  text-indent: -9999px !important; text-decoration: none; cursor: pointer;
}

.woocommerce #reviews #comments #respond .comment-form-rating p.stars a::before {
  content: "\2605" !important; font-family: Arial, sans-serif !important;
  position: absolute; inset: 0; text-indent: 0 !important;
  font-size: 26px !important; line-height: 30px; text-align: center;
  color: #d8dde3 !important; transition: color .12s;
}

/* Sao read-only (.star-rating) — WC hiển thị rating bằng star font; theme dequeue woocommerce.css
   nên nó tụt về text "Được xếp hạng 5 5 sao". Vẽ lại bằng ★ Unicode, auto-size theo font để
   width % (span) cắt đúng số sao (vd 80% = 4 sao). Dùng ở review list + card + gần tên SP. */ /* giấu cả <strong class="rating"> plugin devvn tô màu riêng */
[data-theme="dark"] .star-rating::before { color: #3a4048; }

@media (max-width: 480px) {
  .hp-container { margin: 0px auto 0 !important; padding: 0 10px; }
}

/* === Mobile fixes: header (giống TD) + cat banner + list sản phẩm === */
.hp-grid-more { display: none; }
@media (max-width: 767px) {
  /* Mục lục section: khoảng cách tiêu đề ↔ nội dung gọn hơn trên mobile. */
  /* Header CÂN 2 BÊN (giống TD): hamburger + theme + VI (trái) | logo giữa | search+account+cart (phải).
     theme+VI absolute ngay sau hamburger; search/account/cart flow ở header-actions (phải). */
  .header-inner { position: relative; }
  .header-inner .header-actions .hp-search-toggle { display: flex; }
  /* Icon top 40px (thay 34px) */
  .hp-ham-btn,
  .header-inner .header-actions > .hp-theme-toggle,
  .header-inner .header-actions > .hp-lang-toggle,
  .header-inner .header-actions > .hp-search-toggle,
  .header-inner .header-actions .ha { width: 40px; min-width: 40px; height: 40px; padding: 0; }
  .hp-ham-btn svg,
  .header-inner .header-actions .ha > svg { width: 20px; height: 20px; }
  /* Canh lại cho 40px: hamburger(10-50) · theme(60-100) · VI(105-145) | logo giữa | search+account+cart phải */
  .header-inner .header-actions > .hp-theme-toggle { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); margin: 0; }
  .header-inner .header-actions > .hp-lang-toggle  { position: absolute; left: 101px; top: 50%; transform: translateY(-50%); margin: 0; }
  .header-actions { gap: 5px; }
  .header-inner > .logo { position: absolute; left: 50%; transform: translateX(-50%); width: 84px; max-width: 84px; min-width: 0; margin-left: 0; z-index: 1; }
  .benefits { margin-top: 0; }
  /* Cat banner: bỏ chữ "Xem bộ sưu tập", chỉ còn mũi tên */
  /* List sản phẩm: chỉ 4 (2x2), còn lại ẩn tới khi bấm "Xem thêm" */
  .grid-5:not(.is-expanded) > *:nth-child(n+5),
  .grid-4:not(.is-expanded) > *:nth-child(n+5),
  .grid-3:not(.is-expanded) > *:nth-child(n+5) { display: none; }
  .hp-grid-more {
    display: block; width: fit-content; margin: 18px auto 0;
    padding: 10px 28px;
    background: var(--bg); color: var(--red-ink);
    border: 1.5px solid var(--red); border-radius: 99px;
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
  }
  .hp-grid-more::after { content: "\25be"; margin-left: 7px; font-size: 11px; }
  .hp-grid-more:hover, .hp-grid-more:active {
    background: var(--red); color: #fff;
    box-shadow: 0 8px 20px -6px rgba(221,51,51,.45);
  }
  [data-theme="dark"] .hp-grid-more { background: transparent; }
}
@media (max-width: 960px) {
  .hero-side .hero-banner--img { min-height: 0; }
}

/* ==========================================================================
   Logo SVG: khai TỈ LỆ ngay trong CSS (natural 300×98).
   Các file logo là SVG, mỗi cái là một document con — trace Lighthouse cho thấy
   chúng tải xong SAU first paint ở ~50% lần chạy. Với width:auto, trình duyệt
   phải CHỜ tải xong mới biết bề rộng => layout đổi => CLS toàn trang (đo được
   0.9466 trên trang search). aspect-ratio cho trình duyệt biết tỉ lệ NGAY từ CSS,
   không phụ thuộc thời điểm ảnh về.
   ========================================================================== */
.hp-logo-img { aspect-ratio: 300 / 98; }

/* ═══ Mobile nav — DRILL-IN đẹp (1.7.97) ═══════════════════════════════ */
.hp-mnav { overflow: hidden; }
.hp-mnav__viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--bg);
}
.hp-mnav__panel { width: 100%; }
.hp-mnav__panel--sub { display: none; }
.hp-mnav__panel--sub.is-active {
	display: block;
	animation: hpMnavSlide .28s cubic-bezier(.4, 0, .2, 1);
}
.hp-mnav__viewport.has-sub .hp-mnav__panel--root { display: none; }
@keyframes hpMnavSlide {
	from { transform: translateX(32px); opacity: .3; }
	to   { transform: none; opacity: 1; }
}

.hp-mnav__section { padding: 0; border: 0; }

/* Drill rows (root) */
.hp-mnav__drill {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: background .15s, color .15s, padding-left .15s;
}
.hp-mnav__drill::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 0;
	background: var(--red);
	border-radius: 0 3px 3px 0;
	transition: height .18s ease;
}
.hp-mnav__drill:hover,
.hp-mnav__drill:focus-visible {
	background: var(--red-10);
	color: var(--red-ink);
	outline: none;
	padding-left: 22px;
}
.hp-mnav__drill:hover::before,
.hp-mnav__drill:focus-visible::before { height: 58%; }
.hp-mnav__drill-label { flex: 1; min-width: 0; letter-spacing: .01em; }
.hp-mnav__caret {
	flex-shrink: 0;
	width: 30px; height: 30px;
	padding: 6px;
	border-radius: 50%;
	background: var(--bg-2);
	color: var(--muted);
	transition: transform .15s, color .15s, background .15s;
}
.hp-mnav__drill:hover .hp-mnav__caret,
.hp-mnav__drill:focus-visible .hp-mnav__caret {
	color: var(--red-ink);
	background: var(--bg);
	transform: translateX(2px);
}

/* Back header (sub) */
.hp-mnav__back {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 54px;
	padding: 12px 18px;
	background: var(--red-10);
	border: 0;
	border-bottom: 1px solid var(--line);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	position: sticky;
	top: 0;
	z-index: 2;
	text-align: left;
}
.hp-mnav__back svg {
	flex-shrink: 0;
	width: 28px; height: 28px;
	padding: 5px;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	stroke: #fff;
}
.hp-mnav__back:hover { color: var(--red-ink); }

/* Sub list */
.hp-mnav__sublist { list-style: none; margin: 0; padding: 6px 0 16px; }
.hp-mnav__link--all { font-weight: 700; color: var(--red-ink); }

/* Page buttons */
.hp-mnav__section--pages {
	border-top: 8px solid var(--bg-2);
	margin-top: 4px;
	padding: 4px 0 8px;
}
.hp-mnav__pages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 14px 16px;
}
.hp-mnav__pagebtn {
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 10px 12px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: var(--bg);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .1s;
}
.hp-mnav__pagebtn i { color: var(--red-ink); font-size: 15px; flex-shrink: 0; transition: color .15s; }
.hp-mnav__pagebtn:hover,
.hp-mnav__pagebtn:focus-visible {
	border-color: var(--red);
	color: var(--red-ink);
	background: var(--red-10);
	outline: none;
	box-shadow: 0 4px 14px -6px var(--red);
}
.hp-mnav__pagebtn:active { transform: translateY(1px); }
/* Nút cuối lẻ → full width */
.hp-mnav__pagebtn:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.hp-mnav__pagebtn:last-child:nth-child(odd) i { color: #fff; }
.hp-mnav__pagebtn:last-child:nth-child(odd):hover { background: var(--red-600); box-shadow: 0 6px 18px -6px var(--red); }
/* ═══ /Mobile nav drill-in ═════════════════════════════════════════════ */

/* ── Nhu cầu sử dụng: NÚT trực tiếp trên root (không drill/trượt ngang) ── */
.hp-mnav__grouptitle {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-2);
	padding: 14px 16px 8px;
}
.hp-mnav__needs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 0 16px 14px;
}
.hp-mnav__needbtn {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 14px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: var(--bg);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .1s;
}
.hp-mnav__needbtn span { min-width: 0; flex: 1 1 auto; }
.hp-mnav__needbtn i {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	font-size: 15px;
	color: var(--red-ink);
	background: var(--red-10);
	border-radius: 10px;
}
.hp-mnav__needbtn:hover,
.hp-mnav__needbtn:focus-visible {
	border-color: var(--red);
	background: var(--red-10);
	color: var(--red-ink);
	outline: none;
	box-shadow: 0 4px 14px -6px var(--red);
}
.hp-mnav__needbtn:active { transform: translateY(1px); }

/* ── Item panel con: TO hơn + dạng nút + chevron (dễ bấm, rõ luồng) ── */
.hp-mnav__sublist .hp-mnav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	transition: background .12s, color .12s;
}
.hp-mnav__sublist li:last-child .hp-mnav__link { border-bottom: 0; }
.hp-mnav__sublist .hp-mnav__link > span { flex: 1 1 auto; min-width: 0; }
/* Reset "viên tròn xám" của drill caret → mũi tên phẳng (item con là link cuối, không phải drill). */
.hp-mnav__sublist .hp-mnav__link .hp-mnav__caret {
	width: 18px; height: 18px; padding: 0;
	background: none; border-radius: 0;
	color: var(--muted);
	flex-shrink: 0; opacity: .5;
	transition: opacity .15s, color .15s, transform .15s;
}
.hp-mnav__sublist .hp-mnav__link:hover .hp-mnav__caret,
.hp-mnav__sublist .hp-mnav__link:focus-visible .hp-mnav__caret { opacity: 1; color: var(--red-ink); }
.hp-mnav__sublist .hp-mnav__link--all { font-size: 14px; }

/* ═══ Responsive media trong nội dung (fix ảnh/iframe width cứng tràn — Z Fold/narrow, 1.7.99) ═══ */
.article-content img { max-width: 100%; height: auto; }
.article-content figure { width: auto !important; max-width: 100%; margin-left: auto; margin-right: auto; }
.article-content iframe,
.article-content video { max-width: 100%; }
.article-content [style*="width"] { max-width: 100%; }
/* ═══ /Responsive media ═══ */

/* ═══ Fix header overlap ở màn hẹp (≤370px) — theme/lang vào drawer, logo về trái (1.8.2) ═══ */
/* Ẩn mặc định: header ngoài đã có theme/lang toggle → trong drawer thừa. Chỉ hiện ≤370px (lúc header giấu 2 nút). */
.hp-mnav__utils { display: none; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.hp-mnav__utils .hp-theme-toggle,
.hp-mnav__utils .hp-lang-toggle {
	position: static !important; transform: none !important; left: auto !important; top: auto !important; margin: 0 !important;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink);
}
.hp-mnav__utils .hp-lang-toggle { font-weight: 700; text-decoration: none; }
@media (max-width: 370px) {
	.header-inner .header-actions > .hp-theme-toggle,
	.header-inner .header-actions > .hp-lang-toggle { display: none !important; }
	.hp-mnav__utils { display: flex; } /* header giấu 2 nút → drawer hiện lại */
	.header-inner > .logo {
		position: static !important; transform: none !important; left: auto !important;
		margin: 0 auto 0 6px !important; width: auto; max-width: 120px;
	}
}
/* ═══ /Fix header overlap ═══ */

/* ═══ ≤370px drawer utils: icon ĐỎ + chữ rõ nghĩa (theme trạng thái / ngôn ngữ) — 2026-08-13 ═══ */
.hp-util-text { display: none; } /* ẩn mặc định (header nút gọn); chỉ hiện trong drawer ≤370px */
@media (max-width: 370px) {
	.hp-mnav__utils { flex-direction: column; align-items: stretch; }
	.hp-mnav__utils .hp-theme-toggle,
	.hp-mnav__utils .hp-lang-toggle {
		width: 100%; min-width: 0; height: auto; min-height: 48px;
		justify-content: flex-start; gap: 10px;
		padding: 10px 14px; font-size: 14px; font-weight: 600; text-decoration: none;
	}
	.hp-mnav__utils .hp-theme-toggle .hp-theme-toggle__icon { color: var(--red-ink); } /* icon đỏ */
	.hp-mnav__utils .hp-lang-toggle::before {
		content: "\f1ab"; font-family: "Font Awesome 6 Free"; font-weight: 900;
		font-size: 18px; line-height: 1; color: var(--red-ink); flex-shrink: 0;
	}
	.hp-mnav__utils .hp-lang-toggle__label { font-weight: 700; }
	.hp-mnav__utils .hp-lang-toggle__text { display: inline; }
	[data-theme-pref="light"]  .hp-mnav__utils .hp-theme-toggle__text--light  { display: inline; }
	[data-theme-pref="dark"]   .hp-mnav__utils .hp-theme-toggle__text--dark   { display: inline; }
	[data-theme-pref="system"] .hp-mnav__utils .hp-theme-toggle__text--system { display: inline; }
}
/* ═══ /drawer utils icon+text ═══ */

/* ═══ Header refine mobile/tablet: logo canh giữa + tách gap + nút đồng đều + placeholder gọn (2026-08-13) ═══ */
@media (max-width: 370px) {
  /* ≤370px (theme/lang ẩn vào drawer): logo canh GIỮA khoảng trống giữa hamburger và cụm nút phải.
     KHÔNG áp >370px: ở đó ☀/VI đặt absolute bên trái (left:56/101) → canh giữa sẽ đè lên nút VI. */
  .header-inner > .logo { position: static !important; left: auto !important; transform: none !important; justify-self: center !important; margin: 0 !important; }
}
@media (min-width: 561px) and (max-width: 1080px) {
  /* iPad (search bar inline): tách logo khỏi hamburger cho thoáng */
  .header-inner { column-gap: 18px !important; }
  .header-inner > .logo { margin-left: 6px !important; }
}
/* Nút header đồng đều, gọn, hợp header — CHỈ ≤1080px (nút icon-only).
   Desktop >1080px các nút .ha có label chữ ("Tài khoản"/"Giỏ hàng") → KHÔNG ép width kẻo tràn. */
.header-actions { gap: 8px; }
@media (max-width: 1080px) {
  .header-actions > .ha,
  .header-actions > .hp-theme-toggle,
  .header-actions > .hp-lang-toggle { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 10px !important; }
}
/* Placeholder search nhỏ & subtle hơn nút "Tìm" (đang bằng cỡ, italic nhìn to) */
.header-inner .searchform input::placeholder,
.header-inner form.search input::placeholder { font-size: 12px !important; font-style: normal !important; opacity: .65 !important; }
/* ═══ /Header refine ═══ */

/* ═══ Content gallery [gallery] (mô tả SP / bài viết) → LƯỚI đúng số cột.
   WP core xuất .gallery-columns-N nhưng theme thiếu CSS → item full-width xếp dọc. (2026-08-13) ═══ */
/* ═══ /Content gallery grid ═══ */

/* FAQ accordion: bỏ <br> rỗng wpautop chèn giữa các câu hỏi → khoảng cách đều (2026-08-13) */
/* ==========================================================================
   A11Y contrast fix (2026-08-14): legacy wp_extra CSS forces
   .woocommerce-Price-amount.amount to #dd3333 (contrast 4.3 on card bg #f7f8fa,
   fails WCAG AA). Pin card prices to accessible tones in both themes.
   ========================================================================== */
.card .price-now .woocommerce-Price-amount.amount { color: var(--red-ink) !important; }
.card .price-old .woocommerce-Price-amount.amount { color: #616875 !important; }
[data-theme="dark"] .card .price-old .woocommerce-Price-amount.amount { color: var(--muted) !important; }