/* GIP CRM · bản tái thiết kế theo skill ffm-design (DS FFM v2, 04/11/2026)
   Nạp SAU app.css / settings-polish.css. Chỉ đổi giao diện + bố cục, không đổi nghiệp vụ.
   Lớp 1: ánh xạ biến cũ của prototype sang token FFM (--ffm-* trong ffm-tokens.css).
   Lớp 2: component theo DS v2 (Button, Input, Badge Soft, Table v2, Tabs, Sidebar, Overlay).
   Lớp 3: bố cục List page / Settings theo Style principles (Attio). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---------- 1. Token ---------- */
:root{
  --n0:var(--ffm-neutral-0);--n50:var(--ffm-neutral-50);--n100:var(--ffm-neutral-100);--n200:var(--ffm-neutral-200);--n300:var(--ffm-neutral-300);
  --n400:var(--ffm-neutral-400);--n500:var(--ffm-neutral-500);--n600:var(--ffm-neutral-600);--n700:var(--ffm-neutral-700);--n800:var(--ffm-neutral-800);--n900:var(--ffm-neutral-950);
  --page:var(--ffm-bg-base-canvas);--muted:var(--ffm-fg-base-secondary);
  --indigo-50:var(--ffm-bg-brand-selected);--indigo-100:var(--ffm-bg-overlay-brand-default);--indigo-200:var(--ffm-border-brand-disabled);
  --indigo-600:var(--ffm-bg-brand-default);--indigo-700:var(--ffm-bg-brand-default);--indigo-800:var(--ffm-bg-brand-hover);--indigo-900:var(--ffm-bg-brand-focus);
  --brand:var(--ffm-bg-brand-default);--brand-hover:var(--ffm-bg-brand-hover);--brand-subtle:var(--ffm-bg-brand-selected);
  --border:var(--ffm-border-base-default);--border-default:var(--ffm-border-base-default);--control:var(--ffm-neutral-300);
  --red-50:var(--ffm-bg-overlay-error-default);--red-100:var(--ffm-border-error-disabled);--red-600:var(--ffm-fg-error-primary);--red-700:var(--ffm-fg-error-hover);
  --amber-50:var(--ffm-bg-overlay-caution-default);--amber-100:var(--ffm-border-caution-disabled);--amber-500:var(--ffm-border-caution-default);--amber-800:var(--ffm-fg-caution-primary);
  --orange-50:var(--ffm-bg-overlay-warning-default);--orange-100:var(--ffm-border-warning-disabled);--orange-700:var(--ffm-fg-warning-primary);
  --green-50:var(--ffm-bg-overlay-success-default);--green-100:var(--ffm-border-success-disabled);--green-700:var(--ffm-fg-success-primary);
  --purple-50:var(--ffm-bg-overlay-status-2-default);--purple-700:var(--ffm-fg-status-2-primary);
  --cyan-50:var(--ffm-bg-overlay-status-0-default);--cyan-700:var(--ffm-fg-status-0-primary);
  --r-sm:var(--ffm-radius-sm);--r-md:var(--ffm-radius-xl);--r-lg:var(--ffm-radius-xl);--r-xl:var(--ffm-radius-2xl);
  --sh-card:none;--sh-drop:var(--ffm-shadow-md);--sh-drawer:var(--ffm-shadow-lg);
  --settings-text-sm:14px;--settings-text-md:14px;--settings-radius:var(--ffm-radius-xl);
}

body{font:400 14px/20px var(--ffm-font-body);color:var(--ffm-fg-base-primary);background:var(--ffm-bg-base-canvas);letter-spacing:0}
a{color:var(--ffm-fg-brand-primary)}
svg.i{color:inherit}
svg.i.phi{fill:currentColor;stroke:none}
:focus-visible{outline:none;box-shadow:var(--ffm-shadow-ring-brand)!important}

/* Scrollbar (rule #13): track 10 trong suốt, thumb 8 bo tròn */
*{scrollbar-width:thin;scrollbar-color:var(--ffm-neutral-300) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ffm-neutral-300);border-radius:999px;border:2px solid transparent;background-clip:content-box}

