/* Support Center — LỚP 3: component + screen.
 *
 * Nạp SAU tokens.css + base.css (xem index.html). Mọi giá trị ở đây lấy từ design
 * `nexa`; nguồn ghi bằng comment `⇐ <file>:<dòng>` để lần sau design đổi thì diff
 * được thay vì đoán lại. File tham chiếu nằm trong `design/`:
 *   design/bizapp.css      (1599 dòng — tk-* tkc-* pa-* rm-* tr-*)
 *   design/components.css  (2771 dòng — btn input chip toast mod-* empty sect-lbl)
 *   design/FOUNDATIONS.md  (trích rule của app.css — avatar icon-btn presence)
 *
 * QUY TẮC 2 ACCENT — đừng trộn:
 *   --accent   indigo, host override được → chrome chung (btn primary, subtab
 *              active, focus ring, link, modeopt/flag/rrtag của admin)
 *   --tk-acc   teal #0d9488, host KHÔNG override → affordance nghiệp vụ ticket
 *              (#id, tile icon dòng, chip hàng đợi, nút Nhận, thanh hành động
 *              agent, tint bubble của mình, type/member picker)
 * Bản trước gộp cả hai thành `--sc-accent` — đó là lý do tông màu lệch rõ nhất.
 *
 * TÊN CLASS giữ nguyên `sc-*` / `tkc-*` (quyết định D4 của spec): đổi sang tên
 * design chỉ tạo churn trên 22 file mà không đổi gì về hình.
 */

/* ══════════════════════════════════════════════════════════════
   SHELL
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:131 .rm-app + :998 .tk-app (nơi khai báo --tk-acc) */
.sc-app {
  --tk-acc: #0d9488;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ⇐ bizapp.css:136 .rm-topbar (geometry components.css:1889 .mod-toolbar).
 * Nền --bg-panel theo .ba-runner-hd (bizapp.css:67) vì thanh này mang danh tính
 * app — đúng vai "module top bar", chỉ lấy hình học của toolbar. */
/* Grid 1fr-auto-1fr: hai vùng biên bằng nhau nên cụm tab ở giữa là giữa THẬT
 * của màn hình, không phải "giữa phần còn lại sau chữ tiêu đề" (title đã bỏ —
 * host Nexa in tên app rồi, appbar lặp lại là thừa). */
/* SUPPORT-UI-ROLETABS (B3-v2, user chốt qua visual companion 2026-08-17) —
 * bỏ hộp segmented xám: tab phẳng CAO HẾT HEADER, không bo góc; tab chọn mang
 * nền accent nhạt + chữ/icon accent + GẠCH CHÂN accent chạy trọn bề rộng tab
 * sát mép dưới header (trượt vào bằng scaleX). Vì tab full-height nên padding
 * DỌC của header dời khỏi .sc-appbar (min-height thế chỗ) — bell/presence vẫn
 * đứng giữa nhờ align-items: center, riêng cột giữa stretch. */
.sc-appbar {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 20px;
  min-height: 58px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
}
/* Hàng nội dung kẹp --mod-w — cùng token với .sc-wrap nên mép trái của tabs
 * thẳng hàng tuyệt đối với mép nội dung bên dưới, đổi bề rộng sau này hai nơi
 * đi cùng nhau. space-between: tabs trái · chuông phải. */
.sc-appbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--mod-w);
}
.sc-appbar-mid { display: flex; justify-content: flex-start; min-width: 0; align-self: stretch; }
.sc-appbar-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-appbar-right { justify-content: flex-end; }

.sc-roleswitch { display: inline-flex; align-items: stretch; }
.sc-roletab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border: none;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
.sc-roletab:not(.on):hover { background: var(--bg-hover); color: var(--text-2); }
.sc-roletab.on { background: var(--accent-softer); color: var(--accent-strong); }
.sc-roletab::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.sc-roletab.on::after { transform: scaleX(1); }
/* Số đếm trên tab = KHỐI LƯỢNG VIỆC, không phải báo động — thôi tô đỏ (đỏ chỉ
 * còn ở chuông thông báo). Viên thuốc trung tính, tab chọn thì accent đặc —
 * cùng ngôn ngữ với .sc-subtab-badge. */
.sc-rolebadge {
  min-width: 20px;
  font-size: var(--text-11);
  font-weight: 800;
  background: var(--bg-active);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: var(--r-full);
  text-align: center;
  line-height: 1.45;
  transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.sc-roletab.on .sc-rolebadge { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
@media (prefers-reduced-motion: reduce) {
  .sc-roletab::after { transition: none; }
}

/* ⇐ bizapp.css:399 .tr-body. `container-type` để hộp thư hội thoại dùng
 * @container thay vì media query (chiều rộng iframe ≠ chiều rộng cửa sổ). */
.sc-appbody {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}
/* Màn render thẳng vào appbody mà không bọc .sc-scroll (Spinner/EmptyState của
 * router, admin-labels) vẫn phải cuộn được và chiếm hết chiều rộng. */
.sc-appbody > :not(.sc-scroll):not(.tkc) { flex: 1; min-width: 0; overflow-y: auto; }

/* ⇐ bizapp.css:400-401 .tr-scroll / .tr-wrap. Băng --mod-w (1100px) — đồng bộ
 * với các trang khác của nền tảng (chat-platform-app --mod-w); xem chú thích
 * chọn băng ở tokens.css. Padding dọc 30/70 để đầu màn thở, cuối màn không dính
 * đáy. */
/* Padding nằm ở lớp CUỘN (ngoài), max-width ở lớp NỘI DUNG (trong) — đúng khuôn
 * canonical của nền tảng: `DirectoryLayout.tsx:49-50` để `p-6` trên div cuộn rồi
 * `max-w-[var(--mod-w)]` trên div con KHÔNG padding.
 * Vì sao phải tách: `base.css` đặt `* { box-sizing: border-box }`, nên khi
 * max-width và padding ở CÙNG một thẻ thì 1100px đã BAO GỒM 26px padding mỗi bên
 * ⇒ nội dung thật chỉ 1048px, hụt 52px so với các trang khác. Tách ra thì 1100px
 * là chiều rộng nội dung thật, padding là phần cộng thêm ở ngoài. */
/* scrollbar-gutter both-edges: không có nó thì scrollbar chỉ ăn mép PHẢI vùng
 * cuộn → .sc-wrap lệch tâm ~5px so với header (header nằm NGOÀI vùng cuộn, tâm
 * theo viewport) — mép tabs không thẳng mép nội dung (user chốt 2026-08-18). */
.sc-scroll { flex: 1; min-width: 0; overflow-y: auto; padding: 30px 26px 70px; scrollbar-gutter: stable both-edges; }
.sc-wrap { max-width: var(--mod-w); margin: 0 auto; }

/* boot / desktop-only (màn tiền-app, không có trong design — giữ nguyên bố cục,
 * chỉ đổi giá trị sang token) */
.sc-boot, .sc-desktop-only {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-8); text-align: center;
}
.sc-boot-title, .sc-desktop-only-title { font-size: var(--text-18); font-weight: 800; letter-spacing: -0.02em; }
.sc-boot-hint, .sc-desktop-only-hint { font-size: var(--text-13); color: var(--text-muted); max-width: 56ch; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   COMPONENT CHUNG
   ══════════════════════════════════════════════════════════════ */

/* ── nút ⇐ components.css:617-635 .btn + bizapp.css:1062 .btn.sm ──────
 * border 1px transparent trên MỌI biến thể để primary và ghost cùng chiều cao
 * (bản cũ primary không có border nên lệch 2px). */
.sc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-fast);
}
.sc-btn.sc-btn-primary { background: var(--accent); color: var(--text-on-accent); }
.sc-btn.sc-btn-primary:hover { background: var(--accent-strong); }
.sc-btn.sc-btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.sc-btn.sc-btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.sc-btn.sc-btn-sm { padding: 7px 13px; font-size: var(--text-13); }
.sc-btn:disabled { opacity: 0.5; cursor: default; }
/* Primary disabled về XÁM hẳn thay vì primary mờ 50% (đánh giá popup
 * 2026-08-17): nền accent nhạt trông vẫn như bấm được — người dùng bấm và
 * tưởng app đơ. Xám + chữ muted là ngôn ngữ "chưa sẵn sàng" rõ ràng. */
.sc-btn.sc-btn-primary:disabled {
  background: var(--bg-active);
  border-color: var(--border);
  color: var(--text-muted);
  opacity: 1;
}

/* ⇐ FOUNDATIONS.md .icon-btn (app.css) */
.sc-icon-btn {
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--d-fast), color var(--d-fast);
}
.sc-icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ── ô nhập ⇐ components.css:599-615 .input + bizapp.css:887 .pa-input ── */
.sc-input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  /* QC #439b — `--bg-elev` (TRẮNG ở light, nổi hơn nền ở dark), KHÔNG phải `--bg`
   * (xám). Quy ước QC nêu và cũng là quy ước phổ biến: ô nhập được = nền trắng,
   * ô vô hiệu hoá = nền xám. Trước đây cả hai cùng xám nên không phân biệt được.
   *
   * Vẫn nhìn thấy ô trên panel trắng nhờ VIỀN — đó là việc của `border`, không
   * phải của nền. (Bản trước dùng nền xám để tạo tương phản, nhưng cái giá là
   * mượn đúng ngôn ngữ của trạng thái disabled.) */
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-14);
  color: var(--text);
  outline: none;
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.sc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* MŨI TÊN CỦA SELECT (user báo 2026-08-19, báo lại 2026-08-20 là vẫn còn).
 *
 * Bản vá đầu tiên tăng `padding-right` lên 32px và ĐÃ SAI. Đo lại bằng 5 select
 * chỉ khác nhau padding-right (12/20/32/44/60px): khoảng từ mũi tên tới viền
 * phải KHÔNG ĐỔI một pixel nào. Chrome ghim mũi tên native ở một khoảng cố định
 * so với mép viền; padding-right chỉ đẩy phần CHỮ sang trái — kết quả là ô rỗng
 * ở giữa mà vẫn chật ở mép, đúng cái user nhìn thấy.
 *
 * Nên muốn kiểm soát được thì phải tự vẽ: `appearance: none` + chevron nền.
 * Màu chevron đi qua `var(--chevron)` khai trong tokens.css (light/dark riêng)
 * — data-URI là chuỗi tĩnh nên không nhét var() màu vào trong được, nhưng nhờ
 * đặt biến ở tokens.css mà styles.css vẫn giữ kỷ luật KHÔNG rẽ nhánh theme.
 *
 * 34px = 12px (bằng mép trái, đối xứng thị giác) + 12px thân mũi tên + 10px đệm.
 * Ngữ cảnh gọn (.sc-filters/.sc-listbar/.sc-rtoolbar/.tkc-fsel) đè padding-right
 * nhỏ hơn nhưng vẫn phải ≥ 26px, nếu không chữ đè lên mũi tên. */
select.sc-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}
textarea.sc-input { min-height: 80px; resize: vertical; line-height: 1.5; }
/* Vô hiệu hoá / chỉ-đọc: nền XÁM + không cho gõ — đối lập rõ với ô trắng ở trên.
 * Gộp luôn :disabled và [readonly] để mọi ô bị khoá đều nói cùng một ngôn ngữ,
 * không phụ thuộc màn nhớ gắn class sc-input-dim hay không. */
.sc-input-dim,
.sc-input:disabled,
.sc-input[readonly] {
  /* background-COLOR chứ không phải shorthand `background`. Shorthand reset luôn
   * background-image, mà chevron của select là ảnh nền — select bị khoá sẽ mất
   * mũi tên và trông như một cái ô chữ xám. Đây là bẫy chung cho mọi rule đè nền
   * của .sc-input: độ ưu tiên ở đây (0,2,0) còn thắng `select.sc-input` (0,1,1). */
  background-color: var(--bg-active);
  color: var(--text-muted);
  cursor: not-allowed;
}
.sc-input-dim { opacity: 0.7; }

/* ── avatar ⇐ FOUNDATIONS.md .avatar (app.css) ─────────────────────────
 * Một cặp màu cho mọi người, KHÔNG bảng màu per-user — design không có. Cỡ "xs"
 * 18px được design áp theo ngữ cảnh (bizapp.css:1147); ở đây làm modifier tường
 * minh vì app dùng nó ở nhiều chỗ không cùng tổ tiên. */
.sc-av {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  overflow: hidden;
}
.sc-av.xs { width: 18px; height: 18px; font-size: 8px; }
.sc-av.sm { width: 22px; height: 22px; font-size: 10px; }
.sc-av.lg { width: 44px; height: 44px; font-size: 15px; }
/* "chưa có người xử lý" — cùng khối, cùng đường kính với avatar thật, chỉ khác
 * nét đứt + rỗng ruột. Trước đây chỗ này là ký tự "—" nên cột người xử lý lúc
 * có lúc không có khối tròn, mắt đọc thành 2 cột lệch nhau. */
.sc-av.empty {
  background: transparent;
  border: 1px dashed var(--border-strong);
  box-sizing: border-box;
}

/* ── nhãn chữ+màu (TK.44: màu chỉ bổ trợ, chữ mới là tín hiệu chính) ────
 * sc-badge  ⇐ bizapp.css:1002 .tk-pri  — mức ưu tiên & chip chung
 * sc-pill   ⇐ bizapp.css:407 .tr-pill  — trạng thái, dot có vành sáng (:1000)
 * Cả hai đọc CÙNG biến --sc-badge-c: 4 màn đang set biến đó bằng style inline
 * (admin-allocation/admin-bots/admin-channels/ticket-detail), đổi tên biến sẽ
 * làm hỏng chúng mà không đổi gì về hình. */
/* MỘT THƯỚC CHUNG cho cả 3 khuôn nhãn (polish 2026-08-11 P4): cao đúng 24px,
 * 12px/600 — đứng cạnh nhau trên một dòng ticket thì thẳng hàng tuyệt đối.
 * Khác nhau CHỈ ở hình: tag vuông-viền (ưu tiên) / pill tròn-chấm (trạng thái). */
.sc-badge, .sc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  height: 24px;
  box-sizing: border-box;
  border-radius: var(--r-full);
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--sc-badge-c, var(--text-muted));
  background: color-mix(in srgb, var(--sc-badge-c, var(--text-muted)) 13%, transparent);
}
.sc-badge { padding: 0 10px; }
.sc-pill { padding: 0 10px 0 8px; }

/* sc-tag — MỨC ƯU TIÊN. Cố tình KHÁC HẲN khuôn sc-pill (trạng thái): vuông góc
 * --r-sm, viền đặc, chữ in hoa nhỏ, KHÔNG chấm. Trước đây ưu tiên và trạng thái
 * dùng chung khuôn "bo tròn + chấm + nền nhạt" nên đứng cạnh nhau trong một dòng
 * phải đọc chữ mới phân biệt được (audit 2026-08-11 C1). Nền để rất nhạt vì viền
 * đã đủ tách nó khỏi pill. */
.sc-pritag {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  height: 24px;
  box-sizing: border-box;
  padding: 0 9px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--sc-badge-c, var(--text-muted)) 45%, transparent);
  background: color-mix(in srgb, var(--sc-badge-c, var(--text-muted)) 8%, transparent);
  color: var(--sc-badge-c, var(--text-muted));
  font-size: var(--text-12);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.sc-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-badge-c, var(--text-muted));
  flex-shrink: 0;
}
.sc-pill .sc-badge-dot {
  width: 7px; height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-badge-c, var(--text-muted)) 22%, transparent);
}
.sc-absentdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; display: inline-block; }

