:root { --bg:#f5f6f8; --card:#fff; --text:#1d2330; --muted:#6b7280; --line:#e3e6eb; --accent:#2563eb; --new:#fff7d6; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161b; --card:#1d2027; --text:#e6e8ec; --muted:#9aa1ad; --line:#2d313a; --accent:#5b8cff; --new:#3a3416; } }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }
a { color:var(--accent); cursor:pointer; }
input, select, button, textarea { font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 9px; }
button { cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.login { min-height:100vh; display:grid; place-items:center; padding:16px; }
.login form { width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px; }
.login label, .grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.err { color:#dc2626; min-height:1em; margin:0; }
.muted { color:var(--muted); }
header { display:flex; flex-wrap:wrap; gap:16px; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header nav a { padding:6px 10px; border-radius:6px; color:var(--text); text-decoration:none; }
header nav a.active { background:var(--bg); font-weight:600; }
.who { color:var(--muted); font-size:13px; }
section { padding:16px; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center; }
.toolbar #fQ { min-width:220px; flex:1; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip { padding:3px 10px; border-radius:99px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:13px; }
.chip.on { border-color:var(--accent); color:var(--accent); }
.tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; }
th, td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:nowrap; }
th { font-size:12px; color:var(--muted); font-weight:600; background:var(--card); position:sticky; top:0; }
td.note { white-space:normal; min-width:180px; max-width:320px; }
td select, td input { padding:3px 6px; }
tr.fresh { background:var(--new); transition:background 3s; }
.st { font-size:12px; padding:2px 8px; border-radius:99px; background:var(--bg); }
.pager { display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:10px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:10px; align-items:end; margin-bottom:12px; }
.inline { display:flex; gap:8px; align-items:center; }
.perms { display:flex; flex-wrap:wrap; gap:4px 12px; white-space:normal; min-width:320px; font-size:12px; }
.perms label { display:flex; gap:4px; align-items:center; }
pre { background:var(--bg); padding:10px; border-radius:6px; overflow-x:auto; font-size:12px; white-space:pre-wrap; word-break:break-all; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); width:min(480px, calc(100vw - 32px)); }
dialog form { display:flex; flex-direction:column; gap:10px; }
dialog label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
dialog .row { display:flex; gap:8px; justify-content:flex-end; }
#toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:8px 14px; border-radius:8px; opacity:0; transition:opacity .3s; pointer-events:none; }
#toast.show { opacity:1; }

.kpis { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; min-width:140px; }
.kpi b { display:block; font-size:22px; }
.kpi span { color:var(--muted); font-size:12px; }
.chip.due { border-color:#f59e0b; color:#b45309; }
td.overdue input { border-color:#f59e0b; background:var(--new); }
.hist { max-height:60vh; overflow:auto; font-size:13px; }
.hist div { padding:6px 0; border-bottom:1px solid var(--line); }
.hist small { color:var(--muted); }
#reportTable td, #reportTable th, #reportTable2 td, #reportTable2 th { text-align:right; }
#reportTable td:first-child, #reportTable th:first-child, #reportTable2 td:first-child, #reportTable2 th:first-child { text-align:left; }

.chip.on { outline:2px solid var(--accent); outline-offset:1px; }

/* Bảng chính và trang chi tiết */
tr.leadRow { cursor:pointer; }
tr.leadRow:hover td { background:var(--bg); }
tr.viewing td, tr.viewing:hover td { background:#fef3c7; }
@media (prefers-color-scheme: dark) { tr.viewing td, tr.viewing:hover td { background:#4a3b10; } }
.viewTag { display:block; font-size:12px; color:#c2410c; font-weight:600; }
.viewTag:empty { display:none; }
dialog.detail { width:min(760px, calc(100vw - 16px)); max-height:calc(100vh - 32px); padding:16px 18px; }
.dHead { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.dHead h3 { margin:0 0 2px; font-size:20px; }
.dPhone { font-size:18px; font-weight:600; margin-bottom:2px; }
.dHead .dClose { border:none; font-size:18px; background:none; }
.dGrid { align-items:start; }
.dGrid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
#detailBody h4 { margin:14px 0 6px; }
.noteAdd { display:flex; flex-direction:column; gap:6px; align-items:flex-end; margin-bottom:6px; }
.noteAdd textarea { width:100%; }
#dNotes { max-height:240px; }
.warnBox { background:#ffedd5; color:#9a3412; padding:8px 10px; border-radius:6px; margin:8px 0; }
#detailBody .row { display:flex; gap:8px; justify-content:flex-end; }
.dPhone a:focus:not(:focus-visible) { outline:none; }

.segTabs { display:flex; background:var(--bg); border-radius:8px; padding:3px; gap:3px; }
.segTabs a { flex:1; text-align:center; padding:7px 6px; border-radius:6px; color:var(--muted); text-decoration:none; font-weight:600; }
.segTabs a.active { background:var(--card); color:var(--accent); box-shadow:0 1px 3px #0002; }
#leadTable .cbIn { width:178px; font-size:12px; padding:3px 4px; }
#leadTable td:nth-last-child(-n+3) { padding-left:4px; padding-right:4px; }
#leadTable td.wrap { white-space:normal; min-width:150px; max-width:200px; }
#leadTable td.noteCell { white-space:normal; min-width:160px; max-width:260px; }
.noteTxt { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cbTag { display:block; font-size:11px; color:#b45309; }
td.noteCell.overdue { background:var(--new); }
#leadTable td.noteCell small.muted { color:inherit; opacity:.8; }
#leadTable .st { font-size:11px; padding:1px 7px; white-space:nowrap; }
tr.dup td, tr.dup:hover td { background:#fecaca; color:#7f1d1d; }
@media (prefers-color-scheme: dark) { tr.dup td, tr.dup:hover td { background:#5b1f1f; color:#fecaca; } }
#dHistList { max-height:220px; }
/* Trang chi tiết một số: tông xanh ngọc nhạt, dịu mắt, tách khỏi trang chính */
dialog.detail { --dbg:#f4f9f7; --dhead:#dcefe8; --dink:#1f5c4d; --dline:#cfe3db; background:var(--dbg); border:1px solid var(--dline); border-radius:14px; padding:0; box-shadow:0 18px 50px #0003; }
@media (prefers-color-scheme: dark) { dialog.detail { --dbg:#18221f; --dhead:#203a33; --dink:#9fd6c4; --dline:#2c4740; } }
dialog.detail::backdrop { background:#0f172a80; }
#detailBody { padding:0 18px 16px; }
dialog.detail .dHead { background:var(--dhead); color:var(--dink); margin:0 -18px 12px; padding:14px 18px; border-bottom:1px solid var(--dline); }
dialog.detail .dHead h3, dialog.detail .dHead a, dialog.detail .dHead b, dialog.detail .dHead .dClose { color:var(--dink); }
dialog.detail .dHead small { color:var(--dink); opacity:.75; }
dialog.detail .dHead a:focus { outline:none; }
dialog.detail h4 { color:var(--dink); border-bottom:1px solid var(--dline); padding-bottom:4px; }
dialog.detail .hist { background:var(--card); border:1px solid var(--dline); border-radius:8px; padding:0 10px; }
dialog.detail .hist div { border-color:var(--dline); }
dialog.detail input, dialog.detail textarea, dialog.detail select:not([style]) { background:var(--card); border-color:var(--dline); }
dialog.detail button.primary { background:#2f8f74; border-color:#2f8f74; }
dialog.detail input:disabled, dialog.detail select:disabled { background:#eef0ef; color:#6b7280; border-style:dashed; cursor:not-allowed; }
@media (prefers-color-scheme: dark) { dialog.detail input:disabled, dialog.detail select:disabled { background:#222826; color:#9aa1ad; } }

.permBox { position:relative; min-width:230px; }
.permBox summary { cursor:pointer; list-style:none; border:1px solid var(--line); border-radius:6px; padding:6px 30px 6px 10px; background:var(--card); position:relative; user-select:none; }
.permBox summary::-webkit-details-marker { display:none; }
.permBox summary::after { content:'▾'; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); }
.permBox[open] summary::after { content:'▴'; }
.permBox[open] summary { border-color:var(--accent); }
.permBox .perms { flex-direction:column; gap:6px; padding:10px 12px; margin-top:4px; border:1px solid var(--line); border-radius:8px; background:var(--card); box-shadow:0 6px 20px #0002; min-width:280px; }
.permBox .perms label { font-size:13px; color:var(--text); }
#newPerms .permBox { max-width:360px; }
.permBox .perms label { display:flex; flex-direction:row; align-items:center; gap:8px; }
dialog.detail .dSub { font-size:14px; font-weight:500; margin-left:10px; opacity:.85; }

.chatBox { max-height:300px; min-height:120px; overflow:auto; background:var(--card); border:1px solid var(--dline, var(--line)); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.msg { max-width:75%; padding:7px 11px; border-radius:14px; font-size:14px; }
.msg small { display:block; font-size:11px; opacity:.7; margin-top:2px; }
.msg.in { align-self:flex-start; background:#e9ecef; color:#1d2330; border-bottom-left-radius:4px; }
.msg.out { align-self:flex-end; background:#0084ff; color:#fff; border-bottom-right-radius:4px; }
.chatSend { display:flex; gap:8px; margin-top:8px; }
.chatSend input { flex:1; }
.chatNone { font-size:13px; margin:4px 0 8px; }
.chatSend { margin-bottom:12px; }

/* 2 nút Zalo / Messenger ở góc trên phải trang chi tiết, khung chat bật ra ngay dưới */
dialog.detail .dHead { position:sticky; top:0; z-index:5; }
.dActs { display:flex; align-items:center; gap:8px; position:relative; flex-shrink:0; }
.chatFab { position:relative; width:40px; height:40px; border-radius:50%; border:none; padding:0; display:grid; place-items:center; background:linear-gradient(135deg,#00b2ff,#006aff); box-shadow:0 3px 10px #006aff55; cursor:pointer; }
.chatFab:hover { transform:scale(1.08); }
.zaloFab { background:#0068ff; color:#fff !important; font-weight:800; font-size:12px; text-decoration:none; }
.chatBadge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:9px; background:#e11d48; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; padding:0 4px; }
.chatPop { position:absolute; right:0; top:calc(100% + 10px); width:340px; max-width:calc(100vw - 48px); height:420px; max-height:calc(100vh - 160px); background:var(--card); border-radius:12px; box-shadow:0 12px 40px #0004; display:flex; flex-direction:column; overflow:hidden; text-align:left; }
.chatPopHead { display:flex; flex-direction:column; padding:10px 40px 10px 14px; background:linear-gradient(135deg,#00b2ff,#006aff); position:relative; }
dialog.detail .chatPopHead, dialog.detail .chatPopHead b, dialog.detail .chatPopHead small, dialog.detail .chatPopHead button { color:#fff; opacity:1; }
.chatPopHead small { font-size:12px; }
.chatPopHead button { position:absolute; right:8px; top:8px; background:none; border:none; font-size:16px; }
.chatPop .chatBox { flex:1; max-height:none; min-height:0; border:none; border-radius:0; }
.chatPop .chatSend { margin:0; padding:8px; border-top:1px solid var(--line); }
.chatPop .chatSend input { border-radius:18px; background:var(--bg); }
.chatPop .chatSend button.primary { border-radius:18px; background:#0084ff; border-color:#0084ff; }
.zaloBtn { display:inline-block; padding:7px 14px; border-radius:18px; background:#0068ff; color:#fff !important; text-decoration:none; font-weight:600; }

.permSave { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:8px; margin-top:4px; }
.permMsg.ok { color:#15803d; font-weight:600; }
.permMsg.err { color:#dc2626; }
.permBox.dirty summary { border-color:#f59e0b; background:#fffbeb; }

.lockCard { border:2px solid #fecaca; }
.lockBig { background:#dc2626; color:#fff; border-color:#dc2626; font-weight:700; padding:10px 18px; }
.lockOn { color:#dc2626; }
.lockOff { color:#15803d; }

.userWrap { position:relative; margin-left:8px; }
.userBtn { width:36px; height:36px; border-radius:50%; padding:0; border:none; background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; font-weight:700; font-size:15px; cursor:pointer; display:grid; place-items:center; }
.userBtn:hover { box-shadow:0 0 0 3px #bfdbfe; }
.userMenu { position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px #0002; padding:6px; z-index:50; display:flex; flex-direction:column; }
.userMenu.hidden { display:none; }
.umHead { display:flex; flex-direction:column; padding:8px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.umHead small { color:var(--muted); }
.userMenu a { padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--text); text-decoration:none; }
.userMenu a:hover { background:var(--bg); }
.userMenu #logoutBtn { color:#dc2626; }

.rTitle { margin:16px 0 8px; font-size:16px; }
.rTitle:empty { display:none; }
tr.totalRow td { font-weight:700; background:var(--bg); border-top:2px solid var(--line); }

td.inTime { white-space:nowrap; font-variant-numeric:tabular-nums; }
td.inTime small { display:block; color:var(--muted); font-size:11px; }

dialog.detail .dInTime { display:inline-block; margin:4px 0 2px; padding:3px 10px; border-radius:6px; background:#fff8; color:var(--dink); font-size:13px; font-variant-numeric:tabular-nums; }

.drWrap { position:relative; }
.drBtn { white-space:nowrap; min-width:150px; text-align:left; }
.drBtn.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.drPanel { position:absolute; top:calc(100% + 6px); left:0; z-index:40; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px #0002; padding:10px; display:flex; gap:12px; }
.drPanel.hidden { display:none; }
.drPresets { display:flex; flex-direction:column; min-width:130px; border-right:1px solid var(--line); padding-right:10px; }
.drPresets a { padding:7px 10px; border-radius:6px; cursor:pointer; color:var(--text); white-space:nowrap; }
.drPresets a:hover { background:var(--bg); }
.drPresets a.active { background:#e0ecff; color:var(--accent); font-weight:600; }
.drCustom { display:flex; flex-direction:column; gap:8px; min-width:180px; }
.drCustom label { display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--muted); }
@media (max-width:600px) { .drPanel { flex-direction:column; left:auto; right:0; } .drPresets { border-right:none; border-bottom:1px solid var(--line); padding:0 0 8px; } }

/* Báo cáo: bảng Sale xanh nhạt, bảng MKT cam nhạt */
.tablewrap.tSale { background:#eef5ff; border-color:#cfe0fb; }
.tablewrap.tSale th { background:#dbeafe; color:#1e3a8a; }
.tablewrap.tSale tr.totalRow td { background:#dbeafe; }
.tablewrap.tMkt { background:#fff6ec; border-color:#fbe0c2; }
.tablewrap.tMkt th { background:#ffedd5; color:#9a3412; }
.tablewrap.tMkt tr.totalRow td { background:#ffedd5; }
.tablewrap.tSale td, .tablewrap.tMkt td { background:transparent; }
.rTitle.tSale { color:#1d4ed8; }
.rTitle.tMkt { color:#c2410c; }
@media (prefers-color-scheme: dark) { .tablewrap.tSale { background:#162238; border-color:#24406b; } .tablewrap.tSale th, .tablewrap.tSale tr.totalRow td { background:#1c2d4d; color:#bfdbfe; } .tablewrap.tMkt { background:#2a1d12; border-color:#5a3a1c; } .tablewrap.tMkt th, .tablewrap.tMkt tr.totalRow td { background:#3a2615; color:#fed7aa; } }

/* Số đã chốt đi làm: xanh nhạt cả thanh; số sale khác đã nhận (tự bắt số): mờ đi */
tr.done td, tr.done:hover td { background:#dcfce7; }
@media (prefers-color-scheme: dark) { tr.done td, tr.done:hover td { background:#14361f; } }
tr.locked td { opacity:.75; cursor:not-allowed; }
tr.viewing.done td, tr.viewing.dup td { background:#fef3c7; }
/* Số hẹn phỏng vấn: tím nhạt cả thanh (cùng màu nhãn trạng thái) */
tr.interview td, tr.interview:hover td { background:#f3e8ff; }
@media (prefers-color-scheme: dark) { tr.interview td, tr.interview:hover td { background:#2e1f45; } }
tr.viewing.interview td { background:#fef3c7; }