:root {
  --c-primary: #3b82f6;
  --c-primary-dark: #2563eb;
  --c-primary-soft: rgba(59,130,246,.10);
  --c-primary-border: rgba(59,130,246,.25);
  --c-text: #1f2733;
  --c-text-soft: #4b5563;
  --c-text-mute: #8a93a3;
  --c-bg: #e6e9ee;
  --c-surface: #f4f6f8;
  --c-surface-2: #eaeef2;
  --c-border: #d8dee6;
  --c-border-strong: #c3cbd6;
  --c-success: #10b981;
  --c-danger: #ef4444;
  --c-warning: #f59e0b;
  --c-info: #3b82f6;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 28px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --sb-w: 240px;
  --fp-w: 290px;
  --hdr-h: 68px;
  --font: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

[data-theme="green"]  { --c-primary:#10b981; --c-primary-dark:#059669; --c-primary-soft:rgba(16,185,129,.10); --c-primary-border:rgba(16,185,129,.25); }
[data-theme="purple"] { --c-primary:#8b5cf6; --c-primary-dark:#7c3aed; --c-primary-soft:rgba(139,92,246,.10); --c-primary-border:rgba(139,92,246,.25); }
[data-theme="yellow"] { --c-primary:#eab308; --c-primary-dark:#ca8a04; --c-primary-soft:rgba(234,179,8,.12);  --c-primary-border:rgba(234,179,8,.30); }
[data-theme="dark"]   { --c-primary:#3b82f6; --c-primary-dark:#2563eb; }

[data-mode="dark"] {
  --c-text: #f1f5f9;
  --c-text-soft: #cbd5e1;
  --c-text-mute: #64748b;
  --c-bg: #0f172a;
  --c-surface: #1e293b;
  --c-surface-2: #0f172a;
  --c-border: #334155;
  --c-border-strong: #475569;
  --c-primary-soft: rgba(59,130,246,.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: inherit; text-decoration: none; }

/* ===== LOGIN SCREEN ===== */
.login-screen,
.app-screen { display: none; }
.login-screen:not([hidden]) { display: flex; }
.app-screen:not([hidden]) { display: grid; }
/* Củng cố: nếu có attribute hidden → LUÔN ẩn (chống mọi rule override) */
.login-screen[hidden],
.app-screen[hidden],
.auth-form[hidden],
.tab-pane[hidden] { display: none !important; }
/* Form login/register: chỉ form không có hidden mới hiện */
.auth-form { display: none; }
.auth-form:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }
.login-screen {
  min-height: 100vh;
  align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.15), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139,92,246,.15), transparent 50%),
    linear-gradient(135deg, #f5f7fb, #e0e7ff);
  padding: 24px;
}

/* ===== AUTH CARD (login mới) ===== */
.auth-card {
  width: 440px; max-width: calc(100vw - 32px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(15,23,42,.12), 0 10px 20px rgba(15,23,42,.06);
  padding: 32px 32px 28px;
}
.auth-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 22px; font-weight: 800; letter-spacing: .04em;
  color: var(--c-primary);
  margin-bottom: 22px;
}
.auth-brand i { font-size: 26px; }

.auth-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1; padding: 12px 0;
  font-size: 14px; font-weight: 600;
  color: var(--c-text-mute);
  position: relative;
  background: transparent;
  transition: color .15s;
}
.auth-tab:hover { color: var(--c-text); }
.auth-tab.active { color: var(--c-primary); font-weight: 700; }
.auth-tab.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-primary);
}

/* .auth-form display rule đã định nghĩa ở trên (display:none + :not([hidden])=flex) */
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-size: 13px; font-weight: 700;
  color: var(--c-primary);
}

.auth-input {
  position: relative;
  display: flex; align-items: center;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  transition: all .15s;
}
.auth-input:focus-within {
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.auth-input input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none; outline: none;
  font-size: 14px;
  color: var(--c-text);
}
.auth-input input::placeholder { color: var(--c-text-mute); }
.auth-eye {
  padding: 0 12px;
  font-size: 18px;
  color: var(--c-text-mute);
  background: transparent;
  cursor: pointer;
}
.auth-eye:hover { color: var(--c-primary); }

.auth-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-text-soft);
  cursor: pointer; user-select: none;
  margin: 4px 0 0;
}
.auth-remember input { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; margin: 0; }

.auth-msg {
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
}
.auth-msg.error   { background: rgba(239,68,68,.1); color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }
.auth-msg.success { background: rgba(16,185,129,.1); color: #15803d; border: 1px solid rgba(16,185,129,.2); }
.auth-msg.info    { background: rgba(59,130,246,.1); color: #1e40af; border: 1px solid rgba(59,130,246,.2); }

.auth-submit {
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  font-weight: 700; font-size: 14px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 16px rgba(59,130,246,.25);
  transition: all .15s;
  cursor: pointer; border: none;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(59,130,246,.32); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.auth-submit i { font-size: 18px; }

.login-card {
  width: 440px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(15,23,42,.12), 0 10px 20px rgba(15,23,42,.06);
  padding: 36px 32px;
  position: relative;
}
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand .lb-logo {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  display: grid; place-items: center;
  font-size: 30px;
  box-shadow: 0 12px 24px rgba(59,130,246,.35);
}
.login-brand .lb-title { font-size: 22px; font-weight: 800; color:#0f172a; }
.login-brand .lb-sub { font-size: 13px; color: #64748b; margin-top: 4px; }

.login-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 12px; padding: 4px; margin-bottom: 22px; }
.login-tabs button {
  flex: 1; padding: 10px 12px;
  border-radius: 8px; font-weight: 600;
  color: #64748b; transition: all .2s;
}
.login-tabs button.active { background: #fff; color: #0f172a; box-shadow: var(--shadow-sm); }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: #475569; }
.field .input-wrap { position: relative; }
.field .input-wrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 16px;
}
.field input, .field select {
  width: 100%;
  padding: 11px 12px 11px 40px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  transition: all .2s;
  outline: none;
}
.field input:focus, .field select:focus { border-color: #3b82f6; background:#fff; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.field.no-icon input, .field.no-icon select { padding-left: 12px; }

.login-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #475569;
  cursor: pointer; user-select: none;
  padding: 4px 0;
}
.login-remember input { width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; margin: 0; }

.login-form .btn-primary {
  margin-top: 6px; padding: 12px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; font-weight: 700; border-radius: 10px; font-size: 14px;
  box-shadow: 0 8px 16px rgba(59,130,246,.25);
  transition: transform .15s, box-shadow .15s;
}
.login-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(59,130,246,.32); }

.login-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.login-msg.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.login-msg.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.login-msg.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.login-footer { text-align: center; margin-top: 20px; font-size: 12px; color: #94a3b8; }
.login-footer strong { color: #3b82f6; }

/* ===== APP SCREEN LAYOUT ===== */
.app-screen {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr var(--fp-w);
  height: 100vh;
  overflow: hidden;
}
.app-screen.no-filter { grid-template-columns: var(--sb-w) 1fr; }
.app-screen.sb-collapsed { grid-template-columns: 64px 1fr var(--fp-w); }
.app-screen.sb-collapsed.no-filter { grid-template-columns: 64px 1fr; }

/* ===== SIDEBAR ===== */
.sidebar {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--c-border);
  height: var(--hdr-h);
}
.brand-logo {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff; display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }

/* ===== SIDEBAR COLLAPSED MODE (sb-collapsed) ===== */
/* Ẩn text/theme picker/credit khi collapsed — GIỮ footer-actions hiển thị dạng icon-only */
.sb-collapsed .brand-name,
.sb-collapsed .theme-picker,
.sb-collapsed .sf-credit,
.sb-collapsed .nav-item span,
.sb-collapsed .nav-arrow { display: none; }
.sb-collapsed .nav-item { justify-content: center; padding: 12px 8px; }
.sb-collapsed .nav-item i { font-size: 22px; }
/* Header logo căn giữa khi thu gọn */
.sb-collapsed .sidebar-header { justify-content: center; padding: 18px 8px; }
/* Sub-items: thẳng hàng với main icons (BỎ padding-left), animation slide-down */
.sb-collapsed .nav-sub { padding-left: 0 !important; }
.sb-collapsed .nav-group.open .nav-sub {
  animation: slideDown .25s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 500px; }
}
.sb-collapsed .nav-sub .nav-item { padding: 12px 8px; }
.sb-collapsed .nav-sub .nav-item i { font-size: 20px; }
/* Tooltip khi hover icon ở mode collapsed */
.sb-collapsed .nav-item { position: relative; }
.sb-collapsed .nav-item:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--c-text); color: var(--c-surface);
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  white-space: nowrap; z-index: 999; pointer-events: none;
  box-shadow: var(--shadow-md);
}
/* Footer: GIỮ visible khi collapsed — biến thành icon-only column */
.sb-collapsed .sidebar-footer { padding: 8px 6px; }
.sb-collapsed .sidebar-footer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
}
.sb-collapsed .sf-btn {
  padding: 10px 6px !important;
  gap: 0 !important;
  font-size: 0 !important; /* ẩn text, giữ icon */
}
.sb-collapsed .sf-btn i { font-size: 18px !important; }
.sb-collapsed .sf-btn:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: var(--c-text); color: var(--c-surface);
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
  white-space: nowrap; z-index: 999; pointer-events: none;
  box-shadow: var(--shadow-md);
}
.sb-collapsed .sf-btn { position: relative; }

.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
/* Ẩn menu cho tới khi JS áp xong phân quyền → tránh "lóe" tab cấm khi F5 */
.sidebar-nav { opacity: 0; transition: opacity .15s ease; }
.sidebar-nav.role-ready { opacity: 1; }
/* BOOTING: ẩn HẲN nội dung + tiêu đề + panel lọc khi đang chờ áp quyền.
   Dùng display:none (KHÔNG phải visibility) để không chừa chỗ. */
#appScreen.booting .content,
#appScreen.booting #pageTitle,
#appScreen.booting #filterPanel { display: none !important; }
/* QUAN TRỌNG: bỏ cột "filter" trong grid khi booting → hết cột xám trống bên phải khi F5 */
#appScreen.booting { grid-template-columns: var(--sb-w) 1fr !important; }
#appScreen.booting.sb-collapsed { grid-template-columns: 64px 1fr !important; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--c-text-soft);
  font-weight: 500;
  transition: all .15s;
  margin-bottom: 2px;
  position: relative;
}
.nav-item i { font-size: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-item.active {
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; background: var(--c-primary); border-radius: 0 3px 3px 0;
}
.nav-arrow { margin-left: auto; transition: transform .2s; font-size: 16px; }
.nav-group.open .nav-arrow { transform: rotate(180deg); }
.nav-sub { padding-left: 30px; display: none; }
.nav-group.open .nav-sub { display: block; }
.nav-sub-item { font-size: 13px; padding: 8px 12px; gap: 8px; }
.nav-sub-item i { font-size: 13px; }

.sidebar-footer {
  border-top: 1px solid var(--c-border);
  padding: 12px;
  background: var(--c-surface-2);
}
.theme-picker {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
  position: relative;
}
.theme-picker-label {
  font-size: 12px; font-weight: 600; color: var(--c-text-soft);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.theme-picker-close { margin-left: auto; cursor: pointer; }
.theme-dots { display: flex; gap: 8px; margin-bottom: 10px; }
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent;
  position: relative; cursor: pointer;
}
.theme-dot.active { border-color: var(--c-text); }
.theme-auto {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--c-text-soft);
}
.theme-auto input { display: none; }
.theme-auto .switch {
  width: 32px; height: 18px; background: #cbd5e1; border-radius: 10px;
  position: relative; transition: background .2s; cursor: pointer;
}
.theme-auto .switch::before {
  content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%; transition: left .2s;
}
.theme-auto input:checked + .switch { background: var(--c-primary); }
.theme-auto input:checked + .switch::before { left: 16px; }

.sidebar-footer-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sf-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--c-text-soft); transition: all .15s;
}
.sidebar-footer-actions { gap: 8px !important; }
.sf-btn:hover { background: var(--c-surface); color: var(--c-text); }
.sf-btn.danger { color: var(--c-danger); }
.sf-btn.danger:hover { background: rgba(239,68,68,.08); }
.sf-credit {
  text-align: center; font-size: 11px; color: var(--c-text-mute);
  padding-top: 8px;
}
.sf-credit strong { display: block; color: var(--c-primary); font-weight: 800; font-size: 12px; margin-top: 2px; letter-spacing: .03em; }

/* ===== TOPBAR ===== */
.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar {
  height: var(--hdr-h);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
}
.hamb {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.hamb:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
.hamb:active { transform: scale(.95); }
.sync-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 12px; padding: 2px 8px;
  background: var(--c-primary-soft); color: var(--c-primary);
  border-radius: 10px; font-size: 11px; font-weight: 600;
}
.sync-badge[hidden] { display: none !important; }
.topbar-title { min-width: 0; flex-shrink: 1; }
.topbar-title h1 {
  font-size: clamp(14px, 1.6vw, 20px); margin: 0; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-subtitle {
  font-size: clamp(10px, 1vw, 12px); color: var(--c-text-mute); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-search {
  flex: 1; max-width: 460px;
  position: relative; margin-left: 24px;
}
.topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); }
.topbar-search input {
  width: 100%; padding: 10px 14px 10px 40px;
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: 10px;
  outline: none;
  color: var(--c-text);
}
.topbar-search input:focus { border-color: var(--c-primary); background: var(--c-surface); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--c-text-soft);
  position: relative;
  transition: all .15s;
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.topbar-color-wrap { position: relative; }
.topbar-color-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px;
  width: 220px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.tcp-title { font-size: 12px; font-weight: 700; color: var(--c-text-soft); margin-bottom: 8px; }
.tcp-dots { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tcp-dots .theme-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tcp-dots .theme-dot.active { border-color: var(--c-text); transform: scale(1.1); }
.tcp-auto { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--c-text-soft); }
.tcp-auto input { display: none; }
.tcp-auto .switch { width: 32px; height: 18px; background: #cbd5e1; border-radius: 10px; position: relative; transition: background .2s; cursor: pointer; }
.tcp-auto .switch::before { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .2s; }
.tcp-auto input:checked + .switch { background: var(--c-primary); }
.tcp-auto input:checked + .switch::before { left: 16px; }

.icon-btn .badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--c-danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 5px;
  border-radius: 10px; min-width: 16px; line-height: 1;
}
.user-menu-wrap { position: relative; margin-left: 4px; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 50px;
  cursor: pointer;
  transition: all .15s;
}
.user-chip:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.user-chip-arrow { font-size: 16px; color: var(--c-text-mute); transition: transform .2s; flex-shrink: 0; }
.user-chip[aria-expanded="true"] .user-chip-arrow { transform: rotate(180deg); }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; display: grid; place-items: center; font-weight: 700;
  flex-shrink: 0;
}
.user-info { text-align: left; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--c-text-mute); white-space: nowrap; }

