/*
Theme Name: BestProducts Child
Theme URI: https://bestproducts.org
Description: Child theme của affiliateCMS-theme cho BestProducts. Design system đen trắng (Wirecutter-style), port từ mock.css. Màu đổi qua remap token cha ở :root.
Author: BestProducts
Template: affiliateCMS-theme
Version: 0.1.0
Text Domain: bestproducts-child
*/

/* ============================================================
 * TOKEN: brand B&W (từ mock.css) + REMAP token theme cha (--color-*)
 * và plugin AffiliateCMS Pro (--acms-*). Child nạp sau -> :root này thắng.
 * Đổi cả site bằng 1 chỗ. KHÔNG hardcode hex rời trong component.
 * ============================================================ */
:root{
  /* Brand: B&W + đỏ #e71d1d (accent). Đổi màu chủ đạo bằng --gold/--gold-deep + token cha bên dưới. */
  --navy:#111111; --ink:#1a1a1a; --ink-soft:#404040; --muted:#6e6e6e; --line:#e4e4e4; --bg:#fff;
  --panel:#f6f6f6; --gold:#e71d1d; --gold-deep:#c41414; --link:#1a1a1a; --sale:#e71d1d; --good:#1e8e5a;
  --maxw:1200px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* THANG CHỮ TIÊU ĐỀ, một bộ token duy nhất cho toàn site (thêm 2026-09-03).
     Trước đây 6 phần tự viết cỡ chữ riêng nên cấp bậc đá nhau: h3 nội dung (19px)
     nhỏ hơn h3 tên sản phẩm trong card (21px), tức nhìn thấy ngược cấp bậc HTML.
     Đổi cỡ chữ CHỈ sửa ở đây, không rải px vào từng rule. Bản mobile override
     lại chính các token này trong @media(max-width:640px) ở cuối file. */
  --fs-h2:26px;        /* h2 trong thân bài + trang tĩnh */
  --fs-h3:22px;        /* h3 nội dung, phải LỚN HƠN --fs-card để đúng cấp bậc */
  --fs-card-lg:30px;   /* tiêu đề card nổi bật (featured trang chủ) */
  --fs-card:21px;      /* tên sản phẩm trong pick card */
  --fs-card-sm:18px;   /* tiêu đề card trong lưới */
  --fs-sechead:22px;   /* nhãn section trang chủ */

  /* Remap token theme cha (affiliateCMS-theme, assets/css/core/tokens.css) -> B&W + đỏ accent */
  --color-primary:#e71d1d; --color-primary-hover:#c41414; --color-primary-dark:#c41414;
  --color-primary-light:#fdeaea; --color-primary-rgb:231,29,29;
  --color-accent:#e71d1d; --color-accent-hover:#c41414; --color-accent-light:#fdeaea;
  --color-success:#1e8e5a; --color-success-light:#e3f3ec;
  --color-warning:#8a6d1a; --color-error:#c0392b; --color-info:#1a1a1a;
  --color-text:#1a1a1a; --color-text-secondary:#404040; --color-text-muted:#6e6e6e; --color-text-subtle:#8a8a8a;
  --color-bg:#ffffff; --color-bg-alt:#f6f6f6; --color-surface:#f6f6f6; --color-surface-raised:#ffffff; --color-surface-hover:#f0f0f0;
  --color-border:#e4e4e4; --color-border-subtle:#efefef; --color-border-strong:#d4d4d4;
  --font-sans:var(--font);

  /* Remap token plugin AffiliateCMS Pro (frontend.css) -> đỏ accent + sao đỏ */
  --acms-primary-rgb:231,29,29; --acms-star-active:#e71d1d; --acms-border:#e4e4e4;
}

/* ============================================================
 * BASE
 * ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.cat{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gold-deep)}
.date{font-size:12px;color:var(--muted);font-weight:400;font-family:Georgia,'Times New Roman',serif}
.byline{font-size:15px;color:var(--muted);font-weight:400}
.byline a{color:var(--link);font-weight:700}
.accent-h{font-weight:700;letter-spacing:-.02em;border-top:3px solid var(--gold);padding-top:10px;display:block;text-transform:uppercase}

/* ============================================================
 * HEADER
 * ============================================================ */
