/* ===== Insight Hub — ADMIN panel theme (tách riêng khỏi front-end) ===== */
:root{
  --a-bg:#0f172a;        /* sidebar nền tối */
  --a-bg2:#1e293b;
  --a-accent:#6366f1;    /* indigo */
  --a-accent2:#818cf8;
  --a-ink:#1e293b;
  --a-muted:#64748b;
  --a-content:#f1f5f9;   /* nền nội dung sáng-xám */
  --a-card:#ffffff;
  --a-line:#e2e8f0;
  --a-shadow:0 1px 3px rgba(15,23,42,.08);
  --a-ok:#16a34a; --a-warn:#d97706; --a-bad:#dc2626; --a-blue:#2563eb; --a-pink:#db2777;
}
*{box-sizing:border-box;margin:0;padding:0}
body.admin{font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--a-content);color:var(--a-ink);line-height:1.5}
a{color:var(--a-accent);text-decoration:none}

/* ---- shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:236px;background:var(--a-bg);color:#cbd5e1;flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid #1e293b;color:#fff;font-weight:800;font-size:16px}
.sb-brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--a-accent2),var(--a-accent));display:flex;align-items:center;justify-content:center;font-size:16px}
.sb-brand small{display:block;font-size:10px;font-weight:600;color:#64748b;letter-spacing:1px}
.sb-nav{flex:1;padding:12px 10px;overflow-y:auto}
.sb-nav .grp{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#475569;padding:12px 12px 6px;font-weight:700}
.sb-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#cbd5e1;font-size:13.5px;font-weight:500;margin-bottom:2px}
.sb-nav a:hover{background:#1e293b;color:#fff}
.sb-nav a.on{background:var(--a-accent);color:#fff;font-weight:600}
.sb-nav a .ic{width:18px;text-align:center}
.sb-user{padding:14px;border-top:1px solid #1e293b;font-size:12px}
.sb-user .nm{color:#fff;font-weight:700}
.sb-user .rl{color:#64748b;text-transform:capitalize}
.sb-user a{display:inline-block;margin-top:8px;color:#94a3b8;font-size:12px}
.sb-user a:hover{color:#fff}

/* ---- main ---- */
.main{flex:1;margin-left:236px;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--a-line);padding:13px 26px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:18px;font-weight:700;color:var(--a-ink)}
.topbar .sp{flex:1}
.topbar .ext{font-size:12.5px;color:var(--a-muted);border:1px solid var(--a-line);padding:6px 12px;border-radius:8px}
.topbar .ext:hover{border-color:var(--a-accent);color:var(--a-accent)}
.content{padding:24px 26px;max-width:1200px}
.crumb{font-size:12px;color:var(--a-muted);margin-bottom:14px}
.crumb a{color:var(--a-muted)} .crumb a:hover{color:var(--a-accent)}

/* ---- components ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:16px;box-shadow:var(--a-shadow)}
.stat .n{font-size:25px;font-weight:800;color:var(--a-ink)} .stat .l{font-size:12px;color:var(--a-muted);margin-top:3px}
.stat.hl{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none}.stat.hl .n,.stat.hl .l{color:#fff}

.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.panel{background:var(--a-card);border:1px solid var(--a-line);border-radius:12px;padding:18px;box-shadow:var(--a-shadow)}
.panel h2{font-size:15px;color:var(--a-ink);margin-bottom:13px;font-weight:700}

label{font-size:13px;color:var(--a-muted);display:block}
input,select{width:100%;padding:9px 11px;margin:5px 0 12px;border:1px solid var(--a-line);border-radius:8px;font-size:14px;background:#fff;color:var(--a-ink)}
input:focus,select:focus{outline:none;border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.btn{padding:9px 18px;background:var(--a-accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:13.5px}
.btn:hover{background:#4f46e5}
.btn.ghost{background:#fff;color:var(--a-accent);border:1px solid var(--a-line)}
.btn.green{background:var(--a-ok)} .btn.sm{padding:5px 11px;font-size:12px}
.link-danger{color:var(--a-bad);background:none;border:none;cursor:pointer;font-size:12px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--a-line)}
th{color:var(--a-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.cA{background:#fce7f3;color:#db2777}.cB{background:#dbeafe;color:#2563eb}.cC{background:#f1f5f9;color:#64748b}
.chip.ok{background:#dcfce7;color:#16a34a}.chip.warn{background:#fef3c7;color:#d97706}

.callout{background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:12px 15px;font-size:13px;margin-bottom:18px;color:#3730a3}
.callout.ok{background:#dcfce7;border-color:#86efac;color:#166534}
.callout.bad{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

pre{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:9px;font-size:11.5px;overflow:auto}
code{background:#f1f5f9;padding:2px 6px;border-radius:5px;font-size:12px}
details summary{cursor:pointer;color:var(--a-accent);font-weight:600;font-size:12.5px}

/* ---- login (standalone) ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e293b,#0f172a);padding:20px}
.login-card{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-card .lg{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--a-ink);margin-bottom:6px}
.login-card .lg .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--a-accent2),var(--a-accent));display:flex;align-items:center;justify-content:center;font-size:18px}
.login-card p.sub{color:var(--a-muted);font-size:13px;margin-bottom:20px}
.login-card .btn{width:100%;padding:11px;margin-top:6px}

@media(max-width:760px){
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;flex-wrap:wrap}
  .sb-nav{display:flex;flex-wrap:wrap;flex:1 1 100%}
  .sb-user{flex:1 1 100%}
  .main{margin-left:0}
  .g2,.g3{grid-template-columns:1fr}
}