/* ============================================================
   QTCV Demo — Stylesheet
   Kế thừa nguyên ngôn ngữ thiết kế dự án QLCV-1:
   Roboto · Phosphor · teal #0e8bc1 (màu xanh duy nhất) · sidebar
   gradient teal + wave · topbar breadcrumb pill · kpi-strip · card.
   ============================================================ */
@import url("../lib/roboto/roboto.css");
@import url("../lib/phosphor/phosphor-regular.css");
@import url("../lib/phosphor/phosphor-bold.css");
@import url("../lib/phosphor/phosphor-fill.css");

/* ---------- Design tokens (đồng bộ QLCV app.css) ---------- */
:root{
  --sidebar-width:280px; --sidebar-collapsed-w:72px; --topbar-height:70px; --footer-height:48px;
  --content-padding-x:30px; --content-padding-y:24px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;

  --primary:#0e8bc1; --primary-hover:#0b7ba8; --primary-dark:#064768;
  --primary-light:rgba(14,139,193,.1); --primary-subtle:rgba(14,139,193,.15);
  --accent-success:#2e8b57; --accent-warning:#d97706; --accent-danger:#dc2626; --accent-info:#0e8bc1;

  --surface:#ffffff; --surface-secondary:#f5f6f8; --surface-page:#f0f2f5; --surface-muted:#eceef1;
  --border:#dde1e6; --border-light:#e8ecf0; --border-strong:#c8d1da;

  --surface-success-soft:#d1fae5; --text-on-success-soft:#065f46; --border-success:#6ee7b7;
  --surface-warning-soft:#fef3c7; --text-on-warning-soft:#92400e; --border-warning:#fcd34d;
  --surface-danger-soft:#fee2e2; --text-on-danger-soft:#991b1b; --border-danger:#fca5a5;
  --surface-info-soft:rgba(14,139,193,.1); --text-on-info-soft:#095d82; --border-info:rgba(14,139,193,.35);
  --surface-neutral-soft:#f3f4f6; --text-on-neutral-soft:#4b5563;

  --text-heading:#050810; --text-body:#0e1420; --text-secondary:#374151;
  --text-muted:#4b5563; --text-placeholder:#6b7280; --text-faint:#9ca3af;

  --radius:6px; --radius-sm:4px; --radius-lg:10px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(15,23,42,.08),0 4px 12px rgba(15,23,42,.06);
  --shadow-card-lg:0 2px 6px rgba(15,23,42,.1),0 8px 24px rgba(15,23,42,.08);
  --shadow-dropdown:0 8px 24px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.08);
  --shadow-topbar:0 1px 0 var(--border),0 2px 12px rgba(15,23,42,.05);

  --font-size-xs:13px;--font-size-sm:14px;--font-size-base:14px;--font-size-md:15px;
  --font-size-lg:17px;--font-size-xl:22px;--font-size-2xl:26px;--font-size-3xl:34px;
  --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;
  --transition:.2s ease; --transition-fast:.15s ease;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--surface-page);color:var(--text-body);font-size:var(--font-size-md);
  line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
@keyframes brandColorShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ============ Wrapper ============ */
.qlcv-wrapper{display:flex;min-height:100vh}

/* ============ Sidebar — gradient teal + wave ============ */
.qlcv-sidebar{width:var(--sidebar-width);
  background:linear-gradient(180deg,var(--primary-dark) 0%,#0a5f8a 40%,var(--primary) 100%);
  box-shadow:3px 0 12px rgba(6,71,104,.2);position:fixed;left:0;top:0;height:100vh;
  overflow-y:auto;overflow-x:hidden;z-index:1040;display:flex;flex-direction:column;transition:width .22s ease}
.qlcv-sidebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:180px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 180'%3E%3Cpath d='M0,120 C70,160 140,80 210,120 C245,140 265,130 280,135 L280,180 L0,180 Z' fill='rgba(255,255,255,0.04)'/%3E%3Cpath d='M0,140 C60,110 130,170 200,140 C240,125 260,145 280,150 L280,180 L0,180 Z' fill='rgba(255,255,255,0.03)'/%3E%3Cpath d='M0,160 C50,150 100,170 150,155 C200,140 250,165 280,160 L280,180 L0,180 Z' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
  background-size:100% 100%}
