:root{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#EBEFF5; --surface-3:#E2E7EF;
  --ink:#0E1B2C; --ink-soft:#4E5D74; --ink-faint:#8B98AC;
  --border:#DDE3EC; --border-soft:#E9EDF3;
  --primary:#11305C; --primary-2:#1C56A8; --accent:#0E9AB8;
  --success:#128A5E; --success-bg:#E3F5EC; --success-ink:#0E6E4B;
  --warning:#B4700B; --warning-bg:#FBF0DA; --warning-ink:#8C5808;
  --danger:#BB332E; --danger-bg:#FBEAE9; --danger-ink:#93241F;
  --info-bg:#E4EEFC; --info-ink:#1C56A8;
  --r-xs:6px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-pill:999px;
  --shadow:0 0 0 1px rgba(14,27,44,.04), 0 1px 2px rgba(14,27,44,.06), 0 8px 18px -10px rgba(14,27,44,.14);
  --shadow-hover:0 0 0 1px rgba(14,27,44,.06), 0 4px 10px rgba(14,27,44,.07), 0 16px 30px -14px rgba(14,27,44,.2);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1420; --surface:#121D2C; --surface-2:#182436; --surface-3:#203046;
    --ink:#E8EDF5; --ink-soft:#9FAEC4; --ink-faint:#6C7B93;
    --border:#25334A; --border-soft:#1D293C;
    --primary:#11233A; --primary-2:#3E76C9; --accent:#38C4E0;
    --success:#33C98C; --success-bg:#103427; --success-ink:#6CE0AD;
    --warning:#E4A94A; --warning-bg:#3A2C10; --warning-ink:#F0C177;
    --danger:#F0716B; --danger-bg:#3A1614; --danger-ink:#F79F9A;
    --info-bg:#16283F; --info-ink:#8FB6EA;
    --shadow:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(0,0,0,.6);
    --shadow-hover:0 0 0 1px rgba(255,255,255,.07), 0 16px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1420; --surface:#121D2C; --surface-2:#182436; --surface-3:#203046;
  --ink:#E8EDF5; --ink-soft:#9FAEC4; --ink-faint:#6C7B93;
  --border:#25334A; --border-soft:#1D293C;
  --primary:#11233A; --primary-2:#3E76C9; --accent:#38C4E0;
  --success:#33C98C; --success-bg:#103427; --success-ink:#6CE0AD;
  --warning:#E4A94A; --warning-bg:#3A2C10; --warning-ink:#F0C177;
  --danger:#F0716B; --danger-bg:#3A1614; --danger-ink:#F79F9A;
  --info-bg:#16283F; --info-ink:#8FB6EA;
  --shadow:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -12px rgba(0,0,0,.6);
  --shadow-hover:0 0 0 1px rgba(255,255,255,.07), 0 16px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-kerning:normal; font-feature-settings:"tnum" 1, "cv11" 1;
}
::selection{background:var(--accent); color:#fff;}
button{font-family:inherit;}
svg{shape-rendering:geometricPrecision;}
svg[aria-hidden="true"], .navitem svg, .ltab svg, .icon-btn svg, .btn svg, .stat-ico svg,
.module-ico svg, .notif-ico svg, .brand-mark svg, .account-menu-item svg, .search-box svg{
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm);}
.mono, .cell-sub, .val, .tm{font-variant-numeric:tabular-nums;}
*{scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:var(--r-pill); border:2px solid transparent; background-clip:content-box;}
.mono{font-family:var(--mono); font-size:12.3px; color:var(--ink-soft);}

