:root{
  --paper:#F7F4EF; --ink:#241E17; --sub:#5A5248; --muted:#8A8177;
  --brick:#B23A28; --brick-soft:#F3DFD9; --rule:#DED8CD;
  --serif:"Constantia","Source Serif 4","Cambria",serif;
  --sans:"Segoe UI","Be Vietnam Pro",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.68;
  font-variant-numeric:lining-nums;
  background-image:radial-gradient(circle at 16% 5%, rgba(178,58,40,.045), transparent 40%),
                   radial-gradient(circle at 88% 68%, rgba(36,30,23,.05), transparent 46%);
  background-attachment:fixed;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.frame{position:relative;border:1px solid var(--rule);margin:14px;padding:0}
.frame::after{content:"";position:absolute;top:-1px;right:-1px;width:34px;height:34px;
  background:var(--paper);border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ---------- site header ---------- */
.masthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding:20px 0 16px;border-bottom:1px solid var(--rule)}
.masthead a{color:var(--muted);text-decoration:none}
.masthead a:hover{color:var(--brick)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--brick);flex:none}
.bar{width:1px;height:12px;background:var(--rule)}
.mh-right{margin-left:auto}

/* ---------- headings ---------- */
h1{font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.018em;
  font-size:clamp(30px,5vw,50px);margin:22px 0 14px;max-width:20ch}
h2{font-family:var(--serif);font-weight:700;line-height:1.16;letter-spacing:-.012em;
  font-size:clamp(22px,3vw,31px);margin:44px 0 10px}
h3{font-family:var(--serif);font-weight:600;font-size:20.5px;margin:32px 0 8px;line-height:1.3}
h4{font-family:var(--serif);font-weight:600;font-size:16.5px;margin:22px 0 6px}
.red{color:var(--brick)}
.deck{color:var(--sub);font-size:clamp(16px,1.9vw,19px);max-width:64ch;margin:0 0 10px;line-height:1.6}
p{max-width:70ch}
a{color:var(--brick)}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* inline source — thay cho chú thích chân trang (GOV.UK: gộp nguồn vào chính câu văn) */
.srcin{font-size:12.5px;color:var(--muted)}
.srcin a{color:var(--brick);text-decoration:none;border-bottom:1px dotted var(--brick)}
.srcin a:hover{background:var(--brick-soft)}

