/* Winki Cockpit — giao diện. Tách từ cockpit gốc để dễ chỉnh sửa. */
:root{--navy:#102a43;--navy2:#1f3a5f;--accent:#f97316;--bg:#f5f7fb;--card:#fff;--line:#e4e9f0;--muted:#6b7a90;--green:#0e9f6e;--green-bg:#e6f6ef;--ink:#16202c;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;font-size:14px;line-height:1.45}
header.appbar{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:12px 20px}
.appbar .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.appbar h1{font-size:16px;margin:0;font-weight:800}
.appbar .sub{font-size:11.5px;opacity:.85;margin-top:2px}
.viewtabs{display:flex;gap:6px;flex-wrap:wrap}
.viewtabs button{border:0;border-radius:8px;padding:8px 15px;font-weight:700;font-size:13px;cursor:pointer;background:rgba(255,255,255,.15);color:#fff;font-family:inherit}
.viewtabs button.on{background:#fff;color:var(--navy)}
.demoflag{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:8px;padding:6px 12px;font-size:12px;text-align:center;max-width:1180px;margin:10px auto 0}
.wrap{padding:16px;max-width:1180px;margin:0 auto}
.layout{display:grid;grid-template-columns:1fr 388px;gap:16px;align-items:start}
@media(max-width:920px){.layout{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(16,42,67,.05)}
.catalog{padding:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=text],.filters select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff}
.filters input[type=text]{flex:1;min-width:170px}
.chk{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;cursor:pointer}
.count{color:var(--muted);font-size:12.5px;margin-left:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.pcard:hover{border-color:#cdd7e4;box-shadow:0 4px 12px rgba(16,42,67,.07)}
.pcard.added{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pimg{width:100%;height:140px;background:#f0f3f8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain}
.pimg .ph{color:#9fb0c4;font-weight:800;font-size:30px}
.pbody{padding:10px 11px;display:flex;flex-direction:column;gap:6px;flex:1}
.pname{font-weight:600;font-size:13px;line-height:1.35;min-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{background:#eef2f8;border-radius:6px;padding:1px 7px;font-size:11px;color:#42546b}
.stock{font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px}
.stock.ok{background:var(--green-bg);color:var(--green)} .stock.no{background:#eef1f5;color:#8593a5}
.price{font-weight:800;color:var(--navy);font-size:15px;margin-top:auto}
.price small{font-weight:500;color:var(--muted);font-size:11px}
.padd{margin-top:6px}
.btn{border:0;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.btn:active{transform:translateY(1px)}
.btn-add{background:var(--accent);color:#fff;width:100%}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--navy)}
.btn-pos{background:var(--navy);color:#fff}
.btn-ghost{background:#eef2f8;color:var(--navy)}
.stepper{display:flex;align-items:center;gap:6px;justify-content:center}
.stepper button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:17px;cursor:pointer;color:var(--navy);font-weight:700}
.stepper input{width:48px;text-align:center;padding:6px 4px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.empty{color:var(--muted);text-align:center;padding:24px 6px;font-size:13px}
#msg,#msg2{font-size:12.5px;padding:9px 11px;border-radius:8px;display:none;margin-top:10px}
#msg.show,#msg2.show{display:block}
#msg.ok,#msg2.ok{background:var(--green-bg);color:var(--green)}
#msg.info,#msg2.info{background:#eef4fb;color:var(--navy)}

/* ===== Bar tóm tắt ở tab Chọn SP ===== */
.worksumbar{position:sticky;bottom:0;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -2px 10px rgba(16,42,67,.06);flex-wrap:wrap}
.worksumbar #worksum{font-size:13px}

/* ===== Khối khách hàng + bên bán ===== */
.custpanel{padding:14px;margin-bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:760px){.custpanel{grid-template-columns:1fr}}
.cblock{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fbfcfe}
.cblock.seller{background:#f3f6fb}
.cblock-hd{font-weight:800;color:var(--navy);font-size:12.5px;margin-bottom:9px}
.sellerline{font-size:12px;color:#2c3e52;line-height:1.5;margin-bottom:10px}
.sellerline .smut{color:var(--muted);font-size:11.5px}
.lookup{display:flex;gap:6px}
.lookup input{flex:1;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.lookup button{white-space:nowrap}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cgrid .fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.cgrid .fld.full{grid-column:1/-1}
.cgrid label{font-size:11px;color:var(--muted);font-weight:600}
.cgrid input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;width:100%;font-family:inherit}

/* ===== Editor (Soạn báo giá) ===== */
.editor{padding:14px}
.etoolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qaddwrap{position:relative;flex:1;min-width:200px}
#qadd{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.qaddres{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,42,67,.14);max-height:280px;overflow:auto}
.qhit{padding:8px 11px;cursor:pointer;border-bottom:1px solid #f0f3f8}
.qhit:last-child{border-bottom:0}
.qhit:hover{background:#eef4fb}
.qhit b{display:block;font-weight:600;font-size:13px}
.qhit span{font-size:11.5px;color:var(--muted)}
.inshint{margin-top:8px;background:#eef4fb;color:var(--navy);border:1px solid #cfe0f5;border-radius:8px;padding:7px 11px;font-size:12.5px}
.colpanel{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fbfcfe}
.cphint{font-size:12px;color:var(--muted);margin-bottom:7px}
.cpgrid{display:flex;flex-wrap:wrap;gap:8px 18px}
.cpgrid label,.cpgroup label{font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer}
.cpgroup{border-top:1px solid var(--line);margin-top:9px;padding-top:9px}
.muted{color:var(--muted);font-weight:400}
.sechd{font-weight:700;color:var(--navy);font-size:13.5px;margin:16px 0 8px}
.qtblwrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.qtbl{width:100%;border-collapse:collapse;min-width:640px;font-size:12.5px}
.qtbl th{background:#f3f6fb;color:#42546b;font-weight:700;text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px}
.qtbl td{padding:6px 9px;border-bottom:1px solid #eef1f5;vertical-align:top}
.qtbl td.r,.qtbl th.r{text-align:right}
.qtbl td.c,.qtbl th.c{text-align:center}
.qtbl input{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit}
.qtbl input.r{text-align:right}
.qtbl input.mini{width:58px}
.gbadge{display:inline-block;font-size:10.5px;font-weight:700;background:var(--green-bg);color:var(--green);padding:1px 7px;border-radius:6px;margin-left:4px}
.giftline{margin-top:3px;font-size:11px;color:var(--green)}
.giftline label{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.qthumb{width:46px;height:46px;border-radius:8px;background:#f0f3f8;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9fb0c4;font-weight:800;margin:0 auto}
.qthumb img{width:100%;height:100%;object-fit:contain}
.qtbl td.ctrl,.qtbl th.ctrl{width:66px;text-align:right}
.ctrlrow{display:flex;align-items:center;justify-content:flex-end;gap:3px}
.grip{cursor:grab;color:#9fb0c4;font-size:15px;user-select:none}
.kebab{border:0;background:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0 3px}
.kebab.on{color:var(--navy);background:#eef2f8;border-radius:6px}
.menurow td{background:#f7f9fc;padding:8px 10px!important;border-bottom:1px solid #eef1f5}
.menurow .rmenu{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.menurow .rmenu button{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:12.5px;padding:7px 13px;color:var(--navy);font-family:inherit;font-weight:600}
.menurow .rmenu button:hover{background:#eef4fb}
.menurow .rmenu button.del{color:#d64545;border-color:#f3c2c2}
.menurow .rmenu button.del:hover{background:#fdecec}
.insrow td{padding:0!important;border:0!important}
.insrow div{height:16px;display:flex;align-items:center;justify-content:center;color:#9fb0c4;font-size:11px;cursor:pointer;border-bottom:1px dashed #dbe3ee}
.insrow div:hover{background:#eef4fb;color:var(--navy)}
.grouprow td{background:#eef2f8;font-weight:700;color:var(--navy)}
.grouphint{font-size:11px;color:var(--muted);padding:6px 9px}
.adjbox{margin-bottom:8px}
.adjrow{display:flex;gap:8px;align-items:center;margin:6px 0;flex-wrap:wrap}
.adjrow select{padding:7px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit}
.adjrow .lbl{flex:1;min-width:120px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}
.adjrow .val{width:120px;text-align:right;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}
.adjrow .mode{width:60px}
.adjrow .amt{width:130px;text-align:right;color:var(--muted);font-size:12.5px}
.adjrow .del{border:0;background:none;color:#d64545;cursor:pointer;font-size:14px}
.adjbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.adjbtns .btn{padding:7px 11px}
.totalswrap{display:flex;justify-content:flex-end;margin-top:10px}
#totals{width:340px;max-width:100%}
#totals .trow{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px}
#totals .trow.gift{color:var(--green)}
#totals .trow.sep{border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
#totals .trow.grand{font-size:17px;font-weight:800;color:var(--navy);border-top:2px solid var(--line);margin-top:5px;padding-top:8px}
#totals select{padding:4px 6px;border:1px solid var(--line);border-radius:6px;font-size:12px}
.actions-wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-top:12px}
.actions-wide .btn{width:100%}
.note{font-size:11.5px;color:var(--muted);margin-top:10px}

/* ===== Hồ sơ ===== */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions .full{grid-column:1/-1}
.actions .btn{width:100%}
.docslayout{display:block;max-width:940px;margin:0 auto}
.docpanel{padding:16px;position:static}
.docprevhd{font-weight:700;color:var(--navy);font-size:13px;margin:16px 0 8px}
.doctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.doctabs button{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;cursor:pointer;background:#fff;color:var(--navy);font-weight:700;font-family:inherit}
.doctabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.docform label{display:block;font-size:11.5px;color:var(--muted);margin:9px 0 3px;font-weight:600}
.docform input,.docform textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
.docform textarea{min-height:54px;resize:vertical}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheetwrap{background:#eef1f5;border-radius:12px;padding:18px;overflow:auto;max-height:80vh}
.sheet{background:#fff;max-width:820px;margin:0 auto;padding:30px 34px;box-shadow:0 2px 12px rgba(16,42,67,.12);border-radius:4px}
.doc{font-size:13px;color:#000}
.doc .qh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--navy);padding-bottom:10px}
.doc .shop{font-size:17px;font-weight:800;color:var(--navy)}
.doc .natl{text-align:center;font-weight:700;font-size:12.5px;line-height:1.4}
.doc .dtitle{text-align:center;font-size:22px;font-weight:800;letter-spacing:1px;margin:14px 0 2px;color:var(--navy)}
.doc .dno{text-align:center;color:#444;margin-bottom:12px;font-size:12.5px}
.doc p{margin:7px 0}
.doc .art{font-weight:700;margin-top:10px}
.doc table{width:100%;border-collapse:collapse;margin-top:8px}
.doc th,.doc td{border:1px solid #888;padding:6px 8px;font-size:12px;vertical-align:middle}
.doc th{background:#eef2f8;text-align:center}
.doc td.r{text-align:right}.doc td.c{text-align:center}
.doc .pthumb{width:42px;height:42px;object-fit:contain}
.doc .ttl{display:flex;justify-content:flex-end;margin-top:8px}
.doc .ttl table{width:auto;min-width:320px}.doc .ttl td{border:0;padding:3px 8px}
.doc .grand td{font-weight:800;font-size:14px;color:var(--navy);border-top:1px solid #888}
.doc .sign{display:flex;justify-content:space-around;margin-top:30px;text-align:center}
.doc .sign div{width:45%}.doc .sign .role{font-weight:700}
.doc .foot{margin-top:16px;font-size:11px;color:#555;font-style:italic}
/* ===== Nội dung pháp lý thật (HĐ / Phụ lục / BBBG / báo giá) ===== */
.doc .qhleft{display:flex;align-items:flex-start;gap:12px}
.doc .qlogo{max-height:54px;max-width:130px;object-fit:contain}
.doc.contract{line-height:1.55;text-align:justify}
.doc .cancu{font-style:italic;margin:8px 0}
.doc .cancu p{margin:2px 0}
.doc .art-sub{font-weight:700;margin-top:8px;font-style:italic}
.doc .clauselist{margin:6px 0;padding-left:20px}
.doc .clauselist li{margin:4px 0}
.doc table.wtbl td{font-size:11.5px}
.doc .policywrap{display:flex;gap:18px;margin-top:6px}
.doc .policywrap .polcol{flex:1;min-width:0}
.doc .pol-lbl{font-weight:700;color:var(--navy);margin-bottom:2px}
.doc .policywrap .clauselist{font-size:11.5px}
.doc .parties2{display:flex;gap:24px}
.doc .parties2>div{flex:1;min-width:0}
@media(max-width:680px){ .doc .policywrap,.doc .parties2{flex-direction:column;gap:8px} }
#printArea{display:none}
@media print{ body{background:#fff} .appbar,.demoflag,.wrap{display:none!important} #printArea{display:block} .sheet{box-shadow:none}
  .doc .art,.doc .art-sub,.doc table,.doc .clauselist li,.doc .sign,.doc .bankbox,.doc .policywrap{page-break-inside:avoid} }

/* ===== v6: khu quà tặng + subtotal + quick-add 2 nút ===== */
.sechd.giftsec{color:var(--green)}
.giftrow{background:var(--green-bg)}
.subrow td{font-weight:800;color:var(--navy);background:#f7f9fc;border-top:2px solid var(--line)}
.subrow.gift td{color:var(--green)}
.qhit{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qhinfo{min-width:0}
.qhbtns{display:flex;gap:6px;flex:0 0 auto}
.qhbtns button{border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:11.5px;padding:5px 9px;color:var(--navy);font-family:inherit;white-space:nowrap}
.qhbtns button:hover{background:#eef4fb}
.doc .subt td{font-weight:800;background:#f7f9fc}

/* ===== Nút thêm quà tặng + ảnh thu nhỏ quick-add ===== */
.sechd.giftsec{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.giftaddbtn{margin-left:auto;padding:6px 12px;font-size:12.5px;white-space:nowrap}
.qhthumb{width:40px;height:40px;border-radius:8px;background:#f0f3f8;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;color:#9fb0c4;font-weight:800}
.qhthumb img{width:100%;height:100%;object-fit:contain}

/* ===== Báo giá đã lưu ===== */
.tabbadge{font-size:11px;opacity:.8;font-weight:700}
.savedpanel{padding:14px}
.savedbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.savedbar input{flex:1;min-width:200px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff}
.savedwrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.savedtbl{width:100%;border-collapse:collapse;min-width:680px;font-size:13px}
.savedtbl th{background:#f3f6fb;color:#42546b;font-weight:700;text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px}
.savedtbl td{padding:9px 11px;border-bottom:1px solid #eef1f5;vertical-align:middle}
.savedtbl tbody tr:last-child td{border-bottom:0}
.savedtbl tbody tr:hover td{background:#fafbfd}
.savedtbl td.r,.savedtbl th.r{text-align:right}
.savedtbl td.c,.savedtbl th.c{text-align:center}
.savedtbl .smut{color:var(--muted);font-size:11.5px;margin-top:2px}
.gpill{display:inline-block;background:var(--green-bg);color:var(--green);font-size:11px;font-weight:700;padding:0 6px;border-radius:6px;margin-left:3px}
.sact{white-space:nowrap}
.sbtn{padding:6px 11px;font-size:12px;margin-left:4px}
#savedMsg{font-size:12.5px;padding:9px 11px;border-radius:8px;display:none;margin-top:10px}
#savedMsg.show{display:block}
#savedMsg.ok{background:var(--green-bg);color:var(--green)}
#savedMsg.info{background:#eef4fb;color:var(--navy)}

/* ===== Tra khách (msg dưới SĐT) + ghi chú sale ===== */
.cmsg{display:none;font-size:12px;padding:7px 10px;border-radius:8px;margin-top:8px}
.cmsg.show{display:block}
.cmsg.ok{background:var(--green-bg);color:var(--green)}
.cmsg.info{background:#eef4fb;color:var(--navy)}
.fldnote{font-size:11px;color:var(--muted);margin-top:8px}

/* ===== Tiến độ thanh toán (mục D) ===== */
.payrow .pct{width:64px}
.payrow .pctsign{color:var(--muted);font-size:12.5px;margin:0 4px 0 -2px}
.payhint{font-size:11.5px;color:var(--muted);margin-top:5px}
.payhint.warn{color:#9a3412;font-weight:600}

/* ===== Bản giấy: mục A/B/C/D + khối ngân hàng ===== */
.doc .dsec{font-weight:800;color:var(--navy);font-size:13px;margin:14px 0 4px;border-left:4px solid var(--navy);padding-left:8px}
.doc .dsec.gift{color:var(--green);border-left-color:var(--green)}
.doc .dsec small{font-weight:500;color:#777;font-size:11px}
.doc table.tc{margin-top:2px}
.doc .bankbox{border:2px solid var(--navy);border-radius:8px;padding:11px 14px;margin:14px 0;background:#f7f9fc}
.doc .bankhd{font-weight:800;color:var(--navy);font-size:13px;margin-bottom:7px;letter-spacing:.5px}
.doc .bankrow{display:flex;gap:8px;font-size:13px;padding:2px 0}
.doc .bankrow span{color:#555;min-width:110px}
.doc .bankrow .bankacc{font-size:17px;color:var(--accent);letter-spacing:1px}

/* ===== Nút thêm SP ở đầu mục (A) ===== */
.sechd.rowhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addbtn{margin-left:auto;padding:6px 12px;font-size:12.5px;white-space:nowrap}
#bankSel{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff}

/* ===== Pop-up chọn sản phẩm (#3) ===== */
.modal{position:fixed;inset:0;background:rgba(16,42,67,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:18px}
.modalbox{background:#fff;border-radius:14px;width:min(940px,96vw);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(16,42,67,.3);overflow:hidden}
.modalhd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);font-size:15px}
.modalx{border:0;background:#eef2f8;color:var(--navy);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:700}
.modalbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfcfe}
.modalbar input[type=text],.modalbar select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:#fff;font-family:inherit}
.modalbar input[type=text]{flex:1;min-width:180px}
.pickergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;padding:14px 16px;overflow:auto}
.pkcard{border:1px solid var(--line);border-radius:11px;padding:9px;display:flex;flex-direction:column;gap:6px;background:#fff}
.pkcard.added{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* === Danh mục 2 cột (Chọn SP + pop-up) === */
.cat2{display:grid;grid-template-columns:212px 1fr;gap:14px;align-items:start}
@media(max-width:760px){.cat2{grid-template-columns:1fr}}
.catside{border:1px solid var(--line);border-radius:11px;padding:6px;background:#fff;align-self:start;position:sticky;top:10px}
.catside-hd{font-size:11px;color:var(--muted);letter-spacing:.04em;padding:7px 9px 5px;font-weight:700}
.catmain{min-width:0}
.catcrumb{font-size:13px;color:var(--muted);margin:0 2px 10px}
.catcrumb b{color:var(--navy);font-weight:800}
.ctrow{display:flex;align-items:center;gap:6px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13.5px}
.ctrow:hover{background:#f1f5fb}
.ctrow.on{background:var(--navy);color:#fff}
.ctrow .ctnm{flex:1}
.ctrow .ctcnt{font-size:12px;color:var(--muted)}
.ctrow.on .ctcnt{color:#cfe0ff}
.ctsub{display:flex;align-items:center;gap:6px;padding:6px 9px 6px 26px;border-radius:8px;cursor:pointer;font-size:12.5px;color:#475569}
.ctsub:hover{background:#f1f5fb}
.ctsub.on{background:#e7eefb;color:var(--navy);font-weight:700}
.ctsub .ctnm{flex:1}
.ctsub .ctcnt{font-size:12px;color:var(--muted)}
/* pop-up compact (đồng bộ kiểu danh mục, nhỏ hơn) */
.modalbox-cat{width:min(860px,96vw)}
.modalbody2col{display:grid;grid-template-columns:152px 1fr;flex:1;min-height:0;overflow:hidden}
.catside-sm{border:0;border-right:1px solid var(--line);border-radius:0;padding:7px;overflow:auto;position:static}
.catside-sm .catside-hd{padding:5px 7px 4px}
.catside-sm .ctrow{padding:6px 7px;font-size:12.5px}
.catside-sm .ctsub{padding:5px 7px 5px 18px;font-size:12px}
.modalbody2col .pickergrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;padding:11px}
.modalbody2col .pkcard{padding:7px;gap:4px;border-radius:9px}
.pkimg{height:96px;background:#f0f3f8;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9fb0c4;font-weight:800;font-size:24px}
.pkimg img{width:100%;height:100%;object-fit:contain}
.pkname{font-size:12px;font-weight:600;line-height:1.3;min-height:31px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pkmeta{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pkprice{font-weight:800;color:var(--navy);font-size:13.5px;margin-top:auto}
.pkprice small{font-weight:500;color:var(--muted);font-size:11px}
.pkadd{width:100%;padding:7px}
.modalft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}

/* ===== Trang Thiết lập doanh nghiệp (#6) ===== */
.setuppanel{padding:18px;max-width:880px;margin:0 auto}
.setuphd{font-weight:800;color:var(--navy);font-size:17px}
.setupsub{font-size:12.5px;color:var(--muted);margin:4px 0 14px}
.setupsec{font-weight:800;color:var(--navy);font-size:13px;margin:16px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:680px){.sgrid{grid-template-columns:1fr}}
.sfld{display:flex;flex-direction:column;gap:3px}
.sfld label{font-size:11px;color:var(--muted);font-weight:600}
.sfld input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
.srow{display:flex;gap:8px;align-items:center;margin:7px 0;flex-wrap:wrap}
.srow input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
.srow .slbl{flex:0 0 240px;max-width:240px}
.srow .sval{flex:1;min-width:160px}
.srow .sbname{flex:1;min-width:180px}
.srow .sbacc{flex:0 0 160px}
.srow .sbown{flex:1;min-width:180px}
.srow .del{border:0;background:none;color:#d64545;cursor:pointer;font-size:15px;padding:4px 8px}
.setupacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;max-width:420px}
.setupacts .btn{width:100%}

/* ===== Form Hồ sơ động (HĐ/PL/BBBG) ===== */
.docsub{font-size:11.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.dsec-lbl{font-weight:800;color:var(--navy);font-size:12.5px;margin:15px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dsec-lbl:first-child{margin-top:0}
.dfld{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.flabel{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.smut{color:var(--muted);font-size:11.5px}
.auto-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;background:#eef4fb;color:#185fa5;padding:1px 7px;border-radius:6px;white-space:nowrap}
.man-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;background:#fff7ed;color:#9a3412;padding:1px 7px;border-radius:6px;white-space:nowrap}
.readbox{background:#f7f9fc;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;line-height:1.5;margin-bottom:9px}
.readbox.payinfo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.docform .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media(max-width:520px){.docform .g3{grid-template-columns:1fr 1fr}}
.xtoggle{padding:6px 11px;font-size:12px;margin:2px 0 4px}
.xbox{border:1px dashed var(--line);border-radius:9px;padding:10px 11px;margin:4px 0 6px;background:#fbfcfe}
.xbox .srow{margin:6px 0}
.xbox .srow .slbl{flex:0 0 230px;max-width:230px}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-bottom:6px}
@media(max-width:760px){.parties{grid-template-columns:1fr}}
.party{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:#fbfcfe;display:flex;flex-direction:column}
.party-hd{font-weight:800;color:var(--navy);font-size:12.5px;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.party .readbox{background:#fff}
.party .xbox{background:#fff}
.party .dfld{margin-bottom:8px}
.party .dfld:last-of-type{margin-bottom:6px}
.btype{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.btype button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;font-size:12.5px;cursor:pointer;color:var(--navy);font-family:inherit;font-weight:600}
.btype button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.btype button.bsync{margin-left:auto;color:var(--accent);border-color:#f6c9a8}
.btype .pnote{font-size:11px;color:var(--muted)}

/* ===== Pop-up xem bản giấy báo giá ===== */
.papermodal{width:min(1040px,96vw)}
.papermodalbody{overflow:auto;background:#eef1f5;padding:16px;flex:1;display:flex;gap:14px;align-items:flex-start}
.papermodalbody .sheet{max-width:820px;margin:0;flex:1}
.paperopts{flex:0 0 244px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;position:sticky;top:0}
.paperopts .poptshd{font-weight:800;color:var(--navy);font-size:13px;margin-bottom:8px}
.paperopts .popt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.paperopts .popt:first-of-type{border-top:none}
.pswitch{width:38px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;border:none;cursor:pointer;flex:0 0 auto}
.pswitch.on{background:var(--navy)}
.pswitch .pk{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff}
.pswitch.on .pk{left:18px}
.pseg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pseg button{border:none;background:#fff;padding:3px 9px;font-size:11px;cursor:pointer;color:#64748b;font-family:inherit}
.pseg button.on{background:var(--navy);color:#fff}
.poptf{margin-top:9px}
.poptf label{display:block;font-size:11px;color:#64748b;margin-bottom:3px}
.poptf input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px;font-family:inherit}
@media(max-width:820px){.papermodalbody{flex-direction:column}.paperopts{flex:none;width:100%;position:static}}
/* ===== Đăng nhập cloud ===== */
.loginoverlay{position:fixed;inset:0;background:rgba(16,42,67,.55);display:flex;align-items:center;justify-content:center;z-index:9999}
.loginbox{background:#fff;border-radius:16px;padding:28px 30px;width:min(360px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.25);text-align:center}
.loginbox .loginlogo{font-size:20px;font-weight:800;color:var(--navy)}
.loginbox .loginsub{font-size:13px;color:#64748b;margin:4px 0 18px}
.loginbox input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;margin-bottom:12px;font-family:inherit;text-align:center}
.loginbox .btn.full{width:100%;justify-content:center}
.loginmsg{font-size:12.5px;margin-top:10px;min-height:18px;color:#64748b}
.loginmsg.err{color:#c0392b}

/* ===== Màn 🗂️ Quản lý SP (Catalog Admin) ===== */
.btn-sm{padding:6px 10px;font-size:12.5px}
.btn-green{background:var(--green);color:#fff}
.btn-warn{background:#fef3c7;color:#92400e}
.btn-del{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.ctrow.danger .ctnm{color:#dc2626} .ctrow.danger.on .ctnm{color:#fff}
.dim{color:#94a3b8}
.adminbulk{display:none}
.adminbulk.show{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#eef4fb;border:1px solid #cfe0f5;border-radius:10px;padding:8px 12px;margin-bottom:10px}
.adminbulk .selcnt{font-weight:800;color:var(--navy);margin-right:2px}
.admintblwrap{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:70vh}
table.admintbl{border-collapse:collapse;width:100%;font-size:13px}
.admintbl th{position:sticky;top:0;background:#f3f6fb;color:#42546b;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.admintbl td{padding:7px 10px;border-bottom:1px solid #f0f3f8;vertical-align:middle}
.admintbl tr:hover td{background:#fafcff}
.admintbl tr.sel td{background:#eff6ff}
.admintbl th.rcol,.admintbl td.rcol{text-align:right}
.admintbl th.ckcol,.admintbl td.ckcol{width:34px;text-align:center}
.admthumb{width:40px;height:40px;border-radius:8px;background:#eef3f8;display:flex;align-items:center;justify-content:center;color:#9fb0c4;font-weight:800;font-size:15px;overflow:hidden}
.admthumb img{width:100%;height:100%;object-fit:contain}
.admthumb.big{width:64px;height:64px;font-size:24px}
.skucell{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#42546b;white-space:nowrap}
.namecell{font-weight:600;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.gtag{background:#eef2f8;border-radius:6px;padding:1px 8px;font-size:11.5px;color:#42546b;white-space:nowrap}
.gtag.khac{background:#fef3c7;color:#92400e} .gtag.xoa{background:#fef2f2;color:#dc2626}
.admintbl .money{font-weight:700;color:var(--navy);white-space:nowrap}
.admintbl .money.strike{font-weight:500;color:#94a3b8;text-decoration:line-through;font-size:12px}
.kdbadge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.kdbadge.on{background:var(--green-bg);color:var(--green)} .kdbadge.off{background:#f1f5f9;color:#64748b}
/* form trong modal Admin */
.adminmodal{width:540px;max-width:96vw}
.adminmodal.wide{width:680px}
.adminform{padding:16px 18px}
.affld{margin-bottom:12px}
.affld label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px}
.affld input,.affld select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit}
.afrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.afprev{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.afprev .afsku{font-weight:800;font-size:14px}
.abgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;max-height:240px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.abi{text-align:center} .abi .admthumb{width:100%;height:56px} .abi .absku{font-size:10px;color:#64748b;margin-top:2px;font-family:monospace;overflow:hidden;text-overflow:ellipsis}

/* ===== Màn 📦 Tồn kho ===== */
.whbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#eef4fb;border:1px solid #cfe0f5;border-radius:10px;padding:8px 12px;margin-bottom:10px}
.whbar-lbl{font-weight:800;color:var(--navy);font-size:12.5px}
.whchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:600}
.whchip .whx{cursor:pointer;color:var(--muted);font-weight:700}
.whchip .whx:hover{color:var(--navy)}
#stockView{padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:700;background:#fff;font-family:inherit}
.admintbl .whcol{background:#fcfdff}
.stkqty{width:62px;text-align:right;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-family:inherit;transition:background .25s}
.stkqty:focus{outline:2px solid #bcdcff;border-color:#7fb3ec}
.admintbl .tongcell{font-weight:800;color:var(--navy);text-align:right}

/* ===== Màn 🏭 Nhà cung cấp (CRM 360°) — Bước 3A ===== */
#viewSupplier .catside-hd{display:flex;align-items:center;gap:6px}
.asidettl{flex:1}
.asidetoggle{border:0;background:#eef2f8;color:var(--navy);border-radius:7px;width:24px;height:24px;min-width:24px;font-size:11px;cursor:pointer;font-weight:800;font-family:inherit}
.asidetoggle:hover{background:#e2e8f0}
.addncc{border:0;border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800;cursor:pointer;background:var(--green);color:#fff;font-family:inherit;white-space:nowrap}
#supplierCat2{transition:grid-template-columns .15s}
#supplierCat2.aside-collapsed{grid-template-columns:44px 1fr}
#supplierCat2.aside-collapsed .asidettl,#supplierCat2.aside-collapsed .addncc,#supplierCat2.aside-collapsed #supplierList{display:none}
#supplierCat2.aside-collapsed .catside-hd{justify-content:center;padding:7px 0}
.ctrow.special{border-top:1px dashed var(--line);margin-top:5px;padding-top:11px;color:#9a3412}
.ctrow.special.on{color:#fff}
/* hub header + sub-tabs */
.hubhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hubnm{font-size:16px;font-weight:800;color:var(--navy)}
.hubbadge{font-size:11.5px;background:#e7f0fb;color:var(--navy);border-radius:20px;padding:2px 10px;font-weight:700}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:12px}
.subtab{border:0;background:none;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit}
.subtab.on{color:var(--navy);border-bottom-color:var(--accent)}
.subtab:hover{color:var(--navy)}
/* form hồ sơ NCC */
.supform fieldset{border:1px solid var(--line);border-radius:11px;padding:8px 14px 12px;margin:0 0 12px}
.supform legend{font-size:12px;font-weight:800;color:var(--navy);padding:0 7px}
.supform .frow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:760px){.supform .frow{grid-template-columns:1fr 1fr}}
.supform .affld{margin-bottom:0}
.supform .affld.full{grid-column:1/-1}
.supform textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;resize:vertical;min-height:46px}
.supattach{border:1px dashed var(--line);border-radius:9px;padding:10px;color:#94a3b8;font-size:12px;text-align:center}
.supacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px}
.supmsg{font-size:12px;color:var(--muted);margin-left:auto}
/* bảng SP của NCC */
.supbulk{display:none}
.supbulk.show{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:8px 12px;margin-bottom:10px}
.supbulk .selcnt{font-weight:800;color:#9a3412}
.supbulk select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-weight:700;font-family:inherit;background:#fff}
.ncctag{background:#e7f0fb;border-radius:6px;padding:1px 8px;font-size:11.5px;color:var(--navy);font-weight:700;white-space:nowrap}
.ncctag.none{background:#fef3c7;color:#92400e}
.supph{border:2px dashed var(--line);border-radius:12px;padding:34px 20px;text-align:center;color:var(--muted)}
.supph-ic{font-size:30px;margin-bottom:8px}
.supph b{color:var(--navy)}

/* ===== Bước 3B — MUA HÀNG (tab Đơn mua) ===== */
.supseclbl{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.05em;padding:10px 6px 3px;border-top:1px dashed var(--line);margin-top:6px}
.polock{border:2px dashed #fbbf24;background:#fffbeb;border-radius:14px;padding:34px 20px;text-align:center;color:#92400e}
.polock-ic{font-size:38px;margin-bottom:8px}
.polock b{color:var(--navy);font-size:15px}
.poloading{padding:30px;text-align:center;color:var(--muted)}
.potoolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.potoolbar select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;font-weight:700;font-family:inherit;background:#fff}
.pocount{color:var(--muted);font-size:12.5px;margin-left:auto}
.potblwrap{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:60vh}
table.potbl{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
.potbl th{position:sticky;top:0;background:#f3f6fb;color:#42546b;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);z-index:1}
.potbl td{padding:8px 10px;border-bottom:1px solid #f0f3f8;vertical-align:middle}
.potbl tr:hover td{background:#fafcff}
.potbl td.num,.potbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.pono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--navy)}
.podebt{color:#b91c1c;font-weight:800}
.pozero{color:var(--green);font-weight:700}
.post{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800}
.post.draft{background:#eef2f8;color:#42546b}.post.ordered{background:#dbeafe;color:#1e40af}.post.received{background:var(--green-bg);color:#0e7a52}.post.cancelled{background:#fee2e2;color:#b91c1c}
.poact{display:flex;gap:5px;flex-wrap:wrap}
.poempty{text-align:center;color:#94a3b8;padding:26px}
.pofoot{display:flex;justify-content:flex-end;gap:10px;align-items:baseline;padding:12px 6px 2px;font-size:14px}
.pofoot b{font-size:17px}
/* Modal PO */
.modalbox.pomodal{max-width:780px;width:100%}
.pofrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:620px){.pofrow{grid-template-columns:1fr 1fr}}
.pofld{display:flex;flex-direction:column;gap:3px}
.pofld.full{grid-column:1/-1}
.pofld label{font-size:11px;color:var(--muted);font-weight:700}
.pofld input,.pofld select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff}
.pofld input:focus,.pofld select:focus{outline:2px solid #bcdcff;border-color:#7fb3ec}
.pogrouphd{font-size:11.5px;font-weight:800;color:var(--navy);letter-spacing:.02em;margin:14px 0 6px;padding-top:10px;border-top:1px dashed var(--line)}
.polineswrap{overflow:auto;border:1px solid var(--line);border-radius:10px}
table.polines{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px}
.polines th{background:#f3f6fb;color:#42546b;font-size:10.5px;text-transform:uppercase;text-align:left;padding:6px 7px;border-bottom:1px solid var(--line)}
.polines td{padding:4px 6px;border-bottom:1px solid #f0f3f8}
.polines td.num,.polines th.num{text-align:right;font-variant-numeric:tabular-nums}
.polines input{width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit}
.polines input.num{text-align:right}
.polndel{border:0;background:#fee2e2;color:#dc2626;border-radius:6px;width:24px;height:24px;cursor:pointer;font-weight:800;font-family:inherit}
.posum{background:#f8fafc;border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-top:12px}
.posrow{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}
.posrow.tot{font-size:15px;font-weight:800;color:var(--navy);border-top:1px solid var(--line);margin-top:5px;padding-top:7px}
.posrow.land{color:#b45309;font-weight:700}
.paylist{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.payrow{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid #f0f3f8;font-size:12.5px}
.payrow:last-child{border-bottom:0}
.paykind{border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700}
.paykind.deposit{background:#fef3c7;color:#92400e}.paykind.balance{background:#dbeafe;color:#1e40af}.paykind.other{background:#eef2f8;color:#42546b}

/* ===== Bước 3C — Tài khoản + Phân quyền (RBAC) ===== */
/* User-chip ở thanh tiêu đề */
.userchip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border-radius:20px;padding:4px 6px 4px 12px;font-size:12px;color:#fff}
.userchip b{font-weight:800}
.userchip .urole{background:var(--accent);border-radius:20px;padding:1px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.chipbtn{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.chipbtn:hover{background:rgba(255,255,255,.3)}
/* Login: 2 ô + bootstrap */
.loginbox label{display:block;text-align:left;font-size:11px;color:var(--muted);font-weight:700;margin:8px 2px 3px}
.loginbox input{text-align:left}
.switchlink{font-size:11.5px;color:#2563eb;cursor:pointer;margin-top:12px;display:inline-block}
.switchlink:hover{text-decoration:underline}
/* Màn Người dùng */
.ustat{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800}
.ustat.on{background:var(--green-bg);color:#0e7a52}.ustat.off{background:#fee2e2;color:#b91c1c}
.usersbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.usersbar h2{font-size:14.5px;margin:0;color:var(--navy)}
.uacts{display:flex;gap:5px;flex-wrap:wrap}
/* Panel Vai trò & Phân quyền */
.rolewrap{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start}
@media(max-width:780px){.rolewrap{grid-template-columns:1fr}}
.rolelist{border:1px solid var(--line);border-radius:11px;padding:7px;background:#fbfcfe}
.rolerow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer}
.rolerow:hover{background:#eef2f8}.rolerow.on{background:var(--navy);color:#fff}
.rolerow .rb{background:#eef2f8;border-radius:20px;padding:1px 8px;font-size:10.5px;color:#42546b;font-weight:700}
.rolerow.on .rb{background:rgba(255,255,255,.22);color:#fff}
.sysbadge{font-size:10px;color:var(--accent);font-weight:800;margin-left:5px}
.rolerow.on .sysbadge{color:#fdba74}
.permbox{border:1px solid var(--line);border-radius:11px;padding:14px}
.permhd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.permhd b{font-size:14px;color:var(--navy)}
.permgrp{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.04em;margin:12px 0 6px;text-transform:uppercase}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
@media(max-width:620px){.caps{grid-template-columns:1fr}}
.cap{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.cap input{width:16px;height:16px;flex:none}
.cap.sensitive{border-color:#fed7aa;background:#fff7ed}
.cap small{color:var(--muted);font-size:11px}
.cap.disabled{opacity:.55;cursor:not-allowed}