/* Zapstack — ĐỒNG BỘ F2 (anh chốt 26/09/2026): Manrope (tiêu đề) + Inter (thân bài),
   accent indigo, thẻ bo mềm. Font TỰ HOST (assets/fonts, đã subset 50KB) — không request ra ngoài. */
@font-face{font-family:'InterVar';src:url('fonts/inter-var-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'ManropeVar';src:url('fonts/manrope-var-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:root{--paper:#FCFCFD;--sheet:#fff;--ink:#0A1020;--ink2:#333F58;--mut:#63718B;--line:#E4E8F2;
  --acc:#2A46E8;--w:760px;--sk:'InterVar',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'InterVar',ui-sans-serif,system-ui,sans-serif}
body{margin:0;background:var(--paper);color:var(--ink);font:17.5px/1.7 'InterVar',ui-sans-serif,system-ui,
  -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.kicker,.brand,.verdict{font-family:'ManropeVar','InterVar',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.022em}
.shell{max-width:var(--w);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px;
  border-radius:2px;font:600 .9rem var(--sk);text-decoration:none}
a{color:var(--ink)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
header.top{border-bottom:2px solid var(--ink);background:var(--paper)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.brand{font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-size:1.15rem}
.brand .mark{display:inline-block;width:10px;height:10px;background:var(--acc);margin-right:9px;
  transform:translateY(-1px)}
nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
nav a{font:400 .8rem/1 var(--sk);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  text-decoration:none}
nav a:hover{color:var(--acc)}
.hero{padding:44px 0 10px}
.kicker{margin:0 0 14px;font:700 .76rem/1 var(--sk);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
h1{margin:0 0 18px;font-size:clamp(2.05rem,5vw,3.15rem);line-height:1.08;letter-spacing:-.02em;font-weight:400}
.lede{margin:0;font-size:clamp(1.05rem,2.2vw,1.24rem);color:#3c3830}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:20px 0 0;padding-top:12px;
  border-top:1px solid var(--line);font:400 .78rem/1.5 var(--sk);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
h2{font-size:1.42rem;line-height:1.25;letter-spacing:-.01em;font-weight:400;margin:48px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
h3{letter-spacing:-.01em}
p{margin:0 0 14px}
main{padding-bottom:10px}
main a{text-decoration-thickness:1px;text-underline-offset:2px}
.glance ol{margin:0;padding-left:24px;display:grid;gap:7px}
.glance li{padding-left:2px}
.gname{font-weight:700}
.gfor{color:var(--mut);font-size:.95rem}
@media(min-width:700px){.glance ol{grid-template-columns:1fr 1fr;column-gap:28px}}
.tscroll{overflow-x:auto;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font:400 .93rem/1.5 var(--sk);min-width:460px}
/* Khối "Free tool" trên các trang guide — dẫn khách vào calculator (duyệt 15/09) */
.toolbox{border:1px solid var(--bd,#e6e2d8);background:var(--hl,#fdf7ee);padding:20px;margin:6px 0 26px}
.toolbox h2{margin:6px 0 8px;font-size:1.35rem}
.toolbox p{margin:0 0 14px;font:400 1rem/1.6 Georgia,serif}
.toolbox .kicker{margin:0;font:700 .72rem/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mut,#6b675e)}
th,td{padding:12px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600}
tbody tr:last-child td{border-bottom:0}
.tname{font-weight:700;white-space:nowrap}
.picks{margin-top:14px}
.pick{padding:26px 0;border-bottom:1px solid var(--line);display:grid;gap:16px}
.pick .pbody{min-width:0}
.pickimg{margin:0}
.pickimg img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#0a0a14}
@media(min-width:720px){.pick{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
  .pickimg{order:2}.pick .pbody{order:1}}
@media(max-width:719px){.pickimg img{max-height:240px;object-fit:cover;object-position:center}}
.pick.media-wide{grid-template-columns:1fr}
.pick.media-wide .pickimg{order:-1;margin:0 0 4px}
.pick.media-wide .pbody{order:1}
.pick.media-wide .pickimg img{max-height:none}
.pick .rank{margin:0 0 6px;font:700 .74rem/1 var(--sk);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.pick h3{margin:0 0 10px;font-size:1.5rem;font-weight:400;line-height:1.2}
.pick p{margin:0 0 12px;color:var(--ink2)}
.best{margin:0 0 12px !important;color:#2a2620}
.best b{font-family:var(--sk);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  display:block;margin-bottom:2px}
.best em{font-style:italic}
.watch{padding:12px 15px !important;background:#f4f1e9;border-left:3px solid var(--acc);border-radius:0;
  font:400 .92rem/1.6 var(--sk) !important;color:#33302a !important}
.cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:14px 24px;border-radius:2px;
  background:var(--ink);color:var(--paper);font:700 .95rem/1 var(--sk);text-decoration:none}
.cta:hover{background:#000}
.altcta{margin:30px 0;padding:18px 20px;background:var(--sheet);border:1px solid var(--line);
  border-left:4px solid var(--acc);border-radius:3px;font-family:var(--sk)}
.altcta h3{margin:0 0 6px;font-size:1.02rem;letter-spacing:-.01em}
.altcta p{margin:0 0 12px;color:var(--ink2);font-size:.95rem;line-height:1.55}
.cta.pending{background:transparent;color:#6b675e;border:1px dashed #cdc7b8;font-weight:500;
  min-height:40px;padding:11px 16px}
.checks{margin:0;padding-left:22px;display:grid;gap:8px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:15px 30px 15px 0;list-style:none;position:relative;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:14px;color:var(--acc);font-family:var(--sk);
  font-weight:700}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin:2px 0 16px;color:#3c3830;font-size:1rem}
.note{margin:40px 0 0;border-left:3px solid var(--acc);padding:2px 0 2px 16px;
  font:400 .93rem/1.65 var(--sk);color:#3c3830}
.note h3{margin:0 0 6px;font:700 .78rem/1 var(--sk);letter-spacing:.12em;text-transform:uppercase}
.note p{margin:0}
.disclosure{margin:20px 0 0;font:400 .85rem/1.6 var(--sk);color:var(--mut)}
.afdisc{margin:8px 0 18px;font:400 .8rem/1.5 var(--sk);color:var(--mut)}
footer{margin-top:44px;border-top:1px solid var(--line);font:400 .82rem/1.7 var(--sk);color:var(--mut)}
footer .shell{padding:22px 0 96px}
footer a{color:var(--mut);text-decoration:none;border-bottom:1px solid #d8d2c4}
footer a:hover{color:var(--acc)}
.footlinks{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 10px}
/* sticky CTA mobile */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(115%);
  transition:transform .22s ease;background:#141310;color:#fbfaf7;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 16px;font:600 .88rem/1.3 var(--sk)}
.stickybar.on{transform:translateY(0)}
.stickybar span{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.stickybar a{background:#fbfaf7;color:#141310;text-decoration:none;font-weight:700;padding:12px 16px;
  border-radius:2px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
@media(min-width:900px){.stickybar{display:none}}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}
/* bảng giá có nguồn + dòng chi phí + kết luận */
.costline{margin:0 0 12px !important;padding:10px 14px;background:#f6f3ec;
  font:400 .9rem/1.6 var(--sk) !important;color:#33302a !important}
.pricing-note{margin:0 0 12px;font:400 .88rem/1.6 var(--sk);color:var(--mut)}
td a{color:var(--acc);font:400 .82rem/1.4 var(--sk)}
.verdict{padding:18px 20px;background:#f4f1e9;border-left:3px solid var(--acc);font-size:1.02rem;margin:0}
/* ảnh + trực quan hoá */
.heroimg{margin:22px 0 0}
.heroimg img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#0a0a14}
.heroimg figcaption{margin-top:7px;font:400 .8rem/1.5 var(--sk);color:var(--mut)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.jump a{font:600 .78rem/1 var(--sk);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:9px 14px;min-height:36px;
  display:inline-flex;align-items:center;background:#fff}
.jump a:hover{border-color:var(--acc);color:var(--acc)}
.ladder{border:1px solid var(--line);background:#fff;padding:16px 18px;margin:0 0 14px}
.ladder h4{margin:0 0 10px;font-size:1rem}
.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.step{flex:1 1 148px;border:1px solid var(--line);padding:11px 12px;background:#fbfaf7}
.step.entry{border-color:var(--acc);background:#fff}
.slabel{display:block;font:700 .7rem/1 var(--sk);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sprice{display:block;font-size:1.22rem;margin:5px 0 3px;font-weight:400}
.step.entry .sprice{color:var(--acc);font-weight:700}
.snote{display:block;font:400 .78rem/1.45 var(--sk);color:var(--mut)}
tr.hl td{background:#fdf7ee}
tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.tagcheap{display:inline-block;margin-left:7px;font:700 .64rem/1 var(--sk);letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--acc);padding:4px 6px;vertical-align:middle}
.pc{display:grid;gap:10px;margin:0 0 14px}
@media(min-width:640px){.pc{grid-template-columns:1fr 1fr}}
.pc div{padding:11px 14px;font:400 .93rem/1.6 var(--sk);background:#f4f6f2;border-left:3px solid #4c7a4c}
.pc div.con{background:#fdf8ec;border-left-color:var(--acc)}
.pc b{display:block;font:700 .7rem/1 var(--sk);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin-bottom:5px}
ol.cards{list-style:none;counter-reset:c;padding:0;margin:0;display:grid;gap:10px}
ol.cards li{counter-increment:c;position:relative;padding:14px 16px 14px 54px;border:1px solid var(--line);
  background:#fff;font-size:1.01rem}
ol.cards li:before{content:counter(c,decimal-leading-zero);position:absolute;left:16px;top:13px;
  font:700 .82rem/1 var(--sk);color:var(--acc);letter-spacing:.06em}

/* bảng tự gãy thành THẺ trên mobile (không còn bóp cột) */
@media(max-width:640px){
  .tscroll{overflow-x:visible;border:0}
  table.rt{min-width:0}
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{border:1px solid var(--line);background:#fff;padding:12px 14px;margin-bottom:10px}
  table.rt td{border:0;padding:4px 0}
  table.rt td:before{content:attr(data-l);display:block;font:700 .66rem/1.5 var(--sk);
    letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
  table.rt td.tname{font-size:1.14rem;padding-bottom:8px}
  table.rt td.tname:before{content:none}
  table.rt tr.hl td:first-child{box-shadow:none}
  table.rt tr.hl{border-color:var(--acc);border-left-width:3px}
  footer .shell{padding-bottom:112px}
}

/* ===== INFOGRAPHIC KIT (layout kiểu baoyu, dựng bằng HTML/CSS) ===== */
.matrix table{min-width:640px}
.matrix th:first-child,.matrix td:first-child{width:26%}
.matrix thead th{font-weight:700;color:var(--ink2)}
.matrix td.crit{font:700 .82rem/1.5 var(--sk);letter-spacing:.02em;color:var(--ink2)}
.bars{margin:0 0 14px}
.bar{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.bar .bname{font:600 .86rem/1.4 var(--sk);color:var(--ink2)}
.bar .btrack{background:#efece4;height:26px;position:relative;border-left:2px solid var(--acc)}
.bar .bfill{background:linear-gradient(90deg,#8a2b1f,#b4543f);height:100%;display:flex;align-items:center;
  justify-content:flex-end;padding-right:8px;color:#fff;font:700 .76rem/1 var(--sk);min-width:64px}
.bar .blabel{font:600 .8rem/1 var(--sk);color:var(--ink2);white-space:nowrap}
.decision{display:grid;gap:12px}
@media(min-width:700px){.decision{grid-template-columns:repeat(3,1fr)}}
.branch{border:1px solid var(--line);background:#fff;padding:16px}
.branch .bif{font:400 1rem/1.5 var(--serif,Georgia);color:#3c3830;margin:0 0 12px}
.branch .bthen{font:700 .95rem/1.3 var(--sk);color:var(--acc);margin:0 0 6px}
.branch .bwhy{font:400 .84rem/1.5 var(--sk);color:var(--mut);margin:0}
.infocap{margin:0 0 12px;font:400 .84rem/1.6 var(--sk);color:var(--mut)}
.scale{display:grid;gap:12px;margin:0 0 14px}
.scalehead,.scalerow{display:grid;grid-template-columns:190px 1fr 170px;gap:10px;align-items:center}
.scalehead span{font:600 .7rem/1 var(--sk);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.scalehead .s1{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.scalerow .sname{font:600 .86rem/1.4 var(--sk);color:var(--ink2)}
.scalerow .strack{position:relative;height:30px;background:#efece4;border-radius:2px}
.scalerow .strack:before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#dcd6c8 calc(25% - 1px),#dcd6c8 25%)}
.scalerow .mark{position:absolute;top:-7px;width:3px;height:44px;background:var(--acc)}
.scalerow .mark:after{content:"";position:absolute;top:-4px;left:-5px;width:13px;height:13px;border-radius:50%;
  background:var(--acc)}
.scalerow .sval{font:600 .8rem/1.3 var(--sk);color:var(--acc)}
@media(max-width:640px){
  .scalehead{display:none}
  .scalerow{grid-template-columns:1fr;}
  .scalerow .sval{order:3}
}
/* mobile: bảng matrix cũng gãy thành thẻ, KHÔNG tràn ngang */
@media(max-width:640px){
  .matrix table{min-width:0}
  .matrix td.crit{font-size:.95rem;border-top:1px solid var(--line);padding-top:10px}
  .bar{grid-template-columns:1fr;gap:4px}
  .bar .btrack{height:24px}
}
/* index + trang tĩnh */
.guides{display:grid;gap:0;margin-top:8px;border-top:1px solid var(--line)}
.guide{display:block;text-decoration:none;color:inherit;padding:22px 2px;border-bottom:1px solid var(--line)}
.guide:hover{background:#f6f3ec}
.guide h3{margin:0 0 6px;font-size:1.22rem;font-weight:400}
.guide p{margin:0;color:var(--mut);font:400 .9rem/1.6 var(--sk)}
.prose{max-width:66ch}
.prose h2{margin-top:36px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px;margin:0 0 16px}
.prose li{color:var(--ink2)}
.prose code{font:.9em/1.5 var(--sk);background:#f1eee6;padding:2px 5px;border-radius:2px}