/* User dropdown menu */
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 80;
  display: flex; flex-direction: column; gap: 2px;
  animation: slideDownMenu .16s ease-out;
}
.user-dropdown[hidden] { display: none !important; }
@keyframes slideDownMenu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.user-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--c-text-soft);
  text-align: left; transition: all .12s;
}
.user-dd-item i { font-size: 17px; flex-shrink: 0; }
.user-dd-item:hover { background: var(--c-surface-2); color: var(--c-text); }
.user-dd-item.danger { color: var(--c-danger); }
.user-dd-item.danger:hover { background: rgba(239,68,68,.08); }

/* ===== CONTENT ===== */
.content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 22px 20px;
  scroll-behavior: smooth;
}
.table-wrap, .goi-table-wrap, .llv-wrap { max-height: calc(100vh - 220px) !important; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* DASH TOOLBAR */
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.date-tabs { display: flex; gap: 4px; background: var(--c-surface); padding: 4px; border-radius: 10px; border: 1px solid var(--c-border); }
.date-tab {
  padding: 8px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--c-text-soft);
}
.date-tab.active { background: var(--c-primary); color: #fff; }
.date-tab:not(.active):hover { background: var(--c-surface-2); }

.date-mode { display: flex; gap: 14px; font-size: 13px; color: var(--c-text-soft); }
.date-mode label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.date-mode input { accent-color: var(--c-primary); }

/* KPI CARDS */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-bottom: 18px;
}
.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; gap: 14px; align-items: center;
  transition: all .2s;
  min-height: 90px;
}
.kpi-body { flex: 1; min-width: 0; text-align: left; }
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.kpi-label { font-size: 12px; color: var(--c-text-mute); font-weight: 500; }
.kpi-value { font-size: 22px; font-weight: 800; margin: 2px 0 4px; letter-spacing: -.02em; }
.kpi-trend { font-size: 11px; display: flex; align-items: center; gap: 3px; }
.kpi-trend.up { color: var(--c-success); }
.kpi-trend.down { color: var(--c-danger); }

/* CHART GRID */
.chart-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 14px;
}
.chart-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px;
  min-width: 0;
  transition: all .2s;
}
.chart-card:hover { box-shadow: var(--shadow-md); }
.chart-card.span-4 { grid-column: span 4; }
.chart-card.span-6 { grid-column: span 6; }
.chart-card.span-8 { grid-column: span 8; }
.chart-card.span-12 { grid-column: span 12; }
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px;
  min-height: 28px;
}
.chart-title { font-weight: 700; font-size: 14px; text-align: left; }
.chart-sub { font-size: 12px; color: var(--c-text-mute); margin-left: auto; }
.chart-head .tab-strip { margin-left: auto; }
.chart-body { height: 280px; width: 100%; }

/* ===== Top tiếp nhận / kỹ thuật: danh sách (tên trái, tiền phải) — tự giãn cao ===== */
#chartTopTiepNhan, #chartTopKyThuat { height: auto; min-height: 280px; }
.toplist { display: flex; flex-direction: column; }
.tl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dashed var(--c-border);
}
.toplist-dense .tl-row { padding: 5px 4px; }   /* list dài → gọn lại, không dài sọc */
.tl-row:last-child { border-bottom: 0; }
.tl-rank {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px; font-size: 11px; font-weight: 700;
  background: var(--c-primary-soft); color: var(--c-primary);
}
.tl-name {
  flex: 1; min-width: 0; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 500;
}
.tl-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tl-count {
  font-size: 12px; font-weight: 600; color: var(--c-text-soft);
  background: var(--c-surface-2); padding: 1px 8px; border-radius: 999px; min-width: 30px; text-align: center;
}
.tl-money { font-size: 13px; font-weight: 700; color: var(--c-primary); text-align: right; min-width: 84px; }
.tl-empty { padding: 24px 0; text-align: center; color: var(--c-text-mute); font-size: 13px; }
.tl-toggle {
  margin-top: 8px; width: 100%;
  padding: 7px; border: 1px dashed var(--c-border); border-radius: 8px;
  background: transparent; color: var(--c-primary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .12s;
}
.tl-toggle:hover { background: var(--c-primary-soft); }

.tab-strip { display: inline-flex; gap: 2px; background: var(--c-surface-2); padding: 3px; border-radius: 9px; flex-wrap: wrap; }
.tab-strip button {
  padding: 6px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--c-text-soft); white-space: nowrap; transition: all .12s;
}
.tab-strip button:hover:not(.active) { color: var(--c-text); background: var(--c-surface); }
.tab-strip button.active { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-sm); }
/* Cụm điều khiển biểu đồ nằm CÙNG HÀNG với tiêu đề (Tổng quan) */
.chart-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chart-head .chart-controls { margin-left: auto; }
.chart-controls .tab-strip { margin-left: 0; }
/* Biểu đồ hàng trên (span-4): cho thân biểu đồ lấp đầy chiều cao card — hết khoảng trống dưới */
.chart-card.span-4 { display: flex; flex-direction: column; }
.chart-card.span-4 .chart-head { flex: 0 0 auto; }
.chart-card.span-4 .chart-body, .chart-card.span-4 .empty-state { flex: 1 1 auto; min-height: 280px; }

/* ===== FILTER PANEL ===== */
.filter-panel {
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.filter-head {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--c-border);
  font-weight: 700;
  height: var(--hdr-h);
  font-size: 15px;
}
.filter-head i { color: var(--c-primary); font-size: 18px; }
.filter-body { padding: 16px 18px; flex: 1; }
.filter-grp { margin-bottom: 14px; }
.filter-grp label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--c-text-soft); margin-bottom: 6px;
}
.filter-grp select, .filter-grp input {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: var(--c-surface-2);
  color: var(--c-text);
  outline: none;
}
.filter-grp select:focus, .filter-grp input:focus { border-color: var(--c-primary); background: var(--c-surface); }

.filter-actions { display: flex; gap: 8px; margin-top: 18px; }
.btn-primary {
  flex: 1; background: var(--c-primary); color: #fff;
  padding: 10px 14px; border-radius: 9px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-ghost {
  padding: 10px 14px; border-radius: 9px; font-weight: 600; font-size: 13px;
  border: 1px solid var(--c-border); color: var(--c-text-soft);
  background: var(--c-surface);   /* nút phụ "chìm" đồng bộ với bộ lọc (.tt-select) (#5) */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }

.filter-export { border-top: 1px solid var(--c-border); padding: 16px 18px; }
.filter-export-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--c-text-soft); }
.filter-export-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ex-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border: 1px solid var(--c-border);
  border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--c-text-soft);
  transition: all .15s; background: var(--c-surface);
}
.ex-btn:hover { background: var(--c-surface-2); }

/* ===== TABLE ===== */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 10px; flex-wrap: wrap;
}
.tt-left, .tt-right { display: flex; align-items: center; gap: 10px; }
.search-box { position: relative; width: 280px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); }
.search-box input {
  width: 100%; padding: 9px 12px 9px 38px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: var(--c-surface);
  outline: none;
}
.tt-select {
  padding: 9px 12px; border: 1px solid var(--c-border);
  border-radius: 9px; background: var(--c-surface);
  font-size: 13px; outline: none; color: var(--c-text);
}
.row-count { font-size: 13px; color: var(--c-text-soft); }
.row-count strong { color: var(--c-primary); font-weight: 700; }

.table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: auto;
  max-height: calc(100vh - 280px);
}
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface-2);
  padding: 11px 14px;
  text-align: center;
  font-weight: 700;
  color: var(--c-text-soft);
  border-bottom: 1px solid rgba(15,23,42,.42);
  border-right: 1px solid rgba(15,23,42,.18);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.data-table thead th:hover { background: var(--c-surface); }
