/* H&H Nutrition — theo đúng bản thiết kế thật (Trang chu HH Nutrition v3.dc.html) */
:root {
  /* --bg đổi thành #eef4ee (mint) khớp Trang chu HH Nutrition.dc.html v1 — bản v1 dùng
     var(--color-bg) này làm nền TOÀN trang chủ, khác quyết định cũ (nền trắng theo v3, nay đã đổi
     sang bám v1 theo yêu cầu user 2026-09-15). Các trang phụ vẫn tự override qua .hhn-page-shell
     nên không bị ảnh hưởng gì thêm. */
  --bg: #eef4ee;
  --bg-elev: #FFFFFF;
  --line: #eceef3;
  --line-2: #eceef3;      /* dùng bởi contact_form_html() (core/helpers.php) — thiếu token này thì viền input mất hẳn (không fallback) */
  --text: #1e2a1e;
  --text-dim: #4A5C54;
  --text-mute: #5A6B64;
  --accent: #1f8a4c;      /* --blue trong bản thiết kế */
  --accent-rgb: 31, 138, 76;
  --accent-2: #1f6b3f;    /* --indigo trong bản thiết kế */
  --coral: #a67c3d;
  --gold: #c9a227;
  --cream: #f3ede3;
  --font-sans: 'Nunito', system-ui, sans-serif;
  --font-serif: 'Nunito', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* ===== Biến gốc của các file .dc.html "trang phụ" (chi tiết/danh sách sản phẩm, giới thiệu,
     liên hệ, tin tức...) — KHÁC bộ biến ở trên (dùng riêng cho Trang chu HH Nutrition v3.dc.html).
     Giữ nguyên tên + giá trị y hệt file mẫu để HTML copy trực tiếp từ .dc.html chạy đúng luôn,
     không cần dịch lại từng thuộc tính bằng tay (tránh sai lệch nhỏ đã gặp nhiều lần). */
  --color-bg: #eef4ee;
  --color-surface: rgba(255,255,255,0.6);
  --color-text: #1e2a1e;
  --color-accent: #1f8a4c;
  --color-accent-2: #1f8a4c;
  --color-accent-100: #e8f6ee;
  --color-accent-200: #c7ecd6;
  --color-accent-300: #97dab3;
  --color-accent-400: #5cbd85;
  --color-accent-500: #2f9d5f;
  --color-accent-600: #197a41;
  --color-accent-700: #135f33;
  --color-accent-800: #0e4726;
  --color-accent-900: #0a301a;
  --color-divider: #e7ebe3;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(20,60,40,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-card-hover: 0 16px 44px rgba(20,60,40,0.16), inset 0 1px 0 rgba(255,255,255,0.7);
  --glass-blur: blur(22px);
}

* { box-sizing: border-box; }
/* <button>/<input>/<select>/<textarea> mặc định KHÔNG kế thừa font trang (trình duyệt tự cho font
   hệ điều hành) trừ khi reset — thiếu dòng này khiến "Thêm vào giỏ" và mọi nút khác toàn site hiện
   sai font (không phải Nunito), user phát hiện 2026-09-15. */
