@charset "UTF-8";
/* ============================================================================
   2/10 (a Thinh): mac kit — THU CHI + TONG QUAN (man PC v2). Nap SAU pc_v2.css / pc_screens.css / mac_kit.css.
   Chi co hieu luc khi body.pc2 + #sec-cash.mkc / #sec-dashboard.mkd (pc_mk_screens.js gan).
   Phan tu cu chi bi AN (display:none), KHONG xoa -> thoat che do PC la ve dung man cu.
   ============================================================================ */
#mkCashTop,#mkBills,#mkDash{display:none}
body.pc2 #sec-cash.mkc #mkBills{display:block}
/* contents: thanh tren (sticky) bam theo ca man, khong bi gioi han trong khoi cha */
body.pc2 #sec-cash.mkc #mkCashTop,body.pc2 #sec-dashboard.mkd #mkDash{display:contents}

/* ---------- nen man + khung ---------- */
body.pc2 #appView > #sec-cash.mkc:not(#sec-floor):not(#sec-order):not(#globalMsg),
body.pc2 #appView > #sec-dashboard.mkd:not(#sec-floor):not(#sec-order):not(#globalMsg){
  background:var(--mk-bg,#F5F6F8) !important;border:1px solid var(--line,#DDE3EA);border-radius:14px;padding:10px 12px 24px !important;box-sizing:border-box;color:var(--mk-ink,#1d1d1f)}
body.pc2 #appView #sec-cash.mkc .mk-bar,body.pc2 #appView #sec-dashboard.mkd #mkDash > .mk-bar{position:sticky;top:0;z-index:6}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-seg > .mkb{font-weight:500;min-height:0;box-shadow:none}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-seg > .mkb.on{font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.12)}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-btn,
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-pill,
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-ib,
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-more{min-height:0;box-shadow:none}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-ib{padding:0;font-size:16px;font-weight:600;color:var(--mk-ink,#1d1d1f)}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-pill{font-weight:500}
body.pc2 #appView :is(#sec-cash.mkc,#sec-dashboard.mkd) .mk-btn.sm{font-weight:600}

/* =====================================================================
   A. THU CHI
   ===================================================================== */
/* an phan cu da duoc thay (giu trong DOM, giu id + ham) */
body.pc2 #appView #sec-cash.mkc #cashFundBar,
body.pc2 #appView #sec-cash.mkc #pcsCashTabs,
body.pc2 #appView #sec-cash.mkc #pcsCashShift,
body.pc2 #appView #sec-cash.mkc #cashPayTotals,
body.pc2 #appView #sec-cash.mkc #oldBillBar,
body.pc2 #appView #sec-cash.mkc [data-mk-hide],
body.pc2 #appView #sec-cash.mkc #cashListTitle,
body.pc2 #appView #sec-cash.mkc #cashDay,
body.pc2 #appView #sec-cash.mkc #cashDayReload,
body.pc2 #appView #sec-cash.mkc #cashDayInfo,
body.pc2 #appView #sec-cash.mkc #cashDayBar > label{display:none !important}

/* 3 tab: ap dung ca khi bung rong (pc2-max) */
body.pc2 #sec-cash.mkc.pcs-t-form [data-pcs-a="list"],
body.pc2 #sec-cash.mkc.pcs-t-form [data-pcs-a="bills"],
body.pc2 #sec-cash.mkc.pcs-t-list [data-pcs-a="form"],
body.pc2 #sec-cash.mkc.pcs-t-list [data-pcs-a="bills"],
body.pc2 #sec-cash.mkc.pcs-t-bills [data-pcs-card],
body.pc2 #sec-cash.mkc.pcs-t-form #mkCashDate,
body.pc2 #sec-cash.mkc.pcs-t-form #mkCashDateInfo{display:none !important}
body.pc2 #appView #sec-cash.mkc > .grid{display:block !important}

/* thanh tren: chon ngay ‹ Hom nay › */
body.pc2 #appView #sec-cash.mkc #mkCashDate .mkb{padding:4px 10px;font-size:15px;line-height:1;font-weight:600;color:var(--mk-ink,#1d1d1f);border-radius:0;min-height:0}
body.pc2 #appView #sec-cash.mkc #mkCashDate .mkb:disabled{color:#c7c7cc;cursor:default;opacity:1}
body.pc2 #appView #sec-cash.mkc #mkCashDate .mkc-dmid{position:relative;display:inline-flex;align-items:center;font-weight:600;cursor:pointer}
body.pc2 #appView #sec-cash.mkc #mkCashDateSel{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0 !important;border:0 !important;min-width:0 !important;font-size:13px !important;-webkit-appearance:none;appearance:none}
body.pc2 #appView #sec-cash.mkc #mkCashDateInfo{max-width:240px;overflow:hidden;text-overflow:ellipsis}

/* the tom tat tien mat */
body.pc2 #appView #sec-cash.mkc #mkCashSum{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:14px 18px}
#mkCashSum .mkc-sum-main{flex:1 1 260px;min-width:0}
#mkCashSum .mkc-sum-main small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--mk-mut,#86868b)}
#mkCashSum .mkc-sum-main b{display:block;font-size:30px;font-weight:800;line-height:1.15;color:var(--mk-green-d,#0F6E56);font-variant-numeric:tabular-nums;margin:2px 0}
#mkCashSum .mkc-sum-main i{font-style:normal;font-size:12px;color:var(--mk-mut,#86868b)}
#mkCashSum .mkc-sum-parts{display:flex;flex-wrap:wrap;gap:10px 28px}
#mkCashSum .mkc-sum-parts small{display:block;font-size:11.5px;font-weight:600;color:var(--mk-mut,#86868b)}
#mkCashSum .mkc-sum-parts b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

/* the chua cac khu (form / phieu) = the trang; the bill = trong suot */
body.pc2 #appView #sec-cash.mkc > .grid > .card{background:#fff !important;border:1px solid var(--mk-line,#E0E0E0) !important;border-radius:12px !important;box-shadow:none !important;padding:12px 14px !important;margin:0 0 12px !important}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-a="bills"]{display:flex;flex-direction:column;background:transparent !important;border:0 !important;padding:0 !important}
body.pc2 #appView #sec-cash.mkc #mkBills{order:0}

/* loc + tim */
#mkBills .mkc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 4px}
#mkBills .mkc-filter .mk-pills{flex:1 1 auto;margin:0}
body.pc2 #appView #sec-cash.mkc #mkCashQ{flex:0 1 240px;min-width:160px;margin-left:auto;background:#E3E3E5 !important;border:1px solid transparent !important;border-radius:8px !important;padding:6px 10px !important;font-size:13px !important;min-height:0}
body.pc2 #appView #sec-cash.mkc #mkCashQ:focus{background:#fff !important;border-color:var(--mk-blue,#0A84FF) !important;box-shadow:0 0 0 3px rgba(10,132,255,.2) !important}
#mkBills .mk-pill.mkc-cukp:not(.on){color:var(--mk-amber,#B25000);border-color:#F3C78B}

/* danh sach bill theo gio */
#mkCashList .mkc-gh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#mkCashList .mkc-gh span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
#mkCashList .mk-row{min-height:44px}
#mkCashList .mk-row:focus-visible{outline:2px solid var(--mk-blue,#0A84FF);outline-offset:-2px}
#mkCashList .mk-time{flex:0 0 42px;font-size:12.5px}
#mkCashList .mk-main > b{font-weight:700}
#mkCashList .mkc-tags{display:inline-flex;gap:4px;flex:0 0 auto}
#mkCashList .mk-num{min-width:88px;font-weight:700}
#mkCashList .mkc-ok{color:#1f7a3a;font-weight:600}
#mkCashList .mkc-warn{color:var(--mk-amber,#B25000);font-weight:600}
#mkCashList .mk-btn.sm{flex:0 0 auto}
/* 3/10 (thang cot): dong bill = grid cot co dinh: gio | ban+meta | slot CukCuk | slot the TT (toi da 3) | tien | ⋯ -> nut vang mat van giu cho */
#mkCashList .mk-row{display:grid;grid-template-columns:42px minmax(0,1fr) 112px 108px minmax(96px,max-content) 28px;column-gap:10px;align-items:center} /* 18/10 chong che chu: tien >=10 trieu tu noi cot, khong de len cot the TT */
#mkCashList .mk-row > .mk-time{grid-column:1}
#mkCashList .mk-row > .mk-main{grid-column:2;min-width:0}
#mkCashList .mk-row > .mk-btn[data-act="cuk"]{grid-column:3;justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mkCashList .mk-row > .mkc-tags{grid-column:4;justify-self:start}
#mkCashList .mk-row > .mk-num{grid-column:5;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
#mkCashList .mk-row > .mk-more{grid-column:6;justify-self:center}
#mkCashList .mk-empty{margin-top:8px}

/* menu ... cua dong bill (gan vao body, duoi hop thoai #modalHost z70) */
.mkc-menu{position:fixed;z-index:65;min-width:160px;display:flex;flex-direction:column;padding:4px;background:#fff;border:1px solid #D1D1D1;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16);font-family:var(--mk-font)}
.mkc-menu button{all:unset;box-sizing:border-box;display:block;padding:7px 12px;border-radius:6px;font-size:13px;color:#1d1d1f;cursor:pointer;white-space:nowrap}
.mkc-menu button:hover,.mkc-menu button:focus{background:#0A84FF;color:#fff}

/* xuat du lieu (giu nguyen o ngay + nut goc), gon xuong cuoi */
body.pc2 #appView #sec-cash.mkc [data-mk-exp]{order:5;display:flex !important;flex-wrap:wrap;align-items:center;gap:6px !important;background:#fff;border:1px solid var(--mk-line,#E0E0E0);padding:8px 12px !important;margin:0 !important}
body.pc2 #appView #sec-cash.mkc .formRow[data-mk-exp]{margin-top:14px !important;border-radius:12px 12px 0 0;border-bottom:0}
body.pc2 #appView #sec-cash.mkc .formRow[data-mk-exp]::before{content:"Xu\1EA5t d\1EEF  li\1EC7u";font-size:12px;font-weight:700;color:var(--mk-mut,#86868b);margin-right:4px}
body.pc2 #appView #sec-cash.mkc .filters[data-mk-exp]{border-radius:0 0 12px 12px;border-top:1px solid var(--mk-hair,#EDEDED)}
body.pc2 #appView #sec-cash.mkc [data-mk-exp] input{width:auto !important;flex:0 0 auto;padding:4px 8px !important;font-size:12.5px !important;border-radius:8px !important;min-height:0 !important}
body.pc2 #appView #sec-cash.mkc [data-mk-exp] button{padding:4px 11px !important;font-size:12px !important;font-weight:600 !important;border-radius:999px !important;border:1px solid var(--mk-border,#D1D1D1) !important;background:#fff !important;color:var(--mk-ink,#1d1d1f) !important;min-height:0 !important;box-shadow:none !important}

/* --- tab Phieu thu chi --- */
body.pc2 #appView #sec-cash.mkc #cashDayBar{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px !important;margin:0 0 10px !important}
body.pc2 #appView #sec-cash.mkc #cashDayBar > span{font-size:12px !important;color:var(--mk-mut,#86868b) !important}
body.pc2 #appView #sec-cash.mkc #cashDayBar button{padding:3px 11px !important;border-radius:999px !important;border:1px solid var(--mk-border,#D1D1D1) !important;background:#fff !important;color:var(--mk-ink,#1d1d1f) !important;font-size:12.5px !important;font-weight:500 !important;min-height:0 !important;box-shadow:none !important}
body.pc2 #appView #sec-cash.mkc #cashDayBar #cashRangeGo{background:var(--mk-blue,#0A84FF) !important;border-color:var(--mk-blue,#0A84FF) !important;color:#fff !important;font-weight:600 !important}
body.pc2 #appView #sec-cash.mkc #cashDayBar input[type=date]{width:auto !important;flex:0 0 auto;padding:3px 8px !important;font-size:12.5px !important;border:1px solid var(--mk-border,#D1D1D1) !important;border-radius:8px !important;min-height:0 !important;background:#fff}
body.pc2 #appView #sec-cash.mkc #cashSearch{flex:1 1 200px !important;min-width:160px !important;background:#E3E3E5 !important;border:1px solid transparent !important;border-radius:8px !important;padding:6px 10px !important;font-size:13px !important}
body.pc2 #appView #sec-cash.mkc #cashSearch:focus{background:#fff !important;border-color:var(--mk-blue,#0A84FF) !important;box-shadow:0 0 0 3px rgba(10,132,255,.2) !important}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] .billLines{max-height:none !important;border:1px solid var(--mk-line,#E0E0E0) !important;border-radius:11px !important;background:#fff;overflow:auto}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] .billLines table{width:100%;border-collapse:collapse;font-size:13px}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] .billLines th{font-size:11.5px;font-weight:600;color:var(--mk-mut,#86868b);text-align:left;padding:7px 10px !important;background:#FAFAFA;border-bottom:1px solid var(--mk-line,#E0E0E0);position:sticky;top:0;z-index:1}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] .billLines td{padding:7px 10px !important;border-top:1px solid var(--mk-hair,#EDEDED);vertical-align:top}
body.pc2 #appView #sec-cash.mkc #cashListBody button{padding:3px 9px !important;margin:0 4px 3px 0;font-size:11.5px !important;font-weight:600 !important;border-radius:7px !important;border:1px solid var(--mk-border,#D1D1D1) !important;background:#fff !important;color:var(--mk-ink,#1d1d1f) !important;min-height:0 !important;box-shadow:none !important}
body.pc2 #appView #sec-cash.mkc #cashListBody button.danger{color:var(--mk-red,#b42318) !important;border-color:#F09595 !important}

/* --- tab Lap phieu --- */
body.pc2 #appView #sec-cash.mkc.pcs-t-form > .grid > .card[data-pcs-card]{max-width:640px}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] > .title{font-size:14px !important;font-weight:700 !important;margin:0 0 10px !important;color:var(--mk-ink,#1d1d1f) !important}
body.pc2 #appView #sec-cash.mkc .tcToggle{display:flex;gap:0 !important;padding:2px;background:#DCDCDE;border-radius:9px}
body.pc2 #appView #sec-cash.mkc #tcBtnIn,body.pc2 #appView #sec-cash.mkc #tcBtnOut{flex:1;min-height:34px !important;padding:5px 10px !important;border:0 !important;border-radius:7px !important;background:transparent !important;color:var(--mk-ink,#1d1d1f) !important;font-size:13px !important;font-weight:500 !important;box-shadow:none !important}
body.pc2 #appView #sec-cash.mkc #tcBtnIn.tcOn{background:#fff !important;color:var(--mk-green-d,#0F6E56) !important;font-weight:700 !important;box-shadow:0 1px 1px rgba(0,0,0,.12) !important}
body.pc2 #appView #sec-cash.mkc #tcBtnOut.tcOn{background:#fff !important;color:var(--mk-red,#b42318) !important;font-weight:700 !important;box-shadow:0 1px 1px rgba(0,0,0,.12) !important}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] > :is(input,textarea)[data-pcs-a="form"],
body.pc2 #appView #sec-cash.mkc #cashOutMethodWrap select{width:100%;box-sizing:border-box;padding:8px 10px !important;font-size:14px !important;border:1px solid var(--mk-border,#D1D1D1) !important;border-radius:8px !important;background:#fff !important}
body.pc2 #appView #sec-cash.mkc > .grid > .card[data-pcs-card] > :is(input,textarea)[data-pcs-a="form"]:focus,
body.pc2 #appView #sec-cash.mkc #cashOutMethodWrap select:focus{border-color:var(--mk-blue,#0A84FF) !important;box-shadow:0 0 0 3px rgba(10,132,255,.2) !important;outline:0}
body.pc2 #appView #sec-cash.mkc .cashQuick{display:flex;flex-wrap:wrap;gap:6px !important;margin-top:8px}
body.pc2 #appView #sec-cash.mkc .cashQuick button{flex:0 0 auto !important;min-width:0 !important;min-height:0 !important;padding:3px 12px !important;border-radius:999px !important;border:1px solid var(--mk-border,#D1D1D1) !important;background:#fff !important;color:var(--mk-ink,#1d1d1f) !important;font-size:12.5px !important;font-weight:500 !important}
body.pc2 #appView #sec-cash.mkc button.primary[data-pcs-a="form"]{background:var(--mk-blue,#0A84FF) !important;color:#fff !important;border:0 !important;border-radius:8px !important;padding:8px 20px !important;min-height:38px;font-size:14px !important;font-weight:600 !important}

/* =====================================================================
   B. TONG QUAN
   ===================================================================== */
body.pc2 #appView #sec-dashboard.mkd > .card.glassCard{display:none !important}
body.pc2 #appView #sec-dashboard.mkd .dashboardSplit .card{background:#fff !important;border:1px solid var(--mk-line,#E0E0E0) !important;border-radius:12px !important;box-shadow:none !important}
#mkDash .mk-kpi[data-kd]{cursor:pointer}
#mkDash .mk-kpi[data-kd]:hover{border-color:#B9B9BE}
#mkDash .mk-kpi[data-kd]:focus-visible{outline:2px solid var(--mk-blue,#0A84FF);outline-offset:1px}
#mkDash .mk-kpi i{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mkDash .mkd-k-red b{color:var(--mk-red,#b42318)}
#mkDash .mkd-k-rev b{color:var(--mk-green-d,#0F6E56)}
#mkDash .mkd-row{display:flex;flex-wrap:wrap;gap:0 12px;align-items:stretch}
#mkDash .mkd-chart{flex:1.7 1 440px;min-width:0}
#mkDash .mkd-side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column}
#mkDash .mkd-row3 > .mk-card{flex:1 1 360px;min-width:0;overflow:auto}
/* bieu do cot */
#mkDash .mkd-bars{display:flex;align-items:stretch;gap:4px;height:190px;padding-top:2px}
#mkDash .mkd-bc{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
#mkDash .mkd-bv{height:15px;font-size:11px;font-weight:700;color:var(--mk-green-d,#0F6E56);white-space:nowrap}
#mkDash .mkd-bw{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
#mkDash .mkd-bw i{display:block;width:100%;max-width:34px;background:#BFE3D4;border-radius:5px 5px 2px 2px;transition:height .25s ease}
#mkDash .mkd-bc.pk .mkd-bw i{background:var(--mk-green,#1D9E75)}
#mkDash .mkd-bc:hover .mkd-bw i{filter:brightness(.92)}
#mkDash .mkd-bc em{height:16px;margin-top:3px;font-style:normal;font-size:10.5px;color:var(--mk-mut,#86868b);white-space:nowrap;overflow:hidden;max-width:100%}
#mkDash .mkd-peak{margin-top:6px;white-space:normal}
/* thanh toan */
#mkDash .mkd-pay{margin-bottom:10px}
#mkDash .mkd-pay:last-child{margin-bottom:0}
#mkDash .mkd-payh{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:4px}
#mkDash .mkd-payh span{flex:1;min-width:0;color:#3a3a3c}
#mkDash .mkd-payh b{font-variant-numeric:tabular-nums}
#mkDash .mkd-payh em{flex:0 0 40px;text-align:right;font-style:normal;font-size:12px;color:var(--mk-mut,#86868b)}
/* can chu y */
#mkDash .mkd-go{color:#c7c7cc;font-size:18px;line-height:1}
#mkDash .mk-row.clk:focus-visible{outline:2px solid var(--mk-blue,#0A84FF);outline-offset:-2px}
#mkDash .mkd-ok{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mk-mut,#86868b);padding:4px 0}
#mkDash .mkd-na{font-size:22px;color:var(--mk-mut,#86868b);padding:4px 2px}
#mkDash .mkd-na small{display:block;font-size:12px;margin-top:2px}
#mkDash .mk-table th{position:static}
#mkDash .mk-table td.mkd-rk{width:24px;color:var(--mk-mut,#86868b)}
#mkDash .mkd-note{display:block;white-space:normal;margin:0 2px 12px}
#mkDash .mkd-note:empty{display:none}

@media (prefers-reduced-motion:reduce){#mkDash .mkd-bw i{transition:none}}