.data-table thead th.sorted { color: var(--c-primary); }
.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15,23,42,.42);
  border-right: 1px solid rgba(15,23,42,.24);
  color: var(--c-text);
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table tbody td:last-child { border-right: none; }
/* Nền tối: viền sáng (viền đen không thấy trên nền tối) */
[data-mode="dark"] .data-table tbody td { border-bottom-color: rgba(255,255,255,.22); border-right-color: rgba(255,255,255,.12); }
[data-mode="dark"] .data-table thead th { border-bottom-color: rgba(255,255,255,.22); border-right-color: rgba(255,255,255,.10); }
.data-table tbody tr:hover { background: var(--c-primary-soft); }
.status-pill {
  display: inline-block; padding: 3px 9px;
  border-radius: 50px; font-size: 11px; font-weight: 700;
  letter-spacing: .2px;
}
.status-pill.dalam   { background: rgba(16,185,129,.14); color: #047857; }
.status-pill.henlich { background: rgba(245,158,11,.18); color: #b45309; }
.status-pill.gay     { background: rgba(239,68,68,.14);  color: #b91c1c; }
/* DARK mode: nâng saturation chữ + nền cho tương phản tốt */
[data-mode="dark"] .status-pill.dalam   { background: rgba(16,185,129,.22); color: #6ee7b7; }
[data-mode="dark"] .status-pill.henlich { background: rgba(245,158,11,.25); color: #fcd34d; }
[data-mode="dark"] .status-pill.gay     { background: rgba(239,68,68,.22);  color: #fca5a5; }
/* v32 (#2,#3): alias luc/vang/do (dùng chung với mau_tinh_trang) + tô OPTION trong droplist trạng thái */
.status-pill.luc  { background: rgba(16,185,129,.14); color: #047857; }
.status-pill.vang { background: rgba(245,158,11,.18); color: #b45309; }
.status-pill.do   { background: rgba(239,68,68,.14);  color: #b91c1c; }
[data-mode="dark"] .status-pill.luc  { background: rgba(16,185,129,.22); color: #6ee7b7; }
[data-mode="dark"] .status-pill.vang { background: rgba(245,158,11,.25); color: #fcd34d; }
[data-mode="dark"] .status-pill.do   { background: rgba(239,68,68,.22);  color: #fca5a5; }
/* v210 (Hòa 10/08): pill XANH DƯƠNG — cột "Trạng Thái Nhập Hàng" của tab Khách Cửa Hàng (đậm y cột Tình trạng) */
.status-pill.nhaphang { background: rgba(59,130,246,.14); color: #1d4ed8; }
[data-mode="dark"] .status-pill.nhaphang { background: rgba(59,130,246,.24); color: #93c5fd; }
/* Tô nhẹ từng OPTION trong danh sách xổ (Chrome/Edge Windows hỗ trợ nền option) */
select.dt-inline-select option.luc,  select.dt-inline-select option.dalam   { background: #d8f0dd; color: #047857; }
select.dt-inline-select option.vang, select.dt-inline-select option.henlich { background: #fdf3cf; color: #b45309; }
select.dt-inline-select option.do,   select.dt-inline-select option.gay     { background: #fbe0e0; color: #b91c1c; }

/* ===== MÀU DÒNG THEO TÌNH TRẠNG (tông thật nhạt, dịu mắt) =====
   xanh = đã làm · vàng kem = hẹn lịch · đỏ nhạt = gãy · hồng = hôm nay đến hẹn */
.data-table tbody tr.tn-row-dalam   td { background: #88e29a; }   /* dịu bớt cho đỡ chói (#A4) */
.data-table tbody tr.tn-row-henlich td { background: #ffe97a; }
.data-table tbody tr.tn-row-gay     td { background: #ff8a8a; }
.data-table tbody tr.tn-row-homnay  td { background: #E3C6C8; }   /* v51.2 (Hòa): HÔM NAY đến hẹn = HỒNG XÁM #E3C6C8 (bỏ tím) */
/* Bớt chói: viền ô mảnh ngăn cách ô trên các dòng có màu (#A4) */
.data-table tbody tr.tn-row-dalam td, .data-table tbody tr.tn-row-henlich td,
.data-table tbody tr.tn-row-gay td, .data-table tbody tr.tn-row-homnay td { border-right: 1px solid rgba(0,0,0,.06); }
[data-mode="light"] .data-table tbody tr.tn-row-dalam td,
[data-mode="light"] .data-table tbody tr.tn-row-henlich td,
[data-mode="light"] .data-table tbody tr.tn-row-gay td,
[data-mode="light"] .data-table tbody tr.tn-row-homnay td { color: #14210f; }
/* Thanh màu bên trái (cột STT) — ĐỒNG BỘ mọi trạng thái, không chỉ "hôm nay" */
/* Thanh viền trái CÙNG MÀU với nền dòng (đậm hơn 1 bậc): xanh→xanh, vàng→vàng, đỏ→đỏ, hồng→hồng */
.data-table tbody tr.tn-row-dalam   td:first-child { box-shadow: inset 4px 0 0 #15803d; }
.data-table tbody tr.tn-row-henlich td:first-child { box-shadow: inset 4px 0 0 #b8860b; }
.data-table tbody tr.tn-row-gay     td:first-child { box-shadow: inset 4px 0 0 #c0392b; }
.data-table tbody tr.tn-row-homnay  td:first-child { box-shadow: inset 4px 0 0 #b0777c; }   /* v51.2: thanh hồng xám đậm (cùng tông #E3C6C8) */
.data-table tbody tr.tn-row-dalam:hover   td { background: #76da89; }
.data-table tbody tr.tn-row-henlich:hover td { background: #ffe45c; }
.data-table tbody tr.tn-row-gay:hover     td { background: #ff7373; }
.data-table tbody tr.tn-row-homnay:hover  td { background: #d9b3b6; }   /* v51.2: hồng xám đậm hơn chút khi hover */
[data-mode="dark"] .data-table tbody tr.tn-row-dalam   td { background: rgba(16,185,129,.28); }
[data-mode="dark"] .data-table tbody tr.tn-row-henlich td { background: rgba(245,158,11,.28); }
[data-mode="dark"] .data-table tbody tr.tn-row-gay     td { background: rgba(239,68,68,.30); }
[data-mode="dark"] .data-table tbody tr.tn-row-homnay  td { background: rgba(176,119,124,.30); }   /* v51.2: hồng xám tối */
[data-mode="dark"] .data-table tbody tr.tn-row-dalam:hover   td { background: rgba(16,185,129,.36); }
[data-mode="dark"] .data-table tbody tr.tn-row-henlich:hover td { background: rgba(245,158,11,.36); }
[data-mode="dark"] .data-table tbody tr.tn-row-gay:hover     td { background: rgba(239,68,68,.38); }
[data-mode="dark"] .data-table tbody tr.tn-row-homnay:hover  td { background: rgba(176,119,124,.44); }   /* v51.2 */

/* ===== TAB KHÁCH CẦN GỌI: làm DỊU nền dòng (đỡ chói, chữ luôn đọc rõ) — CHỈ trong bảng #goi-table (#1.5) ===== */
[data-mode="light"] #goi-table tbody tr.tn-row-gay     td { background: #fbe0e0; }
[data-mode="light"] #goi-table tbody tr.tn-row-gay:hover td { background: #f7cccc; }
[data-mode="light"] #goi-table tbody tr.tn-row-henlich td { background: #fdf3cf; }
[data-mode="light"] #goi-table tbody tr.tn-row-henlich:hover td { background: #fceaa8; }
[data-mode="light"] #goi-table tbody tr.tn-row-dalam   td { background: #d8f0dd; }
[data-mode="light"] #goi-table tbody tr.tn-row-dalam:hover   td { background: #c4e8cc; }
[data-mode="light"] #goi-table tbody tr.tn-row-homnay  td { background: #E3C6C8; }   /* v51.2: đồng bộ hồng xám #E3C6C8 với KTN/KCH */
/* chữ tối trên nền nhạt → luôn rõ; viền trái đậm vẫn giữ từ class chung */
[data-mode="light"] #goi-table tbody tr.tn-row-gay td,
[data-mode="light"] #goi-table tbody tr.tn-row-henlich td,
[data-mode="light"] #goi-table tbody tr.tn-row-dalam td,
[data-mode="light"] #goi-table tbody tr.tn-row-homnay td { color: #1a1a1a; }
[data-mode="light"] #goi-table tbody tr.tn-row-gay .goi-phone,
[data-mode="light"] #goi-table tbody tr.tn-row-gay .goi-name { color: #1a1a1a; }

/* Nút "Bỏ lọc" trong panel lọc cột */
#loc-panel .nut.do { color: var(--c-danger); border-color: var(--c-danger); background: transparent; }
#loc-panel .nut.do:hover { background: rgba(239,68,68,.10); }

/* Ô lọc "Từ ngày – Đến ngày" có NHÃN rõ ràng (Lịch sử / Nhật ký cuộc gọi) */
.ls-date-field { display: inline-flex; flex-direction: column; gap: 2px; }
.ls-date-field .ls-date-lbl { font-size: 11px; font-weight: 600; color: var(--c-text-soft); padding-left: 2px; }
.ls-date-field .ls-date-lbl i { color: var(--c-primary); margin-right: 2px; }
/* Ô lọc ngày: icon lịch nằm TRONG ô làm label, bỏ tiêu đề trên (#A3) */
.ls-date-ico { position: relative; display: inline-flex; align-items: center; }
.ls-date-ico > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-text-mute); font-size: 13px; pointer-events: none; z-index: 1; }
.ls-date-ico input { padding-left: 32px !important; min-height: 38px; box-sizing: border-box; }
/* Khối chọn chế độ Import: Bổ sung / Đè (#B2) */
.import-mode { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 8px; }
.import-mode label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--c-text); }
.import-mode input[type=radio] { accent-color: var(--c-primary); width: 16px; height: 16px; flex: 0 0 auto; }
/* Phân quyền cột — "Chi tiết cột" trong modal vai trò (Round 5) */
.pq-allbtns { float: right; display: inline-flex; gap: 6px; }
.pq-ct-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--c-primary); cursor: pointer; margin-right: 6px; }
.pq-col-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.pq-col-bar small { color: var(--c-text-mute); font-size: 11.5px; }
.pq-col-bar span { display: inline-flex; gap: 6px; flex-shrink: 0; }

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px;
}
.pagination button {
  min-width: 32px; height: 32px; padding: 0 10px;
  border-radius: 7px; font-weight: 600; font-size: 12px;
  color: var(--c-text-soft);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.pagination button:hover:not(:disabled) { background: var(--c-surface-2); }
.pagination button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* EMPTY STATE */
.empty-state {
  text-align: center; padding: 80px 20px;
  color: var(--c-text-mute);
}
.empty-state i { font-size: 64px; opacity: .3; }
.empty-state h3 { margin: 16px 0 8px; color: var(--c-text); font-weight: 700; }
.empty-state p { font-size: 13px; }

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 100;
  display: grid; place-items: center;
  backdrop-filter: blur(2px);
}
/* Force ẩn khi có thuộc tính hidden (vì display:grid/flex ghi đè browser default) */
.modal-overlay[hidden],
.loading-overlay[hidden],
.filter-panel[hidden],
.goi-loadmore-bar[hidden] { display: none !important; }
.modal {
  background: var(--c-surface);
  border-radius: 16px;
  width: 420px; max-width: min(600px, calc(100vw - 32px));
  max-height: 88vh;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Thân modal cuộn được khi nhiều trường — head/foot cố định */
.modal > .modal-body { overflow-y: auto; flex: 1 1 auto; }
.modal > .modal-head, .modal > .modal-foot { flex: 0 0 auto; }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-x {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; font-size: 22px;
  color: var(--c-text-soft);
}
.modal-x:hover { background: var(--c-surface-2); }
.modal-body { padding: 18px 20px; }
.modal-body label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 5px; color: var(--c-text-soft); }
.modal-body label:first-child { margin-top: 0; }
.modal-body input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: var(--c-surface-2);
  outline: none;
  color: var(--c-text);
}
.modal-body input:focus { border-color: var(--c-primary); background: var(--c-surface); }
.modal-msg { margin-top: 10px; font-size: 12px; min-height: 16px; }
.modal-msg.error { color: var(--c-danger); }
.modal-msg.success { color: var(--c-success); }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--c-border);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ===== TOAST ===== */
.toast-wrap {
  position: fixed; top: 24px; right: 24px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  display: flex; align-items: center; gap: 10px;
  animation: slideIn .25s ease-out;
}
.toast.success { border-left-color: var(--c-success); }
.toast.error { border-left-color: var(--c-danger); }
.toast.info { border-left-color: var(--c-info); }
.toast i { font-size: 18px; }
.toast.success i { color: var(--c-success); }
.toast.error i { color: var(--c-danger); }
.toast.info i { color: var(--c-info); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== LOADING ===== */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.25);
  z-index: 300;
  display: grid; place-items: center;
}
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.loading-text { color: #fff; margin-top: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.4); position: absolute; bottom: 40%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tab footer — tổng count dưới-trái, pagination giữa */
.tab-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 4px 4px;
  gap: 12px;
}
.tab-footer .pagination { margin: 0; flex: 1; justify-content: center; }
.tab-footer .row-count { font-size: 13px; color: var(--c-text-soft); white-space: nowrap; }
.tab-footer .row-count strong { color: var(--c-primary); font-weight: 700; }
/* Footer tab khách cần gọi: 1 cụm gọn góc trái dưới — "Tổng 34/100 khách" */
/* Footer tab khách cần gọi: 1 hàng — [Tổng X/Y] trái, [Xem thêm] CHÍNH GIỮA.
   Dùng grid 3 cột 1fr/auto/1fr → nút luôn ở giữa, pill bên trái vẫn gọn. */
.goi-footer-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px;
  margin-top: 10px; padding: 6px 4px;
}
.goi-footer-row .goi-count {
  justify-self: start;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--c-primary-soft, rgba(59,130,246,.10));
  font-weight: 600; font-size: 13px; color: var(--c-text-soft);
  white-space: nowrap;
}
.goi-footer-row .goi-count strong { color: var(--c-primary); font-weight: 700; }
.goi-footer-row .goi-footer-spacer { /* cột phải để cân, giữ nút ở giữa */ }
/* Nút trong hàng footer: bỏ viền trên/căn giữa cũ, gọn lại */
.goi-footer-row .goi-loadmore-bar {
  justify-self: center; margin: 0; padding: 0; border-top: 0;
}
.goi-footer-row .goi-loadmore-bar button { padding: 8px 22px; }
/* Mobile: xếp dọc cho gọn */
@media (max-width: 640px) {
  .goi-footer-row { grid-template-columns: 1fr; }
  .goi-footer-row .goi-count { justify-self: center; }
  .goi-footer-row .goi-footer-spacer { display: none; }
}

/* Goi load-more bar — cố định dưới bảng */
.goi-loadmore-bar {
  display: flex; justify-content: center;
  padding: 12px 0 6px;
  border-top: 1px solid var(--c-border);
  margin-top: 8px;
}
.goi-loadmore-bar button { padding: 10px 24px; font-weight: 600; border-radius: 50px; }

/* Filter close (xóa lọc nhanh) */
.filter-close-btn {
  margin-left: auto;
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--c-text-mute);
  background: var(--c-surface-2);
  transition: all .15s;
  cursor: pointer;
}
.filter-close-btn:hover { background: var(--c-danger); color: #fff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .chart-card.span-4 { grid-column: span 6; }
  .chart-card.span-8 { grid-column: span 12; }
  .app-screen { grid-template-columns: var(--sb-w) 1fr; }
  .filter-panel { display: none !important; }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-card.span-4, .chart-card.span-6, .chart-card.span-8 { grid-column: span 12; }
  /* GIỮ sidebar đầy đủ 240px ở dải 641-900px (chỉ collapse khi user CHỦ ĐỘNG bấm hamb) */
  .app-screen, .app-screen.no-filter { grid-template-columns: var(--sb-w) 1fr; }
  .app-screen.sb-collapsed, .app-screen.sb-collapsed.no-filter { grid-template-columns: 64px 1fr; }
  .topbar-search { display: none; }
  .user-info { display: none; }
  .content { padding: 12px 14px 16px; }
  .form-grid-2, .tk-grid-2, .tk-grid-3 { grid-template-columns: 1fr !important; }
  .tk-col-span-2, .tk-col-span-3 { grid-column: span 1 !important; }
}

/* ===== MOBILE (iOS/Android) ===== */
@media (max-width: 640px) {
  :root { --hdr-h: 56px; --sb-w: 0px; }
  .app-screen, .app-screen.no-filter, .app-screen.sb-collapsed { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 260px !important; z-index: 90;
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar .brand-name, .sidebar .sf-credit, .sidebar .sidebar-footer-actions, .sidebar .nav-item span, .sidebar .nav-arrow { display: inline !important; }
  .sidebar .nav-item { justify-content: flex-start !important; }
  .topbar { height: var(--hdr-h); padding: 0 12px; gap: 8px; }
  .topbar-title h1 { font-size: 16px; }
  .topbar-subtitle, .topbar-search, .user-info { display: none; }
  .icon-btn { width: 32px; height: 32px; font-size: 16px; }
  .user-avatar { width: 32px; height: 32px; font-size: 13px; }
  .user-chip { padding: 2px 4px; }
  .content { padding: 12px 10px; }
  .table-toolbar { gap: 6px; flex-wrap: wrap; }
  .table-toolbar .tt-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { padding: 10px; min-height: 70px; }
  .kpi-value { font-size: 16px; }
  .chart-card { padding: 10px; }
  .chart-body { height: 220px; }
  .modal-lg, .modal-md { width: calc(100vw - 16px) !important; }
  .goi-tabs { flex-wrap: wrap; }
  .goi-tab { font-size: 11px; padding: 7px 10px; }
  .data-table thead th, .data-table tbody td { padding: 8px 10px; font-size: 12px; }
  .tab-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .tab-footer .row-count { text-align: center; }
  /* Backdrop khi sidebar mở mobile */
  .sidebar.mobile-open::after {
    content: ''; position: fixed; inset: 0; left: 260px;
    background: rgba(15,23,42,.4); z-index: -1;
  }
}

/* ===== PHÂN QUYỀN ===== */
.pq-subtabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 16px;
}
.pq-subtab {
  padding: 11px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--c-text-mute);
  background: transparent;
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.pq-subtab:hover { color: var(--c-text); }
.pq-subtab.active { color: var(--c-primary); font-weight: 700; }
.pq-subtab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-primary);
}
.pq-sub-pane { display: none; }
.pq-sub-pane.active { display: block; }   /* chỉ pane đang active mới hiện — sửa lỗi Vai trò/Phụ lục cùng trang (#8) */
.pq-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.pq-wrap { padding: 4px 0; }
.pq-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
/* Nút trong toolbar KHÔNG kéo giãn full width (ghi đè .btn-primary{flex:1}) */
.pq-toolbar .btn-primary, .pq-toolbar .btn-ghost,
.qkt-bar .btn-primary, .qkt-bar .btn-ghost, .qkt-bar .btn-danger,
.table-toolbar .btn-primary, .table-toolbar .btn-ghost, .table-toolbar .btn-danger,
.tt-right .btn-primary, .tt-right .btn-ghost, .tt-left .btn-primary, .tt-left .btn-ghost,
.ls-toolbar .btn-primary, .ls-toolbar .btn-ghost, .ls-toolbar .btn-danger,
.goi-actions .btn-primary, .goi-actions .btn-ghost { flex: 0 0 auto; }
/* Đồng bộ chiều cao mọi control trong thanh công cụ (nút/select/lọc cao bằng nhau) (#A3) */
.table-toolbar .btn-primary, .table-toolbar .btn-ghost, .table-toolbar .btn-danger, .table-toolbar .tt-select, .table-toolbar .ms-toggle,
.qkt-bar .btn-primary, .qkt-bar .btn-ghost, .qkt-bar .btn-danger, .qkt-bar .qkt-date,
.ls-toolbar .btn-primary, .ls-toolbar .btn-ghost, .ls-toolbar .btn-danger, .ls-toolbar .tt-select, .ls-toolbar .ms-toggle,
.pq-toolbar .btn-primary, .pq-toolbar .btn-ghost {
  min-height: 38px; box-sizing: border-box; align-self: center;
}
/* Nút nhỏ trong toolbar không bị lùn hơn nút thường (đồng bộ chiều cao) */
.table-toolbar .btn-sm, .ls-toolbar .btn-sm, .pq-toolbar .btn-sm { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 38px; }
.pq-info { display: flex; align-items: center; gap: 12px; }
.pq-info i { color: var(--c-primary); font-size: 20px; }
.pq-info span { font-weight: 600; }
.pq-qtht-count {
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--c-text-soft);
  padding: 4px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 50px;
}
.pq-qtht-count strong { color: var(--c-primary); }

.pq-list { display: flex; flex-direction: column; gap: 10px; }
.pq-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  transition: all .15s;
}
.pq-card:hover { box-shadow: var(--shadow-sm); }
.pq-card.system {
  background: linear-gradient(135deg, rgba(59,130,246,.05), rgba(99,102,241,.03));
  border-color: var(--c-primary-border);
}
.pq-card-head {
  display: flex; align-items: center; gap: 14px;
}
.pq-badge {
  background: var(--c-primary); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 50px;
  letter-spacing: .04em;
}
.pq-card.system .pq-badge { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.pq-name { font-weight: 700; font-size: 15px; }
.pq-mkh {
  font-size: 12px; color: var(--c-text-soft);
  padding: 4px 10px; background: var(--c-surface-2);
  border-radius: 6px; font-family: 'Roboto Mono', monospace;
}
.pq-mkh.empty { color: var(--c-text-mute); font-style: italic; }
.pq-status { font-size: 11px; padding: 2px 8px; border-radius: 50px; font-weight: 600; }
.pq-status.hoat_dong { background: rgba(16,185,129,.12); color: #059669; }
.pq-status.vo_hieu { background: rgba(239,68,68,.12); color: #dc2626; }
.pq-actions { margin-left: auto; display: flex; gap: 6px; }
.pq-actions button {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; font-size: 15px;
  color: var(--c-text-soft);
  transition: all .15s;
}
.pq-actions button:hover { background: var(--c-surface-2); color: var(--c-text); }
.pq-actions button.danger:hover { background: rgba(239,68,68,.1); color: var(--c-danger); }
.pq-lock { color: var(--c-text-mute); font-size: 18px; padding: 0 8px; }
.pq-perms {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.pq-perm-pill {
  font-size: 11px; padding: 3px 8px;
  background: var(--c-surface-2);
  border-radius: 50px; color: var(--c-text-soft);
}
.pq-perm-pill.full { background: rgba(16,185,129,.12); color: #059669; }
.pq-perm-pill.partial { background: rgba(245,158,11,.12); color: #d97706; }
.pq-perm-pill.none { background: rgba(239,68,68,.08); color: #b91c1c; }

.modal-sm { width: 380px; }
.modal-md { width: 560px; }
.modal-lg { width: 680px; max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.modal-lg .modal-body { overflow-y: auto; padding: 14px 16px; }
.modal-lg .modal-head { padding: 12px 16px; }
.modal-lg .modal-head h3 { font-size: 15px; }
.modal-lg .modal-foot { padding: 10px 16px; }
.modal-xl { width: 980px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.modal-xl .modal-body { overflow-y: auto; }
.modal-sm, .modal-md, .modal-lg, .modal-xl { max-width: calc(100vw - 32px); }

.btn-danger {
  background: var(--c-danger); color: #fff;
  padding: 10px 14px; border-radius: 9px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s;
}
.btn-danger:hover { background: #b91c1c; }

/* ===== FORM CHUNG (dùng trong Modal) ===== */
.form-stack { display: flex; flex-direction: column; gap: 10px; }
.form-stack label { font-size: 12px; font-weight: 600; color: var(--c-text-soft); margin-top: 6px; }
.form-stack label:first-child { margin-top: 0; }
.form-input, .form-stack input, .form-stack select, .form-stack textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); outline: none;
  font-family: inherit; font-size: 14px;
}
.form-input:focus, .form-stack input:focus, .form-stack select:focus { border-color: var(--c-primary); background: var(--c-surface); }
/* ===== MÃ KÍCH HOẠT DROPDOWN (inline panel dưới nút) ===== */
.mkh-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 420px; max-width: 560px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
}
.mkh-dropdown[hidden] { display: none !important; }
.mkh-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--c-surface-2);
  border-radius: 8px;
}
.mkh-row-name { min-width: 110px; font-weight: 600; font-size: 12.5px; color: var(--c-text); }
.mkh-row-input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-surface); color: var(--c-text);
  font-family: Monaco, monospace; font-size: 12px; letter-spacing: 1.5px;
  outline: none;
}
.mkh-row .icon-btn { width: 30px; height: 30px; }
.mkh-empty { text-align: center; padding: 16px; color: var(--c-text-mute); font-size: 13px; }

/* ===== AUTO-GROW TEXTAREA (dùng chung mọi modal/input của CRM) =====
   - rows="1" + class="auto-grow" → trông giống <input> nhưng khi gõ xuống dòng nó tự giãn cao
   - resize: none + overflow: hidden để JS handler kiểm soát chiều cao
*/
textarea.form-input, textarea.auto-grow,
.form-stack textarea, .form-block textarea {
  resize: none;
  overflow: hidden;
  min-height: 40px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
.form-grid-2 .col-span-2 { grid-column: span 2; }
.form-block label { display: block; font-size: 12px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 5px; }
.form-block .req { color: var(--c-danger); }
.form-block input, .form-block select, .form-block textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); outline: none;
  font-size: 14px;
}
.form-block input:focus, .form-block select:focus, .form-block textarea:focus { border-color: var(--c-primary); background: var(--c-surface); }
.form-block input:disabled, .form-block select:disabled {
  color: var(--c-text-mute); cursor: not-allowed; background: var(--c-surface-2);
}
.form-block small { display: block; font-size: 11px; color: var(--c-text-mute); margin-top: 4px; }

/* Choice card (chọn Tại tiệm / Tại nhà) */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.choice-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px;
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
  transition: all .15s;
  cursor: pointer;
}
.choice-card i { font-size: 36px; color: var(--c-primary); }
.choice-card:hover { border-color: var(--c-primary); background: var(--c-primary-soft); transform: translateY(-2px); }
.cc-title { font-size: 15px; }
.cc-sub { font-size: 11px; color: var(--c-text-mute); font-weight: 500; }

/* Form block legacy alias (PhanQuyen modal) */
.pq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.field-block label { display: block; font-size: 12px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 5px; }
.field-block .req { color: var(--c-danger); }
.field-block input, .field-block select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); outline: none;
}
.field-block input:focus, .field-block select:focus { border-color: var(--c-primary); background: var(--c-surface); }
.field-block input:disabled { color: var(--c-text-mute); cursor: not-allowed; }
.field-block small { display: block; font-size: 11px; color: var(--c-text-mute); margin-top: 4px; }

/* ===== MODAL THÊM KHÁCH — FORM ĐẸP, NHẬP NHANH ===== */
.tk-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-md);
  margin-bottom: 10px;
  font-weight: 700;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.tk-banner.tk-tiem { background: rgba(59,130,246,.10); color: #1e40af; }
.tk-banner.tk-nha  { background: rgba(16,185,129,.10); color: #047857; }
.tk-banner i { font-size: 18px; }
.tk-banner span { flex: 1; letter-spacing: .04em; font-size: 13px; }
.tk-banner small { font-size: 11px; opacity: .8; font-weight: 500; }

.tk-group {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 12px 10px;
  margin-bottom: 8px;
}
.tk-group-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--c-text-soft); letter-spacing: .04em;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.tk-group-head i { color: var(--c-primary); font-size: 14px; }
.tk-grid-1, .tk-grid-2, .tk-grid-3 { gap: 8px; }
.tk-field input, .tk-field select, .tk-field textarea { padding: 7px 10px; font-size: 13px; }
.tk-field textarea {
  width: 100%;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: var(--c-surface); color: var(--c-text);
  font-family: inherit; line-height: 1.4;
  resize: none; min-height: 36px;
}
.tk-field textarea:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; border-color: var(--c-primary); }
.tk-field label { font-size: 11px; }

.tk-grid-1 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tk-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.tk-col-span-2 { grid-column: span 2; }
.tk-col-span-3 { grid-column: span 3; }

.tk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-field label {
  font-size: 12px; font-weight: 600;
  color: var(--c-text-soft);
  text-align: left;
}
.form-block label, .form-stack label { text-align: left; }
.tk-field .req { color: var(--c-danger); }
.tk-field input, .tk-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-size: 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  transition: all .12s;
  resize: none;
}
.tk-field input:focus, .tk-field select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.tk-field input:disabled, .tk-field select:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-mute);
  cursor: not-allowed;
}
.tk-field input.tk-invalid {
  border-color: var(--c-danger);
  background: rgba(239,68,68,.04);
}

.tk-input-money { position: relative; display: flex; align-items: center; }
.tk-input-money input { width: 100%; padding-right: 32px; text-align: right; font-weight: 600; font-family: 'Segoe UI', system-ui; }
.tk-input-money span { position: absolute; right: 10px; font-size: 13px; color: var(--c-text-mute); font-weight: 600; pointer-events: none; }

.tk-kt-select {
  font-weight: 600;
  transition: background .15s, color .15s;
}

.tk-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 11px; color: var(--c-text-mute);
  justify-content: center;
}
.tk-hint kbd {
  display: inline-block; padding: 2px 6px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 4px; font-family: 'Segoe UI', monospace;
  font-size: 10px; box-shadow: 0 1px 0 var(--c-border);
}

/* Choice card cấp 1 — đẹp hơn */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 4px; }
.choice-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 16px;
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
  transition: all .15s;
  cursor: pointer;
}
.choice-card i { font-size: 44px; }
.choice-card:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cc-title { font-size: 16px; color: var(--c-text); }
.cc-sub { font-size: 11px; color: var(--c-text-mute); font-weight: 500; }

/* Tóm tắt box (mẫu gửi khách) */
.tomtat-box {
  border: 2px solid #10b981;
  background: #f0fdf4;
  border-radius: var(--r-lg);
  overflow: hidden;
}
[data-mode="dark"] .tomtat-box { background: rgba(16,185,129,.08); }
.tomtat-head {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; padding: 10px 14px;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.tomtat-body {
  padding: 14px 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; line-height: 1.85;
  color: #0f172a;
  white-space: pre-wrap;
}
[data-mode="dark"] .tomtat-body { color: #f1f5f9; }

.pq-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 18px;
}
.field-block label { display: block; font-size: 12px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 5px; }
.field-block .req { color: var(--c-danger); }
.field-block input, .field-block select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 9px;
  background: var(--c-surface-2);
  outline: none;
  color: var(--c-text);
}
.field-block input:focus, .field-block select:focus { border-color: var(--c-primary); background: var(--c-surface); }
.field-block input:disabled { color: var(--c-text-mute); cursor: not-allowed; }
.field-block small { display: block; font-size: 11px; color: var(--c-text-mute); margin-top: 4px; }

.pq-matrix-wrap {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: 12px;
}
.pq-matrix-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pq-matrix {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--c-surface);
  border-radius: 8px;
  overflow: hidden;
}
.pq-matrix th, .pq-matrix td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}
.pq-matrix th:first-child, .pq-matrix td:first-child { text-align: left; }
.pq-matrix th { background: var(--c-surface-2); font-weight: 700; color: var(--c-text-soft); }
.pq-matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; }
.pq-matrix button.pq-fields-btn {
  padding: 4px 10px; border-radius: 6px;
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.pq-matrix button.pq-fields-btn:hover { background: var(--c-primary); color: #fff; }

/* Dùng FLEXBOX (không grid) để chiều cao mỗi thẻ độc lập, không bị "ô bự" do row-stretch */
.pq-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px; overflow-y: auto; padding: 4px 2px;
  align-items: stretch;
}
.pq-fields label.pq-field-item {
  width: 100%;
  box-sizing: border-box;
  height: 40px; min-height: 40px; max-height: 40px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  margin: 0;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  text-align: left;
}
.pq-fields label.pq-field-item:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
/* Checkbox: khóa kích thước cố định, KHÔNG để rule input toàn cục kéo giãn đẩy chữ */
.pq-fields label.pq-field-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px; margin: 0; padding: 0;
  min-width: 18px;
  accent-color: var(--c-primary); cursor: pointer;
}
/* Tên cột: 1 dòng, dài thì cắt bằng dấu … (hover xem đầy đủ qua title) */
.pq-fields label.pq-field-item span {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Đã tick (cột bị cấm sửa) → tô nổi bật cho dễ nhìn */
.pq-fields label.pq-field-item:has(input:checked) {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  font-weight: 600;
}

.muted { color: var(--c-text-mute); font-size: 12px; margin: 0 0 12px; }

/* ===== LỊCH SỬ ===== */
.ls-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.ls-toolbar .search-box { flex: 1; min-width: 260px; max-width: 380px; }
.ls-toolbar .tt-select { min-width: 140px; }
.ls-action-pill {
  display: inline-block; padding: 3px 8px;
  border-radius: 50px; font-size: 11px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text-soft);
}
.ls-action-pill.dang-nhap { background: rgba(16,185,129,.12); color: #059669; }
.ls-action-pill.dang-xuat { background: rgba(100,116,139,.12); color: #475569; }
.ls-action-pill.them { background: rgba(59,130,246,.12); color: #2563eb; }
.ls-action-pill.sua { background: rgba(245,158,11,.12); color: #d97706; }
.ls-action-pill.xoa { background: rgba(239,68,68,.12); color: #dc2626; }

/* ===== LỊCH LÀM VIỆC ===== */
.llv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
.llv-tabs { display: flex; gap: 4px; background: var(--c-surface); padding: 4px; border-radius: 10px; border: 1px solid var(--c-border); }
.llv-tab {
  padding: 9px 18px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--c-text-soft);
  transition: all .15s;
}
.llv-tab.active { background: var(--c-primary); color: #fff; }
.llv-tab:not(.active):hover { background: var(--c-surface-2); }
.llv-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.llv-stat {
  font-size: 13px; color: var(--c-text-soft);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 50px;
}
.llv-stat i { color: var(--c-primary); }
.llv-stat strong { color: var(--c-text); font-weight: 700; }
.llv-legend-sep { display: inline-block; width: 1px; height: 16px; background: var(--c-border); margin: 0 6px; }

.llv-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: auto;
  max-height: calc(100vh - 230px);
  min-height: 200px;   /* bỏ ép cao 100vh để chỉ scroll trong bảng, không scroll cả trang (#A1) */
}
.llv-tong-line { margin: 0 0 10px; }
.llv-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 13px; color: var(--c-text);
  table-layout: auto; min-width: max-content;   /* cột giữ bề rộng cố định -> luôn cuộn ngang được khi hẹp */
}
.llv-table thead th {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  padding: 8px 10px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  z-index: 3;
}
.llv-table thead .llv-row-name th { top: 0; }
.llv-table thead .llv-row-count th { top: 38px; font-size: 11px; color: var(--c-text-soft); }
.llv-th-time { left: 0; min-width: 48px; max-width: 48px; z-index: 4 !important; background: var(--c-surface) !important; vertical-align: middle; font-size: 13px; }
.llv-th-kt {
  min-width: 270px; max-width: 270px;   /* #2(d) (Hòa đợt2): nới cột KT (cột giờ giữ hẹp) */
  cursor: pointer; user-select: none;
  transition: background .15s;
  position: relative;
}
.llv-th-kt:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.llv-th-kt.active { background: var(--c-primary); color: #fff; }
.llv-th-kt.active .llv-clear-filter {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.25); border-radius: 50%; padding: 2px; font-size: 14px;
}
.llv-kt-name { font-size: 12px; font-weight: 700; }
.llv-th-count { font-weight: 700; font-size: 12px; color: var(--c-primary); }

.llv-table tbody td {
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  vertical-align: top;
  padding: 0;
}
.llv-td-time {
  position: sticky; left: 0; z-index: 2;
  background: var(--c-surface-2) !important;
  font-weight: 800;
  font-size: 14.5px;                 /* #2(e) (Hòa đợt2): cỡ GIỜ to lên */
  color: var(--c-text);
  padding: 8px 3px !important;
  text-align: center;
  vertical-align: middle;            /* #2(e): căn giữa theo chiều dọc */
  min-width: 48px; max-width: 48px;
  white-space: nowrap;
}
.llv-cell, .llv-cell-empty { padding: 6px; background: var(--c-surface); transition: filter .15s; min-width: 270px; max-width: 270px; }   /* #2(d) (Hòa đợt2): nới cột KT */
.llv-cell-empty { background: transparent; }
.llv-cell:hover { filter: brightness(0.97); }

.llv-cell-body {
  background: var(--bg, var(--c-surface));
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 70px;
  display: flex; flex-direction: column; gap: 3px;
  color: #0f172a;
  /* v186 (Hòa 31/07): CHỮ DÀI KHÔNG ĐƯỢC TRÀN RA NGOÀI Ô.
   * Bệnh: địa chỉ khách dán kèm link Google Maps ("…q7 hcm (https://share.google/wJcT85EX…)")
   * là MỘT CHUỖI LIỀN không có khoảng trắng ⇒ trình duyệt không có chỗ ngắt dòng ⇒ chữ chạy
   * lòi khỏi nền vàng, đè sang ô kỹ thuật bên cạnh = "lệch chữ".
   * overflow-wrap:anywhere cho phép ngắt GIỮA chuỗi dài đó (chữ thường vẫn ngắt theo từ như cũ);
   * min-width:0 để ô con trong flex được phép co lại đúng bề ngang ô. Thuần trình bày. */
  overflow-wrap: anywhere;
  min-width: 0;
}
/* v186: 2 dòng dùng display:flex nên phải cho item bên trong co được, nếu không vẫn đội ô ra */
.llv-cell-khach, .llv-cell-diachi { min-width: 0; }
.llv-henlich .llv-cell-body { background: #fef3c7; }
.llv-dalam   .llv-cell-body { background: #dcfce7; }
.llv-gay     .llv-cell-body { background: #fee2e2; }
.llv-cell-dichvu { font-weight: 600; font-size: 11.5px; line-height: 1.35; margin-bottom: 9px; }   /* #6 nhỏ + #2(c) (đợt2): cách SĐT 1 dòng */
.llv-cell-khach { font-size: 12.5px; color: #1e293b; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.llv-cell-khach i { color: #475569; font-size: 13px; }
.llv-cell-khach strong { font-weight: 600; }
.llv-phone { color: #2563eb !important; text-decoration: none; font-weight: 600; }
/* #2(b) (Hòa đợt2): cỡ Địa chỉ theo biến --llv-fs-diachi (gắn ở .llv-wrap, nhập số px, bền qua realtime) */
.llv-cell-diachi { font-size: var(--llv-fs-diachi, 14px); font-weight: 600; color: #1f2937; line-height: 1.4; display: flex; align-items: flex-start; gap: 3px; }
.llv-cell-diachi i { color: #94a3b8; font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.llv-cell-nv { font-size: 12px; color: #64748b; font-style: italic; margin-top: auto; }

.llv-legend {
  display: flex; align-items: center; gap: 18px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.llv-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-soft); }
.llv-dot { width: 14px; height: 14px; border-radius: 4px; }
.llv-legend-hint { margin-left: auto; color: var(--c-text-mute); font-style: italic; }
.llv-legend-hint i { color: var(--c-primary); }
.empty-cell { padding: 40px; text-align: center; color: var(--c-text-mute); font-style: italic; }

/* ===== DANH SÁCH KHÁCH CẦN GỌI ===== */
.goi-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.goi-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.goi-tab {
  padding: 9px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--c-text-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.goi-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.goi-tab.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.goi-tab i { font-size: 15px; }
.goi-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.goi-actions .search-box { width: 240px; }
/* Nút trên thanh công cụ KHÔNG xuống dòng chữ -> mọi nút cao đều nhau (hết cảnh nút 3 dòng, cái to cái nhỏ) */
.goi-toolbar .btn-ghost, .goi-toolbar .btn-primary, .goi-toolbar .goi-tab,
.goi-actions .btn-ghost, .goi-actions .btn-primary, .goi-actions > a,
.llv-cn-filter > .btn-ghost, .llv-date-pill,
.table-toolbar .btn-ghost, .table-toolbar .btn-primary,
.tt-right .btn-ghost, .tt-right .btn-primary, .tt-right .ms-toggle, .tt-right .tt-select { white-space: nowrap; }

.goi-info-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 12px;
}
.goi-save-status { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-soft); font-weight: 600; }
.goi-spin { animation: spin 1s linear infinite; display: inline-block; }

.goi-table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: auto;
  max-height: calc(100vh - 280px);
}
.goi-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.goi-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--c-surface-2);
  padding: 10px 8px;
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  color: var(--c-text-soft);
  border-bottom: 2px solid var(--c-border);
  white-space: nowrap;
  text-align: center;
}
.goi-table thead .goi-th-call {
  position: sticky; right: 0; z-index: 4;
  background: var(--c-surface-2);
  border-left: 2px solid var(--c-border);
}
.goi-table tbody td {
  padding: 8px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.goi-table tbody tr:hover { background: var(--c-primary-soft); }
.goi-table .goi-td-name { text-align: left; min-width: 200px; }
.goi-name { color: var(--c-text); font-weight: 700; text-decoration: none; display: block; text-transform: uppercase; font-size: 13px; }
.goi-name:hover { color: var(--c-primary); }
/* SĐT đồng đều với các cột khác: cùng cỡ chữ + màu chữ thường, không nhỏ/nhạt lệch (#1.1) */
.goi-phone { color: var(--c-text); font-size: 13px; font-weight: 500; display: block; letter-spacing: .2px; }
.goi-phone:hover { color: var(--c-primary); }
.goi-phone i { color: var(--c-text-mute); margin-right: 2px; }
.goi-td-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goi-td-check { text-align: center; }
.goi-td-check input { width: 16px; height: 16px; accent-color: var(--c-primary); }
.goi-td-edit { padding: 4px !important; }
.goi-select, .goi-input {
  width: 100%; min-width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  font-size: 12px; color: var(--c-text);
  outline: none;
  font-family: inherit;
}
.goi-select:focus, .goi-input:focus { border-color: var(--c-primary); background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-primary-soft); }
/* textarea.goi-input: MẶC ĐỊNH thu gọn 1 dòng (32px), KHÔNG kéo giãn cột.
   Dùng pre-wrap + overflow hidden (không nowrap) để cột giữ nguyên bề ngang.
   Chỉ "bung" cao ra khi focus hoặc có class .goi-input-open. */
textarea.goi-input {
  resize: none;
  overflow: hidden;
  height: 32px;
  min-height: 32px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
textarea.goi-input:focus,
textarea.goi-input.goi-input-open {
  height: auto;
  min-height: 32px;
  max-height: 220px;
  overflow: auto;
}
.goi-check { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; }

.goi-table tbody .goi-td-call {
  position: sticky; right: 0; z-index: 2;
  background: var(--c-surface);
  border-left: 2px solid var(--c-border);
  text-align: center;
}
.goi-table tbody tr:hover .goi-td-call { background: var(--c-primary-soft); }
.goi-call-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-success); color: #fff;
  text-decoration: none;
  transition: all .15s;
}
.goi-call-btn:hover { background: #059669; transform: scale(1.1); }
/* v56.17: nút NHÂN BẢN LỊCH HẸN (tab Gọi Khách Gãy / Dí Khách Đến Cửa Hàng) — cùng cỡ nút gọi,
 * màu chủ đạo để phân biệt; nằm bên trái nút gọi trong cùng ô. */
.goi-nb-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--c-primary); color: #fff;
  margin-right: 6px;
  transition: all .15s;
}
.goi-nb-btn:hover { background: var(--c-primary-dark, #2563eb); transform: scale(1.1); }

/* v78 (Hòa #3 — 15/07): CỐ ĐỊNH cột nút Gọi (giống cột thao tác KTN) + tên in đậm nhất quán.
 *  Bảng Khách cần gọi là #goi-table, tab Đánh giá dịch vụ là .cskh-tbl — cả 2 KHÔNG mang class .goi-table
 *  nên bộ rule .goi-table sticky ở trên KHÔNG áp (đó là lý do cột Gọi trước đây bị trôi). Ghim thẳng theo
 *  id/class riêng của 2 bảng này — CHỈ THÊM, không sửa rule cũ, không ảnh hưởng bảng khác. */
#goi-table thead .goi-th-call,
.cskh-tbl thead .goi-th-call {
  position: sticky; right: 0; top: 0; z-index: 5;
  background: var(--c-surface-2);
  border-left: 2px solid var(--c-border);
}
#goi-table tbody .goi-td-call,
.cskh-tbl tbody .goi-td-call {
  position: sticky; right: 0; z-index: 2;
  background: var(--c-surface);
  border-left: 2px solid var(--c-border);
  text-align: center;
}
#goi-table tbody tr:hover .goi-td-call,
.cskh-tbl tbody tr:hover .goi-td-call { background: var(--c-primary-soft); }
/* Ô SỬA NHANH tên khách (input) đậm + IN HOA giống .goi-name → cột Tên nhất quán ở MỌI tab con (có tab trước render input nên không đậm) */
.goi-name-inp { font-weight: 700; text-transform: uppercase; }

.goi-load-more-wrap { padding: 14px; text-align: center; }
.goi-loading { padding: 60px 20px; text-align: center; color: var(--c-text-mute); display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-mute); }

/* ===== MULTI-SELECT FILTER POPUP ===== */
.ms-popup {
  width: 300px; max-height: 420px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  font-family: var(--font); overflow: hidden;
}
.ms-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.ms-search { flex: 1; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: 6px; font-size: 13px; background: var(--c-surface); color: var(--c-text); }
.ms-clear { padding: 6px 10px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); cursor: pointer; color: var(--c-text-soft); }
.ms-clear:hover { color: var(--c-danger); border-color: var(--c-danger); }
.ms-all { padding: 6px 10px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); cursor: pointer; color: var(--c-text-soft); }
.ms-all:hover { color: var(--c-primary); border-color: var(--c-primary); }
.ms-list { flex: 1; overflow-y: auto; padding: 6px 4px; }
.ms-list label { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; border-radius: 4px; color: var(--c-text); }
.ms-list label:hover { background: var(--c-primary-soft); }
.ms-list input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.ms-empty { text-align: center; color: var(--c-text-mute); padding: 30px 10px; font-size: 13px; }
.ms-foot { display: flex; gap: 6px; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }

/* Cột thao tác trong data-table */
.dt-action-th, .dt-action-td { position: sticky; right: 0; background: var(--c-surface); border-left: 1px solid var(--c-border); }
.dt-action-td {
  display: table-cell;
  text-align: center;
  white-space: nowrap;
}
/* Wrapper flex để 3 icon nằm cùng 1 hàng */
.dt-action-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dt-action-td .icon-btn {
  display: inline-grid;
  width: 30px; height: 30px;
  padding: 0;
  font-size: 16px;
  border-radius: 6px;
}

/* ===== INLINE EDIT CELL ===== */
.dt-cell { vertical-align: middle; }
.dt-cell-pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-cell-trim { display: inline; }
.dt-cell-more {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  font-weight: 700; font-size: 12px; line-height: 1;
  cursor: pointer; margin-left: 4px;
  transition: transform .12s;
}
.dt-cell-more:hover { transform: scale(1.15); }
.dt-editable { cursor: pointer; position: relative; }
.dt-editable:hover { background: var(--c-primary-soft); }
.dt-editable.dt-editing { padding: 2px 4px; }
.dt-inline-input {
  width: 100%; padding: 6px 8px;
  border: 1.5px solid var(--c-primary); border-radius: 4px;
  font-size: 13px;
  background: var(--c-surface); color: var(--c-text);
  outline: none;
  font-family: inherit;
  resize: none; /* dùng auto-resize via JS */
  line-height: 1.4;
  min-height: 32px;
}
/* Inline select (luôn hiện) — CĂN GIỮA CELL */
.dt-editable-select {
  padding: 4px 6px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.dt-select-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface-2);
  transition: background .15s, color .15s, border-color .15s;
  padding: 0 12px;
  min-width: 90px;
  margin: 0 auto;
}
.dt-select-wrap.dt-saving-bg { opacity: 0.6; }
.dt-inline-select {
  border: none; background: transparent;
  padding: 7px 6px;
  font-size: 13px; font-weight: 600;   /* v22: TRẢ cỡ chữ gốc (bỏ phóng to v21) */
  color: inherit;
  cursor: pointer;
  outline: none;
  text-align: center;
  text-align-last: center; /* Căn giữa text trong select khi đóng */
  min-width: 124px;        /* v22: NỚI RỘNG cho cột KT đỡ hẹp/khó nhìn */
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.dt-inline-select option {
  background: var(--c-surface); color: var(--c-text);
  font-size: 13px;          /* v22: chữ về cỡ GỐC — KHÔNG phóng to */
  /* v22: tăng CHIỀU CAO từng dòng option (giãn dòng cho dễ chọn), không phóng chữ.
     Chrome/Win tôn trọng padding+min-height của option trong bộ form-control mới. */
  padding: 13px 14px; line-height: 2.2; min-height: 42px;
}

/* v44 (#4): droplist inline CA / Hình thức (.kpi-ca-sel) — ĐỒNG BỘ kiểu "viên thuốc" bo tròn,
   có mũi tên + hover/focus, giống droplist các tab khác. Có viền + nền nhẹ vì KHÔNG nằm trong ô pill màu. */
select.kpi-ca-sel {
  border: 1px solid var(--c-border, #d1d5db);
  background-color: var(--c-surface, #fff);
  border-radius: 999px;
  padding: 5px 26px 5px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--c-text, #111827);
  cursor: pointer; outline: none;
  text-align: center; text-align-last: center;
  font-family: inherit;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .15s, box-shadow .15s;
}
select.kpi-ca-sel:hover  { border-color: var(--c-primary, #2563eb); }
select.kpi-ca-sel:focus  { border-color: var(--c-primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
select.kpi-ca-sel option { background: var(--c-surface, #fff); color: var(--c-text, #111827); font-size: 13px; padding: 8px 12px; }
[data-mode="dark"] select.kpi-ca-sel        { background-color: #1e293b; color: #f1f5f9; border-color: #334155; }
[data-mode="dark"] select.kpi-ca-sel option { background: #1e293b; color: #f1f5f9; }
/* DARK MODE: form-input + select chuẩn → nền tối, chữ sáng để readable
   QUAN TRỌNG: KHÔNG đụng .dt-inline-select vì select này nằm trong .dt-select-wrap đã có màu riêng (set inline qua JS).
   Nếu force bg lên .dt-inline-select sẽ che mất màu của wrap → pill bị vỡ */
[data-mode="dark"] select:not(.dt-inline-select),
[data-mode="dark"] .form-input,
[data-mode="dark"] .tt-select {
  background: #1e293b !important; color: #f1f5f9 !important;
  border-color: #334155 !important;
}
[data-mode="dark"] select:not(.dt-inline-select) option {
  background: #1e293b !important; color: #f1f5f9 !important;
}
/* Inline select trong bảng: luôn trong suốt + chữ kế thừa wrap (đã tính tương phản qua readableTextColor_) */
[data-mode="dark"] .dt-inline-select {
  background: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}
/* Dropdown options của inline-select: nền tối làm fallback; option có inline style màu riêng sẽ thắng nhờ specificity */
[data-mode="dark"] .dt-inline-select option {
  background: #1e293b; color: #f1f5f9;
}
/* Wrap KHÔNG có màu inline (chưa chọn giá trị) → cho nền + chữ readable */
[data-mode="dark"] .dt-select-wrap:not([style*="background"]) {
  background: #1e293b; border-color: #334155;
}
[data-mode="dark"] .dt-select-wrap:not([style*="background"]) .dt-inline-select {
  color: #f1f5f9 !important;
}
[data-mode="dark"] input[type="text"],
[data-mode="dark"] input[type="tel"],
[data-mode="dark"] input[type="date"],
[data-mode="dark"] input[type="password"],
[data-mode="dark"] textarea {
  background: #1e293b !important; color: #f1f5f9 !important;
  border-color: #334155 !important;
}
[data-mode="dark"] input::placeholder,
[data-mode="dark"] textarea::placeholder { color: #94a3b8 !important; }
.dt-saving { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.goi-spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SỬA TRỰC TIẾP TRÊN Ô (Tên / SĐT / Ngày hẹn) ===== */
.dt-inline-text {
  width: 100%; min-width: 70px; padding: 5px 7px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit;
  font-family: inherit; font-size: 13px; line-height: 1.3;
}
.dt-inline-text:hover { border-color: var(--c-border); background: var(--c-surface-2); }
.dt-inline-text:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }
.dt-inline-date {
  width: 104px; padding: 4px 6px; border: 1px solid var(--c-border); border-radius: 6px;
  background: transparent; color: inherit; font-family: inherit; font-size: 12px; cursor: pointer;
}
.dt-inline-date:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }
.dt-inline-date::placeholder { color: var(--c-text-mute); }
.dt-da-luu { box-shadow: 0 0 0 2px var(--c-success) inset; transition: box-shadow .2s; }
/* Dark mode: giữ ô sửa trực tiếp trong suốt, hòa với cell */
[data-mode="dark"] input.dt-inline-text { background: transparent !important; color: #f1f5f9 !important; border-color: transparent !important; }
[data-mode="dark"] input.dt-inline-text:hover { background: #0f172a !important; border-color: #334155 !important; }
[data-mode="dark"] input.dt-inline-text:focus { background: #1e293b !important; border-color: var(--c-primary) !important; }

/* Ô sửa trực tiếp NHIỀU DÒNG (textarea inline) — tên/địa chỉ/dịch vụ/lý do gãy */
.dt-inline-area {
  width: 100%; min-width: 70px; padding: 5px 7px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit;
  font-family: inherit; font-size: 13px; line-height: 1.35;
  resize: none; overflow-y: auto; max-height: 4.4em;
  white-space: pre-wrap; word-break: break-word; vertical-align: top;
}
.dt-inline-area:hover { border-color: var(--c-border); background: var(--c-surface-2); }
.dt-inline-area:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); max-height: 12em; }
[data-mode="dark"] textarea.dt-inline-area { background: transparent !important; color: #f1f5f9 !important; border-color: transparent !important; }
[data-mode="dark"] textarea.dt-inline-area:hover { background: #0f172a !important; border-color: #334155 !important; }
[data-mode="dark"] textarea.dt-inline-area:focus { background: #1e293b !important; border-color: var(--c-primary) !important; }

/* Ô sửa trực tiếp NHIỀU DÒNG kiểu chữ thường (div contenteditable) — không "ô trong ô"
 * v37: BỎ thanh cuộn trong ô (xấu) → nội dung dài CẮT 2 dòng + dấu "…" (line-clamp).
 *      Bấm đúp vào DÒNG là bung nguyên dòng (tr.mo-rong); bấm vào ô để sửa cũng tự bung (focus). */
.dt-edit-area {
  min-height: 1.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 4px 6px; border-radius: 6px; outline: none;
  white-space: pre-wrap; word-break: break-word; cursor: text;
  line-height: 1.35; font-size: 13px;
}
.dt-edit-area:hover { background: var(--c-surface-2); }
.dt-edit-area:focus { background: var(--c-surface); box-shadow: 0 0 0 1.5px var(--c-primary) inset;
  display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none; }
/* Bấm đúp dòng → bung hết nội dung mọi ô trong dòng đó (bấm đúp lần nữa để gọn lại) */
tr.mo-rong .dt-edit-area { display: block; -webkit-line-clamp: unset; overflow: visible; max-height: none; }
tr.mo-rong td { white-space: normal !important; }

/* v41 (#2): Ô CHỈ-XEM nội dung dài (tab Khách cần gọi...) — cắt 2 dòng + "…", BẤM vào ô là bung đủ,
 * bấm lại thu gọn; bấm đúp dòng (tr.mo-rong) cũng bung cả dòng — đồng bộ trải nghiệm với tab KTN/KCH. */
.goi-td-dai { min-width: 180px; max-width: 340px; white-space: normal !important; cursor: pointer; }
.dt-xem-day {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer;
  white-space: pre-wrap; word-break: break-word; line-height: 1.35; font-size: 13px;
  padding: 2px 4px; border-radius: 6px;
}
.dt-xem-day:hover { background: var(--c-surface-2); }
.dt-xem-day.mo, tr.mo-rong .dt-xem-day { display: block; -webkit-line-clamp: unset; overflow: visible; }
[data-mode="dark"] .dt-xem-day:hover { background: #0f172a; }

/* v41 (#7): dòng đang CHỌN ĐỂ COPY (bấm ô STT) — bôi đen như chọn dòng Google Sheets */
.data-table tbody tr.dong-copy td { background: rgba(59, 130, 246, .16) !important; }
.data-table tbody tr.dong-copy td.dt-stt { background: var(--c-primary, #3b82f6) !important; color: #fff !important; }
.data-table tbody td.dt-stt { cursor: pointer; }
.data-table tbody td.dt-stt:hover { background: rgba(59, 130, 246, .18); }
[data-mode="dark"] .data-table tbody tr.dong-copy td { background: rgba(96, 165, 250, .22) !important; }

/* Phân trang đầy đủ: dropdown số dòng + số trang */
.phan-trang-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.pt-sodong { font-size: 13px; color: var(--c-text-soft); }
.pt-sodong select { padding: 4px 8px; border: 1px solid var(--c-border-strong); border-radius: 6px; background: var(--c-surface); color: var(--c-text); font-size: 13px; }
.pt-info { font-size: 13px; color: var(--c-text-soft); }
.pt-nut { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pt-btn { min-width: 32px; height: 32px; padding: 0 9px; display: inline-grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 7px; background: var(--c-surface); color: var(--c-text); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.pt-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pt-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pt-btn[disabled] { opacity: .4; cursor: not-allowed; }
[data-mode="dark"] .dt-edit-area:hover { background: #0f172a; }
[data-mode="dark"] .dt-edit-area:focus { background: #1e293b; }

/* Badge "Có đơn mới — bấm để tải" (poll realtime, không tự reload) */
.co-don-moi { cursor: pointer; color: var(--c-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.co-don-moi:hover { text-decoration: underline; }

/* ===== KÉO GIÃN CỘT Địa chỉ / Dịch vụ ===== */
th.tn-col-resizer { position: relative; }
.col-resizer {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none; z-index: 3;
}
.col-resizer:hover { background: var(--c-primary); opacity: .45; }
.data-table td.tn-col-diachi, .data-table td.tn-col-dichvu,
.data-table td.tn-col-lydogay, .data-table td.tn-col-ten {
  white-space: normal; word-break: break-word; vertical-align: top;
  max-width: 360px;
}
/* Căn GIỮA dữ liệu các ô (Khách Tận Nhà) — trừ 4 cột dài căn trái */
#tn-table tbody td { text-align: center; vertical-align: middle; }
#tn-table tbody td.tn-col-ten, #tn-table tbody td.tn-col-diachi,
#tn-table tbody td.tn-col-dichvu, #tn-table tbody td.tn-col-lydogay { text-align: left; vertical-align: top; }

/* ===== DANH MỤC ===== */
.dm-pane { padding: 8px 0; }
.dm-pane[hidden] { display: none !important; }
.dm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 8px 0; }
@media (max-width: 900px) { .dm-grid-3 { grid-template-columns: 1fr; } }
.dm-block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow-sm); }
.dm-block-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 8px; }
.dm-block-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--c-text); display: flex; align-items: center; gap: 6px; }
.dm-block-head h4 i { color: var(--c-primary); }
.dm-list { list-style: none; padding: 0; margin: 0; max-height: 400px; overflow-y: auto; }
.dm-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--c-text); }
.dm-list li:hover { background: var(--c-surface-2); }
.dm-list li .dm-li-text { flex: 1; }
.dm-list li .dm-li-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.dm-list li:hover .dm-li-actions { opacity: 1; }
.dm-list li.empty-li { text-align: center; color: var(--c-text-mute); padding: 20px; font-style: italic; }
.dm-color-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; color: #fff; font-size: 11px; font-family: 'Monaco', monospace; font-weight: 600; }

/* ===== COLOR PICKER (Danh mục) ===== */
.dm-color-picker { display: flex; flex-direction: column; gap: 10px; }
.dm-color-row { display: flex; align-items: center; gap: 10px; }
.dm-color-native { width: 50px; height: 38px; border: 1px solid var(--c-border); border-radius: 6px; cursor: pointer; padding: 2px; background: var(--c-surface); }
.dm-color-preview { display: inline-block; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--c-border); }
.dm-color-palette { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.dm-color-swatch {
  width: 28px; height: 28px; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.dm-color-swatch:hover { transform: scale(1.15); border-color: var(--c-text); }

[data-theme="dark"] .ms-popup,
[data-mode="dark"] .ms-popup { background: var(--c-surface); }

/* ======================================================================
 * VÁ GIAO DIỆN — các thành phần port từ CRM cũ còn THIẾU style
 * (badge kỹ thuật, dropdown lọc cột, form thêm khách, nút generic,
 *  import drop, trạng thái phân trang). Dùng biến --c-* nên tự đổi dark.
 * ====================================================================== */

/* Huy hiệu kỹ thuật — nền màu lấy từ danh mục (inline), chữ trắng có viền mờ */
.badge-kt {
  display: inline-block; padding: 3px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.38); white-space: nowrap;
}

/* Nút lọc ▼ trên tiêu đề cột (kiểu Google Sheet) */
.nut-loc {
  margin-left: 5px; border: none; background: transparent;
  color: var(--c-text-mute); font-size: 10px; cursor: pointer;
  padding: 2px 4px; border-radius: 5px; line-height: 1;
  vertical-align: middle; transition: all .15s;
}
.nut-loc:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.nut-loc.dang-loc { color: var(--c-primary); background: var(--c-primary-soft); }

/* Bảng lọc cột (popup định vị bằng JS) */
#loc-panel {
  position: absolute; z-index: 300; width: 250px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 12px; font-size: 13px;
}
#loc-panel .loc-tieude { font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
#loc-panel #loc-tim {
  width: 100%; padding: 7px 10px; border: 1px solid var(--c-border);
  border-radius: 8px; background: var(--c-surface-2); color: var(--c-text);
  outline: none; margin-bottom: 8px;
}
#loc-panel #loc-tim:focus { border-color: var(--c-primary); }
.loc-nut-nho { display: flex; gap: 6px; margin-bottom: 8px; }
.loc-nut-nho button {
  flex: 1; padding: 5px; border: 1px solid var(--c-border);
  border-radius: 7px; background: var(--c-surface-2); color: var(--c-text-soft);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.loc-nut-nho button:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.loc-ds {
  max-height: 230px; overflow: auto; border: 1px solid var(--c-border);
  border-radius: 8px; padding: 4px; margin-bottom: 6px;
}
.loc-muc {
  display: flex; align-items: center; gap: 7px; padding: 5px 6px;
  border-radius: 6px; cursor: pointer; color: var(--c-text);
}
.loc-muc:hover { background: var(--c-surface-2); }
.loc-muc input { margin: 0; flex: 0 0 auto; }
.loc-muc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-chan { display: flex; justify-content: flex-end; gap: 8px; }

/* Nút generic .nut (modal thêm / tóm tắt gửi khách) */
.nut {
  padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 13px;
  border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-text); cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; transition: all .15s;
}
.nut:hover { background: var(--c-surface); }
.nut.luc { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.nut.luc:hover { background: var(--c-primary-dark); }
.nut.nho { padding: 6px 12px; font-size: 12px; }
.nut-xam {
  padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 13px;
  border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-text-soft); cursor: pointer; transition: all .15s;
}
.nut-xam:hover { background: var(--c-surface); color: var(--c-text); }

/* Modal thêm khách: nội dung tiêm thẳng vào .modal (không có wrapper) */
.modal:has(.luoi-form), .modal:has(.chon-loai) { width: 600px; }
.modal > h3 { margin: 0; padding: 16px 20px; font-size: 16px; border-bottom: 1px solid var(--c-border); }
.chon-loai { display: flex; gap: 12px; padding: 20px; }
.chon-loai button {
  flex: 1; padding: 24px 14px; border: 1px solid var(--c-border);
  border-radius: 12px; background: var(--c-surface-2); color: var(--c-text);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.chon-loai button:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.luoi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 20px; max-height: 70vh; overflow: auto; }
.luoi-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--c-text-soft); }
.luoi-form label.full { grid-column: 1 / -1; }
.luoi-form input, .luoi-form select, .luoi-form textarea {
  padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); outline: none;
  font-size: 13px; font-family: inherit;
}
.luoi-form input:focus, .luoi-form select:focus, .luoi-form textarea:focus { border-color: var(--c-primary); background: var(--c-surface); }
.chan { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--c-border); }

/* ===== FORM-GRID (modal sửa khách) — 2 cột gọn, cuộn khi nhiều trường ===== */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
}
.form-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--c-text-soft);
  min-width: 0;
}
.form-grid label small { font-weight: 500; color: var(--c-text-mute); }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); outline: none;
  font-size: 13px; font-family: inherit;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--c-primary); background: var(--c-surface);
}
.form-grid input:disabled, .form-grid textarea:disabled {
  color: var(--c-text-mute); cursor: not-allowed; opacity: .75;
}
.form-grid textarea { resize: vertical; min-height: 48px; line-height: 1.45; }
/* .full trong form-grid (modal sửa) span đủ 2 cột */
.form-grid label.full { grid-column: 1 / -1; }
/* Màn hẹp: form-grid + luoi-form về 1 cột để không vỡ */
@media (max-width: 640px) {
  .form-grid, .luoi-form { grid-template-columns: 1fr !important; }
}

/* Import drop zone (giữ chức năng import/tải về như cũ) */
.import-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 30px 20px; border: 2px dashed var(--c-border-strong);
  border-radius: 12px; background: var(--c-surface-2); color: var(--c-text-soft);
  cursor: pointer; text-align: center; transition: all .15s;
}
.import-drop:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.import-drop i { font-size: 38px; }

/* Trạng thái phân trang « Trang x / y » */
.trang-thai { font-size: 13px; color: var(--c-text-soft); font-weight: 600; }

/* ===== BỘ LỌC TIÊU ĐỀ CỘT (kiểu Google Sheet) — port từ bản cũ ===== */
th .nut-loc {
  background: transparent; border: none; color: var(--c-text-mute);
  cursor: pointer; font-size: 11px; padding: 0 2px; margin-left: 4px; vertical-align: middle;
}
th .nut-loc:hover { color: var(--c-primary); }
/* v56.10 (Hòa): cột ĐANG LỌC → ▼ tô XANH rõ (nền + đậm) để nhận biết ngay trên tiêu đề */
th .nut-loc.dang-loc {
  color: #fff; background: var(--c-primary, #2563eb);
  border-radius: 5px; padding: 1px 4px; font-weight: 700;
}
#loc-panel {
  position: absolute; z-index: 150; width: 250px;
  background: var(--c-surface); border: 1px solid var(--c-primary);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 10px;
}
#loc-panel .loc-tieude { font-weight: 700; color: var(--c-primary); font-size: 13px; margin-bottom: 6px; }
#loc-panel input[type=text] {
  width: 100%; margin: 0 0 6px; padding: 7px 9px; font-size: 13px;
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-text);
}
#loc-panel .loc-nut-nho { display: flex; gap: 6px; margin-bottom: 6px; }
#loc-panel .loc-nut-nho button {
  flex: 1; padding: 5px 6px; font-size: 12px; font-weight: 600;
  background: var(--c-surface-2); color: var(--c-text-soft);
  border: 1px solid var(--c-border); border-radius: var(--r-sm); cursor: pointer;
}
#loc-panel .loc-nut-nho button:hover { color: var(--c-primary); border-color: var(--c-primary); }
#loc-panel .loc-ds {
  max-height: 250px; overflow-y: auto; margin-bottom: 6px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 4px 7px;
}
#loc-panel .loc-muc {
  display: flex; gap: 7px; align-items: center; padding: 3px 2px;
  font-size: 13px; color: var(--c-text); cursor: pointer;
}
#loc-panel .loc-muc:hover { color: var(--c-primary); }
#loc-panel .loc-chan { display: flex; gap: 8px; justify-content: flex-end; }
#loc-panel .nut.nho, #loc-panel .nut {
  padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); cursor: pointer;
}
#loc-panel .nut.luc { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ===== MODAL IMPORT ===== */
.import-drop {
  border: 2px dashed var(--c-border); border-radius: var(--r-md);
  padding: 26px 16px; text-align: center; color: var(--c-text-mute); background: var(--c-surface-2);
}
.import-drop i { font-size: 30px; color: var(--c-primary); display: block; margin-bottom: 6px; }