/* ── nhãn section ⇐ components.css:1865-1873 .sect-lbl ─────────────── */
.sc-sec-lbl {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 6px 0 2px;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── trạng thái rỗng ⇐ components.css:1855-1861 .rm-empty ─────────── */
.sc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 48px 20px;
  text-align: center;
  font-size: var(--text-13);
  line-height: 1.6;
  color: var(--text-dim);
}
.sc-empty-title { font-size: var(--text-15); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.sc-empty-hint { max-width: 56ch; }

/* ── modal ⇐ bizapp.css:231 .rm-modal, :340-345, :382 ───────────────── */
.sc-modal-scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 100;
}
.sc-modal {
  width: min(660px, 96vw);
  max-height: 88vh;
  background: var(--bg-panel);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  animation: neScaleIn var(--d-base) var(--ease-out);
}
.sc-modal-hd { display: flex; align-items: center; gap: var(--sp-3); padding: 20px 20px 6px; flex-shrink: 0; }
.sc-modal-ic {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: #fff;
}
.sc-modal-hd-tx { flex: 1; min-width: 0; }
.sc-modal-title { font-size: var(--text-16); font-weight: 700; letter-spacing: -0.01em; }
.sc-modal-sub { font-size: var(--text-13); color: var(--text-muted); margin-top: 1px; }
.sc-modal-hd-extra { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.sc-modal-body {
  padding: 12px 20px 4px;
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
/* Mép NGOÀI của modal phải đều 20px cả bốn phía (user 2026-08-17: popup chi
 * tiết ticket dưới chỉ 4px, nội dung gần chạm mép). bottom 4px ở trên là cho
 * modal CÓ footer (body sát footer, footer tự mang mép dưới); modal không
 * footer (ticket detail — ô phản hồi nằm trong body) thì body là phần tử cuối
 * → tự nhận mép 20. Phân biệt bằng cấu trúc, không sửa từng modal. */
.sc-modal-body:last-child { padding-bottom: 20px; }
.sc-modal-ft { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 16px 20px 20px; flex-shrink: 0; }

/* ── toast ⇐ components.css:1083 .toast (đảo màu: nền --text, chữ --bg) ── */
.sc-toast-wrap {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 300;
}
/* SUPPORT-UX-CLAIM — toast đổi từ "hộp đen" (nền --text đảo màu, không icon,
 * thành công và lỗi trông y hệt) sang khuôn PANEL của app: nền --bg-elev + viền,
 * biến thể success/error mang icon + nhấn màu. Người dùng biết tốt/xấu bằng
 * MÀU + HÌNH trước khi kịp đọc chữ. */
.sc-toast {
  display: flex; align-items: center; gap: 8px;
  max-width: 480px;
  padding: 10px 16px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-13);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: neScaleIn var(--d-base) var(--ease-out);
}
.sc-toast > svg { flex: 0 0 auto; }
.sc-toast-success { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.sc-toast-success > svg { color: var(--success); }
.sc-toast-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.sc-toast-error > svg { color: var(--danger); }

/* ── spinner ────────────────────────────────────────────────────────── */
.sc-spinner {
  display: inline-block;
  /* flex:none — spinner hay bị render làm con trực tiếp của .sc-appbody, nơi
   * rule cứu-layout `:120` set flex:1 cho mọi con: flex-basis đè width inline
   * 20px theo trục chính → vòng tròn giãn thành ELIP rộng cả màn. Guard này
   * giữ đúng kích thước cho MỌI bare spinner còn sót (các màn conv đang tắt). */
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: neSpin 0.7s linear infinite;
}
/* hộp căn giữa cho spinner/nội dung chờ cục bộ — dùng grid thay margin:auto để
 * spinner giữ nguyên 20px dù hộp bị flex-stretch trong .sc-appbody. */
.sc-loading {
  flex: 1;
  min-height: 120px;
  display: grid;
  place-items: center;
}

/* ── skeleton ⇐ design/components.css:1723-1729 .skel (đổi tên sc-skel theo
 * namespace app; token bg-hover/bg-active có đủ 3 mode trong tokens.css) ── */
.sc-skel {
  display: block;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-xs);
  animation: neShimmer 1.6s infinite;
}
.sc-skel-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* .sc-skel-line — biến thể shimmer dạng DÒNG CHỮ: gắn thẳng lên chính phần tử
 * mang typography thật (vd .sc-stat-n / .sc-stat-l), nội dung là &nbsp; nên
 * chiều cao do LINE-HEIGHT CỦA CHÍNH NÓ quyết định.
 *
 * Vì sao không dùng <Skel h={22}/> như chỗ khác: `.sc-skel` là display:block với
 * height cố định ⇒ nó QUYẾT ĐỊNH chiều cao ô, mà con số px đó không bằng line
 * box của chữ thật (đo được: ô skeleton 63px vs ô thật 71.8px ⇒ mỗi lần đổi hàng
 * đợi widget co giãn 8.8px, đẩy cả trang bên dưới nhảy theo — user báo giật
 * 2026-08-17). Cách này không chép con số nào từ CSS sang JS nên đổi font/padding
 * về sau vẫn tự khớp. */
.sc-skel-line {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-xs);
  animation: neShimmer 1.6s infinite;
}
/* 1 hàng — cùng grid 6 rãnh với .sc-row để skeleton đứng ĐÚNG chỗ nội dung thật */
.sc-skelrow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(62px, auto) 22px auto 16px;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}
.sc-skelrow-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sc-skelstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.sc-skeltable { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── chuông thông báo ⇐ bizapp.css:148 .rm-notif-btn (38×38, CÓ viền) ── */
.sc-bell-wrap { position: relative; flex-shrink: 0; }
.sc-bell {
  position: relative;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  color: var(--text-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.sc-bell:hover { background: var(--bg-hover); color: var(--text); }
.sc-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 2px solid var(--bg-panel);
}
.sc-bell-dd {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;              /* bo góc ăn cả header dính lẫn hàng cuối */
  z-index: 50;
  animation: neFadeIn var(--d-fast) var(--ease-out);
}

/* Header — tiêu đề + số chưa đọc + gộp "đã đọc". Không cuộn theo thân: khi
   danh sách dài, nút đánh dấu vẫn phải với tới được. */
.sc-notif-hd {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.sc-notif-hd-t { font-size: var(--text-13); font-weight: 700; color: var(--text); }
.sc-notif-hd-n {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.sc-notif-hd-act {
  margin-left: auto; padding: 4px 8px;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--accent);
  font-size: var(--text-12); font-weight: 600;
  cursor: pointer;
}
.sc-notif-hd-act:hover { background: var(--accent-softer); }

.sc-notif-body { max-height: 420px; overflow-y: auto; padding: var(--sp-1) 0; }
.sc-notif-daysep {
  padding: 6px var(--sp-3) 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}

/* Hàng thông báo. Trước đây là <button> KHÔNG được reset — project không có
   reset button toàn cục (base.css chỉ set font-family), nên nó nhận nguyên mặc
   định của trình duyệt: inline-block, co theo nội dung, nền buttonface xám, chữ
   căn giữa. Đó là "cục xám bo tròn" trong ảnh QC, không phải style xấu mà là
   CHƯA style. Grid 3 cột dưới đây là phần sửa thật. */
.sc-notif-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 8px;
  align-items: start;
  gap: var(--sp-2);
  width: 100%;
  padding: 9px var(--sp-3);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out);
}
.sc-notif-item:hover { background: var(--bg-hover); }
.sc-notif-item.flat { cursor: default; }          /* không dẫn đi đâu — vẫn đọc được, không làm mờ như disabled */
.sc-notif-item.flat:hover { background: none; }
.sc-notif-item:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

.sc-notif-ic {
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex-shrink: 0;
}
/* Nền = màu chính pha loãng, chữ = màu chính. Dùng color-mix nên tự đúng ở cả
   light lẫn dark, không phải khai hai bảng màu. */
.sc-notif-ic.tone-accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sc-notif-ic.tone-teal   { background: color-mix(in srgb, var(--tk-acc) 14%, transparent); color: var(--tk-acc); }
.sc-notif-ic.tone-warn   { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.sc-notif-ic.tone-ok     { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.sc-notif-ic.tone-dim    { background: var(--bg-active); color: var(--text-dim); }

.sc-notif-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-notif-text {
  font-size: var(--text-13); line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-notif-meta { font-size: var(--text-11); color: var(--text-dim); }
/* Chưa đọc: đậm hơn MỘT bậc + chấm, không đổi nền. Đổi nền như bản cũ thì hover
   (cùng --bg-hover) làm dòng đã đọc trông y hệt dòng chưa đọc. */
.sc-notif-item.unread .sc-notif-text { color: var(--text); font-weight: 600; }
.sc-notif-dot {
  width: 7px; height: 7px; margin-top: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
  flex-shrink: 0;
}

.sc-notif-empty {
  padding: var(--sp-6) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  color: var(--text-dim);
}
.sc-notif-empty p { font-size: var(--text-13); font-weight: 600; color: var(--text-2); margin: 0; }
.sc-notif-empty span { font-size: var(--text-12); line-height: 1.5; max-width: 240px; }

/* ══════════════════════════════════════════════════════════════
   ĐẦU MÀN · Ô SỐ LIỆU · BỘ LỌC · TAB
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:644-646 .tr-rep-head — h1 24px/800/-0.02em (bản cũ 18px/700);
 * sub giới hạn 56ch để dòng mô tả không kéo hết 860px. */
.sc-screenhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sc-screenhead h1 { font-size: var(--text-24); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
/* KHÔNG kẹp max-width (user 2026-08-17): 56ch cũ ép mô tả xuống 2 dòng dù màn
 * còn rất rộng, và các tab Quản trị dùng chung screenhead với mô tả dài ngắn
 * khác nhau — 1 dòng ↔ 2 dòng đổi qua lại làm cả khối bên dưới nhảy theo mỗi
 * lần chuyển tab. App desktop-only ≥900px nên câu mô tả một-câu luôn vừa một
 * dòng; khổ quá hẹp thì nó tự wrap tự nhiên, không cần ch. */
.sc-screenhead p {
  font-size: var(--text-13);
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Ô số liệu = STAT TILE full-width, cột BẰNG NHAU với mọi số lượng ô (polish
 * 2026-08-11 P2, yêu cầu user — thay chip compact tr-stat của design).
 * grid-auto-flow:column + auto-columns:1fr: 3 ô hay 4 ô đều tự chia đều, không
 * cần biết trước số ô. Nhãn TRÊN số DƯỚI, căn trái — khuôn KPI tile chuẩn:
 * markup vẫn là (số, nhãn) nên đảo bằng column-reverse, không sửa 5 màn gọi. */
.sc-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.sc-stat {
  display: flex;
  flex-direction: column-reverse;
  /* column-reverse nên flex-END mới là MÉP TRÊN — thiếu dòng này thì ô nào
   * thấp hơn ô cao nhất trong hàng (vd thiếu badge "chờ bạn bổ sung") bị dồn
   * nội dung xuống đáy, nhãn các ô không thẳng hàng (user báo 2026-08-17). */
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.sc-stat-n {
  display: block;
  font-size: var(--text-22);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sc-stat-l {
  display: block;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* line-height PHẢI đặt tường minh: `normal` chỉ chừa 11px trên baseline, trong
   * khi chữ HOA tiếng Việt có dấu CHỒNG cao hơn thế — đo trên Inter 11px/700:
   * Ô 10.44px · Ở 10.44px · Ứ 10.44px nhưng Ổ (mũ + hỏi xếp dọc) 12.16px. Cộng
   * `overflow: hidden` bên dưới là dấu hỏi của Ổ bị xén sạch, "TỔNG" đọc thành
   * "TÔNG" và "CHỜ BỔ SUNG" thành "CHỜ BÔ SUNG" — trông y như lỗi chính tả.
   * 1.6 × 11px = 17.6px, chừa 12.8px trên baseline (cần ≥ 12.16px). */
  line-height: 1.6;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .sc-stat-hi — "thẻ này đáng chú ý" cho thẻ BẤM ĐƯỢC, tách hẳn kênh thị giác
 * khỏi `.on` ("thẻ này đang là bộ lọc hiện hành").
 *
 * Lịch sử: từng có .sc-stat-act tô NỀN accent-soft — đúng bằng nền của `.on`,
 * khác nhau mỗi độ đậm viền 45% vs 55%, mắt không phân biệt được; thẻ mang nó
 * thường trực trông như lúc nào cũng đang được chọn (user báo 2026-08-13).
 * Từ 2026-08-17 tile my-tickets cũng thành nút lọc (SUPPORT-UI-MYSTATS) nên
 * .sc-stat-act hết chỗ đứng hợp lệ — đã gỡ hẳn, mọi thẻ đáng-chú-ý dùng hi.
 *
 * Phân vai: NỀN = đang chọn (trạng thái tạm thời, cần nổi nhất) · MÀU CHỮ = đáng
 * chú ý (thuộc tính thường trực). Hai thẻ cùng lúc mang hai nghĩa vẫn đọc ra được. */
.sc-stat-hi .sc-stat-n, .sc-stat-hi .sc-stat-l { color: var(--accent-strong); }
/* Badge phụ trong ô "Đang mở" (SUPPORT-UI-MYSTATS): số ticket đang chờ CHÍNH
 * người tạo bổ sung — việc-của-mình loại hai, trước đây bị chôn không dấu vết
 * trong nhóm mở dù có người đang bị chặn bởi mình. Màu warning (việc cần làm),
 * không đỏ (không phải lỗi). */
.sc-stat-note {
  font-size: var(--text-11);
  font-weight: 700;
  color: var(--warning);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⇐ bizapp.css:1015 .tk-filters + :678-680 .tr-rep-fsel — nhãn HOA nhỏ nằm
 * NGANG cạnh select (bản cũ xếp dọc), select có chevron riêng thay mũi mặc định
 * của hệ điều hành. Selector `.sc-filters label select.sc-input` (0,2,1) thắng
 * `.sc-input` (0,1,0) nên không cần !important. */
/* Lưới 3 cột đều thay cho flex-wrap (audit 2026-08-11 B1): với flex + min-width
 * 190px thì 3 bộ lọc gãy thành 2 hàng ở khổ nội dung 860px, hàng dưới còn đúng
 * một control lẻ loi và 3 select rộng khác nhau. Grid cho cả 3 bằng nhau, xuống
 * hàng thì xuống cả hàng chứ không bỏ rơi một cái.
 * Nhãn lên TRÊN control: nhãn nằm ngang ăn mất ~90px của mỗi ô, mà nhãn tiếng
 * Việt lại dài ngắn khác nhau nên các select không bao giờ dóng được mép trái. */
.sc-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: 14px;
  /* PANEL trắng (polish 2026-08-11 P3): bộ lọc trước đây là 3 select trần trên
   * nền trang — select nền --bg == nền trang nên chỉ còn viền mảnh lơ lửng.
   * Trên panel trắng, nền --bg của control thành lớp tương phản đúng nghĩa. */
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.sc-filters label {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  min-width: 0;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-filters label select.sc-input,
.sc-listbar select.sc-input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 7px 28px 7px 10px;
  /* Theo luật chung mới (QC #439b): ô nhập được = nền trắng/nổi, viền lo phần
   * tách khỏi panel. */
  background-color: var(--bg-elev);
  border-radius: var(--r-md);
  font-size: var(--text-13);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  /* appearance + chevron đã do quy tắc `select.sc-input` toàn cục lo; ở đây chỉ
   * nén lại khoảng cách cho vừa thanh lọc. Trước 2026-08-20 khối này tự nhúng
   * một SVG hardcode #94a3b8 — sáng quá ở dark mode và là ngoại lệ duy nhất phá
   * luật "mọi màu đi qua token". */
  background-position: right 10px center;
}
.sc-filters label select.sc-input:hover,
.sc-listbar select.sc-input:hover { border-color: var(--text-dim); }

/* ── SUPPORT-LIST-UX §3.3 — thanh công cụ danh sách (bố cục A đã duyệt) ──────
 * Một hàng: search + selector + "Xoá lọc"; KHÔNG nhãn UPPERCASE — option phải
 * TỰ NÓI ("Trạng thái: tất cả"). flex-wrap + min-width từng ô: chật thì xuống
 * hàng, không nhét ép. Search flex 2 = rộng gấp đôi selector flex 1 (user chốt). */
.sc-listbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  /* Cùng khuôn panel trắng với .sc-filters (polish P3) — hai thanh lọc cũ/mới
   * đứng ở hai màn khác nhau nhưng phải nói cùng một ngôn ngữ. */
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.sc-listbar-search { position: relative; flex: 2 1 240px; min-width: 240px; }
/* Icon kính lúp NẰM TRONG ô — pointer-events none để click xuyên xuống input. */
.sc-listbar-search > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.sc-listbar-search input.sc-input { padding-left: 34px; }
/* Đè width:100% của .sc-input (bẫy flex-basis đã gặp ở .sc-addrow-people):
 * width:100% + flex-basis auto làm select nuốt hàng, siblings co về 0. */
.sc-listbar select.sc-input,
.sc-listbar input[type='date'].sc-input {
  width: auto;
  flex: 1 1 130px;
  min-width: 130px;
  min-height: 40px; /* cùng cữ 40px với ô search cạnh bên (chuẩn từ QC #448) */
}
/* Mũi tên giữa cặp ngày (admin-audit) — hai ô date đọc thành MỘT khoảng. */
.sc-listbar-sep { color: var(--text-muted); flex: 0 0 auto; user-select: none; }
/* Ô search đứng MỘT MÌNH trong panel lịch vắng (admin-queues) — mượn khuôn
 * .sc-listbar-search nhưng không có panel .sc-listbar bọc (tránh khung kép
 * trong .sc-unavcard); kẹp bề rộng vì không còn flex chia chỗ. */
.sc-unavsearch { margin: 2px 0 10px; max-width: 340px; }
/* Nút "Xoá lọc" — text-button accent + icon phễu gạch chéo. Chỉ render khi có
 * gì để xoá (màn tự quyết định) nên không cần trạng thái disabled. */
.sc-listbar-clear {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 10px;
  border: none; border-radius: var(--r-md);
  background: transparent; color: var(--accent);
  font-family: var(--font-sans); font-size: var(--text-13); font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast);
}
.sc-listbar-clear:hover { background: var(--bg-hover); }
.sc-listbar-clear:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
/* Dòng vệ tinh dưới toolbar, kẹp phải: "Khớp 137 ticket · trang 2/3". */
.sc-listmeta {
  display: flex; justify-content: flex-end;
  margin: -6px 2px 10px;
  font-size: var(--text-12); color: var(--text-muted);
}

/* ── SUPPORT-LIST-UX §3.1 — thanh trang số (khuôn .pg của mockup đã duyệt) ── */
.sc-pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 4px; }
.sc-pager-btn {
  min-width: 32px; height: 32px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elev); color: var(--text-2);
  font-family: var(--font-sans); font-size: var(--text-13); font-weight: 600;
  cursor: pointer;
  transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.sc-pager-btn:hover:not(:disabled):not(.on) { background: var(--bg-hover); color: var(--text); }
.sc-pager-btn:disabled { opacity: 0.45; cursor: default; }
.sc-pager-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.sc-pager-btn.on { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); cursor: default; }
.sc-pager-gap { color: var(--text-muted); padding: 0 2px; user-select: none; }
.sc-hint-inline { font-size: var(--text-12); font-weight: 400; color: var(--text-muted); }

/* PM #476 — dòng nhắc phạm vi của tab "Của tôi". Kẹp phải, cùng nhịp với
 * .sc-listmeta ngay trên nó (hai dòng vệ tinh của cùng một danh sách), nên dùng
 * margin âm để dính vào chứ không tạo khoảng thứ ba. */
.sc-minescope {
  display: flex; justify-content: flex-end; align-items: baseline;
  flex-wrap: wrap; gap: 2px 6px;
  margin: -6px 2px 10px;
  font-size: var(--text-12); color: var(--text-muted);
}
.sc-minescope b { color: var(--text-2); font-weight: 600; }
.sc-minescope button {
  border: 0; background: none; padding: 0;
  font-family: var(--font-sans); font-size: var(--text-12); font-weight: 600;
  color: var(--accent); cursor: pointer;
}
.sc-minescope button:hover { text-decoration: underline; }
.sc-minescope button:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-sm);
}

/* ⇐ bizapp.css:815-820 .pa-subtabs — gạch active là ::after bo tròn, KHÔNG phải
 * border-bottom gắn thẳng vào button. */
.sc-subtabs {
  display: flex; gap: var(--sp-1);
  margin: 2px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.sc-subtab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 4px;
  margin-right: 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.sc-subtab:hover { color: var(--text-2); }
.sc-subtab.on { color: var(--accent-strong); }
.sc-subtab.on::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
/* Badge SỐ trên subtab (user báo 2026-08-17: "số lượng ticket bị khó thấy").
 * Bản cũ là chữ 10px màu `--text-muted` trên nền `--bg-active` — xám nhạt trên
 * xám nhạt, tương phản thấp hơn cả chữ nhãn bên cạnh, mà đây lại là con số
 * người dùng đọc để biết còn bao nhiêu việc. Nay:
 *   - tab ĐANG CHỌN: tô ĐẶC màu accent + chữ trên-accent (cùng khuôn đã dùng
 *     cho `.sc-pager-btn.on` và `.sc-qbadge`) — nổi hẳn khỏi nền panel;
 *   - tab thường: nền `--bg-active` giữ nguyên nhưng chữ lên `--text-2` và có
 *     viền, đủ đọc mà vẫn nhạt hơn tab đang chọn (giữ đúng thứ bậc).
 * `min-width` + căn giữa để số 1 chữ số và 3 chữ số cùng ra hình viên thuốc,
 * không co giãn nhấp nhô khi đếm đổi. */
.sc-subtab-badge {
  min-width: 22px;
  font-size: var(--text-11); font-weight: 800;
  background: var(--bg-active);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 1px 7px;
  border-radius: var(--r-full);
  text-align: center;
  line-height: 1.45;
}
.sc-subtab.on .sc-subtab-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* ══════════════════════════════════════════════════════════════
   DANH SÁCH · DÒNG
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:823-832 .pa-list/.pa-row — hover đổi CẢ border-color; và
 * :1020-1025 cho phần riêng của ticket. */
.sc-list { display: flex; flex-direction: column; gap: var(--sp-2); }
/* GRID chứ không phải flex cho cụm bên phải (audit 2026-08-11 B3): với flex, tag
 * ưu tiên và pill trạng thái có bề rộng theo độ dài chữ ("Khẩn" vs "Bình thường",
 * "Đã đóng" vs "Mới tiếp nhận") nên cả cụm bị đẩy đi mỗi dòng một kiểu — 5 dòng
 * là 5 mép trái khác nhau, mắt không có đường dóng để quét cột. Grid khoá từng
 * rãnh: [tile][nội dung co giãn][tag][avatar][pill][chevron].
 * Tag để 62px cố định vì ô đó CÓ THỂ RỖNG (mức thường không vẽ tag) — nếu để
 * auto thì dòng có tag và dòng không có tag lại lệch nhau. */
.sc-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(62px, auto) 22px auto 16px;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  /* PM #497 — hover có chuyển động như mọi control khác. `.sc-schip` và
   * `.sc-iconopt` đã có .15s từ trước; dòng ticket và nút "Nhận" thì nhảy tức
   * thì nên rê chuột dọc danh sách thấy giật từng bậc. Khai ĐÚNG hai thuộc tính
   * đang đổi — `transition: all` sẽ kéo theo cả layout. */
  transition: background-color .15s, border-color .15s;
}
.sc-row:hover { background: var(--bg-hover); border-color: var(--border-strong); }
/* tile icon theo loại — nền tint teal (bizapp.css:1023 .tk-row .pa-row-ic) */
.sc-row-ic {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tk-acc) 13%, transparent);
  color: var(--tk-acc);
}
.sc-row-main { flex: 1; min-width: 0; }
.sc-row-top { display: flex; align-items: center; gap: 10px; }
.sc-row-title {
  font-size: var(--text-14);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-row-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: var(--text-12);
  color: var(--text-muted);
  min-width: 0;
}
.sc-row-sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mã ticket — teal + tabular-nums để cột số không nhảy giữa các dòng */
.sc-row-id {
  font-size: var(--text-12);
  font-weight: 700;
  color: var(--tk-acc);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sc-row-sep { color: var(--text-dim); margin: 0 2px; }
.sc-row-chev { color: var(--text-dim); flex-shrink: 0; }
/* Ô tag ưu tiên — canh PHẢI trong rãnh cố định 62px để mọi tag kết thúc ở cùng
 * một đường thẳng, và rỗng cũng vẫn giữ chỗ (mức thường không vẽ tag). */
.sc-row-pri { display: flex; justify-content: flex-end; min-width: 0; }
/* Ô người xử lý — avatar (hoặc ô rỗng nét đứt) cộng chấm "đang vắng" nếu có.
 * Gộp vào MỘT ô grid: chấm vắng là phần tử điều kiện, để nó thành con trực tiếp
 * của .sc-row thì dòng có chấm sẽ thừa một cột và tụt xuống hàng dưới. */
.sc-row-as { position: relative; display: flex; align-items: center; justify-content: center; }
.sc-row-as .sc-absentdot { position: absolute; right: -3px; bottom: -1px; }
.sc-row-meta { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* ⇐ bizapp.css:1018-1019, 1024-1025 .tk-rowwrap / .tk-claim */
.sc-rowwrap { position: relative; display: flex; align-items: stretch; gap: var(--sp-2); }
.sc-rowwrap .sc-row { flex: 1; min-width: 0; }
.sc-claim {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* Khoá bề rộng theo trạng thái DÀI NHẤT ("✓ Đã nhận" đo 104px) — nút đổi chữ
   * Nhận → Đã nhận khi claim mà không khoá là cả hàng giật 18px ngang
   * (user chốt 2026-08-18). Hai nhãn là hằng số nên số đo ổn định. */
  min-width: 106px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--tk-acc) 40%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--tk-acc) 10%, transparent);
  color: var(--tk-acc);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
/* PM #497 — hover đổi CẢ viền, không chỉ nền: 10%→18% là 8 điểm alpha, trên
 * panel tối gần như không thấy nên nút "Nhận" trông như không phản hồi. */
.sc-claim:hover {
  background: color-mix(in srgb, var(--tk-acc) 18%, transparent);
  border-color: color-mix(in srgb, var(--tk-acc) 65%, transparent);
}
.sc-claim:disabled { opacity: 0.5; cursor: default; }

/* ── Hành vi "Nhận" (SUPPORT-UX-CLAIM) — nhịp 2 thì thay cho thay-cả-danh-sách:
 * (1) ~0.5s xác nhận tại chỗ: nút thành "✓ Đã nhận" đặc màu success, dòng nhuốm
 *     xanh nhạt — mắt kịp thấy hành động đã ăn TRƯỚC khi dòng đi;
 * (2) ~0.3s dòng gập chiều cao + mờ dần rời danh sách, các dòng dưới trôi lên.
 * margin-top âm đúng 1 gap của .sc-list: khi phần tử unmount, flex bỏ một gap —
 * không trừ trước thì khung hình cuối cùng nhảy lên 8px. */
.sc-claim.sc-claim-done {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-on-accent);
  cursor: default;
}

/* PM #484 — chỗ của nút "Nhận" khi dòng này mình KHÔNG nhận được (ticket của
 * chính mình lọt vào hàng chờ vì mình là người tạo, nhưng loại ticket khai
 * `handlers` không có mình). Giữ nguyên khung .sc-claim để hàng không giật khi
 * trong danh sách có cả dòng nhận được lẫn dòng không; bỏ viền + nền, hạ về chữ
 * mờ để mắt đọc ra ngay "đây không phải nút". */
.sc-claim.sc-claim-na {
  border-color: transparent;
  background: none;
  color: var(--text-muted);
  font-weight: 500;
  cursor: default;
}
/* PM #484 vòng 2 — câu "vì sao bạn chưa nhận được ticket này" trong popup. Cùng
 * khung .sc-agentbar để nó nằm đúng chỗ khối hành động vẫn nằm, chỉ khác là chữ
 * thay vì nút — người đọc thấy ngay tại nơi họ đang tìm cái nút. */
.sc-claimwhy { font-size: var(--text-13); color: var(--text-muted); line-height: 1.55; }
.sc-rowwrap-claimed .sc-row {
  background: color-mix(in srgb, var(--success) 9%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.sc-row-leaving {
  overflow: hidden;
  pointer-events: none;
  animation: scRowLeave 0.3s ease forwards;
}
@keyframes scRowLeave {
  from { max-height: 90px; opacity: 1; margin-top: 0; }
  to { max-height: 0; opacity: 0; margin-top: calc(-1 * var(--sp-2)); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-row-leaving { animation-duration: 0.01s; }
}

/* ⇐ bizapp.css:1006-1012 .tk-queuebar — chip hàng đợi (queue-inbox) */
.sc-queuebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: 16px; }
.sc-queuebar-lbl { font-size: var(--text-13); font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.sc-queuechip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}
.sc-queuechip:hover { background: var(--bg-hover); }
.sc-queuechip.on {
  background: color-mix(in srgb, var(--tk-acc) 14%, transparent);
  border-color: color-mix(in srgb, var(--tk-acc) 45%, transparent);
  color: var(--tk-acc);
}
.sc-qbadge { font-size: 10px; font-weight: 800; background: var(--danger); color: #fff; padding: 1px 6px; border-radius: var(--r-full); }
/* ⇐ bizapp.css:1012 .tk-leadtag */
.sc-leadtag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  color: var(--text-muted);
}
/* ⇐ bizapp.css:1173 .tk-fixedtag / :1176 .tk-code */
.sc-fixedtag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  color: var(--text-dim);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.sc-code { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.sc-openbadge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ══════════════════════════════════════════════════════════════
   TICKET-DETAIL
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:1034-1045 .tk-strip — HÀNG NGANG các node pill trong 1 khung,
 * nối bằng đoạn 16×2px. Bản cũ là các cột dọc rời rạc min-width 84px. */
.sc-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
}
.sc-strip-node { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 8px; border-radius: var(--r-full); }
.sc-strip-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-active);
  color: var(--text-dim);
  font-size: var(--text-11);
  font-weight: 700;
  flex-shrink: 0;
}
.sc-strip-lbl { font-size: var(--text-12); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.sc-strip-node.done .sc-strip-dot { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.sc-strip-node.done .sc-strip-lbl { color: var(--text-2); }
/* --sc = màu trạng thái do server cấp (status_defs.color), set inline ở markup */
.sc-strip-node.active { background: color-mix(in srgb, var(--sc, var(--accent)) 12%, transparent); }
.sc-strip-node.active .sc-strip-dot { background: var(--sc, var(--accent)); color: #fff; }
.sc-strip-node.active .sc-strip-lbl { color: var(--sc, var(--accent)); font-weight: 700; }
.sc-strip-bar { width: 16px; height: 2px; border-radius: 2px; background: var(--border-strong); flex-shrink: 0; }
.sc-strip-bar.on { background: color-mix(in srgb, var(--success) 45%, transparent); }
/* Pill neo ABSOLUTE ngay dưới bước đang làm (node cha đã position:relative) —
 * bản cũ margin-left:auto đẩy pill lơ lửng mép phải, không gắn với bước nào.
 * .sc-strip-hasflag chừa chỗ: 14px padding gốc + 8px khe + ~24px chiều cao pill. */
.sc-strip-node { position: relative; }
.sc-strip-hasflag { padding-bottom: 46px; }
.sc-strip-flag {
  position: absolute;
  left: 8px; top: calc(100% + 8px);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--sc-flag-c, #7c3aed) 14%, transparent);
  color: var(--sc-flag-c, #7c3aed);
  font-size: var(--text-12);
  font-weight: 600;
}

/* ⇐ bizapp.css:1048-1053 .tk-meta-grid */
.sc-metagrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
/* Số ô lẻ → ô cuối trải hết hàng, không để lại ô trống bên phải giữa lưới. */
.sc-metagrid > .sc-meta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sc-meta { display: flex; flex-direction: column; gap: var(--sp-1); }
.sc-meta-k { font-size: var(--text-12); color: var(--text-muted); }
.sc-meta-v {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text);
}
.sc-meta-v svg { color: var(--text-muted); }
/* ⇐ bizapp.css:1053 .tk-unassigned */
.sc-unassigned { color: var(--text-dim); font-weight: 500; }

/* key-value của form động — design không có khối tương ứng, dùng khuôn tk-meta */
.sc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.sc-kv-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.sc-kv-row.wide { grid-column: 1 / -1; }
.sc-kv-k { font-size: var(--text-12); color: var(--text-muted); }
.sc-kv-v { font-size: var(--text-13); white-space: pre-wrap; line-height: 1.5; }

/* ⇐ bizapp.css:1056-1061 .tk-agentbar — viền + nền tint TEAL, tiêu đề màu teal */
.sc-agentbar {
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--tk-acc) 30%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--tk-acc) 6%, transparent);
}
.sc-agentbar-hd {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 11px;
  font-size: var(--text-13);
  font-weight: 700;
  color: var(--tk-acc);
}
/* .sc-actsel còn MỘT consumer ngoài khối này (admin-allocation.mjs) — giữ.
 * .sc-agentrow-act / .sc-agentgrp hết consumer sau SUPPORT-UI-AGENTBAR → đã gỡ. */
.sc-actsel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-muted);
}
.sc-actsel select.sc-input { width: auto; min-width: 130px; }

