/* =====================================================================
   My S.W.O Portal — layout & screen styles (uses tokens from styles.css)
   ===================================================================== */

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--header-h) 1fr;
  grid-template-areas:"brand topbar" "side main";height:100%}
.shell.collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}

/* ---------- topbar ---------- */
.brandbar{grid-area:brand;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);background:var(--bg)}
.brandbar .logo{width:24px;height:24px;border-radius:var(--r-md);background:var(--grad-mark);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;flex:none;letter-spacing:-.04em}
.swo-mark{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5px;
  background:var(--grad-mark);color:#7FE9E6;font-weight:800;
  letter-spacing:.4px;line-height:1;border-radius:28%;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.swo-mark::after{content:"";width:60%;height:2px;border-radius:1px;background:var(--gold-soft)}
.brandbar .bname{font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;white-space:nowrap}
.brand-logo-btn{border:none;background:none;padding:0;display:flex;align-items:center;cursor:pointer;border-radius:var(--r-md)}
.brand-logo-btn:hover{opacity:.85}
.collapse-btn{margin-left:auto;color:var(--text-subtle)}
.collapse-btn:hover{color:var(--text)}
.collapsed .collapse-btn{display:none}
.collapsed .brand-logo-btn{margin:0 auto}
/* min-width:0: topbar là grid item — thiếu nó thì nội dung nowrap (dải tab dài) ép track 1fr
   nở rộng hơn viewport, đẩy đồng hồ/chuông/avatar ra ngoài màn. */
.topbar{grid-area:topbar;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--bg);border-bottom:1px solid var(--border);min-width:0}
.topsearch{display:flex;align-items:center;gap:8px;height:30px;width:300px;max-width:38vw;padding:0 10px;background:var(--bg-sunken);
  border:1px solid transparent;border-radius:var(--r-md);color:var(--text-muted);font-size:var(--fs-md)}
.topsearch:hover{background:var(--gray-200)}
/* Mọi item topbar giữ nguyên cỡ — nhiều tab thì DẢI TAB tự co (tab thu gọn tên → strip cuộn ngầm),
   KHÔNG được ép đồng hồ/chuông/avatar tràn khỏi màn. spacer + mod-tabs khai lại flex bên dưới. */
.topbar>*{flex:none}
.topbar .spacer{flex:1 1 0;min-width:0}

/* dải tab module đang làm việc (cách B — lối tắt + khôi phục trạng thái) */
.mod-tabs{display:flex;align-items:center;gap:4px;min-width:0;flex:0 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.mod-tabs::-webkit-scrollbar{display:none}
.mod-tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 10px;flex:0 1 auto;min-width:58px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);color:var(--text-muted);font-size:var(--fs-base);white-space:nowrap}
.mod-tab:hover{background:var(--gray-200);color:var(--text)}
.mod-tab.is-active{background:var(--bg);border-color:var(--primary);color:var(--text);font-weight:600;flex:none}   /* tab đang đứng luôn hiện đủ tên */
.mod-tab>.bi{flex:none}
.mod-tab .mt-name{flex:1 1 auto;min-width:0;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.mod-tab .mt-x{width:18px;height:18px;border:none;background:none;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--text-subtle);font-size:13px;flex:none}
.mod-tab .mt-x:hover{background:var(--gray-300);color:var(--text)}
@media(max-width:1000px){.mod-tabs{display:none}}   /* tablet hẹp + mobile: topbar không đủ chỗ — dùng sidebar/tab dưới như cũ */
.iconbtn{position:relative;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-md);
  border:none;background:none;color:var(--text-muted);font-size:16px}
.iconbtn:hover{background:var(--bg-sunken);color:var(--text)}
.iconbtn .nbadge{position:absolute;top:3px;right:3px;min-width:14px;height:14px;padding:0 3px;border-radius:var(--r-pill);
  background:var(--error);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bg)}
.dot9{display:grid;grid-template-columns:repeat(3,4px);gap:3px}
.dot9 i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block}

/* topbar clock chip + mini calendar */
.clock-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-sunken);color:var(--text-muted);font-size:var(--fs-base);white-space:nowrap;cursor:pointer}
.clock-chip:hover,.clock-chip.is-open{background:var(--gray-200);color:var(--text);border-color:var(--border-strong)}
.clock-chip>.bi{font-size:14px;color:var(--primary)}
.clock-chip .clk-date{font-weight:600;color:var(--text)}
.clock-chip .clk-time{font-size:var(--fs-sm);color:var(--text-muted)}
/* DEMO: badge kiêm nút chuyển vai trò trên topbar (demo/demo-ui.jsx, chỉ hiện ở bản demo) */
.demo-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px solid var(--warning);
  border-radius:var(--r-sm);background:var(--warning-bg);color:var(--warning);font-size:var(--fs-sm);font-weight:700;
  white-space:nowrap;cursor:pointer;letter-spacing:.02em}
.demo-badge:hover,.demo-badge.is-open{filter:brightness(.96)}
.mini-cal{padding:10px 12px 12px;width:100%}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.mc-title{font-weight:600;font-size:var(--fs-md);text-transform:capitalize}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mc-dow{margin-bottom:3px}
.mc-w{text-align:center;font-size:var(--fs-sm);color:var(--text-subtle);font-weight:600;padding:2px 0}
.mc-day{display:flex;align-items:center;justify-content:center;height:30px;border-radius:var(--r-sm);font-size:var(--fs-base);color:var(--text)}
.mc-day.is-today{background:var(--primary);color:#fff;font-weight:700}
.mc-empty{visibility:hidden}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.mc-foot .subtle{font-size:var(--fs-sm);text-transform:capitalize}

/* role / lang segmented in topbar */
.role-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 10px;border:1px solid var(--border);
  border-radius:var(--r-md);font-size:var(--fs-md);font-weight:500;background:var(--bg);white-space:nowrap}