/* ======================================================================
 * BỔ SUNG GIAO DIỆN (cập nhật theo yêu cầu Hòa): STT, multi-select,
 * màu dòng tab Khách cần gọi, nút thao tác cùng hàng, pill ngày LLV...
 * ====================================================================== */

/* Đèn "Trực tiếp" dưới tiêu đề tab (#5) */
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c-success); margin-right:6px; vertical-align:middle; }

/* Cột STT (đánh số bằng code, không lưu DB) */
.dt-stt { text-align:center !important; color:var(--c-text-soft); width:54px; min-width:44px; font-variant-numeric:tabular-nums; }
.goi-table .dt-stt { width:48px; }

/* Cột thao tác trong data-table luôn CÙNG 1 HÀNG (#7) */
.data-table td .icon-btn { display:inline-grid; vertical-align:middle; }

/* Cột SĐT Khách cửa hàng rộng hơn, không xuống hàng (#4) */
.kh-col-sdt { min-width:128px; }
.kh-col-sdt .dt-edit-area { white-space:nowrap; }

/* Nút xóa lọc (icon) — sáng lên khi đang có bộ lọc áp dụng */
.dt-xoa-loc.dang-loc { color:var(--c-primary); border-color:var(--c-primary); background:var(--c-primary-soft); }

