/* Kiến thức font + Hỏi đáp: wide reading layout (contents on the left, text in a readable column, tools on the right) */
.kn-page .wrap{max-width:1560px;padding:0 clamp(16px,3vw,48px)}
.kn-hero{padding:clamp(28px,5vw,64px) 0 clamp(18px,3vw,32px);border-bottom:1px solid var(--line)}
.kn-eyebrow{margin:0 0 .5rem;font:700 .75rem/1.5 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.kn-hero h1{margin:0;font:600 clamp(2.2rem,5.4vw,4rem)/1.08 var(--font-display);letter-spacing:-.01em;max-width:24ch}
.kn-hero p{margin:1rem 0 0;max-width:46em;font-size:1.125rem;line-height:1.7;color:var(--ink-2)}
.kn-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:clamp(20px,3vw,32px) 0 0}
.kn-topic{display:flex;flex-direction:column;gap:.35rem;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.kn-topic:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.kn-topic b{font:600 1rem/1.3 var(--font-ui)}
.kn-topic span{font-size:.875rem;line-height:1.5;color:var(--muted)}
.kn-topic i{font:600 2rem/1 var(--font-display);font-style:normal;color:var(--accent-ink);margin-bottom:.2rem}

.kn-body{display:grid;grid-template-columns:240px minmax(0,1fr) 280px;gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(24px,4vw,48px) 0 4rem}
.kn-toc{padding-top:2px;position:sticky;top:calc(var(--head-h,64px) + 16px);max-height:calc(100vh - var(--head-h,64px) - 32px);overflow:auto;scrollbar-width:thin;font-size:.9rem}
.kn-toc p{margin:0 0 .5rem;padding-top:.35em;font:700 .75rem/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kn-toc a{display:block;padding:.38rem .7rem;border-left:2px solid var(--line);color:var(--ink-2);text-decoration:none;line-height:1.35}
.kn-toc a:hover{color:var(--ink);border-left-color:var(--ink-2)}
.kn-toc a[aria-current=true]{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}
.kn-text{max-width:46rem;min-width:0}
.kn-text section{scroll-margin-top:calc(var(--head-h,64px) + 16px);padding-bottom:1.5rem}
.kn-text section+section{border-top:1px solid var(--line);padding-top:1.5rem}
.kn-text h2{margin:0 0 .9rem;font:600 clamp(1.6rem,2.8vw,2.1rem)/1.2 var(--font-display)}
.kn-text h3{margin:1.6rem 0 .5rem;font:600 1.125rem/1.35 var(--font-ui)}
.kn-text p,.kn-text li{color:var(--ink-2);font-size:1.0625rem;line-height:1.75}
.kn-text ul,.kn-text ol{padding-left:1.25rem}
.kn-text li{margin:.25rem 0}
.kn-text a{color:var(--accent-ink)}
.kn-text code{font-size:.92em;padding:.1em .35em;border-radius:6px;background:var(--sunken)}
.kn-text table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.kn-text th,.kn-text td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid var(--line);line-height:1.55}
.kn-text th{font:600 .8125rem/1.3 var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kn-wide{overflow-x:auto}
.kn-demo{margin:1rem 0;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow-x:auto}
.kn-demo .big{display:block;font:500 clamp(2.4rem,6vw,4.2rem)/1.25 var(--font-display);white-space:nowrap;color:var(--ink)}
.kn-demo small{display:block;margin-top:.4rem;color:var(--muted);font-size:.875rem}
.kn-vfe{margin:1.2rem 0 .4rem;padding:14px 16px 14px 18px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--accent-line)}
.kn-vfe b{display:block;margin-bottom:.2rem;font:700 .78rem/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.kn-vfe p{margin:0;font-size:1rem;color:var(--ink)}
.kn-vfe a{font-weight:600}
.kn-terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:1rem 0 0}
.kn-terms div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.kn-terms dt{font:600 1rem/1.3 var(--font-ui);color:var(--ink)}
.kn-terms dt small{font-weight:500;color:var(--muted)}
.kn-terms dd{margin:.3rem 0 0;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.kn-aside{position:sticky;top:calc(var(--head-h,64px) + 16px);display:flex;flex-direction:column;gap:12px}
.kn-tool{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-decoration:none}
.kn-tool:hover{border-color:var(--accent-line)}
.kn-tool b{display:block;font:600 1rem/1.3 var(--font-ui)}
.kn-tool span{display:block;margin-top:.25rem;font-size:.875rem;line-height:1.5;color:var(--muted)}
.kn-tool.lead{background:var(--accent);border-color:var(--accent);color:#fff}
.kn-tool.lead span{color:rgba(255,255,255,.85)}
.kn-sources{font-size:.9rem}
.kn-sources li{font-size:.95rem}

/* FAQ */
.kn-faq{display:flex;flex-direction:column;gap:10px}
.kn-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.kn-faq summary{position:relative;list-style:none;cursor:pointer;padding:16px 48px 16px 18px;font:600 1.0625rem/1.4 var(--font-ui);color:var(--ink)}
.kn-faq summary::-webkit-details-marker{display:none}
.kn-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-6px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.kn-faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.kn-faq details[open]{border-color:var(--accent-line)}
.kn-faq .a{padding:0 18px 16px}
.kn-faq .a p{margin:.2rem 0 .6rem}
.kn-faq h2{margin:1.6rem 0 .4rem;font:600 1.4rem/1.25 var(--font-display)}
.kn-faq h2:first-child{margin-top:0}

@media (max-width:1180px){.kn-body{grid-template-columns:220px minmax(0,1fr)}.kn-aside{position:static;grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
@media (max-width:820px){.kn-body{grid-template-columns:minmax(0,1fr)}.kn-toc{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.kn-toc p{display:none}.kn-toc a{flex:none;border:1px solid var(--line);border-radius:99px;padding:.35rem .8rem;white-space:nowrap}.kn-toc a[aria-current=true]{border-color:var(--accent-line)}}
@media (max-width:560px){.kn-topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kn-topic{padding:12px 13px}.kn-topic i{font-size:1.5rem}.kn-topic span{font-size:.8125rem}}