/* 2/10 (a Thinh chot): BO KHUNG GIAO DIEN CHUNG KIEU macOS cho moi man POS (Thu chi, Kho, Kiem nuoc, Lich su,
   Thi dua, Quan tri, Tong quan, Mon & gia, HDDT). Nen xam trang, the trang bo tron, thanh tren 1 hang,
   nut chuyen tab kieu Mac, loc dang vien tron, nhan trang thai mau nhat, nut ... cho thao tac phu.
   Chi dung class tien to mk- -> khong dung cham CSS cu. */
:root{
  --mk-bg:#F5F6F8; --mk-bar:#F6F6F6; --mk-card:#fff; --mk-line:#E0E0E0; --mk-hair:#EDEDED; --mk-border:#D1D1D1;
  --mk-ink:#1d1d1f; --mk-mut:#86868b; --mk-mut2:#aeaeb2;
  --mk-blue:#0A84FF; --mk-green:#1D9E75; --mk-green-d:#0F6E56; --mk-red:#b42318; --mk-amber:#B25000;
  --mk-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
}
.mk-page{background:var(--mk-bg);color:var(--mk-ink);font-family:var(--mk-font);font-size:13.5px}
body.mk-page{margin:0;padding:14px}
.mk-wrap{max-width:none;margin:0 auto;padding-left:clamp(0px,1.6vw,24px);padding-right:clamp(0px,1.6vw,24px);box-sizing:border-box} /* 3/10 (thang cot): bo gioi han 1180px -> dung het ngang, chua le 2 ben */
/* Thanh tren 1 hang */
.mk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--mk-bar);border:1px solid #DADADA;border-radius:12px;padding:8px 12px;margin-bottom:12px}
.mk-title{font-size:15px;font-weight:700;margin-right:4px;white-space:nowrap}
.mk-sub{font-size:12px;color:var(--mk-mut);white-space:nowrap}
.mk-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Nut chuyen tab kieu Mac */
.mk-seg{display:inline-flex;background:#DCDCDE;border-radius:8px;padding:2px;gap:0;flex-wrap:wrap}
.mk-seg>*{border:0;background:transparent;font:inherit;font-size:12.5px;padding:4px 12px;border-radius:6px;color:var(--mk-ink);cursor:pointer;white-space:nowrap}
.mk-seg>.on,.mk-seg>[aria-selected="true"]{background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.12);font-weight:600}
/* Chon ngay ‹ Hom nay › */
.mk-date{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--mk-border);border-radius:8px;overflow:hidden}
.mk-date>*{border:0;background:#fff;font:inherit;font-size:12.5px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.mk-date>*+*{border-left:1px solid #E5E5EA}
/* Nut */
.mk-btn{border:1px solid var(--mk-border);background:#fff;color:var(--mk-ink);border-radius:8px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.mk-btn:hover{background:#F2F2F7}
.mk-btn.pri{background:var(--mk-blue);border-color:var(--mk-blue);color:#fff}
.mk-btn.go{background:var(--mk-green);border-color:var(--mk-green);color:#fff}
.mk-btn.go:hover{background:var(--mk-green-d)}
.mk-btn.dg{color:var(--mk-red);border-color:#F09595;background:#fff}
.mk-btn.sm{padding:3px 9px;font-size:11.5px}
.mk-ib{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mk-border);border-radius:8px;background:#fff;cursor:pointer;font-size:15px}
.mk-more{border:0;background:transparent;color:#8e8e93;font-size:18px;line-height:1;cursor:pointer;border-radius:6px;padding:2px 5px}
.mk-more:hover{background:#E5E5EA;color:var(--mk-ink)}
/* O tim */
.mk-search{background:#E3E3E5;border:1px solid transparent;border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;min-width:160px}
.mk-search:focus{background:#fff;border-color:var(--mk-blue);outline:0;box-shadow:0 0 0 3px rgba(10,132,255,.2)}
/* Loc vien tron */
.mk-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.mk-pill{background:#fff;border:1px solid var(--mk-border);color:var(--mk-ink);border-radius:999px;padding:3px 11px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.mk-pill.on{background:var(--mk-blue);border-color:var(--mk-blue);color:#fff}
.mk-pill b{font-weight:700}
/* So lieu */
.mk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.mk-kpi{background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:10px 12px}
.mk-kpi small{display:block;font-size:11.5px;color:var(--mk-mut);font-weight:600}
.mk-kpi b{display:block;font-size:20px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.mk-kpi i{font-style:normal;font-size:11.5px;color:var(--mk-mut)}
/* The + nhom danh sach */
.mk-card{background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.mk-card>h3,.mk-h{font-size:13px;font-weight:700;margin:0 0 8px;color:var(--mk-ink)}
.mk-label{font-size:12px;color:var(--mk-mut);font-weight:700;margin:12px 6px 5px}
.mk-group{background:#fff;border:1px solid var(--mk-line);border-radius:11px;overflow:hidden;margin-bottom:4px}
.mk-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--mk-hair)}
.mk-row:first-child{border-top:0}
.mk-row.clk{cursor:pointer}.mk-row.clk:hover{background:#F5F5F7}
.mk-row .mk-main{flex:1;min-width:0}
.mk-row .mk-main>b,.mk-name{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-row .mk-main>small,.mk-meta{display:block;font-size:11.5px;color:var(--mk-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;text-align:right}
.mk-time{color:var(--mk-mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-dim{opacity:.55}
/* Nhan trang thai */
.mk-tag{display:inline-block;font-size:11px;font-weight:600;border-radius:6px;padding:2px 8px;white-space:nowrap;background:#F2F2F7;color:#3a3a3c}
.mk-tag.ok{background:#EAF3DE;color:#27500A}.mk-tag.warn{background:#FFF4E5;color:#B25000}
.mk-tag.err{background:#FCEBEB;color:#791F1F}.mk-tag.info{background:#E6F1FB;color:#0C447C}.mk-tag.pur{background:#EEEDFE;color:#3C3489}
/* Cong tac iOS */
.mk-switch{width:36px;height:21px;border-radius:999px;background:#E5E5EA;position:relative;border:0;padding:0;cursor:pointer;flex:0 0 auto;transition:background .2s}
.mk-switch:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .2s}
.mk-switch.on{background:#34C759}.mk-switch.on:after{left:17px}
/* Bang */
.mk-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.mk-table th{font-size:11.5px;color:var(--mk-mut);font-weight:600;text-align:left;padding:7px 10px;border-bottom:1px solid var(--mk-line);background:#FAFAFA;position:sticky;top:0}
.mk-table td{padding:7px 10px;border-top:1px solid var(--mk-hair)}
.mk-table td.n,.mk-table th.n{text-align:right;font-variant-numeric:tabular-nums}
/* Thanh tien do */
.mk-progress{height:7px;border-radius:4px;background:#E5E5EA;overflow:hidden}
.mk-progress>i{display:block;height:100%;background:var(--mk-green);border-radius:4px}
.mk-empty{background:#fff;border:1px dashed var(--mk-border);border-radius:12px;padding:28px;text-align:center;color:var(--mk-mut)}
/* O nhap trong form */
.mk-page input[type=text].mk-in,.mk-in{border:1px solid var(--mk-border);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;background:#fff}
.mk-in:focus{border-color:var(--mk-blue);outline:0;box-shadow:0 0 0 3px rgba(10,132,255,.2)}
.mk-up{color:#1f7a3a}.mk-down{color:var(--mk-red)}