/* ---------- 2. Shell: Sidebar 256 + Page header 56 ---------- */
.sidebar{width:256px;background:var(--ffm-bg-base-surface);border-right:1px solid var(--ffm-border-base-default)}
body #app>.sidebar.is-expanded{width:256px!important}
body #app>.sidebar.is-collapsed{width:56px!important}
body:has(#app>.sidebar.is-collapsed) :is(.fixed-bar,.qbar,.ct-bar){left:56px}
.fixed-bar{left:256px}
.sb-logo{height:56px;border-bottom:none;padding:0 16px;font:600 16px/24px var(--ffm-font-body)}
.sb-logo .mark{width:28px;height:28px;border-radius:var(--ffm-radius-lg);background:var(--ffm-fg-base-primary);font-size:14px}
.sb-logo small{color:var(--ffm-fg-base-secondary);font-size:14px;font-weight:500}
.sb-nav{padding:4px 12px 12px}
.sb-grp{font:500 12px/16px var(--ffm-font-body);color:var(--ffm-fg-base-hint);padding:16px 8px 6px;text-transform:none}
.sb-item{height:32px;padding:0 8px;gap:8px;border-radius:var(--ffm-radius-xl);color:var(--ffm-fg-base-primary);font-size:14px}
.sb-item svg{color:var(--ffm-fg-base-icon)}
.sb-item:hover{background:var(--ffm-bg-base-hover)}
.sb-item.active{background:var(--ffm-bg-base-selected);color:var(--ffm-fg-base-primary);font-weight:500;box-shadow:none}
.sb-item.active svg{color:var(--ffm-fg-brand-primary)}
.settings-parent.parent-on{color:var(--ffm-fg-base-primary);font-weight:500}.settings-parent.parent-on>svg{color:var(--ffm-fg-brand-primary)}
.settings-submenu{margin:2px 0 6px 15px;border-left-color:var(--ffm-border-base-default);gap:2px}
.settings-child{height:32px;font-size:13px}
.sb-footer{background:transparent;border-top:1px solid var(--ffm-border-base-default)}
.sb-collapse{border-radius:var(--ffm-radius-xl);color:var(--ffm-fg-base-secondary);font-size:13px;min-height:32px}
.sb-collapse:hover{background:var(--ffm-bg-base-hover)}

.topbar{height:56px;padding:0 20px;border-bottom:1px solid var(--ffm-border-base-default);background:var(--ffm-bg-base-canvas)}
.crumbs{font-size:14px;color:var(--ffm-fg-base-secondary);gap:6px}
.crumbs a{color:var(--ffm-fg-base-secondary);font-weight:400}.crumbs .cur{color:var(--ffm-fg-base-primary);font-weight:600}
.crumbs svg{color:var(--ffm-fg-base-hint);width:14px;height:14px}
.gsearch{width:320px;height:32px;border-radius:var(--ffm-radius-xl);background:var(--ffm-bg-base-canvas);border-color:var(--ffm-border-base-default);color:var(--ffm-fg-base-placeholder)}
.gsearch:hover{background:var(--ffm-bg-base-surface)}
.kbd{border-radius:var(--ffm-radius-sm);border-color:var(--ffm-border-base-default);background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-secondary);font-size:12px;line-height:16px;padding:0 5px}
.bell::after{background:var(--ffm-bg-brand-default);border-color:var(--ffm-bg-base-canvas);width:8px;height:8px}
.tb-user{border-left-color:var(--ffm-border-base-default)}
.u-name{font-size:14px;line-height:20px}.u-role{font-size:12px;color:var(--ffm-fg-base-secondary)}
.avatar{background:var(--ffm-bg-overlay-brand-default);color:var(--ffm-fg-brand-primary);font-size:12px;font-weight:600}
.main{padding:24px 20px;background:var(--ffm-bg-base-canvas)}

/* Tiêu đề trang */
.ph{margin-bottom:16px;align-items:center}
.ph h1{font:600 20px/28px var(--ffm-font-heading);letter-spacing:-.3px}
.ph .sub{color:var(--ffm-fg-base-secondary);margin-top:2px}
.count-pill{background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-secondary);border-radius:var(--ffm-radius-sm);font:500 12px/16px var(--ffm-font-body);padding:2px 6px}

