/* ============ 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;
  --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;
  /* 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);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  background: var(--bg-2);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ============ 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; }

.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);
}
.search:hover { border-color: var(--muted-2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.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); }
.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;
}
.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 */
.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 */
.search .td-search-results:empty { display: none !important; }
.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;
}
.search .s-btn:hover { background: var(--red-600); }
.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); }
.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); 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); 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); }
.meganav a.active { color: var(--red); 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); }

/* ============ 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;
}

/* 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: 800; 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) !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: 800; color: var(--red);
  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); 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); }

/* 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; }

/* Khi mở mega → khoá scroll body */
body.hp-megamenu-open { overflow: hidden; }

/* 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); 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); }
.btn.white:hover { background: var(--bg-2); }
.btn.small { padding: 7px 12px; font-size: 12px; }
.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-sidebar .cat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.hero-sidebar .cat-item:hover { background: var(--red-50); color: var(--red); }
.hero-sidebar .cat-item.sm {
  font-size: 12.5px; color: var(--ink-2); font-weight: 400;
  padding: 5px 10px 5px 32px;
}
.hero-sidebar .cat-item .ci-icon {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--red); flex-shrink: 0;
}
.hero-sidebar .cat-item .ci-icon svg { width: 16px; height: 16px; }
.hero-sidebar .cat-item .arrow { margin-left: auto; opacity: 0; transition: opacity .15s; width: 12px; height: 12px; }
.hero-sidebar .cat-item:hover .arrow { opacity: 1; }
.hero-sidebar .sb-divider {
  margin: 8px 10px 4px; padding-top: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--line);
}
.hero-sidebar .brand-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 4px 8px 6px;
}
.hero-sidebar .brand-tag {
  display: inline-block;
  padding: 4px 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}
.hero-sidebar .brand-tag:hover {
  background: var(--red-50);
  border-color: var(--red);
  color: var(--red);
}

.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: 800;
  letter-spacing: -0.025em; margin: 18px 0 8px;
  max-width: 9ch;
  position: relative; z-index: 2;
}
.hero-main h1 .yellow { color: var(--yellow); font-style: italic; }
.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 .old { text-decoration: line-through; opacity: .6; font-size: 14px; }
.hero-main .hm-price .now { font-size: 28px; font-weight: 800; color: var(--yellow); }

.hero-side {
  display: grid; grid-template-rows: 1fr 1fr; gap: 16px;
}
.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); }
.hero-banner .hb-k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 700; }
.hero-banner .hb-t { font-size: 20px; line-height: 1.15; margin-top: 4px; }
.hero-banner .hb-link { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; opacity: .9; }

/* ============ 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);
  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); }
.sect-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sect-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 12px;
  margin: 0; /* khử default margin khi .sect-title là <h2> (product_section) */
}
.sect-title .tt-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sect-title .hot-ico { color: var(--red); }
.sect-links { display: flex; gap: 4px; flex-wrap: wrap; }
.sect-links a {
  padding: 6px 14px; border-radius: 99px;
  font-size: 12.5px; font-weight: 500;
  background: var(--bg-2); color: var(--ink-2);
}
.sect-links a:hover, .sect-links a.active { background: var(--red); color: #fff; }
.sect-viewall { font-size: 13px; color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sect-viewall:hover { color: var(--red-600); }

/* ============ 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 */
.cat-bn__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; border-radius: inherit;
}
/* 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: 800; 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 ============ */
.flash {
  background: linear-gradient(90deg, #dd3333 0%, #ff6b00 100%);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: #fff;
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap; /* tablet/mobile: items rớt dòng khi không đủ chỗ */
}
.flash .f-title {
  font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; margin: 0; color: inherit;
}
.flash .f-sub { white-space: nowrap; }
.flash-viewall { white-space: nowrap; }
.flash .f-sub { font-size: 13px; opacity: .95; }
.flash .countdown { display: flex; gap: 6px; align-items: center; }
.flash .countdown--full { gap: 4px; }
.flash .countdown .tag { font-size: 13px; margin-right: 6px; }
.flash .countdown .box {
  background: var(--ink); color: #fff;
  width: 38px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums;
}
.flash .countdown .colon { font-weight: 800; font-size: 18px; opacity: .8; }

/* 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). */
.flash .countdown--full .box {
  flex-direction: column; gap: 3px;
  width: 44px; height: 50px;
  padding: 4px 0;
  font-size: 17px;
}
.flash .countdown--full .box-num {
  line-height: 1; font-variant-numeric: tabular-nums;
}
.flash .countdown--full .box-label {
  font-size: 9px; font-weight: 600; letter-spacing: .3px;
  opacity: .75; text-transform: uppercase;
  line-height: 1;
}
.flash-viewall {
  background: rgba(255,255,255,.15); padding: 8px 16px; border-radius: 99px;
  font-size: 13px; font-weight: 600; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(4px);
}
.flash-viewall:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ============ PRODUCT CARD ============ */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.card {
  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 .media .wish {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; color: var(--ink-2);
  transition: all .15s;
}
.card .media .wish:hover { color: var(--red); }
.card .media .wish.active { color: var(--red); background: #fff; }
.card .card-img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .3s; }
.card:hover .card-img { transform: scale(1.06); }
.lp-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8%; transition: transform .3s; }
.card:hover .lp-art { transform: scale(1.04); }
.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 .discount-pill { display: none; }
.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: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  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: 800; color: var(--red); letter-spacing: -0.01em; }
.card .price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.card .install { font-size: 11px; color: var(--muted); margin-top: 4px; }
.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;
}
.card .cta-row { display: flex; gap: 6px; margin-top: 10px; }
.card .cta-row .btn { flex: 1; padding: 8px; font-size: 12px; }
.card .sale-stock {
  margin-top: 8px;
  font-size: 11px; color: var(--red-600); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.card .sale-stock .bar {
  flex: 1; height: 6px; background: var(--red-50); border-radius: 99px; overflow: hidden;
  position: relative;
}
.card .sale-stock .bar .fill { height: 100%; background: linear-gradient(90deg, #ff6b00, var(--red)); border-radius: 99px; }

/* 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 ============ */
.brands {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px;
}
.brand-pill {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 8px;
  text-align: center; font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer; transition: all .15s;
  color: var(--ink);
}
[data-theme="dark"] .brand-pill { background: var(--bg); }
.brand-pill:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }

/* ============ PROMO BANNER ROW ============ */
.promo-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.promo {
  border-radius: var(--radius-lg);
  padding: 24px; color: #fff;
  position: relative; overflow: hidden;
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.promo.p1 { background: linear-gradient(135deg, #0f1419, #2b3139); }
.promo.p2 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.promo.p3 { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.promo .p-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.promo .p-t { font-size: 22px; font-weight: 800; margin: 4px 0; line-height: 1.15; max-width: 18ch; }
.promo .p-sub { font-size: 13px; opacity: .9; max-width: 24ch; }
.promo .p-link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ============ BLOG TEASER ============ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.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); }
.post .p-img { aspect-ratio: 16/9; }
.post .p-body { padding: 16px 18px 18px; }
.post .p-cat { font-size: 11px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.post .p-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 6px 0 8px; }
.post .p-meta { font-size: 12px; color: var(--muted); }

/* ============ 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: 16px 2px; border-bottom: 1px solid var(--line); }
.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); }
.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: 800; 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); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--ink); font-weight: 600; }

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.pager button {
  width: 36px; height: 36px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-size: 13px; font-weight: 600; border-radius: 6px;
}
.pager button.active { background: var(--red); color: #fff; border-color: var(--red); }
.pager button:hover:not(.active) { border-color: var(--red); color: var(--red); }

/* ============ PRODUCT DETAIL ============ */
.pdp { padding: 0 0 40px; }
.pdp-grid { display: grid; grid-template-columns: 1.15fr 1fr 300px; gap: 20px; }
.pdp-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .pdp-card { background: var(--bg); }
.pdp-gallery .main { aspect-ratio: 4/3; border-radius: 8px; background: var(--bg-2); overflow: hidden; position: relative; }
.pdp-gallery .thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 12px; }
.pdp-gallery .thumbs .t { aspect-ratio: 1/1; border-radius: 6px; cursor: pointer; border: 2px solid transparent; overflow: hidden; background: var(--bg-2); }
.pdp-gallery .thumbs .t.active { border-color: var(--red); }

.pdp-info h1 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.pdp-info .meta-row { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pdp-info .meta-row .stars { color: var(--warn); }
.pdp-price-box { background: linear-gradient(135deg, #fff5f5, #ffe8e8); border-radius: 8px; padding: 16px; margin: 14px 0; border: 1px solid #ffd0d0; }
[data-theme="dark"] .pdp-price-box { background: linear-gradient(135deg, #2a0f0f, #1a0808); border-color: #3a1818; }
.pdp-price-box .row1 { display: flex; align-items: baseline; gap: 12px; }
.pdp-price-box .now { font-size: 32px; font-weight: 900; color: var(--red); letter-spacing: -0.02em; }
.pdp-price-box .was { text-decoration: line-through; color: var(--muted); font-size: 15px; }
.pdp-price-box .disc { background: var(--red); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.pdp-price-box .installment { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.pdp-price-box .installment strong { color: var(--red); }

.option-block { padding: 12px 0; }
.option-block .lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 10px; }
.option-block .lbl em { color: var(--red); font-style: normal; margin-left: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt {
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
}
[data-theme="dark"] .opt { background: var(--bg); }
.opt:hover { border-color: var(--red); color: var(--red); }
.opt.active { border-color: var(--red); background: var(--red-50); color: var(--red); font-weight: 700; }
.opt.active::after { content: ""; position: absolute; }
.opt .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }

.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; }

.buybar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.buybar .btn { padding: 14px; font-size: 14px; }

.pdp-side { display: flex; flex-direction: column; gap: 12px; }
.promo-card { background: #fff; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
[data-theme="dark"] .promo-card { background: var(--bg); }
.promo-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--red); }
.promo-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.promo-card ul li { display: flex; gap: 8px; align-items: flex-start; }
.promo-card ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 7px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.spec-table tr:nth-child(odd) { background: var(--bg-2); }
.spec-table td { padding: 10px 14px; font-size: 13px; vertical-align: top; }
.spec-table td:first-child { width: 38%; color: var(--muted); font-weight: 500; }
.spec-table td:last-child { font-weight: 500; }

.pdp-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; }
.pdp-tabs .tab {
  padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.pdp-tabs .tab.active { color: var(--red); border-color: var(--red); }

/* ============ CART + CHECKOUT ============ */
.cart-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .25s; }
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  width: 440px; max-width: 100vw; background: #fff;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.5,.1,.2,1);
  display: flex; flex-direction: column;
}
[data-theme="dark"] .cart-drawer { background: var(--bg); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
.cart-head h3 .cnt { background: var(--red); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 99px; font-weight: 700; }
.cart-body { flex: 1; overflow: auto; padding: 8px 22px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item .ph { aspect-ratio: 1/1; border-radius: 8px; }
.cart-item .name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cart-item .vars { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.cart-item .controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mini-qty { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mini-qty button { width: 24px; height: 24px; background: #fff; border: 0; font-size: 12px; color: var(--ink); }
.mini-qty span { width: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
[data-theme="dark"] .mini-qty button { background: var(--bg); }
.cart-item .remove { background: transparent; border: 0; color: var(--muted); font-size: 11px; padding: 0; }
.cart-item .remove:hover { color: var(--red); }
.cart-item .sum { font-weight: 700; font-size: 14px; color: var(--red); white-space: nowrap; }
.cart-foot { padding: 18px 22px; border-top: 1px solid var(--line); }
.cart-foot .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; }
.cart-foot .row.total { font-size: 17px; font-weight: 800; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.cart-foot .row.total span:last-child { color: var(--red); }

.checkout { padding: 20px 0 40px; }
.ck-block {
  background: #fff; border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .ck-block { background: var(--bg); }
.ck-block h3 { font-size: 16px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.ck-block h3 .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 11px 14px; font-family: inherit; font-size: 14px;
  color: var(--ink); border-radius: 6px;
}
[data-theme="dark"] .field input, [data-theme="dark"] .field select { background: var(--bg-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); background: #fff; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card {
  border: 1.5px solid var(--line); padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; cursor: pointer;
  border-radius: 8px;
  transition: all .15s;
}
.radio-card.active { border-color: var(--red); background: var(--red-50); }
.radio-card .r { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); position: relative; flex-shrink: 0; }
.radio-card.active .r { border-color: var(--red); }
.radio-card.active .r::after { content: ""; position: absolute; inset: 2px; background: var(--red); border-radius: 50%; }
.radio-card .main { flex: 1; }
.radio-card .t { font-size: 13.5px; font-weight: 600; }
.radio-card .sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.radio-card .price-r { font-weight: 700; color: var(--red); }

.order-summary {
  background: #fff; border-radius: var(--radius);
  padding: 20px 22px;
  position: sticky; top: 148px; align-self: start;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .order-summary { background: var(--bg); }
.order-summary h3 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.order-summary .line { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-summary .line:last-of-type { border-bottom: 0; }
.order-summary .line .ph { flex: 0 0 60px; aspect-ratio: 1/1; border-radius: 6px; }
.order-summary .line .n { font-size: 13px; font-weight: 600; line-height: 1.3; }
.order-summary .line .v { color: var(--muted); font-size: 11px; margin-top: 2px; }
.order-summary .line .p { font-weight: 700; margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--red); }
.order-summary .totals { margin-top: 14px; }
.order-summary .totals .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; }
.order-summary .totals .row.total { font-size: 18px; font-weight: 800; padding-top: 10px; border-top: 2px solid var(--line); margin-top: 8px; color: var(--red); }
.order-summary .coupon { display: flex; gap: 6px; margin-top: 14px; }
.order-summary .coupon input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: var(--bg-2); color: var(--ink); }
.order-summary .coupon button { padding: 8px 14px; background: var(--ink); color: #fff; border: 0; border-radius: 6px; font-size: 12.5px; font-weight: 600; }

/* ============ 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 h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; font-weight: 700; }
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 .brand .mark { background: var(--red); color: #fff; width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
footer .desc { font-size: 13px; color: rgba(255,255,255,.65); margin: 14px 0 14px; max-width: 36ch; }
footer .socials { display: flex; gap: 8px; }
footer .socials a {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
}
footer .socials a:hover { background: var(--red); }
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); }
.toast .t-ok { color: var(--ok); }

/* ============ 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, 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, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 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: 12px; 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; }
  .hero-banner .hb-t { font-size: 16px; }
  .pdp-grid { grid-template-columns: 1.2fr 1fr; gap: 16px; }
  .pdp-grid .pdp-summary { grid-column: 1 / -1; }
  .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) */
  .promo-row { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .brands { grid-template-columns: repeat(5, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  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; }
}

@media (max-width: 960px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 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; }
  .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); }
  .blog-grid { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .pdp-grid { grid-template-columns: 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 */
  .cat-banner-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .cat-bn {
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 18px 18px 16px;
  }
  .cat-bn .cb-k { font-size: 18px; }
  .cat-bn .cb-s { font-size: 12px; }
}

/* 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);
    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);
    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);
  }
  .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);
    background: transparent;
  }
  .header-actions .ha:hover {
    background: rgba(221, 51, 51, .08);
  }
  .ha { padding: 6px 7px; }
  .search { height: 40px; padding: 0 10px; }
  .search input { font-size: 13px; padding: 0 8px; }
  .search .s-btn { padding: 0 10px; font-size: 12px; }
  .search .s-btn span, .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, .meganav .cat-btn .chev { 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, 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; }
  .sect-title { font-size: 16px; }
  .sect-sub-inline { display: none; }
  .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; }
  .promo-row { grid-template-columns: 1fr; }
  .promo-row .promo:nth-child(3) { display: flex; }
  .brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .brand-pill { padding: 10px; font-size: 13px; }
  .pdp-gallery { height: 280px; }
  .pdp-card { padding: 14px; }
  .qty-table { display: block; overflow-x: auto; }

  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-banner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  /* Flash sale section: column layout + reset margin-left:auto on viewall btn */
  .flash { flex-direction: column; gap: 10px; padding: 14px 18px; }
  .flash .f-title { font-size: 20px; }
  .flash-viewall { margin-left: 0; align-self: flex-start; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sect-head { flex-wrap: wrap; }
  .sect-viewall { font-size: 12px; }
}

@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; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .ha { padding: 6px 8px; }
  .ha > svg { width: 18px; height: 18px; }
  /* Flash sale compact on small phones */
  .flash {
    padding: 16px 16px 14px;
    gap: 10px;
    border-radius: 20px;
    align-items: stretch;
  }
  .flash .f-title {
    font-size: 17px;
    gap: 6px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.1;
  }
  .flash .f-sub { display: none; }
  .flash .countdown {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .flash .countdown .tag {
    flex: 0 0 100%;
    margin-right: 0;
    font-size: 12px;
    text-align: center;
    opacity: .92;
  }
  .flash .countdown .box { width: 30px; height: 30px; font-size: 14px; border-radius: 6px; }
  .flash .countdown .colon { font-size: 16px; }
  .flash .countdown--full .box { width: 40px; height: 44px; font-size: 13px; }
  .flash .countdown--full .box-label { font-size: 8px; }
  .flash-viewall {
    width: 100%;
    max-width: 220px;
    min-height: 42px;
    margin: 2px auto 0;
    justify-content: center;
    border-radius: 16px;
    padding: 0 16px;
  }
}

/* ============================================================ */
/* ============ 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;
}
.alignleft   { float: left;  margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide   { max-width: 1240px; margin-left: auto; margin-right: auto; }
.alignfull   { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.clearfix::after { content: ""; display: table; clear: both; }

/* 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; }
.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);
  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: 800;
  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); 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); }
.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 */
.hp-pagination-wrap { margin: 24px 0; display: flex; justify-content: center; }
.hp-pagination { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 4px; }
.hp-pagination li a, .hp-pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 500;
  text-decoration: none;
}
[data-theme="dark"] .hp-pagination li a, [data-theme="dark"] .hp-pagination li span { background: var(--bg); }
.hp-pagination li .current { background: var(--red); color: #fff; border-color: var(--red); }
.hp-pagination li a:hover { border-color: var(--red); color: var(--red); }

/* 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; }
.hp-lazy-section__skeleton { padding: 24px; }
.hp-skel { background: linear-gradient(90deg, var(--bg-3) 0%, var(--line-2) 50%, var(--bg-3) 100%); background-size: 200% 100%; animation: hp-shimmer 1.2s infinite; border-radius: 6px; }
@keyframes hp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.hp-skel--title { height: 28px; width: 30%; margin-bottom: 16px; }
.hp-skel--row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hp-skel--card { height: 280px; }
@media (max-width: 900px) { .hp-skel--row { grid-template-columns: repeat(2, 1fr); } }

/* 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); }
.hp-toast--ok { background: var(--ok); }
.hp-toast--err { background: var(--red); }

/* 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) */
body.admin-bar .hp-cart-drawer { top: 32px; }
body.admin-bar .hp-cart-drawer-overlay { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .hp-cart-drawer { top: 46px; }
  body.admin-bar .hp-cart-drawer-overlay { top: 46px; }
}
[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: 800; 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__item {
  display: grid; grid-template-columns: 72px 1fr;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--bg-2);
}
.hp-cart-drawer__item:last-child { border-bottom: 0; }
.hp-cart-drawer__thumb {
  display: block; width: 72px; height: 72px;
  background: var(--bg-2); border-radius: 10px;
  overflow: hidden; padding: 4px;
  border: 1px solid var(--line);
}
.hp-cart-drawer__thumb img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 6px;
}
.hp-cart-drawer__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hp-cart-drawer__name {
  font-weight: 600; font-size: 13.5px; line-height: 1.4;
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-cart-drawer__name:hover { color: var(--red); }
.hp-cart-drawer__price {
  color: var(--red); font-weight: 800; font-size: 14px;
  margin: 2px 0 6px;
}
.hp-cart-drawer__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; }
.hp-cart-drawer__was { display: inline-block; font-size: 11.5px; font-weight: 400; color: var(--muted); text-decoration: line-through; margin-left: 5px; vertical-align: middle; }
.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); }
.hp-cart-drawer__qty > span {
  min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hp-cart-drawer__remove {
  margin-left: auto !important;
  width: 26px; height: 26px;
  border: 0; background: transparent;
  color: var(--muted); cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  transition: background .15s, color .15s;
}
.hp-cart-drawer__remove:hover { background: rgba(221, 51, 51, .08); color: var(--red); }

/* 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 {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px;
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 4px;
}
.hp-cart-drawer__totals span { color: var(--muted); font-weight: 500; }
.hp-cart-drawer__totals strong { font-size: 18px; font-weight: 800; color: var(--red); }
.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); 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--block { width: 100%; }
.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); }
.hp-cart-drawer-footer .hp-btn--primary {
  background: linear-gradient(135deg, var(--red), #b82525);
  box-shadow: 0 6px 16px rgba(221, 51, 51, .28);
  color: #fff !important; border: 0;
}
.hp-cart-drawer-footer .hp-btn--primary:hover { box-shadow: 0 8px 22px rgba(221, 51, 51, .4); }

/* 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 { text-align: center; padding: 40px 20px; }
.hp-empty-note { color: var(--muted); font-size: 13px; padding: 12px 0; }

/* Section title (theme version) */
.hp-section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; gap: 16px; }
.hp-section-title__left { display: flex; align-items: center; gap: 12px; }
.hp-section-title__icon { width: 36px; height: 36px; border-radius: 8px; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.hp-section-title__eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.hp-section-title__title { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.015em; }
.hp-section-title__subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.hp-section-title__link { font-size: 13px; color: var(--red); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* 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); }
.hp-filter__title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }

/* Widget area generic */
.hp-widget { background: #fff; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; border: 1px solid var(--line); }
[data-theme="dark"] .hp-widget { background: var(--bg); }
.hp-widget__title { font-size: 14px; font-weight: 700; margin: 0 0 10px; }

/* 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); border: 1px solid var(--red); }
.hp-btn--dark  { background: var(--ink); color: #fff; }

/* Product card extra slots */
.hp-card__badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; z-index: 2; }
.hp-badge { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.hp-badge--new  { background: var(--ok); }
.hp-badge--sale { background: var(--warn); color: var(--ink); }
.hp-badge--hot  { background: var(--red); }
.hp-badge--limited { background: var(--ink); }

/* 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 */
.hp-sticky-mobile { display: none; }
@media (max-width: 767px) {
  .hp-sticky-mobile {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--line);
    z-index: 90; padding: 6px 0; box-shadow: 0 -4px 12px rgba(0,0,0,.06);
  }
  [data-theme="dark"] .hp-sticky-mobile { background: var(--bg); }
  .hp-sticky-mobile a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11px; color: var(--ink-2); padding: 6px 4px; text-decoration: none;
  }
  .hp-sticky-mobile a svg { width: 22px; height: 22px; color: var(--red); }
  .hp-sticky-mobile a.active { color: var(--red); }
  body.hp-body { padding-bottom: 60px; }
}

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

/* ============ POST CARD (blog) ============ */
.hp-post-card { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
[data-theme="dark"] .hp-post-card { background: var(--bg); }
.hp-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hp-post-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.hp-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hp-post-card:hover .hp-post-card__img { transform: scale(1.04); }
.hp-post-card__body { padding: 14px 16px 16px; }
.hp-post-card__cat { display: inline-block; font-size: 11px; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.hp-post-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
.hp-post-card__title a { color: var(--ink); }
.hp-post-card__title a:hover { color: var(--red); }
.hp-post-card__meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.hp-post-card__meta .sep { opacity: .5; }
.hp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .hp-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .hp-blog-grid { grid-template-columns: 1fr; } }

/* ============ PROMO ROW ============ */
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .promo-row { grid-template-columns: 1fr; } }
.promo {
  background: #fff; border-radius: var(--radius); padding: 16px 18px;
  border: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start;
  transition: border-color .2s, transform .2s;
}
[data-theme="dark"] .promo { background: var(--bg); }
.promo:hover { border-color: var(--red); transform: translateY(-2px); }
.promo__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--red-50); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.promo strong { font-size: 14px; }
.promo p { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.promo.is-phone { background: linear-gradient(135deg, var(--red), var(--red-600)); color: #fff; border: 0; }
.promo.is-phone .promo__icon { background: rgba(255,255,255,.18); color: #fff; }
.promo.is-phone p { color: rgba(255,255,255,.85); }
.promo__phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============ HTML block + spacer ============ */
.hp-html-block { padding: 8px 0; }
.hp-spacer { width: 100%; }

/* ============ Layout helper grids cho ACF ============ */
.sect-sub-inline { display: inline-block; }

/* ============ Post detail (single.php) ============ */
.hp-post {
  background: #fff; border-radius: var(--radius-lg);
  padding: 28px 32px; border: 1px solid var(--line);
}
[data-theme="dark"] .hp-post { background: var(--bg); }
.hp-post h1 { font-size: 32px; font-weight: 800; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 20px; text-align: center; }
.hp-post .hp-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hp-post .hp-post-meta a { color: var(--ink-2); font-weight: 500; }
.hp-post .hp-post-meta img.avatar { width: 28px; height: 28px; border-radius: 50%; }
.hp-post .hp-post-content { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.hp-post .hp-post-content p { margin: 0 0 1em; }
.hp-post .hp-post-content h2 { font-size: 24px; font-weight: 700; margin: 32px 0 12px; letter-spacing: -.01em; }
.hp-post .hp-post-content h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.hp-post .hp-post-content img { border-radius: var(--radius); margin: 16px 0; }
.hp-post .hp-post-content blockquote { border-left: 4px solid var(--red); padding: 6px 0 6px 18px; color: var(--muted); font-style: italic; margin: 16px 0; }
.hp-post .hp-post-content code { background: var(--bg-2); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.hp-post .hp-post-content pre { background: var(--ink); color: #f5f7fa; border-radius: 8px; padding: 16px; overflow-x: auto; margin: 16px 0; }
.hp-post .hp-post-content pre code { background: transparent; color: inherit; padding: 0; }

/* 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 ô. */
.hp-post-content table,
.desc-main__inner table,
.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;
}
.hp-post-content th, .hp-post-content td,
.desc-main__inner th, .desc-main__inner td,
.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). */
.hp-post-content tr th:last-child, .hp-post-content tr td:last-child,
.desc-main__inner tr th:last-child, .desc-main__inner tr td:last-child,
.article-content tr th:last-child, .article-content tr td:last-child { border-right: 0; }
.hp-post-content tr:last-child td,
.desc-main__inner tr:last-child td,
.article-content tr:last-child td { border-bottom: 0; }
/* Header row */
.hp-post-content thead th, .hp-post-content thead td, .hp-post-content tr:first-child th,
.desc-main__inner thead th, .desc-main__inner thead td, .desc-main__inner tr:first-child th,
.article-content thead th, .article-content thead td, .article-content tr:first-child th { background: var(--bg-2); font-weight: 700; color: var(--ink); }
/* Zebra */
.hp-post-content tbody tr:nth-child(even) td,
.desc-main__inner tbody tr:nth-child(even) td,
.article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-2) 45%, transparent); }
/* Mobile: scroll ngang (mất bo góc khi scroll — chấp nhận). */
@media (max-width: 768px) {
	.hp-post-content table,
	.article-content table,
	.desc-main__inner 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,
.desc-main__inner :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;
}
.article-content pre,
.desc-main__inner pre {
	position: relative;
	background: #0f172a;
	color: #e2e8f0;
	border: 1px solid #1e293b;
	border-radius: 12px;
	padding: 18px 20px;
	margin: 18px 0;
	overflow-x: auto;
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.65;
	tab-size: 2;
	box-shadow: 0 2px 12px rgba(15,23,42,.18);
}
.article-content pre code,
.desc-main__inner pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	white-space: pre;
}
/* Dải màu nhẹ trên đầu pre (kiểu code editor). */
.article-content pre::before,
.desc-main__inner pre::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, #1b64f2, #7c3aed, #dc2626);
	border-radius: 12px 12px 0 0;
}
[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 { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 22px; overflow: hidden; }
.hp-toc__head { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; font-weight: 800; font-size: 15px; color: var(--ink); font-family: inherit; text-align: left; }
.hp-toc__head > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.hp-toc__head i.fa-list-ul { color: var(--ink); }
.hp-toc__chev { transition: transform .25s ease; font-size: 12px; color: var(--muted); }
.hp-toc.is-open .hp-toc__chev { transform: rotate(180deg); }
.hp-toc__list { margin: 0; padding: 2px 20px 16px 48px; }
.hp-toc__list li { padding-left: 4px; }
.hp-toc__item { margin: 6px 0; line-height: 1.5; }
.hp-toc__item--sub { margin-left: 18px; list-style: circle; font-size: 13.5px; }
.hp-toc__list a { color: var(--ink-2); transition: color .15s; }
.hp-toc__list a:hover { color: var(--red); text-decoration: underline; }
/* offset khi cuộn tới heading (tránh bị sticky header che) */
.desc-main__inner h2[id], .desc-main__inner h3[id], .desc-main__inner h4[id] { scroll-margin-top: 90px; }

/* FAB ToC nổi — hiện khi cuộn qua box; click mở panel mục lục (desktop + mobile). */
.hp-toc-fab { position: fixed; left: 18px; bottom: 22px; z-index: 9998; }
.hp-toc-fab__btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.22); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.hp-toc-fab__btn:hover { transform: scale(1.08); }
.hp-toc-fab__panel { position: absolute; left: 0; bottom: 60px; width: min(300px, 78vw); max-height: 60vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 14px 16px; }
.hp-toc-fab__title { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-bottom: 8px; }
.hp-toc-fab__list { padding-left: 18px; margin: 0; }
@media (max-width: 1199px) { .hp-toc-fab { bottom: 100px; } } /* tránh đè dock liên hệ mobile */
@media (min-width: 1200px) { .hp-toc-fab { display: none !important; } } /* desktop đã có box mục lục inline → ẩn nút nổi */

.hp-code-block { position: relative; }
.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 ============ */
.pg-hero { background: var(--bg-2); border-radius: 12px; padding: 22px 26px; margin-bottom: 28px; border: 1px solid var(--line); }
.pg-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 6px; }
.pg-hero h2 { margin: 0 0 6px !important; font-size: 20px !important; color: var(--ink); }
.pg-hero p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.pg-section { margin-bottom: 28px; }
.pg-sh { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.pg-sh-ic { width: 32px; height: 32px; border-radius: 6px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; line-height: 1; }
[data-theme="dark"] .pg-sh-ic { background: var(--bg-3); }
.pg-sh h2, .pg-sh h3 { margin: 0 !important; font-size: 17px !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }

.pg-box { background: var(--bg-2); border-radius: 10px; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--line); }
.pg-box.note { border-left: 3px solid var(--ink-2); border-radius: 0 10px 10px 0; }
.pg-box p:last-child, .pg-box ul:last-child { margin-bottom: 0; }

.pg-steps { list-style: none; padding: 0; margin: 0; counter-reset: pgstep; }
.pg-steps li { counter-increment: pgstep; display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.pg-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.pg-steps li::before { content: counter(pgstep); min-width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.pg-steps li strong { display: block; margin-bottom: 2px; }

.pg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pg-card { background: var(--bg-2); border-radius: 10px; padding: 16px 18px; border: 1px solid var(--line); }
.pg-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 8px; }

.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pg-table thead tr { background: var(--ink); color: #fff; }
.pg-table thead th { padding: 10px 14px; text-align: left; font-weight: 600; }
.pg-table tbody tr:nth-child(even) { background: var(--bg-2); }
.pg-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
[data-theme="dark"] .pg-table thead tr { background: var(--bg-3); }

.pg-contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pg-contact-item { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border-radius: 10px; padding: 12px 16px; flex: 1 1 200px; border: 1px solid var(--line); }
.pg-contact-item .pg-ci-ic { width: 30px; height: 30px; border-radius: 6px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
[data-theme="dark"] .pg-contact-item .pg-ci-ic { background: var(--bg-3); }
.pg-contact-item .pg-ci-txt { font-size: 13px; }
.pg-contact-item .pg-ci-txt strong { display: block; font-size: 14px; }

.pg-faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.pg-faq-q { font-weight: 600; font-size: 15px; padding: 14px 18px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg-2); }
.pg-faq-q::after { content: "+"; font-size: 20px; color: var(--ink-2); font-weight: 300; flex-shrink: 0; }
.pg-faq-a { padding: 12px 18px 16px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); border-top: 1px solid var(--line); background: var(--bg); }

@media (max-width: 640px) {
  .pg-grid2 { grid-template-columns: 1fr; }
  .pg-table { font-size: 13px; }
  .pg-table thead th, .pg-table tbody td { padding: 8px 10px; }
  .pg-sh h2, .pg-sh h3 { font-size: 16px; }
}

/* ============ Author + 404 ============ */
.hp-author {
  background: #fff; border-radius: var(--radius-lg); padding: 28px 32px;
  border: 1px solid var(--line); margin-bottom: 20px;
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
}
[data-theme="dark"] .hp-author { background: var(--bg); }
.hp-author__avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.hp-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hp-author h1 { font-size: 26px; margin: 0 0 4px; font-weight: 800; }
.hp-author__role { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.hp-author__bio { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 768px) { .hp-author { grid-template-columns: 1fr; text-align: center; } .hp-author__avatar { margin: 0 auto; } }

.hp-404 { text-align: center; padding: 64px 20px; }
.hp-404 h1 { font-size: 72px; font-weight: 900; color: var(--red); margin: 0 0 12px; letter-spacing: -.03em; }
.hp-404 p { color: var(--muted); margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ============ Search + Empty ============ */
.hp-search-form { display: flex; gap: 4px; max-width: 480px; margin: 0 auto; }
.hp-search-form input { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.hp-search-form button { padding: 12px 20px; background: var(--red); color: #fff; border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; }

/* ============ 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); }
.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); }
.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; }
.footer-logo-svg { display: block; height: 66px; width: auto; max-width: 190px; opacity: .95; transition: opacity .15s ease; }
.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); 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 0 24px; }
  .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) {
  .footer-grid--4 { grid-template-columns: 1fr; gap: 26px; }
  .footer-col__title { font-size: 12.5px; }
}

/* ============ Hero edge cases ============ */
.hero-banner__img { z-index: 0; }
.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); }
.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); 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) ============ */
.cat-banner-row.is-compact { gap: 12px; grid-template-columns: repeat(4, 1fr); }
.cat-banner-row.is-compact .cat-bn { padding: 16px 18px 14px; min-height: 100px; border-radius: var(--radius); }
.cat-banner-row.is-compact .cat-bn .cb-k { font-size: 17px; }
.cat-banner-row.is-compact .cat-bn .cb-s { font-size: 11.5px; }
.cat-banner-row.is-compact .cat-bn .cb-go { font-size: 11px; padding: 5px 10px; margin-top: 8px; }
@media (max-width: 900px) {
  .cat-banner-row.is-compact { grid-template-columns: repeat(2, 1fr); }
}

/* ============ BRAND SLIDE (marquee infinite) ============ */
.hp-brand-slide {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hp-brand-slide__track {
  display: inline-flex;
  gap: 16px;
  animation: hp-brand-marquee 28s linear infinite;
  white-space: nowrap;
  padding: 4px 0;
  will-change: transform;
}
.hp-brand-slide:hover .hp-brand-slide__track { animation-play-state: paused; }
@keyframes hp-brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hp-brand-slide__item {
  flex: 0 0 auto;
  min-width: 160px;
  height: 60px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  transition: border-color .2s, color .2s, transform .2s;
}
/* 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); }
.hp-brand-slide__item:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
/* 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. */
.hp-brand-slide__item img { width: auto; height: auto; max-width: 116px; max-height: 34px; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hp-brand-slide__track { animation-duration: 90s; }
}

/* ============ PRODUCT GRID 5-col override ============ */
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .grid-5 { grid-template-columns: repeat(2, 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 *,
.promo,
.promo *,
.brand-tag,
.brand-tag:hover,
.brand-pill,
.hp-brand-slide__item,
.hp-brand-slide__item *,
.card a,
.card .name a,
.hp-post-card a,
.hp-post-card__title a,
.footer-col__menu a,
.footer-bottom-nav a,
.topbar a,
.topbar a:hover,
.meganav a,
.meganav a:hover,
.ha,
.ha *,
.logo,
.logo *,
.sect-viewall,
.flash-viewall,
.sect-title,
.sect-title *,
.hp-section-title__link,
.hb-link,
.hb-link *,
.hb-t,
.hb-k,
.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),
.hp-post-card__title a,
.footer-col__menu a,
.footer-bottom-nav a,
.topbar a,
.meganav a,
.ha a,
.logo a,
a.sect-viewall,
a.flash-viewall,
.hp-section-title__link,
a.hb-link { 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) */
.hp-post-content a { text-decoration: underline; }
.hp-post-content a:hover { color: var(--red); }


/* ============ SECTION HEADER (override design — to + đẹp hơn) ============ */
.sect { padding: 28px 16px 24px; }
.sect-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
[data-theme="dark"] .sect-head { border-bottom-color: var(--line-2); }
.sect-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; gap: 16px; align-items: center; }
.sect-title .tt-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--red), #ff6b00);
  color: #fff;
  box-shadow: 0 4px 12px rgba(221,51,51,.25);
  flex-shrink: 0;
}
.sect-title .tt-ico svg { width: 22px; height: 22px; }
.sect-title > span { display: flex; flex-direction: column; line-height: 1.15; }
.sect-title .hp-section-title__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.sect-title .sect-sub-inline {
  display: inline-block; margin-top: 4px;
  font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0;
}
.sect-viewall {
  font-size: 13px; font-weight: 600; color: var(--red);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--red-50);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sect-viewall:hover { background: var(--red); color: #fff; }
.sect-viewall svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .sect { padding: 20px 16px 20px 16px; }
  .sect-head { flex-wrap: wrap; gap: 10px; }
  .sect-title { font-size: 18px; gap: 10px; }
  .sect-title .tt-ico { width: 36px; height: 36px; }
  .sect-viewall { margin-left: auto; }
  .card .name { -webkit-line-clamp: 3; min-height: 49px; }
}


/* ============ CARD PRICE REFINE ============ */
.card .prices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.card .price-now { font-size: 16px; font-weight: 800; color: var(--red); line-height: 1.2; }
.card .price-now ins, .card .price-now > span { text-decoration: none; }
.card .price-now del, .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 { font-size: 16px; font-weight: 800; color: var(--red); display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.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); }
.card .hp-price-from { font-size: 16px; }
.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 đè. */

.cat-bn, .cat-bn:hover, .cat-bn:focus, .cat-bn:active, .cat-bn:visited,
.cat-bn *,
.cat-bn .cb-k, .cat-bn .cb-s, .cat-bn .cb-go,

.hero-banner, .hero-banner:hover, .hero-banner:focus, .hero-banner:active, .hero-banner:visited,
.hero-banner *,
.hero-banner .hb-k, .hero-banner .hb-t, .hero-banner .hb-link,

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

.promo, .promo:hover, .promo *,
.promo .p-k, .promo .p-t, .promo .p-link,

.flash, .flash *,
.flash .f-title, .flash .f-sub, .flash-viewall,
.flash .countdown .box, .flash .countdown .tag,

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

.hp-badge, .hp-badge--new, .hp-badge--hot, .hp-badge--sale, .hp-badge--limited,

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

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

.hp-checkout__step-num,

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

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

.hp-cart-drawer-overlay,

.hp-sticky-mobile a.active,

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

/* Discount pill = white bg + RED text — phải khác */
.discount-pill {
  color: var(--red) !important;
}

/* Sale stock progress bar text */
.sale-stock .bar { color: transparent; }

/* Restore màu đặc biệt (vàng/yellow trong hero) */
.hero-main h1 .yellow,
.hero-main .hm-price .now {
  color: var(--yellow) !important;
}

/* Restore old price strikethrough opacity */
.hero-main .hm-price .old {
  color: rgba(255,255,255,.65) !important;
}

/* 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>) */
.brand-tag {
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
}
.brand-tag:hover {
  color: var(--red) !important;
  border-color: var(--red) !important;
}

/* Tương tự cho brand-pill marquee + hp-brand-slide__item */
.brand-pill,
.hp-brand-slide__item {
  border: 1px solid var(--line) !important;
}
.brand-pill:hover,
.hp-brand-slide__item:hover {
  border-color: var(--red) !important;
}

/* Hero sidebar cat-item KHÔNG phải dark → giữ ink */
.hero-sidebar .cat-item,
.hero-sidebar .cat-item:hover,
.hero-sidebar .cat-item *,
.hero-sidebar .sb-divider {
  color: var(--ink) !important;
}
.hero-sidebar .cat-item:hover {
  color: var(--red) !important;
}
.hero-sidebar .cat-item .ci-icon,
.hero-sidebar .cat-item .ci-icon svg,
.hero-sidebar .cat-item .ci-icon svg * { color: var(--red) !important; }
.hero-sidebar .cat-item:hover .ci-icon,
.hero-sidebar .cat-item:hover .ci-icon svg,
.hero-sidebar .cat-item:hover .ci-icon svg * { color: var(--red) !important; }

/* 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;
}
.card .name a { color: var(--ink) !important; }
.card .name a:hover { color: var(--red) !important; }
.card .price-now { color: var(--red) !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: 800 !important;
  color: var(--red) !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;
}

.card .price-now del,
.card .price-now del * {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-decoration: line-through !important;
  opacity: 1 !important;
  order: -1 !important;     /* đẩy old price LÊN TRƯỚC new price */
  display: inline-block !important;
}

.card .price-now ins,
.card .price-now ins * {
  text-decoration: none !important;
  background: transparent !important;
  color: var(--red) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

/* Giá từ — eyebrow xám nhỏ + price đỏ */
.card .hp-price-from {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
.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) !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; }
  .card .price-now del { font-size: 11px !important; }
  .card .hp-price-from { font-size: 14px !important; }
}


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

