/*
 * congcuseoai.com — CSS riêng /huong-dan (mục lục dính + nội dung), nạp qua $extraCss.
 */

.guide-layout {
    max-width: var(--maxw); margin: 0 auto; padding: var(--sp-12) 20px var(--sp-16);
    display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-10);
}
.guide-toc { align-self: start; position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.guide-toc-label {
    font-size: var(--fs-xs); font-weight: 700; color: var(--muted-2); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: var(--sp-3);
}
.guide-toc nav { display: flex; flex-direction: column; }
.guide-toc a { display: block; padding: var(--sp-2) 0; font-size: var(--fs-base); color: var(--ink-3); }
.guide-toc a:hover, .guide-toc a.is-active { color: var(--brand-darker); font-weight: 700; }

.guide-content h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--sp-7); }
.guide-section { margin-bottom: var(--sp-8); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
.guide-section h2 { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--sp-2); }
.guide-section p { font-size: var(--fs-lg); color: var(--ink-4); line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
    .guide-layout { grid-template-columns: 1fr; }
    .guide-toc { position: static; margin-bottom: var(--sp-6); }
    .guide-toc nav { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
}