/* Shared article shell: intentionally inherits the same header and tokens as the homepage. */
body.article-site {
  background:var(--body-bg);
  color:var(--ink);
  font-family:"Be Vietnam Pro",Arial,Tahoma,Helvetica,sans-serif;
}
body.article-site .app-header {
  position:sticky;
  top:0;
  width:100%;
  min-height:80px;
  margin:0;
  border:0;
  border-bottom:1px solid var(--header-border);
  border-radius:0;
  background:var(--header-bg);
  padding:0 clamp(18px,5vw,84px);
  box-shadow:0 12px 34px rgba(80,45,17,.08);
}
body.article-site .logo strong { color:var(--brand-dark); font-size:clamp(28px,2.6vw,38px); }
body.article-site .logo > span { color:var(--brand); background:#fff2df; }
body.article-site .main-nav { gap:clamp(16px,2.3vw,34px); border-radius:0; background:transparent; padding:0; }
body.article-site .main-nav a { position:relative; border-radius:0; background:transparent; color:#34323b; padding:28px 6px 25px; font-size:clamp(16px,1.2vw,20px); }
body.article-site .main-nav a:hover,
body.article-site .main-nav a.active { color:#9a3b16; background:transparent; }
body.article-site .main-nav a.active::after,
body.article-site .main-nav a:hover::after { content:""; position:absolute; right:0; bottom:17px; left:0; height:3px; border-radius:999px; background:#ff8a00; }
body.article-site .seo-page,
body.article-site .knowledge-article-page { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 80px; background:transparent; }
body.article-site .seo-article,
body.article-site .cms-article { width:min(920px,100%); margin:0 auto; border:1px solid #ead7bf; border-radius:20px; background:var(--panel); padding:clamp(26px,5vw,58px); box-shadow:0 18px 45px rgba(108,56,18,.08); }
body.article-site .seo-article::before { content:"THƯ VIỆN TỬ VI AI"; display:inline-flex; margin-bottom:22px; border-radius:999px; background:#fff1dc; color:#9a3b16; padding:8px 12px; font-size:11px; font-weight:900; letter-spacing:.1em; }
body.article-site :is(.seo-article,.cms-article) h1 { max-width:20ch; margin:12px 0 18px; color:var(--brand-dark); font-size:clamp(38px,5vw,62px); font-weight:900; line-height:1.08; }
body.article-site :is(.seo-article,.cms-article) h2 { margin:38px 0 12px; color:#8c3b16; font-size:clamp(25px,3vw,34px); line-height:1.25; }
body.article-site :is(.seo-article,.cms-article) h3 { color:#8c3b16; }
body.article-site :is(.seo-article,.cms-article) :is(p,li) { color:#5d6a82; font-size:18px; line-height:1.75; }
body.article-site .seo-lead { color:#40495a; font-size:21px; font-weight:700; }
body.article-site .article-breadcrumb { display:flex; gap:9px; margin-bottom:26px; color:#78685f; }
body.article-site .article-breadcrumb a { color:#a33d13; font-weight:800; text-decoration:none; }
body.article-site :is(.article-meta,.article-sources,.article-faq) { border-color:#ead7bf; background:#fff8ec; }
body.article-site :is(.legacy-article-cover,.cms-cover) { width:100%; aspect-ratio:1200/630; margin:0 0 32px; border-radius:16px; object-fit:cover; background:#f2e4d1; }
body.article-site .knowledge-ending { width:min(920px,100%); margin:28px auto 0; }
@media(max-width:1080px){ body.article-site .app-header { grid-template-columns:minmax(0,1fr) auto; } body.article-site .app-header>.main-nav { display:none; } }
@media(max-width:760px){ body.article-site .app-header { top:0; width:100%; margin:0; border-radius:0; } body.article-site .seo-page,body.article-site .knowledge-article-page { width:calc(100% - 20px); padding-top:20px; } body.article-site .seo-article,body.article-site .cms-article { border-radius:16px; padding:24px 19px; } body.article-site :is(.seo-article,.cms-article) h1 { font-size:36px; } }
html[data-theme="dark"] body.article-site { background:var(--body-bg); color:var(--ink); }
html[data-theme="dark"] body.article-site .app-header { background:var(--header-bg); border-color:var(--header-border); }
html[data-theme="dark"] body.article-site :is(.seo-article,.cms-article) { border-color:var(--line); background:var(--panel); }
html[data-theme="dark"] body.article-site :is(.seo-article,.cms-article) :is(h1,h2,h3) { color:var(--brand-dark); }
html[data-theme="dark"] body.article-site :is(.seo-article,.cms-article) :is(p,li) { color:var(--muted); }