/* ── SUPPORT-UI-SCROLLTOP — nút cuộn lên đầu, chỉ render trên các màn có
 * AdminNav. Fixed đáy-phải theo viewport (app desktop-only, chạy trong iframe
 * nên viewport = khung app). Chỉ tồn tại khi đã cuộn quá ngưỡng (JS). */
.sc-scrolltop {
  position: fixed;
  /* Neo theo MÉP CỘT NỘI DUNG, không phải mép màn (user 2026-08-18: màn rộng
   * thì right cứng đẩy nút trôi xa trục đọc). Cột kẹp --mod-w căn giữa thật
   * (scrollbar-gutter both-edges) nên tâm cột = 50% viewport; vế calc đặt nút
   * ngay ngoài mép phải cột: 50% − mod-w/2 − (16px khe + 40px thân nút).
   * max() chọn khoảng-cách-phải LỚN hơn → màn hẹp (<~1268px) vế calc âm/nhỏ
   * thì rơi về 28px sát mép như cũ, màn rộng thì bám cột. */
  right: max(28px, calc(50% - (var(--mod-w) / 2) - 56px));
  bottom: 24px;
  z-index: 30;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  transition: color .15s, border-color .15s;
}
.sc-scrolltop:hover { color: var(--tk-acc); border-color: color-mix(in srgb, var(--tk-acc) 45%, transparent); }
.sc-scrolltop:focus-visible { outline: 2px solid var(--tk-acc); outline-offset: 2px; }

/* ── SUPPORT-UI-AGENTBAR (A + S1 + T1, user chốt qua visual companion
 * 2026-08-18) — hai tầng theo tần suất ─────────────────────────────────
 * Tầng 1: hàng CHIP trạng thái bấm-phát-ăn-ngay (thay select + nút Cập
 * nhật). Chip hiện tại đứng đầu, dot ăn màu trạng thái qua --sc (cùng cơ
 * chế .sc-strip-node). Tầng 2: mục "Chuyển giao ticket" disclosure. */
.sc-agentsec { display: flex; flex-direction: column; gap: 7px; }
.sc-agentlbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-schips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sc-schips-arrow { color: var(--text-dim); flex: none; }
.sc-schip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sc-schip:hover:not(:disabled) { border-color: var(--tk-acc); color: var(--tk-acc); }
.sc-schip:disabled { opacity: .55; cursor: default; }
.sc-schip:focus-visible { outline: 2px solid var(--tk-acc); outline-offset: 1px; }
.sc-schip.now {
  border-color: color-mix(in srgb, var(--tk-acc) 55%, transparent);
  background: color-mix(in srgb, var(--tk-acc) 10%, var(--bg-elev));
  color: var(--tk-acc);
  cursor: default;
}
.sc-schip-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--sc, var(--tk-acc));
}

