/* ============================================================================
   4/10 (kit mac): hop thoai PC con sot -> cung bo khung mac kit (mac_kit.css / pc_bill.css / pc_sales_detail.css).
   CHI HIEN THI — khong doi logic / du lieu / id / handler.
   - Lop .pkm gan vao the hop (.modal trong #modalHost, hoac the hop noi tren body co nen .pkm-ov).
     #modalHost: chi ap tren PC (body.pc2). Hop noi tren body (.pkm-ov) da bo style inline -> ap moi noi.
   - Dau hop: tieu de 16px + dong phu xam; nut Dong nhat ben phai (.toolbar).
   - Than: nhan xam nho, o nhap 36px vien xam, bang so canh phai tabular (.n).
   - Chan (.modalActions): dai trang vien tren, nut phu trai / 1 nut chinh xanh ben phai;
     nut nguy hiem = vien do (.danger), do dac chi o xac nhan cuoi (.pkm-dz).
   - Sheet iOS: #modalHost do pcMotion tu chay; hop tren body goi pcMotion.sheetIn (trong JS).
   Link SAU pc_v2.css / pc_bill.css (de ghi de cac luat #modalHost chung).
   ============================================================================ */

/* ---------- nen hop noi tren body ---------- */
.pkm-ov{background:rgba(0,0,0,.32);-webkit-backdrop-filter:none;backdrop-filter:none;/* khong !important: pcMotion lam mo dan nen */align-items:center;justify-content:center;padding:16px;box-sizing:border-box}

