/* ============================================================
   OneHub User Guide — shell styles
   Design tokens verified 2026-08-06 by reading live CSS of
   https://agent.onehub.vn (@repo/ui). Do not guess values here.
   ============================================================ */
:root{
  /* semantic tokens (nguyên văn từ app) */
  --background:0 0% 100%;
  --background-pg:0 0% 96%;
  --foreground:0 0% 0%;
  --card:0 0% 100%;
  --primary:223 93% 50%;
  --primary-foreground:0 0% 100%;
  --secondary:0 0% 100%;
  --secondary-foreground:223 93% 50%;
  --muted:0 0% 96%;
  --muted-foreground:0 0% 44%;
  --accent:225 100% 97%;
  --accent-foreground:0 0% 0%;
  --destructive:4 79% 52%;
  --success:144 84% 43%;
  --warning:27 89% 52%;
  --border:0 0% 87%;
  --input:0 0% 87%;
  --radius:.5rem;
  --sidebar-background:0 0% 100%;
  --sidebar-background-blue:228 45% 98%;

  /* palette tĩnh */
  --blue-100:225 100% 97%;
  --blue-200:224 100% 92%;
  --blue-600:223 93% 35%;
  --green-100:143 69% 95%;
  --green-600:144 80% 36%;
  --orange-100:29 100% 95%;
  --orange-600:29 97% 40%;

  /* type scale (compact) — verified from live app custom properties */
  --fs-xs:10px;  --lh-xs:14px;
  --fs-sm:12px;  --lh-sm:16px;
  --fs-base:14px;--lh-base:20px;
  --fs-lg:16px;  --lh-lg:24px;
  --fs-xl:18px;  --lh-xl:28px;
  --fs-2xl:20px; --lh-2xl:28px;
  --fs-3xl:24px; --lh-3xl:32px;
  --fs-4xl:32px; --lh-4xl:40px;

  --shadow-8:0 8px 24px -4px #0017571a;
  --shadow-24:0 24px 28px -8px #0017571a;

  --topbar-h:60px;
  --sidebar-w:288px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:hsl(var(--background-pg));
  color:hsl(var(--foreground));
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-base); line-height:var(--lh-base); letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:hsl(var(--primary)); text-decoration:none}
a:hover{text-decoration:underline}
*:focus-visible{outline:2px solid hsl(var(--primary)); outline-offset:2px}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  background:hsl(var(--background)); border-bottom:1px solid hsl(var(--border));
  display:flex; align-items:center; gap:20px; padding:0 20px;
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; text-decoration:none; color:inherit}
.brand:hover{text-decoration:none}
.brand svg{width:28px; height:28px; display:block}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-size:var(--fs-base); font-weight:600; letter-spacing:-.01em}
.brand-txt span{font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); margin-top:2px}

.aud-tabs{display:flex; gap:4px; margin-left:8px}
.aud-tabs a{
  display:flex; align-items:center; height:34px; padding:0 12px; border-radius:var(--radius);
  font-size:var(--fs-base); font-weight:500; color:hsl(var(--muted-foreground));
  transition:color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1);
}
.aud-tabs a:hover{background:hsl(var(--muted)); color:hsl(var(--foreground)); text-decoration:none}
.aud-tabs a[aria-current="page"]{background:hsl(var(--accent)); color:hsl(var(--primary)); font-weight:600}