/* PM #497 — MỘT ngôn ngữ nhóm cho cả hộp "Hành động xử lý". Trước đây nhóm
 * "Chuyển trạng thái" phân cách bằng nhãn hoa nhỏ --text-muted, còn nhóm
 * "Chuyển giao" bằng kẻ ĐỨT teal 35% + nhãn TEAL ⇒ hai kiểu nhóm trong cùng một
 * hộp, cộng viền teal 30% + nền teal 6% + tiêu đề teal là bốn lớp teal cạnh
 * nhau. Nay kẻ liền --border, nhãn cùng màu .sc-agentlbl. Teal chỉ còn ở tiêu
 * đề khối, chip trạng thái hiện tại và nút "Trả ticket về hàng đợi" — nút đó
 * giữ teal CÓ CHỦ Ý: nó là hành động, không phải nhãn nhóm. */
.sc-transfer { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
/* Header disclosure là BUTTON thật (Enter/Space toggle được, aria-expanded).
 * Reset về chữ — cùng cỡ/màu .sc-agentlbl nhưng teal để đọc là "bấm được". */
.sc-transfer-hd {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted);
}
.sc-transfer-hd:focus-visible { outline: 2px solid var(--tk-acc); outline-offset: 2px; border-radius: 4px; }
.sc-transfer-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.sc-transfer-body {
  margin-top: 10px; padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--tk-acc) 30%, transparent);
  display: flex; flex-direction: column; gap: 9px;
}
.sc-transfer-reason { display: flex; flex-direction: column; gap: 5px; }
.sc-transfer-reason .sc-transfer-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
/* Tách dấu * khỏi câu giải thích — htm gộp khoảng trắng giữa hai <span> nên
 * trong template nó ra "*— dùng chung…" dính liền. Đặt lề ở CSS đáng tin hơn là
 * trông vào khoảng trắng của template. */
.sc-transfer-reason .sc-transfer-hint { margin-left: 4px; }
/* MỘT hàng hành động, căn TRÁI — thay grid `110px 1fr auto` cũ (user chốt
 * 2026-08-24). Grid đó vốn dựng cho hàng "Gán cho"; hàng release phải nhét một
 * span RỖNG vào cột 1 làm vật chèn, nên ở vai agent (không có quyền gán ⇒ không
 * có hàng gán) cột 110px trống vẫn đẩy nút sang phải và nó trông như lơ lửng
 * giữa khung. Flex + wrap: một vai một nút hay hai vai ba control đều thẳng lề
 * trái với ô "Lý do" phía trên, và tự xuống dòng khi hẹp. */
.sc-transfer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-transfer-assign { display: flex; align-items: center; gap: 8px; }
/* Picker KHÔNG giãn hết hàng (bản cũ width:100% trong cột 1fr) — cơ số 240px để
 * tên dài "Nguyễn Hương Giang (vắng tới 21/08)" còn đọc được, min 180px cho khổ
 * hẹp. Chỉ set flex/min-width: ĐỪNG đụng `background` của .sc-input, shorthand
 * sẽ xoá mất mũi tên var(--chevron) của select (bẫy đã ghi ở CLAUDE.md). */
.sc-transfer-assign select.sc-input,
.sc-transfer-assign input.sc-input { flex: 0 1 240px; min-width: 180px; }
/* Ba control cùng hàng phải CÙNG CAO: select.sc-input là 40px (min-height của
 * .sc-input) còn .sc-btn-sm chỉ 31.5px — chênh 8.5px, hàng trông lệch. Nâng nút
 * lên bằng ô nhập, không hạ ô nhập xuống: đúng cách `.sc-unavadd` đã xử lý hàng
 * "thêm lịch vắng" (min-height = .sc-input). Scoped trong .sc-transfer-actions
 * vì .sc-btn-sm còn dùng ở nhiều chỗ khác, đổi toàn cục là đổi cả app. */
.sc-transfer-actions .sc-btn { min-height: 40px; }
.sc-transfer-release { color: var(--tk-acc); border-color: color-mix(in srgb, var(--tk-acc) 45%, transparent); }

/* ⇐ bizapp.css:1065-1079 .tk-thread — bubble ĐUÔI LỆCH kiểu Telegram; bubble
 * của mình là TINT teal + chữ --text, KHÔNG đổ đặc accent + chữ trắng. */
.sc-thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.sc-msg { display: flex; }
/* PM #497 — GIỜ của cả BA loại dòng (bình luận của mình · của người khác · dòng
 * log) nay thẳng MỘT cột phải.
 *
 * 🔁 Thay cách làm 2026-08-17 (`position: absolute; right: 0` cho riêng bình
 * luận người khác). Ý muốn hồi đó vẫn đúng — "hai hệ timestamp xen kẽ làm mắt
 * đổi cách đọc liên tục" — nhưng nó chỉ neo được 2/3 loại: bình luận CỦA MÌNH
 * phải giữ giờ inline vì neo phải sẽ đè lên tên, nên trong cùng một danh sách
 * vẫn còn hai mốc. Cách mới bỏ hẳn absolute: HEADER trải hết chiều ngang hàng
 * (`width: 100%`) và giờ tự dạt phải bằng `margin-left: auto` — không đè lên
 * tên được (tên co lại bằng ellipsis), và áp cho CẢ ba loại.
 *
 * Kèm theo: bề rộng 82% chuyển từ .sc-msg-body sang .sc-msg-bub. Để ở body thì
 * header cũng bị bó 82% ⇒ giờ dạt phải ở mốc 82%, lệch với dòng log (100%).
 * `align-items` phải khai TƯỜNG MINH flex-start: mặc định `stretch` kéo mọi
 * bong bóng rộng đúng 82% dù nội dung một chữ. */
.sc-msg-body { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.sc-msg.me .sc-msg-body { align-items: flex-end; }
.sc-msg-hd { width: 100%; display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-12); color: var(--text-dim); }
.sc-msg-hd b { font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-msg-hd > span:last-child { margin-left: auto; flex: none; }
.sc-msg-bub {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 4px 12px 12px 12px;
  background: var(--bg-active);
  color: var(--text);
  font-size: var(--text-13);
  line-height: 1.5;
  white-space: pre-wrap;
}
.sc-msg.me .sc-msg-bub {
  border-radius: 12px 4px 12px 12px;
  /* PM #497 — token có bản SÁNG và TỐI (tokens.css). Trước đây là
   * color-mix(--tk-acc 15%, transparent): ở theme tối, teal 15% pha trong suốt
   * trên panel #161922 gần như tiệp nền ⇒ bong bóng "của mình" không phân biệt
   * được với "của người khác". --tk-acc cố ý không có bản tối nên phải tách
   * token riêng cho đúng surface này.
   * ⚠️ Luật y hệt còn ở `.tkc-bub.out .tkc-bub-tx` của cụm HỘI THOẠI — cụm đó
   * đang tắt bằng cờ nên để nguyên, xem SUPPORT-UI-CONVBUB trong backlog. */
  background: var(--tk-bub-me);
}
.sc-msg-viamcp {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--tk-acc);
  background: color-mix(in srgb, var(--tk-acc) 12%, transparent);
  border-radius: var(--r-full);
  padding: 1px 7px;
}

/* ⇐ bizapp.css:1075-1079 .tk-log — dòng nhật ký có icon tròn */
/* PM #497 — bỏ `padding: 2px 0`: `.sc-thread` đã có gap 12px, hai đầu padding
 * cộng thêm 4px làm nhịp log↔log = 16px trong khi comment↔comment = 12px. */
.sc-log { display: flex; align-items: center; gap: 10px; }
.sc-log-ic {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-active);
  color: var(--text-muted);
}
.sc-log-tx { flex: 1; min-width: 0; font-size: var(--text-12); color: var(--text-muted); }
.sc-log-tx b { color: var(--text-2); font-weight: 600; }
.sc-log-at { font-size: var(--text-12); color: var(--text-dim); flex-shrink: 0; }

/* ⇐ bizapp.css:1082-1086 .tk-composer — KHUNG bọc, input bên trong không viền */
.sc-composer {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  display: flex; flex-direction: column; gap: 10px;
}
/* Ghim composer ở đáy vùng cuộn của modal (đánh giá popup 2026-08-17): việc
 * chính của người tạo lúc "Chờ bổ sung" là TRẢ LỜI, mà ô nhập lại trôi cuối
 * timeline — ticket dài là phải cuộn hết lịch sử mới thấy. Sticky: luôn hiện
 * ở đáy, cuộn tới cuối thì về đúng vị trí tự nhiên. Bóng hắt LÊN (color-mix
 * từ --text nên tự hợp cả dark) để tách khỏi nội dung đang trôi phía dưới. */
.sc-modal-body > .sc-composer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -10px 22px -14px color-mix(in srgb, var(--text) 40%, transparent);
}
.sc-composer .sc-input { border: none; background-color: transparent; padding: 2px; min-height: 40px; }
.sc-composer .sc-input:focus { border: none; box-shadow: none; }
.sc-composer-att { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-composer-ft { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }

/* ⇐ bizapp.css:1089-1097 .tk-csat */
.sc-csat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.sc-csat-q { font-size: var(--text-13); font-weight: 600; color: var(--text-2); }
.sc-csat-stars { display: inline-flex; gap: var(--sp-1); color: var(--border-strong); }
.sc-csat-stars .on { color: #f59e0b; }
.sc-csat-stars.pick button {
  border: none; background: none; padding: 0;
  color: var(--border-strong);
  display: grid; place-items: center;
  cursor: pointer;
}
.sc-csat-stars.pick button.on { color: #f59e0b; }
.sc-csat-cmt { font-size: var(--text-13); color: var(--text-muted); font-style: italic; }

/* ⇐ bizapp.css:1192-1198 .tk-confirm / :1182-1189 .tk-reopen */
.sc-confirm {
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sc-confirm-hd { display: flex; align-items: center; gap: 7px; font-size: var(--text-13); font-weight: 700; color: var(--text); }
.sc-confirm-sub { font-size: var(--text-12); color: var(--text-muted); line-height: 1.5; }
.sc-confirm-act { display: flex; gap: var(--sp-2); margin-top: 2px; justify-content: flex-end; }
.sc-reopen {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
  display: flex; flex-direction: column; gap: 9px;
}
.sc-reopen-hd { display: flex; align-items: center; gap: 7px; font-size: var(--text-13); font-weight: 700; color: var(--text); }
/* ĐỪNG đổi lại thành `display: flex`. Khối này là MỘT CÂU văn xuôi có 3 thẻ <b>
   bên trong; trong flex container mỗi <b> thành một flex item và mỗi đoạn text
   giữa chúng thành một anonymous flex item ⇒ 7 item xếp cạnh nhau, mỗi cái tự
   wrap thành một cột hẹp (đo 2026-08-26: câu bị xé thành 5 cột 40–90px). Flex ở
   đây là copy từ .sc-reopen-hd — dòng ĐÓ có icon + chữ nên cần flex, dòng này
   không có icon. */
.sc-reopen-note { font-size: var(--text-12); color: var(--text-muted); line-height: 1.5; }

/* ⇐ bizapp.css:1113-1115 .tk-routehint (dự báo định tuyến, TK.43) */
.sc-forecast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--bg-chat);
  font-size: var(--text-13);
  color: var(--text-muted);
}
.sc-forecast b { color: var(--text-2); font-weight: 700; }
.sc-forecast svg { color: var(--tk-acc); flex-shrink: 0; }

/* dải thông báo trong thân màn — design không có khối riêng, dùng tint accent */
.sc-banner {
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent);
  font-size: var(--text-12);
  color: var(--text-2);
  line-height: 1.5;
}
/* ⇐ Countdown (TK.43) */
.sc-countdown { font-size: var(--text-12); color: var(--text-muted); }
.sc-countdown-due { color: var(--danger); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   CREATE-TICKET
   ══════════════════════════════════════════════════════════════ */

/* ⇐ components.css:596-598 .field */
.sc-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.sc-field { display: flex; flex-direction: column; gap: 6px; }
.sc-field label { font-size: var(--text-12); font-weight: 600; color: var(--text-2); }
.sc-req { color: var(--danger); }

/* ── Ô NHẬP SỐ của biểu mẫu ticket ────────────────────────────────────────
 * User báo 2026-08-20: không phân biệt được ô số với ô văn bản. Ô giữ NGUYÊN
 * full-width (quyết định của user — thu hẹp ô thì mất nhịp đều của form), nên
 * tín hiệu phải nằm bên trong ô: icon # ở đầu, chữ số dóng cột đều nhau, và các
 * dấu nhóm 3 chữ số. Xem lib/num.mjs cho phần vì sao nhóm bằng khoảng hẹp.
 *
 * 38px = 13px (mép icon) + 15px (thân icon) + 10px thở. Nhỏ hơn thì chữ chạm icon. */
.sc-numwrap { position: relative; }
.sc-numwrap > .sc-input {
  padding-left: 38px;
  /* tabular-nums: mỗi chữ số rộng bằng nhau nên các nhóm 3 dóng thành cột — đây
   * là nửa còn lại của việc "khỏi đếm bằng tay", dấu nhóm lo nửa kia. */
  font-variant-numeric: tabular-nums;
}
.sc-numicon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-dim);
  /* icon không được ăn cú click — bấm vào nó phải là bấm vào ô */
  pointer-events: none;
}
.sc-numhint { display: flex; gap: 8px; align-items: baseline; font-size: var(--text-12); }
.sc-numhint-mag { color: var(--text-2); font-weight: 700; }
.sc-numhint-cnt { color: var(--text-dim); font-weight: 600; }
/* Giá trị số ở popup chi tiết: dóng cột giống hệt lúc nhập. */
.sc-kv-num { font-variant-numeric: tabular-nums; }
.sc-err { display: flex; align-items: center; gap: 6px; font-size: var(--text-12); font-weight: 600; color: var(--danger); }
/* ⇐ bizapp.css:1108 .tk-create-row */
.sc-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Chọn loại ticket là DROPDOWN (user chốt 2026-08-21). Bản trước là danh sách thẻ
 * (⇐ bizapp.css:1100-1107 .tk-typepick/.tk-typeopt): đẹp khi workspace có 3-4 loại,
 * nhưng UAT có 12 loại × ~80px ⇒ ~1000px chiếm trọn popup, ô Tiêu đề bị đẩy xuống
 * dưới màn. Đã gỡ .sc-typepick / .sc-typeopt / -tx / -check vì không còn ai dùng
 * (grep: chỉ create-ticket.mjs). GIỮ .sc-typeopt-ic — tile icon nay đứng cạnh
 * select và vẫn là dấu hiệu nhận loại duy nhất còn lại. */
.sc-typerow { display: flex; align-items: center; gap: var(--sp-3); }
.sc-typerow .sc-input { flex: 1; min-width: 0; }
.sc-typeopt-ic {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tk-acc) 13%, transparent);
  color: var(--tk-acc);
}

/* ⇐ bizapp.css:1109-1112 .tk-prisel / .tk-prichip — active tô theo MÀU MỨC ƯU
 * TIÊN (--sc-badge-c), không đổ đặc accent như bản cũ. */
.sc-chiprow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sc-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-panel);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}
.sc-chip:hover { background: var(--bg-hover); }
.sc-chip.on {
  border-color: var(--sc-badge-c, var(--accent));
  background: color-mix(in srgb, var(--sc-badge-c, var(--accent)) 13%, transparent);
  color: var(--sc-badge-c, var(--accent-strong));
}

/* đính kèm — design không có khối riêng, theo khuôn tk-handlerrow */
.sc-attlist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sc-att {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
  font-size: var(--text-12);
}
.sc-att-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* QC #252 vòng 4 — tệp KHÔNG gửi được vẫn nằm trong khay để người dùng tự xoá
 * (phiếu đòi "không tải tệp nào, user tự quyết"), nên nó phải khác hàng tệp hợp
 * lệ ở CẢ HAI kênh: viền/nền cảnh báo và một dòng lý do riêng. Chỉ tô đỏ chữ thì
 * hàng vẫn trông như đã đính kèm xong.
 *
 * `flex-wrap` + `.sc-att-err` chiếm trọn một dòng: lý do dài hơn tên tệp (ví dụ
 * "Nội dung tệp không khớp đuôi .pdf — chỉ nhận tệp gốc"), nhồi cùng dòng là ép
 * tên tệp co về 0px — đúng bẫy 6 rãnh của .sc-row mà CLAUDE.md cảnh báo. */
.sc-att { flex-wrap: wrap; }
.sc-att-bad {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-chat));
}
.sc-att-err {
  flex-basis: 100%;
  color: var(--danger);
  font-size: var(--text-11);
  line-height: 1.45;
}
/* QC #252 — ô xác nhận "tệp này an toàn" (vế 2 của phiếu). Đứng NGAY DƯỚI khay,
 * cùng lề với các hàng tệp, để đọc như "xác nhận cho đúng bộ tệp ở trên" chứ
 * không phải một điều khoản chung của form.
 *
 * `align-items: flex-start` + `margin-top: 2px` cho ô tick: nhãn có 2 dòng (câu
 * xác nhận + câu hint), căn giữa sẽ đẩy ô tick xuống giữa khối chữ. */
