/* ============================================================
   StackWell Pick — site public.
   Mobile-first: viết cho 390px trước, desktop ở cuối file.
   Hệ màu/khối lấy từ bản demo Lee đã duyệt 19/10.
   Luật đã chốt còn hiệu lực trong file này:
   · tap target ≥44px
   · card mã #1 phải lọt trọn viewport mobile đầu — luật này sống ở phần base
     (mobile-first, không có khối max-width nào); mọi lần sửa header / store strip
     / dải dưới hero đều phải ĐO LẠI, không ước lượng bằng mắt
   · xanh lá CHỈ dùng cho nút action ra tiền và con số giảm giá — không trang trí

   VÒNG 3 (19/10, chuẩn bị nhân lên ~100 brand). Trước vòng này file có 30 cỡ chữ,
   12 độ đậm, 17 letter-spacing rời rạc. Ở 10 store thì không ai thấy; ở 100 store
   thì mỗi khối mới lại tự phát minh một cỡ, và sau 3 tháng không ai còn biết cỡ nào
   là "đúng". Nên giờ mọi thứ về TOKEN ở :root — thêm brand sau này chỉ được dùng
   token, không gõ px mới.

   VÒNG 4 — "TIỆN ÍCH BÁN LẺ" (Lee phản hồi 19/10: "font chữ khó nhìn, gây đau mắt
   và có vẻ AI quá đà"). Phản hồi đó đúng và đo được, không phải cảm tính:
   · body dùng --ink #070d13 trên nền #f4f7fa = TƯƠNG PHẢN 18.9:1. AAA chỉ cần
     7:1. Vượt xa ngưỡng không "rõ hơn" mà sinh halation — chữ đen tuyệt đối trên
     nền sáng làm nét chữ loé viền, đọc 2 phút là mỏi. Mà --ink-body (#333e4c,
     9.5:1) đã được khai từ vòng 3 rồi, chỉ dùng ở 4 chỗ còn --ink dùng ở 19 chỗ:
     ngược hẳn. Nay body = --ink-body, --ink chỉ còn là màu TIÊU ĐỀ và màu viền.
   · letter-spacing ÂM ở 19 chỗ, xuống tới cả chữ 14–16px. Giãn âm chỉ đúng với
     chữ hiển thị lớn (≥28px) — ở cỡ đọc nó dính các nét lại, đây là nguồn mỏi mắt
     lớn nhất. Nay: 0 ở mọi cỡ dưới 28px, chỉ hero giữ -.02em.
   · --w-black:800 ở 25 chỗ. Xem lại ghi chú vòng 3: font hệ thống không có bậc
     800, nên nó chỉ là 700 bị làm đậm giả trên một số máy. Đã bỏ hẳn token đó.
   · Về "AI quá đà": tổ hợp #070d13 + w800 + giãn âm -.035em + hero 44px +
     radius 14px + 2 lớp bóng mềm + xanh tech #1348f5 + hero tối chính là dấu vân
     tay Vercel/Linear/shadcn — mẫu áp đảo trong dữ liệu tôi học, tôi với tay lấy
     mà không hỏi nó có hợp NGÀNH hay không. Site này là coupon: khách đến từ
     Google Ads trên mobile để tìm cái giảm giá, nên nó phải đọc như một TIỆN ÍCH
     BÁN LẺ (RetailMeNot/Honey), và dáng landing-page SaaS còn khiến network duyệt
     affiliate đọc ra "template".
   · Thứ bậc chữ từ nay dựng bằng CỠ, không bằng ĐỘ ĐẬM.
   ============================================================ */

/* Inter variable, TỰ HOST (Lee duyệt 19/10). Không gọi fonts.googleapis.com:
   (1) mỗi lượt xem rò IP khách sang Google — thêm một việc phải khai trong
   /privacy; (2) thêm 2 chặng DNS+TLS trước khi chữ hiện, trên 4G mobile là
   nguồn CLS thật. File latin variable chỉ 48KB, nằm cùng domain.
   Giấy phép SIL OFL 1.1, bản gốc kèm theo tại public/fonts/inter-LICENSE.txt
   (OFL bắt buộc phát hành kèm giấy phép).
   KHÔNG lấy bản italic (51KB): grep cả site.css + mọi view = 0 chỗ dùng italic.
   font-weight:100 900 = một file lo mọi độ đậm, nên 600/700 là bậc THẬT chứ
   không phải trình duyệt làm tròn như với font hệ thống.
   unicode-range chỉ phủ latin: '◆' (U+25C6) và '→' (U+2192) nằm ngoài vùng này
   nên vẫn rơi về font hệ thống — có chủ ý, hai ký tự đó là hình khối/mũi tên,
   không phải chữ, nên lệch font không ai nhận ra. */