.search-trigger{
  margin-left:auto; display:flex; align-items:center; gap:8px; height:40px; min-width:260px;
  padding:0 12px; border:1px solid hsl(var(--input)); border-radius:var(--radius);
  background:hsl(var(--background)); color:hsl(var(--muted-foreground));
  font-family:inherit; font-size:var(--fs-base); cursor:pointer; text-align:left;
  transition:border-color .15s cubic-bezier(.4,0,.2,1);
}
.search-trigger:hover{border-color:hsl(var(--primary))}
.search-trigger .st-label{flex:1}
.kbd{
  display:inline-flex; align-items:center; gap:1px; padding:2px 6px; border-radius:calc(var(--radius) - 4px);
  border:1px solid hsl(var(--border)); background:hsl(var(--muted));
  font-size:var(--fs-xs); font-weight:500; color:hsl(var(--muted-foreground)); font-family:inherit;
}
.icon{width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- SHELL ---------- */
.shell{display:flex; max-width:1720px; margin:0 auto; align-items:flex-start; position:relative}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:sticky; top:var(--topbar-h); flex:0 0 var(--sidebar-w); width:var(--sidebar-w); min-width:0;
  height:calc(100vh - var(--topbar-h)); overflow-y:auto; overflow-x:hidden;
  background:hsl(var(--sidebar-background)); border-right:1px solid hsl(var(--border));
  padding:20px 12px 40px;
  transition:width .18s cubic-bezier(.4,0,.2,1), padding .18s cubic-bezier(.4,0,.2,1);
}
.sidebar.is-collapsed{padding:0; border-right:none; overflow:hidden}
.sidebar-collapse-btn{
  display:none; position:fixed; top:calc(var(--topbar-h) + 16px);
  /* left được set bằng JS (xem _shell.js) — luôn nằm sát mép trái của main content,
     không canh giữa lên đường biên (để khi collapsed nút không bị cắt ra ngoài khung nhìn). */
  left:296px;
  width:28px; height:28px; z-index:45;
  border-radius:9999px; border:1px solid hsl(var(--border)); background:hsl(var(--card));
  box-shadow:var(--shadow-8); align-items:center; justify-content:center; cursor:pointer;
  color:hsl(var(--muted-foreground)); transition:left .18s cubic-bezier(.4,0,.2,1);
}
.sidebar-collapse-btn:hover{color:hsl(var(--primary)); border-color:hsl(var(--primary))}
.sidebar-collapse-btn svg{width:14px; height:14px}
@media (min-width:791px){ .sidebar-collapse-btn{display:flex} }
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:hsl(var(--border)); border-radius:9999px}
.nav-group{margin-bottom:20px}
.nav-group > .nav-label{
  font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:hsl(var(--muted-foreground)); padding:0 10px; margin-bottom:6px;
}
.nav-list{list-style:none; margin:0; padding:0}
.nav-list > li{margin-bottom:1px}
.nav-item{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:calc(var(--radius) - 2px);
  font-size:var(--fs-base); color:hsl(var(--foreground)); line-height:1.35;
  transition:background-color .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover{background:hsl(var(--sidebar-background-blue)); text-decoration:none}
.nav-item .nav-num{
  flex:0 0 auto; min-width:20px; text-align:center; font-size:var(--fs-sm); font-weight:600;
  color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums;
}
.nav-item.active{background:hsl(var(--accent)); color:hsl(var(--primary)); font-weight:600}
.nav-item.active .nav-num{color:hsl(var(--primary))}
/* sub level */
.nav-sub{list-style:none; margin:2px 0 6px; padding:0 0 0 10px; border-left:1px solid hsl(var(--border)); margin-left:18px; display:none}
li.expanded > .nav-sub{display:block}
.nav-sub a{
  display:block; padding:5px 10px; border-radius:calc(var(--radius) - 2px);
  font-size:var(--fs-base); color:hsl(var(--muted-foreground)); line-height:1.35;
}
.nav-sub a:hover{background:hsl(var(--sidebar-background-blue)); color:hsl(var(--foreground)); text-decoration:none}
.nav-sub a.active{color:hsl(var(--primary)); font-weight:500; background:hsl(var(--accent))}

/* ---------- MAIN ---------- */
.main{flex:1; min-width:0; padding:24px 28px 80px}

.page-head{margin-bottom:20px}
.page-head .eyebrow{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:9999px;
  background:hsl(var(--accent)); color:hsl(var(--primary));
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em; margin-bottom:10px;
}
.page-head h1{margin:0 0 8px; font-size:var(--fs-4xl); line-height:var(--lh-4xl); font-weight:600; letter-spacing:-.02em}
.page-head p{margin:0; color:hsl(var(--muted-foreground)); font-size:var(--fs-lg); line-height:var(--lh-lg); max-width:820px}

/* card = PageContent (page-v2): "space-y-4 rounded-lg bg-card p-4 md:p-6" — KHÔNG border */
.card{
  background:hsl(var(--card)); border-radius:var(--radius);
  padding:16px; margin-bottom:16px;
}
@media (min-width:790px){ .card{padding:24px} }
.card.tip{background:hsl(var(--accent)); border:1px solid hsl(var(--blue-200))}
.card.tip h3{margin:0 0 8px; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:600}
.card.tip p{margin:0 0 8px; font-size:var(--fs-base)}
.card.tip p:last-child{margin:0}

.doc-section{scroll-margin-top:calc(var(--topbar-h) + 16px); margin-bottom:16px}
.sec-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:18px}
.sec-num{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px;
  border-radius:var(--radius); background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  font-size:var(--fs-base); font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.sec-head h2{
  margin:0; font-size:var(--fs-3xl); line-height:var(--lh-3xl); font-weight:600; letter-spacing:-.02em;
}
.sec-head .sec-sub{margin:4px 0 0; color:hsl(var(--muted-foreground)); font-size:var(--fs-base)}

/* nhóm con trong một section (vd: IV.A Giỏ hàng · IV.B Niêm yết) */
.grp-head{
  display:flex; align-items:center; gap:10px; margin:30px 0 0;
  padding-top:22px; border-top:1px solid hsl(var(--border));
  font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:600; letter-spacing:-.01em;
}
.grp-head:first-of-type{margin-top:22px}
.grp-tag{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px;
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  font-size:var(--fs-sm); font-weight:700; letter-spacing:0;
}
.grp-sub{margin:8px 0 0; color:hsl(var(--muted-foreground)); font-size:var(--fs-base)}

/* ảnh chụp màn app: khung dọc, hãm bề ngang để không cao lênh khênh */
.shot-phone{max-width:300px; margin-inline:auto}

/* value / why-block */
.why{
  display:flex; gap:14px; padding:16px 18px; margin-bottom:22px;
  background:hsl(var(--accent)); border:1px solid hsl(var(--blue-200)); border-radius:var(--radius);
}
.why .why-ico{
  flex:0 0 auto; width:32px; height:32px; border-radius:9999px; background:hsl(var(--primary));
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.why .why-ico svg{width:18px; height:18px}
.why-body{flex:1; min-width:0}
.why-label{
  font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:hsl(var(--blue-600)); margin-bottom:6px;
}
.why-problem{margin:0 0 8px; color:hsl(var(--muted-foreground)); font-size:var(--fs-base)}
.why-value{margin:0; font-size:var(--fs-base); font-weight:500}
.why-value b{color:hsl(var(--primary)); font-weight:600}

/* ============================================================
   Guide hero — khung "slide hướng dẫn" theo template Figma
   (OneHub Guideline, file Design, Slide-6 pattern):
   badge thương hiệu + tiêu đề + step timeline bên trái,
   mockup điện thoại trên nền gradient bên phải.
   ============================================================ */
.guide-hero{
  display:grid; grid-template-columns:1fr 1.2fr; min-height:460px;
  border-radius:var(--radius); overflow:hidden; margin:20px 0 8px;
  box-shadow:var(--shadow-8); background:hsl(var(--card));
}
.guide-hero-left{padding:36px 34px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.guide-hero-badge{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start; height:30px; padding:0 14px 0 8px;
  border-radius:9999px; background:hsl(var(--primary)); color:#fff; font-size:var(--fs-sm); font-weight:600;
  margin-bottom:18px;
}
.guide-hero-badge svg{width:16px; height:16px}
.guide-hero-title{
  font-size:var(--fs-3xl); line-height:var(--lh-3xl); font-weight:800; letter-spacing:-.02em;
  margin:0 0 14px; color:hsl(var(--foreground));
}
.guide-hero-label{
  font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:hsl(var(--blue-600)); margin:0 0 6px;
}
.guide-hero-desc{
  font-size:var(--fs-base); line-height:var(--lh-base); color:hsl(var(--muted-foreground)); margin:0 0 22px;
}
.guide-hero-outcome{
  margin:18px 0 0; padding:14px 16px; border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--accent));
}
.guide-hero-outcome p{margin:0; font-size:var(--fs-sm); line-height:var(--lh-sm); color:hsl(var(--foreground))}
.guide-hero-outcome a{color:hsl(var(--primary)); font-weight:600; text-decoration:none}
.guide-hero-outcome a:hover{text-decoration:underline}
.guide-hero-steps{display:flex; flex-direction:column}
.guide-hero-step{display:flex; gap:14px; position:relative; padding-bottom:22px}
.guide-hero-step:last-child{padding-bottom:0}
.guide-hero-step:not(:last-child)::before{
  content:''; position:absolute; left:15px; top:32px; bottom:2px; width:2px; background:hsl(var(--blue-200));
}
.guide-hero-step .ghs-num{
  flex:0 0 32px; width:32px; height:32px; border-radius:9999px; background:hsl(var(--primary)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-base);
  position:relative; z-index:1;
}
.guide-hero-step .ghs-txt{padding-top:3px}
.guide-hero-step .ghs-txt h4{margin:0 0 4px; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:700; color:hsl(var(--blue-600))}
.guide-hero-step .ghs-txt p{margin:0; font-size:var(--fs-sm); line-height:var(--lh-sm); color:hsl(var(--muted-foreground))}
/* Ảnh nền THẬT xuất trực tiếp từ Figma (node "Group 5338158", file OneHub Guideline
   Design) — nửa trái pattern hexagon xám nhạt, nửa phải gradient xanh OneHub, logo
   hoa 6 cánh thật đã có sẵn trong ảnh (góc dưới phải). KHÔNG tự vẽ lại bằng CSS. */
.guide-hero-right{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:flex-end; padding:36px 48px 36px 0;
  background:url("images/guide-hero-bg.png") center/cover no-repeat #0246ff;
}
.guide-hero-shots{position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:center; gap:16px; min-width:0}
.guide-hero-phone{width:220px; min-width:0; flex:0 1 auto}
.guide-hero-shots:has(> :nth-child(2)) .guide-hero-phone{width:190px}
.guide-hero-shots:has(> :nth-child(3)) .guide-hero-phone{width:150px}
.guide-hero-phone .ghp-frame{
  width:100%; border-radius:22px; overflow:hidden; border:5px solid #0b1220;
  box-shadow:0 24px 48px -8px rgba(0,10,40,.45); background:#000; cursor:zoom-in;
  transition:opacity .15s cubic-bezier(.4,0,.2,1);
}
.guide-hero-phone:hover .ghp-frame{opacity:.93}
.guide-hero-phone img{display:block; width:100%; height:auto}
.guide-hero-phone figcaption{margin-top:10px; text-align:center; font-size:var(--fs-sm); color:#fff; opacity:.85}
@media (max-width:1180px){
  .guide-hero{grid-template-columns:1fr}
  .guide-hero-right{padding:32px 0 40px}
}
@media (max-width:790px){
  .guide-hero-left{padding:26px 20px}
  .guide-hero-title{font-size:var(--fs-2xl); line-height:var(--lh-2xl)}
  .guide-hero-shots{flex-direction:column; align-items:center}
  .guide-hero-shots .guide-hero-phone{width:220px !important}
}

/* split: text 1/3 · media 2/3
   Cả hai cột đều sticky: cột NGẮN hơn sẽ dính lại trong lúc cột dài cuộn qua,
   và tự nhả khi hết khối .split. Cột dài hơn thì sticky không có tác dụng (vô hại).
   `align-items:start` là bắt buộc — nếu để stretch, grid item cao bằng cả hàng
   nên sticky không còn quãng nào để chạy.
   Cột cao hơn viewport sẽ bị JS gắn .no-sticky để không khuất mất phần dưới. */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:32px; align-items:start; padding:22px 0}
.split + .split{border-top:1px solid hsl(var(--border))}
.split-text,
.split-media{position:sticky; top:calc(var(--topbar-h) + 20px)}
.split-media{display:flex; flex-direction:column; gap:14px}
.split-text.no-sticky,
.split-media.no-sticky{position:static}
.split-text > *:first-child{margin-top:0}

.feature{margin:0 0 22px; scroll-margin-top:calc(var(--topbar-h) + 16px)}
.feature:last-child{margin-bottom:0}
.feature h3{
  margin:0 0 10px; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:600;
  display:flex; align-items:center; gap:9px; letter-spacing:-.01em;
}
/* theo Badge variant "soft-*": bg-{color}-100 text-{color}-600 */
.num-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 7px; border-radius:9999px;
  background:hsl(var(--blue-100)); color:hsl(var(--blue-600));
  font-size:var(--fs-sm); font-weight:600; letter-spacing:0;
}
.feature p{margin:0 0 8px; font-size:var(--fs-base)}
.feature ol,.feature ul{margin:8px 0; padding-left:20px}
.feature li{margin:5px 0; font-size:var(--fs-base)}
.feature li::marker{color:hsl(var(--muted-foreground))}

