/* GIP CRM · Prototype HTML — design token lấy từ Figma "[GIP] CRM" (collection Color / Spacing / Radius / Typography) */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
:root{
  --indigo-50:#eef2ff;--indigo-100:#e0e7ff;--indigo-200:#c7d2fe;--indigo-600:#4f46e5;--indigo-700:#4338ca;--indigo-800:#3730a3;--indigo-900:#312e81;
  --n0:#fff;--n50:#f5f7fa;--n100:#eff0f2;--n200:#e4e8ef;--n300:#d9dee8;--n400:#bfc6d3;--n500:#7c8391;--n600:#545b69;--n700:#363d4b;--n800:#222835;--n900:#141a26;
  --page:#f5f8ff;--muted:#6b7280;--red-50:#fdeeec;--red-100:#f6cdc7;--red-600:#b42318;--red-700:#9c352c;
  --amber-50:#fdf6e3;--amber-100:#f3dfa6;--amber-500:#e0a63e;--amber-800:#855d0f;--orange-50:#fff3e8;--orange-100:#fdd9b5;--orange-700:#c2410c;
  --green-50:#edf8f1;--green-100:#c6e9d4;--green-700:#18794e;--purple-50:#f4efff;--purple-700:#6941c6;--cyan-50:#e7f5f8;--cyan-700:#0e7490;
  --brand:var(--indigo-700);--brand-hover:var(--indigo-800);--brand-subtle:var(--indigo-50);--border:var(--n200);--border-default:var(--n300);--control:var(--n400);
  --r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;
  --sh-card:0 1px 2px #0f2a1d0a,0 4px 14px #0f2a1d0d;--sh-drop:0 8px 24px -4px #0f2a1d14,0 2px 6px #0f2a1d0d;--sh-drawer:-8px 0 32px #0f2a1d1f;
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:400 13px/20px Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--n900);background:var(--page);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:14px;height:14px}svg.i.lg{width:20px;height:20px}

