@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}

/* ================= khung bài viết F2 (proto) ================= */
:root{--ch:#2A46E8;--cht:#EEF2FF}
.art-in{max-width:none}
.crumb{font-size:.88rem;font-weight:650;color:#5B6B8C;margin:0 0 18px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{text-decoration:none;color:#2A46E8}
.crumb .sep{color:#9AA7C4}
.art-hero .lede{max-width:none;color:#33415E;margin-bottom:20px}
.art-hero .chips{margin-bottom:6px}
.herofig{margin:26px auto 0;border-radius:20px;overflow:hidden;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 34px 70px -34px rgba(16,23,52,.38)}
.herofig img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.art-h2{margin:0 0 14px}
.art-sub{color:#63718B;font-size:.95rem;margin:-6px 0 18px}
.art-sec{margin:0 0 40px}
.art-sec:last-child{margin-bottom:0}
.art-hr{border:0;border-top:1.5px solid #E8EDF8;margin:34px 0}
.toolbox{background:#fff;border:1.5px solid #DDE3F0;border-radius:20px;padding:26px;box-shadow:0 26px 50px -36px rgba(10,16,32,.42);margin:0 0 36px}
.toolbox h2{font-size:1.3rem;margin:0 0 6px}
.toolbox form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.toolbox input{flex:1;min-width:210px;font:inherit;font-size:1rem;padding:14px;border-radius:13px;border:1.5px solid #D7DEF7}
.toolbox .note{color:#63718B;margin:0 0 6px;font-size:.98rem}
.tablecard{overflow-x:auto;border-radius:16px;border:1.5px solid #DDE3F0;box-shadow:0 22px 44px -34px rgba(10,16,32,.35);margin:0 0 10px;background:#fff}
table.rt{width:100%;border-collapse:collapse;font-size:.94rem;min-width:680px}
.rt th{background:#F1F4FB;text-align:left;padding:13px 16px;font-size:.77rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#4A5A75}
.rt td{padding:13px 16px;border-top:1px solid #E8EDF8;vertical-align:top;color:#33415E}
.rt td:first-child{font-weight:750;color:#0A1020}
.table-note{font-size:.86rem;color:#6A7891;margin:10px 0 0}
.picks{display:grid;gap:20px}
.pick{background:#fff;border:1.5px solid #DDE3F0;border-radius:20px;padding:26px;box-shadow:0 26px 50px -36px rgba(10,16,32,.42)}
.pick .hd{display:flex;gap:14px;align-items:center;margin:0 0 6px}
.pick .hd > div{flex:1 1 auto;min-width:0}
.pick .hd h3{margin:0;font-size:1.35rem}
.pick .best{color:#5B6B8C;font-size:.88rem;font-weight:600;margin:0 0 6px}
.pick .img{border-radius:14px;overflow:hidden;margin:14px 0;border:1px solid #E8EDF8}
.pick .img img{width:100%;aspect-ratio:1200/675;object-fit:cover}
.pick .rowbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.faq{display:grid;gap:11px}
details.q{background:#fff;border:1.5px solid #DDE3F0;border-radius:15px;overflow:hidden}
details.q summary{list-style:none;cursor:pointer;padding:17px 19px;font-weight:750;color:#0A1020;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:1rem}
details.q summary::-webkit-details-marker{display:none}
details.q summary svg{flex:0 0 auto;color:var(--ch)}
details.q .a{padding:0 19px 18px;color:#3A4864}
.verdict{background:var(--cht);border:1.5px solid rgba(124,58,237,.30);border-radius:20px;padding:26px}
.verdict h2{margin:0 0 10px}
.verdict p{margin:0}
.branch{background:#fff;border:1px solid #DDE3F0;border-radius:18px;padding:22px;box-shadow:0 22px 46px -36px rgba(10,16,32,.4)}
.branch b{display:block;color:#0A1020;font-family:'ManropeVar',sans-serif;margin:0 0 6px}
.branch .th{color:#2A46E8}
.branch p{margin:0;font-size:.95rem}
@media(max-width:900px){
  .herofig{margin-top:20px}
  .pick,.toolbox,.tablecard,.branch{border-radius:0;box-shadow:none;border-left:0;border-right:0}
}


:root{--paper:#FCFCFD;--sheet:#fff;--ink:#0A1020;--ink2:#333F58;--mut:#63718B;--line:#E4E8F2;
  --acc:#2A46E8;--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}
.shell{max-width:1080px;margin:0 auto;padding:0 22px}
.kicker{margin:0 0 14px;font:700 .76rem/1 var(--sk);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
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}}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 26px}
.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)}
table{width:100%;border-collapse:collapse;font:400 .93rem/1.5 var(--sk);min-width:460px}
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}
td a{color:var(--acc);font:400 .82rem/1.4 var(--sk)}
.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}
tr.hl td{background:#F6F1FF}
tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.pricing-note{margin:0 0 12px;font:400 .88rem/1.6 var(--sk);color:var(--mut)}
.costline{margin:0 0 12px !important;padding:10px 14px;background:#F1F4FB;
  font:400 .9rem/1.6 var(--sk) !important;color:#33415E !important}
.infocap{margin:0 0 12px;font:400 .84rem/1.6 var(--sk);color:var(--mut)}
.ladder{border:1px solid var(--line);background:#fff;padding:16px 18px;margin:0 0 14px;border-radius: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:#F8FAFF;border-radius:10px}
.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)}
.scale{display:grid;gap:12px;margin:0 0 14px}
.scalehead{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}
/* LƯỢT B: bỏ các rule .scalerow .sname/.strack/.mark/.sval (specificity cao hơn) để
   theme 003 thắng trên khối Year-1 scale — giao diện scale theo bộ mới, dữ liệu/markup giữ nguyên. */
.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:#F1F4FB;height:26px;position:relative;border-left:2px solid var(--acc)}
.bar .bfill{background:linear-gradient(90deg,#4361FF,#7C3AED);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)}}
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;border-radius:14px}
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}
.checks{margin:0;padding-left:22px;display:grid;gap:8px}
.note{margin:40px 0 0;border-left:3px solid var(--acc);padding:2px 0 2px 16px;
  font:400 .93rem/1.65 var(--sk);color:var(--ink2)}
.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)}
.altcta{margin:30px 0;padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--acc);border-radius:14px;font-family:var(--sk)}
.altcta h3{margin:0 0 6px;font-size:1.02rem}
.altcta p{margin:0 0 12px;color:var(--ink2);font-size:.95rem;line-height:1.55}
.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:#F1F4FB;padding:2px 5px;border-radius:4px}
.guides{display:grid;gap:0;margin-top:8px}
.guide{display:block;text-decoration:none;color:inherit;padding:22px 2px;border-bottom:1px solid var(--line)}
.guide:hover{background:#EEF2FF}
.guide h3{margin:0 0 6px;font-size:1.22rem}
.guide p{margin:0;color:var(--mut);font:400 .9rem/1.6 var(--sk)}
.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)}
@media(max-width:640px){
  .tablecard{overflow-x:visible;border:0;box-shadow:none}
  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;border-radius:12px}
  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}
  .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}
  .scalehead{display:none}
  .scalerow{grid-template-columns:1fr}
  .scalerow .sval{order:3}
}


/* ============================================================
   THEME BOLD CONTRAST (003 — đã duyệt) — stylesheet hoàn chỉnh
   cho zapstackguides.com. Font tự host qua FONT_FACES (xem docstring).
   ============================================================ */

/* --- GỐC: biến màu toàn cục (generator có thể override inline) --- */
:root{
  --toit:#0B1120;        /* dải tối đặc trưng 003 */
  --toit2:#141C30;       /* card trong dải tối */
  --vang:#FFC24B;        /* accent vàng */
  --tvi:#4338CA;         /* nhấn tím */
  --sang:#F6F7FB;        /* nền sáng */
  --muc:#0B1120;         /* mực tiêu đề */
  --muc2:#232B3E;        /* mực thân bài */
  --link:#312A8F;        /* màu link trên nền sáng (10.4:1) */
  /* aliases giữ tương thích inline style đang tồn tại trong site/dist: */
  --ink:#0B1120;--ink2:#232B3E;--mut:#5B6780;--line:#DDE3EF;--acc:#4338CA;
  --paper:#F6F7FB;--sheet:#fff
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'InterVar',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-size:17.5px;line-height:1.62;color:#232B3E;background:#F6F7FB;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.num{font-family:'ManropeVar','InterVar',ui-sans-serif,system-ui,sans-serif;color:#0B1120;
 font-weight:900;letter-spacing:-.03em;line-height:1.04;margin:0}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem);margin:0 0 18px;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.1vw,2.6rem);margin:0 0 14px;text-wrap:balance}
h3{font-size:1.18rem;font-weight:800;letter-spacing:-.018em;margin:0 0 8px}
h4{font-size:1.05rem;font-weight:800;margin:0 0 8px}
p{margin:0 0 14px}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:#312A8F}
table{border-collapse:collapse}
ul,ol{margin:0;padding:0}
section{scroll-margin-top:96px}
::selection{background:#FFC24B;color:#0B1120}

/* --- Nhịp sáng–tối đặc trưng 003 --- */
.band-sang{background:#FFFFFF;color:#232B3E}
.band-grey{background:#EEF1F8;color:#232B3E}
.band-toi{background:#0B1120;color:#E8ECF7}

/* --- Khung trang --- */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4.5vw,72px)}
.padded{position:relative}
.block{padding:clamp(42px,6vw,86px) 0}
main{display:block}
/* nhãn skip cho screen reader — giữ nguyên cơ chế left:-9999px */
.skip{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;text-decoration:none}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;background:#fff;color:#0B1120;
 padding:12px 16px;border-radius:12px;z-index:99;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
/* .hide = móc JS: stickybar ẩn tới khi cuộn qua hero.
   Trên phần tử thường: ẩn hẳn. Trên #stickybar: giữ display, giấu bằng transform (đúng cơ chế JS site). */
.hide{display:none}
#stickybar.hide{display:flex;transform:translateY(160%)}

/* --- Typography phụ --- */
.lede{font-size:1.14rem;max-width:62ch;margin:0 0 14px;color:#232B3E}
.sub{font-size:.9rem;color:#5B6780;margin:0;line-height:1.5}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:800;letter-spacing:.16em;
 text-transform:uppercase;color:var(--h,#3E36B4);margin:0 0 16px}
.num{font-weight:900}

/* --- Nút bấm. .btn.cta = nút chính. Tap target >=44px --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;min-width:44px;
 padding:0 24px;border-radius:16px;font:inherit;font-weight:800;font-size:.98rem;text-decoration:none;
 border:2.5px solid transparent;cursor:pointer;background:#fff;color:#0B1120}
.btn.ghost{border-color:currentColor;background:transparent}
.btn.acc,.btn.cta{background:var(--cta,#4338CA);color:var(--ctatext,#fff);border-color:var(--ctaedge,#312A8F);
 box-shadow:0 14px 0 -4px var(--ctashadow,rgba(11,17,32,.28))}
.btn.acc:hover,.btn.cta:hover{filter:brightness(1.06)}
.btn:focus-visible{outline:4px solid #0B1120;outline-offset:3px}
a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #0B1120;outline-offset:2px;border-radius:6px}
.btn:active{transform:translateY(2px)}

/* --- Tag / chip. Mặc định là chip NỀN SÁNG tự chứa — đọc được ở mọi vùng --- */
.tag{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 14px;font-size:.79rem;
 font-weight:800;min-height:36px;text-decoration:none;background:#fff;color:#0B1120;border:2px solid #DDE3EF}
.dot{width:9px;height:9px;border-radius:50%;background:var(--cb,currentColor);display:inline-block;flex:0 0 auto}
.tag.cat{background:#fff;border:2.5px solid var(--cb,#4338CA);color:color-mix(in srgb,var(--ch,#3E36B4),#0B1120 20%)}
.tag.cat:hover{border-color:#0B1120}
.tag.ok{background:#DFF7EC;color:#076B47;border:2px solid #A6E3C3}
.tag.pill{background:var(--cht,#E7E4FF);color:color-mix(in srgb,var(--ch,#3E36B4),#0B1120 35%)}
.tag.price{background:#FFF1DA;color:#7A4A00;border:2px solid #E4C88A;font-weight:900}
.tag.date{background:#EDF0F7;color:#4A5A75;font-weight:700;border:1.5px solid #D8DFEC}
/* chip trần ngoài calculator (bảng cuộn ngang) */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 14px;
 font-size:.79rem;font-weight:800;min-height:36px;background:#EDEAFF;color:#312A8F;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;align-items:center}

/* --- HEADER: dải tối dính --- */
header.top{position:sticky;top:0;z-index:50;background:#0B1120;border-bottom:2px solid #232E48}
.top-in{display:flex;align-items:center;gap:14px;padding:14px clamp(20px,4.5vw,72px);max-width:1280px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;font-family:'ManropeVar',sans-serif;
 text-decoration:none;font-size:1.12rem;letter-spacing:-.02em;background:#0B1120;color:#fff;min-height:44px}
.mark{width:34px;height:34px;border-radius:11px;background:#FFC24B;color:#0B1120;display:grid;place-items:center;
 font-size:.95rem;font-weight:900;border:2px solid #C98A00;flex:0 0 auto}
nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.navlink{color:#E8ECF7;text-decoration:none;font-size:.9rem;font-weight:700;padding:11px 12px;border-radius:12px;
 min-height:44px;display:inline-flex;align-items:center}
.navlink:hover{background:#1B2540;color:#fff}
/* dropdown ngành (details.summary) — nút vàng trên dải tối, list trắng nổi */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:800;
 background:#FFC24B;color:#0B1120;padding:11px 16px;border-radius:12px;min-height:46px}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:calc(100% + 10px);min-width:310px;background:#fff;color:#232B3E;border:2px solid #0B1120;
 border-radius:22px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);padding:10px;margin:0;list-style:none;z-index:60}
.menu li{list-style:none}
.menu li a{color:#232B3E;display:flex;flex-direction:column;padding:12px 14px;border-radius:14px;font-size:.93rem;
 min-height:44px;text-decoration:none}
.menu li a:hover{background:#EDEAFF;color:#312A8F}
.ri{font-size:.78rem;color:#5B6780;font-weight:600;margin-top:2px}

/* --- HERO TRANG CHỦ: dải tối, viền vàng --- */
.hero{background:#0B1120;color:#E8ECF7;border-bottom:10px solid #FFC24B;padding:clamp(46px,6.5vw,90px) 0 clamp(38px,5vw,72px)}
.hero .cols{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:start}
.hero .btn.cta{--cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}
.hero .btn.ghost{color:#fff}
/* ô tìm kiếm — hộp trắng viền vàng nổi trên dải tối */
.search{display:flex;gap:10px;background:#fff;border:3px solid #FFC24B;border-radius:20px;padding:8px;max-width:600px;margin:26px 0 6px}
.search input{flex:1;border:0;font:inherit;font-size:1.05rem;padding:12px;outline:none;min-width:0;background:transparent;color:#0B1120;border-radius:12px}
.search input::placeholder{color:#5B6780}
.search .btn{min-width:132px}
/* dải số liệu khổng lồ */
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(22px,3.5vw,50px);margin:36px 0 0;padding:0;list-style:none;justify-content:start}
.stats li{font-size:.84rem;color:#98A5BC;font-weight:700;letter-spacing:.04em;text-transform:uppercase;list-style:none}
.stats .num{display:block;font-size:clamp(2.7rem,4.8vw,4.1rem);font-weight:900;letter-spacing:-.045em;line-height:1;margin-bottom:8px;color:#fff}
.stats li:nth-child(1) .num{color:#FFC24B}
.stats li:nth-child(2) .num{color:#C4B5FD}
.stats li:nth-child(3) .num{color:#7DD3FC}
.stats li:nth-child(4) .num{color:#FDBA74}

/* --- LƯỚI NGÀNH (home bl_cat) --- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* .bl_hero: trên TRANG CHỦ/category là .block CHA nằm trong .hero tối → nền suốt để dải tối lộ ra;
   trên bài viết (class="hero art-hero block bl_hero" trên CÙNG section) compound rule dưới bỏ padding kép. */
.bl_hero{background:transparent;border:0;color:inherit}
.hero.block{padding-bottom:clamp(34px,4.6vw,62px)}
/* 01/10 (anh chốt): BỎ KHUNG ngoài + khối sáng tràn hết bề ngang khung.
   Bù lại phần lề ngang của .wrap bằng margin âm ⇒ panel rộng bằng cả khung (1280px / kín mép trên mobile),
   nhưng KHÔNG bỏ padding của .wrap (nếu bỏ thì chữ hero + chân trang dính sát mép, đã đo).
   Lề trong PHẢI bằng đúng công thức của .wrap (clamp(20px,4.5vw,72px)) — nếu dùng số khác thì chữ
   trong khối lệch so với header/hero/footer (đã đo: 768px lệch 8px, 1024 lệch 10px, 1440 lệch 17px). */
.bl_cat,.bl_how,.bl_latest{border-radius:0;padding-left:clamp(20px,4.5vw,72px);padding-right:clamp(20px,4.5vw,72px);border:0;
 margin-left:calc(-1 * clamp(20px,4.5vw,72px));margin-right:calc(-1 * clamp(20px,4.5vw,72px))}
.bl_cat{background:#FFFFFF}
.bl_how{background:#EEF1F8}
.bl_latest{background:#FFFFFF}
.catcard{position:relative;background:#fff;border:2.5px solid #0B1120;border-radius:28px;overflow:hidden;color:#232B3E;
 box-shadow:8px 8px 0 0 var(--cb,#4338CA);transition:transform .18s ease,box-shadow .18s ease}
.catcard:hover{transform:translate(-2px,-2px);box-shadow:12px 12px 0 0 var(--cb,#4338CA)}
.cap{display:block;height:12px;background:var(--cb,#4338CA)}
.bd{padding:26px}
.hd{display:flex;gap:15px;align-items:flex-start}
.catcard .hd h3 a{display:inline-flex;align-items:center;min-height:44px}
.catcard .gl{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.gl{list-style:none;display:grid;gap:6px;margin:16px 0 0;padding:0}
.catcard .gl a{text-decoration:none;font-size:.93rem;display:flex;gap:10px;font-weight:600;min-height:44px;align-items:flex-start;padding:4px 0;color:inherit}
.catcard .gl a:hover{color:#312A8F;text-decoration:underline}
.catcard .gl svg{color:var(--cb,#4338CA);flex:0 0 auto;margin-top:7px}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.rail li{list-style:none;border-radius:22px;padding:18px;font-size:.9rem;border:2.5px dashed var(--cb,#4338CA);background:#fff;color:#232B3E}
.rail li b{display:block;color:#0B1120;font-weight:900;margin-bottom:4px;font-family:'ManropeVar',sans-serif}
.dim li{opacity:.8;border-style:dotted}
/* các block theo band sáng */
.bl_cat{background:#F6F7FB}
.bl_how{background:#EEF1F8}
.bl_latest{background:#FFFFFF}

/* --- card nội dung (home + category) --- */
.card{background:#fff;border:2.5px solid #DDE3EF;border-radius:28px;padding:26px;color:#232B3E}
.card h3{margin:0 0 8px}
.card a{text-decoration:underline;text-underline-offset:3px}
.ticks{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ticks li{display:flex;gap:13px;align-items:flex-start;list-style:none}
.ticks svg{flex:0 0 auto;margin-top:6px;color:#8A5300}
.ticks b{color:#0B1120}
.pickrow{display:flex;align-items:center;gap:13px;border-radius:18px;padding:14px;background:#fff;border:2px solid #DDE3EF;list-style:none}
.mono{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-family:'ManropeVar',sans-serif;
 color:var(--monoink,#0B1120);background:var(--cb,#FFC24B);font-size:1.02rem;flex:0 0 auto;border:2px solid rgba(11,17,32,.35)}

/* --- guide cards (lưới bài viết) --- */
.gcard{background:#fff;border:2px solid #DDE3EF;border-radius:26px;padding:24px;display:flex;flex-direction:column;gap:12px;color:#232B3E;
 transition:transform .18s ease,border-color .18s ease}
.gcard:hover{transform:translateY(-3px);border-color:#0B1120}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.79rem;color:#5B6780}
.gcard h3 a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:4px 0;color:inherit}
.gcard h3 a:hover{color:#312A8F;text-decoration:underline}

/* --- SIGNUP (dải tối cuối trang chủ; markup thật: section#signup > .bl_signup) --- */
.signup,.bl_signup,#signup{background:#0B1120;border-top:10px solid #4338CA;color:#E8ECF7}
.signup .block,.bl_signup,#signup .block{padding-top:clamp(46px,6.5vw,86px);padding-bottom:clamp(46px,6.5vw,86px)}
.fcard{background:#141C30;border:2px solid #2A3650;border-radius:26px;padding:24px;margin-top:24px;color:#E8ECF7}
.fcard form>div{display:flex;gap:10px;flex-wrap:wrap}
.fcard input{flex:1 1 220px;min-width:0;font:inherit;font-size:1.05rem;padding:14px 16px;border-radius:16px;border:2.5px solid #3A4A6E;
 background:#0F1626;color:#fff}
.fcard input::placeholder{color:#94A3B8}
.fcard .btn.cta{--cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}

/* --- FOOTER: dải tối đậm nhất --- */
footer{background:#070C18;color:#A6B2C8;padding:46px 0 112px;border-top:2px solid #232E48}
footer h4{color:#9AA8C0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;font-family:'InterVar',sans-serif;font-weight:800}
footer a{color:#E6ECFB;text-decoration:none;font-size:.93rem;display:inline-block;min-height:44px;padding:10px 0}
footer a:hover{color:#FFC24B}
footer ul{list-style:none;display:grid;gap:0}
footer li{list-style:none}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.fbot{border-top:1px solid #1D2740;margin-top:26px;padding-top:18px;font-size:.84rem;color:#A6B2C8}

/* ============================================================
   TRANG BÀI VIẾT / SO SÁNH (markup thật 21/09+)
   ============================================================ */
.art-hero{background:#0B1120;color:#E8ECF7;border-bottom:10px solid #4338CA;padding-top:clamp(34px,4.5vw,58px)}
.art-hero .wrap{padding-bottom:clamp(30px,4vw,54px)}
.art-hero h1{font-size:clamp(2.1rem,4.3vw,3.5rem)}
.art-hero .chips{margin-top:22px}
.crumb{font-size:.86rem;color:#98A5BC;margin:0 0 16px}
.crumb a{color:#E8ECF7;text-decoration:none;font-weight:700;padding:12px 2px;min-height:44px;display:inline-block}
.crumb a:hover{color:#FFC24B}
.sep{margin:0 8px;color:#7C8AA5}
.herofig{margin:30px 0 0;border-radius:28px;overflow:hidden;border:3px solid #2A3650;background:#141C30}
.herofig img{width:100%}
.art-in{max-width:1000px;margin:0 auto}
.art-sec{margin:0 0 46px}
.art-h2{font-size:clamp(1.5rem,2.7vw,2.2rem);color:#0B1120;margin:0 0 14px;letter-spacing:-.03em;font-weight:900;font-family:'ManropeVar',sans-serif}
.art-p{max-width:72ch}
.toolbox{position:relative;background:#141C30;border:2.5px solid #FFC24B;border-radius:26px;padding:24px;margin:0 0 30px;color:#E8ECF7}
.toolbox h2{font-size:1.3rem;margin:12px 0 10px;color:#fff}
.toolbox .btn.cta{--cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0}
.jump a{text-decoration:none;font-weight:800;font-size:.86rem;background:#fff;color:#0B1120;border:2px solid #0B1120;
 border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center}
.jump a:hover{background:#FFC24B;color:#0B1120}
/* "At a glance": thẻ trắng bóng lệch tím */
.glance ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.glance li{list-style:none;background:#fff;border:2px solid #0B1120;border-radius:22px;padding:18px 20px;box-shadow:6px 6px 0 0 #4338CA;color:#232B3E}
.gname{font-family:'ManropeVar',sans-serif;font-weight:900;font-size:1.06rem;color:#0B1120}
.gfor{color:#3D4A66}
.infocap,.pricing-note{font-size:.92rem;color:#3D4A66;background:#EEF1F8;border-left:8px solid #4338CA;border-radius:0 18px 18px 0;
 padding:16px 20px;max-width:none;margin:0 0 18px}
.prose{max-width:820px}
.prose h2{margin-top:36px}
.prose h3{margin-top:24px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px;margin:0 0 16px}
.prose li{color:#3D4A66}
.prose p{max-width:72ch}

/* --- BẢNG: .tablecard / .matrix / .rt --- */
.tablecard{border:2.5px solid #0B1120;border-radius:26px;overflow:hidden;background:#fff;padding:2px;color:#232B3E}
.rt{width:100%;min-width:680px;font-size:.94rem}
.rt thead th{background:#0B1120;color:#fff;text-align:left;padding:16px 18px;font-family:'ManropeVar',sans-serif;font-weight:900;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.rt td,.rt tbody th{padding:15px 18px;border-top:1.5px solid #E3E8F2;vertical-align:top;text-align:left;color:#232B3E}
.rt tbody tr:nth-child(even){background:#F4F6FB}
.rt tr.hl{background:#FFF6DF}
.rt .tname{font-family:'ManropeVar',sans-serif;font-weight:900;color:#0B1120;font-size:1rem}
.crit{font-family:'ManropeVar',sans-serif;font-weight:800;color:#0B1120}
.rt a{color:var(--link,#312A8F);font-weight:700;text-underline-offset:3px}
.rt td a{min-height:44px;display:inline-flex;align-items:center}
.matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix table{min-width:640px}
.matrix th:first-child,.matrix td:first-child{width:26%}
/* .tscroll — bảng cuộn ngang kiểu hub (giữ cơ chế cũ) */
.tscroll{overflow-x:auto;border-top:2px solid #0B1120;border-bottom:1px solid #E3E8F2;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:640px}
.tscroll th{background:#0B1120;color:#fff;text-align:left;padding:14px 16px;font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.tscroll td{padding:13px 16px;border-top:1px solid #E3E8F2;color:#232B3E;background:#fff}

/* --- Year-1 scale: .scale / .scalehead / .scalerow / .strack / .sval --- */
.scale{border:2.5px solid #0B1120;border-radius:26px;background:#fff;padding:24px;color:#232B3E}
.scalehead{display:grid;grid-template-columns:minmax(0,180px) 1fr 150px;gap:12px;font-size:.76rem;color:#5B6780;font-weight:700;
 padding-bottom:10px;border-bottom:2px solid #0B1120}
.s1{display:flex;justify-content:space-between;gap:12px}
.s1 span{flex:0 1 auto;text-align:right}
.s1 span:first-child{text-align:left}
.s1 span:last-child{text-align:right}
.scalerow{display:grid;grid-template-columns:minmax(0,180px) 1fr 150px;gap:12px;align-items:center;padding:16px 0 12px;border-bottom:1.5px dashed #E3E8F2}
.sname{font-weight:800;font-size:.9rem;color:#0B1120;font-family:'ManropeVar',sans-serif}
.strack{position:relative;height:26px;background:#EEF1F8;border-radius:99px;border:1.5px solid #DDE3EF;overflow:hidden;display:block;min-width:80px}
/* markup thật: mốc là <i class="mark" style="left:N%"> — ghi đè .mark hãng trong ngữ cảnh track */
.strack .mark{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;min-width:3px;height:auto;border:0;border-radius:3px;
 background:#4338CA;background:var(--cb,#4338CA);display:block;place-items:initial;font-size:0}
.strack i.fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--cb,#4338CA)}
.sval{font-family:'ManropeVar',sans-serif;font-weight:900;font-size:1.06rem;color:#0B1120;text-align:right}

/* --- Picks (bài so sánh) --- */
.picks{display:grid;gap:26px}
.pick{background:#fff;border:2.5px solid #0B1120;border-radius:30px;padding:28px;color:#232B3E;
 box-shadow:10px 10px 0 0 var(--cb,#4338CA);transition:transform .18s ease,box-shadow .18s ease}
.pick:hover{transform:translateY(-2px);box-shadow:12px 14px 0 0 var(--cb,#4338CA)}
.pick .hd{margin-bottom:16px}
.pick .hd .mono{border:2.5px solid #0B1120}
.best{font-weight:800;color:#0B1120;margin:4px 0 0;font-size:1.02rem}
.img{margin:18px 0;border-radius:22px;overflow:hidden;border:2px solid #DDE3EF;background:#0B1120}
.img img{width:100%}
.costline{background:#F4F6FB;border-left:8px solid var(--cb,#4338CA);padding:14px 16px;border-radius:0 18px 18px 0;
 font-size:.93rem;color:#3D4A66;margin:0 0 4px}
.rowbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.pick .btn.cta{--cta:color-mix(in srgb,var(--cb,#4338CA),#0B1120 25%);--ctaedge:#312A8F;--ctatext:var(--fillink,#fff)}
.afdisc{font-size:.82rem;color:#5B6780;margin:10px 0 0}

/* --- Nhánh quyết định --- */
.decision{display:grid;gap:18px}
.branch{background:#fff;border:2.5px solid #0B1120;border-radius:26px;padding:22px 24px;color:#232B3E;box-shadow:6px 6px 0 0 var(--cb,#4338CA)}
.bif{font-weight:700;color:#3D4A66;margin:0 0 10px}
.bthen{margin:0 0 8px;font-family:'ManropeVar',sans-serif;font-weight:900;font-size:1.35rem;color:#0B1120}
.bwhy{margin:0;font-size:.92rem;color:#5B6780}

/* --- ol.cards đếm số đầu dòng --- */
.cards{counter-reset:cc;display:grid;gap:16px;margin:0;padding:0;list-style:none}
.cards li{counter-increment:cc;list-style:none;background:#fff;border:2px solid #DDE3EF;border-radius:24px;padding:20px 22px 20px 78px;position:relative;color:#3D4A66}
.cards li::before{content:counter(cc,decimal-leading-zero);position:absolute;left:20px;top:18px;font-family:'ManropeVar',sans-serif;font-weight:900;font-size:1.6rem;color:#4338CA}
.cards li b{color:#0B1120}

/* --- FAQ (details) --- */
.faq{display:grid;gap:14px}
.q{background:#fff;border:2.5px solid #0B1120;border-radius:24px;overflow:hidden;color:#232B3E}
.q>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:18px 22px;font-family:'ManropeVar',sans-serif;font-weight:800;font-size:1.02rem;color:#0B1120;min-height:56px}
.q>summary::-webkit-details-marker{display:none}
.q>summary svg{flex:0 0 auto;color:#4338CA;transition:transform .18s ease}
.q[open]>summary svg{transform:rotate(90deg)}
.q .a{padding:0 22px 20px;color:#3D4A66}
.q .a p{margin:0 0 10px}
.q .a p:last-child{margin-bottom:0}

/* --- Verdict (khối tối trong bài) --- */
.verdict{background:#0B1120;border:3px solid #FFC24B;border-radius:30px;padding:30px;color:#E8ECF7;box-shadow:10px 10px 0 0 #4338CA}
.verdict h2{color:#fff}
.verdict p{color:#D6DDF0;max-width:78ch}
.verdict b{color:#FFC24B}
.verdict .btn.cta{--cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}

/* --- khối phụ trong bài --- */
.notebox{background:#EEF1F8;border:2px solid #C9D2E4;border-radius:22px;padding:20px 22px;margin-top:32px;color:#232B3E}
.notebox h3{margin-bottom:6px}
/* .note: span chữ phụ (toolbox/stickybar) HOẶC div hộp "How we research" (markup thật) */
.note{font-size:.92rem;color:#3D4A66}
div.note{background:#EEF1F8;border:2px solid #C9D2E4;border-radius:22px;padding:18px 20px;margin-top:26px}
div.note h3{color:#0B1120;margin:0 0 6px}
.disclosure{font-size:.9rem;color:#5B6780;border-top:2px solid #DDE3EF;padding-top:18px;margin-top:26px}
.disclosure a{color:var(--link,#312A8F);font-weight:700}
.altcta{margin:30px 0;padding:22px 24px;background:#FFF6DF;border:2.5px solid #C98A00;border-left:10px solid #FFC24B;
 border-radius:24px;color:#232B3E}
.altcta h3{color:#0B1120;margin:0 0 6px;font-size:1.12rem}
.altcta p{margin:0 0 12px;color:#3D4A66}
.altcta .btn.cta{--cta:#4338CA;--ctatext:#fff;--ctaedge:#312A8F}

/* --- 404 / danh sách guide kiểu hub --- */
.guides{display:grid;gap:0;margin-top:8px;background:#fff}
.guide{display:block;text-decoration:none;background:#fff;color:#0B1120;padding:22px 18px;border:2px solid #DDE3EF;
 border-radius:18px;margin-bottom:12px}
.guide h3{margin:0 0 4px}
.guide p{margin:0;color:#5B6780;font-size:.93rem}
.guide:hover{border-color:#0B1120;background:#FFF6DF}

/* --- CALCULATOR (funnel-cost-calculator) --- */
.calc{max-width:820px;margin:0 auto;background:#fff;border:2.5px solid #0B1120;border-radius:28px;padding:26px;
 box-shadow:10px 10px 0 0 #4338CA}
.calcbar{height:10px;background:#EEF1F8;border-radius:99px;overflow:hidden;margin:0 0 22px}
.calcbar>i{display:block;height:100%;width:10%;background:#FFC24B;border-right:1px solid #C98A00;transition:width .2s ease}
.kicker{margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5B6780;background:#fff}
.calc label{display:block;font-weight:800;margin:22px 0 6px;font-size:.92rem;color:#0B1120}
.row{display:flex;gap:14px;align-items:center;margin:0 0 8px}
.row input[type=range]{flex:1 1 auto;min-width:0;height:44px;accent-color:#4338CA}
.row .pill{flex:0 0 auto;min-width:96px;background:#EDEAFF;color:#312A8F}
.kpi{background:#fff;border:2px solid #DDE3EF;border-radius:22px;padding:18px 20px;margin:16px 0;color:#0B1120}
.kpi>span{display:block;font-size:.84rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5B6780;margin-bottom:8px}
.big{font-family:'ManropeVar',sans-serif;font-weight:900;font-size:clamp(2rem,4.5vw,2.7rem);letter-spacing:-.03em;line-height:1;background:#EEF1F8;color:#0B1120;border-radius:14px;padding:10px 14px;display:inline-block}
.big.acc{color:#4338CA;background:#EDEAFF}
.stepnote{font-size:.84rem;color:#5B6780;margin:10px 0 0}
.mailbox{margin:26px 0 8px;background:#EEF1F8;border:2px dashed #C9D2E4;border-radius:22px;padding:14px;max-width:520px}
.mailbox iframe{max-width:100%;width:100%!important;border:0}
.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;background:#fff;border:2px solid #DDE3EF;border-radius:22px;padding:4px 16px;margin:14px 0}
.tw table{min-width:420px;width:100%}
.tw th{background:#0B1120;color:#fff;text-align:left;padding:13px 12px;font-family:'ManropeVar',sans-serif;font-weight:900;font-size:.82rem}
.tw td{padding:12px;border-top:1.5px solid #E3E8F2;vertical-align:top;color:#232B3E}
.tw tbody tr:nth-child(even){background:#F4F6FB}
.tw a{color:var(--link,#312A8F);font-weight:700}

/* --- Thanh CTA dính: hiện sau khi cuộn qua hero, JS toggle .hide --- */
#stickybar{position:fixed;left:0;bottom:0;z-index:60;width:100%;display:flex;align-items:center;gap:14px;
 justify-content:space-between;padding:12px clamp(20px,4.5vw,72px);background:#0B1120;color:#C4CDDE;
 border-top:3px solid #FFC24B;transition:transform .22s ease}
#stickybar .st{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;color:#AAB6CC}
#stickybar .st b{color:#fff}
#stickybar .st .short{display:none}
#stickybar .note{color:#C4CDDE}
#stickybar .btn{min-height:46px;flex:0 0 auto;white-space:nowrap}
#stickybar .btn.cta{--cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}

a.guide{color:#0B1120;background:#fff}
.guides{background:transparent}

/* ================= VÙNG TỐI — NGOẠI LỆ MÀU CHỮ (LUẬT SỐNG CÒN) =================
   Mọi selector nền tối ở trên đặt nền #0B1120/#141C30/#070C18 cho khối CHA;
   các quy tắc màu mực toàn cục (h1–h4,.num / .lede / .sub / a / .eyebrow / .tag…)
   BẮT BUỘC phải có ngoại lệ dưới đây. Nếu thêm dải tối mới → thêm vào danh sách này.
   Lỗi 01/10/2026 (tiêu đề vô hình trong hero) là lỗi CHẶN — không tái phạm. */
.hero h1,.hero h2,.hero h3,.hero h4,.hero .num,
.art-hero h1,.art-hero h2,.art-hero h3,.art-hero h4,.art-hero .num,
.signup h1,.signup h2,.signup h3,.signup h4,.signup .num,
.bl_signup h1,.bl_signup h2,.bl_signup h3,.bl_signup h4,.bl_signup .num,
#signup h1,#signup h2,#signup h3,#signup h4,#signup .num,
.band-toi h1,.band-toi h2,.band-toi h3,.band-toi h4,.band-toi .num,
.darkcard h1,.darkcard h2,.darkcard h3,.darkcard h4,.darkcard .num,
.toolbox h1,.toolbox h2,.toolbox h3,.toolbox h4,
.verdict h1,.verdict h2,.verdict h3,.verdict h4,.verdict .num{color:#FFFFFF}
footer h1,footer h2,footer h3{color:#FFFFFF}
footer h4{color:#9AA8C0}
/* eyebrow trên nền tối: tím không đạt 4.5:1 → accent vàng của bộ nhận diện */
.hero .eyebrow,.art-hero .eyebrow,.signup .eyebrow,.bl_signup .eyebrow,#signup .eyebrow,
.band-toi .eyebrow,.darkcard .eyebrow,.toolbox .eyebrow,.verdict .eyebrow{color:#FFC24B}
/* đoạn dẫn + thân bài trong vùng tối */
.hero .lede,.art-hero .lede,.signup .lede,.bl_signup .lede,#signup .lede,.band-toi .lede,.toolbox .lede,
.hero p,.art-hero p,.signup p,.bl_signup p,#signup p,.band-toi p,.darkcard p,.toolbox p,.verdict p{color:#D7DEEC}
.hero .sub,.art-hero .sub,.signup .sub,.bl_signup .sub,#signup .sub,.band-toi .sub,.toolbox .sub,.darkcard .sub{color:#9FB0CC}
.hero li,.art-hero li,.signup li,.bl_signup li,#signup li,.band-toi li,.darkcard li{color:#D7DEEC}
.toolbox .note{color:#CDD6E6;font-size:.9rem}
/* chip trên dải tối: nền đặc tự chứa hoặc ghi đè sáng (rgba --cht không composite được trên nền tối) */
.hero .tag.cat,.art-hero .tag.cat,.signup .tag.cat,.bl_signup .tag.cat,#signup .tag.cat,.band-toi .tag.cat{
 background:transparent;color:#E8ECF7;border-color:#3A4A6E}
.hero .tag.pill,.art-hero .tag.pill,.signup .tag.pill,.bl_signup .tag.pill,#signup .tag.pill,.band-toi .tag.pill,
.toolbox .tag.pill,.hero .pill,.art-hero .pill{background:#E7E9F2;color:#312A8F}
.hero .tag.date,.art-hero .tag.date,.signup .tag.date,.bl_signup .tag.date,#signup .tag.date,.band-toi .tag.date,.toolbox .tag.date{
 background:#161E31;color:#AAB6CC;border-color:#2A3650}
/* nút .btn mặc định (trắng, mực đen) giữ nguyên trên dải tối — tự chứa.
   .btn.ghost viền trắng: */
.hero .btn.ghost,.art-hero .btn.ghost,.signup .btn.ghost,.bl_signup .btn.ghost,#signup .btn.ghost,.band-toi .btn.ghost,.toolbox .btn.ghost{color:#fff}
.hero .btn.cta,.art-hero .btn.cta,.signup .btn.cta,.bl_signup .btn.cta,#signup .btn.cta,.band-toi .btn.cta,.toolbox .btn.cta,#stickybar .btn.cta{
 --cta:#FFC24B;--ctatext:#0B1120;--ctaedge:#C98A00;--ctashadow:rgba(0,0,0,.5)}
.hero .btn:focus-visible,.band-toi .btn:focus-visible,.signup .btn:focus-visible,.bl_signup .btn:focus-visible,
#signup .btn:focus-visible,#stickybar .btn:focus-visible,.toolbox .btn:focus-visible,.verdict .btn:focus-visible{outline-color:#FFC24B}

/* ============================================================
   LINK — mặc định đặt SỚM (selector `a` thuần, specificity thấp nhất):
   mọi rule theo class (`.brand`, `.navlink`, `.tag`, `.jump a`…) đều thắng nó,
   bất kể thứ tự. Màu #312A8F đạt 10.4:1 trên trắng.
   ============================================================ */
a{text-decoration:underline;text-underline-offset:3px}
/* thành phần không gạch (theo design 003): */
a.btn,a.tag,a.brand,a.navlink,a.guide,a.skip,.jump a,.crumb a,.menu li a,.catcard .gl a,.gcard h3 a,.catcard .hd h3 a,#stickybar a{
 text-decoration:none}
/* link TRONG vùng tối: accent vàng nhận diện (003). Dùng :where() cho vùng (specificity 0)
   + chỉ nhắm link nằm trong p/li → KHÔNG đè màu riêng của .btn/.tag/.crumb a/.jump a…
   (specificity các rule đó đều ≥ (0,1,x) > (0,0,2) của rule này). */
:where(.hero,.art-hero,.signup,.bl_signup,#signup,.band-toi,.toolbox,.verdict,.fcard,#stickybar,.darkcard,.menu ul) p a,
:where(.hero,.art-hero,.signup,.bl_signup,#signup,.band-toi,.toolbox,.verdict,.fcard,#stickybar,.darkcard,.menu ul) li a{color:#FFC24B}

/* --- Responsive --- */
@media(max-width:1000px){
 .hero .cols{grid-template-columns:1fr}
 .g2,.g3,.fgrid{grid-template-columns:1fr}
 .rail{grid-template-columns:1fr 1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 body{font-size:17px}
 .rail{grid-template-columns:1fr}
 .tag,.pill{min-height:44px;padding:10px 15px}
 .btn{width:100%}
 #stickybar .btn{width:auto;flex:0 0 auto}
 #stickybar .st{flex:1 1 auto;min-width:0}
 #stickybar .st .note,#stickybar .st .long{display:none}
 #stickybar .st .short{display:inline}
 .navlink{display:none}
 .menu ul{width:min(92vw,340px);max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch;right:0}
 .menu summary{min-height:48px}
 .search{flex-wrap:wrap}
 .numlist{grid-template-columns:1fr}
 .scalerow{grid-template-columns:1fr}
 .scalehead{display:none}
 .sval{text-align:left}
 .s1{flex-wrap:wrap}
 .tscroll,.matrix{border-top:0;border-bottom:0}
 .tscroll table,.matrix table{min-width:0}
 .tscroll th,.tscroll thead th{display:none}
 .tscroll td{border-top:0}
 /* bảng .rt trên mobile → thẻ xếp chồng, nhãn lấy từ data-l (markup thật) */
 .rt{min-width:0}
 .rt thead{display:none}
 .rt,.rt tbody,.rt tr,.rt td{display:block;width:100%}
 .rt tr{border:2px solid #0B1120;background:#fff;padding:12px 14px;margin-bottom:12px;border-radius:18px}
 .rt td{border:0;padding:4px 0;color:#232B3E}
 .rt td::before{content:attr(data-l);display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;
   text-transform:uppercase;color:#5B6780}
 .rt td.tname{font-size:1.14rem;padding-bottom:8px}
 .rt td.tname::before{content:none}
 .rt tr.hl{border-color:#C98A00}
}
@media(max-width:380px){
 h1{font-size:2.05rem}
 .stats{grid-template-columns:1fr 1fr;gap:18px}
}

/* --- Chuyển động: tôn trọng prefers-reduced-motion --- */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .catcard:hover,.gcard:hover,.pick:hover,.btn:active{transform:none}
 .q[open]>summary svg{transform:none}
}

/* --- In ấn tối thiểu --- */
@media print{
 #stickybar,.skip{display:none!important}
 body{background:#fff;color:#000}
}

/* --- phần markup hub_gen cần mà THEME_CSS chưa phủ (đặt SAU cùng: theme 003 thắng khi đụng độ) --- */
/* dot trong chip ngành: ăn hue thương hiệu --cb */
.tag.cat .dot{background:var(--cb,currentColor)}
/* nhãn 'programs: ...' trên rail ngách sắp mở (markup hub) */
.rail .progs{display:block;margin-top:9px;font-size:.8rem;font-weight:700;color:var(--ch,#3E36B4)}
/* khối tối kiểu hub — hợp đồng vùng tối (LUẬT SỐNG CÒN): màu chữ con do theme đảm nhiệm */
.card.dark,.darkcard{background:#141C30;border:2.5px solid #2A3650;border-radius:26px;padding:24px;color:#E8ECF7}
.card.dark h2,.darkcard h2,.card.dark h3,.darkcard h3{color:#fff}
.card.dark .lede,.darkcard .lede,.card.dark p,.darkcard p,.card.dark li,.darkcard li{color:#D7DEEC}
.card.dark .sub,.darkcard .sub{color:#9FB0CC}
.card.dark .btn.ghost,.darkcard .btn.ghost{color:#fff}
/* --- LƯỢT B: phản đòn art_css.ART_CSS (file chỉ-đọc). Các rule .hero.block/.art-hero.*
   (compound, specificity 0-2-0) trong ART_CSS Đè lên theme nếu đứng trước. Repeat lại
   cuối chuỗi với giá trị THEME — cùng selector, đến sau → theme thắng. Không được để
   chữ tối (#33415E/#0A1020) trên dải tối #0B1120: đó là đúng lỗi chặn 01/10. --- */
.hero.block,.art-hero.block{background:#0B1120;color:#E8ECF7;padding-bottom:clamp(34px,4.6vw,62px)}
.art-hero .lede,.bl_hero .lede{color:#D7DEEC;max-width:62ch}
.art-hero .sub,.bl_hero .sub{color:#9FB0CC}
.art-hero .crumb,.bl_hero .crumb{color:#98A5BC}
.art-hero .crumb a,.bl_hero .crumb a,.bl_hero .sub a{color:#E8ECF7}
.bl_hero h1,.bl_hero h2,.bl_hero h3,.bl_hero h4,.bl_hero .num,.art-hero.block h1{color:#FFFFFF}
.bl_hero .tag.pill{background:#E7E9F2;color:#312A8F}
.bl_hero .eyebrow{color:#FFC24B}
/* .block nền trắng của ART_CSS (specificity 0-1-0) đứng TRƯỚC theme → padding 26px
   bị ăn vào hero tối (lộ nền trắng). Ép padding của theme bằng !important. */
.hero.block,.bl_hero.block,#signup .block{padding-top:clamp(46px,6.5vw,86px)!important;
 padding-bottom:clamp(46px,6.5vw,86px)!important}
/* signup hub: markup THẬT là section#signup>.wrap>.block.bl_signup (theme giả định
   .signup bọc trong) → phủ nền tối + chữ cho mọi con trực tiếp của #signup */
#signup,#signup .wrap,#signup .block{background:#0B1120;color:#E8ECF7;border-top:10px solid #4338CA}
/* 01/10 (anh chốt): chỉ giữ MỘT dải tím ở đỉnh SECTION. Khối .bl_signup chừa lề 20px nên dải tím
   của nó lệch khỏi dải của section ⇒ tạo "vết cắt bậc" ở mép (đã soi pixel: 2 dải chồng nhau). */
#signup .wrap,#signup .block{border-top:0}
#signup .lede{color:#D7DEEC}#signup .sub{color:#9FB0CC}
#signup .fcard{background:#141C30;border:2px solid #2A3650;border-radius:26px;padding:24px;color:#E8ECF7}
#signup .fcard input{flex:1 1 220px;min-width:0;font:inherit;font-size:1.05rem;padding:14px 16px;
 border-radius:16px;border:2.5px solid #3A4A6E;background:#0F1626;color:#fff}
#signup .fcard input::placeholder{color:#94A3B8}
#signup .mailbox{margin:6px 0 4px;max-width:520px}
#signup .mailbox iframe{width:100%!important;max-width:100%;border:0}
/* verdict LUÔN là khối tối theo theme 003 — ART_CSS đặt nền var(--cht) (nền nhạt,
   màu cũ); theme_bold đặt #0B1120 nhưng cùng specificity nên ART_CSS thắng nếu đứng sau.
   Nêm lại cuối chuỗi: màu = theme. */
.verdict{background:#0B1120;border:3px solid #FFC24B;border-radius:30px;padding:30px;color:#E8ECF7;box-shadow:10px 10px 0 0 #4338CA}
.verdict h2{color:#fff}
.verdict p{color:#D6DDF0}
.verdict b{color:#FFC24B}
/* toolbox nền tối (theme) đè ART_CSS nền trắng — chữ con đã có ngoại lệ trong theme */
.toolbox{position:relative;background:#141C30;border:2.5px solid #FFC24B;border-radius:26px;padding:24px;margin:0 0 30px;color:#E8ECF7}
/* FAQ details: ART_CSS dùng `details.q` (0-1-1) — nâng specificity tương đương, đặt sau */
details.q{background:#fff;border:2.5px solid #0B1120;border-radius:24px;overflow:hidden;color:#232B3E}
details.q summary{padding:18px 22px;font-family:'ManropeVar',sans-serif;font-weight:800;font-size:1.02rem;color:#0B1120;min-height:56px}
details.q summary svg{color:#4338CA}
details.q .a{color:#3D4A66}
/* --- LƯỢT B: trung hoà rule DEAD-legacy trong _LEGACY_CSS (không dùng cho bảng —
   .bars/.tagcheap không còn ở 114 class inventory; nếu hiện, màu phải đạt chuẩn) --- */
.tagcheap{color:#0B1120;background:#FFC24B}
.bar .bfill{background:#4338CA}
/* trang ngách: hero hub thật = section.hero>.wrap>.block.bl_hero */
.hero .block.bl_hero{background:transparent}
/* --- LƯỢT B: ĐẢO ĐẢO — cù lao SÁNG nằm TRONG dải tối (home hero dựng .card trắng +
   .pickrow trắng). Rule vùng tối `.hero h3/.hero li/.hero .sub{màu sáng}` sẽ làm chữ
   trên thẻ trắng vô hình (đúng loại lỗi chặn 01/10). Ngoại lệ ngược, specificity cao hơn: --- */
.hero .card,.hero .pickrow{color:#232B3E}
.hero .card h1,.hero .card h2,.hero .card h3,.hero .card h4,
.hero .card b,.hero .pickrow b{color:#0B1120}
.hero .card .sub,.hero .pickrow .sub{color:#5B6780}