.role-pill:hover{background:var(--bg-sunken)}
.role-pill .rdot{width:6px;height:6px;border-radius:50%}

/* ---------- sidebar ---------- */
.sidebar{grid-area:side;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--border);overflow-y:auto}
.nav-group{padding:8px 8px 4px}
.nav-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px 4px}
.nav-item{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border-radius:var(--r-md);color:var(--text-muted);
  font-size:var(--fs-md);font-weight:500;width:100%;border:none;background:none;text-align:left;position:relative}
.nav-item i{font-size:15px;width:18px;text-align:center;flex:none}
.nav-item:hover{background:var(--bg-sunken);color:var(--text)}
.nav-item.is-active{background:var(--primary-light);color:var(--primary-ink);font-weight:600}
.nav-item .ncount{margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--text-subtle);background:var(--bg-sunken);border-radius:var(--r-pill);padding:0 6px;height:16px;display:flex;align-items:center}
.nav-item.is-active .ncount{background:var(--primary-light-2);color:var(--primary-ink)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--border);padding:8px}
.collapsed .nav-label,.collapsed .bname,.collapsed .nav-item span,.collapsed .ncount{display:none}
.collapsed .nav-item{justify-content:center;padding:0}
.collapsed .brandbar{justify-content:center;padding:0}
.module-side .nav-label{color:var(--primary-ink)}
/* tab đang chọn trong module: highlight theo màu của module (--mod-color) */
.module-side .nav-item.is-active{background:color-mix(in srgb,var(--mod-color,var(--primary)) 16%,transparent);color:var(--mod-color,var(--primary));font-weight:600}
.module-side .nav-item.is-active i{color:var(--mod-color,var(--primary))}
.module-side .nav-item.is-active:hover{background:color-mix(in srgb,var(--mod-color,var(--primary)) 22%,transparent)}
.module-side .nav-item.is-active .ncount{background:color-mix(in srgb,var(--mod-color,var(--primary)) 28%,transparent);color:var(--mod-color,var(--primary))}
/* Sidebar "dạng sổ": item cha có caret gập/mở, nhánh con thụt vào theo đường dẫn dọc */
.nav-collapsible{display:flex;flex-direction:column;gap:2px}
.nav-parent{display:flex;align-items:center;gap:2px}
.nav-parent .nav-item{flex:1;min-width:0}
.nav-caret{flex:none;width:22px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  background:transparent;border:none;color:var(--text-subtle);cursor:pointer}
.nav-caret:hover{background:var(--bg-sunken);color:var(--text)}
.nav-caret i{font-size:12px;transition:transform .15s ease}
.nav-caret.is-open i{transform:rotate(90deg)}
.nav-sub{display:flex;flex-direction:column;gap:2px;margin:1px 0 3px 0;padding-left:20px;position:relative}
.nav-sub::before{content:"";position:absolute;left:13px;top:3px;bottom:3px;width:1px;background:var(--border-strong)}
.nav-item.is-sub{height:28px}
.nav-item.is-sub i{font-size:12px}
.collapsed .nav-caret,.collapsed .nav-sub{display:none}
/* khung bọc cụm tác vụ module: nền tint + viền theo màu module */
.module-nav-box{display:flex;flex-direction:column;gap:2px;margin:6px 8px 0;padding:6px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--mod-color,var(--primary)) 10%,var(--bg));
  border:1px solid color-mix(in srgb,var(--mod-color,var(--primary)) 24%,transparent)}
/* Ứng dụng ghim trong module: đẩy xuống ~giữa chiều cao sidebar
   (margin-top:auto của cụm ghim + của .sidebar-foot chia đôi khoảng trống) */
.module-side .mod-pinned{margin-top:auto;margin-bottom:auto;padding-top:10px;border-top:1px solid var(--border)}
.module-side .mod-pinned .nav-label{color:var(--text-subtle)}
.back-portal{display:flex;align-items:center;gap:8px;height:34px;margin:8px;padding:0 10px;border-radius:var(--r-md);
  background:var(--primary-light);font-weight:600;font-size:var(--fs-md);border:1px solid var(--primary-light-2);color:var(--primary-ink)}
