/* ============================================================================
   Bot Platform v2 — Design System (mockup)
   Phong cách: SaaS sạch (Linear / Vercel). Sidebar trái · viền mảnh · whitespace.
   Nguồn sự thật DUY NHẤT cho cả Portal (khách) và Admin (super-admin).
   Dùng cho mockup tĩnh — KHÔNG phải code production.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  /* — Nền & bề mặt — */
  --bg:        #fafafa;
  --surface:   #ffffff;
  --surface-2: #f6f6f7;
  --border:    #ececef;
  --border-2:  #e2e2e6;

  /* — Mực & chữ — */
  --ink:    #111114;
  --ink-2:  #43434d;
  --muted:  #8a8a96;
  --faint:  #b4b4be;

  /* — Accent (Linear violet) — */
  --accent:    #5e5ce6;
  --accent-2:  #4f4dd1;
  --accent-bg: #efeffe;
  --accent-fg: #ffffff;

  /* — Trạng thái — */
  --green:#16a34a; --green-bg:#e9f7ee;
  --amber:#b45309; --amber-bg:#fdf3e3;
  --red:#dc2626;   --red-bg:#fdecec;
  --blue:#2563eb;  --blue-bg:#eaf1fe;
  --violet:#7c3aed;--violet-bg:#f3edfe;

  /* — Hình — */
  --r-sm:7px; --r:10px; --r-lg:14px; --r-pill:999px;
  --sh-sm: 0 1px 2px rgba(17,17,20,.05);
  --sh:    0 1px 3px rgba(17,17,20,.06), 0 6px 16px rgba(17,17,20,.05);
  --sidebar-w: 248px;
  --topbar-h: 56px;
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:'Inter',system-ui,-apple-system,"Be Vietnam Pro",sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.02em; }
h1 { font-size:1.45rem; }
h2 { font-size:1.05rem; }
h3 { font-size:.92rem; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
small { font-size:.8rem; }

/* ============================== APP SHELL ============================== */
.app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }

/* — Sidebar — */
.sidebar {
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sb-brand {
  display:flex; align-items:center; gap:9px; padding:16px 18px 14px;
  font-weight:700; font-size:.95rem; letter-spacing:-.02em;
}
.sb-logo {
  width:26px; height:26px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,var(--accent),#8a89f0);
  display:grid; place-items:center; color:#fff; font-size:.85rem;
}
/* Bộ chọn workspace / bot */
.sb-switch {
  margin:0 12px 8px; padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--r); display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface); transition:.12s;
}
.sb-switch:hover { background:var(--surface-2); }
.sb-switch .av { width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--accent-bg); color:var(--accent); font-weight:700; font-size:.78rem; }
.sb-switch .nm { font-weight:600; font-size:.85rem; line-height:1.1; }
.sb-switch .sub { font-size:.72rem; color:var(--muted); }
.sb-switch .chev { margin-left:auto; color:var(--faint); }

.sb-nav { padding:6px 10px; overflow-y:auto; flex:1; }
.sb-group { margin-top:14px; }
.sb-group:first-child { margin-top:4px; }
.sb-label {
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--faint); padding:6px 10px 4px;
}
.sb-item {
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:450; font-size:.86rem; cursor:pointer; transition:.1s;
  margin:1px 0;
}
.sb-item:hover { background:var(--surface-2); color:var(--ink); }
.sb-item.active { background:var(--accent-bg); color:var(--accent-2); font-weight:600; }
.sb-item svg { width:16px; height:16px; flex:none; opacity:.85; }
.sb-item .tag {
  margin-left:auto; font-size:.66rem; font-weight:700; padding:1px 6px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--muted);
}
.sb-item .tag.new { background:var(--accent-bg); color:var(--accent); }
.sb-item .count { margin-left:auto; font-size:.72rem; color:var(--muted); font-weight:600; }
.sb-item.soon { opacity:.5; cursor:default; }

.sb-foot { border-top:1px solid var(--border); padding:10px 12px; }
.sb-user { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-sm); }
.sb-user:hover { background:var(--surface-2); }
.sb-user .av { width:28px;height:28px;border-radius:var(--r-pill);background:var(--surface-2);
  display:grid;place-items:center;font-weight:600;color:var(--ink-2);font-size:.78rem;flex:none; }