/* ---------- 3. Button (radius/xl 12, control 36 trong form · 32 trong thanh) ---------- */
.btn{height:36px;padding:0 12px;border-radius:var(--ffm-radius-xl);border:1px solid var(--ffm-border-base-default);background:var(--ffm-bg-base-canvas);color:var(--ffm-fg-base-primary);font:500 14px/20px var(--ffm-font-body);gap:6px;box-shadow:var(--ffm-shadow-xs)}
.btn svg{color:var(--ffm-fg-base-icon)}
.btn:hover{background:var(--ffm-bg-base-hover)}
.btn.primary{background:var(--ffm-bg-brand-default);border-color:var(--ffm-bg-brand-default);color:var(--ffm-fg-base-light-solid)}
.btn.primary:hover{background:var(--ffm-bg-brand-hover);border-color:var(--ffm-bg-brand-hover)}
.btn.primary svg,.btn.danger svg{color:var(--ffm-fg-base-light-solid)}
.btn.danger{background:var(--ffm-bg-error-default);border-color:var(--ffm-bg-error-default);color:var(--ffm-fg-base-light-solid)}
.btn.danger:hover{background:var(--ffm-bg-error-hover)}
.btn.danger-ghost{color:var(--ffm-fg-error-primary);border-color:var(--ffm-border-base-default)}.btn.danger-ghost svg{color:var(--ffm-fg-error-primary)}
.btn.ghost{box-shadow:none;border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--ffm-bg-base-hover)}
.btn.sm{height:32px;padding:0 10px;font-size:14px}.btn.icon{width:36px;padding:0}.btn.icon.sm{width:32px}
.btn-group .btn:first-child{border-radius:var(--ffm-radius-xl) 0 0 var(--ffm-radius-xl)}.btn-group .btn:last-child{border-radius:0 var(--ffm-radius-xl) var(--ffm-radius-xl) 0;border-left:1px solid #ffffff4d}
.link{color:var(--ffm-fg-brand-primary)}

/* ---------- 4. Badge Soft (radius/md 8) · intent chỉ cho trạng thái ---------- */
.badge{height:22px;padding:0 8px;border-radius:var(--ffm-radius-md);font:500 12px/16px var(--ffm-font-body);background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-secondary)}
.badge.brand{background:var(--ffm-bg-overlay-brand-default);color:var(--ffm-fg-brand-primary)}
.badge.success{background:var(--ffm-bg-overlay-success-default);color:var(--ffm-fg-success-primary)}
.badge.danger{background:var(--ffm-bg-overlay-error-default);color:var(--ffm-fg-error-primary)}
.badge.warning{background:var(--ffm-bg-overlay-warning-default);color:var(--ffm-fg-warning-primary)}
.badge.caution{background:var(--ffm-bg-overlay-caution-default);color:var(--ffm-fg-caution-primary)}
.badge.info{background:var(--ffm-bg-overlay-info-default);color:var(--ffm-fg-info-primary)}
.badge.purple{background:var(--ffm-bg-overlay-status-2-default);color:var(--ffm-fg-status-2-primary)}
.badge.outline{background:var(--ffm-bg-base-canvas);border-color:var(--ffm-border-base-default);color:var(--ffm-fg-base-primary)}
.tag{height:24px;border-radius:var(--ffm-radius-md);background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-primary);font:500 12px/16px var(--ffm-font-body)}
.pic .n{background:var(--ffm-bg-overlay-brand-default);color:var(--ffm-fg-brand-primary)}
.muted{color:var(--ffm-fg-base-secondary)}.sec{color:var(--ffm-fg-base-secondary)}.req{color:var(--ffm-fg-error-primary)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- 5. Card / panel (radius/2xl 16, phẳng, hairline) ---------- */
.card{border-radius:var(--ffm-radius-2xl);border-color:var(--ffm-border-base-default);box-shadow:none;background:var(--ffm-bg-base-canvas)}
.card-h{min-height:52px;padding:12px 20px;border-bottom-color:var(--ffm-border-base-default)}
.card-h h3{font:600 16px/24px var(--ffm-font-body)}
.card-h .meta{color:var(--ffm-fg-base-secondary);font-size:14px}
.sect-t{font:600 16px/24px var(--ffm-font-body)}.sect-d{color:var(--ffm-fg-base-secondary);font-size:14px}
.dl .k,.kv .k{color:var(--ffm-fg-base-secondary);font-size:12px}.dl .v{font-weight:500}
.kpi .v{font:600 24px/32px var(--ffm-font-heading);letter-spacing:-.5px}.kpi .k{color:var(--ffm-fg-base-secondary)}
.divider{border-top-color:var(--ffm-border-base-default)}

/* ---------- 6. Form (control 36, radius/xl, ring brand) ---------- */
.field>label,.lbl{font:500 14px/20px var(--ffm-font-body);color:var(--ffm-fg-base-primary)}
.field .help{color:var(--ffm-fg-base-secondary)}.field .err{color:var(--ffm-fg-error-primary)}
.input,.select,.textarea,.multi,.range{border-radius:var(--ffm-radius-xl);border-color:var(--ffm-border-base-default);font-size:14px;box-shadow:var(--ffm-shadow-xs);background-color:var(--ffm-bg-base-canvas)}
.input,.select{padding:0 12px}.select{padding-right:32px}
.input::placeholder,.textarea::placeholder{color:var(--ffm-fg-base-placeholder)}
.input:hover,.select:hover,.textarea:hover,.multi:hover{border-color:var(--ffm-border-base-hover)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ffm-border-brand-default);box-shadow:var(--ffm-shadow-ring-brand)}
.input[readonly],.input:disabled,.select:disabled{background-color:var(--ffm-bg-base-disabled);color:var(--ffm-fg-base-secondary);box-shadow:none}
.input.invalid,.select.invalid{border-color:var(--ffm-border-error-default)}
.ro,.dr-ro,.lp-stage-ro{border-radius:var(--ffm-radius-xl);background:var(--ffm-bg-base-surface);color:var(--ffm-fg-base-primary)}
.seg,.stabs{background:transparent;padding:0;gap:4px;border-radius:0}
.seg button,.stabs button{height:32px;padding:0 12px;border-radius:999px;color:var(--ffm-fg-base-secondary);font:500 14px/20px var(--ffm-font-body)}
.seg button:hover,.stabs button:hover{background:var(--ffm-bg-base-hover)}
.seg button.on,.stabs button.on{background:var(--ffm-bg-brand-selected);color:var(--ffm-fg-brand-selected);box-shadow:none}
.check input{accent-color:var(--ffm-bg-brand-default)}
.switch{width:36px;height:20px}.switch span{background:var(--ffm-neutral-300)}
.switch input:checked+span{background:var(--ffm-bg-brand-default)}.switch input:checked+span::before{transform:translateX(16px)}

