/* FlexiQuor Docs — static docs site theme */
:root{
  --navy:#1F3A5F; --orange:#D2601A; --green:#1E7A3D; --red:#C0392B;
  --bg:#ffffff; --bg-soft:#f6f8fa; --bg-side:#fbfcfd; --text:#1f2933; --muted:#64748b;
  --border:#e5e9ef; --code-bg:#f2f5f8; --accent:var(--orange);
  --p0:#C0392B; --p1:#D2601A; --p2:#5b7086;
  --sidebar-w:280px; --topbar-h:56px; --maxw:1280px;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0d1117; --bg-soft:#161b22; --bg-side:#0f141b; --text:#e6edf3; --muted:#8b949e;
    --border:#242c37; --code-bg:#161b22; --orange:#ff8c42; --accent:#ff8c42; --navy:#e6edf3; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;font-size:15px}

/* ---- Top bar ---- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:40;
  display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--bg);
  border-bottom:1px solid var(--border)}
.topbar .brand{display:flex;align-items:center;gap:4px;font-weight:800;color:var(--navy);font-size:16px}
@media (prefers-color-scheme:dark){.topbar .brand{color:#dfe7f2}}
.topbar .brand .q{color:var(--orange)}
.topbar .dot{width:10px;height:10px;border-radius:50%;background:var(--orange)}
.topbar .spacer{flex:1}
.topbar .meta{color:var(--muted);font-size:12.5px}
.topbar .search{position:relative}
.topbar .search input{width:220px;max-width:44vw;padding:7px 11px 7px 30px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg-soft);color:var(--text);font-size:13px;outline:none}
.topbar .search input:focus{border-color:var(--orange)}
.topbar .search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);opacity:.5}
.hamburger{display:none;background:none;border:1px solid var(--border);border-radius:8px;
  width:36px;height:34px;font-size:18px;cursor:pointer;color:var(--text)}

/* ---- Sidebar ---- */
.sidebar{position:fixed;top:var(--topbar-h);bottom:0;left:0;width:var(--sidebar-w);overflow-y:auto;
  background:var(--bg-side);border-right:1px solid var(--border);padding:18px 12px 60px;z-index:30}
.nav-group{margin-bottom:18px}
.nav-group .g-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:6px 12px;margin-bottom:2px}
.sidebar a{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:8px;color:var(--text);
  text-decoration:none;font-size:14px;font-weight:500}
.sidebar a .em{width:18px;text-align:center}
.sidebar a:hover{background:var(--bg-soft)}
.sidebar a.active{background:rgba(210,96,26,.12);color:var(--orange);font-weight:700}
.sidebar .sub{padding-left:18px}
.sidebar .sub a{font-size:13px;color:var(--muted);padding:5px 12px}
.sidebar .sub a:hover{color:var(--text)}
.sidebar .sub a.active{background:rgba(210,96,26,.12);color:var(--orange);font-weight:700}

/* contextual sub-navbar: only the active view's subnav is shown */
.subnav{display:none;margin:2px 0 12px;padding-left:10px;border-left:1px solid var(--border)}
.subnav.open{display:block}
.subnav a{display:block;padding:5px 12px;border-radius:8px;font-size:13px;color:var(--muted);font-weight:500;text-decoration:none}
.subnav a:hover{color:var(--text);background:var(--bg-soft)}
.subnav a.active{background:rgba(210,96,26,.12);color:var(--orange);font-weight:700}
.sub-label{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:10px 12px 3px}
.sub-label .badge{font-size:9.5px;padding:1px 6px;margin-right:5px}
/* section headers + per-view descriptors */
.sidebar .g-title{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 12px;margin-bottom:2px}
.sidebar .g-title.sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.nav-top{align-items:flex-start;padding-top:8px;padding-bottom:8px}
.nav-top .em{margin-top:1px}
.nt-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.nt-title{font-weight:500;line-height:1.3}
.nt-desc{font-size:11px;color:var(--muted);line-height:1.3;font-weight:400}
.nav-top.active .nt-title{font-weight:700}
.nav-top.active .nt-desc{display:none}