/* ---------- Shell ---------- */
#app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:224px;flex:none;background:var(--n0);border-right:1px solid var(--border);display:flex;flex-direction:column}
.sb-logo{height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px}
.sb-logo .mark{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
.sb-logo small{font-weight:400;color:var(--n600);font-size:13px}
.sb-nav{flex:1;overflow:auto;padding:8px 8px}
.sb-grp{font-size:10px;line-height:14px;color:var(--muted);padding:12px 10px 6px}
.sb-item{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--n800);font-size:13px;cursor:pointer;text-decoration:none}
.sb-item:hover{background:var(--n50);text-decoration:none}.sb-item svg{color:var(--n600)}
.sb-item.active{background:var(--indigo-100);color:var(--brand);font-weight:500;box-shadow:inset 3px 0 0 var(--brand)}.sb-item.active svg{color:var(--brand)}
.sb-user{border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:10px;align-items:center}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--indigo-100);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.avatar.lg{width:40px;height:40px;font-size:15px}.avatar.xl{width:44px;height:44px;font-size:16px}
.u-name{font-weight:500;font-size:13px;line-height:18px}.u-role{font-size:11px;color:var(--muted);line-height:16px}
.workspace{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.topbar{height:56px;flex:none;background:var(--n0);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 24px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--n600);flex:1;min-width:0}
.crumbs a{color:var(--brand);font-weight:500}.crumbs .cur{color:var(--n900);font-weight:500}.crumbs svg{color:var(--n500)}
.gsearch{width:320px;height:36px;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--n50);color:var(--muted)}
.gsearch input{border:none;background:transparent;outline:none;flex:1;min-width:0}.kbd{font-size:11px;border:1px solid var(--border-default);border-radius:4px;padding:0 4px;background:#fff;color:var(--n600)}
.bell{position:relative}.bell::after{content:"";position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red-600);border:1.5px solid #fff}
.tb-user{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:1px solid var(--border);cursor:pointer;position:relative}
.main{flex:1;min-height:0;overflow:auto;padding:24px;position:relative;background:var(--page);isolation:isolate}
.main.with-bar{padding-bottom:96px}

/* ---------- Page header ---------- */
.ph{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.ph h1{margin:0;font-size:24px;line-height:32px;font-weight:600;display:flex;align-items:center;gap:10px}
.ph .sub{color:var(--n600);margin-top:4px}.ph .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.count-pill{font-size:11px;font-weight:500;line-height:16px;padding:2px 8px;border-radius:999px;background:var(--brand-subtle);color:var(--brand)}

/* ---------- Buttons ---------- */
.btn{height:36px;padding:0 14px;border-radius:var(--r-lg);border:1px solid var(--border-default);background:#fff;color:var(--n900);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--n50)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-hover)}
.btn.danger{background:var(--red-600);border-color:var(--red-600);color:#fff}.btn.danger:hover{background:var(--red-700)}
.btn.danger-ghost{color:var(--red-600);border-color:var(--red-100)}.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--n50)}
.btn.sm{height:30px;padding:0 10px;font-size:12px}.btn.icon{width:36px;padding:0}.btn.icon.sm{width:30px}
.btn-group{display:inline-flex}.btn-group .btn:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}.btn-group .btn:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0;border-left:1px solid #ffffff40}
.link{color:var(--brand);cursor:pointer;font-weight:500;background:none;border:none;padding:0}.link.u{text-decoration:underline}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap;background:var(--n100);color:var(--n700)}
.badge.brand{background:var(--brand-subtle);color:var(--brand)}.badge.success{background:var(--green-50);color:var(--green-700)}
.badge.danger{background:var(--red-50);color:var(--red-600)}.badge.warning{background:var(--orange-50);color:var(--orange-700)}
.badge.caution{background:var(--amber-50);color:var(--amber-800)}.badge.info{background:var(--cyan-50);color:var(--cyan-700)}.badge.purple{background:var(--purple-50);color:var(--purple-700)}
.badge.outline{background:#fff;border:1px solid var(--border-default);color:var(--n800)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.q-dot.dt{color:var(--n600)}.q-dot.fr{color:var(--brand)}.q-dot.co{color:var(--cyan-700)}.q-dot.wa{color:var(--orange-700)}.q-dot.ho{color:var(--red-600)}.q-dot.pu{color:#7c3aed}.q-dot.gr{color:#15803d}
.pic{display:inline-flex;align-items:center;gap:8px;font-weight:500}.pic .n{width:18px;height:18px;border-radius:50%;background:var(--brand-subtle);color:var(--brand);font-size:10px;display:grid;place-items:center}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-sm);background:var(--brand-subtle);color:var(--brand);font-size:11px;font-weight:500}
.tag button{border:none;background:none;color:inherit;padding:0;cursor:pointer;display:flex}
.req{color:var(--red-600)}.muted{color:var(--muted)}.sec{color:var(--n600)}.strong{font-weight:600}.mono{font-variant-numeric:tabular-nums}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-card)}
.card + .card{margin-top:16px}
.card-h{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border);min-height:52px}
.card-h h3{margin:0;font-size:15px;line-height:22px;font-weight:600}.card-h .meta{color:var(--muted);font-size:12px}.card-h .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-b{padding:20px}.card-b.tight{padding:0}
.grid{display:grid;gap:16px 20px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span2{grid-column:span 2}.span3{grid-column:span 3}.full{grid-column:1/-1}
.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:12px}.spacer{flex:1}

