/* ============================================================
   Kieu chu de viet len anh. Tep font nam ngay trong may chu
   (public/fonts) nen mang cong ty co chan Google Fonts van chay.
   Ba kieu chon khac han nhau cho de phan biet:
     Be Vietnam Pro - chu thuong, gon gang
     Dancing Script - chu viet tay nghieng
     Bungee         - chu khoi to, dam
   ============================================================ */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/be-vietnam-pro-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/be-vietnam-pro-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/dancing-script-vietnamese-700-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/dancing-script-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/dancing-script-latin-700-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/bungee-vietnamese-400-normal.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/bungee-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/bungee-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --brand:#0068ff;
  --brand-dark:#0055d4;
  --brand-soft:#e5f0ff;
  --bg:#f4f6fa;
  --panel:#ffffff;
  --line:#e4e8ef;
  --text:#1b2434;
  --muted:#7b8798;
  --bubble-me:#cfe6ff;
  --bubble-you:#ffffff;
  --ok:#12a150;
  --warn:#e58a00;
  --danger:#e03131;
  --radius:12px;
  --shadow:0 2px 10px rgba(20,32,60,.08);
  /* Chieu cao man hinh that su - tren dien thoai 100vh tinh ca thanh dia chi
     nen khung soan tin bi day khuat. dvh la chieu cao thuc te dang nhin thay. */
  --app-h:100vh;
}
@supports (height:100dvh){ :root{ --app-h:100dvh } }

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;
  overscroll-behavior:none;
}
.hidden{display:none !important}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--text)}