@font-face{
  font-family:'Inter Variable';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(/fonts/inter-latin-variable.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  /* ---- THANG CHỮ (13 bậc) ----
     Dựng QUANH các cỡ Lee đã duyệt vòng 2 (hero 33/44, H2 khối 22.5/26, logo 17.5),
     chứ không áp một thang "chuẩn sách giáo khoa" rồi đè mất bản Lee đã nhìn.
     30 cỡ cũ gom về 13 bậc này; lệch lớn nhất của một khối là 1.5px nên bố cục
     không đổi — thứ đổi là từ nay chỉ có 13 chỗ để chọn. */
  --fs-1:11px;      /* nhãn micro in hoa: Verified/Code, nhãn % OFF */
  --fs-2:12px;      /* meta, đếm số, dòng trạng thái test */
  --fs-3:13px;      /* chữ nhỏ: breadcrumb, disclosure, mô tả offer */
  --fs-4:14px;      /* chữ UI: nút, nav, tab, ô tìm */
  --fs-5:15px;      /* chữ phụ, tên store trên card */
  --fs-6:16px;      /* body mặc định, tiêu đề card mã */
  --fs-7:17.5px;    /* logo, tiêu đề accordion, tiêu đề card mã desktop */
  --fs-8:19px;      /* H2 nhỏ trong bài */
  --fs-9:22.5px;    /* H2 khối (Lee duyệt) */
  --fs-10:26px;     /* H1 trang / con số giảm giá / H2 khối desktop (Lee duyệt) */
  --fs-11:27px;     /* tên store desktop, con số giảm giá desktop (30 → 27) */
  --fs-12:28px;     /* hero mobile + H1 trang desktop (33 → 28, Lee duyệt vòng 4) */
  --fs-13:36px;     /* hero desktop (44 → 36, Lee duyệt vòng 4) */
  /* 3 bậc trên cùng hạ xuống vì vòng 2 đẩy chúng lên để tạo "nổi bật" — nhưng
     thứ gây nổi bật trên trang coupon là CON SỐ GIẢM GIÁ, không phải câu hero.
     Hero 44px chiếm 2 dòng trên 390px và đẩy card mã #1 xuống sâu hơn; 36px vẫn
     to gấp 2.25 lần body nên vai trò tiêu đề chính không mất.
     Phụ: trang ngắn lại nên luật "card #1 lọt viewport đầu" có thêm chỗ dư. */

  /* ---- ĐỘ ĐẬM (2 bậc) ----
     BẪY ĐÃ SỬA: file cũ dùng 12 độ đậm từ 600→880. Nhưng site chạy font HỆ THỐNG
     (Segoe UI có 300/400/600/700; Roboto có 100/300/400/500/700/900) — không có
     font nào cài sẵn 820 hay 880. Trình duyệt làm tròn về bậc gần nhất CÓ THẬT,
     nên 800/820/840/860/880 ra CÙNG một nét trên Windows, và làm tròn KHÁC nhau
     trên Android. Tức là cái thang đậm đó chỉ tồn tại trong file CSS.
     VÒNG 4: còn 2 bậc. Inter variable đã tự host nên 800 giờ RENDER ĐƯỢC thật —
     nhưng vẫn bỏ, vì lý do bây giờ không phải kỹ thuật mà là thiết kế: w800 ở 25
     chỗ (gồm tiêu đề card mã 16px và tên store 15px) làm cả trang "gào" cùng một
     âm lượng, nên không chỗ nào nổi lên được. Thứ bậc dựng bằng CỠ chữ; 600/700
     chỉ còn việc phân biệt nhãn phụ với chữ cần đọc trước. */
  --w-med:600;      /* nhãn phụ, nav, chữ in hoa nhỏ */
  --w-bold:700;     /* H1–H4, nút, con số giảm giá, tên store */

  /* ---- GIÃN CHỮ / GIÃN DÒNG ----
     KHÔNG còn token giãn âm cho chữ nhỏ. Vòng 3 có 3 bậc âm (-.035/-.024/-.015)
     dùng ở 19 chỗ, xuống tới cả chữ 14px. Giãn âm là kỹ thuật của chữ HIỂN THỊ
     (≥28px), nơi khoảng trắng giữa các chữ cái nhìn bị rộng ra; ở cỡ đọc nó làm
     các nét chạm nhau và mắt phải tự tách chữ — đúng cái "đau mắt" Lee nói.
     Nay chỉ còn MỘT bậc âm, tên nói rõ chỗ dùng: chữ hiển thị. Mọi chỗ khác
     ghi thẳng `letter-spacing:0`, không token, để người thêm brand sau không
     tiện tay bốc một token âm gắn vào chữ 14px. */
  --ls-display:-.02em; /* CHỈ cho --fs-12/--fs-13 (hero). Không dùng dưới 28px. */
  --ls-wide:.04em;     /* tiêu đề cột footer */
  --ls-caps:.1em;      /* nhãn in hoa */
  --ls-caps-x:.14em;   /* nhãn in hoa rất nhỏ (••••L19, % OFF) */
  --lh-head:1.2;       /* tiêu đề */
  --lh-title:1.3;      /* tiêu đề bị kẹp dòng */
  --lh-body:1.6;       /* body UI */
  --lh-read:1.65;      /* thân bài / trang chữ dài */

  /* ---- MÀU ----
     --ink3 CŨ LÀ #7b8694 = 3.70:1 trên nền trắng, DƯỚI ngưỡng WCAG AA 4.5:1 —
     mà nó chỉ dùng cho chữ nhỏ (12–13px: breadcrumb, đếm mã, dòng "Not yet
     cart-tested"). Chữ nhỏ mờ là chỗ mắt bỏ qua đầu tiên, nhưng dòng trạng thái
     test lại là dòng TRUNG THỰC nhất trên card — không được để nó mờ. #6b7684
     = 4.65:1, đạt chuẩn, nhìn vẫn là xám phụ.

     VÒNG 4: --ink từ #070d13 → #141c26. #070d13 gần như đen tuyệt đối (18.9:1
     trên nền sáng) — vượt AAA 7:1 gấp 2.7 lần, và quá ngưỡng đó thì không còn
     "rõ hơn" mà bắt đầu loé viền nét chữ (halation). #141c26 = 15.1:1, vẫn là
     màu mực đậm nhất trên trang, vẫn thừa chuẩn cho TIÊU ĐỀ, nhưng hết loé.
     --ink giờ CHỈ dùng cho tiêu đề + viền + nền đặc, KHÔNG dùng cho chữ body. */
  --ink:#141c26; --ink2:#4d5866; --ink3:#6b7684;
  /* Màu chữ đọc. Vòng 3 đã khai token này rồi nhưng chỉ dùng ở 4 chỗ, còn body
     vẫn lấy --ink ở 19 chỗ — ngược hẳn ý nghĩa cái tên. Vòng 4: body = cái này.
     9.5:1 trên nền --bg: qua AAA (7:1) mà không bị đen gắt. */
  --ink-body:#333e4c;
  --line:#dbe2ea; --line2:#eaeff4; --line-b:#c2ccd9;
  --bg:#f4f7fa; --white:#fff;
  /* Nền tối (hero, dải review, footer) */
  --dark:#0b1117; --dark2:#111b2a; --dark-ink:#93a1b5; --dark-ink2:#c3cedd;
  --blue:#1348f5; --blue-d:#0b35c4; --blue-s:#eaf0ff;
  /* KHÔNG có --green-s (xanh lá nhạt). Trước vòng 2 nó là nền badge Verified;
     nay badge dùng nền ĐẶC nên nó hết việc. Xoá chứ không để lại: một tông xanh
     lá nhạt nằm sẵn trong bảng token là lời mời trang trí bằng màu tiền — đúng
     thứ luật màu cấm. Xanh lá chỉ có 2 vai: NỀN ĐẶC cho nút ra tiền + badge
     Verified, và CHỮ cho một con số giảm giá. */
  --green:#07843f; --green-d:#056a33;
  --amber:#e09000; --amber-s:#fff8e6;
  /* 14px → 10px (Lee duyệt vòng 4). Bán kính lớn là dấu hiệu "app/SaaS"; cửa
     hàng và site phiếu giảm giá dùng góc gần vuông vì khối trông như THẺ GIÁ,
     không như card dashboard. 10px vẫn mềm, không phải góc vuông sắc. */
  --radius:10px; --r-sm:8px;
  /* Màu của 2 lỗ khoét trên card mã. Phải TRÙNG nền sau card, không phải một màu
     cố định: card mã nằm trên nền xám ở trang store, nhưng nằm trên khối TRẮNG ở
     cuối bài review — để cứng var(--bg) thì trong bài hiện 2 đốm xám. */
  --notch:var(--bg);
  /* BÓNG 1 LỚP (vòng 4). Bóng 2 lớp "mềm" — một lớp sát 1-2px cộng một lớp toả
     14-34px — là công thức của hệ thiết kế SaaS; nó làm mọi khối trông như đang
     bay trên mặt phẳng. Trang coupon có 5-7 card mã xếp dọc, nhân 2 lớp bóng
     lên 7 lần thì nền xám thành bẩn và chẳng khối nào nổi hơn khối nào.
     Một lớp mảnh: đủ để tách card khỏi nền, hết hiệu ứng nổi.
     Đổi màu bóng theo --ink mới (20,28,38) cho khớp tông chung. */
  --sh:0 1px 2px rgba(20,28,38,.06);
  --sh-lg:0 2px 8px rgba(20,28,38,.09);
  /* 2 token này GIỮ 2 lớp có chủ ý: lớp `0 3px 0` là MÉP DƯỚI ĐẶC, không phải
     bóng trang trí — nó là thứ cho biết nút bấm được (cùng cặp với :active lún
     2px). Chỉ hạ lớp toả xuống cho bớt hào quang. */
  --sh-btn:0 3px 0 var(--green-d), 0 3px 8px rgba(7,132,63,.18);
  --sh-btn-b:0 3px 0 var(--blue-d), 0 3px 8px rgba(19,72,245,.16);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 'Inter Variable' đứng đầu, font hệ thống làm dự phòng (font-display:swap nên
   chữ hiện ngay bằng font hệ thống rồi đổi — không có khoảng trắng chờ tải).
   ĐÃ BỎ -webkit-font-smoothing:antialiased: trên Windows nó là no-op (traffic
   Ads chính), còn trên macOS nó tắt subpixel-antialiasing nên chữ MỎNG đi —
   tức là đúng chỗ nó có tác dụng thì nó làm chữ khó đọc hơn. */
body{font:var(--fs-6)/var(--lh-body) 'Inter Variable',ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink-body);background:var(--bg)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* color:var(--ink) phải ghi Ở ĐÂY vì body nay là --ink-body: tiêu đề cần đậm hơn
   chữ đọc, và trước vòng 4 nó thừa hưởng được nên không ai ghi. Giãn chữ về 0 —
   chỉ .hero h1 (28/36px) được giữ --ls-display. */
h1,h2,h3,h4{line-height:var(--lh-head);letter-spacing:0;font-weight:var(--w-bold);color:var(--ink)}
img{max-width:100%;display:block}

/* Viền focus bàn phím. Trước vòng này KHÔNG CÓ gì cả — ai duyệt site bằng Tab
   (và trình đọc màn hình của Google khi đánh giá a11y) thấy con trỏ biến mất.
   :focus-visible nên chuột bấm không hiện viền, chỉ hiện khi đi bằng bàn phím. */
:where(a,button,summary,input,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.cc-btn:focus-visible{outline-color:var(--green-d)}
.fr:focus-visible{outline-color:#ffd27d}
.hdr-search input:focus-visible,.hero-search input:focus-visible{outline-offset:0}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:780px}
/* Bài review là trang để ĐỌC, không phải lưới. Thả full 1140px thì dòng chữ
   dài ~150 ký tự — mắt mất dòng khi xuống hàng. 820px (trừ padding còn ~772px
   chữ) cho khoảng 75–85 ký tự/dòng, đúng ngưỡng dễ đọc. */
.wrap.post{max-width:820px}

/* ---------- Header ---------- */
/* Demo dùng backdrop-filter (kính mờ) nhưng header demo KHÔNG sticky.
   Ở đây header sticky: blur lại nền ở mọi khung hình khi cuộn là nguồn giật
   quen thuộc trên Android yếu — mà traffic Ads của site phần lớn là mobile.
   Ở độ mờ .88 thì nhìn gần như không khác nền trắng đặc, nên không đổi gì
   về thẩm mỹ. Muốn lấy lại hiệu ứng kính thì thêm backdrop-filter:blur(12px). */
.hdr{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr-in{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.logo{font-size:var(--fs-7);font-weight:var(--w-bold);color:var(--ink);letter-spacing:0;
  white-space:nowrap;display:flex;align-items:center;gap:7px}
.logo:hover{text-decoration:none}
.logo span{color:var(--blue)}
.logo-mk{width:26px;height:26px;flex-shrink:0;border-radius:8px;
  background:linear-gradient(140deg,var(--blue),#5b8cff);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-3)}
/* Ô tìm nằm CÙNG HÀNG với logo. Bản cũ cho nó rớt xuống dòng 2 (order:3, flex 100%)
   làm header cao ~100px — ăn mất chỗ của card mã #1 trên viewport mobile đầu.
   Nút tìm chồng lên mép phải ô input, vẫn là tap target 44px. */
.hdr-search{margin-left:auto;flex:1 1 auto;min-width:0;max-width:210px;position:relative;display:flex}
.hdr-search input{width:100%;min-width:0;height:44px;padding:0 42px 0 14px;border:1px solid var(--line);
  border-radius:999px;font:inherit;font-size:var(--fs-4);background:var(--bg);color:var(--ink)}
/* Icon kính lúp là SVG inline, KHÔNG phải ký tự '⌕' (U+2315) như bản cũ.
   Ký tự đó thiếu trong nhiều bộ font Android mặc định → hiện ô vuông tofu đúng
   trên nhóm thiết bị chiếm phần lớn traffic Ads. SVG thì vẽ giống nhau mọi máy.
   font-size:0 để ẩn chữ "Search" trong nút; tên cho trình đọc màn hình lấy từ
   aria-label trong head.ejs. */
.hdr-search button{position:absolute;right:0;top:0;width:42px;height:44px;padding:0;border:0;
  font:inherit;font-size:0;cursor:pointer;background:transparent no-repeat center/19px 19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.6 16.6 21 21'/%3E%3C/svg%3E")}
.hdr-nav{display:none}

/* ---------- Dải category (chỉ mobile/tablet) ----------
   Dưới 1024px bản cũ KHÔNG CÓ điều hướng nào: .hdr-nav bị display:none, nên
   đường duy nhất tới một store là gõ đúng tên vào ô tìm, hoặc cuộn xuống footer.
   Ở 10 store còn chịu được; ở 100 store thì mỗi lander Ads là một ngõ cụt, và
   Google index theo bản mobile nên nó cũng chỉ thấy mạng link nội bộ rỗng đó.
   Đặt NGOÀI .hdr (không sticky): tốn ~45px một lần ở đầu trang, cuộn là mất —
   nếu nhét vào header sticky thì nó ăn 45px suốt thời gian người ta cuộn.
   Đã tính lại luật card #1: store xấu nhất (thelibrarycloset) trước đây đáy ở
   742/844px, cộng dải này còn ~787/844 — vẫn trong viewport đầu. */
.catbar{background:var(--white);border-bottom:1px solid var(--line)}
.catbar-in{display:flex;gap:16px;overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.catbar a{flex-shrink:0;display:flex;align-items:center;min-height:44px;
  font-size:var(--fs-4);font-weight:var(--w-med);color:var(--ink2)}
.catbar a:hover{color:var(--ink);text-decoration:none}

/* ---------- Hero ---------- */
.hero{background:
   radial-gradient(900px 420px at 15% -10%, #1e2d4d 0%, transparent 60%),
   radial-gradient(700px 380px at 92% 0%, #13305e 0%, transparent 55%),
   linear-gradient(180deg,var(--dark),var(--dark2));
  color:#fff;padding:38px 0 34px;position:relative;overflow:hidden}
/* CHỖ DUY NHẤT còn giãn chữ âm trên cả site: 28px mobile / 36px desktop là cỡ
   hiển thị thật, và color:inherit để giữ chữ trắng của .hero (quy tắc h1 mới
   đặt color:var(--ink), nếu không chặn ở đây thì hero thành chữ đen trên nền tối). */
.hero h1{font-size:var(--fs-12);letter-spacing:var(--ls-display);color:inherit;max-width:18ch}
.hero-sub{margin-top:12px;font-size:var(--fs-6);color:var(--dark-ink2);max-width:52ch}
.hero-search{display:flex;gap:8px;margin-top:20px;max-width:560px;background:#fff;
  border-radius:999px;padding:5px 5px 5px 16px;box-shadow:var(--sh-lg)}
.hero-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:var(--fs-5);
  background:transparent;color:var(--ink)}
/* Mép dưới 3px đặc giống nút Get Code, nhưng MÀU XANH DƯƠNG: đây là nút điều
   hướng (đi tìm), không phải nút ra tiền. Hình dáng cho biết "bấm được",
   màu cho biết "bấm vào không phải để mua". */
.hero-search button{border:0;font:inherit;font-weight:var(--w-bold);font-size:var(--fs-4);color:#fff;
  white-space:nowrap;background:var(--blue);padding:0 20px;min-height:46px;border-radius:999px;
  cursor:pointer;box-shadow:var(--sh-btn-b);transition:.12s}
.hero-search button:hover{background:var(--blue-d)}
.hero-search button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--blue-d)}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:17px}
.hero-stats span{display:flex;flex-direction:column;font-size:var(--fs-3);color:var(--dark-ink)}
.hero-stats strong{font-size:var(--fs-8);font-weight:var(--w-bold);letter-spacing:0;color:#fff}
.hero-note{margin-top:14px;font-size:var(--fs-4)}
.hero-note a{color:#8fb4ff;font-weight:var(--w-med)}
.search-page{margin:0 0 18px;max-width:560px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}

/* ---------- Dải review nổi bật (ngay dưới hero) ----------
   Mục đích: người vừa đọc hero thấy ngay "có người thật viết review ở đây"
   TRƯỚC khi được mời bấm Get Code. Nền tối nối liền hero để đọc như một mạch,
   không phải một khối rời. Cao ~86px mobile nên không đẩy card mã #1 ra ngoài
   viewport đầu — đã đo lại sau khi thêm. */
.fr-wrap{background:linear-gradient(180deg,var(--dark2),#0d1520);padding:0 0 16px}
/* Grid 2 cột: hàng 1 = nhãn + "Read it", hàng 2 = tiêu đề + byline.
   Bản flex đầu cho mỗi thứ một dòng → dải cao 174px, đẩy card mã đầu từ 626
   xuống 800px. Gộp hàng + kẹp tiêu đề 2 dòng để nó còn là DẢI, không thành khối. */
.fr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px 10px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-left:5px solid var(--amber);border-radius:var(--r-sm);padding:12px 14px;min-height:44px}
.fr:hover{text-decoration:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
/* Vị trí chỉ định tay, KHÔNG để auto-placement: trong DOM thứ tự là flag → main → go
   (đúng thứ tự đọc/screen reader), nên auto-placement đẩy "Read it" xuống hàng 3
   và dải phình thêm 30px. Gán grid-row/column để go về đứng cạnh flag ở hàng 1. */
.fr-flag{grid-row:1;grid-column:1;font-size:var(--fs-1);font-weight:var(--w-bold);
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--dark);background:var(--amber);border-radius:5px;padding:4px 8px;justify-self:start}
.fr-go{grid-row:1;grid-column:2;font-size:var(--fs-3);font-weight:var(--w-bold);color:#ffd27d;
  white-space:nowrap;justify-self:end}
.fr-main{grid-row:2;grid-column:1/-1;min-width:0}
.fr-title{display:block;font-size:var(--fs-6);font-weight:var(--w-bold);letter-spacing:0;
  line-height:var(--lh-title);color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr-meta{display:block;font-size:var(--fs-2);color:var(--dark-ink);margin-top:3px}

/* ---------- Khối chung ---------- */
.sec{margin:34px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
/* Thanh xanh trước mỗi H2: mốc nhìn để mắt bắt được ranh giới khối khi cuộn nhanh.
   Dùng ::before nên không cần sửa EJS nào. */
.sec-head h2{font-size:var(--fs-9);display:flex;align-items:center;gap:10px}
.sec-head h2::before{content:'';width:5px;height:21px;flex-shrink:0;border-radius:3px;background:var(--blue)}
/* "See all →" là tap target thật, không phải chữ trang trí → cho nó 44px chiều cao */
.sec-head a{font-size:var(--fs-4);font-weight:var(--w-bold);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px}
.crumb{font-size:var(--fs-3);color:var(--ink3);padding:5px 0 0}
/* Breadcrumb là ngoại lệ của luật 44px: ép mỗi mắt 44px thì nó thành 3 hàng nút
   và đẩy card mã #1 ra khỏi viewport. Nới đệm cho dễ bấm, giữ một dòng. */
.crumb a{color:var(--ink3);display:inline-block;padding:3px 1px}
.page-h1{font-size:var(--fs-10);letter-spacing:0;margin-bottom:6px}
.empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);
  padding:24px;color:var(--ink2);text-align:center;margin:16px 0}

/* Disclosure — ngay dưới H1 (quy tắc chốt) */
.disclosure{font-size:var(--fs-3);color:#6b3f06;background:var(--amber-s);border:1px solid #f6dfa6;
  border-left:5px solid var(--amber);border-radius:var(--r-sm);padding:7px 10px;margin:9px 0;line-height:1.5;
  font-weight:var(--w-med)}
/* Đã chuyển xuống dưới danh sách mã — xem comment trong store.ejs */
.st-intro{color:var(--ink2);font-size:var(--fs-5);margin:16px 0 4px}

/* ---------- Store strip ---------- */
.st-strip{display:flex;gap:11px;align-items:flex-start;background:var(--white);
  border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh);padding:13px}
.st-logo{width:48px;height:48px;flex-shrink:0;border:2px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.st-logo img{max-width:100%;max-height:100%;object-fit:contain}
.st-logo-txt{font-size:var(--fs-9);font-weight:var(--w-bold);color:var(--ink2)}
.st-strip-main h1{font-size:var(--fs-9);letter-spacing:0}
.st-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:var(--fs-2)}
.st-stats span{background:var(--bg);border:1px solid var(--line-b);border-radius:999px;
  padding:4px 10px;color:var(--ink2);font-weight:var(--w-med)}
.st-stats strong{color:var(--ink);font-weight:var(--w-bold)}
/* "Best: 15% off" TRƯỚC ĐÂY là chip xanh lá nền đặc. Đếm trên một trang store 5 mã
   thì xanh lá xuất hiện 11+ chỗ (5 nút Get Code, 5 con số giảm, badge Verified,
   chip này) — nút ra tiền hết là thứ duy nhất màu đó, tức là luật "xanh lá = tiền"
   mất tác dụng đúng ở chỗ nó cần nhất.
   Luật rõ hơn từ vòng 3: NỀN ĐẶC xanh lá = action ra tiền (nút Get Code) hoặc
   bằng chứng (badge Verified). CHỮ xanh lá = một con số. Chip này là nhãn, nên
   về nền trung tính, chỉ con số giữ xanh. */
.st-best{background:var(--white)!important;border-color:var(--line-b)!important;color:var(--ink2)!important}
.st-best strong{color:var(--green)}
.st-checked{background:#fff!important}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:8px 0;-webkit-overflow-scrolling:touch}
.tab{flex-shrink:0;padding:0 16px;height:44px;border:2px solid var(--line);background:var(--white);
  border-radius:999px;font:inherit;font-size:var(--fs-4);font-weight:var(--w-bold);color:var(--ink2);cursor:pointer}
.tab span{opacity:.6;font-weight:var(--w-med)}
.tab.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- COUPON CARD (ô kiếm tiền) ----------
   Kiểu vé xé: vùng trái tách bằng nét đứt + 2 lỗ tròn khoét ở mép.
   Mobile xuống dòng: trái + giữa một hàng, nút full width hàng dưới. */
.cc-list{display:flex;flex-direction:column;gap:12px}
/* Viền 2px MÀU ĐẬM (--line-b): card mã là khối duy nhất trên trang được viền dày
   VÀ đậm — nó phải là thứ mắt chạm trước, trên cả store card và post card.
   Trước vòng 3 nó cũng 2px nhưng dùng --line nhạt y như store strip và tab,
   nên "dày hơn" chỉ đúng trên giấy. */
.cc{display:flex;align-items:stretch;flex-wrap:wrap;background:var(--white);border:2px solid var(--line-b);
  border-radius:var(--radius);box-shadow:var(--sh);overflow:hidden;transition:.16s}
.cc:hover{border-color:var(--ink);box-shadow:var(--sh-lg)}
.cc-left{width:88px;flex-shrink:0;background:linear-gradient(170deg,#f6f9fc,#e9eef5);
  border-right:2px dashed var(--line-b);display:grid;place-content:center;text-align:center;
  padding:13px 8px;position:relative}
.cc-left::before,.cc-left::after{content:'';position:absolute;right:-8px;width:14px;height:14px;
  border-radius:50%;background:var(--notch);border:2px solid var(--line-b)}
.cc-left::before{top:-9px}
.cc-left::after{bottom:-9px}
/* Con số giảm giá xanh lá — đúng luật đã chốt (xanh lá = tiền: nút Get Code +
   số giảm). Trước đây để màu mực nên nó chìm ngang với tiêu đề. */
.cc-pct{font-size:var(--fs-10);font-weight:var(--w-bold);letter-spacing:0;
  color:var(--green);line-height:1.05}
.cc-deal .cc-pct{font-size:var(--fs-6);font-weight:var(--w-bold);letter-spacing:0;color:var(--ink)}
.cc-pct-lb{font-size:var(--fs-1);font-weight:var(--w-bold);letter-spacing:var(--ls-caps-x);
  color:var(--ink2);margin-top:2px}
.cc-mid{flex:1;min-width:0;padding:12px 14px}
.cc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tag{font-size:var(--fs-1);font-weight:var(--w-bold);padding:4px 9px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px}
/* Verified là badge đặc ruột: nó là tuyên bố mạnh nhất trên card nên được nền đầy,
   các tag còn lại chỉ là nhãn phân loại nên vẫn nền nhạt. */
.tag-ok{background:var(--green);color:#fff}
.tag-code{background:var(--blue-s);color:var(--blue-d);border:1px solid #cedcff}
.tag-deal{background:#eceff4;color:var(--ink2);border:1px solid #dde3ea}
.tag-store{background:#fff;border:1px solid var(--line-b);color:var(--ink2)}
.cc-title{font-size:var(--fs-6);font-weight:var(--w-bold);letter-spacing:0}
.cc-desc{font-size:var(--fs-3);color:var(--ink2);margin-top:4px}
/* Dòng trạng thái test. Mã chưa qua giỏ thì nói thẳng ra — đây là lựa chọn
   đã chốt ở /how-we-test, không phải chỗ để im lặng cho đẹp. */
.cc-meta{font-size:var(--fs-2);color:var(--ink3);margin-top:6px}
.cc-right{width:100%;padding:0 14px 13px;display:grid;place-content:stretch}

/* Nút Get Code 2 tầng: dải mã che ••••L19 trên, nút xanh dưới */
/* Mép dưới 3px đặc (0 3px 0) làm nút trông bấm được chứ không phải nhãn phẳng —
   đây là nút duy nhất sinh tiền nên nó được quyền nổi nhất trang. */
.cc-btn{position:relative;border:0;font:inherit;cursor:pointer;width:100%;min-height:48px;
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;
  box-shadow:var(--sh-btn);transition:.12s}
.cc-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d),0 3px 10px rgba(7,132,63,.3)}
.cc-btn-mask{background:var(--green-d);color:#c6f0d8;font-size:var(--fs-2);font-weight:var(--w-bold);
  letter-spacing:var(--ls-caps-x);padding:6px 14px;border-bottom:1px dashed rgba(255,255,255,.3)}
.cc-btn-txt{background:var(--green);color:#fff;font-size:var(--fs-5);font-weight:var(--w-bold);
  letter-spacing:0;padding:11px 14px}
.cc-btn-code:hover .cc-btn-txt{background:#06954a}
/* "Get Deal" TRƯỚC ĐÂY là nút XANH DƯƠNG. Hệ quả: một danh sách trộn Code và Deal
   có hai màu nút ra tiền cạnh nhau, nên người đọc phải học rằng hai màu đó cùng
   nghĩa "bấm để mua" — còn xanh dương ở nơi khác trên site lại nghĩa "đi tới trang
   khác". Giờ cả hai nút ra tiền đều xanh lá; phân biệt bằng CHỮ và bằng hình dáng
   (Code có dải mã che 2 tầng, Deal chỉ 1 tầng), không bằng màu. */
.cc-btn-deal .cc-btn-txt{background:var(--green);padding:15px 14px}
.cc-btn-deal:hover .cc-btn-txt{background:#06954a}
.cc.is-copied{border-color:var(--green)}
.cc.is-copied .cc-btn-mask{background:var(--ink);color:#fff;letter-spacing:var(--ls-caps)}
.cc.is-copied .cc-btn-txt{background:var(--ink)}

/* ---------- Store grid ---------- */
.store-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sc{background:var(--white);border:1px solid var(--line-b);border-radius:var(--radius);
  box-shadow:var(--sh);padding:16px 12px;text-align:center;color:var(--ink);transition:.16s}
.sc:hover{text-decoration:none;border-color:var(--ink);box-shadow:var(--sh-lg);transform:translateY(-3px)}
.sc-logo{width:52px;height:52px;margin:0 auto 9px;border:1px solid var(--line-b);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.sc-logo img{max-width:100%;max-height:100%;object-fit:contain}
.sc-logo span{font-size:var(--fs-9);font-weight:var(--w-bold);color:var(--ink2)}
.sc-name{font-weight:var(--w-bold);font-size:var(--fs-5);letter-spacing:0}
.sc-meta{margin-top:6px;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-2)}
.sc-best{color:var(--green);font-weight:var(--w-bold)}
.sc-count{color:var(--ink3)}

/* ---------- Category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cat-tile{background:var(--white);border:1px solid var(--line-b);border-radius:var(--radius);
  box-shadow:var(--sh);padding:16px 14px;color:var(--ink);display:flex;flex-direction:column;gap:3px;transition:.16s}
.cat-tile:hover{text-decoration:none;border-color:var(--ink);box-shadow:var(--sh-lg)}
.cat-name{font-weight:var(--w-bold);font-size:var(--fs-5)}
.cat-count{font-size:var(--fs-2);color:var(--ink3)}

/* ---------- Trust band + How it works ---------- */
.trust-grid{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--sh-lg);padding:22px;display:grid;gap:20px}
.trust-item h3{font-size:var(--fs-7);margin-bottom:6px;display:flex;align-items:center;gap:9px}
.trust-item h3::before{content:'◆';width:30px;height:30px;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:var(--fs-2)}
.trust-item p{font-size:var(--fs-4);color:var(--ink2)}
/* Dòng chốt của khối uy tín: nói rõ badge thiếu nghĩa là gì */
.trust-foot{border-top:2px solid var(--line2);padding-top:16px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;font-size:var(--fs-4);color:var(--ink2)}
.trust-foot a{font-weight:var(--w-bold);white-space:nowrap}
.how{list-style:none;counter-reset:s;display:grid;gap:12px;padding:0}
.how li{counter-increment:s;background:var(--white);border:1px solid var(--line-b);
  border-radius:var(--radius);box-shadow:var(--sh);padding:17px 17px 17px 56px;position:relative}
.how li::before{content:counter(s);position:absolute;left:17px;top:16px;width:27px;height:27px;
  border-radius:var(--r-sm);background:var(--blue);color:#fff;font-size:var(--fs-3);font-weight:var(--w-bold);
  display:flex;align-items:center;justify-content:center}
.how strong{display:block;font-size:var(--fs-5);font-weight:var(--w-bold)}
.how span{font-size:var(--fs-4);color:var(--ink2)}

/* ---------- Accordion (About / How / FAQ) ---------- */
.acc{background:var(--white);border:1px solid var(--line-b);border-radius:var(--radius);
  box-shadow:var(--sh);margin:12px 0;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;min-height:48px}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{font-size:var(--fs-7)}
.acc summary::after{content:'+';font-size:var(--fs-9);color:var(--ink2);font-weight:var(--w-med)}
.acc[open] summary{border-bottom:2px solid var(--line2)}
.acc[open] summary::after{content:'–'}
.acc-body{padding:16px 18px;font-size:var(--fs-5);color:var(--ink-body)}
.acc-body p+p{margin-top:10px}
.steps{padding-left:20px}
.steps li{margin-bottom:8px}
.faq+.faq{margin-top:14px;border-top:1px solid var(--line2);padding-top:14px}
.faq h3{font-size:var(--fs-5);margin-bottom:4px}
.faq p{font-size:var(--fs-4);color:var(--ink2)}
.rel{margin:30px 0}
.rel h2{font-size:var(--fs-8);margin-bottom:12px}

/* ---------- Prose (trang tĩnh) ---------- */
.prose{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);padding:20px;font-size:var(--fs-6);line-height:var(--lh-read);color:var(--ink-body)}
.prose h2{font-size:var(--fs-8);margin:22px 0 8px;color:var(--ink);letter-spacing:0}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:10px}

/* ---------- Footer ---------- */
.ftr{background:var(--dark);color:#8e9bab;margin-top:40px;padding:34px 0 22px;font-size:var(--fs-4)}
.ftr-in{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ftr-brand{grid-column:1/-1}
.logo-ftr{color:#fff;font-size:var(--fs-7);margin-bottom:8px}
.ftr-col h4{color:#fff;font-size:var(--fs-3);margin-bottom:10px;letter-spacing:var(--ls-wide)}
/* Link footer trước đây cao ~22px (padding 4px + chữ 13.5px) — vi phạm luật
   tap target ≥44px đã chốt, mà footer lại là nơi duy nhất mobile có link tới
   5 trang pháp lý và /how-we-test. Ngón tay trượt ở đây = người ta bỏ luôn
   việc kiểm uy tín của site. */
.ftr-col a{display:flex;align-items:center;min-height:44px;color:#8e9bab;font-size:var(--fs-4)}
.ftr-col a:hover{color:#fff}
/* #6b7686 cũ = 4.11:1 trên nền #0b1117, dưới ngưỡng AA cho chữ 13px.
   #7c8798 = 5.25:1. Dòng này chứa disclosure — không được để nó mờ hơn chuẩn. */
.ftr-bottom{border-top:1px solid #1d2733;margin-top:24px;padding-top:16px;font-size:var(--fs-3);color:#7c8798}
.ftr-disc{margin-bottom:7px}

/* ---------- Blog / review (lớp uy tín) ---------- */
.post-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pc{background:var(--white);border:1px solid var(--line-b);border-radius:var(--radius);
  box-shadow:var(--sh);overflow:hidden;transition:.16s}
.pc:hover{border-color:var(--ink);box-shadow:var(--sh-lg);transform:translateY(-3px)}
/* 1200/630 (khổ Open Graph), KHÔNG phải 16/9. Ảnh bài là thẻ số liệu tự sinh ở
   1200x630; để khung 16/9 thì object-fit:cover cắt ~40px mỗi bên — mất hẳn
   thanh xanh bên trái và ăn vào lề chữ. Ô chữ cái (bài chưa có ảnh) dùng chung
   khung này nên lưới card vẫn thẳng hàng. */
.pc-thumb{aspect-ratio:1200/630;background:linear-gradient(140deg,#dbe4f0,#eef2f7);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-thumb img{width:100%;height:100%;object-fit:cover}
.pc-thumb span{font-size:var(--fs-11);font-weight:var(--w-bold);color:#aab6c6}
.pc-body{padding:16px}
.pc-tag{display:inline-block;font-size:var(--fs-1);font-weight:var(--w-bold);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:#fff;background:var(--ink);border-radius:6px;padding:4px 9px}
.pc-title{font-size:var(--fs-7);line-height:var(--lh-title);margin:10px 0 7px;letter-spacing:0}
.pc-title a{color:var(--ink)}
.pc-title a:hover{text-decoration:none;color:var(--blue)}
.pc-ex{font-size:var(--fs-4);color:var(--ink2)}
.pc-meta{margin-top:13px;padding-top:12px;border-top:1px solid var(--line2);
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--fs-2);color:var(--ink3)}
.pc-av{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-1);font-weight:var(--w-bold)}

/* Byline dưới H1 — khối uy tín, không phải trang trí */
.byline{display:flex;align-items:center;gap:12px;margin:16px 0}
.by-av{width:42px;height:42px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(140deg,var(--ink),#2b3a4f);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:var(--w-bold)}
.by-name{font-size:var(--fs-5);font-weight:var(--w-bold)}
.by-meta{font-size:var(--fs-3);color:var(--ink3);margin-top:1px}
.by-meta a{font-weight:var(--w-med)}

/* `height:auto` BẮT BUỘC đi kèm `width:100%` khi thẻ <img> có width/height attribute.
   Thiếu nó: attribute height="630" vẫn thắng, nên ở mobile ảnh nằm trong hộp
   358x630 và SVG tự thu vào giữa — ra một khung trống to tướng trên và dưới.
   Hai attribute đó không bỏ được (chúng giữ chỗ chống nhảy layout khi ảnh tải). */
.post-hero{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);margin:6px 0 16px}
.post-lede{font-size:var(--fs-7);line-height:var(--lh-read);color:var(--ink-body);margin:16px 0}
.toc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh);padding:18px 20px;margin:20px 0}
.toc h2{font-size:var(--fs-2);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--ink3);margin-bottom:11px}
.toc ol{margin:0;padding-left:19px;font-size:var(--fs-5)}
/* Mục lục là danh sách link bấm bằng ngón tay trên mobile → mỗi mục ~44px,
   không phải chữ sát nhau cao 24px như bản cũ. */
.toc li{margin-bottom:0}
.toc a{display:inline-block;padding:10px 0;line-height:var(--lh-title)}
.post-body{font-size:var(--fs-6);line-height:var(--lh-read);color:var(--ink-body)}
.post-body h2{font-size:var(--fs-8);color:var(--ink);margin:28px 0 11px;letter-spacing:0;
  scroll-margin-top:76px}
.post-body h2:first-child{margin-top:0}
.post-body p+p{margin-top:13px}
/* Link trong bài. Link thường (dẫn nguồn / nội bộ) chỉ gạch chân mảnh.
   Link ra tiền `.in-aff` đậm + gạch chân dày hơn: người đọc phải NHẬN RA
   đây là link mua hàng trước khi bấm — cùng một lý do với dòng disclosure,
   không phải để nó nổi bắt mắt hơn. */
.post-body a{color:var(--blue-d);text-decoration:underline;text-decoration-color:#a9c0ff;text-underline-offset:2px}
.post-body a:hover{text-decoration-color:var(--blue-d)}
.post-body a.in-aff{font-weight:var(--w-bold);text-decoration-thickness:2px;text-decoration-color:var(--blue)}

/* Dải nhảy nhanh đầu bài — neo trong trang, không phải nút affiliate */
.post-jump{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blue-s);
  border:1px solid #cfdeff;border-radius:var(--radius);padding:14px 16px;min-height:44px;
  margin:20px 0;color:var(--ink)}
.post-jump:hover{text-decoration:none;border-color:var(--blue)}
.pj-label{font-size:var(--fs-4);color:var(--ink2)}
.pj-val{font-size:var(--fs-6);font-weight:var(--w-bold);color:var(--green);letter-spacing:0}
.pj-go{width:100%;font-size:var(--fs-4);font-weight:var(--w-bold);color:var(--blue)}

/* Cầu nối ra tiền, đặt cuối bài.
   Khối này nền TRẮNG nên phải đổi màu 2 lỗ khoét của card mã bên trong —
   nếu không thì hiện 2 đốm xám giữa nền trắng. */
.post-cta{--notch:var(--white);background:var(--white);border:2px solid var(--ink);
  border-radius:var(--radius);box-shadow:var(--sh-lg);padding:20px;margin:30px 0}
.pcta-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pcta-head h2{font-size:var(--fs-8)}
.pcta-note{font-size:var(--fs-4);color:var(--ink2);margin:8px 0 15px}
/* "See all [store] coupon codes" — ĐÃ NÂNG CẤP vòng 3. Trước đây nó là ô xám nhạt,
   yếu nhất trong cả khối, trong khi luật Lee chốt ghi rõ: khách đi qua TRANG MÃ rồi
   mới sang hãng thì EPC cao hơn link trần. Tức là thiết kế đang bóp đúng cái đường
   sinh lời nhiều nhất. Giờ là nút đặc, nhưng XANH DƯƠNG không phải xanh lá: nó
   điều hướng trong site, chưa phải động tác mua. */
.pcta-more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-weight:var(--w-bold);font-size:var(--fs-5);padding:14px;min-height:48px;
  border:0;border-radius:var(--radius);background:var(--blue);color:#fff;box-shadow:var(--sh-btn-b);transition:.12s}
.pcta-more:hover{text-decoration:none;background:var(--blue-d);color:#fff}
.pcta-more:active{transform:translateY(2px);box-shadow:0 1px 0 var(--blue-d)}
.post-more{margin:30px 0}
.post-more h2{font-size:var(--fs-8);margin-bottom:12px}
.st-reviews{margin-top:26px}

/* ============================================================
   DESKTOP
   ============================================================ */
@media(min-width:768px){
  .wrap{padding:0 24px}
  .hdr-in{gap:18px;padding-top:13px;padding-bottom:13px}
  .logo{font-size:var(--fs-8)}
  /* Desktop: ô tìm rộng ra, icon chuyển sang trái cho giống thanh tìm quen thuộc */
  .hdr-search{margin-left:0;max-width:380px}
  .hdr-search input{padding:0 15px 0 40px}
  .hdr-search button{right:auto;left:0;width:40px}

  .hero{padding:56px 0 50px}
  .hero h1{font-size:var(--fs-13)}
  .hero-sub{font-size:var(--fs-8);margin-top:14px}
  .hero-search{margin-top:24px;padding:6px 6px 6px 18px}
  .hero-stats{gap:30px;margin-top:26px;padding-top:19px}
  .hero-stats strong{font-size:var(--fs-9)}

  /* Desktop: dải review về 1 hàng thật — flag | tiêu đề+byline | CTA phải */
  .fr-wrap{padding:0 0 20px}
  .fr{grid-template-columns:auto 1fr auto;gap:16px;padding:14px 18px}
  .fr-main{grid-row:1;grid-column:2}
  .fr-go{grid-row:1;grid-column:3;font-size:var(--fs-4)}
  .fr-title{font-size:var(--fs-7);-webkit-line-clamp:1}
  .fr-meta{font-size:var(--fs-3)}

  .sec{margin:40px 0}
  .sec-head h2{font-size:var(--fs-10)}
  .sec-head h2::before{width:6px;height:25px}
  .page-h1{font-size:var(--fs-12)}

  /* Card mã trở lại 1 hàng: % | nội dung | nút */
  .cc{flex-wrap:nowrap;align-items:stretch}
  .cc-left{width:108px;padding:16px 8px}
  .cc-pct{font-size:var(--fs-11)}
  .cc-deal .cc-pct{font-size:var(--fs-7)}
  .cc-mid{padding:15px 17px}
  .cc-title{font-size:var(--fs-7)}
  .cc-desc{font-size:var(--fs-4);margin-top:5px}
  .cc-meta{margin-top:8px}
  .cc-right{width:auto;padding:15px 17px 15px 6px;display:grid;place-content:center}
  .cc-btn{width:auto;min-width:152px}

  .st-strip{padding:20px;gap:18px;align-items:center}
  .st-logo{width:76px;height:76px;border-radius:12px}
  .st-logo-txt{font-size:var(--fs-11)}
  .st-strip-main h1{font-size:var(--fs-11)}
  .st-stats{gap:8px;margin-top:11px;font-size:var(--fs-3)}
  .st-stats span{padding:5px 12px}
  .disclosure{font-size:var(--fs-3);padding:11px 14px;margin:16px 0}

  .store-grid{grid-template-columns:repeat(4,1fr)}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .post-grid{grid-template-columns:repeat(3,1fr)}
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:26px;padding:26px}
  .trust-foot{grid-column:1/-1;padding-top:17px}
  .how{grid-template-columns:repeat(3,1fr)}
  .ftr-in{grid-template-columns:2fr 1fr 1fr 1fr}
  .ftr-brand{grid-column:auto}
  /* Desktop bấm bằng chuột, không cần 44px cho link footer — lấy lại độ gọn */
  .ftr-col a{min-height:32px}

  .post-lede{font-size:var(--fs-8)}
  .post-body{font-size:var(--fs-7)}
  .post-body h2{font-size:var(--fs-9)}
  .post-jump{padding:14px 17px}
  .pj-go{width:auto;margin-left:auto}
  .post-cta{padding:22px}
}
@media(min-width:1024px){
  /* ≥1024px thì nav nằm trong header, dải category mobile không cần nữa */
  .catbar{display:none}
  .hdr-nav{display:flex;gap:20px;font-size:var(--fs-5);font-weight:var(--w-med)}
  .hdr-nav a{color:var(--ink2)}
  .hdr-nav a:hover{color:var(--ink);text-decoration:none}
  .store-grid{grid-template-columns:repeat(6,1fr)}
}

/* ============================================================
   GIẢM CHUYỂN ĐỘNG
   html{scroll-behavior:smooth} + hover transform của card là thứ gây chóng mặt
   cho người bị rối loạn tiền đình. Hệ điều hành có công tắc riêng cho việc này;
   trước vòng 3 site không nghe công tắc đó.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .sc:hover,.pc:hover{transform:none}
}