/* =========================================================
   TRUNG TÂM LOGIC XÂY KÊNH — Design system (INKDOC)
   Monochrome slate · Tiempos (đọc) · Aeonik (tiêu đề) · Zero-animation
   ========================================================= */
@font-face{font-family:'FD Aeonik Extended';src:url('fonts/FDAeonikExtended-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'FD Aeonik Extended';src:url('fonts/FDAeonikExtended-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'FD Aeonik';src:url('fonts/FDAeonik-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'FD Aeonik';src:url('fonts/FDAeonik-Medium.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:'FD Aeonik';src:url('fonts/FDAeonik-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/FDTiemposText-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/FDTiemposText-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/FDTiemposText-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/FDTiemposText-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0f172a; --ink2:#1e293b; --ink3:#334155; --mute:#64748b; --mute2:#94a3b8;
  --line:#e2e8f0; --line2:#cbd5e1; --bg:#ffffff; --bg2:#f8fafc; --bg3:#f1f5f9;
  --acc:#0f172a;
  /* màu theo chặng */
  --c-tuduy:#7c3aed; --c-batdau:#0891b2; --c-logic:#2563eb; --c-niemtin:#db2777;
  --c-dinhdang:#ea580c; --c-kynang:#16a34a; --c-thuchanh:#ca8a04; --c-tainguyen:#0f766e; --c-dulieu:#9333ea;
  --serif:'Tiempos Text',Georgia,'Times New Roman',serif;
  --sans:'FD Aeonik',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --display:'FD Aeonik Extended','FD Aeonik',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --side:290px; --top:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
::selection{background:#dbeafe}

/* ---------- TOP BAR ---------- */
.topbar{position:sticky;top:0;z-index:50;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 18px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(6px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand .logo{width:30px;height:30px;border-radius:8px;background:#07090E;color:#FB923C;display:grid;place-items:center;font:700 12px var(--display);letter-spacing:.02em}
.brand .t{font:700 13px var(--display);text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
.brand .t small{display:block;font:500 11px var(--sans);text-transform:none;letter-spacing:0;color:var(--mute)}
.stepper{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;margin-left:10px}
.stepper::-webkit-scrollbar{display:none}
.stepper a{flex-shrink:0;text-decoration:none;font-size:12.5px;font-weight:500;color:var(--mute);padding:6px 9px;border-radius:7px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.stepper a .n{font:600 10px var(--mono);color:var(--mute2)}
.stepper a:hover{background:var(--bg3);color:var(--ink)}
.stepper a.on{background:var(--ink);color:#fff}
.stepper a.on .n{color:#94a3b8}
.searchbtn{flex-shrink:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:6px 10px;font:500 13px var(--sans);color:var(--mute);cursor:pointer}
.searchbtn kbd{font:600 10px var(--mono);border:1px solid var(--line2);border-radius:4px;padding:1px 4px;background:#fff}
.menubtn{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 9px;cursor:pointer;font-size:15px}

/* ---------- LAYOUT ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:calc(100vh - var(--top))}
.side{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow-y:auto;border-right:1px solid var(--line);background:var(--bg2);padding:18px 14px 40px;font-size:13.5px}
.side h6{margin:18px 8px 6px;font:700 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--mute2)}
.side h6:first-child{margin-top:0}
.side a.pg{display:flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--ink3);padding:6px 8px;border-radius:7px;font-weight:500}
.side a.pg .n{font:600 10.5px var(--mono);color:var(--mute2);min-width:20px}
.side a.pg:hover{background:var(--bg3);color:var(--ink)}
.side a.pg.on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,23,42,.05);font-weight:600}
.side .toc{margin:4px 0 10px 18px;padding-left:10px;border-left:1px solid var(--line2)}
.side .toc ul{list-style:none;margin:0;padding:0}
.side .toc ul ul{padding-left:12px}
.side .toc a{display:block;text-decoration:none;color:var(--mute);padding:3px 6px;font-size:12.8px;line-height:1.4;border-radius:5px}
.side .toc a:hover{color:var(--ink)}
.side .toc a.active{color:var(--ink);font-weight:600;background:#fff}
.main{min-width:0;padding:40px 40px 120px;align-items:start;display:grid;grid-template-columns:minmax(0,760px) 260px;gap:48px;justify-content:center}
.main.wide{grid-template-columns:minmax(0,820px)}
.content{min-width:0}
.rail{position:sticky;top:calc(var(--top) + 32px);align-self:start;max-height:calc(100vh - var(--top) - 50px);overflow:auto;font-size:13px}
.rail h6{margin:0 0 10px;font:700 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--mute2)}
.rail .rcard{display:block;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff}
.rail .rcard:hover{border-color:var(--ink3)}
.rail .rcard b{display:block;font-size:13px;color:var(--ink)}
.rail .rcard span{color:var(--mute);font-size:12px;line-height:1.4;display:block;margin-top:2px}

/* ---------- TYPOGRAPHY ---------- */
.kicker{font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stage,var(--mute));display:flex;align-items:center;gap:8px;margin-bottom:12px}
.kicker::before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}
h1.title{font:700 clamp(28px,4vw,40px)/1.12 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0 0 16px}
.lede{font:400 20px/1.6 var(--serif);color:var(--ink3);margin:0 0 28px}
.content h2{font:600 26px/1.25 var(--sans);letter-spacing:-.015em;margin:56px 0 14px;padding-top:12px;border-top:1px solid var(--line);scroll-margin-top:80px}
.content h2 .num{font:600 13px var(--mono);color:var(--stage,var(--mute2));display:block;margin-bottom:4px;letter-spacing:0}
.content h3{font:600 20px/1.3 var(--sans);margin:36px 0 10px;scroll-margin-top:80px}
.content h4{font:600 16.5px/1.35 var(--sans);margin:26px 0 8px;scroll-margin-top:80px;color:var(--ink2)}
.content p,.content li{font-family:var(--serif);font-size:18px;line-height:1.72;color:var(--ink2)}
.content p{margin:0 0 16px}
.content ul,.content ol{padding-left:24px;margin:0 0 18px}
.content li{margin:5px 0}
.content li::marker{color:var(--mute2)}
.content strong{font-weight:700;color:var(--ink)}
.content em{font-style:italic}
.content blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--stage,var(--ink));font:italic 19px/1.65 var(--serif);color:var(--ink3)}
.content blockquote p{font-size:19px}
.content code{font:500 .86em var(--mono);background:var(--bg3);border:1px solid var(--line);padding:1px 5px;border-radius:5px}
.content hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.content a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.content a:hover{text-decoration-color:var(--ink)}

/* ---------- BADGES (Apple HIG) ---------- */
.b{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--bg3);color:var(--ink3);border:1px solid var(--line);border-radius:5px;padding:4px 6px;box-shadow:0 1px 1px rgba(15,23,42,.04);position:relative;top:-2px;vertical-align:baseline;white-space:nowrap}
.b.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.b.s{background:color-mix(in srgb,var(--stage) 10%,#fff);color:var(--stage);border-color:color-mix(in srgb,var(--stage) 25%,#fff)}

/* ---------- RESOURCE LINK (ấn vào ra luôn) ---------- */
a.go{display:inline-flex;align-items:center;gap:5px;font:600 .82em var(--sans);text-decoration:none!important;background:#fff;color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:2px 9px 2px 7px;position:relative;top:-1px;vertical-align:baseline;white-space:nowrap}
a.go::before{content:"↗";font-size:.95em;color:var(--stage,var(--mute))}
a.go:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
a.go.int::before{content:"→"}

/* ---------- BLOCKS ---------- */
.spec{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:20px 0;background:#fff}
.spec .row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 16px;border-top:1px solid var(--line);align-items:baseline}
.spec .row:first-child{border-top:0}
.spec .row>.b{justify-self:start}
.spec .row>div{font:400 15.5px/1.55 var(--sans);color:var(--ink2)}
.spec .row>div p,.spec .row>div li{font-family:var(--sans);font-size:15.5px;line-height:1.55}

.callout{border:1px solid var(--line);border-left:3px solid var(--stage,var(--ink));background:var(--bg2);border-radius:10px;padding:14px 18px;margin:22px 0}
.callout>.h{font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--stage,var(--ink3));margin-bottom:6px}
.callout p,.callout li{font-size:16.5px!important}
.callout p:last-child{margin-bottom:0}
.callout.warn{--stage:#dc2626}
.callout.tip{--stage:#16a34a}

.qa{margin:14px 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.qa>summary{list-style:none;cursor:pointer;padding:14px 18px;font:600 16px/1.4 var(--sans);display:flex;gap:12px;align-items:flex-start}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::before{content:"Q";flex-shrink:0;font:700 11px var(--mono);background:var(--bg3);border:1px solid var(--line);border-radius:5px;padding:3px 6px;margin-top:1px}
.qa[open]>summary{border-bottom:1px solid var(--line);background:var(--bg2);border-radius:12px 12px 0 0}
.qa>.a{padding:14px 20px 4px}

.grid{display:grid;gap:12px;margin:18px 0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;text-decoration:none;display:block;color:inherit}
a.card:hover{border-color:var(--ink3);box-shadow:0 2px 10px rgba(15,23,42,.06)}
.card .ct{font:600 16px/1.3 var(--sans);margin:6px 0 6px;color:var(--ink)}
.card .cd{font:400 14px/1.5 var(--sans);color:var(--mute)}
.card .cf{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.card .ico{font-size:22px}

table.t{width:100%;border-collapse:collapse;margin:18px 0;font:400 14.5px/1.5 var(--sans);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:table}
.tw{overflow-x:auto;margin:18px 0}
.tw table.t{margin:0}
table.t th{background:var(--bg3);text-align:left;font:700 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);padding:10px 12px;border-bottom:1px solid var(--line)}
table.t td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink2)}
table.t td:first-child{font-weight:600;color:var(--ink)}

/* Flow map (index) */
.flow{display:grid;gap:0;margin:24px 0;counter-reset:f}
.fstep{display:grid;grid-template-columns:54px 1fr;gap:16px;text-decoration:none;color:inherit;padding:18px 0;border-top:1px solid var(--line)}
.fstep:first-child{border-top:0}
.fstep .dot{width:44px;height:44px;border-radius:12px;background:var(--stage);color:#fff;display:grid;place-items:center;font:700 14px var(--mono)}
.fstep .q{font:700 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--stage)}
.fstep .h{font:600 20px/1.3 var(--sans);margin:3px 0 6px;color:var(--ink)}
.fstep .d{font:400 16.5px/1.6 var(--serif);color:var(--ink3)}
.fstep:hover .h{text-decoration:underline;text-underline-offset:4px}
.fstep .links{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}

.hero{border:1px solid var(--line);border-radius:16px;padding:28px;background:linear-gradient(180deg,#fff, var(--bg2));margin-bottom:30px}

/* Sơ đồ chữ (diagram) */
.diagram{font:500 13.5px/1.55 var(--mono);background:#0b1020;color:#e2e8f0;border-radius:12px;padding:18px 20px;overflow-x:auto;white-space:pre;margin:20px 0}
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:20px 0}
.chain>div{flex:1 1 120px;border:1px solid var(--line);background:#fff;padding:12px;font:500 13.5px/1.4 var(--sans);position:relative;margin-right:18px;border-radius:10px}
.chain>div:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--mute2);font-weight:700}
.chain>div b{display:block;font:700 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--stage,var(--mute));margin-bottom:4px}

/* Script (kịch bản) */
.script{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:20px 0;background:#fff}
.script .sh{background:var(--bg3);padding:10px 16px;font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.script .ln{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 16px;border-top:1px solid var(--line)}
.script .ln:first-of-type{border-top:0}
.script .ln .lb{font:700 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--stage,var(--mute));padding-top:4px}
.script .ln .tx{font:400 16.5px/1.6 var(--serif);color:var(--ink2)}
.script .ln .tx i{color:var(--mute);font-size:14.5px}

/* Dynamic blocks */
.dyn-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.chip{font:600 12.5px var(--sans);border:1px solid var(--line2);background:#fff;border-radius:999px;padding:5px 11px;cursor:pointer;color:var(--ink3)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dyn-empty{font:400 14px var(--sans);color:var(--mute);padding:14px;border:1px dashed var(--line2);border-radius:10px}
.ex{border:1px solid var(--line);border-radius:12px;background:#fff;margin:12px 0;overflow:hidden}
.ex>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.ex>summary::-webkit-details-marker{display:none}
.ex .exn{flex-shrink:0;font:700 11px var(--mono);background:var(--ink);color:#fff;border-radius:6px;padding:4px 7px}
.ex .ext{font:600 15.5px/1.4 var(--sans);color:var(--ink)}
.ex .exm{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ex .exb{padding:4px 18px 16px 18px;border-top:1px solid var(--line)}
.ex .exb p,.ex .exb li{font-size:16px}
.ex .exb h5{font:700 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px}

/* Search modal */
.sm{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
.sm.open{display:flex}
.sm .box{width:min(680px,92vw);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.sm input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font:500 17px var(--sans);outline:none}
.sm .res{max-height:60vh;overflow:auto;padding:6px}
.sm .res a{display:block;text-decoration:none;padding:10px 12px;border-radius:8px}
.sm .res a:hover,.sm .res a.sel{background:var(--bg3)}
.sm .res a b{display:block;font:600 14.5px var(--sans);color:var(--ink)}
.sm .res a span{font:400 12.5px var(--sans);color:var(--mute)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:60px}
.pager a{border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none!important;display:block}
.pager a:hover{border-color:var(--ink3)}
.pager a small{display:block;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute2)}
.pager a b{font:600 16px var(--sans);color:var(--ink)}
.pager a.nx{text-align:right}
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font:400 13px var(--sans);color:var(--mute)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1280px){.main{grid-template-columns:minmax(0,760px)}.rail{display:none}}
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:var(--top);width:min(320px,86vw);z-index:60;transform:translateX(-102%);box-shadow:0 10px 40px rgba(0,0,0,.15)}
  body.navopen .side{transform:none}
  .menubtn{display:block}
  .stepper{display:none}
  .main{padding:28px 18px 90px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .spec .row{grid-template-columns:1fr;gap:6px}
  .script .ln{grid-template-columns:1fr;gap:2px}
  .content p,.content li{font-size:17px}
  .searchbtn span{display:none}
  .pager{grid-template-columns:1fr}
}
@media print{.topbar,.side,.rail,.pager{display:none}.shell{display:block}.main{display:block;padding:0}}

/* ---------- FIX v3: shell + brand title ---------- */
.side .mh{padding:2px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.side .mh b{display:block;font:700 15px/1.25 var(--display);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.side .mh p{margin:6px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--mute)}
.side a.pg .t{line-height:1.35}
.content h1.title{font-family:'FD Aeonik Extended','FD Aeonik',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(26px,3.2vw,38px);line-height:1.1;text-wrap:balance;margin:0 0 22px;color:var(--ink)}
.content .hero{padding:20px 24px;margin:0 0 28px}
.content .hero>*:last-child{margin-bottom:0}
.rail .otp a{display:block;text-decoration:none;color:var(--mute);padding:5px 0 5px 12px;border-left:2px solid var(--line);font:500 13px/1.4 var(--sans)}
.rail .otp a:hover{color:var(--ink);border-left-color:var(--ink)}
.pager{margin-top:56px}
.pager a b{display:block;margin-top:4px;line-height:1.3}

.content code{overflow-wrap:anywhere;word-break:break-word}
.content pre{overflow-x:auto;max-width:100%}
.content img,.content table{max-width:100%}

.card.go{display:block;white-space:normal}
a.card{overflow-wrap:break-word;word-break:break-word}