/* ---------- khung hop ---------- */
:is(body.pc2 #modalHost,.pkm-ov) .pkm{box-sizing:border-box;background:#fff !important;border:1px solid #d3d9e1 !important;border-radius:14px !important;box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 0 .5px rgba(0,0,0,.06) !important;
  padding:16px 18px 0 !important;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  font-family:var(--mk-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif);font-size:13.5px;line-height:1.4;color:#1d1d1f;text-align:left;-webkit-font-smoothing:antialiased}
:is(body.pc2 #modalHost,.pkm-ov) .pkm *{box-sizing:border-box}
:is(body.pc2 #modalHost,.pkm-ov) .pkm:not(:has(> .modalActions))::after{content:"";display:block;height:16px}
.pkm-ov > .pkm{width:min(460px,100%)}

/* dau hop */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .title{font-size:16px !important;font-weight:700 !important;color:#1d1d1f !important;line-height:1.3 !important;margin:0 0 2px !important;letter-spacing:0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .title .muted{font-size:13px;font-weight:500}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .muted{font-size:12.5px;color:#6e6e73;line-height:1.45}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .toolbar{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;flex-wrap:nowrap !important;gap:12px !important;
  position:static !important;margin:0 -18px 12px !important;padding:0 18px 12px !important;background:transparent !important;border:0 !important;border-bottom:1px solid #EDEDED !important;border-radius:0 !important;box-shadow:none !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .toolbar > div{min-width:0;flex:1 1 auto}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .title + .muted{margin-bottom:10px}

/* ---------- nut ---------- */
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn),
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .toolbar > button{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;flex:0 0 auto !important;width:auto !important;min-width:84px !important;
  height:36px !important;min-height:36px !important;padding:0 16px !important;margin:0 !important;border:1px solid #D1D1D1 !important;border-radius:10px !important;background:#fff !important;background-image:none !important;
  color:#1d1d1f !important;font-family:inherit !important;font-size:13.5px !important;font-weight:600 !important;line-height:1 !important;letter-spacing:0 !important;text-transform:none !important;box-shadow:none !important;filter:none !important;cursor:pointer;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .toolbar > button{min-width:0 !important;height:30px !important;min-height:30px !important;padding:0 12px !important;font-size:12.5px !important;border-radius:8px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-btn.sm{min-width:0 !important;height:28px !important;min-height:28px !important;padding:0 10px !important;font-size:12.5px !important;border-radius:8px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn,.toolbar > button):hover:not(:disabled){background:#F5F5F7 !important;border-color:#B8B8BD !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn,.toolbar > button):active{transform:scale(.98);filter:none !important;box-shadow:none !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn):is(.primary,.pri){background:#185FA5 !important;border-color:#185FA5 !important;color:#fff !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn):is(.primary,.pri):hover:not(:disabled){background:#0C447C !important;border-color:#0C447C !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn).success{background:#1D9E75 !important;border-color:#1D9E75 !important;color:#fff !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn).success:hover:not(:disabled){background:#0F6E56 !important;border-color:#0F6E56 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn):is(.danger,.red,.dg){background:#fff !important;border-color:#F09595 !important;color:#b42318 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn):is(.danger,.red,.dg):hover:not(:disabled){background:#FDF3F3 !important;border-color:#E24B4A !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn).pkm-dz{background:#D92D20 !important;border-color:#D92D20 !important;color:#fff !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn).pkm-dz:hover:not(:disabled){background:#B42318 !important;border-color:#B42318 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.modalActions > button,.pkm-btn,.toolbar > button):disabled{opacity:.5;cursor:default}

/* ---------- chan hop ---------- */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .modalActions{display:flex !important;flex-wrap:wrap !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;grid-template-columns:none !important;margin:12px 0 0 !important;padding:0 !important;background:transparent !important;border:0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .modalActions{position:sticky;bottom:0;z-index:2;margin:16px -18px 0 !important;padding:12px 18px !important;background:#fff !important;border-top:1px solid #EDEDED !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm > .modalActions > :is(.danger,.red,.dg):first-child{margin-right:auto !important}

/* ---------- nhan + o nhap ---------- */
:is(body.pc2 #modalHost,.pkm-ov) .pkm label:not(.pill):not(.pkm-opt):not(.v5ComboTick):not(.pkm-chk):not(.pkm-form > label):not(.pkm-dlg > label){display:block;font-size:12px !important;font-weight:600 !important;color:#6e6e73 !important;margin:10px 0 4px !important;line-height:1.3}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){width:100%;height:36px !important;min-height:36px !important;padding:0 10px !important;margin:0;
  border:1px solid #D1D1D1 !important;border-radius:8px !important;background:#fff;color:#1d1d1f;font-family:inherit;font-size:14px !important;font-weight:500 !important;box-shadow:none !important;outline:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm textarea{height:auto !important;min-height:64px !important;padding:8px 10px !important;line-height:1.4;resize:vertical}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(input,select,textarea):focus{border-color:#185FA5 !important;box-shadow:0 0 0 3px rgba(24,95,165,.16) !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(input,select,textarea):disabled{background:#F5F5F7 !important;color:#86868b !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm input.n{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- khoi phu ---------- */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-sec{background:#F7F7F9;border:1px solid #EDEDED;border-radius:10px;padding:10px 12px;margin-top:10px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-sec-t{font-size:12px;font-weight:700;color:#6e6e73;margin:0 0 6px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-sec-row{display:flex;flex-wrap:wrap;gap:6px}
/* (!important: ghi de style inline giu lai cho may khong phai PC) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.pkm-warn,.pkm-err,.pkm-info,.pkm-okbox){border-radius:8px !important;padding:8px 10px !important;margin:10px 0 0 !important;font-size:12.5px !important;line-height:1.45;border:0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-warn{background:#FFF4E5 !important;color:#8A4100 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-err{background:#FCEBEB !important;color:#791F1F !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-info{background:#E6F1FB !important;color:#0C447C !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-okbox{background:#EAF3DE !important;color:#27500A !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-err label{margin-top:8px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-h{font-size:13.5px !important;font-weight:700 !important;color:#1d1d1f !important;margin:12px 0 4px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-h.err{color:#b42318 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-h.warn{color:#B25000 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-h.ok{color:#0F6E56 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-ul{margin:4px 0 0 !important;padding-left:18px !important;font-size:13px !important;line-height:1.55 !important;color:#3a3a3c}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tag{display:inline-block;vertical-align:middle;font-size:11px;font-weight:600;line-height:18px;border-radius:6px;padding:0 7px;background:#F2F2F7;color:#3a3a3c;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tag.ok{background:#EAF3DE;color:#27500A}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tag.warn{background:#FFF4E5;color:#B25000}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tag.err{background:#FCEBEB;color:#791F1F}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tag.info{background:#E6F1FB;color:#0C447C}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.n,.pkm-num){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-up{color:#0F6E56 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-down{color:#b42318 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-amber{color:#B25000 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-blue{color:#0C447C !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm pre{margin:0 !important;white-space:pre-wrap;word-break:break-all;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;background:#F7F7F9 !important;border:1px solid #EDEDED !important;border-radius:8px !important;padding:10px 12px !important;color:#3a3a3c}
:is(body.pc2 #modalHost,.pkm-ov) .pkm details{margin-top:12px;font-size:12px;color:#6e6e73}
:is(body.pc2 #modalHost,.pkm-ov) .pkm details > summary{cursor:pointer;margin-bottom:6px}

/* bang khoa: gia tri (2 cot, gia tri canh phai tabular) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:0 14px !important;align-items:center;font-size:13px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > *{padding:6px 0;border-top:1px solid #EDEDED;min-width:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > :nth-child(-n+2){border-top:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > :nth-child(odd){color:#3a3a3c}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > :nth-child(even){justify-self:end;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:#1d1d1f}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > .em{font-weight:700 !important;color:#1d1d1f !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > .sep{border-top:1px solid #D1D1D1 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv > .sub{color:#6e6e73 !important;padding-left:10px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-kv input{width:150px !important;text-align:right;font-variant-numeric:tabular-nums}

/* bang */
:is(body.pc2 #modalHost,.pkm-ov) .pkm table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;margin:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table th{position:sticky;top:0;z-index:1;background:#FAFAFA !important;color:#6e6e73 !important;font-size:11.5px !important;font-weight:600 !important;text-align:left;padding:7px 10px !important;border:0 !important;border-bottom:1px solid #E0E0E0 !important;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table td{padding:7px 10px !important;border:0 !important;border-top:1px solid #EDEDED !important;vertical-align:top;color:#1d1d1f}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table tbody tr:first-child td{border-top:0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table tbody tr:hover td{background:#F7F9FC}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table :is(th,td).n{text-align:right !important;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table :is(th,td).c{text-align:center !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table tfoot td{position:sticky;bottom:0;background:#F7F7F9 !important;font-weight:700;border-top:1px solid #E0E0E0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm table td .muted{font-size:11.5px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .billLines,
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-tbl{border:1px solid #E0E0E0 !important;border-radius:10px !important;overflow:auto;background:#fff;max-height:52vh}

/* tong (.sum) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum{margin-top:10px !important;border:1px solid #E0E0E0;border-radius:10px;padding:2px 12px;background:#fff}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum .sumRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #EDEDED;font-size:13px;color:#3a3a3c}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum .sumRow:first-child{border-top:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum .sumRow > :last-child{font-weight:600;color:#1d1d1f;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum .sumRow.grand{font-size:14.5px;font-weight:700;color:#1d1d1f;border-top:1px solid #D1D1D1}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .sum .sumRow.grand > :last-child{font-size:16px;font-weight:700}

/* danh sach dong (nhom kieu mac) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-list{border:1px solid #E0E0E0;border-radius:10px;overflow:auto;background:#fff}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-list > *{display:block;width:100%;margin:0 !important;border:0 !important;border-top:1px solid #EDEDED !important;border-radius:0 !important;background:#fff !important;box-shadow:none !important;text-align:left;padding:9px 12px !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-list > :first-child{border-top:0 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-list > :is(button,label):hover{background:#F5F5F7 !important;cursor:pointer}

/* thanh chon 2-3 lua chon kieu Mac (.pkm-seg > button.on) — ap moi noi (nut ngay luu dong ca khong con mau inline) */
html .pkm .pkm-seg{display:inline-flex;background:#E5E5EA;border-radius:9px;padding:2px;gap:2px}
html .pkm .pkm-seg > button{height:28px !important;min-height:28px !important;padding:0 12px !important;margin:0 !important;border:0 !important;border-radius:7px !important;background:transparent !important;color:#1d1d1f !important;font-family:inherit !important;font-size:12.5px !important;font-weight:500 !important;box-shadow:none !important;cursor:pointer;white-space:nowrap}
html .pkm .pkm-seg > button.on{background:#fff !important;font-weight:600 !important;box-shadow:0 1px 2px rgba(0,0,0,.14) !important}
/* lua chon dang radio (label.pkm-opt > input) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-opts{display:flex;gap:8px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-opt{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid #D1D1D1;border-radius:8px;background:#fff;font-size:13px;font-weight:600;color:#1d1d1f;cursor:pointer;margin:0}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-opt:has(input:checked){border-color:#185FA5;background:#E6F1FB;color:#0C447C}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-opt input{margin:0;accent-color:#185FA5}

/* chip ghi chu / ly do (vien tron nhat) */
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.v4NoteChips,.v5CancelReasons){display:flex !important;flex-wrap:wrap !important;gap:6px !important;margin-top:8px !important;grid-template-columns:none !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.v4NoteChips,.v5CancelReasons) > button{width:auto !important;height:28px !important;min-height:28px !important;padding:0 11px !important;margin:0 !important;border:1px solid #DDE3EA !important;border-radius:999px !important;background:#F5F7FA !important;background-image:none !important;color:#344054 !important;font-family:inherit !important;font-size:12.5px !important;font-weight:600 !important;line-height:1 !important;box-shadow:none !important;white-space:nowrap}
:is(body.pc2 #modalHost,.pkm-ov) .pkm :is(.v4NoteChips,.v5CancelReasons) > button:hover{border-color:#185FA5 !important;color:#185FA5 !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .v4NoteChips > button.strong{background:#E6F1FB !important;border-color:#B5D4F4 !important;color:#0C447C !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .v5CancelReasons > button.active{background:#FCEBEB !important;border-color:#F09595 !important;color:#A32D2D !important}

/* =====================================================================
   1. Dong mon: sua dong / huy / doi mon / ghi chu / giam tien (app_settings.js)
   ===================================================================== */
body.pc2 #modalHost .pkm.v5LineEditModal{width:min(460px,96vw)}
body.pc2 #modalHost .pkm.v5ChangeModal{width:min(600px,96vw)}
body.pc2 #modalHost .pkm .v5LineEditGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:0}
body.pc2 #modalHost .pkm .v5QtyEdit{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:6px}
body.pc2 #modalHost .pkm .v5QtyEdit > button{width:36px !important;min-width:0 !important;height:36px !important;min-height:36px !important;padding:0 !important;margin:0 !important;border:1px solid #D1D1D1 !important;border-radius:8px !important;background:#fff !important;color:#1d1d1f !important;font-size:17px !important;font-weight:500 !important;box-shadow:none !important}
body.pc2 #modalHost .pkm .v5QtyEdit > button:hover:not(:disabled){background:#F5F5F7 !important}
body.pc2 #modalHost .pkm .v5QtyEdit > button:disabled{opacity:.45}
body.pc2 #modalHost .pkm #v5QtyInput,body.pc2 #modalHost .pkm #v5CancelQty{text-align:center;font-variant-numeric:tabular-nums;font-weight:600 !important}
body.pc2 #modalHost .pkm #v5PriceInput{text-align:right;font-variant-numeric:tabular-nums;font-weight:600 !important}
body.pc2 #modalHost .pkm .v5LineEditTotal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;padding:9px 12px;border:1px solid #EDEDED !important;border-radius:10px;background:#F7F7F9 !important;color:#6e6e73 !important;font-size:13px;font-weight:600}
body.pc2 #modalHost .pkm .v5LineEditTotal b{font-size:16px;font-weight:700;color:#1d1d1f;font-variant-numeric:tabular-nums}
body.pc2 #modalHost .pkm .v5LineEditWarn{margin:0 0 10px;padding:8px 10px;border:0 !important;border-radius:8px;background:#FCEBEB !important;color:#791F1F !important;font-size:12.5px;font-weight:600}
/* doi mon: danh sach dong */
body.pc2 #modalHost .pkm .v5ChangeList{display:block !important;max-height:56vh;overflow:auto;margin-top:10px;border:1px solid #E0E0E0;border-radius:10px;background:#fff}
body.pc2 #modalHost .pkm .v5ChangeItem{display:grid !important;gap:2px;width:100%;margin:0 !important;padding:8px 12px !important;border:0 !important;border-top:1px solid #EDEDED !important;border-radius:0 !important;background:#fff !important;box-shadow:none !important;text-align:left;cursor:pointer}
body.pc2 #modalHost .pkm .v5ChangeItem:first-child{border-top:0 !important}
body.pc2 #modalHost .pkm .v5ChangeItem:hover{background:#F5F5F7 !important}
body.pc2 #modalHost .pkm .v5ChangeItem b{font-size:13.5px;font-weight:600;color:#1d1d1f}
body.pc2 #modalHost .pkm .v5ChangeItem span{font-size:11.5px;color:#6e6e73;font-variant-numeric:tabular-nums}
body.pc2 #modalHost .pkm .v5ChangeItem.unassigned{box-shadow:inset 3px 0 0 #EF9F27 !important}
body.pc2 #modalHost .pkm .v5ChangeItem.unassigned span{color:#B25000}
/* giam tien mon (#lineDiscOv) */
#lineDiscOv > .pkm{width:min(400px,100%)}
#lineDiscOv .pkm .pkm-ldsub{margin-bottom:10px}
#lineDiscOv .pkm #ldPreview{min-height:18px;margin-top:8px;font-size:12.5px;color:#0C447C;font-variant-numeric:tabular-nums}
#lineDiscOv .pkm #ldVal{text-align:right;font-variant-numeric:tabular-nums}

/* chip Giam tren dong bill (pc_bill.css giu luoi cot): bo vang chu -> chip xam nhu Ghi chu; dang giam = cam nhat */
body.pc2 #sec-order .card.bill.pcb #billBody .v5BillRow .v5DiscBtn{background:#F5F7FA !important;border:1px solid #DDE3EA !important;color:#344054 !important}
body.pc2 #sec-order .card.bill.pcb #billBody .v5BillRow .v5DiscBtn:hover{border-color:#185FA5 !important;color:#185FA5 !important}
body.pc2 #sec-order .card.bill.pcb #billBody .v5BillRow .v5DiscBtn.v5DiscOn{background:#FFF4E5 !important;border-color:#F2C77E !important;color:#B25000 !important}

/* =====================================================================
   2. SL + ghi chu khi bam mon (app_print.js promptQuantityNoteV4)
   ===================================================================== */
body.pc2 #modalHost .pkm.pkm-qn{width:min(480px,96vw)}
body.pc2 #modalHost .pkm.pkm-qn #modalQty{width:140px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600 !important}
body.pc2 #modalHost .pkm.pkm-qn #v4NoteSearchHint{margin:4px 0 0 !important;min-height:16px}

/* =====================================================================
   3. Nhap phieu order theo ma (app_order_actions.js)
   ===================================================================== */
body.pc2 #modalHost .pkm.pcOrderImportConfirm{width:min(600px,96vw)}
body.pc2 #modalHost .pkm.pkm-named{width:min(460px,96vw)}
body.pc2 #modalHost .pkm .pkm-list .namedCandidate{cursor:pointer}
body.pc2 #modalHost .pkm .namedCandidate .pkm-nc-code{font-family:inherit !important;font-size:13.5px !important;font-weight:600 !important;color:#1d1d1f;font-variant-numeric:tabular-nums;letter-spacing:.01em}
body.pc2 #modalHost .pkm .namedCandidate .pkm-nc-meta{font-size:11.5px !important;color:#6e6e73 !important;margin-top:2px !important}

/* =====================================================================
   4. Bill da thanh toan (viewPaidBill + showPaidBillDetail)
   ===================================================================== */
body.pc2 #modalHost .pkm.billDetail{width:min(660px,96vw)}
body.pc2 #modalHost .pkm.billDetail .billLines{max-height:44vh}
.pkm-ov > .pkm.pkm-pd{width:min(520px,100%)}
.pkm-ov .pkm .pkm-pdrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:6px 10px;border-top:1px solid #EDEDED;font-size:13px}
.pkm-ov .pkm .pkm-pdrow:first-child{border-top:0}
.pkm-ov .pkm .pkm-pdrow.hit{background:#FFF8E6}
.pkm-ov .pkm .pkm-pdrow > :last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right}
.pkm-ov .pkm .pkm-pdrow small{color:#6e6e73;font-size:12px;font-variant-numeric:tabular-nums}

/* =====================================================================
   5. QR goi mon (#guestQrModal - markup trong index.html, chi ghi de bang CSS)
   ===================================================================== */
html body.pc2 #guestQrModal{background:rgba(0,0,0,.32) !important}
html body.pc2 #guestQrModal > div{width:min(340px,92vw) !important;max-width:none !important;padding:16px 18px !important;border:1px solid #d3d9e1 !important;border-radius:14px !important;background:#fff !important;box-shadow:0 24px 60px rgba(0,0,0,.22) !important;
  font-family:var(--mk-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif) !important;color:#1d1d1f;-webkit-font-smoothing:antialiased}
html body.pc2 #guestQrModal > div > div:nth-child(1){font-size:16px !important;font-weight:700 !important;color:#1d1d1f !important}
html body.pc2 #guestQrModal > div > div:nth-child(2){font-size:12.5px !important;color:#6e6e73 !important;margin:2px 0 12px !important}
html body.pc2 #guestQrModal > div > div:nth-child(3){border:1px solid #EDEDED;border-radius:12px;background:#FAFAFA}
html body.pc2 #guestQrModal #guestQrImg{border-radius:8px !important;background:#fff}
html body.pc2 #guestQrModal #guestQrLoad{color:#6e6e73 !important;font-size:13px !important}
html body.pc2 #guestQrModal #guestQrNo{color:#b42318 !important;font-size:13px !important}
html body.pc2 #guestQrModal #guestQrUrl{color:#6e6e73 !important;font-size:11px !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important}
html body.pc2 #guestQrModal > div > button{margin-top:14px !important;height:36px !important;padding:0 22px !important;border:1px solid #D1D1D1 !important;border-radius:10px !important;background:#fff !important;color:#1d1d1f !important;font-family:inherit !important;font-size:13.5px !important;font-weight:600 !important;box-shadow:none !important}
html body.pc2 #guestQrModal > div > button:hover{background:#F5F5F7 !important}

/* =====================================================================
   7. Chot ca (app_checkout.js + app_render.js)
   ===================================================================== */
body.pc2 #modalHost .pkm.pkm-shift{width:min(560px,96vw)}
body.pc2 #modalHost .pkm.pkm-recon{width:min(720px,96vw)}
body.pc2 #modalHost .pkm .pkm-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
body.pc2 #modalHost .pkm .pkm-cols > .pkm-sec{margin-top:0;background:#fff;border-color:#E0E0E0}
body.pc2 #modalHost .pkm .pkm-dayrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
body.pc2 #modalHost .pkm .pkm-dayrow > span{font-size:12.5px;font-weight:600;color:#6e6e73}
body.pc2 #modalHost .pkm .pkm-recon-more{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
body.pc2 #modalHost .pkm .pkm-item{border-left:3px solid #E0E0E0 !important;background:#F7F7F9 !important;border-radius:0 8px 8px 0 !important;padding:8px 12px !important;margin:6px 0 !important}
body.pc2 #modalHost .pkm .pkm-item.err{border-left-color:#E24B4A !important}
body.pc2 #modalHost .pkm .pkm-item.warn{border-left-color:#EF9F27 !important}
body.pc2 #modalHost .pkm .pkm-item > b{display:block;font-size:13px;font-weight:600;color:#1d1d1f}
body.pc2 #modalHost .pkm .pkm-files{margin:6px 0 0;padding-left:18px;max-height:170px;overflow:auto;font-size:12.5px;color:#3a3a3c}
/* hop tren body: cho ket ca / bat buoc ket ca */
.pkm-ov > .pkm.pkm-wait{width:min(440px,100%)}
.pkm-ov > .pkm.pkm-close{width:min(520px,100%)}
.pkm-ov .pkm #shiftCloseStatus{font-size:12px;color:#6e6e73;text-align:right;min-height:16px;margin:8px 0 0}

/* =====================================================================
   8. Tong quan hom nay: ban dang phuc vu / tam tinh / hoa don / phi the
   ===================================================================== */
body.pc2 #modalHost .pkm.pkm-cardfee{width:min(860px,96vw)}
body.pc2 #modalHost .pkm .pkm-cardfee-fee{color:#B25000 !important}

/* =====================================================================
   9-11. Sua phieu thu chi / QR hai san / QR vao POS / nhat ky / khop mon CukCuk
   ===================================================================== */
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-form{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 12px;align-items:center;margin-top:4px}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-form > label{display:block !important;margin:0 !important;font-size:12.5px !important;font-weight:600 !important;color:#3a3a3c !important}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-form > label b{font-weight:600}
:is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-form > label.top{align-self:start;padding-top:9px}
body.pc2 #modalHost .pkm.pkm-cash{width:min(480px,96vw)}
body.pc2 #modalHost .pkm #cashEditAmount{text-align:right;font-variant-numeric:tabular-nums;font-weight:600 !important}
/* QR hai san */
body.pc2 #modalHost .pkm.qrModalProduction{width:min(540px,96vw)}
body.pc2 #modalHost .pkm .qrBigButton{display:flex !important;width:100% !important;height:44px !important;min-height:44px !important;margin:0 0 10px !important;border:1px solid #185FA5 !important;border-radius:10px !important;background:#185FA5 !important;color:#fff !important;font-family:inherit !important;font-size:15px !important;font-weight:600 !important;box-shadow:none !important;align-items:center;justify-content:center}
body.pc2 #modalHost .pkm:has(#seafoodQrPreview .qrImportPreview) .qrBigButton{background:#fff !important;color:#1d1d1f !important;border-color:#D1D1D1 !important}
body.pc2 #modalHost .pkm .qrStatus{padding:8px 10px !important;border:1px solid #EDEDED !important;border-radius:8px !important;background:#F7F7F9 !important;font-size:12.5px;margin-bottom:8px}
body.pc2 #modalHost .pkm .qrVideo{border-radius:10px !important}
body.pc2 #modalHost .pkm .qrManualBlock .filters > button.primary{background:#fff !important;border-color:#D1D1D1 !important;color:#1d1d1f !important}
body.pc2 #modalHost .pkm .qrManualBlock .filters,body.pc2 #modalHost .pkm .qrImportPreview .filters{display:flex !important;gap:8px !important;flex-wrap:wrap;margin:8px 0 0 !important}
body.pc2 #modalHost .pkm .qrImportPreview{margin-top:12px !important;padding:12px !important;border:1px solid #E0E0E0 !important;border-radius:12px !important;background:#fff !important;box-shadow:none !important}
body.pc2 #modalHost .pkm .qrImportPreview > .toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 8px !important;padding:0 !important;background:transparent !important;border:0 !important}
body.pc2 #modalHost .pkm .qrImportPreview .title{font-size:14.5px !important}
body.pc2 #modalHost .pkm .qrImportPreview .pkm-list{margin-top:8px;max-height:40vh}
body.pc2 #modalHost .pkm .qrImportPreview .pkm-list > label{display:flex !important;align-items:center;gap:10px}
body.pc2 #modalHost .pkm .qrImportPreview .pkm-list > label b{font-weight:600}
/* QR vao POS */
body.pc2 #modalHost .pkm.lanQrModal{width:min(380px,96vw)}
body.pc2 #modalHost .pkm .lanQrBox{display:flex;justify-content:center;align-items:center;margin:12px 0 10px;padding:12px;border:1px solid #EDEDED;border-radius:12px;background:#FAFAFA}
body.pc2 #modalHost .pkm .lanQrBox svg{max-width:100%;height:auto}
body.pc2 #modalHost .pkm #lanQrUrl{font-size:12.5px !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#3a3a3c}
/* nhat ky */
body.pc2 #modalHost .pkm.posLogDetailModal{width:min(680px,96vw)}
body.pc2 #modalHost .pkm .posLogDetailPre{max-height:62vh;overflow:auto}
/* khop mon CukCuk (.modalCard) */
body.pc2 #modalHost .pkm.pkm-cuk{width:min(680px,96vw) !important;max-width:none !important}
body.pc2 #modalHost .pkm .pkm-cukrow{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1.2fr);gap:8px;align-items:center;padding:6px 0;border-top:1px solid #EDEDED}
body.pc2 #modalHost .pkm datalist + .pkm-cukrow{border-top:0}
body.pc2 #modalHost .pkm .pkm-cukrow > i{font-style:normal;color:#aeaeb2;text-align:center}
body.pc2 #modalHost .pkm .pkm-cukrow small{color:#86868b;font-size:11px;margin-left:4px}

/* =====================================================================
   12. Hop xac nhan / nhap (app_api.js askPosConfirm / askPosInput) — cung dang posDlg (pos_dialogs.js)
   ===================================================================== */
body.pc2 #modalHost .pkm.pkm-dlg{width:min(440px,92vw);border-radius:18px !important;padding:18px 18px 0 !important;text-align:center}
body.pc2 #modalHost .pkm.pkm-dlg .title{font-size:17px !important;text-align:center;margin:0 0 6px !important}
body.pc2 #modalHost .pkm.pkm-dlg > .muted,body.pc2 #modalHost .pkm.pkm-dlg > label{display:block;margin:0 0 4px !important;font-size:14.5px !important;font-weight:400 !important;line-height:1.45 !important;color:#3a3a3c !important;text-align:center;max-height:50vh;overflow:auto}
body.pc2 #modalHost .pkm.pkm-dlg :is(input:not([type=checkbox]):not([type=radio]),textarea){height:42px !important;min-height:42px !important;border:0 !important;background:#F2F2F7 !important;border-radius:12px !important;padding:0 12px !important;font-size:15px !important;text-align:left}
body.pc2 #modalHost .pkm.pkm-dlg textarea{height:auto !important;min-height:80px !important;padding:10px 12px !important}
body.pc2 #modalHost .pkm.pkm-dlg :is(input,textarea):focus{box-shadow:0 0 0 2px #85B7EB !important}
body.pc2 #modalHost .pkm.pkm-dlg > .modalActions{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;margin:14px -18px 0 !important;padding:0 18px 14px !important;border-top:0 !important}
body.pc2 #modalHost .pkm.pkm-dlg > .modalActions > button{width:100% !important;min-width:0 !important;height:44px !important;min-height:44px !important;border-radius:999px !important;font-size:15px !important;margin:0 !important}
body.pc2 #modalHost .pkm.pkm-dlg > .modalActions > button:not(.primary):not(.danger){border:.5px solid rgba(60,60,67,.28) !important}
body.pc2 #modalHost .pkm.pkm-dlg > .modalActions > button.danger{background:#FCEBEB !important;border-color:#FCEBEB !important;color:#A32D2D !important;margin-right:0 !important}
body.pc2 #modalHost .pkm.pkm-dlg > .modalActions > button.danger:hover:not(:disabled){background:#F9DCDC !important}

/* man hep */
@media (max-width:640px){
  :is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-cols,body.pc2 #modalHost .pkm .pkm-cols{grid-template-columns:1fr}
  :is(body.pc2 #modalHost,.pkm-ov) .pkm .pkm-form{grid-template-columns:1fr}
}