/* TrustedBuyerReport — editorial review site with a market-standard coupon module.
   Direction: warm neutrals + serif editorial headings (review credibility),
   navy brand, orange reserved for deal CTAs, green reserved ONLY for verified status. */

:root{
  --ink:#242b33;
  --muted:#68707a;
  --paper:#ffffff;
  --soft:#f7f5f1;          /* warm off-white, not gray-blue */
  --border:#e6e2d9;        /* warm hairline */
  --border-dark:#d5cfc2;

  --navy:#173a57;          /* brand */
  --navy-dark:#0f2a41;

  --deal:#c8500a;          /* CTA / savings value — coupon-market orange */
  --deal-dark:#a54108;
  --deal-bg:#fdf2e9;

  --green:#15703f;         /* verified ONLY */
  --green-bg:#eef8f0;
  --green-border:#c4e6cd;
  --amber:#8a6410;         /* aging / pending */
  --amber-bg:#fbf4e0;
  --amber-border:#ecd9a4;
  --red:#b3261e;
  --red-bg:#fbefee;
  --blue:#0f5c8c;          /* text links */
  --blue-bg:#eef4f9;
  --star:#e2a33b;
  --star-empty:#e6dfd0;    /* unfilled star, warm not gray */

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1120px;
  --measure:68ch;          /* reading measure for prose outside the grid */
  --radius:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:1.03rem;line-height:1.62;   /* rem so browser font-size settings still apply */
  -webkit-font-smoothing:antialiased;
}