.card .price-now del,
.card .price-now del * { font-size: 10.5px !important; }

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

@media (max-width: 1200px) {
  .card .price-now,
  .card .hp-price-from,
  .card .hp-price-contact { font-size: 13px !important; }
  .card .price-now del { font-size: 10px !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: 800 !important;
  color: var(--red) !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) */
.hp-brand-slide__track { padding: 10px 0 !important; }

/* 2. Card price — 16.5px (theo yêu cầu anh Phát) */
.card .price-now,
.card .price-now ins,
.card .price-now ins *,
.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,
.card .price-now del,
.card .price-now del * { 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 ins,
  .card .price-now.hp-price-contact { font-size: 15px !important; }
  .card .price-old,
  .card .price-now del { 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) */
.admin-bar .header { top: 32px !important; }
.admin-bar .meganav { top: 108px !important; } /* 32 + 76 (header height) */
.admin-bar .pdp-info,
.admin-bar .pdp-summary { top: 180px !important; } /* 32 + 148 */
@media (max-width: 782px) {
  .admin-bar .header { top: 46px !important; }
  .admin-bar .meganav { top: 122px !important; }
}
@media (max-width: 600px) {
  .admin-bar .header { top: 0 !important; }
  .admin-bar .meganav { top: 76px !important; }
}

/* 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,
.hp-post-card,
.press-card { overflow: visible !important; }
.card .media { overflow: hidden !important; border-radius: 8px !important; }
.hp-post-card__media { overflow: hidden !important; border-radius: var(--radius) var(--radius) 0 0 !important; }
.press-card__img { overflow: hidden !important; }

/* 5. Blog grid 4 cột × 2 hàng (Bản tin công nghệ 8 bài) */
.hp-blog-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1200px) { .hp-blog-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 900px)  { .hp-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px)  { .hp-blog-grid { grid-template-columns: 1fr !important; } }


/* =========================================================== */
/* === TRUYỀN THÔNG (Báo chí nói về Hưng Phát) === */
/* =========================================================== */

.press-sect { margin-bottom: 28px; }
.press-head { padding: 0 20px; max-width: 1280px; margin: 0 auto 16px; }
.press-headline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  border: 1px solid var(--line);
}
.press-eyebrow {
  font-size: 16px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.press-sep { color: var(--line); font-weight: 300; font-size: 18px; }
.press-sub { font-size: 14px; color: var(--ink-2); font-weight: 500; }
[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); }