button, input, select, textarea { font-family: inherit; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Bộ quy tắc heading riêng — LẤY ĐÚNG từ file CSS gốc đi kèm mẫu .dc.html (user chụp Styles panel
   thật của mẫu, không phải suy đoán): font-weight/line-height/letter-spacing/margin đều khác hẳn
   mặc định trình duyệt (font-weight đậm hơn "bold" thường, line-height xít hơn body, letter-spacing
   âm nhẹ kiểu chữ tiêu đề hiện đại). Thiếu tầng CSS này là lý do MỌI heading trên site trước đây
   không khớp cỡ chữ/độ đậm với mẫu, dù đã set đúng font-size riêng lẻ từng chỗ. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
h3 { font-size: 26px; }
/* B1 16/10 (SEO thứ bậc heading): trang chủ đổi tiêu đề khối h3→h2, h4→h3, h6→p khi hiển thị (home_headings()) — giữ nguyên cỡ chữ cũ. */
h2.hhn-h3 { font-size: 26px; }
h3.hhn-h4 { font-size: 1em; }
p.hhn-h6 { font-family: var(--font-sans); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; font-size: .67em; margin: 0 0 12px; }
/* H1 trang chủ: anh Dương 26/10 "ẩn" — giữ trong HTML cho Google (SEO 16/10), không hiện trên giao diện. Câu sửa ở Admin → Trang chủ. */
.hhn-home-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.container:has(> .hhn-home-h1) { padding: 0 !important; margin: 0 !important; height: 0; }
/* Sticky footer trước đây áp flex trực tiếp lên "body", bị tắt tạm 2026-09-14 vì nghi gây lỗi
   layout hẹp bất thường (CHƯA XÁC NHẬN chắc chắn nguyên nhân thật, xem KE_HOACH_CHUAN_HOA_GIAO_DIEN.md).
   Bật lại 2026-09-17 (user báo lỗi khoảng trắng thừa dưới footer ở trang ngắn nội dung) nhưng áp
   flex lên ".hhn-content-wrap" thay vì "body" trực tiếp — xem rule đầy đủ ở cuối file, cùng chỗ
   khai báo wrapper này cho quầng sáng, để tránh khả năng lặp lại đúng lỗi cũ đó. */
.hhn-page-shell { background: #eef4ee; position: relative; z-index: 0; overflow: hidden; }
/* Quầng sáng trang trí — ĐÃ CHUYỂN sang dùng chung toàn site qua #hhn-orbs (position:fixed thật,
   xem cuối file) đúng nguyên bản mọi file .dc.html (4 khối .hh-orb, không phải chỉ 2 như bản cũ ở
   đây). Bỏ ::before/::after riêng của .hhn-page-shell để tránh vẽ trùng 2 lớp quầng sáng. */
a { color: inherit; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #cdd8d3; border-radius: 8px; }

@keyframes hhnpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.mono { font-family: var(--font-mono); }
/* width:100% bắt buộc — thiếu dòng này khiến .container (khi là con trực tiếp của
   .hhn-content-wrap, display:flex;flex-direction:column) không được flex stretch tới chiều rộng
   xác định TRƯỚC KHI grid con bên trong tính auto-fit, khiến các lưới auto-fit sập về 1 cột duy
   nhất (bám theo max-content của phần tử con thay vì chiều rộng cha) — phát hiện 2026-09-17. */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* padding-top/bottom riêng (không dùng shorthand "padding") để không đè mất padding trái/phải
   20px của .container khi 1 phần tử gắn cả 2 class "section-pad container" — 2 class cùng
   specificity, shorthand trùng tên thuộc tính sẽ bị class khai báo sau ghi đè TOÀN BỘ (kể cả
   trái/phải) chứ không gộp, từng làm mất hẳn lề 2 bên ở đúng bề rộng khung 1200px (đã phát hiện
   khi test màn hình 1240px — nội dung dính sát mép trái/phải, không phải lỗi mock). */
.section-pad { padding-top: 44px; padding-bottom: 44px; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: var(--accent-2); display: inline-block; margin-bottom: 8px; }
.h-section { font-family: var(--font-serif); font-weight: 600; font-size: 27px; margin: 0; color: var(--accent-2); }
.lead { font-size: 16px; line-height: 1.7; color: var(--text-dim); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; border: 1.5px solid #C7E6D5; background: #fff; color: var(--accent-2); text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease; }
.btn-accent, .btn.btn-accent { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,60,40,.14); }

.news-row { display: grid; grid-template-columns: 100px 140px 1fr 24px; gap: 20px; padding: 20px 8px; border-bottom: 1px solid var(--line); align-items: center; text-decoration: none; color: inherit; }
.news-row:hover { background: #F7FAF8; }
@media (max-width: 700px) {
  .news-row { grid-template-columns: 70px 1fr 24px; gap: 12px; }
  .news-row span:nth-child(2) { display: none; }
}

/* Grid đối tác/thương hiệu — dùng bởi partners_grid_html() (core/helpers.php), class dùng chung
   mọi theme nên style đặt ở đây để badge số thứ tự định vị đúng (position:relative). */
.partner-cell { position: relative; background: #fff; padding: 26px 16px; min-height: 88px; display: flex; align-items: center; justify-content: center; }

/* Header nav dropdown */
.hhn-navwrap:hover .hhn-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
/* Điều hướng trang tĩnh (Giới thiệu/Tin tức/Liên hệ) — tách riêng khỏi dropdown "Danh mục" sản
   phẩm, không gộp chung như mẫu .dc.html (mẫu nhét nhầm các trang này làm 1 mục trong mega-menu
   danh mục, user đã yêu cầu sửa lại ngày 2026-09-16). */
.hhn-header-nav a:hover { color: #1f8a4c !important; }
/* Nút/link header khác — logo, "Danh mục", Thành viên, giỏ hàng, hamburger (2026-09-18, theo yêu cầu
   sếp bổ sung chuyển động khi tương tác). */
.hhn-logo-link { transition: opacity .15s ease; }
.hhn-logo-link:hover { opacity: .8; }
.hhn-account-btn, #site-cart-button, .hhn-hamburger {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hhn-account-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,60,40,.16); background: #fff !important; color: #135f33 !important; }
#site-cart-button:hover { transform: translateY(-1px); background: #17693a !important; }
.hhn-hamburger:hover { background: #e8ebf2 !important; }
.hhn-navwrap > a:hover { transform: translateY(-1px); background: #17693a !important; }
.hhn-navwrap > a { transition: transform .15s ease, background .15s ease; }

/* Footer: link cột + nút nổi Zalo/hotline. */
footer a { transition: opacity .15s ease, transform .15s ease; }
footer a:hover { opacity: 1 !important; transform: translateX(3px); }
.hhn-float-btn { transition: transform .2s ease, box-shadow .2s ease; }
.hhn-float-btn:hover { transform: scale(1.04); }

/* Trang chi tiết sản phẩm: thumbnail ảnh phụ. */
.pd-thumb { transition: transform .15s ease, border-color .15s ease; }
.pd-thumb:hover { transform: scale(1.03); }
/* Mega menu 2 cột (danh mục cha bên trái, danh mục con hiện khi hover — theo Trang chu HH
   Nutrition.dc.html v1). CSS thuần, không cần JS: parent-hover hiện flyout con, không dùng sibling
   selector (dễ vỡ khi nhiều item) mà dùng .hhn-mega-row-wrap bọc cả hàng lẫn flyout của chính nó. */
.hhn-mega-row-wrap:hover > a { background: #e8f6ee; color: #135f33; }
.hhn-mega-row-wrap:hover > .hhn-mega-flyout { display: grid !important; }
/* Ép đúng 4 cột cho lưới sản phẩm khối "Danh mục theo bệnh lý" — token {{PRODUCT_LIST}} tự render
   grid co giãn auto-fill minmax(180px,1fr) mặc định (dùng cho lưới rộng như "Bán chạy nhất"), nhưng
   ở đây khung hẹp hơn (chỉ còn "1fr" sau cột 280px của thẻ Giải pháp) nên chỉ vừa 3 cột thay vì 4
   như mẫu — ép cứng 4 cột để card tự co nhỏ lại vừa đủ 4, khớp Trang chu HH Nutrition.dc.html v1. */
.hhn-disease-grid > div { grid-template-columns: repeat(4, 1fr) !important; }
/* Điện thoại: 2 cột như mọi lưới SP khác (trước 1 cột — mỗi thẻ cao gần hết màn hình). */
@media (max-width: 700px) { .hhn-disease-grid > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ===== Header: menu hamburger cho mobile ===== */
.hhn-hamburger { display: none; }
@media (max-width: 900px) {
  .hhn-header-nav { display: none !important; }
  .hhn-cart-label { display: none !important; }
  .hhn-hide-phone { display: none !important; }
  .hhn-hamburger { display: flex !important; }

  .hhn-top-bar { font-size: 10.5px; }
  .hhn-top-bar-inner { row-gap: 4px; }
  .hhn-top-quote { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; flex: 1 1 100% !important; text-align: center !important; }
  .hhn-top-right { flex: 1 1 100% !important; justify-content: center !important; gap: 10px; }

  /* Header điện thoại gọn 2 hàng (khách 01/10: 4 hàng chiếm gần nửa màn hình, trôi mất khi cuộn):
     hàng 1 = ☰ · logo · giỏ · tài khoản, hàng 2 = ô tìm kiếm. Nút "Danh mục" ẩn — danh mục SP nằm trong menu ☰ ("Sản phẩm"). */
  /* 2026-10-02 (anh Dương, đợt 3): gom 1 hàng ☰ · icon logo · Ô TÌM KIẾM (giữa) · giỏ · tài khoản → màn đầu rộng hơn; giỏ + tài
     khoản cùng 44px. Logo điện thoại = chỉ icon (Giao diện → Logo → "Logo header – điện thoại"). */
  header .hhn-header-row { flex-wrap: nowrap !important; column-gap: 8px !important; padding: 8px 10px !important; }   /* "header" để thắng luật [style*=display:flex]{wrap} */
  .hhn-hamburger { order: 1; margin-left: 0 !important; }
  .hhn-logo-link { order: 2; flex: none; min-width: 0; margin-right: 0 !important; }
  .hhn-logo-link img, .hhn-logo-link svg { max-height: 40px; width: auto; }
  .hhn-search-form { order: 3; flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  .hhn-search-form input { padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 14px !important; padding-right: 46px !important; text-overflow: ellipsis; }
  #site-cart-button { order: 4; margin-left: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px; flex: none; }
  .hhn-account-btn { order: 5; margin-left: 0 !important; width: 44px; height: 44px; padding: 0 !important; justify-content: center; flex: none; }
  .hhn-navwrap { display: none !important; }
  /* overflow-x:hidden trên html/body làm position:sticky của header mất tác dụng → dùng clip (không tạo khung cuộn). */
  html, body { overflow-x: clip; }
  /* Menu ☰ mở trong header đang dính → cuộn bên trong menu khi danh sách dài hơn màn hình. */
  .hhn-mobile-panel.is-open { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; }
}
.hhn-mobile-panel { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--line); padding: 6px 20px 14px; }
.hhn-mobile-panel.is-open { display: flex; }
.hhn-mobile-panel .hhn-mobile-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 2px; text-decoration: none; color: #2A3531; font-weight: 700; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.hhn-mobile-submenu { display: none; flex-direction: column; padding: 0 0 6px 12px; }
.hhn-mobile-submenu.is-open { display: flex; }
/* Menu ☰ điện thoại dùng chung HTML dropdown máy tính: danh mục con là khung "bay" sang phải khi rê chuột → trên điện
   thoại nằm ngoài màn hình (khách 01/10). Trong menu ☰: con xổ ngay bên dưới khi bấm cha (JS header.html gắn .is-open). */
.hhn-mobile-submenu .hhn-mega-row-wrap > .hhn-mega-flyout,
.hhn-mobile-submenu .hhn-mega-row-wrap:hover > .hhn-mega-flyout { display: none !important; position: static !important; width: auto !important; border: 0 !important; box-shadow: none !important; padding: 0 0 6px 38px !important; }
.hhn-mobile-submenu .hhn-mega-row-wrap.is-open > .hhn-mega-flyout,
.hhn-mobile-submenu .hhn-mega-row-wrap.is-open:hover > .hhn-mega-flyout { display: block !important; }
.hhn-mobile-submenu .hhn-mega-row-wrap > a > svg:last-child { transition: transform .15s; }
.hhn-mobile-submenu .hhn-mega-row-wrap.is-open > a > svg:last-child { transform: rotate(90deg); }
.hhn-mobile-toggle-icon { transition: transform .2s ease; flex-shrink: 0; }
.hhn-mobile-toggle-icon.is-open { transform: rotate(180deg); }

/* ===== Danh mục icon row (trang chủ) ===== */
.hhn-cat-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.hhn-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; padding: 12px 6px; border-radius: 14px; transition: background .15s; }
.hhn-cat-tile:hover { background: #fff; }
.hhn-cat-icon { width: 52px; height: 52px; border-radius: 50%; background: #EAF6EF; color: #0C7A47; display: flex; align-items: center; justify-content: center; }
.hhn-cat-label { font-size: 12px; font-weight: 600; color: #2A3531; text-align: center; line-height: 1.3; }
@media (max-width: 900px) { .hhn-cat-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .hhn-cat-row { grid-template-columns: repeat(3, 1fr); gap: 4px; } .hhn-cat-icon { width: 44px; height: 44px; } .hhn-cat-label { font-size: 10.5px; } }

/* ===== Tab pills (Bán chạy / theo bệnh lý...) — kính mờ (glass) đúng theo Trang chu HH
   Nutrition.dc.html v1: background rgba(255,255,255,.55) + blur + box-shadow mềm, KHÔNG phải màu
   xám phẳng như bản trước. */
.hhn-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.hhn-tab { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); color: #1c1f2e; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 30px rgba(20,60,40,.10); cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.hhn-tab:hover { transform: translateY(-2px); border-color: #1f8a4c; color: #135f33; background: #eaf7ee; }
.hhn-tab.is-active:hover { color: #fff; background: #17693a; }
.hhn-tab.is-active { background: #1f8a4c; color: #fff; border-color: #1f8a4c; }

/* ===== Thẻ kính mờ dùng chung (CTA đặt lịch/khóa học, badge tin cậy...) — theo v1 ===== */
.hhn-glass { background: rgba(255,255,255,.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 8px 30px rgba(20,60,40,.10); }

/* ===== Benefits strip ===== */
.hhn-benefits { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hhn-benefit { display: flex; align-items: center; gap: 12px; padding: 20px; border-right: 1px solid #EEF2F0; }
.hhn-benefit:last-child { border-right: none; }
.hhn-benefit-icon { width: 40px; height: 40px; border-radius: 10px; background: #EAF6EF; color: #0C7A47; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 860px) { .hhn-benefits { grid-template-columns: repeat(2, 1fr); } .hhn-benefit { border-bottom: 1px solid #EEF2F0; } .hhn-benefit:nth-child(2n) { border-right: none; } }

/* ===== Thanh khuyến mãi trên cùng {{PROMO_BAR}} (2026-10-01) — cao ~44px, chữ giữa, nút x bên phải ===== */
.hhn-promo-bar { position: relative; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 48px; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; }
.hhn-pb-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
a.hhn-pb-link:hover .hhn-pb-text { text-decoration: underline; }
.hhn-pb-arrow { transition: transform .15s ease; }
a.hhn-pb-link:hover .hhn-pb-arrow { transform: translateX(3px); }
.hhn-pb-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; opacity: .85; }
.hhn-pb-close:hover { opacity: 1; background: rgba(255,255,255,.18); }
@media (max-width: 700px) { .hhn-promo-bar { font-size: 13px; padding: 6px 42px 6px 14px; } .hhn-pb-close { right: 4px; } }
/* Nhiều tin (02/11): 1 tin / lần, nút ‹ › 2 bên chữ, tự chuyển. */
.hhn-pb-cta { font-weight: 800; }
.hhn-promo-bar.is-multi { gap: 6px; }
.hhn-pb-slides { min-width: 0; display: flex; justify-content: center; }
.hhn-promo-bar.is-multi .hhn-pb-link { display: none; }
.hhn-promo-bar.is-multi .hhn-pb-link.is-on { display: inline; animation: hhnPbIn .3s ease; }
.hhn-pb-nav { flex: none; width: 28px; height: 28px; border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; padding: 0; }
@media (hover: hover) { .hhn-pb-nav:hover { background: rgba(0,0,0,.08); } }
@keyframes hhnPbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .hhn-promo-bar.is-multi { padding: 6px 38px 6px 4px; } .hhn-promo-bar.is-multi .hhn-pb-link.is-on { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* ===== Hàng tab sản phẩm trang chủ {{PRODUCT_TABS}} (2026-10-02) — tab là <button>; điện thoại: tab 1 hàng + SP 2 thẻ vuốt ngang ===== */
.hhn-ptabs .hhn-tab { font-family: inherit; }
.hhn-ptab-pane[hidden] { display: none !important; }
@media (max-width: 700px) {
  .hhn-ptabs-wrap .hhn-ptabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -4px; padding: 2px 4px 6px; }
  .hhn-ptabs-wrap .hhn-ptabs::-webkit-scrollbar { display: none; }
  .hhn-ptabs-wrap .hhn-ptabs .hhn-tab { flex: none; white-space: nowrap; }
  /* Đợt 3 (anh Dương: 1 màn thấy ≥4 SP): 2 hàng × 2 cột thấy được, vuốt ngang xem thêm (trước: 1 hàng 2 thẻ). */
  .hhn-ptab-pane .hhn-reveal-stagger.hhn-pgrid { display: grid !important; grid-template-columns: none !important; grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; grid-auto-columns: calc(50% - 4px); gap: 8px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .hhn-ptab-pane .hhn-reveal-stagger::-webkit-scrollbar { display: none; }
  .hhn-ptab-pane .hhn-reveal-stagger > * { min-width: 0; scroll-snap-align: start; }
}

/* ===== Lưới sản phẩm (2026-10-14: chuyển layout từ 6 sản phẩm về 5 sản phẩm theo yêu cầu khách) ===== */
.hhn-pgrid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 1100px) {
  .hhn-pgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  .hhn-pgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== Phân trang danh sách SP (2026-10-02) — 2 bản trong product_list_html: máy tính ±3 trang, điện thoại ±1 trang ===== */
.hhn-pager-d { display: flex; }
.hhn-pager-m { display: none; }
@media (max-width: 700px) {
  .hhn-pager-d { display: none; }
  .hhn-pager-m { display: flex; }
}

/* ===== Hashtag tìm nhanh (2026-10-02) — hộp gợi ý khi bấm ô tìm kiếm header + hàng chip trang Sản phẩm ===== */
.hhn-qtags { display: flex; flex-wrap: wrap; gap: 8px; }
.hhn-qtag { display: inline-block; font-size: 12.5px; font-weight: 700; color: #1f6b3f; background: #eaf7ee; border: 1px solid #c7ecd6; border-radius: 999px; padding: 5px 12px; text-decoration: none; white-space: nowrap; }
.hhn-qtag:hover { background: #1f8a4c; color: #fff; border-color: #1f8a4c; }
.hhn-qtags-pop { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; background: #fff; border: 1px solid #eceef3; border-radius: 14px; box-shadow: 0 16px 36px rgba(20,20,60,.12); padding: 12px 14px; z-index: 60; }
.hhn-qtags-title { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7a72; margin-bottom: 8px; }
.hhn-search-form:focus-within .hhn-qtags-pop { display: block; }

/* ===== Mega menu "Danh mục" máy tính kiểu Long Châu (product_mega_menu_html, 2026-10-02 tối) — khung cố định neo theo hàng header ===== */
.hhn-header-row { position: relative; }
.hhn-navwrap:has(.hhn-mm) { position: static !important; }
.hhn-mm { position: absolute; top: 100%; left: 24px; right: 24px; height: 460px; display: flex; background: #fff; border: 1px solid #eceef3;
  border-radius: 16px; box-shadow: 0 24px 60px rgba(10,30,20,.22); overflow: hidden; z-index: 40; opacity: 0; visibility: hidden;
  transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; text-align: left; }
.hhn-mm::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }   /* cầu nối chuột từ nút xuống khung */
.hhn-navwrap:hover .hhn-mm, .hhn-navwrap:focus-within .hhn-mm { opacity: 1; visibility: visible; transform: translateY(0); }
.hhn-mm-loading { flex: 1; display: flex; align-items: center; justify-content: center; color: #6b7a72; font-size: 14px; }
.hhn-mm-left { flex: 0 0 260px; overflow-y: auto; padding: 10px; background: #f6faf7; border-right: 1px solid #e6efe9; }
.hhn-mm-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #1c1f2e; text-decoration: none; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.hhn-mm-cat + .hhn-mm-cat { margin-top: 2px; }
.hhn-mm-cat.is-active, .hhn-mm-cat:hover { background: #fff; color: #135f33; box-shadow: 0 2px 10px rgba(20,60,40,.08); }
.hhn-mm-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: #e8f6ee; color: #197a41; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhn-mm-ico img { width: 100%; height: 100%; object-fit: contain; }
.hhn-mm-right { flex: 1; min-width: 0; padding: 16px 18px; overflow-y: auto; }
.hhn-mm-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #edf1ee; }
.hhn-mm-subs:last-child { border-bottom: 0; margin-bottom: 0; }
.hhn-mm-sub { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #f3f8f5; color: #1c1f2e; text-decoration: none; font-size: 13px; font-weight: 600; min-width: 0; }
.hhn-mm-sub:hover { background: #e3f3ea; color: #135f33; }
.hhn-mm-subimg { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #fff; color: #197a41; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhn-mm-subimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hhn-mm-sub.is-more .hhn-mm-subimg { color: #8a93a6; }
.hhn-mm-subname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.hhn-mm-besthead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.hhn-mm-besthead span { color: #c9d3cd; }
.hhn-mm-besthead a { color: #1f8a4c; font-size: 13px; font-weight: 700; text-decoration: none; }
.hhn-mm-prods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hhn-mm-prod { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #edf1ee; border-radius: 12px; color: #1c1f2e; text-decoration: none; min-width: 0; }
.hhn-mm-prod:hover { box-shadow: 0 6px 18px rgba(20,60,40,.12); }
.hhn-mm-pimg { aspect-ratio: 1; border-radius: 8px; background: #f6f8f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhn-mm-pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hhn-mm-pname { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.hhn-mm-pprice { font-size: 13px; line-height: 1.3; }
@media (max-width: 1100px) { .hhn-mm-prods { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hhn-mm-prod:nth-child(n+5) { display: none; } }

/* ===== Hộp gợi ý ô tìm kiếm header (search_box_html, 2026-10-02 tối — kiểu Long Châu / Thế Giới Nệm) ===== */
.hhn-dim { position: fixed; inset: 0; background: rgba(10,20,15,.45); z-index: 49; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.hhn-dim.on { opacity: 1; visibility: visible; }
.hhn-sp { display: none; position: absolute; top: 100%; left: 0; right: 0; min-width: 420px; margin-top: 8px; background: #fff; border: 1px solid #eceef3;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(20,20,60,.18); padding: 12px 14px; z-index: 60; max-height: min(75vh, 640px); overflow-y: auto; text-align: left; }
.hhn-search-form.is-open .hhn-sp.has-content { display: block; }
.hhn-sp-banner { display: block; margin-bottom: 10px; }
.hhn-sp-banner img { display: block; width: 100%; height: auto; border-radius: 10px; }
.hhn-sp-sec + .hhn-sp-sec { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dfe7e2; }
.hhn-sp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hhn-sp-head .hhn-qtags-title { margin-bottom: 0; }
.hhn-sp-clear { border: 0; background: none; color: #1f8a4c; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 2px 0; }
.hhn-sp-hrow { display: flex; align-items: center; gap: 8px; }
.hhn-sp-hrow a { flex: 1; min-width: 0; padding: 6px 0; color: #1c1f2e; text-decoration: none; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhn-sp-hrow a::before { content: "↺"; color: #9aa8a2; margin-right: 8px; }
.hhn-sp-hrow a:hover { color: #1f8a4c; }
.hhn-sp-hrow button { border: 0; background: none; font-size: 18px; line-height: 1; color: #9aa8a2; cursor: pointer; padding: 2px 4px; }
.hhn-sp-hot { background: #eef8f1; border-radius: 12px; padding: 10px; border-top: 0 !important; }
.hhn-sp-hot-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: #1f6b3f; margin-bottom: 8px; }
.hhn-sp-hot-title svg { color: #e0501e; }
.hhn-sp-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hhn-sp-prod { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px; text-decoration: none; color: #1c1f2e; min-width: 0; }
.hhn-sp-prod:hover { box-shadow: 0 4px 14px rgba(20,60,40,.12); }
.hhn-sp-pimg { flex: none; width: 56px; height: 56px; border-radius: 8px; background: #f4f6f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhn-sp-pimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hhn-sp-pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hhn-sp-pname { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hhn-sp-pprice { font-size: 13px; line-height: 1.3; }
@media (max-width: 900px) {
  .hhn-search-form.is-open { z-index: 61; }
  /* header có backdrop-filter = khối chứa của fixed → top:100% = ngay dưới đáy header (ô tìm kiếm là hàng cuối header). */
  .hhn-sp { position: fixed; left: 8px; right: 8px; top: 100%; min-width: 0; margin-top: 6px; max-height: calc(100dvh - 160px); }
}
@media (max-width: 560px) { .hhn-sp-prods { grid-template-columns: 1fr; } }

/* Logo riêng điện thoại (Giao diện → Logo → "Logo header – điện thoại") */
.hhn-logo-m { display: none; }
@media (max-width: 900px) { .hhn-logo-link .hhn-logo-d { display: none !important; } .hhn-logo-link .hhn-logo-m { display: block; } }

/* ===== Dòng thông tin đầu trang {{TOP_BAR}} (2026-10-02) — giữ đúng kiểu dòng cũ; nội dung riêng máy tính (.hhn-tb-d) / điện thoại (.hhn-tb-m) ===== */
.hhn-topbar { position: relative; font-size: 12.5px; padding: 9px 24px; text-align: center; }
.hhn-topbar.is-closable { padding-left: 44px; padding-right: 44px; }
.hhn-tb-d, .hhn-tb-m { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hhn-tb-m { display: none; }
.hhn-topbar.hhn-tb-no-d { display: none; }
.hhn-tb-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; opacity: .75; }
.hhn-tb-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
@media (max-width: 900px) {
  .hhn-tb-d { display: none; }
  .hhn-tb-m { display: flex; }
  .hhn-topbar.hhn-tb-no-d { display: block; }
  .hhn-topbar.hhn-tb-no-m { display: none; }
  .hhn-topbar.is-closable { padding-left: 36px; padding-right: 36px; }
  .hhn-tb-close { right: 4px; }
}

/* ===== Hero trang chủ: banner (module Banner) + 2 thẻ bên phải (2026-10-01) =====
   Ảnh banner quyết định chiều cao hàng; cột phải đặt tuyệt đối trong ô lưới nên KHÔNG kéo hàng cao hơn ảnh (trước đây 2 thẻ
   chữ cao 260px > ảnh 244px → hở dải trống dưới banner). Thẻ co khoảng đệm/cỡ chữ theo bề rộng màn hình cho vừa.
   Banner tắt/chưa có slide (không có khối bnr-) → cột phải trở về cao tự nhiên. ≤700px: xếp chồng, cao tự nhiên. */
.hhn-hero-banner { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(20,60,40,.10); align-self: start; }
.hhn-hero-side { position: relative; min-height: 0; }
.hhn-hero-side-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; }
.hhn-hero-grid:not(:has(.hhn-hero-banner [id^="bnr-"])) .hhn-hero-side-in { position: static; }
.hhn-hero-card { flex: 1 1 0; min-height: 0; text-decoration: none; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 8px 30px rgba(20,60,40,.10); border-radius: 16px; padding: clamp(10px, 1.5vw, 22px) clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.hhn-hero-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hhn-hero-card-txt { position: relative; z-index: 1; max-width: 65%; display: flex; flex-direction: column; gap: 2px; }
.hhn-hero-card-kicker { font-weight: 800; font-size: clamp(11px, .95vw, 13px); text-transform: uppercase; letter-spacing: .06em; }
.hhn-hero-card-title { font-weight: 800; font-size: clamp(14px, 1.4vw, 19px); line-height: 1.25; color: #1c1f2e; }
.hhn-hero-card-cta { font-size: clamp(12px, .95vw, 13px); font-weight: 700; text-decoration: underline; }
/* ≤860px (máy tính bảng dọc): cột phải quá hẹp/thấp cho chữ → banner rộng hết khung, 2 thẻ nằm cạnh nhau bên dưới */
@media (max-width: 860px) {
  .hhn-hero-grid { grid-template-columns: 1fr !important; }
  .hhn-hero-side-in { position: static; flex-direction: row; }
  .hhn-hero-card { flex: 1 1 0; padding: 18px; min-height: 96px; }
}
@media (max-width: 700px) {
  .hhn-hero-side-in { flex-direction: column; }
  .hhn-hero-card { flex: none; padding: 22px; }
}

/* ===== Promo side cards (2 banner nhỏ cạnh hero) ===== */
.hhn-promo-card { display: block; text-decoration: none; border-radius: 16px; padding: 20px; height: 100%; }

/* ===== An toàn mobile cho toàn bộ lưới inline-style dựng bằng page-builder ===== */
@media (max-width: 700px) {
  [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; }
  /* Khối flex DỌC không được xuống cột (2026-10-02: thẻ SP / tin trên iPhone iOS 14 bị chia cột, khung ảnh hẹp lại). */
  [style*="flex-direction:column"], [style*="flex-direction: column"] { flex-wrap: nowrap !important; }
  .hhn-center-wrap { justify-content: center !important; text-align: center !important; }
  [style*="align-items: flex-start"] { flex-wrap: nowrap !important; }
  .hhn-cat-row, .hhn-benefits { display: grid !important; }
}
/* Thẻ "Tin nổi bật" ({{FEATURED_NEWS}}, featured_news_html) — 2026-10-02 iPhone: ảnh 16:9 bị co thành dải thấp / cắt (thẻ flex dọc + luật
   flex-wrap:wrap ở trên + aspect-ratio). Giữ khung ảnh không co, rộng đủ thẻ; trình duyệt không có aspect-ratio dùng padding-top 56.25%. */
.hhn-fn-card { flex-wrap: nowrap !important; }
.hhn-fn-img { flex: none !important; width: 100%; box-sizing: border-box; }
/* Safari ≤ iOS 14 không hiểu aspect-ratio: khung tự cao 56.25% bề rộng bằng padding-top (::before % không ăn khi nằm trong flex dọc
   lồng nhau như /tin-tuc), nhãn danh mục đặt tuyệt đối góc dưới. */
@supports not (aspect-ratio: 1 / 1) {
  .hhn-fn-img { height: 0 !important; padding: 56.25% 0 0 !important; box-sizing: content-box; }
  .hhn-fn-img > span { position: absolute !important; left: 10px; bottom: 10px; }
}

/* ===== Dự phòng Safari ≤ iOS 14 (iPhone 11 user 02/10) cho MỌI khung dùng aspect-ratio / inset =====
   Không có aspect-ratio → khung ảnh (thẻ SP, ảnh chính chi tiết SP, SP trong bài, ảnh đầu bài viết, mega menu) mất chiều cao:
   ::before float cao 100% / 56.25% bề rộng giữ khung (trong khung flex nó là 1 item rộng 0 → vẫn giữ cao), ::after xoá float;
   ảnh con đặt tuyệt đối căn giữa để width/height % tính theo khung (chiều cao % của phần tử trong luồng bị bỏ qua khi khung không
   có chiều cao xác định). Banner: tỉ lệ riêng từng banner sinh trong banner_html(). */
@supports not (aspect-ratio: 1 / 1) {
  /* Khung tự cao bằng padding-top % (tính theo bề rộng khối cha — xác định cả khi nằm trong flex dọc lồng nhau như thẻ SP; cách
     ::before % không ăn ở đó → khung cao 0). Nội dung con là ảnh đặt tuyệt đối bên dưới. */
  [style*="aspect-ratio:1/1"]:not(img), [style*="aspect-ratio: 1/1"]:not(img), .hh-pp-img, .hhn-mm-pimg {
    position: relative; flex-shrink: 0; height: 0 !important; padding-top: 100% !important; box-sizing: content-box; }
  [style*="aspect-ratio:16/9"]:not(img):not(.hhn-fn-img) {
    position: relative; flex-shrink: 0; height: 0 !important; padding-top: 56.25% !important; box-sizing: content-box; }
  [style*="aspect-ratio:16/10"]:not(img) {   /* thẻ danh sách tin /tin-tuc (NewsController) */
    position: relative; flex-shrink: 0; height: 0 !important; padding-top: 62.5% !important; box-sizing: content-box; }
  [style*="aspect-ratio:4/3"]:not(img) {     /* ảnh "Về H&H" trang Giới thiệu (template DB) */
    position: relative; flex-shrink: 0; height: 0 !important; padding-top: 75% !important; box-sizing: content-box; }
  [style*="aspect-ratio:16/10"]:not(img) > img, [style*="aspect-ratio:4/3"]:not(img) > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  [style*="aspect-ratio:1/1"]:not(img) > img, [style*="aspect-ratio: 1/1"]:not(img) > img, .hh-pp-img > img, .hhn-mm-pimg > img,
  [style*="aspect-ratio:16/9"]:not(img):not(.hhn-fn-img) > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
  .hh-pp-img > img, .hhn-mm-pimg > img { max-width: 100%; max-height: 100%; }
  .post-content iframe { height: 56.25vw; max-height: 430px; }
}
@supports not (inset: 0) {
  [style*="inset:0"], [style*="inset: 0"], .hhn-dim { top: 0; right: 0; bottom: 0; left: 0; }
}

/* ===== Đợt 3 (anh Dương, kiểu Long Châu / Thế Giới Nệm): thẻ SP, hàng ô danh mục, thanh lọc, sắp xếp ===== */
/* Cột lưới của template trang (VD trang Sản phẩm "250px 1fr") không được nở theo hàng cuộn ngang bên trong (ô danh mục, chip lọc,
   sắp xếp) — thiếu min-width:0 thì cột rộng cả nghìn px, thẻ SP tràn khỏi màn (Chrome giấu nhờ overflow-x:clip, Safari cũ lộ ra). */
.hhn-content-wrap section[style*="grid-template-columns"] > * { min-width: 0; }
.hhn-pstats { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11.5px; color: #6b7a72; line-height: 1.3; }
.hhn-pstats-sep { color: #d0d8d3; }
.hhn-ctiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 0 16px; }
.hhn-ctiles::-webkit-scrollbar { display: none; }
.hhn-ctile { flex: 0 0 112px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; background: #fff;
  border: 1px solid #e6efe9; border-radius: 14px; text-decoration: none; color: #1c1f2e; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; }
.hhn-ctile.is-on { border-color: #1f8a4c; box-shadow: 0 0 0 1px #1f8a4c inset; color: #135f33; }
.hhn-ctile-ico { width: 44px; height: 44px; border-radius: 12px; background: #e8f6ee; color: #197a41; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hhn-ctile-ico img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hhn-ctile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hhn-fbar { display: none; }
.hhn-sortlbl { display: none; }
/* Hiệu ứng nhấn khi bấm thẻ SP trên điện thoại (như Long Châu). */
.hhn-pcard { -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: none) { .hhn-pcard:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(20,60,40,.12) !important; } }
/* Thẳng hàng các dòng trong thẻ SP (anh Dương 03/11 "lệch hàng lệch dòng", trang chủ live): thẻ có / không nhãn danh mục, tên 1–3 dòng,
   có / không sao·đã bán → dòng sao / nhãn lệch 16px. Mỗi dòng cao cố định; thiếu dòng nào thì giữ chỗ trống (::before / ::after, order flex). */
.hhn-pcard > a > div:last-child > span:first-child { order: 0; height: 20px; line-height: 14px; box-sizing: border-box; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hhn-pcard > a > div:last-child:not(:has(> span:first-child))::before { content: ''; order: 0; flex: none; height: 20px; }
.hhn-pcard .hhn-pname { order: 1; flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  height: calc(1.35em * 3); min-height: 0 !important; }
/* Sao · đánh giá · đã bán: tối đa 2 dòng (thẻ hẹp xuống dòng, không cắt chữ) — giữ chỗ đủ 2 dòng. */
.hhn-pcard .hhn-pstats { order: 2; flex: none; align-content: flex-start; row-gap: 0; overflow: hidden; height: 30px; line-height: 15px; }
.hhn-pcard > a > div:last-child:not(:has(> .hhn-pstats))::after { content: ''; order: 2; flex: none; height: 30px; }
.hhn-pcard .hhn-pcard-badges { order: 3; }
.hhn-pcard > a > div:last-child > div:last-child { order: 4; }
@media (max-width: 900px) {
  .hhn-fbar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding: 8px; background: #fdf1f1; border-radius: 12px; }
  .hhn-fbar::-webkit-scrollbar { display: none; }
  .hhn-fbar button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3d6d6; background: #fff; color: #1c1f2e; border-radius: 10px;
    padding: 9px 14px; font: 600 13px/1 inherit; cursor: pointer; white-space: nowrap; }
  .hhn-fbar button b { background: #1f8a4c; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 4px; }
  .hhn-plsearch { display: none !important; }
  /* Cột trái template trang Sản phẩm (hộp "Cần tư vấn chọn sản phẩm?"; bộ lọc đã chuyển thành ngăn kéo) xuống SAU danh sách SP. */
  .hhn-content-wrap section[style*="grid-template-columns"] > aside { order: 2; position: static !important; }
  /* 03/11: cột trái xuống dưới thì lưới trang phải về 1 cột — trước đây 701–900px (máy tính bảng) vẫn "250px 1fr" nên danh sách SP rơi vào
     cột 250px (thẻ ~72px, chữ nút 3–4 dòng), cột rộng còn lại chỉ chứa hộp tư vấn. */
  .hhn-content-wrap section[style*="grid-template-columns"]:has(> aside) { grid-template-columns: minmax(0, 1fr) !important; }
  .hhn-sortrow { gap: 6px !important; margin-bottom: 12px !important; }
  .hhn-sortbar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 0 !important; align-items: center; width: 100%; }
  .hhn-sortbar::-webkit-scrollbar { display: none; }
  .hhn-sortlbl { display: inline; flex: none; font-size: 13px; color: #5a6b64; margin-right: 6px; }
  .hhn-sortbar a { flex: none; background: none !important; color: #4a5a52 !important; border-radius: 0 !important; padding: 4px 12px !important; font-weight: 600 !important; font-size: 13px !important; }
  .hhn-sortbar a + a { border-left: 1px solid #dfe6e2 !important; }
  .hhn-sortbar a.is-active { color: #1f8a4c !important; font-weight: 800 !important; }
  .hhn-count { font-size: 12px !important; }
}
@media (max-width: 700px) {
  /* Lưới SP 2 cột (luật chung ép 1fr làm 1 thẻ chiếm cả màn) → 1 màn thấy ~4 SP. */
  .hhn-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .hhn-pcard { border-radius: 12px !important; }
  /* Anh Dương 22/10 "check lại phần viền này trên mobile vì nó không cân xứng với desktop": ô ảnh (margin 3px, bo 14px) bo tròn hơn thẻ (12px) → viền trắng
     dày mỏng không đều ở 4 góc. Bo đồng tâm = 12 − 3 = 9px (máy tính: thẻ 16, ảnh 14 ≈ 16 − 3, giữ nguyên). */
  .hhn-pcard .hhn-hover-zoom { border-radius: 9px !important; }
  .hhn-pcard .hhn-pcard-pct { border-top-right-radius: 9px !important; }
  .hhn-pcard .hhn-pname { font-size: 12.5px !important; min-height: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: calc(1.35em * 2); }
  .hhn-pcard > a > div:last-child { padding: 8px 8px 0 !important; gap: 4px !important; }
  .hhn-pcard > a > div:last-child > span:first-child { font-size: 10px !important; padding: 1px 8px !important; height: 18px; line-height: 14px; }
  .hhn-pcard > a > div:last-child:not(:has(> span:first-child))::before { height: 18px; }
  /* Nút "Đặt trước" (link trong .hhn-pcard-pre) cùng cỡ / vị trí nút "Thêm vào giỏ" (user 23/10: nút cao nút thấp, dài ngắn). */
  .hhn-pcard form, .hhn-pcard .hhn-pcard-pre { padding: 6px 8px 8px !important; }
  .hhn-pcard form button, .hhn-pcard .hhn-pcard-pre a { padding: 7px !important; font-size: 12px !important; }
  .hhn-ctile { flex-basis: 96px; padding: 10px 6px; font-size: 12px; }
  .hhn-qtags { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .hhn-sp .hhn-qtags { flex-wrap: wrap !important; overflow: visible; }   /* hộp gợi ý tìm kiếm vẫn xuống dòng */
}

/* Lề trang điện thoại 24px → 6px cho trang chủ + trang Sản phẩm (anh Dương đợt 3: lề quá dày, banner slider bị nhỏ). Lớp pg-* gắn ở
   <body> (layouts/header.php); bài viết / trang chữ giữ lề cũ cho dễ đọc. */
@media (max-width: 1080px) {
  #partners-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
  #partners-grid > div { min-width: 0 !important; width: 100% !important; }
}
@media (max-width: 700px) {
  .pg-home .hhn-content-wrap .container, .pg-san-pham .hhn-content-wrap .container { padding-left: 6px !important; padding-right: 6px !important; }
  /* Khối "Danh mục theo bệnh lý" (trang chủ): section tự có lề 24px + .container bên trong 6px → lưới SP hẹp hơn các khối khác. */
  .pg-home .hhn-content-wrap section[style*="padding: 44px 24px"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* Khối Thương hiệu phân phối chính hãng: chia lưới 2 cột cố định để logo lẻ ở hàng cuối không bị flex-grow kéo tràn 100% ngang. */
  #partners-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #partners-grid > div { min-width: 0 !important; width: 100% !important; }
}

/* ===== Rà giao diện điện thoại 06/10 ===== */
@media (max-width: 900px) {
  /* Ô nhập cỡ chữ < 16px thì Safari iPhone tự phóng to cả trang khi bấm vào ô (tìm kiếm, form tư vấn, hỏi đáp, số lượng...). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  /* Chữ gợi ý trong ô giữ cỡ nhỏ như cũ (cỡ chữ gợi ý không làm iPhone phóng to). */
  input::placeholder, textarea::placeholder { font-size: 14px; }
  .hhn-search-form input { padding-right: 44px !important; padding-left: 14px !important; }
  .hhn-search-btn:hover { background: #176f3d !important; }
  .hhn-search-btn:active { background: #135d33 !important; opacity: .9 !important; transform: none !important; }
  .hhn-tb-close { width: 36px; height: 36px; }
  /* Ngăn lọc đang mở: ẩn nút gọi + nút chat nổi (nút chat nằm ngoài lớp nội dung nên đè lên ngăn lọc). */
  .pf-open .hhn-float-stack, .pf-open #pancake-chat-plugin-root { display: none !important; }
}
@media (max-width: 700px) {
  /* Trang chi tiết SP: lề trang 24px + lề thẻ trắng 34px → cột chữ chỉ còn ~270px trên màn 390px. */
  .pg-chi-tiet-san-pham .hhn-content-wrap .container { padding-left: 12px !important; padding-right: 12px !important; }
  .pd-tabcard { padding: 18px 14px !important; }
  .pd-tab-btn { margin-right: 14px !important; padding: 10px 2px !important; }
  /* Trang Giới thiệu (nội dung trong DB): đoạn văn canh đều 2 bên trên cột hẹp → hở khoảng trắng lớn giữa các từ. */
  .pg-gioi-thieu .ab-p { text-align: left !important; }
  /* Chữ nhỏ dưới chân trang (nhãn thanh toán 8px). */
  footer [style*="font-size: 8px"] { font-size: 10px !important; }
}

/* Hàng icon danh mục trang chủ (lớp hhn-cat-icons trong home_html) — 2026-10-02 anh Dương: điện thoại đang 1 cột dọc
   (do luật 1fr ở trên) → icon nhỏ, 2 hàng kiểu Shopee app; >8 danh mục thì vuốt ngang. Áp tới 900px (máy tính bảng từng lệch 7+1). */
@media (max-width: 900px) {
  /* ≤8 ô: 4 cột xếp theo hàng (giữ đúng thứ tự khách sắp); >8 ô: 2 hàng xếp theo cột + vuốt ngang. */
  .hhn-cat-icons { grid-template-columns: repeat(4, 1fr) !important; gap: 14px 8px !important; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hhn-cat-icons:has(> :nth-child(9)) { grid-template-columns: none !important; grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 4.5); }
  .hhn-cat-icons::-webkit-scrollbar { display: none; }
  .hhn-cat-icons > a { gap: 6px !important; scroll-snap-align: start; min-width: 0; }
  .hhn-cat-icons > a > div { width: 48px !important; height: 48px !important; box-shadow: 0 4px 14px rgba(20,60,40,.10) !important; }
  .hhn-cat-icons > a > div svg, .hhn-cat-icons > a > div img { width: 22px !important; height: 22px !important; }
  .hhn-cat-icons > a > span { font-size: 11px !important; max-width: none !important; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
}

.post-content p { text-align: justify; text-align-last: left; }
.post-content p:has(a) { text-align: left; }
.post-content p a { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) { .post-content p { text-align: left; } }
/* Nền cho MỌI bảng bài viết (không dùng :has) — Safari ≤ iOS 14 bỏ qua toàn bộ luật :has() bên dưới → bảng tự cuộn ngang trong khung
   thay vì đẩy cả trang tràn ngang (2026-10-02, iPhone 11 user). Trình duyệt mới: luật :has() ghi đè như cũ. */
.post-content table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; margin: 18px 0; }
.post-content table td, .post-content table th { padding: 6px 8px; vertical-align: top; }
/* Bảng DÀN ẢNH (có ảnh bên trong — kiểu dàn 2-3 ảnh cạnh nhau): cột đều, không kẻ ô, lên mobile xếp dọc. */
.post-content table:has(img) { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; }
.post-content table:has(img) td { padding: 6px; vertical-align: top; }
.post-content table img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .post-content table:has(img), .post-content table:has(img) tbody, .post-content table:has(img) tr, .post-content table:has(img) td { display: block; width: 100%; }
}
/* Bảng DỮ LIỆU (không ảnh — lịch học, thành phần dinh dưỡng, giảng viên...): kẻ ô như web cũ, cột co theo nội dung
   (trước đây table-layout:fixed chia đều → cột "Bài 1" rộng bằng cột nội dung, không đường kẻ → mất định dạng bảng). */
.post-content table:not(:has(img)) { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; line-height: 1.55; display: block; overflow-x: auto; }
.post-content table:not(:has(img)) tbody, .post-content table:not(:has(img)) thead { display: table; width: 100%; border-collapse: collapse; }
.post-content table:not(:has(img)) td, .post-content table:not(:has(img)) th { border: 1px solid #dfe6e1; padding: 8px 12px; vertical-align: top; text-align: left; }
.post-content table:not(:has(img)) th, .post-content table:not(:has(img)) thead td { background: #eef8f1; font-weight: 700; }
.post-content table:not(:has(img)) tr:nth-child(even) td { background: #f8fbf9; }
.post-content table:not(:has(img)) td p { margin: 0; text-align: left; }
/* Bảng đã nằm trong khung cuộn .hhn-table-wrap: thead + tbody phải chung 1 lưới cột (display:table riêng từng khối làm dòng tiêu đề lệch
   cột thân bảng — khách báo iPhone 23/10); bỏ độ rộng từng ô dán từ Word (td width=239/260/281 + style % chỉ ở dòng đầu). */
/* Thử font cơ bản cho trang tin tức (danh sách /tin-tuc + bài viết) thay Nunito "mỏng quá" (khách 23/10; user chốt chỉ trang tin tức, header/footer giữ).
   Chỉ 2 mức thường / đậm: tiêu đề web để 800–900, khai "Arial" thẳng thì Windows lấy Arial Black (thiếu dấu tiếng Việt → mượn dấu Times New Roman, vỡ + nặng). */
@font-face { font-family: 'HH Base'; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('HelveticaNeue'), local('Roboto'), local('Roboto-Regular'); font-weight: 100 599; }
@font-face { font-family: 'HH Base'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 600 1000; }
body.pg-tin-tuc .hhn-content-wrap > :not(header):not(footer):not(.hhn-topbar) {
  --font-sans: 'HH Base', Arial, sans-serif;
  --font-serif: 'HH Base', Arial, sans-serif;
  font-family: 'HH Base', Arial, sans-serif;
}
.post-content .hhn-table-wrap > table { display: table !important; overflow: visible; margin: 0 !important; }
.post-content .hhn-table-wrap > table > thead { display: table-header-group !important; }
.post-content .hhn-table-wrap > table > tbody { display: table-row-group !important; }
.post-content .hhn-table-wrap > table td:not([style*="width"]), .post-content .hhn-table-wrap > table th:not([style*="width"]) { width: auto !important; }
.post-content .hhn-table-wrap > table td p { text-align-last: left; }
@media (max-width: 768px) {
  .post-content .hhn-table-wrap > table:has(tr > :nth-child(3)) { min-width: 640px; }
}
.post-content iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 20px 0; }

@media (max-width: 860px) { .pd-gallery-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 700px) {
  .pd-attr-row { flex-direction: column; gap: 4px !important; }
  .pd-attr-label { flex: none !important; }
}

@media (max-width: 600px) {
  .hhn-float-stack { right: 12px !important; bottom: 118px !important; gap: 10px !important; }
  .hhn-float-btn { width: 48px !important; height: 48px !important; }
}

/* ID/class "td-cart-toast" và "td-cart-bump" KHÔNG đổi tên theo theme — public/js/main.js
   (script core dùng chung, không phải riêng theme này) hardcode đúng 2 tên này để chạy hiệu ứng
   giỏ hàng. Theme chưa có main.js riêng nên vẫn dùng chung script gốc, phải giữ nguyên selector. */
@keyframes tdCartBump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.22); }
  55%      { transform: scale(0.92); }
}
.td-cart-bump { animation: tdCartBump 0.5s ease; }

#td-cart-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  background: #0C3A26;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(12, 58, 38, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 500;
  white-space: nowrap;
}
#td-cart-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) {
  #td-cart-toast { font-size: 12.5px; padding: 10px 18px; white-space: normal; text-align: center; max-width: calc(100vw - 40px); }
}

/* ===== Quầng sáng trang trí toàn site — ĐÚNG NGUYÊN theo mọi file .dc.html mẫu (4 khối .hh-orb,
   position:fixed, đứng yên khi cuộn trang) — trước đó chỉ có ở vài trang phụ, sai kiểu (absolute,
   scroll theo trang) và thiếu trang chủ hoàn toàn. Đặt 1 lần trong header.html, hiện xuyên suốt
   mọi trang qua #hhn-orbs. */
#hhn-orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#hhn-orbs .hh-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
/* Bọc toàn bộ nội dung thật ở z-index:1, tường minh cao hơn #hhn-orbs (z-index:0) — đúng cấu trúc
   2 lớp mọi file .dc.html mẫu đều dùng. Thiếu wrapper này (trước đó orbs chỉ để z-index:-1, nội
   dung không có z-index riêng) khiến quầng sáng không hiện ra trên trang thật — phát hiện 2026-09-17,
   xem KE_HOACH_CHUAN_HOA_GIAO_DIEN.md. */
/* Sticky footer: ép .hhn-content-wrap cao tối thiểu bằng khung nhìn thật, đẩy footer dính đáy khi
   nội dung ngắn hơn cửa sổ trình duyệt (VD /tin-tuc lúc còn ít bài, hoặc trang bài viết ngắn) —
   user xác nhận 2026-09-17 đây LÀ lỗi thật (chụp bằng Print Screen thường, không phải công cụ chụp
   full-page), nên bug KHÔNG phải do đơn vị vh tính sai theo khung chụp như nghi ngờ trước đó (đã
   từng revert nhầm vì suy đoán sai — xem lại lịch sử nếu bug tái diễn). */
.hhn-content-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* !important: footer.html có style="margin-top:20px" trực tiếp trên thẻ → thắng rule này, footer không dính đáy (trang ngắn như
   /khao-sat-suc-khoe footer nằm giữa màn hình — user báo 2026-09-28). Các khối nội dung đã có padding dưới riêng. */
.hhn-content-wrap > footer { margin-top: auto !important; }

/* ===== Hiệu ứng chuyển động khi tương tác/cuộn trang (2026-09-18, theo yêu cầu sếp qua task ERP
   #126: "hơi thiếu yếu tố chuyển động khi tương tác... rê lên sẽ có hiệu ứng nhẹ") =====
   Dùng chung 1 bộ class cho card sản phẩm/tin tức/dịch vụ/chuyên gia, nút CTA, logo đối tác — thêm
   class vào markup có sẵn (không đổi layout/màu), transition ngắn ~0.2s để không bị "giật". */

/* 2026-09-30: khách phàn nàn hiệu ứng "nhoi" (thẻ phóng to 6%, dòng SP dạng danh sách tràn lề) → GIẢM về mức nhẹ:
   chỉ nhấc 3px + bóng nhạt, KHÔNG phóng to/đổi độ rực màu; ảnh phóng 4%; nút chỉ đổi màu nhẹ. */
/* Mọi hiệu ứng :hover dưới đây chỉ trên máy có chuột (hover:hover) — iPhone giữ :hover ở thẻ vừa chạm → thẻ nhô 3px lệch hàng thẻ bên cạnh (user 23/10). */
.hhn-hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
.hhn-hover-lift:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(20,60,40,.12); transition-delay: 0s !important; }
}

.hhn-hover-zoom { overflow: hidden; }
.hhn-hover-zoom img { transition: transform .3s ease; }
@media (hover: hover) {
.hhn-hover-zoom:hover img { transform: scale(1.04); transition-delay: 0s !important; }
}

.hhn-hover-scale { transition: filter .15s ease; }
@media (hover: hover) {
.hhn-hover-scale:hover { filter: brightness(.95); transition-delay: 0s !important; }
}

/* Link dạng "Tìm hiểu thêm →" / "Xem tất cả" — chỉ scale/lift không đủ rõ vì là chữ trên nền trong
   suốt, thêm đổi màu đậm hơn + dịch nhẹ sang phải để nhận biết rõ đang hover (2026-09-18, theo yêu
   cầu bổ sung sau khi user thấy khó nhận biết). !important vì màu chữ đang set trực tiếp qua
   style="color:..." inline, specificity cao hơn class thường. */
.hhn-hover-link { transition: color .15s ease, transform .15s ease; display: inline-block; }
@media (hover: hover) {
.hhn-hover-link:hover { color: #135f33 !important; transform: translateX(2px); }
}

/* Icon tròn danh mục trang chủ — chỉ scale nguyên khối (hhn-hover-scale) không đủ rõ vì icon nhỏ,
   thêm hiệu ứng riêng: khối tròn nhô lên + phóng to rõ hơn (2026-09-18, user báo icon chỉ đổi màu
   không thấy chuyển động). Áp cho div khối tròn đầu tiên bên trong link .hhn-hover-scale. */
.hhn-hover-scale > div:first-child { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
@media (hover: hover) {
.hhn-hover-scale:hover > div:first-child { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,60,40,.14); background: #fff; }
}

/* Scroll-reveal: fade-in + trượt lên khi cuộn tới, kích hoạt qua JS thêm class .is-visible
   (IntersectionObserver, xem footer.html). Tôn trọng prefers-reduced-motion cho người dùng nhạy
   chuyển động.
   Ban đầu chỉ áp cho cả section 1 khối (translateY 24px) — user báo "chưa rõ ràng" (2026-09-18)
   vì cả khối to di chuyển 1 lần trông không khác gì tải trang chậm. Đã tăng khoảng cách trượt +
   thêm bản ".hhn-reveal-stagger" cho lưới (card sản phẩm/tin tức/icon danh mục): từng item trong
   lưới lần lượt hiện ra cách nhau ~70ms (hiệu ứng "xếp tầng" rõ ràng hơn nhiều so với cả khối hiện
   1 lần) — bọc THẺ CHA của các item (VD div.grid), không phải từng item, JS chỉ cần quan sát 1
   phần tử cha. */
/* 2026-09-30 (khách phàn nàn "nhoi"): chỉ mờ → rõ, KHÔNG trượt/thu nhỏ, các thẻ hiện cùng lúc (bỏ trễ lần lượt),
   chạy 1 lần khi khối xuất hiện lần đầu (JS footer.html bỏ theo dõi sau khi hiện). */
.hhn-reveal { opacity: 0; transition: opacity .35s ease; }
.hhn-reveal.is-visible { opacity: 1; }

.hhn-reveal-stagger > * { opacity: 0; transition: opacity .35s ease; }
.hhn-reveal-stagger.is-visible > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hhn-hover-lift, .hhn-hover-zoom img, .hhn-hover-scale, .hhn-reveal, .hhn-reveal-stagger > * {
    transition: none !important;
  }
  .hhn-reveal { opacity: 1; transform: none; }
  .hhn-reveal-stagger > * { opacity: 1; transform: none; }
}

/* Chữ dán từ Google Docs / Word mang sẵn font Arial, cỡ 11pt, màu đen → theo font/màu của web (trang Giới thiệu 09/10). */
[id^="docs-internal-guid"], [id^="docs-internal-guid"] span,
span[style*="font-family: Arial"], span[style*="font-family:Arial"] { font-family: inherit !important; color: inherit !important; }

/* ===== Flash Sale kiểu Long Châu — {{FLASH_SALE}} trang chủ + thanh trên trang chi tiết SP (Việc 15, 14/10) ===== */
.hhn-fs-wrap { padding-top: 0; }
.hhn-fs { --fs-primary: #e03131; --fs-frame: #ff7a1a; background: linear-gradient(180deg, var(--fs-frame) 0%, #ffb21e 60%, #ffd43b 100%); border-radius: 16px; padding: 0 14px 16px; box-shadow: 0 10px 30px rgba(255,122,26,.22); overflow: hidden; }
.hhn-fs-head { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; padding: 18px 0 14px; }
.hhn-fs-head.is-banner { padding: 0; margin: 0 -14px 14px; }
.hhn-fs-head.is-banner picture, .hhn-fs-head.is-banner img { display: block; width: 100%; aspect-ratio: 1216 / 120; object-fit: cover; object-position: top; }
.hhn-fs-rule { position: absolute; top: 0; right: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 14px; border-bottom-left-radius: 12px; text-decoration: none; }
.hhn-fs-title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; font-style: italic; font-size: 28px; letter-spacing: .5px; text-shadow: 0 2px 0 #d9480f, 0 4px 12px rgba(160,40,0,.35); }
.hhn-fs-title svg { color: #fff3bf; filter: drop-shadow(0 2px 0 #d9480f); }
.hhn-fs-cta { position: absolute; right: 6px; top: 50%; transform: translateY(-60%); background: linear-gradient(180deg, #ff4d2e, #e03131); color: #fff; font-weight: 800; font-size: 13px; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 0 #a61e1e; }
.hhn-fs-body { background: #f4f6fb; border-radius: 14px; padding: 0 12px 12px; overflow: hidden; }
/* tab: lưới 5 cột trên máy tính như Long Châu; tab đang chọn nền nhạt + gạch dưới 4px màu chính */
.hhn-fs-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 -12px 12px; background: #fff; box-shadow: 0 1px 0 0 #e9eaec; }
.hhn-fs-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 16px; border: 0; background: #fff; cursor: pointer; font-family: inherit; color: #4a4f63; }
.hhn-fs-tab b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.hhn-fs-tab span { font-size: 12.5px; font-weight: 500; }
.hhn-fs-tab.is-active { color: var(--fs-primary); background: color-mix(in srgb, var(--fs-primary) 8%, #fff); box-shadow: inset 0 -4px 0 0 var(--fs-primary); }
.hhn-fs-pane { display: none; }
.hhn-fs-pane.is-active { display: block; }
.hhn-fs-timer { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #1c1f2e; margin: 0 0 12px; }
.hhn-fs-timer b, .hhn-fs-pbar-r b { display: inline-block; min-width: 32px; text-align: center; background: var(--fs-primary); color: #fff; border-radius: 8px; padding: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 3px; }
.hhn-fs-trackwrap { position: relative; }
.hhn-fs-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 50px) / 6); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.hhn-fs-track::-webkit-scrollbar { display: none; }
.hhn-fs-pane.is-all .hhn-fs-track { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
.hhn-fs-pane.is-all .hhn-fs-nav { display: none; }
.hhn-fs-nav { position: absolute; top: 40%; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 22px; line-height: 1; cursor: pointer; color: #1c1f2e; }
.hhn-fs-nav.is-prev { left: -8px; }
.hhn-fs-nav.is-next { right: -8px; }
/* thẻ SP: nền trắng không viền, rê chuột hiện viền màu; nhãn -% dán góc trên-phải (bo góc dưới-trái) */
.hhn-fs-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 0 0 12px; text-decoration: none; color: #1c1f2e; min-width: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.hhn-fs-card:hover { border-color: var(--color-accent, #1f8a4c); box-shadow: 0 6px 18px rgba(20,20,60,.08); }
.hhn-fs-card.is-out { opacity: .6; }
.hhn-fs-card-top { display: none !important; }
.hhn-fs-brand { display: none !important; }
.hhn-fs-pct,
.hhn-pcard-pct { position: absolute !important; top: 0 !important; right: 0 !important; z-index: 3 !important; background: linear-gradient(302.86deg, #ed2415 16.68%, #ec8a49 94.84%) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-bottom-left-radius: 12px !important; border-top-right-radius: 12px !important; text-shadow: rgba(0,0,0,.25) .5px .5px 0 !important; line-height: 1.2 !important; pointer-events: none !important; }
.hhn-fs-cat-tag { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 700; color: #1f6b3f; background: #eaf7ee; border: 1px solid #c7ecd6; border-radius: 999px; padding: 2px 10px; margin: 8px 12px 4px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhn-fs-img { position: relative !important; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f7f7fb; overflow: hidden; padding: 0 !important; margin: 4px 4px 0; border-radius: 12px; }
.hhn-fs-img img { width: 100%; height: 100%; object-fit: contain; }
.hhn-fs-name, .hhn-fs-price, .hhn-fs-old, .hhn-fs-bar, .hhn-fs-buy { margin-left: 12px; margin-right: 12px; }
.hhn-fs-name { font-size: 14px; font-weight: 600; line-height: 1.4; height: 4.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 6px; }
.hhn-fs-price { font-size: 15.5px; font-weight: 700; color: #1f8a4c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hhn-fs-price small { font-size: 12.5px; font-weight: 400; }
.hhn-fs-old { font-size: 12.5px; color: #8c92a4; text-decoration: line-through; }
/* thanh suất: cao 16px, nền hồng, phần đã bán gradient đỏ-cam, ngọn lửa ở đầu */
.hhn-fs-bar { position: relative; height: 16px; border-radius: 100px; background: #f78d83; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 12px; margin-bottom: 12px; }
.hhn-fs-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 100px; background: linear-gradient(302.86deg, #ed2415 16.68%, #ec8a49 94.84%); }
.hhn-fs-fire { position: absolute; left: 4px; top: 3px; }
.hhn-fs-bar span { position: relative; font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: rgba(0,0,0,.35) .5px .5px; white-space: nowrap; padding-left: 8px; }
.hhn-fs-bar.is-soon { background: #f78d83; }
.hhn-fs-bar.is-out { background: #e4e6ec; }
.hhn-fs-bar.is-out span { color: #5a6b64; text-shadow: none; padding-left: 0; }
.hhn-fs-buy { display: flex; align-items: center; justify-content: center; height: 36px; background: #1f8a4c; color: #fff; font-weight: 500; font-size: 14px; border-radius: 50px; margin-top: auto; }
.hhn-fs-card.is-out .hhn-fs-buy { background: #9aa8a2; }
.hhn-fs-more { display: flex; align-items: center; gap: 4px; margin: 12px auto 0; background: none; border: 0; color: #1c1f2e; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hhn-fs-more span { font-size: 16px; }
.hhn-fs-pbar { --fs-primary: #e03131; --fs-frame: #ff7a1a; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; background: linear-gradient(90deg, var(--fs-frame), #ffb21e); border-radius: var(--radius-card, 12px); padding: 10px 14px; margin-bottom: 10px; color: #fff; }
.hhn-fs-pbar-l { display: flex; align-items: center; gap: 6px; font-style: italic; font-size: 17px; font-weight: 900; text-shadow: 0 1px 0 #d9480f; }
.hhn-fs-pbar-r { justify-self: end; font-size: 13px; font-weight: 600; }
.hhn-fs-pbar .hhn-fs-bar { grid-column: 1 / -1; margin: 0; }
.hhn-fs-pbar-r b { min-width: 26px; font-size: 13px; padding: 2px 4px; }
@media (max-width: 1100px) {
  .hhn-fs-track { grid-auto-columns: calc((100% - 30px) / 4); }
  .hhn-fs-pane.is-all .hhn-fs-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hhn-fs-wrap { padding-top: 0; }
  .hhn-fs { padding: 0 8px 10px; border-radius: 14px; }
  .hhn-fs-head { justify-content: flex-start; padding: 12px 4px 10px; }
  .hhn-fs-head.is-banner { margin: 0 -8px 10px; }
  .hhn-fs-head.is-banner picture, .hhn-fs-head.is-banner img { aspect-ratio: 375 / 100; }
  .hhn-fs-title { font-size: 20px; }
  .hhn-fs-cta { position: static; transform: none; margin-left: auto; font-size: 11.5px; padding: 6px 12px; }
  .hhn-fs-body { padding: 0 8px 10px; }
  .hhn-fs-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -8px 10px; }
  .hhn-fs-tabs::-webkit-scrollbar { display: none; }
  .hhn-fs-tab { flex: 1 0 auto; padding: 8px 12px; }
  .hhn-fs-tab b { font-size: 12.5px; }
  .hhn-fs-tab span { font-size: 11.5px; }
  .hhn-fs-name { font-size: 13px; }
  .hhn-fs-name, .hhn-fs-price, .hhn-fs-old, .hhn-fs-bar, .hhn-fs-buy { margin-left: 8px; margin-right: 8px; }
  .hhn-fs-track { grid-auto-columns: calc((100% - 10px) / 2.3); gap: 8px; }
  .hhn-fs-pane.is-all .hhn-fs-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hhn-fs-nav { display: none; }
  .hhn-fs-card { padding-bottom: 8px; }
}

/* ===== BẢNG CHUẨN KHÓA KHUNG CHỐNG TRÀN (20/10) ===== */
.hhn-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  background: #fff;
}
.hhn-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.hhn-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}
.hhn-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.hhn-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.hhn-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  margin: 0 !important;
  background: #fff;
}
.hhn-table th,
.hhn-table thead tr td {
  background: #135f33 !important;
  color: #fff !important;
  font-weight: 700;
  padding: 12px 14px;
  border: 1px solid #135f33 !important;
  vertical-align: middle;
}
.hhn-table th strong, .hhn-table th b,
.hhn-table thead tr td *, .hhn-table th * {
  color: #fff !important;
}
.hhn-table td {
  padding: 11px 14px;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle;
}
.hhn-table tbody tr:nth-child(even) td {
  background-color: #f8fafc !important;
}
.hhn-table tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}
.hhn-table:not(:has(thead)) tbody tr:first-child td,
.hhn-table:not(:has(thead)) tr:first-child td {
  background-color: #135f33 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #135f33 !important;
}
.hhn-table:not(:has(thead)) tbody tr:first-child td *,
.hhn-table:not(:has(thead)) tr:first-child td * {
  color: #ffffff !important;
}
.hhn-table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) td {
  background-color: #f8fafc !important;
}
.hhn-table:not(:has(thead)) tbody tr:nth-child(even) td {
  background-color: #ffffff !important;
}
@media (hover: hover) {
  .hhn-table tbody tr:hover td {
    background-color: #f1f5f9 !important;
  }
}
.hhn-table img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  margin: 0 auto;
}
/* Đóng băng cột đầu khi bảng cuộn ngang (26/10: bảng gắn .hhn-table-freeze hoặc bảng ≥ 3 cột trên điện thoại ≤ 768px) */
.hhn-table.hhn-table-freeze tr > :first-child:not([colspan]) {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: inset -1px 0 0 #cbd5e1, 2px 0 6px -2px rgba(15, 23, 42, 0.08);
}
.hhn-table.hhn-table-freeze thead tr > :first-child:not([colspan]),
.hhn-table.hhn-table-freeze:not(:has(thead)) tr:first-child > :first-child:not([colspan]) {
  z-index: 3;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.28), 2px 0 6px -2px rgba(15, 23, 42, 0.18);
}
@media (max-width: 768px) {
  .hhn-table-wrap {
    margin: 16px 0;
    border-radius: 8px;
  }
  .hhn-table {
    font-size: 13px;
  }
  .hhn-table th, .hhn-table td {
    padding: 9px 11px;
  }
  .post-content .hhn-table-wrap > table:has(tr > :nth-child(3)):not(.hhn-no-freeze) tr > :first-child:not([colspan]) {
    position: sticky;
    left: 0;
    z-index: 2;
    max-width: 38vw;
    box-shadow: inset -1px 0 0 #cbd5e1, 2px 0 6px -2px rgba(15, 23, 42, 0.08);
  }
  .post-content .hhn-table-wrap > table:has(tr > :nth-child(3)):not(.hhn-no-freeze) thead tr > :first-child:not([colspan]),
  .post-content .hhn-table-wrap > table:has(tr > :nth-child(3)):not(.hhn-no-freeze):not(:has(thead)) tr:first-child > :first-child:not([colspan]) {
    z-index: 3;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.28), 2px 0 6px -2px rgba(15, 23, 42, 0.18);
  }
}

/* Khung Frame Banner đè lên ảnh sản phẩm ngoài web (PNG/SVG 1:1 theo chuẩn Long Châu / E-commerce) */
.hhn-hover-zoom.has-frame > img:not(.hhn-pframe),
.hhn-hover-zoom:has(.hhn-pframe) > img:not(.hhn-pframe),
.hhn-fs-img.has-frame > img:not(.hhn-pframe),
.hhn-fs-img:has(.hhn-pframe) > img:not(.hhn-pframe) {
  width: 80% !important;
  height: 80% !important;
  object-fit: contain !important;
  margin: auto !important;
  transition: transform .3s ease;
}


.hhn-pframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: inherit;
  transition: transform .3s ease;
}

@media (hover: hover) {
.hhn-hover-zoom:hover .hhn-pframe,
.hhn-fs-card:hover .hhn-pframe {
  transform: scale(1.02);
}

.hhn-hover-zoom.has-frame:hover > img:not(.hhn-pframe),
.hhn-hover-zoom:has(.hhn-pframe):hover > img:not(.hhn-pframe),
.hhn-fs-card:hover .hhn-fs-img > img:not(.hhn-pframe) {
  transform: scale(1.04);
}
}

/* ===== Điện thoại / máy cảm ứng: bỏ hiệu ứng làm mờ nặng (anh Dương 22/10: "phần thu phóng của giao diện mobile cũng không tốt, nếu lấy 2 ngón tay zoom-in
   và zoom-out thì cấu trúc css bị vỡ và trình duyệt báo lỗi không phản hồi" — iPhone Chrome "Không thể mở trang này" = tab WebKit sập vì hết bộ nhớ đồ hoạ).
   Đo trang chủ 390px: 4 .hh-orb (380–600px, filter blur 70px) trong lớp fixed phủ màn hình + 19 khối backdrop-filter blur(22px) (~840.000px², ×9 ở màn
   DPR 3) → mỗi lần chụm phóng to phải vẽ lại toàn bộ ở độ phân giải cao. Quả cầu vốn là radial-gradient mờ dần nên bỏ filter gần như không đổi hình; kính mờ
   thay bằng nền trắng đậm hơn. GIỮ backdrop-filter của <header> (nhỏ + là khối chứa của gợi ý tìm kiếm position:fixed, xem dòng ~364). Không khoá zoom. */
@media (hover: none) and (pointer: coarse), (max-width: 860px) {
  #hhn-orbs .hh-orb { filter: none !important; }
  body *:not(header) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hhn-glass, .hhn-tab { background: rgba(255,255,255,.8) !important; }
  .hhn-tab.is-active { background: #1f8a4c !important; }
}

/* Ẩn bong bóng chat Pancake/Zalo khi khách đang mở hộp tìm kiếm — tránh đè lên danh sách gợi ý trên điện thoại (anh Dương 26/10). */
body.hhn-search-open #pancake-chat-plugin-root,
body.hhn-search-open .pkcp-parent-container,
body.hhn-search-open .zalo-chat-widget {
  display: none !important;
}