.back-portal i{color:var(--primary-ink)}
.back-portal:hover{background:var(--primary-light-2);border-color:var(--primary)}
/* trong module: nút Về Portal đồng tông màu module (--mod-color) cho cả cụm sidebar nhất quán */
.module-side .back-portal{background:color-mix(in srgb,var(--mod-color,var(--primary)) 12%,transparent);border-color:color-mix(in srgb,var(--mod-color,var(--primary)) 26%,transparent);color:var(--mod-color,var(--primary))}
.module-side .back-portal i{color:var(--mod-color,var(--primary))}
.module-side .back-portal:hover{background:color-mix(in srgb,var(--mod-color,var(--primary)) 20%,transparent);border-color:var(--mod-color,var(--primary))}
/* dark: chữ/icon "Về Portal" theo màu module dễ chìm trên nền tối → sáng lên (mix 55% với trắng) + tăng tint nền */
[data-theme="dark"] .module-side .back-portal,
[data-theme="dark"] .module-side .back-portal i{color:color-mix(in srgb,var(--mod-color,var(--primary)) 55%,#fff)}
[data-theme="dark"] .module-side .back-portal{background:color-mix(in srgb,var(--mod-color,var(--primary)) 22%,transparent);border-color:color-mix(in srgb,var(--mod-color,var(--primary)) 40%,transparent)}
.collapsed .back-portal{justify-content:center;gap:0;padding:0;margin:8px auto;width:40px}
.collapsed .back-portal span{display:none}

/* ---------- main scroll area ---------- */
.main{grid-area:main;overflow-y:auto;background:var(--bg-subtle)}
.page{margin:0 auto;padding:var(--page-pad) 24px 60px;max-width:1280px}
[data-pagewidth="1800"] .page{max-width:1800px}
[data-pagewidth="full"] .page{max-width:none}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.02em}
.page-head .sub{color:var(--text-muted);font-size:var(--fs-md);margin-top:2px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- app launcher popover ---------- */
.launcher{width:320px;padding:10px}
.launcher .lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ltile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:var(--r-lg);text-align:center;border:none;background:none}
.ltile:hover{background:var(--bg-sunken)}
.ltile .ic{width:34px;height:34px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px}
.ltile .lt{font-size:var(--fs-base);font-weight:500;line-height:1.2}

/* ---------- app tiles (grid) ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.app-tile{display:flex;gap:10px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  text-align:left;align-items:flex-start;transition:box-shadow .12s,border-color .12s,transform .06s;position:relative}
.app-tile:hover{box-shadow:var(--sh-md);border-color:var(--border-strong)}
.app-tile:active{transform:translateY(.5px)}
.app-tile .ic{width:34px;height:34px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex:none}
.app-tile .at-name{font-weight:600;font-size:var(--fs-md)}
.app-tile .at-desc{color:var(--text-muted);font-size:var(--fs-base);line-height:1.4;margin-top:1px}
.app-tile .pin{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:var(--r-md);border:none;background:none;color:var(--text-subtle);opacity:0;display:flex;align-items:center;justify-content:center}
.app-tile:hover .pin{opacity:1}
.app-tile .pin.pinned{opacity:1;color:var(--gold-strong)}
.app-tile .pin:hover{background:var(--bg-sunken)}

/* ---------- dashboard ---------- */
.dash-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:stretch}
.dash-grid>*{min-width:0}
/* Widget dashboard: nút chức năng dồn xuống đáy card → canh đều giữa các widget */
.dash-grid>.card{display:flex;flex-direction:column;min-height:208px}
.dash-grid>.card>.card-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.dash-grid>.card>.card-body>.btn:last-child{margin-top:auto !important}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi-strip>*{min-width:0}
/* Ô CHẤM CÔNG chốt ở đầu dải KPI (góc trái Dashboard) — thao tác dùng nhiều nhất mỗi ngày,
   để đây thì vừa mở portal là bấm được, không phải vào module. Dùng CLASS chứ không style inline
   để media query bên dưới còn ghi đè được (inline sẽ thắng và kẹt 4 cột trên màn hẹp). */
.kpi-strip.has-clock{grid-template-columns:minmax(230px,1.1fr) repeat(3,1fr)}
@media(max-width:1000px){
  .kpi-strip.has-clock{grid-template-columns:repeat(2,1fr)}
  .kpi-strip.has-clock>.kpi-clock{grid-column:1/-1}   /* hẹp → chiếm cả hàng, nút vẫn to dễ bấm */
}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
@media(max-width:1000px){.dash-grid{grid-template-columns:1fr 1fr}.span3{grid-column:span 2}.kpi-strip{grid-template-columns:repeat(2,1fr)}}

.news-feat{display:flex;flex-direction:column;gap:8px}
.news-feat .ph-img{height:150px}
.news-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-light);align-items:flex-start}
.news-row:last-child{border-bottom:none}
.news-row .ph-img{width:54px;height:42px;flex:none}
.list-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-light)}
.list-row:last-child{border-bottom:none}
.cklist{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border-light)}
.cklist:last-child{border-bottom:none}
.ckbox{width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;background:var(--bg)}
.ckbox.done{background:var(--primary);border-color:var(--primary)}
.cklist.is-done .tk-title{text-decoration:line-through;color:var(--text-subtle)}

/* approvals inline */
.appr-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-light)}
.appr-row:last-child{border-bottom:none}
.appr-actions{display:flex;gap:6px;margin-left:auto}

/* mini calendar / agenda */
.recent-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border-light);border-radius:var(--r-md)}
.recent-row:last-child{border-bottom:none}
.recent-row.is-link{cursor:pointer}
.recent-row.is-link:hover{background:var(--bg-sunken)}
.recent-ic{width:28px;height:28px;border-radius:var(--r-md);background:var(--bg-sunken);display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
/* ---------- task board (Kanban) ---------- */
.task-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.task-col{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;min-height:120px}
.task-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600;font-size:var(--fs-md)}
.task-col-head .ncount{font-size:var(--fs-sm);font-weight:600;color:var(--text-subtle);background:var(--bg-sunken);border-radius:var(--r-pill);padding:0 7px;height:18px;display:flex;align-items:center}
.task-col-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.task-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;cursor:pointer;box-shadow:var(--sh-xs)}
.task-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-sm)}
@media(max-width:900px){.task-board{grid-template-columns:1fr}}
/* kanban nhiều cột (báo giá…): cuộn NGANG trong vùng, mỗi cột cuộn dọc riêng — khung trang cố định */
.kanban-scroll{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding-bottom:6px}
.kanban-scroll .task-col{flex:0 0 248px;min-width:248px}
.kanban-scroll .task-col-body{max-height:calc(100vh - 330px);overflow-y:auto}
@media(max-width:760px){.kanban-scroll .task-col{flex:0 0 82vw;min-width:82vw}}
/* ---------- category filter chips (icon/tab) ---------- */
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.catchip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);background:var(--bg);font-size:var(--fs-md);font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap}
.catchip:hover{background:var(--bg-sunken)}
.catchip.is-active{background:var(--primary);border-color:var(--primary);color:var(--text-on-primary)}
.catchip i{font-size:14px}
.catchip .cc{font-size:var(--fs-sm);font-weight:600;opacity:.75;background:var(--bg-sunken);color:var(--text-muted);border-radius:var(--r-pill);padding:0 6px;height:16px;display:inline-flex;align-items:center}
.catchip.is-active .cc{background:rgba(255,255,255,.22);color:#fff;opacity:1}
.agenda-item{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-light)}
.agenda-item:last-child{border-bottom:none}
.agenda-item .tm{font-family:var(--font-mono);font-size:var(--fs-base);color:var(--text-muted);width:40px;flex:none}
.agenda-item .bar{width:3px;border-radius:var(--r-pill);flex:none}