header.site{position:sticky;top:0;z-index:40;background:#fff}
html{scroll-padding-top:130px} /* anchor jump (In this guide) chừa chỗ cho sticky header */
@media(max-width:640px){html{scroll-padding-top:75px}}
.topbar{border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:72px}
/* Logo: wordmark hai dòng, "Best" trong khối đỏ bo lệch, dải sao điểm số ở dưới.
   Markup do pf_logo() sinh ra, mọi kích thước ăn theo font-size của .logo. */
.logo{font-family:'Montserrat',-apple-system,Arial,sans-serif;font-weight:800;font-size:33px;line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.08em}
.logo img{height:39px;width:auto}
.logo .logo-row{display:flex;align-items:baseline;white-space:nowrap}
/* Nền đỏ là lớp ::before nằm sau chữ, nên đổi hình khối không đụng tới chữ */
.logo .logo-bx{position:relative;display:inline-block;color:#fff;padding:.02em .17em .02em .15em;z-index:0}
.logo .logo-bx::before{content:"";position:absolute;inset:-.04em -.02em;background:var(--gold);z-index:-1;border-radius:.42em .09em .42em .09em}
.logo .logo-score{display:inline-flex;align-items:center;gap:.055em;padding-left:.03em}
.logo .logo-score svg{height:.26em;width:auto;flex:none;display:block}
.logo .lsf svg{fill:var(--gold)}
.logo .lse svg{fill:var(--ink);opacity:.22}
footer.site .logo .lse svg{fill:#fff;opacity:.34}
/* Nhấp nháy sao: chu kỳ trên 1 giây, tức dưới 3 lần mỗi giây (WCAG 2.3.1) */
.logo .blink-last .d5 svg{animation:pfLastStar 1.8s ease-in-out infinite}
@keyframes pfLastStar{0%,100%{fill:var(--ink);opacity:.22}45%,62%{fill:var(--gold);opacity:1}}
footer.site .logo .blink-last .d5 svg{animation-name:pfLastStarDark}
@keyframes pfLastStarDark{0%,100%{fill:#fff;opacity:.34}45%,62%{fill:var(--gold);opacity:1}}
/* Sóng chạy: sao nghỉ ở trạng thái mờ, đợt sóng chạy qua làm từng sao sáng đầy
   rồi phồng nhẹ, giống thanh điểm đang được chấm dần. */
.logo .blink-wave .lsf svg{opacity:.55;animation:pfWaveStar 2.4s ease-in-out infinite}
.logo .blink-wave .lse svg{opacity:.2;animation:pfWaveStarDim 2.4s ease-in-out infinite}
.logo .blink-wave .d2 svg{animation-delay:.13s}.logo .blink-wave .d3 svg{animation-delay:.26s}
.logo .blink-wave .d4 svg{animation-delay:.39s}.logo .blink-wave .d5 svg{animation-delay:.52s}
@keyframes pfWaveStar{0%,40%,100%{transform:scale(1);opacity:.55}12%{transform:scale(1.3);opacity:1}}
@keyframes pfWaveStarDim{0%,40%,100%{transform:scale(1);opacity:.2}12%{transform:scale(1.2);opacity:.5}}
.logo .blink-breath{animation:pfBreathe 2.6s ease-in-out infinite}
@keyframes pfBreathe{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .logo .blink-last .d5 svg,.logo .blink-wave .lsf svg,.logo .blink-wave .lse svg,.logo .blink-breath{animation:none!important}
  .logo .blink-wave .lsf svg{opacity:1}.logo .blink-wave .lse svg{opacity:.22}
}
.searchpill{margin-left:auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #d4d4d4;border-radius:22px;padding:9px 18px;min-width:320px;color:var(--muted);font-size:13.5px}
.searchpill input{border:none;background:none;outline:none;font:inherit;color:var(--ink);width:100%}
.searchpill button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0;display:flex}
.navbar{background:var(--gold);position:relative}
.navbar .wrap{display:flex;align-items:center;height:44px;position:relative}
.navbar nav{display:flex;position:relative;z-index:2}
.navbar .ni{position:static}
.navbar .ni > a,.navbar .right a{font-size:14px;font-weight:600;color:#fff;padding:0 15px;line-height:44px;display:block;letter-spacing:normal}
.navbar .ni:first-child > a{padding-left:0}
.navbar .ni:hover > a{color:#fff;box-shadow:inset 0 -3px 0 #ffffff}
.navbar .submenu{position:absolute;top:100%;left:0;right:auto;width:720px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);box-shadow:0 20px 34px rgba(0,0,0,.18);border-radius:0 0 5px 5px;padding:20px 26px 24px;display:none;column-count:3;column-gap:30px;z-index:60}
.navbar .ni:hover .submenu{display:block}
.navbar .submenu a{display:block;padding:7px 10px;font-size:14px;font-weight:400;color:#1a1a1a;line-height:1.4;border-radius:5px;break-inside:avoid}
/* Tên danh mục Trends dài hơn taxonomy cũ (Mass Merchants & Department Stores...).
   nowrap làm chữ tràn sang cột bên cạnh, nên cho phép xuống dòng trong cột. */
.navbar .submenu a{overflow-wrap:anywhere}
.navbar .submenu a:hover{background:#f0f0f0;color:#000000}
.navbar .submenu.allcats{column-count:4;width:min(1120px,calc(100vw - 24px))}
.navbar .submenu.allcats a{font-weight:500}
.navbar .right{margin-left:auto;display:flex;position:relative;z-index:2}
.navbar .right a{color:#fff;font-weight:800}
.navbar .right a:hover{color:#fff}
.m-searchbtn{display:none;align-items:center;justify-content:center;width:42px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--navy);font-size:17px;background:#fff;cursor:pointer;margin-left:auto;flex:none}
.mobile-search{display:none;background:#fff;border-top:1px solid var(--line);padding:12px 24px}
.msearch-toggle:checked ~ .mobile-search{display:block}
.mobile-search .m-search{display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--line);border-radius:22px;color:var(--muted);font-size:13.5px}
.mobile-search .m-search input{border:none;outline:none;font:inherit;width:100%;background:none}
/* FTC affiliate disclosure bar: band toàn width dưới header, text căn giữa */
.ftc-bar{background:var(--panel);border-bottom:1px solid var(--line);text-align:center;padding:9px 16px}
.ftc-bar p{max-width:1200px;margin:0 auto;font-size:12.5px;color:var(--muted);line-height:1.45}
.ftc-bar a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ftc-bar a span{margin-left:3px;text-decoration:none}
.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--navy);font-size:19px;cursor:pointer;background:#fff;flex:none}
.hamburger .ic-close{display:none}
.mnav-toggle:checked ~ .topbar .hamburger .ic-open{display:none}
.mnav-toggle:checked ~ .topbar .hamburger .ic-close{display:inline-block}
/* Override .mobile-nav của theme cha (drawer fixed 100vh/320px) -> dropdown normal-flow (mockup). */
.mobile-nav{display:none;background:var(--gold);border-top:1px solid rgba(255,255,255,.25);box-shadow:0 14px 26px rgba(0,0,0,.13);position:static;height:auto;max-width:none;inset:auto;transform:none;flex-direction:column;z-index:auto}
/* Menu mobile phải TỰ CUỘN được.
   Nó nằm trong header `position:sticky` và chứa tới 252 link (17 nhóm cộng 216 mục con), nên để
   `height:auto` là nó cao hàng nghìn pixel, header dính cứng không cuộn tới đáy được và thao tác
   kéo xuống bị loạn. Chừa đúng chiều cao thanh header (72px desktop, 60px từ 640px trở xuống).
   `dvh` thay `vh` vì trên di động thanh địa chỉ co giãn, dùng `vh` thì đáy menu bị khuất dưới nó.
   `overscroll-behavior:contain` chặn việc cuộn hết menu rồi trang nền cuộn theo. */
.mobile-nav{max-height:calc(100vh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@supports(height:100dvh){.mobile-nav{max-height:calc(100dvh - 72px)}}
.mnav-toggle:checked ~ .mobile-nav{display:block}
.mobile-nav a{display:block;padding:13px 24px;font-size:14px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-nav a:active,.mobile-nav a:hover{background:rgba(255,255,255,.14)}
.mobile-nav a.gold{color:#fff}
.mobile-nav .m-sep{padding:12px 24px 6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.9)}
.mobile-nav details summary{list-style:none;padding:13px 24px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-nav details summary::-webkit-details-marker{display:none}
.mobile-nav details summary::after{content:'+';font-size:19px;color:rgba(255,255,255,.9);font-weight:400;line-height:1}
.mobile-nav details[open] summary{color:#fff}
.mobile-nav details[open] summary::after{content:'\2212'}
.mobile-nav .sub{background:rgba(0,0,0,.12)}
.mobile-nav .sub a{padding:11px 24px 11px 38px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
/* Nav ngang can 809px noi dung nen chi hien tu 981px. Duoi do dung drawer.
   Search van doi o moc 640px nhu cu. */
@media(min-width:981px){.mobile-nav{display:none!important}}
@media(min-width:641px){.mobile-search{display:none!important}}

/* ============================================================
 * HERO: 3 columns (homepage)
 * ============================================================ */
.hero{display:grid;grid-template-columns:255px 1fr 290px;gap:30px;padding:26px 0 34px}
.col-h{font-size:15px;margin-bottom:14px}
.latest .it{padding:11px 0;border-bottom:1px solid var(--line)}
.latest .it:first-of-type{padding-top:0}
.latest .meta{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.latest .it a.h{font-size:16px;font-weight:700;line-height:1.32;display:block}
.latest .it a.h:hover{color:var(--gold-deep)}
.feat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.feat h3{font-size:var(--fs-card-lg);font-weight:600;line-height:1.16;letter-spacing:-.01em;margin:12px 0 10px}
.feat p{font-size:16px;color:var(--ink-soft);line-height:1.4;margin-bottom:14px}
.feat .feat-meta{margin-top:12px}

/* Tagline band with search */
.tagline{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 20px;text-align:center}
.tagline h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em;margin-bottom:20px}
.tagline form{display:flex;justify-content:center;max-width:620px;margin:0 auto}
.tagline input{flex:1;border:1px solid #d4d4d4;border-right:none;border-radius:5px 0 0 5px;padding:14px 16px;font:inherit;outline:none}
.tagline button{border:none;background:var(--gold);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:0 28px;border-radius:0 5px 5px 0;cursor:pointer}
.tagline button:hover{background:var(--gold-deep);color:#fff}

/* Section shell */
section.blk{padding:24px 0}
.sechead{margin-bottom:8px}
.sechead h2{font-size:var(--fs-sechead)}
.sechead p{font-size:13.5px;color:var(--ink-soft);margin:8px 0 20px;max-width:80ch}
.sechead.rowend{display:flex;justify-content:space-between;align-items:center}

/* Trending flat cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.acard .imgwrap{aspect-ratio:16/9;overflow:hidden}
.acard img{width:100%;height:100%;object-fit:cover}
.acard .meta{display:flex;gap:9px;align-items:center;margin:11px 0 6px}
.acard h2,.acard h3{font-size:var(--fs-card-sm);font-weight:600;line-height:1.28;letter-spacing:.02px;margin-bottom:7px}
.acard p{font-size:15px;color:var(--ink-soft);line-height:1.4;margin-bottom:8px}
.acard .byline{display:block;margin:6px 0 8px}

/* Newsletter */
.news{background:var(--navy);color:#fff;padding:26px 32px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.news .l{max-width:460px}
.news .news-title{font-size:19px;font-weight:800}.news .news-title b{color:#fff}
.news .wk{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#fff;text-transform:uppercase}
.news p{color:rgba(255,255,255,.78);font-size:12.5px;margin-top:5px}
.news form{margin-left:auto;display:flex;gap:0}
.news input{border:none;border-radius:4px 0 0 4px;padding:11px 14px;font:inherit;min-width:230px;outline:none}
.news button{border:none;background:var(--gold);color:#fff;font-weight:800;font-size:13px;padding:0 20px;border-radius:0 4px 4px 0;cursor:pointer}
.news button:hover{background:var(--gold-deep)}
.news-wrap{padding-top:40px;padding-bottom:14px}

/* Browse categories */
.catblock{padding:16px 0}
.catblock .ch{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px;border-top:3px solid var(--gold);padding-top:16px}
.catblock .ch .cat-title{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.08;margin:0;text-transform:uppercase}
.catblock .ch .cat-title a{color:inherit;text-decoration:none}
.catblock .ch .cat-title a:hover{text-decoration:underline}
.catblock .subs{font-size:16px;color:var(--ink-soft);font-weight:600}
.catblock .subs a{color:var(--link);font-weight:700;text-decoration:underline}
.catblock .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:40px}
.lead img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:11px}
.lead .date{margin-bottom:6px;display:block}
.lead h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.lead p{font-size:15px;color:var(--ink-soft);line-height:1.4;margin:8px 0 7px}
.clist{border-left:1px solid var(--line);padding-left:36px;display:flex;flex-direction:column}
.clist .ci{padding:12px 0;border-bottom:1px solid var(--line)}
.clist .ci:first-child{padding-top:0}
.clist .ci .date{display:block;margin-bottom:4px}
.clist .ci .ci-title{font-size:16px;font-weight:600;line-height:1.3}
.clist .vall{margin-top:14px;font-size:12.5px;font-weight:800;color:var(--link);text-decoration:underline}

/* Card layout variants (dùng chung) */
.variant-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-deep);background:#f6f6f6;border:1px solid #e4e4e4;padding:2px 8px;border-radius:999px;margin-left:10px;vertical-align:middle}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.compact-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.compact-list .crow{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.compact-list .crow img{width:88px;height:62px;object-fit:cover;background:var(--panel);flex:none}
.compact-list .crow .date{display:block;margin-bottom:4px}
.compact-list .crow h4{font-size:16px;font-weight:600;line-height:1.32}
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
.carousel .acard{flex:0 0 300px;scroll-snap-align:start}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-track{background:var(--panel);border-radius:4px}
.carousel::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}

/* Who */
.who{background:var(--navy);color:#fff;padding:52px 0}
.who .who-title{font-size:27px;font-weight:900;text-align:center;margin-bottom:12px;color:#fff}
.who .sub{text-align:center;color:rgba(255,255,255,.82);font-size:14px;max-width:76ch;margin:0 auto 8px}
.who .stats{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;margin:28px 0 34px}
.who .stat b{display:block;font-size:32px;font-weight:900;color:#fff;letter-spacing:-.02em}
.who .stat span{font-size:12px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.who .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:38px}
.who .pillar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:24px;text-align:center}
.who .pillar img{height:52px;margin:0 auto 14px}
.who .pillar .pillar-title{font-size:15px;font-weight:800;margin-bottom:7px}
.who .pillar p{font-size:12.5px;color:rgba(255,255,255,.72)}
.who .teamlbl{text-align:center;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:18px}
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.team .m{text-align:center}
.team .m img{width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 9px;border:3px solid rgba(255,255,255,.35)}
.team .m b{display:block;font-size:12.5px;font-weight:800}
.team .m span{font-size:11px;color:rgba(255,255,255,.62)}
.page-body .team-light{margin:24px 0 10px}
.team-light .m img{border-color:var(--gold)}
.team-light .m b a{color:var(--ink);text-decoration:none;font-weight:800}
.team-light .m b a:hover{color:var(--gold)}
.team-light .m span{color:var(--muted)}

/* ============================================================
 * FOOTER
 * ============================================================ */
footer.site{background:#0d0d0d;color:#b0b0b0;padding:44px 0 26px}
footer.site .ftop{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .logo{color:#fff;font-size:30px;height:auto;margin-bottom:14px}
footer.site .logo img{height:39px;margin-bottom:14px}
footer.site p.desc{font-size:13px;color:#838383;max-width:38ch}
.social{display:flex;gap:9px;margin-top:14px}
.social a{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:13px;color:#fff;font-weight:800}
.social a:hover{background:#fff;color:#111}
footer.site .cols{display:flex;gap:54px;flex-wrap:wrap}
footer.site h5{color:#fff;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site li a{font-size:13px;color:#b0b0b0}
footer.site li a:hover{color:#fff}
footer.site .fine{font-size:11.5px;color:#757575;padding-top:18px;line-height:1.7}
footer.site .fine a{color:#b0b0b0;text-decoration:underline}

/* ============================================================
 * CATEGORY / ARCHIVE
 * ============================================================ */
.breadcrumb-wrap{padding-top:18px}
.breadcrumb{font-size:13px;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--link)}
.breadcrumb a:hover{text-decoration:underline}
.cat-hero{padding:12px 0 14px}
.cat-hero h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin-bottom:12px}
.cat-intro{font-size:17px;font-weight:400;color:var(--ink-soft);width:100%;line-height:1.5;margin-bottom:18px}
.cat-subnav{display:flex;flex-wrap:wrap;gap:6px 18px}
.cat-subnav a{font-size:14px;font-weight:700;color:var(--link)}
.cat-subnav a:hover{text-decoration:underline}
/* Related categories: noi cheo sang nhom cha khac cho danh muc chong lan (Tablets,
   Gaming Headsets, Portable Power Stations). Dung token brand, khong hardcode hex. */
.cat-related-title{font-size:var(--fs-sechead);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding-top:18px;margin-bottom:13px;border-top:2px solid var(--gold)}
.cat-related-list{display:flex;flex-wrap:wrap;gap:10px}
.cat-related-list a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.cat-related-list a:hover{border-color:var(--gold);color:var(--gold)}
.guide-body{width:100%;font-size:16px;color:var(--ink-soft);line-height:1.6}
.guide-body p{margin-bottom:14px}
.guide-body h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:22px 0 8px}

/* Load more (leaf category, infinite scroll) */
.loadmore{text-align:center;padding:28px 0 4px}
.btn-loadmore{font-family:inherit;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:6px;padding:12px 34px;cursor:pointer}
.btn-loadmore:hover{background:var(--navy);color:#fff}
.btn-loadmore[disabled]{opacity:.5;cursor:default}
.loadmore-note{font-size:13px;color:var(--muted);margin-top:12px}

/* Tag / Archive / Author (kế thừa leaf) */
.author-hero{display:flex;gap:24px;align-items:flex-start;padding:16px 0 18px}
.author-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--gold)}
.author-info{flex:1;min-width:0}
.author-info h1{font-size:38px;font-weight:700;letter-spacing:-1px;text-transform:uppercase;line-height:1.05;margin-bottom:4px}
.author-role{font-size:15px;color:var(--ink);margin-bottom:10px}
.author-meta{display:flex;gap:24px;margin-top:12px;font-size:14px;color:var(--muted)}
.author-meta b{color:var(--ink)}

/* Static PAGE */
.page-body{font-size:16px;color:var(--ink-soft);line-height:1.65;width:100%}
.page-body h2{font-size:var(--fs-h2);font-weight:700;color:var(--ink);letter-spacing:-.3px;margin:28px 0 10px}
.page-body h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:22px 0 8px}
.page-body p{margin-bottom:14px}
.page-body ul,.page-body ol,.guide-body ul,.guide-body ol{margin:0 0 16px;padding-left:24px}
.page-body ul,.guide-body ul{list-style:disc}
.page-body ol,.guide-body ol{list-style:decimal}
.page-body li,.guide-body li{margin-bottom:7px}
.page-body li::marker,.guide-body li::marker{color:var(--muted)}
.page-body ul ul,.page-body ol ol,.page-body ul ol,.page-body ol ul{margin:6px 0}
.page-body a{color:var(--link);font-weight:700;text-decoration:underline}
.page-body a:hover{color:var(--gold)}
article.page{max-width:668px;margin:0 auto}
article.page h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin-bottom:12px}

/* Search box (search + 404) */
.results-search{display:flex;align-items:center;gap:10px;max-width:560px;margin:6px 0 14px;border:1px solid #d4d4d4;border-radius:8px;padding:0 6px 0 14px;color:var(--muted)}
.results-search input{flex:1;border:none;outline:none;font:inherit;color:var(--ink);padding:12px 0;background:none}
.results-search button{border:none;background:var(--gold);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:12px;padding:9px 18px;border-radius:6px;cursor:pointer}
.results-search button:hover{background:var(--gold-deep);color:#fff}

/* 404 */
.err-404{text-align:center;padding:40px 0 30px}
.err-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.err-code{font-size:120px;font-weight:800;line-height:1;color:var(--gold);letter-spacing:-4px}
.err-404 h1{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:-.6px;margin:6px 0 10px}
.err-msg{font-size:16px;color:var(--ink-soft);line-height:1.5;margin-bottom:20px}
.err-404 .results-search{margin:0 auto 18px;width:100%}
.err-popular{margin-top:22px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center}
.err-popular a{color:var(--link);font-weight:700}

/* ============================================================
 * POST DETAIL (roundup / guide / review)
 * ============================================================ */
.post-hero{padding-top:6px;padding-bottom:2px}
.post-hero h1{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.06;margin-bottom:12px}
.post-dek{font-size:18px;font-weight:400;color:var(--ink-soft);line-height:1.5;margin-bottom:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--muted);padding:12px 0}
.post-meta .author{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.post-meta .author a{color:var(--ink);text-decoration:none}
.post-meta .author a:hover{color:var(--gold-deep);text-decoration:underline}
.author-avs{display:inline-flex;flex:none}
.author-avs a{display:block;line-height:0}
.author-avs img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);display:block}
.author-avs a+a{margin-left:-12px}
.author-avs a:hover{position:relative;z-index:2}
.post-meta .m-item{font-family:Georgia,'Times New Roman',serif}
.post-meta .m-share{margin-left:auto;display:flex;gap:12px;font-size:16px;color:var(--ink-soft)}
.post-figure{position:relative;margin:20px 0 0}
.post-feat{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.post-cap{position:absolute;right:0;bottom:0;background:color-mix(in srgb,var(--navy) 72%,transparent);color:#fff;font-size:11px;font-weight:500;letter-spacing:.02em;padding:5px 10px;max-width:70%;text-align:right;line-height:1.3}
.post-layout{display:grid;grid-template-columns:1fr 290px;gap:44px;align-items:start}
.post-aside{position:sticky;top:130px}
.rd-toc{border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.rd-toc h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.rd-toc a{display:block;font-size:14px;font-weight:600;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid var(--line)}
.rd-toc a:last-child{border-bottom:none}
.rd-toc a:hover{color:var(--link)}

/* ASIN compare table */
.compare-scroll{overflow-x:auto;margin:6px 0 28px}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.compare-table th{background:var(--navy);color:#fff;text-align:left;padding:11px 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.compare-table td{border-bottom:1px solid var(--line);padding:11px 12px;vertical-align:middle}
.compare-table .ct-award{font-size:11px;font-weight:800;color:var(--gold-deep);text-transform:uppercase}
.page-body .compare-table a{text-decoration:none;font-weight:700}
.compare-table .ct-prod{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}
.compare-table .ct-prod img{width:52px;height:52px;object-fit:cover;flex:none}
.compare-table .ct-price{font-weight:900;color:var(--sale);white-space:nowrap}
.compare-table .ct-buy{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:12px;text-transform:uppercase;padding:8px 16px;border-radius:5px}
.compare-table .ct-buy:hover{background:#2b2b2b}

/* product card */
.prod{border:1px solid var(--line);border-radius:10px;padding:22px;margin:0 0 22px;position:relative}
.prod .rank{position:absolute;top:-14px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.prod-top{display:grid;grid-template-columns:170px 1fr auto;gap:22px;align-items:start}
.prod .p-img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.prod .award{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--gold);padding:4px 10px;border-radius:4px;margin-bottom:9px}
.prod h3{font-size:var(--fs-card);font-weight:700;letter-spacing:-.2px;margin-bottom:6px}
.prod .p-rating{font-size:13px;color:var(--muted);margin-bottom:10px}
.prod .p-desc{font-size:15px;color:var(--ink-soft);line-height:1.5;margin:0}
.prod .p-price{font-size:22px;font-weight:900;white-space:nowrap}
.prod .p-old{font-size:14px;font-weight:600;color:var(--muted);text-decoration:line-through}
.buy-btns{display:flex;flex-direction:column;gap:8px;min-width:168px}
.buy-btns a{background:var(--navy);color:#fff;font-weight:700;font-size:14px;text-align:center;padding:11px;border-radius:6px;text-decoration:none}
.buy-btns a.alt{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.buy-btns a:hover{opacity:.9}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.pros h4,.cons h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.pros h4{color:var(--good)} .cons h4{color:var(--sale)}
.pros ul,.cons ul{list-style:none;margin:0}
.pros li,.cons li{font-size:14px;color:var(--ink-soft);margin-bottom:6px;padding-left:20px;position:relative;line-height:1.4}
.pros li::before{content:'\2713';position:absolute;left:0;color:var(--good);font-weight:800}
.cons li::before{content:'\2715';position:absolute;left:0;color:var(--sale);font-weight:800}

/* FAQ accordion */
.faq{margin-bottom:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;font-size:17px;font-weight:700;color:var(--ink);padding:15px 30px 15px 0;cursor:pointer;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:2px;top:12px;font-size:22px;font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{font-size:15px;color:var(--ink-soft);line-height:1.6;padding:0 0 16px}

/* author box */
.author-box{display:flex;gap:18px;border:1px solid var(--line);border-radius:10px;padding:20px;align-items:flex-start;margin-bottom:12px}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--gold);display:block}
.author-box b{font-size:17px;font-weight:700;display:block;margin-bottom:4px}
.author-box b a{color:var(--ink);text-decoration:none}
.author-box b a:hover{color:var(--gold-deep)}
.author-box p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}

/* Buying guide / how-to callouts */
.takeaways{background:var(--panel);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:18px 22px;margin:6px 0 24px}
.takeaways h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-deep);margin-bottom:10px}
.takeaways ul{list-style:none;margin:0}
.takeaways li{font-size:15px;color:var(--ink-soft);line-height:1.5;padding-left:24px;position:relative;margin-bottom:8px}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:'\2713';position:absolute;left:0;color:var(--good);font-weight:800}
.guide-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--navy);color:#fff;border-radius:10px;padding:22px 24px;margin:8px 0 26px}
.guide-cta .gc-t{font-size:18px;font-weight:800}
.guide-cta .gc-d{font-size:14px;color:rgba(255,255,255,.75);margin-top:3px}
.page-body .guide-cta a.gc-btn{background:#fff;color:#111;font-weight:800;font-size:14px;padding:12px 22px;border-radius:6px;white-space:nowrap;text-decoration:none;flex:none}
.page-body .guide-cta a.gc-btn:hover{background:#e4e4e4;color:#111}

/* sidebar related + infinite up-next */
.rd-related{margin-top:20px;border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.rd-related h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.rel-item{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.rel-item:last-child{border-bottom:none}
.rel-item img{width:62px;height:46px;object-fit:cover;flex:none}
.rel-item span{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.rel-item:hover span{color:var(--gold-deep)}
.up-next{text-align:center;border-top:2px solid var(--line);margin:28px 0 4px}
.up-next span{position:relative;top:-12px;background:var(--bg);padding:0 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* Up-next infinite feed: bài kế trôi vào liền mạch */
.up-next-sentinel{height:1px;margin:0}
.pf-next-block .up-next{margin-top:40px}
.pf-article{display:block}
.infinite-note{font-size:14px;color:var(--ink-soft);background:var(--panel);border-left:3px solid var(--gold);padding:12px 16px;margin-top:10px;line-height:1.5}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media(max-width:980px){
  /* Nav ngang khong du cho tu day tro xuong (can 809px), chuyen sang drawer hamburger. */
  .navbar{display:none}.hamburger{display:flex}
  /* Tu 980 tro xuong la bo cuc cham, chip danh muc lien quan can tap target >=44px. */
  .cat-related-list a{padding:12px 16px}
  .cat-related-list{gap:9px}
  .hero{grid-template-columns:1fr;gap:26px}
  .grid3,.card-grid{grid-template-columns:repeat(2,1fr)}
  .compact-list{grid-template-columns:1fr}
  .catblock .cols{grid-template-columns:1fr;gap:22px}
  .clist{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .who .pillars{grid-template-columns:1fr}.team{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .post-layout{grid-template-columns:1fr}
  .post-aside{display:none}
}
@media(max-width:640px){
  .searchpill{display:none}.m-searchbtn{display:flex}
  .topbar .wrap{gap:12px;height:60px}.logo{font-size:24px;height:auto;line-height:1}
  .mobile-nav{max-height:calc(100vh - 60px)}
  @supports(height:100dvh){.mobile-nav{max-height:calc(100dvh - 60px)}}
  .grid3,.card-grid{grid-template-columns:1fr}.news form{margin-left:0;width:100%}.news input{flex:1}
  /* Mobile: hạ NGUYÊN THANG CHỮ bằng cách override token, giữ đúng cấp bậc
     h2 > h3 nội dung > tên sản phẩm > card lưới. Không sửa px trong từng rule. */
  :root{--fs-h2:22px;--fs-h3:19px;--fs-card-lg:20px;--fs-card:18px;--fs-card-sm:16px;--fs-sechead:19px}
  .catblock .ch .cat-title{font-size:28px}
  .team{grid-template-columns:repeat(2,1fr)}
  .cat-hero h1{font-size:32px}
  .author-hero{flex-direction:column;gap:14px}.author-info h1{font-size:30px}
  article.page h1{font-size:32px}
  .post-hero h1{font-size:30px}
  .prod-top{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
}
@media(max-width:520px){.guide-cta a.gc-btn{width:100%;text-align:center}}

/* ============================================================
 * BP Score info tooltip (tái dùng plugin .acms-tooltip, cho câu dài xuống dòng)
 * ============================================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.acms-tooltip--pf{margin-left:5px;color:var(--muted);font-size:.9em;vertical-align:baseline}
.acms-tooltip--pf .bi{font-size:.95em;line-height:1}
.acms-tooltip--pf .acms-tooltip__content{white-space:normal;width:max-content;max-width:min(260px,calc(100vw - 32px));text-align:left;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--bg);background:var(--ink);padding:10px 12px}
/* click/tap giữ mở (JS plugin toggle .is-active) -> link trong tooltip bấm được + hoạt động trên mobile */
.acms-tooltip--pf.is-active .acms-tooltip__content{opacity:1;visibility:visible}
/* Header cột BP Score: (1) mở XUỐNG dưới tránh .compare-scroll clip overflow trên;
   (2) căn PHẢI để tooltip bung sang trái, không tràn mép phải viewport (icon nằm sát phải trên mobile) */
.acms-tooltip--pf.acms-tooltip--down .acms-tooltip__content{top:calc(100% + 8px);bottom:auto;left:auto;right:0;transform:none}
/* Header nền đen -> icon trắng cho nổi bật (chỉ --down = header bảng compare) */
.acms-tooltip--pf.acms-tooltip--down{color:var(--bg)}
/* LẬT XUỐNG ĐỘNG (pf-tooltip.js gắn khi phía trên không đủ chỗ, thêm 2026-09-03).
   Mặc định plugin luôn bung LÊN (bottom:100%), nên ⓘ nằm gần đỉnh màn hình thì
   tooltip trào ra ngoài viewport và mất mấy dòng đầu (đo được top:-14px khi icon
   cách đỉnh 140px). Chỉ đổi trục DỌC, giữ nguyên căn giữa ngang; KHÔNG dùng lại
   --down vì class đó còn đổi căn phải + tô icon trắng (icon sẽ tàng hình trên nền trắng). */
.acms-tooltip--pf.acms-tooltip--flipdown .acms-tooltip__content{top:calc(100% + 8px);bottom:auto}
/* Trang compare: label "BP Score" nằm sát TRÁI -> căn trái để tooltip bung sang phải, không tràn mép trái */
.acms-cmp__label .acms-tooltip--pf .acms-tooltip__content{left:0;right:auto;transform:none}
.acms-tooltip--pf .acms-tooltip__content a{color:var(--bg);text-decoration:underline}
.acms-tooltip--pf .acms-tooltip__content strong{font-weight:800}
/* Dòng "Updated: {date}" của ASIN (dưới giá) */
.acms-list__update{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);position:relative}
.acms-list__update .bi-clock-history{font-size:.95em;line-height:1}
.acms-list__update .acms-tooltip--pf{margin-left:2px}
/* Desktop: icon nằm cột phải card -> căn phải (bung sang trái) tránh đè sidebar; mobile giữ căn giữa */
@media(min-width:761px){.acms-list__update .acms-tooltip--pf .acms-tooltip__content{left:auto;right:0;transform:none}}

/* ===== Trang /coupons/ (template page-coupons.php) =====================================
   Feed coupon cần trọn khổ .wrap chứ không phải cột chữ 668px của trang tĩnh. Dải H1 để nền
   trắng, dải feed nền --panel để card trắng của plugin nổi lên (đúng tương quan nền/card đo
   được ở layout tham khảo, màu thì vẫn là token brand). */
.coupons-head{padding:28px 0 18px}
.coupons-head h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin:0}
.coupons-feed-band{background:var(--panel);padding:24px 0 44px}
.coupons-body .acms-coupons{max-width:none}
@media(max-width:640px){
  .coupons-head{padding:20px 0 12px}
  .coupons-head h1{font-size:32px;letter-spacing:-.6px}
  .coupons-feed-band{padding:16px 0 32px}
  /* Lề hẹp lại cho riêng dải feed: card giữ nguyên lưới 3 cột như bản tham khảo nên mỗi px
     lề ăn thẳng vào bề ngang cột tiêu đề. */
  .coupons-feed-band .wrap{padding:0 12px}
}

/* ===== Trang store (single-store.php) ==================================================
   Bố cục 2 cột: cột chính là coupon + bảng + phần biên tập, cột phải là số liệu + FAQ.
   Dải H1 nền trắng, dải nội dung nền --panel để card trắng của plugin nổi lên, cùng công thức
   với trang /coupons/. */
.store-head{padding:24px 0 18px}
.store-head .breadcrumb{margin-bottom:14px}
.store-head-row{display:flex;align-items:center;gap:20px}
.store-logo{width:96px;height:96px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px;flex:none}
/* Huy hiệu chữ cái đầu khi store chưa có logo. Kế thừa hộp của .store-logo (cùng kích thước,
   viền, bo góc) nên chỉ cần khai phần căn chữ và màu, không lặp lại thuộc tính hộp. */
.store-logo-mono{display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;line-height:1;color:var(--gold);background:var(--panel);padding:0;user-select:none}
/* Huy hiệu chữ cái đầu ở feed /coupons/, do mu-plugin pf-coupon-logo-fallback.php chèn.
   GIỮ class -fallback của plugin nên hộp (128px, 72px ở mobile, nền, bo góc, padding) thừa hưởng
   sẵn, ở đây chỉ khai phần chữ. Cùng màu brand với huy hiệu trang store để hai trang khớp nhau. */
.acms-coupons-row-logo-mono{font-size:54px;font-weight:800;line-height:1;color:var(--gold);user-select:none}
.store-head-text h1{font-size:38px;font-weight:700;letter-spacing:-.8px;line-height:1.1;margin:0}
.store-head-sub{margin:6px 0 0;font-size:14px;color:var(--muted)}
.store-band{background:var(--panel);padding:24px 0 48px}
.store-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.store-main{min-width:0}
.store-side{min-width:0;position:sticky;top:16px}
.store-empty{color:var(--muted);font-style:italic}
/* Khối coupon hết hạn: <details> thuần HTML, mặc định đóng. */
.store-expired{margin-bottom:32px}
.store-expired>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;list-style:none}
.store-expired>summary::-webkit-details-marker{display:none}
.store-expired>summary::after{content:" ▾";color:var(--muted)}
.store-expired[open]>summary::after{content:" ▴"}
.store-expired>summary:hover{color:var(--gold)}
.store-expired .acms-store-offers{margin-top:14px}
.store-visit-domain{margin:0 0 10px;font-size:13px;color:var(--muted);word-break:break-all}
/* Nút sang store: tái dùng .acms-coupons-btn nhưng ở đây là nút đơn, không có chip code nấp sau
   nên trả về full width và bo đủ 4 góc. */
.store-visit .store-visit-btn{width:100%;border-radius:8px}
.store-side .author-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
@media(max-width:980px){
  .store-grid{grid-template-columns:1fr;gap:24px}
  .store-side{position:static}
}
@media(max-width:640px){
  .store-head{padding:18px 0 12px}
  .store-head-row{gap:14px}
  .store-logo{width:64px;height:64px}
  .store-logo-mono{font-size:26px}
  .acms-coupons-row-logo-mono{font-size:30px}
  .store-head-text h1{font-size:26px;letter-spacing:-.4px}
  .store-band{padding:16px 0 32px}
}

/* ===== Mục "Coupons" trên thanh điều hướng =============================================
   Nav nền đỏ brand chữ trắng, nên muốn mục này nổi lên thì đảo màu: nền trắng, chữ đỏ. Vẫn
   trong đúng bảng màu đen/trắng/đỏ, không thêm màu mới. Icon tô theo currentColor nên tự đổi
   màu cùng chữ khi hover, không cần rule màu riêng. */
.navbar .right a.nav-coupons{display:inline-flex;align-items:center;gap:7px;margin:6px 0 6px 10px;padding:0 14px;line-height:32px;color:var(--gold);background:#fff;border-radius:999px;font-weight:800}
.navbar .right a.nav-coupons:hover{color:#fff;background:var(--gold-deep)}
.nav-coupons-icon{width:17px;height:17px;flex:none}
/* Drawer mobile: nền tối, nên giữ chữ trắng và chỉ tô icon đỏ cho bắt mắt. */
.mobile-nav a.nav-coupons{display:flex;align-items:center;gap:9px}
.mobile-nav a.nav-coupons .nav-coupons-icon{width:19px;height:19px;color:var(--gold)}
@media(max-width:980px){
  .navbar .right a.nav-coupons{margin-left:6px;padding:0 11px}
}

/* ---------------------------------------------------------------------------
   Related Guides (khối cuối bài, render động bởi mu-plugin pf-related.php)
   Dùng token brand ở :root, KHÔNG hardcode hex (rule F3).
   --------------------------------------------------------------------------- */
.related-guides{margin:40px 0 8px;padding-top:24px;border-top:3px solid var(--gold)}
.related-guides-title{font-size:var(--fs-sechead);margin:0 0 16px}
.related-guides-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.related-guides-list li{padding-left:16px;position:relative;line-height:1.45}
.related-guides-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.related-guides-list a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.related-guides-list a:hover{color:var(--gold-deep)}

@media (max-width:760px){
  .related-guides{margin-top:32px}
  .related-guides-list{grid-template-columns:1fr;gap:4px}
  /* Ngón tay cần vùng chạm ~44px, chữ trần chỉ cao 23px. Nới bằng padding trên link
     chứ không bằng gap, để vùng bấm to ra thật chứ không chỉ giãn khoảng trắng. */
  .related-guides-list a{display:block;padding:11px 0}
  .related-guides-list li::before{top:1.35em}
}
@media (max-width:480px){
  .related-guides-list li{padding-left:14px}
}