/* ---------- Thẻ & KPI ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:6px;}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:13px 15px; display:flex; gap:12px; align-items:center;
}
.stat-ico{width:36px; height:36px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 2px 6px -2px rgba(14,27,44,.35);}
.stat-ico svg{width:17px; height:17px;}
.stat-card .k{font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:1px;}
.stat-card .v{font-size:19px; font-weight:700; line-height:1.2; letter-spacing:-.2px; overflow-wrap:anywhere;}
.tone-blue.stat-card{background:color-mix(in srgb, var(--primary-2) 7%, var(--surface)); border-color:color-mix(in srgb, var(--primary-2) 24%, var(--border));}
.tone-orange.stat-card{background:color-mix(in srgb, var(--warning) 9%, var(--surface)); border-color:color-mix(in srgb, var(--warning) 28%, var(--border));}
.tone-green.stat-card{background:color-mix(in srgb, var(--success) 8%, var(--surface)); border-color:color-mix(in srgb, var(--success) 26%, var(--border));}
.tone-red.stat-card{background:color-mix(in srgb, var(--danger) 7%, var(--surface)); border-color:color-mix(in srgb, var(--danger) 26%, var(--border));}
.tone-cyan.stat-card{background:color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 28%, var(--border));}
.tone-blue .stat-ico{background:var(--primary-2);}
.tone-orange .stat-ico{background:#D98A12;}
.tone-green .stat-ico{background:var(--success);}
.tone-red .stat-ico{background:var(--danger);}
.tone-cyan .stat-ico{background:var(--accent);}

/* ---------- Tag, nút, ô nhập ---------- */
.tag{display:inline-flex; align-items:center; font-size:11.3px; font-weight:600; padding:2px 9px; border-radius:6px; white-space:nowrap; border:1px solid color-mix(in srgb, currentColor 14%, transparent);}
.tag.ok{background:var(--success-bg); color:var(--success-ink);}
.tag.warn{background:var(--warning-bg); color:var(--warning-ink);}
.tag.bad{background:var(--danger-bg); color:var(--danger-ink);}
.tag.info{background:var(--info-bg); color:var(--info-ink);}
.tag.mute{background:var(--surface-2); color:var(--ink-soft);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:7px 14px; min-height:34px;
  border-radius:8px; font-size:12.8px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:.15s ease; box-shadow:0 1px 1px rgba(14,27,44,.05);
}
.btn svg{width:15px; height:15px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary-2); color:#fff; box-shadow:0 2px 6px color-mix(in srgb, var(--primary-2) 38%, transparent);}
.btn-primary:hover{filter:brightness(.93);}
.btn-ghost{background:var(--surface); border-color:var(--border); color:var(--ink);}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-faint);}
.btn-sm{min-height:30px; padding:5px 11px; font-size:12px; border-radius:7px;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}
.search-box{display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; min-height:34px; padding:0 11px; background:var(--surface); flex:1; min-width:180px; max-width:320px;}
.search-box svg{width:15px; height:15px; color:var(--ink-faint); flex:none;}
.search-box input{border:none; outline:none; background:none; color:var(--ink); font-size:12.6px; width:100%; font-family:inherit;}
.search-box:focus-within, .field input:focus, .field select:focus, .field textarea:focus,
.row-set input[type=text]:focus, .select-mini:focus{border-color:var(--accent); box-shadow:var(--ring); outline:none;}
.select-mini{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; min-height:34px; padding:0 10px; font-size:12.3px; font-family:inherit; cursor:pointer;}

.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:18px 20px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.wide{grid-column:1 / -1;}
.field label{font-size:12.3px; font-weight:600;}
.field input, .field select, .field textarea{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 11px; min-height:36px; font-size:13px; font-family:inherit; width:100%;}
.field textarea{min-height:96px; resize:vertical;}
.form-foot{display:flex; gap:10px; justify-content:flex-end; padding:0 20px 18px;}

.settings-section{padding:18px 20px; margin-bottom:14px;}
.settings-section h3{margin:0 0 3px; font-size:14px;}
.settings-section .desc{font-size:12px; color:var(--ink-faint); margin:0 0 10px;}
.row-set{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--border-soft);}
.row-set .lbl{font-size:13px; font-weight:600;}
.row-set .sub{font-size:11.8px; color:var(--ink-faint); margin-top:2px;}
.row-set input[type=text]{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:8px; padding:8px 11px; font-size:12.8px; font-family:inherit; width:260px; max-width:50vw;}
.switch{position:relative; width:40px; height:24px; flex:none;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:var(--surface-3); border-radius:var(--r-pill); cursor:pointer; transition:.15s; box-shadow:inset 0 0 0 1px rgba(14,27,44,.08);}
.slider::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
input:checked + .slider{background:var(--primary-2);}
input:checked + .slider::before{transform:translateX(16px);}