/* ---------- Nút ---------- */
.btn-primary{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:600}
.btn-primary:hover{background:var(--brand-dark)}
.btn-primary.sm{padding:7px 12px;font-size:13px}
.btn-ghost{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:var(--text)}
.btn-ghost:hover{background:#f2f5fa}
.btn-ghost.sm{padding:7px 12px;font-size:13px}
.btn-danger{background:var(--danger);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600}
.btn-block{width:100%}
.icon-btn{background:transparent;border:0;border-radius:8px;width:36px;height:36px;font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn:hover{background:#eef2f8;color:var(--text)}
.icon-btn.dang-mo{background:var(--brand-soft);color:var(--brand)}

/* ---------- Đăng nhập ---------- */
.login-screen{min-height:var(--app-h);height:var(--app-h);display:flex;align-items:center;
  justify-content:center;overflow-y:auto;padding:16px;
  background:linear-gradient(140deg,#0068ff,#00b2ff)}
.login-card{background:#fff;padding:36px 32px;border-radius:16px;width:340px;box-shadow:0 18px 50px rgba(0,0,0,.2);
  display:flex;flex-direction:column;gap:12px;text-align:center}
.login-logo{font-size:40px}
.login-card h1{margin:0;font-size:22px}
.login-sub{margin:0 0 6px;color:var(--muted);font-size:13px}
.login-card input{padding:11px 13px;border:1px solid var(--line);border-radius:9px;outline:none}
.login-card input:focus{border-color:var(--brand)}
.login-error{color:var(--danger);font-size:13px;min-height:18px}

/* ---------- Bố cục ----------
   Ghi chu: moi khung flex long nhau deu can min-height:0, neu khong
   phan tu con co thanh cuon se tran ra ngoai thay vi cuon ben trong. */
.app{display:flex;height:var(--app-h);overflow:hidden}
.sidebar{width:300px;flex:0 0 300px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* ---------- Cột trái ---------- */
/* Chi ap dung cho khoi tai khoan o cot trai. Truoc day viet la .me nen
   an nham vao ca tin nhan cua chinh minh (.msg.me), lam moi tin bi thua
   dem 14px va co mot vach ke ngang o duoi.                              */
.sidebar>.me{display:flex;align-items:center;gap:10px;padding:14px;
  border-bottom:1px solid var(--line);position:relative}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 40px;font-size:15px;
  overflow:hidden;background-size:cover;background-position:center;user-select:none}
.avatar.sm{width:32px;height:32px;flex:0 0 32px;font-size:13px}
.avatar.xs{width:18px;height:18px;flex:0 0 18px;font-size:9px;font-weight:700}
.avatar.lg{width:96px;height:96px;flex:0 0 96px;font-size:34px}
.avatar.has-img{color:transparent}
/* Anh dai dien nam de len chu cai dau; anh loi thi tu go bo, chu cai hien lai */
.avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar{position:relative}

/* ---------- Dan anh / chup man hinh ---------- */
.paste-preview{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#eef3fb;
  border-top:1px solid var(--line)}
.paste-strip{flex:1;display:flex;gap:8px;overflow-x:auto;padding:2px}
.paste-thumb{position:relative;flex:0 0 auto}
.paste-thumb img{height:64px;width:auto;max-width:120px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:#fff;display:block}
.paste-thumb button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;
  border:0;background:var(--danger);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.paste-actions{display:flex;gap:6px;flex-shrink:0}
/* v191: tep dinh kem cho gui trong o nhap tin (the ten tep + ✕) */
.paste-tep{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;max-width:260px;height:48px;padding:0 30px 0 10px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px}
.paste-tep-ico{font-size:22px;flex-shrink:0}.paste-tep-ten{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.paste-tep-co{font-size:11.5px;color:var(--muted);flex-shrink:0}
.paste-tep button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--danger);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.cn-chedo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.cn-chedo:has(input:checked){border-color:var(--brand);background:#eef3fb}.cn-chedo input{margin-top:3px}
.drop-hint{position:absolute;inset:0;background:rgba(0,104,255,.10);border:3px dashed var(--brand);
  border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;
  color:var(--brand);font-size:17px;z-index:40;pointer-events:none;margin:12px}
/* ---------- Quan ly ma hang: tich chon va sua hang loat ---------- */
.prod-bulk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  padding:9px 12px;background:var(--brand-soft);border-radius:9px}
.prod-bulk>span{font-weight:600;color:var(--brand)}
.canh-bao{background:#fff4f4;border:1px solid #f3c9c9;color:#a12b2b;border-radius:9px;
  padding:10px 12px;margin-bottom:12px;font-size:13.5px;line-height:1.5}
/* ---------- Thanh loc don ngay tren khung chat phong Don hang ---------- */
.ord-chip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:8px 14px;background:#fff;border-bottom:1px solid var(--line)}
.och-nhan{font-size:12.5px;color:#8a94a6;margin-right:2px}
.och{border:1px solid var(--line);background:#f6f8fb;color:#43506b;border-radius:999px;
  padding:5px 13px;font-size:12.5px;font-weight:600;cursor:pointer;line-height:1.3}
.och:hover{background:#eef2f8}
.och.on{background:var(--brand);border-color:var(--brand);color:#fff}
.och-dem{font-size:12.5px;color:#8a94a6;margin-left:auto}
#messages .loc-an{display:none!important}
/* Dien thoai (v164): thanh loc don CUON NGANG mot dong thay vi xuong 3 dong,
   chip cao 36px cho de bam                                                   */
@media(max-width:820px){.ord-chip{padding:6px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ord-chip::-webkit-scrollbar{display:none}
  .och{padding:8px 12px;font-size:13px;min-height:36px;white-space:nowrap;flex-shrink:0}
  .och-nhan{flex-shrink:0}
  .och-dem{width:auto;margin-left:auto;flex-shrink:0;white-space:nowrap;padding-left:6px}}
table.grid th.c-tick,table.grid td.c-tick{width:34px;text-align:center;padding-left:4px;padding-right:4px}
table.grid .c-tick input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.sl-hang{display:grid;grid-template-columns:230px 1fr;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid #f1f4f8}
.sl-hang:last-of-type{border-bottom:0}
.sl-hang>label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;cursor:pointer}
.sl-hang>label input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.sl-hang input,.sl-hang select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:#f6f8fb;width:100%}
.sl-hang>div{width:100%}
.sl-hang input:disabled,.sl-hang select:disabled{opacity:.5;background:#eef1f6}
@media (max-width:700px){ .sl-hang{grid-template-columns:1fr;gap:6px} }

/* ---------- Bang gia net ---------- */
.gia-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.gia-dem{font-size:12.5px;color:var(--muted);margin-bottom:2px}
#giaQ{flex:1;min-width:180px}
.gia-the{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:var(--shadow)}
.gia-the.chua-co{opacity:.72}
.gia-tren{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.gia-ma{font-size:15px;color:var(--brand)}
.gia-ten{font-size:13.5px;color:var(--muted)}
.gia-nhom{font-size:11.5px;font-weight:600;color:var(--brand);background:var(--brand-soft);
  padding:2px 8px;border-radius:20px}
.gia-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}
.gia-o{background:#f6f8fb;border-radius:9px;padding:9px 12px;display:flex;flex-direction:column;gap:2px}
.gia-o span{font-size:11.5px;color:var(--muted)}
.gia-o b{font-size:18px}
.gia-o.chinh{background:var(--brand-soft)}
.gia-o.chinh b{color:var(--brand)}
.gia-duoi{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:9px;flex-wrap:wrap}
.gia-ghichu{font-size:12.5px;color:var(--warn);font-weight:600}
.gia-phai{display:flex;align-items:center;gap:9px}
.gia-ngay{font-size:11.5px;color:var(--muted)}
.gia-trong{font-size:13px;color:var(--muted);font-style:italic}
/* Nhan gia net goi y ngay duoi o don gia trong form don hang */
.net-goi{display:block;width:100%;margin-top:4px;background:var(--brand-soft);color:var(--brand);
  border:0;border-radius:6px;padding:3px 4px;font-size:11.5px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:right;cursor:pointer}
.net-goi:hover{background:#d3e6ff}

/* ---------- Tien ich & huong dan ---------- */
.ti-ds{max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ti-nhom{margin-bottom:16px}
.ti-nhom h4{margin:0 0 8px;font-size:14px;color:var(--brand)}
.ti-hang{padding:9px 12px;border-radius:9px;background:#f6f8fb;margin-bottom:6px}
.ti-ten{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ti-ten kbd{font-family:inherit;font-size:12px;font-weight:700;background:#fff;color:var(--brand);
  border:1px solid #c9dcf7;border-bottom-width:2px;border-radius:6px;padding:2px 8px;white-space:nowrap}
.ti-mo{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.ti-trong{padding:22px;text-align:center;color:var(--muted)}
/* Dien thoai: de khung ngoai cua hop thoai lo cuon, danh sach khong gioi han
   chieu cao thi noi dung moi phu het man hinh.                            */
@media (max-width:820px){ .ti-ds{max-height:none;overflow:visible} }

/* Khung chat chia doi: ben trai la khung tro chuyen, ben phai la bang
   thong tin (anh, tep, duong dan).                                     */
#viewChat{flex-direction:row}
.chat-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}

.info-panel{width:300px;flex:0 0 300px;background:var(--panel);
  border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 10px 12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.ip-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:12px}
.ip-sec{background:#fff;border:1px solid var(--line);border-radius:10px;
  margin-bottom:12px;overflow:hidden}
.ip-tieude{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;padding:11px 13px;font-weight:700;font-size:14px;text-align:left}
.ip-tieude i{font-style:normal;color:var(--muted);transition:transform .15s}
.ip-sec.dong .ip-tieude i{transform:rotate(-90deg)}
.ip-sec.dong .ip-noidung{display:none}
.ip-noidung{padding:0 11px 11px}
.ip-anh{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.ip-o{position:relative;aspect-ratio:1/1;border-radius:7px;overflow:hidden;
  background:#eef2f8;cursor:pointer;display:block}
.ip-o img{width:100%;height:100%;object-fit:cover;display:block}
.ip-all{width:100%;margin-top:10px;background:#f1f4f9;border:0;border-radius:8px;
  padding:11px;font-weight:600;color:var(--text)}
.ip-all:hover{background:#e6ebf3}
.ip-hang{display:flex;align-items:center;gap:9px;padding:8px 0;cursor:pointer;
  border-bottom:1px solid #f1f4f8}
.ip-hang:last-of-type{border-bottom:0}
.ip-bieu{width:34px;height:34px;border-radius:7px;flex:0 0 34px;display:flex;
  align-items:center;justify-content:center;font-size:17px;background:#eef2f8}
.ip-bieu.xls{background:#e6f6ec;color:#12a150}
.ip-bieu.doc{background:#e7effc;color:#2563eb}
.ip-bieu.pdf{background:#fdecec;color:var(--danger)}
.ip-bieu img{width:34px;height:34px;object-fit:cover;border-radius:7px}
/* display:block de chu dai bi cat gon, khong de len cot ngay thang */
.ip-tt{flex:1;min-width:0;display:block}
.ip-ten{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-phu{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-ngay{font-size:11.5px;color:var(--muted);flex-shrink:0}
.ip-trong{font-size:13px;color:var(--muted);padding:10px 0;text-align:center}
.ip-tim{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  text-align:left;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;margin-bottom:10px}
.ip-tim:active{background:#eef2f8}
.ip-xoa{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px;color:var(--danger);font-weight:600;text-align:left}
.ip-xoa:hover{background:#fdecec}

@media (max-width:900px){
  /* Man hinh hep: bang thong tin phu kin khung chat */
  .info-panel{position:absolute;inset:0;width:auto;flex:none;z-index:60;border-left:0}
}

/* ---------- Trinh chinh anh chup man hinh ---------- */
/* ============================================================
   TRINH CHINH ANH
   Thanh tren: dong · cat & xoay · ve · them chu · lui · lam lai
   Giua: anh, o chu keo tha duoc, thanh truot doc chinh co
   Thanh duoi: tai ve may · gui thang vao khung chat
   ============================================================ */
.anh-sua{position:fixed;inset:0;z-index:200;background:#000;color:#fff;
  display:flex;flex-direction:column;user-select:none;
  touch-action:none;overscroll-behavior:none}

.as-tren{flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.as-cong-cu{flex:1;display:flex;align-items:center;justify-content:center;gap:10px}
.as-nut{width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:#fff;
  border-radius:50%;cursor:pointer;font-size:19px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center}
.as-nut:hover{background:rgba(255,255,255,.14)}
.as-nut.on{background:var(--brand)}
.as-nut[disabled]{opacity:.35;cursor:default}
.as-nut[disabled]:hover{background:transparent}
/* Nut Xong: chi hien khi trong cong cu cat da co thay doi cho ap dung */
.as-xong{flex-shrink:0;border:0;background:#2f9e44;color:#fff;border-radius:20px;
  padding:9px 16px;font-size:14px;font-weight:700;line-height:1;cursor:pointer;margin-left:2px}
.as-xong:hover{background:#268c3b}
.as-xong.hidden{display:none}

.as-giua{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:10px;padding:0 12px;position:relative}
.as-khung{position:relative;line-height:0;flex-shrink:0}
.as-img{display:block;-webkit-user-drag:none}
.as-ve{position:absolute;inset:0;pointer-events:none}
/* Cat gon trong long anh: phan chu tran ra ngoai luc luu cung khong co,
   de tran ra thi no con de len thanh cong cu ben duoi, bam khong duoc. */
.as-chu-lop{position:absolute;inset:0;overflow:hidden}
/* Dang cat: net ve va chu da nam san trong ban xem truoc, an hai lop nay di */
.anh-sua.dang-cat .as-ve,
.anh-sua.dang-cat .as-chu-lop{display:none}

/* Thanh truot doc chinh co chu, co net ve */
.as-truot{width:34px;height:min(62vh,320px);flex-shrink:0;accent-color:var(--brand);
  writing-mode:vertical-lr;direction:rtl;-webkit-appearance:slider-vertical;
  touch-action:none;cursor:pointer}
.as-truot.hidden{display:none}

/* Vung cat */
.anh-sua .as-vung{position:absolute;border:1px solid var(--brand);
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move}
.anh-sua .as-vung.hidden{display:none}
.as-nam{position:absolute;width:11px;height:11px;background:var(--brand);border-radius:50%}
.as-nam.tl{left:-6px;top:-6px;cursor:nwse-resize}
.as-nam.tm{left:calc(50% - 6px);top:-6px;cursor:ns-resize}
.as-nam.tr{right:-6px;top:-6px;cursor:nesw-resize}
.as-nam.ml{left:-6px;top:calc(50% - 6px);cursor:ew-resize}
.as-nam.mr{right:-6px;top:calc(50% - 6px);cursor:ew-resize}
.as-nam.bl{left:-6px;bottom:-6px;cursor:nesw-resize}
.as-nam.bm{left:calc(50% - 6px);bottom:-6px;cursor:ns-resize}
.as-nam.br{right:-6px;bottom:-6px;cursor:nwse-resize}

/* O chu tren anh: keo de dat cho, cham mot cai de sua */
.as-chu{position:absolute;line-height:1.25;cursor:move;max-width:92%;
  padding:0;border-radius:8px;touch-action:none}
.as-chu.co-nen{background:#fff}
.as-chu .as-chu-noi{padding:.28em;outline:0;white-space:pre-wrap;word-break:break-word;
  min-width:1ch}
.as-chu:not(.co-nen) .as-chu-noi{text-shadow:0 0 3px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.as-chu.dang-sua{box-shadow:0 0 0 2px var(--brand);cursor:text}
.as-chu.dang-sua .as-chu-noi{cursor:text;user-select:text;-webkit-user-select:text}
.as-chu-xoa{position:absolute;top:1px;right:1px;width:22px;height:22px;border:0;
  border-radius:50%;background:rgba(15,22,38,.75);color:#fff;font-size:11px;line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center}
.as-chu:hover .as-chu-xoa{display:flex}

/* Bang tuy chon cua tung cong cu */
.as-bang{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;padding:10px}
.as-bang.hidden{display:none}
.as-mau{display:flex;gap:7px;align-items:center}
.as-cham{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  cursor:pointer;padding:0}
.as-cham.on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.as-kieu{display:flex;gap:6px}
.as-phu{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  border-radius:18px;padding:7px 13px;font-size:13.5px;cursor:pointer;white-space:nowrap}
.as-phu:hover{background:rgba(255,255,255,.18)}
.as-phu.on{background:var(--brand);border-color:var(--brand)}
.as-phu.chinh{background:#2f9e44;border-color:#2f9e44;font-weight:700}

.as-duoi{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.as-tai{border:0;background:transparent;color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;padding:4px 8px}
.as-tai-ico{font-size:21px;line-height:1}
.as-tai:hover{opacity:.75}
.as-mach{flex:1;text-align:center;font-size:12.5px;color:rgba(255,255,255,.7)}
.as-gui{width:56px;height:56px;flex-shrink:0;border:0;border-radius:50%;
  background:#fff;color:var(--brand);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.4)}
.as-gui:hover{background:#e9f1ff}

@media (max-width: 820px) {
  .as-truot{height:min(48vh,260px);width:30px}
  .as-giua{padding:0 6px;gap:4px}
  .as-phu{padding:6px 11px;font-size:12.5px}
}

/* ---------- Thanh tien do khi dang gui tep ---------- */
.tai-len-bar{padding:8px 14px 0;display:flex;flex-direction:column;gap:8px}
.tai-len-bar.hidden{display:none}
.tl-dong{background:#eef4ff;border:1px solid #c9dcff;border-radius:10px;padding:8px 11px}
.tl-dong.xong{background:#e8f7ef;border-color:#a8dcc0}
.tl-dong.loi{background:#ffecec;border-color:#f3bcbc}
.tl-tren{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tl-ten{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-so{font-size:13px;font-weight:800;color:var(--brand);flex:0 0 auto}
.tl-dong.xong .tl-so{color:#16794c}
.tl-vach{height:6px;background:#d7e5ff;border-radius:4px;overflow:hidden;margin:6px 0 4px}
.tl-vach i{display:block;height:100%;background:var(--brand);border-radius:4px;
  transition:width .18s linear}
.tl-dong.xong .tl-vach{background:#c9ebd8}
.tl-dong.xong .tl-vach i{background:#2f9e44}
.tl-phu{font-size:11.5px;color:var(--muted)}
.tl-dong.loi .tl-phu{color:var(--danger);font-weight:600}

/* ---------- Video xem ngay trong khung chat ---------- */
.bubble.video{padding:0;overflow:hidden;max-width:340px}
.msg-video{display:block;width:100%;max-width:340px;max-height:420px;
  background:#000;border-radius:12px 12px 0 0}
.video-duoi{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 11px;font-size:12px}
.video-ten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.video-tai{flex:0 0 auto;color:var(--brand);text-decoration:none;font-weight:700}
.video-tai:hover{text-decoration:underline}
.msg.me .video-tai{color:#0b4da2}
.bubble.video .anh-chu{padding:0 11px 9px}
@media (max-width: 820px){
  .bubble.video,.msg-video{max-width:min(78vw,320px)}
}

/* ---------- Bao gia gui khach hang ---------- */
.bubble.bg-the{border-left:4px solid #2f9e44;max-width:270px;white-space:normal;
  padding:9px 12px;line-height:1.35}
.bg-dau{font-size:13.5px;color:#16794c;font-weight:600}
.bg-kh{font-weight:700;font-size:13px;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bg-tt{font-size:12px;color:var(--muted);margin-top:2px}
.bg-nut{margin-top:7px;border:1px solid #9ad3ab;background:#fff;color:#16794c;
  border-radius:14px;padding:4px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.bg-nut:hover{background:#e6f7ec}
/* ---------- KPI ---------- */
.kpi-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.kpi-o{background:#f6f8fb;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi-o.dat{background:#e8f7ef;border-color:#9ad3ab}
.kpi-nhan{font-size:12px;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi-so{font-size:15px;margin:4px 0}
.kpi-so b{font-size:18px;color:var(--brand)}
.kpi-tam{font-size:10.5px;background:#fff1c2;color:#8a6500;border-radius:8px;padding:1px 6px;font-weight:700}
.kpi-chot{font-size:10.5px;background:#e3f6e8;color:#127a3f;border-radius:8px;padding:1px 6px;font-weight:700}
.kpi-bar{height:8px;background:#e5e9f0;border-radius:4px;overflow:hidden;margin:4px 0 2px}
.kpi-bar-in{height:100%;background:var(--brand);border-radius:4px}
.kpi-bar-in.xanh{background:#2f9e44}.kpi-bar-in.vang{background:#f59f00}.kpi-bar-in.do{background:#e03131}
.kpi-bc{background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi-km{display:grid;grid-template-columns:1.2fr 1.6fr 1fr auto;gap:6px;margin-bottom:6px}
.kpi-km input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;min-width:0}
.kpi-km .del{border:0;background:#fdecec;color:var(--danger);border-radius:8px;width:34px;cursor:pointer}
@media (max-width:700px){ .kpi-km{grid-template-columns:1fr 1fr;} .kpi-km input[data-km="diaChi"]{grid-column:1/3} }
.kpi-in{width:130px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;text-align:right;font:inherit}
.kpi-in.nho{width:64px}
.kpi-qt td{vertical-align:top}

/* Chip chon nhanh tinh hinh giai quyet cong no */
.cn-nhanh{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cn-chip{border:1px solid var(--line);background:#fff;border-radius:16px;padding:6px 12px;font-size:13px;
  font-weight:600;color:var(--text);cursor:pointer;line-height:1.2}
.cn-chip:hover{background:#f2f5fa;border-color:var(--brand)}
.cn-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* Nut gan nhan vien tren bang cong no (ke toan / quan tri) */
.cn-nv{border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 8px;font-size:12.5px;
  cursor:pointer;color:var(--text);white-space:nowrap}
.cn-nv:hover{background:#f2f5fa;border-color:var(--brand)}
.cn-nv.chua{color:#e03131;border-color:#f5b5b5;background:#fff6f6;font-weight:700}

/* ---------- Phieu bao thu trong nhom Cong no tong hop ---------- */
.bubble.pt-the{border-left:4px solid #e0a800;max-width:300px;white-space:normal;
  padding:9px 12px;line-height:1.35;background:#fffdf3}
.bubble.pt-the.xong{border-left-color:#2f9e44;background:#f4fbf6}
.bubble.pt-the.tu_choi{border-left-color:#d64545;background:#fff6f6}
.pt-dau{font-size:13px;color:#8a6500;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt-the.xong .pt-dau{color:#16794c}.pt-the.tu_choi .pt-dau{color:#b03030}
.pt-tt{font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;background:#fff1c2;color:#8a6500}
.pt-tt.xong{background:#e3f6e8;color:#127a3f}.pt-tt.tuchoi{background:#fde2e2;color:#b03030}
/* v190: sua / huy / hoan tac phieu bao thu */
.pt-tt.tu_choi{background:#fde2e2;color:#b03030}.pt-tt.huy{background:#eceff3;color:#5b6472}
.bubble.pt-the.huy{border-left-color:#9aa3b2;background:#f4f5f7;opacity:.85}.pt-the.huy .pt-tien{text-decoration:line-through;color:#8a94a6}
.pt-ls{margin-top:6px;border-top:1px dashed var(--line);padding-top:5px;font-size:11.5px;color:var(--muted)}
.pt-ls div{margin-top:3px}.pt-ls span{color:#3d4657}
td.pt-nut{display:table-cell;margin:0}td.pt-nut button{margin:0 2px 2px 0}
.pt-kh{font-weight:700;font-size:13.5px;margin-top:4px}
.pt-ma{font-weight:500;font-size:11.5px;color:var(--muted);margin-left:6px}
.pt-tien{font-size:19px;font-weight:800;color:#1a1a1a;margin-top:2px}
.pt-ct,.pt-ghi,.pt-xl{font-size:12px;color:var(--muted);margin-top:2px}
.pt-ghi{color:#333}
.pt-xl{margin-top:6px;border-top:1px dashed var(--line);padding-top:5px}
.pt-anh{display:block;margin-top:6px}
.pt-anh img{max-height:120px;max-width:100%;border-radius:8px;border:1px solid var(--line);display:block}
.pt-nut{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.qt-nut{position:relative}
.qt-dem{position:absolute;top:50%;transform:translateY(-50%);right:10px;min-width:18px;height:18px;border-radius:9px;background:var(--danger);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* Chip loc bao gia tren thanh loc don */
.och.bg.on{background:#2f9e44;border-color:#2f9e44;color:#fff}
/* O tich Bao gia trong form tao don */
.o-gap.o-bg{border-color:#9ad3ab;background:#f2fbf5}
.o-gap.o-bg.on{border-color:#2f9e44;background:#e6f7ec;box-shadow:0 0 0 2px rgba(47,158,68,.18)}
.o-gap.o-bg input{accent-color:#2f9e44}
/* Tich Bao gia thi hai o chi danh cho ke toan mo di cho do roi mat */
.dang-bao-gia #oGapWrap,
.dang-bao-gia #oMoiWrap{opacity:.45}
/* Man xem lai bao gia */
.bg-hd{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 14px;margin-bottom:12px}
.bg-hd>div{display:flex;flex-direction:column;background:#f6f8fb;border-radius:8px;padding:7px 10px}
.bg-hd span{font-size:11.5px;color:var(--muted)}
.bg-hd b{font-size:13.5px}
.bg-bang{width:100%}
.bg-anh-xem{max-height:60vh;overflow:auto;background:#eef1f6;padding:8px;border-radius:10px;
  -webkit-overflow-scrolling:touch}
/* Man hinh bao da tao xong tep PDF */
.bg-tep-xem{display:flex;align-items:center;gap:14px;background:#eef4ef;border:1px solid #c9e2d5;
  border-radius:12px;padding:16px 18px}
.bg-tep-ico{font-size:34px;line-height:1}
.bg-tep-xem b{font-size:14.5px}
.bg-tep-xem span{font-size:12.5px;color:var(--muted)}
.bg-anh-xem img{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 2px 12px rgba(20,32,60,.18)}
a.btn-primary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.bg-thu{max-height:68vh;overflow:auto;background:#eef1f6;padding:10px;border-radius:10px}
.bg-thu canvas{display:block;box-shadow:0 2px 12px rgba(20,32,60,.18)}
.bg-logo-xem{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bg-logo-xem img{max-height:70px;max-width:220px;border:1px solid var(--line);
  border-radius:8px;padding:6px;background:#fff}
#bgCaiDatBox textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  outline:none;font:inherit;background:#fbfcfe;resize:vertical}
#bgCaiDatBox textarea:focus{border-color:var(--brand);background:#fff}

/* ---------- Goi y ma khach hang ---------- */
.suggest-wrap{position:relative}
.suggest-box{position:absolute;left:0;right:0;top:100%;margin-top:2px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:70;
  max-height:260px;overflow-y:auto}
/* Hop goi y noi len tren - khong bi khung cuon cua form cat mat */
.suggest-float{position:fixed;left:auto;right:auto;top:auto;margin:0;z-index:9000;
  border:1px solid #cdd6e4;border-radius:10px;background:#fff;overflow-y:auto;
  box-shadow:0 12px 32px rgba(20,32,60,.22);-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.suggest-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid #f3f5f9}
.suggest-item:last-child{border-bottom:0}
.suggest-item:hover,.suggest-item.on{background:var(--brand-soft)}
.suggest-float .suggest-item{padding:10px 13px;font-size:14px}
.suggest-float .suggest-item.on{box-shadow:inset 3px 0 0 var(--brand)}
.suggest-float .suggest-code{font-size:14.5px}
.suggest-code{font-weight:700;color:var(--brand)}
.suggest-name{font-size:12.5px;color:var(--text)}
.suggest-meta{font-size:11.5px;color:var(--muted)}
.suggest-tag{font-size:11px;color:#b45309;background:#fff4dd;border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}   /* v219 */
.login-brand{font-size:15px;font-weight:700;color:var(--brand);letter-spacing:.5px;margin-top:-6px}
.me-info{flex:1;min-width:0}
.me-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-role{font-size:12px;color:var(--muted)}
.dropdown{position:absolute;top:56px;right:10px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);z-index:40;overflow:hidden;min-width:160px}
.dropdown button{display:block;width:100%;text-align:left;padding:10px 14px;background:#fff;border:0}
.dropdown button:hover{background:#f2f5fa}
.dropdown .menu-nhom{display:flex;align-items:center;gap:6px;font-weight:600}
.dropdown .menu-mui{margin-left:auto;font-size:12px;color:var(--muted);transition:transform .15s}
.dropdown .menu-nhom.mo .menu-mui{transform:rotate(90deg)}
.dropdown .menu-con{background:#f6f8fb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dropdown .menu-con button{padding-left:28px;background:#f6f8fb;font-size:13.5px}
.dropdown .menu-con button:hover{background:#e9eef7}
.dropdown .menu-con.hidden{display:none}

.tabs{display:flex;border-bottom:1px solid var(--line)}
/* Bon tab thi chu phai nho lai mot chut de khong bi xuong dong */
.tab{flex:1;padding:11px 2px;font-size:13px;white-space:nowrap;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--muted);font-weight:600;font-size:13px}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
/* Tab Don hang con don chua nhap lieu: hien so ngay canh chu */
.tab.co-cho{position:relative;color:#b45309;font-weight:800}
.tab.co-cho::after{content:attr(data-dem);margin-left:4px;background:var(--danger);color:#fff;
  border-radius:9px;padding:0 5px;font-size:10.5px;font-weight:800;vertical-align:1px}
/* ---------- Chon muc am luong chuong ---------- */
.am-ds{display:flex;flex-direction:column;gap:7px}
.am-hang{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:#fbfcfe}
.am-hang:hover{background:#f2f5fa}
.am-hang.on{border-color:var(--brand);background:var(--brand-soft)}
.am-hang input{width:17px;height:17px;accent-color:var(--brand)}
.am-ten{font-weight:700;min-width:64px}
.am-thanh{color:var(--brand);letter-spacing:1px;font-size:13px}
.am-nhom{margin-bottom:20px}
.am-nhom h4{margin:0 0 6px;font-size:14px;color:var(--brand)}
.am-nhom:last-of-type{margin-bottom:14px}
/* ---------- Chon ban nhac chuong ---------- */
.nc-ds{display:flex;flex-direction:column;gap:7px}
.nc-hang{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:#fbfcfe}
.nc-hang:hover{background:#f2f5fa}
.nc-hang.on{border-color:var(--brand);background:var(--brand-soft)}
.nc-hang input{width:17px;height:17px;accent-color:var(--brand);flex:0 0 17px}
.nc-chu{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nc-chu b{font-size:13.5px}
.nc-chu span{font-size:11.5px;color:var(--muted)}
.nc-thu{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--brand);font-size:13px;cursor:pointer;line-height:1}
.nc-thu:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.nc-thu:disabled{opacity:.4;cursor:default}
.nc-thu:disabled:hover{background:#fff;color:var(--brand);border-color:var(--line)}
/* Muc nhac chuong rieng khi chua tai tep nao len */
.nc-hang.nc-rieng{border-style:dashed}
.nc-hang.nc-rieng.trong .nc-chu b{color:var(--muted)}
.nc-tai{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
/* ---------- So don hang nhac trong tin nhan ---------- */
/* ---------- Vach bao chat luong cuoc goi ---------- */
.call-state-row{display:flex;align-items:center;gap:8px}
.call-q{display:inline-flex;align-items:flex-end;gap:2px;height:13px;cursor:help}
.call-q i{width:3.5px;background:rgba(255,255,255,.28);border-radius:1px;display:block}
.call-q i:nth-child(1){height:5px}
.call-q i:nth-child(2){height:9px}
.call-q i:nth-child(3){height:13px}
.call-q.m1 i:nth-child(1){background:#ff6b6b}
.call-q.m2 i:nth-child(1),.call-q.m2 i:nth-child(2){background:#ffd43b}
.call-q.m3 i{background:#51cf66}
.ma-don{color:var(--danger);font-weight:800;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.ma-don:hover{background:#ffe9e9;border-radius:4px;padding:0 3px;margin:0 -3px}
/* Tin cua minh co nen xanh nhat nen ma don phai la do dam moi doc duoc.
   Truoc day de mau hong nhat, chim han vao nen, gan nhu khong nhin thay. */
.msg.me .ma-don{color:#a11212}
.msg.me .ma-don:hover{background:#ffe3e3}

.side-search{display:flex;gap:6px;padding:10px 12px;align-items:center}
.side-search input{flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:8px;outline:none;background:#f6f8fb}
.side-search input:focus{border-color:var(--brand);background:#fff}

.room-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 8px 12px}
.room-item{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;align-items:center}
.room-item:hover{background:#f2f5fa}
.room-item.active{background:var(--brand-soft)}
.room-avatar{width:40px;height:40px;border-radius:12px;background:#dbe7f7;color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 40px}
.room-avatar.order{background:#fff0dc;color:#d97706}
/* Nhan rieng: hien anh dai dien nguoi kia kem cham bao online */
.room-avatar.dm{background:none;position:relative;border-radius:50%}
.room-avatar.dm .avatar{width:40px;height:40px;font-size:15px}
.room-avatar.dm .online-dot{position:absolute;right:-1px;bottom:-1px;margin:0;
  width:11px;height:11px;border:2px solid #fff;box-sizing:content-box}
.room-body{flex:1;min-width:0}
.room-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-last{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.room-time{font-size:11px;color:var(--muted)}
.badge{background:var(--danger);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}
/* Nhom con tin chua doc: to den dam ten nhom va noi dung tin de nhin ra ngay.
   Them vach xanh ben trai va cham xanh truoc ten cho khong the nhin nham.  */
.room-item.unread{background:#eef4ff;box-shadow:inset 3px 0 0 var(--brand)}
.room-item.unread:hover{background:#e4edff}
.room-item.unread .room-name{font-weight:800;color:#0b1220}
.room-item.unread .room-name::before{content:'';display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--brand);margin-right:6px;vertical-align:1px}
.room-item.unread .room-last{font-weight:700;color:#0b1220}
.room-item.unread .room-time{font-weight:800;color:var(--brand)}
.room-item.unread .badge{box-shadow:0 0 0 3px rgba(224,49,49,.16)}
/* Phong don hang: hien luon con bao nhieu don ke toan chua nhap lieu */
.don-cho{font-size:11.5px;font-weight:700;color:#b45309;background:#fff4e2;
  border-radius:6px;padding:1px 6px;margin:2px 0 3px;display:inline-block;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.don-cho b{font-weight:800}
.don-xem{margin-left:4px;text-decoration:underline;cursor:pointer;opacity:.85}
.don-xem:hover{opacity:1}
.don-cho.xong{color:#16794c;background:#e8f7ef}
/* Don can gap chua giao: canh bao do, dam hon han cac dong khac */
.don-cho{color:#fff;background:var(--danger)}
.don-cho.thuong{color:#b45309;background:#fff4e2}
.don-cho.xong,.don-cho.thuong{font-weight:700}
/* Nhom con don gap thi da co dong do rieng roi. Khong to dam ten nhom o day,
   de chu dam chi con mang mot y nghia duy nhat: CO TIN NHAN MOI.          */
.room-item.con-don .room-name{color:#0b1220}

/* ---------- Khung chat ---------- */
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.chat-title{font-weight:700;font-size:16px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:12px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nhan rieng: anh dai dien nguoi kia va nut dat ten goi nho canh ten */
.chat-ten-hang{display:flex;align-items:center;gap:7px;min-width:0}
.chat-ava{display:block;flex:0 0 auto;min-width:36px;border:0;background:none;padding:0;cursor:pointer;
  border-radius:50%;line-height:0;position:relative}
.chat-ava .avatar{width:40px;height:40px;font-size:15px}
.chat-ava:hover{box-shadow:0 0 0 3px var(--brand-soft)}
.chat-ava.hidden{display:none}
.chat-sua{flex:0 0 auto;border:0;background:none;padding:3px;cursor:pointer;
  color:var(--muted);border-radius:6px;line-height:0}
.chat-sua:hover{background:#eef2f8;color:var(--brand)}
.chat-sua.hidden{display:none}
/* So thanh vien duoi ten nhom - bam vao mo bang thanh vien */
.cs-tv{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;
  font:inherit;color:var(--muted);cursor:pointer;vertical-align:middle}
.cs-tv svg{display:block;flex:0 0 auto;opacity:.85}
.cs-tv:hover{color:var(--brand);text-decoration:underline}
.header-actions{display:flex;gap:6px;align-items:center}

.messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:18px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.empty-state{margin:auto;text-align:center;color:var(--muted)}
.empty-icon{font-size:44px;margin-bottom:8px}

.day-sep{align-self:center;background:#e3e8f0;color:var(--muted);font-size:12px;
  padding:3px 12px;border-radius:12px;margin:12px 0 6px}

.msg{display:flex;gap:8px;max-width:78%;margin-bottom:10px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
/* May co chuot: chua san mot le trong hai ben tin nhan lam CHO CHO HANG NUT.
   Hang nut nam ben trong tin nhan nen di chuot tu bong bong sang bam nut
   khong bi mat giua chung. Le trong suot, nhin khong thay.
   Dien thoai khong ap dung: khong co chuot, va bong bong can trong ban.  */
@media (hover:hover) and (pointer:fine){
  .msg:not(.me){padding-right:92px}
  .msg.me{padding-left:92px}
}
/* Tin nhan lien tiep cua cung mot nguoi trong cung mot phut thi xep sat nhau:
   chi tin cuoi cua nhom hien gio, cac tin sau khong lap lai ten va anh.   */
.msg.con-tiep{margin-bottom:2px}
.msg.con-tiep .msg-time{display:none}
.msg.noi-tiep .msg-sender{display:none}
.msg.noi-tiep .ava-click{visibility:hidden;height:0}
.msg-body{position:relative}
.msg-sender{font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:600}
.bubble{background:var(--bubble-you);border:1px solid var(--line);border-radius:14px;padding:8px 12px;
  white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px rgba(20,32,60,.04);line-height:1.45}
.msg.me .bubble{background:var(--bubble-me);border-color:#b9daff}
.bubble.deleted{font-style:italic;color:var(--muted);background:#f0f2f6}
.msg-time{font-size:11px;color:var(--muted);margin-top:3px}
.msg.me .msg-time{text-align:right}
.msg-img{max-width:280px;max-height:320px;border-radius:10px;display:block;cursor:zoom-in}
.file-chip{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--text)}
.file-chip .fi{font-size:22px}
.file-name{font-weight:600}
.file-size{font-size:11px;color:var(--muted)}

.quote{border-left:3px solid var(--brand);background:rgba(0,104,255,.07);border-radius:6px;
  padding:5px 9px;margin-bottom:6px;font-size:12.5px;cursor:pointer;user-select:none}
.quote:hover,.quote:focus{background:rgba(0,104,255,.15);outline:none}
.quote:active{background:rgba(0,104,255,.22)}
.quote-name{font-weight:700;color:var(--brand);font-size:12px;
  display:flex;align-items:center;gap:6px}
/* Nhan nho bao khoi trich dan bam duoc de nhay toi tin goc */
.quote-di{font-size:10.5px;font-weight:700;color:#fff;background:var(--brand);
  border-radius:9px;padding:0 6px;opacity:.85}
.quote:hover .quote-di{opacity:1}
.quote-text{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.fwd-tag{font-size:11.5px;color:var(--muted);font-style:italic;margin-bottom:4px}

/* Thong bao tu dong cua ung dung: sinh nhat, nhac viec... */
.msg.he-thong{max-width:100%;width:100%;justify-content:center}
.msg.he-thong .msg-actions{display:none !important}
.ht-the{max-width:560px;width:100%;margin:2px auto;background:linear-gradient(180deg,#fffdf6,#fff);
  border:1px solid #f0dfae;border-left:4px solid #f0b429;border-radius:12px;padding:10px 14px;font-size:14px;
  box-shadow:0 2px 8px rgba(20,32,60,.05)}
.ht-dau{font-weight:800;color:#8a5a00;font-size:14px;margin-bottom:5px}   /* v238: nho di 1 co */
.ht-than{white-space:pre-wrap;word-break:break-word;line-height:1.5;font-size:13.5px}
.ht-gio{font-size:11px;color:var(--muted);margin-top:8px;text-align:right}


.reaction{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:1px 6px;font-size:11.5px;cursor:pointer;user-select:none;white-space:nowrap;
  box-shadow:0 1px 4px rgba(20,32,60,.14)}
.reaction:hover{background:#eef2f8}
.reaction.on{background:var(--brand-soft);border-color:var(--brand);font-weight:700}
/* Nut ✕ o cuoi thanh cam xuc: bo het tuong tac cua chinh minh */
.react-bar .cx-bo,.bd-cx .cx-bo{color:var(--muted);font-size:19px;
  border-left:1px solid var(--line);border-radius:0;margin-left:3px;padding-left:9px}
.react-bar .cx-bo:hover,.bd-cx .cx-bo:hover{color:var(--danger)}


/* Thanh chon cam xuc - gon, nam ngang, khong phai hop lon */
.react-bar{position:fixed;z-index:120;display:inline-flex;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:4px 6px;
  box-shadow:0 8px 24px rgba(20,32,60,.20);white-space:nowrap;width:auto;height:auto}
.react-bar button{border:0;background:transparent;font-size:21px;line-height:1;
  width:34px;height:34px;border-radius:50%;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .12s}
.react-bar button:hover{background:#eef2f8;transform:scale(1.22)}

.order-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;padding:10px 12px;min-width:280px;max-width:520px}
.order-card.open{border-left-color:var(--brand-dark);box-shadow:0 4px 16px rgba(0,104,255,.12)}
.order-card h4{margin:0 0 2px;font-size:14px}
/* The don trong khung chat: mot dong gon, bam Chi tiet moi mo */
.oc-line{display:flex;align-items:center;gap:10px}
.oc-main{flex:1;min-width:0}
.oc-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.oc-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.order-card .oc-sub{font-size:12px;color:var(--muted);margin-bottom:6px}
/* Dien giai cua sales: to mau cam va co nen rieng de ke toan de nhin */
.oc-dg{font-size:13px;font-weight:700;color:#a35a00;background:#fff6e8;
  border-left:3px solid #f0a02a;border-radius:0 7px 7px 0;
  padding:6px 10px;margin-bottom:9px;line-height:1.45;white-space:pre-wrap}
.oc-dg.sua{color:var(--danger);background:#fff1f1;border-left-color:var(--danger)}
.oc-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
.oc-table th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:4px 6px}
.oc-table td{padding:4px 6px;border-bottom:1px solid #f1f4f8}
.oc-table td.num,.oc-table th.num{text-align:right}
.oc-total{display:flex;justify-content:space-between;font-weight:700;padding-top:6px;border-top:2px solid var(--line)}
.oc-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

.status{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:700}
.status.new{background:#fff3e0;color:#c26a00}
.status.entered{background:#e4f7ec;color:var(--ok)}
.status.cancelled{background:#fdeaea;color:var(--danger)}
.status.delivered{background:#e0f0ff;color:#0b5ed7}

/* Nhan don can gap - do noi bat, dung tren the don va dong danh sach */
.ord-gap{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;
  font-weight:800;background:var(--danger);color:#fff;letter-spacing:.2px;white-space:nowrap}
.order-card.don-gap{border-left:4px solid var(--danger);background:#fffafa}
.order-row.don-gap{border-color:#f3b7b7;background:#fffafa}
/* Bao ai da xac nhan giao hang */
.hint.ok{color:#16794c;font-weight:600}

/* O tick Can gap trong form don hang */
.o-gap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:10px;
  background:#f8fafc;user-select:none}
.o-gap input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--danger)}
.o-gap>span:first-of-type{font-weight:700}
.o-gap-mo{font-size:12px;color:var(--muted)}
.o-gap.on{border-color:var(--danger);background:#fff3f3}
.o-gap.on>span:first-of-type{color:var(--danger)}
/* O tick Khach moi va khung thong tin khach di kem */
.o-moi input{accent-color:#0b5ed7}
.o-moi.on{border-color:#0b5ed7;background:#eef5ff}
.o-moi.on>span:first-of-type{color:#0b5ed7}
.kh-moi{border:1px solid #bcd8ff;border-radius:10px;padding:11px 12px;margin:-4px 0 10px;
  background:#f5f9ff}
.kh-moi.hidden{display:none}

/* Nhan "KHACH MOI" tren the don */
.ord-moi{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;
  font-weight:800;background:#0b5ed7;color:#fff;white-space:nowrap}
/* Nhac ma khach chua co trong danh muc */
.ord-canh{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;
  font-weight:700;background:#fff4e2;color:#b45309;white-space:nowrap}
/* Hai the trong bang Doi ma khach */
.dm-tab{display:flex;gap:6px;margin:10px 0 12px}
.dm-tab .on{background:var(--brand);border-color:var(--brand);color:#fff}
#dmChon.hidden,#dmTao.hidden{display:none}

/* Khung thong tin khach hang kem theo don */
.kh-bang{border:1px solid #bcd8ff;background:#f2f8ff;border-radius:10px;
  padding:8px 11px;margin:8px 0;font-size:13px}
.kh-bang>b{color:#0b5ed7}
.kh-bang.sua{border-color:#f3b7b7;background:#fff5f5}
.kh-bang.sua>b{color:var(--danger)}
.kh-dong{font-size:13px;color:var(--muted);margin-top:4px;word-break:break-word}
.kh-bang .kh-dong{color:#334}

/* Anh vua chia se tu ung dung khac, xem truoc trong bang chon nhom */
.cs-anh{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cs-anh img{width:84px;height:84px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line)}

/* Chip loc "Gap" trong khung chat phong Don hang */
.och.gap{border-color:#f3b7b7;color:var(--danger);background:#fff5f5;font-weight:700}
.och.gap.on{background:var(--danger);border-color:var(--danger);color:#fff}
/* Nut loc don gap o tab Don hang */
#btnOrdGap.on{background:var(--danger);border-color:var(--danger);color:#fff}

.typing-bar{min-height:18px;padding:0 18px;font-size:12px;color:var(--muted);font-style:italic}

.reply-bar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#eef3fb;border-top:1px solid var(--line)}
.reply-bar-body{flex:1;min-width:0;border-left:3px solid var(--brand);padding-left:8px}
.reply-bar-label{font-size:12px;color:var(--brand);font-weight:700}
.reply-bar-text{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.composer{display:flex;align-items:flex-end;gap:6px;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line)}
.composer textarea{flex:1;resize:none;max-height:130px;padding:10px 12px;border:1px solid var(--line);
  border-radius:18px;outline:none;line-height:1.4;background:#f6f8fb}
.composer textarea:focus{border-color:var(--brand);background:#fff}
.send-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:16px}
.send-btn:hover{background:var(--brand-dark)}

.emoji-picker{position:absolute;bottom:66px;left:16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);
  gap:2px;z-index:30;max-width:300px}
.emoji-picker button{border:0;background:transparent;font-size:19px;padding:4px;border-radius:6px}
.emoji-picker button:hover{background:#eef2f8}

/* ---------- Đơn hàng ---------- */
.filter-bar{display:flex;gap:8px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.filter-bar input,.filter-bar select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;outline:none;background:#f6f8fb}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--brand);background:#fff}
#ordQ{flex:1;min-width:180px}
.order-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
/* Danh sach don hang - moi don mot dong gon */
.order-row{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.order-row.open{border-color:var(--brand);box-shadow:0 4px 18px rgba(0,104,255,.12)}
.order-row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.order-code{font-weight:700}
.order-cust{font-size:13px;color:var(--muted)}

.ord-line{display:flex;align-items:center;gap:12px}
.ord-main{flex:1;min-width:0}
.ord-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ord-top .order-code{font-size:14.5px}
/* Ma khach hang lui mot co chu cho de nhin */
.ord-kh{font-weight:700;color:var(--brand);font-size:13.5px}
/* Tab Don hang: so don, ma khach va so tien lui mot co chu cho gon */
#orderList .ord-top .order-code{font-size:13.5px}
#orderList .ord-kh{font-size:12px}
#orderList .ord-tien{font-size:14.5px}
.ord-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.ord-tien{font-weight:800;color:var(--brand);font-size:15.5px;white-space:nowrap}
.ord-more{flex-shrink:0;white-space:nowrap}
/* Tab Don hang: nut mo chi tiet chi con mot dau mui ten tron, gon mot goc dong */
#orderList .ord-more{width:30px;height:30px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:transform .15s, color .15s}
#orderList .ord-more:hover{color:var(--brand);border-color:var(--brand)}
#orderList .ord-more.mo{transform:rotate(180deg);color:var(--brand);border-color:var(--brand)}

.ord-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ord-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;margin-bottom:10px}
.ord-info>div{display:flex;flex-direction:column;background:#f6f8fb;border-radius:8px;padding:7px 10px}
.ord-info span{font-size:11.5px;color:var(--muted)}
.ord-info b{font-size:13.5px}
.ord-info .ord-net{color:var(--brand)}
/* Dien giai o tab Don hang: cung mau cam nhu trong khung chat */
.ord-note{font-size:13px;font-weight:700;color:#a35a00;background:#fff6e8;
  border-left:3px solid #f0a02a;border-radius:0 7px 7px 0;
  padding:6px 10px;margin-bottom:9px;line-height:1.45;white-space:pre-wrap}
.ord-note.sua{color:var(--danger);background:#fff1f1;border-left-color:var(--danger)}

/* ---------- Don da sua: to do phan thay doi ---------- */
.order-row.da-sua{border-color:#f3b7b7}
.ord-pick{display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;font-size:13px}
.ord-pick input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.ord-sua{color:var(--danger)}
.ord-nhaplai{color:#127a3f;font-weight:600}
.ht-xong{color:#127a3f;font-weight:700}
.status.sua{background:#fdecec;color:var(--danger);font-weight:700}
.ord-banner{background:#fdecec;border:1px solid #f3b7b7;color:var(--danger);
  border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:10px;line-height:1.45}
.ord-banner b{color:var(--danger)}
.order-card.da-sua{border-left-color:var(--danger)}
.oc-sub.sua{color:var(--danger);font-weight:700}
/* O da doi hoac dong moi them */
.grid td.sua,.oc-table td.sua{color:var(--danger);font-weight:700;background:#fdecec}
.oc-table tr.dong-moi td{background:#fdecec}
.ord-info b.sua,.ord-note.sua{color:var(--danger);font-weight:700}
.grid tr.dong-moi td{background:#fdecec}
.tag-moi{display:inline-block;background:var(--danger);color:#fff;border-radius:6px;
  padding:0 5px;font-size:10.5px;font-weight:700;vertical-align:middle}

/* Thanh chon nhieu don de xoa nhanh */
.ord-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 18px;
  border-bottom:1px solid var(--line);background:#f6f8fb;flex-wrap:wrap}
.ord-pick-count{font-size:13px;color:var(--muted)}
.ord-bulk button[disabled]{opacity:.45}

/* ---------- Quản trị ---------- */
/* Chua san cho o duoi: thanh nhac cai ung dung / bat thong bao noi de len,
   khong chua thi no che mat nut cuoi cung cua tung muc.                    */
.admin-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:18px 18px 170px;display:flex;flex-direction:column;gap:16px}
/* Tab Quan tri: menu doc ben trai, noi dung tung muc ben phai */
.qt-khung{flex:1;min-height:0;display:flex;gap:16px;align-items:flex-start}
.qt-menu{flex:0 0 214px;position:sticky;top:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:7px;display:flex;flex-direction:column;gap:2px}
.qt-nut{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;
  background:transparent;border-radius:9px;padding:10px 11px;font-size:13.5px;font-weight:600;
  color:var(--text);cursor:pointer;line-height:1.3}
.qt-nut:hover{background:#f2f5fa}
.qt-nut.on{background:var(--brand);color:#fff}
.qt-ico{flex:0 0 auto;font-size:16px;line-height:1}
.qt-noi{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.qt-noi .card.hidden{display:none}
/* Thanh dau muc tren dien thoai: nut quay lai danh muc + ten muc dang mo */
.qt-dau{display:none}
@media (max-width: 900px){
  /* Man hinh hep: danh muc la LUOI O VUONG thay het mot man, bam vao o la
     mo muc do toan man hinh, co nut quay lai danh muc. Khong keo ngang.   */
  .qt-khung{flex-direction:column;gap:12px}
  .qt-menu{flex:0 0 auto;width:100%;position:static;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:10px;overflow:visible}
  .qt-nut{width:auto;flex-direction:column;justify-content:center;gap:7px;text-align:center;
    padding:14px 6px 12px;min-height:84px;font-size:12.5px;line-height:1.25;white-space:normal;
    background:#f6f8fb;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
  .qt-dem{top:6px;right:8px;transform:none}
  .qt-nut:active{background:#e8eefc}
  .qt-nut.on{background:var(--brand);border-color:var(--brand)}
  .qt-ico{font-size:26px}
  .qt-dau{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid var(--line);
    border-radius:12px;box-shadow:var(--shadow);padding:8px 10px;position:sticky;top:0;z-index:2}
  .qt-dau b{font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qt-ve{border:0;background:#eef2fb;color:var(--brand);font-weight:700;font-size:13.5px;
    padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .qt-khung.qt-trang-chu .qt-noi,.qt-khung.qt-trang-chu .qt-dau{display:none}
  .qt-khung.qt-dang-mo .qt-menu{display:none}
  .qt-noi{width:100%}
}
@media (max-width: 360px){ .qt-menu{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:15px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.stat{background:#f6f8fb;border-radius:10px;padding:12px;text-align:center}
.stat b{display:block;font-size:20px;color:var(--brand);white-space:nowrap}
/* O so tien dai thi thu nho chu lai cho khoi xuong dong giua so va don vi */
#statBox .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
#statBox .stat b{font-size:17px}
.stat span{font-size:12px;color:var(--muted)}
/* O so lieu khach moi: to mau xanh la cho de tach khoi khach cu */
.stat.moi{background:#eefaf1;box-shadow:inset 0 0 0 1px #cceedb}
.stat.moi b{color:#127a3f}
.kh-moi-so{color:#127a3f;font-weight:700}
.kh-co,.kh-chua{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11.5px;font-weight:600}
.kh-co{background:#eef4ff;color:#1b4fd8}
.kh-chua{background:#fff3e0;color:#a35a00}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;padding:8px;border-bottom:2px solid var(--line);color:var(--muted);font-weight:600}
table.grid td{padding:8px;border-bottom:1px solid #f1f4f8;vertical-align:middle}
table.grid td.num,table.grid th.num{text-align:right}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,25,45,.45);z-index:50}
.modal{position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(760px,94vw);max-height:calc(var(--app-h) * .9);display:flex;flex-direction:column;overflow:hidden}
.modal.narrow{width:min(440px,94vw)}
/* Form don hang: rong de nhin thay het cot, khong phai cuon ngang */
.modal.xwide{width:min(1280px,96vw)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.modal-head h2{margin:0;font-size:16px}
.modal-body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;flex:1;min-height:0}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;
  justify-content:flex-end;flex-wrap:wrap;flex-shrink:0}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;outline:none;background:#f9fafc}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);background:#fff}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:130px}
.hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.items-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.items-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.items-table th{text-align:left;padding:5px 6px;color:var(--muted);font-size:11.5px;font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
/* Canh tren dinh o de dong nao co nhan gia net thi cac o khac van thang hang */
.items-table td{padding:5px 3px;border-bottom:1px solid #f4f6fa;vertical-align:top}
/* Be ngang tung cot: tong vua khung form, khong sinh thanh cuon ngang tren may tinh */
.items-table .c-code{width:12%}
.items-table .c-name{width:16.5%}
.items-table .c-unit{width:7%}
.items-table .c-qty{width:8%}
.items-table .c-sl{width:8%}
.items-table .c-qtyb{width:9%}
.items-table .c-price{width:10.5%}
.items-table .c-priceb{width:9.5%}
.items-table .c-ck{width:9.5%}
.items-table .c-amount{width:11%}
.items-table .c-del{width:28px;padding-left:0;padding-right:0}
/* Cot so canh phai cho de doi chieu, tieu de canh phai theo cho thang hang */
.items-table th.c-qty,.items-table th.c-sl,.items-table th.c-qtyb,.items-table th.c-price,
.items-table th.c-priceb,.items-table th.c-ck,.items-table th.c-amount{text-align:right}
.items-table td.c-qty input,.items-table td.c-sl input,.items-table td.c-qtyb input,.items-table td.c-price input,
.items-table td.c-priceb input,.items-table td.c-ck input,.items-table td.c-amount input{text-align:right}
.items-table select,.items-table input{width:100%;height:34px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:7px;background:#fff;outline:none;font-size:13px;min-width:0}
.items-table select{padding:0 4px}
.items-table input{padding:0 8px}
.items-table input:focus,.items-table select:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.items-table input[readonly]{background:#f2f4f8;color:var(--muted)}
/* Bo nut tang giam cua o so cho chieu ngang cac o deu nhau */
.items-table input[type=number]{-moz-appearance:textfield;appearance:textfield}
.items-table input[type=number]::-webkit-outer-spin-button,
.items-table input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.items-table .del{color:var(--danger);border:0;background:transparent;font-size:16px;
  height:34px;width:100%;padding:0;cursor:pointer;line-height:1}
.total-box{background:#f6f8fb;border-radius:10px;padding:12px 14px;margin-top:12px;display:flex;
  flex-direction:column;gap:5px;font-size:13.5px}
.total-box .line{display:flex;justify-content:space-between}
.total-box .grand{font-weight:800;font-size:16px;color:var(--brand);border-top:1px solid var(--line);padding-top:7px}
.check-list{max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;border:1px solid var(--line);border-radius:8px;padding:8px}
.check-list label{display:flex;gap:8px;align-items:center;padding:7px 6px;border-radius:6px}
.check-list label:hover{background:#f2f5fa}
.search-result{border-bottom:1px solid var(--line);padding:10px 4px;cursor:pointer}
.search-result:hover{background:#f6f8fb}
.sr-head{font-size:12px;color:var(--muted);margin-bottom:3px}
.sr-body{white-space:pre-wrap;word-break:break-word}
mark{background:#ffe680;padding:0 2px;border-radius:3px}
/* Bang tu kiem tra thong bao */
.pc-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f1f4f8}
.pc-row:last-child{border-bottom:0}
.pc-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px;margin-top:5px;background:var(--muted)}
.pc-dot.ok{background:var(--ok)}
.pc-dot.no{background:var(--danger)}
.pc-dot.warn{background:var(--warn)}
.pc-row .hint{margin-top:2px}
/* Hang anh dai dien nhung nguoi da doc tin nhan */
.read-row{display:flex;justify-content:flex-end;gap:3px;align-items:center;
  margin:-2px 4px 6px 0;padding:0}
.read-row .avatar{border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}
.read-more{font-size:10.5px;color:var(--muted);font-weight:600;margin-left:2px}
/* Ten duoc nhac bang @ */
.mention{color:var(--brand);font-weight:700;background:var(--brand-soft);
  padding:1px 5px;border-radius:5px}
.mention.me{background:#ffe9c7;color:#a35a00}
.mention.all{background:#ffd9d9;color:#b03030}
.msg.mentioned .bubble{box-shadow:0 0 0 2px #ffd08a}
/* Nut dang chu link - dung cho "Quen mat khau?" */
.link-btn{background:none;border:0;color:var(--brand);font-size:13.5px;font-weight:600;
  cursor:pointer;padding:10px 4px 0;width:100%}
.link-btn:hover{text-decoration:underline}
/* Hai duong dan duoi nut Dang nhap: Quen mat khau va Dang ky */
.login-links{display:flex;gap:10px}
.login-links .link-btn{width:auto;flex:1;white-space:nowrap}
.login-links .link-btn.hidden{display:none}

/* Don xin mo tai khoan dang cho duyet */
.dk-hang{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);
  flex-wrap:wrap}
.dk-hang:first-child{border-top:0}
.dk-tt{flex:1 1 240px;min-width:0}
.dk-ten{font-weight:700}
.dk-phu{font-size:13px;color:var(--muted);margin-top:2px;word-break:break-word}
.dk-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dk-trong{color:var(--muted);padding:10px 0}
.dk-the{font-size:12px;font-weight:700;border-radius:20px;padding:2px 10px;white-space:nowrap}
.dk-the.cho{background:#fff4e0;color:#b45309}
.dk-the.duyet{background:#e6f7ec;color:#1a7f43}
.dk-the.tuchoi{background:#fdeaea;color:#c92a2a}

/* Sinh nhat thanh vien */
.sn-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sn-o{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:9px 11px;background:#fbfcfe;min-width:0}
.sn-o.gan{border-color:#f0dfae;background:#fffdf6}
.sn-o.nay{border-color:#f0b429;background:linear-gradient(180deg,#fff7e3,#fffdf6)}
.sn-tt{flex:1;min-width:0}
.sn-ten{font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-ten:hover{color:var(--brand)}
.sn-phu{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-con{font-size:12px;font-weight:700;color:#8a5a00;white-space:nowrap}
.sn-o.nay .sn-con{color:#b45309}
/* Thong ke don hang */
.stat-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:10px}
.stat-filter .field{margin:0}
.stat-quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.group-btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* Bang tong hop don hang mo tu tab Don hang */
.th-r.on,.th-g.on{background:var(--brand);border-color:var(--brand);color:#fff}
.stat-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:5px 11px;border-radius:20px;background:#eef2f8;color:var(--text)}
.chip.new{background:#fff4e0}
.chip.entered{background:#e4f7ea}
.chip.cancelled{background:#fdeaea}
.chip.delivered{background:#e0f0ff}
.bar{height:9px;background:#eef2f8;border-radius:6px;overflow:hidden;min-width:80px}
.bar>span{display:block;height:100%;background:var(--brand);border-radius:6px}
.stat-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.stat-two h4{margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.stat-two>div{min-width:0;overflow-x:auto}

/* Phan trang bang khach hang / ma hang */
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pg-info{color:var(--muted);font-size:12.5px}
.pg-btns{display:flex;gap:4px;flex-wrap:wrap}
.pg-num{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);background:#fff;
  color:var(--text);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.pg-num:hover:not(:disabled){background:#f2f5fa;border-color:var(--brand)}
.pg-num.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pg-num:disabled{opacity:.4;cursor:default}
.pg-gap{align-self:center;color:var(--muted);padding:0 2px}
/* Lam noi bat tin nhan vua nhay toi tu ket qua tim kiem */
.msg-hit .bubble,.msg-hit .order-card,.msg-hit .msg-img,
.msg-hit .file-chip{box-shadow:0 0 0 3px #ffd43b;transition:box-shadow .3s}
.msg-hit{animation:hitflash 2.4s ease-out}
@keyframes hitflash{0%,45%{background:rgba(255,212,59,.22)}100%{background:transparent}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1b2434;color:#fff;
  padding:11px 20px;border-radius:24px;z-index:200;box-shadow:var(--shadow);max-width:80vw}
.toast.err{background:var(--danger)}

/* ---------- Tin nhan thoai ---------- */
.rec-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:#fdecec;border-top:1px solid #f3b7b7;font-size:13px}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);
  animation:recNhay 1s infinite;flex-shrink:0}
@keyframes recNhay{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-weight:700;color:var(--danger);min-width:38px}
.rec-hint{color:var(--muted);flex:1;min-width:0}
#btnMic.dang-ghi{background:var(--danger);color:#fff}
.bubble.voice{display:flex;align-items:center;gap:8px;padding:7px 10px}
.bubble.voice audio{height:34px;max-width:230px}
.voice-ico{flex-shrink:0}
.voice-len{font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0}
.msg.me .bubble.voice .voice-len{color:#fff}

/* ---------- Goi thoai ----------
   Khung noi o goc man hinh, khong che ung dung nen van chat va lam
   viec binh thuong trong luc dang goi.                              */
/* Dat cao hon khung soan tin de khong che nut gui */
.call-screen{position:fixed;right:18px;bottom:92px;z-index:120;width:290px;max-width:calc(100vw - 24px)}
.call-box{background:#132038;color:#fff;border-radius:14px;padding:14px;
  box-shadow:0 12px 34px rgba(10,20,40,.4)}
.call-head{display:flex;align-items:center;gap:11px}
.call-ava{flex-shrink:0}
.call-ava .avatar{width:46px;height:46px;font-size:17px}
.call-who{flex:1;min-width:0}
.call-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-state{font-size:12.5px;color:#a9bad4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-min{background:none;border:0;color:#a9bad4;font-size:18px;cursor:pointer;
  padding:0 4px;line-height:1;flex-shrink:0}
.call-actions{display:flex;gap:12px;margin-top:13px;justify-content:center}
.call-btn{width:48px;height:48px;border-radius:50%;border:0;font-size:19px;cursor:pointer;
  color:#fff;display:flex;align-items:center;justify-content:center}
.call-btn.ok{background:#22c55e;animation:goiNhay 1.4s infinite}
.call-btn.no{background:var(--danger)}
.call-btn.mute,.call-btn.loa{background:rgba(255,255,255,.18)}
.call-btn.mute.off{background:#f59e0b}
.call-btn.loa.on{background:var(--brand)}
@keyframes goiNhay{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Cuoc goi den thi khung nhap nhay nhe cho de thay */
.call-screen.den .call-box{animation:goiVien 1.4s infinite}
@keyframes goiVien{0%,100%{box-shadow:0 12px 34px rgba(10,20,40,.4)}
  50%{box-shadow:0 12px 34px rgba(10,20,40,.4),0 0 0 4px rgba(34,197,94,.45)}}
/* Thu gon: con mot dong ten kem nut cup may, van cup duoc ngay */
.call-screen.thu-gon{width:auto}
.call-screen.thu-gon .call-box{padding:8px 10px;display:flex;align-items:center;gap:8px}
.call-screen.thu-gon .call-head{flex:1;min-width:0}
.call-screen.thu-gon .call-ava .avatar{width:32px;height:32px;font-size:13px}
.call-screen.thu-gon .call-actions{margin:0;gap:8px}
.call-screen.thu-gon .call-btn{width:36px;height:36px;font-size:15px}
.call-screen.thu-gon .call-btn.mute,
.call-screen.thu-gon .call-btn.loa{display:none}

/* ---------- The nhat ky cuoc goi trong khung chat ---------- */
/* white-space:normal de khoang trang xuong dong trong ma nguon khong bi
   hien thanh dong trong that trong the.                                 */
.bubble.the-goi{padding:11px 14px;min-width:180px;text-align:center;white-space:normal}
.cg-tieude{font-weight:700;font-size:14px;margin-bottom:6px}
.cg-tieude.hong{color:var(--danger)}
.cg-mo{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}
.cg-ico{font-weight:700;font-size:14px}
.cg-ico.den{color:var(--ok)}
.cg-ico.di{color:var(--ok)}
.cg-ico.hong{color:var(--danger)}
.cg-lai{background:none;border:0;color:var(--brand);font-weight:600;font-size:13.5px;
  padding:8px 0 0;width:100%}
.cg-lai:hover{text-decoration:underline}
.msg.me .bubble.the-goi{border-color:#b9daff}
@media (max-width:768px){
  .call-screen{right:10px;left:10px;bottom:86px;width:auto}
}

/* ---------- Thong tin ca nhan ---------- */
.pf-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.pf-name{display:flex;flex-direction:column;gap:3px;min-width:0}
.pf-name>b{font-size:17px}
.pf-role{font-size:13px;color:var(--muted)}
.pf-trangthai{font-size:12.5px;color:var(--muted);display:flex;align-items:center}
.pf-list{display:flex;flex-direction:column;gap:2px}
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px 11px;border-radius:8px;font-size:13.5px}
.pf-row:nth-child(odd){background:#f6f8fb}
.pf-row>span{color:var(--muted);flex-shrink:0}
.pf-row>b{text-align:right;word-break:break-word}
.pf-row a{color:var(--brand);text-decoration:none}
.ava-click{cursor:pointer}
.msg-sender{cursor:pointer}
.check-list .tv-xem{margin-left:auto;flex-shrink:0}

.online-dot{width:8px;height:8px;border-radius:50%;background:#ccc;display:inline-block;margin-right:5px}
.online-dot.on{background:var(--ok)}

/* ---------- Mời cài ứng dụng ---------- */
.install-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:150;
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:11px 14px;box-shadow:0 10px 34px rgba(20,32,60,.22);
  width:min(460px,calc(100vw - 24px))}
.install-bar img{width:40px;height:40px;border-radius:10px;flex:0 0 40px}
.push-ico{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:21px}
/* Hai thanh moi nam tren o soan tin, khong che cho go chu */
.install-bar{bottom:80px}
#installBar:not(.hidden) ~ #pushBar{bottom:154px}
.install-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.install-text b{font-size:13.5px}
.install-text span{font-size:12px;color:var(--muted)}

/* ---------- Ho tro man hinh khuyet (iPhone) ---------- */
@supports (padding: env(safe-area-inset-bottom)){
  .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .install-bar{bottom:calc(80px + env(safe-area-inset-bottom))}
  .sidebar{padding-top:env(safe-area-inset-top)}
  .chat-header{padding-top:calc(12px + env(safe-area-inset-top))}
}
.ios-steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 0}
.ios-steps li{position:relative;padding:9px 0 9px 34px;border-bottom:1px solid #f1f4f8}
.ios-steps li:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:8px;
  width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}

.mobile-only{display:none !important}

/* Nut quay lai kieu Zalo: mui ten dam, vung bam rong de de cham */
.back-btn{background:transparent;border:0;color:var(--text);cursor:pointer;padding:0;
  width:42px;height:42px;border-radius:50%;margin-left:-8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.back-btn:active{background:#e8edf5}
.back-btn svg{display:block;pointer-events:none}

/* Cac thanh co dinh khong duoc co lai khi noi dung dai */
.sidebar>.me,.tabs,.side-search,.chat-header,.filter-bar,
.composer,.typing-bar,.reply-bar,.paste-preview{flex-shrink:0}

@media (max-width:820px){
  .app{flex-direction:column;height:var(--app-h)}
  .sidebar{width:100%;flex:1 1 auto;border-right:0;min-height:0}
  .main{display:none}
  .app.room-open .sidebar{display:none}
  .app.room-open .main{display:flex;flex:1 1 auto;min-height:0}
  .mobile-only{display:inline-flex !important}
  .msg{max-width:88%}
  /* Dien thoai: an cac nut di cho khung chat gon.
     Cham vao tin nhan moi hien ra hang nut cua rieng tin do.        */
  .msg-actions{display:none;position:static;margin-top:5px;padding:3px 4px;
    background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:0 3px 10px rgba(20,32,60,.10);width:max-content}
  .msg.me .msg-actions{margin-left:auto}
  .msg:hover .msg-actions{display:none}
  .msg.show-actions .msg-actions{display:flex}
  .msg-actions button{width:34px;height:34px;font-size:17px}
  .react-bar button{width:40px;height:40px;font-size:24px}
  .reaction{font-size:13px;padding:2px 9px}
  .hide-sm{display:none}
  /* Dien thoai: nut Tao don va nut goi nho lai, bo nut tim kiem (chuyen vao bang Thong tin) */
  .header-actions{gap:4px}
  .header-actions .btn-primary.sm,.header-actions .btn-ghost.sm{padding:5px 9px;font-size:14px;min-height:30px;line-height:1.2}
  .header-actions .icon-btn{width:30px;height:30px;font-size:15px}
  .header-actions #btnSearch{display:none}
  .chat-header{padding:8px 10px;gap:8px}
  /* Dien thoai: KHONG hien anh dai dien o dau cua so chat (chiem cho), chi giu ten */
  .chat-ava{display:none !important}
  .chat-title{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Man hinh hep van giu so thanh vien, chi bo phan mo ta cho do chat */
  .chat-sub{display:block;font-size:12.5px}
  .chat-sub .cs-mo{display:none}

  /* ----- Chu to hon mot co cho de doc tren dien thoai ----- */
  body{font-size:15.5px}
  .bubble{font-size:15.5px;line-height:1.5;padding:9px 13px}
  .msg-sender{font-size:13px}
  .msg-time{font-size:12px}
  .room-name{font-size:16px}
  .room-last{font-size:13.5px}
  .room-time{font-size:12px}
  .badge{font-size:12px;padding:2px 8px}
  .tab{font-size:15px;padding:13px 4px}
  .me-name{font-size:16px}
  .me-role{font-size:13px}
  .side-search input,.filter-bar input,.filter-bar select{font-size:15.5px;padding:10px 12px}
  .composer textarea{font-size:16px;line-height:1.45}
  .day-sep{font-size:13px;padding:4px 14px}
  .quote{font-size:13.5px}
  .quote-name{font-size:13px}
  .typing-bar{font-size:13px}
  .btn-ghost.sm,.btn-primary.sm{font-size:14.5px}
  .field label{font-size:13.5px}
  .field input,.field select,.field textarea{font-size:16px;padding:11px 13px}
  table.grid{font-size:14px}
  .hint{font-size:12.5px}
  .suggest-code{font-size:15.5px}
  .suggest-name{font-size:14px}
  .suggest-item{padding:12px 13px}
  .dropdown button{padding:13px 16px;font-size:15.5px}
  .icon-btn{width:42px;height:42px;font-size:19px}
  .send-btn{width:44px;height:44px;font-size:18px}
  .avatar.sm{width:36px;height:36px;flex:0 0 36px;font-size:14px}
  .room-avatar{width:46px;height:46px;flex:0 0 46px;font-size:20px}
  .room-item{padding:11px 10px}
  .messages{padding:12px}
  .filter-bar{padding:10px 12px}
  #ordQ{min-width:100%}
  .order-list{padding:12px}
  /* Dien thoai: the don trong chat cung xuong dong cho de bam */
  .oc-line{flex-wrap:wrap;gap:8px}
  .oc-main{flex:1 1 100%}
  .oc-right{width:100%;justify-content:space-between}
  /* Mo chi tiet thi the khong duoc lan ra ngoai man hinh.
     Tru cho anh dai dien va le hai ben.                        */
  .msg-body{max-width:calc(100vw - 76px)}
  .order-card{min-width:0;max-width:100%;width:100%}
  .oc-detail{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .oc-table{min-width:420px}
  /* Dien thoai: het so tien nen nut mo chi tiet nam gon cung mot dong */
  .ord-line{flex-wrap:nowrap;gap:8px;align-items:center}
  .ord-main{flex:1 1 auto;min-width:0}
  .ord-pick{margin-top:1px}
  .ord-bulk{padding:6px 12px;gap:8px}
  .ord-bulk button{padding:7px 12px;font-size:13px}
  .ord-tien{font-size:16px;flex:1}
  #orderList .ord-tien{font-size:15px}
  #orderList .ord-more{width:34px;height:34px;font-size:16px}
  .ord-info{grid-template-columns:1fr 1fr}
  .modal,.modal.xwide{width:100vw;max-width:100vw;height:var(--app-h);max-height:var(--app-h);
    border-radius:0;top:0;left:0;transform:none}
  /* Dien thoai: moi dong hang thanh mot the rieng, khong phai cuon sang phai */
  .items-wrap{overflow:visible}
  .items-table,.items-table thead,.items-table tbody,.items-table tr,.items-table td{
    display:block;width:auto;table-layout:auto}
  .items-table thead{display:none}
  /* Ba cot: DVT | Luong | SL theo DVC  va  Don gia | Gia theo DVC | CK */
  .items-table tr{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;position:relative;
    border:1px solid var(--line);border-radius:12px;padding:12px 10px 14px;
    margin-bottom:12px;background:#fbfcfe}
  /* Bo be rong % cua ban may tinh, de o tu gian theo the */
  .items-table td.c-code,.items-table td.c-name,.items-table td.c-unit,
  .items-table td.c-qty,.items-table td.c-sl,.items-table td.c-qtyb,.items-table td.c-price,
  .items-table td.c-priceb,.items-table td.c-ck,.items-table td.c-amount{width:auto}
  .items-table td{padding:0;border:0;min-width:0;width:auto}
  .items-table td::before{
    content:attr(data-l);display:block;font-size:11px;font-weight:600;
    color:var(--muted);margin-bottom:4px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  /* O quan trong chiem tron be ngang; hang cuoi: CK | Thanh tien (2 cot) (v180 them cot So luong) */
  .items-table td.c-code,.items-table td.c-name{grid-column:1 / -1}
  .items-table td.c-amount{grid-column:2 / -1}
  .items-table input,.items-table select{padding:10px 7px}
  .items-table td.c-amount input{font-weight:700;color:var(--brand);font-size:16px;
    background:var(--brand-soft);border-color:#bcd8ff}
  .items-table input,.items-table select{font-size:16px;padding:10px 10px;height:auto}
  /* Nut xoa dong nam goc tren ben phai cua the */
  .items-table td.c-del{position:absolute;top:6px;right:8px;width:auto}
  .items-table td.c-del::before{content:'';display:none}
  .items-table .del{font-size:20px;padding:4px 6px;line-height:1;width:auto;height:auto}
  #addItem{width:100%;padding:12px;font-size:15px}
  /* v196: bang tren dien thoai -> moi dong la mot the 2 cot, nhan cot lay tu tieu de (data-l),
     khong con thanh cuon ngang. O dau tien (ten) tron dong; o khong co tieu de (nut) tron dong, canh phai */
  table.grid{display:block;white-space:normal;border-collapse:separate}
  table.grid thead{display:none}
  table.grid tbody,table.grid tfoot{display:block}
  table.grid tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 12px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;background:#fff}
  table.grid td,table.grid th{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere;text-align:left}
  table.grid td.num,table.grid th.num{text-align:left}
  table.grid td.num{white-space:nowrap}
  table.grid td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;color:var(--muted);line-height:1.2;margin-bottom:1px}
  table.grid td:first-child,table.grid td[colspan],table.grid td:not([data-l]),table.grid td.c-tick{grid-column:1 / -1}
  table.grid td:first-child{font-weight:600}
  table.grid td:not([data-l]):last-child{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding-top:4px;border-top:1px dashed var(--line)}
  table.grid td:not([data-l]):last-child:first-child{border-top:0;padding-top:0}
  table.grid td[style*="text-align:right"]{text-align:right}
  table.grid input,table.grid select{width:100%;box-sizing:border-box}
  /* Card quan tri: doan huong dan dai gap vao nut ⓘ; nut xep 2 cot lap kin; o nhap tron dong */
  .card h3,.card h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  [data-hd]{display:none}
  .card > div[style*="flex-wrap"],.card .row{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .card > div[style*="flex-wrap"] > button,.card > div[style*="flex-wrap"] > label{width:100%;white-space:normal;padding:9px 8px;margin:0}
  .card > div[style*="flex-wrap"] > input,.card > div[style*="flex-wrap"] > select,.card > div[style*="flex-wrap"] > .hint{grid-column:1 / -1;min-width:0;width:100%;box-sizing:border-box}
  .card .row > .field{grid-column:1 / -1;max-width:none !important}
  .card .row > button{grid-column:1 / -1;margin-bottom:0 !important}
  .card .row > .hint{grid-column:1 / -1;margin-bottom:0 !important}
  .field[style*="max-width"]{max-width:none !important}
  .admin-body{padding:14px 14px 60px}
  .card{padding:14px}
  .stat-filter{grid-template-columns:1fr 1fr}
  .stat-two{grid-template-columns:1fr}
  /* Dien thoai: o thong ke 2 cot, chu nho lai de so tien khong bi cat */
  #statBox .stats{grid-template-columns:1fr 1fr;gap:8px}
  #statBox .stat{padding:10px 6px}
  #statBox .stat b{font-size:15px}
  #statBox .stat span{font-size:11.5px}
  /* Phan trang tren dien thoai: nut to hon, xuong dong gon gang */
  .pager{flex-direction:column;align-items:stretch;gap:8px}
  .pg-btns{justify-content:center}
  .pg-num{min-width:40px;height:40px;font-size:14px}
  .stats{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  /* Chup man hinh la tinh nang cua may tinh, dien thoai dung nut dinh kem */
  #btnShot{display:none}
  .composer{padding:8px 10px}
  .composer textarea{padding:9px 12px}
}

/* ---------------------------------------------------------------------
   May tinh thu nho cua so (duoi 820px) van co chuot: giu cach di chuot
   vao tin nhan la hien hang nut, khong bat nguoi dung phai bam.
   Hang nut nam BEN CANH tin nhan, noi ben ngoai dong chay, nen hien ra
   hay an di deu khong lam xe dich bo cuc khung chat va khong che chu.
   Tin cua nguoi khac: hang nut ben goc phai.
   Tin cua minh      : hang nut ben goc trai.
   --------------------------------------------------------------------- */
@media (max-width:820px) and (hover:hover) and (pointer:fine){
  /* Chua san mot khoang hai ben de hang nut khong tran ra ngoai man hinh.
     Khoang do la LE TRONG CUA CHINH TIN NHAN chu khong phai khoang trong
     ben ngoai. Nho vay hang nut va khe ho deu nam trong tin nhan: di chuot
     tu bong bong sang bam nut khong bao gio bi mat.                      */
  .msg{max-width:100%}
  .msg:not(.me){padding-right:96px}
  .msg.me{padding-left:96px}
  .msg-actions{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);
    margin-top:0;width:max-content;padding:0;border-radius:0;
    background:transparent;border:0;box-shadow:none;z-index:5;gap:3px}
  .msg:not(.me) .msg-actions{left:100%;right:auto;margin-left:6px}
  .msg.me .msg-actions{right:100%;left:auto;margin-left:0;margin-right:6px}
  /* Tin cua minh chi rong bang bong bong, nen khe ho 6px giua bong bong va
     hang nut nam NGOAI tin nhan: di chuot qua do la mat hang nut. Bac mot
     nhip trong suot noi hai ben lai, ke ca chieu cao cua bong bong, de con
     chuot di kieu gi cung khong roi ra ngoai.                            */
  .msg .msg-actions::after{content:'';position:absolute;top:-6px;bottom:-6px;width:14px}
  .msg:not(.me) .msg-actions::after{right:100%}
  .msg.me .msg-actions::after{left:100%}
  .msg:hover .msg-actions{display:flex}
  .msg-actions button{width:22px;height:22px;font-size:11px}
  .react-bar button{width:34px;height:34px;font-size:20px}
}

/* Man hinh rat thap (dien thoai nam ngang, hoac ban phim ao dang mo) */
@media (max-height:520px){
  .messages{padding:8px 12px}
  .chat-header{padding:6px 12px}
  .chat-title{font-size:14px}
}

/* ============================================================
   NHAP DON HANG TREN DIEN THOAI — ba buoc
   ============================================================ */
.don-dd .modal-body{padding-bottom:8px}

/* Thanh ba buoc o dau man hinh */
.dd-buoc{display:flex;gap:6px;margin-bottom:12px}
.dd-b{flex:1;text-align:center;font-size:12px;font-weight:700;color:#8a94a6;
      background:#f2f5f9;border-radius:8px;padding:7px 2px;cursor:pointer}
.dd-b.on{background:var(--brand);color:#fff}

/* --- Buoc 2: o tim kiem dinh tren cung, danh sach cuon ben duoi --- */
.dd-tim{position:sticky;top:0;z-index:3;background:#fff;padding-bottom:8px}
.dd-tim input{width:100%;font-size:15px;padding:12px 14px;border:1px solid var(--line);
              border-radius:10px;background:#f7f9fc}
.dd-tim input:focus{background:#fff;border-color:var(--brand);outline:none}
.dd-ds{display:flex;flex-direction:column;gap:8px}
.dd-hang{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);
         border-radius:10px;background:#fff;cursor:pointer}
.dd-hang:active{background:#eef4ff;border-color:var(--brand)}
.dd-hang-chu{flex:1;min-width:0}
.dd-hang-ma{font-weight:800;color:var(--brand);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dd-daco{font-size:11px;font-weight:700;color:#127a3f;background:#eefaf1;border-radius:10px;padding:1px 7px}
.dd-hang-ten{font-size:13px;color:#0b1220;margin-top:1px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-hang-dv{font-size:11.5px;color:var(--muted);margin-top:2px}
.dd-hang-chon{flex-shrink:0;font-size:12px;font-weight:700;color:var(--brand);
              border:1px solid var(--brand);border-radius:8px;padding:5px 11px}
.dd-rong{padding:26px 10px;text-align:center;color:var(--muted);font-size:13px}

/* --- Cua so nua man hinh chon don vi tinh va so luong --- */
.dd-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.dd-sheet.hidden{display:none}
.dd-sheet-nen{position:absolute;inset:0;background:rgba(11,18,32,.45)}
.dd-sheet-than{position:relative;width:100%;max-height:82vh;overflow-y:auto;overflow-x:hidden;background:#fff;
               border-radius:18px 18px 0 0;padding:8px 16px 16px;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.dd-sheet-vach{width:42px;height:4px;border-radius:2px;background:#d7dee8;margin:0 auto 12px}
.dd-sheet-dau{margin-bottom:14px}
.dd-sheet-dau b{display:block;font-size:16px;color:var(--brand)}
.dd-sheet-dau span{font-size:13px;color:var(--muted)}
.dd-o{margin-bottom:14px}
.dd-sheet-than *{box-sizing:border-box}
.dd-o>label{display:block;font-size:12px;font-weight:700;color:#7b8798;margin-bottom:6px}
.dd-o>input{width:100%;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px}
.dd-dv{display:flex;gap:8px;flex-wrap:wrap}
.dd-dv-nut{flex:1;min-width:110px;background:#f4f7fb;border:1.5px solid var(--line);border-radius:10px;
           padding:10px 8px;font-size:15px;font-weight:700;color:#0b1220;cursor:pointer}
.dd-dv-nut span{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
.dd-dv-nut.on{background:#eef4ff;border-color:var(--brand);color:var(--brand)}
.dd-sl{display:flex;align-items:center;gap:10px}
.dd-sl input{flex:1;min-width:0;width:100%;text-align:center;font-size:20px;font-weight:800;
             padding:9px 6px;border:1px solid var(--line);border-radius:10px}
.dd-tru,.dd-cong{width:46px;height:46px;flex-shrink:0;font-size:22px;font-weight:800;
                 border:1px solid var(--line);border-radius:12px;background:#f4f7fb;color:var(--brand);cursor:pointer}
.dd-tru:active,.dd-cong:active{background:#e3ecfb}
.dd-tam{background:#f6f8fb;border-radius:10px;padding:11px 12px;display:flex;
        justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.dd-tam b{font-size:17px;color:var(--brand)}
.dd-sheet-nut{display:flex;gap:10px;margin-top:14px}
.dd-sheet-nut button{flex:1;padding:13px 8px;font-size:14.5px;border-radius:11px}

/* --- Buoc 3: gio hang --- */
.dd-gio{display:flex;flex-direction:column;gap:10px}
.dd-dong{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff}
.dd-dong-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dd-dong-ma{font-weight:800;color:var(--brand);font-size:14px}
.dd-dong-ten{font-size:12.5px;color:#0b1220}
.dd-xoa{flex-shrink:0;width:28px;height:28px;border:none;background:#f4f7fb;border-radius:8px;
        color:var(--danger);font-size:14px;font-weight:700;cursor:pointer}
.dd-dong-gia{font-size:11.5px;color:var(--muted);margin-top:3px}
.dd-dong-ck{display:flex;align-items:center;gap:8px;margin-top:9px}
.dd-dong-ck label{font-size:11.5px;color:#7b8798;font-weight:600;white-space:nowrap}
.dd-dong-ck input{width:92px;font-size:14px;padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.dd-dong-tien{margin-left:auto;font-weight:800;color:var(--brand);font-size:15px;white-space:nowrap}
.dd-them{width:100%;margin-top:10px;padding:12px;border-style:dashed;font-size:14px}
/* Dang mo cua so chon don vi tinh thi cac thanh noi khac tam an di */
body.dang-chon-hang .install-bar,
body.dang-chon-hang .call-screen{display:none !important}
.dd-sheet-nut button{white-space:nowrap;font-size:13.5px}

/* ============================================================
   TRA CUU MA SO THUE
   ============================================================ */
.mst-tim{display:flex;gap:8px;margin-bottom:8px}
.mst-tim input{flex:1;min-width:0;font-size:15px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;letter-spacing:.5px}
.mst-tim button{flex-shrink:0;padding:11px 18px}
/* O nhap ma so thue kem nut tra cuu, dung trong form khach va form don */
.mst-o{display:flex;gap:6px}
.mst-o input{flex:1;min-width:0}
.mst-o button{flex-shrink:0;white-space:nowrap}
/* Ma so thue hien o bang va tren the don, bam duoc */
.mst-lk{color:var(--brand);font-weight:700;cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted}
.mst-lk:hover{background:var(--brand-soft);border-radius:4px}

.mst-the{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;
  padding:13px 14px;background:#fff}
.mst-ten{font-size:16px;font-weight:800;color:#0b1220;line-height:1.35}
.mst-ma{font-size:12.5px;color:var(--brand);font-weight:700;margin:2px 0 10px}
.mst-dong{display:flex;gap:12px;padding:5px 0;border-top:1px solid #f1f4f8;font-size:13px}
.mst-dong span{color:var(--muted);flex-shrink:0;min-width:150px}
.mst-dong b{color:#0b1220;font-weight:600}
.mst-nguon{margin-top:9px;font-size:11.5px;color:var(--muted)}
.mst-nut{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mst-h4{margin:18px 0 8px;font-size:13.5px;color:var(--muted)}
.mst-loi{background:#fff3f3;border:1px solid #ffd4d4;border-radius:10px;padding:13px 14px;
  color:var(--danger);font-weight:700;font-size:13.5px}

.mst-kh{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px}
.mst-kh-ten{font-size:14px}
.mst-kh-ten b{color:var(--brand)}
.mst-kh-dc{font-size:12.5px;color:var(--muted);margin-top:2px}
.mst-canh{font-size:12px;color:#a35a00;background:#fff3e0;border-radius:8px;
  padding:4px 9px;margin-top:6px;display:inline-block}
.mst-khop{font-size:12px;color:#127a3f;margin-top:6px}
.mst-kh-nut{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.mst-don{font-size:12.5px;display:flex;flex-direction:column;gap:5px}
.mst-don b{color:var(--brand)}

@media (max-width:820px){
  .mst-dong{flex-direction:column;gap:2px}
  .mst-dong span{min-width:0}
}
/* The cai dat nguon tra cuu ma so thue trong tab Quan tri */
.mst-ta{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:#f7f9fc;resize:vertical}
.mst-ta:focus{background:#fff;border-color:var(--brand);outline:none}
.mst-thu{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:6px;font-size:12.5px}
.mst-thu.co{border-color:#cceedb;background:#f6fdf9}
.mst-thu.khong{border-color:#ffd4d4;background:#fffafa}
.mst-thu-url{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.mst-thu-url span{color:var(--muted);font-family:inherit}
.mst-thu-kq{margin-top:5px;font-weight:700;color:#0b1220}
.mst-thu-kq span{font-weight:400;color:var(--muted)}

/* Man hinh quet ca danh muc khach hang theo co quan thue */
.qm-tom{background:#f6f8fb;border-radius:10px;padding:11px 13px;font-size:13.5px}
.qm-bang td{vertical-align:top;font-size:12.5px}
.qm-bang tr.qm-chon{background:#f4f9ff}
.qm-mst{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap}
.qm-cu{color:var(--muted);max-width:230px}
.qm-moi{max-width:250px}
.qm-dc{font-size:11.5px;color:var(--muted);margin-top:3px}
.qm-doi{background:#fff3e0;border-radius:5px;padding:1px 5px;color:#a35a00;font-weight:600}
.qm-sua{min-width:260px}
.qm-sua label{display:block;font-size:11px;color:#7b8798;font-weight:600;margin:4px 0 2px}
.qm-sua input{width:100%;box-sizing:border-box;font-size:12.5px;padding:6px 8px;
  border:1px solid var(--line);border-radius:7px}
.qm-nhanh{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.qm-nhanh button{font-size:11.5px;padding:4px 8px}
.qm-hong{font-size:12.5px;display:flex;flex-direction:column;gap:4px}
.qm-hong b{color:var(--brand)}

/* Hop thoai lop 2 - de len hop thoai dang mo ma khong dong no */
.overlay2{position:fixed;inset:0;background:rgba(15,25,45,.5);z-index:70}
.modal.lop2{z-index:80}
/* Nhan dia chi con ghi cap huyen - cach ghi truoc khi bo cap huyen */
.qm-cukieu{font-size:11px;color:#a35a00;background:#fff3e0;border-radius:7px;
  padding:2px 7px;margin-top:4px;display:inline-block;font-weight:600}
/* Hop sua gia net tren tab Bang gia */
.gia-sua-dau{background:#f6f8fb;border-radius:10px;padding:11px 13px;margin-bottom:14px;font-size:14px}
.gia-sua-dau b{color:var(--brand);font-size:15px}
.gia-trong .btn-primary.sm{margin-left:10px}

/* Huy don hang - hop nhap ly do va dong hien ly do tren the don */
.huy-dau{background:#fff3f3;border-left:3px solid var(--danger);border-radius:0 9px 9px 0;
  padding:10px 13px;margin-bottom:14px;font-size:14px}
.huy-dau b{color:var(--brand)}
.huy-ta{width:100%;box-sizing:border-box;font-size:14.5px;line-height:1.5;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;resize:vertical;font-family:inherit}
.huy-ta:focus{border-color:var(--danger);outline:none}
.huy-mau{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.huy-mau button{font-size:12px;padding:5px 10px}
.huy-nut{background:var(--danger);border-color:var(--danger)}
.huy-nut:hover{background:#c11}
.oc-huy{margin-top:8px;background:#fff3f3;border:1px solid #ffd4d4;border-radius:9px;
  padding:9px 12px;font-size:13px;color:var(--danger);font-weight:700;line-height:1.5}
.oc-huy span{font-weight:600;color:#7a1414}

/* ============ v91 ============ */
/* Thong tin khach hang xep lien nhau: ten - dien thoai/dia chi - MST */
.kh-gop{margin-bottom:9px}
.kh-gop .oc-sub{margin-bottom:2px;font-size:13px;color:var(--text);font-weight:600}
.kh-gop .kh-dong{margin-top:2px}
.kh-gop .kh-bang{margin-top:6px}
.ord-detail .kh-gop .oc-sub{font-size:14px}

/* The don trong khung chat khong hien tien o dau nua, dong Tong o cuoi da du */
/* Khoi tong hop chuyen xuong duoi bang dong hang, chua mot khoang cho thoang */
.ord-detail .ord-info{margin-top:10px}

/* ============ v97: XEM ANH & BANG CHUC NANG ============ */

/* Bong anh om sat anh, khong con vien xanh thua.
   font-size/line-height ve 0 de cac dong trong trong ma HTML khong an cho. */
/* Anh dung mot minh, khong co bong xanh vien xanh bao quanh nua */
.bubble.anh{padding:0;border:0;background:none;box-shadow:none;
  font-size:0;line-height:0;white-space:normal;overflow:visible}
.msg.me .bubble.anh{background:none;border:0}
.bubble.anh .anh-chu{font-size:13px;line-height:1.45;padding:6px 2px 0;white-space:pre-wrap;
  color:var(--text)}
.msg-img{max-width:280px;max-height:340px;width:auto;height:auto;
  border-radius:10px;display:block;cursor:zoom-in;-webkit-user-select:none;user-select:none}

/* ---------- Man hinh xem anh ---------- */
.xem-anh{position:fixed;inset:0;z-index:140;background:#000;
  display:flex;flex-direction:column;touch-action:none;overscroll-behavior:none}
.xem-anh.hidden{display:none}
.xa-dau{position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:10px;padding:10px 8px;
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  transition:opacity .18s;color:#fff}
.xem-anh.an-thanh .xa-dau{opacity:0;pointer-events:none}
.xa-nut{width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:#fff;
  font-size:22px;line-height:1;border-radius:50%;cursor:pointer}
.xa-nut:active{background:rgba(255,255,255,.18)}
.xa-ai{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.xa-ava{flex-shrink:0}
.xa-chu{min-width:0}
.xa-ten{font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xa-gio{font-size:12.5px;color:rgba(255,255,255,.78)}
.xa-khung{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
#xaAnh{max-width:100%;max-height:100%;display:block;
  transform-origin:center center;will-change:transform;-webkit-user-select:none;user-select:none}
#xaAnh.muot{transition:transform .22s ease-out}

/* ---------- Bang chuc nang truot len tu day ---------- */
.bang-day{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;justify-content:flex-end}
.bang-day.hidden{display:none}
.bd-nen{position:absolute;inset:0;background:rgba(15,22,38,.45)}
.bd-than{position:relative;padding:0 10px calc(12px + env(safe-area-inset-bottom,0px));
  animation:bdLen .18s ease-out}
@keyframes bdLen{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.bd-cx{display:flex;gap:6px;justify-content:space-between;align-items:center;
  background:#fff;border-radius:16px;padding:8px 10px;margin-bottom:10px;
  box-shadow:0 6px 24px rgba(15,22,38,.22)}
.bd-cx button{border:0;background:transparent;font-size:27px;line-height:1;
  padding:4px 6px;border-radius:12px;cursor:pointer}
.bd-cx button:active{background:#eef2f8}
.bd-luoi{background:#fff;border-radius:16px;padding:14px 6px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  box-shadow:0 6px 24px rgba(15,22,38,.22)}
.bd-luoi button{border:0;background:transparent;cursor:pointer;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 4px;border-radius:12px;font-size:12.5px;line-height:1.25;text-align:center}
.bd-luoi button:active{background:#eef2f8}
.bd-luoi .bd-ico{font-size:23px;line-height:1}
.bd-luoi button.xoa{color:var(--danger)}

/* Bang chuc nang cua man hinh xem anh: mot cot, chu ben trai */
.bd-luoi.doc{grid-template-columns:1fr;padding:8px 6px}
.bd-luoi.doc button{flex-direction:row;justify-content:flex-start;gap:14px;
  padding:14px 16px;font-size:15px;text-align:left}
.bd-luoi.doc .bd-ico{font-size:20px;width:24px}

@media (min-width: 821px) {
  .bd-than{max-width:460px;margin:0 auto}
}
/* Mo man hinh xem anh thi khoa cuon trang phia sau */
body.khoa-cuon{overflow:hidden}
/* Bang chon cam xuc day du */
.cx-luoi{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.cx-luoi button{border:0;background:transparent;font-size:24px;line-height:1;
  padding:7px 0;border-radius:10px;cursor:pointer}
.cx-luoi button:hover,.cx-luoi button:active{background:#eef2f8}
@media (max-width: 480px){ .cx-luoi{grid-template-columns:repeat(6,1fr)} }

/* ============ v98: GHIM TIN NHAN & CHON NHIEU ============ */

/* ---------- Thanh ghim tren dau khung chat ---------- */
.ghim-bar{display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:7px 12px;background:#fff8e6;border-bottom:1px solid #f2dfae}
.ghim-bar.hidden{display:none}
.gh-ico{font-size:15px;flex-shrink:0}
.gh-ds{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;max-height:74px;overflow-y:auto}
.gh-item{display:flex;align-items:center;gap:7px;min-width:0;cursor:pointer;
  border-radius:7px;padding:2px 5px}
.gh-item:hover{background:#fdefc9}
/* Don da sua cho nhap lai: may tu ghim, to do cho ke toan de thay */
.gh-item.gh-may{background:#fdecec;border-left:3px solid var(--danger)}
.gh-item.gh-may .gh-ai{color:var(--danger)}
.gh-item.gh-may:hover{background:#fbdcdc}
.gh-ai{font-weight:700;font-size:12px;color:#8a5a00;flex-shrink:0;max-width:110px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-noi{flex:1;min-width:0;font-size:12.5px;color:#5a4a2a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-bo{border:0;background:transparent;color:#a08050;cursor:pointer;
  font-size:13px;line-height:1;padding:3px 5px;border-radius:6px;flex-shrink:0}
.gh-bo:hover{background:#f4dfb0;color:var(--danger)}
.gh-dem{flex-shrink:0;font-size:11.5px;font-weight:700;color:#8a5a00;
  background:#fdefc9;border-radius:9px;padding:1px 7px}

/* Nut ghim tren hang nut cua tin nhan */
.ghim-btn.on{color:#d98c00}

/* ---------- Che do chon nhieu tin ---------- */
.chon-bar{display:flex;align-items:center;gap:7px;flex-shrink:0;flex-wrap:wrap;
  padding:8px 10px;background:#eef4ff;border-top:1px solid #cfe0ff}
.chon-bar.hidden{display:none}
.cn-dem{flex:1;min-width:90px;font-size:13px;font-weight:600;color:var(--brand)}
.chon-bar button[disabled]{opacity:.45;cursor:default}
.chon-bar .cn-xoa{color:var(--danger)}

/* Dang chon nhieu: moi tin co o tich ben trai, tin da chon to sang.
   Chua san mot khoang ben trai de o tich khong de len bong tin nhan. */
body.chon-nhieu #messages .msg{cursor:pointer;position:relative;padding-left:30px}
body.chon-nhieu #messages .msg *{cursor:pointer}
body.chon-nhieu #messages .msg .msg-actions{display:none !important}
body.chon-nhieu #messages .msg::before{
  content:'';position:absolute;top:50%;left:4px;margin-top:-9px;
  width:18px;height:18px;border:2px solid #b6c4d8;border-radius:50%;
  background:#fff;z-index:3}
body.chon-nhieu #messages .msg.da-chon::before{
  border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 2px #fff}
body.chon-nhieu #messages .msg.da-chon .bubble,
body.chon-nhieu #messages .msg.da-chon .order-card,
body.chon-nhieu #messages .msg.da-chon .ht-the{outline:2px solid var(--brand);outline-offset:2px}
/* Dai ngay va cac dong phan cach khong phai tin nhan thi khong co o tich */
body.chon-nhieu #messages .day-sep,
body.chon-nhieu #messages .empty-state{padding-left:0}
body.chon-nhieu #messages .day-sep::before{display:none}

@media (max-width: 820px) {
  body.chon-nhieu #messages .msg{padding-left:26px}
  body.chon-nhieu #messages .msg::before{width:16px;height:16px;margin-top:-8px;left:2px}
  .gh-ai{max-width:80px}
}


/* ============ v100: MENU NEO & HANG NUT KIEU ZALO ============ */

/* Bang chuc nang do ra ngay canh mot nut, khong truot len tu day */
.bang-day.neo{display:block}
.bang-day.neo .bd-nen{background:transparent}
.bang-day.neo .bd-than{position:fixed;padding:0;margin:0;max-width:280px;min-width:230px;
  animation:bdHien .13s ease-out}
@keyframes bdHien{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.bang-day.neo .bd-luoi{padding:6px}
.bang-day.neo .bd-luoi button{padding:11px 14px;font-size:14.5px}

/* ---------- Hang nut ben canh bong tin nhan (kieu Zalo) ---------- */
.msg-body{position:relative}
.msg-actions{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;gap:3px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6}
/* Tin cua nguoi khac: hang nut nam ben phai bong · tin cua minh: ben trai */
.msg:not(.me) .msg-actions{left:100%;margin-left:6px}
.msg.me .msg-actions{right:100%;margin-right:6px}
.msg-actions button{width:22px;height:22px;flex-shrink:0;border:1px solid var(--line);
  background:#fff;color:#48566b;border-radius:50%;cursor:pointer;padding:0;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(20,32,60,.10)}
.msg-actions button:hover{background:#eef2f8;color:var(--brand)}
.msg:hover .msg-actions,.msg.show-actions .msg-actions{opacity:1;pointer-events:auto}

/* Nut thich nam o goc duoi ben phai bong tin nhan */
/* Hang cam xuc: chip dem so va nut thich nam chung mot dong,
   nep o goc duoi ben phai bong bong. Moi tin nhan deu the, ke ca tin cua minh. */
.cx-hang{position:absolute;right:-4px;bottom:-11px;z-index:7;
  display:flex;align-items:center;gap:3px;line-height:1}
.like-goc{width:20px;height:20px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:11px;line-height:1;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(20,32,60,.14);
  opacity:0;pointer-events:none;transition:opacity .12s}
.msg:hover .like-goc,.msg.show-actions .like-goc,.like-goc.on{opacity:1;pointer-events:auto}
.like-goc.on{color:#e0245e;border-color:#f3c3d1}
.like-goc:hover{background:#eef2f8}
/* Co cam xuc thi chua them cho ben duoi de hang chip khong de len gio */
.msg.co-cx .msg-time{margin-top:12px}

/* Dien thoai: khong co re chuot nen nut thich hien san, hang nut cham moi hien */
@media (hover: none) {
  .like-goc{opacity:1;pointer-events:auto}
  .msg-actions{position:static;transform:none;margin:6px 0 0 !important;display:none}
  .msg.show-actions .msg-actions{display:flex;opacity:1;pointer-events:auto}
  .msg.me .msg-actions{justify-content:flex-end}
}
/* Boc quanh bong tin nhan de gan nut thich vao dung goc bong */
.bong-boc{position:relative;display:block}
.msg.he-thong .like-goc,.msg.he-thong .msg-actions{display:none !important}

/* ============ v108: DIEN THOAI ============ */

/* Dien thoai: bo han hang nut hien khi cham vao tin nhan.
   Muon lam gi voi tin thi GIU LAU de truot len bang chuc nang. */
@media (hover: none) {
  .msg-actions{display:none !important}
}

/* Tin la anh: nut chia se luon nam san canh anh.
   Tin cua minh ben trai, tin nguoi khac ben phai.               */
.anh-cs{display:none;position:absolute;top:50%;margin-top:-15px;z-index:6;
  width:30px;height:30px;border:1px solid var(--line);background:#fff;color:#48566b;
  border-radius:50%;cursor:pointer;padding:0;font-size:15px;line-height:1;
  align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(20,32,60,.16)}
.anh-cs:active{background:#eef2f8;color:var(--brand)}
.msg:not(.me) .anh-cs{left:100%;margin-left:7px}
.msg.me .anh-cs{right:100%;margin-right:7px}
@media (hover: none) {
  .anh-cs{display:flex}
  /* Chua cho cho nut khoi de len anh */
  .msg[data-type="image"]:not(.me){padding-right:44px}
  .msg[data-type="image"].me{padding-left:44px}
}


/* ---------- Cham va giu vao tin nhan tren dien thoai ----------
   Cham mot cai: nen doi mau nhe, biet may da nhan dung tin nao.
   Giu du lau de mo bang chuc nang: nen dam han len va vien xanh. */
.msg .bubble,.msg .order-card,.msg .msg-img,.msg .ht-the{transition:background .12s, box-shadow .12s}
.msg.dang-cham .bubble,.msg.dang-cham .order-card,.msg.dang-cham .ht-the{filter:brightness(.94)}
.msg.dang-cham .msg-img{filter:brightness(.9)}
.msg.dang-giu .bubble,.msg.dang-giu .order-card,.msg.dang-giu .ht-the{
  filter:brightness(.9);box-shadow:0 0 0 2px var(--brand)}
.msg.dang-giu .msg-img{filter:brightness(.85);box-shadow:0 0 0 2px var(--brand)}

/* ---------- Cong no: tuoi no va qua hen ---------- */
.cn-tuoi{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#eef1f6;color:#3b4656}
.cn-tuoi.vang{background:#fff4d6;color:#8a5a00}
.cn-tuoi.cam{background:#ffe3cc;color:#a04a00}
.cn-tuoi.do{background:#ffd9d9;color:#b02020}
.cn-quahen{color:#e03131;font-weight:700}
tr.cn-dong-quahen td{background:#fff6f6}
/* Man hinh hep: o thong ke trong hop cong no khong bi cat so */
@media (max-width:560px){
  .modal .stats{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  .modal .stat{padding:10px 6px}
  .modal .stat b{font-size:15px;white-space:normal;overflow-wrap:anywhere}
}
/* Canh bao cong no trong form don hang */
.o-no{margin:0 0 10px;font-size:13px}
.o-no.canh-bao{border-color:#e03131;background:#fff5f5}
.cn-baothu{font-size:11.5px;color:#8a5a00;font-weight:600;margin-top:2px;line-height:1.3}

/* v161: nut dang xu ly (chong bam dup) */
.dang-xu-ly{opacity:.6;pointer-events:none;cursor:progress}
.toast.ban-moi{cursor:pointer;background:#1f6feb;color:#fff;opacity:1;animation:none;bottom:70px}

/* Nut chup anh camera: chi hien tren dien thoai / may tinh bang (v164) */
#btnChupAnh{display:none}
@media(max-width:820px){#btnChupAnh{display:inline-flex}}
/* ---------- v164: dien thoai (man hinh cham), vung bam toi thieu 40px ---------- */
@media(max-width:820px) and (pointer:coarse){
  /* Nut thich nho canh tin: hinh ve giu 20px nhung vung cham 40px */
  .like-goc{position:relative}
  .like-goc::before{content:"";position:absolute;inset:-10px;border-radius:50%}
  .msg-actions button{width:40px;height:40px}
  /* Nut dau khung chat giu nho theo yeu cau (v148) nhung vung cham mo rong 40px */
  .header-actions .icon-btn{position:relative}
  .header-actions .icon-btn::before{content:"";position:absolute;inset:-5px}
  .room-item{min-height:56px}
  .tab{min-height:44px}
}
/* iPhone: khi ban phim ao day trang len, keo ung dung theo phan nhin thay (v164) */
html.vv-cam-tay .app{transform:translateY(var(--vv-top,0px))}
/* Tab Don hang (v165): o tim + nut xoa ngay canh, tim den dau ra den do */
.o-tim{position:relative;display:inline-flex;flex:1;min-width:220px}
.o-tim input{width:100%;padding-right:34px}
.o-xoa{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:#8a94a6;font-size:15px;cursor:pointer;line-height:1}
.o-xoa:hover{background:#e9edf3;color:#1b2434}
.o-tim.rong .o-xoa{display:none}
/* ---------- v166: menu chuot phai / giu lau tren nhom ---------- */
.menu-phong{position:fixed;z-index:120;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  min-width:200px;overflow:hidden;padding:4px 0}
.menu-phong button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:11px 14px;background:#fff;border:0;font-size:14px;cursor:pointer}
.menu-phong button:hover{background:#f2f5fa}
.menu-phong button.nguy{color:var(--danger)}
.menu-phong .mp-ten{padding:8px 14px 4px;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.room-item.dang-giu{background:#eef2f8}
.cs-truong{color:#b7791f;font-weight:600}
.composer.khoa textarea{background:#f1f3f7;color:#8a94a6}
.tv-truong{font-size:11.5px;color:#b7791f;font-weight:600;margin-left:4px}
/* v168: khung chat khong bao gio cuon ngang (nut thich / hang nut sat mep lam du 1px
   -> may tinh Windows hien thanh cuon ngang). Bang don hang, bao gia da co cuon rieng. */
.chat,.chat-main,#viewChat,.main{overflow-x:hidden}
.msg,.msg .bubble{max-width:100%;box-sizing:border-box}
/* v190: v168 lo mo rong the phieu bao thu / bao gia ra het khung -> tra lai be rong the */
.msg .bubble.pt-the{max-width:min(100%,380px)}.msg .bubble.bg-the{max-width:min(100%,270px)}
/* Cua so trinh duyet thu nho tren may tinh (co chuot, khong cham): chip loc don xuong
   dong thay vi cuon ngang — chuot khong keo ngang duoc, lai hien thanh cuon xau       */
@media(max-width:820px) and (hover:hover) and (pointer:fine){
  .ord-chip{flex-wrap:wrap;overflow-x:visible}
  .och-dem{width:100%;margin-left:0;text-align:right}
}

/* Nut dua ung dung sang man hinh 1 / 2 (v176) - chi may tinh co nhieu man hinh */
.man-hinh{display:flex;gap:0;margin-right:2px}
.man-hinh.hidden{display:none}
.man-hinh .icon-btn{width:28px;height:30px;font-size:12px;color:var(--muted)}
.man-hinh .icon-btn:hover{color:var(--brand);background:var(--brand-soft)}

/* O tien (v178, v181 bo nut 000): o chu canh phai, dau cham hang nghin */
.o-tien{display:flex;align-items:stretch;width:100%}
.o-tien input{flex:1;min-width:0;width:100%;text-align:right}
@media (max-width:820px){
  /* Dien thoai: o don gia trong tam chon hang trong giong o so luong - to, dam, canh giua (v181) */
  .dd-o .o-tien input{text-align:center;font-size:20px;font-weight:800;padding:9px 6px;
    border:1px solid var(--line);border-radius:10px;height:44px;box-sizing:border-box}
  .dd-o .o-tien input:focus,.dd-sl input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
  .dd-dong-ck .o-tien input{font-weight:700}
  .dd-o .o-tien input::placeholder{font-weight:600;color:#aab}
}
/* ---------- Ban phim so tren dien thoai cho o tien (v180) ---------- */
.bps-nen{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.18);pointer-events:none}
.bps{position:fixed;left:0;right:0;bottom:0;z-index:1201;background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(15,23,42,.18);padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;animation:bps-len .16s ease-out}
@keyframes bps-len{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.bps-nhan{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 2px 6px;display:flex;justify-content:space-between}
.bps-hien{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:12px;
  padding:0 14px;height:52px;margin-bottom:10px;background:#fbfcfe}
.bps-hien .bps-xoa{border:0;background:none;color:#e03131;font-size:24px;line-height:1;padding:6px 8px 6px 0;cursor:pointer}
.bps-hien .bps-so{font-size:26px;font-weight:800;color:#0b1220;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bps-hien .bps-so.pheptinh{font-size:20px;color:var(--muted);font-weight:600}
.bps-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.bps-luoi button{height:56px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:22px;font-weight:600;color:#0b1220;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.bps-luoi button:active{background:#eef2f8}
.bps-luoi button.bps-lui{color:#e03131;font-size:20px}
.bps-luoi button.bps-000{font-size:19px;letter-spacing:.5px}
.bps-luoi button.bps-ok{background:var(--brand);border-color:var(--brand);color:#fff;font-size:20px;font-weight:800}
.bps-luoi button.bps-pt{font-size:24px}
.bps-luoi button.bps-pt.dang{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
/* Ban phim so dang mo: tam chon hang va cua so don day len tren ban phim */
body.bps-mo .dd-sheet{padding-bottom:var(--bps-cao,0px)}
body.bps-mo .dd-sheet-than{max-height:calc(100vh - var(--bps-cao,0px) - 24px)}
body.bps-mo .modal-body{padding-bottom:calc(var(--bps-cao,0px) + 16px)}

/* Bang cong no: thanh tick chon + nhac nhan vien thu no (v186) */
.cn-chon-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;margin-bottom:8px;
  background:#f6f8fb;border:1px solid var(--line);border-radius:10px}
.cn-chon-tatca{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.cn-chon-bar .hint{flex:1;min-width:160px}
.cn-chon-bar .btn-primary.sm{padding:7px 12px;font-size:13px}
.cn-chon-bar .btn-primary:disabled{opacity:.5;cursor:default}
.grid .cn-pick{width:17px;height:17px;cursor:pointer;vertical-align:middle}
.cn-da-nhac{color:#b25e00}
.cn-nhac-ds{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow:auto}
.cn-nhac-nv{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fbfcfe;font-size:13px}

/* Lich & nhac hen (v187) */
.lich-dau{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}
.lich-dau .hint{flex:1;min-width:200px}
.lich-dong{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff}
.lich-dong.homnay{border-color:var(--brand);background:var(--brand-soft)}
.lich-dong.kyniem{border-left:4px solid #e8a317}
.lich-ngay{flex:0 0 190px;font-size:13px}
.lich-gio{color:var(--brand);font-weight:600}
.lich-than{flex:1;min-width:0}
.lich-td{font-weight:700;font-size:14.5px}
.lich-nam{display:inline-block;background:#fff3cd;color:#8a5a00;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700;margin-left:4px}
.lich-nhan{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.lich-chip{font-size:11.5px;background:#f2f5fa;border-radius:999px;padding:2px 8px;color:var(--muted)}
.lich-nut{display:flex;gap:4px;flex-shrink:0}
.lich-qua{margin-top:10px}
.lich-qua summary{cursor:pointer;color:var(--muted);font-size:13px;margin-bottom:8px}
.lich-hang{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lich-nhac{display:flex;gap:14px;flex-wrap:wrap}
.lich-nhac .chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;white-space:nowrap;width:auto;margin:0}
@media (max-width:820px){
  .lich-dong{flex-wrap:wrap}
  .lich-ngay{flex:1 1 100%}
  .lich-hang{grid-template-columns:1fr}
}
.lich-cheDo{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.lich-cheDo .chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;width:auto;margin:0;white-space:nowrap}

/* v193: Cong no cua toi (nhan vien) — dang the, vua man hinh, khong thanh cuon ngang */
.cn-ds{display:flex;flex-direction:column;gap:8px}
.cn-the{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px 12px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.cn-the-quahen{background:#fff6f6;border-color:#f3c4c4}
.cn-the-a{min-width:0}.cn-the-a b{display:block;font-size:14px;overflow-wrap:anywhere}
.cn-the-b{min-width:0}.cn-the-tien{font-size:16px;font-weight:800;color:#1a1a1a;white-space:nowrap}
.cn-the-nut{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.cn-the-nut button{white-space:nowrap}
.cn-the-c{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;border-top:1px dashed var(--line);padding-top:6px}
.cn-the-muc{display:inline-flex;gap:5px;align-items:center;min-width:0;overflow-wrap:anywhere}
.cn-the-nhan{color:var(--muted);font-size:11.5px}
.cn-the-tong{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-top:8px;border-top:2px solid var(--line);font-size:13.5px}
.cn-the-tong b{font-size:16px}
.cn-the-phieu.huy .cn-the-tien{text-decoration:line-through;color:#8a94a6}.cn-the-phieu.xong{background:#f4fbf6}.cn-the-phieu.tu_choi{background:#fff6f6}
@media(max-width:640px){
  .cn-the{grid-template-columns:minmax(0,1fr);gap:6px}
  .cn-the-a,.cn-the-b,.cn-the-nut,.cn-the-c{grid-column:1}
  .cn-the-b{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .cn-the-nut{justify-content:stretch}.cn-the-nut button{flex:1;padding:9px 10px;font-size:14px}
  .cn-the-tien{font-size:18px}
  .cn-the-c{gap:4px 10px}
}
/* v194: the cong no cua ke toan / quan tri + bang theo doi + chip loc tinh hinh */
.cn-the-tick{display:inline-block;margin-right:8px;vertical-align:middle}.cn-the-tick input{width:17px;height:17px;vertical-align:-3px;accent-color:var(--brand);cursor:pointer}
.cn-the-nut .cn-nv{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-theo-doi{margin-bottom:10px}
.cn-td-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:6px;margin-bottom:8px}
.cn-td{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#f9fafc;cursor:pointer;text-align:left;font:inherit;min-width:0}
.cn-td b{font-size:18px;line-height:1.1}.cn-td span{font-size:11.5px;color:var(--muted);line-height:1.2}
.cn-td:disabled{opacity:.45;cursor:default}
.cn-td.do b{color:#e03131}.cn-td.cam b{color:#d9480f}.cn-td.vang b{color:#b58a00}.cn-td.xanh b{color:#127a3f}.cn-td.xam b{color:#5b6472}
.cn-td.chon{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.cn-chip-hang{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cn-chip{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:12.5px;cursor:pointer}
.cn-chip b{font-weight:800}.cn-chip.chon{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.cn-chip.bo{border-color:#e03131;color:#e03131}
@media(max-width:640px){
  .cn-the-nut .cn-nv{flex:1 1 100%;max-width:none}
  .cn-td-hang{grid-template-columns:1fr 1fr}
}
.cn-nv-tong{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.cn-nv-dong{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:#f9fafc;font-size:13px}
.cn-nv-ten{font-weight:600;min-width:0;overflow-wrap:anywhere}.cn-nv-dong b{white-space:nowrap}
/* v194: o thong ke khong tran ra ngoai (gio cap nhat dai) */
.stats .stat{min-width:0}.stats .stat b.stat-gio{font-size:15px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
.cn-the-tick + b{display:inline}

/* v196: nut ⓘ mo huong dan (chi hien tren dien thoai), hop huong dan */
.qt-hd-nut{display:none;border:1px solid var(--line);background:#fff;color:var(--brand);border-radius:999px;font:inherit;font-size:12px;padding:2px 9px;cursor:pointer;font-weight:600}
@media(max-width:640px){.qt-hd-nut{display:inline-block}}
.hd-noi{font-size:14px;line-height:1.55;color:#2b3340}.hd-noi b{color:#1a1a1a}
/* v196: o nhap trong luoi khong duoc no rong hon cot (input type=date co be rong toi thieu rieng) */
.field{min-width:0}.field input,.field select,.field textarea{box-sizing:border-box;min-width:0;max-width:100%}
.stat-filter .field input,.stat-filter .field select{min-width:0}
@media(max-width:640px){
  /* v197: so tien luon tren MOT dong: 2 cot, chu co lai theo be ngang */
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stats .stat{padding:10px 6px}.stats .stat b{white-space:nowrap;font-size:clamp(13px,4.3vw,18px);overflow:hidden;text-overflow:ellipsis}
  .stats .stat b.stat-gio{font-size:13px}
  .card .row > .qt-hd-nut,.card > .qt-hd-nut{justify-self:start;width:auto}
}

/* v197: khong ngat dong giua so tien / ngay gio */
.nb{white-space:nowrap}
/* v197: danh muc gon tren dien thoai (khach hang, ma hang): ma + ten, bam ra chi tiet */
.dm-ds{display:flex;flex-direction:column;gap:6px}
.dm-dong{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;font:inherit;cursor:pointer;min-width:0}
.dm-dong > input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--brand)}
.dm-mo{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer}
.dm-dong b,.dm-mo b{flex:0 0 auto;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand)}
.dm-dong span,.dm-mo span{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.dm-dong i,.dm-mo i{flex-shrink:0;color:var(--muted);font-style:normal;font-size:18px}
.dm-tatca{background:#f6f8fb;font-weight:600;color:var(--muted)}
.ct-ten{font-size:16px;font-weight:700;margin-bottom:10px;overflow-wrap:anywhere}
.ct-dong{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.ct-nhan{color:var(--muted);font-size:12.5px}.ct-gt{overflow-wrap:anywhere}
/* v197: KPI tren dien thoai — the tung nhan vien, so tien mot dong */
.kpi-ds{display:flex;flex-direction:column;gap:10px}
.kpi-the{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.kpi-the-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.kpi-hang{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kpi-hang > span{color:var(--muted);font-size:12.5px}.kpi-hang > b{font-size:15px}.kpi-hang > i{font-style:normal;font-size:12px;color:var(--muted)}
.kpi-hang.kpi-tong{border-bottom:0;background:var(--brand-soft);border-radius:8px;padding:8px 10px;margin-top:6px}.kpi-hang.kpi-tong > b{font-size:18px;color:var(--brand)}
.kpi-khoan{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.kpi-khoan label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.kpi-khoan input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-weight:600;text-align:right}
.kpi-duyet{display:flex;gap:6px;align-items:center;margin:8px 0 2px}
.kpi-nut{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.kpi-nut button{padding:9px 12px;white-space:nowrap}
.kpi-the.bc .bc-so{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0;font-size:13.5px}
/* v198: bang gia tren dien thoai — bo nhom VTHH, hai gia tren mot hang (khac mau), nut nho */
@media(max-width:640px){
  .gia-the{padding:10px 12px}
  .gia-the .gia-nhom{display:none}
  .gia-tren{gap:6px 10px;margin-bottom:8px}
  .gia-so{grid-template-columns:1fr 1fr;gap:8px}
  .gia-o{padding:7px 10px;background:#eef8f1;border:1px solid #cfead9}
  .gia-o span{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gia-o b{font-size:15.5px;white-space:nowrap;color:#127a3f}
  .gia-o.chinh{background:var(--brand-soft);border-color:#bcd8ff}.gia-o.chinh b{color:var(--brand)}
  .gia-duoi{margin-top:8px;padding-top:6px}
  .gia-phai{gap:6px}.gia-phai .btn-ghost.sm{padding:4px 9px;font-size:12px;border-radius:7px}
  .gia-ngay{font-size:10.5px}
}
@media(min-width:641px){.stat-filter .st-khach{grid-column:span 2}}
/* v199: thong ke don hang — hang nut gon: Bo loc + tom tat + xem theo */
.st-hang{align-items:center}.st-tom-tat{align-self:center;flex:1 1 200px;min-width:0;font-size:12.5px}
@media(max-width:640px){.st-hang{display:grid !important;grid-template-columns:1fr 1fr}.st-tom-tat{grid-column:1 / -1}#stBoLoc{grid-column:1 / -1}.st-hang > .hint:not(.st-tom-tat){grid-column:1 / -1}}
/* v200: nhom nhan don co dinh (khong chon) */
.o-nhom-co-dinh{padding:9px 12px;border:1px dashed var(--line);border-radius:8px;background:#f6f8fb;font-weight:600;color:var(--brand)}
/* v201: o nhap tin tren dien thoai — rong, gon nhu Zalo: [😊] [ô nhập] [⋯] [🎤] [🖼] ; go chu -> [Gửi] */
.chi-di-dong{display:none}
.them-menu{position:absolute;right:56px;bottom:64px;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;min-width:170px}
.them-menu button{border:0;background:none;text-align:left;padding:11px 14px;font:inherit;font-size:15px;border-radius:8px;cursor:pointer}
.them-menu button:active{background:#f2f5fa}
@media (max-width:640px){
  .composer{gap:2px;padding:8px 6px;align-items:center}
  .composer .chi-di-dong{display:inline-flex;align-items:center;justify-content:center}
  .composer > label[title="Gửi ảnh / tệp"],.composer #btnShot,.composer #btnChupAnh{display:none}
  .composer .icon-btn{width:34px;height:36px;font-size:20px;flex:0 0 34px;padding:0}
  .composer #btnEmoji{order:0}.composer textarea{order:1;min-width:0;flex:1 1 auto}
  .composer #btnThem{order:2}.composer #btnMic{order:3}.composer #btnAnhMay{order:4}.composer .send-btn{order:5}
  .composer textarea{padding:9px 12px;border-radius:20px}
  .composer .send-btn{display:none;width:40px;height:40px;flex:0 0 40px}
  body.co-chu .composer .send-btn{display:inline-flex;align-items:center;justify-content:center}
  body.co-chu .composer #btnThem,body.co-chu .composer #btnMic,body.co-chu .composer #btnAnhMay{display:none}
  .chat-main{position:relative}
}
.chat-col{position:relative}

/* v203: ke toan yeu cau kiem tra lai don - nhan cam tren the/dong don, bang canh bao, nut */
.ord-kt{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:800;
  background:#f59e0b;color:#fff;letter-spacing:.2px;white-space:nowrap}
.ord-banner.kt{background:#fff7e6;border-color:#f5c26b;color:#8a5a00}
.ord-banner.kt b{color:#8a5a00}
.ord-banner.kt span{display:block;margin-top:3px;font-size:12px;color:#a06a00;font-weight:400}
.ord-nut-kt.on{background:#fff7e6;border-color:#f5c26b;color:#8a5a00;font-weight:700}

/* v204/v205: menu ⋯ Khac tren the don hang. .oc-khac-menu chi la mau (an), khi bam thi
   chep ra .oc-khac-pop o body, position:fixed -> khong bi the/khung cuon cat mat */
.oc-khac{display:inline-block}
.oc-khac-menu{display:none}
.oc-khac-pop{position:fixed;z-index:400;min-width:180px;background:#fff;
  border:1px solid var(--border,#dfe4ec);border-radius:10px;box-shadow:0 8px 24px rgba(20,30,50,.18);padding:4px;display:flex;flex-direction:column}
.oc-khac-pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:7px;
  font:inherit;font-size:13.5px;color:var(--text,#1f2937);cursor:pointer;white-space:nowrap}
.oc-khac-pop button:hover{background:#f1f4f9}
.oc-khac-pop button.nguy{color:var(--danger)}
.oc-khac-pop button.kt-on{color:#8a5a00;font-weight:700}
/* v205: dien thoai - hang nut the don: Sua don · MISA · Khac tren mot hang, Da nhap lieu rong het hang */
@media (max-width:640px){
  #messages .oc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #messages .oc-actions > button, #messages .oc-khac, #messages .oc-khac > button{width:100%;min-width:0;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #messages .oc-khac{display:block}
  #messages .oc-actions > .btn-primary{grid-column:1 / -1;order:10}   /* Da nhap lieu xuong hang cuoi, rong het hang */
}

/* v208: hinh thu nho cua tin anh/video trong khoi trich dan va thanh "Dang tra loi" */
.quote.co-anh{display:flex;align-items:center;gap:8px}
.quote-chu{min-width:0;flex:1}
.quote-anh{width:44px;height:44px;flex:0 0 44px;object-fit:cover;border-radius:6px;background:#dfe6f0;display:block}
.reply-bar-anh{width:40px;height:40px;object-fit:cover;border-radius:6px;flex:0 0 40px;background:#dfe6f0}

/* v209: so lieu cu (gach ngang, xam) ben canh so lieu da sua; dong hang da bo */
.gt-cu{color:#8a94a6;font-weight:400;text-decoration:line-through;font-size:.92em;white-space:nowrap}
td.sua .gt-cu{color:#9aa3b2}
tr.dong-bo td{color:#8a94a6;font-size:12px;background:#fafbfd}
tr.dong-bo s{color:#9aa3b2}

/* v216: bo loc phieu bao thu */
.pt-loc-tom{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-2px 0 8px;padding:6px 10px;background:#eef3fb;border-radius:8px}
#cnPhieuLoc.on{background:#e3ecfb;border-color:#9dbcf3;color:var(--brand);font-weight:700}

/* v217: ket qua tim phieu bao thu trong hop - hang nut xuong dong rieng, hai cot chu/tien rong hon */
#tpDs .cn-the-phieu{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"a b" "nut nut" "c c"}
#tpDs .cn-the-a{grid-area:a}#tpDs .cn-the-b{grid-area:b;text-align:right}#tpDs .cn-the-nut{grid-area:nut}#tpDs .cn-the-c{grid-area:c}
#tpDs .cn-the-b .pt-tt{display:inline-block;white-space:nowrap}
@media (max-width:640px){#tpDs .cn-the-phieu{grid-template-columns:1fr;grid-template-areas:"a" "b" "nut" "c"}#tpDs .cn-the-b{text-align:left}}

/* ===== v218: May tinh ngo nhung trong app ===== */
#mtnKhung{position:fixed;inset:0;z-index:45;background:#15803d}
#mtnKhung iframe{display:block;width:100%;height:100%;border:0;background:#f4f6f4}
body.mtn-mo{overflow:hidden}
.suggest-more{padding:8px 12px;font-size:12px;color:var(--muted);background:#f7f9fc;border-top:1px solid #eef1f6}   /* v219 */
/* ===== v221: vai tro & quyen han ===== */
.quyen-bang input[type=checkbox]{width:18px;height:18px;cursor:pointer}
.quyen-bang tr.quyen-nhom td{background:#f2f5fa;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:#5b6472}
.quyen-rieng{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fafbfd}
.quyen-rieng summary{cursor:pointer;font-weight:700}
.quyen-rieng-ds{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.quyen-dong{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid #eef1f6}
.quyen-dong select{flex:0 0 140px;padding:5px 8px;font-size:13px}
@media (max-width: 900px){
  .quyen-bang tbody tr.quyen-nhom{display:block;padding:6px 10px}
  .quyen-bang tbody tr.quyen-nhom td{display:block;background:none;padding:0}
  .quyen-dong select{flex:0 0 120px}
}
@media (max-width: 900px){
  .quyen-bang td.quyen-o{display:flex;align-items:center;gap:8px;text-align:left!important}
  .quyen-bang td.quyen-o::before{margin:0;flex:1}
}
/* v222: canh bao khach no chua gan nhan vien trong Quan tri -> Cong no */
.cn-chua-gan{background:#fdeaea;color:#b42323;border:1px solid #f3c2c2;border-radius:9px;padding:8px 12px;margin-bottom:10px;font-size:13px;cursor:pointer}
.cn-chua-gan:hover{background:#fbdcdc}
/* ===== v225: so tay lai xe ===== */
.stx-tabs{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.stx-tab{border:1px solid var(--line);background:#f6f8fb;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer}
.stx-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.stx-ngay{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:10px;background:#fff}
.stx-ngay-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px dashed var(--line);margin-bottom:6px}
.stx-the{padding:8px 0;border-bottom:1px solid #f0f2f6}
.stx-the:last-child{border-bottom:0}
.stx-the-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stx-tong{margin-left:auto;font-weight:800;color:#a86f00}
.stx-cp{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.stx-chip{font-size:12px;background:#f2f5fa;border-radius:8px;padding:2px 8px}
.stx-nut{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.stx-loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stx-loc select,.stx-loc input{padding:7px 10px;border:1px solid var(--line);border-radius:9px}
.stx-loai{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.stx-cp-dong{display:grid;grid-template-columns:1fr 130px 34px;gap:6px;margin-bottom:6px}
.stx-cp-dong input{width:100%;box-sizing:border-box}
.stx-cp-dong input[data-cp-tien]{text-align:right}
.stx-tongdong{text-align:right;font-size:15px;margin-top:8px}
.stx-tongdong b{color:#a86f00;font-size:18px}
.stx-stats .stat b{font-size:15px;white-space:normal;overflow-wrap:anywhere}
/* v226: nhap lieu phieu xe */
.stx-nl-the{font-size:11.5px;border-radius:8px;padding:2px 8px;background:#e3f6e8;color:#127a3f;margin-right:auto}
.stx-nl-the.cho{background:#fff4dd;color:#b45309}
.stx-nl-nut{background:#e3f6e8!important;color:#127a3f!important;border-color:#bfe6cb!important}
/* v227: the phieu xe trong khung chat */
.bubble.px-the{border-left:4px solid #15803d;max-width:320px;white-space:normal;background:#fff;color:var(--text)}
.bubble.px-the.xong{border-left-color:#16794c;background:#f4fbf6}
.bubble.px-the.xoa{border-left-color:#aab;opacity:.8}
.px-dau{font-size:13px;color:#0f5c2e;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.px-tt{font-size:11px;border-radius:8px;padding:1px 7px;background:#eceff3;color:#5b6472;margin-left:auto}
.px-tt.cho{background:#fff4dd;color:#b45309}.px-tt.xong{background:#e3f6e8;color:#127a3f}
.px-lenh{font-weight:800;font-size:15px;margin-top:4px}
.px-nv{font-size:12px;color:var(--muted)}
.px-ghi{font-size:13px;margin-top:4px}
.px-cp{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:13px}
.px-cp span{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #e6ebe7;padding:2px 0}
.px-tong{margin-top:6px;text-align:right;font-size:14px}.px-tong b{color:#a86f00;font-size:17px}
.px-xl{font-size:12px;color:#127a3f;margin-top:4px}
.msg.mine .bubble.px-the{color:var(--text)}
.msg .bubble.px-the{max-width:min(100%,380px)}
/* v228: bien so xe (bo phan cua lai xe) */
.stx-bs{font-size:12px;background:#eef6ff;color:#1d4ed8;border-radius:8px;padding:1px 7px;font-weight:700}
.px-bs{color:#1d4ed8}

/* v233: chon khach cho ten trung / khong tim thay (cap nhat cong no bang tin) */
.bubble.cnc-the{border-left:4px solid #d97706;white-space:normal;background:#fffaf0;color:var(--text);margin-top:4px;max-width:min(100%,400px)}
.bubble.cnc-the.xong{border-left-color:#16794c;background:#f4fbf6}
.msg.mine .bubble.cnc-the{color:var(--text)}
.cnc-dong{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:13px;border-bottom:1px dashed #eadfca;padding:4px 0}
.cnc-dong .cnc-ten{font-weight:600}.cnc-dong b{color:#a86f00}
.cnc-kq{margin-left:auto;font-size:12px;color:#b45309}.cnc-kq i{font-style:normal;color:var(--muted);margin-left:6px}
.cnc-dong.xong .cnc-kq{color:#127a3f}.cnc-dong.bo .cnc-kq{color:var(--muted)}
.cnc-muc{border:1px solid var(--border,#e3e6ea);border-radius:10px;padding:10px;margin-bottom:10px}
.cnc-dau{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:6px}
.cnc-trung,.cnc-khong{font-size:11.5px;border-radius:8px;padding:1px 8px;background:#fff4dd;color:#b45309}
.cnc-khong{background:#fde8e8;color:#b42318}
.cnc-so{margin-left:auto;font-size:13px;display:flex;align-items:center;gap:4px}.cnc-so input{width:130px;text-align:right}
.cnc-uv{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;border-radius:8px;cursor:pointer}
.cnc-uv:hover{background:rgba(0,0,0,.04)}.cnc-uv small{display:block;color:var(--muted);font-size:12px}
.cnc-tim{width:100%;margin-top:6px}
.cnc-kqtim{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.cnc-goiy{text-align:left;background:none;border:1px solid var(--border,#e3e6ea);border-radius:8px;padding:6px 8px;cursor:pointer;color:var(--text)}
.cnc-bo{display:flex;gap:8px;font-size:12.5px;color:var(--muted);margin-top:6px;cursor:pointer}
.cnc-chuagan{font-style:normal;color:#b42318;font-weight:600}
/* v236: don nhan vien huy - cho ke toan xu ly */
.ord-huycho{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11.5px;font-weight:800;background:#fde8e8;color:#b42318}
.oc-huy-xl{margin-top:6px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-huy-xl.cho{color:#b42318}.oc-huy-xl.xong{color:#127a3f}
.oc-huy-xl .btn-primary{margin-left:auto}
.gh-item.gh-may .gh-ai{max-width:170px}
/* v239: nhac khach lau chua lay hang */
.nlh{border:1px solid #f0dfae;background:#fffcf2;border-radius:10px;margin:0 0 12px;padding:0}
.nlh summary{cursor:pointer;padding:9px 12px;font-weight:700;color:#8a5a00}
.nlh-tom{font-weight:500;color:var(--muted);font-size:13px}.nlh-tom b{color:#b45309}.nlh-tat{color:#b42318!important}
.nlh-noi{padding:0 12px 12px}
.nlh-form{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:8px 0;font-size:14px}
.nlh-form label{display:flex;align-items:center;gap:6px}
.nlh-form input[type=number]{width:70px;padding:5px 7px;border:1px solid var(--line);border-radius:7px;text-align:center}
.nlh-nut{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.nlh-dem{font-size:13px;font-weight:700;margin:6px 0}
.nlh-nv{font-weight:700;margin:10px 0 4px;color:#0f5c2e}.nlh-nv span{color:var(--muted);font-weight:500}
.nlh-dong{font-size:13.5px;padding:4px 0;border-bottom:1px dashed #eadfca;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.nlh-dong small{flex-basis:100%;color:var(--muted);font-size:12px}
.nlh-so{margin-left:auto;font-weight:800;color:#b45309}
.nlh-sua{padding:2px 8px!important;font-size:12px!important}
.nlh-chon{display:flex;align-items:center;gap:8px;padding:7px 2px;font-size:14px;flex-wrap:wrap}
.cn-vaoso{font-size:12.5px;color:#127a3f;margin-top:2px}
/* v243: hop sua khach - MST / CCCD du rong de doc het so */
.kh-giayto .field{flex:1 1 230px;min-width:220px}
.kh-giayto .mst-o input{min-width:150px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* v245: bieu do KPI kinh doanh */
.kv{margin:4px 0 14px}
.kv-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.kv-so{background:#fcfcfb;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.kv-so span{font-size:12.5px;color:#52514e;font-weight:600}
.kv-so b{font-size:26px;line-height:1.15;color:#0b0b0b;font-weight:800}
.kv-so i{font-style:normal;font-size:12px;color:#898781}
.kv-loc{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;flex-wrap:wrap}
.kv-loc select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.kv-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.kv-khung{background:#fcfcfb;border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.kv-tieude{font-weight:700;font-size:13.5px;color:#0b0b0b;margin-bottom:6px}
.kv-cot{width:100%;min-height:190px;overflow:hidden}
.kv-cot svg{display:block}
.kv-truc{font-size:10.5px;fill:#898781;font-variant-numeric:tabular-nums}
.kv-dinh{font-size:11px;font-weight:700;fill:#0b0b0b}
.kv-hit{cursor:default;outline:none}.kv-hit.kv-sang,.kv-hit:focus{fill:rgba(11,11,11,.05)}
.kv-nv{display:flex;flex-direction:column;gap:7px}
.kv-nv-dong{display:grid;grid-template-columns:minmax(90px,150px) 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border-radius:6px;padding:2px 3px;outline:none}
.kv-nv-dong.kv-sang,.kv-nv-dong:focus{background:rgba(11,11,11,.04)}
.kv-nv-ten{grid-row:1/3;font-size:13px;font-weight:600;color:#0b0b0b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv-ray{position:relative;height:14px;display:block}
.kv-ray i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;display:block;max-width:100%}
.kv-moc{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1.5px solid #52514e}
.kv-nv-so{font-size:12px;color:#52514e;font-variant-numeric:tabular-nums}
.kv-bang summary{cursor:pointer;font-size:13px;color:var(--brand);margin:2px 0 6px}
.kv-tip{position:fixed;z-index:200;display:none;pointer-events:none;background:#fff;color:#0b0b0b;border:1px solid rgba(11,11,11,.12);border-radius:8px;
  padding:6px 10px;font-size:12.5px;font-weight:600;box-shadow:0 4px 14px rgba(20,32,60,.14);max-width:280px}

/* v249: quy dinh KPI trong "KPI cua toi" */
.kpi-qd{border:1px solid #f0d9a8;background:#fffaf0;border-radius:12px;margin-bottom:12px}
.kpi-qd>summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:14.5px;list-style:revert}
.kpi-qd .kqd-than{padding:0 14px 12px;font-size:14px;line-height:1.55}
.kpi-qd .kqd-tieu{font-weight:700;text-transform:uppercase;margin:2px 0 6px}
.kpi-qd .kqd-dieu{margin-top:8px}
.kpi-qd ul{margin:3px 0 0;padding-left:22px}
.kpi-qd li{margin:2px 0}

/* v250/v251: dien thoai — tab Don hang: [o tim][trang thai] mot hang; [📅 ngay][⚡ gap] hang duoi; ngay chon qua form */
.o-loc{display:none}
.lnd-ngat{display:none}
@media (max-width:640px){
  #viewOrders .filter-bar{gap:8px;align-items:center}
  #viewOrders .filter-bar .o-tim{order:1;flex:1 1 0;min-width:0}
  #viewOrders #ordStatus{order:2;flex:0 0 auto;width:136px;padding:8px 6px;font-size:14px}
  #viewOrders #ordFrom,#viewOrders #ordTo{display:none !important}
  #viewOrders .o-loc{order:4;display:inline-flex;align-items:center;white-space:nowrap}
  #viewOrders #btnOrdGap{order:5}
  #viewOrders .filter-bar .o-loc,#viewOrders .filter-bar #btnOrdGap{flex:0 0 auto}
  #viewOrders .filter-bar .lnd-ngat{display:block;order:3;flex:0 0 100%;height:0;margin:-4px 0}
  #viewOrders .o-loc.co-loc{border-color:var(--brand);color:var(--brand);font-weight:600}
  #viewOrders.dang-go .o-loc,#viewOrders.dang-go #btnOrdGap,#viewOrders.dang-go .lnd-ngat{display:none !important}
  #viewOrders.dang-go #ordBulk{display:none !important}
  /* v252: ✕ trong o tim: hien khi dang go (ke ca chua go chu) hoac con chu tim */
  #viewOrders .o-tim input{padding-right:42px}
  #viewOrders .o-tim .o-xoa{display:none;width:34px;height:34px;font-size:17px;right:3px}
  #viewOrders.dang-go .o-tim .o-xoa,#viewOrders .o-tim.co-chu .o-xoa{display:inline-flex;align-items:center;justify-content:center}
  #viewOrders.dang-go .o-tim .o-xoa{background:#e9edf3;color:#1b2434}
  /* thanh chon don: hang 1 = chon tat ca + dem; tich don moi hien nut, xep luoi deu */
  #ordBulk{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  #ordBulk .ord-pick{grid-column:span 3}
  #ordBulk .ord-pick-count{grid-column:span 3;text-align:right}
  #ordBulk button{display:none;justify-content:center;white-space:nowrap;padding:9px 6px;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #ordBulk.co-chon button:not(.hidden){display:inline-flex;align-items:center}
  #ordBulk #btnOrdDaNhap,#ordBulk #btnOrdDaGiao{grid-column:span 3;order:1}
  #ordBulk #btnOrdGapChon,#ordBulk #btnOrdBoGap,#ordBulk #btnOrdBulkDel{grid-column:span 2;order:2}
  #ordBulk:has(#btnOrdBulkDel.hidden) #btnOrdGapChon,#ordBulk:has(#btnOrdBulkDel.hidden) #btnOrdBoGap{grid-column:span 3}
  #ordBulk #btnOrdXuatPm{display:none !important}
}
/* form loc ngay */
.lnd-buoc{display:flex;gap:8px;margin-bottom:12px;font-size:13px}
.lnd-buoc span{flex:1;padding:6px 8px;border-radius:8px;background:#f1f3f7;color:var(--muted);text-align:center}
.lnd-buoc span.dang{background:#e6f0ff;color:var(--brand);font-weight:700}
.lnd-buoc span.xong{background:#e3f6e8;color:#127a3f}
.lnd-nhan{display:block;font-weight:700;margin-bottom:6px}
.lnd-in{width:100%;font-size:17px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lnd-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* v254: cot chiet khau tung ma hang tren the don trong nhom chat */
.oc-table td.oc-ck{color:#b45309;font-weight:600}
/* may tinh: cot rieng; dien thoai: nhan CK ngay duoi ma hang (cot dau luon nhin thay) */
.oc-ck-the{display:none}
@media (max-width:640px){
  .oc-table .oc-cot-ck{display:none}
  .oc-ck-the{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:6px;background:#fff4e5;color:#b45309;font-size:11.5px;font-weight:700;white-space:nowrap}
  .oc-ck-the.sua{background:#fdecec;color:var(--danger)}
}

/* v255: dien thoai — chi tiet don hang bo cot Ten hang cho do roi mat (ma hang da du de nhan biet) */
@media (max-width:640px){ .grid .c-tenhang{display:none} }

/* v256: dien thoai — chi tiet don hang gon: danh sach hang 2 dong, tong tien dang hoa don, nut xep luoi */
.odm-ds{display:none}
.ord-info .odm-dv{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
@media (max-width:640px){
  .ord-detail .od-bang{display:none}
  .ord-detail .odm-ds{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .odm-hang{padding:9px 12px;border-bottom:1px solid #eef1f5}
  .odm-hang:last-child{border-bottom:0}
  .odm-hang.moi{background:#fff5f5}
  .odm-hang.bo{color:var(--muted);font-size:12.5px;background:#fafbfc}
  .odm-d1{display:flex;align-items:center;gap:6px}
  .odm-ma{font-size:15px;letter-spacing:.2px}
  .odm-tien{margin-left:auto;font-weight:700;font-size:14.5px;white-space:nowrap}
  .odm-tien.sua{color:var(--danger)}
  .odm-d2{margin-top:3px;font-size:13px;color:#4a5568;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;line-height:1.6}
  .odm-x,.odm-dvg{color:var(--muted)}
  .odm-dvg{margin-left:-3px}
  .odm-o.sua{color:var(--danger);font-weight:700;background:#fdecec;border-radius:4px;padding:0 3px}
  .odm-ck{margin-left:4px;padding:0 7px;border-radius:6px;background:#fff4e5;color:#b45309;font-weight:700;font-size:12px}
  .odm-ck.sua{background:#fdecec;color:var(--danger)}
  /* tong tien: dang hoa don, tung dong trai - phai */
  .ord-detail .ord-info{display:block;margin:10px 0 12px;padding:4px 12px;background:#f6f8fb;border-radius:12px}
  .ord-detail .ord-info>div{flex-direction:row;justify-content:space-between;align-items:baseline;background:none;padding:6px 0;border-radius:0}
  .ord-detail .ord-info span{font-size:13px}
  .ord-detail .ord-info b{font-size:14px}
  .ord-detail .ord-info>div.odm-khong{display:none}
  .ord-detail .ord-info>div.odm-phaithu{border-top:1px dashed #cfd6e0;margin-top:2px;padding-top:8px}
  .ord-detail .ord-info .odm-phaithu span{font-size:14px;font-weight:700;color:var(--text,#1b2434)}
  .ord-detail .ord-info .odm-phaithu b{font-size:18px}
  /* nut: nut chinh (Da nhap lieu / Da giao) mot hang tren, nut phu luoi 3 cot */
  .ord-detail .od-nut{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .ord-detail .od-nut>button{grid-column:span 2;justify-content:center;padding:9px 4px;font-size:13px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ord-detail .od-nut>.btn-primary{grid-column:span 3;order:-1;padding:11px 6px;font-size:14px}
  .ord-detail .od-nut:not(:has([data-order-act="enter"])) [data-order-act="deliver"],
  .ord-detail .od-nut:not(:has([data-order-act="deliver"])) [data-order-act="enter"]{grid-column:span 6}
  .ord-detail .od-nut [data-order-act="cancel"],.ord-detail .od-nut [data-order-act="delete"]{color:var(--danger)}
}
@media (max-width:640px){ .ord-detail .od-nut .odm-an{display:none} }

/* v257: bao chuyen thieu hang theo tuyen */
.bc-nhan{font-weight:700;margin:12px 0 6px}
.bc-nhan:first-child{margin-top:0}
.bc-ds{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.bc-t{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.bc-t.on{border-color:var(--brand);background:#eef5ff}
.bc-t input{width:19px;height:19px;accent-color:var(--brand);flex-shrink:0}
.bc-t span{flex:1;min-width:0;font-size:14.5px}
.bc-xoa{border:0;background:transparent;color:#9aa4b2;font-size:15px;width:30px;height:30px;border-radius:50%;cursor:pointer}
.bc-xoa:hover{background:#fdecec;color:var(--danger)}
.bc-rong{padding:8px 2px}
.bc-them{display:flex;gap:8px;margin-top:8px}
.bc-them input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.bc-khi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bc-k{padding:11px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;cursor:pointer}
.bc-k.on{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:700}
#bcGhi{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;resize:vertical}

/* v258: tra MST tren trang Cuc thue + nhap ket qua */
.mst-tay{margin-top:10px;padding:11px 12px;border:1px dashed #c9d3e0;border-radius:10px;background:#f8fafc}
.mst-tay-b{font-size:13px;line-height:1.5;color:#3d4757}
.mst-tay-form{margin-top:10px;padding:12px;border:1px solid var(--brand);border-radius:10px;background:#f4f8ff}
.mst-tay-tieu{font-weight:600;margin-bottom:8px}

/* v259: thoi han ghi nhan KPI don trai vung khi bao tuyen */
.bc-phut{font-size:14px;line-height:2}
.bc-phut input{width:76px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;text-align:center;font-weight:700}
.bc-chay{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fff8e6;border:1px solid #f3dca5;font-size:13px;line-height:1.6}

/* v261 */
.mst-tay-b>div{margin-top:3px}
#ntDan{width:100%;padding:8px 10px;border:1px dashed var(--brand);border-radius:8px;font:inherit;font-size:13px;resize:vertical;background:#fff}

/* ====== v262: tab Hoa don ====== */
.hd-list{flex:1;overflow:auto;padding:12px 18px;display:flex;flex-direction:column;gap:10px;background:var(--bg,#f3f5f9)}
.hd-tom{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hd-the{background:#fff;border:1px solid var(--line);border-left:4px solid #f0a020;border-radius:12px;padding:11px 13px;max-width:760px;width:100%}
.hd-the.xong{border-left-color:#1a9a50}
.hd-the.trong-chat{border:0;border-left:0;padding:0;max-width:none;background:transparent}
.hd-bubble{background:#fff !important;color:var(--text,#1b2434) !important;border:1px solid var(--line);border-left:4px solid #f0a020;min-width:260px;max-width:440px}
.hd-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-ma{font-weight:700;font-size:14.5px}
.hd-tt{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#fff4e0;color:#a35f00}
.hd-tt.xong{background:#e3f6e8;color:#127a3f}
.hd-ten{font-weight:700;font-size:15px;margin-top:6px}
.hd-dong-tt{font-size:13px;color:#4a5568;margin-top:2px}
.hd-lay{font-size:13px;margin-top:6px;padding:6px 8px;background:#f6f8fb;border-radius:8px}
.hd-ds{margin-top:8px;border:1px solid #eef1f5;border-radius:10px;overflow:hidden}
.hd-hang{padding:7px 10px;border-bottom:1px solid #eef1f5}
.hd-hang:last-child{border-bottom:0}
.hd-hang-1{display:flex;gap:6px;align-items:baseline}
.hd-hang-ten{color:var(--muted);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-hang-tien{margin-left:auto;font-weight:700;white-space:nowrap}
.hd-hang-2{font-size:12.5px;color:#4a5568;margin-top:2px}
.hd-ghi{font-size:13px;margin-top:6px;color:#4a5568}
.hd-tong-the{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-size:13px;color:var(--muted)}
.hd-tong-the b{font-size:16px;color:var(--brand)}
.hd-meta{font-size:12px;color:var(--muted);margin-top:4px}
.hd-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.hd-nut .hd-xoa{color:var(--danger)}
/* form */
.hd-f .hd-muc{font-weight:700;margin:14px 0 6px;font-size:14.5px}
.hd-f .hd-muc:first-child{margin-top:0}
.hd-tim{position:relative}
.hd-tim input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.hd-goiy{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:260px;overflow:auto;margin-top:4px}
.hd-goiy button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:#fff;border-bottom:1px solid #f1f3f7;cursor:pointer;font-size:14px}
.hd-goiy button:hover{background:#eef5ff}
.hd-khchon{margin-top:6px;padding:8px 10px;background:#eef5ff;border:1px solid #cfe0ff;border-radius:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-khchon .btn-ghost{margin-left:auto}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hd-chips-nhan{width:100%;font-size:12.5px;color:var(--muted)}
.hd-chip{display:inline-flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative;text-align:left}
.hd-chip small{color:var(--muted);font-size:11.5px}
.hd-chip.da{border-color:#1a9a50;background:#effaf2}
.hd-chip.kh{padding-right:28px}
.hd-chip-x{position:absolute;top:2px;right:2px;border:0;background:transparent;color:#9aa4b2;width:22px;height:22px;border-radius:50%;cursor:pointer}
.hd-mst{display:flex;gap:8px}
.hd-mst input{flex:1;min-width:0}
.hd-dhang{border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-top:8px;background:#fff}
.hd-dhang-dau{display:flex;gap:8px;align-items:baseline}
.hd-dhang-dau span{color:var(--muted);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-bo{border:0;background:transparent;color:#9aa4b2;font-size:15px;width:28px;height:28px;border-radius:50%;cursor:pointer;margin-left:auto}
.hd-bo:hover{background:#fdecec;color:var(--danger)}
.hd-dhang-o{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.hd-dhang-o label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.hd-dhang-o input,.hd-dhang-o select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--text,#1b2434)}
.hd-dhang-o .o-tien input{text-align:right}
.hd-dhang-tt{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--muted)}
.hd-dhang-tt b{color:var(--text,#1b2434);font-size:14.5px}
.hd-rong{padding:8px 2px}
#hdGhi{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;resize:vertical}
.hd-tong{margin-top:12px;padding:6px 12px;background:#f6f8fb;border-radius:12px}
.hd-tong>div{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.hd-tong .hd-tong-tt{border-top:1px dashed #cfd6e0;margin-top:2px;padding-top:8px;font-weight:700}
.hd-tong .hd-tong-tt b{font-size:17px;color:var(--brand)}
@media (max-width:640px){
  .hd-list{padding:10px 10px}
  .hd-dhang-o{grid-template-columns:1fr 1fr}
}
.hd-bubble,.hd-bubble *{white-space:normal}
.hd-bubble{padding:10px 12px}
.hd-tong-the b{white-space:nowrap}.hd-tong-the{gap:8px}

/* v263: 2 don hang gan nhat trong form hoa don */
.hd-dongan{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.hd-dongan:empty{display:none}
.hd-don{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 12px;border:1px solid #cfe0ff;border-radius:10px;background:#f4f8ff;cursor:pointer;width:100%}
.hd-don:hover{border-color:var(--brand)}
.hd-don-1{display:flex;justify-content:space-between;gap:8px}
.hd-don-tien{font-weight:700;color:var(--brand);white-space:nowrap}
.hd-don-2{font-size:12.5px;color:var(--muted)}
.hd-xd-dau{padding:8px 10px;background:#f6f8fb;border-radius:10px;margin-bottom:8px}