/* ---- Content ---- */
.content{margin-left:var(--sidebar-w);padding:calc(var(--topbar-h) + 30px) 40px 100px;max-width:calc(var(--maxw) + var(--sidebar-w));}
.view{display:none;animation:fade .25s ease;scroll-margin-top:72px}
.step{scroll-margin-top:72px}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wrap{max-width:var(--maxw)}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:6px}
h1.page{font-size:30px;font-weight:800;color:var(--navy);margin:.1em 0 .1em}
@media (prefers-color-scheme:dark){h1.page{color:#dfe7f2}}
.lead{color:var(--muted);font-size:16px;margin:0 0 26px}
h2{font-size:21px;font-weight:750;color:var(--navy);margin:36px 0 12px;padding-top:6px;scroll-margin-top:70px}
@media (prefers-color-scheme:dark){h2{color:#cdd8e6}}
h3{font-size:16px;font-weight:700;margin:22px 0 8px}
p{margin:0 0 12px}
a{color:var(--orange)}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:4px 0}
code{background:var(--code-bg);padding:1.5px 6px;border-radius:5px;font-size:13px;
  font-family:"SF Mono",Menlo,Consolas,monospace}
hr{border:none;border-top:1px solid var(--border);margin:34px 0}

/* ---- Badges ---- */
.badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;color:#fff;vertical-align:middle}
.p0{background:var(--p0)} .p1{background:var(--p1)} .p2{background:var(--p2)}
.badge.crit{background:var(--red)} .badge.maj{background:var(--orange)} .badge.min{background:var(--p2)}
/* test-case journey flow */
.jflow{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:14px 0 24px}
.jcard{flex:1 1 195px;min-width:185px;border:1px solid var(--border);border-top:3px solid var(--red);border-radius:10px;padding:12px 14px;background:var(--bg);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.jcard.maj{border-top-color:var(--orange)}
.jcard .jn{align-self:flex-start;font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:12px;padding:1px 9px;margin-bottom:3px}
.jcard.maj .jn{background:var(--orange)}
.jcard b{font-size:14px;color:var(--text)}
.jcard small{color:var(--muted);font-size:12px;line-height:1.35}
.jcard .jok{color:var(--green);font-size:12.5px;font-weight:600;margin-top:5px}
.jarrow{display:flex;align-items:center;color:var(--muted);font-weight:800;font-size:20px;padding:0 6px}
@media(max-width:760px){.jarrow{transform:rotate(90deg);width:100%;justify-content:center;padding:4px 0}}
/* Major mini user-journeys (compact rows) */
.mjlist{display:flex;flex-direction:column;gap:8px;margin:14px 0 22px}
.mjrow{border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:8px;padding:9px 13px;background:var(--bg);box-shadow:var(--shadow)}
.mjrow .mjn{font-size:11px;font-weight:800;color:#fff;background:var(--orange);border-radius:12px;padding:1px 8px;margin-right:8px;vertical-align:middle}
.mjrow .mjt{font-weight:700}
.mjrow .mjflow{font-size:13.5px;color:var(--text)}
.mjrow .mjflow .a{color:var(--orange);font-weight:800;margin:0 5px}
.mjrow .jok{color:var(--green);font-size:12.5px;font-weight:700;margin-left:6px}
.mjrow .mjmeta{display:block;margin-top:3px}
/* journey-as-flow (grouped by priority) */
.jour{border:1px solid var(--border);border-left:3px solid var(--border);border-radius:10px;padding:14px 16px;margin:12px 0;background:var(--bg);box-shadow:var(--shadow)}
.jour.crit{border-left-color:var(--red)} .jour.maj{border-left-color:var(--orange)} .jour.min{border-left-color:var(--p2)}
.jourhead{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.jourhead .jtitle{font-weight:750;font-size:15.5px;color:var(--navy)}
@media (prefers-color-scheme:dark){.jourhead .jtitle{color:#cdd8e6}}
.fflow{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.fnode{border:1px solid var(--border);border-radius:8px;padding:7px 11px;background:var(--bg-soft);font-size:13px;margin:3px 0;line-height:1.3}
.fnode.win{border-color:var(--green);background:rgba(30,122,61,.10);font-weight:700}
.farrow{color:var(--muted);font-weight:800;padding:0 7px}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:6px;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);margin:2px 4px 2px 0}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.pill.ok{background:rgba(30,122,61,.13);color:var(--green)}
.pill.warn{background:rgba(210,96,26,.14);color:var(--orange)}
.pill.gate{background:rgba(91,112,134,.16);color:var(--p2)}
/* improve cross-link chip → points to Cải tiến (Gap→Journey) */
.imp{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:rgba(30,122,61,.14);color:var(--green);text-decoration:none;margin-left:6px;white-space:nowrap}
.imp:hover{background:rgba(30,122,61,.24)}

/* ---- Cards / steps ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0 22px}
.card{border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--bg);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:15px}
.card .c-meta{font-size:12.5px;color:var(--muted)}
.card.link{cursor:pointer;transition:.15s}
.card.link:hover{border-color:var(--orange);transform:translateY(-2px)}

.step{border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:10px;
  padding:16px 18px;margin:16px 0;background:var(--bg);box-shadow:var(--shadow)}
.step .s-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step .s-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.step .s-title{font-weight:750;font-size:16px;color:var(--navy)}
@media (prefers-color-scheme:dark){.step .s-title{color:#cdd8e6}}
.kv{font-size:13.5px;margin:6px 0}
.kv b{color:var(--text)}

/* branch callout */
.callout{border:1px solid var(--orange);background:rgba(210,96,26,.06);border-radius:10px;
  padding:12px 15px;margin:14px 0}
.callout .c-t{font-weight:750;color:var(--orange);margin-bottom:5px;font-size:14px}
.callout ul{margin:0;padding-left:20px}
.note{border:1px solid var(--border);background:var(--bg-soft);border-radius:10px;padding:12px 15px;margin:14px 0}
.note.warn{border-color:var(--orange)}
.note .n-t{font-weight:750;margin-bottom:4px}

/* screenshots */
figure{margin:14px 0 6px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-soft)}
figure img{display:block;width:100%;height:auto}
figcaption{font-size:12.5px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--border);font-style:italic}
.shot-sm{max-width:420px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* tables */
table{border-collapse:collapse;width:100%;margin:12px 0 20px;font-size:14px}
th,td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--bg-soft);font-weight:700;color:var(--navy)}
@media (prefers-color-scheme:dark){th{color:#cdd8e6}}
tbody tr:nth-child(even){background:var(--bg-soft)}
.tbl-scroll{overflow-x:auto}

/* tree */
.tree{list-style:none;padding-left:6px;margin:10px 0}
.tree ul{list-style:none;padding-left:22px;border-left:1px dashed var(--border);margin:4px 0}
.tree li{margin:5px 0;position:relative}
.tree .node{font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:8px}
@media (prefers-color-scheme:dark){.tree .node{color:#cdd8e6}}
.tree .leaf a{color:var(--text);text-decoration:none}
.tree .leaf a:hover{color:var(--orange)}
.tree .desc{color:var(--muted);font-size:12.5px;margin-left:6px}

/* flow chips */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 22px}
.flow .chip{background:var(--navy);color:#fff;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600}
.flow .chip.end{background:var(--green)}
.flow .arw{color:var(--muted);font-weight:800}

footer.docfoot{margin-left:var(--sidebar-w);padding:20px 40px 40px;border-top:1px solid var(--border);
  color:var(--muted);font-size:12.5px}

/* mobile */
.scrim{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.4);z-index:25}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:82vw;max-width:320px}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .content,footer.docfoot{margin-left:0}
  .content{padding-left:20px;padding-right:20px}
  .hamburger{display:block}
  .topbar .meta{display:none}
}

/* per-journey isolation: index (priority table) vs single-journey detail */
.j-detail{display:none}
.view.show-detail .j-index{display:none}
.view.show-detail .j-detail{display:block}
.view.show-detail .jour{display:none;margin:0}
.view.show-detail .jour.active{display:block}
.j-back{display:inline-block;margin:2px 0 16px;font-size:13.5px;font-weight:650;color:var(--accent);text-decoration:none}
.j-back:hover{text-decoration:underline}

/* journey step table: whole step text is the clickable link */
table.steps td:last-child a{color:inherit;text-decoration:none;font-weight:600;display:block}
table.steps tbody tr{cursor:pointer}
table.steps tbody tr:hover{background:var(--hover,rgba(127,127,127,.08))}
table.steps tbody tr:hover td:last-child a{color:var(--accent);text-decoration:underline}

/* journey WIN success block */
.win{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 14px;
  border:1px solid var(--green);border-left:3px solid var(--green);border-radius:9px;
  background:color-mix(in srgb, var(--green) 9%, transparent);font-size:14px;line-height:1.5}
.win .wtick{flex:0 0 auto;font-size:15px;line-height:1.4}
.win b{color:var(--green)}

/* Overview submenu: role headers (clickable) + indented journeys */
.subnav.roles a.sub-role{margin-top:9px;font-weight:750;color:var(--navy);border-top:1px solid var(--border);padding-top:11px}
.subnav.roles a.sub-role:first-child{margin-top:2px;border-top:0;padding-top:6px}
.subnav.roles a:not(.sub-role){padding-left:26px;font-size:13px}
@media (prefers-color-scheme:dark){.subnav.roles a.sub-role{color:#cdd8e6}}

  border-radius:999px;background:var(--bg);color:var(--navy);font-size:13px;font-weight:600;text-decoration:none;
  transition:border-color .12s,color .12s,background .12s}
.quicknav .qn-row a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
@media (prefers-color-scheme:dark){.quicknav .qn-row a{color:#cdd8e6}}

/* steps table now 3-col: link lives in .wf (Workflow), purpose muted */
table.steps td.wf a{color:inherit;text-decoration:none;font-weight:600;display:block}
table.steps tbody tr:hover td.wf a{color:var(--accent);text-decoration:underline}
table.steps td:last-child{color:var(--muted);font-size:13.5px}

/* real admin snapshots gallery */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:14px 0 4px}
.shots figure{margin:0}
.shots img{width:100%;border:1px solid var(--border);border-radius:10px;display:block;background:var(--bg)}
.shots figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}

/* per-row admin snapshot thumbnails + lightbox */
.opstbl td.snapcell{padding:6px 10px}
.snapcell a.snap{display:inline-block;line-height:0}
.snapcell img{width:130px;height:74px;object-fit:cover;object-position:top left;border:1px solid var(--border);border-radius:6px;cursor:zoom-in;transition:border-color .12s}
.snapcell a.snap:hover img{border-color:var(--accent)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:120;padding:28px}
.lb.open{display:flex}
.lb img{max-width:96%;max-height:92%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:14px;right:22px;color:#fff;font-size:30px;line-height:1;cursor:pointer;font-weight:400}

/* admin table: Workflow name is clickable → opens its snapshot (lightbox) */
.opstbl td a.snap{cursor:zoom-in}
.opstbl td a.snap b{color:var(--navy);transition:color .12s}
.opstbl td a.snap:hover b{color:var(--accent);text-decoration:underline}
@media (prefers-color-scheme:dark){.opstbl td a.snap b{color:#cdd8e6}}


/* next-flow navigation: quick actions + prev/next */
.flownav{margin-top:34px;padding-top:20px;border-top:1px solid var(--border)}
.fn-quick{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:16px}
.fn-qt{font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.fn-quick a,.fn-quick .fn-top{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--navy);font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
.fn-quick a:hover,.fn-quick .fn-top:hover{border-color:var(--accent);color:var(--accent)}
.fn-row{display:flex;gap:12px}
.fn-row a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--border);border-radius:12px;text-decoration:none;background:var(--bg);transition:border-color .12s,background .12s}
.fn-row a.fn-next{text-align:right;align-items:flex-end}
.fn-row a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fn-dir{font-size:12px;font-weight:650;color:var(--muted)}
.fn-lbl{font-size:15px;font-weight:750;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fn-gap{flex:1 1 0}
@media (prefers-color-scheme:dark){.fn-lbl{color:#cdd8e6}.fn-quick a,.fn-quick .fn-top{color:#cdd8e6}}
@media(max-width:640px){.fn-row a{max-width:none;flex:1}}

/* GitBook-style "On this page" right rail (auto TOC + scrollspy) */
#onthispage{position:fixed;top:calc(var(--topbar-h) + 34px);right:26px;width:212px;max-height:72vh;overflow:auto;z-index:15}
#onthispage .otp-t{font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#onthispage a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--border);color:var(--muted);text-decoration:none;font-size:13px;line-height:1.35}
#onthispage a.h3{padding-left:24px;font-size:12.5px}
#onthispage a:hover{color:var(--navy)}
#onthispage a.active{color:var(--accent);border-left-color:var(--accent);font-weight:650}
@media (prefers-color-scheme:dark){#onthispage a:hover{color:#cdd8e6}}
@media (max-width:1280px){#onthispage{display:none!important}}
@media (min-width:1281px){.content{padding-right:250px}}

/* GitBook-style landing: Start here list */
.starthere{margin:8px 0 4px;padding-left:20px}
.starthere li{margin:8px 0;line-height:1.55}

/* GitBook detail template: page subtitle, activity ID badge, meta line */
.page-sub{color:var(--muted);margin:-6px 0 18px;font-size:14px}
.page-sub .pill{margin-left:2px}
.idb{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(127,127,127,.14);padding:2px 8px;border-radius:6px;font-size:.82em;margin-right:9px;color:var(--navy);vertical-align:middle}
@media (prefers-color-scheme:dark){.idb{color:#cdd8e6}}
.meta-line{color:var(--muted);font-size:13.5px;margin-top:6px}

/* journey card head promoted to <h3> for On-this-page — keep prior look */
h3.jourhead{font-size:inherit;font-weight:inherit;margin:2px 0 11px}

/* Fintalent-logic stage template */
.front-block{border:1px solid var(--border);border-radius:12px;padding:13px 18px;margin:2px 0 26px;display:grid;grid-template-columns:150px 1fr;gap:7px 18px;font-size:13.5px}
.front-block dt{color:var(--muted);font-weight:650}
.front-block dd{margin:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(127,127,127,.14);padding:1px 7px;border-radius:5px;font-size:.9em}
.st{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:2px 8px;border-radius:5px;border:1px solid var(--border);color:var(--muted)}
.st.approved{color:var(--green);border-color:var(--green)}
.autotarget{margin-top:6px;font-size:13.5px;color:var(--fg)}
.autotarget b{color:var(--accent)}

/* gọn navbar (Fintalent-style single-line) */
.side-home{display:block;padding:14px 16px 8px;font-weight:750;font-size:14px;color:var(--navy);text-decoration:none}
@media (prefers-color-scheme:dark){.side-home{color:#e6edf5}}
.nav-top{display:block;padding:6px 16px;color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.5;border-left:2px solid transparent}
.nav-top:hover{color:var(--navy)}
.nav-top.active{color:var(--accent);border-left-color:var(--accent);font-weight:650;background:transparent}
@media (prefers-color-scheme:dark){.nav-top:hover{color:#cdd8e6}}
.nav-top .em,.nav-top .nt-desc{display:none}



/* ===================== Navbar (neutral premium + collapsible) ===================== */
.sidebar{padding:12px 8px 34px;border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:3px solid var(--bg);background-clip:padding-box}

/* group headers (clickable to collapse) */
.sidebar .g-title{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.66;
  padding:7px 12px 5px;margin:3px 0 0;border:0;display:flex;align-items:center;justify-content:space-between;user-select:none}
.sidebar .g-title.sec{margin-top:6px}
.sidebar .g-title.g-toggle{cursor:pointer;transition:opacity .12s,color .12s}
.sidebar .g-title.g-toggle:hover{opacity:1;color:var(--navy)}
.sidebar .g-title.g-toggle::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-right:3px;opacity:.6;transition:transform .16s ease}
.sidebar .g-title.g-toggle.collapsed::after{transform:rotate(-45deg)}
.nav-group-body{overflow:hidden}
.nav-group-body.collapsed{display:none}

/* nav items — neutral, no orange; active = soft elevated + bright text + thin bar */
.sidebar a.nav-top{position:relative;display:block;margin:1px 6px;padding:6px 12px;border:0;border-radius:7px;
  color:var(--muted);text-decoration:none;font-size:13px;line-height:1.5;font-weight:500;letter-spacing:-.005em;
  transition:background .12s ease,color .12s ease}
.sidebar a.nav-top:hover{background:color-mix(in srgb,var(--muted) 9%,transparent);color:var(--text)}
.sidebar a.nav-top.active{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:650}
.sidebar a.nav-top.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2.5px;border-radius:0 3px 3px 0;
  background:var(--accent);opacity:1}

/* nav icons */
.sidebar a.nav-top{display:flex;align-items:center;gap:9px}
.nav-ico{flex:0 0 auto;width:17px;text-align:center;font-size:13px;line-height:1;opacity:.92}

/* ============ Polish pass (đẹp hơn) ============ */
/* Tree: connector rails + refined nodes */
.tree ul{margin-left:11px;padding-left:18px;border-left:1px solid var(--border);list-style:none}
.tree li{position:relative}
.tree ul>li::before{content:"";position:absolute;left:-18px;top:13px;width:13px;height:1px;background:var(--border)}
.tree .node{font-weight:650;color:var(--text)}
.tree .desc{color:var(--muted);font-size:12.5px}
.tree .leaf a,.tree .node a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent;transition:color .12s,border-color .12s}
.tree .leaf a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Tables: rounded frame, quiet header, row hover */
.tbl-scroll{border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.tbl-scroll table{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl-scroll thead th{background:var(--bg-soft);color:var(--muted);font-weight:650;text-align:left;
  padding:11px 15px;border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.01em}
.tbl-scroll tbody td{padding:12px 15px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.5}
.tbl-scroll tbody tr:last-child td{border-bottom:0}
.tbl-scroll tbody tr{transition:background .1s}
.tbl-scroll tbody tr:hover{background:color-mix(in srgb,var(--muted) 7%,transparent)}
.tbl-scroll table.steps tbody tr,.opstbl tbody tr{cursor:default}

/* Front block + callout: softer, rounded, subtle */
.front-block{background:var(--bg-soft);box-shadow:var(--shadow)}
.callout{border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);box-shadow:var(--shadow)}
.callout .c-t{color:var(--accent)}

/* h2 with a subtle top rule for rhythm */
.wrap h2{position:relative;padding-top:14px;margin-top:34px}
.wrap h2::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;border-radius:2px;background:var(--accent);opacity:.55}
.wrap>h1.page+*{margin-top:14px}

/* ── Feature deep-dive block (Fintalent feature template, inline) ── */
.dd-h{display:flex;align-items:center;gap:9px;margin:30px 0 12px;font-size:19px;font-weight:750}
.dd-h .idb{margin-right:0}
.deepdive{grid-template-columns:172px 1fr}
.deepdive dt{color:var(--accent);font-weight:700}
.deepdive dd{margin:0 0 2px}
.deepdive dd ul,.deepdive dd ol{margin:3px 0;padding-left:18px}
.deepdive dd li{margin:3px 0}
.deepdive dd a{color:var(--accent)}
.tbd{color:var(--muted);font-style:italic}
.sev{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;background:rgba(200,40,40,.14);color:#e5534b}
@media (max-width:640px){.deepdive{grid-template-columns:1fr}.deepdive dt{margin-top:8px}}