/* ---------- Form controls ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:12px;font-weight:500;line-height:16px;color:var(--n800)}
.field .help{font-size:12px;color:var(--muted);line-height:16px}.field .err{font-size:12px;color:var(--red-600)}
.input,.select,.textarea{height:36px;width:100%;border:1px solid var(--control);border-radius:var(--r-md);background:#fff;padding:0 10px;outline:none;font-size:13px}
.textarea{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--indigo-600);box-shadow:0 0 0 3px var(--indigo-100)}
.input[readonly],.input:disabled,.select:disabled{background:var(--n100);color:var(--n600)}
.input.invalid,.select.invalid{border-color:var(--red-600)}
.select{appearance:none;padding-right:32px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23545b69' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center}
.select:disabled{background-color:var(--n100)}
.ro{min-height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:var(--r-md);background:var(--n100);color:var(--n700)}
.multi{min-height:36px;border:1px solid var(--control);border-radius:var(--r-md);display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 32px 6px 8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23545b69' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;cursor:pointer}
.range{display:flex;align-items:center;gap:8px;height:36px;border:1px solid var(--control);border-radius:var(--r-md);padding:0 10px;background:#fff}
.range input{border:none;outline:none;width:100%;min-width:0;background:none}
.seg{display:flex;background:var(--n100);border-radius:var(--r-md);padding:3px;gap:3px}
.seg button{flex:1;height:30px;border:none;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--n600);font-weight:500}
.seg button.on{background:#fff;color:var(--brand);box-shadow:0 1px 2px #0002}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.switch{position:relative;width:34px;height:20px;flex:none}.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--n300);border-radius:999px;transition:.15s;cursor:pointer}
.switch span::before{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px #0003}
.switch input:checked+span{background:var(--brand)}.switch input:checked+span::before{transform:translateX(14px)}
.switch input:disabled+span{opacity:.5;cursor:not-allowed}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{background:var(--page);color:var(--n700);font-weight:600;font-size:12px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1}
table.t td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
table.t tbody tr:hover{background:var(--n50)}table.t tbody tr.clickable{cursor:pointer}table.t tbody tr.sel{background:var(--indigo-50)}
table.t td .l2{font-size:12px;color:var(--muted);line-height:16px}table.t td .l1{font-weight:500}
table.t .num{text-align:right}table.t .act{width:44px;text-align:right}
.pager{display:flex;align-items:center;gap:8px;padding:14px 0 0}.pager .pg{display:flex;gap:6px;margin-left:auto}
.pg button{min-width:32px;height:32px;border:1px solid var(--border-default);background:#fff;border-radius:var(--r-md);cursor:pointer}.pg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--border)}
.tab{height:40px;display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;color:var(--n700);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 2px}
.tab:hover{color:var(--brand)}.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.tab .cnt{font-size:11px;background:var(--n100);color:var(--n600);border-radius:999px;padding:0 6px;line-height:16px}.tab.on .cnt{background:var(--brand-subtle);color:var(--brand)}
.stabs{display:inline-flex;background:var(--n100);border-radius:var(--r-lg);padding:3px;gap:3px}
.stabs button{height:30px;padding:0 12px;border:none;background:transparent;border-radius:var(--r-md);cursor:pointer;font-weight:500;color:var(--n600)}.stabs button.on{background:#fff;color:var(--n900);box-shadow:0 1px 2px #0002}

/* ---------- Notice ---------- */
.notice{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--indigo-200);background:var(--indigo-50);color:var(--n800)}
.notice svg{color:var(--brand);margin-top:2px}.notice b{display:block;font-weight:600;margin-bottom:2px}
.notice.warn{background:var(--orange-50);border-color:var(--orange-100)}.notice.warn svg{color:var(--orange-700)}
.notice.danger{background:var(--red-50);border-color:var(--red-100)}.notice.danger svg{color:var(--red-600)}
.notice.success{background:var(--green-50);border-color:var(--green-100)}.notice.success svg{color:var(--green-700)}
.notice.caution{background:var(--amber-50);border-color:var(--amber-100)}.notice.caution svg{color:var(--amber-800)}
.notice.gray{background:var(--n50);border-color:var(--border)}.notice.gray svg{color:var(--n600)}

/* ---------- Description list ---------- */
.dl{display:grid;gap:14px 24px}.dl .k{font-size:12px;color:var(--muted);line-height:16px;margin-bottom:4px}.dl .v{font-weight:500;line-height:20px;word-break:break-word}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0}.kv .k{color:var(--muted)}.kv .v{font-weight:500;text-align:right}
.sect-t{font-size:15px;font-weight:600;margin:0 0 4px}.sect-d{color:var(--muted);font-size:12px;margin-bottom:14px}
.divider{border:none;border-top:1px solid var(--border);margin:20px 0}