/* ---------- 7. Table v2: head 40 surface-strong · hàng 52 · ngựa vằn · Column divider ---------- */
table.t{font-size:14px;border-collapse:separate;border-spacing:0}
table.t th{background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-primary);font:600 14px/20px var(--ffm-font-body);height:40px;padding:10px 12px;border-bottom:1px solid var(--ffm-border-base-default);border-right:1px solid var(--ffm-border-base-default)}
table.t td{height:52px;padding:8px 12px;border-bottom:1px solid var(--ffm-border-base-default);border-right:1px solid var(--ffm-border-base-default)}
table.t tr>:last-child{border-right:none}
table.t tbody tr:nth-child(even) td{background:var(--ffm-bg-base-surface)}
table.t tbody tr:hover td{background:var(--ffm-bg-base-hover)}
table.t tbody tr.sel td{background:var(--ffm-bg-base-selected)}
table.t td .l1{font-weight:400}
table.t td .l2{font-size:12px;line-height:16px;color:var(--ffm-fg-base-secondary)}
table.t th .i,table.t th svg.i:not(.sort){display:none}
table.t td.stick-r,table.t th.stick-r{box-shadow:none;border-left:1px solid var(--ffm-border-base-default)}
table.t th.stick-r{background:var(--ffm-bg-base-surface-strong)}
table.t tbody tr:nth-child(even) td.stick-r{background:var(--ffm-bg-base-surface)}
table.t tbody tr:hover td.stick-r{background:var(--ffm-bg-base-hover)}table.t tbody tr.sel td.stick-r{background:var(--ffm-bg-base-selected)}
.tbl-wrap{background:none}
#lead-list table.t tbody tr:nth-child(even){--lead-row-bg:var(--ffm-bg-base-surface)}
#lead-list table.t tbody tr:hover{--lead-row-bg:var(--ffm-bg-base-hover)}
#lead-list table.t tbody tr.sel{--lead-row-bg:var(--ffm-bg-base-selected)}
.empty{color:var(--ffm-fg-base-secondary)}

/* Pagination: tóm tắt trái · số trang · "30 / trang" phải */
.pager{padding:12px 20px;border-top:1px solid var(--ffm-border-base-default);gap:12px;color:var(--ffm-fg-base-secondary)}
.pg button{min-width:32px;height:32px;border-radius:var(--ffm-radius-xl);border-color:transparent;background:transparent;font-weight:500}
.pg button:hover{background:var(--ffm-bg-base-hover)}
.pg button.on{background:var(--ffm-bg-base-canvas);border-color:var(--ffm-border-base-default);color:var(--ffm-fg-base-primary);box-shadow:var(--ffm-shadow-xs)}

/* ---------- 8. Tabs: Underline (đen, không brand) ---------- */
.tabs{gap:20px;border-bottom-color:var(--ffm-border-base-default)}
.tab{height:40px;color:var(--ffm-fg-base-secondary);font:500 14px/20px var(--ffm-font-body)}
.tab:hover{color:var(--ffm-fg-base-primary)}
.tab.on{color:var(--ffm-fg-base-primary);border-bottom-color:var(--ffm-fg-base-primary)}
.tab .cnt,.tab.on .cnt{background:none;padding:0;color:var(--ffm-fg-base-hint);font:400 14px/20px var(--ffm-font-body)}
.tab .cnt::before{content:"("}.tab .cnt::after{content:")"}
.tab.on .cnt{color:var(--ffm-fg-base-secondary)}

/* ---------- 9. Alert / notice ---------- */
.notice{border-radius:var(--ffm-radius-xl);border-color:var(--ffm-border-base-default);background:var(--ffm-bg-base-surface);color:var(--ffm-fg-base-primary)}
.notice svg{color:var(--ffm-fg-info-primary)}
.notice.warn{background:var(--ffm-bg-overlay-warning-default);border-color:var(--ffm-border-warning-subtle)}.notice.warn svg{color:var(--ffm-fg-warning-primary)}
.notice.danger{background:var(--ffm-bg-overlay-error-default);border-color:var(--ffm-border-error-subtle)}.notice.danger svg{color:var(--ffm-fg-error-primary)}
.notice.success{background:var(--ffm-bg-overlay-success-default);border-color:var(--ffm-border-success-subtle)}.notice.success svg{color:var(--ffm-fg-success-primary)}
.notice.caution{background:var(--ffm-bg-overlay-caution-default);border-color:var(--ffm-border-caution-subtle)}.notice.caution svg{color:var(--ffm-fg-caution-primary)}
.notice.gray svg{color:var(--ffm-fg-base-icon)}

/* ---------- 10. Lớp nổi: Drawer / Dialog (Shadow/lg) · Menu (Shadow/md) · Toast · Tooltip ---------- */
.scrim{background:var(--ffm-bg-overlay-base-scrim)}
.drawer{box-shadow:var(--ffm-shadow-lg)}
.dr-h{padding:16px 24px;align-items:center}.dr-h h2{font:600 18px/28px var(--ffm-font-heading);letter-spacing:-.2px}
.dr-h .sub{color:var(--ffm-fg-base-secondary)}
.dr-f,.dr-h{border-color:var(--ffm-border-base-default)}
.modal{border-radius:var(--ffm-radius-2xl);box-shadow:var(--ffm-shadow-lg)}
.menu{border-radius:var(--ffm-radius-2xl);box-shadow:var(--ffm-shadow-md);border-color:var(--ffm-border-base-default)}
.menu button{height:32px;border-radius:var(--ffm-radius-xl);color:var(--ffm-fg-base-primary);font-size:14px}
.menu button:hover{background:var(--ffm-bg-base-hover)}.menu button.danger{color:var(--ffm-fg-error-primary)}
.menu .opt.on{color:var(--ffm-fg-base-primary);background:var(--ffm-bg-base-selected)}
.toast{background:var(--ffm-bg-base-inverse);border-radius:var(--ffm-radius-2xl);font-size:14px;padding:12px 16px}
.toast.err{background:var(--ffm-bg-error-default)}
.tip{background:var(--ffm-bg-base-inverse);border-radius:var(--ffm-radius-lg)}
.action-bar,.fixed-bar,.dr-savebar,.lead-savebar{border-top-color:var(--ffm-border-base-default)}
.dr-savebar{box-shadow:none}

