/* Huong dan quy trinh SCAIL (popup nut "?" tren thanh dau trang). Moi quy tac gioi han trong .sg / .sg-dialog
   de khong dung vao giao dien SCAIL. So do dung skill diagram-design; noi dung o static/guide-scail.html. */
.sg-help{font-weight:700;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;line-height:1}
/* nut noi goc duoi phai, cuon trang van thay */
.sg-fab[hidden]{display:none}
.sg-fab{position:fixed;right:20px;bottom:20px;z-index:50;width:44px;height:44px;font-size:20px;color:#fff;background:#2d3142;border:0;box-shadow:0 2px 8px rgba(20,24,32,.25)}
.sg-fab:hover{background:#eb6c36}
.sg-newtab{align-self:center;margin-right:6px;font-size:.95rem;color:#2e5aa8;text-decoration:none;padding:6px 4px}
.sg-newtab:hover{text-decoration:underline}
.sg-newtab:focus-visible{outline:2px solid #eb6c36;outline-offset:2px}
.sg-standalone{background:#f5f5f5}
.sg-page-main{max-width:1240px;margin:0 auto;padding:20px 24px 32px}
.sg-back{margin:0 0 12px}
.sg-back a{color:#2e5aa8;text-decoration:none}
@media print{.sg-back,.sg .bar{display:none}}
.sg-dialog{width:min(1240px,96vw);max-height:92vh;padding:0;border:1px solid var(--line,#ddd);border-radius:12px;background:#f5f5f5;color:#2d3142}
.sg-dialog::backdrop{background:rgba(20,24,32,.45)}
.sg-top{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;background:#f5f5f5;border-bottom:1px solid rgba(45,49,66,.12)}
.sg-close{cursor:pointer}
.sg-body{padding:8px 24px 24px;overflow:auto;flex:1;min-height:0}
.sg-dialog[open]{display:flex;flex-direction:column}
.sg{
 --paper:#f5f5f5; --paper2:#ffffff; --ink:#2d3142; --muted:#4f5d75; --soft:#7a8399;
 --rule:rgba(45,49,66,.12); --tint:rgba(45,49,66,.022); --accent:#eb6c36; --accent-tint:rgba(235,108,54,.10);
 --node:#ffffff; --ext:#fbfbfc; --store:rgba(45,49,66,.06);
 --mix:#2e5aa8; --ok:#2f855a; --warn:#b7791f; --bad:#c0392b;
 --mono:ui-monospace,'Cascadia Mono','Consolas',monospace;
 color:var(--ink); background:var(--paper)
}
.sg .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.sg h1{font-weight:500;font-size:1.7rem;margin:.3rem 0 .4rem;text-wrap:balance}
.sg h2{font-weight:500;font-size:1.25rem;margin:36px 0 14px}
.sg .sub{color:var(--muted);margin:0 0 20px;max-width:66ch;line-height:1.55}
.sg .wrap{overflow-x:auto}
.sg svg{display:block;width:100%;height:auto}
.sg svg[hidden]{display:none}
.sg #flow-photo{min-width:1000px}
.sg #flow-lite{min-width:860px;max-width:980px;margin:0 auto}
.sg .mono{font-family:var(--mono) !important}
.sg .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;list-style:none;padding:0;margin:0}
.sg .checks li{display:grid;grid-template-columns:26px 1fr;gap:10px;line-height:1.5;font-size:.95rem}
.sg .checks b{display:block}
.sg .checks span{color:var(--muted)}
.sg .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 12px var(--mono);margin-top:1px}
.sg .d-ok{background:var(--ok)} .sg .d-warn{background:var(--warn)} .sg .d-bad{background:var(--bad)}
.sg .cards{display:grid;grid-template-columns:1.2fr 1fr 1fr .9fr;gap:14px}
.sg .card{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;background:var(--paper2)}
.sg .card .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sg .card .v{font-size:1.55rem;font-weight:600;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.sg .card .v small{font-size:.9rem;font-weight:500;color:var(--muted)}
.sg .card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.sg .acc{color:var(--accent)} .sg .mixc{color:var(--mix)}
.sg .tbl{overflow-x:auto;margin-top:14px}
.sg table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
.sg th,.sg td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--rule)}
.sg th:first-child,.sg td:first-child{text-align:left}
.sg th{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sg tr.focal td{color:var(--accent);font-weight:600}
.sg tfoot td{font-weight:600;border-bottom:0}
.sg .note{color:var(--soft);font-size:.85rem;margin:10px 0 0}
.sg footer{margin-top:28px;padding-top:12px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;color:var(--soft);line-height:1.7;background:none}
.sg .bar{display:flex;justify-content:flex-end;margin:0 0 8px}
.sg .toggle{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--muted);background:var(--paper2);border:1px solid var(--rule);border-radius:6px;padding:6px 12px;cursor:pointer}
.sg .toggle:focus-visible,.sg-help:focus-visible,.sg-close:focus-visible{outline:2px solid #eb6c36;outline-offset:2px}
.sg .sw{width:26px;height:14px;border-radius:7px;background:var(--rule);position:relative;transition:background .2s}
.sg .sw::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--paper2);transition:left .2s}
.sg .toggle[aria-pressed="true"] .sw{background:var(--accent)}
.sg .toggle[aria-pressed="true"] .sw::after{left:14px}
@media (prefers-reduced-motion:reduce){.sg .sw,.sg .sw::after{transition:none}}
@media (max-width:820px){.sg .cards{grid-template-columns:1fr 1fr}.sg .checks{grid-template-columns:1fr}}
@media (max-width:520px){.sg .cards{grid-template-columns:1fr}.sg-body{padding:8px 14px 18px}}
/* --- class sinh tu dong tu style cua so do (build_guide.py) --- */
.sg .gs0{position:absolute}
.sg .gs1{fill:var(--muted)}
.sg .gs2{fill:var(--accent)}
.sg .gs3{fill:var(--mix)}
.sg .gs4{fill:var(--paper)}
.sg .gs5{fill:var(--tint)}
.sg .gs6{stroke:var(--rule)}
.sg .gs7{color:var(--muted)}
.sg .gs8{fill:var(--soft)}
.sg .gs9{fill:var(--bad)}
.sg .gs10{stroke:var(--muted)}
.sg .gs11{stroke:var(--accent)}
.sg .gs12{stroke:var(--mix)}
.sg .gs13{color:var(--soft)}
.sg .gs14{color:var(--mix)}
.sg .gs15{fill:var(--store);stroke:var(--muted)}
.sg .gs16{fill:var(--ink)}
.sg .gs17{fill:var(--node);stroke:var(--ink)}
.sg .gs18{color:var(--ink)}
.sg .gs19{fill:var(--ok)}
.sg .gs20{fill:var(--store);stroke:var(--mix)}
.sg .gs21{fill:var(--ext);stroke:var(--muted)}
.sg .gs22{fill:var(--accent-tint);stroke:var(--accent)}
.sg .gs23{color:var(--accent)}
.sg .gs24{fill:var(--warn)}
.sg .gs25{font-size:.7rem;color:var(--soft)}
/* --- bo class co dinh cho so do cua skill "diagram" (khong style inline vi CSP) --- */
.sg .f-paper{fill:var(--paper)} .sg .s-paper{stroke:var(--paper)} .sg .c-paper{color:var(--paper)}
.sg .f-paper2{fill:var(--paper2)} .sg .s-paper2{stroke:var(--paper2)} .sg .c-paper2{color:var(--paper2)}
.sg .f-ink{fill:var(--ink)} .sg .s-ink{stroke:var(--ink)} .sg .c-ink{color:var(--ink)}
.sg .f-muted{fill:var(--muted)} .sg .s-muted{stroke:var(--muted)} .sg .c-muted{color:var(--muted)}
.sg .f-soft{fill:var(--soft)} .sg .s-soft{stroke:var(--soft)} .sg .c-soft{color:var(--soft)}
.sg .f-rule{fill:var(--rule)} .sg .s-rule{stroke:var(--rule)} .sg .c-rule{color:var(--rule)}
.sg .f-tint{fill:var(--tint)} .sg .s-tint{stroke:var(--tint)} .sg .c-tint{color:var(--tint)}
.sg .f-accent{fill:var(--accent)} .sg .s-accent{stroke:var(--accent)} .sg .c-accent{color:var(--accent)}
.sg .f-accent-tint{fill:var(--accent-tint)} .sg .s-accent-tint{stroke:var(--accent-tint)} .sg .c-accent-tint{color:var(--accent-tint)}
.sg .f-node{fill:var(--node)} .sg .s-node{stroke:var(--node)} .sg .c-node{color:var(--node)}
.sg .f-ext{fill:var(--ext)} .sg .s-ext{stroke:var(--ext)} .sg .c-ext{color:var(--ext)}
.sg .f-store{fill:var(--store)} .sg .s-store{stroke:var(--store)} .sg .c-store{color:var(--store)}
.sg .f-mix{fill:var(--mix)} .sg .s-mix{stroke:var(--mix)} .sg .c-mix{color:var(--mix)}
.sg .f-ok{fill:var(--ok)} .sg .s-ok{stroke:var(--ok)} .sg .c-ok{color:var(--ok)}
.sg .f-warn{fill:var(--warn)} .sg .s-warn{stroke:var(--warn)} .sg .c-warn{color:var(--warn)}
.sg .f-bad{fill:var(--bad)} .sg .s-bad{stroke:var(--bad)} .sg .c-bad{color:var(--bad)}
.sg .nofill{fill:none}
.sg .sg-defs{position:absolute}
.sg h2 small{font-size:.7rem;color:var(--soft);font-weight:400}
/* --- template HUONG DAN nap tu file .md (tplhub/guide_render.py): so do lan doc, khong phong to qua co that --- */
.sg .gd-svg{width:100%;height:auto;margin:0 auto}
.sg .gd-n1{max-width:600px} .sg .gd-n2{max-width:820px} .sg .gd-n3{max-width:1050px}
.sg .gd-n4{max-width:1270px} .sg .gd-n5{max-width:1500px} .sg .gd-n6{max-width:1720px}
.sg .gd-io{margin:-8px 0 18px;color:var(--ink);line-height:1.6;max-width:80ch}
.sg .gd-io-k{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sg .gd-io-arrow{color:var(--accent);font-weight:700;margin:0 8px}
.sg .gd-control{margin:-10px 0 18px;line-height:1.6;max-width:80ch}
.sg .gd-control a{color:var(--mix);font-weight:600}
.sg .gd-control small{margin-left:6px;color:var(--muted)}
.sg .checks small.gd-at{display:block;font:500 10px var(--mono);letter-spacing:.06em;color:var(--soft);margin:1px 0 2px;text-transform:uppercase}
.sg .gd-table th,.sg .gd-table td{text-align:left;vertical-align:top}
.sg .gd-table td.gd-num{font-family:var(--mono);color:var(--soft)}
.sg .gd-table td.gd-note{color:var(--muted);min-width:22ch}
.sg .gd-pill{display:inline-block;font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--warn);border-radius:8px;padding:1px 8px}
.sg .gd-cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.sg .gd-cards .v{font-size:1.3rem}
.sg .gd-notes{max-width:80ch;line-height:1.6;color:var(--ink)}
.sg .gd-notes p{margin:0 0 10px}
.sg .gd-notes ul{margin:0 0 10px;padding-left:20px}
.sg .gd-notes code{font-family:var(--mono);font-size:.9em;background:var(--store);padding:1px 4px;border-radius:3px}
.sg .gd-links{margin:0;padding-left:20px;line-height:1.8}
.sg .gd-links a{color:var(--mix)}
.sg svg a:focus-visible rect{stroke:var(--accent);stroke-width:2}