/* ---------- login ---------- */
.login{display:grid;grid-template-columns:1.05fr 1fr;height:100%;background:var(--bg)}
.login-brand{position:relative;overflow:hidden;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.login-brand .hero-ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#0d1c34,#0d1c34 14px,#13284a 14px,#13284a 28px)}
.login-brand .hero-ov{position:absolute;inset:0;background:radial-gradient(620px 420px at 16% 10%,rgba(18,197,192,.30),transparent 60%),linear-gradient(160deg,rgba(20,102,224,.42),rgba(10,23,48,.92))}
.login-brand>*{position:relative;z-index:2}
.login-brand .lb-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-xl)}
.login-brand .lb-logo .logo{width:30px;height:30px;font-size:13px}
.login-brand h2{font-size:var(--fs-4xl);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;max-width:420px}
.login-brand p{color:rgba(255,255,255,.7);font-size:var(--fs-lg);max-width:380px;margin:0}
.lb-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.lb-thumb{display:flex;align-items:center;gap:7px;padding:7px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);font-size:var(--fs-base);font-weight:500;backdrop-filter:blur(4px)}
.lb-thumb .ic{width:20px;height:20px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:40px;max-width:420px;margin:0 auto;width:100%}
.login-form h1{font-size:var(--fs-3xl);font-weight:700;margin:0 0 4px;letter-spacing:-.02em}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:38px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg);font-weight:500;font-size:var(--fs-md)}
.sso-btn:hover{background:var(--bg-sunken)}
.or{display:flex;align-items:center;gap:10px;color:var(--text-subtle);font-size:var(--fs-base);margin:4px 0}
.or::before,.or::after{content:"";height:1px;background:var(--border);flex:1}
.gicon{width:16px;height:16px}
.login-skip{position:absolute;top:18px;right:20px;z-index:3}
@media(max-width:820px){.login{grid-template-columns:1fr}.login-brand{display:none}}

/* ---------- portal FAB ---------- */
.fab{position:fixed;z-index:400;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;box-shadow:var(--sh-lg);font-weight:600;font-size:var(--fs-md);cursor:grab;border:none;user-select:none}
.fab:active{cursor:grabbing}
.fab i{font-size:15px}
/* dark: --gray-900 đảo thành gần-trắng → chữ trắng biến mất; đổi FAB sang nền primary cho nổi & rõ chữ */
[data-theme="dark"] .fab{background:var(--primary);color:#fff}
[data-theme="dark"] .fab:hover{background:var(--primary-hover)}

/* ---------- PWA update banner ---------- */
.pwa-update{position:fixed;left:18px;bottom:18px;z-index:901;display:flex;align-items:center;gap:12px;
  max-width:380px;padding:11px 12px 11px 14px;background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);animation:rise .16s ease}
.pwa-update>i{font-size:18px;color:var(--primary);flex:none}
.pwa-update-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pwa-update-text strong{font-size:var(--fs-md);font-weight:600;color:var(--text)}
.pwa-update-text .muted{font-size:var(--fs-base)}
.pwa-update-actions{display:flex;align-items:center;gap:6px;margin-left:6px;flex:none}
.pwa-update .spin{animation:swo-spin .8s linear infinite}
.spin{display:inline-block;animation:swo-spin .8s linear infinite}
@keyframes swo-spin{to{transform:rotate(360deg)}}
@media (max-width:600px){.pwa-update{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- email inbox (Hộp thư đến) — 1 màn hình, scroll trong từng cột ---------- */
.page-inbox{height:100%;display:flex;flex-direction:column;padding-bottom:18px;min-height:0}
.page-inbox .inbox-head{margin-bottom:10px;flex:none}
.page-inbox .inbox-filters{margin-bottom:10px;flex:none}
.page-inbox .inbox-err{margin-bottom:10px;flex:none}
/* Cột list kéo giãn được (--inbox-list-w do JS set khi kéo); min() chốt trần 50% kể cả khi thu nhỏ cửa sổ */
.inbox-split{display:grid;grid-template-columns:min(var(--inbox-list-w,380px),50%) 14px minmax(0,1fr);gap:0;flex:1 1 auto;min-height:0}
.inbox-resizer{cursor:col-resize;position:relative;touch-action:none}
.inbox-resizer::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);border-radius:2px;background:transparent;transition:background .15s}
.inbox-resizer:hover::before,.inbox-resizer.dragging::before{background:var(--primary)}
.inbox-list{padding:6px;overflow-y:auto;min-height:0}
.inbox-item{display:flex;gap:12px;width:100%;text-align:left;padding:11px 12px;border:none;background:none;border-radius:var(--r-md);cursor:pointer;border-bottom:1px solid var(--border)}
.inbox-item:last-child{border-bottom:none}
.inbox-item:hover{background:var(--bg-sunken)}
.inbox-item.sel{background:var(--primary-50,rgba(20,102,224,.08))}
.inbox-item.unread .ii-from,.inbox-item.unread .ii-subj{font-weight:700;color:var(--text)}
.inbox-item .ii-from{font-size:var(--fs-md);font-weight:600;color:var(--text);flex:1;min-width:0}
.inbox-item .ii-date{font-size:var(--fs-sm);flex:none}
.inbox-item .ii-subj{font-size:var(--fs-base);color:var(--text);margin-top:1px}
.inbox-item .ii-snip{font-size:var(--fs-sm);margin-top:1px}
.inbox-detail{overflow-y:auto;min-height:0}
.inbox-detail .mail-html{font-size:var(--fs-md);line-height:1.55}
.attach-dl{cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:5px}
.attach-dl:hover{background:var(--primary-50,rgba(20,102,224,.08));border-color:var(--primary)}
.attach-dl:disabled{opacity:.6;cursor:default}
@media (max-width:760px){
  .page-inbox{height:auto}
  .inbox-split{grid-template-columns:1fr;flex:none}
  .inbox-resizer{display:none}
  .inbox-list,.inbox-detail{overflow:visible;max-height:none}
}

