/* Phong cách theo crm_ui (token màu, bo góc, bóng, sidebar trắng). Không dùng logo/tên của dự án đó. */
  @font-face { font-family:Inter; src:url(fonts/Inter-Variable.ttf); font-weight:100 900; }
  :root { --bg:#f8fafc; --surface:#fff; --surface-2:#f4f6fb; --border:#e4e9f2; --border-strong:#d2d9e6; --text:#0f172a; --text-2:#1f2937; --muted:#64748b; --muted-2:#94a3b8;
    --accent:#6366f1; --accent-hover:#4f46e5; --accent-soft:#eef2ff; --success:#059669; --success-soft:#d1fae5; --warning:#d97706; --warning-soft:#fef3c7; --danger:#dc2626; --danger-soft:#fee2e2;
    --shadow-xs:0 1px 1px rgba(15,23,42,.04); --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 1px rgba(15,23,42,.03); --shadow-md:0 4px 8px -2px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.05);
    --shadow-lg:0 12px 24px -8px rgba(15,23,42,.10),0 4px 8px -4px rgba(15,23,42,.06); --shadow-focus:0 0 0 3px rgba(99,102,241,.18); --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.55 Inter,system-ui,'Segoe UI',Roboto,sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; font-feature-settings:'cv05' 1,'ss03' 1; }
  a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent-hover); text-decoration:underline; }
  h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; } .sub { color:var(--muted); font-size:13.5px; margin:0 0 22px; }
  .banner { background:var(--warning-soft); color:#92400e; text-align:center; font-size:12.5px; font-weight:600; padding:6px; border-bottom:1px solid #fde68a; }
  .wrap { display:grid; grid-template-columns:248px 1fr; min-height:calc(100vh - 31px); }
  nav { background:var(--surface); border-right:1px solid var(--border); padding:18px 14px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; }
  nav .logo { display:flex; align-items:center; gap:11px; font-size:16px; font-weight:800; letter-spacing:-.02em; padding:6px 8px 14px; margin-bottom:10px; border-bottom:1px solid var(--border); }
  nav .logo i { width:36px; height:36px; border-radius:var(--r-md); background:var(--accent); color:#fff; display:inline-grid; place-items:center; font-style:normal; box-shadow:0 4px 12px -2px rgba(99,102,241,.5); }
  nav .logo small { display:block; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; }
  nav .sec { font-size:10px; text-transform:uppercase; color:var(--muted-2); letter-spacing:.8px; font-weight:700; padding:8px 12px 6px; }
  nav button { position:relative; display:flex; gap:11px; align-items:center; width:100%; text-align:left; background:none; border:0; color:var(--text-2); padding:8px 12px; border-radius:var(--r-md); font:500 13.5px Inter,sans-serif; cursor:pointer; transition:background .15s,color .15s; }
  nav button:hover { background:var(--surface-2); color:var(--text); }
  nav button.on { background:var(--accent-soft); color:var(--accent-hover); font-weight:600; }
  nav button.on::before { content:''; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; background:var(--accent); border-radius:0 3px 3px 0; }
  nav .badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; display:inline-grid; place-items:center; }
  .main { display:flex; flex-direction:column; min-width:0; }
  .topbar { height:64px; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); padding:0 28px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
  .topbar .t { font-size:13.5px; color:var(--muted); font-weight:500; display:flex; gap:8px; align-items:center; }
  .chip { padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-hover); font-size:11px; font-weight:700; letter-spacing:.5px; }
  .user { display:flex; gap:12px; align-items:center; } .user b { display:block; font-size:13px; } .user div span { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
  .avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:inline-grid; place-items:center; font-weight:700; font-size:13px; box-shadow:0 2px 6px -1px rgba(99,102,241,.45); }
  main { padding:26px 28px 40px; max-width:1240px; width:100%; }
  .grid { display:grid; gap:14px; } .g4 { grid-template-columns:repeat(4,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g2 { grid-template-columns:repeat(2,1fr); }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
  .kpi { display:flex; flex-direction:column; gap:6px; transition:box-shadow .2s,transform .2s; } .kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .kpi > span:first-child { font-size:11.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); font-weight:700; }
  .kpi b { font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-feature-settings:'tnum'; } .kpi span { color:var(--muted); font-size:12.5px; }
  .up { color:var(--success)!important; } .down { color:var(--danger)!important; }
  table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--border); font-size:13.5px; }
  th { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; background:var(--surface-2); } tr:last-child td { border-bottom:0; }
  .pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.2px; border:1px solid transparent; white-space:nowrap; }
  .p-ok { background:var(--success-soft); color:#065f46; border-color:#a7f3d0; } .p-warn { background:var(--warning-soft); color:#92400e; border-color:#fde68a; }
  .p-bad { background:var(--danger-soft); color:#991b1b; border-color:#fecaca; } .p-off { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 14px; border-radius:var(--r-sm); border:1px solid transparent; background:var(--accent); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer; box-shadow:0 1px 2px rgba(99,102,241,.3); transition:background .15s,box-shadow .15s,transform .1s; white-space:nowrap; }
  .btn:hover { background:var(--accent-hover); box-shadow:0 2px 6px rgba(99,102,241,.35); } .btn:active { transform:translateY(1px); }
  .btn.ghost { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-xs); } .btn.ghost:hover { background:#eef2f9; border-color:var(--border-strong); }
  .btn.small { padding:5px 10px; font-size:12px; }
  .conn { display:flex; gap:14px; align-items:center; }
  .conn .ic { width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; font-weight:800; color:#fff; flex:none; }
  .row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .muted { color:var(--muted); font-size:12.5px; }
  .modal { position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; place-items:center; z-index:20; }
  .modal.on { display:grid; } .box { background:var(--surface); border-radius:var(--r-xl); width:520px; padding:24px; box-shadow:var(--shadow-lg); }
  .steps { display:flex; gap:8px; margin:12px 0 18px; } .steps div { flex:1; height:6px; border-radius:6px; background:var(--border); } .steps div.on { background:var(--accent); }
  .chk { display:flex; gap:10px; align-items:flex-start; margin:8px 0; }
  .login { max-width:400px; margin:90px auto; padding:28px; }
  label { display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
  input, select, textarea { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 12px; color:var(--text); font:14px Inter,sans-serif; margin:6px 0 14px; outline:none; transition:border-color .15s,box-shadow .15s; }
  input:hover, select:hover, textarea:hover { border-color:var(--border-strong); } input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:var(--shadow-focus); }
  .thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .note { background:var(--accent-soft); border:1px solid rgba(99,102,241,.35); color:#3730a3; border-radius:var(--r-md); padding:12px 14px; font-size:13px; }
  .done { opacity:.5; }