/* ---------- Overlays ---------- */
.scrim{position:fixed;inset:0;background:#141a267a;z-index:50;animation:fade .15s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:760px;max-width:100vw;background:#fff;z-index:51;box-shadow:var(--sh-drawer);display:flex;flex-direction:column;animation:slide .2s}
.drawer.w640{width:640px}.drawer.w480{width:480px}
.dr-h{display:flex;align-items:flex-start;gap:8px;padding:16px 24px;border-bottom:1px solid var(--border)}
.dr-h h2{margin:0;font-size:18px;line-height:26px;font-weight:600}.dr-h .sub{color:var(--n600);font-size:12px}.dr-h .r{margin-left:auto;display:flex;gap:4px}
.dr-b{flex:1;overflow:auto;padding:20px 24px}.dr-f{border-top:1px solid var(--border);padding:12px 24px;display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal-wrap{position:fixed;inset:0;z-index:61;display:grid;place-items:center;padding:24px;overflow:auto}
.modal{width:560px;max-width:100%;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-drop),0 24px 48px #0002;display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.modal.w720{width:720px}.modal.w960{width:960px}.modal.w440{width:440px}
.modal .dr-b{padding:20px 24px}
.menu{position:fixed;z-index:80;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-drop);padding:4px;min-width:200px;animation:fade .1s}
.menu button{display:flex;width:100%;align-items:center;gap:10px;height:34px;padding:0 10px;border:none;background:none;border-radius:var(--r-md);cursor:pointer;text-align:left;color:var(--n800)}
.menu button:hover{background:var(--n50)}.menu button.danger{color:var(--red-600)}.menu hr{border:none;border-top:1px solid var(--border);margin:4px 0}
.menu .opt.on{color:var(--brand);font-weight:500}
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--n900);color:#fff;padding:10px 16px;border-radius:var(--r-lg);box-shadow:var(--sh-drop);display:flex;gap:8px;align-items:center;animation:fade .2s}
.toast.err{background:var(--red-600)}
.tip{position:fixed;z-index:95;background:var(--n900);color:#fff;font-size:12px;padding:4px 8px;border-radius:var(--r-sm);pointer-events:none}
.action-bar{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:12px 24px;display:flex;justify-content:flex-end;gap:8px;z-index:5}
.action-bar.sticky{position:sticky;bottom:-24px;margin:24px -24px -24px}
@keyframes fade{from{opacity:0}}@keyframes slide{from{transform:translateX(40px);opacity:0}}

/* ---------- Kanban ---------- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:stretch;min-height:calc(100vh - 360px)}
.col-k{flex:1 0 220px;background:var(--n100);border-radius:var(--r-lg);border-top:3px solid var(--indigo-600);display:flex;flex-direction:column;min-width:220px}
.col-k .kh{padding:10px 12px}.col-k .kh .t{display:flex;align-items:center;gap:6px;font-weight:600}.col-k .kh .s{font-size:12px;color:var(--muted)}
.col-k .kb{flex:1;padding:0 8px 8px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.col-k.over .kb{background:var(--indigo-50);border-radius:var(--r-md)}
.kcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:12px;cursor:grab;box-shadow:0 1px 2px #0000000a}
.kcard:hover{border-color:var(--indigo-200)}.kcard.dragging{opacity:.5}
.kcard .b{font-weight:600}.kcard .c{font-size:12px;color:var(--n600)}.kcard .tags{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.kcard .f{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:8px;font-weight:600}

/* ---------- Misc ---------- */
.toc{position:sticky;top:0}.toc a{display:block;padding:8px 10px;border-radius:var(--r-md);color:var(--n800)}.toc a.on{background:var(--brand-subtle);color:var(--brand)}
.toc a:hover{text-decoration:none;background:var(--n50)}
.timeline{display:flex;flex-direction:column;gap:16px}.tl-i{display:flex;gap:10px}.tl-i .dt{color:var(--muted);font-size:12px}
.note{padding:12px 0;border-bottom:1px solid var(--border)}.note:last-child{border-bottom:none}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.kpi .v{font-size:24px;line-height:32px;font-weight:600}.kpi .k{color:var(--n600)}
.placeholder{max-width:560px;margin:80px auto;text-align:center}.placeholder .ic{width:56px;height:56px;border-radius:16px;background:var(--brand-subtle);color:var(--brand);display:grid;place-items:center;margin:0 auto 16px}
.bar-sel{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--indigo-50);border-bottom:1px solid var(--indigo-200)}
.hidden{display:none!important}
.dropzone{border:1.5px dashed var(--indigo-200);border-radius:var(--r-lg);background:var(--indigo-50);padding:28px;text-align:center}
.stepper{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.chip-list{display:flex;gap:6px;flex-wrap:wrap}
.drag-list .it{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:6px;background:#fff}
.drag-list .it .grip{color:var(--n400);cursor:grab}

/* ---------- Responsive (màn nhỏ hơn 1920) — 15/10/2026 ---------- */
.tbl-wrap{overflow-x:auto;max-width:100%}
table.t th,table.t td{white-space:nowrap}
table.t td.wrap{white-space:normal;min-width:170px;max-width:360px}
/* bóng mờ ở mép khi bảng còn nội dung để cuộn ngang */
.tbl-wrap{background:linear-gradient(90deg,#fff 30%,#fff0) left/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,#fff0) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,#0f2a1d26,#0000) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,#0f2a1d26,#0000) right/12px 100% no-repeat scroll}
.tbl-wrap table.t{background:transparent}
.settings-nav{width:248px}
@media (max-width:1500px){.settings-nav{width:220px}}
table.t td .l2{white-space:inherit}
.fixed-bar{position:fixed;left:224px;right:0;bottom:0;height:68px;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 24px;z-index:5}
.nowrap{white-space:nowrap}
/* bố cục 3 cột: tóm tắt | nội dung | ghi chú / tiến trình */
.qd,[style*="minmax(0,1fr) 360px"]{grid-template-columns:clamp(260px,20vw,340px) minmax(0,1fr) clamp(280px,22vw,360px)!important}
@media (max-width:1500px){
  .qd,[style*="minmax(0,1fr) 360px"]{grid-template-columns:clamp(260px,25vw,320px) minmax(0,1fr)!important;grid-template-rows:auto 1fr!important}
  .qd>:nth-child(1),[style*="minmax(0,1fr) 360px"]>:nth-child(1){position:static!important;grid-column:1;grid-row:1}
  .qd>:nth-child(2),[style*="minmax(0,1fr) 360px"]>:nth-child(2){grid-row:1 / span 2;grid-column:2}
  .qd>:nth-child(3),[style*="minmax(0,1fr) 360px"]>:nth-child(3){grid-column:1;grid-row:2;position:static!important;height:auto!important;max-height:620px!important;min-height:0!important;align-self:start}
  .g6,.mkpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .og-blk-b{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mrow3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gsearch{width:240px}
}
@media (max-width:1280px){
  [style*="minmax(0,1fr) 240px"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="minmax(0,1fr) 240px"]>aside{display:none}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .mrow2{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:1100px){
  .qd,[style*="minmax(0,1fr) 360px"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important}
  .qd>*,[style*="minmax(0,1fr) 360px"]>*{grid-column:1!important;grid-row:auto!important}
  .g6,.g3,.mkpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .og-blk-b,.mrow3{grid-template-columns:minmax(0,1fr)!important}
  .gsearch{display:none}
  .drawer{width:100vw}
}
/* thanh lọc của Cài đặt: ô tìm kiếm co giãn để cả hàng nằm gọn */
@media (max-width:1500px){.og-filter .og-search{flex:1 1 200px!important;width:auto!important;min-width:180px}.og-filter .og-fsel{width:auto!important;flex:0 1 auto}}
/* cột thao tác ⋯ luôn hiện ở mép phải bảng */
table.t td.stick-r,table.t th.stick-r{position:sticky;right:0;background:#fff;box-shadow:-8px 0 8px -8px #0f2a1d33;z-index:1}
table.t th.stick-r{background:var(--page);z-index:2}
table.t tbody tr:hover td.stick-r{background:var(--n50)}table.t tbody tr.sel td.stick-r{background:var(--indigo-50)}

/* Keep scrolling table paint separate from sticky cell borders. */
#lead-list .tbl-wrap{isolation:isolate;background:var(--n0)}
#lead-list table.t{border-collapse:separate;border-spacing:0;background:var(--n0)}
#lead-list table.t tbody td{background:var(--lead-row-bg,var(--n0))}
#lead-list table.t .stick-r{box-shadow:none;border-left:1px solid var(--border)}
#lead-list table.t tbody tr:hover{--lead-row-bg:var(--n50)}
#lead-list table.t tbody tr.sel{--lead-row-bg:var(--indigo-50)}

/* bộ lọc danh sách: 6 ô trên 1 hàng từ 1280px, ô tìm kiếm và khoảng ngày rộng hơn */
@media (min-width:1280px){.g6.fgrid{grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr)) minmax(0,1.5fr)!important;gap:16px 12px}}
.g6.fgrid .range{gap:6px;padding:0 8px}.g6.fgrid .range input{font-size:13px}
@media (min-width:1280px){.g6.dgrid{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))!important;gap:16px 12px}}

/* System settings: one parent in the main navigation; child catalogue stays in its page. */
.settings-workspace{width:100%;min-width:0}
.settings-tree{margin-top:2px}
.settings-tree>summary{list-style:none;user-select:none;white-space:nowrap}
.settings-tree>summary::-webkit-details-marker{display:none}
.settings-parent{font-weight:400}
.settings-parent.parent-on{color:var(--brand)}
.settings-parent.parent-on>svg{color:var(--brand)}
.settings-parent .settings-chevron{margin-left:auto;width:13px;height:13px;transition:transform .15s}
.settings-tree:not([open]) .settings-chevron{transform:rotate(-90deg)}
.settings-submenu{margin:5px 0 8px 17px;padding-left:8px;border-left:1px solid var(--border-default);display:flex;flex-direction:column;gap:3px}
.settings-child{font-size:12px;padding:0 8px;gap:8px;min-width:0;height:36px}
.settings-child span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-child svg{width:14px;height:14px}
.settings-tree summary:focus-visible,.settings-child:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:800px){
 .sidebar:has(.settings-tree){width:56px!important}
 .sidebar:has(.settings-tree) .sb-logo{font-size:0!important;padding:0 12px!important}
 .sidebar:has(.settings-tree) .sb-logo small,.sidebar:has(.settings-tree) .sb-grp,.sidebar:has(.settings-tree) .sb-user{display:none!important}
 .sidebar:has(.settings-tree) .sb-item{justify-content:center!important;padding:0 10px!important}
 .sidebar:has(.settings-tree) .sb-item span,.sidebar:has(.settings-tree) .settings-chevron{display:none!important}
 .sidebar:has(.settings-tree[open]){position:absolute;inset:0 auto 0 0;width:264px!important;z-index:40;box-shadow:var(--sh-drop)}
 .sidebar:has(.settings-tree[open]) .sb-item{justify-content:flex-start!important}
 .sidebar:has(.settings-tree[open]) .sb-item span{display:block!important;position:static!important;clip-path:none!important;width:auto!important;height:auto!important;overflow:hidden!important;white-space:nowrap!important}
 .sidebar:has(.settings-tree[open]) .settings-chevron{display:block!important}
 .sidebar:has(.settings-tree[open]) .settings-child{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.settings-chevron{transition:none!important}}

/* Sidebar width control: explicit user state overrides page-specific compact rules. */
.sb-brand-name{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sb-footer{flex:none;border-top:1px solid var(--border);padding:10px 8px;background:var(--n0)}
.sb-collapse{display:flex;align-items:center;gap:10px;border:0;border-radius:var(--r-md);background:transparent;width:100%;min-height:36px;padding:0 12px;cursor:pointer;color:var(--n600);font-size:12px;white-space:nowrap}
.sb-collapse:hover{background:var(--n50);color:var(--n900)}
.sb-collapse:focus-visible{outline:2px solid var(--brand);outline-offset:0}
.sb-collapse .sb-collapse-icon{width:16px;height:16px;flex:none}
.sidebar.is-expanded .sb-collapse-icon{transform:rotate(180deg)}
body #app>.sidebar.is-expanded{width:224px!important;position:static!important;box-shadow:none!important}
body #app>.sidebar.is-expanded .sb-logo{font-size:15px!important;padding:0 16px!important}
body #app>.sidebar.is-expanded .sb-logo small{display:inline!important}
body #app>.sidebar.is-expanded .sb-item{justify-content:flex-start!important;padding:0 10px!important}
body #app>.sidebar.is-expanded .sb-item span{display:block!important;position:static!important;clip-path:none!important;width:auto!important;height:auto!important;overflow:hidden!important;white-space:nowrap!important}
body #app>.sidebar.is-expanded .sb-grp{display:block!important}
body #app>.sidebar.is-expanded .settings-chevron{display:block!important}
body #app>.sidebar.is-collapsed{width:64px!important;position:static!important;box-shadow:none!important}
/* Thanh thao tác cố định ở đáy bám theo bề rộng menu: menu thu gọn 64px thì thanh bắt đầu từ 64px */
body:has(#app>.sidebar.is-collapsed) :is(.fixed-bar,.qbar,.ct-bar){left:64px}
body #app>.sidebar.is-collapsed .sb-logo{padding:0!important;justify-content:center!important}
body #app>.sidebar.is-collapsed .sb-brand-name,body #app>.sidebar.is-collapsed .sb-grp,body #app>.sidebar.is-collapsed .sb-item span,body #app>.sidebar.is-collapsed .settings-chevron,body #app>.sidebar.is-collapsed .sb-collapse span{display:none!important}
body #app>.sidebar.is-collapsed .sb-item{justify-content:center!important;padding:0!important;height:38px}
body #app>.sidebar.is-collapsed .sb-nav{padding:10px 8px}
body #app>.sidebar.is-collapsed .sb-collapse{justify-content:center;padding:0}
body #app>.sidebar.is-collapsed .sb-footer{padding:10px 8px}
body #app>.sidebar.is-collapsed .settings-submenu{display:none}
@media(max-width:800px){body #app>.sidebar.is-expanded{position:absolute!important;inset:0 auto 0 0;width:264px!important;z-index:40;box-shadow:var(--sh-drop)!important}}

/* Thanh stage (path) trên trang tạo / sửa lead — 18/10/2026 */
.lp-card{padding:16px 20px;margin-bottom:16px}
.lp{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.lp-step{flex:1 1 0;min-width:110px;height:40px;border:0;background:var(--n100);color:var(--n700);font:500 13px/40px inherit;font-family:inherit;cursor:pointer;position:relative;padding:0 18px 0 26px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);white-space:nowrap}
.lp-step:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);border-radius:20px 0 0 20px;padding-left:18px}
.lp-step:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);border-radius:0 20px 20px 0}
.lp-step span{display:block;overflow:hidden;text-overflow:ellipsis}
.lp-step:hover:not(:disabled){background:var(--indigo-100);color:var(--brand)}
.lp-step.done{background:var(--indigo-50);color:var(--brand)}
.lp-step.cur{box-shadow:none;background:var(--indigo-50);color:var(--brand);font-weight:600}
.lp-step.on{background:var(--brand);color:#fff}
.lp-step.on.won{background:var(--green-700,#15803d)}.lp-step.on.lost{background:var(--red-600)}
.lp-step:disabled{cursor:not-allowed;color:var(--n400);background:var(--n50)}
.lp-guide{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.lp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lp-h .muted{font-size:12px}
.lp-miss{display:flex;flex-wrap:wrap;gap:6px}
.lp-chip{border:1px solid var(--red-100);background:var(--red-50);color:var(--red-700,#b42318);font:500 12px/22px inherit;font-family:inherit;padding:0 8px;border-radius:4px;cursor:pointer}
.lp-chip:hover{border-color:var(--red-600)}
.lp-biz{display:flex;flex-wrap:wrap;gap:8px}
.lp-cond{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-md);padding:6px 8px 6px 10px;font-size:13px}
.lp-cond .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center}
.lp-cond.ok .ic{background:var(--green-50,#ecfdf3);color:var(--green-700,#15803d)}.lp-cond.no .ic{background:var(--red-50);color:var(--red-600)}
.lp-cond .muted{font-size:12px}
.lp-stage-ro{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--n50);font-weight:500}
.ef-tabs{margin:-4px 0 16px}.ef-other{margin-bottom:16px}

/* Kanban: chọn thẻ + nút mở rộng — 18/10/2026 */
.kcard{position:relative;cursor:pointer}
.kcard .kc-top{position:absolute;top:6px;right:6px;display:flex;gap:2px;align-items:center}
.kcard .kc-chk{width:18px;height:18px;border-radius:4px;border:1px solid var(--control);background:#fff;display:none;place-items:center;color:#fff}
.kcard:hover .kc-chk{display:grid}
.kcard.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--indigo-100);background:var(--indigo-50)}
.kcard.sel .kc-chk{display:grid;background:var(--brand);border-color:var(--brand)}
.kcard .kc-exp{width:26px;height:26px;opacity:0}.kcard:hover .kc-exp,.kcard.sel .kc-exp{opacity:1}
.kcard .b{padding-right:52px}
.kbar{margin-bottom:12px}.kbar-hint{margin:-4px 0 10px}
.kcard .c+.c{margin-top:2px}.kcard .kc-k{color:var(--n500)}
.kcard .b{padding-right:30px}

/* Màn lead gộp xem + sửa — 18/10/2026 */
/* 29/10: ô sửa được luôn hiện viền (trước đây chỉ hiện khi rê chuột); ô chỉ đọc và lead Thua vẫn không viền */
.lead-one .ef-info .field .input,.lead-one .ef-info .field .select,.lead-one .ef-info .field .textarea,.lead-one .ef-info .multi{border-color:var(--control);background:#fff;box-shadow:none;transition:border-color .12s,background .12s}
.lead-one .ef-info .field .input[readonly]{border-color:transparent;background:transparent}
.lead-one .ef-info .field:hover .input:not([readonly]),.lead-one .ef-info .field:hover .select,.lead-one .ef-info .field:hover .textarea,.lead-one .ef-info .field:hover .multi{border-color:var(--n400)}
.lead-one .ef-info .field .input:focus,.lead-one .ef-info .field .select:focus,.lead-one .ef-info .field .textarea:focus{border-color:var(--brand);background:#fff}
.lead-one .ef-info .field.has-err .input,.lead-one .ef-info .field.has-err .select,.lead-one .ef-info .field.has-err .textarea,.lead-one .ef-info .field.has-err .multi{border-color:var(--red-600);background:#fff}

.lead-one .ef-info .input::placeholder,.lead-one .ef-info .textarea::placeholder{color:var(--n400)}
.lead-one.is-lost .ef-info .field .input,.lead-one.is-lost .ef-info .field .select,.lead-one.is-lost .ef-info .field .textarea,.lead-one.is-lost .ef-info .multi,.lead-one.is-lost .ef-info .field:hover .input,.lead-one.is-lost .ef-info .field:hover .select,.lead-one.is-lost .ef-info .field:hover .multi{border-color:transparent;background:transparent}.lead-one.is-lost .ef-info .select{background-image:none}
.lead-savebar.hidden{display:none}.lead-savebar .lsb-msg{margin-right:auto;font-size:13px;color:var(--n700)}
.lead-one>aside.card{top:0}
.lp-step{min-width:0;padding:0 8px 0 20px;font-size:12.5px}.lp-step:first-child{padding-left:12px}
.lead-one .ef-info .select:has(option:checked[value=""]){color:var(--n400)}

/* 29/10: drawer chi tiết lead — form y như màn lead */
.dr-ro{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--n50);color:var(--n800)}.dr-ro>svg{margin-left:auto;color:var(--n400)}
.dr-savebar{position:sticky;bottom:-20px;display:flex;align-items:center;gap:8px;margin:16px -24px -20px;padding:12px 24px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(15,23,42,.06)}.dr-savebar .lsb-msg{margin-right:auto;font-size:13px;color:var(--n700)}.dr-savebar.hidden{display:none}