/* cskh.css — Chăm Sóc Khách Hàng / AI Call Center. Plain CSS (không build step), brand Quik. */
:root {
  --navy: #1e3a8a;
  --navy-900: #0f1c44;
  --navy-700: #1e3a8a;
  --orange: #ff6b2b;
  --orange-soft: rgba(255, 107, 43, .12);
  --bg: #ffffff;            /* nền nền tảng = TRẮNG đồng nhất (bỏ lớp nền xám cuối cùng) */
  --surface: #ffffff;
  --surface-2: #f3f5f9;     /* accent nhạt cho chip/table-head/hover — giữ chiều sâu nhẹ trên nền trắng */
  --text: #0f1424;
  --text-soft: #475569;
  --text-muted: #94a3b8;
  --border: #e6eaf2;
  --border-strong: #d3dae8;
  --shadow-sm: 0 1px 3px rgba(15, 28, 68, .06);
  --shadow: 0 8px 24px -10px rgba(15, 28, 68, .18);
  --radius: 14px;
  --radius-sm: 9px;
  --ok: #10b981; --warn: #f59e0b; --danger: #ef4444; --info: #0ea5e9; --purple: #8b5cf6;
}

/* Tránh nháy nội dung trước khi gate quyết định */
html.auth-pending body { visibility: hidden; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; }
.hidden { display: none !important; }

/* ═════ Layout ═════ */
.cs-app { display: flex; min-height: 100vh; }

/* Sidebar */
.cs-side {
  width: 72px; flex-shrink: 0; background: var(--navy-900); color: #c7d2e8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .18s ease; overflow: hidden; z-index: 30;
}
.cs-side:hover, .cs-side:focus-within { width: 232px; }
.cs-brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px; text-decoration: none; color: #fff; white-space: nowrap; }
.cs-brand img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: #fff; padding: 3px; object-fit: contain; }
.cs-brand-text { display: flex; flex-direction: column; line-height: 1.15; opacity: 0; transition: opacity .18s; }
.cs-side:hover .cs-brand-text, .cs-side:focus-within .cs-brand-text { opacity: 1; }
.cs-brand-text strong { font-size: 15px; font-weight: 800; }
.cs-brand-text span { font-size: 11px; color: #8aa0cf; }

.cs-nav { display: flex; flex-direction: column; gap: 3px; padding: 8px; margin-top: 4px; }
.cs-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent;
  color: #c7d2e8; padding: 11px 12px; border-radius: 11px; cursor: pointer; font: inherit;
  font-weight: 600; white-space: nowrap; position: relative;
  transition: background .12s, width .18s ease, padding .18s ease;
}
.cs-nav button .material-symbols-outlined { flex-shrink: 0; }
.cs-nav-label { opacity: 0; transition: opacity .18s; }
.cs-side:hover .cs-nav-label, .cs-side:focus-within .cs-nav-label { opacity: 1; }
.cs-nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.cs-nav button.is-active { background: linear-gradient(90deg, var(--orange), #ff8e5c); color: #fff; }
/* Sidebar THU GỌN (chưa hover): icon căn GIỮA + ô nền active/hover thành ô VUÔNG gọn quanh icon */
.cs-side:not(:hover):not(:focus-within) .cs-nav button {
  width: 46px; height: 46px; padding: 0; margin: 0 auto; justify-content: center; gap: 0;
}
/* Nhãn ẩn HẲN khỏi layout khi thu gọn (KHÔNG chỉ opacity) → icon mới căn giữa được, không bị lệch/cắt */
.cs-side:not(:hover):not(:focus-within) .cs-nav-label,
.cs-side:not(:hover):not(:focus-within) .cs-brand-text { display: none; }
.cs-nav-badge {
  margin-left: auto; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.cs-nav button.is-active .cs-nav-badge { background: rgba(255, 255, 255, .25); }
/* Badge khi thu gọn → chấm nhỏ góc trên-phải, KHÔNG phá căn giữa icon */
.cs-side:not(:hover):not(:focus-within) .cs-nav-badge {
  position: absolute; top: 2px; right: 2px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; border: 2px solid var(--navy-900);
}
.cs-side-foot { margin-top: auto; padding: 10px; }

/* Main */
.cs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.cs-top-title { display: flex; align-items: center; gap: 12px; }
.cs-top-title h1 { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy-900); }
.cs-top-actions { display: flex; align-items: center; gap: 14px; }

.cs-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.cs-pill .material-symbols-outlined { font-size: 15px; }
.cs-pill--ai { background: var(--orange-soft); color: var(--orange); }
.cs-pill--ai.off { background: var(--surface-2); color: var(--text-muted); }
/* Pill "Daisy" nhỏ cạnh trường Daisy tự nhận diện/điền (chi tiết ticket + khách) */
.cs-daisy-pill { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; line-height: 1.4; padding: 1px 6px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); vertical-align: middle; white-space: nowrap; }

/* User chip */
.cs-user { position: relative; }
.cs-user-btn { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 10px 5px 5px; cursor: pointer; font: inherit; }
.cs-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.cs-user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.cs-user-meta strong { font-size: 13px; }
.cs-user-meta small { font-size: 11px; color: var(--text-muted); }
.cs-user-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); min-width: 210px; padding: 6px; z-index: 40; }
.cs-user-menu a, .cs-user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); text-decoration: none; }
.cs-user-menu a:hover, .cs-user-menu button:hover { background: var(--surface-2); }

/* User chip ở ĐÁY SIDEBAR (rail): avatar luôn hiện, tên+email hiện khi rail mở; menu bật LÊN */
.cs-user--rail { position: relative; }
.cs-user--rail .cs-user-btn { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; gap: 10px; }
.cs-user--rail .cs-user-btn:hover { background: rgba(255, 255, 255, .08); }
.cs-user--rail .cs-user-avatar { flex-shrink: 0; }
.cs-user--rail .cs-user-meta { color: #c7d2e8; min-width: 0; }
.cs-user--rail .cs-user-meta strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cs-user--rail .cs-user-meta small { color: #8aa0cf; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.cs-user--rail .cs-user-menu { top: auto; bottom: calc(100% + 8px); left: 8px; right: 8px; min-width: 0; }

/* Views */
.cs-view { padding: 22px 28px 60px; }

/* KPI */
.cs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cs-kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 18px 16px; box-shadow: var(--shadow-sm); display: flex; gap: 14px; align-items: center; overflow: hidden; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.cs-kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kc, var(--navy)); opacity: .9; }
.cs-kpi:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.cs-kpi-ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-kpi-ic .material-symbols-outlined { font-size: 25px; }
.cs-kpi-body { min-width: 0; }
.cs-kpi-num { font-size: 29px; font-weight: 800; color: var(--navy-900); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cs-kpi-lbl { font-size: 12px; color: var(--text-soft); font-weight: 600; margin-top: 2px; }
.cs-kpi--navy { --kc: var(--navy); } .cs-kpi--navy .cs-kpi-ic { background: rgba(30, 58, 138, .1); color: var(--navy); }
.cs-kpi--orange { --kc: var(--orange); } .cs-kpi--orange .cs-kpi-ic { background: var(--orange-soft); color: var(--orange); }
.cs-kpi--danger { --kc: var(--danger); } .cs-kpi--danger .cs-kpi-ic { background: rgba(239, 68, 68, .1); color: var(--danger); }
.cs-kpi--ok { --kc: var(--ok); } .cs-kpi--ok .cs-kpi-ic { background: rgba(16, 185, 129, .1); color: var(--ok); }
.cs-kpi--info { --kc: var(--info); } .cs-kpi--info .cs-kpi-ic { background: rgba(14, 165, 233, .1); color: var(--info); }

/* Cards */
/* KHUNG TAB: bỏ hẳn viền + nền trắng + đổ bóng → nội dung PHẲNG, rộng hết khổ (giữ viền nhẹ cho thành phần con: bảng/panel/mục lục). */
.cs-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin-bottom: 26px; overflow: visible; }
.cs-card:last-child { margin-bottom: 0; }
.cs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
/* Sub-panel (vd Tổng quan: Theo trạng thái / loại) = giữ VIỀN NHẸ làm khối riêng */
.cs-card--brk { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 0; }
.cs-card--brk .cs-card-head { padding-top: 0; margin-bottom: 12px; }
.cs-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy-900); }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .cs-grid2 { grid-template-columns: 1fr; } }
.cs-link { border: 0; background: transparent; color: var(--orange); font-weight: 700; cursor: pointer; font: inherit; }