.note{
  font-size:var(--fs-base); background:hsl(var(--muted)); border-left:3px solid hsl(var(--primary));
  padding:10px 14px; border-radius:calc(var(--radius) - 4px); margin:12px 0;
}
.note.warn{background:hsl(var(--orange-100)); border-left-color:hsl(var(--warning))}

.variant{
  display:inline-block; padding:1px 8px; margin-right:4px; border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--background)); border:1px solid hsl(var(--border));
  font-size:var(--fs-sm); font-weight:600; color:hsl(var(--primary));
}

.subhead{
  font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:700; letter-spacing:-.01em;
  margin:28px 0 4px; padding-top:20px; border-top:1px solid hsl(var(--border));
}
.split .subhead:first-child,
.split-text .subhead:first-child{margin-top:0; padding-top:0; border-top:none}
.subhead-note{color:hsl(var(--muted-foreground)); font-size:var(--fs-base); margin:0 0 4px}
.role-tag{
  display:inline-block; padding:1px 8px; border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--blue-100)); color:hsl(var(--blue-600)); font-size:var(--fs-sm); font-weight:600;
}
.stat-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 20px}
.stat{background:hsl(var(--accent)); border-radius:var(--radius); padding:12px 14px}
.stat b{display:block; font-size:var(--fs-2xl); line-height:var(--lh-2xl); font-weight:600; color:hsl(var(--primary))}
.stat span{font-size:var(--fs-sm); color:hsl(var(--muted-foreground))}