/* ---------- Thanh tiến độ, feed, thông báo ---------- */
.bars{display:flex; flex-direction:column; gap:14px; padding:18px 20px;}
.bar-row{display:grid; grid-template-columns:190px 1fr 42px; align-items:center; gap:12px;}
.bar-row .lbl{font-size:12.3px; font-weight:600;}
.bar-track{height:10px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(14,27,44,.04);}
.bar-fill{height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--primary-2), var(--accent));}
.bar-row .val{font-size:12px; color:var(--ink-soft); text-align:right;}
.feed{padding:16px;}
.feed h3{margin:0 0 10px; font-size:13.5px; font-weight:700;}
.feed-item{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft);}
.feed-item:last-child{border-bottom:none;}
.feed-dot{width:7px; height:7px; border-radius:50%; margin-top:6px; flex:none;}
.feed-item p{margin:0; font-size:12.4px;}
.feed-item span{display:block; font-size:11px; color:var(--ink-faint); margin-top:2px;}

.notif-list{display:flex; flex-direction:column;}
.notif-item{display:flex; gap:12px; align-items:flex-start; padding:15px 18px; border-bottom:1px solid var(--border-soft); cursor:pointer;}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--primary-2);}
.notif-ico{width:36px; height:36px; border-radius:var(--r-md); flex:none; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(14,27,44,.06);}
.notif-ico svg{width:17px; height:17px;}
.notif-ico.danger{background:var(--danger-bg); color:var(--danger-ink);}
.notif-ico.warning{background:var(--warning-bg); color:var(--warning-ink);}
.notif-ico.success{background:var(--success-bg); color:var(--success-ink);}
.notif-ico.info{background:var(--info-bg); color:var(--info-ink);}
.notif-ico.mute{background:var(--surface-2); color:var(--ink-soft);}
.notif-body{flex:1; min-width:0;}
.notif-body .t{font-size:13.4px; font-weight:600; margin:0 0 2px;}
.notif-body .d{font-size:12.3px; color:var(--ink-soft); margin:0; line-height:1.5;}
.notif-body .tm{font-size:11px; color:var(--ink-faint); margin:5px 0 0;}
.notif-dot-mark{width:7px; height:7px; border-radius:50%; background:var(--primary-2); flex:none; margin-top:6px;}
.empty-note{padding:28px 16px; text-align:center; color:var(--ink-faint); font-size:12.8px;}

