/* FIEX CRM — UI v2 (26/10/2026), bố cục tham khảo HubSpot: thanh trái gom theo khu · thanh trên tìm kiếm chung + Tạo mới ·
   nội dung trải rộng · thẻ phẳng viền mảnh · bảng gọn · hồ sơ khách 3 cột.
   Màu thương hiệu FIEX giữ nguyên: xanh #0909ad · mint #08f2c5 · vàng #ffd83d · ink #0b0e22.
   Chữ: Manrope (giao diện) · Bricolage Grotesque (tiêu đề trang) · JetBrains Mono (mã, số nhỏ). */
:root{
  --blue:#0909ad;--blue-50:#eef0ff;--blue-100:#dee2ff;--blue-200:#bcc3ff;--blue-300:#8e97ff;--blue-400:#5e66f7;--blue-800:#0e0ea8;--blue-900:#0a0a7c;--blue-950:#06063f;
  --mint:#08f2c5;--mint-50:#e4fff9;--mint-100:#beffef;--mint-500:#06d2aa;--mint-600:#05a98a;--mint-700:#0a7d68;
  --yellow:#ffd83d;--yellow-500:#f2c200;
  --ink:#0b0e22;--n-50:#f5f8fa;--n-100:#eaf0f6;--n-200:#dfe3eb;--n-300:#cbd6e2;--n-500:#7c98b6;--n-600:#516f90;--n-700:#33475b;--paper:#f5f8fa;
  --chu:#213343;--chu-2:#516f90;--vien:#dfe3eb;--nen:#f5f8fa;--be-mat:#ffffff;--sb:#0f1630;--sb-2:#1b2448;--sb-chu:#c5cde8;
  --loi:#e5484d;--loi-50:#fff0f0;--ok:#05a98a;--canh:#f2a100;
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:16px;--r-pill:999px;
  --sh-sm:0 1px 2px rgba(33,51,67,.06);--sh-md:0 4px 12px rgba(33,51,67,.08);--sh-lg:0 16px 40px -12px rgba(33,51,67,.25);
  --sh-blue:none;--sh-mint:none;
  --grad-mesh:radial-gradient(120% 120% at 0% 0%,#1816be 0%,#0a0a7c 55%,#06063f 100%);
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;--f-body:"Manrope",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;
  --sb-rong:232px;--top-cao:58px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:14px;line-height:1.55;color:var(--chu);background:var(--nen)}
h1,h2,h3,h4{color:var(--chu);margin:0 0 .5em;font-weight:700}
h2{font-family:var(--f-display);font-size:24px;letter-spacing:-.5px;line-height:1.2}
h3{font-size:16px;letter-spacing:-.1px}
a{color:var(--blue-800);text-decoration:none}
a:hover{color:var(--blue);text-decoration:underline}
code,kbd{font-family:var(--f-mono);font-size:12px;background:var(--n-100);padding:1px 6px;border-radius:5px}
p{margin:.45em 0}
hr{border:0;border-top:1px solid var(--vien);margin:16px 0}

/* ── Thanh DEMO ── */
.demo{background:var(--yellow);color:var(--ink);text-align:center;font-weight:700;font-size:13px;padding:5px 12px;position:relative;z-index:60}
.demo b{background:var(--blue);color:#fff;border-radius:var(--r-pill);padding:1px 10px;margin-right:8px;font-family:var(--f-mono);font-size:12px}

/* ── Khung app: thanh trái (sb) + vùng phải (thanh trên + nội dung) ── */
.mo-menu{position:absolute;opacity:0;pointer-events:none}
.sb{position:fixed;inset:0 auto 0 0;width:var(--sb-rong);background:var(--sb);color:var(--sb-chu);display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.sb .logo{display:flex;align-items:center;gap:10px;padding:16px 18px 14px;color:#fff;text-decoration:none;font-weight:800;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb .logo img{height:26px;width:auto;border-radius:6px;background:#fff;padding:2px}
.sb nav{padding:8px 10px 24px}
.sb-nhom{margin-bottom:6px}
.sb-tieu{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#7f8bb5;padding:12px 10px 4px;list-style:none;cursor:default}
.sb nav a{display:block;color:var(--sb-chu);font-weight:600;font-size:13.5px;padding:7px 10px;border-radius:var(--r-md);text-decoration:none;position:relative}
.sb nav a:hover{background:var(--sb-2);color:#fff}
.sb nav a.on{background:var(--sb-2);color:#fff}
.sb nav a.on::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--mint)}
.sb-khac summary{cursor:pointer}
.sb-khac summary::-webkit-details-marker{display:none}
.sb-khac summary:hover{color:#fff}
.vung{margin-left:var(--sb-rong);min-height:100vh;display:flex;flex-direction:column}
.sb-mo{display:none}

/* ── Thanh trên ── */
.top{position:sticky;top:0;z-index:30;background:var(--be-mat);border-bottom:1px solid var(--vien);height:var(--top-cao)}
.top-in{height:100%;display:flex;align-items:center;gap:14px;padding:0 24px}
.nut-menu{display:none;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:var(--r-md);color:var(--chu)}
.tim-chung{position:relative;flex:1;max-width:560px;margin:0}
.tim-chung input{width:100%;background:var(--nen);border:1px solid var(--vien);border-radius:var(--r-md);padding:8px 74px 8px 36px;font-size:14px}
.tim-chung::before{content:"⌕";position:absolute;left:12px;top:50%;transform:translateY(-52%);font-size:18px;color:var(--n-500);pointer-events:none}
.tim-chung kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--n-500);background:#fff;border:1px solid var(--vien);font-size:11px}
.phai{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto}
.ng-dung{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--chu-2)}
.ng-ten{font-weight:700;color:var(--chu)}
details.them{position:relative}
details.them>summary{list-style:none;cursor:pointer}
details.them>summary::-webkit-details-marker{display:none}
details.them .menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--vien);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;min-width:210px;display:flex;flex-direction:column;z-index:50}
details.them .menu a{color:var(--chu);font-weight:600;padding:8px 12px;border-radius:var(--r-sm);text-decoration:none}
details.them .menu a:hover{background:var(--nen)}
.them-dong{display:none}

/* ── Nút ── */
button,.nut{font-family:var(--f-body);font-weight:700;font-size:14px;line-height:1.3;border:1px solid transparent;border-radius:var(--r-md);padding:8px 16px;cursor:pointer;background:var(--blue);color:#fff;text-decoration:none;display:inline-block;transition:background .12s,border-color .12s;white-space:nowrap}
button:hover,.nut:hover{background:var(--blue-800);color:#fff;text-decoration:none}
button:active{transform:translateY(1px)}
.nut-nho{padding:4px 10px;font-size:12.5px;font-weight:700;background:#fff;color:var(--chu);border:1px solid var(--n-300);border-radius:var(--r-sm)}
.nut-nho:hover{background:var(--nen);color:var(--chu);border-color:var(--n-500)}
.mint,.nut-nho.mint{background:var(--mint)!important;color:var(--blue-950)!important;border-color:var(--mint)!important}
.mint:hover{background:var(--mint-500)!important;border-color:var(--mint-500)!important}
.nguy,.nut-nho.nguy{background:var(--loi)!important;color:#fff!important;border-color:var(--loi)!important}
button:focus-visible,.nut:focus-visible,a:focus-visible{outline:3px solid rgba(94,102,247,.35);outline-offset:2px}

/* ── Ô nhập ── */
input,select,textarea{font-family:var(--f-body);font-size:14px;background:#fff;border:1px solid var(--n-300);border-radius:var(--r-md);padding:7px 11px;color:var(--chu);max-width:100%}
input::placeholder,textarea::placeholder{color:var(--n-500)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(94,102,247,.15)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
textarea{width:100%;min-height:84px;resize:vertical}
select{padding-right:26px}
label{font-size:13px}
form.loc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
form.in{display:inline;margin:0}
form.in select,form.in input{padding:4px 9px;font-size:12.5px;border-radius:var(--r-sm)}

/* ── Nội dung ── */
main{width:100%;max-width:1440px;margin:0 auto;padding:24px 28px 72px;flex:1}
main>h2:first-child,.dau-trang h2{margin-bottom:4px}
main>h2:first-child+p.muted,main>h2:first-child+.muted{margin:0 0 18px;max-width:900px}
.dau-trang{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.dau-trang p{margin:0}
.the{background:var(--be-mat);border:1px solid var(--vien);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sh-sm)}
.the>h3:first-child,.the>h2:first-child{margin-top:0}
.the h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.muted{color:var(--chu-2);font-size:13px}
.trong{text-align:center;padding:36px 16px;color:var(--chu-2);background:#fff;border:1px dashed var(--n-300);border-radius:var(--r-lg)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
dt{color:var(--chu-2);font-size:12.5px;font-weight:600;padding-top:1px}
dd{margin:0}
details>summary{cursor:pointer}

/* ── Bảng ── */
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:700;color:var(--chu-2);text-align:left;padding:9px 12px;border-bottom:1px solid var(--vien);background:var(--nen);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--n-100);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr:hover>td{background:#fafcfd}
.the table th:first-child{border-top-left-radius:var(--r-sm)}
.the table th:last-child{border-top-right-radius:var(--r-sm)}

/* ── Nhãn / huy hiệu ── */
.b{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:var(--n-100);color:var(--chu-2);margin:1px;white-space:nowrap;line-height:1.6}
.b.nong{background:#ffe3e1;color:#a4262c}
.b.am{background:#fff3c4;color:#7a5800}
.b.nguoi{background:var(--blue-50);color:var(--blue-800)}
.b.bang{background:var(--n-100);color:var(--chu-2)}
h3 .b{font-weight:700}

/* ── Tab (mọi khu dùng chung) ── */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--vien);margin:0 0 18px}
.tabs .tab,.tabs>a{background:transparent;color:var(--chu-2);border:0;border-radius:0;padding:10px 14px;font-weight:700;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs .tab:hover,.tabs>a:hover{color:var(--chu);background:transparent;text-decoration:none}
.tabs .tab.on,.tabs>a.on{color:var(--blue-800);border-bottom-color:var(--blue)}
.tab-nd[hidden]{display:none}

/* ── Dòng thời gian ── */
.tl div{border-left:3px solid var(--mint);padding:8px 12px;margin:8px 0;background:var(--nen);border-radius:0 var(--r-md) var(--r-md) 0}
.tl .muted{font-family:var(--f-mono);font-size:11.5px}

/* ── Pipeline ── */
.bang-pl{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding-bottom:12px}
.cot{flex:0 0 264px;background:#eef2f6;border:1px solid var(--vien);border-radius:var(--r-lg);padding:10px}
.cot>b{font-size:14px;display:block;padding:2px 4px 6px}
.the-deal{background:#fff;border:1px solid var(--vien);border-left:4px solid var(--blue-300);border-radius:var(--r-md);padding:10px 12px;margin:8px 0;box-shadow:var(--sh-sm);font-size:13px}
.the-deal:hover{box-shadow:var(--sh-md)}
.the-deal.im{border-left-color:var(--loi);background:var(--loi-50)}
.the-deal select{width:100%;margin-top:6px}

/* ── Cảnh báo ── */
.canh-do{border-left:4px solid var(--loi)!important;background:var(--loi-50)}
.chu-do{color:var(--loi)}
.chu-ok{color:var(--ok)}

/* ── Trợ lý AI (khối Nhờ AI) ── */
.ai-khoi{border-left:4px solid var(--blue-400)}
.ai-khoi h3{color:var(--blue-800)}
.ai-nhap{border:1px solid var(--vien)}

/* ── Tìm kiếm chung ── */
.tim-lon{display:flex;gap:8px}
.tim-lon input{flex:1;font-size:16px;padding:10px 14px}
.dong-tim{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 6px;border-bottom:1px solid var(--n-100);color:var(--chu);text-decoration:none;border-radius:var(--r-sm)}
.dong-tim:last-child{border-bottom:0}
.dong-tim:hover{background:var(--nen);text-decoration:none}

/* ── Trang đăng nhập ── */
body.dn{min-height:100vh;background:var(--grad-mesh);display:flex;align-items:center;justify-content:center}
.dn main{width:100%;padding:16px;max-width:none}
.dn-card{max-width:400px;margin:auto;background:#fff;border-radius:var(--r-xl);padding:32px 30px;box-shadow:var(--sh-lg)}
.dn-card img{height:34px;display:block;margin-bottom:16px}
.dn-card .chip{display:inline-block;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.7px;background:var(--blue-50);color:var(--blue-800);border-radius:var(--r-pill);padding:3px 12px;margin-bottom:10px}
.dn-card input{width:100%}
.dn-card button{width:100%;padding:12px;font-size:16px;font-weight:700}
.dn-card label{display:block;font-size:13px;font-weight:700;color:var(--chu);margin:12px 0 5px}

/* ── Danh bạ (danh sách khách) ── */
main.rong{max-width:1600px}
.db-khung{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.db-ben{background:#fff;border:1px solid var(--vien);border-radius:var(--r-lg);padding:12px 8px;position:sticky;top:calc(var(--top-cao) + 16px)}
.db-ben h4{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--chu-2);font-weight:700;margin:12px 8px 6px}
.db-ben h4:first-child{margin-top:2px}
.db-ben ul{list-style:none;margin:0;padding:0}
.db-ben li{display:flex;align-items:center;justify-content:space-between;border-radius:var(--r-sm)}
.db-ben li a{flex:1;color:var(--chu);text-decoration:none;font-weight:600;font-size:13.5px;padding:6px 8px;display:flex;justify-content:space-between;gap:8px}
.db-ben li:hover{background:var(--nen)}
.db-ben li.on{background:var(--blue-50)}
.db-ben li.on a{color:var(--blue-800)}
.db-ben .dem{font-family:var(--f-mono);font-size:11.5px;color:var(--chu-2);font-weight:500}
.db-ben .x{padding:0 7px;background:transparent;color:var(--chu-2);border:0}
.db-dau{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.db-dau h2{margin:0}
.loc-ba{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.loc-ba input[type=search]{min-width:260px;flex:1}
.loc-nc{background:#fff;border:1px solid var(--vien);border-radius:var(--r-md);padding:4px 12px;width:100%;order:9}
.loc-nc summary{font-weight:700;font-size:13.5px;padding:6px 0;color:var(--blue-800)}
.hang-loc{display:flex;gap:8px;margin:6px 0;flex-wrap:wrap}
.hang-loc select,.hang-loc input{font-size:13px;padding:6px 10px}
.hang-loc input{flex:1;min-width:140px}
.luu-sl{margin:6px 0}
.bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-md);padding:8px 12px;margin:8px 0}
.bang-ds{background:#fff;border:1px solid var(--vien);border-radius:var(--r-lg);overflow-x:auto}
.ds-kh th{position:sticky;top:0}
.ds-kh th a{color:inherit;text-decoration:none}
.ds-kh td{white-space:nowrap}
.ds-kh td:nth-child(2){min-width:220px}
.ten-kh{display:flex;align-items:center;gap:10px;color:var(--chu);text-decoration:none;font-weight:700;white-space:nowrap}
.ten-kh:hover{color:var(--blue-800);text-decoration:none}
.ten-kh .muted{font-weight:400}
.av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--blue-50);color:var(--blue-800);font-weight:800;font-size:12.5px;flex:0 0 32px}
.av.lon{width:64px;height:64px;font-size:22px;margin:0 auto 8px}

/* ── Hồ sơ khách 3 cột (trái: thông tin + hành động · giữa: hoạt động · phải: liên quan) ── */
.kh-khung{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:16px;align-items:start}
.kh-giua .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.kh-giua .tabs .tab{white-space:nowrap;padding:10px 12px}
.kh-trai,.kh-phai{position:sticky;top:calc(var(--top-cao) + 16px);max-height:calc(100vh - var(--top-cao) - 32px);overflow-y:auto;padding-right:2px}
.kh-trai h2{text-align:center;margin:4px 0 10px;font-size:20px;font-family:var(--f-body)}
.kh-the{text-align:center}
.kh-trai .the,.kh-phai .the{padding:14px 16px}
.kh-trai h4,.kh-phai h4{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--chu-2);font-weight:700;margin:0 0 8px}
.kh-phai .the h3{font-size:14px}
.tt{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--n-100);font-size:13.5px;text-align:left}
.tt>span:first-child{color:var(--chu-2)}
.tt:last-child{border-bottom:0}
.tt>span:last-child{text-align:right;word-break:break-word;font-weight:600}
.kh-trai label{display:block;font-size:12.5px;font-weight:700;color:var(--chu);margin:8px 0 3px;text-align:left}
.kh-trai label input,.kh-trai label select{width:100%}
.sua-tt{margin-top:10px;text-align:left}
.sua-tt summary{display:inline-block}
.x{padding:0 5px;background:transparent;color:var(--chu-2);border:0;box-shadow:none;font-size:14px}
.x:hover{background:var(--loi-50);color:var(--loi)}
.ghi-chu{background:#fff8d6;border-radius:var(--r-md);padding:8px 12px;margin:8px 0}
.tin{border-radius:var(--r-lg);padding:7px 12px;margin:6px 0;max-width:88%}
.tin.vao{background:var(--n-100)}
.tin.ra{background:var(--blue-50);margin-left:auto}

/* ── Màn hẹp ── */
@media(max-width:1280px){.kh-khung{grid-template-columns:280px minmax(0,1fr)}.kh-phai{grid-column:1/-1;position:static;max-height:none}}
@media(max-width:1024px){
  .sb{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sh-lg)}
  .mo-menu:checked~.sb{transform:none}
  .mo-menu:checked~.sb-mo{display:block;position:fixed;inset:0;background:rgba(15,22,48,.45);z-index:35}
  .vung{margin-left:0}
  .nut-menu{display:inline-block}
  .tim-chung kbd{display:none}
}
@media(max-width:900px){
  .db-khung,.kh-khung{grid-template-columns:1fr}
  .kh-trai,.kh-phai{position:static;max-height:none}
  .db-ben{position:static;display:flex;overflow-x:auto;gap:8px;padding:8px}
  .db-ben h4{display:none}
  .db-ben ul{display:flex;gap:4px}
  .db-ben li a{white-space:nowrap}
  .db-ben li.muted{display:none}
}
@media(max-width:760px){
  .top-in{gap:8px;padding:0 12px}
  .ng-ten,.ng-dung .b{display:none}
  .an-dt{display:none}
  td,th{padding:8px 8px;font-size:13px}
  main{padding:16px 14px 64px}
  h2{font-size:21px}
  .the{padding:14px}
  .cot{flex-basis:230px}
  dl{grid-template-columns:1fr;gap:0}
  dt{margin-top:8px}
  details.them>summary.nut{padding:7px 12px}
}