:root{
  --red:#7A181A; --red-dk:#5F1214; --jade:#3B6952; --yellow:#DDA15E; --indigo:#2A3C4D;
  --bg:#FAFAFA; --parch:#F5F0E8; --kraft:#E8DCCA;
  --ink:#1C150C; --char:#4A4A4A; --ash:#B0B0B0;
  --ok:#6E8C76; --warn:#E2A740; --err:#D32F2F;
  --fh:'Lora',Georgia,serif; --fb:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:10px;
}
html{color-scheme:only light;background:var(--bg)}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--char);font:14px/1.55 var(--fb);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--fh);color:var(--ink);margin:0;font-weight:600}
button,input,select,textarea{font:inherit;color:var(--ink)}
input,select,textarea{border:1px solid var(--kraft);background:#fff;border-radius:6px;padding:7px 9px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--jade);outline-offset:0;border-color:var(--jade)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--jade)}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--jade)}
textarea{resize:vertical;min-height:54px;font-family:var(--fb)}
select option{background:#fff;color:var(--ink)}
::placeholder{color:var(--ash);opacity:1}
label{display:block;font-size:12.5px;font-weight:500;color:var(--char)}
label>input,label>select,label>textarea{margin-top:3px}
label.inline{display:flex;align-items:center;gap:6px;white-space:nowrap}
label.inline input:not([type=checkbox]){width:80px;margin-top:0}
a{color:var(--jade)}

.btn{border:1px solid var(--kraft);background:#fff;color:var(--ink);border-radius:6px;padding:7px 13px;cursor:pointer;font-weight:500;white-space:nowrap;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--char)}
.btn:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#FAFAFA}
.btn.primary:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn.jade{background:var(--jade);border-color:var(--jade);color:#FAFAFA}
.btn.ghost{border-color:transparent;background:transparent;color:var(--char)}
.btn.ghost:hover{background:var(--parch);border-color:transparent}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn.danger{color:var(--err)}

/* ---- Màn hình đăng nhập ---- */
#gate{position:fixed;inset:0;z-index:200;background:var(--parch);display:flex;align-items:center;justify-content:center;padding:20px}
#gate form{background:#fff;border:1px solid var(--kraft);border-radius:14px;padding:26px;width:100%;max-width:380px;box-shadow:0 18px 50px rgba(28,21,12,.14);display:grid;gap:12px}
.gate-brand{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.gate-brand h1{font-size:19px;line-height:1.2}
.gate-brand p{margin:2px 0 0;font-size:12.5px;color:#76716a}
#gate .btn{width:100%;justify-content:center;padding:10px}
.gate-msg{font-size:13px;color:var(--err);min-height:18px}
.gate-note{font-size:11.5px;color:#7a746c;margin:0;line-height:1.5;border-top:1px solid var(--parch);padding-top:11px}
body.locked{overflow:hidden}
.who{font-size:12px;opacity:.9;display:flex;align-items:center;gap:8px}
.who button{background:transparent;border:1px solid rgba(250,250,250,.4);color:#FAFAFA;border-radius:6px;padding:2px 9px;font-size:12px;cursor:pointer}
.who button:hover{background:rgba(250,250,250,.14)}

header{background:var(--red);color:#FAFAFA;position:sticky;top:0;z-index:40}
.hwrap{max-width:1500px;margin:0 auto;padding:12px 20px 0;display:flex;flex-direction:column;gap:10px}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand h1{color:#FAFAFA;font-size:20px;line-height:1.2}
.brand .sub{opacity:.82;font-size:13px;border-left:1px solid rgba(250,250,250,.35);padding-left:12px}
.logo{display:flex}
.conn{margin-left:auto;font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px}
.conn .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);display:inline-block}
.conn.ok .dot{background:#8FC79A}
.conn.bad .dot{background:#FFB4B4}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{background:transparent;border:0;color:#FAFAFA;opacity:.72;padding:10px 16px;border-radius:9px 9px 0 0;cursor:pointer;font-weight:600;white-space:nowrap;font-size:14px}
nav button:hover{opacity:1}
nav button[aria-selected=true]{background:var(--bg);color:var(--red);opacity:1}
nav .count{display:inline-block;background:var(--yellow);color:var(--ink);border-radius:9px;padding:0 6px;font-size:11px;margin-left:6px;font-weight:700}

main{max-width:1500px;margin:0 auto;padding:16px 20px 80px}
.tab{display:none}.tab.on{display:block}

.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.start{align-items:start}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.grow{flex:1 1 200px}
.mt10{margin-top:10px}.mb10{margin-bottom:10px}
@media (max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.panel{background:#fff;border:1px solid var(--kraft);border-radius:var(--r);padding:16px;margin-bottom:14px}
.panel.parch{background:var(--parch)}
.panel h2{font-size:16.5px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rx-head-actions{display:flex;gap:8px;align-items:center}
.hint{font-size:12.5px;color:#6f6f6f;margin:0 0 8px}
.muted{color:#78736c;font-size:12.5px}
.empty{padding:26px;text-align:center;color:#8a8a8a;font-size:13px}

.rx-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:14px;align-items:start}
.rx-side{position:sticky;top:104px}
@media (max-width:1180px){.rx-layout{grid-template-columns:minmax(0,1fr)}.rx-side{position:static}}

.find-patient{position:relative;margin-bottom:10px}
.ac{position:absolute;z-index:30;left:0;right:0;top:100%;background:#fff;border:1px solid var(--kraft);border-radius:8px;box-shadow:0 10px 26px rgba(28,21,12,.14);max-height:280px;overflow:auto}
.ac button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--parch);font-size:13px}
.ac button:hover,.ac button:focus{background:var(--parch)}
.ac b{color:var(--ink)}
.p-badge{background:var(--parch);border-left:3px solid var(--jade);border-radius:0 8px 8px 0;padding:8px 12px;margin-bottom:10px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.tw{overflow:auto;border:1px solid var(--kraft);border-radius:8px;background:#fff}
table{border-collapse:collapse;width:100%}
th,td{padding:7px 9px;border-bottom:1px solid var(--parch);text-align:left;vertical-align:top;color:var(--char)}
th{background:var(--parch);color:var(--ink);font-weight:600;font-size:12.5px;position:sticky;top:0;white-space:nowrap;z-index:2}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.low td{background:#FDF6E8}
tr.out td{background:#FBECEC}
.items td{vertical-align:middle;padding:4px 6px}
.items input{padding:5px 7px}
.totals{text-align:right;font-size:13px}
.totals b{color:var(--ink);font-family:var(--fh)}
#sumAll{color:var(--red)}

.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11.5px;background:var(--kraft);color:var(--ink);white-space:nowrap;font-weight:500}
.tag.bac{background:var(--indigo);color:#FAFAFA}
.tag.nam{background:var(--jade);color:#FAFAFA}
.tag.ok{background:var(--ok);color:#fff}
.tag.warn{background:var(--warn);color:var(--ink)}
.tag.err{background:var(--err);color:#fff}
.tag.soft{background:#fff;border:1px solid var(--kraft)}
.tag.jade-t{background:#EAF1EC;border:1px solid var(--jade);color:var(--jade)}
.qtags{display:flex;flex-wrap:wrap;gap:4px}
.stock-low{color:#946000;font-weight:600}
.stock-out{color:var(--err);font-weight:700}

.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--parch);border-left:3px solid var(--kraft);padding:9px 15px;border-radius:0 8px 8px 0;min-width:140px}
.stat b{display:block;font-family:var(--fh);font-size:21px;color:var(--ink);line-height:1.2}
.stat span{font-size:12.5px}
.stat.warn{border-color:var(--warn)}.stat.err{border-color:var(--err)}.stat.ok{border-color:var(--jade)}
.stat.click{cursor:pointer}.stat.click:hover{background:var(--kraft)}

.warnbox:empty{display:none}
.warnbox{margin-top:10px}
.alert{border-left:4px solid var(--warn);background:#FFF8EC;padding:8px 12px;border-radius:0 6px 6px 0;margin:6px 0;font-size:13px}
.alert.err{border-color:var(--err);background:#FDEDED}
.alert.ok{border-color:var(--ok);background:#EFF4F0}
.alert.info{border-color:var(--indigo);background:#EEF1F4}

.chips{display:flex;flex-direction:column;gap:4px;margin:5px 0 2px}
.chips label{display:flex;gap:7px;align-items:flex-start;font-weight:400;font-size:12.5px;cursor:pointer}
.chips input{margin-top:3px}
details.tpl summary{cursor:pointer;font-size:12.5px;color:var(--jade);font-weight:600;margin-top:4px}

.sticky-actions{position:sticky;bottom:0;background:rgba(250,250,250,.97);backdrop-filter:blur(4px);border-top:1px solid var(--kraft);padding:10px 0;display:flex;gap:8px;flex-wrap:wrap;z-index:20}

.ai .agents{display:grid;gap:7px}
.agent{text-align:left;border:1px solid var(--kraft);background:#fff;border-radius:8px;padding:8px 11px;cursor:pointer;display:block;width:100%}
.agent:hover{border-color:var(--jade);background:#F4F8F5}
.agent:disabled{opacity:.5;cursor:not-allowed}
.agent b{display:block;color:var(--ink);font-size:13px}
.agent span{font-size:11.5px;color:#76716a;line-height:1.35;display:block}
.disclaimer{font-size:11.5px;color:#767068;margin:9px 0 0;line-height:1.45}
.ai-out{margin-top:10px;font-size:13px}
.ai-out:empty{display:none}
.ai-card{background:var(--parch);border:1px solid var(--kraft);border-radius:8px;padding:11px;margin-bottom:9px}
.ai-card h3{font-size:13.5px;margin-bottom:5px}
.ai-card .line{margin:3px 0}
.formula{background:#fff;border:1px solid var(--kraft);border-radius:8px;padding:10px;margin:8px 0}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .9s linear infinite;vertical-align:-1px;margin-right:5px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

.quicklist{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:340px;overflow:auto}
.quickitem{border:1px solid var(--kraft);border-radius:8px;padding:8px 10px;font-size:12.5px;background:#fff}
.quickitem b{color:var(--ink);font-size:13px;display:block}
.quickitem .qtags{margin:4px 0}
.quickitem .qtags .tag{margin-right:4px;margin-bottom:3px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--kraft);border-radius:var(--r);padding:13px;display:flex;flex-direction:column;gap:7px}
.card h3{font-size:15px}
.card .meta{font-size:12.5px}
.mfilter>summary{display:none}
.tagbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tagbar button{border:1px solid var(--kraft);background:#fff;border-radius:12px;padding:2px 10px;font-size:12px;cursor:pointer}
.tagbar button.on{background:var(--jade);color:#fff;border-color:var(--jade)}
.tagbar button.red-on{background:var(--red);color:#fff;border-color:var(--red)}
.card .why{font-size:11.5px;color:var(--jade);font-weight:600}

/* ---- Chọn nhanh tứ chẩn (cộng dồn nhiều lựa chọn) ---- */
.withpick{position:relative;display:flex;gap:5px;align-items:stretch;margin-top:3px}
.withpick>input{flex:1;min-width:0;margin-top:0}
.pickbtn{flex:0 0 auto;border:1px solid var(--kraft);background:var(--parch);color:var(--ink);border-radius:6px;padding:0 9px;font-size:12px;cursor:pointer;white-space:nowrap}
.pickbtn:hover{border-color:var(--jade);color:var(--jade)}
.pickbtn.on{background:var(--jade);border-color:var(--jade);color:#fff}
.pickpanel{position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;min-width:300px;max-height:min(58vh,420px);overflow:auto;background:#fff;border:1px solid var(--kraft);border-radius:10px;box-shadow:0 12px 34px rgba(28,21,12,.18);padding:10px 11px}
.pickpanel .pk-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pickpanel .pk-h b{font-size:12.5px;color:var(--ink)}
.pickpanel .pk-h .muted{font-size:11.5px}
.pickpanel h5{font-size:11.5px;color:var(--jade);font-weight:700;margin:8px 0 4px;text-transform:uppercase;letter-spacing:.02em}
.pkchips{display:flex;flex-wrap:wrap;gap:5px}
.pkchips button{border:1px solid var(--kraft);background:#fff;color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer;line-height:1.3}
.pkchips button:hover{border-color:var(--jade)}
.pkchips button.on{background:var(--jade);border-color:var(--jade);color:#fff;font-weight:600}
.pk-out{font-size:12px;color:var(--char);background:var(--parch);border:1px solid var(--kraft);border-radius:6px;padding:5px 8px;margin-top:9px;min-height:26px}
@media (max-width:760px){.pickpanel{right:auto;width:min(92vw,360px)}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
@media (max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}}
.detail{max-height:72vh;overflow:auto}
.vrow{border:1px solid var(--kraft);border-radius:8px;padding:10px;margin-bottom:8px}
.vrow.del{opacity:.6;border-style:dashed}
.vrow h4{margin:0 0 4px;font-family:var(--fh);color:var(--ink);font-size:14px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.cmp{grid-template-columns:minmax(0,1fr)}}
.cmp .chg-up{color:var(--err);font-weight:600}
.cmp .chg-dn{color:var(--jade);font-weight:600}
.cmp .chg-new{color:var(--indigo);font-weight:600}

dialog{background:#fff;color:var(--char);border:0;border-radius:12px;padding:0;max-width:min(1000px,96vw);width:100%;box-shadow:0 22px 64px rgba(28,21,12,.35)}
dialog::backdrop{background:rgba(28,21,12,.45)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:1px solid var(--kraft);background:var(--parch)}
.dlg-h h2{font-size:16.5px}
.dlg-b{padding:16px 18px;max-height:72vh;overflow:auto;background:#fff}
.dlg-f{padding:11px 18px;border-top:1px solid var(--kraft);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:var(--parch)}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--indigo);color:#FAFAFA;padding:10px 17px;border-radius:8px;z-index:9999;display:none;max-width:90vw;font-size:13.5px;box-shadow:0 8px 24px rgba(28,21,12,.3)}

/* ===== Đơn thuốc in ===== */
#printArea{display:none}
.doc{font-family:'Times New Roman',Times,serif;color:#000;background:#fff;font-size:14px;line-height:1.45}
.doc .unit{font-size:13.5px;line-height:1.4}
.doc .unit b{font-size:14px}
.doc h2.doc-title{font-family:'Times New Roman',Times,serif;text-align:center;font-size:21px;letter-spacing:2px;margin:12px 0 10px;color:#000;font-weight:700}
.doc .line{margin:3.5px 0}
.doc .dots{border-bottom:1px dotted #000;display:inline-block;min-width:60px;vertical-align:baseline}
.doc table{width:100%;border-collapse:collapse;margin:7px 0;border:1px solid #000}
.doc tbody tr:last-child td{border-bottom:1px solid #000}
.doc th,.doc td{border:1px solid #000;padding:4px 6px;font-size:13.5px;background:#fff;color:#000;position:static;vertical-align:top}
.doc th{text-align:center;font-weight:700}
.doc .sign{display:flex;justify-content:space-between;margin-top:16px;text-align:center}
.doc .sign>div{width:46%}
.doc .foot{margin-top:46px;font-style:italic;font-size:13px;line-height:1.6}
.preview-doc{background:#fff;border:1px solid var(--kraft);padding:26px;max-width:800px;margin:0 auto}

@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff}
  header,main,#toast,dialog{display:none !important}
  #printArea{display:block !important}
  .doc{font-size:13.5px}
  .doc .pb{page-break-after:always}
}

/* =========================================================================
   MÀN HÌNH CẢM ỨNG — iPad và điện thoại
   ========================================================================= */

/* ---- Vùng bấm đủ rộng cho ngón tay trên mọi thiết bị cảm ứng ---- */
@media (pointer:coarse){
  .btn{padding:9px 14px}
  .btn.sm{padding:6px 11px;font-size:13px}
  nav button{padding:12px 16px}
  input[type=checkbox],input[type=radio]{width:19px;height:19px}
  .tagbar button,.pkchips button{padding:6px 12px}
  .ac button{padding:11px 12px}
}

/* ---- iPad ngang: giữ hai cột cho màn kê đơn ---- */
@media (min-width:1001px) and (max-width:1180px){
  .rx-layout{grid-template-columns:minmax(0,1fr) 312px}
  .rx-side{position:sticky;top:104px}
}

/* ---- iPad dọc (768–1000px) ---- */
@media (max-width:1000px){
  .hwrap{padding:10px 14px 0}
  main{padding:14px 14px 80px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .rx-side{position:static}
  .dlg-b{max-height:70vh}
  .rx-main,.rx-side,.panel,.tw,.cards{min-width:0}
  .row>label[style*="width:1"]{width:auto !important;flex:1 1 150px}
}

/* Máy tính bảng: bảng kho và bệnh nhân giữ đủ bề rộng cột rồi vuốt ngang,
   thay vì bị bóp cho vừa màn khiến chữ xuống dòng từng ký tự */
@media (min-width:761px) and (max-width:1000px){
  #tab-kho .tw>table{min-width:920px}
  .split .tw>table{min-width:430px}
}

/* =========================================================================
   ĐIỆN THOẠI (≤ 760px)
   ========================================================================= */
@media (max-width:760px){

  /* Ô nhập 16px để iOS không tự phóng to trang khi chạm vào ô */
  input,select,textarea{font-size:16px;padding:9px 10px}
  label{font-size:12.5px}
  body{font-size:14.5px}

  /* ---- Đầu trang gọn lại, thanh tab vuốt ngang ---- */
  header{padding-top:env(safe-area-inset-top)}
  .hwrap{padding:9px 12px 0;gap:8px}
  .brand{gap:8px}
  .brand h1{font-size:16px}
  .brand .sub{display:none}
  .conn{margin-left:auto}
  .conn .ct{display:none}
  .who{font-size:11.5px;gap:0}
  .who>span{display:none}
  .who button{white-space:nowrap;padding:5px 11px;font-size:12px}
  nav{margin:0 -12px;padding:0 12px;gap:0}
  nav button{font-size:13.5px;padding:11px 13px;border-radius:9px 9px 0 0}

  main{padding:12px 12px 24px}
  .actbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 10px;padding:0 12px 2px}
  .actbar::-webkit-scrollbar{display:none}
  .actbar>*{flex:0 0 auto}
  .panel{padding:12px;border-radius:9px;margin-bottom:11px}
  .panel h2{font-size:15.5px}
  .row{gap:8px}
  .row>label,.row>.grow{flex:1 1 100%}
  .row>label[style*="width:"]{width:auto !important;flex:1 1 100%}
  .grid{gap:9px}

  /* ---- Bảng dữ liệu xếp lại thành thẻ ---- */
  .tw{overflow:visible;border:0;background:transparent;border-radius:0;max-height:none !important}
  .tw table,.tw tbody,.tw tfoot,.tw tr,.tw td{display:block;width:100%}
  .tw thead{display:none}
  .tw tbody>tr{border:1px solid var(--kraft);border-radius:10px;background:#fff;padding:10px 12px;margin-bottom:9px}
  .tw tbody>tr:last-child{margin-bottom:0}
  .tw tbody>tr.out{border-color:#EFC9C9;background:#FFF7F7}
  .tw tbody>tr.low{border-color:var(--yellow);background:#FFFCF5}
  .tw td{border:0;padding:4px 0;text-align:left !important;white-space:normal}
  .tw td:empty,.tw td.ec{display:none}
  .tw td::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:700;color:var(--jade);
    text-transform:uppercase;letter-spacing:.04em;line-height:1.5}
  .tw td[data-l=""]::before{display:none}
  .tw td.ttl::before{display:none}
  .tw td.ttl{font-size:15.5px;font-weight:600;color:var(--ink);padding:0 0 7px;margin-bottom:6px;border-bottom:1px dashed var(--kraft)}
  .tw td.ttl b{font-weight:600}
  .tw td[data-l=""]{padding-top:9px;display:flex;flex-wrap:wrap;gap:7px}
  .tw td[data-l=""] .btn{flex:1 1 auto;text-align:center}
  .tw td.mh{display:none}
  .tw tfoot>tr{border:0;background:transparent;padding:0;margin:0}
  .tw tfoot td{padding:9px 0 0}
  .tw tbody>tr>td[colspan]{padding:20px 0}
  .tw tbody>tr>td[colspan]::before{display:none}
  .tw .empty{padding:20px 12px}

  /* Bảng kê vị thuốc: các ô tính toán xếp thành hàng chip cho đỡ dài */
  .tw table.items tbody>tr{position:relative;padding-top:12px}
  .tw table.items td[data-c]{display:inline-block;width:auto;margin:0 14px 0 0;padding:2px 0}
  .tw table.items td[data-c]::before{display:block}
  .tw table.items td[data-c="status"]{display:block;width:100%;margin:0}
  .tw table.items td:nth-last-child(2){display:inline-flex;align-items:center;gap:8px;width:auto;
    margin:9px 16px 0 0;padding:0}
  .tw table.items td:nth-last-child(2)::before{display:inline-block;margin:0}
  .tw table.items td:last-child{display:inline-block;width:auto;margin:9px 0 0}
  .tw table.items td:last-child .btn{border-color:var(--kraft);color:var(--err);padding:5px 12px}
  .tw table.items td:last-child .btn::after{content:' Xóa vị'}
  .tw table.items td[data-c="money"]{display:block;width:100%;margin:0}
  .tw table.items input[data-f="gram"]{width:100% !important;text-align:left !important}

  /* ---- Thanh nút cố định dưới đáy khi đang kê đơn ---- */
  #tab-kedon .sticky-actions{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;
    border-top:1px solid var(--kraft);box-shadow:0 -6px 22px rgba(28,21,12,.14);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #tab-kedon .sticky-actions::-webkit-scrollbar{display:none}
  #tab-kedon .sticky-actions .btn{flex:0 0 auto}
  body:has(#tab-kedon.on) main{padding-bottom:82px}

  /* ---- Hộp thoại chiếm trọn màn hình ---- */
  dialog{max-width:100vw;width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0;
    display:flex;flex-direction:column}
  dialog:not([open]){display:none}
  .dlg-h{padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top))}
  .dlg-b{padding:14px;max-height:none;flex:1 1 auto}
  .dlg-f{padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:7px}
  .dlg-f .btn{flex:1 1 auto;text-align:center}

  /* ---- Các khối còn lại ---- */
  .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{min-width:0;padding:8px 12px}
  .stat b{font-size:19px}
  .split{grid-template-columns:minmax(0,1fr)}
  .detail{max-height:none}
  .cards{grid-template-columns:minmax(0,1fr)}
  .tagbar{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:9px -12px 0;padding:0 12px 3px}
  .tagbar::-webkit-scrollbar{display:none}
  .tagbar button{flex:0 0 auto}
  #loaiBar{margin-top:0}
  .mfilter>summary{list-style:none;cursor:pointer;font-weight:600;color:var(--jade);font-size:13px;
    padding:8px 0 4px;display:flex;align-items:center;gap:6px}
  .mfilter>summary::-webkit-details-marker{display:none}
  .mfilter>summary::after{content:'▾';transition:transform .15s}
  .mfilter[open]>summary::after{transform:rotate(180deg)}
  .quicklist{max-height:none}
  .withpick{flex-wrap:wrap}
  .withpick>input{flex:1 1 100%}
  .pickbtn{flex:1 1 100%;padding:8px}
  .pickpanel{position:static;width:auto;max-height:none;margin-top:7px;box-shadow:none}
  .sign,.doc .sign{flex-direction:column;gap:18px}
  .preview-doc{padding:14px}
  #toast{left:12px;right:12px;transform:none;bottom:calc(84px + env(safe-area-inset-bottom));max-width:none;text-align:center}
}

/* ---- Điện thoại nhỏ (≤ 400px) ---- */
@media (max-width:400px){
  .brand h1{font-size:15px}
  nav button{padding:11px 10px;font-size:13px}
}
@media (max-width:359px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{min-width:0}
}

/* ---------- Bảng tích chọn phân quyền (mở ngay dưới dòng tài khoản) ---------- */
.qrow > td { background: var(--kraft); padding: 0 !important; }
.qbox { padding: 12px 14px 14px; border-left: 3px solid var(--jade); }
.qhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 9px; }
.qhead b { font-family: var(--fh); color: var(--red); }
.qhead span { font-size: 12px; }
.qbox .tw { background: #fff; border-radius: 8px; }
table.qgrid { font-size: 13px; }
table.qgrid th { text-align: center; }
table.qgrid th.ttl, table.qgrid td.ttl { text-align: left; }
table.qgrid td { text-align: center; vertical-align: middle; }
.qmo { font-size: 11.5px; font-weight: 400; line-height: 1.35; margin-top: 2px; max-width: 34em; }
.qchk { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border-radius: 7px; cursor: pointer; }
.qchk:hover { background: var(--parch); }
.qchk input { width: 18px; height: 18px; accent-color: var(--jade); cursor: pointer; margin: 0; }
.qchk.qrieng { background: #fdf3e0; box-shadow: inset 0 0 0 1px var(--yellow); }
.qfoot { align-items: center; gap: 8px; flex-wrap: wrap; }
.qfoot .muted { font-size: 12px; }
@media (max-width: 760px) {
  .qrow > td { display: block; }
  .qbox { padding: 10px; }
  .qmo { max-width: none; }
  /* mỗi phân hệ là một thẻ, bốn ô tích xếp thành một hàng bốn cột cho gọn màn */
  .qbox .tw table.qgrid td:not(.ttl) {
    display: inline-block; width: 25%; text-align: center !important;
    padding: 7px 0 5px; vertical-align: top;
  }
  .qbox .tw table.qgrid td:not(.ttl)::before {
    display: block; text-align: center; margin-bottom: 2px; font-size: 10px; letter-spacing: .2px;
  }
  .qbox .tw table.qgrid td.ttl { padding-bottom: 5px; }
  .qbox .tw table.qgrid tbody > tr { padding-bottom: 4px; }
}
@media (pointer: coarse) {
  .qchk { width: 44px; height: 44px; }
  .qchk input { width: 22px; height: 22px; }
}
/* bảng quyền không cần kéo hết chiều ngang màn hình lớn */
table.qgrid { max-width: 940px; }