/* Bộ lọc nhiều lựa chọn (multi-select dropdown) — tái dùng .ms-popup có sẵn */
.ms-field { position:relative; display:inline-block; }
.ms-field .ms-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; min-width:150px; justify-content:space-between; }
.ms-field .ms-popup { position:absolute; top:calc(100% + 4px); left:0; z-index:60; }
.ms-popup[hidden] { display:none !important; }
#goi-mang-pop { left:auto; right:0; width:230px; }

/* Pill chọn ngày Lịch làm việc — CSS giống badge ngày cũ đã bỏ (#6) */
.llv-date-pill {
  font-size:13px; color:var(--c-text); font-family:inherit;
  display:inline-flex; align-items:center;
  padding:6px 12px; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:50px; outline:none;
}
.llv-date-pill:focus { border-color:var(--c-primary); }

/* (R3-#2) Khách cần gọi: KHÔNG tô hàng nữa — chỉ tô droplist trạng thái (xem .dt-inline-select.dalam/.henlich/.gay phía dưới) */

/* Cột sửa nhanh trong Khách cần gọi: bung giãn + xuống dòng (#10) */
.goi-col-dv { min-width:170px; max-width:300px; white-space:normal !important; }
.goi-col-note { min-width:150px; max-width:280px; white-space:normal !important; }
.goi-table td .dt-edit-area { color:inherit; }