/* Bars */
/* AI-MARK[QAI-UI:daisybrain-bars] 2026-06-27 13:37 (GMT+7) — nhãn bar hiện ĐỦ chữ (bỏ ellipsis, cho wrap, cột rộng linh hoạt) chống cắt xén | rel: cskh.js renderBars, UI-L5-components */
.cs-bars { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; }
.cs-bar-row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 44px; align-items: center; gap: 10px; }
.cs-bar-lbl { font-size: 13px; color: var(--text-soft); font-weight: 600; line-height: 1.35; word-break: break-word; }
.cs-bar-track { height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cs-bar-fill { height: 100%; border-radius: 999px; background: var(--navy); }
.cs-bar-val { font-size: 13px; font-weight: 800; color: var(--navy-900); text-align: right; }

/* Card-head icon (Tổng quan) */
.cs-card-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.cs-card-head h3 .material-symbols-outlined { font-size: 19px; color: var(--orange); }

/* Overview breakdown (Theo trạng thái / Theo loại) — nhãn ĐẦY ĐỦ (tự xuống dòng, KHÔNG cắt) */
.cs-brk-wrap { padding: 17px 18px; }
.cs-brk-stack { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-bottom: 17px; box-shadow: inset 0 0 0 1px rgba(15,28,68,.04); }
.cs-brk-seg { min-width: 3px; transition: flex .4s ease; }
.cs-brk-list { display: flex; flex-direction: column; gap: 15px; }
.cs-brk-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cs-brk-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cs-brk-lbl { font-size: 13px; color: var(--text); font-weight: 600; flex: 1; min-width: 0; line-height: 1.35; } /* flex:1 + cho xuống dòng → KHÔNG cắt */
.cs-brk-val { font-size: 15px; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.cs-brk-pct { font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.cs-brk-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cs-brk-fill { height: 100%; border-radius: 999px; transition: width .45s cubic-bezier(.4,0,.2,1); min-width: 0; }
.cs-brk.is-zero .cs-brk-dot { opacity: .35; }
.cs-brk.is-zero .cs-brk-lbl, .cs-brk.is-zero .cs-brk-val { color: var(--text-muted); }

/* Toolbar */
.cs-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; border-bottom: 0; margin-bottom: 4px; flex-wrap: wrap; }
.cs-toolbar-spacer { flex: 1; }
.cs-search { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; min-width: 280px; flex: 1; max-width: 460px; }
.cs-search .material-symbols-outlined { color: var(--text-muted); }
.cs-search input { border: 0; background: transparent; outline: none; font: inherit; width: 100%; color: var(--text); }
.cs-select { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 8px 10px; font: inherit; color: var(--text); cursor: pointer; }

/* Buttons */
.cs-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 9px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; }
.cs-btn:hover { background: var(--surface-2); }
.cs-btn .material-symbols-outlined { font-size: 18px; }
.cs-btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.cs-btn--primary:hover { background: #ec5a1d; }
.cs-btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.cs-btn--navy:hover { background: #16306f; }
/* AI-MARK[QAI-CSKH:ticket-done-close] 2026-06-26 16:30 (GMT+7) — nút "Hoàn thành" (xanh lá) ở drawer ticket | rel: cskh.js dt_resolve */
.cs-btn--ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.cs-btn--ok:hover { background: #0e9f6e; }
.cs-btn--danger { color: var(--danger); border-color: rgba(239, 68, 68, .3); }
.cs-btn--danger:hover { background: rgba(239, 68, 68, .08); }
.cs-btn--sm { padding: 5px 9px; font-size: 12px; }
.cs-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Tables */
/* Bảng = khối có VIỀN NHẸ riêng (giữ cấu trúc khi đã bỏ khung tab) */
.cs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.cs-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table--click tbody tr { cursor: pointer; }
.cs-table--click tbody tr:hover { background: var(--surface-2); }
.cs-empty { text-align: center; color: var(--text-muted); padding: 28px 16px !important; }
.cs-code { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.cs-sub { font-size: 12px; color: var(--text-muted); }
.cs-strong { font-weight: 600; }

/* Badges (status / priority) */
.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cs-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-new { background: rgba(14, 165, 233, .12); color: #0284c7; }
.st-open { background: rgba(245, 158, 11, .14); color: #b45309; }
.st-pending { background: rgba(139, 92, 246, .12); color: #7c3aed; }
.st-resolved { background: rgba(16, 185, 129, .12); color: #047857; }
.st-closed { background: rgba(100, 116, 139, .14); color: #475569; }
.pr-low { background: var(--surface-2); color: #64748b; }
.pr-normal { background: rgba(30, 58, 138, .1); color: var(--navy); }
.pr-high { background: rgba(245, 158, 11, .16); color: #b45309; }
.pr-urgent { background: rgba(239, 68, 68, .14); color: #dc2626; }

/* Cảm xúc (AI) — chip có emoji, không chấm tròn */
.cs-sent { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.se-positive { background: rgba(16, 185, 129, .12); color: #047857; }
.se-neutral { background: var(--surface-2); color: #64748b; }
.se-negative { background: rgba(245, 158, 11, .16); color: #b45309; }
.se-angry { background: rgba(239, 68, 68, .14); color: #dc2626; }

/* Cảnh báo trùng lặp (Lớp 3) */
.cs-dupwarn { display: flex; gap: 9px; align-items: flex-start; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font-size: 13px; color: #92400e; }
.cs-dupwarn .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.cs-duplink { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 800; color: var(--navy); cursor: pointer; text-decoration: underline; }

/* Panel "Phân tích AI đã lưu" (Lớp 3) */
.cs-aia { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface); }
.cs-aia-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--purple); margin-bottom: 10px; }
.cs-aia-head .material-symbols-outlined { font-size: 19px; }
.cs-aia-block { margin-bottom: 10px; }
.cs-aia-block:last-child { margin-bottom: 0; }
.cs-aia-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.cs-aia-text { font-size: 14px; color: var(--text); white-space: pre-wrap; }
.cs-aia-copy { padding: 1px 6px !important; min-height: 0 !important; vertical-align: middle; }
.cs-aia-copy .material-symbols-outlined { font-size: 15px; }

/* Knowledge hint */
/* Banner hướng dẫn = callout BO TRÒN độc lập (không còn là dải đầu khung) */
.cs-kb-hint { margin: 0 0 16px; padding: 11px 15px; font-size: 12.5px; color: var(--text-soft); background: var(--orange-soft); border: 1px solid rgba(255,107,43,.22); border-radius: var(--radius-sm); }
/* Biến thể MẢNH: không hộp, accent trái — dùng cho Kho kiến thức cho đỡ rối mắt */
.cs-kb-hint--slim { margin: 2px 0 12px; padding: 2px 0 2px 11px; background: transparent; border: 0; border-left: 3px solid var(--orange); border-radius: 0; color: var(--text-muted); }

/* Pager */
.cs-pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; }
.cs-pager button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; padding: 6px 11px; cursor: pointer; font: inherit; font-weight: 700; }
.cs-pager button:hover:not(:disabled) { background: var(--surface-2); }
.cs-pager button:disabled { opacity: .4; cursor: default; }
.cs-pager-info { font-size: 13px; color: var(--text-soft); font-weight: 600; }

/* Kanban — board ngang, cột co giãn đều (mọi số cột), cuộn ngang khi hẹp */
.cs-board-note { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); color: #b45309; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
/* Cột VỪA KHÍT bề ngang màn hình — N cột tự co cho vừa, KHÔNG cuộn ngang. Màn hẹp (<980px) mới xuống hàng. */
.cs-board { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); align-items: stretch; gap: 14px; padding-bottom: 4px; }
@media (max-width: 980px) { .cs-board { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.cs-col { min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--cc, var(--navy)); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 240px; }
.cs-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; z-index: 1; }
.cs-col-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--navy-900); min-width: 0; }
.cs-col-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cc, var(--navy)); flex-shrink: 0; }
.cs-col-count { background: var(--surface); border: 1px solid var(--border); color: var(--cc, var(--navy)); background: color-mix(in srgb, var(--cc, var(--navy)) 13%, #fff); border-color: color-mix(in srgb, var(--cc, var(--navy)) 26%, #fff); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; flex-shrink: 0; min-width: 26px; text-align: center; }
.cs-col-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; max-height: calc(100vh - 240px); }
.cs-col-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 8px; color: var(--text-muted); font-size: 12px; border: 1px dashed var(--border-strong); border-radius: 10px; opacity: .7; }
.cs-col-empty .material-symbols-outlined { font-size: 22px; opacity: .8; }
.cs-tcard { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--navy); border-radius: 10px; padding: 11px 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .14s, transform .14s, border-color .14s; }
.cs-tcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.cs-tcard.p-urgent { border-left-color: var(--danger); }
.cs-tcard.p-high { border-left-color: var(--warn); }
.cs-tcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cs-tcard-code { font-size: 11px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.cs-tcard-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--text-muted); }
.cs-tcard-cust { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-tcard-cust .material-symbols-outlined { font-size: 14px; flex-shrink: 0; }

/* ═════ Modal ═════ */
.cs-modal { position: fixed; inset: 0; background: rgba(15, 28, 68, .45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 60; }
.cs-modal-box { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.cs-modal-box--lg { max-width: 660px; }
.cs-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.cs-modal-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--navy-900); }
.cs-modal-x { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); display: flex; padding: 4px; border-radius: 8px; }
.cs-modal-x:hover { background: var(--surface-2); color: var(--text); }
.cs-modal-body { padding: 20px 22px; overflow-y: auto; }

/* Forms */
.cs-form { display: flex; flex-direction: column; gap: 14px; }
.cs-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.cs-form label.req::after { content: ' *'; color: var(--danger); }
.cs-form input, .cs-form select, .cs-form textarea { border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 11px; font: inherit; color: var(--text); background: var(--surface); width: 100%; }
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.cs-form textarea { resize: vertical; min-height: 76px; }
.cs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .cs-form-row { grid-template-columns: 1fr; } }
.cs-form-err { color: var(--danger); font-size: 13px; font-weight: 600; min-height: 4px; }
.cs-form-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.cs-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 4px 0 -4px; }

/* ═════ Drawer (chi tiết ticket) ═════ */
.cs-drawer { position: fixed; inset: 0; z-index: 60; }
.cs-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 28, 68, .4); }
.cs-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 560px; max-width: 94vw; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; animation: slideIn .2s ease; }
@keyframes slideIn { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.cs-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.cs-drawer-code { font-size: 12px; font-weight: 800; color: var(--orange); }
.cs-drawer-head h3 { margin: 4px 0 0; font-size: 17px; font-weight: 800; color: var(--navy-900); }
.cs-drawer-body { padding: 18px 22px; overflow-y: auto; flex: 1; }

.cs-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 16px; }
.cs-meta { display: flex; flex-direction: column; gap: 3px; }
.cs-meta-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.cs-meta-v { font-size: 14px; color: var(--text); font-weight: 600; }
.cs-detail-desc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; white-space: pre-wrap; margin-bottom: 16px; }

.cs-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
/* AI-MARK[QAI-CSKH:web-approval] 2026-06-26 11:55 (GMT+7) — banner DUYỆT ticket Daisy chờ duyệt (Giám sát duyệt ngay trên drawer) | rel: cskh.js decideApproval */
.cs-approve-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid #fde68a; background: #fffbeb; border-left: 4px solid var(--warn); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; }
.cs-approve-msg { display: flex; align-items: center; gap: 8px; color: #92400e; font-weight: 600; font-size: 13.5px; }
.cs-approve-msg .material-symbols-outlined { color: var(--warn); font-size: 20px; }
.cs-ai-box { border: 1px dashed var(--orange); background: var(--orange-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.cs-ai-box h4 { margin: 0 0 8px; font-size: 13px; color: var(--orange); display: flex; align-items: center; gap: 6px; }
.cs-ai-out { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; font-size: 14px; white-space: pre-wrap; margin-top: 10px; }

.cs-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.cs-tl-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.cs-tl-item:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--border); }
.cs-tl-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.cs-tl-dot .material-symbols-outlined { font-size: 15px; }
.cs-tl-dot.t-comment { background: rgba(30, 58, 138, .1); color: var(--navy); }
.cs-tl-dot.t-status { background: rgba(245, 158, 11, .14); color: #b45309; }
.cs-tl-dot.t-created { background: rgba(16, 185, 129, .12); color: var(--ok); }
.cs-tl-dot.t-assign { background: rgba(139, 92, 246, .12); color: var(--purple); }
.cs-tl-body { font-size: 13px; }
.cs-tl-text { color: var(--text); }
.cs-tl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cs-comment-box { display: flex; gap: 8px; margin-top: 12px; }
.cs-comment-box textarea { flex: 1; border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 11px; font: inherit; resize: vertical; min-height: 42px; }

/* Toast */
.cs-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy-900); color: #fff; padding: 11px 18px; border-radius: 11px; font-weight: 600; box-shadow: var(--shadow); z-index: 80; }
.cs-toast.err { background: var(--danger); }

/* Denied gate */
.cs-denied { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; }
.cs-denied-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 36px; text-align: center; max-width: 420px; }
.cs-denied-box .material-symbols-outlined { font-size: 46px; color: var(--danger); background: rgba(239, 68, 68, .1); width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.cs-denied-box h1 { font-size: 21px; color: var(--navy-900); margin: 8px 0; }
.cs-denied-box p { color: var(--text-soft); margin: 0 0 18px; }
.cs-denied-box .cs-btn { justify-content: center; }

/* ───────── Phase 5: vai trò + Phân tích + Cấu hình Bot ───────── */
/* Chip vai trò trên topbar */
.cs-pill--role { background: rgba(30, 58, 138, .1); color: var(--navy); }

/* Generic input (dùng cho ô từ khoá Bot Settings) */
.cs-input { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 11px; font: inherit; color: var(--text); width: 100%; outline: none; }
.cs-input:focus { border-color: var(--orange); }
.cs-input:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

/* Phân tích — thanh tiêu đề + xu hướng cảm xúc */
.cs-an-title { font-size: 15px; font-weight: 800; color: var(--navy-900); }
.cs-an-hint { font-weight: 600; color: var(--text-muted); }
.cs-an-rangelbl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.cs-an-kpis { margin-bottom: 18px; }
.cs-an-trend { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.cs-an-trow { display: grid; grid-template-columns: 86px 1fr 40px; align-items: center; gap: 10px; }
.cs-an-tday { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cs-an-tbar { height: 16px; min-width: 2px; border-radius: 999px; overflow: hidden; display: flex; background: var(--surface-2); }
.cs-an-seg { height: 100%; }
.cs-an-seg.se-positive { background: #10b981; }
.cs-an-seg.se-neutral { background: #94a3b8; }
.cs-an-seg.se-negative { background: #f59e0b; }
.cs-an-seg.se-angry { background: #ef4444; }
.cs-an-tval { font-size: 13px; font-weight: 800; color: var(--navy-900); text-align: right; font-variant-numeric: tabular-nums; }

/* Tab "Nhóm" — header thống kê + chọn-hàng-loạt + từ khoá (panel cấu hình GỘP từ "Cấu hình bot") */
.cs-gstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cs-gstat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.cs-gstat b { font-size: 22px; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cs-gstat span { font-size: 11px; color: var(--text-muted); }
.cs-gstat--mon { background: #fff7f0; border-color: #fed7aa; }
.cs-gstat--mon b { color: #c2410c; }
.cs-gstat--warn { background: #fef2f2; border-color: #fecaca; }
.cs-gstat--warn b { color: var(--danger); }
.cs-gstat--off { background: #f1f5f9; border-color: #cbd5e1; }
.cs-gstat--off b { color: #64748b; }
.cs-gbulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 9px 12px; margin-bottom: 12px; }
.cs-gbulk-n { font-size: 13px; color: var(--navy); margin-right: 4px; }
.cs-gbulk-n b { font-weight: 800; }
.cs-bulk-clear { margin-left: auto; }
/* hàng nhóm trong rail = checkbox chọn + nút mở nhóm */
.cs-inbox-grow { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.cs-inbox-grow.is-active { background: #fff4ec; box-shadow: inset 3px 0 0 var(--orange); }
.cs-inbox-grow.is-active .cs-inbox-g { background: transparent; }
.cs-inbox-gck { flex-shrink: 0; align-self: center; width: 16px; height: 16px; margin: 0 0 0 11px; accent-color: var(--orange); cursor: pointer; }
.cs-inbox-grow .cs-inbox-g { border-bottom: 0; }
/* từ khoá kích hoạt trong panel */
.cs-gkw { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 11px; }
.cs-gkw-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; }
.cs-gkw-lbl .cs-sub { font-weight: 400; }
.cs-gkw-row { display: flex; gap: 8px; }
.cs-gkw-row .cs-input { flex: 1; }
/* nút trong modal cấu hình mặc định */
.cs-modal-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Quikwork (Lớp 7) trong drawer chi tiết */
.cs-qw-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; margin: 12px 0; }
.cs-qw-box.is-linked { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .3); }
.cs-qw-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.cs-qw-info .material-symbols-outlined { font-size: 18px; color: var(--navy); }
.cs-qw-box.is-linked .cs-qw-info .material-symbols-outlined { color: var(--ok); }

/* Daisy reasoning — Case tương tự đã xử lý (tái dùng cách khắc phục thật) */
.cs-sim { border: 1px solid color-mix(in srgb, var(--purple) 30%, var(--border)); background: color-mix(in srgb, var(--purple) 6%, #fff); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.cs-sim-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--navy-900); margin-bottom: 10px; }
.cs-sim-head .material-symbols-outlined { font-size: 18px; color: var(--purple); }
.cs-sim-hint { font-weight: 600; color: var(--text-muted); font-size: 12px; }
.cs-sim-item { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cs-sim-item + .cs-sim-item { margin-top: 8px; }
.cs-sim-item:hover { border-color: color-mix(in srgb, var(--purple) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.cs-sim-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.cs-sim-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.cs-sim-meta .material-symbols-outlined { font-size: 13px; }
.cs-sim-subj { font-size: 13px; font-weight: 600; color: var(--text); }
.cs-sim-fix { font-size: 12px; color: var(--text-soft); margin-top: 5px; line-height: 1.45; white-space: pre-wrap; }
.cs-sim-fix b { color: var(--navy-900); }

/* Hiệu suất xử lý — callout nút thắt */
.cs-rp-bottle { display: flex; gap: 10px; align-items: flex-start; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; font-size: 13px; color: #92400e; }
.cs-rp-bottle .material-symbols-outlined { font-size: 19px; color: var(--warn); flex-shrink: 0; }
.cs-rp-bottle b { color: #7c2d12; }

/* Tri thức khắc phục (Knowledge Curator) — sub-tab + thẻ case mẫu */
/* Thanh sub-tab (2 tầng nav) — đặt dưới topbar, trên nội dung view */
.cs-subnav { padding: 12px 22px 0; }
.cs-subnav.hidden { display: none; }
/* "Cần chú ý" = callout có VIỀN NHẸ để nổi bật (chỉ hiện khi có việc) — đồng nhất kiểu callout sau khi bỏ khung tab */
.cs-dash-attn { margin-bottom: 26px; border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px; }
.cs-dash-attn .cs-card-head { padding-top: 0; margin-bottom: 12px; }
.cs-subtabs { display: inline-flex; gap: 4px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.cs-subtab { border: 0; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cs-subtab.is-active { background: var(--surface); color: var(--navy-900); box-shadow: var(--shadow-sm); }
.cs-subtab-n { font-size: 12px; color: var(--purple); font-weight: 800; }
.cs-rkb-list .cs-sim-item { cursor: default; }
.cs-rkb-card .cs-sim-subj { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.cs-rkb-steps { margin: 4px 0 0; padding-left: 20px; }
.cs-rkb-steps li { margin: 2px 0; }
.cs-rkb-kw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cs-rkb-kw .cs-badge { background: color-mix(in srgb, var(--purple) 10%, #fff); color: var(--purple); font-weight: 600; }
.cs-rkb-kw .cs-badge::before { display: none; }
.cs-rkb-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* Kênh kết nối (intake đa nền tảng) */
/* AI-MARK[QAI-UI:channels-overflow-fix] 2026-07-17 (GMT+7) — chống SCROLL NGANG + text bị che ở tab Kênh kết nối:
   grid không rộng quá viewport (min(300px,100%)), card + con là grid/flex-item shrink được (min-width:0), text/URL/token dài TỰ xuống dòng | rel: cskh.js chCardHtml, QAI-UI:channels-step-collision-fix */
.cs-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.cs-ch-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 15px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.cs-ch-head { display: flex; align-items: center; gap: 9px; }
.cs-ch-ic { font-size: 22px; color: var(--navy-900); background: color-mix(in srgb, var(--navy-900) 8%, #fff); border-radius: 9px; padding: 6px; flex: none; }
.cs-ch-name { font-weight: 800; color: var(--navy-900); flex: 1; min-width: 0; }
.cs-ch-hint { font-size: 12px; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.cs-ch-urllbl { font-size: 12px; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-ch-url { display: flex; gap: 6px; min-width: 0; }
.cs-ch-url input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, #f8fafc); color: var(--text); }
.cs-ch-builtin { font-size: 12px; color: var(--text-muted); background: var(--surface-2, #f1f5f9); border-radius: 8px; padding: 8px 10px; }
.cs-ch-form { display: flex; flex-direction: column; gap: 9px; border-top: 1px dashed var(--border); padding-top: 11px; }
.cs-ch-form label { font-size: 12px; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 4px; }
.cs-ch-form input[type=password], .cs-ch-form input[type=text] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); }
.cs-ch-toggle { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 700 !important; color: var(--text) !important; }
.cs-ch-toggle input { width: auto; }
.cs-ch-set { color: var(--ok, #10b981); font-weight: 700; }
.cs-ch-unset { color: var(--text-muted); font-weight: 600; }
.cs-ch-acts { display: flex; gap: 8px; }
.cs-ch-testout { font-size: 12px; border-radius: 8px; padding: 9px 11px; line-height: 1.5; }
.cs-ch-ok { color: #065f46; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); border-radius: 8px; padding: 9px 11px; }
.cs-ch-err { color: #991b1b; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); border-radius: 8px; padding: 9px 11px; }

/* Kênh kết nối — bố cục "thiết lập theo bước".
   AI-MARK[QAI-UI:channels-step-collision-fix] 2026-07-17 (GMT+7) — ĐỔI TÊN .cs-step*→.cs-chstep* vì .cs-step
   ĐÃ được STEPPER chi tiết ticket (~dòng 1041) định nghĩa với white-space:nowrap → ĐÈ lên card kênh làm text
   KHÔNG xuống dòng → tràn ngang + che text. Tên riêng .cs-chstep* để hết đè | rel: cskh.js chCardHtml (cs-chstep*), .cs-stepper */
.cs-ch-steps { display: flex; flex-direction: column; border-top: 1px dashed var(--border); padding-top: 6px; min-width: 0; }
.cs-chstep { display: flex; gap: 10px; padding: 9px 0; min-width: 0; }
.cs-chstep + .cs-chstep { border-top: 1px dashed var(--border); }
.cs-chstep-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cs-chstep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.cs-chstep-t { font-size: 13px; font-weight: 800; color: var(--navy-900); }
.cs-chstep-body label { font-size: 12px; font-weight: 600; color: var(--text-soft); display: flex; flex-direction: column; gap: 4px; }
.cs-chstep-body input[type=password], .cs-chstep-body input[type=text] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.cs-help { font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2, #f8fafc); overflow: hidden; }
.cs-help > summary { cursor: pointer; padding: 8px 11px; font-weight: 700; color: var(--navy-900); display: flex; align-items: center; gap: 6px; list-style: none; }
.cs-help > summary::-webkit-details-marker { display: none; }
.cs-help > summary .material-symbols-outlined { font-size: 17px; color: var(--purple, #7c3aed); }
.cs-help[open] > summary { border-bottom: 1px dashed var(--border); }
.cs-help ol { margin: 8px 11px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; color: var(--text-soft); line-height: 1.5; }
.cs-help code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: color-mix(in srgb, var(--navy-900) 9%, #fff); padding: 1px 5px; border-radius: 5px; }
.cs-help-warn { font-size: 11.5px; color: #92400e; background: rgba(245, 158, 11, .1); border-top: 1px solid rgba(245, 158, 11, .25); padding: 7px 11px; line-height: 1.45; }
.cs-ch-acts { flex-wrap: wrap; }
.cs-ch-acts button[disabled] { opacity: .5; cursor: not-allowed; }

/* Daisy — Bộ não (reasoning view) */
.cs-brain-q { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cs-brain-qc { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; background: var(--surface); }
.cs-brain-qv { font-size: 24px; font-weight: 800; color: var(--navy-900); }
.cs-brain-ql { font-size: 12px; color: var(--text-soft); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.cs-brain-ql .material-symbols-outlined { font-size: 15px; color: var(--purple); }
.cs-brain-na { font-size: 14px; font-weight: 600; color: var(--text-muted); font-style: italic; }
.cs-brain-gaps { display: flex; flex-direction: column; gap: 7px; }
.cs-brain-gap { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }
.cs-brain-gaptxt { font-size: 13px; color: var(--text); line-height: 1.4; }
.cs-brain-gapn { font-weight: 800; color: var(--warn); margin-right: 4px; }
.cs-brain-recent { display: flex; flex-direction: column; gap: 8px; }
.cs-brain-rec { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cs-brain-rec:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-brain-rec .cs-badge { flex-shrink: 0; margin-top: 1px; }
.cs-brain-recmain { flex: 1; min-width: 0; }
.cs-brain-recact { font-size: 13px; font-weight: 600; color: var(--navy-900); }
.cs-brain-recprev { font-size: 12px; color: var(--text-soft); margin-top: 2px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-brain-rectime { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
/* AI-MARK[QAI-UI:daisybrain-reasoning-gaps] 2026-06-27 18:50 (GMT+7) — suy luận từng ca + ví dụ khoảng trống | rel: cskh.js renderDaisyBrain (reasoningCases/coverageGaps) */
.cs-brain-cases { display: flex; flex-direction: column; gap: 10px; }
.cs-brain-case { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.cs-brain-casehd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.cs-brain-conf { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.cs-brain-caseln { font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 2px; }
.cs-brain-caseln b { color: var(--navy); font-weight: 700; }
.cs-brain-gapex { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.4; }
/* AI-MARK[QAI-UI:rich-linebreak] 2026-06-27 19:25 (GMT+7) — văn bản AI (bullet/xuống-dòng đã thành <br> qua richAI):
   đảm bảo WRAP mã/chuỗi dài + line-height dễ đọc, đồng bộ mọi container | rel: cskh.js richAI */
.cs-aia-text, .cs-detail-desc, .cs-ai-out, .cs-sim-fix, .cs-kdoc-content, .cs-pb-rc, .cs-pb-symptom, .cs-brain-caseln { overflow-wrap: break-word; line-height: 1.5; }
.cs-brain-caseln + .cs-brain-caseln { margin-top: 4px; }

/* Trung tâm chỉ huy (Command Center) */
.cs-cc-attns { display: flex; flex-direction: column; gap: 8px; }
.cs-cc-attn { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 9px; padding: 9px 12px; }
.cs-cc-attn .material-symbols-outlined { font-size: 19px; flex-shrink: 0; }
.cs-cc-attn-txt { flex: 1; font-size: 13px; color: var(--text); font-weight: 600; }
.cs-cc-attn.is-high { border-left-color: var(--danger, #ef4444); background: rgba(239, 68, 68, .05); }
.cs-cc-attn.is-high .material-symbols-outlined { color: var(--danger, #ef4444); }
.cs-cc-attn.is-med { border-left-color: var(--warn, #f59e0b); background: rgba(245, 158, 11, .05); }
.cs-cc-attn.is-med .material-symbols-outlined { color: var(--warn, #f59e0b); }
.cs-cc-attn.is-low { border-left-color: var(--text-muted, #94a3b8); }
.cs-cc-attn.is-low .material-symbols-outlined { color: var(--text-muted, #94a3b8); }

/* ───────── Phase 5b: Unified Inbox · Hàng chờ · KB upload ───────── */
/* Knowledge upload (tải tệp → nội dung) */
.cs-kb-upload { display: flex; align-items: center; gap: 10px; margin: -4px 0 4px; }
.cs-kb-upload .cs-btn { cursor: pointer; }

/* Unified Inbox: rail nhóm + danh sách tin */
.cs-inbox { display: grid; grid-template-columns: 260px 1fr; gap: 0; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cs-inbox-rail { border-right: 1px solid var(--border); background: var(--surface-2); overflow-y: auto; max-height: 70vh; }
.cs-inbox-g { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--border); font: inherit; color: var(--text); }
.cs-inbox-g:hover { background: var(--surface); }
.cs-inbox-grow.is-active .cs-inbox-g:hover { background: transparent; }
.cs-inbox-g .material-symbols-outlined { font-size: 19px; color: var(--orange); flex-shrink: 0; }
.cs-inbox-g-meta { display: flex; flex-direction: column; min-width: 0; }
.cs-inbox-g-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-inbox-g-meta small { font-size: 11px; color: var(--text-muted); }
.cs-inbox-main { overflow-y: auto; max-height: 70vh; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cs-msg { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.cs-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cs-msg-head b { font-size: 13px; color: var(--navy-900); }
.cs-msg-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.cs-msg-acts { margin-top: 8px; }
@media (max-width: 760px) { .cs-inbox { grid-template-columns: 1fr; } .cs-inbox-rail { max-height: 180px; } }

/* AI-MARK[QAI-UI:viber-inbox] 2026-07-17 16:24 (GMT+7) — sub-tab Viber (tab Nhóm): rail hội thoại theo người gửi + bong bóng tin + nút mở ticket | rel: cskh.js loadViberInbox */
.cs-vib-conn { margin: 0 0 12px; }
.cs-vib-conn .cs-empty { text-align: left; padding: 10px 13px; }
.cs-vib-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 13px; }
.cs-vib-status.is-ok { border-color: #bbf7d0; background: #f0fdf4; }
.cs-vib-status.is-warn { border-color: #fed7aa; background: #fff7ed; }
.cs-vib-status-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-vib-status-main .material-symbols-outlined { font-size: 20px; color: var(--orange); }
.cs-vib-status.is-ok .cs-vib-status-main .material-symbols-outlined { color: #16a34a; }
.cs-vib-status-title { font-size: 13px; font-weight: 800; color: var(--navy-900); }
.cs-vib-status-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.cs-vib-status .cs-badge { flex-shrink: 0; }
.cs-vib-conv { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--border); font: inherit; color: var(--text); }
.cs-vib-conv:hover { background: var(--surface); }
.cs-vib-conv.is-active { background: #fff4ec; box-shadow: inset 3px 0 0 var(--orange); }
.cs-vib-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cs-vib-conv-name { font-size: 13px; font-weight: 700; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-vib-conv-time { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
.cs-vib-conv-last { font-size: 12px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-vib-conv-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.cs-vib-head { border-bottom: 1px dashed var(--border); padding-bottom: 8px; }
.cs-vib-head b { font-size: 14px; color: var(--navy-900); }
.cs-vib-thread { display: flex; flex-direction: column; gap: 9px; }
.cs-vib-msg { align-self: flex-start; max-width: 82%; background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 9px 12px; }
.cs-vib-msg-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.cs-vib-msg-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 10.5px; color: var(--text-muted); }
/* AI-MARK[QAI-UI:viber-chatbot] 2026-07-17 21:07 (GMT+7) — bong bóng Daisy (fromBot) canh PHẢI, nền cam nhạt; toggle bật chatbot | rel: cskh.js openViberConv/chCardHtml */
.cs-vib-msg--bot { align-self: flex-end; background: color-mix(in srgb, var(--orange) 10%, #fff); border-color: color-mix(in srgb, var(--orange) 30%, var(--border)); border-radius: 12px 12px 4px 12px; }
.cs-vib-msg-who { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; color: var(--orange); margin-bottom: 3px; }
.cs-vib-msg-who .material-symbols-outlined { font-size: 13px; }
.cs-ch-bot { padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 2px; }
.cs-vib-ticket { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--navy-900); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.cs-vib-ticket:hover { background: #fff4ec; border-color: var(--orange); }
.cs-vib-ticket .material-symbols-outlined { font-size: 13px; color: var(--orange); }

/* AI-MARK[QAI-UI:inbox-group-manage] 2026-06-26 (GMT+7) — tab "Nhóm" (đổi từ "Hộp thư"): header thống kê (.cs-gstats) + bulk (.cs-gbulk) + checkbox hàng (.cs-inbox-grow/.cs-inbox-gck) + panel GỘP cấu hình bot (5 toggle) + từ khoá (.cs-gkw) + modal cấu hình mặc định (.cs-modal-acts); badge cảnh báo (.cs-gbadge--warn); .cs-bs-* cũ đã gỡ | rel: cskh.js renderInboxMain/GRP_TOGGLES */
.cs-inbox-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.cs-inbox-tools .cs-input { max-width: 280px; }
.cs-inbox-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.cs-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cs-chip:hover { border-color: var(--orange); }
.cs-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cs-chip-n { font-size: 11px; opacity: .8; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 6px; }
.cs-chip.is-active .cs-chip-n { background: rgba(255,255,255,.22); }
.cs-inbox-g.is-left { opacity: .62; }
.cs-inbox-g-meta { gap: 2px; }
.cs-gbadges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.cs-gbadge { font-size: 10px; line-height: 1.6; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.cs-gbadge--mon { background: #fff4ec; color: #c2410c; border-color: #fed7aa; }
.cs-gbadge--warn { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.cs-gbadge--team { background: #eef2ff; color: var(--navy); border-color: #c7d2fe; }
.cs-gbadge--off { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.cs-gpanel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 14px; }
.cs-gpanel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-gpanel-head h3 { margin: 0; font-size: 15px; }
/* AI-MARK[QAI-UI:inbox-group-collapse] 2026-06-27 20:12 (GMT+7) — nút THU GỌN panel cấu hình + chip thông tin gọn + toggle lưới 2 cột | rel: cskh.js renderInboxMain */
.cs-gcollapse { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px 4px 9px; cursor: pointer; transition: background .12s, color .12s; }
.cs-gcollapse:hover { background: var(--surface-2); color: var(--navy); }
.cs-gcollapse .material-symbols-outlined { font-size: 18px; }
.cs-gpanel.is-collapsed .cs-gpanel-body { display: none; }
.cs-gpanel.is-collapsed { padding-bottom: 11px; }
.cs-ginfo { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-gchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; line-height: 1.5; }
.cs-gchip b { color: var(--navy-900); font-weight: 700; }
.cs-gchip--warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft, #fff4ec); }
.cs-gchip--ok { color: var(--ok, #16a34a); border-color: #bbf7d0; background: #f0fdf4; }
.cs-gchip--off { color: var(--text-muted); }
.cs-gctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; border-top: 1px dashed var(--border); padding-top: 12px; }
.cs-gtoggle { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; }
.cs-gtoggle input { width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; flex-shrink: 0; }
.cs-gtoggle input:disabled { cursor: not-allowed; }
.cs-gbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cs-gmsgs { display: flex; flex-direction: column; gap: 9px; }

/* AI-MARK[QAI-UI:knowledge-toc] — Kho tri thức: độ phủ + mục lục theo tài liệu gốc + truy nguồn + liên kết */
.cs-kcov { margin-bottom: 12px; }
/* Độ phủ GỌN: dải số ngang mỏng (thay 3 thẻ to) — đỡ rối mắt, theo phong cách phẳng */
.cs-kcov-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-kcov-num { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.cs-kcov-num b { font-size: 17px; color: var(--navy); margin-right: 4px; font-weight: 800; }
.cs-kcov-num--warn b { color: #c2410c; }
.cs-kcov-thin { margin-left: auto; font-size: 12px; color: #b45309; display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.cs-kcov-thin .material-symbols-outlined { font-size: 16px; }
/* Chip nhóm nghiệp vụ — nhỏ, nhẹ */
.cs-kcov-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cs-kcat { font-size: 11px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; line-height: 1.7; }
.cs-kcat b { color: var(--navy); font-weight: 700; }
.cs-kcat--more { cursor: pointer; color: var(--orange); background: transparent; border-color: rgba(255,107,43,.32); font: inherit; font-size: 11px; }
.cs-kcat--more:hover { background: var(--orange-soft); }
.cs-kgroups { display: flex; flex-direction: column; gap: 9px; }
.cs-kgroup { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cs-kgroup-h { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: var(--surface-2); padding: 11px 13px; cursor: pointer; font: inherit; color: var(--text); }
.cs-kgroup-h:hover { background: #eef2f7; }
.cs-kgroup-h.is-open { background: #eef2ff; }
.cs-kgroup-caret { font-size: 20px; color: var(--text-muted); }
.cs-kgroup-ico { font-size: 19px; color: var(--orange); }
.cs-kgroup-meta { display: flex; flex-direction: column; min-width: 0; }
.cs-kgroup-meta b { font-size: 13.5px; }
.cs-kgroup-meta small { font-size: 11.5px; color: var(--text-muted); }
.cs-kgroup-body { padding: 4px 10px 8px; }
.cs-ksec { padding: 4px 0; }
.cs-ksec-h { font-size: 12px; font-weight: 600; color: var(--navy); text-transform: capitalize; margin: 8px 0 4px; padding-left: 4px; }
.cs-kdoc { border-bottom: 1px solid var(--border); }
.cs-kdoc:last-child { border-bottom: 0; }
.cs-kdoc-row { display: flex; align-items: flex-start; gap: 9px; padding: 11px 8px; cursor: pointer; border-radius: 8px; }
.cs-kdoc-row:hover { background: var(--surface-2); }
.cs-kdoc-caret { font-size: 19px; color: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.cs-kdoc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-kdoc-title { font-size: 13.5px; line-height: 1.5; white-space: normal; word-break: break-word; }
.cs-kdoc.is-open .cs-kdoc-title { font-weight: 700; color: var(--navy-900); }
.cs-kdoc-meta { font-size: 11.5px; color: var(--text-muted); }
/* AI-MARK[QAI-UI:rag-ready-clarity] 2026-06-27 — B: badge sẵn sàng RAG cho doc active | rel: cskh.js _knowDocRow readyBadge */
.cs-kdoc-ready { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: #15803d; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 20px; padding: 1px 8px; line-height: 1.6; margin-top: 3px; letter-spacing: .01em; }
/* C: note phụ trong cs-pb-desc */
.cs-pb-desc-note { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.cs-kdoc-acts { display: flex; gap: 4px; flex-shrink: 0; }
.cs-kdoc-detail { padding: 4px 6px 12px 30px; display: flex; flex-direction: column; gap: 8px; }
/* AI-MARK[QAI-UI:knowledge-ingest] 2026-06-27 10:10 (GMT+7) — bỏ max-height:280px → hiện TOÀN BỘ nội dung khi bấm vào mục (chủ: xem được hết, không bị cắt); giữ pre-wrap giữ định dạng | rel: cskh.js _knowDocRow (bỏ slice 700) */
.cs-kdoc-content { font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--text); background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 11px; }
.cs-kdoc-src { font-size: 12px; color: var(--text-muted); }
.cs-kdoc-rel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-chip--rel { background: #eef2ff; border-color: #c7d2fe; color: var(--navy); font-size: 11.5px; padding: 3px 9px; }
.cs-chip--rel:hover { background: #e0e7ff; }

/* Hàng chờ duyệt */
.cs-pend-text { max-width: 420px; white-space: pre-wrap; word-break: break-word; }

/* Tab Nhân sự & Định tuyến */
.cs-muted { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.cs-icon-btn { background: transparent; border: 0; cursor: pointer; color: var(--text-soft); display: inline-flex; align-items: center; padding: 4px; border-radius: 8px; }
.cs-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.cs-modal-box--lg { max-width: 720px; width: 92vw; }
.cs-dbadge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cs-dbadge--on { background: rgba(16,185,129,.14); color: #047857; }
.cs-dbadge--wait { background: rgba(245,158,11,.16); color: #b45309; }
.cs-dbadge--off { background: var(--surface-2); color: var(--text-muted); }
.cs-dbadge--sugg { background: var(--orange-soft); color: #c2410c; }
.cs-sugg > td { background: var(--orange-soft); }

/* Tab Nhân sự — LIST phân cột (bảng), nhóm theo Khối (thu gọn được) — dày, ít scroll */
.cs-hr-wrap { display: block; }
.cs-hr-tablewrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cs-hr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cs-hr-table thead th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.cs-hr-table thead th:last-child { text-align: right; }
.cs-hr-grp td { background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--navy-900); text-transform: uppercase; letter-spacing: .3px; padding: 8px 14px; cursor: pointer; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-hr-grp:hover td { filter: brightness(0.985); }
.cs-hr-chev { font-size: 18px; vertical-align: middle; color: var(--text-muted); transition: transform .18s; }
.cs-hr-grp.is-collapsed .cs-hr-chev { transform: rotate(-90deg); }
.cs-hr-grp-n { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.cs-hr-prow { border-bottom: 1px solid var(--border); transition: background .1s; }
.cs-hr-prow.is-hidden { display: none; }
.cs-hr-prow:hover { background: var(--surface-2); }
.cs-hr-prow td { padding: 7px 14px; color: var(--text-soft); vertical-align: middle; }
.cs-hr-prow td.cs-hr-email { color: var(--text); word-break: break-all; }
.cs-hr-prow td:last-child { text-align: right; white-space: nowrap; }
.cs-hr-pname { display: flex; align-items: center; gap: 9px; }
.cs-hr-pname-txt { min-width: 0; }
.cs-hr-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--navy), #3b5bd8); }
.cs-hr-name { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.cs-hr-pname-txt .cs-muted { margin-top: 0; }
/* Thanh tìm kiếm tab Nhân sự trải full chiều ngang */
.cs-search--wide { max-width: none; }

/* Bộ lọc nhân sự — hiện HẾT, KHÔNG cắt dòng (panel cuộn 1 lần, thanh cuộn mảnh) */
.cs-flt-badge { background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.cs-flt-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 16px 18px; margin: 0 0 14px; max-height: 64vh; overflow-y: auto; }
.cs-flt-panel::-webkit-scrollbar { width: 8px; }
.cs-flt-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.cs-flt-panel::-webkit-scrollbar-track { background: transparent; }
.cs-flt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 18px; align-items: start; }
.cs-flt-sect { min-width: 0; }
.cs-flt-h { font-size: 12px; font-weight: 700; color: var(--navy-900); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.cs-flt-opts { display: flex; flex-direction: column; gap: 6px; }
.cs-flt-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--text-soft); cursor: pointer; }
.cs-flt-opt input { flex: 0 0 auto; margin-top: 2px; }
.cs-flt-foot { position: sticky; bottom: -16px; display: flex; justify-content: flex-end; margin-top: 14px; padding: 10px 0 2px; border-top: 1px solid var(--border); background: var(--surface); }

/* Popup DUYỆT & gửi ticket */
.cs-rv-box .cs-modal-body { max-height: 78vh; overflow-y: auto; }
.cs-rv-rcp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; margin-bottom: 12px; }
.cs-rv-rcp .cs-hr-avatar { width: 42px; height: 42px; font-size: 16px; }
.cs-rv-rcp-id { flex: 1; min-width: 0; }
.cs-rv-rcp-name { font-weight: 700; font-size: 15px; color: var(--text); }
.cs-rv-tk { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; }
.cs-rv-tk-code { font-weight: 700; color: var(--navy); font-size: 15px; }
.cs-rv-tk-sub { font-size: 13.5px; color: var(--text); margin-top: 2px; }
.cs-rv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-rv-chip { font-size: 11.5px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.cs-rv-field { margin-bottom: 14px; }
.cs-rv-label { font-size: 12.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 7px; }
.cs-rv-label .cs-muted { display: inline; font-weight: 400; margin: 0; }
/* .cs-rv-chs và .cs-rv-ch-btn định nghĩa ở khối CUSTOM CATEGORY bên dưới (đã dùng pill toggle thay card) */
.cs-rv-assign { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-soft); margin-bottom: 14px; cursor: pointer; }
.cs-rv-msg { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--text); background: var(--surface); resize: vertical; min-height: 150px; }
.cs-rv-msg:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,138,.1); }

/* AI-MARK[QAI-UI:knowledge-ingest] 2026-06-26 11:30 (GMT+7) — Ingest modal: dropzone + steps + progress + file rows + confidence badge + playbook card; sub-tab Cẩm nang pane (#csKnowPlaybooksPane) | rel: cskh/routes.js ingest endpoints, UI-L4-knowledge */
/* Cẩm nang pane (sub-tab bên trong Kho tri thức) — thêm khoảng cách nhẹ trên */
#csKnowPlaybooksPane { padding-top: 4px; }
/* ── Drop zone ── */
.cs-dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 28px 18px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cs-dropzone:hover, .cs-dropzone.is-over { border-color: var(--orange); background: var(--orange-soft); }
.cs-dropzone .material-symbols-outlined { font-size: 32px; color: var(--orange); }
.cs-dropzone-hint { font-size: 13px; color: var(--text-soft); }
.cs-dropzone-sub { font-size: 11.5px; color: var(--text-muted); }
.cs-dropzone-files { width: 100%; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cs-dz-file { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; text-align: left; }
.cs-dz-file .material-symbols-outlined { font-size: 18px; color: var(--navy); flex-shrink: 0; }
.cs-dz-fname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-dz-size { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.cs-dz-rm { background: transparent; border: 0; cursor: pointer; color: var(--text-muted); display: inline-flex; padding: 2px; border-radius: 6px; flex-shrink: 0; }
.cs-dz-rm:hover { background: var(--surface-2); color: var(--danger); }

/* ── Ingest progress loading screen ── */
.cs-ingest-wrap { display: flex; flex-direction: column; gap: 18px; }
.cs-ingest-steps { display: flex; gap: 0; align-items: stretch; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 4px; }
.cs-ingest-step {
  flex: 1; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  border-bottom: 3px solid var(--border); text-align: center;
  transition: color .2s, border-color .2s;
}
.cs-ingest-step.is-done { color: var(--ok); border-color: var(--ok); }
.cs-ingest-step.is-active { color: var(--orange); border-color: var(--orange); }
.cs-ingest-step .material-symbols-outlined { font-size: 20px; }
/* ── Smooth progress bar ── */
.cs-progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.cs-progress-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #ff9154);
  transition: width .55s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.cs-ingest-eta { font-size: 12px; color: var(--text-muted); text-align: right; margin-top: 2px; }
/* ── Per-file rows ── */
.cs-ingest-files { display: flex; flex-direction: column; gap: 7px; }
.cs-ingest-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: var(--surface); }
.cs-ingest-file .material-symbols-outlined { font-size: 19px; color: var(--navy); flex-shrink: 0; }
.cs-inf-name { flex: 1; min-width: 0; }
.cs-inf-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cs-inf-stage { font-size: 11px; color: var(--text-muted); }
.cs-inf-pct { font-size: 12.5px; font-weight: 800; color: var(--navy); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cs-conf-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.cs-conf-badge--hi { background: rgba(16,185,129,.14); color: #047857; }
.cs-conf-badge--lo { background: rgba(245,158,11,.16); color: #b45309; }
.cs-conf-badge--err { background: rgba(239,68,68,.13); color: #dc2626; }
/* ── Confidence review (editable extract) ── */
.cs-ingest-review { display: flex; flex-direction: column; gap: 14px; }
.cs-ir-file { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 14px; }
.cs-ir-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cs-ir-fname { font-weight: 700; font-size: 13.5px; flex: 1; }
.cs-ir-warn { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.cs-ir-ta { width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; min-height: 160px; color: var(--text); background: var(--surface); }
.cs-ir-ta:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.cs-ir-acts { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
/* ── Playbook cards (kinh nghiệm Daisy) ── */
.cs-pb-section { margin-top: 20px; }
/* .cs-pb-head, .cs-pb-head-title, .cs-pb-desc → redefined in knowledge-ui-upgrade block below */
.cs-pb-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-pb-stat { font-size: 12px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.cs-pb-stat b { color: var(--navy-900); }
.cs-pb-list { display: flex; flex-direction: column; gap: 10px; }
.cs-pb-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  padding: 14px 15px;
}
.cs-pb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cs-pb-group { font-size: 13px; font-weight: 800; color: var(--navy-900); flex: 1; }
.cs-pb-meta { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.cs-pb-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(139,92,246,.1); color: var(--purple); }
.cs-pb-symptom { font-size: 12.5px; color: var(--text-soft); margin-bottom: 6px; }
.cs-pb-rc { font-size: 12.5px; color: var(--text); margin-bottom: 6px; }
.cs-pb-rc b { color: var(--navy-900); }
.cs-pb-steps { margin: 4px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--text); }
.cs-pb-steps li { margin: 3px 0; }
.cs-pb-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.cs-pb-foot .cs-sub { display: inline-flex; align-items: center; gap: 3px; }
.cs-pb-foot .material-symbols-outlined { font-size: 15px; }

/* ══════ KHO TRI THỨC — UI/UX upgrade (premium-flat) — AI-MARK[QAI-UI:knowledge-ui-upgrade] 2026-06-27 10:32 (GMT+7) | rel: cskh.js renderKnowCoverage/renderPlaybooks/openKnowModal, index.html #csKnowModal ══════ */
/* Dải thống kê phân đoạn (độ phủ + cẩm nang) — 1 dải bo tròn, ngăn bằng đường kẻ (phẳng, không card-trong-card) */
.cs-kstats { display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.cs-kstat { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex: 1 1 150px; min-width: 0; border-right: 1px solid var(--border); }
.cs-kstat:last-child { border-right: 0; }
.cs-kstat-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(30,58,138,.08); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.cs-kstat-ic .material-symbols-outlined { font-size: 19px; }
.cs-kstat-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-kstat-txt b { font-size: 18px; font-weight: 800; color: var(--navy-900); line-height: 1.1; }
.cs-kstat-txt small { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cs-kstat--ok .cs-kstat-ic { background: rgba(16,185,129,.12); color: var(--ok); }
.cs-kstat--warn .cs-kstat-ic { background: rgba(245,158,11,.14); color: #c2410c; }
.cs-kstat--warn .cs-kstat-txt b { color: #c2410c; }
/* AI-MARK[QAI-UI:knowledge-ingest] 2026-06-27 11:29 (GMT+7) — A:cs-btn--danger-fill (nút Huỷ học solid đỏ); B:cs-learn-log panel log nhóm; D:cs-learn-recap dải thu gọn; E:bỏ cs-kstat-warn pill (giữ class cho compat) | rel: UI-L4-CSKH */
/* A: nút Huỷ học — solid đỏ (phân biệt với navy "Cho Daisy học") */
.cs-btn--danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.cs-btn--danger-fill:hover { background: #dc2626; border-color: #dc2626; }
.cs-btn--danger-fill:disabled { opacity: .55; cursor: not-allowed; }
/* giữ cs-kstat-warn không crash nếu còn nơi nào render (E: đã bỏ khỏi renderKnowCoverage) */
.cs-kstat-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 4px 11px; cursor: help; align-self: center; margin: 6px 10px 6px auto; white-space: nowrap; }
.cs-kstat-warn .material-symbols-outlined { font-size: 15px; }
@media (max-width: 680px) { .cs-kstat { flex-basis: 50%; border-bottom: 1px solid var(--border); } .cs-kstat:nth-child(even) { border-right: 0; } }

/* ── Kinh nghiệm Daisy — header với nút "Cho Daisy học" (A) ── */
.cs-pb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; }
.cs-pb-head-title { flex: 1; min-width: 0; }
.cs-pb-head-title h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy-900); display: flex; align-items: center; gap: 8px; }
.cs-pb-head-title h3 .material-symbols-outlined { font-size: 19px; color: var(--orange); }
.cs-pb-desc { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.cs-pb-learn-btn { flex-shrink: 0; }

/* ── 4-bước loading Daisy học + log panel ── */
.cs-learn-wrap { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cs-learn-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-learn-step { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-muted); transition: background .2s, border-color .2s, color .2s; }
.cs-learn-step--done { border-color: var(--ok); background: rgba(16,185,129,.08); color: var(--ok); }
.cs-learn-step--active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange); font-weight: 700; }
.cs-learn-step-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.cs-learn-step-ic .material-symbols-outlined { font-size: 18px; }
.cs-learn-sep { font-size: 12px; color: var(--border-strong); flex-shrink: 0; padding: 0 2px; }
.cs-learn-spinner { position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: var(--orange); border-radius: 50%; animation: cs-spin .8s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-learn-progress-row { display: flex; align-items: center; gap: 10px; }
.cs-learn-pbar { flex: 1; }
.cs-learn-pct { font-size: 12px; font-weight: 700; color: var(--navy); min-width: 36px; text-align: right; }
.cs-learn-note { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.cs-learn-error { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--danger); border-radius: 12px; color: var(--danger); font-size: 13px; background: rgba(239,68,68,.05); }
.cs-learn-error .material-symbols-outlined { font-size: 18px; vertical-align: middle; margin-right: 4px; }
/* B: panel log realtime từng nhóm */
.cs-learn-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; scroll-behavior: smooth; }
.cs-learn-log-row { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--text); line-height: 1.45; }
.cs-learn-log-ic { font-size: 15px !important; flex-shrink: 0; position: relative; top: 2px; }
.cs-learn-log-ic--ai { color: var(--orange); }
.cs-learn-log-ic--grp { color: var(--text-muted); }
/* AI-MARK[QAI-UI:rag-ready-clarity] 2026-06-27 — D: reuse row xám nhạt (♻ Giữ nguyên) | rel: cskh.js renderRebuildLog kind=reuse */
.cs-learn-log-ic--reuse { color: var(--text-muted); opacity: .55; }
.cs-learn-log-row--reuse { opacity: .6; }
.cs-learn-log-grp--reuse { font-weight: 500; color: var(--text-muted); }
.cs-learn-log-grp { font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; flex-shrink: 0; }
.cs-learn-log-hint { flex: 1; min-width: 0; color: var(--text-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* D: dải "Buổi học gần nhất" thu gọn */
.cs-learn-recap { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; overflow: hidden; }
.cs-learn-recap-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; }
.cs-learn-recap-head .material-symbols-outlined { font-size: 17px; color: var(--orange); flex-shrink: 0; }
.cs-learn-recap-sum { flex: 1; min-width: 0; color: var(--text-soft); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-learn-recap-toggle { flex-shrink: 0; font-size: 12px !important; }
.cs-learn-recap-body { padding: 0 14px 12px; }
.cs-learn-recap-body .cs-learn-log { max-height: 180px; border-top: none; padding-top: 4px; }

/* Thẻ cẩm nang premium (header màu + thân + chân chip) */
.cs-pb-card2 { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.cs-pb-card2:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cs-pb-card2 .cs-pb-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); margin: 0; }
.cs-pb-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex-shrink: 0; }
.cs-pb-ico .material-symbols-outlined { font-size: 18px; }
.cs-pb-card2 .cs-pb-group { font-size: 13.5px; font-weight: 800; color: var(--navy-900); flex: 1; min-width: 0; }
.cs-pb-card2 .cs-pb-meta { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.cs-pb-badge--time { display: inline-flex; align-items: center; gap: 3px; background: rgba(30,58,138,.08); color: var(--navy); }
.cs-pb-badge--time .material-symbols-outlined { font-size: 13px; }
.cs-pb-body { padding: 13px 16px 4px; }
.cs-pb-rc-lbl { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--orange); background: var(--orange-soft); border-radius: 6px; padding: 2px 7px; margin-right: 5px; }
.cs-pb-card2 .cs-pb-foot { padding: 4px 16px 14px; margin: 0; border: 0; gap: 7px; }
.cs-pb-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.cs-pb-chip .material-symbols-outlined { font-size: 14px; color: var(--navy); }
.cs-pb-chip--soft { color: var(--ok); border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.07); }
.cs-pb-chip--soft .material-symbols-outlined { color: var(--ok); }

/* Modal "Thêm kiến thức" premium */
.cs-kmodal-box { max-width: 760px; }
.cs-kmodal-head { display: flex; align-items: center; gap: 13px; }
.cs-kmodal-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex-shrink: 0; }
.cs-kmodal-ico .material-symbols-outlined { font-size: 23px; }
.cs-kmodal-titles { flex: 1; min-width: 0; }
.cs-kmodal-titles h3 { margin: 0; }
.cs-kmodal-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.cs-kform { display: flex; flex-direction: column; gap: 15px; }
.cs-kform-field { display: flex; flex-direction: column; gap: 6px; }
.cs-kform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cs-kform-grid { grid-template-columns: 1fr; } }
.cs-kform-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.cs-kform-lbl.req::after { content: ' *'; color: var(--danger); }
.cs-kform-hint { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
#csKnowForm input:not([type=checkbox]), #csKnowForm select, #csKnowForm textarea { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface); width: 100%; }
#csKnowForm input:focus, #csKnowForm select:focus, #csKnowForm textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
#csKnowForm textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.cs-ktoggle { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.cs-ktoggle input { display: none; }
.cs-ktoggle-sw { width: 40px; height: 23px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex-shrink: 0; }
.cs-ktoggle-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.cs-ktoggle input:checked + .cs-ktoggle-sw { background: var(--ok); }
.cs-ktoggle input:checked + .cs-ktoggle-sw::after { transform: translateX(17px); }
.cs-ktoggle-txt { display: flex; flex-direction: column; }
.cs-ktoggle-txt b { font-size: 13px; color: var(--navy-900); }
.cs-ktoggle-txt small { font-size: 11.5px; color: var(--text-muted); }
.cs-kform-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
.cs-kor { display: flex; align-items: center; gap: 13px; margin: 20px 0 14px; color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cs-kor::before, .cs-kor::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.cs-kupload { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 15px; }
.cs-kupload-cap { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-soft); margin-bottom: 11px; }
.cs-kupload-cap .material-symbols-outlined { font-size: 17px; color: var(--orange); }
.cs-kupload-cap b { color: var(--navy-900); }
/* ── Related tickets inline (knowledge doc expand) ── */
.cs-kdoc-tickets { margin-top: 8px; }
.cs-kdoc-tk-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12px; }
.cs-kdoc-tk-row .cs-code { font-size: 11.5px; }
.cs-kdoc-tk-row .cs-sub { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* AI-MARK[QAI-UI:review-send-dual-channel] 2026-06-26 22:57 (GMT+7) — CSS modal Soạn&gửi: row 2 dropdown, info kênh, recompose btn | rel: UI-L4-CSKH, cskh.js renderReview */
.cs-rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cs-rv-field--inline { margin-bottom: 0; }
.cs-rv-field--inline .cs-rv-label { display: block; margin-bottom: 5px; }
.cs-rv-ch-info { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(30,58,138,.05); border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 14px; font-size: 13px; color: var(--text); }
.cs-rv-ch-info .material-symbols-outlined { font-size: 18px; color: var(--navy); flex-shrink: 0; }
.cs-rv-recompose { margin-left: 8px; vertical-align: middle; }
/* cs-rv-foot: căn GIỮA định nghĩa ở khối CUSTOM CATEGORY bên dưới — giữ border-top ở đây làm nguồn */
.cs-rv-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
/* AI-MARK[QAI-UI:ticket-attachments] 2026-06-26 17:40 (GMT+7) — CSS attachment section: list, thumbnail, dropzone nhỏ | rel: UI-L4-CSKH, cskh.js renderAttachments/_atDropzone */
.cs-att-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cs-att-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--navy-900); }
.cs-att-head .material-symbols-outlined { font-size: 18px; color: var(--orange); }
.cs-att-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.cs-att-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--surface); font-size: 13px; }
.cs-att-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--border); cursor: zoom-in; }
.cs-att-icon { font-size: 22px; color: var(--navy); flex-shrink: 0; }
.cs-att-info { flex: 1; min-width: 0; }
.cs-att-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cs-att-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.cs-att-acts { display: flex; gap: 4px; flex-shrink: 0; }
.cs-att-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--text-muted); transition: background .12s, color .12s; }
.cs-att-btn:hover { background: var(--surface-2); color: var(--navy); }
.cs-att-btn.is-danger:hover { background: rgba(239,68,68,.1); color: var(--danger); }
.cs-att-btn .material-symbols-outlined { font-size: 17px; }
/* wrapper dropzone trong attachment section */
.cs-att-dz-wrap { margin-top: 8px; }
/* dropzone compact trong drawer (tái dùng .cs-dropzone — kết hợp class cs-dropzone--compact) */
.cs-dropzone--compact { padding: 14px 16px; }
.cs-dropzone--compact .material-symbols-outlined { font-size: 22px; }
.cs-dropzone--compact .cs-dropzone-hint { font-size: 12px; }
.cs-dropzone--compact .cs-dropzone-sub { display: none; }
.cs-att-uploading { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* AI-MARK[QAI-UI:ticket-detail-redesign] 2026-06-26 20:53 (GMT+7) — drawer chi tiết: header dính (stepper + 3 nhóm nút + nút chính thông minh) + tabs + thẻ thông tin + ghi chú dính | rel: cskh.js renderDetail/smartPrimary/renderStepper/renderInfoCards/switchDetailTab, cskh/index.html #csDetailHead */
.cs-drawer-panel { width: 640px; }
.cs-drawer-head { display: block; padding: 14px 22px 0; }
.cs-dt-topbar { display: flex; align-items: center; gap: 8px; }
.cs-dt-topbar .cs-drawer-code { font-size: 12px; font-weight: 800; color: var(--orange); margin: 0; }
.cs-dt-spacer { flex: 1; }
.cs-drawer-head .cs-dt-title { margin: 9px 0 13px; font-size: 16px; font-weight: 800; color: var(--navy-900); line-height: 1.4; }
.cs-more-wrap { position: relative; }
.cs-more-menu { position: absolute; right: 0; top: 36px; z-index: 6; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow); padding: 6px; min-width: 172px; }
.cs-more-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: 8px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.cs-more-item:hover { background: var(--surface-2); }
.cs-more-item.is-danger { color: var(--danger); }
.cs-more-item .material-symbols-outlined { font-size: 18px; }

/* Thanh tiến trình trạng thái (bấm được) */
.cs-stepper { display: flex; align-items: center; margin-bottom: 14px; }
.cs-step { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; cursor: default; color: var(--text-muted); white-space: nowrap; }
button.cs-step { cursor: pointer; }
.cs-step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 1.5px solid var(--border-strong); color: var(--text-muted); background: var(--surface); flex: none; }
.cs-step-dot .material-symbols-outlined { font-size: 14px; }
.cs-step-lbl { font-size: 12.5px; font-weight: 600; }
.cs-step.is-done { color: var(--ok); }
.cs-step.is-done .cs-step-dot { background: rgba(16, 185, 129, .12); border-color: transparent; color: var(--ok); }
.cs-step.is-active { color: var(--navy); }
.cs-step.is-active .cs-step-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
button.cs-step:hover .cs-step-dot { border-color: var(--navy); color: var(--navy); }
.cs-step-conn { flex: 1; height: 2px; background: var(--border); margin: 0 6px; min-width: 10px; }
.cs-step-conn.is-done { background: rgba(16, 185, 129, .5); }

/* Nhãn nhóm (dùng lại cho khu hành động + Nhóm chờ) */
.cs-actgrp { display: flex; flex-direction: column; gap: 5px; }
.cs-actgrp-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.cs-actgrp-label .material-symbols-outlined { font-size: 15px; }
.cs-actgrp-row { display: flex; gap: 8px; align-items: center; }

/* AI-MARK[QAI-UI:detail-header-redesign] 2026-06-27 09:18 (GMT+7) — cụm hành động XẾP DỌC: thẻ phụ trách TRÊN, nút chính MỎNG (1 hàng) DƯỚI; nút màu theo loại việc qua var --ptone (Đóng=ĐỎ --danger), hover GIỮ màu (không washout bởi .cs-btn:hover) | rel: cskh.js renderPrimary/renderAssigneeCard/smartPrimary tone danger */
.cs-dt-actions { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.cs-dt-action-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Nút hành động CHÍNH — MỎNG (1 hàng): icon + nhãn + mô tả phụ inline; màu theo loại việc qua var --ptone; hover GIỮ màu + tối nhẹ */
.cs-dt-primary { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 10px; color: #fff; font-weight: 800; cursor: pointer; background: var(--ptone, var(--navy)); transition: background .12s, filter .12s; }
.cs-dt-primary:hover { background: var(--ptone, var(--navy)); filter: brightness(.92); }
.cs-dt-primary .material-symbols-outlined { font-size: 19px; }
.cs-dt-primary-lbl { font-size: 14px; }
.cs-dt-primary-sub { font-size: 12px; font-weight: 600; opacity: .82; }
.cs-dt-primary--ok { --ptone: var(--ok); }
.cs-dt-primary--navy { --ptone: var(--navy); }
.cs-dt-primary--orange { --ptone: var(--orange); }
.cs-dt-primary--neutral { --ptone: #475569; }
.cs-dt-primary--danger { --ptone: var(--danger); }
.cs-dt-primary-hint { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 12px; }
.cs-dt-primary-hint .material-symbols-outlined { font-size: 18px; color: var(--warn); }

/* Thẻ Người phụ trách — GỌN: nhãn + (avatar+select) + [Gợi ý | Gửi cho nhân sự] 1 hàng */
.cs-assignee-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cs-ac-row { display: flex; align-items: center; gap: 8px; }
.cs-ac-avatar { width: 30px; height: 30px; font-size: 12px; }
.cs-ac-select { flex: 1; min-width: 0; }
.cs-ac-btns { display: flex; gap: 6px; }
.cs-ac-btns .cs-ac-rec { flex: none; }
.cs-ac-btns .cs-ac-send { flex: 1; min-width: 0; justify-content: center; }

/* Tabs trong drawer */
.cs-dt-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 0 -22px; padding: 0 22px; }
.cs-dt-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 11px 4px; margin-right: 18px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cs-dt-tab .material-symbols-outlined { font-size: 17px; }
.cs-dt-tab.is-active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 800; }
.cs-dt-tabbadge { font-size: 11px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; color: var(--text-soft); }
.cs-dt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }

/* Panes */
.cs-dt-pane[hidden] { display: none; }
.cs-dt-pane--history { display: flex; flex-direction: column; min-height: 100%; }

/* Thẻ thông tin (tab Thông tin) */
.cs-info-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cs-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.cs-info-card h5 { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .03em; }
.cs-info-card h5 .material-symbols-outlined { font-size: 16px; color: var(--orange); }
.cs-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.cs-info-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.cs-info-k { color: var(--text-muted); font-weight: 600; }
.cs-info-v { color: var(--text); font-weight: 600; text-align: right; }
/* Dropdown "Kênh xử lý" nội tuyến trong thẻ thông tin — gọn, người xử lý chọn tại chỗ */
.cs-info-select { padding: 3px 26px 3px 9px; font-size: 12.5px; font-weight: 600; min-width: 130px; max-width: 168px; border-radius: 7px; }

/* Ô ghi chú dính đáy (tab Lịch sử) */
.cs-comment-box--sticky { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: auto; }

/* AI-MARK[QAI-UI:people-cols] 2026-06-26 21:33 (GMT+7) — bảng Danh sách: td wrap (bỏ ellipsis), clamp tiêu đề 2 dòng, cột Nhân sự đa dòng (.cs-people/.cs-people-k), .cs-muted, min-width cột | rel: cskh.js loadTickets/customerLabel/approverLabel/assigneeLabel, index.html #csTicketTable */
/* td bảng ticket: cho xuống dòng, KHÔNG cắt "…"; overflow-wrap (KHÔNG word-break) để KHÔNG ngắt giữa từ ngắn (vd "Telegram" → "Tele gram") — chỉ ngắt token siêu dài (số/mã) khi tràn */
.cs-table td { white-space: normal; overflow-wrap: break-word; }
/* AI-MARK[QAI-UI:people-cols] 2026-06-27 09:18 (GMT+7) — tiêu đề XUỐNG ĐỦ DÒNG (bỏ clamp 2 dòng) để badge "trạng thái dự đoán" (sentiment) + chờ-duyệt LUÔN hiện, không bị cắt; badge nowrap không vỡ chữ | rel: cskh.js loadTickets cs-tcell-subject + sentBadge/pendBadge */
.cs-tcell-subject { line-height: 1.4; overflow-wrap: break-word; }
.cs-tcell-subject .cs-sent, .cs-tcell-subject .cs-dbadge { white-space: nowrap; }
/* Cột Nhân sự đa dòng (Tạo / Duyệt / Xử lý) */
/* AI-MARK[QAI-UI:people-cols] 2026-06-26 21:33; cập nhật 22:15 — cột Nhân sự RÕ HƠN: nhãn = chip màu (Tạo navy · Duyệt xanh · Xử lý cam) + icon, căn lưới nhãn cố định để 3 dòng thẳng hàng, value đậm dễ đọc | rel: cskh.js loadTickets */
.cs-people { display: flex; flex-direction: column; gap: 5px; }
.cs-people-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; line-height: 1.25; }
.cs-people-k {
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 7px; white-space: nowrap;
}
.cs-people-k .material-symbols-outlined { font-size: 13px; }
.cs-pr--create  .cs-people-k { background: rgba(30, 58, 138, .10); color: var(--navy); }
.cs-pr--approve .cs-people-k { background: rgba(16, 185, 129, .14); color: #0e9f6e; }
.cs-pr--handle  .cs-people-k { background: var(--orange-soft); color: var(--orange); }
.cs-people-v { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: break-word; }
.cs-people-v .cs-muted { font-weight: 500; font-size: 12.5px; }
/* .cs-muted nếu chưa có (dùng cho fallback "Chưa rõ — bổ sung" / "Chờ duyệt" / "Chưa phân") */
.cs-muted { color: var(--text-muted); font-size: 12px; }
/* Min-width các cột bảng Ticket để tránh bị squish + tỉ lệ cân đối (Tiêu đề = cột co giãn) */
#csTicketTable .cs-col-code { min-width: 72px; white-space: nowrap; }
#csTicketTable .cs-col-subject { min-width: 240px; width: 34%; }
#csTicketTable .cs-col-customer { min-width: 120px; }
#csTicketTable .cs-col-people { min-width: 196px; }
/* Cột ngắn GIỮ 1 DÒNG (Kênh5 · Loại6 · Ưu tiên7 · Trạng thái8 · Cập nhật9) — KHÔNG ngắt "Tư vấn / Hỏi đáp", "Telegram", badge "Bình thường" */
#csTicketTable td:nth-child(5), #csTicketTable td:nth-child(6),
#csTicketTable td:nth-child(7), #csTicketTable td:nth-child(8),
#csTicketTable td.cs-sub { white-space: nowrap; }
#csTicketTable td:nth-child(6), #csTicketTable th:nth-child(6) { min-width: 116px; }   /* Loại đủ rộng 1 dòng */
/* nén padding ngang cho bảng 9 cột → cân đối, đỡ tràn ngang */
#csTicketTable th, #csTicketTable td { padding-left: 12px; padding-right: 12px; }

/* ══════ CUSTOM CATEGORY — AI-MARK[QAI-UI:custom-category] 2026-06-27 00:40 (GMT+7) — channel toggle pill + cs-rv-chs-lbl + footer center + add-cat form + categories settings view | rel: cskh.js renderReview/openAddCategoryInline/loadCategories, routes.js POST/DELETE /config/categories ══════ */

/* AI-MARK[QAI-UI:custom-category] 2026-06-27 00:40 (GMT+7) — Review popup: channel toggle pill buttons + label + fix footer center; thêm cs-rv-chs-lbl | rel: cskh.js renderReview/_rvToggleChannel */
/* Review popup — channel toggle buttons */
.cs-rv-chs { display: flex; gap: 8px; align-items: center; padding: 6px 0 10px; margin-bottom: 2px; }
.cs-rv-chs-lbl { font-size: 12px; font-weight: 700; color: var(--text-soft); white-space: nowrap; }
.cs-rv-ch-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; padding: 5px 14px;
  border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.cs-rv-ch-btn .material-symbols-outlined { font-size: 15px; }
.cs-rv-ch-btn.is-on {
  background: var(--orange-soft, #fff7f0); color: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset;
}
.cs-rv-ch-btn:disabled { opacity: .5; cursor: default; }

/* Review popup — "+" inline add category button next to select */
.cs-rv-addcat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px dashed var(--border); background: none;
  color: var(--orange); cursor: pointer; font-size: 18px; font-weight: 900;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.cs-rv-addcat:hover { background: var(--orange-soft); border-color: var(--orange); }

/* Inline add-category form (inside review popup) — inserted as sibling of .cs-rv-row */
.cs-rv-addcat-form {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: var(--orange-soft, #fff3e8); border-radius: 8px;
  padding: 8px 10px; margin-top: -8px; margin-bottom: 10px; border: 1px solid rgba(255,100,0,.18);
}
.cs-rv-addcat-form input { flex: 1 1 120px; min-width: 80px; }
.cs-rv-addcat-form select { flex: 0 1 auto; }
.cs-rv-addcat-form .cs-btn--sm { flex-shrink: 0; }

/* Review footer — center buttons (override: justify-content:center, giữ padding-top + border-top) */
.cs-rv-foot { display: flex; justify-content: center; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Cài đặt → Loại vấn đề view */
.cs-cat-section { margin-bottom: 24px; }
.cs-cat-title { font-size: 13px; font-weight: 800; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cs-cat-table { font-size: 13px; }
.cs-cat-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.cs-cat-table code { font-size: 11.5px; background: var(--surface-alt, #f3f4f6); padding: 1px 5px; border-radius: 4px; color: var(--navy); }
.cs-cat-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cs-cat-addrow input  { flex: 1 1 180px; }
.cs-cat-addrow select { flex: 0 1 auto; min-width: 100px; }
.cs-cat-add .cs-cat-title { margin-bottom: 10px; }

/* AI-MARK[QAI-UI:send-modal-premium] 2026-06-27 (GMT+7) — popup "Duyệt & gửi ticket" 2 CỘT cao cấp: banner người nhận + cột trái thiết lập + cột phải soạn nội dung + footer căn phải; lấp đầy popup, hết khoảng trống | rel: cskh.js renderReview */
.cs-rv-box { width: 800px; max-width: 95vw; }
.cs-rv2-banner { display: flex; align-items: center; gap: 13px; background: linear-gradient(100deg, rgba(30, 58, 138, .07), rgba(30, 58, 138, .015)); border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; }
.cs-rv2-avatar { width: 46px; height: 46px; font-size: 17px; }
.cs-rv2-rcp { min-width: 0; flex: 1; }
.cs-rv2-name { font-size: 15.5px; font-weight: 800; color: var(--navy-900); }
.cs-rv2-rcp .cs-muted { font-size: 12.5px; margin-top: 1px; }
.cs-rv2-grid { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.cs-rv2-left { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
/* AI-MARK[QAI-UI:send-modal-premium] 2026-06-27 02:28 (GMT+7) — Loại/Ưu tiên trong cột trái HẸP (290px): XẾP DỌC + select full-width (box-sizing) → KHÔNG còn bị che/cắt "Bình thường" | rel: cskh.js renderReview catSel .cs-rv-row */
.cs-rv2-left .cs-rv-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 0; }
.cs-rv2-left .cs-rv-field--inline { min-width: 0; }
.cs-rv2-left .cs-select { width: 100%; min-width: 0; box-sizing: border-box; }
.cs-rv2-tk { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; background: var(--surface-2); }
.cs-rv2-seclbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.cs-rv2-tk .cs-rv-tk-code { font-size: 13px; }
.cs-rv2-tk .cs-rv-tk-sub { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.cs-rv2-right { display: flex; flex-direction: column; min-width: 0; }
.cs-rv2-msglbl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cs-rv2-msg { flex: 1; min-height: 256px; }
.cs-rv2-foot { justify-content: flex-end; margin-top: 18px; }
@media (max-width: 640px) { .cs-rv2-grid { grid-template-columns: 1fr; } .cs-rv2-msg { min-height: 170px; } }


/* ═══════════ Trung tâm thông báo ═══════════ */
/* AI-MARK[QAI-CSKH:notif-center] 2026-06-27 01:42 (GMT+7) — CSS chuông + badge + panel + items | rel: cskh/index.html #csNotifBell, cskh.js renderNotifPanel */

/* Nút chuông */
.cs-notif-bell {
  position: relative; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%; color: var(--text-soft); cursor: pointer;
  transition: background .12s, color .12s;
}
.cs-notif-bell:hover { background: var(--surface-2); color: var(--navy); }
.cs-notif-bell .material-symbols-outlined { font-size: 20px; }

/* Badge số trên chuông */
.cs-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; pointer-events: none;
}

/* Panel nổi dưới chuông */
.cs-top-actions { position: relative; }
.cs-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 400px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow); z-index: 50;
  display: flex; flex-direction: column; overflow: hidden;
}
.cs-notif-panel.hidden { display: none !important; }

/* Header panel */
.cs-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.cs-notif-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy-900); }
.cs-notif-readall {
  font-size: 12px; font-weight: 600; color: var(--navy); background: none;
  border: none; cursor: pointer; padding: 4px 8px; border-radius: 7px;
}
.cs-notif-readall:hover { background: var(--surface-2); }

/* Cụm "Cần chú ý" */
.cs-notif-attn { padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cs-notif-attn-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 9px; background: var(--orange-soft); font-size: 12.5px;
  cursor: pointer; font-weight: 600; color: var(--navy-900);
  transition: background .1s;
}
.cs-notif-attn-item:hover { background: rgba(255, 107, 43, .2); }
.cs-notif-attn-item .material-symbols-outlined { font-size: 16px; color: var(--orange); flex-shrink: 0; }

/* Tabs Tất cả / Chưa đọc */
.cs-notif-tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.cs-notif-tab {
  flex: 1; padding: 6px 4px; font-size: 12.5px; font-weight: 700;
  border: none; background: none; border-bottom: 2px solid transparent;
  cursor: pointer; color: var(--text-soft); transition: color .1s, border-color .1s;
}
.cs-notif-tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }

/* Danh sách items (scroll) */
.cs-notif-list {
  max-height: 380px; overflow-y: auto; padding: 4px 0 8px;
}
.cs-notif-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 28px 16px; }

/* Nhóm ngày */
.cs-notif-day {
  padding: 6px 16px 2px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}

/* Mỗi item thông báo */
.cs-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px; cursor: pointer; transition: background .1s;
  position: relative;
}
.cs-notif-item:hover { background: var(--surface-2); }
.cs-notif-item.is-unread { background: rgba(30, 58, 138, .035); }
.cs-notif-item.is-unread:hover { background: rgba(30, 58, 138, .07); }

/* Chấm xanh chưa đọc */
.cs-notif-dot {
  position: absolute; top: 14px; right: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy); flex-shrink: 0;
}

/* Icon kind */
.cs-notif-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.cs-notif-icon .material-symbols-outlined { font-size: 16px; color: var(--navy); }
.cs-notif-icon.ki-pending_approval { background: var(--orange-soft); }
.cs-notif-icon.ki-pending_approval .material-symbols-outlined { color: var(--orange); }
.cs-notif-icon.ki-comment { background: #e0f2fe; }
.cs-notif-icon.ki-comment .material-symbols-outlined { color: #0ea5e9; }
.cs-notif-icon.ki-approval_decided { background: #d1fae5; }
.cs-notif-icon.ki-approval_decided .material-symbols-outlined { color: var(--ok); }
.cs-notif-icon.ki-sla { background: #fee2e2; }
.cs-notif-icon.ki-sla .material-symbols-outlined { color: #dc2626; }
/* AI-MARK[QAI-CSKH:auto-approve] 2026-06-29 11:50 (GMT+7) — chuông "Daisy tự duyệt" (tím) | rel: cskh/service.js _mapEventKind auto_approve */
.cs-notif-icon.ki-auto_approve { background: #f3e8ff; }
.cs-notif-icon.ki-auto_approve .material-symbols-outlined { color: #7c3aed; }

/* Text bên phải icon */
.cs-notif-body { flex: 1; min-width: 0; padding-right: 14px; }
/* Thông báo TỰ XUỐNG DÒNG (không cắt context bằng "…") — wrap đầy đủ, ngắt cả token dài (mã/URL/email) */
.cs-notif-title { font-size: 13px; font-weight: 700; color: var(--navy-900); white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.4; }
.cs-notif-code { font-size: 11.5px; color: var(--navy); font-weight: 600; margin-left: 4px; }
.cs-notif-text { font-size: 12px; color: var(--text-soft); margin-top: 2px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
.cs-notif-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Nguồn tạo ticket trong thông báo (tạo qua đâu + bởi ai) — chip nhỏ, dễ nhìn */
.cs-notif-src { display: inline-flex; align-items: flex-start; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--navy); background: var(--navy-50, #eef2ff); border-radius: 6px; padding: 2px 7px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; line-height: 1.4; }
.cs-notif-src .material-symbols-outlined { font-size: 13px; line-height: 1; }
.cs-notif-src b { font-weight: 700; }

/* Nút inline Duyệt/Từ chối (kind=pending_approval, role=supervisor) */
.cs-notif-acts { display: flex; gap: 6px; margin-top: 6px; }
.cs-notif-acts .cs-btn { font-size: 11.5px; padding: 3px 10px; }