/* Giao diện Nhà thuốc Tân Sơn */
:root{
  --ground:#F1F5FA; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EBF1F8;
  --line:#E4EBF4; --line-strong:#D2DDEB;
  --ink:#0F1B2D; --ink-2:#4A5B71; --ink-3:#8998AE;
  --pri:#1668DC; --pri-2:#3B8AF0; --pri-hover:#0F55BC; --pri-soft:#E8F1FE; --pri-line:#BAD6FB;
  --ok:#0E9F5B; --ok-soft:#E4F7EC; --ok-line:#A6E2C3;
  --warn:#C97706; --warn-soft:#FEF3E1; --warn-line:#F5D8A6;
  --crit:#D92D20; --crit-soft:#FDEDEC; --crit-line:#F6C2BE;
  --info:#0B8EAE; --info-soft:#E1F5FA; --info-line:#A7DEEB;
  --purple:#6E4BF0; --purple-soft:#EEEAFE;
  --paper:#FDFBF2; --paper-line:#DFD8C2; --paper-ink:#26324D;
  --sh-sm:0 1px 2px rgba(16,30,54,.06);
  --sh:0 1px 3px rgba(16,30,54,.07), 0 10px 24px -14px rgba(16,30,54,.16);
  --sh-lg:0 18px 48px -12px rgba(16,30,54,.28);
  --r:12px; --r-sm:8px;
}
/* Mặc định luôn là nền sáng. Nền tối chỉ bật khi bấm nút mặt trời trên thanh trên. */
:root[data-theme="dark"]{
  --ground:#0B1220; --surface:#121B2B; --surface-2:#182336; --surface-3:#1F2B41;
  --line:#22304A; --line-strong:#334566;
  --ink:#E7EDF6; --ink-2:#A6B5CB; --ink-3:#7889A2;
  --pri:#4F98F5; --pri-2:#77B0F8; --pri-hover:#75AEF8; --pri-soft:#132A4B; --pri-line:#23446F;
  --ok:#34C77F; --ok-soft:#0F2E22; --ok-line:#1D5540;
  --warn:#E0A03F; --warn-soft:#2E2312; --warn-line:#563F17;
  --crit:#F2776B; --crit-soft:#331A19; --crit-line:#5B2C28;
  --info:#3FB6D4; --info-soft:#0E2A33; --info-line:#1B4A58;
  --purple:#9A83F7; --purple-soft:#1F1B3D;
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh:0 1px 3px rgba(0,0,0,.4), 0 10px 24px -14px rgba(0,0,0,.6);
  --sh-lg:0 18px 48px -12px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
/* Thuộc tính hidden phải luôn thắng, kể cả khi thẻ có class đặt display */
[hidden]{display:none!important}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.015em}
p{margin:0}
a{color:var(--pri)}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.mono{font-family:inherit;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;color:var(--ink-2)}
/* Mã thuốc, mã đơn trong bảng: đóng khung nhẹ cho tách khỏi chữ thường */
.ma{display:inline-block;font-family:inherit;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap;
  color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;line-height:1.55}
tr[data-xoa="1"] .ma{opacity:.7}
.num{font-variant-numeric:tabular-nums}

/* ---------------- khung ---------------- */
.app{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:11px;padding:17px 18px 15px}
.brand__mark{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--pri-2),var(--pri));color:#fff;font-weight:700;font-size:15px;
  letter-spacing:-.03em;box-shadow:0 4px 12px -4px rgba(22,104,220,.55)}
/* Một dòng, dài quá thì cắt bằng ba chấm — tên nhà thuốc do người dùng tự đặt
   trong Cài đặt nên không đoán trước được dài bao nhiêu. Rớt xuống hai dòng
   là khối tên đội lên, đẩy lệch cả thanh menu. */
.brand__chu{min-width:0}
.brand__name{
  font-size:13.5px;font-weight:700;letter-spacing:-.03em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand__sub{
  font-size:9px;color:var(--ink-3);letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav{padding:0 12px 20px;display:flex;flex-direction:column;gap:3px}
.nav__label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:16px 8px 6px}
.nav__item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink-2);
  font-size:13.5px;font-weight:500;cursor:pointer;border:0;background:none;width:100%;text-align:left;
  font-family:inherit;transition:background .14s,color .14s}
.nav__item:hover{background:var(--surface-2);color:var(--ink)}
.nav__item[aria-current="true"]{background:var(--pri);color:#fff;font-weight:600;box-shadow:0 5px 14px -6px rgba(22,104,220,.7)}
.nav__item svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav__badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--crit);color:#fff;padding:1px 7px;border-radius:20px}
.nav__item[aria-current="true"] .nav__badge{background:rgba(255,255,255,.28)}
/* Nợ chưa tới mức báo động đỏ như đơn đang chờ xử lý — để màu cam cho đúng mức */
.nav__badge--no{background:var(--warn);color:#fff}
.nav__ai{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#fff;padding:2px 6px;border-radius:5px;
  background:linear-gradient(120deg,var(--purple),var(--pri))}
.side__duoi{margin-top:auto}
.side__foot{padding:14px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);line-height:1.5}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:25;background:var(--surface);border-bottom:1px solid var(--line);
  padding:0 26px;height:62px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-sm)}
.top__title{font-size:17px;font-weight:700;letter-spacing:-.025em}
.top__spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;width:280px;color:var(--ink-3);font-size:13px}
.search input{border:0;background:none;outline:none;font-family:inherit;font-size:13px;color:var(--ink);width:100%;min-width:0}
.kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;border:1px solid var(--line-strong);border-radius:5px;padding:1px 5px;color:var(--ink-3)}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn i{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--crit);border:1.5px solid var(--surface)}
.who{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;padding-left:6px;border-left:1px solid var(--line)}
.who__av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:linear-gradient(140deg,var(--pri-2),var(--pri));color:#fff}
.who__r{font-size:11px;color:var(--ink-3);font-weight:500}
.wrap{padding:22px 26px 70px;max-width:1400px;width:100%}

/* ---------------- thành phần ---------------- */
.btn{font-family:inherit;font-size:13px;font-weight:600;border-radius:9px;padding:9px 15px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:background .14s,border-color .14s,box-shadow .14s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 6px 16px -8px rgba(22,104,220,.8)}
.btn--pri:hover{background:var(--pri-hover);border-color:var(--pri-hover);color:#fff}
.btn--soft{background:var(--pri-soft);border-color:var(--pri-line);color:var(--pri)}
.btn--soft:hover{background:var(--pri-soft);border-color:var(--pri)}
.btn--sm{padding:6px 11px;font-size:12px;border-radius:7px}
.btn--ghost{border-color:transparent;background:transparent;color:var(--ink-3)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink);border-color:transparent}
.btn--danger{color:var(--crit);border-color:var(--crit-line);background:var(--crit-soft)}
.btn--danger:hover{background:var(--crit-soft);border-color:var(--crit)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card__h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.card__t{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.card__n{font-size:12px;color:var(--ink-3)}
.card__b{padding:18px}

.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sec{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.sec h2{font-size:15.5px;font-weight:700}
.sec__line{flex:1;height:1px;background:var(--line)}

.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g23{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g2,.g23{grid-template-columns:1fr}}

/* thẻ số liệu kiểu CRM */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:16px 17px;display:flex;gap:14px;align-items:flex-start}
.stat__ic{width:44px;height:44px;border-radius:11px;flex:none;display:grid;place-items:center}
.stat__ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-blue{background:var(--pri-soft);color:var(--pri)}
.ic-green{background:var(--ok-soft);color:var(--ok)}
.ic-orange{background:var(--warn-soft);color:var(--warn)}
.ic-red{background:var(--crit-soft);color:var(--crit)}
.ic-purple{background:var(--purple-soft);color:var(--purple)}
.ic-cyan{background:var(--info-soft);color:var(--info)}
/* Thẻ bấm được: đưa thẳng tới đúng chỗ dữ liệu làm ra con số đó */
button.stat{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;
  transition:border-color .14s,box-shadow .14s,transform .14s}
button.stat:hover{border-color:var(--pri-line);box-shadow:var(--sh-2,0 6px 18px rgba(15,32,60,.10));transform:translateY(-1px)}
button.stat:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
button.stat .stat__mui{position:absolute;top:14px;right:14px;width:15px;height:15px;
  stroke:var(--ink-3);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .14s,transform .14s}
button.stat:hover .stat__mui{opacity:1;transform:translateX(2px)}
.stat__k{font-size:12.5px;color:var(--ink-3);font-weight:500}
.stat__v{font-size:24px;font-weight:700;letter-spacing:-.035em;margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat__v small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.stat__d{font-size:12px;margin-top:5px;color:var(--ink-3)}
.up{color:var(--ok);font-weight:700}
.down{color:var(--crit);font-weight:700}

/* bảng */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child{border-top-left-radius:0}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--pri-soft)}
.tbl .n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl th.n{text-align:right}
.strong{font-weight:600}
.sub{font-size:12px;color:var(--ink-3)}
.money{font-weight:600;font-variant-numeric:tabular-nums}
.pos{color:var(--ok);font-weight:600}
.scroll-x{overflow-x:auto}
.card>.scroll-x:first-child .tbl th{border-radius:0}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:7px;
  border:1px solid;white-space:nowrap;line-height:1.5}
.t-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.t-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.t-crit{background:var(--crit-soft);color:var(--crit);border-color:var(--crit-line)}
.t-info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.t-pri{background:var(--pri-soft);color:var(--pri);border-color:var(--pri-line)}
.t-mute{background:var(--surface-3);color:var(--ink-3);border-color:var(--line)}


