/* Knowledge Hub · academic article layer (loaded after site.css on article pages only)
   Layout: institutional strip → dateline + category → title → bold lead → fact table → abstract → numbered sections → end matter */
:root{
  --kh-paper:#FFFFFF;
  --kh-panel:#F2F5F3;
  --kh-ink:#1B2925;
  --kh-muted:#5A6A65;
  --kh-rule:#D9E0DC;
  --kh-band:#0F3C35;
  --kh-accent:#8A6622;
}
.art{background:var(--kh-paper)}
.art .art-top,.art .art-grid{background:var(--kh-paper)}

/* institutional strip */
.kh-strip{background:var(--kh-band);color:#EAF0EC}
.kh-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding-block:11px}
.kh-strip b{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#D9B869}
.kh-strip span{font-size:.82rem;color:#C5D3CC}

/* dateline above title */
.art-top .crumbs{margin-bottom:22px}
.kh-dateline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.88rem;color:var(--kh-muted)}
.kh-dateline time{font-variant-numeric:tabular-nums}
.kh-cat{display:inline-block;padding:4px 10px;border:1px solid var(--kh-band);border-radius:2px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kh-band);text-decoration:none}
.kh-cat:hover{background:var(--kh-band);color:#fff}
.kh-code{font-size:.8rem;letter-spacing:.06em;color:var(--kh-muted)}
.art-top h1{margin-top:14px;color:var(--kh-band);text-wrap:balance}

/* lead paragraph: bold, ruled */
.art-stand{font-family:var(--sans);font-weight:600;font-size:clamp(1.04rem,1.4vw,1.14rem);line-height:1.7;color:var(--kh-ink);border-left:3px solid var(--kh-band);padding-left:18px;text-align:left}

/* byline + fact table */
.art-by{border-top:1px solid var(--kh-rule);border-bottom:0;padding-bottom:0}
.kh-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;border-top:1px solid var(--kh-rule);border-bottom:1px solid var(--kh-rule)}
.kh-facts div{padding:12px 14px 12px 0}
.kh-facts div + div{padding-left:14px;border-left:1px solid var(--kh-rule)}
.kh-facts dt{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kh-muted)}
.kh-facts dd{margin:4px 0 0;font-size:.93rem;font-weight:500;color:var(--kh-ink);line-height:1.4}
@media (max-width:640px){
  .kh-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kh-facts div:nth-child(3){padding-left:0;border-left:0}
  .kh-facts div:nth-child(n+3){border-top:1px solid var(--kh-rule)}
}
.art-fig img{border-radius:0}
.art-fig figcaption{font-size:.86rem;font-style:italic;color:var(--kh-muted)}
.art-fig figcaption::before{content:"Hình 1. ";font-style:normal;font-weight:600;color:var(--kh-ink)}

/* abstract box */
.prose .kh-abstract{background:var(--kh-panel);border:1px solid var(--kh-rule);border-top:3px solid var(--kh-band);padding:20px 24px;margin:0 0 2.6em;border-radius:0;color:var(--kh-ink)}
.prose .kh-abstract>strong{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--kh-band);margin-bottom:8px}
.prose .kh-abstract p{font-family:var(--sans);font-size:1rem;line-height:1.7;color:var(--kh-ink)}
.prose .kh-abstract .kh-kw{margin-top:12px;font-size:.88rem;color:var(--kh-muted)}
.prose .kh-abstract .kh-kw b{font-weight:600;color:var(--kh-ink)}

/* body: numbered sections, sans text */
.prose{counter-reset:sec;font-size:1.05rem;line-height:1.8;color:var(--kh-ink)}
.prose p,.prose li{text-align:justify;text-justify:inter-word}
.prose>section>h2{counter-increment:sec;font-family:var(--sans);font-weight:700;font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.35;color:var(--kh-band);padding-bottom:10px;border-bottom:1px solid var(--kh-rule);margin-bottom:.9em}
.prose>section>h2::before{content:counter(sec) ".";display:inline;width:auto;height:auto;background:none;margin:0 .45em 0 0;color:var(--kh-accent)}
.prose h3{font-size:1.06rem;color:var(--kh-band)}
.toc ul,.toc-m ul{counter-reset:toc}
.toc li,.toc-m li{counter-increment:toc}
.toc a::before,.toc-m a::before{content:counter(toc) ". ";color:var(--kh-accent);font-variant-numeric:tabular-nums}
.toc h2{color:var(--kh-band)}