h1,h2{font-family:var(--serif);letter-spacing:0}
h1{font-size:clamp(1.6rem,3.4vw,2.25rem);line-height:1.22;font-weight:700}
h2{font-size:1.4rem;font-weight:700;margin:2.1rem 0 .6rem}
h3{font-size:1.06rem;font-weight:700;margin:1.3rem 0 .4rem}
p{margin:.65rem 0}
a{color:var(--blue)}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #9cc3e0;outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.small{font-size:.85rem;color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- header ---------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
.topbar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.logo{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--navy);text-decoration:none;white-space:nowrap}
.logo .tick{color:var(--green);font-size:1.05rem;vertical-align:2px}
.site-search{flex:1;display:flex;max-width:480px;margin:0 auto;position:relative}
.site-search input{
  flex:1;min-width:0;padding:9px 14px;font-size:.95rem;
  border:1px solid var(--border-dark);border-right:0;border-radius:6px 0 0 6px;background:var(--soft);
}
.site-search input:focus{background:#fff}
.site-search button{
  border:1px solid var(--navy);background:var(--navy);color:#fff;font-weight:600;font-size:.9rem;
  padding:0 16px;border-radius:0 6px 6px 0;cursor:pointer;
}
.site-search button:hover{background:var(--navy-dark)}
/* User auth links & user menu */
.auth-links{display:flex;gap:6px;align-items:center;flex:none}
.auth-link{
  font-size:.84rem;font-weight:600;text-decoration:none;
  padding:7px 14px;border-radius:6px;white-space:nowrap;
  color:var(--ink);border:1px solid var(--border-dark);
  transition:background .12s,border-color .12s;
}
.auth-link:hover{background:var(--soft)}
.auth-link.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.auth-link.primary:hover{background:var(--navy-dark)}
.user-menu{position:relative;flex:none}
.user-btn{
  display:flex;align-items:center;gap:6px;text-decoration:none;
  background:none;border:none;cursor:pointer;padding:0;
}
.user-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-family:var(--serif);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.user-drop{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;border:1px solid var(--border-dark);border-radius:8px;
  box-shadow:0 6px 18px rgba(23,58,87,.12);min-width:170px;z-index:300;
  padding:6px 0;overflow:hidden;
}
.user-menu:hover .user-drop,.user-menu:focus-within .user-drop{display:block}
.user-drop a,.user-drop button{
  display:block;width:100%;text-align:left;
  padding:9px 16px;font-size:.88rem;font-weight:600;
  color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;
}
.user-drop a:hover,.user-drop button:hover{background:var(--soft);color:var(--navy)}
.user-drop form{margin:0;padding:0}
.menu-btn{
  display:none;border:1px solid var(--border-dark);background:#fff;border-radius:6px;
  padding:8px 12px;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap;
}
.navrow{border-bottom:1px solid var(--border);background:var(--paper)}
.nav{display:flex;gap:2px;flex-wrap:wrap;font-size:.92rem;max-width:var(--maxw);margin:0 auto;padding:0 12px}
.nav a{color:#3a4450;text-decoration:none;padding:9px 12px;font-weight:500;border-bottom:2px solid transparent}
.nav a:hover{color:var(--navy)}
.nav a[aria-current]{color:var(--navy);font-weight:700;border-bottom-color:var(--deal)}
@media(max-width:820px){
  .topbar .wrap{flex-wrap:wrap}
  .site-search{order:3;flex:1 1 100%;width:100%;min-width:0;max-width:none;margin:4px 0 2px}
  .menu-btn{display:block;margin-left:auto}
  .navrow{display:none}
  .navrow.open{display:block}
  .nav{flex-direction:column;padding:6px 12px 10px}
  .nav a{border-bottom:1px solid var(--border);padding:11px 6px}
  .nav a[aria-current]{border-bottom-color:var(--border);border-left:3px solid var(--deal);padding-left:10px}
}
/* Retired: the in-menu search duplicated .site-search. Delete the markup from any
   page that still carries it — this rule only stops it rendering in the meantime. */
.nav-search{display:none!important}
.trustline{background:var(--navy);color:#dbe7f0;font-size:.8rem}
.trustline .wrap{padding:6px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trustline b{color:#fff;font-weight:600}

/* ---------- generic ---------- */
.page{padding:26px 0 56px}
.crumbs{font-size:.83rem;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.byline{display:flex;align-items:center;gap:10px;margin:.8rem 0 1.2rem;font-size:.88rem;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.82rem;flex:none}
.byline b{color:var(--ink)}

.grid-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px}
@media(max-width:900px){.grid-main{grid-template-columns:minmax(0,1fr)}}
.grid-main>*{min-width:0}   /* stops a wide table inside from forcing the page wider */

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:1rem 0}
.card h2:first-child,.card h3:first-child{margin-top:0}
.card.tint-green{background:var(--green-bg);border-color:var(--green-border)}
.card.tint-blue{background:var(--blue-bg);border-color:#c9dcea}
.card.tint-soft{background:var(--soft)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:4px;white-space:nowrap;letter-spacing:.01em}
.badge.green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge.amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.badge.gray{background:var(--soft);color:var(--muted);border:1px solid var(--border-dark)}
.badge.red{background:var(--red-bg);color:var(--red);border:1px solid #eec7c4}
.badge.blue{background:var(--blue-bg);color:var(--blue);border:1px solid #c9dcea}
.badge.navy{background:var(--navy);color:#fff;border:1px solid var(--navy)}

/* stars — SVG, so 4.2 reads as 4.2 and no emoji font can hijack the glyph.
   Markup: .stars > svg[viewBox="0 0 96 18"] with a .track row and a .fill row
   clipped by a nested <svg width="N"> where N = floor(r)*19.5 + frac(r)*18 */
.stars{display:inline-flex;align-items:center;color:var(--star);line-height:1}
.stars>svg{display:block;width:96px;height:18px}
.stars .fill{overflow:hidden}
.stars .track use{fill:var(--star-empty)}
.stars .fill use{fill:var(--star)}
.score-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score-num{font-size:1.9rem;font-weight:700}
.rating-val{font-size:.95rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rating-of{font-size:.82rem;font-weight:400;color:var(--muted)}

/* charts */
.bars{display:grid;gap:7px;margin:.6rem 0}
.bar-row{display:grid;grid-template-columns:72px 1fr 70px;align-items:center;gap:10px;font-size:.83rem;color:var(--muted)}
.bar-track{background:#efece5;border-radius:99px;height:10px;overflow:hidden}
.bar-fill{height:100%;background:var(--navy);border-radius:99px}
.bar-fill.neg{background:#d64545}
.bar-fill.mid{background:var(--star)}

/* tables */
.table-scroll{overflow-x:auto;margin:1rem 0}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:.92rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:0}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;background:var(--soft);color:var(--muted)}
tr.hl td{background:var(--blue-bg)}

ul,ol{margin:.6rem 0 .9rem 1.35rem}
li{margin:.35rem 0}

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.pros-cons{grid-template-columns:1fr}}
.pros-cons .card{margin:0}
.pros-cons ul{margin-left:1.15rem}

/* ---------- store header ---------- */
.store-head{display:flex;gap:16px;align-items:flex-start;margin:.4rem 0 1rem}
.store-logo{
  width:64px;height:64px;flex:none;border:1px solid var(--border-dark);border-radius:8px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--navy);
}
.store-head .meta{font-size:.86rem;color:var(--muted);margin-top:2px}
.store-head .meta a{color:var(--blue)}

/* savings summary strip */
.sumbox{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:1rem 0;background:#fff;
}
.sumbox>div{padding:12px 14px;border-right:1px solid var(--border);font-size:.8rem;line-height:1.35;color:var(--muted)}
.sumbox>div:last-child{border-right:0}
.sumbox b{display:block;font-size:1.25rem;color:var(--ink);font-weight:700;margin-bottom:1px;font-variant-numeric:tabular-nums}
.sumbox b.warn{color:var(--amber)}
.sumbox .deal-val{color:var(--deal)}
@media(max-width:640px){.sumbox>div{border-bottom:1px solid var(--border)}}

/* filter tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:1.1rem 0 .3rem}
.tabs button{
  border:1px solid var(--border-dark);background:#fff;border-radius:99px;padding:6px 14px;
  font-size:.85rem;font-weight:600;color:#3a4450;cursor:pointer;
}
.tabs button:hover{border-color:var(--navy);color:var(--navy)}
.tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- offer cards (coupon module v2) ---------- */
.offer{
  display:grid;grid-template-columns:96px minmax(0,1fr) 190px;
  background:#fff;border:1px solid var(--border-dark);border-radius:var(--radius);
  margin:.9rem 0;overflow:hidden;
}
.offer.best{border:2px solid var(--deal)}
.offer-val{
  background:var(--soft);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:10px 6px;text-align:center;
}
.offer-val b{font-size:1.5rem;font-weight:700;color:var(--deal);line-height:1.05}
.offer-val span{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.offer.best .offer-val{background:var(--deal-bg)}
.offer-body{padding:13px 16px 12px;min-width:0}
.offer-body h3{margin:.35rem 0 .15rem;font-size:1.04rem}
.offer .terms{font-size:.85rem;color:var(--muted);margin:.15rem 0 0}
.offer-flags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.offer-more{border:0;background:none;margin:.45rem 0 0}
.offer-more summary{
  padding:0;font-size:.82rem;font-weight:600;color:var(--blue);cursor:pointer;list-style:none;display:inline;
}
.offer-more summary::after{content:" ▾"}
.offer-more[open] summary::after{content:" ▴"}
.offer-more .a{padding:8px 0 0;font-size:.84rem;color:var(--muted)}
.offer-more .a li{margin:.2rem 0}
/* freshness meter */
.fresh{margin-top:9px;font-size:.76rem;color:var(--muted)}
.fresh .track{background:#efece5;height:5px;border-radius:99px;overflow:hidden;margin-top:3px;max-width:230px}
.fresh .fill{height:100%;background:var(--green);border-radius:99px}
.offer.aging .fresh .fill{background:var(--star)}
.offer.stale .fresh .fill{background:#c2beb4}
/* vote */
.vote{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.vote button{
  border:1px solid var(--border-dark);background:#fff;border-radius:99px;padding:3px 11px;
  font-size:.78rem;font-weight:600;color:#3a4450;cursor:pointer;
}
.vote button:hover{border-color:var(--navy)}
.vote button[aria-pressed="true"]{background:var(--blue-bg);border-color:#c9dcea;color:var(--navy)}
.vote .thanks{color:var(--navy);font-weight:600}
/* cta column: perforated edge like a cut-out coupon */
.offer-cta{
  border-left:2px dashed var(--border-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;
  background:#fffdf9;
}
.btn-code{
  font-family:var(--mono);font-weight:700;font-size:1.02rem;color:var(--ink);
  border:2px dashed var(--deal);background:#fff;padding:11px 10px;border-radius:6px;cursor:pointer;
  width:100%;max-width:160px;position:relative;
}
.btn-code .hint{display:block;font-family:inherit;font-size:.66rem;font-weight:600;letter-spacing:.05em;color:var(--deal);text-transform:uppercase;margin-top:3px}
.btn-code:hover{background:var(--deal-bg)}
.btn-code.copied{border-style:solid;border-color:var(--navy);background:var(--blue-bg)}
.btn-code.copied .hint{color:var(--navy)}
.offer-cta .go{font-size:.8rem;font-weight:600}
.offer.aging .btn-code{border-color:var(--border-dark)}
.offer.aging .btn-code .hint{color:var(--amber)}
/* pending & expired */
.offer.pending{border-style:dashed;background:var(--soft)}
.offer.pending .offer-val,.offer.pending .offer-cta{background:transparent}
.offer.pending .offer-val b{color:var(--muted)}
.offer.expired{opacity:.72;background:var(--soft)}
.offer.expired .offer-val b{color:var(--muted);text-decoration:line-through}
.code-dead{font-family:var(--mono);font-weight:700;color:var(--muted);text-decoration:line-through}
@media(max-width:680px){
  .offer{grid-template-columns:72px minmax(0,1fr)}
  .offer-val b{font-size:1.15rem}
  .offer-cta{grid-column:1/-1;border-left:0;border-top:2px dashed var(--border-dark);flex-direction:row;justify-content:space-between;padding:10px 14px}
  .btn-code{max-width:200px}
}

/* .coupon (legacy) removed — .offer is the only coupon card system now.
   Grep the other pages for class="coupon" and migrate them to .offer. */

.btn{display:inline-block;font-weight:700;font-size:.93rem;background:var(--deal);color:#fff;border:0;padding:12px 20px;border-radius:6px;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--deal-dark)}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--border-dark)}
.btn.secondary:hover{background:var(--soft)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--navy-dark)}

/* three-up card row (methodology, label legend, etc.) */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1rem 0}
.trio .card{margin:0}
.trio p{font-size:.86rem;color:var(--muted);margin:.4rem 0 0}
.trio .step-no{font-family:var(--serif);font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--deal);text-transform:uppercase}
.trio h3{margin:.25rem 0 0}
.callout{font-size:.84rem;color:var(--muted);background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;margin:.6rem 0 0}
.callout b{color:var(--ink)}

/* lead review — the flagship report on the homepage */
.lead-report{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;
  border:1px solid var(--border-dark);border-left:4px solid var(--deal);border-radius:var(--radius);
  background:#fff;padding:20px 22px;margin:1rem 0;
}
.lead-report .score-block{text-align:center;border-right:1px solid var(--border);padding-right:18px}
.lead-report .score-block .n{font-family:var(--serif);font-size:2.6rem;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.lead-report .score-block .of{font-size:.78rem;color:var(--muted);display:block;margin-top:2px}
.lead-report .score-block .base{font-size:.86rem;color:var(--ink);display:block;margin-top:10px;line-height:1.4}
.lead-report h3{font-family:var(--serif);font-size:1.35rem;margin:.3rem 0 .2rem;line-height:1.25}
.lead-report h3 a{color:var(--ink);text-decoration:none}
.lead-report h3 a:hover{color:var(--blue)}
.lead-report .verdict{font-size:.93rem;color:#414a55}
.lead-report .keys{list-style:none;margin:.7rem 0 0;font-size:.94rem;color:var(--ink)}
.lead-report .keys li{margin:.3rem 0;padding-left:18px;position:relative}
.lead-report .keys li::before{content:"—";position:absolute;left:0;color:var(--deal)}
@media(max-width:640px){
  .lead-report{grid-template-columns:1fr;gap:12px}
  .lead-report .score-block{text-align:left;border-right:0;border-bottom:1px solid var(--border);padding:0 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .lead-report .score-block .base{margin-top:0}
}

/* long-tail question index */
.qbank{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px;margin:1rem 0}
.qbank a{
  display:block;padding:11px 0 11px 22px;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--ink);font-size:.93rem;position:relative;
}
.qbank a::before{content:"?";position:absolute;left:0;top:11px;font-family:var(--serif);font-weight:700;color:var(--deal);font-size:.95rem}
.qbank a:hover{color:var(--blue)}
.qbank a .ans{display:block;font-size:.82rem;color:var(--muted);margin-top:1px}

/* sidebar */
.side .card{margin-top:0}
.toc a{display:block;padding:7px 2px;text-decoration:none;color:#3a4450;font-size:.9rem;border-bottom:1px solid var(--border)}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--blue)}
.legend-mini{list-style:none;margin:.4rem 0 0;font-size:.82rem;color:var(--muted)}
.legend-mini li{margin:.45rem 0;display:flex;gap:8px;align-items:flex-start}
.legend-mini .badge{flex:none;margin-top:1px}

/* email alert */
.alert-box{background:var(--blue-bg);border:1px solid #c9dcea;border-radius:var(--radius);padding:16px 18px;margin:1rem 0}
.alert-box h3{margin-top:0}
.alert-box form{display:flex;gap:8px;margin-top:.6rem}
.alert-box input{flex:1;min-width:0;padding:10px 12px;font-size:.92rem;border:1px solid var(--border-dark);border-radius:6px}
@media(max-width:520px){.alert-box form{flex-direction:column}}

/* ---------- home ---------- */
.hero{background:var(--soft);border-bottom:1px solid var(--border);padding:44px 0 36px}
.hero h1{font-size:clamp(1.9rem,4.2vw,2.7rem);max-width:700px}
.hero p.lead{font-size:1.1rem;color:#414a55;max-width:620px;margin-top:.7rem}
.hero .search{display:flex;max-width:560px;margin-top:1.3rem}
.hero .search input{flex:1;min-width:0;padding:13px 16px;font-size:1rem;border:1px solid var(--border-dark);border-right:0;border-radius:6px 0 0 6px;background:#fff}
.hero .search .btn{border-radius:0 6px 6px 0}
.stats-row{display:flex;gap:26px;flex-wrap:wrap;margin-top:1.5rem;font-size:.88rem;color:var(--muted)}
.stats-row b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--ink)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-head a{font-size:.88rem;font-weight:600;white-space:nowrap}

.store-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:1rem 0}
.store-tile{
  border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:14px;
  display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);
}
.store-tile:hover{border-color:var(--navy)}
.store-tile .mark{
  width:38px;height:38px;flex:none;border:1px solid var(--border-dark);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;color:var(--navy);background:var(--soft);font-size:.95rem;
}
.store-tile .nm{font-size:.9rem;font-weight:700;line-height:1.25}
.store-tile .sub{display:block;font-size:.74rem;color:var(--muted);font-weight:500}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:.8rem 0}
.chips a{border:1px solid var(--border-dark);border-radius:99px;padding:6px 14px;font-size:.85rem;font-weight:600;color:#3a4450;text-decoration:none;background:#fff}
.chips a:hover{border-color:var(--navy);color:var(--navy)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;margin:1.1rem 0}
.post-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s,border-color .15s}
.post-card:hover{border-color:var(--border-dark);box-shadow:0 3px 10px rgba(40,35,25,.07)}
.cat{display:inline-block;font-size:.72rem;font-weight:700;color:var(--deal);text-transform:uppercase;letter-spacing:.06em}
.post-card a.t{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;line-height:1.3}
.post-card a.t:hover{color:var(--blue)}
.post-card .foot{margin-top:auto;font-size:.79rem;color:var(--muted)}

/* faq */
details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin:.5rem 0}
summary{font-weight:600;cursor:pointer;padding:13px 16px;list-style-position:inside}
details[open] summary{border-bottom:1px solid var(--border)}
details .a{padding:10px 16px 14px}
details.offer-more{background:none;border:0}
details.offer-more[open] summary{border-bottom:0}
details.offer-more .a{padding:8px 0 0}

/* steps */
.steps{list-style:none;margin-left:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;margin:12px 0;align-items:start}
.steps li::before{content:counter(s);background:var(--navy);color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.9rem}

/* disclosure */
.disclosure{font-size:.84rem;color:var(--muted);background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin:1rem 0}

/* moderation table */
.evidence{list-style:none;margin:0;font-size:.82rem;color:var(--muted)}
.evidence li{margin:.15rem 0}
.ok{color:var(--green);font-weight:700}
.no{color:var(--red);font-weight:700}

footer{background:var(--navy-dark);color:#b9c7d3;margin-top:56px;font-size:.88rem}
footer .wrap{padding:36px 20px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:8px}
footer a{color:#b9c7d3;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer .small{color:#8fa3b4}
@media(max-width:400px){
  .wrap{padding:0 14px}
  .logo{font-size:1.12rem}
  .menu-btn{padding:8px 10px}
}

.mock-note{background:var(--amber-bg);border-bottom:1px solid var(--amber-border);color:var(--amber);font-size:.78rem;text-align:center;padding:6px 12px}

/* ==========================================================================
   Fixes appended: reading measure, figure emphasis, skip link, image
   placeholders, visited state.
   ========================================================================== */

/* 13 — cap prose that sits outside .grid-main; full width was ~140 chars/line */
.page>h2,.page>h3,.page>p,.page>ul,.page>ol{max-width:var(--measure)}
.lead-report .verdict,.lead-report .keys{max-width:var(--measure)}
.qbank a{max-width:46ch}

/* 8 — any figure reads as ink, whatever it sits inside */
.fig{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.stats-row{color:#4b545f}

/* sticky header would otherwise cover an anchored heading after a jump */
:target,h1[id],h2[id],h3[id],section[id],article[id]{scroll-margin-top:96px}

/* 20 — skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;
  padding:10px 18px;border-radius:0 0 6px 0;text-decoration:none;
}
.skip-link:focus{left:0}
main:focus{outline:none}

/* 18 — reserve the box before the image loads, so nothing shifts (CLS) */
figure{margin:1.1rem 0}
figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;max-width:var(--measure)}
.media{
  display:block;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);
}
.media.wide{aspect-ratio:16/9}
.media.square{aspect-ratio:1/1}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* 21 — visited state. Q&A and card titles dim once read; navigation does not. */
a:visited{color:#5f5478}
.qbank a:visited,.qbank a:visited .ans{color:var(--muted)}
.qbank a:visited::before{color:var(--border-dark)}
.post-card a.t:visited,.lead-report h3 a:visited{color:#6a6157}
.logo:visited{color:var(--navy)}
.nav a:visited,.chips a:visited,.toc a:visited{color:#3a4450}
.nav a[aria-current]:visited{color:var(--navy)}
.store-tile:visited{color:var(--ink)}
.crumbs a:visited{color:var(--muted)}
footer a:visited{color:#b9c7d3}
.btn:visited{color:#fff}
.btn.secondary:visited{color:var(--ink)}
.trustline a:visited{color:#dbe7f0}

/* ==========================================================================
   Store profile + user-submitted reviews (store-reviews.html)
   Green stays reserved for editor-verified state: a shopper's own claim is
   navy/blue, only "Verified purchase" (receipt checked by us) earns green.
   ========================================================================== */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* small star row for review cards */
.stars.sm>svg{width:80px;height:15px}

/* aggregate rating + distribution */
.rating-summary{
  display:grid;grid-template-columns:172px minmax(0,1fr);gap:26px;align-items:center;
  border:1px solid var(--border-dark);border-radius:var(--radius);background:#fff;
  padding:20px 22px;margin:1rem 0;
}
.rating-agg{text-align:center;border-right:1px solid var(--border);padding-right:22px}
.rating-agg .n{font-family:var(--serif);font-size:2.8rem;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rating-agg .stars{margin:6px 0 4px}
.rating-agg .base{display:block;font-size:.84rem;color:var(--ink);line-height:1.4}
.rating-summary .bar-row{grid-template-columns:58px 1fr 78px;font-size:.84rem;color:var(--ink)}
.rating-summary .bar-row .cnt{color:var(--muted);text-align:right}
@media(max-width:640px){
  .rating-summary{grid-template-columns:1fr;gap:14px}
  .rating-agg{border-right:0;border-bottom:1px solid var(--border);padding:0 0 14px}
}

/* theme tally — what reviewers keep saying */
.themes{list-style:none;margin:.6rem 0 0;display:grid;gap:8px}
.themes li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:.92rem;margin:0}
.themes .mk{font-weight:700;color:var(--deal);font-family:var(--serif)}
.themes .mk.down{color:var(--red)}

/* review cards */
.review-list{margin:.4rem 0 0}
.review{padding:18px 0;border-bottom:1px solid var(--border)}
.review:last-child{border-bottom:0}
.review-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.review .who{font-weight:700;font-size:.93rem;color:var(--ink)}
.review .when{font-size:.8rem;color:var(--muted)}
.review .rtitle{font-family:var(--serif);font-size:1.06rem;font-weight:700;margin:.5rem 0 0;line-height:1.3}
.review-body{font-size:.94rem;margin:.35rem 0 0;max-width:var(--measure)}
.review-facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:.79rem;color:var(--muted)}
.review-facts b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.review .reply{
  margin:12px 0 0;padding:11px 14px;background:var(--soft);
  border-left:3px solid var(--navy);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.88rem;max-width:var(--measure);
}
.review .reply b{color:var(--ink)}

/* write-a-review form */
.form-grid{display:grid;gap:14px;margin-top:.8rem}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.field input[type=text],.field input[type=email],.field input[type=date],
.field textarea,.field select{
  width:100%;padding:10px 12px;font-size:.95rem;font-family:inherit;color:var(--ink);
  border:1px solid var(--border-dark);border-radius:6px;background:#fff;
}
.field textarea{min-height:120px;line-height:1.55;resize:vertical}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:4px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.checkline{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;margin:.5rem 0}
.checkline input{margin-top:4px;flex:none}

/* star rating input — DOM order 5→1, reversed visually, no JS */
.star-input{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:1px;border:0;padding:0;margin:0}
/* the radios stay focusable but must not sit on top of the labels and eat clicks */
.star-input input{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.star-input label{cursor:pointer;line-height:0;padding:2px;border-radius:4px}
.star-input label svg{width:28px;height:28px;display:block;fill:var(--star-empty)}
.star-input input:checked~label svg,
.star-input label:hover svg,
.star-input label:hover~label svg{fill:var(--star)}
.star-input input:focus-visible+label{outline:3px solid #9cc3e0;outline-offset:1px}
.rate-field{border:0;padding:0;margin:0}
.rate-field legend{font-size:.85rem;font-weight:700;color:var(--ink);padding:0;margin-bottom:2px}

/* store fact sheet */
.facts{width:100%;font-size:.9rem}
.facts th{width:38%;white-space:nowrap;text-transform:none;font-size:.82rem;letter-spacing:0}

/* front-loaded answer paragraph (store + coupon pages) */
.lead-in{
  font-size:1.02rem;max-width:var(--measure);margin:1rem 0;
  border-left:3px solid var(--deal);padding:2px 0 2px 15px;
}
.lead-in b{color:var(--ink)}

/* ==========================================================================
   Click-to-reveal coupon code
   The code is NOT in the HTML. The button asks the server for it on click, so
   a scraper that only fetches the page walks away with an opaque offer id.
   ========================================================================== */
.code-slot{width:100%;max-width:174px;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.code-reveal{
  position:relative;width:100%;overflow:hidden;cursor:pointer;
  border:0;border-radius:999px;background:var(--deal);color:#fff;
  font-family:inherit;font-weight:700;font-size:1rem;
  padding:13px 30px 13px 16px;text-align:center;
}
.code-reveal:hover{background:var(--deal-dark)}
.code-reveal[aria-busy="true"]{opacity:.7;cursor:progress}
/* peeled corner — the outer wedge, then the fold catching the light */
.code-reveal::before,.code-reveal::after{
  content:"";position:absolute;top:0;right:0;width:44px;height:44px;
  border-bottom-left-radius:100%;pointer-events:none;
}
.code-reveal::before{background:#d5d3da}
.code-reveal::after{background:rgba(255,255,255,.28);clip-path:polygon(0 0,100% 100%,0 100%)}
.code-slot .btn-code{max-width:none}
.code-slot .fallback{font-size:.72rem;color:var(--muted);text-align:center}
.offer.aging .code-reveal{background:var(--muted)}
.offer.aging .code-reveal:hover{background:#555c66}

/* ==========================================================================
   Sidebar density
   ========================================================================== */
.side .bar-row{grid-template-columns:44px 1fr 30px;font-size:.78rem;gap:8px}
.side .bars{margin:.5rem 0 .2rem}
.side>.stick{position:sticky;top:74px}
.side-note{font-size:.78rem;color:var(--muted);margin:.4rem 0 0}
.mini-check{list-style:none;margin:.5rem 0 0;font-size:.85rem}
.mini-check li{display:grid;grid-template-columns:16px 1fr;gap:8px;margin:.5rem 0}
.mini-check .mk{color:var(--deal);font-weight:700}

/* ==========================================================================
   Autosuggest dropdown
   ========================================================================== */
.as-drop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:400;
  background:#fff;border:1px solid var(--border-dark);border-radius:8px;
  box-shadow:0 6px 20px rgba(23,58,87,.13);overflow:hidden;
  list-style:none;margin:0;padding:0;
}
.as-drop[hidden]{display:none}
.as-item{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.6rem .9rem;text-decoration:none;color:inherit;cursor:pointer;
  border-bottom:1px solid var(--border);
}
.as-item:last-child{border-bottom:0}
.as-item:hover,.as-item[aria-selected=true] .as-item{background:var(--soft)}
[role=option][aria-selected=true]>.as-item{background:var(--soft)}
.as-item-type{
  flex:none;margin-top:.18rem;min-width:90px;text-align:center;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.15rem .4rem;border-radius:3px;background:var(--soft);
  border:1px solid var(--border);white-space:nowrap;
}
.as-item-type.review{color:var(--green);border-color:currentColor}
.as-item-type.how_to,.as-item-type.comparison{color:var(--navy);border-color:currentColor}
.as-item-type.listicle,.as-item-type.coupon_list{color:var(--deal);border-color:currentColor}
.as-item-body{flex:1;min-width:0}
.as-item-title{font-weight:700;font-size:.88rem;font-family:var(--serif);line-height:1.3;color:var(--ink)}
.as-item-sub{font-size:.75rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-footer{
  display:block;padding:.55rem .9rem;font-size:.82rem;font-weight:600;
  color:var(--navy);text-decoration:none;background:var(--soft);
  border-top:1px solid var(--border-dark);text-align:center;
}
.as-footer:hover{background:var(--border)}
.as-empty{padding:1rem .9rem;font-size:.87rem;color:var(--muted);text-align:center}

/* ==========================================================================
   Wishlist button
   ========================================================================== */
.wl-btn{
  flex:none;border:1.5px solid var(--border-dark);background:#fff;
  border-radius:6px;padding:7px 11px;font-size:1.1rem;line-height:1;
  cursor:pointer;color:var(--muted);
  transition:background .12s,border-color .12s,color .12s;
}
.wl-btn:hover{border-color:var(--deal);color:var(--deal)}
.wl-btn.wishlisted{border-color:var(--deal);color:var(--deal);background:#fff4f0}

/* ==========================================================================
   Post comments
   ========================================================================== */
.comments-section{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.comment{display:flex;gap:.75rem;margin-bottom:1.25rem}
.comment-reply{margin-top:.75rem;margin-left:2.75rem;padding-left:.875rem;border-left:2px solid var(--border)}
.comment-avatar{
  flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-family:var(--serif);font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.comment-name{font-weight:700;font-size:.88rem;color:var(--ink)}
.comment-date{font-size:.75rem;color:var(--muted)}
.comment-text{font-size:.88rem;line-height:1.6;color:var(--ink);margin:0}
.comment-form{
  margin-top:1.5rem;padding:1.25rem;
  background:var(--soft);border:1px solid var(--border);border-radius:8px;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.gp-footer { background: #0f1f2e; color: #a8bcc8; font-size: 14px; padding: 48px 0 0; }
.gp-footer a { color: #a8bcc8; text-decoration: none; transition: color .15s; }
.gp-footer a:hover { color: #fff; }
.gp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.gp-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 40px 24px; padding-bottom: 40px; border-bottom: 0.5px solid rgba(255,255,255,.1); }
.gp-col h4 { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.gp-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-col ul li a { font-size: 13px; line-height: 1.4; }

/* App badges */
.gp-apps { display: flex; flex-direction: column; gap: 10px; }
.gp-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 0.5px solid rgba(255,255,255,.15); border-radius: 8px; padding: 8px 14px; transition: background .15s; }
.gp-badge:hover { background: rgba(255,255,255,.12); color: #a8bcc8; }
.gp-badge-icon { width: 22px; height: 22px; flex-shrink: 0; fill: #fff; }
.gp-badge-sub { display: block; font-size: 9px; letter-spacing: .04em; color: rgba(255,255,255,.55); line-height: 1; }
.gp-badge-name { display: block; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }

/* Social icons */
.gp-social ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.gp-social-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.06); border: 0.5px solid rgba(255,255,255,.12); transition: background .15s; }
.gp-social-icon:hover { background: rgba(255,255,255,.14); }
.gp-social-icon svg { width: 16px; height: 16px; fill: #fff; }

/* Bottom row */
.gp-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; padding: 32px 0; }
.gp-about p, .gp-legal p { font-size: 12.5px; line-height: 1.7; margin: 0 0 10px; color: #7b9aad; }
.gp-about strong { color: #c8d8e0; }
.gp-about a { color: #5e9cc4; text-decoration: underline; text-decoration-color: rgba(94,156,196,.4); }
.gp-about a:hover { color: #7ec2e8; }
.gp-legal p { font-size: 11.5px; color: #5e7a89; }
.gp-legal nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.gp-legal nav a { font-size: 11.5px; color: #5e7a89; }
.gp-legal nav a:hover { color: #a8bcc8; }

@media (max-width: 640px) {
  .gp-bottom { grid-template-columns: 1fr; }
  .gp-top { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================
   FOOTER
   =========================== */

footer[role="contentinfo"] {
  background: #0d1f2d;
  color: #c8d8e4;
  font-family: var(--font-sans, sans-serif);
}

.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 32px;
}

/* ===========================
   NAV COLUMNS
   =========================== */

footer nav h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

footer nav a {
  display: block;
  font-size: 14px;
  line-height: 2;
  color: #a8c4d8;
  text-decoration: none;
  transition: color 0.15s;
}

footer nav a:hover {
  color: #e8f4fc;
}

/* ===========================
   BRAND COLUMN
   =========================== */

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-site-name {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.footer-tagline {
  font-size: 13px;
  color: #7a9bb0;
  line-height: 1.5;
  margin: 0 0 18px;
}

/* ===========================
   SOCIAL ICONS
   =========================== */

.footer-social {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  gap: 10px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: #a8c4d8;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ===========================
   APP STORE BADGES
   =========================== */

.footer-apps {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.app-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 0.15s;
  flex: 1;
}

.app-badge:hover {
  background: rgba(255, 255, 255, 0.12);
}

.app-badge i {
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.app-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.app-badge small {
  font-size: 10px;
  color: #7a9bb0;
}

.app-badge strong,
.app-badge span > :last-child {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

/* ===========================
   BOTTOM BAR
   =========================== */

.footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 20px 32px 28px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-disclaimers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-disclaimers p {
  font-size: 12px;
  color: #5a7a8e;
  line-height: 1.5;
  margin: 0;
}

.footer-disclaimers strong {
  color: #7a9bb0;
  font-weight: 500;
}

.footer-copy {
  font-size: 12px;
  color: #3a5a6e;
  white-space: nowrap;
  margin: 0;
  align-self: flex-end;
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 900px) {
  .footer-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-apps {
    max-width: 360px;
  }
}

@media (max-width: 560px) {
  .footer-wrap {
    grid-template-columns: 1fr;
    padding: 36px 20px 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 28px;
  }

  .footer-copy {
    align-self: auto;
  }

  .footer-apps {
  display: flex;
  flex-direction: column;  /* 2 dòng */
  gap: 8px;
}

.app-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 9px 14px;
  text-decoration: none;
  transition: background 0.15s;
  color: #fff;  /* icon inherit màu này */
}

.app-badge:hover {
  background: rgba(255, 255, 255, 0.12);
}

.app-badge svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: currentColor;  /* dùng currentColor thay vì #fff cứng */
}

.app-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.app-badge small {
  font-size: 10px;
  color: #7a9bb0;
  font-weight: 400;
  white-space: nowrap;
}

.app-badge strong {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
}