/* Thanh thao tác hàng loạt nền tối (quy tắc #5) */
.bar-sel{background:var(--ffm-bg-base-inverse);color:var(--ffm-fg-base-light-solid);border:none;border-radius:var(--ffm-radius-2xl);margin:8px 12px;box-shadow:var(--ffm-shadow-lg)}
.bar-sel .btn{background:transparent;border-color:#ffffff33;color:#fff;box-shadow:none}.bar-sel .btn svg{color:#fff}.bar-sel .btn:hover{background:#ffffff1a}
.bar-sel .link,.bar-sel a{color:#fff}

/* ---------- 11. Kanban ---------- */
.col-k{background:var(--ffm-bg-base-surface);border:1px solid var(--ffm-border-base-default);border-top:1px solid var(--ffm-border-base-default);border-radius:var(--ffm-radius-2xl)}
.col-k .kh .s{color:var(--ffm-fg-base-secondary)}
.col-k.over .kb{background:var(--ffm-bg-overlay-brand-default)}
.kcard{border-radius:var(--ffm-radius-xl);border-color:var(--ffm-border-base-default);box-shadow:var(--ffm-shadow-xs)}
.kcard:hover{border-color:var(--ffm-border-base-hover)}
.kcard.sel{border-color:var(--ffm-border-brand-default);box-shadow:var(--ffm-shadow-ring-brand);background:var(--ffm-bg-base-canvas)}
.kcard .b{font-weight:600}.kcard .c{color:var(--ffm-fg-base-secondary)}

/* ---------- 12. Thanh stage (path): trung tính, chỉ stage hiện tại dùng brand ---------- */
.lp-step{background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-secondary);font-family:var(--ffm-font-body)}
.lp-step:hover:not(:disabled){background:var(--ffm-bg-base-hover);color:var(--ffm-fg-base-primary)}
.lp-step.done{background:var(--ffm-bg-base-selected);color:var(--ffm-fg-base-primary)}
.lp-step.cur{background:var(--ffm-bg-brand-selected);color:var(--ffm-fg-brand-selected)}
.lp-step.on{background:var(--ffm-bg-brand-default);color:#fff}
.lp-step.on.won{background:var(--ffm-bg-success-default)}.lp-step.on.lost{background:var(--ffm-bg-error-default)}
.lp-step:disabled{background:var(--ffm-bg-base-surface);color:var(--ffm-fg-base-disable)}
.lp-chip{border-radius:var(--ffm-radius-md)}
.lp-cond{border-radius:var(--ffm-radius-xl)}

/* Misc */
.toc a{border-radius:var(--ffm-radius-xl);color:var(--ffm-fg-base-primary)}
.toc a.on{background:var(--ffm-bg-base-selected);color:var(--ffm-fg-base-primary);font-weight:500}
.toc a:hover{background:var(--ffm-bg-base-hover)}
.dropzone{border-color:var(--ffm-neutral-300);background:var(--ffm-bg-base-surface);border-radius:var(--ffm-radius-2xl)}
.drag-list .it{border-radius:var(--ffm-radius-xl)}
.placeholder .ic{background:var(--ffm-bg-base-surface-strong);color:var(--ffm-fg-base-icon);border-radius:var(--ffm-radius-2xl)}

/* ---------- 13. List page (Style principles · Attio) ---------- */
body:has(.lpg) .main{padding:0;overflow:hidden;display:flex;flex-direction:column}
.lpg{flex:1;min-height:0;display:flex;flex-direction:column}
.lpg-tabs{height:44px;flex:none;display:flex;align-items:flex-end;gap:8px;padding:0 20px;border-bottom:1px solid var(--ffm-border-base-default)}
.lpg-tabs>.r{margin-left:auto;display:flex;gap:4px;align-self:center}
.vtabs{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.vtab{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;margin-bottom:6px;padding:0 10px;border:1px solid transparent;border-radius:var(--ffm-radius-xl);background:transparent;color:var(--ffm-fg-base-secondary);font:500 14px/20px var(--ffm-font-body);cursor:pointer;white-space:nowrap;flex:none}
.vtab svg{color:var(--ffm-fg-base-icon)}
.vtab:hover{background:var(--ffm-bg-base-hover)}
.vtab.on{background:var(--ffm-bg-base-canvas);border-color:var(--ffm-border-base-default);color:var(--ffm-fg-base-primary)}
.vtab.on::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-7px;height:2px;background:var(--ffm-fg-base-primary)}
.vcnt{font:500 12px/16px var(--ffm-font-body);color:var(--ffm-fg-base-secondary);background:var(--ffm-bg-base-surface-strong);border-radius:var(--ffm-radius-sm);padding:0 5px;min-width:20px;text-align:center}
.lpg-tool{height:52px;flex:none;display:flex;align-items:center;gap:8px;padding:0 20px}
.lpg-tool>.l,.lpg-tool>.r{display:flex;align-items:center;gap:8px;min-width:0}.lpg-tool>.r{margin-left:auto}
.lpg-tool .btn,.lpg-fbar .btn{height:32px;padding:0 10px}.lpg-tool .btn.icon{width:32px;padding:0}
.lpg-search{position:relative;width:260px}.lpg-search svg{position:absolute;left:10px;top:8px;color:var(--ffm-fg-base-icon);pointer-events:none}
.lpg-search .input{height:32px;padding-left:32px}
.btn .bcnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ffm-bg-brand-default);color:#fff;font:600 11px/1 var(--ffm-font-body)}
.lpg-fbar{min-height:48px;flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 20px;border-top:1px solid var(--ffm-border-base-default)}
.lpg-fbar .select,.lpg-fbar .range{height:32px;width:auto;min-width:150px;max-width:240px;font-size:14px}
.lpg-fbar .range{min-width:250px}
.lpg-fbar .fdiv{width:1px;height:16px;background:var(--ffm-border-base-default)}
.lpg-fbar .select.set{border-color:var(--ffm-border-brand-default);background-color:var(--ffm-bg-brand-selected);color:var(--ffm-fg-brand-selected)}
.lpg-fbar>.r{margin-left:auto}
.lpg-main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.lpg-main>.tbl-wrap,.lpg-body{flex:1;min-height:0;overflow:auto;border-top:1px solid var(--ffm-border-base-default)}
.lpg-main table.t th{position:sticky;top:0;z-index:2}
.lpg-main table.t tfoot td{position:sticky;bottom:0;z-index:2;height:40px;background:var(--ffm-bg-base-surface-strong);border-top:1px solid var(--ffm-border-base-default);border-bottom:none;font-weight:600}
.lpg-main table.t tfoot td .k{font-weight:400;color:var(--ffm-fg-base-secondary)}
.lpg-main table.t td:first-child,.lpg-main table.t th:first-child{padding-left:20px}
.lpg-main .pager{height:60px;flex:none;padding:0 20px;margin:0;background:var(--ffm-bg-base-canvas)}
.lpg-main .empty{padding:80px 20px}
.lpg-main .bar-sel{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:6;margin:0;padding:8px 8px 8px 16px;gap:8px;white-space:nowrap}
.pager{display:flex;align-items:center;gap:12px}
.pager .pg{margin-left:auto;display:flex;gap:4px;align-items:center}
.pager .pg-gap{padding:0 6px;color:var(--ffm-fg-base-hint)}
.pager .pg-k{color:var(--ffm-fg-base-secondary)}.pager .pg-v{color:var(--ffm-fg-base-primary);font-weight:500}
.pager .pg-size{width:116px;height:32px}
.btn.ghost.on,.btn.on:not(.primary){background:var(--ffm-bg-base-selected)}.btn.ghost.on svg{color:var(--ffm-fg-base-primary)}
.lpg-main>.lpg-board{flex:1;min-height:0;overflow:auto;padding:16px 20px;border-top:1px solid var(--ffm-border-base-default)}
.lpg-board .board{min-height:100%;padding-bottom:0}
.col-k{border-top-color:var(--ffm-border-base-default)!important}.col-k .kh .dot{display:none}
.col-k .kh .t .badge{background:var(--ffm-bg-base-surface-strong);border-radius:var(--ffm-radius-sm);height:20px;padding:0 6px}
#kbar:empty{display:none}
#kbar .bar-sel{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:6;margin:0;padding:8px 8px 8px 16px;gap:8px;white-space:nowrap}
.lpg-fbar .range{width:320px;max-width:none;white-space:nowrap}.lpg-fbar .range input{width:88px;flex:none}.lpg-fbar .range>.muted:first-child{margin-right:4px}
.lpg-fbar .select{max-width:200px}
.lpg-tabs>div:first-child{min-width:0;flex:0 1 auto;display:flex;align-self:stretch;align-items:flex-end}.lpg-tabs>.r{flex:none}.vtabs{min-width:0;align-self:stretch;align-items:flex-end;overflow-y:hidden}

/* ---------- 14. Theo mẫu OL2_6 (04/11): màu FFM gốc · chữ bảng 13 · vùng đầu trang thoáng hơn ---------- */
/* Page header: màn danh sách chỉ hiện tên màn (như "Orders"), không breadcrumb */
body:has(.lpg) .crumbs>:not(.cur){display:none}
body:has(.lpg) .crumbs .cur{font:600 17px/24px var(--ffm-font-heading);letter-spacing:-.2px;color:var(--ffm-fg-base-primary)}
.topbar{height:60px;padding:0 24px}
/* View tabs: ô rộng hơn, cách nhau rộng hơn */
.lpg-tabs{height:52px;padding:0 24px;gap:16px}
.vtabs{gap:12px}
.vtab{height:36px;margin-bottom:8px;padding:0 14px;gap:8px}
.vtab.on::after{bottom:-9px}
.vcnt{padding:1px 6px}
/* Toolbar + Filter bar: cao hơn, nút 36 */
.lpg-tool{height:60px;padding:0 24px;gap:10px}
.lpg-tool>.l,.lpg-tool>.r{gap:10px}
.lpg-tool .btn,.lpg-fbar .btn{height:36px;padding:0 14px}.lpg-tool .btn.icon{width:36px}
.lpg-search{width:300px}.lpg-search .input{height:36px}.lpg-search svg{top:10px;left:12px}.lpg-search .input{padding-left:36px}
.lpg-fbar{min-height:56px;padding:10px 24px;gap:10px}
.lpg-fbar .select,.lpg-fbar .range{height:36px}
.lpg-tabs .vset{height:36px;padding:0 12px}
/* Bảng: chữ nội dung nhỏ đi 1 chút (14 → 13) */
table.t{font-size:13px}
table.t th{font-size:13px}
table.t td{font-size:13px;line-height:18px}
table.t td .l2{font-size:12px;line-height:16px}
table.t .badge{font-size:12px}
.lpg-main table.t td:first-child,.lpg-main table.t th:first-child{padding-left:24px}
.lpg-main .pager{padding:0 24px}
.vtabs{gap:6px}.vtab{padding:0 12px}
.vtabs{gap:4px}.vtab{padding:0 10px}.lpg-tabs{gap:8px}

/* ---------- 15. Không chú thích trên màn (DS rule #9, user 04/11) ----------
   Ẩn phụ đề trang, gợi ý dưới ô nhập, mô tả mục, khung giải thích, đếm phụ ở tiêu đề thẻ.
   Giữ khung cảnh báo / lỗi / chặn / thành công (.notice.danger|warn|caution|success) vì là phản hồi thao tác. */
.ph .sub,.help,.sect-d,.q-intro,.ps-intro p,.fx-guidance,.cg-foot,.card-h .meta,.kbar-hint,.notice.gray,
.main .notice:not(.danger):not(.warn):not(.caution):not(.success){display:none!important}
.cg-desc,.cg-hd .desc,.cg-hd .ttl .muted,.ps-intro .badge{display:none!important}
.ps-th-hint{display:none!important}

/* ---------- 16. Logo CRM (06/11): khối brand + phễu bán hàng, 2 dòng chữ như header sidebar FFM ---------- */
.sb-logo{height:64px;gap:10px;padding:0 16px}
.sb-logo .mark{width:32px;height:32px;border-radius:var(--ffm-radius-lg);background:var(--ffm-bg-brand-default);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px #ffffff1f}
.sb-logo .mark svg{width:20px;height:20px}
.sb-brand-name{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:0!important;line-height:1.2}
.sb-brand-name b{font:600 15px/20px var(--ffm-font-body);color:var(--ffm-fg-base-primary);letter-spacing:-.1px}
.sb-brand-name small{font:400 12px/16px var(--ffm-font-body)!important;color:var(--ffm-fg-base-secondary)!important;display:block!important}
body #app>.sidebar.is-expanded .sb-logo{padding:0 16px!important}

/* ---------- 17. (06/11) Ô khoảng ngày gọn + cột Pipeline trống ---------- */
.lpg-fbar .range{width:auto;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:0 12px;font-size:14px}
.lpg-fbar .range>.muted:first-child{margin-right:4px;color:var(--ffm-fg-base-secondary)}
.lpg-fbar .range input{width:10.5ch;flex:none;padding:0;border:0;background:none;font:400 14px/20px var(--ffm-font-body);color:var(--ffm-fg-base-primary);text-align:center}
.lpg-fbar .range>.muted:not(:first-child){color:var(--ffm-fg-base-hint)}
.lpg-fbar .range>svg{margin-left:4px;color:var(--ffm-fg-base-icon)}
.col-k:has(.kb:empty){background:var(--ffm-bg-base-canvas)}
.col-k:has(.kb:empty) .kh .badge{display:none}
.lpg-fbar{flex-wrap:nowrap}.lpg-fbar .select{min-width:120px;flex:0 1 200px}.lpg-fbar>.r{flex:none}.lpg-fbar .btn{flex:none}
.lpg-fbar .range,.lpg-fbar .fdiv{flex:none}

/* ---------- 18. (06/11) Hàng đang chọn = nền xanh brand nhạt như OL2_6 ---------- */
table.t tbody tr.sel td,table.t tbody tr.sel:nth-child(even) td,table.t tbody tr.sel td.stick-r{background:var(--ffm-bg-brand-selected)}
table.t tbody tr.sel:hover td,table.t tbody tr.sel:hover td.stick-r{background:var(--ffm-bg-overlay-brand-hover)}
#lead-list table.t tbody tr.sel,#lead-list table.t tbody tr.sel:nth-child(even){--lead-row-bg:var(--ffm-bg-brand-selected)}
#lead-list table.t tbody tr.sel:hover{--lead-row-bg:var(--ffm-bg-overlay-brand-hover)}
:root{--row-sel:color-mix(in srgb,var(--ffm-blue-brand-100) 55%,#fff);--row-sel-hover:color-mix(in srgb,var(--ffm-blue-brand-100) 85%,#fff)}
table.t tbody tr.sel td,table.t tbody tr.sel:nth-child(even) td,table.t tbody tr.sel td.stick-r{background:var(--row-sel)}
table.t tbody tr.sel:hover td,table.t tbody tr.sel:hover td.stick-r{background:var(--row-sel-hover)}
#lead-list table.t tbody tr.sel,#lead-list table.t tbody tr.sel:nth-child(even){--lead-row-bg:var(--row-sel)}
#lead-list table.t tbody tr.sel:hover{--lead-row-bg:var(--row-sel-hover)}

/* ---------- 19. Polish màn Lead + Báo giá (06/11, /impeccable) — chỉ áp khi body[data-mod] là Leads / Báo giá ---------- */
/* Phụ đề trang chi tiết là dữ liệu (mã, khách, trạng thái), không phải chú thích → hiện lại */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .ph .sub{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;color:var(--ffm-fg-base-secondary)}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .ph h1 .count-pill{vertical-align:middle}
/* Lỗi tổng tỷ trọng kênh: chỉ hiện khi sai */
.field-err{font-size:12px;line-height:16px;color:var(--ffm-fg-error-primary);margin-top:6px}.field-err:empty{display:none}
/* Toggle group (Brand / Non-Brand, Khách mới / cũ): có khung như DS Toggle group Outline, mục chọn nền brand nhạt */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--ffm-border-base-default);border-radius:var(--ffm-radius-xl);background:var(--ffm-bg-base-canvas);box-shadow:var(--ffm-shadow-xs)}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .seg button{height:30px;border-radius:var(--ffm-radius-lg);padding:0 14px;flex:1}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .seg button.on{background:var(--ffm-bg-brand-selected);color:var(--ffm-fg-brand-selected)}
/* Ô chỉ đọc / khoá: cùng chiều cao + nền surface, chữ 1 dòng (không nhảy 2 dòng làm lệch hàng) */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .ro,
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .lead-one .ef-info .field .input[readonly]{height:36px;min-height:36px;background:var(--ffm-bg-base-surface);border:1px solid var(--ffm-border-base-default);border-radius:var(--ffm-radius-xl);color:var(--ffm-fg-base-primary);padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .ro>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Bảng trong thẻ: tràn mép thẻ, không viền lồng viền (no nested card) */
body[data-mod="Báo giá"] .card .tblbox{border:0;border-radius:0;margin:-20px;border-top:1px solid transparent}
body[data-mod="Báo giá"] .tblbox table.t th{background:var(--ffm-bg-base-surface-strong)}
body[data-mod="Báo giá"] .tblbox .foot{background:var(--ffm-bg-base-surface);color:var(--ffm-fg-base-secondary)}
/* Thanh trạng thái báo giá: trạng thái cuối dùng nền nhạt theo nghĩa, không khối xanh lá đặc */
body[data-mod="Báo giá"] .quote-flow .lp-step.on.won{background:var(--ffm-bg-overlay-success-default);color:var(--ffm-fg-success-primary);font-weight:600}
body[data-mod="Báo giá"] .quote-flow .lp-step.on.lost{background:var(--ffm-bg-overlay-error-default);color:var(--ffm-fg-error-primary);font-weight:600}
/* Tạo báo giá: nhãn cột thị trường cùng cỡ nhãn form; tiền tệ đã có ở tiêu đề Đơn giá */
body[data-mod="Báo giá"] .qmap-h span{font:500 14px/20px var(--ffm-font-body);color:var(--ffm-fg-base-primary)}
body[data-mod="Báo giá"] .qmap-cur{display:none}
/* Mục lục bên phải: không nhãn eyebrow, chữ thường */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .toc{padding:8px!important}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .toc a{font-size:14px;padding:6px 10px}
/* Bề mặt trình duyệt + số liệu bảng */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) ::selection{background:var(--ffm-bg-brand-selected);color:var(--ffm-fg-base-primary)}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) :is(input,textarea){caret-color:var(--ffm-bg-brand-default)}
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) table.t td{font-variant-numeric:tabular-nums}
/* sửa: bảng chỉ tràn mép khi đứng riêng trong thẻ; có dòng thông tin phía trên thì tràn 2 bên + đáy */
body[data-mod="Báo giá"] .card .tblbox{margin:0}
body[data-mod="Báo giá"] .card-b>.tblbox:first-child{margin:-20px}
body[data-mod="Báo giá"] .card-b>.tblbox:not(:first-child){margin:12px -20px -20px;border-top:1px solid var(--ffm-border-base-default)}
body[data-mod="Báo giá"] .card{overflow:hidden}
/* ô khoá (lockf) 1 dòng, cùng chiều cao ô nhập */
body[data-mod="Báo giá"] .lockf{height:36px;min-height:36px;border-radius:var(--ffm-radius-xl);background:var(--ffm-bg-base-surface);border:1px solid var(--ffm-border-base-default)}
body[data-mod="Báo giá"] .lockf>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body:has(#app>.sidebar.is-expanded) :is(.fixed-bar,.qbar,.ct-bar){left:256px}
/* thanh stage lead: không cắt tên stage; hẹp thì co đệm, vẫn thiếu chỗ thì cuộn ngang */
body[data-mod="Leads"] .lp{overflow-x:auto;scrollbar-width:none}
body[data-mod="Leads"] .lp-step{flex:1 0 auto;min-width:max-content;padding:0 14px 0 24px}
body[data-mod="Leads"] .lp-step:first-child{padding-left:14px}
body[data-mod="Leads"] .lp-step span{overflow:visible;text-overflow:clip}

/* ---------- 20. (06/11) Cột ô tick đồng bộ mọi List page: rộng 40, ô tick giữa cột (DS Table checkbox cell) ---------- */
.lpg-main table.t :is(th,td):has(> input[type=checkbox]:only-child){width:40px;min-width:40px;max-width:40px;padding:0!important;text-align:center;vertical-align:middle}
.lpg-main table.t :is(th,td) > input[type=checkbox]:only-child{margin:0;vertical-align:middle;width:16px;height:16px}
/* (06/11) Lead + Báo giá: khung giải thích xám / thông tin cũng ẩn trong drawer, modal; giữ cảnh báo, lỗi, chặn */
:is(body[data-mod="Leads"],body[data-mod="Báo giá"]) .notice:not(.danger):not(.warn):not(.caution):not(.success){display:none!important}