/* evidence badges */
.ev{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;font-weight:600;vertical-align:2px;white-space:nowrap}
.ev-fact{background:#DDE8DC;color:#2E5B33;border:1px solid #B9D2B7}
.ev-hyp{background:#F6E6C8;color:#7A5310;border:1px solid #E3CE9E}
.ev-obs{background:#E2E4EC;color:#3C4666;border:1px solid #C3C8DA}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--sub);
  border:1px solid var(--rule);padding:14px 16px;margin:20px 0;background:rgba(255,255,255,.35)}

/* ---------- blog index cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:26px 0}
.card{background:var(--paper);padding:24px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .13s}
.card:hover{background:rgba(178,58,40,.05)}
.card .cnum{font-family:var(--serif);font-size:13px;letter-spacing:.16em;color:var(--brick);
  text-transform:uppercase;margin-bottom:8px}
.card h3{font-family:var(--serif);font-size:22px;margin:0 0 8px;line-height:1.24;color:var(--ink)}
.card p{font-size:14px;color:var(--sub);margin:0 0 12px;max-width:none;line-height:1.55}
.card .cgo{margin-top:auto;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brick)}
.card.wide{grid-column:1 / -1}
@media(max-width:700px){.cards{grid-template-columns:1fr}}

/* ---------- prev / next ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:50px 0 0}
.pager a{background:var(--paper);padding:20px 22px;text-decoration:none;color:inherit;
  transition:background .13s;display:block}
.pager a:hover{background:rgba(178,58,40,.05)}
.pager .pl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:5px}
.pager .pt{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.3}
.pager .next{text-align:right}
.pager .empty{background:var(--paper);opacity:.4}
@media(max-width:640px){.pager{grid-template-columns:1fr}.pager .next{text-align:left}}

/* ---------- content blocks ---------- */
.hero{display:grid;grid-template-columns:1.14fr .86fr;margin-top:8px}
.hero-txt{padding:26px 30px 32px 0}
.hero-img{position:relative;min-height:320px;background:#241E17}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-txt{padding:22px 0 18px}
  .hero-img{min-height:200px;order:-1}}

.answer{background:#241E17;color:#F0EBE3;padding:34px;margin:26px 0}
.answer h2,.answer h3,.answer h4{color:#fff}
.answer h2{margin-top:0}
.answer p,.answer li,.answer td{color:#D8D0C4;max-width:68ch}
.answer .red{color:#E0806F}
.answer strong{color:#fff}
.answer sup.s a{color:#E0806F;border-bottom-color:#8A6055}
.answer .ev-fact{background:#2E4430;color:#C7E0C5;border-color:#3F5C42}
.answer .ev-hyp{background:#4A3D22;color:#EBD4A4;border-color:#66542F}
.answer a{color:#E0806F}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:22px 0}
.grid3>div{background:var(--paper);padding:20px}
.big{font-family:var(--serif);font-size:clamp(28px,4.2vw,40px);font-weight:700;
  line-height:1;color:var(--brick);display:block;margin-bottom:6px}
.lbl{font-size:13.5px;color:var(--sub);line-height:1.48}
@media(max-width:700px){.grid3{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse;font-size:14.5px;margin:18px 0}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:500}
tbody tr:hover{background:rgba(178,58,40,.035)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw table{min-width:600px}
.pill{display:inline-block;background:var(--brick-soft);color:var(--brick);
  font-size:11px;padding:2px 8px;border-radius:2px;letter-spacing:.04em;white-space:nowrap}
.pill.grey{background:#EAE5DC;color:var(--muted)}
.dash{border:1px dashed var(--muted);padding:1px 7px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.hot{background:rgba(178,58,40,.14);font-weight:600}
.warm{background:rgba(178,58,40,.06)}
.cold{color:var(--muted)}

/* fill-in form table */
.form-tbl{border:2px solid var(--brick);background:#fff}
.form-cap{background:var(--brick);color:#fff;padding:12px 16px;font-size:13.5px;
  letter-spacing:.04em;font-weight:600;margin:26px 0 0}
.form-tbl th{background:rgba(178,58,40,.09);color:var(--ink);font-weight:600;font-size:12px;text-align:center}
.form-tbl th:first-child{text-align:left}
.form-tbl td{border-left:1px solid var(--rule)}
.form-tbl td:first-child{border-left:none;font-weight:600;font-size:14px}
.form-tbl td.blank{min-width:66px;text-align:center;color:#CFC8BB;font-size:15px;letter-spacing:.12em}
.form-tbl tr.eg td{background:#F3F0E8;color:var(--muted);font-size:13px;text-align:center}
.form-tbl tr.eg td:first-child{text-align:left;font-weight:500;font-style:italic}

/* heatmap cells */
.hm td{text-align:right;padding:6px 7px;font-variant-numeric:tabular-nums;font-size:12.5px}
.hm th{text-align:right;padding:6px 7px}
.hm td:first-child,.hm th:first-child{text-align:left}
.h5{background:#B23A28;color:#fff;font-weight:600}
.h4c{background:#D07461}
.h3c{background:#EDBCAF}
.h2c{background:#F6E3DC}
.h1c{background:#EFEDE7;color:var(--muted)}
.h0{background:#E4E1D8;color:#9A9187}

blockquote{margin:16px 0;padding:14px 18px;border-left:3px solid var(--brick);
  background:rgba(178,58,40,.045);font-size:15px;max-width:74ch}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

svg{max-width:100%;height:auto;display:block}
.chart{margin:24px 0 8px;border:1px solid var(--rule);padding:20px 16px;background:rgba(255,255,255,.4)}
.chart h4{margin:0 0 12px}
.cap{font-size:12.5px;color:var(--muted);max-width:76ch;margin:8px 0 0;line-height:1.55}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.photo{border:1px solid var(--rule)}
.photo img{width:100%;height:250px;object-fit:cover;display:block}

ul,ol{max-width:70ch;padding-left:20px}
li{margin-bottom:7px}
.do li::marker{color:var(--brick)}

/* ---- tabs (within a page) ---- */
.tabs{margin:24px 0}
.tablist{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--rule);scrollbar-width:thin}
.tablist::-webkit-scrollbar{height:4px}
.tablist::-webkit-scrollbar-thumb{background:var(--rule)}
.tablist button{flex:none;font-family:var(--sans);font-size:13.5px;line-height:1.3;
  background:transparent;color:var(--sub);border:1px solid transparent;border-bottom:none;
  padding:10px 15px;cursor:pointer;white-space:nowrap;border-radius:2px 2px 0 0;
  margin-bottom:-1px;transition:background .12s,color .12s}
.tablist button:hover{background:rgba(178,58,40,.06);color:var(--ink)}
.tablist button[aria-selected="true"]{background:var(--paper);border-color:var(--rule);
  border-bottom:1px solid var(--paper);color:var(--ink);font-weight:600}
.tablist button .tnum{color:var(--muted);font-size:11.5px;margin-left:5px;font-weight:400}
.tablist button[aria-selected="true"] .tnum{color:var(--brick)}
.panels{border:1px solid var(--rule);border-top:none;padding:22px 24px;background:rgba(255,255,255,.32)}
.panels>[role="tabpanel"]{animation:fade .18s ease}
@keyframes fade{from{opacity:.35}to{opacity:1}}
.panels h4:first-child,.panels h3:first-child{margin-top:0}
@media(max-width:600px){.panels{padding:18px 15px}.tablist button{padding:9px 12px;font-size:12.5px}}
.tabhint{font-size:12px;color:var(--muted);margin:0 0 8px}

.exp{border:1px solid var(--rule);margin:18px 0;background:rgba(255,255,255,.4)}
.exp-h{display:flex;gap:12px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--rule);
  background:rgba(178,58,40,.05)}
.exp-n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--brick);line-height:1}
.exp-t{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.3}
.exp-b{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.exp-b>div{background:var(--paper);padding:14px 16px}
.exp-b dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.exp-b dd{margin:0;font-size:13.5px;line-height:1.5}
@media(max-width:820px){.exp-b{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.exp-b{grid-template-columns:1fr}}

.callout{border:1px solid var(--brick);padding:24px;margin:24px 0;background:rgba(178,58,40,.035)}
.callout h3{margin-top:0;color:var(--brick)}
.limits{border:1px solid var(--brick);padding:24px;margin:24px 0}
.limits h3{margin-top:0;color:var(--brick)}
.src{font-size:12.5px;color:var(--sub)}
.src li{margin-bottom:6px}

footer{padding:24px 0 40px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);margin-top:40px}

/* ---------- comment cards (voice of customer) ---------- */
.cmts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
@media(max-width:800px){.cmts{grid-template-columns:1fr}}
.cmt{border:1px solid var(--rule);background:#fff;padding:16px 18px;display:flex;flex-direction:column}
.cmt.key{border-color:var(--brick);border-width:2px;background:#FFFBFA}
.cmt-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.av{width:30px;height:30px;border-radius:50%;background:var(--brick);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  font-family:var(--serif)}
.av.g{background:#8A8177}.av.d{background:#241E17}
.cmt-who{font-size:13.5px;font-weight:600;line-height:1.25}
.cmt-meta{font-size:11px;color:var(--muted);letter-spacing:.03em}
.cmt-body{font-size:14.5px;line-height:1.6;margin:0 0 8px;max-width:none}
.cmt-body.orig{font-size:14px}
.cmt-tr{font-size:13.5px;color:var(--sub);font-style:italic;line-height:1.55;
  border-left:2px solid var(--rule);padding-left:11px;margin:0 0 10px}
.cmt-f{margin-top:auto;display:flex;gap:14px;align-items:center;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:9px;flex-wrap:wrap}
.cmt-f .lk{color:var(--brick);font-weight:600}
.cmt-f a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--rule)}
.cmt-f a:hover{color:var(--brick);border-color:var(--brick)}
.flag{font-size:15px;line-height:1}
.tagline{display:inline-block;background:var(--brick-soft);color:var(--brick);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-bottom:10px;
  align-self:flex-start;font-weight:600}
.tagline.g{background:#EAE5DC;color:var(--muted)}

/* star rating block */
.stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:20px 0}
.stars>div{background:var(--paper);padding:14px 16px}
.stars .sv{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1;display:block}
.stars .sl{font-size:12px;color:var(--muted);margin-top:5px;display:block}
.stars .low .sv{color:var(--brick)}

/* ---------- key points block (answer-first, per NN/g + UK Analysis Function) ---------- */
.keypoints{border-left:4px solid var(--brick);background:rgba(178,58,40,.05);
  padding:22px 26px;margin:24px 0 34px}
.keypoints .kp-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brick);font-weight:600;margin-bottom:12px}
.keypoints ul{margin:0;padding-left:19px;max-width:66ch}
.keypoints li{margin-bottom:9px;font-size:15.5px;line-height:1.55}
.keypoints li:last-child{margin-bottom:0}
.keypoints li strong{color:var(--ink)}
.keypoints li b{font-weight:600}

/* contents strip */
.toc-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:12px 0;margin:0 0 30px;display:flex;gap:6px 20px;flex-wrap:wrap;font-size:12.5px}
.toc-strip a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--rule)}
.toc-strip a:hover{color:var(--brick);border-color:var(--brick)}
.toc-strip .tl{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* section focus line — one stated focus per section (BLUF, AR 25-50 1-38b) */
.focus{font-size:14px;color:var(--brick);margin:0 0 14px;max-width:62ch;
  padding-left:12px;border-left:2px solid var(--brick-soft);line-height:1.5}

/* screenshot figure — bang chung chup man hinh that (them 07/09/2026) */
.shot{border:1px solid var(--rule);margin:18px 0;background:#fff}
.shot img{width:100%;display:block}
.shot figcaption{font-size:12px;color:var(--muted);padding:9px 12px;border-top:1px solid var(--rule);line-height:1.5}
.bar-cell{display:flex;align-items:center;gap:8px}
.bar-cell i{display:block;height:9px;background:var(--brick);opacity:.75}