.press-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 1080px) { .press-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .press-row { grid-template-columns: 1fr; } }

.press-card {
  display: flex;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none !important;
  color: inherit;
  min-height: 130px;
  aspect-ratio: 16 / 9;
}
.press-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.08);
}

.press-card__img {
  width: 45%;
  min-width: 130px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.press-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.press-card__body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.press-card__title {
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink) !important;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.press-card__logo {
  max-width: 100px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  align-self: flex-start;
}

[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); }

@media (max-width: 600px) {
  .press-card { aspect-ratio: auto; min-height: 120px; }
  .press-card__title { font-size: 13px; -webkit-line-clamp: 3; }
}

/* ============================================================
   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 */
body.admin-bar .hp-mnav { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .hp-mnav { top: 46px; }
}

/* 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); }
.hp-mnav__close svg { width: 18px; height: 18px; }

/* Drawer search */
.hp-mnav__search { padding: 12px 16px 8px; border-bottom: 1px solid var(--line); }
.hp-mnav__search .search { height: 40px; width: 100%; }
.hp-mnav__search .s-btn { display: none; }

/* 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; }

.hp-mnav__group { padding: 2px 0; }

.hp-mnav__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ink-3);
	padding: 10px 16px 10px 12px;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}
.hp-mnav__group-head:hover { color: var(--red); }
.hp-mnav__group-head a { color: inherit; text-decoration: none; }
.hp-mnav__chevron {
	flex-shrink: 0;
	transition: transform .2s ease;
	color: var(--muted);
}
.hp-mnav__group.is-open .hp-mnav__chevron { transform: rotate(180deg); color: var(--red); }

.hp-mnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}
.hp-mnav__group.is-open .hp-mnav__list {
	max-height: 2000px; /* đủ chứa list dài nhất; transition tới max-height thực */
}
/* Pages section không có group-head → list luôn hiện */
.hp-mnav__section--pages .hp-mnav__list {
	max-height: none;
}
.hp-mnav__list--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.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); outline: none; }