/* screenshots */
/* theo pattern app: div.border.border-border.rounded-lg.overflow-hidden */
figure.shot{
  margin:0; border:1px solid hsl(var(--border)); border-radius:var(--radius); overflow:hidden;
  background:hsl(var(--card));
}
figure.shot img{display:block; width:100%; height:auto; cursor:zoom-in; transition:opacity .15s cubic-bezier(.4,0,.2,1)}
figure.shot:hover img{opacity:.93}
figure.shot figcaption{
  padding:9px 14px; font-size:var(--fs-sm); color:hsl(var(--muted-foreground));
  border-top:1px solid hsl(var(--border)); background:hsl(var(--muted));
}
.shot-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}

/* tables */
table.tbl{width:100%; border-collapse:collapse; font-size:var(--fs-base); margin:12px 0}
table.tbl th,table.tbl td{border:1px solid hsl(var(--border)); padding:10px 14px; text-align:left; vertical-align:top}
table.tbl th{
  background:hsl(var(--muted)); font-size:var(--fs-sm); font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:hsl(var(--muted-foreground));
}
table.tbl td ul{margin:0; padding-left:18px}
table.tbl td.na{color:hsl(var(--muted-foreground)); font-style:italic}
.tbl-scroll{overflow-x:auto}

/* use case */
.usecase{margin-bottom:14px}
.usecase h3{margin:0 0 6px; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:600; display:flex; align-items:center; gap:9px}
.usecase .goal{
  margin:0 0 14px 33px; padding:8px 12px; border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); font-size:var(--fs-base); font-style:italic;
}
.chain{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-base)}
.chain .step{
  background:hsl(var(--background)); border:1px solid hsl(var(--border)); border-radius:9999px;
  padding:6px 13px; white-space:nowrap;
}
.chain .step.ops{border-style:dashed; color:hsl(var(--muted-foreground)); background:hsl(var(--muted))}
.chain .arrow{color:hsl(var(--muted-foreground))}
.cross-link{font-size:var(--fs-base); margin:12px 0 0; color:hsl(var(--muted-foreground))}