/* ---------------- form ---------------- */
.fsec{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.fsec__bar{width:3px;height:18px;border-radius:2px;background:var(--pri);flex:none}
.fsec__t{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.fsec__n{font-size:12px;color:var(--ink-3);font-weight:400}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.fgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.fgrid,.fgrid--3{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.full{grid-column:1/-1}
.fld>label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.req{color:var(--crit);font-weight:700}
.inp{font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 12px;height:40px;width:100%;outline:none;
  transition:border-color .14s,box-shadow .14s}
select.inp{padding-right:8px;cursor:pointer}
textarea.inp{height:auto;padding:10px 12px;resize:vertical;line-height:1.55;font-family:inherit}
.inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.inp:disabled,.inp[readonly]{background:var(--surface-2);color:var(--ink-2)}
.inp--n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.inp--sm{height:32px;font-size:12.5px;padding:0 9px;border-radius:7px}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.45}
/* Dải cho biết đang xem lát cắt nào, kèm nút bỏ lọc */
.dang-loc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 13px;border:1px solid var(--pri-line);background:var(--pri-soft);border-radius:10px;font-size:12.5px}
.dang-loc b{font-weight:700}
/* Nút trông như đường dẫn — dùng cho hành động phụ nằm lọt trong câu chữ */
.lien-ket{background:none;border:0;padding:0;font:inherit;color:var(--pri);
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lien-ket:hover{color:var(--pri-hover)}
.lien-ket:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
.ig{display:flex;align-items:stretch}
.ig .inp{border-top-right-radius:0;border-bottom-right-radius:0}
.ig__s{display:grid;place-items:center;padding:0 12px;background:var(--surface-2);border:1px solid var(--line-strong);
  border-left:0;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.choice{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.choice label{border:1.5px solid var(--line-strong);border-radius:10px;padding:11px 13px;cursor:pointer;
  display:flex;gap:10px;align-items:flex-start;transition:border-color .14s,background .14s}
.choice label:hover{border-color:var(--ink-3)}
.choice label:has(input:checked){border-color:var(--pri);background:var(--pri-soft)}
.choice input{margin:3px 0 0;accent-color:var(--pri);flex:none}
.choice b{display:block;font-size:13px;font-weight:600}
.choice span{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.sw__t{font-size:13px;font-weight:600}
.sw__d{font-size:11.5px;color:var(--ink-3)}
.sw input{appearance:none;width:40px;height:23px;border-radius:20px;background:var(--line-strong);
  position:relative;cursor:pointer;flex:none;margin:0;transition:background .16s}
.sw input::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .16s}
.sw input:checked{background:var(--pri)}
.sw input:checked::after{left:19.5px}
.upload{border:1.5px dashed var(--line-strong);border-radius:10px;padding:22px 16px;text-align:center;
  background:var(--surface-2);color:var(--ink-3);font-size:12.5px;cursor:pointer;transition:border-color .14s,background .14s}
.upload:hover{border-color:var(--pri);background:var(--pri-soft)}
.upload b{display:block;color:var(--ink-2);font-size:13px;margin-top:6px}
.upload svg{width:26px;height:26px;stroke:var(--pri);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.calcbox{background:linear-gradient(135deg,var(--pri-soft),var(--surface-2));border:1px solid var(--pri-line);
  border-radius:11px;padding:14px 16px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.calcbox__k{font-size:11.5px;color:var(--ink-3);font-weight:600}
.calcbox__v{font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:1px}
.formbar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:14px 18px;display:flex;gap:10px;justify-content:flex-end;align-items:center;
  border-radius:0 0 var(--r) var(--r);box-shadow:0 -6px 18px -14px rgba(16,30,54,.4)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal[data-open="true"]{display:block}
.modal__bg{position:absolute;inset:0;background:rgba(11,20,36,.5)}
.modal__box{position:relative;margin:42px auto;width:min(760px,calc(100% - 32px));background:var(--surface);
  border-radius:14px;box-shadow:var(--sh-lg);overflow:hidden;max-height:calc(100vh - 84px);display:flex;flex-direction:column}
.modal__h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal__b{padding:22px;overflow-y:auto}
.modal__f{padding:15px 22px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;gap:10px;justify-content:flex-end}

/* thanh lọc */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filters .fld{width:190px}
.filters .fld--wide{width:250px}
.filters .fld--full{flex:1 1 260px;width:auto;min-width:220px}

/* stepper */
.steps{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.stp{flex:1;padding:14px 16px;display:flex;gap:11px;align-items:center;min-width:0;position:relative}
.stp+.stp{border-left:1px solid var(--line)}
.stp__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--surface-3);color:var(--ink-3)}
.stp[data-s="done"] .stp__n{background:var(--ok);color:#fff}
.stp[data-s="now"]{background:var(--pri-soft)}
.stp[data-s="now"] .stp__n{background:var(--pri);color:#fff;box-shadow:0 0 0 4px var(--pri-soft)}
.stp__t{font-size:13px;font-weight:600;line-height:1.3}
.stp__d{font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}

/* giấy viết tay */
.paper{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:6px;
  padding:16px 20px 20px;font-family:Caveat,"Segoe Script",cursive;font-size:21px;line-height:1.9;
  background-image:repeating-linear-gradient(var(--paper) 0 30px,var(--paper-line) 30px 31px);
  background-size:100% 31px;background-position:0 9px;transform:rotate(-.6deg);box-shadow:0 6px 20px -8px rgba(16,30,54,.35)}
.paper__h{font-size:20px;text-decoration:underline;text-underline-offset:4px}
.paper__r{display:flex;justify-content:space-between;gap:18px}
/* Giữ nguyên xuống dòng của khách, không tự bẻ giữa dòng — bẻ là lệch cột,
   nhìn không ra khách viết gì. Dài quá thì cuộn ngang trong khung này thôi. */
.raw{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.9;white-space:pre;
  overflow-x:auto;overscroll-behavior-x:contain;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--ink-2)}

/* POS */
.cart-search{position:relative}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:11px;overflow:hidden;box-shadow:var(--sh-lg);max-height:270px;overflow-y:auto}
.sugg__i{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugg__i:last-child{border-bottom:0}
.sugg__i:hover{background:var(--pri-soft)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:13px}
.row+.row{border-top:1px solid var(--line)}
.row__v{font-weight:600;font-variant-numeric:tabular-nums}
.row--tot{border-top:2px solid var(--line-strong)!important;padding-top:13px;margin-top:4px}
.row--tot .row__k{font-size:13.5px;font-weight:600}
.row--tot .row__v{font-size:22px;font-weight:700;color:var(--pri);letter-spacing:-.03em}

/* ---- Biểu đồ 12 tháng ---- */
.bd{position:relative}
.bd svg{display:block;width:100%;height:auto}
.bd__cot{cursor:pointer}
.bd__cot rect.bd__vung{fill:transparent}
.bd__cot:hover rect.bd__vung{fill:var(--pri);opacity:.05}
.bd__cot:focus-visible{outline:none}
.bd__cot:focus-visible rect.bd__vung{fill:var(--pri);opacity:.1}
.bd__chu{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.5;
  white-space:nowrap;box-shadow:0 8px 22px rgba(15,32,60,.24);transition:opacity .12s}
.bd__chu[data-hien="1"]{opacity:1}
.bd__chu b{font-weight:700;font-variant-numeric:tabular-nums}
.bd__chu i{display:block;font-style:normal;opacity:.65;font-size:11px;margin-bottom:3px}
.bd__chu s{display:block;text-decoration:none;opacity:.75;font-size:11px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:4px}
.bar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden;min-width:64px}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pri-2),var(--pri))}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:5px;box-shadow:var(--sh-sm);width:fit-content;max-width:100%;overflow-x:auto}
.tab{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-3);
  padding:8px 15px;cursor:pointer;border-radius:8px;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--pri);color:#fff}
.tab:hover[aria-selected="false"]{background:var(--surface-2);color:var(--ink)}
.tabtag{margin-left:8px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;border:1px solid}
.tab[aria-selected="true"] .tabtag{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.35)}
.tpanel{display:none}
.tpanel[data-active="true"]{display:block}

.note{background:var(--pri-soft);border:1px solid var(--pri-line);border-radius:11px;padding:13px 16px;
  font-size:13px;line-height:1.55;color:var(--ink-2);display:flex;gap:12px}
.note svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:var(--pri);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note b{color:var(--ink)}

.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
@media(max-width:1180px){.split{grid-template-columns:1fr}}
.screen{display:none}
.screen[data-active="true"]{display:block}

/* lộ trình */
.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.roadmap{grid-template-columns:1fr}}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column}
.phase__h{padding:16px 18px;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.ph1 .phase__h{background:linear-gradient(135deg,var(--pri-soft),transparent)}
.ph2 .phase__h{background:linear-gradient(135deg,var(--purple-soft),transparent)}
.ph3 .phase__h{background:linear-gradient(135deg,var(--info-soft),transparent)}
.phase__n{font-size:10.5px;font-weight:800;letter-spacing:.11em;color:var(--ink-3)}
.phase__t{font-size:16px;font-weight:700;margin-top:4px;letter-spacing:-.03em}
.phase__d{font-size:12px;color:var(--ink-3);margin-top:4px}
.mod{padding:13px 18px}
.mod+.mod{border-top:1px solid var(--line)}
.mod__t{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.list{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.list li{font-size:12.5px;color:var(--ink-2);padding-left:17px;position:relative;line-height:1.5}
.list li::before{content:"";position:absolute;left:2px;top:6px;width:7px;height:7px;border-radius:2px;
  background:var(--pri-soft);border:1.5px solid var(--pri-line)}
.legend{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--ink-2);font-weight:500}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* ---------- thông báo nổi ---------- */
.toast-khu{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{
  background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--ok);
  border-radius:10px;padding:12px 16px;box-shadow:var(--sh-lg);font-size:13px;font-weight:500;
  max-width:420px;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;
}
.toast--hien{opacity:1;transform:none}
.toast--loi{border-left-color:var(--crit)}

/* ---------- vài chỉnh nhỏ cho bản chạy thật ---------- */
.tabtag{margin-left:8px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;border:1px solid}
.tab[aria-selected="true"] .tabtag{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.35)}
.tpanel{display:none}
.tpanel[data-active="true"]{display:block}
.top .cart-search{position:relative}
.top .sugg{top:calc(100% + 10px);left:auto;right:0;width:380px}
.tbl tbody tr:hover .inp{background:var(--surface)}
input[type="date"].inp{padding-right:8px}
.modal__box .fgrid{gap:14px 16px}

/* ================================================================
   MÀN HÌNH NHỎ — điện thoại và máy tính bảng
   Menu trái biến thành ngăn kéo, mọi lưới xếp dọc lại,
   nút bấm to lên cho vừa đầu ngón tay.
   ================================================================ */

.nut-menu{display:none}
.man-che{display:none}

@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}

  /* Menu trái thành ngăn kéo trượt ra */
  .side{
    position:fixed;top:0;bottom:0;left:0;width:284px;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;
    border-right:1px solid var(--line);
  }
  body[data-menu="mo"] .side{transform:none;box-shadow:0 0 44px rgba(11,20,36,.35)}
  .man-che{
    position:fixed;inset:0;background:rgba(11,20,36,.45);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .22s;
  }
  body[data-menu="mo"] .man-che{display:block;opacity:1;pointer-events:auto}

  .nut-menu{display:grid}
  .top{padding:0 14px;gap:10px;height:56px}
  .top__title{font-size:15.5px}
  .search{width:auto;flex:1;min-width:0;max-width:none}
  .who__r,.who>div>div:first-child{display:none}
  .who{padding-left:0;border-left:0}

  .wrap{padding:16px 14px 80px}
  .g4,.g3,.g2,.g23,.split,.roadmap,.fgrid,.fgrid--3{grid-template-columns:minmax(0,1fr)}
  .filters .fld,.filters .fld--wide{width:100%}
  /* fld--full khai flex:1 1 260px. Xếp ngang thì 260px là bề ngang, nhưng ở đây
     hàng lọc xếp dọc nên nó thành CHIỀU CAO — ô bị kéo cao ngoẵng, chừa một
     khoảng trắng to tướng bên dưới. Phải gỡ flex ra ở khổ hẹp. */
  .filters .fld--full{flex:none;width:100%}
  .filters{flex-direction:column;align-items:stretch}
  .filters .top__spacer{display:none}
  .filters .btn{justify-content:center}

  /* Bấm bằng ngón tay cần vùng chạm to hơn */
  .btn{min-height:42px;padding:10px 15px}
  .btn--sm{min-height:34px}
  .nav__item{padding:11px 12px;font-size:14px}
  .inp{height:44px;font-size:16px}     /* 16px để iPhone không tự phóng to trang */
  .inp--sm{height:38px;font-size:15px}
  select.inp{font-size:15px}

  .modal__box{margin:0;width:100%;max-height:100vh;height:100vh;border-radius:0}
  .modal__b{padding:16px}
  .modal__h,.modal__f{padding:14px 16px}
  .modal__f{flex-wrap:wrap}
  .modal__f .btn{flex:1;justify-content:center;min-width:120px}
  .modal__f .btn[style*="margin-right: auto"]{flex-basis:100%}

  .card__h{padding:13px 14px}
  .card__b{padding:14px}
  .stat{padding:13px 14px}
  .stat__v{font-size:21px}
  .tbl th,.tbl td{padding:10px 11px}
  .row--tot .row__v{font-size:19px}
  .formbar{padding:12px 14px}
  .toast-khu{left:14px;right:14px;bottom:14px;align-items:stretch}
  .toast{max-width:none}
}