.sidebar-header{height:var(--topbar-height);display:flex;align-items:center;gap:12px;padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0}
.logo-mark{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;color:#fff;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.logo-text{font-size:22px;font-weight:700;color:#fff;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.15);line-height:1}
.logo-sub{font-size:11px;color:rgba(255,255,255,.65);font-weight:400}
.sidebar-search{padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-search-box{display:flex;align-items:center;gap:var(--space-2);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:var(--space-2) var(--space-3);transition:all var(--transition-fast)}
.sidebar-search-box:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.sidebar-search-icon{color:rgba(255,255,255,.5);font-size:18px;line-height:1}
.sidebar-search-input{background:none;border:none;outline:none;color:#fff;font-size:var(--font-size-md);width:100%;font-family:inherit}
.sidebar-search-input::placeholder{color:rgba(255,255,255,.4)}
.sidebar-menu{padding:var(--space-3) 0;position:relative;z-index:1}
.menu-list{list-style:none;padding:0;margin:0}
.menu-link{display:flex;align-items:center;width:100%;text-align:left;background:transparent;border:none;
  padding:var(--space-3) var(--space-6);color:rgba(255,255,255,.75);font-size:var(--font-size-md);
  line-height:1.4;border-left:3px solid transparent;transition:background var(--transition-fast),color var(--transition-fast)}
.menu-link:hover{background:rgba(255,255,255,.1);color:#fff}
.menu-item.active>.menu-link{background:rgba(255,255,255,.18);color:#fff;font-weight:600;border-left-color:#fff}
.menu-icon{font-size:24px;width:30px;min-width:30px;text-align:center;margin-right:14px;color:rgba(255,255,255,.6)}
.menu-link:hover .menu-icon,.menu-item.active>.menu-link .menu-icon{color:#fff}
.menu-text{white-space:normal;line-height:1.25;word-break:break-word}
.menu-badge{margin-left:auto;font-size:11px;font-weight:600;background:rgba(255,255,255,.2);
  color:#fff;border-radius:var(--radius-pill);padding:1px 8px;min-width:20px;text-align:center}
.qlcv-sidebar::-webkit-scrollbar{width:3px}
.qlcv-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

/* ============ Main ============ */
.qlcv-main{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;
  min-height:100vh;max-height:100vh;overflow-y:auto;background:var(--surface-page);width:100%;transition:margin-left .22s ease}

/* ---- Thu gọn sidebar (desktop) ---- */
.qlcv-wrapper.sidebar-collapsed .qlcv-sidebar{width:var(--sidebar-collapsed-w)}
.qlcv-wrapper.sidebar-collapsed .qlcv-main{margin-left:var(--sidebar-collapsed-w)}
.qlcv-wrapper.sidebar-collapsed .logo-text,
.qlcv-wrapper.sidebar-collapsed .logo-sub,
.qlcv-wrapper.sidebar-collapsed .menu-text,
.qlcv-wrapper.sidebar-collapsed .menu-badge,
.qlcv-wrapper.sidebar-collapsed .sidebar-search{display:none}
.qlcv-wrapper.sidebar-collapsed .sidebar-header{justify-content:center;padding:0}
.qlcv-wrapper.sidebar-collapsed .menu-link{justify-content:center;padding:var(--space-3) 0;border-left-width:0;border-right:3px solid transparent}
.qlcv-wrapper.sidebar-collapsed .menu-item.active>.menu-link{border-right-color:#fff}
.qlcv-wrapper.sidebar-collapsed .menu-icon{margin-right:0}
.qlcv-wrapper.sidebar-collapsed .btn-toggle-sidebar{background:var(--primary-dark)}

/* ============ Topbar ============ */
.qlcv-topbar{height:var(--topbar-height);min-height:var(--topbar-height);background:var(--surface);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-topbar);position:sticky;top:0;z-index:1030;
  padding:0 var(--content-padding-x)}
.topbar-content{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-height);gap:var(--space-6)}
.topbar-left{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1;overflow:hidden}
.topbar-right{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}
.btn-toggle-sidebar{background:var(--primary);border:none;color:#fff;font-size:20px;height:36px;width:36px;
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(14,139,193,.3);transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.btn-toggle-sidebar:hover{background:var(--primary-hover);transform:scale(1.08)}
.topbar-breadcrumb{display:flex;align-items:center;flex-wrap:nowrap;margin-left:var(--space-3)}
.breadcrumb-link{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-4);flex:none;
  white-space:nowrap;border-radius:var(--radius-pill);color:#fff;font-weight:700;font-size:var(--font-size-base);
  background:linear-gradient(135deg,var(--primary),#3ab4e0);background-size:200% 100%;
  animation:brandColorShift 6s ease-in-out infinite;box-shadow:0 2px 8px rgba(14,139,193,.3)}
.breadcrumb-sep{font-size:16px;color:var(--text-muted);margin:0 var(--space-2)}
.breadcrumb-current{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-4);flex:none;
  white-space:nowrap;border-radius:var(--radius-pill);color:#fff;font-weight:600;font-size:var(--font-size-base);
  background:linear-gradient(135deg,#e8453c,#f07b6e);background-size:200% 100%;
  animation:brandColorShift 8s ease-in-out infinite;box-shadow:0 2px 6px rgba(232,69,60,.25);letter-spacing:-.005em}
.breadcrumb-icon{font-size:18px;color:rgba(255,255,255,.9)}
/* filter pills (period + tua thời gian) */
.topbar-filter-pills{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-3);min-width:0}
.filter-pill{display:inline-flex;align-items:center;gap:var(--space-2);height:34px;padding:0 var(--space-4);
  border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:600;color:#fff;
  background:linear-gradient(135deg,#059669,#34d399);background-size:200% 100%;
  animation:brandColorShift 6s ease-in-out infinite;box-shadow:0 2px 8px rgba(5,150,105,.3)}
/* period segmented inside topbar */
.tb-seg{display:flex;background:var(--surface-secondary);border-radius:var(--radius-pill);padding:3px;border:1px solid var(--border)}
.tb-seg{flex:none}
.tb-seg button{border:none;background:transparent;color:var(--text-muted);font-size:var(--font-size-sm);
  padding:5px 11px;border-radius:var(--radius-pill);font-weight:500}
.tb-seg button.on{background:var(--primary);color:#fff}
.tb-time{display:flex;align-items:center;gap:7px;min-width:120px;max-width:210px;flex:1;margin-left:var(--space-2)}
.tb-time i{color:var(--text-placeholder);font-size:17px;flex:none}
.tb-time .lbl{font-size:var(--font-size-sm);color:var(--text-secondary);min-width:54px;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:var(--border-strong);border-radius:3px;flex:1;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--surface)}
.hidden{display:none !important}
/* nút kịch bản demo */
.btn-scenario{display:flex;align-items:center;gap:6px;background:#7c3aed;color:#fff;border:none;border-radius:var(--radius);
  padding:8px 13px;font-size:var(--font-size-sm);font-weight:500;margin-right:8px;transition:background .15s}
.btn-scenario:hover{background:#6d28d9}
.btn-scenario i{font-size:18px}
/* bộ chọn vai */
.role-switch{position:relative}
.role-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-dropdown);min-width:288px;z-index:1050;overflow:hidden}
.role-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:none;
  border:none;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border-light)}
.role-item:last-child{border-bottom:none}
.role-item:hover{background:var(--primary-light)}
.ri-top{display:flex;align-items:center;gap:8px;font-size:var(--font-size-base);font-weight:500;color:var(--text-body)}
.ri-top i{font-size:18px;color:var(--primary)}
.ri-sub{font-size:11.5px;color:var(--text-muted);padding-left:26px}
.role-banner{display:flex;align-items:center;gap:10px;padding:9px 30px;background:var(--surface-warning-soft);
  border-bottom:1px solid var(--border-warning);color:var(--text-on-warning-soft);font-size:var(--font-size-sm)}
.role-banner b{font-weight:600}
.role-banner button{margin-left:auto;background:var(--text-on-warning-soft);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:4px 12px;font-size:var(--font-size-sm);cursor:pointer}
/* kịch bản demo */
.scn-step{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s}
.scn-step:hover{border-color:var(--primary);background:var(--primary-light)}
.scn-num{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:none}
.scn-ic{color:var(--primary);font-size:20px;flex:none}
.scn-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.scn-txt b{font-size:var(--font-size-base);font-weight:500}
.scn-txt span{font-size:12px;color:var(--text-muted)}
.scn-go{color:var(--text-faint)}

.btn-user-menu{display:flex;align-items:center;gap:var(--space-2);background:none;border:none;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius);color:var(--text-heading);font-weight:500;font-size:var(--font-size-md)}
.btn-user-menu:hover{background:var(--surface-muted)}
.btn-user-menu .ph-user-circle{font-size:24px;color:var(--text-secondary)}
.btn-user-menu:hover .ph-user-circle{color:var(--primary)}

/* ============ Content ============ */
.qlcv-content{flex:1;padding:var(--content-padding-y) var(--content-padding-x);width:100%}

/* Page header — gọn + dải gradient */
.page-header{position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(14,139,193,.09),var(--surface) 44%);
  border-radius:var(--radius-lg);padding:12px 22px;margin-bottom:var(--space-5);border:1px solid var(--border);
  box-shadow:var(--shadow-card);animation:phIn .4s ease}
.page-header::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),#7c3aed)}
@keyframes phIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.page-header h2{font-size:20px;font-weight:700;color:var(--text-heading);margin:0 0 3px;
  display:flex;align-items:center;gap:11px;line-height:1.25;letter-spacing:-.01em}
.page-header h2 i{color:#fff;background:linear-gradient(135deg,var(--primary),#7c3aed);width:34px;height:34px;
  border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none;
  box-shadow:0 3px 9px rgba(14,139,193,.32)}
.page-header p{color:var(--text-secondary);margin:0;font-size:var(--font-size-sm)}

/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.kpi-card{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-card);
  cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.kpi-body{overflow:hidden}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--primary)}