.sc-safeconfirm {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
  cursor: pointer;
  font-size: var(--text-12);
}
.sc-safeconfirm input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.sc-safeconfirm > span { display: flex; flex-direction: column; gap: 2px; }
.sc-safeconfirm b { font-weight: 500; }
.sc-safeconfirm .sc-hint-inline { margin: 0; }
.sc-att-sz { color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Icon loại tệp mở đầu hàng (design .pa-att-ic) — accent để làm mốc cho hàng,
 * grid place-items vì SVG là inline element, không tự căn giữa theo dòng chữ. */
.sc-att-ic { color: var(--accent); flex-shrink: 0; display: grid; place-items: center; }
/* Nút tải: nút ICON không viền, đúng .pa-att-dl của design (bizapp.css:859) —
 * hàng đã có viền nên nút có viền nữa là khung trong khung, và nút chữ 90px cũ
 * nổi hơn cả tên tệp. */
.sc-att-dl {
  border: none; background: none;
  color: var(--text-muted);
  padding: 5px; border-radius: var(--r-sm);
  flex-shrink: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--d-fast), color var(--d-fast);
}
/* Hover các nút TRONG hàng .sc-att (SUPPORT-UI-ATTDLHOVER, user chốt B 2026-08-18):
 * hover mặc định của cả .sc-btn-ghost lẫn .sc-icon-btn đổi nền sang --bg-hover
 * (#f3f4f8 light) nhưng hàng .sc-att nền --bg-chat (#f4f5f9 light) — chênh ~1 đơn
 * vị RGB, light mode coi như KHÔNG có hover. Nhuốm accent thay thế — cùng ngôn ngữ
 * .sc-btn-ghost.on; token accent-soft/-strong đã theo theme nên dark đồng bộ.
 * Phủ CẢ .sc-icon-btn (nút ✕ xoá tệp ở composer, cùng nằm trong .sc-att và cùng
 * mắc đúng lỗi hover vô hình này) — một rule, hai chỗ. */
.sc-att .sc-att-dl:hover,
.sc-att .sc-icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ══════════════════════════════════════════════════════════════
   ADMIN
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:924-933 .pa-flowcard — ic 40×40 --r-md (bản cũ là emoji 22px trần) */
.sc-cardlist { display: flex; flex-direction: column; gap: 10px; }
.sc-unit-tree { display: flex; flex-direction: column; gap: 10px; }
.sc-flowcard {
  display: flex; gap: var(--sp-4);
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}
.sc-flowcard-ic {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tk-acc) 12%, transparent);
  color: var(--tk-acc);
}
/* biến thể nền màu theo dữ liệu (loại kênh) — màu vào qua --sc inline */
.sc-flowcard-ic.colored { background: var(--sc, var(--tk-acc)); color: #fff; }
.sc-flowcard-main { flex: 1; min-width: 0; }
.sc-flowcard-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-flowcard-nm { font-size: var(--text-15); font-weight: 700; }
.sc-flowcard-desc { font-size: var(--text-13); color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
/* Nút hành động của thẻ: CỘT DỌC bề rộng CỐ ĐỊNH (polish 2026-08-11, yêu cầu
 * user): mọi nút cùng một bề rộng ở MỌI trạng thái — "Sửa" không hẹp hơn
 * "Kích hoạt lại", và cột nút của thẻ này thẳng hàng với cột nút của thẻ kia
 * khi lướt danh sách. 132px = nhãn dài nhất ("Kích hoạt lại" + icon 14) có dư. */
.sc-flowcard-act {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 150px; /* nhãn dài nhất toàn app: "Quản lý thành viên" (thẻ hàng đợi) */
  flex-shrink: 0;
}
.sc-flowcard-act .sc-btn { width: 100%; justify-content: center; white-space: nowrap; }
.sc-bot-card .sc-flowcard-main { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ⇐ bizapp.css:1118-1122 .tk-typemeta / .tk-statuschip */
.sc-typemeta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 10px; }
.sc-typemeta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-12); color: var(--text-muted); }
.sc-typemeta svg { color: var(--text-dim); }
.sc-statuschip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--sc, var(--text-muted)) 12%, transparent);
  color: var(--sc, var(--text-muted));
  font-size: var(--text-12);
  font-weight: 600;
}
.sc-rostatus { display: flex; flex-wrap: wrap; gap: 6px; }
/* trạng thái loại ticket — 3 mức, dùng token trạng thái hệ thống */
.sc-typestatus { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); letter-spacing: 0.02em; }
.sc-typestatus.draft { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.sc-typestatus.active { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sc-typestatus.inactive { background: var(--bg-active); color: var(--text-dim); }

/* ⇐ bizapp.css:1127-1132 .tk-tags */
/* Container chip hoạt động như một ô nhập (gõ vào để thêm tag) nên mang cùng
 * ngôn ngữ với .sc-input: nền nổi + viền (QC #439b). `--bg-chat` cũ = nền trang
 * nên nó xám như field bị khoá, đứng cạnh các ô trắng thì lạc hẳn. */
.sc-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.sc-tags:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.sc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  color: var(--text-2);
  font-size: var(--text-12);
  font-weight: 600;
}
.sc-tag button {
  border: none; background: none;
  color: var(--text-dim);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 2px;
  border-radius: var(--r-xs);
}
.sc-tag button:hover { color: var(--danger); }
.sc-taginput {
  flex: 1; min-width: 120px;
  border: none; background: none;
  font-family: inherit;
  font-size: var(--text-13);
  color: var(--text);
  padding: 4px;
}
.sc-taginput:focus { outline: none; }

/* ⇐ bizapp.css:1140-1147 .tk-memberpick */
.sc-memberpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.sc-memberopt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sc-memberopt:hover { background: var(--bg-hover); }
.sc-memberopt.on {
  border-color: color-mix(in srgb, var(--tk-acc) 45%, transparent);
  background: color-mix(in srgb, var(--tk-acc) 8%, transparent);
}
.sc-memberavatars { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sc-memberav { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-12); color: var(--text-muted); }
/* v1.8 §13 màn #8 — badge presence trên chip thành viên. Chấm màu + (khi vắng)
 * ghi rõ tới ngày nào; người offline nhạt đi một bậc nhưng KHÔNG gạch/ẩn —
 * offline vẫn là thành viên, chỉ không được round-robin tự phân (§6.2). */
.sc-memberav.off { color: var(--text-dim); }
.sc-presdot { width: 7px; height: 7px; border-radius: var(--r-full); display: inline-block; flex-shrink: 0; }
.sc-presdot.on { background: var(--success); }
.sc-presdot.off { background: var(--text-dim); }
.sc-memberav-until { font-style: normal; font-size: var(--text-11); color: var(--warning); white-space: nowrap; }
.sc-label-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }

/* member editor (modal admin-queues) — khuôn tk-handlerrow */
.sc-addrow { display: flex; gap: var(--sp-2); align-items: center; }
/* Ô gợi ý người khi thêm thành viên hàng đợi (QC #448). `position: relative` để
 * danh sách thả xuống bám theo ô nhập; `flex: 1` để ô này ăn phần rộng còn lại
 * của .sc-addrow (ô tên hiển thị + nút Thêm giữ nguyên kích thước). */
.sc-sugwrap { position: relative; min-width: 0; }
.sc-sugwrap > .sc-input { width: 100%; }
/* Ô gợi ý ăn hết phần rộng còn lại (nút "+ Thêm" giữ nguyên kích thước).
 * `flex-basis: 0` chứ không `auto`: `.sc-input` mang `width: 100%` ở rule gốc
 * và trong flex thì `basis: auto` lấy chính width đó. Modifier riêng vì
 * `.sc-addrow` còn 5 chỗ dùng khác (ticket-detail, admin-channels ×2,
 * admin-labels, conv-inbox).
 * SUPPORT-DIR-SYNC: hàng này từng có thêm ô "Tên hiển thị" chia 3:2 — nay tên
 * lấy theo Nexa nên chỉ còn một ô. */
.sc-addrow-people > .sc-sugwrap { flex: 1 1 0; }
.sc-suglist {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 232px; overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  /* Nổi trên danh sách thành viên ngay bên dưới: khối đó là sibling ĐỨNG SAU
   * trong DOM nên mặc định vẽ đè lên. Số cụ thể không quan trọng — cả hai nằm
   * trong stacking context của .sc-modal-ov (z-index 100), chỉ cần lớn hơn 0.
   *
   * Lưu ý .sc-modal-body có `overflow-y: auto` nên danh sách này bị KẸP trong
   * thân modal (và cuộn cùng nội dung). Chấp nhận được vì ô nhập nằm ở đầu thân
   * modal và danh sách bị chặn 232px — không dùng portal/floating cho một ô. */
  z-index: 60;
  padding: 4px;
}
.sc-sugitem {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 7px 9px;
  border: 0; border-radius: var(--r-sm);
  background: none;
  text-align: left;
  cursor: pointer;
}
.sc-sugitem:hover { background: var(--bg-hover); }
.sc-sugitem:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.sc-sugitem-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sc-sugitem-tx b { font-size: var(--text-13); font-weight: 600; color: var(--text); }
.sc-sugitem-tx span { font-size: var(--text-11); color: var(--text-dim); }
/* Hàng đợi người đó đang tham gia — cho admin biết trước khi thêm, thay vì thêm
 * xong mới phát hiện trùng. */
