:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --line: #e4e6ea;
  --line-strong: #d3d6dc;
  --ink: #16181d;
  --ink-2: #4b5059;
  --ink-3: #80858f;
  --accent: #1f4fd1;
  --accent-soft: #e9effc;
  --danger: #c4332b;
  --danger-soft: #fcecea;
  --warn: #9a6200;
  --warn-soft: #fdf3dc;
  --ok: #187a3e;
  --ok-soft: #e6f4eb;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);
  /* Viền nổi, đổ bóng cho các ô */
  --elev-1: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
  --elev-2: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .11);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .8);
  --accent-hover: #1a43b3;
  --on-accent: #fff;
  --avatar-bg: #dfe5f2;
  --avatar-ink: #2b3a5c;
  --board-bg: linear-gradient(180deg, #eef1f7 0%, #e7ebf3 100%);
  --col-bg: rgba(255, 255, 255, .45);
  --col-line: rgba(16, 24, 40, .05);
  --bubble-out: #e3ecfd;
  --bubble-out-line: #cddcf8;
  --tint: rgba(16, 24, 40, .06);
  --scrim: rgba(16, 24, 40, .38);
  --toast-bg: #16181d;
  --toast-ink: #fff;
  --ai-bg: linear-gradient(180deg, #f7f5ff, #fff);
  --ai-line: #d9d2f5;
  --ai-ink: #4b3aa8;
  --purple-soft: #efeafd;
  --green-soft: #e6efe0;
  --green-ink: #2f5a1f;
  --gate-bg: rgba(244, 245, 247, .97);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.muted { color: var(--ink-3); }
.block { display: block; }
.grow { flex: 1; }
.empty { color: var(--ink-3); margin: 8px 0; }
.ok-text { color: var(--ok); font-weight: 500; }
.late-text { color: var(--danger); font-weight: 500; }
[hidden] { display: none !important; }

/* Form controls */
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled { background: var(--surface-2); color: var(--ink-2); }
textarea { resize: vertical; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
input[type=color] { padding: 2px; height: 38px; }
input[type=range] { padding: 0; border: 0; accent-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--ink-2); font-size: 13px; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--danger); }
.btn.danger:not(.ghost) { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.ghost.danger { color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.block { width: 100%; padding: 10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 20px; line-height: 1; position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }
.link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Login */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.login-card p { margin: -8px 0 4px; }
.form-err { color: var(--danger); margin: 0; min-height: 1em; font-size: 13px; }

/* Layout */
.layout { display: grid; grid-template-columns: 228px 1fr; height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 4px 8px 20px; }
.brand.big { font-size: 20px; padding: 0; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.brand-mark svg { display: block; }
.brand span { letter-spacing: .01em; white-space: nowrap; font-size: 15px; }
.login-logo { width: 170px; height: auto; align-self: center; margin: -8px 0 -4px; }
.login-card .brand.big { justify-content: center; letter-spacing: .02em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.ico { display: inline-flex; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent); }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.me-info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info small { color: var(--ink-3); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-ink); font-weight: 600; font-size: 12px; flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }

.content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.page-title { font-size: 18px; margin-right: auto; white-space: nowrap; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 0; }
.top-actions select, .top-actions input[type=date] { width: auto; }
.top-actions .search { width: 240px; }
.bell .badge-count { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.main { flex: 1; overflow: auto; padding: 24px; }

/* Kanban */
.board-main { padding: 16px 16px 8px; display: flex; }
.board { display: flex; gap: 12px; align-items: stretch; min-height: 100%; }
.col { width: 296px; flex: none; display: flex; flex-direction: column; background: #eceef2; border-radius: 12px; padding: 8px; min-height: 0; max-height: calc(100vh - 100px); }
.col.drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.col-head { border-radius: 8px; padding: 10px 12px; background: var(--surface); border-top: 4px solid var(--stage); }
.col-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.col-count { font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 0 8px; font-size: 12px; }
.col-meta { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.col-add { margin: 8px 0; border: 1px dashed var(--line-strong); background: transparent; border-radius: 8px; padding: 6px; color: var(--ink-3); cursor: pointer; }
.col-add:hover { background: var(--surface); color: var(--ink); }
.col-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 2px 4px; flex: 1; }
.col-empty { text-align: center; color: var(--ink-3); font-size: 13px; margin: 16px 0; }
.more { border: 0; background: transparent; color: var(--accent); padding: 8px; cursor: pointer; font-weight: 500; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.card:focus-visible { outline: 2px solid var(--accent); }
.card.dragging { opacity: .5; }
.card.is-overdue { border-left: 3px solid var(--danger); }
.card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.card h4 { font-size: 13.5px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.card-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tags:empty { display: none; }
.tag { font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.tag.dup { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag.late { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.fu { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--ink-3); font-size: 12px; }
.unassigned { font-size: 11.5px; }
.score { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 6px; flex: none; background: var(--surface-2); color: var(--ink-2); }
.score.hot { background: var(--danger-soft); color: var(--danger); }
.score.warm { background: var(--warn-soft); color: var(--warn); }
.score.cold { background: var(--accent-soft); color: var(--accent); }

/* Drawer (phiếu hồ sơ) */
.drawer-wrap { position: fixed; inset: 0; background: var(--scrim); z-index: 20; display: flex; justify-content: flex-end; }
.drawer { width: min(640px, 100%); height: 100%; background: var(--surface); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; }
.drawer-title { flex: 1; min-width: 0; }
.eyebrow { color: var(--ink-3); font-weight: 500; display: flex; gap: 10px; }
.saved { color: var(--ok); }
.title-input { border: 1px solid transparent; font-size: 19px; font-weight: 600; padding: 4px 6px; margin-left: -7px; }
.title-input:hover { border-color: var(--line); }
.stagebar { display: flex; gap: 4px; padding: 0 20px 12px; overflow-x: auto; }
.stage-step { flex: 1 0 auto; border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; border-bottom: 3px solid var(--line); }
.stage-step:hover { border-bottom-color: var(--stage); }
.stage-step.current { background: var(--surface); color: var(--ink); font-weight: 600; border-bottom-color: var(--stage); box-shadow: inset 0 0 0 1px var(--stage); }
.drawer-alerts { padding: 0 20px; display: flex; flex-direction: column; gap: 6px; }
.alert { padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.alert.late { background: var(--danger-soft); color: var(--danger); }
.alert.dup { background: var(--accent-soft); color: var(--accent); }
.alert.info { background: var(--ok-soft); color: var(--ok); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }
.drawer-body section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer-body section:last-child { border: 0; }
.drawer-body h3 { font-size: 14px; margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld > span { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.span2 { grid-column: 1 / -1; }
.score-input { display: flex; align-items: center; gap: 10px; }
.score-val { font-weight: 700; min-width: 28px; text-align: right; }
.fu-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fu { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.fu > div { flex: 1; display: flex; flex-direction: column; }
.fu small { color: var(--ink-3); }
.fu.late { border-color: #f1c4c0; background: var(--danger-soft); }
.fu.late small { color: var(--danger); }
.fu.done strong { text-decoration: line-through; color: var(--ink-3); }
.fu-add { display: grid; grid-template-columns: 190px 1fr auto; gap: 8px; }
.note-add { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.act { position: relative; }
.act::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.act.note::before { border-color: var(--accent); }
.act.stage::before { border-color: var(--ok); }
.act-meta { font-size: 12px; color: var(--ink-3); }
.act-meta strong { color: var(--ink-2); }
.act p { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
.act.system p, .act.stage p { color: var(--ink-2); font-size: 13px; }
.drawer-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }

/* Modal */
.overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--surface); border-radius: 14px; width: min(620px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-body p { margin: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.note-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.note-box p { margin: 4px 0 8px !important; color: var(--ink-2); }

/* Toast */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-lg); font-weight: 500; max-width: 90vw; }
.toast.err { background: var(--danger); }
.toast.warn { background: #7a4f00; }

/* Panels, tables */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.panel h3 { font-size: 15px; margin-bottom: 12px; }
.panel h4 { font-size: 13px; color: var(--ink-3); margin: 16px 0 8px; font-weight: 500; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col .panel { margin-bottom: 16px; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.inactive td { opacity: .5; }
.row-actions { text-align: right; white-space: nowrap; }
.order { white-space: nowrap; width: 72px; }
.order .icon-btn { width: 26px; height: 26px; font-size: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.section-head p { margin: 0; max-width: 720px; }
.section-head h3 { margin: 0; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; min-width: 220px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ol, .prose ul { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chip { display: inline-block; margin: 0 4px 4px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; }
.tabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }

/* Tasks */
.tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.count { color: var(--ink-3); font-weight: 500; }
.task-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; }
.task-row:hover { border-color: var(--line-strong); }
.task-row div { display: flex; flex-direction: column; min-width: 0; }
.task-row small { color: var(--ink-3); }
.task-row .when { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.task-row.late .when { color: var(--danger); font-weight: 500; }

/* Dashboard */
.segs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg { border: 0; background: var(--surface); padding: 7px 12px; cursor: pointer; color: var(--ink-2); font-weight: 500; border-right: 1px solid var(--line); }
.seg:last-child { border-right: 0; }
.seg.on { background: var(--accent); color: var(--on-accent); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.tile-label { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.tile-value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile small { color: var(--ink-3); font-size: 12.5px; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font-size: 11px; }
.chart .end-label { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.tip { position: absolute; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; box-shadow: var(--shadow-lg); font-size: 12.5px; min-width: 160px; pointer-events: none; }
.tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--ink-2); }
.tip-row span { flex: 1; }
.tip-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.f-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.f-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-track { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.f-bar { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 2px; }
.f-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.f-val small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11.5px; }

/* CRM: thanh tab, cột giai đoạn có tiêu đề tô màu, thẻ nổi */
.crm-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; margin-right: auto; }
.crm-tabs a { padding: 6px 14px; border-radius: 7px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.crm-tabs a:hover { color: var(--ink); }
.crm-tabs a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.board-main { background: var(--board-bg); }
.col { background: var(--col-bg); border: 1px solid var(--col-line); }
.col-head { background: var(--stage); color: var(--stage-ink); border: 0; border-radius: 8px; padding: 9px 22px 9px 12px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.col-title { color: inherit; }
.col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; font-size: 12.5px; }
.col-count { background: rgba(255, 255, 255, .35); border: 0; color: inherit; margin-left: auto; }
.col-color { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid currentColor; opacity: .6; cursor: pointer; overflow: hidden; }
.col-color:hover { opacity: 1; }
.col-color input { position: absolute; inset: -6px; width: 30px; height: 30px; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.col-meta { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 0; color: var(--ink-3); font-size: 12px; }
.col-sum { font-weight: 600; color: var(--ink-2); background: var(--surface); border-radius: 6px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.card { border: 1px solid rgba(16, 24, 40, .06); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 10px 24px rgba(16, 24, 40, .1); border-color: rgba(16, 24, 40, .08); }
.tag.chat-new { background: var(--accent); color: #fff; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
.card-foot .grow { flex: 1; }
.card-foot { gap: 8px; }
.card-chat { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 2px; display: inline-flex; border-radius: 6px; }
.card-chat:hover { color: var(--accent); background: var(--accent-soft); }

/* Phiếu CRM: tab Hồ sơ / Tin nhắn */
.drawer { transition: width .2s; }
.drawer.wide { width: min(760px, 100%); }
.drawer-tabs { display: flex; gap: 4px; padding: 4px 20px 0; border-bottom: 1px solid var(--line); }
.drawer-tabs button { border: 0; background: none; padding: 9px 12px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.drawer-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.drawer-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer-chat .chat { flex: 1; min-height: 0; }
.drawer-chat .chat-head { padding: 10px 20px; }
.conv-switch { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.conv-switch select { width: auto; }

/* Tin nhắn khách hàng trong Trung tâm liên hệ, Trình tin nhắn */
.main.cc-inbox { display: flex; flex-direction: column; padding: 16px 24px 0; overflow: hidden; }
.main.cc-inbox .tabs { margin-bottom: 0; }
.main.cc-inbox .inbox { flex: 1; min-height: 0; margin: 0 -24px; border-top: 1px solid var(--line); }
.chat-slot { display: flex; min-width: 0; min-height: 0; }
.chat-slot > .chat, .chat-slot > .chat-empty { flex: 1; }
.inbox.messenger { grid-template-columns: 320px 1fr; }
.segs.small .seg { white-space: nowrap; padding: 5px 6px; }
.row-btns { display: flex; gap: 6px; }
.row-btns .btn { flex: 1; }
.avatar.group { background: var(--green-soft); color: var(--green-ink); }
.bubble .sender { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.people { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.person { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; color: var(--ink); cursor: pointer; }
.person:hover { border-color: var(--line-strong); }
.person input { width: auto; accent-color: var(--accent); }

/* Trình tin nhắn: 2 mục Khách hàng / Nội bộ */
.main.messenger-main { display: flex; flex-direction: column; }
.msg-switch { display: flex; gap: 8px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.msg-switch .btn { min-width: 190px; padding: 10px 18px; font-size: 15px; font-weight: 600; border-radius: 10px; }
.msg-switch .btn:not(.primary) { background: var(--surface); }
.sw-count { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.msg-body { flex: 1; min-height: 0; display: flex; }
.msg-body > .inbox { flex: 1; min-height: 0; }

/* Ô soạn tin: emoji, định dạng */
.composer-wrap { position: relative; background: var(--surface); border-top: 1px solid var(--line); }
.composer-wrap .composer { border-top: 0; }
.composer .icon-btn { font-size: 17px; }
.fmt-toggle { font-weight: 700; font-size: 14px !important; }
.fmt-bar { display: flex; gap: 2px; padding: 6px 14px 0; flex-wrap: wrap; }
.fmt { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; min-width: 32px; height: 30px; padding: 0 8px; cursor: pointer; color: var(--ink-2); }
.fmt:hover { border-color: var(--line-strong); color: var(--ink); }
.fmt-b { font-weight: 700; } .fmt-i { font-style: italic; } .fmt-u { text-decoration: underline; } .fmt-s { text-decoration: line-through; }
.fmt-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.emoji-panel { position: absolute; bottom: 100%; left: 12px; width: min(360px, calc(100% - 24px)); max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px 10px; z-index: 5; }
.emoji-group { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin: 6px 2px 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(9, 1fr); }
.emoji-grid button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 5px 0; border-radius: 6px; cursor: pointer; }
.emoji-grid button:hover { background: var(--surface-2); }

/* Tin nhắn: định dạng, cảm xúc, đã xem */
.rich { white-space: pre-wrap; word-break: break-word; }
.rich code { font-size: 12.5px; background: var(--tint); border: 0; padding: 0 4px; }
.rich pre { margin: 4px 0; padding: 8px 10px; background: var(--tint); border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; }
.rich blockquote { margin: 2px 0; padding: 2px 10px; border-left: 3px solid var(--accent); color: var(--ink-2); }
.spoiler { background: var(--ink-3); color: transparent; border-radius: 4px; cursor: pointer; transition: background .2s, color .2s; }
.spoiler.shown { background: var(--tint); color: inherit; }
.bubble { position: relative; }
.react-bar { position: absolute; top: -18px; right: 6px; display: none; gap: 1px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 2px 4px; box-shadow: var(--shadow-lg); z-index: 2; }
.msg.in .react-bar { right: auto; left: 6px; }
.bubble:hover .react-bar { display: flex; }
.react-bar button { border: 0; background: none; font-size: 17px; line-height: 1; padding: 3px; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.react-bar button:hover { transform: scale(1.25); }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rchip { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 1px 7px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.rchip span { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.rchip.mine { border-color: var(--accent); background: var(--accent-soft); }
.ticks { font-size: 11px; letter-spacing: -3px; color: var(--ink-3); margin-left: 2px; padding-right: 3px; }
.ticks.read { color: var(--accent); }

/* Tin bị xoá / bị sửa: vẫn đọc được, đánh dấu rõ */
.msg.deleted .bubble { opacity: 1; border-style: dashed; border-color: #e3b4ae; }
.deleted-note { font-size: 11.5px; font-weight: 600; color: var(--danger); margin-bottom: 4px; }
.original { margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 4px; }
.original small { display: block; font-size: 11px; color: var(--warn); font-weight: 600; margin-bottom: 2px; }
.link-btn.small { font-size: 11px; color: var(--ink-3); text-decoration: underline; max-width: none; }
.file-lost { font-size: 12.5px; color: var(--ink-3); font-style: italic; margin-bottom: 4px; }

/* AI: dịch tin nhắn, tự dịch khi gửi, khung phân tích */
.tr-block { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(31, 79, 209, .06); border-left: 3px solid var(--accent); }
.tr-block.src { background: var(--tint); border-left-color: var(--ink-3); }
.tr-block small { display: block; font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.tr-block.src small { color: var(--ink-3); }
.tr-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px 0; font-size: 12.5px; }
.tr-bar .link-btn { font-size: 12.5px; }
.tr-toggle { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 14px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.tr-toggle.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tr-preview { margin: 8px 14px 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; }
.tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tr-btns { display: flex; justify-content: flex-end; gap: 6px; }
.ai-card { width: 100%; border: 1px solid var(--ai-line); background: var(--ai-bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ai-head { display: flex; align-items: center; gap: 8px; }
.ai-head strong { margin-right: auto; color: var(--ai-ink); }
.ai-head .btn { width: auto !important; }
.ai-summary { margin: 0; color: var(--ink); }
.ai-points { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.ai-next { margin: 0; font-size: 13px; padding: 6px 8px; background: var(--ok-soft); border-radius: 6px; color: var(--ok); }
.ai-filled, .ai-suggest { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ai-filled > small, .ai-suggest > small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.ai-filled > div { color: var(--ok); }
.ai-sug { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ai-sug-btns { display: flex; gap: 4px; flex: none; }
.ai-sug-btns .btn { width: auto !important; }
.side-card + .ai-card { margin-top: 14px; }

/* Nhóm nội bộ: ảnh đại diện */
.avatar.img { object-fit: cover; padding: 0; }
.avatar-btn { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--accent); }
.avatar-pick { width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; overflow: hidden; font-size: 30px; color: #2f5a1f; font-weight: 600; }
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; }
.group-head { display: flex; gap: 16px; align-items: flex-start; }

/* Trung tâm liên hệ */
.intro { margin: 0 0 16px; max-width: 760px; }
.line-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.line h4 { margin: 0 0 10px; color: var(--ink-2); }
.mode { flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.mode input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.mode div { display: flex; flex-direction: column; gap: 2px; }
.mode strong { color: var(--ink); font-weight: 600; }
.mode small { color: var(--ink-3); line-height: 1.45; }
.mode.on { border-color: var(--accent); background: var(--accent-soft); }
.members { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.members li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.members li.empty { border-style: dashed; }
.members .pos { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.members .icon-btn { width: 26px; height: 26px; font-size: 14px; }
.switch { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.switch input { width: auto; accent-color: var(--accent); }
.num-in { width: 110px; }
.meter { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
.meter-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.meter-val.full { color: var(--danger); }
.meter-track { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter-bar { display: block; height: 100%; background: var(--s1); }
.inline-form label { min-width: 160px; }
/* Báo cáo Marketing / Sale */
.report-tabs { margin-bottom: 8px; }
.report-cmp { margin: 0 0 14px; font-size: 13px; }
.report-h { font-size: 17px; margin: 4px 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px 18px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi, var(--line-strong)); }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-note { color: var(--ink-3); font-size: 12px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.good { background: var(--ok-soft); color: var(--ok); }
.delta.bad { background: var(--danger-soft); color: var(--danger); }
.delta.flat { background: var(--surface-2); color: var(--ink-3); }
.swatch.box { width: 10px; height: 10px; border-radius: 3px; }
.report-tbl td, .report-tbl th { white-space: nowrap; }
.report-tbl tfoot td { border-top: 2px solid var(--line-strong); background: var(--surface-2); }
.cellv { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cellv .delta { font-size: 11px; padding: 0 6px; }
.share { display: flex; height: 4px; margin-top: 6px; max-width: 220px; background: var(--surface-2); border-radius: 2px; overflow: hidden; gap: 2px; }
.share span { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
.chart .hit.on { fill: rgba(16, 24, 40, .04); }
.sla { padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.sla:last-of-type { border-bottom: 0; }
.sla-head { display: flex; align-items: center; gap: 8px; }
.sla-pct { font-size: 22px; font-variant-numeric: tabular-nums; }
.sla-track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 8px 0 6px; }
.sla-track span { display: block; height: 100%; border-radius: 4px; }
.sla-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.small { font-size: 12.5px; }
.alert.setup { margin-bottom: 14px; }

/* Sổ đơn hàng trong phiếu CRM */
.order-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.order-sum div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.order-sum small { color: var(--ink-3); font-size: 12px; }
.order-sum strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.order-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.order-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.kind { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; flex: none; }
.kind.private { background: var(--s1); }
.kind.deposit { background: var(--s3); }
.order-form { display: grid; grid-template-columns: 130px 1fr 170px; gap: 8px; }
.order-form .order-note { grid-column: 1 / 3; }
.order-btns { display: flex; gap: 8px; justify-content: flex-end; }
.order-btns .btn { flex: 1; }
.order-list li.editing { display: block; background: var(--surface-2); }
.hide-orders { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.orders-hidden { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.tag.returning { background: var(--purple-soft); color: var(--ai-ink); border-color: transparent; }
@media (max-width: 760px) { .order-form { grid-template-columns: 1fr 1fr; } .order-form .order-note, .order-btns { grid-column: 1 / -1; } }

/* Trung tâm liên hệ theo Channel */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ch-card { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.ch-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16, 24, 40, .1); }
.ch-card-head { display: flex; align-items: center; gap: 10px; }
.ch-card-head strong { font-size: 15px; }
.ch-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.ch-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-stat { display: flex; flex-direction: column; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.ch-stat span { font-size: 12px; color: var(--ink-3); }
.ch-stat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ch-foot { display: flex; justify-content: space-between; font-size: 12.5px; }
.dot-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.dot-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dot-status.on { color: var(--ok); }
.dot-status.on::before { background: var(--ok); }
.ch-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.step { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; color: var(--ink-2); }
.step.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.empty-state { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; }
.next-step { display: block; margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.plain-list { margin: 0; padding-left: 18px; }
.line-grid .panel { margin-bottom: 0; }
.line-stats { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stat-row { display: flex; justify-content: space-between; width: 100%; max-width: 320px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.stat-row strong { font-variant-numeric: tabular-nums; }
.queue-list { max-width: 560px; }
.queue-list li { padding: 8px 10px; }
.add-sale { margin-top: 4px; }
.add-sale select { min-width: 240px; }
@media (max-width: 900px) { .line-grid { grid-template-columns: 1fr; } }

/* Hộp thư */
.nav a { position: relative; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }
.inbox-main { padding: 0; display: flex; overflow: hidden; }
.inbox { display: grid; grid-template-columns: 330px 1fr 290px; flex: 1; min-height: 0; }
.conv-col { border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.conv-tools { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.segs.small .seg { padding: 5px 9px; font-size: 12.5px; }
.segs.small { display: flex; }
.segs.small .seg { flex: 1; }
.conv-list { overflow-y: auto; flex: 1; }
.pad { padding: 16px; }
.conv { width: 100%; display: flex; gap: 10px; text-align: left; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.conv:hover { background: var(--surface-2); }
.conv.on { background: var(--accent-soft); }
.conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.conv-line strong { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.unread .conv-line strong { font-weight: 700; }
.conv-line time { font-size: 11.5px; color: var(--ink-3); flex: none; }
.conv-last { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.unread .conv-last { color: var(--ink); }
.unread-dot { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.conv-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.chip-acc { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--ink-2); }
.chip-stage { border-left: 3px solid var(--stage); padding-left: 5px; color: var(--ink-2); font-size: 11.5px; }
.chip-none { color: var(--warn); }

.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.chat-empty { margin: auto; text-align: center; max-width: 360px; display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--ink-2); padding: 24px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-head div { display: flex; flex-direction: column; min-width: 0; }
.back-btn { display: none; }
.chat-head small { color: var(--ink-3); }
.alert.slim { border-radius: 0; }
.msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.day { align-self: center; font-size: 11.5px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 10px; margin: 10px 0 6px; }
.msg { display: flex; }
.msg.out { justify-content: flex-end; }
.bubble { max-width: min(560px, 78%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 8px 11px; }
.msg.out .bubble { background: var(--bubble-out); border-color: var(--bubble-out-line); border-radius: 12px 12px 4px 12px; }
.msg.deleted .bubble { opacity: .55; }
.bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.bubble a { word-break: break-all; }
.msg-meta { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.msg-img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; margin-bottom: 4px; }
.bubble audio { max-width: 260px; }
.msg-file { display: inline-block; padding: 6px 0; font-weight: 500; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
.composer textarea { resize: none; min-height: 40px; max-height: 180px; }
.composer .icon-btn { flex: none; height: 40px; font-size: 18px; }
.composer .btn { height: 40px; }
.quick-list { display: flex; flex-direction: column; gap: 6px; }
.quick { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.quick:hover { border-color: var(--accent); }
.quick small { color: var(--ink-3); white-space: pre-wrap; }
.quick-edit { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.quick-edit .btn { justify-self: end; }

.chat-side { border-left: 1px solid var(--line); background: var(--surface); padding: 16px; overflow-y: auto; }
.side-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.side-card h4 { font-size: 15px; }
.side-card .btn { width: 100%; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0; font-size: 13px; width: 100%; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; word-break: break-word; }

.qr-area { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 60px; }
.qr { width: 240px; height: 240px; border: 1px solid var(--line); border-radius: 10px; }
.qr-steps { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }

@media (max-width: 1200px) {
  .inbox { grid-template-columns: 300px 1fr; }
  .chat-side { display: none; }
}
@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-main { height: calc(100vh - 120px); }
  .conv-col { display: none; }
  .inbox:not(:has(.chat-head)) .conv-col { display: flex; }
  .inbox:not(:has(.chat-head)) .chat { display: none; }
  .back-btn { display: inline-grid; font-size: 26px; }
}

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .two-col, .tasks { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; }
  .sidebar { flex-direction: row; align-items: center; padding: 8px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 8px 0 0; }
  .brand > :not(.brand-mark) { display: none; }
  .nav { flex-direction: row; }
  .nav a span:not(.ico) { display: none; }
  .me { margin: 0 0 0 auto; border: 0; padding: 0; }
  .me-info { display: none; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .top-actions { order: 3; width: 100%; justify-content: flex-start; }
  .top-actions .search { width: 100%; }
  .main { padding: 16px; }
  .col { width: 84vw; max-height: none; }
  .grid2, .form-grid, .fu-add { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 120px 1fr 64px; }
}

/* Nhân viên: sơ đồ cấu trúc công ty */
.staff-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.staff-bar .search { width: 280px; }
.staff-bar select { width: auto; min-width: 200px; }
.staff-bar .spacer { flex: 1; }
.org { overflow: auto; padding: 4px 0 24px; }
.org ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 22px 0 0; position: relative; }
.org > ul { padding-top: 0; min-width: max-content; }
.org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 10px 0; }
.org > ul > li { padding-top: 0; }
.org li::before, .org li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1px solid var(--line-strong); }
.org li::after { right: auto; left: 50%; border-left: 1px solid var(--line-strong); }
.org li:first-child::before, .org li:last-child::after { border: 0; }
.org li:last-child::before { border-right: 1px solid var(--line-strong); border-radius: 0 8px 0 0; }
.org li:first-child::after { border-radius: 8px 0 0 0; }
.org li:only-child::before { display: none; }
.org li:only-child::after { border-top: 0; border-radius: 0; }
.org > ul > li::before, .org > ul > li::after { display: none; }
.org ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1px solid var(--line-strong); }
.org-card { position: relative; width: 236px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--s1); border-radius: 10px; padding: 12px 14px; cursor: pointer; text-align: left; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.org-card:hover { border-color: var(--line-strong); border-top-color: var(--s1); }
.org-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.org-head { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--surface-2); border-radius: 8px; }
.org-head strong { display: block; font-size: 13px; font-weight: 600; }
.org-head small { color: var(--ink-3); font-size: 12px; }
.org-head.empty small { color: var(--ink-3); }
.org-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.org-foot small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.org-faces { display: flex; }
.org-faces .avatar { margin-right: -6px; border: 2px solid var(--surface); }
.org-mods { display: flex; gap: 6px; flex-wrap: wrap; }
.org-mods span { font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.org-add { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; line-height: 1; font-size: 15px; opacity: 0; transition: opacity .15s; }
.org-card:hover .org-add, .org-add:focus { opacity: 1; }
.org ul ul .org-card { border-top-color: var(--line-strong); }
.org ul ul ul .org-card { width: 216px; }
.people { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--ink); }
.person:hover { background: var(--surface-2); }
.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row select { flex: 1; }
/* Chức danh & phân quyền */
.panel.flush { padding: 0; }
.perm-tbl th, .perm-tbl td { white-space: nowrap; }
.perm-tbl select { padding: 5px 8px; font-size: 13px; width: auto; min-width: 118px; }
.perm-tbl .c { text-align: center; }
.perm-tbl th.c { white-space: normal; min-width: 76px; }
.cell-in { min-width: 190px; font-weight: 600; }
/* Tìm nhân viên */
.dir-tbl tr.click { cursor: pointer; }
.dir-tbl tr.click:hover td { background: var(--surface-2); }
.who { display: flex; align-items: center; gap: 10px; }
.name-link { color: var(--ink); font-weight: 600; }
.bday { color: var(--ink-3); }
/* Hồ sơ nhân viên */
.back-link { display: inline-block; color: var(--ink-3); margin-bottom: 12px; }
.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-id { flex: 1; }
.profile-id h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; }
.profile-id p { margin: 0; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; }
.warn-text { color: var(--warn); font-weight: 500; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--ink-3); }
.pre { white-space: pre-wrap; margin: 0; color: var(--ink-2); line-height: 1.6; }
.achieve { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.profile-pick { display: flex; align-items: center; gap: 16px; }
.profile-pick p { margin: 0; }
/* Analytics sale */
.an-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.an-kicker { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.an-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
.an-name span { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; margin-right: 10px; }
.an-start { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.an-start span { font-size: 12px; color: var(--ink-3); }
.an-start strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.funnel { display: flex; flex-direction: column; gap: 14px; }
.f-row { display: grid; grid-template-columns: 260px 1fr 120px; align-items: center; gap: 16px; }
.f-label strong { display: block; font-size: 14px; font-weight: 600; }
.f-label small { color: var(--ink-3); font-size: 12px; }
.f-track { height: 22px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.f-bar { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.f-val { text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.f-val small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr 90px; }
  .f-track { grid-column: 1 / -1; grid-row: 2; }
  .kv { grid-template-columns: 120px 1fr; }
  .staff-bar .search { width: 100%; }
}

/* Phiếu CRM: các phần trường tự đặt, admin sửa ngay tại chỗ */
.fsec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.drawer-body .fsec-head h3 { margin: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.fsec-head .link-btn { color: var(--ink-3); }
.fsec-name { font-weight: 600; text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em; max-width: 360px; }
.fsec.editing { background: var(--surface-2); margin: 0 -20px; padding-left: 20px !important; padding-right: 20px !important; }
.fld-label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fld-label .req { color: var(--danger); font-weight: 600; }
.fld-label .hint { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--line); color: var(--ink-2); font-size: 10px; font-style: normal; font-weight: 600; cursor: help; }
.fld-tools { margin-left: auto; display: inline-flex; gap: 8px; }
.fld-tools .link-btn { font-size: 12px; }
.fsec-foot { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.fsec-foot .link-btn { color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.fsec-foot .link-btn.danger { color: var(--ink-3); }
.pick-field { width: auto; max-width: 220px; border: 0; background: none; padding: 2px 4px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.link-btn.more { margin-top: 10px; color: var(--ink-3); font-size: 12.5px; }
.add-section { margin: 14px 0 4px; }
.multi-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-item { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.mp-item input { width: auto; margin: 0; accent-color: var(--accent); }
.mp-item:has(input:checked) { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.url-input { display: flex; gap: 8px; align-items: center; }
.url-input input { flex: 1; }
.url-open { font-size: 13px; white-space: nowrap; }
/* Hộp tạo / sửa trường */
.field-edit { min-width: min(520px, 80vw); }
.type-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; max-height: 300px; overflow: auto; }
.type-item { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); padding: 10px 14px; cursor: pointer; }
.type-item:last-child { border-bottom: 0; }
.type-item strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.type-item small { color: var(--ink-3); font-size: 12.5px; }
.type-item:hover { background: var(--surface-2); }
.type-item.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.opt-box { display: flex; flex-direction: column; gap: 8px; }
.opt-box .lbl { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.opt-rows { display: flex; flex-direction: column; gap: 6px; }
.opt-row { display: flex; align-items: center; gap: 6px; }
.opt-row input { flex: 1; }
.opt-row .grip { cursor: grab; color: var(--ink-3); letter-spacing: -3px; padding: 0 4px; user-select: none; }
.opt-box > .link-btn { align-self: flex-start; }
.req-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.req-row select { width: auto; min-width: 220px; }
.drawer.no-anim { animation: none; }

/* Kéo thả phần và trường trong phiếu */
.drag-grip { cursor: grab; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 2px 8px 2px 0; user-select: none; }
.drag-grip:hover { color: var(--ink); }
.fsec-head { justify-content: flex-start; }
.fsec-head > .link-btn { margin-left: auto; }
.fld-top { display: flex; align-items: center; }
.fld-top .fld-label { flex: 1; }
.fsec.dragging, .fld.dragging { opacity: .4; }
.fsec.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.fsec.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.fld.drop-before { box-shadow: -3px 0 0 var(--accent); }
.fld.drop-after { box-shadow: 3px 0 0 var(--accent); }
.fld.span2.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.fld.span2.drop-after { box-shadow: 0 3px 0 var(--accent); }

/* Trả lời tin nhắn như Telegram */
.reply-quote { display: flex; flex-direction: column; gap: 1px; border-left: 3px solid var(--s1); background: rgba(42, 120, 214, .08); border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; cursor: pointer; max-width: 100%; }
.reply-quote.out { border-left-color: var(--s3); background: rgba(27, 175, 122, .09); }
.reply-quote strong { font-size: 12.5px; color: var(--s1); font-weight: 600; }
.reply-quote.out strong { color: #12855c; }
.reply-quote small { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-quote.missing { cursor: default; border-left-color: var(--line-strong); background: var(--surface-2); }
.reply-quote.missing strong { color: var(--ink-3); }
.react-bar .reply-btn { font-size: 15px; color: var(--ink-2); padding: 3px 6px; border-right: 1px solid var(--line); border-radius: 0; margin-right: 2px; }
.react-bar .reply-btn:hover { transform: none; color: var(--accent); }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 3px solid var(--s1); background: var(--surface-2); border-radius: 6px; margin-bottom: 6px; }
.reply-bar .grow { min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.reply-bar strong { font-size: 12.5px; color: var(--s1); font-weight: 600; }
.reply-bar small { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-ico { color: var(--s1); font-size: 16px; }
@keyframes msg-flash { from { background: rgba(42, 120, 214, .18); } to { background: transparent; } }
.msg.flash { animation: msg-flash 1.6s ease-out; border-radius: 8px; }

/* Stage hiện tại trong phiếu: đóng khung, chữ đậm */
.stage-step.current { background: var(--surface); color: var(--ink); font-weight: 700; border: 2px solid var(--stage); border-bottom-width: 3px; box-shadow: none; }
/* Khách HOT */
.hot-flame { font-size: .9em; margin-right: 4px; }
.card.is-hot { border-left: 3px solid #e8590c; }
.title-row { display: flex; align-items: center; gap: 8px; }
.title-row .title-input { flex: 1; min-width: 0; }
/* Đồng hồ SLA trên thẻ phiếu */
.card-badges { display: flex; gap: 6px; align-items: center; flex: none; }
.sla-clock { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 1px 6px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.sla-clock::before { content: '⏱ '; }
.sla-clock.soon { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.sla-clock.late { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.sla-clock.days { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Đóng trò chuyện */
.close-conv { white-space: nowrap; }
.closed-tag { font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-left: 8px; vertical-align: middle; }

/* Chấm công: nút góc phải, bảng nhỏ khi bấm, màn hình đầu ngày */
.clock-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 14px 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-pill:hover { border-color: var(--ink-3); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.clock-pill.on { color: var(--ok); border-color: #b9dfc6; background: var(--ok-soft); }
.clock-pill.on .cp-dot { background: var(--ok); }
.clock-pop { position: fixed; z-index: 60; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px; }
.cp-body { display: flex; flex-direction: column; gap: 14px; }
.cp-who { display: flex; align-items: center; gap: 12px; }
.cp-who strong { display: block; font-size: 15px; }
.cp-who small { color: var(--ink-3); }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.cp-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cp-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-2); font-size: 13px; }
.cp-total { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-out { border-color: var(--line-strong); }
.cp-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.cp-sessions li { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.cp-sessions small { color: var(--ink-3); }
.clock-gate { position: fixed; inset: 0; z-index: 80; background: var(--gate-bg); display: grid; place-items: center; padding: 16px; }
.cg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 32px 28px; width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cg-card h2 { margin: 8px 0 0; font-size: 21px; letter-spacing: -.01em; }
.cg-card p { margin: 0; }
.cg-btn { margin: 14px 0 4px; padding: 12px 28px; font-size: 15px; }

.ts-now { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.ts-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.staff-bar input[type="date"] { width: auto; }
.clock-pill .cp-time { display: inline-block; min-width: 5ch; text-align: center; }

/* Đăng ký tài khoản nhân viên */
.login-alt { text-align: center; color: var(--ink-3); font-size: 13.5px; margin: 0 !important; }
.reg-done { text-align: center; margin: 4px 0 0; font-size: 17px; }
.pending-tbl select { width: auto; min-width: 160px; padding: 5px 8px; font-size: 13px; }
.pending-panel .row-actions { align-items: center; gap: 12px; }

/* ================= Theme màu (nhân viên chọn trong Tài khoản) ================= */
:root[data-theme="dark"] {
  --bg: #071120; --surface: #0b1728; --surface-2: #0f1e33; --line: #1a2b44; --line-strong: #25395a;
  --ink: #e7eef8; --ink-2: #a3b3ca; --ink-3: #6d7f99;
  --accent: #20c997; --accent-hover: #1ab485; --accent-soft: rgba(32, 201, 151, .14); --on-accent: #03140e;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .14); --warn: #f5b544; --warn-soft: rgba(245, 181, 68, .14);
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .14);
  --s1: #2ed3a0; --s2: #ff6b6b; --s3: #4c8dff; --s4: #f5b544;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
  --elev-1: 0 1px 0 rgba(255, 255, 255, .02), 0 8px 24px rgba(0, 0, 0, .35);
  --elev-2: 0 0 0 1px rgba(32, 201, 151, .18), 0 14px 36px rgba(0, 0, 0, .45);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .04);
  --glow: 0 0 18px rgba(32, 201, 151, .35);
  --avatar-bg: #16294a; --avatar-ink: #b9cdf0;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .025); --col-line: rgba(120, 160, 220, .08);
  --bubble-out: #11305a; --bubble-out-line: #1d4679;
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(2, 6, 14, .7);
  --toast-bg: #13233b; --toast-ink: #fff;
  --ai-bg: linear-gradient(180deg, #161a3c, #0b1728); --ai-line: #2e2d6b; --ai-ink: #a99bff;
  --purple-soft: rgba(124, 108, 255, .16); --green-soft: rgba(52, 211, 153, .14); --green-ink: #6ee7b7;
  --gate-bg: rgba(7, 17, 32, .97);
  --chrome: rgba(9, 20, 36, .82);
  --bg-image:
    radial-gradient(1100px 560px at 8% -12%, rgba(32, 201, 151, .11), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(76, 141, 255, .11), transparent 62%),
    linear-gradient(rgba(120, 160, 220, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 220, .045) 1px, transparent 1px);
  --bg-size: auto, auto, 36px 36px, 36px 36px;
  color-scheme: dark;
}
:root[data-theme="dark"] .login-logo, :root[data-theme="dark"] .brand-mark { filter: brightness(1.05); }

/* ================= Viền nổi, đổ bóng cho các ô ================= */
.panel, .kpi, .ch-card, .org-card, .cg-card, .login-card { box-shadow: var(--elev-1), var(--edge); border-color: var(--line); }
.card { box-shadow: var(--elev-1), var(--edge); border-color: var(--line); }
.card:hover, .ch-card:hover, .org-card:hover { box-shadow: var(--elev-2), var(--edge); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.kpi:hover { box-shadow: var(--elev-2), var(--edge); }
.panel, .kpi { transition: box-shadow .2s, border-color .2s; }
.sidebar { box-shadow: 1px 0 0 var(--line), 4px 0 18px rgba(16, 24, 40, .04); border-right: 0; position: relative; z-index: 1; }
.topbar { box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(16, 24, 40, .04); border-bottom: 0; position: relative; }
.nav a.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.modal, .drawer, .clock-pop { border: 1px solid var(--line); }
.btn { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.btn.primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent); }
.col { box-shadow: var(--edge); }

/* Chọn theme trong Tài khoản */
.theme-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.theme-opt { border: 2px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: stretch; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.theme-opt.on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-sw { height: 34px; border-radius: 6px; display: flex; overflow: hidden; border: 1px solid rgba(16, 24, 40, .08); }
.theme-sw i { flex: 1; }
@media (max-width: 760px) { .theme-pick { grid-template-columns: repeat(3, 1fr); } }

.cp-theme { display: flex; flex-direction: column; gap: 8px; }
.cp-label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.clock-pop .theme-pick { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.clock-pop .theme-opt { padding: 4px; font-size: 11px; gap: 4px; }
.clock-pop .theme-sw { height: 26px; }

/* ================= Lớp giao diện hiện đại (áp cho mọi theme) ================= */
:root {
  --glow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  --chrome: color-mix(in srgb, var(--surface) 88%, transparent);
  --bg-image: radial-gradient(1000px 520px at 0% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, color-mix(in srgb, var(--s3) 6%, transparent), transparent 62%);
  --bg-size: auto;
}
body { background-color: var(--bg); background-image: var(--bg-image); background-size: var(--bg-size); background-attachment: fixed; }
.layout, .content, .main { background: transparent; }
.sidebar, .topbar { background: var(--chrome); backdrop-filter: blur(10px); }

/* Ô, thẻ bo góc lớn hơn */
.panel, .kpi, .ch-card, .login-card, .cg-card, .clock-pop, .modal { border-radius: 18px; }
.card, .org-card, .cp-card { border-radius: 14px; }
.col { border-radius: 16px; }
input, select, textarea { border-radius: 10px; }
.btn { border-radius: 10px; }

/* Số liệu to, mang màu của từng chỉ số, vạch màu bên trái phát sáng nhẹ */
.kpi { padding: 18px 20px 16px 24px; gap: 6px; }
.kpi::before { width: 4px; border-radius: 18px 0 0 18px; box-shadow: 0 0 14px var(--kpi, transparent); }
.kpi-label { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.kpi-label::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--kpi, var(--ink-3)); box-shadow: 0 0 8px var(--kpi, transparent); flex: none; }
.kpi-value { font-size: 34px; color: var(--kpi, var(--ink)); }

/* Nút chọn dạng viên thuốc */
.segs { border-radius: 999px; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--edge); }
.seg { border-radius: 999px; border-right: 0; background: transparent; padding: 7px 16px; font-weight: 600; }
.seg:hover { color: var(--ink); background: var(--surface-2); }
.seg.on { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.segs.small { border-radius: 12px; }
.segs.small .seg { border-radius: 8px; }
.crm-tabs { border-radius: 999px; padding: 4px; background: var(--surface); box-shadow: var(--edge); }
.crm-tabs a { border-radius: 999px; padding: 6px 16px; font-weight: 600; }
.crm-tabs a.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* Nút chính có độ chuyển màu và ánh sáng */
.btn.primary { background-image: linear-gradient(135deg, color-mix(in srgb, #fff 14%, var(--accent)), var(--accent)); box-shadow: var(--glow); }
.btn.primary:hover { filter: brightness(1.05); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Menu trái: mục đang chọn sáng dần sang phải */
.nav a.active { background: linear-gradient(90deg, var(--accent-soft), transparent); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* Viền thẻ ánh màu theme khi rê chuột */
.card:hover, .ch-card:hover, .org-card:hover, .panel:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.clock-pill.on { box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 35%, transparent); }
.nav-count, .unread-dot, .bell .badge-count { box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 45%, transparent); }
.sla-clock.late { box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 30%, transparent); }

/* ================= Theme cao cấp: Đen vàng, Đêm xanh, Xanh dương, Hồng, Tím =================
   Cùng một khuôn (phong cách michaeljp.net): nền tối có vầng sáng, ô màu than viền tối,
   nút vàng/xanh/hồng/tím chuyển sắc có quầng sáng, tiêu đề và số liệu chữ có chân phát sáng */
:root[data-theme="noir"] {
  --bg: #0a0a0a; --surface: #141414; --surface-2: #1a1814; --line: #2a2416; --line-strong: #3d3320;
  --ink: #f4eee2; --ink-2: #cbbfa6; --ink-3: #8f8571;
  --accent: #d4a937; --accent-hover: #e2b94b; --accent-soft: rgba(212, 169, 55, .14); --on-accent: #1a1205;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .13); --warn: #f6c453; --warn-soft: rgba(246, 196, 83, .13);
  --ok: #5ad48a; --ok-soft: rgba(90, 212, 138, .13);
  --s1: #e3b84a; --s2: #ff6b6b; --s3: #5ad48a; --s4: #f6dd8f;
  --grad: linear-gradient(135deg, #f6dd8f 0%, #d4a937 45%, #9a6f1c 100%); --hi: #f6dd8f; --acc-rgb: 212, 169, 55; --kpi-bg: #171511;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
  --elev-1: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 169, 55, .04);
  --elev-2: 0 0 0 1px rgba(212, 169, 55, .4), 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(212, 169, 55, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --glow: 0 8px 28px rgba(212, 169, 55, .4);
  --avatar-bg: rgba(212, 169, 55, .18); --avatar-ink: #f6dd8f;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .02); --col-line: rgba(212, 169, 55, .1);
  --bubble-out: rgba(212, 169, 55, .16); --bubble-out-line: rgba(212, 169, 55, .32);
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .72);
  --toast-bg: #1a1814; --toast-ink: #f6dd8f;
  --ai-bg: linear-gradient(180deg, rgba(212, 169, 55, .12), #141414); --ai-line: rgba(212, 169, 55, .35); --ai-ink: #f6dd8f;
  --purple-soft: rgba(212, 169, 55, .14); --green-soft: rgba(90, 212, 138, .13); --green-ink: #8fe3b0;
  --gate-bg: #0a0a0af7;
  --chrome: #0a0a0adb;
  --bg-image:
    radial-gradient(900px 520px at 72% -8%, rgba(212, 169, 55, .17), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(154, 111, 28, .15), transparent 58%);
  --bg-size: auto;
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --bg: #071120; --surface: #0b1728; --surface-2: #0f1e33; --line: #1a2b44; --line-strong: #25395a;
  --ink: #e7eef8; --ink-2: #a3b3ca; --ink-3: #6d7f99;
  --accent: #20c997; --accent-hover: #1ab485; --accent-soft: rgba(32, 201, 151, .14); --on-accent: #03140e;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .13); --warn: #f6c453; --warn-soft: rgba(246, 196, 83, .13);
  --ok: #5ad48a; --ok-soft: rgba(90, 212, 138, .13);
  --s1: #2ed3a0; --s2: #ff6b6b; --s3: #4c8dff; --s4: #f5b544;
  --grad: linear-gradient(135deg, #9ff3d6 0%, #20c997 45%, #0c7f5e 100%); --hi: #9ff3d6; --acc-rgb: 32, 201, 151; --kpi-bg: #0e1c30;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
  --elev-1: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(32, 201, 151, .04);
  --elev-2: 0 0 0 1px rgba(32, 201, 151, .4), 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(32, 201, 151, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --glow: 0 8px 28px rgba(32, 201, 151, .4);
  --avatar-bg: rgba(32, 201, 151, .18); --avatar-ink: #9ff3d6;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .02); --col-line: rgba(32, 201, 151, .1);
  --bubble-out: rgba(32, 201, 151, .16); --bubble-out-line: rgba(32, 201, 151, .32);
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .72);
  --toast-bg: #0f1e33; --toast-ink: #9ff3d6;
  --ai-bg: linear-gradient(180deg, rgba(32, 201, 151, .12), #0b1728); --ai-line: rgba(32, 201, 151, .35); --ai-ink: #9ff3d6;
  --purple-soft: rgba(32, 201, 151, .14); --green-soft: rgba(90, 212, 138, .13); --green-ink: #8fe3b0;
  --gate-bg: #071120f7;
  --chrome: #071120db;
  --bg-image:
    radial-gradient(900px 520px at 72% -8%, rgba(32, 201, 151, .17), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(76, 141, 255, .15), transparent 58%),
    linear-gradient(rgba(120, 160, 220, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 220, .045) 1px, transparent 1px);
  --bg-size: auto, auto, 36px 36px, 36px 36px;
  color-scheme: dark;
}
:root[data-theme="sapphire"] {
  --bg: #050b18; --surface: #0c1426; --surface-2: #111c33; --line: #1b2a48; --line-strong: #283d66;
  --ink: #eaf1ff; --ink-2: #a9b9d9; --ink-3: #6f81a6;
  --accent: #3b82f6; --accent-hover: #5b97f8; --accent-soft: rgba(59, 130, 246, .14); --on-accent: #ffffff;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .13); --warn: #f6c453; --warn-soft: rgba(246, 196, 83, .13);
  --ok: #5ad48a; --ok-soft: rgba(90, 212, 138, .13);
  --s1: #60a5fa; --s2: #ff6b8a; --s3: #34d399; --s4: #fbbf24;
  --grad: linear-gradient(135deg, #a9cbff 0%, #3b82f6 45%, #1d3fa8 100%); --hi: #a9cbff; --acc-rgb: 59, 130, 246; --kpi-bg: #0f1a30;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
  --elev-1: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(59, 130, 246, .04);
  --elev-2: 0 0 0 1px rgba(59, 130, 246, .4), 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(59, 130, 246, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --glow: 0 8px 28px rgba(59, 130, 246, .4);
  --avatar-bg: rgba(59, 130, 246, .18); --avatar-ink: #a9cbff;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .02); --col-line: rgba(59, 130, 246, .1);
  --bubble-out: rgba(59, 130, 246, .16); --bubble-out-line: rgba(59, 130, 246, .32);
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .72);
  --toast-bg: #111c33; --toast-ink: #a9cbff;
  --ai-bg: linear-gradient(180deg, rgba(59, 130, 246, .12), #0c1426); --ai-line: rgba(59, 130, 246, .35); --ai-ink: #a9cbff;
  --purple-soft: rgba(59, 130, 246, .14); --green-soft: rgba(90, 212, 138, .13); --green-ink: #8fe3b0;
  --gate-bg: #050b18f7;
  --chrome: #050b18db;
  --bg-image:
    radial-gradient(900px 520px at 72% -8%, rgba(59, 130, 246, .17), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(30, 64, 175, .15), transparent 58%);
  --bg-size: auto;
  color-scheme: dark;
}
:root[data-theme="rose"] {
  --bg: #0f070b; --surface: #1a0f15; --surface-2: #22131b; --line: #3a1d2b; --line-strong: #55283d;
  --ink: #fdeef4; --ink-2: #e0b6c7; --ink-3: #9d7586;
  --accent: #ec4899; --accent-hover: #f062a8; --accent-soft: rgba(236, 72, 153, .14); --on-accent: #ffffff;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .13); --warn: #f6c453; --warn-soft: rgba(246, 196, 83, .13);
  --ok: #5ad48a; --ok-soft: rgba(90, 212, 138, .13);
  --s1: #f472b6; --s2: #ff6b6b; --s3: #4ade80; --s4: #fbbf24;
  --grad: linear-gradient(135deg, #ffc4de 0%, #ec4899 45%, #9d174d 100%); --hi: #ffc4de; --acc-rgb: 236, 72, 153; --kpi-bg: #1f1219;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
  --elev-1: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(236, 72, 153, .04);
  --elev-2: 0 0 0 1px rgba(236, 72, 153, .4), 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(236, 72, 153, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --glow: 0 8px 28px rgba(236, 72, 153, .4);
  --avatar-bg: rgba(236, 72, 153, .18); --avatar-ink: #ffc4de;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .02); --col-line: rgba(236, 72, 153, .1);
  --bubble-out: rgba(236, 72, 153, .16); --bubble-out-line: rgba(236, 72, 153, .32);
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .72);
  --toast-bg: #22131b; --toast-ink: #ffc4de;
  --ai-bg: linear-gradient(180deg, rgba(236, 72, 153, .12), #1a0f15); --ai-line: rgba(236, 72, 153, .35); --ai-ink: #ffc4de;
  --purple-soft: rgba(236, 72, 153, .14); --green-soft: rgba(90, 212, 138, .13); --green-ink: #8fe3b0;
  --gate-bg: #0f070bf7;
  --chrome: #0f070bdb;
  --bg-image:
    radial-gradient(900px 520px at 72% -8%, rgba(236, 72, 153, .17), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(157, 23, 77, .15), transparent 58%);
  --bg-size: auto;
  color-scheme: dark;
}
:root[data-theme="amethyst"] {
  --bg: #0b0715; --surface: #140e24; --surface-2: #1a1230; --line: #2a1f48; --line-strong: #3d2d6a;
  --ink: #f1ecff; --ink-2: #bfb3e6; --ink-3: #8578ad;
  --accent: #8b5cf6; --accent-hover: #9f78f8; --accent-soft: rgba(139, 92, 246, .14); --on-accent: #ffffff;
  --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .13); --warn: #f6c453; --warn-soft: rgba(246, 196, 83, .13);
  --ok: #5ad48a; --ok-soft: rgba(90, 212, 138, .13);
  --s1: #a78bfa; --s2: #ff6b8a; --s3: #34d399; --s4: #fbbf24;
  --grad: linear-gradient(135deg, #dccdff 0%, #8b5cf6 45%, #5b21b6 100%); --hi: #dccdff; --acc-rgb: 139, 92, 246; --kpi-bg: #18112b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
  --elev-1: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(139, 92, 246, .04);
  --elev-2: 0 0 0 1px rgba(139, 92, 246, .4), 0 16px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(139, 92, 246, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --glow: 0 8px 28px rgba(139, 92, 246, .4);
  --avatar-bg: rgba(139, 92, 246, .18); --avatar-ink: #dccdff;
  --board-bg: transparent;
  --col-bg: rgba(255, 255, 255, .02); --col-line: rgba(139, 92, 246, .1);
  --bubble-out: rgba(139, 92, 246, .16); --bubble-out-line: rgba(139, 92, 246, .32);
  --tint: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .72);
  --toast-bg: #1a1230; --toast-ink: #dccdff;
  --ai-bg: linear-gradient(180deg, rgba(139, 92, 246, .12), #140e24); --ai-line: rgba(139, 92, 246, .35); --ai-ink: #dccdff;
  --purple-soft: rgba(139, 92, 246, .14); --green-soft: rgba(90, 212, 138, .13); --green-ink: #8fe3b0;
  --gate-bg: #0b0715f7;
  --chrome: #0b0715db;
  --bg-image:
    radial-gradient(900px 520px at 72% -8%, rgba(139, 92, 246, .17), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(91, 33, 182, .15), transparent 58%);
  --bg-size: auto;
  color-scheme: dark;
}

:root[data-theme] .btn.primary, :root[data-theme] .seg.on { background: var(--grad); border-color: transparent; color: var(--on-accent); font-weight: 700; box-shadow: var(--glow); }
:root[data-theme] .btn.primary:hover { filter: brightness(1.07); box-shadow: 0 10px 36px rgba(var(--acc-rgb), .5); }
:root[data-theme] .btn:not(.primary):not(.ghost) { border-color: rgba(var(--acc-rgb), .45); }
:root[data-theme] .crm-tabs a.on { background: rgba(var(--acc-rgb), .16); color: var(--hi); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .45); }
:root[data-theme] .nav a.active { color: var(--hi); background: linear-gradient(90deg, rgba(var(--acc-rgb), .2), transparent); box-shadow: inset 3px 0 0 var(--accent); }
:root[data-theme] .tabs a.on { color: var(--hi); border-bottom-color: var(--accent); }
:root[data-theme] .page-title, :root[data-theme] .panel h3, :root[data-theme] .report-h, :root[data-theme] .profile-id h2, :root[data-theme] .an-name, :root[data-theme] .cg-card h2,
:root[data-theme] .login-card .brand.big, :root[data-theme] .brand span { font-family: 'Playfair Display', Georgia, serif; letter-spacing: .01em; }
:root[data-theme] .page-title { color: var(--hi); }
:root[data-theme] .kpi-value { font-family: 'Playfair Display', Georgia, serif; text-shadow: 0 0 18px color-mix(in srgb, var(--kpi, var(--accent)) 35%, transparent); }
:root[data-theme] .kpi { background: linear-gradient(180deg, var(--kpi-bg), var(--surface)); }
:root[data-theme] .panel, :root[data-theme] .card, :root[data-theme] .ch-card, :root[data-theme] .org-card { border-color: var(--line); }
:root[data-theme] .card:hover, :root[data-theme] .panel:hover, :root[data-theme] .ch-card:hover, :root[data-theme] .org-card:hover { border-color: rgba(var(--acc-rgb), .45); }
:root[data-theme] .clock-pill { border-color: rgba(var(--acc-rgb), .4); }
:root[data-theme] .clock-pill.on { color: var(--hi); background: rgba(var(--acc-rgb), .12); box-shadow: 0 0 14px rgba(var(--acc-rgb), .3); }
:root[data-theme] .clock-pill.on .cp-dot { background: var(--hi); box-shadow: 0 0 8px var(--accent); }
:root[data-theme] input:focus, :root[data-theme] select:focus, :root[data-theme] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .16), 0 0 14px rgba(var(--acc-rgb), .2); }
:root[data-theme] ::selection { background: rgba(var(--acc-rgb), .35); }
:root[data-theme] .login-logo, :root[data-theme] .brand-mark { filter: brightness(1.05); }
/* 5 theme: xếp 5 ô trên một hàng trong bảng chấm công */
.clock-pop .theme-pick { grid-template-columns: repeat(5, 1fr); }

/* Bấm tên, ảnh đại diện để mở hồ sơ */
a.cp-who { color: inherit; border-radius: 12px; padding: 6px; margin: -6px; transition: background .15s; }
a.cp-who:hover { background: var(--surface-2); }
.cp-go { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.me-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; border-radius: 10px; padding: 4px; margin: -4px; }
.me-link:hover { background: var(--surface-2); }
.me-link .me-info { min-width: 0; }
.avatar-edit { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; flex: none; }
.avatar-edit .avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--elev-1); }
.avatar-edit:hover .avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.profile-head { position: relative; }
.profile-close { position: absolute; top: 10px; right: 10px; font-size: 22px; }
.profile-head > .btn { margin-right: 36px; }

.imp-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.imp-stages li { display: flex; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }

/* ===== Điện thoại: bố cục kiểu app Bitrix24 ===== */
.mob-only, .nav-short, .nav-menu, .top-brand, .send-ico, .head-close { display: none !important; }
.search-row { display: contents; }
.board-filters { display: contents; }
.sheet-wrap { position: fixed; inset: 0; z-index: 45; background: var(--scrim); display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--surface); border-radius: 20px 20px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 2px auto 0; }
.sheet-me { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: inherit; text-align: left; cursor: pointer; }
.sheet-me .avatar { width: 44px; height: 44px; font-size: 15px; }
.sheet-me .grow { display: flex; flex-direction: column; min-width: 0; }
.sheet-me small { color: var(--ink-3); }
.sheet-go { font-size: 22px; color: var(--ink-3); }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sheet-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sheet-grid button .ico svg { width: 24px; height: 24px; }
.sheet-grid button.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.btn.block { width: 100%; justify-content: center; text-align: center; }

@media (max-width: 760px) {
  .mob-only { display: inline-grid !important; }
  .desk-only { display: none !important; }
  html, body { overscroll-behavior-y: none; }

  /* Khung trang: đầu trang một hàng, nội dung ở giữa, menu dưới đáy */
  .layout { display: block; height: 100dvh; min-height: 0; }
  .content { height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .main { flex: 1; min-height: 0; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }

  .topbar { flex-wrap: wrap; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .top-brand { display: grid !important; place-items: center; }
  .top-brand .brand-mark, .top-brand .brand-mark svg { width: 30px; height: 30px; }
  .page-title { font-size: 21px; margin-right: auto; }
  .clock-pill { padding: 5px 11px 5px 9px; font-size: 12.5px; }
  .top-actions { order: 5; width: 100%; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .top-actions > * { min-width: 0; }

  /* Menu dưới đáy: 4 mục chính + Menu */
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 15; height: auto; flex-direction: row; align-items: stretch; overflow: visible;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0, 0, 0, .35); }
  .sidebar .brand, .sidebar .me { display: none; }
  .nav { flex-direction: row; width: 100%; gap: 0; }
  .nav a, .nav-menu { flex: 1 1 0; min-width: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px;
    border: 0; border-radius: 12px; background: none !important; box-shadow: none !important; color: var(--ink-3); font-size: 10.5px; font-weight: 600; cursor: pointer; position: relative; }
  .nav a:nth-of-type(n+5) { display: none !important; }
  .nav a .ico svg { width: 24px; height: 24px; }
  .nav-label { display: none !important; }
  .nav-short { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav a.active { color: var(--accent); }
  .nav a.active .ico { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
  .nav-menu .avatar { width: 26px; height: 26px; font-size: 10px; }
  .nav-count { position: absolute; top: 0; left: calc(50% + 4px); margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; border: 2px solid var(--surface); }

  /* Thanh tab dạng viên thuốc, cuộn ngang */
  .crm-tabs, .tabs, .segs.small { display: flex !important; width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .crm-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .segs::-webkit-scrollbar, .stage-strip::-webkit-scrollbar { display: none; }
  .crm-tabs { margin: 0; padding: 3px; }
  .crm-tabs a { flex: 1 0 auto; text-align: center; padding: 7px 14px; }
  .tabs { margin-bottom: 12px; gap: 6px; border: 0; }
  .tabs a { border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; margin: 0; }
  .tabs a.on { border-color: var(--ink); }
  .segs.small { gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
  .segs.small .seg { flex: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; font-size: 13px; }

  /* CRM: tìm kiếm + lọc + ⋯ một hàng, bộ lọc mở khi bấm */
  .search-row { display: flex; gap: 8px; width: 100%; align-items: center; }
  .search-row .search, .top-actions .search { flex: 1; width: auto; min-width: 0; height: 40px; border-radius: 12px; }
  .search-row .icon-btn { width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 12px; place-items: center; flex: none; }
  .board-filters { display: none; width: 100%; gap: 8px; }
  .board-filters.open { display: grid; grid-template-columns: 1fr 1fr; }
  .board-filters select { width: 100%; height: 38px; border-radius: 10px; }

  /* Bảng Kanban: mỗi lần một cột, lướt ngang, dải stage phía trên */
  .board-main { flex-direction: column; padding: 0; overflow: hidden; }
  .stage-strip { display: flex !important; gap: 6px; overflow-x: auto; padding: 10px 12px 8px; flex: none; scrollbar-width: none; }
  .stage-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .stage-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--stage); flex: none; }
  .stage-chip b { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .stage-chip.on { background: var(--stage); color: var(--stage-ink); border-color: transparent; box-shadow: 0 0 14px color-mix(in srgb, var(--stage) 45%, transparent); }
  .stage-chip.on i { background: currentColor; opacity: .55; }
  .stage-chip.on b { color: inherit; opacity: .8; }
  .board { flex: 1; min-height: 0; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .board::-webkit-scrollbar { display: none; }
  .col { width: 100vw; max-height: none; height: 100%; flex: none; scroll-snap-align: start; scroll-snap-stop: always;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 12px; }
  .col-head { display: none; }
  .col-meta { padding: 0 2px 6px; }
  .col-add { display: none; }
  .col-list { padding: 0 0 96px; gap: 10px; -webkit-overflow-scrolling: touch; }
  .card { padding: 13px 14px; border-radius: 16px; }
  .card h4 { font-size: 15px; }
  .card-sub { font-size: 13px; }
  .card:hover { transform: none; }

  /* Nút + nổi như Bitrix24 */
  .fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 14; width: 58px; height: 58px; border-radius: 18px; border: 0;
    display: grid !important; place-items: center; background: var(--grad, var(--accent)); color: var(--on-accent); font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), var(--glow, 0 0 0 transparent); }
  .fab:active { transform: scale(.94); }

  /* Trình tin nhắn: danh sách kiểu Bitrix24, ảnh to, chữ rõ */
  .main.messenger-main, .main.cc-inbox { padding: 10px 0 0; overflow: hidden; }
  .main.messenger-main .tabs, .main.cc-inbox .tabs { padding: 0 12px; }
  .main.cc-inbox .inbox { margin: 0; }
  .inbox-main { height: auto; flex: 1; min-height: 0; }
  .inbox { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) !important; }
  .conv-col { border: 0; background: transparent; min-width: 0; }
  .inbox:not(:has(.chat-head)) .chat-slot { display: none; }
  .inbox:has(.chat-head) .conv-col { display: none; }
  .msg-switch { gap: 8px; padding-left: 12px !important; padding-right: 12px !important; }
  .msg-switch > .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conv-tools { padding: 4px 12px 10px; border: 0; gap: 10px; }
  .conv-tools input[type=search] { height: 40px; border-radius: 12px; }
  .conv { padding: 12px 14px; gap: 12px; align-items: center; background: transparent; border-bottom: 0; position: relative; }
  .conv::after { content: ""; position: absolute; left: 78px; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
  .conv .avatar { width: 52px; height: 52px; font-size: 17px; }
  .conv-line strong { font-size: 15.5px; }
  .conv-last { font-size: 14px; }
  .conv-line time { font-size: 12.5px; }

  /* Chữ ô nhập 16px: iPhone không tự phóng to khi bấm vào ô */
  input, textarea, select { font-size: 16px !important; }

  /* Đang mở một hội thoại: chat chiếm trọn màn hình như app (ẩn đầu trang, tab, menu dưới đáy) */
  body:has(.main .inbox .chat-head) .topbar,
  body:has(.main .inbox .chat-head) .sidebar,
  body:has(.main .inbox .chat-head) .msg-switch,
  body:has(.main .inbox .chat-head) .main > .tabs { display: none !important; }
  body:has(.main .inbox .chat-head) .content { height: var(--vvh, 100dvh); padding-bottom: 0; }
  body:has(.main .inbox .chat-head) .main { padding: 0 !important; }
  .main .chat-head { padding: calc(8px + env(safe-area-inset-top)) 12px 8px 4px; gap: 6px; position: relative; z-index: 2; }
  .main .chat-head strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main .chat-head small { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .back-btn { width: 40px; height: 40px; font-size: 34px !important; line-height: 1; place-items: center; color: var(--accent); }
  .msgs { padding: 12px 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .bubble { max-width: 86%; font-size: 15px; line-height: 1.42; }
  .bubble audio { max-width: 100%; }

  /* Ô soạn tin kiểu Telegram: một hàng gồm ghim file, ô nhập bo tròn, nút gửi tròn */
  .composer-wrap { border-top: 1px solid var(--line); }
  .composer { flex-wrap: nowrap; gap: 8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); align-items: flex-end; border-top: 0; }
  .composer .desk-tool, .composer .close-conv { display: none !important; }
  .composer textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; border-radius: 20px; padding: 9px 14px; line-height: 1.3; }
  .composer .icon-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 19px; padding: 0; place-items: center; }
  .composer .send-btn { width: 40px; height: 40px; min-width: 0; flex: none; padding: 0; border-radius: 50%; display: grid; place-items: center; }
  .composer .send-btn .send-txt { display: none; }
  .composer .send-btn .send-ico { display: grid !important; place-items: center; margin-left: 2px; }
  .tr-bar { padding: 4px 10px 0; gap: 10px; font-size: 12px; }
  .tr-bar > * { font-size: 12px !important; }
  html.kb-open .composer { padding-bottom: 6px; }

  /* Nút Đóng nhỏ màu đỏ ở góc phải đầu hội thoại */
  .main .chat-head .head-close { display: inline-flex !important; align-items: center; flex: none; height: 30px; padding: 0 12px; border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 16%, transparent);
    color: var(--danger); font-size: 13px; font-weight: 700; cursor: pointer; }
  .main .chat-head .head-close:active { transform: scale(.95); }

  /* Hộp thoại và phiếu chiếm trọn màn hình */
  .drawer { width: 100%; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .overlay { padding: 0; align-items: end; }
  .overlay .modal { width: 100%; max-width: none; max-height: 92dvh; border-radius: 20px 20px 0 0; }
}