/* Modal đồng bộ: tiêu đề có icon FA cách chữ một chút (#14) */
.modal > h3 i, .modal-head h3 i { margin-right:6px; color:var(--c-primary); }
.chon-loai button i { margin-right:6px; }

/* R2-2: bo góc tròn cho ô Kỹ thuật có màu (bảng Tận nhà) */
.dt-inline-select.dt-kt-select { border-radius: 50px; padding-left: 12px; }

/* ===== ROUND 3 ===== */

/* (R3-#2) Tô màu droplist Trạng thái theo tình trạng (dùng cho Khách cần gọi + 2 tab Khách) */
.dt-inline-select.dalam,   .dt-inline-select.luc  { background: rgba(16,185,129,.16) !important; color:#047857 !important; border-radius:50px; font-weight:700; }
.dt-inline-select.henlich, .dt-inline-select.vang { background: rgba(245,158,11,.20) !important; color:#b45309 !important; border-radius:50px; font-weight:700; }
.dt-inline-select.gay,     .dt-inline-select.do   { background: rgba(239,68,68,.16)  !important; color:#b91c1c !important; border-radius:50px; font-weight:700; }
[data-mode="dark"] .dt-inline-select.dalam,   [data-mode="dark"] .dt-inline-select.luc  { color:#6ee7b7 !important; }
[data-mode="dark"] .dt-inline-select.henlich, [data-mode="dark"] .dt-inline-select.vang { color:#fcd34d !important; }
[data-mode="dark"] .dt-inline-select.gay,     [data-mode="dark"] .dt-inline-select.do   { color:#fca5a5 !important; }
/* v210 (Hòa 10/08): droplist "Trạng Thái Nhập Hàng" (chỉ SA sửa) — xanh dương, bo tròn, đậm y cột Tình trạng */
.dt-inline-select.nhaphang { background: rgba(59,130,246,.16) !important; color:#1d4ed8 !important; border-radius:50px; font-weight:700; }
[data-mode="dark"] .dt-inline-select.nhaphang { color:#93c5fd !important; }
select.dt-inline-select option.nhaphang { background: #dbeafe; color: #1d4ed8; }

/* (R3-#1) Cột Tên Khách cửa hàng rộng hơn */
.kh-col-ten { min-width: 160px; }

/* Cột Nickname Khách cửa hàng rộng hơn cho dễ đọc (#3) */
.kh-col-nick { min-width: 210px; }
.kh-col-nick .dt-edit-area { white-space: nowrap; }

/* (R3-#7) Con trỏ pointer cho các tab con / nút lọc dạng span */
.pq-subtab, .ms-toggle, .tab-strip button, .date-tab, .goi-tab, .nut-loc { cursor: pointer; }

/* (R3-#6) Đồng bộ popup multi-select (.ms-popup) cho GIỐNG panel lọc cột (#loc-panel) */
.ms-popup { width: 250px; max-height: 360px; border: 1px solid var(--c-primary); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 10px; background: var(--c-surface); }
.ms-popup .ms-head { padding: 0; border: 0; background: transparent; margin-bottom: 6px; gap: 6px; }
.ms-popup .ms-search { width: 100%; padding: 7px 9px; font-size: 13px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-text); }
.ms-popup .ms-all, .ms-popup .ms-clear { flex: 1; padding: 5px 6px; font-size: 12px; font-weight: 600; background: var(--c-surface-2); color: var(--c-text-soft); border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.ms-popup .ms-all:hover, .ms-popup .ms-clear:hover { color: var(--c-primary); border-color: var(--c-primary); }
.ms-popup .ms-list { max-height: 230px; overflow-y: auto; margin-bottom: 6px; border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 4px 7px; }
.ms-popup .ms-list label { gap: 7px; padding: 3px 4px; font-size: 13px; }
.ms-popup .ms-foot { padding: 0; border: 0; background: transparent; gap: 8px; }
.ms-popup .ms-foot .btn-primary, .ms-popup .ms-foot .btn-ghost { flex: 0 0 auto; }

/* (R3-b) Cột Tên Khách tận nhà: canh giữa theo chiều dọc, trái theo chiều ngang */
#tn-table tbody td.tn-col-ten { vertical-align: middle; text-align: left; }

/* (R4-#4) Tổng quan: ô Từ ngày / Đến ngày gọn 1 hàng (flatpickr không kéo full-width) */
.date-mode { flex-wrap: wrap; row-gap: 8px; }
.date-mode form { flex-wrap: nowrap !important; }
.date-mode input.form-input, .date-mode input.flatpickr-input { width: 132px !important; min-width: 0 !important; }
/* Cột ID group trong Danh sách kỹ thuật (R4-#2) */
.dm-idcell { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--c-text-soft); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* (R4-#3) Phân quyền cột Xem/Sửa/Ẩn trong ma trận vai trò */
.pq-col-toggle { font-size: 12px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface-2); color: var(--c-text-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.pq-col-toggle:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pq-col-row > td { background: var(--c-surface-2); padding: 10px 14px !important; }
.pq-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.pq-col-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface); }
.pq-col-name { flex: 1; font-weight: 600; color: var(--c-text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-col-ck { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; color: var(--c-text); }
.pq-col-ck input { margin: 0; }

/* ====== (R6 #9) Modal Ma trận phân quyền — thiết kế lại ====== */
.modal:has(.pq-matrix-wrap) { width: 780px; max-width: 96vw; }
.pq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }
.pq-fld { display: flex; flex-direction: column; gap: 5px; }
.pq-fld > span { font-size: 12px; font-weight: 600; color: var(--c-text-soft); }
.pq-fld .req { color: var(--c-danger); font-style: normal; }
.pq-fld { align-items: stretch; }
.pq-fld input, .pq-fld select {
  width: 100%; box-sizing: border-box;   /* 4 ô full-width, thẳng hàng (hết lệch ô Trạng thái) */
  padding: 9px 11px; border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-surface-2); color: var(--c-text); font-size: 13px; font-family: inherit; outline: none;
  height: 40px;
}
.pq-fld input:focus, .pq-fld select:focus { border-color: var(--c-primary); background: var(--c-surface); }
.pq-fld input:disabled { color: var(--c-text-mute); opacity: .7; }

.pq-matrix-wrap { border: 1px solid var(--c-border); border-radius: 12px; overflow: auto; max-height: 52vh; }
.pq-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.pq-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: var(--c-surface-2);
  padding: 9px 8px; text-align: center; font-weight: 700; color: var(--c-text);
  border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.pq-matrix thead th.pq-th-tab { text-align: left; padding-left: 14px; }
.pq-matrix tbody td { padding: 8px; text-align: center; border-bottom: 1px solid var(--c-border); }
.pq-matrix tbody tr:last-child td { border-bottom: 0; }
.pq-matrix tbody tr:hover td { background: var(--c-primary-soft); }
/* v91 (Hòa 17/07): nhãn dài trong ma trận quyền / Phân quyền cột TỰ XUỐNG DÒNG — hết tràn ngang xấu
 * (vd "Thanh thẻ tổng đầu trang (Doanh thu · Đơn đã làm · Đơn gãy · Hẹn lịch · Cuộc gọi)") */
.pq-matrix .pq-tab-name { text-align: left; padding-left: 14px; font-weight: 600; color: var(--c-text); white-space: normal; word-break: break-word; line-height: 1.35; min-width: 150px; }
.pq-matrix .pq-tab-name i { width: 18px; text-align: center; margin-right: 6px; color: var(--c-text-soft); }
.pq-matrix input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--c-primary); margin: 0; vertical-align: middle; }
/* Hàng tick-cả-cột nằm ngay dưới tiêu đề */
.pq-matrix thead tr.pq-allrow th, .pq-matrix .pq-allrow td {
  position: sticky; top: 38px; z-index: 1; background: var(--c-surface);
  border-bottom: 2px solid var(--c-border); padding: 6px 8px;
}
.pq-matrix .pq-allrow td:first-child { text-align: left; padding-left: 14px; font-size: 12px; font-weight: 600; color: var(--c-text-mute); white-space: nowrap; }
.pq-matrix .pq-allrow td:first-child i { margin-right: 5px; color: var(--c-primary); }
.pq-ct-chk { accent-color: var(--c-success) !important; }
.pq-ct-none { color: var(--c-text-mute); }
.pq-col-tb { font-size: 13px; }
.pq-hint { font-size: 12px; color: var(--c-text-soft); margin: 12px 2px 0; display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; }
.pq-hint i { color: var(--c-primary); margin-top: 2px; }
@media (max-width: 640px) { .pq-form { grid-template-columns: 1fr; } }

/* ===== MOBILE bổ sung (v17) — dùng NHẬP/SỬA đầy đủ trên điện thoại ===== */
@media (max-width: 640px) {
  /* Ô nhập đủ to + CHẶN iOS tự phóng to khi focus (font phải >=16px) */
  .content input:not([type=checkbox]):not([type=radio]),
  .content select, .content textarea,
  .modal input:not([type=checkbox]):not([type=radio]), .modal select, .modal textarea,
  .dt-inline-text, .dt-inline-date, .dt-inline-select, .dt-edit-area { font-size: 16px !important; }

  /* Bảng: cuộn ngang mượt để xem/sửa đủ cột.
     v69 (Hòa #2 — "mobile cuộn dọc là tiêu đề trôi theo, loạn"): BỎ -webkit-overflow-scrolling: touch —
     thuộc tính này trên iPhone (mọi trình duyệt iOS) tạo lớp cuộn riêng làm position:sticky BÊN TRONG
     khung chết → tiêu đề bảng (thead) + cột dính của Lịch làm việc trôi theo nội dung. iOS 13+ vốn đã
     cuộn mượt mặc định nên bỏ không mất gì; desktop không có thuộc tính này nên trước giờ không sao. */
  .table-wrap, .goi-table-wrap, .llv-wrap, .table-responsive {
    overflow-x: auto !important;
  }

  /* Modal: nội dung cuộn được trên màn nhỏ (nút giữ kích thước gọn, KHÔNG phình) */
  .modal { max-height: calc(100vh - 20px) !important; }
  .modal-body { max-height: calc(100vh - 165px); overflow-y: auto; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }

  /* Thanh công cụ: nút gọn, TỰ XUỐNG DÒNG khi hẹp (không tràn che nút, không phình bự) */
  .table-toolbar { row-gap: 6px; }
  .table-toolbar .tt-right, .goi-actions, .goi-tabs { flex-wrap: wrap; }
  .tt-right .tt-select, .tt-right .ms-toggle, .tt-right .btn-primary, .tt-right .btn-ghost { white-space: nowrap; flex: 0 0 auto; }
}


/* ============================================================
   v23: DROPLIST PILL TÙY BIẾN (.dtcd) — THAY popup native của .dt-inline-select.
   Chrome/Win không cho bo góc + giãn cao TỪNG <option> native → tự vẽ panel pill.
   Mỗi option = 1 pill BO TRÒN, GIÃN rộng, dễ nhìn & chọn. Màu lấy từ option
   (style.background của Kỹ thuật, hoặc data-mau của Tình trạng). JS ở app.js.
   ============================================================ */
.dtcd-pop {
  position: fixed; z-index: 99999;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e3e2dc);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  padding: 9px;
  display: flex; flex-direction: column; gap: 5px;
  max-height: 58vh; overflow-y: auto; overscroll-behavior: contain;
  width: max-content; min-width: 140px; max-width: 92vw;
  animation: dtcd-in .12s ease-out;
}
@keyframes dtcd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dtcd-item {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 16px;
  border: none; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer;
  background: var(--c-surface-2, #eef0f3); color: var(--c-text, #1f2937);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .12s, transform .07s, box-shadow .12s;
}
.dtcd-item:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.dtcd-item:active { transform: translateY(0); }
.dtcd-item.sel { box-shadow: 0 0 0 2.5px var(--c-primary, #3b82f6); }
.dtcd-item.dtcd-empty { background: var(--c-surface, #fff); color: var(--c-text-soft, #6b7280); border: 1.5px dashed var(--c-border, #d1d5db); font-weight: 600; }
[data-mode="dark"] .dtcd-pop { background: #1e293b; border-color: #334155; }
[data-mode="dark"] .dtcd-item { background: #334155; color: #f1f5f9; }
[data-mode="dark"] .dtcd-item.dtcd-empty { background: #1e293b; color: #cbd5e1; border-color: #475569; }

/* v23.1: pill KHÔNG cắt chữ (panel đã width:max-content nên tự rộng theo pill dài nhất) */
.dtcd-item { overflow: visible; text-overflow: clip; }
/* #4 (Hòa 09/07): ô tìm nhanh trong droplist chọn (Kỹ thuật…) */
.dtcd-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  padding: 7px 12px; border: 1px solid var(--c-border, #d1d5db);
  border-radius: 999px; font-size: 13px; outline: none;
  background: var(--c-surface-2, #eef0f3); color: var(--c-text, #1f2937);
}
.dtcd-search:focus { border-color: var(--c-primary, #3b82f6); }
[data-mode="dark"] .dtcd-search { background: #334155; color: #f1f5f9; border-color: #475569; }
/* #1 (Hòa đợt2): nút ẩn cột riêng theo tài khoản (cạnh nút lọc ▼) */
.nut-an-cot { margin-left: 2px; border: none; background: transparent; color: var(--c-text-mute, #9aa4b2);
  font-size: 10px; cursor: pointer; padding: 2px 4px; border-radius: 5px; line-height: 1;
  vertical-align: middle; opacity: .45; transition: all .15s; }
.nut-an-cot:hover { background: var(--c-primary-soft, #eef2ff); color: #d33; opacity: 1; }

/* ===== v48 (#3b): KÉO CHỌN Ô + bộ đếm (kiểu Google Sheet) ===== */
body.rt-selecting { user-select: none; -webkit-user-select: none; cursor: cell; }
.data-table tbody td.rt-sel-cell {
  background: var(--c-primary-soft, #dbeafe) !important;
  box-shadow: inset 0 0 0 1px var(--c-primary, #3b82f6);
}
[data-mode="dark"] .data-table tbody td.rt-sel-cell { background: rgba(59,130,246,.28) !important; }
.rt-cnt-pill {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  background: var(--c-surface, #fff); color: var(--c-text, #111);
  border: 1px solid var(--c-border, #cbd5e1); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: nowrap; user-select: none;
}
.rt-cnt-pill b { color: var(--c-primary, #3b82f6); font-weight: 800; }
.rt-cnt-pill .rt-cnt-x { margin-left: 8px; cursor: pointer; color: var(--c-text-mute, #94a3b8); font-weight: 700; }
/* v64: dọn đuôi ".rt-" DANG DỞ cuối file (file cũ bị công cụ ghi cắt cụt từ trước) — selector rác
   đứng trước khối mới sẽ NUỐT rule kế tiếp (parser hiểu thành ".rt- .tk-mobile-btn") nên phải bỏ. */
/* ============================================================
   v64 (Hòa #3 — MOBILE): trả lại thao tác như máy tính trên điện thoại
   1) Nút toolbar CUỘN NGANG (không xuống dòng dồn cục vỡ layout)
   2) Ô bảng KHÔNG bó chữ — bảng giãn rộng thật, kéo ngang xem đủ cột
   3) Nút 🔍 + thanh tìm kiếm riêng cho màn nhỏ (desktop giữ nguyên)
   ============================================================ */
.tk-mobile-btn { display: none; }               /* desktop: đã có ô tìm trên topbar */
.topbar-search-mobile { display: none; }
@media (max-width: 900px) {
  .tk-mobile-btn { display: grid; place-items: center; }
  .topbar-search-mobile:not([hidden]) {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 12px 0; padding: 9px 12px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 10px; color: var(--c-text-mute);
  }
  .topbar-search-mobile input {
    flex: 1; border: none; outline: none; background: transparent;
    color: var(--c-text); font: inherit; font-size: 16px;   /* ≥16px để iOS không tự zoom */
  }
}
@media (max-width: 640px) {
  /* v65 (Hòa #6) — nắn lại đợt mobile trước:
     (1) Thanh NÚT công cụ TRỞ LẠI xếp gọn NHIỀU HÀNG như cũ. Bản trước ép 1 hàng nowrap: cụm chữ
         "Tổng N dòng..." bên trái không co được → cả cụm nút bên phải bị ĐẨY VĂNG khỏi màn hình,
         nhìn như "mất nút". Nút nằm yên nhiều hàng = không mất cái nào.
     (2) Chữ TRONG nút / ô chọn: CẤM xuống dòng — hết cảnh chữ gãy dòng phình border nút.
     (3) Thanh TAB CON (pq-subtabs / goi-tabbar / goi-tabs): đúng 1 HÀNG + cuộn ngang (yêu cầu Hòa).
     (4) Bảng giữ nguyên: ô 1 dòng, kéo ngang trong .table-wrap. Mọi thứ khác không đổi. */
  /* v168 (Hòa 29/07): CHỈ nới TAB CON — thêm .tab-strip/.date-tabs (Tổng quan) vào nhóm "1 hàng cuộn ngang"
     cùng .goi-tabs/.goi-tabbar/.pq-subtabs. CỤM NÚT .tt-right/.goi-actions GIỮ NGUYÊN cách v65 (xuống hàng
     khi hẹp — KHÔNG mất nút, KHÔNG cắt popup lọc multi-select); chỉ đảm bảo CHỮ trong nút/mục không xuống
     dòng phình border. "Mọi thứ khác giữ nguyên" đúng lời Hòa. */
  .table-toolbar { flex-wrap: wrap; align-items: center; row-gap: 6px; }
  .table-toolbar .tt-left { flex: 1 1 100%; min-width: 0; }
  .table-toolbar .tt-right { width: 100%; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: 6px; overflow: visible; padding-bottom: 0; }
  .table-toolbar .tt-right > * { flex: 0 0 auto; max-width: 100%; }
  .table-toolbar .tt-right .btn-primary, .table-toolbar .tt-right .btn-ghost, .table-toolbar .tt-right .btn-danger,
  .table-toolbar .tt-right .btn-sm, .table-toolbar .tt-right .tt-select, .table-toolbar .tt-right .ms-toggle,
  .goi-actions .btn-primary, .goi-actions .btn-ghost, .goi-actions .btn-danger, .goi-actions .btn-sm,
  .goi-actions .tt-select, .goi-actions .ms-toggle,
  .tab-strip button, .date-tab,
  .content .btn-primary, .content .btn-ghost, .content .btn-danger { white-space: nowrap; }
  .goi-actions { flex-wrap: wrap; gap: 6px; overflow: visible; padding-bottom: 0; }
  .goi-actions > * { flex: 0 0 auto; }
  /* (3) TAB CON: 1 hàng, cuộn ngang, mục không xuống dòng (v168: + tab-strip/date-tabs của Tổng quan) */
  .goi-tabs, .goi-tabbar, .pq-subtabs, .tab-strip, .date-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .goi-tabs > *, .goi-tabbar > *, .pq-subtabs > *, .tab-strip > *, .date-tabs > * { flex: 0 0 auto; white-space: nowrap; }
  /* (4) Ô bảng giữ 1 dòng như máy tính → bảng rộng thật, .table-wrap đã overflow-x:auto nên kéo ngang mượt.
     Ô cố ý dài (.dt-dai) vẫn ellipsis "…" bấm bung như cũ. */
  .data-table thead th, .data-table tbody td { white-space: nowrap; }
}

/* ============================================================
   v180 (Hòa 31/07) — ĐIỆN THOẠI: tab "Quản lý người dùng → Vai trò" BỊ CẮT MẤT NÚT.
   Bệnh: dòng đầu mỗi thẻ vai trò (.pq-card-head) là 1 hàng ngang KHÔNG cho xuống dòng, gồm
     [mã vai trò] [tên vai trò] [ô Mã kích hoạt dài] [trạng thái] [nút Sao chép / Sửa / Xóa].
     Trên màn 390px, cụm nút bị đẩy ra tận 571px — nằm NGOÀI màn hình, mà khung nội dung
     không cho kéo ngang → Hòa "không kéo qua coi trọn nút được". Tên vai trò cũng bị bóp
     gãy dòng ("Bán / hàng").
   Chữa: CHỈ trên màn ≤640px cho dòng này xuống hàng; mã kích hoạt dài thì tự ngắt trong ô.
     Máy tính/tablet giữ nguyên 100% (không đụng tới thẻ, màu, khoảng cách).
   ============================================================ */
@media (max-width: 640px) {
  .pq-card-head { flex-wrap: wrap; row-gap: 8px; gap: 8px 10px; }
  .pq-card-head .pq-name { min-width: 0; }
  .pq-card-head .pq-mkh { max-width: 100%; overflow-wrap: anywhere; }
  .pq-card-head .pq-actions { margin-left: auto; flex: 0 0 auto; }
}