.sb-user .nm { font-size:.82rem; font-weight:600; line-height:1.15; }
.sb-user .sub { font-size:.72rem; color:var(--muted); }

/* — Khu nội dung — */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:var(--topbar-h); border-bottom:1px solid var(--border); background:rgba(250,250,250,.8);
  backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; padding:0 24px;
}
.crumb { display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--muted); }
.crumb b { color:var(--ink); font-weight:600; }
.crumb .sep { color:var(--faint); }
.topbar .sp { flex:1; }
.search {
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:6px 11px; color:var(--muted); font-size:.83rem; min-width:220px;
}
.search svg { width:15px;height:15px; }
.search .kbd { margin-left:auto; font-size:.7rem; border:1px solid var(--border-2); border-radius:5px;
  padding:1px 5px; color:var(--faint); background:var(--surface-2); }

.content { padding:26px 32px 60px; max-width:1180px; width:100%; margin:0 auto; }
.page-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.page-head .sp { flex:1; }
.page-head p { margin:5px 0 0; color:var(--muted); font-size:.9rem; }

/* ============================== COMPONENTS ============================== */

/* — Nút — */
.btn {
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:550; font-size:.85rem;
  padding:8px 14px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  transition:.12s; white-space:nowrap; line-height:1;
}
.btn svg { width:15px;height:15px; }
.btn.primary { background:var(--accent); color:var(--accent-fg); box-shadow:var(--sh-sm); }
.btn.primary:hover { background:var(--accent-2); }
.btn.secondary { background:var(--surface); color:var(--ink); border-color:var(--border-2); box-shadow:var(--sh-sm); }
.btn.secondary:hover { background:var(--surface-2); }
.btn.ghost { background:transparent; color:var(--ink-2); }
.btn.ghost:hover { background:var(--surface-2); }
.btn.sm { padding:5px 10px; font-size:.78rem; }
.btn.danger { color:var(--red); border-color:var(--border-2); background:var(--surface); }
.btn.danger:hover { background:var(--red-bg); }

/* — Thẻ — */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.card.pad { padding:18px; }
.card-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.card-head h2 { font-size:.95rem; }
.card-head .sp { flex:1; }
.card-body { padding:18px; }

/* — KPI — */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; }
.kpi .l { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.kpi .l svg { width:14px;height:14px; }
.kpi .v { font-size:1.7rem; font-weight:700; letter-spacing:-.03em; margin-top:7px; }
.kpi .d { font-size:.76rem; margin-top:3px; font-weight:600; display:flex; align-items:center; gap:4px; }
.kpi .d.up { color:var(--green); } .kpi .d.down { color:var(--red); } .kpi .d.flat { color:var(--muted); }

/* — Bảng — */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 16px; font-size:.86rem; border-bottom:1px solid var(--border); }
th { background:var(--surface-2); color:var(--muted); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--surface-2); }
td .sub { font-size:.76rem; color:var(--muted); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td.act { text-align:right; white-space:nowrap; }

/* — Pill / Badge — */
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--r-pill);
  font-size:.74rem; font-weight:600; line-height:1.5; }
.pill::before { content:""; width:6px;height:6px;border-radius:50%; background:currentColor; opacity:.9; }
.pill.plain::before { display:none; }
.pill.green{color:var(--green);background:var(--green-bg);}
.pill.amber{color:var(--amber);background:var(--amber-bg);}
.pill.red{color:var(--red);background:var(--red-bg);}
.pill.blue{color:var(--blue);background:var(--blue-bg);}
.pill.violet{color:var(--violet);background:var(--violet-bg);}
.pill.gray{color:var(--muted);background:var(--surface-2);}

.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--r-sm);
  font-size:.73rem; font-weight:600; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }

/* — Tabs / Segmented — */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab { padding:9px 14px; font-size:.86rem; font-weight:550; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--accent-2); border-bottom-color:var(--accent); }
.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:3px; gap:2px; }
.seg button, .seg a { font:inherit; font-size:.8rem; font-weight:550; border:none; background:transparent; cursor:pointer;
  padding:5px 12px; border-radius:var(--r-sm); color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; }