.kpi-icon{flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-lg);display:flex;align-items:center;
  justify-content:center;font-size:24px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.kpi-icon--primary{background:linear-gradient(135deg,#0d7eb5,#11a5e6)}
.kpi-icon--rose{background:linear-gradient(135deg,#be185d,#f472b6)}
.kpi-icon--amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.kpi-icon--teal{background:linear-gradient(135deg,#0d9488,#14b8a6)}
.kpi-icon--violet{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.kpi-icon--indigo{background:linear-gradient(135deg,#4338ca,#818cf8)}
.kpi-body{min-width:0;flex:1}
.kpi-value-row{display:flex;align-items:baseline;gap:var(--space-2)}
.kpi-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-heading);line-height:1.2;font-variant-numeric:tabular-nums}
.kpi-label{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-top:4px;line-height:1.35}
.kpi-trend{display:block;font-size:var(--font-size-xs);font-weight:600;white-space:normal;line-height:1.3;margin-top:5px}
.kpi-trend--good{color:var(--accent-success)} .kpi-trend--bad{color:var(--accent-danger)} .kpi-trend--stable{color:var(--text-muted)}
.kpi-spark{flex-shrink:0}

/* Dashboard card */
.dashboard-card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.dashboard-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card-lg)}
.dashboard-card-header{padding:13px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dashboard-card-title{font-size:15.5px;font-weight:700;color:var(--text-heading);margin:0;display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.dashboard-card-title>i:first-child{color:#fff;background:linear-gradient(135deg,var(--primary),#0a5f8a);width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex:none;box-shadow:0 2px 6px rgba(14,139,193,.26);transition:transform var(--transition-fast)}
.dashboard-card:hover .dashboard-card-title>i:first-child{transform:scale(1.08) rotate(-3deg)}
.dashboard-card-title .tip-ic{font-size:15px;color:var(--text-faint)}
.dashboard-card-body{padding:var(--space-4) var(--space-6) var(--space-6)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-4)}

/* badges */
.badge{font-size:var(--font-size-xs);padding:3px 11px;border-radius:var(--radius-pill);font-weight:600}
.badge-danger{background:var(--surface-danger-soft);color:var(--text-on-danger-soft)}
.badge-muted{background:var(--surface-neutral-soft);color:var(--text-on-neutral-soft)}
.badge-success{background:var(--surface-success-soft);color:var(--text-on-success-soft)}
.badge-warning{background:var(--surface-warning-soft);color:var(--text-on-warning-soft)}
.badge-info{background:var(--surface-info-soft);color:var(--text-on-info-soft)}

/* blocker rows */
.brow{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:center;
  padding:var(--space-3) 0;border-top:1px solid var(--border);cursor:pointer}
.brow:first-child{border-top:none}
.brow:hover .brow-name{color:var(--primary)}
.brow-name{font-size:var(--font-size-base);font-weight:500;transition:color .15s}
.brow-sub{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.brow-days{font-size:var(--font-size-xl);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.brow-days small{display:block;font-size:11px;color:var(--text-muted);font-weight:400}
.track{height:6px;border-radius:4px;background:var(--surface-muted);overflow:hidden;margin-top:8px}
.seg-fill{height:100%;border-radius:4px}

/* action inbox */
.act{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border)}
.act:first-child{border-top:none}
.act-ic{width:34px;height:34px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.act-txt{flex:1;font-size:var(--font-size-base)}
.btn{border-radius:var(--radius-sm);font-weight:500;font-size:var(--font-size-base);border:1px solid transparent;padding:var(--space-2) var(--space-5);transition:all var(--transition-fast)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-secondary{background:var(--surface);color:var(--text-body);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-secondary);border-color:var(--text-muted)}
.btn-ghost{font-size:var(--font-size-sm);color:var(--primary);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:5px 12px;background:transparent;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{background:var(--primary-light);border-color:var(--primary)}

/* 8 trục */
.trk8{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-5) var(--space-6)}
.t8-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.t8-name{font-size:var(--font-size-sm);color:var(--text-secondary)}
.t8-val{font-size:var(--font-size-base);font-weight:600}
.t8-foot{margin-top:5px;font-size:var(--font-size-xs)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:var(--font-size-base)}
.tbl th{text-align:left;font-size:var(--font-size-xs);font-weight:600;color:var(--text-muted);
  padding:10px 12px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.03em}
.tbl td{padding:12px;border-bottom:1px solid var(--border)}
.tbl tbody tr{cursor:pointer;transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-secondary)}
.tag{font-size:var(--font-size-xs);padding:2px 9px;border-radius:var(--radius-sm);background:var(--surface-muted);color:var(--text-secondary)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
.minibar{height:6px;border-radius:3px;background:var(--surface-muted);overflow:hidden;width:90px;display:inline-block;vertical-align:middle}
.minibar i{display:block;height:100%}

/* bộ lọc danh sách nhiệm vụ */
.tf-select{font-family:var(--font);font-size:var(--font-size-base);color:var(--text-body);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius);padding:8px 12px;max-width:280px;cursor:pointer}
.tf-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.tf-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:7px 12px;flex:1;min-width:200px}
.tf-search i{color:var(--text-placeholder);font-size:18px}
.tf-search input{border:none;outline:none;background:none;font-family:var(--font);font-size:var(--font-size-base);width:100%;color:var(--text-body)}

/* lý do filter chips */
.lydo-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;margin:0 8px 8px 0;
  border-radius:var(--radius-pill);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);transition:all var(--transition-fast)}
.lydo-chip:hover{border-color:var(--primary);color:var(--primary)}
.lydo-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.lydo-chip .cnt{font-size:11px;font-weight:600;opacity:.85}

/* map Việt Nam */
.map-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-4)}
.vnmap-box{display:flex;justify-content:center;padding:var(--space-2) 0}
.vnmap-svg{width:100%;max-width:440px;height:auto}
.prov-bubble circle{transition:r .12s,fill-opacity .12s}
.prov-bubble:hover circle{fill-opacity:1}
.legend{display:flex;align-items:center;gap:16px;margin-top:var(--space-4);font-size:var(--font-size-xs);color:var(--text-secondary);flex-wrap:wrap}
.legend i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:6px;vertical-align:-2px}

/* OKR tree */
.tree{font-size:var(--font-size-base)}
.tnode-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--radius);cursor:pointer}
.tnode-row:hover{background:var(--surface-secondary)}
.tchip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);flex:none}
/* 6 tầng — 6 màu phân biệt: BO indigo · M teal · C xanh lá · K hổ phách · N xám · KR tím */
.tchip-M{background:#cfe9f5;color:#064768}
.tchip-C{background:#d1fae5;color:#065f46}
.tchip-K{background:#fde9c8;color:#92400e}
.tchip-N{background:#e6eaf0;color:#334155}
.tchip-P{background:var(--surface-danger-soft);color:var(--text-on-danger-soft)}
/* P có 3 loại — 3 màu: Giao (xanh dương) · Phối hợp (xanh lá) · Điểm nghẽn (đỏ) */
.tchip-P-giao{background:var(--surface-info-soft);color:var(--text-on-info-soft)}
.tchip-P-phoihop{background:var(--surface-success-soft);color:var(--text-on-success-soft)}
.tchip-P-diemnghen{background:var(--surface-danger-soft);color:var(--text-on-danger-soft)}
.tchip-NQ{background:#e0e7ff;color:#3730a3}
.tchip-KR{background:#ede9fe;color:#6d28d9}
.okr-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;font-size:var(--font-size-xs);color:var(--text-secondary)}
.okr-legend .tchip{margin-right:4px}
.okr-pct{flex:none;margin-left:10px;font-weight:600;font-size:12px;font-variant-numeric:tabular-nums}
.tchip-BO{background:var(--surface-indigo-soft);color:var(--text-on-indigo-soft)}
.tnode-label{flex:1}
.tnode-meta{font-size:var(--font-size-xs);color:var(--text-muted)}
.tcaret{width:14px;text-align:center;color:var(--text-muted);font-size:11px;flex:none}
.children{margin-left:24px;border-left:1px solid var(--border);padding-left:8px}

/* hub Báo cáo quản trị */
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.rpt-card{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.rpt-card:hover{border-color:var(--primary);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.rpt-num{width:22px;height:22px;border-radius:50%;background:var(--surface-secondary);color:var(--text-muted);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.rpt-meta{flex:1;min-width:0}
.rpt-name{font-size:var(--font-size-base);font-weight:600;color:var(--text-heading)}
.rpt-desc{font-size:var(--font-size-xs);color:var(--text-muted);margin-top:2px}
.rpt-arr{color:var(--text-faint);font-size:16px}
.rpt-card:hover .rpt-arr{color:var(--primary)}

/* AI đánh giá (chỉ giảm) */
.ai-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;font-weight:600;
  padding:2px 8px;border-radius:var(--radius-pill);background:rgba(124,58,237,.1);color:#6d28d9;cursor:help}
.ai-chip i{font-size:13px}
.ai-chip.ai-warn{background:var(--surface-warning-soft);color:var(--text-on-warning-soft)}
.ai-col{color:#6d28d9;font-weight:600}
.ai-down{color:#6d28d9;font-size:11px;font-weight:600}
.ai-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:var(--radius);
  background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.2);color:#5b21b6;font-size:var(--font-size-sm);margin-bottom:var(--space-4)}
.ai-banner i{font-size:18px;color:#7c3aed;flex:none;margin-top:1px}

/* info icon trên header */
.tip-ic{font-size:15px;color:var(--text-faint);cursor:help;margin-left:6px;transition:color .15s;vertical-align:middle}
.tip-ic:hover{color:var(--primary)}
.th-tip{cursor:help;text-decoration:underline dotted var(--border-strong);text-underline-offset:3px}
.th-tip:hover{color:var(--primary)}
[data-tip].btn,[data-tip].btn-ghost,[data-tip].btn-scenario,[data-tip].btn-toggle-sidebar,[data-tip].lydo-chip{cursor:pointer}

/* tooltip đẹp */
#tipbox{position:fixed;z-index:2000;max-width:340px;background:#fde047;color:#1f2937;font-size:12.5px;line-height:1.55;
  padding:11px 14px;border-radius:8px;border:1px solid #eab308;box-shadow:0 10px 30px rgba(120,90,10,.28);opacity:0;transform:translateY(4px);
  transition:opacity .14s,transform .14s;pointer-events:none;font-family:'Roboto',sans-serif;font-weight:400}
#tipbox.show{opacity:1;transform:translateY(0)}
#tipbox::after{content:'';position:absolute;width:9px;height:9px;background:#fde047;border-right:1px solid #eab308;border-bottom:1px solid #eab308;transform:rotate(45deg)}
#tipbox[data-pos="top"]::after{bottom:-5px;left:var(--ax,50%);margin-left:-4px}
#tipbox[data-pos="bottom"]::after{top:-5px;left:var(--ax,50%);margin-left:-4px;border:none;border-top:1px solid #eab308;border-left:1px solid #eab308}
#tipbox .tip-h{font-weight:700;color:#111827;margin-bottom:4px;display:flex;align-items:center;gap:6px}
#tipbox .tip-h i{color:#92400e}

/* Trợ lý AI — hội thoại */
.d-col{display:flex;flex-direction:column}
.ai-conv{display:flex;flex-direction:column;gap:12px;max-height:440px;min-height:320px;overflow-y:auto;padding:4px 2px 10px}
.ai-msg{display:flex;gap:9px;max-width:88%}
.ai-msg--q{align-self:flex-end}
.ai-msg--a{align-self:flex-start}
.ai-av{width:30px;height:30px;border-radius:50%;flex:none;background:rgba(124,58,237,.12);color:#7c3aed;display:flex;align-items:center;justify-content:center;font-size:16px}
.ai-bub{padding:10px 14px;border-radius:12px;font-size:var(--font-size-base);line-height:1.5}
.ai-bub--q{background:var(--primary);color:#fff;border-bottom-right-radius:3px}
.ai-bub--a{background:var(--surface-secondary);color:var(--text-body);border-bottom-left-radius:3px}
.ai-inputrow{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.ai-inputrow input{flex:1;border:1px solid var(--border-strong);border-radius:var(--radius);padding:9px 13px;font-family:var(--font);font-size:var(--font-size-base);outline:none}
.ai-inputrow input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.ai-inputrow .btn{flex:none;display:flex;align-items:center;justify-content:center;width:44px}
.ai-suggest{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;font-size:var(--font-size-sm);color:var(--text-body);cursor:pointer;transition:border-color .15s,background .15s}
.ai-suggest:hover{border-color:var(--primary);background:var(--primary-light)}
.ai-suggest i{color:var(--primary);font-size:16px;flex:none}
.ai-alert{display:flex;align-items:flex-start;gap:8px;font-size:var(--font-size-sm);color:var(--text-on-warning-soft);
  background:var(--surface-warning-soft);border-radius:var(--radius);padding:8px 11px;margin-bottom:8px}
.ai-alert i{color:var(--accent-warning);flex:none;margin-top:1px}
/* tham số ngưỡng */
.cfg-num{display:inline-flex;align-items:center;gap:8px}
.cfg-num input{width:74px;border:1px solid var(--border-strong);border-radius:var(--radius);padding:7px 10px;font-family:var(--font);font-size:var(--font-size-base);text-align:center;outline:none}
.cfg-num input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.cfg-num span{font-size:var(--font-size-sm);color:var(--text-muted)}

.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.muted{color:var(--text-muted)} .small{font-size:var(--font-size-sm)} .mb0{margin-bottom:0}
.mt0{margin-top:0} .mt12{margin-top:12px} .mt18{margin-top:18px} .mt24{margin-top:24px}

/* popup danh sách (drill tầng 2) */
.list-scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1095}
.list-scrim.open{opacity:1;pointer-events:auto}
.list-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
  width:780px;max-width:94vw;max-height:82vh;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-dropdown);
  z-index:1096;display:flex;flex-direction:column;transition:opacity .2s,transform .2s}
.list-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.list-modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--border);flex:none}
.list-modal-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-heading);display:flex;align-items:center;gap:8px}
.list-modal-title i{color:var(--primary)}
.list-modal-body{padding:4px 22px 18px;overflow:auto}
.list-modal-body .tbl tbody tr{cursor:pointer}
.list-modal-body .tbl tbody tr:hover{background:var(--primary-light)}
.list-close{border:none;background:transparent;color:var(--text-muted);font-size:18px;cursor:pointer}
.list-close:hover{color:var(--accent-danger)}
/* nút mở danh sách trên card */
.card-drill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-strong);background:transparent;color:var(--primary);
  border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s;white-space:nowrap}
.card-drill:hover{background:var(--primary-light);border-color:var(--primary)}
.kpi-card[data-drill],.kpi-card[data-spk]{position:relative;cursor:pointer}
.kpi-card[data-drill]::after,.kpi-card[data-spk]::after{content:'\2197';position:absolute;top:9px;right:12px;color:var(--text-faint);font-size:13px;font-weight:600}
.kpi-card[data-drill]:hover::after,.kpi-card[data-spk]:hover::after{color:var(--primary)}

/* drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1090}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:480px;max-width:92vw;background:var(--surface);
  border-left:1px solid var(--border);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:1100;display:flex;flex-direction:column;box-shadow:var(--shadow-dropdown)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border)}
.drawer-head h2{font-size:var(--font-size-xl);font-weight:600;margin:0;color:var(--text-heading)}
.drawer-close{border:none;background:transparent;color:var(--text-muted);font-size:20px;line-height:1}
.drawer-close:hover{color:var(--accent-danger)}
.drawer-body{padding:var(--space-6);overflow-y:auto}
.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 18px}
.tl-item::before{content:'';position:absolute;left:-21px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--primary)}
.tl-item.blk::before{border-color:var(--accent-danger)}
.tl-date{font-size:var(--font-size-xs);color:var(--text-muted)}
.tl-txt{font-size:var(--font-size-base);margin-top:2px}
.kv{display:grid;grid-template-columns:140px 1fr;gap:9px 16px;font-size:var(--font-size-base);margin:4px 0 18px}
.kv dt{color:var(--text-muted)} .kv dd{font-weight:500;margin:0}
.btn-primary.block{width:100%;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px}

@media(max-width:1180px){ .tb-time .lbl{display:none} .tb-time{min-width:90px} }
@media(max-width:992px){
  .grid-2,.map-wrap{grid-template-columns:1fr}
  .cartogram{grid-template-columns:repeat(6,1fr)}
  .qlcv-sidebar{transform:translateX(-100%);transition:transform .25s ease}
  .qlcv-wrapper.sidebar-open .qlcv-sidebar{transform:translateX(0)}
  .qlcv-main{margin-left:0}
}

/* ===== Bổ sung: caret cây, nhãn kỳ, hộp vai trò, trợ lý AI nổi ===== */
.tcaret{cursor:pointer;padding:0 4px;border-radius:4px;transition:background var(--transition-fast)}
.tnode-row:hover .tcaret{background:var(--surface-muted)}
.tb-seg-label{display:inline-flex;align-items:center;gap:5px;font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500;margin-right:2px}
.tb-seg-label i{font-size:15px;color:var(--text-placeholder)}

/* Hộp chú thích vai trò */
.role-banner{position:relative;display:block;flex:none;margin:12px 20px 0;padding:14px 48px 14px 18px;border:1px solid var(--border);border-left:4px solid var(--accent-info);border-radius:var(--radius);box-sizing:border-box;overflow:visible}
.role-banner--ok{background:var(--surface-success-soft);border-left-color:var(--accent-success);border-color:#bfe3cb}
.role-banner--warn{background:var(--surface-warning-soft);border-left-color:var(--accent-warning);border-color:#f0dcae}
.role-banner .rb-close{position:absolute;top:10px;right:12px;width:26px;height:26px;border:none;background:rgba(0,0,0,.06);color:var(--text-secondary);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.role-banner .rb-close:hover{background:rgba(0,0,0,.12);color:var(--heading)}
.role-banner .rb-top{display:flex;align-items:center;gap:12px}
.role-banner .rb-ava{width:40px;height:40px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--primary-dark);flex:none;border:1px solid var(--border)}
.role-banner .rb-id{flex:1;min-width:0}
.role-banner .rb-name{font-size:var(--font-size-md)}
.role-banner .rb-name b{font-weight:700}
.role-banner .rb-role{font-size:var(--font-size-sm);color:var(--text-secondary)}
.role-banner .rb-tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--font-size-sm);font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.role-banner .rb-tag-ok{background:var(--accent-success);color:#fff}
.role-banner .rb-tag-limit{background:var(--accent-warning);color:#fff}
.role-banner #roleBack{margin-left:8px;background:var(--text-secondary);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 12px;font-size:var(--font-size-sm);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.role-banner #roleBack:hover{background:var(--primary-dark)}
.role-banner .rb-scope{margin-top:10px;font-size:var(--font-size-sm);color:var(--text-secondary)}
.role-banner .rb-scope b{color:var(--heading);font-weight:600}
.role-banner .rb-cols{display:flex;gap:24px;margin-top:10px;flex-wrap:wrap}
.role-banner .rb-col{flex:1;min-width:220px}
.role-banner .rb-h{font-size:var(--font-size-sm);font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:5px}
.role-banner .rb-li{font-size:var(--font-size-sm);padding:2px 0 2px 18px;position:relative;color:var(--text-secondary)}
.role-banner .rb-yes::before{content:"✓";position:absolute;left:2px;color:var(--accent-success);font-weight:700}
.role-banner .rb-no::before{content:"✕";position:absolute;left:2px;color:var(--accent-danger);font-weight:700}
@media(max-width:760px){ .role-banner .rb-top{flex-wrap:wrap} .role-banner #roleBack{margin-left:0} }

/* Trợ lý AI nổi */
.ai-fab{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#0e8bc1);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(124,58,237,.4);z-index:1200;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.ai-fab:hover{transform:scale(1.07);box-shadow:0 8px 26px rgba(124,58,237,.5)}
.ai-fab.hidden{display:none}
.ai-fab .ai-fab-dot{position:absolute;top:6px;right:8px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #fff;animation:aifbpulse 1.8s infinite}
@keyframes aifbpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.ai-fab-panel{position:fixed;right:24px;bottom:24px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 80px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 16px 50px rgba(5,8,16,.28);
  z-index:1201;display:none;flex-direction:column;overflow:hidden}
.ai-fab-panel.open{display:flex;animation:aifbup .22s ease}
@keyframes aifbup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.ai-fab-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(135deg,#7c3aed,#0e8bc1);color:#fff}
.ai-fab-title{display:flex;align-items:center;gap:8px;font-weight:600}
.ai-fab-ic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.ai-fab-close{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.85}
.ai-fab-close:hover{opacity:1}
.ai-fab-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface-secondary)}
.ai-fab-tabs button{flex:1;border:none;background:transparent;padding:10px 6px;font-size:var(--font-size-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent}
.ai-fab-tabs button.on{color:var(--primary);border-bottom-color:var(--primary);background:var(--surface);font-weight:600}
.ai-fab-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column}
.aifb-conv{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.aifb-msg{font-size:var(--font-size-sm);line-height:1.5;max-width:90%;padding:9px 12px;border-radius:12px}
.aifb-msg.q{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:3px}
.aifb-msg.a{align-self:flex-start;background:var(--surface-secondary);color:var(--heading);border-bottom-left-radius:3px;display:flex;gap:7px}
.aifb-msg.a i{color:#7c3aed;margin-top:2px;flex:none}
.aifb-chips{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.aifb-chip{text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:7px 10px;font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer}
.aifb-chip:hover{border-color:var(--primary);color:var(--primary)}
.aifb-input{display:flex;gap:6px}
.aifb-input input{flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;font-size:var(--font-size-sm);font-family:inherit}
.aifb-input button{border:none;background:var(--primary);color:#fff;border-radius:var(--radius);width:40px;cursor:pointer;font-size:16px}
.aifb-voice{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px}
.aifb-mic{width:84px;height:84px;border-radius:50%;border:none;background:linear-gradient(135deg,#7c3aed,#0e8bc1);color:#fff;font-size:34px;cursor:pointer;box-shadow:0 6px 18px rgba(124,58,237,.35)}
.aifb-mic.rec{animation:aifbpulse 1.2s infinite}
.aifb-vstat{margin-top:14px;font-size:var(--font-size-sm);color:var(--text-secondary)}
.aifb-vans{margin-top:12px;width:100%;display:flex;flex-direction:column;gap:8px}
.aifb-pro-h{font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:10px}
.aifb-alert{display:flex;gap:8px;align-items:flex-start;font-size:var(--font-size-sm);background:var(--surface-warning-soft);color:var(--text-on-warning-soft);padding:9px 11px;border-radius:var(--radius);margin-bottom:8px}
.aifb-alert i{color:var(--accent-warning);margin-top:1px;flex:none}
.aifb-pro-card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 13px;margin-top:6px}
.btn.block{width:100%;justify-content:center}
@media(max-width:520px){ .ai-fab-panel{right:8px;bottom:8px;width:calc(100vw - 16px)} }

/* Hiệu ứng "chạy" cho 2 đường AI nét đứt trên biểu đồ Xu hướng điều hành */
@keyframes aiDashFlow { to { stroke-dashoffset: -24; } }
#trendChart .apexcharts-series path.ai-flow{
  animation: aiDashFlow 1s linear infinite;
  filter: drop-shadow(0 0 2.5px rgba(124,58,237,.45));
}

/* ===== Cockpit: Việc cần ưu tiên xử lý · thống kê NĐ335 · mục tiêu cần gỡ · glow ===== */
.prio-list{display:flex;flex-direction:column;gap:10px}
.prio-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-left:4px solid var(--pc);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.prio-item:hover{transform:translateX(3px);box-shadow:var(--shadow-card)}
.prio-ic{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--pc);background:color-mix(in srgb,var(--pc) 13%,#fff)}
.prio-main{flex:1;min-width:0}
.prio-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.prio-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;background:var(--pc);padding:2px 8px;border-radius:var(--radius-pill)}
.prio-rank{font-size:11px;color:var(--text-muted);font-weight:600}
.prio-title{font-weight:600;font-size:var(--font-size-md);line-height:1.35;margin-bottom:3px}
.prio-ctx{font-size:12.5px;color:var(--text-secondary)}
.prio-ctx i{color:var(--text-faint)}
.prio-ctx b{font-weight:700}
.prio-go{flex:none;border:1px solid var(--pc);color:var(--pc);background:transparent;border-radius:var(--radius);padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:background .15s,color .15s}
.prio-item:hover .prio-go{background:var(--pc);color:#fff}

.donut-stats{display:flex;gap:10px;margin-top:6px}
.ds{flex:1;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-secondary)}
.ds-ic{font-size:22px;flex:none}
.ds-v{font-size:20px;font-weight:700;color:var(--text-heading);line-height:1.1}
.ds-l{font-size:11.5px;color:var(--text-muted);margin-top:1px}

.mt-pri-list{display:flex;flex-direction:column}
.mt-pri{display:flex;align-items:center;gap:12px;padding:11px 6px;cursor:pointer;border-bottom:1px solid var(--border-light);transition:background .15s}
.mt-pri:last-child{border-bottom:none}
.mt-pri:hover{background:var(--surface-secondary)}
.mt-rank{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.mt-body{flex:1;min-width:0}
.mt-name{font-weight:600;font-size:var(--font-size-sm);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-bar{height:7px;background:var(--surface-muted);border-radius:4px;overflow:hidden;margin-bottom:4px}
.mt-bar i{display:block;height:100%;border-radius:4px;animation:mtGrow .8s ease}
@keyframes mtGrow{from{width:0 !important}}
.mt-sub{font-size:12px;color:var(--text-secondary)}
.mt-go{color:var(--text-faint);font-size:16px;flex:none}

/* glow cho biểu đồ */
.glow-chart{transition:filter .3s}
.glow-chart:hover{filter:drop-shadow(0 5px 12px rgba(14,139,193,.22))}
#radar8 .apexcharts-radar-series path{filter:drop-shadow(0 6px 9px rgba(239,68,68,.22))}

/* Tiêu đề phụ trong thẻ biểu đồ ghép */
.chart-subhead{display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--font-size-sm);color:var(--text-secondary);margin:2px 0 8px}
.chart-subhead i{color:var(--primary);font-size:16px}