/* tables: ruled, light header */
.prose .table-wrap{border:0;border-top:2px solid var(--kh-band);border-bottom:1px solid var(--kh-band);border-radius:0;background:var(--kh-paper)}
.prose .table-wrap thead th{background:var(--kh-panel);color:var(--kh-band);border-bottom:1px solid var(--kh-rule);font-size:.8rem;letter-spacing:.02em}
.prose .table-wrap td{border-bottom:1px solid var(--kh-rule)}
.prose figure figcaption{font-size:.86rem;font-style:italic;color:var(--kh-muted);margin-top:8px}

/* callouts and formulas */
.prose .callout{background:var(--kh-paper);border:1px solid var(--kh-rule);border-left:3px solid var(--kh-band);border-radius:0}
.prose .callout>strong{color:var(--kh-band)}
.prose .fx{background:var(--kh-panel);border-radius:0}
.prose ul:not([class]) li::before{background:var(--kh-band)}
.prose ol:not([class]) li::before{font-family:var(--sans);font-size:.95em;font-weight:600;color:var(--kh-band)}

/* end matter */
.kh-end{margin-top:40px;padding-top:22px;border-top:1px solid var(--kh-rule);display:grid;gap:18px}
.kh-credit{font-size:.92rem;font-style:italic;color:var(--kh-muted)}
.kh-credit b{font-style:normal;font-weight:600;color:var(--kh-ink)}
.kh-tags{display:flex;flex-wrap:wrap;gap:8px}
.kh-tags a{padding:5px 11px;background:var(--kh-panel);border:1px solid var(--kh-rule);font-size:.84rem;color:var(--kh-band);text-decoration:none}
.kh-tags a:hover{border-color:var(--kh-band)}
.kh-cite{background:var(--kh-panel);border:1px solid var(--kh-rule);padding:14px 16px;font-size:.86rem;line-height:1.6;color:var(--kh-ink);overflow-wrap:anywhere}
.kh-cite>strong{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kh-band);margin-bottom:4px}
.art-foot{border-top:1px solid var(--kh-rule)}

/* related articles */
.art-more{background:var(--kh-panel)}
.art-more .relc{background:var(--kh-paper);border:1px solid var(--kh-rule);padding:14px;transition:border-color .2s ease}
.art-more .relc:hover{border-color:var(--kh-band)}
.art-more .relc .kh-rel-date{grid-column:2;font-size:.8rem;color:var(--kh-muted);font-variant-numeric:tabular-nums;margin-bottom:2px}
.art-more .relc span{color:var(--kh-accent);font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.art-more .relc h3{font-family:var(--sans);font-weight:600;font-size:1.02rem;line-height:1.45;color:var(--kh-band)}
@media (prefers-reduced-motion:reduce){.art-more .relc{transition:none}}
.art-more .relc .thumb{grid-row:1/4}
.art-stand{font-weight:500}
.art-by .by-id div span{display:none}
.art-stand,.prose .kh-abstract p:not(.kh-kw),.prose .callout p{text-align:justify;text-justify:inter-word}
.prose td,.prose th,.prose .fx,.prose .kh-cite,.prose .kh-kw,.prose h2,.prose h3{text-align:left}
.kh-nonum .prose>section>h2::before,.kh-nonum .toc a::before,.kh-nonum .toc-m a::before{content:none}
.kh-more{font-size:.92rem;color:var(--kh-muted)}.kh-more b{color:var(--kh-ink);font-weight:600}.kh-more a{color:var(--kh-band)}