/* ---------- system admin (branding) ---------- */
.brand-img{object-fit:contain;border-radius:var(--r-md);background:var(--bg-sunken);display:inline-block}
.sys-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.sys-grid .card-body .field{flex:1;min-width:160px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.swatch{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--bg);cursor:pointer;text-align:left;font-size:var(--fs-md);color:var(--text)}
.swatch:hover{background:var(--bg-sunken)}
.swatch.is-active{border-color:var(--primary);box-shadow:var(--ring)}
.swatch .sw-dots{display:inline-flex;flex:none}
.swatch .sw-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--bg)}
.swatch .sw-dots i:last-child{margin-left:-7px}
.swatch .sw-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.color-pick{display:inline-flex;align-items:center;gap:8px}
.color-pick input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg);cursor:pointer}
.color-pick .mono{font-family:var(--font-mono);font-size:var(--fs-base);color:var(--text-muted);text-transform:uppercase}
.sys-preview-card{position:sticky;top:8px}
.sys-pv-bar{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-subtle)}
.sys-pv-hero{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.sys-pv-hero strong{font-size:var(--fs-lg)}
.sys-pv-hero .muted{color:rgba(255,255,255,.85)!important}
@media (max-width:900px){.sys-grid{grid-template-columns:1fr}.sys-preview-card{position:static}}

/* ---------- command palette ---------- */
/* z-index:850 (như .modal-overlay) — trên .mobile-tabbar (700) để bảng lệnh không bị thanh tab che đáy. */
.cmdk-overlay{position:fixed;inset:0;background:rgba(15,17,21,.4);display:flex;align-items:flex-start;justify-content:center;padding:90px 16px;z-index:850;animation:fade .12s ease}
.cmdk{width:100%;max-width:560px;background:var(--bg);border-radius:var(--r-xl);box-shadow:var(--sh-xl);overflow:hidden;animation:rise .14s ease}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.cmdk-input input{border:none;outline:none;flex:1;font-size:var(--fs-xl)}
.cmdk-input i{color:var(--text-subtle);font-size:17px}
.cmdk-list{max-height:340px;overflow:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md);font-size:var(--fs-md);cursor:pointer}
.cmdk-item .ic{width:26px;height:26px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex:none}
.cmdk-item.is-active{background:var(--bg-sunken)}
.cmdk-item .meta{margin-left:auto;font-size:var(--fs-sm);color:var(--text-subtle)}

/* ---------- detail layouts ---------- */
.split{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
.split>*{min-width:0}
/* 2 cột bằng nhau (so sánh song song, vd báo cáo Mua|Bán) */
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.split-even>*{min-width:0}
@media(max-width:900px){.split{grid-template-columns:1fr}.split-even{grid-template-columns:1fr}}
.det-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-light);font-size:var(--fs-md)}
.det-row:last-child{border-bottom:none}
.det-row .dk{color:var(--text-muted)}
.det-row .dv{font-weight:500;text-align:right}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-22px;top:1px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center}
.tl-dot i{font-size:7px;color:var(--primary)}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-title{font-weight:600;font-size:var(--fs-md)}
.tl-time{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-subtle)}
.tl-body{font-size:var(--fs-md);color:var(--text-muted);margin-top:2px}

/* ---------- rich editor ---------- */
.editor-wrap{border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden}
.editor-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px;border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.editor-toolbar .iconbtn{width:28px;height:28px;font-size:14px}
.editor-toolbar .sep{width:1px;height:18px;background:var(--border);margin:0 3px}
.editor{min-height:200px;padding:12px 14px;font-size:var(--fs-md);line-height:1.6;outline:none}
.editor:empty::before{content:attr(data-ph);color:var(--text-subtle)}
.editor a{color:var(--primary);text-decoration:underline}

/* email list */
.mail-row td .subj{font-weight:500}
.mail-html{border:1px solid var(--border);border-radius:var(--r-md);padding:16px;background:var(--bg);font-size:var(--fs-md);line-height:1.6}
.mail-html h1,.mail-html h2{margin:0 0 8px}

/* distribution bars */
.distrib{display:flex;flex-direction:column;gap:8px}
.distrib-row{display:grid;grid-template-columns:90px 1fr 34px;align-items:center;gap:10px;font-size:var(--fs-base)}
.distrib-bar{height:7px;border-radius:var(--r-pill);background:var(--bg-sunken);overflow:hidden}
.distrib-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--primary)}

.flag{font-size:13px}
.linkcount{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;background:var(--bg-sunken);border-radius:var(--r-md);font-size:var(--fs-base);font-weight:500}
.linkcount b{color:var(--primary)}

/* ===================== responsive ===================== */
.mobile-only{display:none!important}
.drawer-scrim{display:none}
.mobile-tabbar{display:none}