.sc-sugitem-q {
  flex-shrink: 0;
  font-size: var(--text-11);
  color: var(--text-muted);
  max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-memberlist { display: flex; flex-direction: column; gap: 6px; }
.sc-memberrow {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
}
/* SUPPORT-UX-QMEMBERS — lưới ô TICK thành viên trong modal hàng đợi (thay danh
 * sách hàng dọc + radio trưởng nhóm; .sc-memberrow/-tx giữ lại cho
 * admin-channels). Ô đã tick nói bằng HAI kênh: viền+nền accent VÀ dấu check —
 * màu không được là tín hiệu duy nhất (TK.44).
 * --mtile-bg: nền hiện hành của ô, để vòng khuyên quanh chấm presence (box-shadow)
 * luôn trùng nền dù ô đang tick hay không. */
.sc-membergrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-mtile {
  --mtile-bg: var(--bg-chat);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--mtile-bg);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.sc-mtile:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sc-mtile:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.sc-mtile.on {
  --mtile-bg: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.sc-mtile-av { position: relative; flex-shrink: 0; display: inline-flex; }
.sc-mtile-av .sc-presdot {
  position: absolute; right: -1px; bottom: -1px;
  box-shadow: 0 0 0 2px var(--mtile-bg);
}
.sc-mtile-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-mtile-tx b {
  font-size: var(--text-13); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-mtile-note { font-style: normal; font-size: var(--text-11); color: var(--warning); white-space: nowrap; }
/* Check giữ CHỖ cả khi chưa tick (opacity thay display) — tick/untick không làm
 * chữ trong ô xê dịch ngang. */
.sc-mtile-check { flex-shrink: 0; display: inline-flex; color: var(--accent); opacity: 0; }
.sc-mtile.on .sc-mtile-check { opacity: 1; }
.sc-memberrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-13); font-weight: 600; }
.sc-memberrow-tx span { font-size: var(--text-11); font-weight: 400; color: var(--text-muted); }

/* ⇐ bizapp.css:1201-1208 .tk-handlers */
.sc-handlerlist { display: flex; flex-direction: column; gap: 6px; }
.sc-handlerrow {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
}
.sc-handlerrow-no {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--bg-active);
  font-size: 10.5px; font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sc-handlerrow-nm { flex: 1; min-width: 0; font-size: var(--text-13); font-weight: 600; }

/* ⇐ bizapp.css:1210-1214 .tk-modepick */
.sc-modepick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.sc-modeopt {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  font-family: inherit;
  font-size: var(--text-13);
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.sc-modeopt span { font-size: var(--text-11); color: var(--text-dim); line-height: 1.45; font-weight: 400; }
.sc-modeopt.on { border-color: var(--accent); background: var(--accent-soft); }

/* ⇐ bizapp.css:1150-1157 .tk-stepbar — node PILL có số trong vòng tròn 18px */
.sc-stepbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1);
  padding: 11px 13px;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* nền trắng (polish P5): --bg-chat == nền trang nên cả thanh biến mất */
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.sc-stepbar-node {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.sc-stepbar-node b {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-active);
  color: var(--text-2);
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.sc-stepbar-node.on { background: var(--bg-active); color: var(--text); }
.sc-stepbar-node.ready { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.sc-stepbar-node.ready b { background: var(--success); color: #fff; }
.sc-stepbar-node.blocked { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.sc-stepbar-node.blocked b { background: #d97706; color: #fff; }
.sc-stepbar-bar { width: 12px; height: 2px; border-radius: 2px; background: var(--border-strong); flex-shrink: 0; }

/* ⇐ bizapp.css:1158-1170 .tk-eligible */
.sc-eligible { padding: 12px 14px; border: 1px solid; border-radius: var(--r-lg); }
.sc-eligible.ok {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.sc-eligible.blocked {
  border-color: color-mix(in srgb, #d97706 30%, transparent);
  background: color-mix(in srgb, #d97706 8%, transparent);
}
.sc-eligible-hd { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-13); font-weight: 700; margin-bottom: var(--sp-2); }
.sc-eligible.ok .sc-eligible-hd { color: var(--success); }
.sc-eligible.blocked .sc-eligible-hd { color: #b45309; }
.sc-eligible-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-13); color: var(--text-2); }
.sc-conseq-list { margin: 0; padding-left: 18px; font-size: var(--text-13); color: var(--text-2); display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.sc-lockguide {
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.sc-lockguide-hd { display: flex; align-items: center; gap: 6px; font-size: var(--text-12); font-weight: 700; color: var(--danger); margin-bottom: 3px; }
/* Biến thể TODO (user chốt 2026-08-18) — checklist "việc còn thiếu" của bản
 * nháp: warning + viền trái, KHÔNG phải hộp lỗi đỏ (nháp thiếu cấu hình là
 * trạng thái tự nhiên đang làm dở; base đỏ ở trên giữ cho lỗi thật, vd
 * admin-priorities chặn xoá mức ưu tiên còn tham chiếu). */
.sc-lockguide-todo {
  border: none;
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warning) 6%, transparent);
  /* thở đều hai phía — thiếu là mép dưới dính sát hàng "Vòng đời" (user báo
   * kèm ảnh); margin trên collapse với margin sẵn có của khối trước nên không
   * cộng dồn. */
  margin: 10px 0;
}
.sc-lockguide-todo .sc-lockguide-hd { color: var(--warning); margin-bottom: 6px; }
.sc-todo-list li { display: flex; align-items: center; gap: 8px; }
/* Vòng tròn RỖNG kiểu ô chưa tick — "việc chưa làm", không phải gạch đầu dòng. */
.sc-todo-dot {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--warning) 70%, transparent);
  border-radius: var(--r-full);
}

/* ── Bước "Biểu mẫu" của wizard loại ticket (thiết kế lại 2026-08-20) ─────────
 * Bảng cấu hình bên trái + panel xem trước bên phải. Bản cũ là flex-row các
 * control rời: không nhãn cột, mỗi hàng tự căn theo bề rộng nội dung nên 4 hàng
 * là 4 mép khác nhau. Nay dùng GRID với rãnh cố định để mọi hàng dóng thẳng —
 * cùng lý do .sc-row của TicketRow dùng grid.
 *
 * Rãnh: [số 20] [tay cầm 18] [nhãn co giãn] [kiểu auto] [công tắc 72] [xoá 30]
 * `grid-column: 1 / -1` cho dòng thông báo lỗi/cảnh báo nằm dưới, tràn hết hàng.
 */
.sc-fldsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
/* Khổ hẹp: xếp dọc — panel xem trước xuống dưới bảng, không nén cột nhãn */
@media (max-width: 1040px) {
  .sc-fldsplit { grid-template-columns: minmax(0, 1fr); }
}
.sc-fieldeditor { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sc-fldhead,
.sc-fldrow {
  display: grid;
  grid-template-columns: 20px 18px minmax(0, 1fr) auto 72px 30px;
  gap: 10px;
  align-items: center;
}
.sc-fldhead { padding-bottom: 2px; }
.sc-fldhead-l {
  font-size: var(--text-11); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
}
.sc-fldhead-c { text-align: center; }
.sc-fldrow { border-radius: var(--r-md); }
/* Kéo-thả: hàng đang kéo mờ đi, hàng đích có vạch accent ở mép trên — đủ để biết
 * "thả vào đây" mà không phải dựng placeholder giả chiếm chỗ. */
.sc-fldrow.dragging { opacity: 0.45; }
.sc-fldrow.dragover { box-shadow: inset 0 2px 0 0 var(--accent); }
.sc-fldrow-no {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  font-size: 10.5px; font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-fldrow-grip {
  display: grid; place-items: center;
  width: 18px; height: 26px;
  border: 0; background: none; padding: 0;
  color: var(--text-dim);
  cursor: grab;
  border-radius: var(--r-sm);
}
.sc-fldrow-grip:hover { color: var(--text-2); }
.sc-fldrow-grip:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; color: var(--text-2); }
.sc-fldrow-grip:active { cursor: grabbing; }
.sc-fldrow-req { justify-self: center; }
/* Ô nhãn chiếm rãnh co giãn; select ĐỂ TRÌNH DUYỆT tự co theo option rộng nhất
 * (`width: auto` — .sc-input base có `width: 100%`, trong rãnh grid `auto` sẽ
 * thành vòng lặp kích thước). Không khoá số cứng: sau khi mũi tên select được
 * nới chỗ (padding-right 32px) thì 130px cắt chữ "Văn bản ngắn", và 150px VẪN
 * cắt vì Chrome còn chừa ~16px cho mũi tên ngay trong content box. */
.sc-fldrow > .sc-input { width: 100%; min-width: 0; }
.sc-fldrow > select.sc-input { width: auto; min-width: 0; }
/* Dòng thông báo của hàng: thụt vào đúng mép ô nhãn (20 + 18 + 2 gap) */
.sc-fldrow-msg { grid-column: 1 / -1; margin-left: 58px; font-size: var(--text-12); }
.sc-fldadd { align-self: flex-start; }
/* Ô nhãn thiếu / trùng — viền nói trạng thái, chữ ở dòng dưới nói vì sao */
.sc-input-err { border-color: var(--danger); }
.sc-input-warn { border-color: var(--warning); }

/* Panel xem trước — dùng CHÍNH FormFieldView của màn Tạo ticket. Ô bị disabled
 * nên nền xám theo luật .sc-input:disabled sẵn có; sticky để còn thấy khi bảng
 * trường dài hơn panel. */
.sc-fldpreview {
  position: sticky; top: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
  display: flex; flex-direction: column; gap: 2px;
}
.sc-fldpreview-hd {
  font-size: var(--text-11); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.sc-fldpreview .sc-field { margin: 0; }
.sc-fldempty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
}
.sc-fldempty-ttl { font-size: var(--text-14); font-weight: 600; }
.sc-fldempty .sc-hint-inline { max-width: 420px; }

.sc-reviewgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.sc-reviewgrid > div { display: flex; flex-direction: column; gap: var(--sp-1); }
.sc-wizard-ft { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }

/* vòng đời / ưu tiên động (gói 3B) — khuôn tk-statusrow (bizapp.css:1133-1137) */
.sc-lc-statuslist { display: flex; flex-direction: column; gap: var(--sp-2); }
.sc-lc-statusrow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
  flex-direction: column; align-items: stretch;
}
.sc-lc-statusrow-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-lc-statusrow-main .sc-input { flex: none; }
.sc-lc-codeinput { width: 130px; font-family: var(--font-mono); font-size: var(--text-12); }
.sc-lc-labelinput { flex: 1; min-width: 120px; }
.sc-lc-sevinput { width: 84px; }

/* MỨC ƯU TIÊN — bảng thật, không phải danh sách thẻ (audit 2026-08-11).
 * Bản cũ: mỗi mức là một thẻ flex-wrap, và `.sc-lc-priorow .sc-input` (0,2,0) đè
 * `.sc-lc-labelinput { flex:1 }` (0,1,0) nên ô Nhãn rơi về `width:100%` của
 * .sc-input và đẩy mọi thứ xuống dòng — một mức chiếm 3 dòng, 4 mức kín màn hình.
 * Nay là lưới cột cố định dùng CHUNG cho hàng tiêu đề và hàng dữ liệu, nên nhãn
 * cột luôn thẳng hàng với ô của nó. Bỏ luôn viền+nền từng thẻ: khung ngoài một
 * lần, các hàng ngăn bằng đường kẻ — hết cảnh hộp lồng hộp lồng input. */
.sc-lc-priolist {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  overflow: hidden;
}
.sc-lc-priohead, .sc-lc-priorow {
  display: grid;
  /* Nhãn có TRẦN 420px: để 1fr thì ở khổ nội dung 1100px ô nhập cho một chữ
     ("Thấp") kéo dài ~700px. Phần dư dồn về cuối hàng qua justify-content. */
  grid-template-columns: 128px minmax(200px, 420px) 44px 92px 88px 30px;
  justify-content: start;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
}
.sc-lc-priohead {
  background: var(--bg-chat);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-lc-priorow { border-bottom: 1px solid var(--border-subtle); }
.sc-lc-priorow:last-child { border-bottom: none; }
.sc-lc-priorow .sc-input { flex: none; width: 100%; min-width: 0; }
.sc-lc-priorow .sc-lc-codeinput { width: 100%; }
.sc-lc-priorow .sc-lc-sevinput { width: 100%; }
.sc-lc-priorow-err { grid-column: 1 / -1; }
.sc-lc-addprio { margin-top: var(--sp-2); }
.sc-lockguide-sp { margin-top: var(--sp-3); }
.sc-lc-flags { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.sc-lc-approvaldis { display: flex; align-items: center; gap: 6px; font-size: var(--text-12); color: var(--text-muted); cursor: help; }
.sc-lc-priorow.hidden { opacity: 0.6; }

.sc-lc-matrixwrap { overflow-x: auto; margin-top: 6px; }
.sc-lc-matrix { border-collapse: collapse; font-size: var(--text-12); }
.sc-lc-matrix th, .sc-lc-matrix td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; white-space: nowrap; }
.sc-lc-matrix th { background: var(--bg-chat); font-weight: 600; color: var(--text-muted); }
.sc-lc-matrix .sc-lc-fromlbl { text-align: left; font-weight: 600; color: var(--text); }
.sc-lc-matrix td.disabled { background: var(--bg-active); color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   WIDGET · BẢNG
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:1219-1239 .tk-stats — thẻ biểu đồ. Design chia theo TỪNG NGƯỜI
 * xử lý; BE hiện chỉ trả counts theo trạng thái toàn hàng đợi nên ở đây là 1
 * thanh tổng hợp — đúng style, chưa đúng cấu trúc (backlog SUPPORT-UI-HANDLER). */
.sc-widget {
  padding: 15px 17px;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sc-widget-hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sc-widget-ttl { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-13); font-weight: 700; color: var(--text); }
/* ⇐ bizapp.css:1222 .tk-stats-sub */
.sc-widget-sub { font-size: var(--text-12); font-weight: 500; color: var(--text-dim); }
/* THỐNG KÊ HÀNG ĐỢI (thiết kế lại 2026-08-12) — thẻ số bấm được + thanh tỷ lệ.
 * Thay legend+bar cũ: legend in số rồi bar in lại chính con số đó, và "Chưa
 * nhận" (trục đã-gán) đứng lẫn trong dãy trạng thái nên bị đọc như cùng một
 * series. Nay số ở thẻ, thanh chỉ còn tỷ lệ. Thẻ dùng lại .sc-stat của
 * my-tickets — cùng một khuôn ô số liệu ở cả hai tab. */
.sc-qstat { margin-bottom: 10px; }
button.sc-stat {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast);
}
button.sc-stat:hover { border-color: var(--border-strong); background: var(--bg-hover); }
button.sc-stat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* .on = thẻ đang là bộ lọc hiện hành của danh sách bên dưới.
 * KHÔNG khoá vào `button` (PM #524): thẻ trạng thái của vai không có tab "Toàn hàng
 * đợi" là <div> (không bấm được), nhưng bộ lọc Trạng thái ở dropdown vẫn đặt được mã
 * đó — mất chỉ báo này là người dùng đang lọc mà không thấy mình đang lọc gì. Con trỏ
 * + hover + focus vẫn ở `button.sc-stat` phía trên, tức <div> không hứa bấm được. */
.sc-stat.on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-soft);
}
.sc-stat.on .sc-stat-n { color: var(--accent-strong); }
/* chấm màu trạng thái — inline-block để .sc-stat-l giữ được text-overflow */
.sc-stat-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}
/* ô Tổng: không bấm được (không lọc theo "tổng"), nên nhạt hơn và không hover */
.sc-stat-total { background: var(--bg); box-shadow: none; }
.sc-stat-total .sc-stat-n { color: var(--text-2); }
/* SUPPORT-UX-QTABS — thẻ "Đã đóng" (mã terminal): LỊCH SỬ chứ không phải tải
 * đang sống, đứng sau Tổng đang mở nên hạ tông cả số lẫn nhãn xuống một bậc
 * (số dùng màu nhãn --text-muted, nhạt hơn --text-2 của Tổng). Vẫn là button
 * bấm được (nhảy Toàn hàng đợi + lọc) — hover/on dùng nguyên khuôn .sc-stat. */
.sc-stat-closed { background: var(--bg); box-shadow: none; }
.sc-stat-closed .sc-stat-n { color: var(--text-muted); }

/* thanh tỷ lệ: MỎNG và KHÔNG CHỮ — hình dạng là thứ duy nhất nó cần nói */
.sc-qbar {
  display: flex; align-items: stretch; gap: 2px;
  height: 6px;
  border-radius: var(--r-full);
  overflow: hidden;
}
.sc-qbar-seg { min-width: 4px; border-radius: 2px; }
.sc-qbar-skel { flex-grow: 1; background: var(--bg-active); }
/* Hàng đợi rỗng — nay là MỘT Ô .sc-stat trong chính grid .sc-stats (xem
 * queue-inbox.mjs), nên chiều cao khớp hàng thẻ theo CẤU TẠO. Bỏ `min-height:
 * 74px` đoán tay của bản cũ: đo thật thì widget vẫn tụt 25.8px khi đổi sang hàng
 * đợi rỗng. Ở đây chỉ còn việc cho ô trải hết chiều ngang và chữ nhạt đi. */
.sc-qstat-empty { grid-column: 1 / -1; }
.sc-qstat-empty .sc-stat-l { color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
.sc-qbar-empty { flex-grow: 1; background: var(--bg-active); }

/* ── Tải theo người xử lý (TK.12.1 nửa "& người xử lý", SUPPORT-UI-HANDLER) ──
 * Khối này CHỈ render cho trưởng nhóm/admin — dữ liệu do server quyết (§9.3),
 * CSS không phải là chỗ gác.
 *
 * Thanh LIỀN MẠCH: `gap: 0` + KHÔNG bo góc (user chốt 2026-08-25 kèm ảnh). Một
 * dòng là MỘT khối tải bị chia theo trạng thái; cắt rời thành nhiều viên bo góc
 * thì mắt đọc thành nhiều thứ rời rạc thay vì một tổng bị chia. Khác chủ ý với
 * .sc-qbar ở trên (thanh tỷ lệ toàn hàng đợi, vẫn bo tròn + có khe) — hai thanh
 * trả lời hai câu khác nhau nên không phải trông giống nhau. */
.sc-hstats {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--border);
}
.sc-hstats-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 5px;
}
.sc-hstats-ttl { font-size: var(--text-12); font-weight: 700; color: var(--text-muted); }
/* Tiêu đề khối = nút thu gọn (user chốt 2026-08-25). Trông y như .sc-hstats-ttl
 * cũ, chỉ thêm chevron + vùng bấm — hàng đợi đông người thì khối này đẩy danh
 * sách ticket xuống quá xa. Nút trần: không viền không nền, vì nó là tiêu đề
 * trước khi là nút; chỉ đổi màu chữ khi trỏ vào để nói "bấm được". */
.sc-hstats-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px; margin: 0 -6px;
  border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: var(--text-12); font-weight: 700;
  color: var(--text-muted); cursor: pointer; text-align: left;
}
.sc-hstats-toggle:hover { color: var(--text); background: var(--bg-hover); }
/* Số người khi đã thu gọn: thu gọn xong vẫn phải biết bên dưới có bao nhiêu dòng,
 * không thì khối trông như rỗng. */
.sc-hstats-count {
  font-weight: 600; color: var(--text-dim);
  padding-left: 8px; border-left: 1px solid var(--border); margin-left: 2px;
}
.sc-hstats-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.sc-hstats-lg { display: flex; align-items: center; gap: 5px; font-size: var(--text-11); color: var(--text-muted); }
.sc-hstats-lg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* 190px cho cột tên: đủ cho "Nguyễn Thị Khánh Linh" + chấm trực + avatar mà
 * không ăn vào phần thanh. Cột số cuối 34px = 4 chữ số tabular. */
.sc-hstats-row {
  display: grid; grid-template-columns: 190px 1fr 34px;
  align-items: center; gap: var(--sp-3);
  width: 100%; padding: 3px 6px; margin: 0 -6px;
  border: 0; background: none; border-radius: var(--r-sm);
  font: inherit; text-align: left; cursor: pointer;
}
.sc-hstats-row:hover { background: var(--bg-hover); }
.sc-hstats-row.on { background: var(--accent-soft); }
.sc-hstats-row.on .sc-hstats-tot { color: var(--accent-strong); }
/* Ngoại tuyến nhạt đi MỘT bậc, không gạch không ẩn — cùng quy ước với
 * .sc-memberav.off ở màn Hàng đợi: offline vẫn là thành viên. */
.sc-hstats-row.off .sc-hstats-who { color: var(--text-dim); }
.sc-hstats-who {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--text-12); font-weight: 600; color: var(--text);
}
.sc-hstats-who > .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-hstats-ex { font-style: normal; font-size: var(--text-11); color: var(--text-dim); white-space: nowrap; }
.sc-hstats-bar { display: flex; align-items: stretch; gap: 0; height: 21px; }
.sc-hstats-seg {
  display: grid; place-items: center; min-width: 21px;
  color: #fff; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-hstats-pad { background: var(--bg-active); opacity: 0.4; }
.sc-hstats-tot {
  text-align: right; font-size: var(--text-12); font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.sc-hstats-zero { font-style: normal; font-size: var(--text-12); color: var(--text-dim); align-self: center; }
/* bảng báo cáo — design không có khuôn bảng riêng cho cụm ticket; dùng token */
.sc-tablewrap { width: 100%; overflow-x: auto; }
.sc-tablewrap .sc-table { min-width: 100%; }
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--text-13); }
.sc-table th, .sc-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-table th {
  font-size: var(--text-11); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
}
.sc-table td { font-variant-numeric: tabular-nums; }
.sc-table tr.total td { font-weight: 700; border-top: 2px solid var(--border); }
.sc-cellbtn {
  border: 0; background: transparent;
  color: var(--link);
  font-family: inherit;
  font-size: var(--text-13); font-weight: 600;
  cursor: pointer; padding: 0;
}
.sc-cellbtn:hover { text-decoration: underline; }
/* Δ so sánh kỳ (SUPPORT-UX-REPORTS #11) — CHIP có mũi tên + màu theo chiều tốt,
 * xếp trên; giá trị kỳ trước là dòng phụ mờ bên dưới. Bản cũ nhồi cả ba thứ vào
 * một dòng chữ 11px không màu ("kỳ trước 127 · +49 (+38.6%)") — thứ cần liếc là
 * hiểu nhất lại là thứ đặc chữ nhất, và tăng/giảm không có tín hiệu phi-chữ nào.
 * Chip đứng RIÊNG một dòng, căn phải theo cột số (bảng .sc-table-num). */
.sc-cellsub {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  margin-top: 4px;
}
.sc-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px 1px 4px;
  border-radius: var(--r-full);
  font-size: var(--text-11); font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Mặc định = chỉ số khối lượng (neutral). Mực TRUNG TÍNH, không xanh/đỏ: tăng
   * số ticket tiếp nhận không phải tin tốt cũng không phải tin xấu, tô tốt/xấu
   * là gán nghĩa cho một con số không có nghĩa đó (BRD §9.1 `v1.md:993` "Mũi tên
   * chỉ hướng, không tô xanh/đỏ" + AC TK.27 `:1070`).
   *
   * 🔁 ĐẢO một nửa quyết định 2026-08-27 (anh Huy chốt 2026-08-28 sau comment QC
   * trong phiếu #480): trước đây nhóm này CỐ Ý không có nền viên thuốc, lập luận
   * là "ngân sách thị giác" — 24 viên xám nhìn dày đặc mà không nói gì. Thực tế
   * QC đọc ô trần thành **chưa được style** ("không có màu sắc… không đồng
   * nhất") và mở phiếu lần hai. Nay trả lại nền, nhưng bằng chính --text-muted
   * nên hình dạng đồng nhất mà tín hiệu tốt/xấu vẫn CHỈ thuộc good/bad.
   * Ràng buộc hai chiều này được khoá ở `lib/delta-chip.test.mjs`. */
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.sc-delta.good { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.sc-delta.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.sc-cellsub-prev { font-size: var(--text-11); color: var(--text-dim); font-weight: 400; }
/* Chú thích chiều tốt/xấu dưới bảng — chỗ ở mới của glyph ↓/↑/— từng đứng trên
 * tiêu đề cột và bị đọc nhầm thành ký hiệu sắp xếp (#6). */
.sc-rlegend { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sc-rlegend .sc-delta { font-weight: 500; }
.sc-comparetoggle {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: var(--text-12);
  text-transform: none; letter-spacing: 0;
  color: var(--text-2);
}

/* ══════════════════════════════════════════════════════════════
   HỘP THƯ HỘI THOẠI (tkc-*) — 54/76 class trùng tên design,
   rule lấy nguyên văn bizapp.css:1243+ trở xuống.
   ══════════════════════════════════════════════════════════════ */

/* ⇐ bizapp.css:1243-1250 — 3 cột 312/1fr/288 + @container thu về 2 cột. Bản cũ
 * là `320px 1fr` và bật cột 3 bằng class .info-open; container query đúng hơn vì
 * chiều rộng iframe ≠ chiều rộng cửa sổ (media query đo sai đối tượng). */
.tkc {
  position: relative;
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr) 288px;
  height: 100%; min-height: 0;
  background: var(--bg);
}
.tkc-infobtn { display: none; }
@container (max-width: 1140px) {
  .tkc { grid-template-columns: 268px minmax(0, 1fr); }
  .tkc-infobtn { display: inline-grid; }
  .tkc-side-r {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 282px; z-index: 6;
    box-shadow: -8px 0 26px rgba(15, 18, 32, 0.12);
  }
  .tkc-side-r:not(.show) { display: none; }
}

/* cột trái */
.tkc-side-l {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.tkc-lhd {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.tkc-fsel {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-11); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-muted);
}
.tkc-fsel select.sc-input {
  flex: 1; min-width: 0; min-height: 0;
  /* padding shorthand ở đây từng ghi `6px 10px` → nuốt mất chỗ dành cho mũi tên
   * của quy tắc toàn cục, chữ đè lên chevron. Nêu lại rõ 4 cạnh. */
  padding: 6px 28px 6px 10px;
  background-position: right 10px center;
  font-size: var(--text-13); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  background-color: var(--bg-panel);
  border-radius: var(--r-md);
  cursor: pointer;
}
.tkc-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); }
.tkc-lft { flex-shrink: 0; padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-size: var(--text-12); color: var(--text-muted); }
.tkc-lft b { color: var(--text); font-variant-numeric: tabular-nums; }
.tkc-empty { padding: 20px 10px; text-align: center; color: var(--text-dim); font-size: var(--text-12); line-height: 1.6; }

/* dòng hội thoại */
.tkc-row {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tkc-row:hover { background: var(--bg-hover); }
.tkc-row.on { background: color-mix(in srgb, var(--tk-acc) 12%, transparent); }
.tkc-row-av { position: relative; flex-shrink: 0; }
.tkc-row-grp {
  position: absolute; right: -4px; bottom: -4px;
  font-size: 9px; line-height: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 1px 3px;
}
.tkc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.tkc-row-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.tkc-row-nm { flex: 1; min-width: 0; font-size: var(--text-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc-row-at { font-size: var(--text-11); color: var(--text-dim); flex-shrink: 0; }
.tkc-row-msg { font-size: var(--text-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc-row-ft { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-11); color: var(--text-muted); }
.tkc-row-wait { display: inline-flex; align-items: center; gap: 3px; color: var(--danger); font-weight: 700; }
.tkc-row-who { display: inline-flex; align-items: center; gap: 3px; }
.tkc-row-unread {
  margin-left: auto;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* avatar khách — màu per-customer set inline (khớp design tkc-cust) */
.tkc-cust {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--text-12);
  font-weight: 700;
  flex-shrink: 0;
}
.tkc-cust.lg { width: 44px; height: 44px; font-size: var(--text-16); }
.tkc-cust.xs { width: 18px; height: 18px; font-size: 9px; }

/* chip kênh — màu theo loại kênh, vào qua --cc inline */
.tkc-ch { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--cc, var(--text-muted)); font-weight: 600; white-space: nowrap; }
.tkc-ch-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc, var(--text-muted)); flex-shrink: 0; }

/* cột giữa */
.tkc-thread { display: flex; flex-direction: column; min-height: 0; background: var(--bg-chat); overflow: hidden; }
.tkc-thread.empty { align-items: center; justify-content: center; }
.tkc-thd {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 20px;
  min-height: 48px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.tkc-thd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tkc-thd-nm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tkc-thd-name { font-size: var(--text-15); font-weight: 700; letter-spacing: -0.01em; }
.tkc-thd-role { font-size: var(--text-12); font-weight: 400; color: var(--text-muted); }
.tkc-thd-sub { font-size: var(--text-12); color: var(--text-muted); }
.tkc-thd-acts { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.tkc-thd-who { font-size: var(--text-12); color: var(--text-muted); white-space: nowrap; }
.tkc-infobtn {
  width: 34px; height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
}
.tkc-infobtn:hover { background: var(--bg-hover); color: var(--text); }

/* pill trạng thái hội thoại — màu vào qua --pc inline */
.tkc-pill {
  font-size: var(--text-11); font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  color: var(--pc, var(--text-muted));
  background: color-mix(in srgb, var(--pc, var(--text-muted)) 16%, transparent);
  white-space: nowrap;
}
.tkc-bot-tag {
  font-size: 10px; font-style: normal; font-weight: 700;
  margin-left: var(--sp-1);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-active);
  padding: 1px 6px;
  border-radius: var(--r-full);
}

/* luồng tin — bubble ĐUÔI LỆCH, đúng design tk-msg-bub (bizapp.css:1073-1074) */
.tkc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) 20px; display: flex; flex-direction: column; gap: var(--sp-3); }
.tkc-bub { max-width: 72%; display: flex; flex-direction: column; gap: 3px; }
.tkc-bub.cust { align-self: flex-start; align-items: flex-start; }
.tkc-bub.out { align-self: flex-end; align-items: flex-end; }
.tkc-bub-who { font-size: var(--text-11); color: var(--text-muted); }
.tkc-bub-tx {
  font-size: var(--text-13);
  line-height: 1.5;
  white-space: pre-wrap;
  padding: 9px 13px;
  border-radius: 4px 12px 12px 12px;
  background: var(--bg-active);
  color: var(--text);
}
.tkc-bub.out .tkc-bub-tx {
  border-radius: 12px 4px 12px 12px;
  background: color-mix(in srgb, var(--tk-acc) 15%, transparent);
}
.tkc-bub-at { font-size: 10px; color: var(--text-dim); }
.tkc-bub-att { font-size: var(--text-11); color: var(--text-muted); }
.tkc-bub-fail { display: flex; align-items: center; gap: 6px; font-size: var(--text-11); color: var(--danger); font-weight: 700; }
.tkc-retrybtn {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-family: inherit;
  font-size: var(--text-11); font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  cursor: pointer;
}
.tkc-retrybtn:disabled { opacity: 0.5; cursor: default; }

/* composer */
.tkc-composer {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-panel);
}
.tkc-warn {
  font-size: var(--text-12); font-weight: 600;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.tkc-warn-hint { margin-top: var(--sp-1); color: var(--text-2); font-weight: 400; }
.tkc-countdown { font-size: var(--text-12); color: var(--text-muted); }
.tkc-note { font-size: var(--text-12); color: var(--text-muted); font-style: italic; }
/* bot đang giữ — cảnh báo tiếp quản cần thấy rõ, không phải hint mờ như
 * .tkc-note; markup gắn cả 2 class, rule sau thắng (cùng specificity). */
.tkc-note-bot {
  font-size: var(--text-12); font-style: normal;
  color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.tkc-qr { display: flex; flex-wrap: wrap; gap: 6px; }
.tkc-qr button {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-12); font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
}
.tkc-qr button:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.tkc-textarea { resize: vertical; }
.tkc-composer-ft { display: flex; align-items: center; gap: var(--sp-2); }
.tkc-spacer { flex: 1; }

/* cột phải — panel bối cảnh. Ở khổ RỘNG panel LUÔN hiện (là cột thứ 3 của grid,
 * nút ⓘ bị ẩn); chỉ ở khổ hẹp nó mới thành overlay bật/tắt bằng class .show —
 * đúng design. Bản cũ để `display:none` làm mặc định nên khổ rộng vẫn phải bấm
 * nút mới thấy panel, và cột thứ 3 bị chừa trống. */
.tkc-side-r {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}
.tkc-sec {
  font-size: var(--text-11); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.tkc-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tkc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-12); }
.tkc-kv span { color: var(--text-muted); flex-shrink: 0; }
.tkc-kv b { text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* AI triage */
.tkc-triage { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-12); }
.tkc-triage-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tkc-triage-lbl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.tkc-triage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.tkc-triage-conf { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tkc-triage-fix {
  font-size: var(--text-11); font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-active);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.tkc-triage-bar { height: 4px; border-radius: var(--r-full); background: var(--bg-active); overflow: hidden; }
.tkc-triage-bar i { display: block; height: 100%; background: var(--accent); }
.tkc-triage-reason { color: var(--text-muted); line-height: 1.5; }
.tkc-kb-refs { display: flex; flex-wrap: wrap; gap: 5px; }
.tkc-kb-refs span {
  font-size: var(--text-11);
  color: var(--text-muted);
  background: var(--bg-active);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.tkc-muted { color: var(--text-dim); font-style: italic; }
.tkc-corrected { font-size: var(--text-12); color: var(--text-muted); }

/* điều phối */
.tkc-route { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-12); }
.tkc-route-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.tkc-route-arrow { color: var(--text-dim); font-weight: 400; }
.tkc-handoff { color: var(--text-muted); }

/* ticket hỗ trợ + CSAT */
.tkc-owner { font-size: var(--text-12); color: var(--text-muted); }
.tkc-ticket { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-12); flex-wrap: wrap; }
.tkc-ticket-title { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkc-ticket-note {
  font-size: var(--text-12);
  color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--r-md);
  padding: 10px 12px;
  line-height: 1.5;
}
.tkc-csat { font-size: var(--text-12); font-weight: 600; color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   GIÁM SÁT HỘI THOẠI (cvs-*)
   ══════════════════════════════════════════════════════════════ */

.cvs-stat-link { cursor: pointer; text-align: center; font: inherit; color: inherit; }
.cvs-stat-link:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.cvs-stat-link .sc-stat-l::after { content: ' \203A'; color: var(--text-dim); font-weight: 400; }
.cvs-stat-note { font-size: var(--text-11); color: var(--text-muted); }

.cvs-dist { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: 18px; }
.cvs-dist-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-13); }
.cvs-dist-nm {
  flex: none; width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--link);
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.cvs-dist-nm:disabled { color: var(--text); font-weight: 400; cursor: default; }
.cvs-dist-bar { flex: 1; height: 8px; border-radius: var(--r-full); background: var(--bg-active); overflow: hidden; }
.cvs-dist-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.cvs-dist-n { flex: none; width: 64px; text-align: right; color: var(--text-muted); font-size: var(--text-12); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   GÓI 3A — cấu hình vận hành, nghiệm thu, SLA (prefix sc-3a-)
   ══════════════════════════════════════════════════════════════ */

/* admin-routing — TK.46: luật tắt phải khác biệt bằng ÍT NHẤT HAI tín hiệu
 * (chip chữ "Đang tắt" ở markup + độ mờ ở đây), không chỉ độ mờ. */
.sc-3a-rule-ord {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 2px;
  border-radius: var(--r-sm);
  background: var(--bg-active);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: var(--text-12); font-weight: 800;
  color: var(--text-muted);
}
.sc-3a-ruleoff { opacity: 0.6; }
.sc-3a-rule-when { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--text-12); color: var(--text-muted); }
.sc-3a-rule-then { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; font-size: var(--text-12); }
.sc-3a-rule-then::before { content: '→'; color: var(--text-dim); }
.sc-3a-kwlist { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.sc-3a-kwlist em {
  font-style: normal;
  font-size: var(--text-11);
  color: var(--text-muted);
  background: var(--bg-active);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

/* thử định tuyến (SC.25/SC.70) */
.sc-3a-probe {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}
.sc-3a-probe-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sc-3a-probe-sel { flex: 1; min-width: 160px; }
.sc-3a-probe-result {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--bg-chat);
  font-size: var(--text-13);
}

/* công tắc dùng chung — TK.44: LUÔN có chữ "Đang bật"/"Đang tắt", knob bổ trợ */
.sc-3a-switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sc-3a-switch:hover { background: var(--bg-hover); }
.sc-3a-switch.on { border-color: var(--accent); background: var(--accent-soft); }
.sc-3a-switch-tx { display: flex; flex-direction: column; gap: 2px; }
.sc-3a-switch-tx b { font-size: var(--text-13); font-weight: 700; }
.sc-3a-switch-tx span { font-size: var(--text-12); color: var(--text-muted); font-weight: 400; }
.sc-3a-switch-state {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-12); font-weight: 700;
  color: var(--text-muted);
  flex: none; white-space: nowrap;
}
.sc-3a-switch.on .sc-3a-switch-state { color: var(--accent-strong); }
.sc-3a-knob {
  display: inline-block; position: relative;
  width: 28px; height: 16px;
  border-radius: var(--r-full);
  background: var(--border-strong);
  flex: none;
  transition: background var(--d-fast);
}
.sc-3a-knob::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left var(--d-fast);
}
.sc-3a-switch.on .sc-3a-knob { background: var(--accent); }
.sc-3a-switch.on .sc-3a-knob::after { left: 14px; }