/* pager + footer */
.pager{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px}
.pager a{
  display:block; padding:16px 20px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  background:hsl(var(--card)); transition:border-color .15s cubic-bezier(.4,0,.2,1);
}
.pager a:hover{border-color:hsl(var(--primary)); text-decoration:none}
.pager .dir{display:block; font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); margin-bottom:3px}
.pager .ttl{display:block; font-size:var(--fs-base); font-weight:600; color:hsl(var(--foreground))}
.pager a.next{text-align:right}
.doc-footer{margin-top:24px; padding-top:18px; border-top:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); font-size:var(--fs-sm)}

/* ---------- SEARCH MODAL ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.45);
  display:none; align-items:flex-start; justify-content:center; padding:80px 20px 20px;
}
.overlay.open{display:flex}
.search-panel{
  width:100%; max-width:640px; background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); box-shadow:var(--shadow-24); overflow:hidden; display:flex; flex-direction:column;
  max-height:70vh;
}
.search-head{display:flex; align-items:center; gap:10px; padding:0 16px; height:52px; border-bottom:1px solid hsl(var(--border))}
.search-head .icon{width:18px; height:18px; color:hsl(var(--muted-foreground))}
#searchInput{
  flex:1; border:0; outline:0; font-family:inherit; font-size:var(--fs-lg); line-height:var(--lh-lg);
  letter-spacing:-.01em; color:hsl(var(--foreground)); background:transparent; min-width:0;
}
#searchInput::placeholder{color:hsl(var(--muted-foreground))}
.search-results{overflow-y:auto; padding:8px; flex:1}
.sr-group{
  font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:hsl(var(--muted-foreground)); padding:10px 10px 5px;
}
.sr-item{
  display:block; padding:9px 12px; border-radius:calc(var(--radius) - 2px); cursor:pointer;
  border:1px solid transparent;
}
.sr-item:hover,.sr-item.sel{background:hsl(var(--accent)); text-decoration:none}
.sr-item.sel{border-color:hsl(var(--blue-200))}
.sr-title{display:block; font-size:var(--fs-base); font-weight:500; color:hsl(var(--foreground))}
.sr-snip{
  display:block; font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-item mark{background:hsl(var(--blue-200)); color:inherit; border-radius:2px; padding:0 1px}
.sr-empty{padding:28px 16px; text-align:center; color:hsl(var(--muted-foreground)); font-size:var(--fs-base)}
.search-foot{
  display:flex; gap:16px; align-items:center; padding:9px 16px; border-top:1px solid hsl(var(--border));
  background:hsl(var(--muted)); font-size:var(--fs-sm); color:hsl(var(--muted-foreground));
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center; padding:64px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw; max-height:82vh; border-radius:var(--radius); box-shadow:var(--shadow-24)}
.lb-btn{
  position:fixed; width:44px; height:44px; border-radius:9999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; font-family:inherit; transition:background-color .15s cubic-bezier(.4,0,.2,1);
}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-close{top:22px; right:22px}
.lb-prev{left:22px; top:50%; transform:translateY(-50%)}
.lb-next{right:22px; top:50%; transform:translateY(-50%)}
.lb-cap{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); color:#fff; opacity:.85; font-size:var(--fs-base); max-width:80vw; text-align:center}
.lb-count{position:fixed; top:26px; left:50%; transform:translateX(-50%); color:#fff; opacity:.6; font-size:var(--fs-sm)}

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid hsl(var(--border)); border-radius:var(--radius); background:hsl(var(--background));
  cursor:pointer; color:hsl(var(--foreground));
}

/* ---------- RESPONSIVE (breakpoints: md 790 · lg 1280 · xl 1440) ---------- */
@media (max-width:1280px){
  .split{grid-template-columns:1fr; gap:20px}
  .split-text,
  .split-media{position:static}
  .stat-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:790px){
  .nav-toggle{display:flex}
  .aud-tabs{display:none}
  .search-trigger{min-width:0; width:40px; padding:0; justify-content:center}
  .search-trigger .st-label,.search-trigger .kbd{display:none}
  .sidebar{
    position:fixed; top:var(--topbar-h); left:0; z-index:40; width:min(320px,86vw); flex-basis:auto;
    transform:translateX(-100%); transition:transform .2s cubic-bezier(.16,1,.3,1); box-shadow:var(--shadow-24);
  }
  .sidebar.open{transform:none}
  .main{padding:18px 16px 70px}
  .card{padding:18px 16px}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot-grid{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .page-head h1{font-size:var(--fs-3xl); line-height:var(--lh-3xl)}
  .sec-head h2{font-size:var(--fs-2xl); line-height:var(--lh-2xl)}
  .lightbox{padding:20px}
  .lb-prev{left:10px} .lb-next{right:10px}
}

/* ============================================================
   Onboard-questionnaire (BO Admin) — mục "Bảng câu hỏi onboard
   sàn mới" trong guide-platform-ops.html. Namespace .oq- để
   không đụng .card/.q/.choices dùng nghĩa khác ở chỗ khác.
   ============================================================ */
.oq-layout{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; align-items:start}
.oq-panel{border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:20px}
.oq-group{margin-bottom:24px}
.oq-group:last-child{margin-bottom:0}
.oq-group-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid hsl(var(--border))}
.oq-group-num{flex:0 0 auto; width:22px; height:22px; border-radius:9999px; background:hsl(var(--blue-100)); color:hsl(var(--blue-600)); font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center}
.oq-group-head h4{margin:0; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:700}
.oq-group-note{margin:0 0 12px; font-size:var(--fs-sm); color:hsl(var(--muted-foreground))}
.oq-q{margin-bottom:14px}
.oq-q:last-child{margin-bottom:0}
.oq-label{display:block; font-weight:600; font-size:var(--fs-base); margin-bottom:6px}
.oq-hint{font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); margin:2px 0 8px}
.oq-q input[type="text"],.oq-q input[type="number"],.oq-q input[type="tel"],.oq-q input[type="email"]{
  width:100%; height:40px; padding:0 12px; border:1px solid hsl(var(--input)); border-radius:var(--radius);
  font-family:inherit; font-size:var(--fs-base); background:hsl(var(--card)); color:inherit;
}
.oq-q input[type="text"]:focus,.oq-q input[type="number"]:focus,.oq-q input[type="tel"]:focus,.oq-q input[type="email"]:focus{border-color:hsl(var(--primary))}
.oq-choices{display:flex; flex-wrap:wrap; gap:8px}
.oq-choice{
  display:flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  cursor:pointer; font-size:var(--fs-base); transition:border-color .15s, background-color .15s;
}
.oq-choice:hover{border-color:hsl(var(--primary))}
.oq-choice input{accent-color:hsl(var(--primary))}
.oq-choice.checked{border-color:hsl(var(--primary)); background:hsl(var(--accent)); font-weight:600}
.oq-conditional{margin-top:16px; padding:16px 18px; border-radius:var(--radius); border:1px dashed hsl(var(--border)); background:hsl(var(--muted) / .4); display:none}
.oq-conditional.show{display:block}
.oq-conditional-tag{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:9999px; font-size:var(--fs-xs); font-weight:700; margin-bottom:12px}
.oq-conditional-tag.dn{background:hsl(var(--blue-100)); color:hsl(var(--blue-600))}
.oq-conditional-tag.cnkd{background:hsl(var(--green-100)); color:hsl(var(--green-600))}
.oq-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.oq-checklist-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.oq-checklist-head h4{margin:0; font-size:var(--fs-lg); font-weight:700}
.oq-progress-label{font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); font-variant-numeric:tabular-nums}
.oq-progress-track{height:6px; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden; margin:10px 0 18px}
.oq-progress-fill{height:100%; background:hsl(var(--primary)); border-radius:9999px; transition:width .25s ease; width:0%}
.oq-todo-section{margin-bottom:16px}
.oq-todo-section:last-child{margin-bottom:0}
.oq-todo-section-label{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:hsl(var(--muted-foreground)); margin-bottom:8px}
.oq-todo-item{display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-bottom:1px solid hsl(var(--border))}
.oq-todo-item:last-child{border-bottom:none}
.oq-todo-item input{margin-top:3px; accent-color:hsl(var(--primary)); flex:0 0 auto; width:16px; height:16px; cursor:pointer}
.oq-todo-item label{font-size:var(--fs-sm); line-height:var(--lh-sm); cursor:pointer}
.oq-todo-item.done label{color:hsl(var(--muted-foreground)); text-decoration:line-through}
.oq-empty{color:hsl(var(--muted-foreground)); font-size:var(--fs-sm); padding:12px 0}
.oq-copy-btn{
  width:100%; margin-top:14px; height:40px; border-radius:var(--radius); border:1px solid hsl(var(--border));
  background:hsl(var(--card)); color:hsl(var(--foreground)); font-family:inherit; font-size:var(--fs-base); font-weight:600;
  cursor:pointer; transition:border-color .15s, background-color .15s;
}
.oq-copy-btn:hover{border-color:hsl(var(--primary)); color:hsl(var(--primary))}
.oq-copy-btn.copied{background:hsl(var(--green-100)); color:hsl(var(--green-600)); border-color:transparent}
@media (max-width:900px){
  .oq-layout{grid-template-columns:1fr}
}
.oq-q textarea{
  width:100%; padding:10px 12px; border:1px solid hsl(var(--input)); border-radius:var(--radius);
  font-family:inherit; font-size:var(--fs-base); color:inherit; resize:vertical;
}
.oq-q textarea:focus{border-color:hsl(var(--primary))}
.oq-choice.disabled{opacity:.45; cursor:not-allowed; pointer-events:none}
.oq-q select{
  width:100%; height:40px; padding:0 12px; border:1px solid hsl(var(--input)); border-radius:var(--radius);
  font-family:inherit; font-size:var(--fs-base); color:inherit; background:hsl(var(--card));
}
.oq-q select:focus{border-color:hsl(var(--primary))}
.oq-q input[type="text"]:disabled,.oq-q input[type="tel"]:disabled,.oq-q input[type="email"]:disabled{
  background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); cursor:not-allowed;
}
.oq-checkbox-row{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:var(--fs-sm); color:hsl(var(--muted-foreground)); cursor:pointer}
.oq-checkbox-row input{accent-color:hsl(var(--primary)); cursor:pointer}
.oq-required{color:hsl(var(--destructive))}