/* ============ phone: native-PWA shell (drawer + bottom tab bar + table-cards + bottom-sheet) ============ */
@media(max-width:760px){
  /* scale rộng rãi hơn + vùng chạm to + chừa safe-area */
  :root{--ui-scale:1.06;--control-h:40px;--density-row:42px;
    --header-h:calc(54px + env(safe-area-inset-top));
    /* Đã bỏ viewport-fit=cover → env(safe-area-inset-bottom)=0 trên iOS PWA. Dùng số cố định 30px
       để NÂNG icon/nhãn khỏi vạch home + GÓC BO màn hình. max(env,30) cho máy khác vẫn an toàn. */
    --tabbar-h:calc(65px + max(env(safe-area-inset-bottom), 30px));}

  .shell{grid-template-columns:1fr!important;grid-template-rows:var(--header-h) 1fr;grid-template-areas:"topbar" "main"}
  .brandbar{display:none}

  /* topbar sticky, chừa safe-area trên */
  .topbar{gap:6px;padding:8px 10px 0;padding-top:calc(8px + env(safe-area-inset-top));box-shadow:var(--sh-xs);position:relative;z-index:60}
  .mobile-only{display:inline-flex!important}
  /* tìm kiếm + app-launcher đã có ở thanh tab dưới → ẩn trên topbar */
  .topbar .topsearch{display:none!important}
  .hide-sm{display:none!important}

  /* off-canvas drawer (mở bằng nút Menu) */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(82vw,300px);z-index:800;transform:translateX(-100%);
    padding-top:env(safe-area-inset-top);
    transition:transform .24s cubic-bezier(.2,.7,.3,1);box-shadow:var(--sh-xl);border-right:1px solid var(--border)}
  .shell.drawer-open .sidebar{transform:none}
  .drawer-scrim{display:block;position:fixed;inset:0;background:rgba(15,17,21,.5);z-index:790;animation:fade .15s ease}
  .nav-item{height:46px;border-radius:var(--r-lg);font-size:var(--fs-lg)}
  .nav-item i{font-size:19px;width:24px}
  .back-portal{height:44px;font-size:var(--fs-lg)}

  /* vùng cuộn chính chừa chỗ cho thanh tab dưới.
     overflow-x:hidden → TRANG KHÔNG kéo ngang được (bỏ cảm giác "trôi" khó chịu). Nội dung rộng
     (kanban/tabs/pflow/bảng) đã có overflow-x:auto RIÊNG nên vẫn cuộn trong hộp của nó — không bị mất. */
  .main{padding-bottom:var(--tabbar-h);-webkit-overflow-scrolling:touch;overflow-x:hidden}
  /* chặn con vượt khung: ảnh/media co theo cột, chuỗi dài tự xuống dòng thay vì nong ngang trang. */
  .page{padding:16px 14px 24px;max-width:100%;overflow-wrap:break-word}
  .page img,.page video,.page canvas,.page iframe{max-width:100%;height:auto}
  .page-head{gap:10px}
  .page-head h1{font-size:var(--fs-2xl)}
  .page-head .btn{min-height:40px}

  /* mọi thứ về 1 cột */
  .split{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr!important}
  .kpi-strip{grid-template-columns:1fr 1fr!important;gap:10px}
  .app-grid{grid-template-columns:1fr!important}
  /* FORM trong modal: hàng nhiều cột (flex chứa ô nhập) → XẾP DỌC 1 cột, mỗi ô full-width.
     :has(.field) chỉ nhắm hàng CÓ ô nhập (Field render .field) → KHÔNG đụng hàng nút/hàng icon.
     Cả grid auto-fit (hồ sơ) cũng về 1 cột. iOS Safari 15.4+ hỗ trợ :has. */
  .modal-body .flex:has(.field){flex-direction:column;align-items:stretch;gap:12px}
  .modal-body .flex:has(.field)>*{min-width:0;width:auto}
  .modal-body [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* control to hơn cho cảm ứng */
  .btn-sm{height:32px;padding:0 10px}
  .tabs{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs .tab{height:44px;font-size:var(--fs-lg);flex:none}
  .iconbtn{width:42px;height:42px;font-size:20px}
  .menu-item{height:44px;font-size:var(--fs-md)}
  .seg button{height:32px;padding:0 12px;font-size:var(--fs-md)}

  /* ô tìm kiếm trong toolbar chiếm cả hàng, bộ lọc xuống dưới */
  .toolbar{gap:10px}
  .toolbar .topsearch{display:inline-flex!important;flex:1 1 100%!important;width:auto!important;max-width:none!important;
    height:40px;justify-content:flex-start;padding:0 12px;background:var(--bg)!important;border:1px solid var(--border-strong)!important}
  .toolbar .topsearch .grow,.toolbar .topsearch kbd{display:initial}

  /* ---- bảng .tbl thành danh sách thẻ xếp dọc (nhãn từ mobile.js data-th) ---- */
  .main .tbl{display:block;min-width:0!important;width:100%}
  .main .tbl thead{display:none}
  .main .tbl tbody{display:block}
  .main .tbl tr{display:block;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--r-lg);box-shadow:var(--sh-xs);margin-bottom:10px;padding:2px}
  .main .tbl tbody tr:hover{background:var(--bg)}
  .main .tbl tbody tr.is-selected{background:var(--primary-light)}
  .main .tbl td{display:flex;align-items:center;justify-content:space-between;gap:14px;
    height:auto;min-height:40px;padding:8px 12px;text-align:right;border-bottom:1px solid var(--border-light)}
  .main .tbl tr td:last-child{border-bottom:none}
  .main .tbl td::before{content:attr(data-th);flex:none;max-width:46%;text-align:left;
    color:var(--text-muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
  .main .tbl td[data-th=""]::before{content:none}
  .main .tbl td.num{font-family:var(--font-mono)}
  .main .tbl td:first-child{font-weight:600;font-size:var(--fs-lg)}

  /* modal + command palette = bottom sheet */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal,.cmdk{max-width:none!important;width:100%}
  .modal{max-height:92vh;border-radius:16px 16px 0 0}
  .modal-body{padding:16px 16px calc(16px + max(env(safe-area-inset-bottom), 20px))}
  .modal-foot{padding-bottom:calc(12px + max(env(safe-area-inset-bottom), 20px))}
  .cmdk-overlay{align-items:flex-start;padding:calc(env(safe-area-inset-top) + 16px) 12px 12px}
  .cmdk-item{min-height:46px}

  /* toast + FAB không vướng thanh tab dưới */
  .toast-wrap{bottom:calc(var(--tabbar-h) + 12px);right:12px;left:12px}
  .toast{max-width:none}
  .fab{display:none!important}

  /* ---- thanh tab dưới ---- */
  .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:700;
    background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);
    padding-bottom:max(env(safe-area-inset-bottom), 30px);
    box-shadow:0 -2px 10px rgba(16,24,40,.06)}
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:65px;border:none;background:none;color:var(--text-muted);padding:8px 2px}
  .mtab-ic{position:relative;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;height:24px}
  .mtab-lb{font-size:10px;font-weight:600;letter-spacing:.01em;line-height:1}
  .mtab.is-active{color:var(--primary)}
  .mtab:active{background:var(--bg-sunken)}
  .mtab-badge{position:absolute;top:-4px;left:12px;min-width:15px;height:15px;padding:0 3px;border-radius:var(--r-pill);
    background:var(--error);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bg)}
}