.hp-mnav__link--sm {
	font-size: 13px;
	padding: 7px 12px;
	color: var(--ink-2);
}

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

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

/* Drawer footer */
.hp-mnav__foot {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	flex-shrink: 0;
}
.hp-mnav__foot-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s;
	white-space: nowrap;
}
.hp-mnav__foot-btn:hover { opacity: .85; }
.hp-mnav__foot-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.hp-mnav__foot-btn--call { background: var(--red); color: #fff; }
.hp-mnav__foot-btn--zalo { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════
   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 */
  .sect-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .sect-links a { flex-shrink: 0; }

  /* 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-title { font-size: 15px; }
  .sect { padding: 16px 5px; }

  /* Flash sale */
  .flash-banner h2 { font-size: 18px; }
  .cdown-box { min-width: 44px; }
  .cdown-n { font-size: 20px; }

  /* 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; }
  .search { height: 36px; padding: 0 8px; }
  .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 { border-bottom: 1px solid var(--line); }
  .filter-group h4 { cursor: pointer; }
}

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

@media (max-width: 380px) {
  .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);
    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);
    box-shadow: none;
  }

  .header-actions .hp-search-toggle,
  .header-actions a[aria-label="Tài khoản"] {
    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;
  }

  .sect-head {
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .sect-title {
    font-size: 14px;
    gap: 8px;
    min-width: 0;
  }

  .sect-title .tt-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .sect-viewall {
    margin-left: 0;
    padding: 7px 12px;
    font-size: 11.5px;
  }

  .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 ins,
  .card .price-now.hp-price-contact,
  .card .hp-price-from,
  .card .hp-price-contact {
    font-size: 12px !important;
  }

  .card .price-old,
  .card .price-now del {
    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;
  }

  .hp-sticky-mobile {
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
}

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

@media (max-width: 320px) {
  /* Header — ẩn search (drawer thay thế), simplify grid */
  .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);
    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);
    box-shadow: none;
  }
  .header-actions .hp-search-toggle,
  .header-actions a[aria-label="Tài khoản"] {
    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;
  }
  .sect-head {
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .sect-title {
    font-size: 13px;
    gap: 8px;
    min-width: 0;
  }
  .sect-title .tt-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .sect-viewall {
    margin-left: 0;
    padding: 7px 12px;
    font-size: 11.5px;
  }

  /* 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 ins,
  .card .price-now.hp-price-contact,
  .card .hp-price-from,
  .card .hp-price-contact {
    font-size: 12px !important;
  }
  .card .price-old,
  .card .price-now del {
    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-title { font-size: 14px; }
  .sect { padding: 16px 5px; }

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

  /* Sticky mobile nav */
  .hp-sticky-mobile {
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
  .hp-sticky-mobile a { font-size: 10px; padding: 5px 3px; }
  .hp-sticky-mobile a svg { width: 20px; height: 20px; }

  /* 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;
  }
}

#hp-mobile-dock {
  box-sizing: border-box;
  width: min(calc(100vw - 24px), 440px) !important;
  max-width: 440px !important;
}

@media (max-width: 767px) {
  #hp-mobile-dock {
    bottom: 16px !important;
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    padding: 14px 18px !important;
    gap: 12px !important;
    height: 76px !important;
    border-radius: 20px !important;
  }

  #hp-mobile-dock > a {
    width: 50px !important;
    height: 50px !important;
  }

  #hp-mobile-dock > a:first-child,
  #hp-mobile-dock > a:last-child {
    width: 54px !important;
    height: 54px !important;
  }
}

@media (max-width: 360px) {
  #hp-mobile-dock {
    bottom: 12px !important;
    width: calc(100vw - 16px) !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    height: 64px !important;
    border-radius: 18px !important;
  }

  #hp-mobile-dock > a {
    width: 42px !important;
    height: 42px !important;
  }

  #hp-mobile-dock > a:first-child,
  #hp-mobile-dock > a:last-child {
    width: 46px !important;
    height: 46px !important;
  }
}

body.hp-mnav--open #hp-mobile-dock {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(8px) scale(.96) !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_wrapper img,
.gt-current-wrapper img,
[data-gt-lang] img {
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  display: inline-block;
}
/* 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: #ff5050;
  border-color: #ff5050;
}
/* .card .price-now ins * { color: var(--red) !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: #ff5050 !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.
 * ============================================================ */
.hp-post-content h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--ink); letter-spacing: -.005em; }
.desc-main__inner h2,
.desc-main__inner h3,
.desc-main__inner h4 { color: var(--ink); font-weight: 700; line-height: 1.3; scroll-margin-top: 90px; }
.desc-main__inner h2 {
	font-size: 18px; font-weight: 800; line-height: 1.45;
	text-transform: uppercase; letter-spacing: .015em;
	margin: 30px 0 12px; padding-left: 12px;
	border-left: 4px solid var(--red);
	color: var(--red); /* anh Phát chọn: H2 mô tả SP màu đỏ brand */
	transition: padding-left .2s ease;
}
/* Hover: thụt accent vào nhẹ (dùng padding để không đụng transform của reveal) */
.desc-main__inner h2:hover { padding-left: 17px; }
.desc-main__inner h3 { font-size: 17px; margin: 22px 0 10px; }
.desc-main__inner h4 { font-size: 15.5px; margin: 18px 0 8px; }
/* Dark mode: chữ + accent đỏ sáng cho nền tối */
[data-theme="dark"] .desc-main__inner h2 { color: #ff5050; border-left-color: #ff5050; }

/* Blog post H2 — màu KHÁC sản phẩm (anh Phát chọn: xanh dương) */
.hp-post .hp-post-content h2 { color: #2563eb; }
[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) {
	body.hp-anim-ready .desc-main__inner h2,
	body.hp-anim-ready .pdp-related__heading,
	body.hp-anim-ready .desc-sb-title {
		opacity: 0; transform: translateY(10px);
		transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1), padding-left .2s ease;
	}
	body.hp-anim-ready .desc-main__inner h2.hp-in,
	body.hp-anim-ready .pdp-related__heading.hp-in,
	body.hp-anim-ready .desc-sb-title.hp-in { opacity: 1; transform: none; }
	/* Accent bar trượt vào nhẹ */
	body.hp-anim-ready .desc-main__inner h2 { border-left-color: transparent; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1), border-left-color .5s ease .15s, padding-left .2s ease; }
	body.hp-anim-ready .desc-main__inner h2.hp-in { border-left-color: var(--red); }
	[data-theme="dark"] body.hp-anim-ready .desc-main__inner h2.hp-in { border-left-color: #ff5050; }
}
.desc-main__inner h2:first-child,
.desc-main__inner h3:first-child,
.desc-main__inner h4:first-child { margin-top: 0; }
.desc-main__inner p { margin: 0 0 1em; line-height: 1.7; }
.desc-main__inner ul,
.desc-main__inner ol { margin: 0 0 1em; padding-left: 1.4em; line-height: 1.7; }

/* ============================================================
 * FAQ Accordion — shortcode [accordion]/[accordion-item] (Flatsome-compat)
 * Dùng <details>/<summary> native: không cần JS, accessible, SEO-friendly.
 * ============================================================ */
.hp-accordion { margin: 24px 0; }
.hp-accordion__title { font-size: 20px; font-weight: 800; margin: 0 0 14px; color: var(--ink); letter-spacing: -.01em; }
.hp-accordion__item {
	border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px;
	background: var(--bg); overflow: hidden;
}
.hp-accordion__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px;
	color: var(--ink); list-style: none; transition: background .15s ease, color .15s ease;
}
.hp-accordion__head::-webkit-details-marker { display: none; }
.hp-accordion__head:hover { background: var(--bg-2); }
.hp-accordion__q { flex: 1; min-width: 0; }
.hp-accordion__chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s ease, color .15s ease; }
.hp-accordion__item[open] > .hp-accordion__head { color: var(--red); }
.hp-accordion__item[open] > .hp-accordion__head .hp-accordion__chevron { transform: rotate(180deg); color: var(--red); }
.hp-accordion__panel { padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.hp-accordion__panel p { margin: 0 0 .6em; }
.hp-accordion__panel p:last-child { margin-bottom: 0; }
.hp-accordion__panel p:empty { display: none; }

/* 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: #ff5050; }


[data-hp-zoom]{cursor:zoom-in}

/* 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). */
.hp-lb {
  position: fixed; inset: 0; z-index: 100020;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .24s ease;
}
.hp-lb.hp-lb--visible { opacity: 1; }
.hp-lb__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88); backdrop-filter: blur(4px);
}
.hp-lb__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  max-width: 95vw; max-height: 95vh;
}
.hp-lb__img-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hp-lb__img {
  display: block;
  max-width: min(92vw, 1200px); max-height: 90vh;
  border-radius: 10px; object-fit: contain;
  transition: opacity .18s ease;
  background: #111;
}
.hp-lb__close {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer; z-index: 2;
  background: rgba(255,255,255,.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hp-lb__close:hover { background: rgba(255,255,255,.3); }
.hp-lb__arrow {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 32px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; user-select: none;
}
.hp-lb__arrow:hover { background: rgba(255,255,255,.3); }
.hp-lb__counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; padding: 4px 14px; border-radius: 20px;
}
.hp-lb__spinner {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
}
.hp-lb__spinner::after {
  content: ''; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: lb-spin .7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

body.hp-lb--open { overflow: hidden; }

@media (max-width: 600px) {
  .hp-lb__arrow { width: 38px; height: 38px; font-size: 24px; }
  .hp-lb__img { max-width: 98vw; max-height: 85vh; border-radius: 6px; }
  .hp-lb__inner { gap: 6px; }
}