@media (max-width:640px){
  .wrap{padding:14px 11px 80px}
  .top__title{font-size:var(--m-tieu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
  .search{padding:6px 9px}
  .search .kbd{display:none}
  .sec h2{font-size:var(--m-tieu)}
  .stat{gap:11px}
  .stat__ic{width:38px;height:38px;border-radius:10px}
  .stat__ic svg{width:18px;height:18px}
  .stat__v{font-size:var(--m-so)}
  .tabs{width:100%}
  .tab{padding:9px 12px;font-size:var(--m-phu)}
  .tabtag{display:none}
  .card__t{font-size:var(--m-tieu)}
  .paper{font-size:var(--m-tieu)}
  .top .sugg{width:auto;left:0;right:0}
}

/* ---------- thẻ chọn nguồn nhập ---------- */
.the-chon{
  font-family:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:18px;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start;transition:border-color .14s,box-shadow .14s,transform .1s;
}
.the-chon:hover{border-color:var(--pri);box-shadow:0 8px 24px -10px rgba(22,104,220,.4)}
.the-chon:active{transform:scale(.99)}
.the-chon[aria-pressed="true"]{border-color:var(--pri);background:var(--pri-soft)}
.the-chon__t{font-size:15px;font-weight:700;letter-spacing:-.02em}
.the-chon__d{font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* ---------- bước 2: nguồn bên trái, đối chiếu bên phải ---------- */
/* Cột trái chỉ là để đối chiếu bằng mắt, hẹp vừa đủ đọc. Chỗ trống nhường hết
   cho bảng bên phải — chỗ đó có dropdown, ô số lượng, tiền, dễ rớt dòng nhất. */
/* Cột trái rộng vừa đúng dòng dài nhất của đơn khách gửi, không hơn.
   fit-content: bám theo nội dung nhưng không vượt quá mức trần.
   Chỗ dư bao nhiêu dồn hết cho bảng đối chiếu bên phải. */
.doi-chieu-khu{display:grid;grid-template-columns:fit-content(38%) minmax(0,1fr);
  gap:16px;align-items:start}
@media (max-width:1100px){ .doi-chieu-khu{grid-template-columns:minmax(0,1fr)} }

/* ---- thu gọn khối "Đơn khách gửi" ----
   Đối chiếu xong mấy dòng đầu là hết cần nhìn đơn gốc, mà cột chọn thuốc bên
   phải thì lúc nào cũng thiếu chỗ. Gập lại là nhường hết bề ngang cho nó. */
.nut-gon-nguon{padding:5px 7px;min-width:0}
.nut-gon-nguon svg{width:15px;height:15px;transition:transform .18s}

.doi-chieu-khu[data-gon="1"]{grid-template-columns:auto minmax(0,1fr)}
.doi-chieu-khu[data-gon="1"] #bwNguonKhu .card__b{display:none}
.doi-chieu-khu[data-gon="1"] #bwNguonKhu .card__t{display:none}
.doi-chieu-khu[data-gon="1"] #btnSuaNguon{display:none}
.doi-chieu-khu[data-gon="1"] #bwNguonKhu .card__h{padding:10px;gap:0}
.doi-chieu-khu[data-gon="1"] .nut-gon-nguon svg{transform:rotate(180deg)}

/* Màn hẹp thì hai khối vốn đã xếp dọc, gập chẳng được thêm bề ngang nào */
@media (max-width:1100px){ .nut-gon-nguon{display:none} }

/* Bảng đối chiếu: cột nào cũng chỉ lấy đúng chỗ nó cần, phần dư dồn cho
   cột chọn thuốc — dropdown dài mới là thứ cần rộng. */
/* Bảng cố định: bề rộng cột tính từ bề rộng bảng, không bao giờ tràn ra
   ngoài khung. Mấy cột số khai bằng px vì nội dung cố định; cột chọn thuốc
   để trống nên nuốt hết phần còn lại. */
.doi-chieu-khu .tbl{table-layout:fixed;width:100%}
.doi-chieu-khu .tbl col.c-goc{width:22%}
.doi-chieu-khu .tbl col.c-dvt{width:84px}
.doi-chieu-khu .tbl col.c-sl{width:78px}
.doi-chieu-khu .tbl col.c-tt{width:98px}
.doi-chieu-khu .tbl col.c-bo{width:50px}
.doi-chieu-khu .tbl th,.doi-chieu-khu .tbl td{white-space:nowrap}
.doi-chieu-khu .tbl .dc-o{white-space:normal}
/* Cột chọn thuốc: đủ rộng để đọc được tên, màn hẹp thì bóp lại (xem media bên dưới) */

.doi-chieu-khu .tbl th,.doi-chieu-khu .tbl td{padding-left:10px;padding-right:10px}
.doi-chieu-khu .tbl th:first-child,.doi-chieu-khu .tbl td:first-child{padding-left:16px}

/* Cột trái gọn: bỏ cột ĐVT rỗng cho đỡ chật */
#bwNguonKhu .tbl td,#bwNguonKhu .tbl th{padding-left:12px;padding-right:12px}

/* Bước đang làm thì tô đậm */
.stp{cursor:default}
.buoc{animation:hienRa .18s ease}
@keyframes hienRa{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .buoc{animation:none} }

/* ---- Ô mời tải file Excel mẫu ---- */
.mau-tai{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;
  border:1px dashed var(--line);border-radius:11px;background:var(--pri-soft)}
.mau-tai__ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;
  background:#fff;color:var(--pri);box-shadow:0 1px 2px rgba(16,32,64,.08)}
.mau-tai__ic svg{width:20px;height:20px}
.mau-tai__t{font-weight:650;font-size:13px;color:var(--ink)}
.mau-tai__d{font-size:12px;color:var(--ink-2);line-height:1.55;margin-top:2px}

/* ---- Ảnh tờ đơn chọn để cho AI đọc ---- */
.anh-ds{display:grid;gap:11px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.anh-ds:empty{display:none}
.anh-o{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface-2)}
.anh-o img{display:block;width:100%;height:112px;object-fit:cover}
.anh-o__t{padding:6px 8px;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anh-o__x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:7px;
  background:rgba(12,20,34,.62);color:#fff;font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0}
.anh-o__x:hover{background:var(--crit)}

/* ============================================================
   HỘP CHỌN TỰ VẼ (thay dropdown mặc định của trình duyệt)
   Thẻ <select> thật vẫn nằm bên trong, chỉ bị giấu đi.
   ============================================================ */
.chon{position:relative;width:100%}
.chon>select{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%}

.chon__nut{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 11px 0 12px;
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink);text-align:left;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  cursor:pointer;outline:none;transition:border-color .14s,box-shadow .14s,background .14s}
.chon__nut:hover{border-color:var(--pri-line)}
.chon__nut:focus-visible{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.chon--mo .chon__nut{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.chon__nutChu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chon--trong .chon__nutChu{color:var(--ink-3);font-weight:400}
.chon__mui{width:15px;height:15px;flex:0 0 15px;color:var(--ink-3);transition:transform .18s,color .14s}
.chon--mo .chon__mui{transform:rotate(180deg);color:var(--pri)}
.chon--khoa .chon__nut{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
.chon--khoa .chon__nut:hover{border-color:var(--line-strong)}
.chon--sm .chon__nut{height:32px;font-size:12.5px;padding:0 8px 0 9px;border-radius:7px}

.chon__ds{position:fixed;z-index:200;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;
  box-shadow:var(--sh-lg);animation:chonHien .13s ease-out}
@keyframes chonHien{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chon__ds{animation:none}.chon__mui{transition:none}}

.chon__tim{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);
  background:var(--surface-2);flex:0 0 auto}
.chon__tim svg{width:14px;height:14px;flex:0 0 14px;color:var(--ink-3)}
.chon__tim input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:13px;color:var(--ink)}

.chon__cuon{overflow-y:auto;padding:5px;flex:1 1 auto;overscroll-behavior:contain}
.chon__muc{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:7px;cursor:pointer;
  font-size:13.5px;color:var(--ink);line-height:1.35}
.chon__chu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chon__tick{width:15px;height:15px;flex:0 0 15px;color:var(--pri);opacity:0}
.chon__muc--roi{background:var(--surface-3)}
.chon__muc--chon{color:var(--pri);font-weight:600}
.chon__muc--chon .chon__tick{opacity:1}
.chon__muc--khoa{color:var(--ink-3);cursor:not-allowed}
.chon__trong{padding:16px 10px;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* Trên điện thoại cho ngón tay bấm thoải mái */
@media (max-width:1023px){
  .chon__nut{height:44px;font-size:16px}
  .chon__muc{padding:11px 10px;font-size:15px}
  .chon__tim input{font-size:16px}
}

/* ---- Nút xoá ---- */
.btn--nguy{padding:9px 10px;color:var(--ink-3);
  justify-content:center;gap:0;
  transition:color .14s,background .14s,border-color .14s,transform .1s}
.btn--nguy svg{margin:0;transition:stroke .14s}
/* Rê vào thì đỏ nhạt, bấm xuống thì đỏ hẳn và thụt nhẹ — bấm trên điện thoại
   không có chuyện rê chuột, phải thấy phản hồi ngay lúc chạm mới yên tâm. */
.btn--nguy:hover,.btn--nguy:focus-visible{color:var(--crit);border-color:var(--crit-line);
  background:var(--crit-soft)}
.btn--nguy:active{color:#fff;background:var(--crit);border-color:var(--crit);transform:scale(.92)}
.btn--nguy:active svg{stroke:#fff}
.btn--nguy-dac{background:var(--crit);border-color:var(--crit);color:#fff;
  box-shadow:0 6px 16px -8px rgba(217,45,32,.8)}
.btn--nguy-dac:hover{background:#B9251A;border-color:#B9251A;color:#fff}
/* Nút lọc nhanh — xanh lá cho khác hẳn nút xanh dương "thêm mới" bên cạnh */
.btn--la{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.btn--la:hover{border-color:var(--ok);background:var(--ok-soft)}
.btn--la svg{stroke:var(--ok)}
.btn--la[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#fff}
.btn--la[aria-pressed="true"] svg{stroke:#fff}

/* ---- Khu thông tin thêm, gấp lại cho gọn ---- */
.them{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);overflow:hidden;margin-top:22px}
.them>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 15px;font-size:13px;font-weight:600;color:var(--ink-2);user-select:none}
.them>summary::-webkit-details-marker{display:none}
.them>summary:hover{color:var(--ink);background:var(--surface-3)}
.them__mui{width:15px;height:15px;flex:0 0 15px;color:var(--ink-3);transition:transform .18s}
.them[open] .them__mui{transform:rotate(90deg)}
.them__d{font-weight:400;font-size:12px;color:var(--ink-3)}
.them__than{padding:4px 15px 17px;background:var(--surface)}
.them[open]>summary{border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.them__mui{transition:none}}

/* ============================================================
   THANH CÔNG CỤ CỦA BẢNG — ẩn/hiện cột, sắp xếp
   ============================================================ */
.bang-thanh{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:9px 14px 0;flex-wrap:wrap}
/* Nút đứng bên trái thanh (Đã xoá) thì đẩy phần còn lại sang phải */
.bang-thanh>#btnThungRac{margin-right:auto}
.bang-thanh+.tbl{margin-top:4px}
.bang-so{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
  margin-left:1px;border-radius:5px;background:var(--pri);color:#fff;font-size:10px;font-weight:700}
.bang-so:empty{display:none}
.btn--dang{border-color:var(--pri-line);background:var(--pri-soft);color:var(--pri)}

.bang-chip{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 9px;border-radius:7px;
  border:1px solid var(--pri-line);background:var(--pri-soft);color:var(--pri);
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1.6}
.bang-chip svg{width:13px;height:13px}
.bang-chip__x{font-size:15px;line-height:1;opacity:.65;padding:0 2px}
.bang-chip:hover .bang-chip__x{opacity:1}

/* Tiêu đề bấm được để sắp xếp */
.tbl th.th--sap{cursor:pointer;user-select:none;position:relative;padding-right:21px}
.tbl th.th--sap:hover{color:var(--pri)}
.tbl th.th--sap::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;
  margin-top:-3px;opacity:0;transition:opacity .12s;
  background:currentColor;
  clip-path:polygon(50% 0,100% 45%,62% 45%,62% 100%,38% 100%,38% 45%,0 45%)}
.tbl th.th--sap:hover::after{opacity:.3}
.tbl th[data-chieu]{color:var(--pri)}
.tbl th[data-chieu]::after{opacity:1}
.tbl th[data-chieu="giam"]::after{transform:rotate(180deg)}
.tbl th.n.th--sap{padding-right:21px}

/* Bảng chọn cột */
.bang-menu{position:fixed;z-index:220;width:236px;padding:11px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--sh-lg)}
.bang-menu__d{font-size:11.5px;color:var(--ink-3);line-height:1.5;padding:0 4px 9px}
.bang-menu__ds{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;
  overscroll-behavior:contain}
.bang-menu__m{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
  cursor:pointer;font-size:13px;color:var(--ink)}
.bang-menu__m:hover{background:var(--surface-2)}
.bang-menu__m input{width:15px;height:15px;flex:0 0 15px;accent-color:var(--pri);cursor:pointer}
.bang-menu__m span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bang-menu__het{width:100%;margin-top:9px;padding:8px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2);
  font-family:inherit;font-size:12.5px;font-weight:600}
.bang-menu__het:hover{background:var(--surface-3);color:var(--ink)}

@media (max-width:1023px){
  .bang-menu{width:calc(100vw - 24px);max-width:300px}
  .bang-menu__m{padding:10px 8px;font-size:14.5px}
}

/* ---- Nút thêm mục mới trong hộp chọn ---- */
.chon__them{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;
  border:0;border-top:1px solid var(--line);background:var(--pri-soft);color:var(--pri);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;flex:0 0 auto}
.chon__them:hover{background:var(--pri-line)}
.chon__them svg{width:15px;height:15px;flex:0 0 15px}
.chon__them span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Danh mục: chip bán chạy + chọn nhiều dòng ---- */
.dm-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dm-top:empty{display:none}
.dm-top .bang-chip{cursor:pointer}
.dm-top .bang-chip b{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;
  background:var(--pri);color:#fff;font-size:10px}

.chon-thanh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:11px 15px;border-radius:11px;border:1px solid var(--pri-line);background:var(--pri-soft)}
.chon-thanh>svg{width:17px;height:17px;flex:0 0 17px;color:var(--pri)}
.chon-thanh b{font-size:13px;color:var(--pri)}

.tbl th.th--tick,.tbl td.th--tick{width:38px;padding-left:14px;padding-right:0}
.tbl .th--tick input{width:15px;height:15px;accent-color:var(--pri);cursor:pointer;vertical-align:middle}
.tbl th.th--tick{cursor:default}

/* ---- Nút lưu trong bảng chọn cột / menu ---- */
.bang-menu__luu{display:flex;gap:7px;margin-top:9px}
.bang-menu__luu .btn{flex:1;justify-content:center}
.luu-bao{font-size:11.5px;font-weight:600;color:var(--ok);display:flex;align-items:center;gap:5px}
.luu-bao svg{width:13px;height:13px}
.luu-bao[hidden]{display:none!important}

/* ---- Nhận đơn: nhắc khách đang chọn ---- */
.khach-dang{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;
  border-radius:11px;border:1px solid var(--pri-line);background:var(--pri-soft)}
.khach-dang__ic{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:#fff;color:var(--pri);box-shadow:var(--sh-sm)}
.khach-dang__ic svg{width:18px;height:18px}
.khach-dang__t{font-weight:650;font-size:13.5px;color:var(--ink)}
.khach-dang__d{font-size:12px;color:var(--ink-2);margin-top:1px}

/* ---- Chọn thuốc từ danh mục ---- */
.goi-y{display:flex;flex-direction:column;gap:3px;margin-top:8px;max-height:300px;overflow-y:auto;
  overscroll-behavior:contain}
.goi-y:empty{display:none}
.goi-y__m{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;
  font-family:inherit;font-size:13.5px;color:var(--ink)}
.goi-y__m:hover{border-color:var(--pri-line);background:var(--pri-soft)}
.goi-y__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.goi-y__g{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.goi-y__trong{padding:16px;text-align:center;font-size:12.5px;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:9px}

/* Thanh bước có 4 ô thì cho xuống hai hàng trên màn hẹp */
@media (max-width:1200px){ .steps--4{flex-wrap:wrap} .steps--4 .stp{flex:1 1 240px} }

/* ---- Bảng đối chiếu: mỗi dòng gọn trên một hàng ---- */
.dc-goc{line-height:1.35;max-width:200px}
/* Tên khách viết dài quá thì cắt bớt, rê chuột vào xem đủ */
.dc-goc .strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.dc-goc .tag{margin-top:3px}
.dc-o{padding-right:6px}
.dc-dvt{font-size:12.5px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dc-chon{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.dc-chon .chon{flex:1;min-width:0}
.dc-chon .btn--soft{flex:0 0 auto;padding:0 9px;height:32px}
.dc-chon .btn--soft svg{margin:0;width:14px;height:14px}
.tbl input.dc-sl{width:56px}
.chon__con{padding:9px 10px;text-align:center;font-size:11.5px;color:var(--ink-3);
  border-top:1px dashed var(--line);margin-top:3px}
/* Cột SL và cột nút bỏ dòng: bớt lề cho vừa khít, khỏi tràn ra ngoài */
.doi-chieu-khu .tbl th:nth-last-child(2),.doi-chieu-khu .tbl td:nth-last-child(2){padding-right:8px}
.doi-chieu-khu .tbl th:last-child,.doi-chieu-khu .tbl td:last-child{padding-left:4px;padding-right:8px}

/* ---- Dòng bảng bấm được ---- */
.tbl tr.dong-bam{cursor:pointer}
.tbl tr.dong-bam:hover>td{background:var(--pri-soft)}
.tbl tr.dong-bam:active>td{background:var(--pri-line)}

/* Dòng trong đơn khách gửi không bẻ được, nên fit-content không co xuống dưới
   dòng dài nhất. Chốt trần cứng ở đây; dài hơn thì cuộn ngang trong khung. */
#bwNguonKhu{min-width:0}
#bwNguonKhu .card__b{min-width:0;overflow:hidden}

/* Màn hẹp thì cột trái nhường thêm chỗ, và mấy ô trong bảng cũng gọn lại —
   miễn sao bảng đối chiếu không phải cuộn ngang. */
/* Phải có cả cận dưới. Thiếu nó thì mấy dòng này đè luôn quy tắc xếp dọc
   ở 1100px, điện thoại vẫn bị chia hai cột và bóp nát bảng. */
@media (min-width:1101px) and (max-width:1400px){
  .doi-chieu-khu{grid-template-columns:fit-content(32%) minmax(0,1fr)}
  .dc-goc{max-width:170px}
  .doi-chieu-khu .tbl th:nth-child(2){min-width:180px}
}
@media (min-width:1101px) and (max-width:1200px){
  .doi-chieu-khu{grid-template-columns:fit-content(28%) minmax(0,1fr)}
  .dc-goc{max-width:140px}
  .doi-chieu-khu .tbl th:nth-child(2){min-width:170px}
}

/* ---- Điện thoại: bảng đối chiếu đổi thành từng thẻ ----
   Màn 375px mà nhét 5 cột thì cột nào cũng nát. Mỗi dòng thành một thẻ:
   chữ khách viết ở trên, hộp chọn thuốc trải ngang, số lượng và tiền ở dưới. */
@media (max-width:720px){
  .doi-chieu-khu{grid-template-columns:minmax(0,1fr)}
  .doi-chieu-khu .tbl,
  .doi-chieu-khu .tbl tbody,
  .doi-chieu-khu .tbl tr,
  .doi-chieu-khu .tbl td{display:block;width:auto}
  .doi-chieu-khu .tbl{table-layout:auto}
  .doi-chieu-khu .tbl thead{display:none}
  .doi-chieu-khu .tbl colgroup{display:none}

  /* Mỗi dòng là một thẻ riêng, giống hệt mọi bảng khác trong phần mềm.
     Trước đây màn này có kiểu riêng viết từ sớm nên nhìn lệch hẳn: nút ✕ to
     gấp rưỡi, các dòng chỉ cách nhau một nét kẻ, thành tiền thả trôi bên phải. */
  .doi-chieu-khu .tbl tbody tr{position:relative;padding:12px 14px 11px;
    margin-bottom:10px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);box-shadow:var(--sh-sm);
    display:flex;flex-wrap:wrap;align-items:flex-start}
  .doi-chieu-khu .tbl tbody tr:last-child{margin-bottom:0}
  .doi-chieu-khu .tbl td{border:0;padding:0;white-space:normal}
  .doi-chieu-khu .scroll-x{padding:0 12px 12px}
  /* Gập thành thẻ thì mọi ô ăn theo đệm của thẻ, không giữ đệm riêng nữa */
  .doi-chieu-khu .tbl td:first-child{padding-left:0}

  /* Hàng đầu: chữ khách viết, chừa chỗ cho nút ✕ ở góc phải */
  /* Hàng đầu: tên thuốc, nhãn trạng thái và dấu tick nằm chung một hàng.
     Tên phải thẳng lề với hộp chọn và mấy ô số bên dưới — luật bảng ngang
     đệm trái ô đầu 16px, gập thành thẻ rồi thì phải gỡ đệm đó ra. */
  .doi-chieu-khu .tbl td.dc-goc{flex:1 1 100%;max-width:none;
    padding:0 40px 10px 0!important;border-bottom:1px solid var(--line);min-height:34px;
    display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
  .doi-chieu-khu .dc-goc .strong{white-space:normal;font-size:var(--m-tieu);
    flex:0 1 auto;min-width:0}
  .doi-chieu-khu .dc-goc .dc-nhan{margin-top:0;flex:0 0 auto}
  .doi-chieu-khu .dc-goc .tag{margin-top:0}

  /* Hàng hai: hộp chọn thuốc và nút thêm vào danh mục */
  .doi-chieu-khu .dc-o{flex:1 1 100%;margin-top:10px;padding:0!important}
  /* Nút + phải cao đúng bằng hộp chọn bên trái, lệch 8px là thấy ngay */
  .doi-chieu-khu .dc-chon{align-items:stretch;gap:8px}
  .doi-chieu-khu .dc-chon .btn--soft{height:auto;min-height:0;align-self:stretch;
    padding:0 13px;border-radius:9px}

  /* Hàng ba: đơn vị, số lượng, thành tiền — ba ô đều nhau, nhãn nhỏ ở trên */
  .doi-chieu-khu .tbl td:nth-child(3),
  .doi-chieu-khu .tbl td:nth-child(4),
  .doi-chieu-khu .tbl td:nth-child(5){flex:1 1 0;min-width:0;display:block;float:none;
    width:auto;margin-top:11px;padding-right:10px;text-align:left!important;
    font-size:var(--m-chu)}
  .doi-chieu-khu .tbl td:nth-child(5){padding-right:0;font-weight:700;
    font-variant-numeric:tabular-nums;color:var(--ink)}
  .doi-chieu-khu .tbl td:nth-child(3)::before,
  .doi-chieu-khu .tbl td:nth-child(4)::before,
  .doi-chieu-khu .tbl td:nth-child(5)::before{display:block;color:var(--ink-3);
    font-size:var(--m-nhan);font-weight:500;line-height:1.3;margin-bottom:2px}
  .doi-chieu-khu .tbl td:nth-child(3)::before{content:"Đơn vị"}
  .doi-chieu-khu .tbl td:nth-child(4)::before{content:"Số lượng"}
  .doi-chieu-khu .tbl td:nth-child(5)::before{content:"Thành tiền"}
  /* Số lượng thường chỉ một hai chữ số, để ô rộng 76px canh phải thì con số
     trôi hẳn về mép, nhìn như bị đẩy ra rìa. Thu lại và canh giữa. */
  .doi-chieu-khu .tbl input.dc-sl{width:56px;max-width:56px;height:32px;
    text-align:center;padding:0 6px;font-weight:700;font-variant-numeric:tabular-nums}
  .doi-chieu-khu .tbl input.dc-sl:focus{border-color:var(--pri);
    box-shadow:0 0 0 3px var(--pri-soft)}

  /* Nút ✕ góc trên bên phải, nhỏ gọn như mọi thẻ khác */
  .doi-chieu-khu .tbl td:last-child{position:absolute;top:12px;right:14px;margin:0}
  .doi-chieu-khu .tbl td:last-child .btn{position:relative;width:26px;flex:0 0 26px;
    height:26px;min-height:0;padding:0;border-radius:8px;
    display:flex;align-items:center;justify-content:center;gap:0}
  .doi-chieu-khu .tbl td:last-child .btn svg{width:12px;height:12px;margin:0;stroke-width:2.4}
  .doi-chieu-khu .tbl td:last-child .btn::before{content:"";position:absolute;inset:-9px}

  /* Đơn khách gửi để bên trên, gọn lại cho đỡ chiếm màn hình */
  #bwNguonKhu .raw{max-height:190px;overflow:auto;font-size:var(--m-nhan);line-height:1.75}
}

/* ================= Bảng thành thẻ trên điện thoại =================
   Bảng ngang mười mấy cột thì trên điện thoại phải vuốt mới đọc hết một
   dòng, rất dễ nhìn nhầm số của dòng này sang dòng kia. Dưới 720px mỗi
   dòng gập lại thành một thẻ: tên ở trên, còn lại là "nhãn — giá trị". */
@media (max-width:720px){
  .tbl--the, .tbl--the tbody, .tbl--the tr, .tbl--the td{display:block;width:auto}
  .tbl--the{table-layout:auto;min-width:0}
  .tbl--the thead, .tbl--the colgroup{display:none}

  /* Tên và nút bấm chung một hàng trên cùng, số liệu xếp hai cột bên dưới.
     Lưu ý: ô tên phải để flex-basis 0 (flex:1 1 0), không được để auto —
     flex chốt chuyện xuống dòng theo bề rộng gốc rồi mới co, để auto là tên
     khách dài đẩy nút rớt xuống hàng dưới.
     Để nút đứng riêng dưới đáy thì mỗi thẻ đội thêm gần 60px trống — ba trăm
     đơn là thừa ra cả chục nghìn pixel phải vuốt qua. */
  /* Mỗi dòng đứng riêng thành một thẻ có viền và khoảng hở. Một nét kẻ mảnh
     giữa hai dòng thì lúc lướt nhanh rất khó biết chỗ nào hết đơn này sang
     đơn kia, nhất là khi dòng nào cũng nhiều số. */
  .tbl--the tbody tr{position:relative;padding:12px 14px 11px;
    margin-bottom:10px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);box-shadow:var(--sh-sm);
    display:grid;grid-template-columns:1fr 1fr;column-gap:0;row-gap:9px;align-items:start}
  .tbl--the tbody tr:last-child{margin-bottom:0}

  /* Bảng nằm trần trong thẻ lớn thì chừa lề cho mấy thẻ con khỏi dính mép */
  .scroll-x:has(> .tbl--the){padding:0 12px 12px}
  .card__b .scroll-x:has(> .tbl--the){padding:0}
  .tbl--the td{border:0;padding:0;white-space:normal;text-align:left!important;
    font-size:var(--m-chu);line-height:1.45}

  /* Số thứ tự: chữ nhỏ nằm nép góc trên bên trái */
  .tbl--the td[data-vai="stt"]{position:absolute;top:20px;left:14px;width:22px;
    font-size:var(--m-nhan);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .tbl--the tbody tr:has(td[data-vai="stt"]){padding-left:40px}

  /* Ô tick nằm góc trên bên trái — góc phải giờ là chỗ của nút bấm */
  .tbl--the td[data-vai="chon"]{position:absolute;top:13px;left:13px}
  .tbl--the tbody tr:has(td[data-vai="chon"]){padding-left:42px}

  /* Tên: dòng đầu, đậm, không nhãn — nhìn là biết thẻ này của ai */
  /* Tên luôn nằm đầu thẻ dù trong bảng nó là cột thứ mấy — bảng danh mục
     có cột Mã đứng trước, không ép thứ tự thì mã đội lên trên tên thuốc. */
  /* Tên chiếm trọn hàng đầu, chừa bên phải đúng bề rộng cụm nút (bang.js đo
     rồi ghi vào --nut-rong) nên tên dài mấy cũng không chui xuống dưới nút. */
  .tbl--the td[data-vai="chinh"]{order:-2;grid-column:1 / -1;min-width:0;
    display:flex;align-items:center;min-height:44px;
    padding-right:var(--nut-rong,0px);padding-bottom:10px;
    font-size:var(--m-tieu);font-weight:600;line-height:1.35;
    border-bottom:1px solid var(--line)}
  .tbl--the td[data-vai="chinh"] .sub{font-weight:400}

  /* Còn lại: nhãn nhỏ ở trên, giá trị ở dưới — hai ô nằm cạnh nhau một hàng */
  .tbl--the td:not([data-vai]){min-width:0;padding-right:14px;overflow-wrap:anywhere}
  .tbl--the td:not([data-vai])::before{content:attr(data-nhan);display:block;
    color:var(--ink-3);font-size:var(--m-nhan);font-weight:500;line-height:1.3;margin-bottom:1px}
  .tbl--the td:not([data-vai]) .bar{min-width:0;margin-top:4px}

  /* Nút bấm: xuống dòng riêng, dồn về phải */
  /* Nút bấm đứng ngay cạnh tên, dồn về phải — cùng hàng, cùng nét gạch chân */
  /* Nút bấm neo góc trên bên phải, ngang hàng với tên */
  .tbl--the td[data-vai="nut"]{position:absolute;top:12px;right:14px;
    display:flex;gap:7px;align-items:center}
  .tbl--the td[data-vai="nut"]:empty{display:none}
  .tbl--the td[data-vai="nut"] .btn{height:32px;padding:0 12px}
  /* Nút ✕ chỉ có biểu tượng nên để vuông nhỏ. Nhìn thì nhỏ, nhưng nới vùng
     chạm ra ngoài bằng lớp phủ vô hình cho ngón tay khỏi bấm hụt. */
  .tbl--the td[data-vai="nut"] .btn--nguy{position:relative;width:26px;flex:0 0 26px;
    height:26px;min-height:0;padding:0;border-radius:8px;
    display:flex;align-items:center;justify-content:center;gap:0}
  .tbl--the td[data-vai="nut"] .btn--nguy svg{width:12px;height:12px;margin:0;
    stroke-width:2.4}
  /* Nhìn 26px nhưng chạm được cả vùng 44px — đúng mức ngón tay cần */
  .tbl--the td[data-vai="nut"] .btn--nguy::before{content:"";position:absolute;inset:-9px}

  /* Ô nhập trong thẻ: đủ to để bấm bằng ngón tay */
  .tbl--the td .inp--sm{height:40px;font-size:16px;max-width:130px}

  /* Dòng "không có dữ liệu" gộp ô thì để giữa cho gọn */
  .tbl--the td[colspan]{grid-column:1 / -1;display:block;text-align:center!important;padding:24px 0}

  /* Có thẻ rồi thì không cần thanh cuộn ngang nữa */
  .scroll-x:has(.tbl--the){overflow-x:visible}

  /* Đang thu gọn: chỉ bày 20 thẻ đầu */
  .tbl--the[data-gon="1"] tbody tr:nth-child(n+21){display:none}
  .tbl--the + .bang-them{display:block;width:100%;padding:14px;border:0;
    border-top:1px solid var(--line);background:var(--surface-2);
    color:var(--pri);font:inherit;font-weight:600;font-size:var(--m-chu);cursor:pointer}
  .tbl--the + .bang-them:hover{background:var(--pri-soft)}
}

/* Nút "xem thêm" chỉ có nghĩa lúc bảng đang bày thành thẻ, tức trên màn hẹp */
.bang-them{display:none}

/* ---- Dòng vừa thêm: nháy sáng một cái cho biết đã vào ---- */
@keyframes dongMoiNhay{
  0%{background:var(--crit-soft)}
  25%{background:var(--crit-line)}
  50%{background:var(--crit-soft)}
  75%{background:var(--crit-line)}
  100%{background:transparent}
}
.tbl tr.dong-moi>td{animation:dongMoiNhay 1.6s ease-out}
@media (prefers-reduced-motion:reduce){
  .tbl tr.dong-moi>td{animation:none;background:var(--crit-soft)}
}


/* Nút "Thêm khách mới" nằm ở đáy danh sách chọn */
.chon__them--moi{background:var(--surface-2);color:var(--ink);border-top:1px solid var(--line)}
.chon__them--moi:hover{background:var(--pri-soft);color:var(--pri)}
.chon__them--moi svg{color:var(--pri)}

/* ---- Ba trạng thái đối chiếu: nhãn bằng nhau, tick đổi màu theo ---- */
.dc-nhan{display:flex;align-items:center;gap:7px;margin-top:5px}
/* Nhãn cùng bề rộng thì ba khối thẳng hàng, nhìn một phát ra ngay */
.dc-nhan .tag{width:76px;justify-content:center;padding-left:4px;padding-right:4px}

.btn-tick{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;
  border-radius:7px;border:1px solid;padding:0;background:none}
.btn-tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Xanh: chắc rồi, chỉ để nhìn */
.btn-tick--ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok);cursor:default}
/* Cam: phần mềm đoán, bấm vào là thành xanh */
.btn-tick--check{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);cursor:pointer}
.btn-tick--check:hover{background:var(--ok);border-color:var(--ok);color:#fff;transform:scale(1.08)}
.btn-tick--check:active{transform:scale(.96)}
/* Đỏ: chưa có thuốc, chọn ở cột bên thì tự thành xanh */
.btn-tick--none{background:var(--crit-soft);border-color:var(--crit-line);color:var(--crit);cursor:default}

@media (prefers-reduced-motion:reduce){ .btn-tick--check:hover{transform:none} }
@media (max-width:720px){
  /* Nhãn "Khớp" cao 25px mà tick 36px thì lệch hẳn, nhìn như hai thứ rời
     nhau. Cho tick bằng đúng chiều cao nhãn, bù lại nới vùng chạm ra ngoài. */
  .btn-tick{position:relative;width:26px;height:26px;flex:0 0 26px;border-radius:8px}
  .btn-tick svg{width:14px;height:14px}
  .btn-tick::before{content:"";position:absolute;inset:-9px}
  .dc-nhan{gap:8px}
  .dc-nhan .tag{width:auto;min-height:26px}
}

/* ---- Dòng chưa khớp: nháy đỏ khi bấm Tiếp tục mà chưa xử lý ---- */
@keyframes dongThieuNhay{
  0%,100%{background:transparent}
  25%,75%{background:var(--crit-soft)}
}
.tbl tr.dong-thieu>td{animation:dongThieuNhay 1.6s ease-in-out}
@media (prefers-reduced-motion:reduce){
  .tbl tr.dong-thieu>td{animation:none;background:var(--crit-soft)}
}
/* Nút còn vướng thì làm mờ, bấm vẫn được để nó nói cho biết vướng chỗ nào */
.btn--kho{opacity:.55}


/* =====================================================================
   BẬC CHỮ TRÊN ĐIỆN THOẠI

   Mấy khối media query ở trên viết rải rác qua nhiều lần sửa, mỗi khối
   chỉnh cỡ chữ một kiểu — đo ra 12 cỡ khác nhau cùng nằm trên một màn
   hình 375px, nhìn lổn nhổn chữ to chữ nhỏ. Khối này đặt cuối file để
   chốt lại một bậc chữ duy nhất cho cả phần mềm.

   Năm bậc, mỗi bậc một việc:
     --m-so    con số lớn trên thẻ số liệu
     --m-tieu  tiêu đề: tên thẻ, tiêu đề khối, tên trong bảng
     --m-chu   chữ thường: giá trị trong bảng, nút bấm, menu
     --m-phu   chữ phụ: mô tả, ghi chú dưới tiêu đề
     --m-nhan  nhãn nhỏ: tên cột, thẻ trạng thái, gợi ý

   Ô nhập giữ 16px vì dưới mức đó iPhone tự phóng to cả trang lúc bấm vào.
   ===================================================================== */
@media (max-width:720px){
  :root{
    --m-so:20px; --m-tieu:15px; --m-chu:14px; --m-phu:12.5px; --m-nhan:11.5px;
  }

  /* --- tiêu đề --- */
  .top__title{font-size:var(--m-tieu)}
  .card__t{font-size:var(--m-tieu)}
  .sec h2{font-size:var(--m-tieu)}
  .the-chon__t{font-size:var(--m-tieu)}
  .khach-dang__t{font-size:var(--m-tieu)}
  .stp__t{font-size:var(--m-chu)}

  /* --- con số lớn --- */
  .stat__v{font-size:var(--m-so)}
  .stat__v small{font-size:var(--m-phu)}
  .row--tot .row__v{font-size:var(--m-tieu)}

  /* --- chữ thường --- */
  .btn{font-size:var(--m-chu)}
  .btn--sm{font-size:var(--m-phu)}
  .nav__item{font-size:var(--m-chu)}
  .row,.row__k,.row__v{font-size:var(--m-chu)}
  /* .row--tot .row__k nặng hơn nên phải viết kèm, không thì nó giữ 13.5px */
  .row--tot .row__k{font-size:var(--m-chu)}
  .goi-y__m{font-size:var(--m-chu)}
  .bang-menu__m{font-size:var(--m-chu)}
  .chon__muc{font-size:var(--m-chu)}
  .them>summary{font-size:var(--m-chu)}
  .note{font-size:var(--m-phu)}

  /* --- chữ phụ --- */
  .card__n{font-size:var(--m-phu)}
  .sub{font-size:var(--m-phu)}
  .stat__d{font-size:var(--m-phu)}
  .mono{font-size:var(--m-phu)}
  .ma{font-size:var(--m-phu)}
  .tab{font-size:var(--m-phu)}
  .the-chon__d{font-size:var(--m-phu)}
  .khach-dang__d{font-size:var(--m-phu)}
  .them__d{font-size:var(--m-phu)}
  .chon__them{font-size:var(--m-phu)}
  .sw__d{font-size:var(--m-phu)}
  .sw__t{font-size:var(--m-chu)}

  /* --- nhãn nhỏ --- */
  .stat__k{font-size:var(--m-nhan)}
  .tag{font-size:var(--m-nhan)}
  .fsec__t{font-size:var(--m-chu)}
  .fsec__n{font-size:var(--m-phu)}
  .bang-so{font-size:var(--m-nhan)}
  .bang-chip b,.dm-top .bang-chip b{font-size:var(--m-nhan)}
  .hint{font-size:var(--m-nhan)}
  .tbl th{font-size:var(--m-nhan)}
  label,.fld>label{font-size:var(--m-nhan)}
  .luu-bao{font-size:var(--m-nhan)}

  /* --- ô nhập ---
     Chữ đang gõ phải đúng 16px: dưới mức đó iPhone tự phóng to cả trang mỗi
     lần bấm vào ô, phải chụm tay thu lại rất khó chịu. Nhưng lúc ô còn trống
     thì cái nhìn thấy là chữ gợi ý — để 16px nó nổi hẳn lên so với mọi thứ
     xung quanh. Nên hạ riêng chữ gợi ý về đúng bậc chữ thường. */
  .inp,.inp--sm,select.inp,.chon__tim input,textarea.inp,.search input{font-size:16px}
  .inp::placeholder,textarea.inp::placeholder,.chon__tim input::placeholder,
  .search input::placeholder{font-size:var(--m-chu);opacity:1}
  .inp--sm{height:40px}
  .chon__nut{font-size:var(--m-chu)}

  /* --- ô tìm trên thanh đầu ---
     Màn hẹp phải chia chỗ cho nút menu, tên trang, nút đổi nền và ảnh đại
     diện, nên ô tìm bị bóp còn đủ hiện "Tìr" — gõ vào cũng chẳng đọc được
     gì. Lúc thường thu về đúng cái kính lúp; bấm vào mới nở ra hết bề ngang. */
  .top{position:sticky}
  .top .search{position:relative;flex:0 0 auto;width:42px;padding:8px 10px;overflow:hidden}
  /* Kính lúp không được co: để nguyên nó thì ô nhập ăn hết chỗ, biểu tượng
     teo về 0 và cái ô nhìn trống trơn không biết bấm vào để làm gì. */
  .top .search > svg{flex:0 0 auto}
  /* Lúc thu gọn, ô nhập trải trong suốt lên cả ô để bấm đâu cũng trúng */
  .top .search input{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0}
  .top .search input::placeholder{opacity:0}

  .top .search:focus-within{position:absolute;left:12px;right:12px;width:auto;z-index:6;
    background:var(--surface);border-color:var(--pri);box-shadow:0 8px 22px rgba(15,32,60,.16)}
  .top .search:focus-within input{position:static;inset:auto;flex:1;height:auto;opacity:1}
  .top .search:focus-within input::placeholder{opacity:1}

  /* --- khoảng cách: một nhịp duy nhất, thôi mỗi chỗ một kiểu --- */
  .wrap{padding:14px 12px 80px}
  .card__h{padding:13px 14px}
  .card__b{padding:14px}
  .stat{padding:14px}
  .sec{margin:20px 0 12px}

  /* Chip sắp xếp và chip bán chạy cao 28px, hơi thấp để bấm bằng ngón tay */
  .bang-chip{min-height:34px;padding:6px 8px 6px 11px}
  .bang-chip__x{padding:0 4px}
}

/* =====================================================================
   Việc cần xử lý: nhãn và câu chữ phải xuống dòng được

   Trước đây mỗi việc là một .btn, mà .btn không cho xuống dòng — câu
   "14 đơn khách gửi chưa lên đơn bán — 14.278.312 ₫" chạy thẳng ra khỏi
   khung, mất chữ ở đuôi.
   ===================================================================== */
.viec-nut{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;width:100%;
  padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);text-align:left;
  cursor:pointer;white-space:normal;line-height:1.5;transition:border-color .14s,background .14s}
.viec-nut:hover{border-color:var(--pri-line);background:var(--pri-soft)}
.viec-nut .tag{flex:0 0 auto}
.viec-nut span:last-child{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
@media (max-width:720px){ .viec-nut{font-size:var(--m-chu)} }


/* =====================================================================
   GẬP BỘ LỌC TRÊN ĐIỆN THOẠI

   Thanh lọc có 5–6 ô, trên máy tính nằm ngang một hàng gọn gàng, nhưng
   trên điện thoại xếp dọc thành gần một màn hình — phải vuốt qua hết mới
   thấy bảng. Gập lại sau một nút, đang lọc mấy thứ thì ghi số lên nút.
   ===================================================================== */
.loc-nut{display:none}

@media (max-width:720px){
  .loc-nut{display:flex;align-items:center;gap:9px;width:100%;padding:12px 14px;
    border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);
    font:inherit;font-size:var(--m-chu);font-weight:600;color:var(--ink);cursor:pointer}
  .loc-nut:hover{border-color:var(--pri-line)}
  .loc-nut svg{width:16px;height:16px;flex:none;stroke:var(--ink-3);fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .loc-nut__so{margin-left:auto;display:grid;place-items:center;min-width:20px;height:20px;
    padding:0 6px;border-radius:20px;background:var(--pri);color:#fff;
    font-size:var(--m-nhan);font-weight:700}
  .loc-nut__so:empty{display:none}
  .loc-nut__mui{margin-left:auto;transition:transform .18s}
  .loc-nut__so + .loc-nut__mui{margin-left:0}
  .loc-nut[aria-expanded="true"]{border-color:var(--pri);background:var(--pri-soft);color:var(--pri)}
  .loc-nut[aria-expanded="true"] svg{stroke:var(--pri)}
  .loc-nut[aria-expanded="true"] .loc-nut__mui{transform:rotate(180deg)}

  /* Thẻ chứa bộ lọc: lúc gập thì chỉ còn cái nút, bỏ luôn viền cho gọn */
  .card:has(> .loc-nut) {border:0;background:none;box-shadow:none}
  .card:has(> .loc-nut) > .filters{margin-top:10px;border:1px solid var(--line);
    border-radius:12px;background:var(--surface);box-shadow:var(--sh)}
}


/* =====================================================================
   GIỎ ĐANG GOM: đếm số lượng bằng nút bớt / thêm

   Ô số lượng để trống một mình thì trên điện thoại nó nở ra gần nửa thẻ,
   mà số cần gõ thường chỉ là 1 hay 2. Kẹp giữa hai nút − và + thì vừa gọn
   vừa bấm được bằng ngón tay, khỏi bật bàn phím lên chỉ để sửa một con số.
   ===================================================================== */
.sl-do{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--surface)}
.sl-do__b:first-child{border-radius:8px 0 0 8px}
.sl-do__b:last-child{border-radius:0 8px 8px 0}
.sl-do__b{width:34px;flex:0 0 34px;border:0;background:var(--surface-2);color:var(--ink-2);
  font:inherit;font-size:17px;font-weight:600;line-height:1;cursor:pointer;
  display:grid;place-items:center;user-select:none}
.sl-do__b:hover{background:var(--pri-soft);color:var(--pri)}
.sl-do__b:active{background:var(--pri-line)}
.sl-do__o{width:44px;flex:0 0 44px;height:32px;border:0;border-radius:0;
  text-align:center;font-weight:700;font-variant-numeric:tabular-nums;
  background:none;padding:0}
.sl-do__o:focus{box-shadow:none;background:var(--pri-soft)}

/* Dải cuối giỏ: tạm tính đứng riêng một hàng có viền, nút nằm dưới.
   Trước đây tổng tiền thả trôi cạnh nút, nhìn như con số bị bỏ quên. */
.gio-cuoi{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.gio-tong{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--pri-line);border-radius:11px;
  background:var(--pri-soft);font-size:13px;color:var(--ink-2)}
.gio-tong b{font-size:19px;font-weight:700;color:var(--pri);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gio-nut{display:flex;gap:9px;flex-wrap:wrap}

@media (max-width:720px){
  .gio-tong{font-size:var(--m-chu)}
  .gio-tong b{font-size:var(--m-so)}
  /* Thu còn chừng hai phần ba cỡ cũ. Con số buộc phải giữ 16px — dưới mức
     đó iPhone tự phóng to cả trang lúc bấm vào — nên ô số không hẹp hơn
     được nữa; bù lại hai nút thu nhỏ và nới vùng chạm ra ngoài. */
  .sl-do{border-radius:8px}
  .sl-do__b{position:relative;width:22px;flex:0 0 22px;font-size:15px}
  /* Nới lên xuống và ra phía ngoài thôi — lấn vào giữa thì bấm ô số lại
     trúng nút bớt, sửa số bằng bàn phím thành ra khó. */
  .sl-do__b:first-child::before{content:"";position:absolute;inset:-8px 0 -8px -8px}
  .sl-do__b:last-child::before{content:"";position:absolute;inset:-8px -8px -8px 0}
  .sl-do__o{width:28px;flex:0 0 28px;height:28px;font-size:16px}
  /* Hai nút cuối giỏ trải hết bề ngang, khỏi phải nhắm */
  .gio-nut .btn{flex:1 1 100%;justify-content:center}
}


/* =====================================================================
   HÀNG NÚT CUỐI MỖI BƯỚC

   Trên điện thoại nhãn "← Quay lại đối chiếu" dài quá, đẩy nút "Lưu đơn"
   rớt hẳn xuống hàng dưới — nút chính của cả bước lại nằm lạc lõng một
   mình. Giữ cả hàng trên một dòng và bớt chữ ở nút quay lại.
   ===================================================================== */
.buoc-nut{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}

@media (max-width:720px){
  .buoc-nut{flex-wrap:nowrap}
  .buoc-nut .btn{flex:0 0 auto;white-space:nowrap;padding:0 13px}
  /* Nút chính luôn nằm sát mép phải */
  .buoc-nut .btn--pri{margin-left:auto}
  .buoc-nut .btn--pri ~ .btn{margin-left:0}
  /* Bỏ bớt chữ cho nút quay lại đủ ngắn để cả hàng nằm gọn một dòng */
  .chu-them{display:none}
}

/* Dòng của khách đã ẩn: mờ đi cho khỏi lẫn với khách đang giao dịch, nhưng vẫn
   đọc được vì còn phải bấm "Cho hiện lại" hay xem công nợ cũ. */
.tbl tr.mo-di td{opacity:.52}
.tbl tr.mo-di:hover td{opacity:1}

/* ---------------- ghi chú nhanh ---------------- */
/* Hai cột: danh sách bên trái, chỗ gõ bên phải. Màn hẹp thì xếp chồng,
   danh sách rút xuống cho phần gõ vẫn nhìn thấy được. */
.gc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.gc__ds{display:flex;flex-direction:column;max-height:calc(100vh - 120px);overflow:hidden}
.gc__dau{display:flex;flex-direction:column;gap:9px;padding:12px;border-bottom:1px solid var(--line)}
.gc__loc{display:flex;gap:6px;flex-wrap:wrap}
.gc__loc .btn[aria-pressed="true"]{background:var(--pri-soft);border-color:var(--pri-line);color:var(--pri)}
.gc__cuon{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:120px}

.gc__the{text-align:left;font-family:inherit;width:100%;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:10px;padding:9px 11px;
  display:flex;flex-direction:column;gap:3px;transition:background .14s,border-color .14s}
.gc__the:hover{background:var(--surface-2)}
.gc__the[aria-current="true"]{background:var(--pri-soft);border-color:var(--pri-line)}
.gc__the-t{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.gc__the-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc__the-d{font-size:12px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45}
.gc__the-n{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gc__the[data-xong="1"] .gc__the-t{color:var(--ink-3);text-decoration:line-through}
.gc__trong{padding:26px 14px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.6}

.gc__soan{display:flex;flex-direction:column}
/* Chữ trong ghi chú hay là tên thuốc kèm số lượng — chữ đều bề ngang thì
   mấy cột số thẳng hàng, đọc lại nhanh hơn hẳn. */
.gc__chu{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.8;
  height:auto;padding:11px 13px;resize:vertical}
.gc__nut{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.gc__cong{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.gc__cong input{appearance:none;width:34px;height:20px;border-radius:20px;background:var(--line-strong);
  position:relative;cursor:pointer;transition:background .16s;flex:none}
.gc__cong input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:left .16s;box-shadow:var(--sh-sm)}
.gc__cong input:checked{background:var(--pri)}
.gc__cong input:checked::after{left:16px}
.gc__ai{border-top:1px solid var(--line);display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.gc__kq{border-top:1px solid var(--line)}
.gc__kqt{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.gc__chep{margin:0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.8;color:var(--ink);
  white-space:pre-wrap;word-break:break-word}

@media (max-width:900px){
  .gc{grid-template-columns:minmax(0,1fr)}
  .gc__ds{max-height:340px}
}

/* ================================================================
   THU GỌN MENU TRÁI

   Nút nằm dưới chân thanh menu, ngay trên dòng ghi phiên bản. Bấm là menu
   co còn một dải hẹp chỉ có biểu tượng, nhường chỗ cho bảng biểu bên phải.
   Trạng thái nhớ trong trình duyệt nên mở lại vẫn giữ nguyên.

   Chữ trong mỗi mục menu là chuỗi trần nằm cạnh thẻ svg, CSS không nhắm
   được — app.js bọc nó vào .nav__chu lúc khởi động, xem hàm bocChuMenu.
   ================================================================ */

.nut-gon{
  width:calc(100% - 24px);margin:0 12px 10px;padding:8px 11px;border-radius:9px;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--ink-3);
  font-family:inherit;font-size:12.5px;font-weight:500;text-align:left;
  transition:background .14s,color .14s;
}
.nut-gon:hover{background:var(--surface-2);color:var(--ink)}
.nut-gon svg{width:16px;height:16px;flex:none;transition:transform .18s}

/* Chỉ gập trên màn rộng. Màn hẹp thanh này vốn là ngăn kéo trượt ra, gập nữa
   thì thành hai kiểu đóng mở chồng lên nhau, rối. */
@media (max-width:1023px){ .nut-gon{display:none} }

@media (min-width:1024px){
  body[data-menu-gon="1"] .app{grid-template-columns:66px minmax(0,1fr)}

  body[data-menu-gon="1"] .brand{padding:17px 0 15px;justify-content:center}
  body[data-menu-gon="1"] .brand__chu{display:none}
  body[data-menu-gon="1"] .nav__chu{display:none}
  body[data-menu-gon="1"] .nav__label{
    /* Giữ khoảng cách giữa các nhóm, nhưng chữ thì thay bằng một nét kẻ */
    height:1px;padding:10px 0 0;margin:0 10px;overflow:hidden;
    border-top:1px solid var(--line);color:transparent;
  }
  body[data-menu-gon="1"] .nav{padding:0 10px 20px}
  body[data-menu-gon="1"] .nav__item{justify-content:center;padding:10px 0;gap:0}
  body[data-menu-gon="1"] .side__foot{display:none}

  /* Gập rồi thì nút co lại thành ô vuông, chỉ còn mũi tên quay ngược */
  body[data-menu-gon="1"] .nut-gon{
    width:calc(100% - 20px);margin:0 10px 12px;padding:9px 0;justify-content:center;gap:0;
  }
  body[data-menu-gon="1"] .nut-gon__chu{display:none}
  body[data-menu-gon="1"] .nut-gon svg{transform:rotate(180deg)}

  /* Con số cảnh báo: gập rồi thì không còn chỗ, thu thành chấm đỏ góc biểu tượng */
  body[data-menu-gon="1"] .nav__badge{
    position:absolute;top:5px;right:11px;min-width:8px;height:8px;
    padding:0;font-size:0;border-radius:50%;margin:0;
  }
  body[data-menu-gon="1"] .nav__item{position:relative}
}

/* Ô tìm thuốc và nút "Thêm dòng gõ tay" nằm cùng hàng, nút canh đáy cho thẳng
   với ô nhập. Màn hẹp thì nút xuống dòng và trải hết bề ngang. */
.cd-tim{display:flex;gap:10px;align-items:flex-end}
.cd-tim .fld{flex:1;min-width:0}
@media (max-width:700px){
  .cd-tim{flex-direction:column;align-items:stretch}
  .cd-tim .btn{justify-content:center}
}

/* ================= Bảng sửa đơn trên điện thoại =================
   Bảng này khác mọi bảng khác: gần như ô nào cũng là ô nhập. Bố cục thẻ
   chung (nhãn ở trên, giá trị ở dưới, hai cột) dùng cho nó thì ô nhập tên
   bị đẩy nằm cạnh dòng "chưa có trong danh mục", đè lên cả nút xoá. Nên
   bảng khai .the-rieng để bang.js đừng gắn nhãn, rồi tự bày thẻ ở đây —
   cùng một dáng với thẻ đơn khách gửi ở khối dưới: tên thuốc một hàng,
   rồi ĐVT · SL · Đơn giá · Thành tiền gọn trong đúng một hàng nữa. */
@media (max-width:720px){
  .tbl--sua-don,
  .tbl--sua-don tbody,
  .tbl--sua-don tr,
  .tbl--sua-don td{display:block;width:auto}
  .tbl--sua-don{table-layout:auto;min-width:0}
  .tbl--sua-don thead, .tbl--sua-don colgroup{display:none}
  .scroll-x:has(> .tbl--sua-don){overflow-x:visible}

  .tbl--sua-don tbody tr{position:relative;
    display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 6px;
    padding:10px 36px 11px 26px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:12px;
    background:var(--surface);box-shadow:var(--sh-sm)}
  .tbl--sua-don tbody tr:last-child{margin-bottom:0}
  .tbl--sua-don td{border:0;padding:0;white-space:normal;text-align:left!important;
    font-size:var(--m-chu);line-height:1.45}

  /* Số thứ tự nép góc trên bên trái, nút bỏ dòng nép góc trên bên phải */
  .tbl--sua-don td.sd-stt{position:absolute;top:12px;left:12px;width:20px;
    font-size:var(--m-nhan);font-weight:700;color:var(--ink-3);
    font-variant-numeric:tabular-nums}
  .tbl--sua-don td.sd-bo{position:absolute;top:9px;right:11px}
  .tbl--sua-don td.sd-bo .btn{position:relative;width:26px;flex:0 0 26px;
    height:26px;min-height:0;padding:0;border-radius:8px;gap:0;
    display:flex;align-items:center;justify-content:center}
  .tbl--sua-don td.sd-bo .btn svg{width:11px;height:11px;margin:0;stroke-width:2.4}
  /* Nhìn 26px nhưng chạm được cả vùng 44px — đúng mức ngón tay cần */
  .tbl--sua-don td.sd-bo .btn::before{content:"";position:absolute;inset:-9px}

  /* Tên thuốc chiếm trọn dòng đầu */
  .tbl--sua-don td.sd-ten{flex:1 1 100%;min-width:0;
    font-size:var(--m-tieu);font-weight:600;line-height:1.35;
    overflow-wrap:anywhere}
  .tbl--sua-don td.sd-ten .inp--sm{width:100%;max-width:none}
  .tbl--sua-don td.sd-ten .sub{font-weight:400;font-size:var(--m-nhan);
    line-height:1.4;margin-top:2px}

  /* Hàng số liệu: nhãn nhỏ ở trên, giá trị ở dưới, bốn cụm đúng một hàng.
     Ô nhập vừa đủ con số nó chứa — để rộng thì hàng chật, Thành tiền rớt
     xuống dòng riêng trống hoác. Chữ vẫn 16px, nhỏ hơn là iPhone tự phóng
     to trang lúc bấm vào ô. */
  .tbl--sua-don tbody td[data-goi]{border-top:1px solid var(--line);
    margin-top:4px;padding-top:7px}
  .tbl--sua-don tbody td[data-goi]::before{content:attr(data-goi);display:block;
    color:var(--ink-3);font-size:var(--m-nhan);font-weight:500;
    line-height:1.3;margin-bottom:2px}
  .tbl--sua-don td.sd-dvt,
  .tbl--sua-don td.sd-sl,
  .tbl--sua-don td.sd-gia{flex:0 0 auto;min-width:0}
  .tbl--sua-don td.sd-dvt{max-width:38%;overflow-wrap:anywhere}
  /* ĐVT của dòng khớp danh mục chỉ là chữ — cho nó cao bằng ô nhập bên
     cạnh để bốn giá trị nằm chung một tầm, khỏi so le. */
  .tbl--sua-don td.sd-dvt .sd-o{display:block;line-height:32px}
  /* flex:0 1 auto để nó co lại được một chút trước khi chịu thua mà xuống
     dòng — đơn vài chục triệu một dòng vẫn nằm chung hàng. */
  .tbl--sua-don td.sd-tt{flex:0 1 auto;margin-left:auto;
    text-align:right!important;font-weight:700;line-height:32px;
    font-variant-numeric:tabular-nums}
  .tbl--sua-don td.sd-tt::before{text-align:right}

  /* Số trong ô nhập cùng một cỡ với Thành tiền — lệch cỡ thì nhìn thẻ rất
     lộm cộm. Ô vừa khít con số nó chứa: rộng hơn một chút là cả hàng không
     đủ chỗ, Thành tiền rớt xuống dòng riêng.
     Lúc bấm vào ô thì nâng lên 16px: dưới 16px là Safari trên iPhone tự
     phóng to cả trang, mà nó chỉ xét đúng lúc ô nhận con trỏ. */
  .tbl--sua-don td .inp--sm{height:32px;font-size:var(--m-chu);padding:0 6px}
  .tbl--sua-don td .inp--sm:focus{font-size:16px}
  .tbl--sua-don td.sd-sl .inp--sm{width:42px}
  .tbl--sua-don td.sd-gia .inp--sm{width:68px!important}
  .tbl--sua-don td.sd-dvt .inp--sm{width:50px}

  /* Dòng "đơn trống" gộp ô thì để giữa cho gọn */
  .tbl--sua-don td[colspan]{padding:24px 0;text-align:center!important}
  .tbl--sua-don tbody tr:has(td[colspan]){padding:0;display:block}
}

/* Mã thuốc nằm dưới tên thuốc — trên máy tính cột đủ rộng để xuống dòng */
.xd-ma{display:block}

/* ================= Thẻ đơn khách gửi trên điện thoại =================
   Bảng này bảy cột, bày theo thẻ chung thì năm ô số liệu xếp hai cột nên
   Thành tiền rớt xuống một dòng riêng trống hoác, còn mã thuốc thì dính
   liền vào tên. Gom lại: tên và mã một hàng, chữ khách viết một hàng,
   rồi ĐVT · SL · Đơn giá · Thành tiền gọn trong đúng một hàng nữa. */
@media (max-width:720px){
  .tbl--xem-dat,
  .tbl--xem-dat tbody,
  .tbl--xem-dat tr,
  .tbl--xem-dat td{display:block;width:auto}
  .tbl--xem-dat{table-layout:auto;min-width:0}
  .tbl--xem-dat thead, .tbl--xem-dat colgroup{display:none}
  .scroll-x:has(> .tbl--xem-dat){overflow-x:visible}

  .tbl--xem-dat tbody tr{position:relative;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
    padding:11px 13px 11px 33px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:12px;
    background:var(--surface);box-shadow:var(--sh-sm)}
  .tbl--xem-dat tbody tr:last-child{margin-bottom:0}
  .tbl--xem-dat td{border:0;padding:0;white-space:normal;text-align:left!important;
    font-size:var(--m-chu);line-height:1.45}

  .tbl--xem-dat td.xd-stt{position:absolute;top:13px;left:12px;width:20px;
    font-size:var(--m-nhan);font-weight:700;color:var(--ink-3);
    font-variant-numeric:tabular-nums}

  /* Tên thuốc bên trái, mã thuốc dạt về phải cùng một hàng. Trong bảng thì
     cột "Chữ trên đơn" đứng trước cột tên, nên phải kéo tên lên đầu thẻ —
     không thì thẻ đội dòng chữ khách viết lên trên cả tên thuốc. */
  .tbl--xem-dat td.xd-ten{order:-2;flex:1 1 100%;min-width:0;
    display:flex;align-items:baseline;gap:10px;
    font-size:var(--m-tieu);font-weight:600;line-height:1.35;
    overflow-wrap:anywhere}
  .tbl--xem-dat td.xd-ten .xd-ma{flex:0 0 auto;margin-left:auto;
    font-size:var(--m-nhan);font-weight:400}

  /* Chữ khách viết: chỉ bày khi khác tên đã khớp, trùng thì bày làm gì */
  .tbl--xem-dat td.xd-goc{order:-1;flex:1 1 100%;font-size:var(--m-nhan);
    line-height:1.4;overflow-wrap:anywhere}
  .tbl--xem-dat td.xd-goc::before{content:"khách viết: ";color:var(--ink-3)}
  .tbl--xem-dat td.xd-goc[data-trung="1"]{display:none}

  /* Hàng số liệu: nhãn nhỏ nằm ngay trước số, bốn cụm gọn trong một hàng */
  .tbl--xem-dat td.xd-dvt,
  .tbl--xem-dat td.xd-sl,
  .tbl--xem-dat td.xd-gia{flex:0 0 auto;min-width:0;
    font-variant-numeric:tabular-nums}
  .tbl--xem-dat td.xd-dvt{max-width:40%;overflow-wrap:anywhere}
  .tbl--xem-dat td.xd-dvt,
  .tbl--xem-dat td.xd-sl,
  .tbl--xem-dat td.xd-gia,
  .tbl--xem-dat td.xd-tt{margin-top:3px}
  .tbl--xem-dat td.xd-dvt::before,
  .tbl--xem-dat td.xd-sl::before,
  .tbl--xem-dat td.xd-gia::before{content:attr(data-goi) " ";
    color:var(--ink-3);font-size:var(--m-nhan);font-weight:500}
  /* Thành tiền dồn về phải, bỏ nhãn — để nhãn vào là hàng chật, rớt dòng */
  .tbl--xem-dat td.xd-tt{flex:0 0 auto;margin-left:auto;
    font-weight:700;font-variant-numeric:tabular-nums}

}

/* Nút đổi chặng đơn: máy tính bày chữ đủ, điện thoại bày chữ gọn */
.btn--chang .chang__gon{display:none}

/* ================= Thẻ danh sách đơn khách gửi trên điện thoại ================= */
@media (max-width:720px){
  .btn--chang .chang__dai{display:none}
  .btn--chang .chang__gon{display:inline}

  /* Mã đơn là tiêu đề thẻ. Để phông máy đánh chữ cỡ lớn thì "ĐĐ-2026-0059"
     rộng quá, chừa chỗ cho cụm nút xong là nó rớt xuống hai dòng. Cho về
     đúng phông và cỡ chữ của tên khách, chỉ đậm hơn. */
  #ddBang td[data-vai="chinh"]{font-family:inherit;font-size:var(--m-chu);
    font-weight:700;min-height:36px}

  /* Tạm tính lên nằm cạnh ngày giờ, tên khách xuống hàng dưới: tên nhà thuốc
     dài mà đứng cạnh ngày giờ thì ô nào cũng rớt dòng, còn đứng cạnh cái thẻ
     trạng thái ngắn thì thoải mái chỗ. */
  #ddBang td:not([data-vai]){order:9}
  #ddBang td[data-nhan="Ngày giờ nhận"]{order:1}
  #ddBang td[data-nhan="Tạm tính"]{order:2}
  #ddBang td[data-nhan="Khách hàng"]{order:3}
  #ddBang td[data-nhan="Trạng thái"]{order:4}

  /* Hai cột lệch nhau chứ không chia đôi: bên trái là tên khách và ngày
     giờ — chữ dài; bên phải là số tiền và cái thẻ trạng thái — ngắn.
     Chia đôi đều thì bên trái rớt dòng còn bên phải thừa chỗ. */
  #ddBang tr{grid-template-columns:1.35fr 1fr}

  /* Cụm nút gọn lại vài pixel để mã đơn đủ chỗ nằm trọn một dòng */
  #ddBang td[data-vai="nut"]{gap:6px}
  #ddBang td[data-vai="nut"] .btn{padding:0 9px;gap:5px}
  #ddBang td[data-vai="nut"] .btn svg{width:14px;height:14px;margin:0}
}

/* ---- Chọn thuốc bằng bàn phím ---- */
/* Mũi tên lên xuống chạy trong danh sách gợi ý — dòng đang sáng phải nhìn
   ra ngay, chứ không thì bấm Enter mà không biết mình đang chọn cái gì. */
.goi-y__m--sang{border-color:var(--pri);background:var(--pri-soft)}
.goi-y__m--sang .goi-y__t{font-weight:650}

/* ---- Sửa giá ngay trong giỏ đang gom ---- */
.cd-gia{width:98px;text-align:right}
/* Giá bảng hiện mờ bên dưới khi đã sửa — để thấy mình vừa bớt bao nhiêu */
.cd-gia__goc{margin-top:3px;font-size:11.5px;white-space:nowrap}