/* phone: shed the busiest topbar items */
@media(max-width:520px){
  .role-pill .rlabel{display:none}
  .role-pill{padding:0 8px}
  .lang-seg{display:none}
  .kpi-strip{grid-template-columns:1fr 1fr!important}
}

/* =====================================================================
   Modules mới (Sản phẩm · Báo giá · Người dùng) — bổ sung component class
   mà các module port từ v3 cần. Chỉ dùng token sẵn có, không hardcode.
   ===================================================================== */

/* recent activity feed (RecentActivity — overview các module) */
.recent-act .act-row{display:flex;align-items:center;gap:11px;padding:9px 8px;margin:0 -8px;border-bottom:1px solid var(--border-light)}
.recent-act .act-row:last-child{border-bottom:none}
.recent-act .act-row.clickable{cursor:pointer;border-radius:var(--r-md);transition:background .1s}
.recent-act .act-row.clickable:hover{background:var(--bg-hover)}
.recent-act .act-ic{width:30px;height:30px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.recent-act .act-title{font-size:var(--fs-md);font-weight:500;line-height:1.35}
.recent-act .act-sub{font-size:var(--fs-base);color:var(--text-muted);margin-top:1px}
.recent-act .act-time{font-size:var(--fs-sm);color:var(--text-subtle);white-space:nowrap;flex:none}

/* purchase-flow stepper (PurchaseFlow — Báo giá ↔ Hợp đồng) */
.pflow{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.pflow-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding-top:4px}
.pflow-line{position:absolute;top:21px;right:50%;width:100%;height:2px;border-radius:1px;z-index:0}
.pflow-dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;border:2px solid;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;transition:transform .15s}
.pflow-step.is-current .pflow-dot{box-shadow:var(--ring)}
.pflow-step:hover .pflow-dot{transform:translateY(-1px)}
.pflow-num{font-size:10px;font-weight:700;color:var(--text-muted);margin-top:6px;letter-spacing:.04em}
.pflow-label{font-size:var(--fs-sm);line-height:1.25;margin-top:1px;max-width:11ch;text-wrap:balance}
.pflow-sub{font-size:10px;color:var(--gray-400);margin-top:2px;line-height:1.2}
.pflow-step.is-skipped .pflow-label,.pflow-step.is-skipped .pflow-num{color:var(--gray-400)}
@media(max-width:680px){
  .pflow{overflow-x:auto;gap:2px;padding-bottom:4px}
  .pflow-step{min-width:84px}
  .pflow-label{font-size:10px}
}

/* Trợ giúp module — 2 cột: mục lục (index) trái + nội dung chi tiết phải, cuộn trong vùng, giữ khung & đầu trang cố định */
.help-page{height:100%;display:flex;flex-direction:column;min-height:0;padding-bottom:18px}
.help-page>.page-head{flex:none}
.help-doc{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(184px,236px) minmax(0,1fr);gap:16px;margin-top:4px;--help-accent:var(--primary)}
/* cột 1 — mục lục / index các mục thông tin */
.help-toc{align-self:start;max-height:100%;overflow-y:auto;min-height:0;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg)}
.help-toc-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px 8px}
.help-toc ol{list-style:none;margin:0;padding:0;counter-reset:helpidx;display:flex;flex-direction:column;gap:2px}
.help-toc li{counter-increment:helpidx;min-width:0}
.help-toc button{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;padding:7px 10px;border:none;background:none;border-radius:var(--r-md);color:var(--text-muted);font-size:var(--fs-md);font-weight:500;line-height:1.34;cursor:pointer}
.help-toc button::before{content:counter(helpidx);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-subtle);flex:none;min-width:15px;text-align:right}
.help-toc button:hover{background:var(--bg-sunken);color:var(--text)}
.help-toc button.is-active{background:color-mix(in srgb,var(--help-accent) 14%,transparent);color:var(--help-accent);font-weight:600}
.help-toc button.is-active::before{color:var(--help-accent)}
/* cột 2 — nội dung chi tiết, cuộn trong vùng */
.help-content{overflow-y:auto;min-height:0;position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:2px 22px 22px}
.help-sec{padding-top:18px;scroll-margin-top:8px}
.help-sec>h2{font-size:var(--fs-md);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--primary-ink)}
@media(max-width:760px){
  .help-page{height:auto}
  .help-doc{grid-template-columns:1fr;gap:12px}
  .help-toc{max-height:none;overflow:visible}
  .help-content{overflow:visible}
}
.help-body{line-height:1.62;color:var(--text)}
.help-body h3{font-size:var(--fs-base);font-weight:700;margin:13px 0 4px;color:var(--text)}
.help-body h4{font-size:var(--fs-base);margin:9px 0 2px;color:var(--text-muted)}
.help-body p{margin:6px 0}
.help-body ul,.help-body ol{margin:6px 0 8px;padding-left:20px}
.help-body li{margin:4px 0}
.help-body li::marker{color:var(--primary-ink);font-weight:600}
.help-body code{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--bg-subtle);padding:1px 5px;border-radius:var(--r-sm)}
.help-body a{color:var(--primary-ink)}
.help-body blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--primary);background:var(--primary-light);border-radius:var(--r-sm);color:var(--text-muted);font-size:var(--fs-sm)}
.help-body>:first-child{margin-top:0}

