:root{
  --navy:#123a5e; --navy-2:#0d2c48; --teal:#12a5a0; --teal-d:#0d8a86;
  --xanh:#159a5b; --do:#d1495b; --cam:#e8912d;
  --nen:#f2f5f8; --the:#fff; --vien:#dde5ed; --chu:#16232e; --chu-mo:#63758a;
  --bong:0 1px 3px rgba(18,58,94,.09), 0 8px 24px rgba(18,58,94,.06);
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--nen); color:var(--chu); font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:var(--teal-d)}
h1,h2,h3{margin:0 0 .5rem; font-weight:700; letter-spacing:-.01em}
h1{font-size:1.3rem} h2{font-size:1.08rem} h3{font-size:.98rem}
.mo{color:var(--chu-mo)} .nho{font-size:.85rem} .rat-nho{font-size:.78rem}
.dam{font-weight:700} .phai{text-align:right} .giua{text-align:center}
.xanh{color:var(--xanh)} .do{color:var(--do)} .cam{color:var(--cam)}

/* khung */
.dau{background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; padding:14px 16px;
     display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20}
.dau h1{color:#fff; margin:0; font-size:1.05rem}
.dau .phu{color:#a8c4dd; font-size:.8rem}
.dau .cuoi{margin-left:auto; display:flex; gap:8px; align-items:center}
.than{max-width:1240px; margin:0 auto; padding:14px}
.the{background:var(--the); border:1px solid var(--vien); border-radius:var(--r); padding:16px;
     box-shadow:var(--bong); margin-bottom:14px}
.luoi{display:grid; gap:12px}
.luoi-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.luoi-3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.hang{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* nút */
button,.nut{font:inherit; font-weight:600; border:1px solid transparent; border-radius:10px;
  padding:9px 15px; cursor:pointer; background:var(--navy); color:#fff; transition:.15s}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.45; cursor:not-allowed; filter:none}
.nut-phu{background:#fff; color:var(--navy); border-color:var(--vien)}
.nut-teal{background:var(--teal)}
.nut-xanh{background:var(--xanh)}
.nut-do{background:var(--do)}
.nut-nho{padding:5px 10px; font-size:.83rem; border-radius:8px}
.nut-to{padding:16px; font-size:1.05rem; border-radius:16px; width:100%}

/* nhập liệu */
label{display:block; font-size:.82rem; font-weight:600; color:var(--chu-mo); margin:0 0 4px}
input,select,textarea{font:inherit; width:100%; padding:9px 11px; border:1px solid var(--vien);
  border-radius:10px; background:#fff; color:var(--chu)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:-1px; border-color:var(--teal)}
.o{margin-bottom:12px}

/* bảng */
.cuon{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.88rem}
th,td{padding:8px 10px; border-bottom:1px solid var(--vien); text-align:left; white-space:nowrap}
th{background:#eef3f8; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
   color:var(--chu-mo); position:sticky; top:0}
tbody tr:hover{background:#f7fafd}
td.so,th.so{text-align:right; font-variant-numeric:tabular-nums}

/* nhãn trạng thái */
.nhan{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:700}
.n-xanh{background:#e3f6ec; color:#0f7a45}
.n-cam{background:#fdf0dd; color:#a5651a}
.n-do{background:#fbe6e9; color:#a72c3d}
.n-xam{background:#eef2f6; color:#5b6b7c}
.n-teal{background:#dff5f4; color:#0b706d}

/* thẻ số */
.so-lieu{background:var(--the); border:1px solid var(--vien); border-radius:var(--r); padding:14px}
.so-lieu .nhan-so{font-size:.76rem; color:var(--chu-mo); text-transform:uppercase; letter-spacing:.04em}
.so-lieu .gia-tri{font-size:1.5rem; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums}

/* tab */
.tab{display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--vien); margin-bottom:14px}
.tab button{background:none; color:var(--chu-mo); border:none; border-bottom:3px solid transparent;
  border-radius:0; padding:10px 14px; white-space:nowrap}
.tab button.chon{color:var(--navy); border-bottom-color:var(--teal)}

/* nút chấm công lớn */
.nut-cham{width:100%; padding:26px 18px; border-radius:22px; font-size:1.25rem; font-weight:800;
  background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; border:none;
  box-shadow:0 10px 28px rgba(18,165,160,.34)}
.nut-cham.ra{background:linear-gradient(135deg,#e8912d,#cf7a17); box-shadow:0 10px 28px rgba(232,145,45,.34)}
.nut-cham:disabled{background:#c9d4de; color:#7d8b99; box-shadow:none}
.dong-ho{font-size:2.6rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* thông báo */
.bao{padding:11px 14px; border-radius:12px; margin-bottom:12px; font-size:.9rem; font-weight:600}
.bao-xanh{background:#e3f6ec; color:#0f7a45; border:1px solid #b8e6cd}
.bao-do{background:#fbe6e9; color:#a72c3d; border:1px solid #f2c4cc}
.bao-cam{background:#fdf0dd; color:#8f5714; border:1px solid #f3ddb8}
.bao-teal{background:#dff5f4; color:#0b706d; border:1px solid #b5e6e4}

/* hộp thoại */
.man{position:fixed; inset:0; background:rgba(11,28,45,.55); display:flex; align-items:center;
  justify-content:center; padding:14px; z-index:60}
.hop{background:#fff; border-radius:var(--r); padding:20px; width:100%; max-width:640px;
  max-height:90vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.28)}
.an{display:none !important}

/* dòng lương */
.dong-luong{display:flex; justify-content:space-between; gap:10px; padding:9px 0;
  border-bottom:1px dashed var(--vien)}
.dong-luong .tien{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.dong-luong.tong{border-bottom:none; border-top:2px solid var(--navy); margin-top:6px;
  padding-top:12px; font-size:1.15rem}
.dong-luong.tong .tien{color:var(--navy); font-size:1.35rem; font-weight:800}

@media (max-width:640px){
  .than{padding:10px}
  .the{padding:13px; border-radius:12px}
  h1{font-size:1.12rem}
}