/* admin-allocation */
.sc-3a-quelist { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: 18px; }
.sc-3a-querow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}
.sc-3a-queuehd { flex: none; min-width: 140px; font-size: var(--text-13); font-weight: 700; }
.sc-3a-quesel { flex: none; width: auto; min-width: 160px; }
.sc-3a-opsblk {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

/* tải/giới hạn (SC.27/SC.71) */
.sc-3a-loadrow { display: flex; align-items: center; gap: 10px; }
.sc-3a-load-n { font-size: var(--text-12); font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.sc-3a-loadbar { flex: 1; max-width: 160px; height: 8px; border-radius: var(--r-full); background: var(--bg-active); overflow: hidden; }
.sc-3a-loadbar i { display: block; height: 100%; border-radius: var(--r-full); }

/* admin-sla — 7 ô ngày làm việc */
.sc-3a-daypicker { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-3a-day {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--text-12); font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
.sc-3a-day:hover { background: var(--bg-hover); }
.sc-3a-day.on { border-color: transparent; background: var(--accent); color: var(--text-on-accent); }

/* app.mjs — bộ chọn hiện diện trên thanh app (SC.71) */
.sc-3a-presence { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.sc-3a-presence-sel { width: auto; min-height: 0; padding: 7px 10px; font-size: var(--text-12); font-weight: 600; }
.sc-3a-presence-load { font-size: var(--text-12); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-3a-presence-load.warn { color: var(--danger); font-weight: 700; }

/* app.mjs — dòng thông báo bấm được (SC.74) */
.sc-3a-bell-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sc-3a-bell-item:hover:not(:disabled) { background: var(--bg-hover); }
.sc-3a-bell-item:disabled { cursor: default; }

/* kpi-dashboard — 3 thẻ chỉ số, khuôn tkc-kpi của design (bizapp-ticket-l1) */
.sc-3a-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sc-3a-kpi {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
}
.sc-3a-kpi-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sc-3a-kpi-lbl { font-size: var(--text-13); font-weight: 700; }
.sc-3a-kpi-val {
  font-size: var(--text-20); font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  flex: none;
}
.sc-3a-kpi-val.ok { color: var(--success); }
.sc-3a-kpi-val.bad { color: var(--danger); }
.sc-3a-kpi-val.na { font-size: var(--text-13); font-weight: 600; letter-spacing: 0; color: var(--text-dim); }
.sc-3a-kpi-def { font-size: var(--text-12); color: var(--text-muted); line-height: 1.5; }
.sc-3a-kpi-bar { position: relative; height: 8px; border-radius: var(--r-full); background: var(--bg-active); margin: 2px 0; }
.sc-3a-kpi-bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); }
.sc-3a-kpi-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); text-decoration: none; }
.sc-3a-kpi-ft { display: flex; justify-content: space-between; gap: 6px; font-size: var(--text-11); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sc-3a-kpi-ft span.now { color: var(--text); font-weight: 700; }
.sc-3a-kpi-met { font-size: var(--text-12); font-weight: 700; }
.sc-3a-kpi-met.ok { color: var(--success); }
.sc-3a-kpi-met.bad { color: var(--danger); }
.sc-3a-kpi-caveat { font-size: var(--text-11); color: var(--text-dim); font-style: italic; }
.sc-3a-kpi-frac { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* escalations */
.sc-3a-esc-assign { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sc-3a-esc-assign select { min-width: 180px; }

/* ticket-detail — khối SLA (SC.73) */
.sc-3a-sla {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-chat);
}
.sc-3a-sla-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-12); }
.sc-3a-sla-lbl { font-weight: 700; flex: none; }
.sc-3a-sla-countdown { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-3a-sla-countdown.warn { color: var(--warning); font-weight: 700; }
.sc-3a-sla-countdown.breach { color: var(--danger); font-weight: 700; }
.sc-3a-sla-flag { font-size: var(--text-11); font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); }
.sc-3a-sla-flag.warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.sc-3a-sla-flag.breach { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

/* ticket-detail — khối Ticket liên quan (SC.45) */
.sc-3a-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-2); }
.sc-3a-link-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-12); }
.sc-3a-link-title { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reports — bộ chuyển "Ticket | Hội thoại" (SC.37) */
.sc-3a-dimtabs { margin-bottom: var(--sp-3); }

/* ══════════════════════════════════════════════════════════════
   AUDIT UI 2026-08-11 (SUPPORT-UI-AUDIT)
   Lớp mới sinh ra từ đợt rà theo ảnh chụp thật. Gom một khối để review/hoàn tác
   gọn; các rule SỬA hành vi cũ thì nằm tại chỗ cũ, không nhét vào đây.
   docs/specs/2026-08-11-support-center-ui-audit-design.md
   ══════════════════════════════════════════════════════════════ */

/* CẢNH BÁO — khác hẳn .sc-err. Hàng đợi chưa gán ai là trạng thái chưa cấu hình
 * bình thường; dùng khuôn lỗi đỏ khiến 3/5 thẻ hiện chữ đỏ, cả màn đọc như đang
 * hỏng. Hổ phách + icon = "cần để ý", không phải "đã sai". */
.sc-warn {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: var(--text-12);
  color: #b45309;
}
.sc-warn svg { flex-shrink: 0; }

/* cặp nhãn/giá trị của thẻ admin — thay dải dữ kiện trần */
.sc-metapairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px 18px;
  margin: 10px 0;
}
.sc-metapair { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-metapair .k {
  font-size: var(--text-11); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-dim);
}
.sc-metapair .v {
  font-size: var(--text-13); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-rostatus-k {
  font-size: var(--text-11); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-dim);
  align-self: center; margin-right: 2px;
}