/* Cài đặt: bố trí nhiều cột, ưu tiên 1 màn hình, hạn chế scroll dọc */
.settings-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.settings-grid>.card{flex:1 1 360px;max-width:640px;margin:0}
/* masonry cho form nhiều thẻ CAO THẤP chênh lệch lớn (vd Thiết lập trang website):
   CSS columns → thẻ ngắn không tạo khoảng trống chờ thẻ cao nhất cùng hàng */
.masonry-grid{columns:3 360px;column-gap:14px}
.masonry-grid>.card{break-inside:avoid;margin:0 0 14px;width:100%}
.sys-sec-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:700;color:var(--text);margin:2px 2px 0;letter-spacing:-.01em}
.sys-sec-title i{color:var(--primary)}


/* ===================== dashboard widget chrome (kéo / thu nhỏ / ẩn / resize) ===================== */
/* OCD: khi 1 widget kéo rộng chiếm hết dòng, các widget khác TỰ NHẢY DÒNG + LẤP KÍN chỗ trống (không để lỗ hổng). */
.wgrid{grid-auto-flow:row dense}
/* OCD: widget cùng hàng LUÔN căn đều chiều cao (stretch theo hàng) — kéo/đổi cỡ không làm lệch. */
.widget-card{position:relative;align-self:stretch;transition:box-shadow .15s ease,opacity .15s ease}
.widget-card.is-collapsed{align-self:start}
.dash-grid>.widget-card.is-collapsed{min-height:0}
.widget-card.is-dragging{opacity:.45;box-shadow:var(--sh-md)}
.wg-grip{display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--text-subtle);cursor:grab;padding:2px;margin:-2px -2px -2px -4px;border-radius:var(--r-sm);font-size:var(--fs-lg);line-height:1}
.wg-grip:hover{color:var(--text);background:var(--bg-subtle)}
.wg-grip:active{cursor:grabbing}
.wg-icobtn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:none;color:var(--text-subtle);cursor:pointer;border-radius:var(--r-sm);font-size:var(--fs-base)}
.wg-icobtn:hover{color:var(--text);background:var(--bg-subtle)}
.wg-actbtn{padding-left:8px;padding-right:8px}
.wg-actbtn i{margin:0}
/* Tay kéo đổi ĐỘ RỘNG (số cột) — cạnh phải, dọc giữa, KHÔNG đụng nút ở header; chiều cao tự căn đều. */
.wg-resize{position:absolute;right:1px;top:50%;transform:translateY(-50%);width:12px;height:46px;cursor:ew-resize;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);opacity:0;transition:opacity .15s ease;touch-action:none}
.widget-card:hover .wg-resize{opacity:.5}
.wg-resize:hover{opacity:1}
.wg-resize::after{content:'';width:3px;height:100%;border-radius:2px;background:currentColor}
.wg-pop-scrim{position:fixed;inset:0;z-index:39}
.wg-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:250px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px}
.wg-pop-hd{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);padding:6px 8px 4px}
.wg-pop-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-base)}
.wg-pop-row:hover{background:var(--bg-subtle)}
.wg-pop-ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border-radius:var(--r-sm);color:#fff;font-size:12px}
.wg-pop-foot{border-top:1px solid var(--border-light);margin-top:4px;padding-top:4px}
.wg-pop-foot .btn{width:100%;justify-content:center}

/* ===================== reports ===================== */
.report-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px 10px;margin-bottom:14px;box-shadow:var(--sh-xs)}
.rc-presets{display:flex;flex-wrap:wrap;gap:6px}
.rc-chip{height:28px;padding:0 11px;border:1px solid var(--border);background:var(--bg);color:var(--text-muted);
  border-radius:var(--r-pill);font-size:var(--fs-base);font-weight:500;cursor:pointer;white-space:nowrap;transition:all .12s ease}
.rc-chip:hover{border-color:var(--border-strong);color:var(--text);background:var(--bg-subtle)}
.rc-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.rc-dates{display:flex;align-items:center;gap:7px;flex:none}
.rc-date{width:150px;flex:0 0 auto}
.rc-dash{color:var(--text-subtle)}

/* bar chart */
.rb-wrap{width:100%}
.rb-bars{display:flex;align-items:flex-end;gap:6px}
.rb-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.rb-val{font-size:10px;font-weight:600;color:var(--text-muted);white-space:nowrap;line-height:1}
.rb-bar{width:100%;max-width:38px;min-height:2px;border-radius:4px 4px 0 0;transition:height .3s ease}
.rb-xrow{display:flex;gap:6px;margin-top:6px}
.rb-x{flex:1;text-align:center;font-size:var(--fs-sm);color:var(--text-subtle);white-space:nowrap;overflow:hidden}
.rt-svg{display:block;overflow:visible}

/* donut */
.rd-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rd-total{font-size:5px;font-weight:800;fill:var(--text)}
.rd-legend{flex:1;min-width:120px;display:flex;flex-direction:column;gap:6px}
.rd-li{display:flex;align-items:center;gap:8px;font-size:var(--fs-base)}
.rd-dot{width:9px;height:9px;border-radius:2px;flex:none}
.rd-lv{color:var(--text-muted);font-size:var(--fs-sm)}

/* ranking bars */
.rank-list{display:flex;flex-direction:column;gap:9px}
.rank-row{display:grid;grid-template-columns:118px 1fr auto;align-items:center;gap:10px}
.rank-lb{font-size:var(--fs-base);color:var(--text)}
.rank-track{height:9px;background:var(--bg-sunken);border-radius:var(--r-pill);overflow:hidden}
.rank-fill{display:block;height:100%;border-radius:var(--r-pill);min-width:2px;transition:width .3s ease}
.rank-v{font-size:var(--fs-sm);font-weight:600;color:var(--text)}

@media(max-width:640px){
  .report-controls{gap:8px}
  .rc-dates{width:100%}
  .rc-date{flex:1;width:auto;min-width:0}
  .rank-row{grid-template-columns:96px 1fr auto}
}