/* Muc Huong dan: trang muc luc + trang bai viet (prose, muc luc ben, khoi lenh, ghi chu) */
.hdx{position:relative;overflow:clip}
.hd-top{padding-top:var(--s6);padding-bottom:var(--s5);border-bottom:1px solid var(--c-line)}
.crumb{font:500 13px/1.4 var(--font);color:var(--c-ink2);margin-bottom:var(--s4)}
.crumb a{color:var(--c-ink2);text-decoration:none}
.crumb a:hover{color:var(--c-ac)}
.crumb span{margin:0 .4rem;opacity:.5}
.hd-top h1{font:700 clamp(2rem,4.2vw,3.25rem)/1.08 var(--font-d);letter-spacing:-.025em;max-width:22ch;margin-top:var(--s2)}
.hd-top .lede{max-width:44rem}
.hd-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:var(--s4);font:500 13px/1.4 var(--font-m);color:var(--lt-mute,#7f897f)}

.hd-g{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--s6);padding-top:var(--s5);padding-bottom:var(--s6)}
.hd-toc{position:sticky;top:5.5rem;align-self:start;font-size:14px}
.hd-toc p{font:600 11px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ac);margin-bottom:var(--s3)}
.hd-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--c-line)}
.hd-toc a{display:block;padding:.45rem 0 .45rem 1rem;margin-left:-1px;border-left:2px solid transparent;color:var(--c-ink2);text-decoration:none;line-height:1.35;transition:color .15s,border-color .15s}
.hd-toc a:hover{color:var(--c-ink)}
.hd-toc a.on{color:var(--c-ink);border-left-color:var(--c-ac)}

.hd-body{max-width:46rem;font-size:1.0625rem;line-height:1.75;color:#d5dad3}
.hd-body>*+*{margin-top:1.15em}
.hd-body h2{scroll-margin-top:5.5rem;margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--c-line);font:700 1.6rem/1.2 var(--font-d);letter-spacing:-.015em;color:#fff}
.hd-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.hd-body h3{margin-top:1.8em;font:600 1.15rem/1.3 var(--font-d);color:#fff}
.hd-body a{color:var(--c-ac);text-underline-offset:3px}
.hd-body strong{color:#fff;font-weight:600}
.hd-body ul,.hd-body ol{padding-left:1.3em}
.hd-body ul{list-style:disc}.hd-body ol{list-style:decimal}
.hd-body li+li{margin-top:.45em}
.hd-body li::marker{color:var(--c-ac)}
.hd-body :not(pre)>code{padding:.12em .4em;border:1px solid var(--c-line);border-radius:5px;background:var(--c-1);font:500 .88em var(--font-m);color:#e9f6dc;overflow-wrap:anywhere}

.step{display:flex;gap:.85rem;align-items:baseline}
.step__n{flex:none;display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:8px;background:var(--c-acsoft);border:1px solid rgba(180,249,111,.3);font:700 13px/1 var(--font-m);color:var(--c-ac);transform:translateY(-.15em)}

.code{position:relative;margin-top:1.15em;border:1px solid var(--c-line);border-radius:var(--r);background:#080a09;overflow:hidden}
.code__h{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem .5rem 1rem;border-bottom:1px solid var(--c-line);background:var(--c-1);font:500 12px/1 var(--font-m);color:var(--lt-mute,#7f897f)}
.code__b{padding:.3rem .65rem;border:1px solid var(--c-line2);border-radius:6px;background:transparent;color:var(--c-ink2);font:500 12px/1 var(--font);cursor:pointer}
.code__b:hover{color:var(--c-ink);border-color:var(--c-ink2)}
.code__b.ok{color:var(--c-ac);border-color:var(--c-ac)}
.code pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font:500 14px/1.65 var(--font-m);color:#e6ece3;tab-size:2}
.code .c{color:#6f7b6f}

.hn{padding:1rem 1.15rem;border:1px solid rgba(180,249,111,.22);border-left:3px solid var(--c-ac);border-radius:var(--r);background:var(--c-acsoft);font-size:.98rem;line-height:1.65}
.hn b{display:block;margin-bottom:.2rem;color:#fff;font-weight:600}
.hn--w{border-color:rgba(243,207,122,.25);border-left-color:#f3cf7a;background:rgba(243,207,122,.06)}
.hn p{margin:0}

.tbl{margin-top:1.15em;border:1px solid var(--c-line);border-radius:var(--r);overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.tbl th,.tbl td{padding:.7rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--c-line)}
.tbl thead th{border-top:0;background:var(--c-1);font-weight:600;color:#fff;white-space:nowrap}
.tbl tbody th{font-weight:500;color:var(--c-ink)}

.hd-cta{margin-top:3rem;padding:1.6rem;border:1px solid rgba(180,249,111,.28);border-radius:14px;background:radial-gradient(120% 140% at 100% 0,rgba(180,249,111,.13),transparent 60%),var(--c-1)}
.hd-cta h2{margin:0;padding:0;border:0;font-size:1.35rem}
.hd-cta p{margin-top:.5rem;color:var(--c-ink2)}
.hd-cta .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.1rem}
.hd-cta .btn{text-decoration:none}

.hd-rel{padding:var(--s6) 0;border-top:1px solid var(--c-line)}
.hd-rel h2{font:700 1.5rem/1.2 var(--font-d);margin-bottom:var(--s4)}
.hdl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);list-style:none;margin:0;padding:0}
.hdc{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;border:1px solid var(--c-line);border-radius:14px;background:var(--c-1);transition:border-color .2s,transform .2s var(--ease)}
.hdc:hover{border-color:rgba(180,249,111,.45);transform:translateY(-2px)}
.hdc__k{font:600 11px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ac)}
.hdc h2,.hdc h3{font:600 1.2rem/1.3 var(--font-d);color:#fff}
.hdc h2 a,.hdc h3 a{color:inherit;text-decoration:none}
.hdc h2 a::after,.hdc h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hdc p{color:var(--c-ink2);font-size:.97rem;line-height:1.6}
.hdc__m{margin-top:auto;padding-top:.4rem;font:500 12px/1 var(--font-m);color:var(--lt-mute,#7f897f)}
.hd-list{padding:var(--s5) 0 var(--s6)}

@media (max-width:900px){
  .hd-g{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .hd-toc{position:static;padding:1rem 1.1rem;border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-1)}
  .hdl{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hd-top{padding-top:var(--s5)}
  .hd-body{font-size:1rem}
  .code pre{font-size:13px}
  .hd-cta .btn{width:100%}
}
.hd-body a.btn{color:var(--c-acink);text-decoration:none}.hd-body a.btn--g{color:var(--c-ink)}
@media (min-width:901px){.hd-rel .hdl{grid-template-columns:repeat(3,minmax(0,1fr))}}