/* ---------- ASK QUESTION — FAB + modal ---------- */
.ask-fab{
  position:fixed; right:24px; bottom:24px; z-index:90; height:52px; padding:0 20px 0 16px;
  border-radius:9999px; border:none; background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  display:flex; align-items:center; gap:8px; font-family:inherit; font-size:var(--fs-base); font-weight:600;
  cursor:pointer; box-shadow:var(--shadow-24); transition:transform .15s ease;
}
.ask-fab:hover{transform:translateY(-2px)}
.ask-fab .icon{width:20px; height:20px}
.ask-panel{
  width:100%; max-width:520px; background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); box-shadow:var(--shadow-24); overflow:hidden; display:flex; flex-direction:column;
  max-height:85vh;
}
.ask-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid hsl(var(--border))}
.ask-head h3{margin:0; font-size:var(--fs-lg); font-weight:700}
.ask-close{border:none; background:none; cursor:pointer; color:hsl(var(--muted-foreground)); font-size:20px; line-height:1; padding:4px; font-family:inherit}
.ask-close:hover{color:hsl(var(--foreground))}
.ask-body{padding:18px; overflow-y:auto}
.ask-foot{padding:0 18px 18px}
.ask-submit{
  width:100%; height:44px; border:none; border-radius:var(--radius); background:hsl(var(--primary));
  color:hsl(var(--primary-foreground)); font-family:inherit; font-size:var(--fs-base); font-weight:600;
  cursor:pointer; transition:opacity .15s, background-color .15s;
}
.ask-submit:hover{opacity:.9}
.ask-submit.sent{background:hsl(var(--green-600)); opacity:1}
@media (max-width:600px){
  .ask-fab span{display:none}
  .ask-fab{padding:0; width:52px; justify-content:center}
}

/* nhóm trong sidebar (Tài sản › Giỏ hàng / Niêm yết) — bấm để đóng/mở */
.nav-grp{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:7px 10px 6px; border:0; background:none; cursor:pointer; text-align:left;
  font-family:inherit; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)); border-radius:6px;
}
.nav-grp:hover{background:hsl(var(--sidebar-background-blue)); color:hsl(var(--foreground))}
.nav-grp:focus-visible{outline:2px solid hsl(var(--primary)); outline-offset:-2px}
.nav-grp-chev{
  width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease;
}
li.open > .nav-grp .nav-grp-chev{transform:rotate(180deg)}
li.open > .nav-sub{display:block}
.nav-sub .nav-sub{margin-left:8px; padding-left:8px}
@media (prefers-reduced-motion:reduce){ .nav-grp-chev{transition:none} }