.seg button.active, .seg a.active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); }

/* — Form — */
label.field { display:block; margin-bottom:14px; }
label.field > span { display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
input, select, textarea {
  font:inherit; width:100%; padding:8px 11px; border:1px solid var(--border-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); transition:.12s; font-size:.86rem;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-bg); }
textarea { resize:vertical; min-height:90px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hint { font-size:.76rem; color:var(--muted); margin-top:5px; }

/* — Tile (lưới hub) — */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px;
  cursor:pointer; transition:.12s; box-shadow:var(--sh-sm); display:block; }
.tile:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--sh); }
.tile .ico { width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--accent-bg); color:var(--accent); margin-bottom:12px; }
.tile .ico svg { width:18px;height:18px; }
.tile .t { font-weight:600; font-size:.92rem; }
.tile .d { font-size:.8rem; color:var(--muted); margin-top:4px; line-height:1.45; }
.tile .meta { font-size:.74rem; color:var(--faint); margin-top:10px; display:flex; align-items:center; gap:6px; }
/* — Nhóm tri thức (hub gom 3 nhóm) — */
.kgroup { margin-bottom:24px; }
.kgroup-head { display:flex; align-items:baseline; gap:10px; margin:0 0 12px; flex-wrap:wrap; }
.kgroup-head h2 { font-size:1.02rem; margin:0; }
.kgroup-hint { font-size:.8rem; color:var(--muted); }

/* — Banner / callout — */
.banner { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r-lg);
  border:1px solid var(--border); background:var(--surface); margin-bottom:18px; }
.banner.info { background:var(--accent-bg); border-color:#dcdcfb; }
.banner.warn { background:var(--amber-bg); border-color:#f6e2bf; }
.banner .sp { flex:1; }
.banner .ico { flex:none; }

/* — Empty / dòng phụ — */
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.row-flex { display:flex; align-items:center; gap:10px; }
.stack { display:flex; flex-direction:column; gap:14px; }
.sectiontitle { display:flex; align-items:center; gap:10px; margin:26px 0 12px; }
.sectiontitle h2 { font-size:1rem; } .sectiontitle .sp{flex:1;}
.dot-sep { color:var(--faint); margin:0 7px; }
.avatar { width:30px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:.78rem;flex:none; }
.chartbars { display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px; }
.chartbars .b { flex:1; height:100%; background:var(--accent-bg); border-radius:5px 5px 0 0; position:relative; }
.chartbars .b > i { position:absolute; inset:auto 0 0 0; background:var(--accent); border-radius:5px 5px 0 0; }

/* — Cover (index) — */
.cover { max-width:1080px; margin:0 auto; padding:40px 28px 80px; }
.swatch { height:54px; border-radius:var(--r); border:1px solid var(--border); display:flex; align-items:flex-end;
  padding:7px 9px; font-size:.7rem; font-weight:600; color:#fff; }
.proto-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:18px; }
.proto { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-sm); transition:.12s; }
.proto:hover { box-shadow:var(--sh); transform:translateY(-2px); border-color:var(--border-2); }
.proto .thumb { height:118px; background:var(--surface-2); border-bottom:1px solid var(--border);
  background-size:cover; background-position:top center; }
.proto .cap { padding:12px 14px; }
.proto .cap .t { font-weight:600; font-size:.88rem; }
.proto .cap .d { font-size:.78rem; color:var(--muted); margin-top:3px; }

@media (max-width:920px){
  .app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .kpis { grid-template-columns:repeat(2,1fr); }
  .tiles { grid-template-columns:1fr; }
}

/* ============================== IN PDF ============================== */
@media print {
  @page { size:1280px 1000px; margin:0; }
  html, body { background:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .app { display:grid !important; grid-template-columns:248px 1fr !important; min-height:auto; }
  .sidebar { position:static !important; height:auto !important; min-height:1000px; break-inside:avoid; }
  .topbar { position:static !important; backdrop-filter:none; background:#fff !important; }
  .search .kbd { display:none; }
}