/* app.css — CRM XSolar (bê nguyên style từ mockup) */
:root{
  --bg:#FFFFFF; --panel:#F7F8FA; --panel2:#F1F3F6; --line:#E6E8EC; --line2:#EEF0F3;
  --ink:#1A1D21; --ink2:#3C4149; --muted:#7A828C; --faint:#9AA1AA;
  --acc:#2563EB; --acc-soft:#EDF2FE; --acc-line:#CFDDFB;
  --green:#128A5B; --red:#C6473F; --amber:#B7791F;
}
*{box-sizing:border-box;margin:0;padding:0}
input,select,textarea,button{font-family:inherit}
body{font-family:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;background:#E9EBEF;color:var(--ink);font-size:15px}

.app{display:flex;min-height:100vh}
/* light sidebar */
.side{width:214px;background:var(--panel);border-right:1px solid var(--line);padding:16px 0;flex:none;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:9px;padding:2px 16px 16px}
.crmtag{font-size:13.5px;font-weight:800;color:var(--muted);border-left:1px solid var(--line);padding-left:9px;letter-spacing:1px}
/* partner grouping on kanban */
.pgroup{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink2);padding:6px 4px 4px;border-top:1px solid var(--line2);margin-top:2px}
.pgroup:first-child{border-top:none;margin-top:0}
.pgroup .pc{color:var(--faint);font-weight:600}
.pgroup .tw{margin-left:auto;color:var(--muted);font-weight:600}
.pgroup .cv{width:8px;color:var(--faint)}
.nsec{font-size:12.5px;font-weight:700;letter-spacing:.5px;color:var(--faint);text-transform:uppercase;padding:12px 18px 5px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:15px;color:var(--ink2);text-decoration:none;font-weight:500;border-left:2px solid transparent}
.nav a .ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.nav a.active{background:#fff;color:var(--acc);font-weight:700;border-left-color:var(--acc)}
.nav a.active .ic{opacity:1}
.nav a.soon{color:var(--faint)}
.nav a.soon .v2{margin-left:auto;font-size:12.5px;font-weight:700;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--faint)}
.side .foot{margin-top:auto;padding:12px 16px 0}
.u{display:flex;align-items:center;gap:9px;padding-top:12px;border-top:1px solid var(--line)}
.uav{width:28px;height:28px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13.5px}
.u b{font-size:13.5px;display:block} .u span{font-size:12.5px;color:var(--muted)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:14px;background:#fff;flex-wrap:nowrap;position:relative;z-index:20}
.top h1{font-size:21px;font-weight:700;white-space:nowrap}
.crumb{font-size:13.5px;color:var(--muted);font-weight:500;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumb a{color:var(--acc);text-decoration:none}
.spacer{flex:1}
.cmdk{height:32px;width:240px;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:flex;align-items:center;padding:0 10px;color:var(--faint);font-size:15px;gap:8px;flex:none}
.cmdk input{border:none;background:transparent;outline:none;color:var(--ink);font-size:15px;flex:1;min-width:0}
.cmdk .kbd{margin-left:auto;font-size:12.5px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:#fff;white-space:nowrap;flex:none}
.btn{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--acc);background:var(--acc);color:#fff;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel)}
.btn.sm{height:28px;font-size:13.5px;padding:0 10px}
.btn:hover{opacity:.9}
.kebab{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;background:#fff;cursor:pointer;font-size:21px}
.content{padding:18px 20px;flex:1;overflow:auto}

.card{background:#fff;border:1px solid var(--line);border-radius:10px}
.pad{padding:16px}
.ttl{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.2px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ttl .r{margin-left:auto;font-weight:500;color:var(--muted);font-size:13.5px}
.muted{color:var(--muted)} .b{font-weight:700}
.grid{display:grid;gap:14px}

/* neutral tag + status dot */
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:6px;font-size:13.5px;font-weight:600;background:var(--panel2);color:var(--ink2);border:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.d-green{background:var(--green)} .d-red{background:var(--red)} .d-amber{background:var(--amber)} .d-acc{background:var(--acc)}
/* Dot đậm dần theo phễu Account (SPEC_V2_1_UX.md mục 6) */
.d-target{background:#9AA3AF} .d-contacted{background:#93C5FD} .d-meeting{background:#60A5FA}
.d-survey{background:#3B82F6} .d-proposal{background:#2563EB} .d-negotiation{background:#1E40AF}
.lnk{color:var(--acc);text-decoration:none;font-weight:600}
.lnk:hover{text-decoration:underline}

table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;color:var(--faint);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--line);font-weight:700}
td{padding:10px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.center{text-align:center}
.row-h:hover{background:var(--panel)}
.row-h td a{text-decoration:none;color:var(--ink)}
.row-h td a:hover{color:var(--acc)}

/* segmented + filter */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;flex:none}
.seg a{padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;border-right:1px solid var(--line)}
.seg a:last-child{border-right:none}
.seg a.on{background:var(--acc-soft);color:var(--acc)}
.filterbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.fchip{height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;white-space:nowrap}
.fchip select{border:none;background:transparent;outline:none;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer}
.fchip .cx{color:var(--faint)}
.fchip.active{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}

/* kpi */
.kpis{grid-template-columns:repeat(4,1fr)}
.kpi{padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px}
.kpi .lbl{font-size:13.5px;color:var(--muted);font-weight:600}
.kpi .val{font-size:26px;font-weight:800;margin-top:5px;line-height:1}
.kpi .val u{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;margin-left:3px}
.kpi .sub{font-size:13.5px;color:var(--muted);margin-top:6px}

/* by owner bars */
.ob{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ob .on{width:74px;font-size:15px;font-weight:600}
.ob .bar{flex:1;height:20px;background:var(--panel2);border-radius:5px;overflow:hidden}
.ob .bar i{display:block;height:100%;background:var(--acc);border-radius:5px;opacity:.85}
.ob .vv{width:96px;text-align:right;font-size:13.5px;font-weight:700}
.ob .vv small{color:var(--muted);font-weight:500}

/* feed */
.feed{display:flex;flex-direction:column}
.fi{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:15px}
.fi:last-child{border:none}
.fi .who{width:24px;height:24px;border-radius:50%;background:var(--panel2);color:var(--ink2);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none}
.fi .t{color:var(--faint);font-size:13.5px;margin-top:1px}

/* kanban */
.longstrip{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px dashed var(--line);border-radius:9px;padding:10px 14px;margin-bottom:12px;font-size:15px}
.longstrip b{font-weight:700}
.kanban{display:flex;gap:12px;align-items:flex-start}
.col{flex:1;min-width:0}
.colh{display:flex;justify-content:space-between;align-items:center;padding:0 4px 9px;font-size:13.5px;font-weight:700}
.colh .cnt{color:var(--muted);font-weight:600}
.kcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;text-decoration:none;display:block;color:var(--ink)}
.kcard:hover{border-color:var(--acc-line);box-shadow:0 2px 8px rgba(37,99,235,.08)}
.kcard .kt{font-size:15px;font-weight:700;margin-bottom:2px}
.kcard .kp{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.kcard .kmeta{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.kw{font-weight:700}
.flag{font-size:12.5px;color:var(--amber);font-weight:600;margin-top:7px;display:flex;align-items:center;gap:5px}
.mini{font-size:12.5px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-weight:600}
.av{width:19px;height:19px;border-radius:50%;background:var(--panel2);color:var(--ink2);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* smart views rail */
.withrail{display:flex;gap:16px}
.rail{width:190px;flex:none}
.rail .rh{font-size:12.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin:4px 0 8px 6px}
.rail a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:15px;color:var(--ink2);text-decoration:none;font-weight:500;margin-bottom:2px}
.rail a.on{background:var(--acc-soft);color:var(--acc);font-weight:700}
.rail a .c{margin-left:auto;font-size:13.5px;color:var(--faint)}
.rail a.on .c{color:var(--acc)}
.rail .add{color:var(--muted);font-size:13.5px;padding:7px 9px}

/* detail */
.cols{display:grid;grid-template-columns:1.9fr 1fr;gap:14px}
.hdr{display:flex;align-items:center;gap:14px;padding:16px}
.bigav{width:46px;height:46px;border-radius:10px;background:var(--acc-soft);color:var(--acc);font-weight:800;font-size:21px;display:flex;align-items:center;justify-content:center;flex:none}
.hdr h2{font-size:21px}
.hdr .meta{color:var(--muted);font-size:13.5px;margin-top:2px}
/* relationship rail chips */
.relchips{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.rc{border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:13.5px;color:var(--ink2);text-decoration:none;font-weight:600;background:#fff}
.rc b{color:var(--acc)}
.rc:hover{border-color:var(--acc-line)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 16px}
.tabs a{padding:10px 12px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--acc);border-color:var(--acc)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 10px;font-size:15px}
.kv .k{color:var(--muted)} .kv .v{font-weight:600}
.contact{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line2)}
.contact:last-child{border:none}
.cn{font-weight:700;font-size:15px} .cr{font-size:13.5px;color:var(--muted)}
.tl{position:relative;padding:0 0 12px 14px;border-left:2px solid var(--line);margin-left:3px}
.tl:before{content:"";position:absolute;left:-5px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--acc);border:2px solid #fff}
.tl .d{font-size:12.5px;color:var(--faint);font-weight:600} .tl .x{font-size:15px;margin-top:1px}
.doc{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line2);font-size:15px}
.doc:last-child{border:none}
.chk{width:16px;height:16px;border-radius:4px;border:1.6px solid var(--green);background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;flex:none}
.chk.no{background:#fff;border-color:var(--line);color:transparent}
.drive{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.drive .fi2{width:30px;height:30px;border-radius:7px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc);font-weight:800}
.est{background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:8px;padding:12px}
.est .big{font-size:26px;font-weight:800;color:var(--acc)}

/* menu popover */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:38px;width:184px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 22px rgba(20,25,35,.14);padding:5px;z-index:100;font-size:15px;display:none}
.menu.open{display:block}
.menu div{padding:8px 10px;border-radius:6px;font-weight:500;cursor:pointer}
.menu div:hover{background:var(--panel)}
.menu .warn{color:var(--red)}
.menu .amber-item{color:var(--amber)}

/* form */
.form{max-width:740px}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:13.5px;font-weight:700;margin-bottom:5px;color:var(--ink2)}
.inp{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:15px;width:100%}
.inp:focus{outline:none;border-color:var(--acc)}
input.inp, select.inp, textarea.inp{outline:none}
input.inp:focus, select.inp:focus, textarea.inp:focus{border-color:var(--acc)}
textarea.inp{height:auto;padding:8px 10px;resize:vertical}
.inp.ph{color:var(--faint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 11px;border-radius:7px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;cursor:pointer}
.chip.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.bulk{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.bulk .bh,.bulk .br{display:grid;grid-template-columns:2fr 3fr 1fr 1fr;gap:8px;padding:9px 12px;font-size:13.5px}
.bulk .bh{background:var(--panel);font-size:12.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.bulk .br{border-top:1px solid var(--line2)}
.note-box{font-size:13.5px;background:#FFF7E9;border:1px solid #F0E0BE;color:#8A6516;padding:9px 12px;border-radius:8px}
.note-blue{font-size:13.5px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc);padding:9px 12px;border-radius:8px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#E9EBEF}
.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;width:380px;box-shadow:0 4px 18px rgba(20,25,35,.08)}
.login-card h2{font-size:26px;font-weight:800;margin-bottom:4px}
.login-card .sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.err-msg{background:#FEF2F2;border:1px solid #FECACA;color:var(--red);padding:8px 12px;border-radius:7px;font-size:15px;margin-bottom:14px}

/* utilities */
.mt4{margin-top:4px} .mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px}
.mb8{margin-bottom:8px} .mb12{margin-bottom:12px} .mb14{margin-bottom:14px}
.text-red{color:var(--red)} .text-green{color:var(--green)} .text-amber{color:var(--amber)}
.text-acc{color:var(--acc)} .text-muted{color:var(--muted)}
.fw700{font-weight:700} .fs11{font-size:12.5px} .fs12{font-size:13.5px}
hr.divider{border:none;border-top:1px solid var(--line);margin:12px 0}

/* flash messages */
.flash-list{list-style:none;padding:0 20px;margin-bottom:-4px}
.flash-list li{padding:8px 12px;border-radius:7px;font-size:15px;margin-bottom:8px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--acc)}

/* Site stage badge colors */
.stage-so_bo{color:var(--faint)}
.stage-khao_sat{color:var(--acc)}
.stage-de_xuat{color:#7C3AED}
.stage-hop_dong{color:var(--amber)}
.stage-ky_hd_con{color:var(--green)}
.status-won .dot{background:var(--green)}
.status-lost .dot{background:var(--red)}
.status-paused .dot{background:var(--amber)}
.status-open .dot{background:var(--acc)}

/* Sortable table (client-side, xem app.js initSortableTable) */
table.sortable th[data-sort]{cursor:pointer;user-select:none}
table.sortable th[data-sort]:hover{color:var(--ink2)}
table.sortable th.sort-asc:after{content:" \25B2";font-size:9px}
table.sortable th.sort-desc:after{content:" \25BC";font-size:9px}

/* Modal overlay */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:24px;width:440px;max-width:95vw;box-shadow:0 16px 40px rgba(20,25,35,.18);max-height:calc(100vh - 40px);overflow-y:auto}
.modal h3{font-size:17px;font-weight:700;margin:-24px -24px 16px;padding:18px 24px 12px;position:sticky;top:-24px;background:#fff;z-index:3;border-bottom:1px solid var(--line2)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin:20px -24px -24px;padding:12px 24px;position:sticky;bottom:-24px;background:#fff;z-index:3;border-top:1px solid var(--line2)}

/* ── Guide / Sơ đồ flow (tab Hướng dẫn) ── */
.flow{padding:24px 26px;background:#fff}
.flow h3{font-size:21px}
.flow .s{color:var(--muted);font-size:13.5px;margin:5px 0 24px}
.relbox{display:flex;align-items:center;padding-left:20px;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.ent{padding:14px 18px;border:1px solid var(--line);border-radius:10px;text-align:center;min-width:170px;background:#fff}
.ent.p{background:var(--ink);color:#fff;border-color:var(--ink)}
.ent b{font-size:17px}
.ent span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.ent.p span{color:#AEB6C0}
.branch{display:flex;flex-direction:column;gap:16px;position:relative;padding-left:26px;margin-left:26px}
.branch:before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:2px;background:var(--acc)}
.brow{display:flex;align-items:center;gap:10px;position:relative}
.brow:before{content:"";position:absolute;left:-26px;width:26px;height:2px;background:var(--acc);top:50%}
.rel2{font-size:12.5px;font-weight:700;color:var(--muted);min-width:78px}
.rel2 b{color:var(--acc)}
.lane{display:flex;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.lanelbl{width:150px;flex:none;padding-right:14px;border-right:2px solid var(--acc)}
.lanelbl b{font-size:15px}
.lanelbl span{font-size:12.5px;color:var(--muted);display:block}
.lanebody{flex:1;display:flex;align-items:center;gap:8px;padding-left:18px;flex-wrap:wrap}
.node{padding:10px 13px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-weight:600;background:var(--panel);text-align:center;line-height:1.25}
.node small{display:block;font-size:12.5px;color:var(--faint);font-weight:600;margin-top:1px}
.node.win{border-color:var(--green);color:var(--green)}
.node.v2{border-style:dashed;color:var(--muted)}
.arrow{color:var(--faint);font-weight:700}
.lostnote{margin-top:6px;font-size:13.5px;color:var(--muted)}
.lostnote b{color:var(--red)}
.guide-steps li{margin:0 0 9px 18px;font-size:13.5px;line-height:1.5}
.guide-h{font-size:15px;font-weight:700;color:var(--ink2);margin:2px 0 10px}

/* ── Guide A→Z steps ── */
.steps{display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.snum{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none}
.sbody{flex:1;min-width:0}
.sbody .sh{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px}
.sbody .guide-steps li{margin-left:16px}

/* ── V2.1: Tìm nhanh sidebar button + bảng cuộn ngang + sửa/xoá nhật ký ── */
.cmdk-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 16px 10px;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer}
.cmdk-btn:hover{background:var(--panel)}
.cmdk-btn .kbd{font-size:12.5px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--panel);color:var(--faint)}
.table-wrap{width:100%;overflow-x:auto}
.note-actions{margin-left:8px;opacity:0;transition:opacity .12s}
.tl:hover .note-actions{opacity:1}
.note-actions .lnk{background:none;border:none;padding:0;cursor:pointer;font-weight:600;text-decoration:none;color:var(--acc)}
.hamburger{display:none;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink2);
  font-size:17px;align-items:center;justify-content:center;cursor:pointer;flex:none;margin:0 8px 0 12px}
.side-backdrop{display:none}

/* ── V2.2: Thẻ đầu account = chỉ số + Hành trình + Việc kế tiếp (SPEC_V2_2_JOURNAL.md) ── */
.cols{align-items:start}
.cols > *{min-width:0} /* cho phép cột co lại, bảng tự cuộn trong khung thay vì đẩy tràn trang */
.head-card .stat-row{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.journey{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.journey .js{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:96px;padding-right:14px}
.journey .js:not(:last-child):after{content:"";position:absolute;left:14px;right:4px;top:5px;height:2px;background:var(--line)}
.journey .js-done:not(:last-child):after,.journey .js-current:not(:last-child):after{background:var(--acc)}
.journey .js-current:not(:last-child):after{background:var(--line)}
.journey .jdot{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:#fff}
.journey .js-done .jdot{background:var(--acc);border-color:var(--acc)}
.journey .js-current .jdot{background:#fff;border:3px solid var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.journey .jl{font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:5px;white-space:nowrap}
.journey .js-current .jl{color:var(--ink);font-weight:700}
.journey .js-todo .jl{color:var(--faint);font-weight:500}
.journey .jd{font-size:12.5px;color:var(--faint);white-space:nowrap}
.journey .js-drop{justify-content:center;padding-left:6px}
.journey .js-drop .jd{margin-top:3px}
.next-row{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line2)}
.next-row .nlabel{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;padding-top:2px}
.next-row .nbody{flex:1;min-width:0}
#next-action-view{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#next-action-view .ndate{font-size:12.5px}
#next-action-view .nact{display:inline-flex;gap:10px}
.next-row .lnk{background:none;border:none;padding:0;cursor:pointer}
#next-action-form .fg{margin-bottom:8px}

/* ── Thẻ đầu account: 4 tầng Danh tính · Hành trình · Số liệu · Việc kế tiếp ── */
.crumb-cur{color:var(--ink2);font-weight:600}
.head-card{padding:18px 20px}
.acc-id{display:flex;align-items:flex-start;gap:16px}
.acc-name{font-size:21px;font-weight:700;line-height:1.25;color:var(--ink)}
.acc-meta{font-size:13.5px;color:var(--muted);margin-top:3px}
.acc-badges{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.tag.prio{background:#fff;color:var(--muted)}
.tag.prio-high{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
.head-card .journey{margin-top:16px;padding-top:14px}
.journey .js{flex:1}
.journey .js-drop{flex:none}
.hk-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.hk-row .hk{padding:0 16px;border-left:1px solid var(--line2)}
.hk-row .hk:first-child{padding-left:0;border-left:none}
.hk-k{font-size:12.5px;color:var(--muted);font-weight:600}
.hk-v{display:block;font-size:21px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.2}
.hk-v .hk-u{font-size:13.5px;font-weight:500;color:var(--muted)}
.hk-s{font-size:12.5px;color:var(--faint);margin-top:1px}
.head-card .next-row{margin-top:14px;padding-top:12px}

/* ── V2.2: Nhật ký chỉ ghi chú sales ── */
.journal-form .auto-grow{height:auto;min-height:36px;padding:8px 10px;resize:none;overflow:hidden;line-height:1.4}
.journal-form .journal-extra{display:none;gap:8px;align-items:center;margin-top:8px}
.journal-form .jhint{font-size:12.5px;color:var(--faint);white-space:nowrap}
.journal-form:focus-within .journal-extra,.journal-form.has-text .journal-extra{display:flex}
.journal-list{max-height:460px;overflow-y:auto;margin-top:12px}
.journal-list .tl.sys{display:none}
.journal-list.show-all .tl.sys{display:block}
.journal-list .tl.sys .x{font-size:12.5px;color:var(--muted)}
.journal-list.show-all .journal-empty{display:none}
.journal-list .clamp{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.journal-list .clamp.open{display:block}
.journal-list .more-btn{background:none;border:none;padding:0;cursor:pointer;margin-top:2px}
.journal-toggle{background:none;border:none;padding:0;cursor:pointer;margin-top:10px}

/* ── P3: Responsive (SPEC_V2_1_UX.md mục P3) — một bộ CSS, breakpoint <=900px ── */
@media (max-width: 900px){
  .hamburger{display:flex}
  .side{position:fixed;left:0;top:0;height:100vh;z-index:250;transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 0 0 rgba(0,0,0,0);overflow-y:auto}
  .side.open{transform:translateX(0);box-shadow:8px 0 24px rgba(20,25,35,.18)}
  .side-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:240}
  .side-backdrop.open{display:block}
  .main{width:100%}
  .content{padding:16px}
  .top{flex-wrap:wrap;height:auto;min-height:54px;padding:8px 12px;gap:8px}
  /* Seg preset kỳ (Tuần trước/Tuần này/...) rộng hơn 1 hàng ở 390px → cho cuộn ngang trong chính nó,
     không đẩy tràn trang (Giám sát KPI, Khai 28/09) */
  .top .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .top .seg::-webkit-scrollbar{display:none}
  .top h1{font-size:17px}
  .cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .table-wrap{overflow-x:auto}
  /* !important cần thiết vì 1 số modal đặt width inline (VD modal Đổi trạng thái 520px ở desktop) */
  .modal{width:calc(100vw - 32px) !important;max-width:calc(100vw - 32px) !important;max-height:90vh;overflow-y:auto}
  .btn,.fchip,.seg a,input.inp,select.inp,textarea.inp,.kebab{min-height:36px}
  .btn.sm{min-height:32px}
  html,body{overflow-x:hidden}
  .journey .js{min-width:84px}
  .table-wrap table{min-width:620px}
  .imp-grid{grid-template-columns:1fr}
  .legend{margin-left:0}
  .gd-three,.gd-parts,.gd-two{grid-template-columns:1fr}
  .gd-model{flex-direction:column;align-items:stretch}
  .gd-acc{width:auto}
  .gd-arrow{display:none}
  .fb-row{flex-wrap:wrap}
  .head-card .stat-row{gap:16px 24px}
  .next-row{flex-direction:column;gap:4px}
  .nx #next-action-view{flex-wrap:wrap}
  .acc-id{flex-direction:column;gap:8px}
  .acc-badges{margin-left:0;justify-content:flex-start}
  .hk-row{grid-template-columns:repeat(2,1fr);row-gap:12px}
  .hk-row .hk:nth-child(3){padding-left:0;border-left:none}
}

/* Danh sách account: hàng chip trạng thái 1 dòng (cuộn ngang nếu hẹp), số đếm nhạt; việc kế tiếp 1 dòng */
.stchips{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
.stchips::-webkit-scrollbar{display:none}
.stchips .fchip{height:28px;padding:0 10px;flex:none}
.fchip .cnt{color:var(--faint);font-weight:600;margin-left:2px}
.fchip.active .cnt{color:var(--acc)}
.na-text{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-col{min-width:180px}
.status-pick{gap:6px;color:var(--muted);font-weight:600;cursor:pointer}
.status-pick select{color:var(--ink);font-weight:700}
.row-actions{display:inline-flex;gap:14px;align-items:center}
.row-actions .lnk{background:none;border:none;padding:0;cursor:pointer}
.pw-form{gap:6px;justify-content:flex-end;margin-top:8px}

/* Modal Sửa account 3 tab */
.modal.modal-wide{width:880px;max-width:calc(100vw - 32px)}
.mtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 14px}
.mtab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.mtab.on{color:var(--acc);border-bottom-color:var(--acc)}
.mtab .cnt{color:var(--faint);margin-left:3px}
.mpanel{display:none;max-height:60vh;overflow:auto}
.edit-table{min-width:640px}
.mpanel.on{display:block}
.edit-table{width:100%;border-collapse:collapse}
.edit-table th{padding:6px 6px;font-size:12.5px}
.edit-table td{padding:4px 6px;border-bottom:none}
.edit-table .inp{height:32px;font-size:13.5px;padding:0 8px}
.edit-table tr.to-delete .inp{opacity:.4;text-decoration:line-through}
.add-row,.rm-row{background:none;border:none;padding:0;cursor:pointer;margin-top:8px}
.rm-row{margin-top:0}

/* ── Nhập loạt dự án (file mẫu Excel → xem trước → xác nhận) ── */
.imp-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.imp-step{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line2)}
.imp-step:first-of-type{border-top:none;padding-top:4px}
.imp-step .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.imp-body{flex:1;min-width:0}
.imp-h{font-weight:700;margin-bottom:8px}
#imp-dl[aria-disabled]{opacity:.45;pointer-events:none}
.drop{display:flex;align-items:center;justify-content:center;min-height:84px;border:1.5px dashed var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:13.5px;cursor:pointer;text-align:center;padding:12px}
.drop input{display:none}
.drop.over,.drop:hover{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.drop.has{border-style:solid;border-color:var(--acc-line);color:var(--ink);font-weight:600}
.rule-formula{font-weight:700;font-size:15px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.rule-formula span{color:var(--acc);padding:0 2px}
.rule-table{width:100%;border-collapse:collapse;font-size:13.5px}
.rule-table td{padding:6px 8px;border-bottom:1px solid var(--line2)}
.rule-table td:last-child{font-weight:700;white-space:nowrap}
.rule-list{padding-left:18px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.prev-table .inp{height:32px;font-size:13.5px}
.prev-table tr.row-warn td{background:#FFFBF0}
.prev-table tr.row-dup td{background:#FDF3F2;color:var(--muted)}
.text-green{color:var(--green)} .text-red{color:var(--red)}

/* Dropdown có ô tìm kiếm (select.searchable) */
.ss{position:relative}
.ss-native{display:none !important}
.ss-btn{justify-content:space-between;text-align:left;cursor:pointer;background:#fff;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:28px;position:relative}
.ss-btn:after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.ss-btn.ss-placeholder{color:var(--faint)}
.ss-panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:400;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(20,25,35,.16);padding:6px}
.ss.open .ss-panel{display:block}
.ss-q{height:32px;margin-bottom:6px}
.ss-list{max-height:240px;overflow-y:auto}
.ss-item{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.ss-item:hover,.ss-item.hl{background:var(--panel)}
.ss-item.on{color:var(--acc);font-weight:700}
.ss-item.ss-empty{color:var(--faint)}
.ss-none{padding:8px 10px;color:var(--faint);font-size:13.5px}
#tab-acc{overflow:visible}

/* Thanh lọc danh sách Account: hàng "xem của ai" + hàng "lọc theo gì" */
.fb-row{flex-wrap:nowrap;gap:8px}
.fb-row .stchips{flex:1 1 auto;min-width:0}
.seg.who{flex:none;max-width:60vw;overflow-x:auto;scrollbar-width:none}
.seg.who a{white-space:nowrap}
.fb-label{font-size:12.5px;color:var(--faint);font-weight:600;white-space:nowrap}
.fchip-amber{border-color:var(--amber);color:var(--amber)}
.stsep{width:1px;align-self:stretch;background:var(--line);margin:3px 2px;flex:none}
.fsel{padding:0 8px;flex:none}
.fsel select{border:none;background:transparent;outline:none;font-size:13.5px;font-weight:600;color:inherit;cursor:pointer}
.fsel-k{color:var(--muted);font-weight:500}   /* nhãn cố định của dropdown lọc; option bên trong chỉ ghi giá trị */
/* Account ưu tiên High: vạch cam mảnh đầu dòng + nhãn cờ (cam XSolar F47C20; chữ đậm hơn cho đủ tương phản) */
.row-high td{background:#FFFAF5}
.row-high:hover td{background:#FFF3E8}
.row-high td:first-child{box-shadow:inset 3px 0 0 #F47C20}
.pri-high{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:#B8520F;background:#FFF3EA;border:1px solid #FAD7BC;border-radius:6px;padding:1px 7px}
.menu.picker{left:0;right:auto;width:260px;padding:8px;top:36px}
.picker-q{height:32px;margin-bottom:6px}
.picker-list{max-height:260px;overflow-y:auto}
.picker-row{display:flex;align-items:center;gap:6px;border-radius:6px}
.picker-row:hover{background:var(--panel)}
.picker-name{flex:1;padding:7px 8px;text-decoration:none;color:var(--ink);font-size:14px}
.picker-name.on{color:var(--acc);font-weight:700}
.pin-btn{background:none;border:none;cursor:pointer;color:var(--faint);padding:6px;border-radius:6px;display:flex}
.pin-btn:hover{color:var(--ink2);background:#fff}
.pin-btn.on{color:var(--acc)}
.pin-btn.on svg{fill:var(--acc-soft)}
.picker-hint{padding:6px 8px 2px;border-top:1px solid var(--line2);margin-top:4px}

/* Bảng Dự án: nhãn trạng thái màu (select dạng pill), đếm theo trạng thái, thanh đổi hàng loạt */
.site-sum{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.ssum{height:26px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.ssum .cnt{color:var(--faint)}
.ssum.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.bulk-bar{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin:0 16px 10px;padding:8px 12px;border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:9px;font-size:13.5px}
.bulk-bar.show{display:flex}
.site-table tr.picked td{background:#F5F8FF}
.st-pill{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:999px;height:26px;padding:0 24px 0 11px;font-size:12.5px;font-weight:700;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A828C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center}
.st-chua_ks{color:#6B7280;background-color:#F3F4F6;border-color:#E5E7EB}
.st-da_ks{color:#2563EB;background-color:#EFF5FF;border-color:#CFE0FB}
.st-da_de_xuat{color:#1D4ED8;background-color:#E8F0FE;border-color:#C3D5FA}
.st-dam_phan{color:#1E3A8A;background-color:#E3EAFA;border-color:#B9C8EE}
.st-da_ky{color:#128A5B;background-color:#E8F6EF;border-color:#BFE5D2}
.st-tam_gac{color:#B7791F;background-color:#FDF6E7;border-color:#F1DDB0}
.st-khong_kha_thi{color:#C6473F;background-color:#FDEFEE;border-color:#F3C9C5}

/* Tooltip dùng chung */
.tipbox{position:fixed;z-index:1000;max-width:340px;background:#1A1D21;color:#fff;border-radius:8px;padding:8px 11px;font-size:13.5px;line-height:1.45;box-shadow:0 8px 22px rgba(20,25,35,.22);pointer-events:none;white-space:pre-wrap}
.tipbox-d{font-size:12.5px;color:#C9CEDA;margin-top:3px}
[data-tip]{cursor:default}

/* Khung nhắc "Việc kế tiếp" trong thẻ đầu account — nổi bật để biết việc phải làm tiếp */
.nx{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:10px;
  background:var(--acc-soft);border:1px solid var(--acc-line);border-left:4px solid var(--acc)}
.nx.nx-due{background:#FFF7EA;border-color:#F1DDB0;border-left-color:var(--amber)}
.nx.nx-empty{background:var(--panel);border-color:var(--line);border-left-color:#C9CEDA}
.nx-ic{width:20px;height:20px;flex:none;color:var(--acc);margin-top:2px}
.nx-due .nx-ic{color:var(--amber)}
.nx-empty .nx-ic{color:var(--faint)}
.nx-main{flex:1;min-width:0}
.nx-label{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.nx-badge{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;color:#fff;background:var(--amber);border-radius:999px;padding:1px 8px}
.nx #next-action-view{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.nx-body{flex:1;min-width:0}
.nx-text{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.nx-meta{font-size:13px;color:var(--muted);margin-top:2px}
.nx-due .nx-meta{color:var(--amber);font-weight:600}
.nx-actions{display:flex;gap:8px;flex:none}
.nx #next-action-form{margin-top:4px}

/* Tên account + nhãn trạng thái / ưu tiên bấm để đổi */
.acc-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acc-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:14px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.acc-pill:hover{border-color:var(--acc-line);box-shadow:0 0 0 3px var(--acc-soft)}
.acc-pill .caret{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;margin-left:2px}
.st-acc{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.st-acc-target{background:var(--panel);border-color:var(--line);color:var(--ink2)}
.st-acc-won{background:#E8F6EF;border-color:#BFE5D2;color:var(--green)}
.st-acc-nurture{background:#FDF6E7;border-color:#F1DDB0;color:var(--amber)}
.st-acc-disqualified{background:#FDEFEE;border-color:#F3C9C5;color:var(--red)}
.prio-pill{color:var(--muted);font-weight:600}
.prio-pill.prio-high{color:var(--acc);border-color:var(--acc-line)}
.menu.prio-menu{left:0;right:auto;width:150px;top:36px}
.prio-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:6px;font-size:14px;cursor:pointer;color:var(--ink)}
.prio-opt:hover{background:var(--panel)}
.prio-opt.on{color:var(--acc);font-weight:700}
.journey .js-click{cursor:pointer;border-radius:8px}
.journey .js-click:hover .jl{color:var(--acc);text-decoration:underline}
.journey .js-click:hover .jdot{border-color:var(--acc)}

/* Đổi trạng thái nhanh ở danh sách */
.tag.st-quick{cursor:pointer}
.tag.st-quick:hover{border-color:var(--acc-line);background:#fff}
.tag.st-quick .caret{width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;margin-left:3px}
.menu.st-menu{width:240px;padding:6px;z-index:600}
.st-menu-h{font-size:12.5px;color:var(--faint);font-weight:600;padding:4px 8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-opt{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:none;padding:7px 8px;border-radius:6px;font-size:14px;color:var(--ink);cursor:pointer;text-decoration:none}
.st-opt:hover{background:var(--panel)}
.st-opt.cur{color:var(--acc);font-weight:700;cursor:default}
.st-opt.cur:hover{background:none}

/* Popup Đổi trạng thái: khối bắt buộc có nền riêng theo trạng thái; phần tuỳ chọn tách riêng */
.req-box{border-radius:10px;padding:14px 14px 12px;margin:0 0 16px;border:1px solid}
.req-drop{background:#FFF8EC;border-color:#F1DDB0}
.req-won{background:#EEF8F2;border-color:#BFE5D2}
.req-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:10px;color:var(--ink)}
.req-n{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;background:var(--amber);flex:none}
.req-won .req-n{background:var(--green)}
.req-box .inp{background:#fff}
.req-box .fg label{font-weight:700}
.brief-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;font-size:13px;color:var(--ink2)}
.bstep{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prompt-box{font-family:ui-monospace,Menlo,monospace;font-size:12px}
/* Modal Kết quả khảo sát (SPEC_V2_4 mục 2) */
.sr-opt{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;padding:6px 0;cursor:pointer}
.sr-pending-chip{height:22px;padding:0 9px;border:1px solid #F1DDB0;border-radius:999px;background:#FFF8EC;color:var(--amber);
  font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.sr-pending-chip:hover{border-color:var(--amber)}
.won-list{border:1px solid #BFE5D2;background:#fff;border-radius:8px;padding:4px 10px;max-height:170px;overflow-y:auto}
.won-list label{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px;font-weight:500}
.opt-h{font-size:12.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin:4px 0 8px;padding-top:12px;border-top:1px solid var(--line2)}
.btn.copied{background:var(--green);border-color:var(--green);color:#fff}
.na-add{background:none;border:none;padding:0}

/* ── Tab Hướng dẫn (góc nhìn sales mới) ── */
.gd-layout{display:flex;gap:24px;align-items:flex-start;max-width:1280px;margin:0 auto}
.gd{flex:1;min-width:0;max-width:1020px;display:flex;flex-direction:column;gap:14px}
.gd-side{display:none}
.content:has(> .gd-layout){overflow:visible}  /* trang cuộn theo cửa sổ; overflow:auto làm cột Mục lục không dính được */
@media (min-width:1280px){
  .gd-side{display:flex;flex-direction:column;gap:2px;flex:none;width:210px;position:sticky;top:16px;padding:4px 0}
  .gd-hero .gd-toc{display:none}
}
.gd-side-t{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 12px 8px}
.gd-side a{font-size:13.5px;color:var(--ink2);text-decoration:none;padding:6px 12px;border-left:2px solid var(--line2)}
.gd-side a:hover{color:var(--acc)}
.gd-side a.on{color:var(--acc);font-weight:600;border-left-color:var(--acc)}
.gd .card{scroll-margin-top:16px}
.gd-hero{border-left:4px solid var(--acc)}
.gd-hero-t{font-size:17px;font-weight:700;margin-bottom:12px}
.gd-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gd-three div{background:var(--panel);border-radius:9px;padding:12px}
.gd-three b{display:block;font-size:14.5px;margin-bottom:3px}
.gd-three span{font-size:13.5px;color:var(--muted)}
.gd-toc{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.gd-toc a{font-size:13px;font-weight:600;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:999px;padding:4px 11px;text-decoration:none}
.gd-toc a:hover{background:#fff}
.gd-model{display:flex;align-items:center;gap:14px}
.gd-acc{flex:none;width:220px;border:2px solid var(--acc);border-radius:10px;padding:12px}
.gd-acc b,.gd-parts b{display:block;font-size:15px}
.gd-acc span,.gd-parts span{font-size:13px;color:var(--muted)}
.gd-arrow{flex:none;width:28px;height:2px;background:var(--acc-line);position:relative}
.gd-arrow:after{content:"";position:absolute;right:-1px;top:-4px;border-left:7px solid var(--acc-line);border-top:5px solid transparent;border-bottom:5px solid transparent}
.gd-parts{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gd-parts div{border:1px solid var(--line);border-radius:10px;padding:12px}
.gd-step{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line2)}
.gd-step:first-of-type{border-top:none;padding-top:2px}
.gd-step .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center}
.gd-step .gd-st{display:block;font-size:15px;margin-bottom:3px}
.gd-step p{font-size:14px;color:var(--ink2);line-height:1.7}
.gd-step.sm{padding:8px 0;border-top:none;font-size:14px;color:var(--ink2);line-height:1.6}
.gd-step.sm .n{width:22px;height:22px;font-size:12.5px;background:var(--acc-soft);color:var(--acc)}
.gd-ui{vertical-align:middle;pointer-events:none;margin:0 2px}
.gd-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px;font-weight:600}
.gd-seg span{padding:3px 10px;background:#fff;color:var(--muted)}
.gd-seg span.on{background:var(--acc-soft);color:var(--acc)}
.gd-kebab{display:inline-flex;width:26px;height:24px;border:1px solid var(--line);border-radius:7px;align-items:center;justify-content:center;font-weight:800;color:var(--muted);background:#fff}
.gd-list{padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ink2);line-height:1.7}
.gd-p{font-size:14px;color:var(--ink2);line-height:1.8;margin-bottom:12px}
.gd-table td{font-size:14px;vertical-align:top;line-height:1.6}
.gd-note{margin-top:12px;padding:10px 12px;background:var(--panel);border-radius:9px;font-size:13.5px;color:var(--ink2);line-height:1.7}
.gd-note code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:13px}
.gd-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gd-box{border-radius:10px;padding:12px 14px;border:1px solid}
.gd-box p{font-size:14px;color:var(--ink2);line-height:1.6;margin-top:6px}
.gd-box-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px}
.gd-amber{background:#FFF8EC;border-color:#F1DDB0}
.gd-red{background:#FDF3F2;border-color:#F3C9C5}
.gd-sub{font-weight:700;font-size:14.5px;margin:16px 0 4px}
.gd-faq{border-top:1px solid var(--line2);padding:10px 0}
.gd-faq:first-of-type{border-top:none}
.gd-faq summary{cursor:pointer;font-weight:600;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px}
.gd-faq summary::-webkit-details-marker{display:none}
.gd-faq summary:before{content:"";width:6px;height:6px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
.gd-faq[open] summary:before{transform:rotate(45deg)}
.gd-faq p{font-size:14px;color:var(--ink2);margin:6px 0 0 14px;line-height:1.6}

/* ── Giám sát KPI (manager) ── màu trạng thái đạt mục tiêu: dành riêng, luôn kèm chữ ── */
:root{--st-good:#0ca30c;--st-warn:#fab219;--st-warn-t:#9a6700;--st-crit:#d03b3b;--ch-blue:#2a78d6;--ch-blue-soft:#cde2fb}
.mg{display:flex;flex-direction:column;gap:14px}
.mg-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.mg-h{font-size:15px;font-weight:700}
.pnav{display:flex;gap:6px}
.kt-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kt{padding:14px 16px}
.kt-l{font-size:13.5px;font-weight:700;color:var(--ink2)}
.kt-hint{font-size:12.5px;color:var(--faint);margin-top:1px}
.kt-v{font-size:26px;font-weight:700;line-height:1.1;margin:8px 0 8px;color:var(--ink)}
.kt-of{font-size:17px;font-weight:600;color:var(--muted)}
.meter{height:6px;border-radius:999px;background:var(--panel2);overflow:hidden}
.meter.sm{height:4px;margin-top:4px}
.mfill{height:100%;border-radius:999px;background:var(--ch-blue)}
.mfill.good{background:var(--st-good)} .mfill.warn{background:var(--st-warn)} .mfill.crit{background:var(--st-crit)} .mfill.none{background:var(--ch-blue)} .mfill.live{background:var(--ch-blue)}
.kt-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.kst{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.kst .kd{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.kst.good .kd{background:var(--st-good)} .kst.warn .kd{background:var(--st-warn)} .kst.crit .kd{background:var(--st-crit)}
.kst.crit{color:var(--st-crit)} .kst.none{color:var(--faint);font-weight:600} .kst.live{color:var(--faint);font-weight:600}
.dl{font-size:12.5px;font-weight:700} .dl.up{color:var(--st-good)} .dl.down{color:var(--st-crit)} .dl.eq{color:var(--muted)}
.dl-t{font-size:12.5px;color:var(--muted)}
/* SPEC_V2_4 mục 4.1: dòng phụ dưới tile Site Survey / Hợp đồng mới */
.kt5-sub{font-size:12.5px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line2)}
.mg-table td{vertical-align:middle}
.cellk .ck-v{font-weight:700;font-size:15px}
.ck-of{color:var(--muted);font-size:12.5px;font-weight:600}
.cellk.crit .ck-v{color:var(--st-crit)} .cellk.good .ck-v{color:var(--st-good)}
.cellk .meter{max-width:70px;margin-left:auto}
.team-row td{background:var(--panel);border-top:1px solid var(--line)}
.lnk-plain{color:inherit;text-decoration:none} .lnk-plain:hover{color:var(--acc)}
.ch-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ch{padding:12px 14px 8px}
.ch-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:6px}
.ch-l{font-size:13.5px;font-weight:700;color:var(--ink2)}
.ch-v{font-size:17px;font-weight:700}
.ch-svg{width:100%;height:auto;display:block;overflow:visible}
.ch-base{stroke:var(--line);stroke-width:1}
.ch-tgt{stroke:#9AA1AA;stroke-width:1.2}
.ch-tgt-t{font-size:9.5px;fill:var(--muted);font-weight:600}
.ch-area{fill:var(--ch-blue-soft);opacity:.55}
.ch-line{fill:none;stroke:var(--ch-blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-dot{fill:var(--ch-blue);stroke:#fff;stroke-width:1.5}
.ch-dot.last{stroke-width:2}
.ch-hit{fill:#fff;fill-opacity:0;pointer-events:all;cursor:crosshair}
.ch-hit:hover{fill:#2a78d6;fill-opacity:.07}
.ch-ax{font-size:9.5px;fill:var(--faint)}
.mg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start}
.cv-row{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:10px;padding:7px 0}
.cv-l{font-size:13.5px;font-weight:600;color:var(--ink2)}
.cv-bar{height:10px;border-radius:999px;background:var(--panel2);overflow:hidden}
.cv-fill{height:100%;background:var(--ch-blue);border-radius:999px}
.cv-v{font-size:14px;font-weight:700;text-align:right}
@media (max-width: 900px){   /* đặt SAU luật .cv-* gốc để ghi đè được */
  .cv-row{grid-template-columns:1fr auto;row-gap:5px}
  .cv-bar{grid-column:1 / -1;grid-row:2}
}
.tg-table .inp{width:90px;margin-left:auto}
.tg-default td{background:var(--acc-soft)}

/* KPI riêng từng người */
.own-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-left:4px;vertical-align:middle}
.tg-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tg-own{font-size:11.5px;font-weight:700;color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);border-radius:999px;padding:0 7px}
.tg-reset{background:none;border:none;padding:0;cursor:pointer}
.tg-in.is-own{border-color:var(--acc-line);background:var(--acc-soft);font-weight:700}
.tg-in::placeholder{color:#C3C8D0;font-weight:400}

/* SPEC_V2_4 mục 4.2: "Cần bàn trong họp" — 2 nhóm Theo người / Theo account */
.al-talk-h{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
.al-talk-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.al-col{min-width:0}
.al-col-h{font-size:13.5px;font-weight:700;color:var(--ink2);margin-bottom:2px}
.al-hide{display:none}
.al-more{margin-top:6px}
.talk{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line2);font-size:14px;line-height:1.45}
.talk:first-of-type{border-top:none;padding-top:2px}
.talk .kd{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px;background:var(--faint)}
.talk.crit .kd{background:var(--st-crit)} .talk.warn .kd{background:var(--st-warn)} .talk.good .kd{background:var(--st-good)}
/* Bảng xếp hạng gọn */
.rank-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:8px}
.seg.sm a{padding:4px 10px;font-size:12.5px}
.legend{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:5px}
.lgs{width:10px;height:10px;border-radius:3px;display:inline-block}
.lgs.good{background:var(--st-good)} .lgs.warn{background:var(--st-warn)} .lgs.crit{background:var(--st-crit)}
.rank td{padding-top:8px;padding-bottom:8px}
.rank tr.rank-more{display:none}
.rank tr.rank-more.show{display:table-row}
.hc{display:inline-flex;align-items:baseline;gap:1px;min-width:48px;justify-content:center;padding:3px 8px;border-radius:7px;font-weight:700;font-size:14px;background:var(--panel);color:var(--ink2)}
.hc small{font-size:11.5px;font-weight:600;color:var(--muted)}
.hc.good{background:#E6F6E6;color:#0a7a0a} .hc.warn{background:#FFF4D6;color:#8a5a00} .hc.crit{background:#FBE7E7;color:#b3282d}
.hc .own-dot{margin-left:3px}

/* SPEC_V2_4 mục 3: trang Ngưỡng cảnh báo */
.al-table{width:100%;border-collapse:collapse}
.al-table th{white-space:normal}
.al-why{font-size:13.5px;color:var(--ink2);line-height:1.5}
.al-in{width:90px;margin-left:auto;text-align:right}
.al-foot{margin-top:12px}
.al-actions{display:flex;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}

/* Mobile override cho các khối định nghĩa SAU khối @media (max-width:900px) chính ở trên — CSS lấy theo thứ tự
   xuất hiện trong file khi độ đặc hiệu bằng nhau, nên override kt-row/ch-row/mg-two/al-talk-grid phải đặt Ở ĐÂY
   (sau định nghĩa gốc của chúng), nếu không quy tắc gốc (5 cột/2 cột cố định) sẽ thắng và vỡ layout 390px. */
@media (max-width: 900px){
  .kt-row,.ch-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-two,.al-talk-grid{grid-template-columns:1fr}
  /* Trang Ngưỡng cảnh báo: bảng 5 cột không vừa 390px — chuyển mỗi rule thành 1 khối,
     nếu không cột Ngưỡng (chỗ nhập số) bị cuộn khuất, sales/manager không thấy để sửa */
  .al-table thead{display:none}
  .al-table, .al-table tbody, .al-table tr, .al-table td{display:block;width:100%}
  .al-table{min-width:0}
  .al-table tr{padding:12px 0;border-bottom:1px solid var(--line2)}
  .al-table tr:first-child{padding-top:0}
  .al-table td{padding:3px 0;border:none}
  .al-table td.b{font-size:15px}
  .al-table td.num{text-align:left}
  .al-in{width:140px;margin-left:0;text-align:left}
  .al-table td[data-label]:before{content:attr(data-label);display:block;font-size:11.5px;font-weight:700;
    color:var(--faint);text-transform:uppercase;letter-spacing:.3px;margin-top:4px}
}