.module-ico{width:64px; height:64px; border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 16px -8px rgba(14,27,44,.4);}
.module-ico svg{width:28px; height:28px;}
.grad-1{background:linear-gradient(155deg,#7DD3FC,#2563EB);}
.grad-2{background:linear-gradient(155deg,#FCA5A5,#DC2626);}
.grad-4{background:linear-gradient(155deg,#FDBA74,#D97706);}
.grad-5{background:linear-gradient(155deg,#C4B5FD,#6D28D9);}

/* ---------- Toast thông báo mới ---------- */
#toasts{position:fixed; right:20px; bottom:20px; display:grid; gap:8px; z-index:80; max-width:min(380px, calc(100vw - 32px));}
.toast{background:var(--primary); color:#fff; padding:12px 16px; border-radius:var(--r-lg); box-shadow:0 8px 24px rgba(0,0,0,.3); font-size:13px; cursor:pointer; border-left:4px solid var(--accent);}
.toast b{display:block; font-size:13px;}

/* ---------- Trang đăng nhập ---------- */
body.login{display:grid; place-items:center; min-height:100vh; padding:16px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, #DCE6F3), var(--bg) 60%) fixed;}
:root[data-theme="dark"] body.login{background:linear-gradient(135deg,#0E1A2C,var(--bg) 60%) fixed;}
body.login .card{width:100%; max-width:400px; padding:30px 28px; overflow:visible;}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.login-brand .mark{width:40px; height:40px; border-radius:var(--r-md); background:linear-gradient(155deg,var(--accent),#0B5E82); display:flex; align-items:center; justify-content:center; color:#fff;}
.login-brand .mark svg{width:22px; height:22px;}
.login-brand b{font-size:20px; font-weight:800; letter-spacing:-.3px; display:block; line-height:1.1;}
.login-brand span{font-size:12px; color:var(--ink-soft);}
body.login h1{font-size:16px; margin:0 0 14px;}
body.login label{display:block; margin:12px 0; font-weight:600; font-size:12.8px;}
body.login input{width:100%; padding:11px 12px; margin-top:5px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:var(--r-md); font-size:14px; font-family:inherit;}
body.login input:focus{border-color:var(--accent); box-shadow:var(--ring); outline:none;}
body.login button[type=submit]{width:100%; padding:11px; margin-top:6px; background:var(--primary-2); color:#fff; border:0; border-radius:var(--r-md); font-size:14.5px; font-weight:600; cursor:pointer; min-height:44px;}
.error{background:var(--danger-bg); color:var(--danger-ink); padding:9px 12px; border-radius:var(--r-md); font-size:12.8px; margin:0 0 6px;}
.switch-ui{text-align:center; font-size:12.5px; margin:16px 0 0;}
.switch-ui a{color:var(--primary-2);}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* ---------- Xác thực hai bước / bảo mật ---------- */
body.login.top{place-items:start center; padding-top:max(24px, env(safe-area-inset-top));}
body.login .card.wide{max-width:480px;}
body.login h2{font-size:14.5px; margin:20px 0 8px;}
.hint{font-size:13px; color:var(--ink-soft); margin:0 0 12px; line-height:1.55;}
.notice{background:var(--warning-bg); color:var(--warning-ink); padding:10px 12px; border-radius:var(--r-md); font-size:13px; margin:0 0 12px;}
.okmsg{background:var(--success-bg); color:var(--success-ink); padding:9px 12px; border-radius:var(--r-md); font-size:13px; margin:0 0 12px;}
input.otp{text-align:center; letter-spacing:.35em; font-family:var(--mono); font-size:22px !important; font-weight:600;}
body.login label.check{display:flex; align-items:flex-start; gap:10px; font-weight:500; font-size:13px; margin:12px 0;}
body.login label.check input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--primary-2);}
body.login label.check small{color:var(--ink-faint); display:block;}
.alt{text-align:center; margin:14px 0 0; font-size:13px;}
.alt a{color:var(--primary-2);}
button.linkbtn{background:none !important; border:0; color:var(--ink-soft) !important; font-size:13px !important; width:auto !important; min-height:36px !important; margin:0 !important; padding:4px 8px !important; text-decoration:underline; cursor:pointer;}
form.inline{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap;}
form.inline input.otp{flex:1; min-width:140px; width:auto; margin:0; font-size:18px !important;}
form.inline .btn{min-height:46px;}
.btn.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, var(--border));}
.qrbox{display:flex; justify-content:center; margin:6px 0 12px;}
#qr{width:232px; max-width:100%; background:#fff; padding:6px; border-radius:var(--r-md); border:1px solid var(--border);}
#qr svg{display:block; width:100%; height:auto;}
.keybox{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); border-radius:var(--r-md); padding:8px 10px;}
.keybox code{font-family:var(--mono); font-size:14px; letter-spacing:.08em; word-break:break-all;}
.codes{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0;}
.codes code{font-family:var(--mono); font-size:15px; font-weight:600; text-align:center; background:var(--surface-2); border:1px dashed var(--border); border-radius:var(--r-md); padding:9px 4px; letter-spacing:.06em;}
.row-btns{display:flex; gap:10px; flex-wrap:wrap;}
.facts{margin:0 0 6px; display:grid; gap:6px;}
.facts div{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--border-soft);}
.facts dt{color:var(--ink-faint);} .facts dd{margin:0; font-weight:600;}
a.btn{text-decoration:none;}
@media print{ body.login{background:#fff !important;} .row-btns, .alt, .login-brand span{display:none !important;} }