.intake-help { color: var(--text-muted); font-size: calc(13px * var(--font-scale)); line-height: 1.6; margin: 8px 0 14px; }
#intakeFollowupButton.active, #crmFollowupButton.active, #crmStaleButton.active { background: var(--accent-light); border-color: var(--accent); color: var(--primary); }

.legacy-match-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--warning-bg); border: 1px solid var(--warning); border-radius: 8px;
  padding: 10px 14px; margin: 10px 0; font-size: calc(13px * var(--font-scale));
}
.legacy-match-card[hidden] { display: none; }
.legacy-match-card strong { color: var(--primary); }
.legacy-match-card-student {
  background: #FEE2E2; border-color: #B91C1C;
}
.legacy-match-card-student strong { color: #B91C1C; }

.crm-lead-list-panel { min-width: 0; margin-top: 12px; }

.crm-lead-detail-dialog {
  max-height: calc(100dvh - 40px); box-sizing: border-box;
  overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 20px;
  color: var(--text); background: white; box-shadow: 0 16px 60px #102b4d33;
}
/* Same element also carries .intake-dialog (width: min(900px, ...)) -- that
   rule is defined further down this file and wins ties on source order at
   equal specificity, so this needs the extra element-selector specificity
   point to reliably override it regardless of file order. */
dialog.crm-lead-detail-dialog { width: min(1600px, calc(100vw - 32px)); margin: auto; }   /* margin: the global * reset pinned it left */
@media (max-width: 600px) { dialog.crm-lead-detail-dialog { width: calc(100vw - 16px); padding: 12px; } }
.crm-lead-detail-dialog::backdrop { background: #14253670; }

/* .table-scroll had NO rule anywhere — on narrow/mobile viewports the wide
   grid just overflowed its ancestors with no way to pan to the rest of it.
   overflow-x:auto here is what actually makes "kéo ngang" work; touch-action
   keeps horizontal drags from being swallowed by the page's own scrolling. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }

/* Legacy-CSF-style Leads grid: full-width table, wrapped in a scroll container
   so the ~13 columns don't force the whole page wider on smaller screens. */
.crm-lead-grid { width: 100%; min-width: 1050px; border-collapse: collapse; font-size: calc(12.5px * var(--font-scale)); }
.crm-lead-grid th, .crm-lead-grid td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.crm-lead-grid th { background: #F8FAFC; }
.crm-lead-grid-filters th { background: #fff; padding: 3px 6px; }
.crm-lead-grid-filters select, .crm-lead-grid-filters input {
  width: 100%; min-width: 64px; box-sizing: border-box; font-size: calc(11px * var(--font-scale)); padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 4px; background: white; color: var(--text);
}
.crm-lead-row { cursor: default; }
.crm-lead-row:hover { background: #F8FAFC; }
.crm-lead-row.selected { background: var(--accent-light); }
.crm-lead-expand { width: 20px; text-align: center; cursor: pointer; color: var(--text-muted); user-select: none; }
.crm-lead-check { width: 20px; text-align: center; }
.crm-bulk-bar {
  display: flex; align-items: center; gap: 10px; background: var(--accent-light);
  border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
  font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--primary);
}
.crm-bulk-bar[hidden] { display: none; }
.crm-lead-name { font-weight: var(--fw-medium); color: var(--primary); cursor: pointer; white-space: normal; }
.crm-lead-name:hover { text-decoration: underline; }
.crm-lead-item-stage { font-weight: var(--fw-medium); color: var(--accent); }
.legacy-cms-badge { display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 4px; font-size: calc(8.5px * var(--font-scale)); line-height: 1.5; font-weight: var(--fw-strong); letter-spacing: 0.2px; white-space: nowrap; vertical-align: super; cursor: help; }
.lead-renew-badge { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; cursor: help; }
.legacy-cms-lead { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.legacy-cms-student { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.lead-legacy-banner { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; font-size: calc(13px * var(--font-scale)); }
.lead-legacy-banner[hidden] { display: none; }
.lead-legacy-banner strong { font-size: calc(14px * var(--font-scale)); }
.lead-legacy-lead { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.lead-legacy-student { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.lead-legacy-facts { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.lead-legacy-banner-hint { opacity: .8; font-size: calc(12px * var(--font-scale)); }
.crm-potential-badge { font-weight: var(--fw-strong); text-transform: uppercase; font-size: calc(11px * var(--font-scale)); }
.crm-lead-expand-row td { background: #FBFDFF; padding: 8px 8px 12px 30px; }
.crm-lead-expand-table { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--font-scale)); background: #fff; }
.crm-lead-expand-table th, .crm-lead-expand-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: normal; }
.crm-lead-expand-table th { background: #EDF2F7; }

/* Lead path: chevrons joined end to end; a step that can be clicked moves the lead there. */
.lead-stage-bar { display: flex; margin: 4px 0 12px; border-radius: 18px; overflow: hidden; }
.lead-stage-step {
  --tip: 13px;
  position: relative; flex: 1; min-width: 0; margin: 0 calc(3px - var(--tip)) 0 0; border: 0; text-align: center;
  padding: 9px 6px 9px calc(var(--tip) + 8px); background: #E8EEF4; color: var(--accent); font: inherit;
  font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-strong); text-transform: uppercase; line-height: 1.25;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
}
.lead-stage-step:first-child { padding-left: 12px; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.lead-stage-step:last-child { margin-right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%); }
.lead-stage-step.done { background: #DCFCE7; color: #15803D; }
.lead-stage-step.current { background: var(--accent); color: #fff; }
.lead-stage-step.is-clickable { cursor: pointer; }
.lead-stage-step.is-clickable:hover, .lead-stage-step.is-clickable:focus-visible { background: #CFE3F5; outline: none; }
.lead-stage-step.done.is-clickable:hover, .lead-stage-step.done.is-clickable:focus-visible { background: #BBF7D0; }
.lead-stage-step.current.is-clickable:hover, .lead-stage-step.current.is-clickable:focus-visible { background: var(--primary-hover); }
.lead-actions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
/* Compact like the stage pipeline above it, not full-size buttons. */
.lead-actions-row .btn { padding: 4px 10px; font-size: calc(11.5px * var(--font-scale)); }
.lead-detail-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
.lead-profile-panel h4 { font-size: calc(12.5px * var(--font-scale)); text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; }
.lead-profile-panel h4:first-child { margin-top: 0; }
/* Compact bordered label/value table, matching the legacy CRM's Profile
   Info / Lead Detail card — short labels (title attr carries the full
   meaning as a tooltip) instead of long Vietnamese phrases that wrap. */
.lead-info-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(12.5px * var(--font-scale)); }
.lead-info-table th, .lead-info-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.lead-info-table th { width: 84px; background: #EEF3F8; color: var(--text-muted); font-weight: var(--fw-medium); cursor: default; }
.lead-info-table td { word-break: break-word; }
.lead-name-actions { display: flex; gap: 6px; margin-top: 6px; }
.lead-info-table .legacy-hint { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.lead-info-table td select, .lead-info-table td input[type="date"], .lead-info-table td input[type="text"] { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: calc(12px * var(--font-scale)); background: white; color: var(--text); }
/* Ngày/Tháng/Năm riêng — luôn hiện đúng thứ tự Việt Nam, không phụ thuộc
   định dạng ngày của Windows/Chrome trên máy đang dùng (xem dmyGroup()). */
.dmy-group { display: inline-flex; gap: 4px; }
.dmy-group select { width: auto; min-width: 0; flex: 1; padding: 4px 3px; border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: calc(12px * var(--font-scale)); background: white; color: var(--text); }
.lead-cms-sync-panel { margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: #FAFBFD; }
.lead-cms-sync-panel p { margin: 0 0 6px; }

.activity-dialog { width: min(480px, calc(100vw - 32px)); }
.activity-dialog-quals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.activity-dialog-quals select { width: 100%; min-width: 0; }
#leadActivityDialog { width: min(680px, calc(100vw - 32px)); margin: auto; }
#leadActivityDialog.call-queue-mode { width: min(980px, calc(100vw - 32px)); }
.call-queue-mode .activity-dialog-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.call-queue-head { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 8px; margin-bottom: 12px; }
.call-queue-head[hidden], .call-queue-info[hidden] { display: none; }
.call-queue-tile { padding: 8px 12px; border-radius: 8px; color: #1f2937; }
.call-queue-tile span { display: block; font-size: calc(11px * var(--font-scale)); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.call-queue-tile b { font-size: calc(24px * var(--font-scale)); font-variant-numeric: tabular-nums; }
.call-queue-total { background: #fde68a; }
.call-queue-current { background: #bbf7d0; }
.call-queue-time { background: #fecaca; }
.call-queue-info { font-size: calc(13px * var(--font-scale)); }
.call-queue-table { width: 100%; border-collapse: collapse; }
.call-queue-table th { text-align: left; font-weight: var(--fw-medium); color: var(--text-muted); padding: 5px 8px 5px 0; vertical-align: top; white-space: nowrap; width: 1%; }
.call-queue-table td { padding: 5px 0; word-break: break-word; }
.call-queue-table tr + tr th, .call-queue-table tr + tr td { border-top: 1px solid var(--border); }
.call-queue-table input[type="text"], .call-queue-table input[type="email"], .call-queue-table select {
  width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: white; }
.call-queue-table .dmy-group { display: flex; gap: 4px; }
.call-queue-table .dmy-group select { min-width: 0; padding: 4px 2px; }
.call-queue-saved { min-height: 1.2em; margin: 4px 0 0; color: #15803d; }
.activity-dial-btn { margin-right: auto; }
.activity-dial-btn[hidden] { display: none; }
.call-queue-phone { font-weight: var(--fw-strong); font-size: calc(16px * var(--font-scale)); }
.call-queue-recent-title { margin: 12px 0 4px; font-weight: var(--fw-strong); color: var(--text-muted); font-size: calc(12px * var(--font-scale)); text-transform: uppercase; }
.call-queue-recent { list-style: none; padding: 0; margin: 0; }
.call-queue-recent li { padding: 5px 0; border-top: 1px solid var(--border); word-break: break-word; }
.call-queue-recent li span { display: block; color: var(--text-muted); font-size: calc(11.5px * var(--font-scale)); }
@media (max-width: 760px) {
  .call-queue-mode .activity-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .activity-dialog-quals { grid-template-columns: minmax(0, 1fr); }
}
.activity-next { margin-top: 4px; }
.activity-next-kinds { margin: 6px 0 8px; flex-wrap: wrap; gap: 6px 16px; }
.activity-next-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.activity-next-fields input[type="time"], .activity-next-fields > select {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; font: inherit;
  font-size: calc(12px * var(--font-scale)); background: white; color: var(--text);
}
.activity-next-fields > select[hidden] { display: none; }
.activity-next .intake-help { margin-top: 6px; }
.appointment-date { display: flex; margin-top: 4px; }
#leadAppointmentDialog .activity-dialog-note-label { margin-top: 10px; }
#leadAppointmentDialog input[type="time"] {
  display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; background: white; color: var(--text);
}
.activity-dialog-types { display: flex; gap: 16px; margin: 10px 0 14px; font-size: calc(13.5px * var(--font-scale)); }
.activity-dialog-types label { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); cursor: pointer; }
.activity-dialog-note-label { display: block; font-weight: var(--fw-medium); font-size: calc(13px * var(--font-scale)); color: var(--text-muted); }
.activity-dialog-note-label textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; resize: vertical; }
.activity-dialog-note-label input[type="search"], .activity-dialog-note-label input[type="text"], .activity-dialog-note-label select {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; background: white; color: var(--text);
}

.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  position: relative; background: transparent; border: none; cursor: pointer;
  font-size: 20px; padding: 4px 8px; line-height: 1; color: inherit;
}
.notif-bell-badge {
  position: absolute; top: -2px; right: 2px; background: #DC2626; color: #fff;
  font-size: 10px; font-weight: var(--fw-strong); border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-height: 400px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px #10182833;
  z-index: 50; color: var(--text);
}
.notif-dropdown-title { font-weight: var(--fw-strong); font-size: calc(13px * var(--font-scale)); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.notif-item { padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: calc(13px * var(--font-scale)); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #F8FAFC; }
.notif-item-reason { color: var(--text-muted); font-size: calc(11.5px * var(--font-scale)); margin-top: 2px; }

/* display must stay scoped to [open] — an unconditional `display: flex` here
   would override the browser's own `dialog:not([open]) { display: none }`
   (author CSS always beats UA CSS), leaving the panel rendered in the page
   flow even after .close() removes the open attribute. */
.chat-dialog { width: min(760px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 60px)); padding: 16px; }
.chat-dialog[open] { display: flex; flex-direction: column; }
.chat-layout { display: flex; gap: 12px; flex: 1; min-height: 0; }
.chat-sidebar { width: 200px; flex: 0 0 200px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--border); padding-right: 10px; box-sizing: border-box; }
.chat-sidebar-section-title { font-size: calc(11px * var(--font-scale)); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-strong); margin: 10px 0 4px; }
.chat-sidebar-section-title:first-child { margin-top: 0; }
#chatContactSearch { width: 100%; box-sizing: border-box; padding: 5px 7px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: calc(12px * var(--font-scale)); }
.chat-thread-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: calc(12.5px * var(--font-scale)); }
.chat-thread-item:hover { background: #F8FAFC; }
.chat-thread-item.active { background: var(--accent-light); color: var(--primary); font-weight: var(--fw-medium); }
.chat-contact-role { color: var(--text-muted); font-size: calc(10.5px * var(--font-scale)); text-transform: uppercase; margin-left: 4px; }
.chat-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.chat-online-count { margin: 0 0 6px; }
.chat-thread-item .presence-dot { vertical-align: 1px; }
.chat-presence { margin-left: 10px; font-weight: 400; color: var(--text-muted); font-size: calc(12px * var(--font-scale)); white-space: nowrap; }
.chat-main-title { font-weight: var(--fw-strong); font-size: calc(13px * var(--font-scale)); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.chat-message { max-width: 80%; background: #F1F5F9; border-radius: 10px; padding: 6px 10px; align-self: flex-start; }
.chat-message-mine { align-self: flex-end; background: var(--accent-light); }
.chat-message-meta { font-size: calc(10.5px * var(--font-scale)); color: var(--text-muted); margin-bottom: 2px; }
.chat-message-body { font-size: calc(13px * var(--font-scale)); white-space: pre-wrap; word-break: break-word; }
.chat-composer { display: flex; gap: 8px; margin-top: 10px; }
.chat-composer textarea { flex: 1; resize: none; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: calc(13px * var(--font-scale)); }
@media (max-width: 600px) { .chat-layout { flex-direction: column; } .chat-sidebar { width: 100%; flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 8px; max-height: 140px; } }

.user-additional-campus-row { display: block; font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-medium); margin: 4px 0 12px; }
.user-additional-campus-row select { width: 100%; max-width: 320px; margin-top: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.user-additional-campus-row .intake-help { display: block; font-weight: 400; margin-top: 4px; }

.lead-relationship-actions { margin: 4px 0 10px; }
.relationship-mode-tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
.relationship-mode-tabs .btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--primary); }
.relationship-search-results { max-height: 160px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px; }
.relationship-search-results:empty { border: none; }
.relationship-search-item { padding: 7px 10px; cursor: pointer; font-size: calc(13px * var(--font-scale)); border-bottom: 1px solid var(--border); }
.relationship-search-item:last-child { border-bottom: none; }
.relationship-search-item:hover { background: #F8FAFC; }
.relationship-search-item.selected { background: var(--accent-light); font-weight: var(--fw-medium); cursor: default; }
.lead-history-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.lead-history-tab {
  border: 1px solid var(--border); background: #F8FAFC; padding: 6px 12px; border-radius: 6px 6px 0 0;
  cursor: pointer; font-size: calc(12.5px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--text-muted);
}
.lead-history-tab.active { background: #fff; color: var(--primary); border-bottom-color: #fff; }
/* Grid stretches .lead-history-panel to match the (taller, since gender/
   birthday/address/CMS panel were added) left column height by default —
   but the table-wrap's own fixed max-height left a gap below it instead of
   reaching the bottom. flex:1 lets it fill whatever height the row actually
   is, scrolling internally, so its bottom lines up with "Cập nhật". */
.lead-history-panel { display: flex; flex-direction: column; height: 100%; }
.lead-history-table-wrap { flex: 1; min-height: 200px; }
#leadHistoryTable { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--font-scale)); }
#leadHistoryTable th, #leadHistoryTable td { padding: 5px 7px; text-align: left; border-bottom: 1px solid var(--border); }
#leadHistoryTable th { background: #F8FAFC; white-space: nowrap; }
@media (max-width: 700px) {
  /* minmax(0, ...): a plain 1fr grows to the widest table and pushes the popup sideways on a phone. */
  .lead-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-history-panel { height: auto; }
  .lead-history-table-wrap { flex: none; max-height: 360px; }
}
.intake-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.intake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.intake-grid label, .intake-controls label { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-medium); }
.intake-grid input, .intake-grid textarea, .intake-grid select, .intake-controls input, .intake-controls select {
  width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: white; color: var(--text); font: inherit; font-weight: 400; box-sizing: border-box;
}
.intake-grid textarea { height: 36px; min-height: 36px; resize: vertical; }
.intake-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.intake-controls label { flex: 1 1 190px; }
.intake-controls button { min-height: 36px; }
.intake-result { font-size: calc(13px * var(--font-scale)); line-height: 1.6; white-space: pre-wrap; margin-top: 12px; }
.intake-warnings { white-space: pre-wrap; font-family: inherit; font-size: calc(12px * var(--font-scale)); max-height: 240px; overflow: auto; }
.intake-table-wrap { overflow-x: auto; margin-top: 6px; }
#intakeTable { min-width: 1250px; width: 100%; border-collapse: collapse; font-size: calc(12px * var(--font-scale)); line-height: 1.25; }
#intakeTable th, #intakeTable td { padding: 3px 6px; text-align: left; border-bottom: 1px solid var(--border); max-width: 170px; }
#intakeTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#intakeTable th { background: #edf3f8; white-space: nowrap; }
#intakeTable td:nth-child(2) { max-width: 150px; }
#intakeTable tr:hover td { background: #F8FAFC; }
.intake-fieldset:disabled { opacity: .65; }
.intake-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 20px; color: var(--text); background: white; box-shadow: 0 16px 60px #102b4d33; }
.intake-dialog::backdrop { background: #14253670; }
.intake-dialog-heading, .intake-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.intake-dialog-heading .card-title, .intake-list-heading .card-title { margin: 0; }
.intake-actions { display: flex; gap: 8px; }
#tab-import-leads > .card { padding: 16px; }
#tab-import-leads .intake-controls { gap: 8px; margin-bottom: 6px; }
#tab-import-leads .intake-help { margin: 4px 0; }
#tab-import-leads .intake-grid { margin: 8px 0; }
.intake-result:empty { display: none; }
.draft-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.draft-controls label { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; font-size: calc(14px * var(--font-scale)); }
.draft-controls select { width: 100%; min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 6px; }
.draft-controls > span { flex-basis: 100%; font-size: calc(12px * var(--font-scale)); color: var(--text-muted); }
.draft-controls .btn { padding: 7px 9px; }
.visit-import-picker { margin-bottom: 12px; }
.visit-import-results { display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.visit-import-option { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f4f7fa; border: 1px solid var(--border); border-radius: 5px; text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.visit-import-option:hover, .visit-import-option:focus-visible { background: #e4eff8; }
.visit-import-option span { font-size: calc(12px * var(--font-scale)); }
/* .compact-dialog (Thêm Khách Đến, Thêm lead thủ công, Thêm/Sửa tài khoản): one
   compact, even type scale -- every label 12px muted (no uppercase), every input
   13px, smaller buttons/spacing, centred (the global * { margin: 0 } reset had
   pinned dialogs to the top-left). */
.compact-dialog { width: min(820px, calc(100vw - 32px)); padding: 14px 18px; margin: auto; }
.compact-dialog .intake-dialog-heading { margin-bottom: 6px; }
.compact-dialog .intake-dialog-heading > :first-child { font-size: calc(15px * var(--font-scale)); font-weight: var(--fw-strong); color: var(--primary); margin: 0; }
.compact-dialog .btn { padding: 5px 10px; font-size: calc(12.5px * var(--font-scale)); min-height: 0; }
.compact-dialog .draft-controls { padding: 4px 0 8px; margin-bottom: 8px; gap: 6px; }
.compact-dialog .draft-controls > span { font-size: calc(11px * var(--font-scale)); }
.compact-dialog label, .compact-dialog .form-field label, .compact-dialog .user-additional-campus-row {
  font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); color: var(--text-muted);
  text-transform: none; letter-spacing: 0; gap: 3px; }
.compact-dialog .form-field label { margin-bottom: 3px; }
.compact-dialog input, .compact-dialog select, .compact-dialog textarea {
  padding: 5px 8px; font-size: calc(13px * var(--font-scale)); font-weight: 400; color: var(--text); border-radius: 6px; }
.compact-dialog textarea { height: 30px; min-height: 30px; }
.compact-dialog .intake-controls { gap: 8px; }
.compact-dialog .intake-controls button { min-height: 30px; }
.compact-dialog .intake-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; margin: 8px 0; }
.compact-dialog .intake-help { font-size: calc(11.5px * var(--font-scale)); margin: 3px 0 0; }
.compact-dialog .intake-help:empty { display: none; }
.compact-dialog .form-grid-4 { gap: 8px 10px; margin-top: 8px !important; }
.compact-dialog .form-actions { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
.compact-dialog .activity-dialog-note-label input { margin-top: 3px; padding: 5px 8px; font-size: calc(13px * var(--font-scale)); font-weight: 400; }
.compact-dialog input[type="file"] { padding: 4px 6px; }
#intakeExcelDialog .intake-controls { margin: 6px 0; }
@media (max-width: 850px) { .compact-dialog .intake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .compact-dialog .intake-grid { grid-template-columns: 1fr; } }
#leadEntryForm .visit-import-picker { margin-bottom: 4px; }
#leadEntryForm .visit-period-row label { flex: 0 1 220px; }
#leadEntryForm .visit-note-field { margin-top: 8px; }
#userDialog .intake-controls { margin-top: 10px; }
.user-additional-campus-row[hidden] { display: none; }
/* Searchable CMS staff picker (users.js renderCmsCombo) */
.cms-combo { position: relative; min-width: 0; }
.cms-combo > label { display: flex; flex-direction: column; }
.cms-combo-results { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 2px; max-height: 260px; overflow: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px #102b4d26; }
.cms-combo-results[hidden] { display: none; }
.cms-combo-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 6px 10px; border: 0;
  background: transparent; text-align: left; cursor: pointer; font-family: inherit; font-size: calc(12.5px * var(--font-scale)); color: var(--text); }
.cms-combo-option span { font-size: calc(11.5px * var(--font-scale)); color: var(--text-muted); }
.cms-combo-option em { font-size: calc(11px * var(--font-scale)); color: #B45309; font-style: normal; }
.cms-combo-option:hover, .cms-combo-option.active { background: #E4EFF8; }
.cms-combo-clear { color: var(--danger); font-weight: var(--fw-medium); border-bottom: 1px solid var(--border); }
.cms-combo-empty { padding: 6px 10px; font-size: calc(11.5px * var(--font-scale)); color: var(--text-muted); }
#tab-leads .stats-row { gap: 8px; margin-bottom: 10px; }
#tab-leads .stat-chip { padding: 8px 12px; }
#tab-leads > .card { padding: 16px; }
#tab-leads .card-title { flex-wrap: wrap; gap: 8px; }
#leadsTable th, #leadsTable td { padding: 7px 8px; }
@media (max-width: 850px) { .intake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .intake-grid { grid-template-columns: 1fr; } .intake-controls { align-items: stretch; } .intake-list-heading { flex-wrap: wrap; } .intake-dialog { padding: 14px; } }

/* Lead từ chat Facebook (chat-leads.js) */
.chat-lead-table td { vertical-align: top; }
.chat-lead-table select, .chat-lead-table input[type="text"] { min-width: 110px; }
.chat-lead-msg { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-lead-actions { white-space: nowrap; }
.chat-lead-actions .btn + .btn { margin-left: 6px; }
#chatLeadConfigCard .chat-lead-sub { margin: 14px 0 6px; font-size: 0.9rem; font-weight: var(--fw-medium); }
.chat-lead-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
#chatLeadConfigCard .intake-controls label { flex: 0 1 240px; }
.chat-lead-kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.chat-lead-kw { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); }
.chat-lead-kw input { flex: 1 1 auto; min-width: 0; font-weight: 400; }
.chat-lead-pages input[type="text"] { width: 100%; min-width: 160px; }
@media (max-width: 600px) {
  /* Chat-lead queue as stacked cards on a phone instead of a wide table */
  .chat-lead-table { min-width: 0 !important; }
  .chat-lead-table thead { display: none; }
  .chat-lead-table, .chat-lead-table tbody, .chat-lead-table tr, .chat-lead-table td { display: block; width: 100%; }
  .chat-lead-table tr { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
  .chat-lead-table td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
  .chat-lead-table td::before { content: attr(data-label); font-weight: var(--fw-medium); color: var(--text-muted); }
  .chat-lead-table td.chat-lead-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .chat-lead-table td.chat-lead-actions::before { content: none; }
  .chat-lead-actions .btn + .btn { margin-left: 0; }
  .chat-lead-table select, .chat-lead-table input[type="text"] { min-width: 0; width: 100%; }
  .chat-lead-msg { max-width: none; }
  #chatLeadTabs { flex-wrap: wrap; }
  #chatLeadTabs .btn { white-space: nowrap; }
  .intake-controls label { flex: 1 1 140px; }
}

/* Chi phí MKT theo kênh (mkt-costs.js) */
.mkt-cost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin-top: 6px; }
.mkt-cost-item { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); }
.mkt-cost-item input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-weight: 400; }
.mkt-cost-auto { font-weight: 400; color: var(--text-muted); padding: 7px 0; }
.mkt-cost-total { grid-column: 1 / -1; font-weight: var(--fw-medium); font-size: calc(13px * var(--font-scale)); }
.ads-name { max-width: 260px; white-space: normal; font-size: calc(11px * var(--font-scale)); line-height: 1.3; }
.ads-name-cell { min-width: 240px; }

/* User dialog: "Đăng nhập bằng mật khẩu CMS" */
.user-cms-password { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-medium); }
.user-cms-password input[type="checkbox"] { margin-right: 6px; }
.user-cms-password .intake-help { font-weight: 400; margin: 0; }

/* Users tab: presence + campus networks (users.js) */
.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #CBD5E1; margin-right: 6px; }
.presence-dot.on { background: #16A34A; box-shadow: 0 0 0 3px #16A34A33; }
.place-campus { font-weight: var(--fw-medium); color: var(--success); }
.place-outside { font-weight: var(--fw-medium); color: var(--text-muted); }
#usersTable td.user-actions { white-space: nowrap; }
#usersTable .crm-lead-grid-filters select { max-width: 150px; }
.campus-ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 16px; }
.campus-ip-item { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--font-scale)); font-weight: var(--fw-medium); }
.campus-ip-row { display: flex; gap: 6px; }
.campus-ip-row input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-weight: 400; }

/* Phone status card (crm-leads.js checkLegacyMatchForSearch) */
.phone-status-line + .phone-status-line { margin-top: 4px; }
.phone-status-student strong { color: #B91C1C; }
.phone-status-none { color: var(--success); font-weight: var(--fw-medium); }
.legacy-match-card .phone-status-line .btn { margin-left: 6px; }
.ads-id-hint { font-weight: 400; min-height: 1em; }
/* Import Leads list: the action buttons and the CMS/CSF badge must never be cut by the cell's ellipsis. */
#intakeTable td:last-child { max-width: none; overflow: visible; }
#intakeTable td:has(.legacy-cms-badge) { max-width: 240px; white-space: normal; }
/* A phone whose Messenger chat waits in the queue: the search card points there, and that row lights up. */
.phone-status-chat { color: #075985; }
.intake-chat-note { color: #075985; }
#chatLeadBody tr.chat-lead-highlight td { background: #e0f2fe; transition: background 0.4s ease; }

/* Workspaces (users.js) */
.workspace-roles-title { margin: 16px 0 6px; font-size: calc(13px * var(--font-scale)); font-weight: var(--fw-strong); }
.workspace-centers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px;
  max-height: 360px; overflow-y: auto; margin: 8px 0; padding: 6px 0; }
.workspace-centers label { display: flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--font-scale)); }
.workspace-centers label.taken { color: var(--text-muted); }
.ws-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #FEF3C7; color: #92400E;
  font-size: calc(10.5px * var(--font-scale)); font-weight: var(--fw-medium); }

/* User guide ("?" in the header, help.js) */
.help-dialog { width: min(980px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 48px)); margin: auto; overflow: hidden; }
.help-dialog[open] { display: flex; flex-direction: column; }
/* Only the contents scroll (and the contents list), never the whole dialog. */
.help-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
.help-toc { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; border-right: 1px solid var(--border); padding-right: 8px; }
.help-toc-item { font: inherit; font-size: calc(12.5px * var(--font-scale)); text-align: left; padding: 7px 10px; border: 0;
  border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.help-toc-item:hover { background: #F1F5F9; color: var(--text); }
.help-toc-item.active { background: var(--accent-light); color: var(--primary); font-weight: var(--fw-medium); }
.help-body { overflow-y: auto; min-height: 0; padding-right: 6px; position: relative; font-size: calc(13.5px * var(--font-scale)); line-height: 1.6; }
.help-section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.help-section:last-child { border-bottom: 0; }
.help-section h3 { font-size: calc(15px * var(--font-scale)); font-weight: var(--fw-strong); color: var(--primary); margin: 0 0 6px; }
.help-section p { margin: 0 0 6px; }
.help-section ul, .help-section ol { margin: 0 0 6px; padding-left: 20px; }
.help-section li { margin-bottom: 3px; }
.help-section strong { font-weight: var(--fw-medium); color: var(--text); }
.help-section table { border-collapse: collapse; margin: 6px 0; font-size: calc(12.5px * var(--font-scale)); }
.help-section th, .help-section td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; }
.help-section th { background: #F8FAFC; font-weight: var(--fw-strong); }
@media (max-width: 700px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .help-toc { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 6px; }
  .help-toc-item { flex: none; white-space: nowrap; }
}

/* Zalo ZNS in the SMS window and its Admin panel (zns.js) */
.activity-zns { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #F8FAFC; display: flex; flex-direction: column; gap: 8px; }
.activity-zns[hidden], #activityZnsForm[hidden] { display: none; }
.activity-zns-head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.activity-zns-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.activity-zns-fields input { width: 100%; }
.activity-zns-preview { white-space: pre-wrap; font-size: 12.5px; background: #fff; border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin: 0; }
.activity-zns-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.activity-zns-recent { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-muted); }
.activity-zns-recent:empty { display: none; }
.zns-status { font-weight: var(--fw-medium); }
.zns-delivered { color: var(--success); }
.zns-failed, .zns-unknown { color: var(--danger); }
.zns-accepted, .zns-sending { color: var(--accent); }
.zns-subtitle { margin: 16px 0 6px; font-size: 14px; }
.zns-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; }
.zns-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.zns-form .zns-check { flex-direction: row; align-items: center; gap: 6px; }
.zns-form .zns-wide { grid-column: 1 / -1; }
.zns-form-actions { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; }
.zns-params { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.zns-param { display: flex; align-items: center; gap: 6px; }
.zns-param-no { min-width: 28px; color: var(--text-muted); font-family: monospace; }
.zns-server-status { color: var(--warning); font-weight: var(--fw-medium); }