/* bộ chọn glyph cho loại ticket */
.sc-iconpick {
  display: grid;
  grid-template-columns: repeat(10, 34px);
  gap: 6px;
}
.sc-iconopt {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  /* cùng luật với ô nhập: nổi trên panel, viền lo phần tách */
  background: var(--bg-elev);
  color: var(--text-muted);
  cursor: pointer;
}
.sc-iconopt:hover { border-color: var(--border-strong); color: var(--text-2); }
.sc-iconopt.on {
  border-color: color-mix(in srgb, var(--tk-acc) 55%, transparent);
  background: color-mix(in srgb, var(--tk-acc) 10%, transparent);
  color: var(--tk-acc);
}

/* dòng "đã đủ điều kiện kích hoạt chưa" — thay việc tô xanh lá node bước 5 */
.sc-eligibleline {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 4px;
  font-size: var(--text-12);
  color: var(--text-muted);
}
.sc-eligibleline.ok { color: var(--success); }
.sc-eligibleline svg { flex-shrink: 0; }

/* form TRANG (không phải form trong modal) — ô nhập tên dài cả màn hình thì mắt
 * phải quét ngang 1000px cho một chuỗi 20 ký tự. Modal đã hẹp sẵn nên không
 * dùng lớp này. */
.sc-form-page { max-width: var(--read-w); }
/* Bước "Biểu mẫu" có HAI khối cạnh nhau (bảng trường + panel xem trước) nên khổ
 * đọc 760px là quá hẹp: đo thật thì ô nhãn chỉ còn 98px và cắt chữ ngay ở
 * "Số máy / tầng". Chỉ bước đó được nới, các bước còn lại vẫn là form một cột
 * đọc trong khổ hẹp — nới hết thì dòng nhập dài ra và khó đọc. */
.sc-form-page.sc-form-wide { max-width: 1100px; }

/* lịch vắng — mỗi ô một nhãn, xuống hàng cả cụm chứ không bỏ rơi nút */
.sc-unavrow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: end;
  gap: var(--sp-2);
}
.sc-unavfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-unavfield > span {
  font-size: var(--text-11); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-unavfield .sc-input { width: 100%; min-width: 0; }
/* min-height = .sc-input (40px): nút đứng CÙNG HÀNG với 4 ô nhập, lùn hơn là
 * hàng trông lệch đáy (row align-items: end nên chênh lệch dồn hết lên đỉnh nút). */
.sc-unavadd { white-space: nowrap; min-height: 40px; }
.sc-sec-lbl-sp { margin-top: var(--sp-6); }

/* timeline rỗng */
.sc-thread-empty {
  padding: 18px 2px;
  font-size: var(--text-13);
  color: var(--text-dim);
  line-height: 1.6;
}

/* BẢNG SỐ — số căn phải + tabular-nums để so sánh được theo cột; cột nhóm dính
 * trái khi mở đủ 12 chỉ số và bảng phải cuộn ngang. */
.sc-table-num td, .sc-table-num th { text-align: right; white-space: nowrap; }
.sc-table-num .sc-th-group {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  background: var(--bg-panel);
  min-width: 132px;
}
.sc-table-num thead .sc-th-group { background: var(--bg-chat); }
.sc-table-num .sc-cellbtn { font-variant-numeric: tabular-nums; }
.sc-table-num th { vertical-align: bottom; }
/* ô 0 — bấm được nhưng không mời gọi ("0 ticket" vẫn là câu trả lời) */
.sc-cellbtn.zero { color: var(--text-dim); font-weight: 500; }
/* ô KHÔNG CÓ SỐ — không phải nút nữa (#13): con trỏ mặc định, không gạch chân
 * khi hover, không nhận focus bàn phím. */
.sc-cellbtn.none { color: var(--text-dim); font-weight: 500; cursor: default; }

/* Tiêu đề cột = NÚT SẮP XẾP (#6/#7). Nút trong suốt kế thừa kiểu chữ của <th>
 * nên bảng nhìn y như cũ khi chưa sắp; mũi tên CHỈ hiện ở cột đang sắp. Căn
 * phải theo cột số, riêng cột Nhóm căn trái (luật .sc-th-group bên dưới). */
.sc-thsort {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
}
/* TK.27 — nhãn chiều tốt in NGAY trên tiêu đề cột (VD "↓ tốt hơn"), không chỉ
 * nằm trong tooltip. Xếp DỌC dưới tên cột chứ không cùng dòng: bảng có 13 cột
 * đều `white-space: nowrap` (.sc-table-num th), nhét thêm 8 ký tự vào mỗi tiêu
 * đề là đẩy bảng rộng thêm ~100px và người đọc phải cuộn ngang để thấy cột cuối.
 * Nhãn viết thường, mực mờ, không letter-spacing — nó là chú thích, không phải
 * một tiêu đề thứ hai. */
.sc-thlabel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sc-thdir {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--text-dim); opacity: 0.85;
}
.sc-th-group .sc-thlabel { align-items: flex-start; }
.sc-thsort:hover { color: var(--text); }
.sc-thsort:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; }
.sc-thsort.on { color: var(--accent-strong); }
.sc-table-num th { position: relative; }
.sc-table-num th > .sc-thsort { display: inline-flex; }
.sc-table-num .sc-th-group .sc-thsort { margin-left: 0; }
/* Hàng chân bảng — nay CHỈ còn chú thích chiều (PM #480 vế 2).
 * `space-between` là luật của thời còn HAI con: nút "Thêm chỉ số" bên trái, chú
 * thích bên phải. Nút đã dời lên thanh công cụ (chốt 2026-08-25) nên chỉ còn một
 * con, mà `space-between` với một con thì dán nó vào mép trái — QC đọc ra thành
 * "ghi chú lệch ở mép". Căn giữa: chú thích là của CẢ bảng, không thuộc cột nào.
 * Thêm con thứ hai vào đây thì phải xem lại luật này, đừng để nó tự nhảy về hai mép. */
.sc-rtable-foot {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* Kỳ đang xem — nói bằng dd/mm của app, không phụ thuộc locale của <input date>
 * (#8/#9). Đặt cuối hàng preset, tông phụ để không tranh chấp với nút. */
.sc-rperiod {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-size: var(--text-12); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-rperiod em { font-style: normal; color: var(--text-dim); }
.sc-rperiod em::before { content: '·'; margin-right: 6px; }

/* Popup drill-down: ô lọc + cảnh báo cắt trần (#2/#4) */
/* PM #493 — `flex: 0 0 auto` KHÔNG PHẢI trang trí, đừng gỡ.
 * `.sc-listbar-search` ở trên khai `flex: 2 1 240px; min-width: 240px` cho thanh
 * công cụ của TRANG, tức flex HÀNG NGANG. Drill-down đặt nó trong `.sc-modal-body`,
 * mà body đó là flex CỘT ⇒ `flex-basis: 240px` thôi là chiều rộng và thành **chiều
 * cao 240px**, `flex-grow: 2` giữ nó nở ra mỗi khi danh sách còn chỗ trống, còn icon
 * kính lúp (`top: 50%`) rơi vào giữa cái hộp cao đó — nhìn thành "icon nằm ngoài ô".
 * Đo trước khi sửa (5 ticket): hộp 240px, input 40px, 200px trắng dư, icon lệch
 * 113px. Chỉ lộ khi danh sách NGẮN: danh sách dài thì body tràn và flex-shrink bóp
 * hộp lại. `min-width: 0` vì modal hẹp hơn thanh công cụ của trang. */
.sc-drillsearch { margin-bottom: var(--sp-2); flex: 0 0 auto; min-width: 0; }
.sc-drillwarn { margin: 0 0 var(--sp-2); }
/* Hàng đơn giản cho danh sách KHÔNG phải ticket (drill-down hội thoại) — cố ý
 * KHÔNG dùng .sc-row: class đó là grid 6 rãnh riêng của TicketRow, nhét markup
 * khác vào là vỡ (bài học SUPPORT-UX-REPORTS #1). */
.sc-plainrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
  font-size: var(--text-13);
}
.sc-plainrow-main { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.sc-plainrow-main b { font-weight: 600; color: var(--text); }
.sc-plainrow-sub { color: var(--text-muted); font-size: var(--text-12); }
.sc-plainrow-meta { color: var(--text-2); font-size: var(--text-12); white-space: nowrap; }

/* Bộ lọc giờ là grid cột dọc (nhãn trên control), nên ô "So sánh kỳ trước" —
 * vốn là checkbox nằm NGANG với chữ — phải tự tách khỏi luật đó, và canh xuống
 * đáy ô để thẳng hàng với các control bên cạnh chứ không trôi lên chỗ nhãn. */
.sc-filters label.sc-comparetoggle {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  align-self: end;
  padding-bottom: 7px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}

/* Ô soạn phản hồi: gọn lại cho vừa modal chi tiết — khung cũ cao ~170px cho một
 * câu trả lời một dòng, chiếm gần một phần tư chiều cao modal. */
.sc-composer { padding: 9px; gap: 8px; }
.sc-composer .sc-input { min-height: 34px; }

/* ══════════════════════════════════════════════════════════════
   POLISH 2026-08-11 (SUPPORT-UI-POLISH) — lớp mới của đợt polish
   Ngữ pháp bề mặt: PANEL TRẮNG trên nền xám là ranh giới nội dung duy nhất;
   control nền --bg chỉ đứng trong panel, không bao giờ trần trên trang.
   docs/specs/2026-08-11-support-center-ui-polish-design.md
   ══════════════════════════════════════════════════════════════ */

/* Panel — thẻ nội dung chuẩn. Mọi form/bảng ngoài modal đều bọc trong đây. */
.sc-panel {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.sc-panel + .sc-panel { margin-top: var(--sp-3); }

/* P7 — swatch màu tròn: input color native ẩn PHỦ LÊN nhãn tròn (vẫn mở picker
 * hệ thống khi bấm; không có JS nào thay được picker native mà nhẹ hơn). Nền
 * lấy từ --sw do markup set inline. */
.sc-swatch {
  position: relative;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--sw, #64748b);
  box-shadow: inset 0 0 0 1px rgba(15, 18, 32, 0.14), 0 1px 2px rgba(15, 18, 32, 0.08);
  cursor: pointer;
}
.sc-swatch input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.sc-swatch:focus-within { box-shadow: inset 0 0 0 1px rgba(15,18,32,0.14), 0 0 0 3px var(--accent-ring); }

/* P7 — switch mini (34×20): cờ bật/tắt đọc bằng HÌNH, không cần chữ "Hiện" lặp
 * trên từng hàng như checkbox cũ. */
.sc-switch { position: relative; display: inline-flex; cursor: pointer; }
.sc-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-switch-track {
  width: 34px; height: 20px;
  border-radius: var(--r-full);
  background: var(--bg-active);
  border: 1px solid var(--border-strong);
  transition: background var(--d-fast), border-color var(--d-fast);
  pointer-events: none;
}
.sc-switch-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 18, 32, 0.2);
  transition: transform var(--d-fast);
}
.sc-switch input:checked + .sc-switch-track { background: var(--accent); border-color: var(--accent); }
.sc-switch input:checked + .sc-switch-track::after { transform: translateX(14px); }
.sc-switch input:focus-visible + .sc-switch-track { box-shadow: 0 0 0 3px var(--accent-ring); }

/* P6 — nút "Ngừng" (hành động lùi): trung tính khi nghỉ, chỉ nhuốm danger khi
 * người dùng đã trỏ vào — cảnh báo đúng lúc cần, không nhuộm đỏ cả danh sách. */
/* Sắc đỏ ngay ở trạng thái NGHỈ (user 2026-08-17: bản cũ chỉ nhuốm đỏ lúc
 * hover nên đứng cạnh "Sửa" là hai nút sinh đôi). Vẫn nút viền, KHÔNG tô đặc:
 * Ngừng hoàn tác được (có "Kích hoạt lại") — tô đặc là ngôn ngữ của hành động
 * phá huỷ, dùng ở đây sẽ nặng hơn cả nút chính. */
.sc-btn.sc-btn-stop {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.sc-btn.sc-btn-stop:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
/* sc-btn-go — nửa còn lại của cặp công tắc (user chốt 2026-08-18): "Kích hoạt"/
 * "Kích hoạt lại" cùng KHUÔN viền với sc-btn-stop, đổi sắc --success. Trước
 * đây Kích hoạt dùng primary Nexa — hai chiều của một công tắc mà một bên tô
 * đặc một bên viền là lệch trọng lượng thị giác. */
.sc-btn.sc-btn-go {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}
.sc-btn.sc-btn-go:hover {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
/* Disabled (nháp chưa đủ điều kiện) về TRUNG TÍNH hẳn — cùng bài học
 * sc-btn-primary:disabled: nút nhuốm xanh mờ 50% vẫn đọc như bấm được. */
.sc-btn.sc-btn-go:disabled {
  color: var(--text-dim);
  border-color: var(--border);
  background: transparent;
  opacity: 1;
}

/* P9 — toolbar Báo cáo 2 tầng */
.sc-rtoolbar {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
}
.sc-rtoolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Mọi control trên hàng này CAO BẰNG NHAU (user chốt 2026-08-25). Không để tự
 * nhiên: nút .sc-btn-sm nệm 7px còn select .sc-input trong ngữ cảnh toolbar nệm
 * 6px, ra hai chiều cao lệch 2px — đứng cạnh nhau thì thấy ngay. Ghim một con số
 * thay vì đi chỉnh padding của từng cái, để thêm control mới sau này vẫn khớp. */
.sc-rtoolbar-row > .sc-btn,
.sc-rtoolbar-row .sc-rtoolbar-lbl > .sc-input { height: 32px; }
.sc-rtoolbar-sp { flex: 1; }
/* segmented kỳ — khuôn tk-seg của design */
.sc-rseg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.sc-rseg button {
  padding: 5px 11px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--text-12);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.sc-rseg button:hover { color: var(--text); }
.sc-rseg button.on { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-sm); }
/* control gọn trên toolbar (select nhóm theo, ô ngày tuỳ chọn) */
.sc-rtoolbar .sc-input {
  width: auto;
  min-height: 0;
  padding: 6px 10px;
  /* background-COLOR — shorthand ở đây từng xoá mất chevron của select trên
   * trang Báo cáo (đo 2026-08-20: background-image = none). */
  background-color: var(--bg);
  border-radius: var(--r-md);
  font-size: var(--text-13);
  font-weight: 600;
}
/* Ngữ cảnh gọn này nén padding nên ghi đè cả padding-right của select — phải nêu
 * lại khoảng thở cho mũi tên (28px, khớp .sc-listbar / .tkc-fsel). */
.sc-rtoolbar select.sc-input { padding-right: 28px; background-position: right 10px center; }
.sc-rtoolbar-lbl {
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-rcompare {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
/* nút Bộ lọc + badge đếm điều kiện đang áp */
.sc-rfilterbtn-badge {
  min-width: 17px; height: 17px;
  display: inline-grid; place-items: center;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: 800;
}
/* hàng điều kiện lọc (mở/đóng bằng nút) — nằm trong toolbar, ngăn bằng kẻ mảnh */
.sc-rfilters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.sc-rfilters label {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-rfilters label .sc-input { width: 100%; }

/* P9 — bảng báo cáo trong panel: khung trắng bo góc, header đậm nền nhạt */
.sc-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.sc-table { width: 100%; }
.sc-table th {
  background: var(--bg-hover);
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sc-table-num thead .sc-th-group { background: var(--bg-hover); }
.sc-table tbody tr:hover td { background: var(--bg-hover); }
.sc-table tbody tr:hover .sc-th-group { background: var(--bg-hover); }

/* P8 — lịch vắng nằm trong panel; bảng con bên trong bỏ khung riêng (panel đã
 * là khung), chỉ giữ kẻ ngang giữa các hàng */
.sc-unavcard .sc-tablewrap { border: none; box-shadow: none; border-radius: 0; margin-top: var(--sp-3); }
.sc-unavcard { margin-top: var(--sp-2); }

/* nút Bộ lọc đang mở — cùng ngôn ngữ "đang bật" với subtab/roletab */
.sc-btn.sc-btn-ghost.on {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* §8.2 — nhật ký cấu hình. Không có component mới: mượn sc-table + sc-pill +
 * Avatar; đây chỉ là mấy rule sắp xếp bên trong ô. */
.sc-audit-when { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sc-audit-actor { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sc-audit-changes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.sc-audit-changes li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-12); }
.sc-audit-changes svg { color: var(--text-dim); flex-shrink: 0; }
.sc-audit-dim { color: var(--text-dim); }
.sc-audit-reason { margin-top: 4px; font-size: var(--text-12); color: var(--text-muted); }
/* khối cảnh báo + ô lý do khi admin đổi hàng đợi mặc định */
.sc-queuechange {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.sc-formrow-sp { margin-top: var(--sp-4); }