/* ui-hrm — 24/09/2026 · Làm lại giao diện HRM theo bản Stitch đã duyệt (`docs/ra-ux/stitch-hrm`).
   Chủ dự án bác bản dsh 23/09: nhiều viền, chữ giải thích dài, số in phông máy chữ. Luật của
   tệp này: KHÔNG viền ở thẻ/hàng — tách vùng bằng mảng màu và chuyển màu rất nhẹ; bo 16–24px;
   ít chữ, nhiều biểu tượng; số to nhãn nhỏ; MỘT nút tím mỗi màn. Mọi màu qua token của app.css
   (có biến thể tối). Mọi lớp mới tiền tố `hx-`; lớp cũ (`tu-` `bl-` `cl-` `hru-` `ns-` `vt-`)
   phép thử còn ghim nên giữ tên, chỉ vẽ lại ở đây — tệp này nạp SAU app.css nên thắng khi
   cùng độ đặc hiệu; khung `.hx` bọc mỗi màn cộng thêm một bậc cho chắc. */

/* ---------- 1. biểu tượng — mặt nạ SVG, màu theo `currentColor` (không mã màu trong JS) ---------- */
.hx-i{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.hx-i.nho{width:15px;height:15px}
.hx-i.to{width:22px;height:22px}
.i-lich{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E")}
.i-dong-ho{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.i-vi{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='3'/%3E%3Ccircle cx='12' cy='12.5' r='2.5'/%3E%3Cpath d='M6 12.5h.01M18 12.5h.01'/%3E%3C/svg%3E")}
.i-xong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
.i-canh{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.2 18a2 2 0 0 0 1.7 3h16.2a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E")}
.i-ngan-hang{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21v-9M19 21v-9M9.5 21v-9M14.5 21v-9M12 3 3 8.5h18z'/%3E%3C/svg%3E")}
.i-tien-mat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E")}
.i-tin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4.5M12 8h.01'/%3E%3C/svg%3E")}
.i-trai{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 18-6-6 6-6'/%3E%3C/svg%3E")}
.i-phai{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 18 6-6-6-6'/%3E%3C/svg%3E")}
.i-cong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.i-tim{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.3-4.3'/%3E%3C/svg%3E")}
.i-in{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9V3h11v6'/%3E%3Crect x='6.5' y='14' width='11' height='7' rx='1'/%3E%3Cpath d='M6.5 18H4.5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h15a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3C/svg%3E")}
.i-tai{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15v3.5a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2V15M7.5 10.5 12 15l4.5-4.5M12 15V3.5'/%3E%3C/svg%3E")}
.i-lam-lai{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1L20.5 8.5'/%3E%3Cpath d='M20.5 3.5v5h-5'/%3E%3C/svg%3E")}
.i-nguoi{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20.5v-1a4.5 4.5 0 0 1 4.5-4.5h4a4.5 4.5 0 0 1 4.5 4.5v1M16 4.3a3.5 3.5 0 0 1 0 7.4M21.5 20.5v-1a4.5 4.5 0 0 0-3.3-4.3'/%3E%3C/svg%3E")}
.i-cup{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 16.5V21M7 3.5h10V9a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5.5h3v1.5a3.5 3.5 0 0 1-3.2 3.5M7 5.5H4V7a3.5 3.5 0 0 0 3.2 3.5'/%3E%3C/svg%3E")}
.i-tru{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.i-phu-cap{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.8 9.2 4.6-9.2 4.6-9.2-4.6z'/%3E%3Cpath d='m2.8 16.6 9.2 4.6 9.2-4.6M2.8 12l9.2 4.6 9.2-4.6'/%3E%3C/svg%3E")}
.i-hoa-hong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 5.5 5.5 18.5'/%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3C/svg%3E")}
.i-khoa{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E")}
.i-dong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.i-lich-su{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5M12 7.5V12l3.5 2'/%3E%3C/svg%3E")}
.i-the-nv{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M5.8 16a3.2 3.2 0 0 1 6.4 0M14.5 10h3.5M14.5 13.5h3.5'/%3E%3C/svg%3E")}
.i-gui{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.5 2.5-6.8 19-3.9-8.3-8.3-3.9z'/%3E%3Cpath d='M21.5 2.5 10.8 13.2'/%3E%3C/svg%3E")}
.i-bieu-do{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5v17h17'/%3E%3Cpath d='M8 16v-4M12.5 16V8M17 16v-6'/%3E%3C/svg%3E")}
.i-cham{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E")}
.i-dong-bo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 0 1 14.6-5.9L20.5 8.5M20.5 12a8.5 8.5 0 0 1-14.6 5.9L3.5 15.5'/%3E%3Cpath d='M20.5 3.5v5h-5M3.5 20.5v-5h5'/%3E%3C/svg%3E")}
.i-cham-cong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11.5a2.5 2.5 0 0 0-2.5 2.5c0 2.5-.5 4.5-1.5 6M14.5 14c0 3-.4 5-1 6.5M7 17c.4-1 .5-2 .5-3a4.5 4.5 0 0 1 9 0v1M5 12.5A7 7 0 0 1 17.5 8M19 11.5c.3.8.5 1.6.5 2.5 0 1.3-.1 2.5-.3 3.5'/%3E%3C/svg%3E")}
.i-dang-ky{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17.5' rx='2.5'/%3E%3Cpath d='M8.5 8h7M8.5 12h7M8.5 16h4'/%3E%3C/svg%3E")}
.i-nghi{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16M6.5 20.5V11a5.5 5.5 0 0 1 11 0v9.5'/%3E%3Cpath d='M12 5.5V3'/%3E%3C/svg%3E")}
.i-quy-che{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h9l4 4v13H6z'/%3E%3Cpath d='M14.5 3.5v4.5h4.5M9.5 12.5h6M9.5 16.5h6'/%3E%3C/svg%3E")}
.i-the-lich{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M8 14.5h2M14 14.5h2M8 18h2'/%3E%3C/svg%3E")}

/* ---------- 2. khung màn ---------- */
/* Nền mềm pha từ `--chu` trên `--the` (không từ `--chim`): ở giao diện tối `--chim` đang bị một khối
   sau của app.css đè thành màu sáng, pha từ màu chữ thì tự đúng cả hai chế độ. */
.hx{--hx-mem:color-mix(in srgb, var(--chu) 6%, var(--the));
  --hx-mem2:color-mix(in srgb, var(--chu) 3.5%, var(--the));
  --hx-canh-nen:linear-gradient(135deg, var(--canh-nhat), color-mix(in srgb, var(--canh-nhat) 45%, var(--the)));
  --hx-loi-nen:linear-gradient(135deg, var(--loi-nhat), color-mix(in srgb, var(--loi-nhat) 45%, var(--the)));
  --hx-tot-nen:linear-gradient(135deg, var(--tot-nhat), color-mix(in srgb, var(--tot-nhat) 45%, var(--the)));
  --hx-nhan-nen:linear-gradient(135deg, var(--nhan-nhat), color-mix(in srgb, var(--nhan-nhat) 40%, var(--the)));
  display:flex;flex-direction:column;gap:20px;font-variant-numeric:tabular-nums}
.hx > *{margin-top:0;margin-bottom:0}
/* đầu màn: tiêu đề 28 đậm + nhãn nhỏ; bên phải là chọn tháng + đúng một nút tím */
.hx > .dau{align-items:center;gap:16px;margin:0}
.hx > .dau h2{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.15;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hx > .dau p{color:var(--chu2);font-size:13.5px;margin-top:4px}
.hx > .dau > .hang{gap:10px;flex-wrap:wrap;align-items:center}
.hx-nhan{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:0;
  padding:4px 10px;border-radius:99px;background:var(--nhan-nhat);color:var(--nhan);white-space:nowrap;line-height:1.3}
.hx-nhan.canh{background:var(--canh-nhat);color:var(--canh)}
.hx-nhan.tot{background:var(--tot-nhat);color:var(--tot)}
.hx-nhan.loi{background:var(--loi-nhat);color:var(--loi)}
.hx-nhan.xam{background:var(--hx-mem);color:var(--chu2)}

/* nút trong khung: cao 44, bo 12, không viền. Nút tím duy nhất có chuyển màu nhẹ. */
.hx .nut{min-height:44px;border-radius:12px;padding:0 18px;font-size:13.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--nhan) 86%, var(--the)), var(--nhan));
  box-shadow:0 6px 16px -10px var(--nhan)}
.hx .nut.phu{background:var(--hx-mem);color:var(--chu);border:0;box-shadow:none}
.hx .nut.phu:hover{background:color-mix(in srgb, var(--chu) 9%, var(--the))}
.hx .nut.phu.chon{background:var(--nhan-nhat);color:var(--nhan)}
.hx .nut.nho{min-height:36px;padding:0 12px;font-size:12.5px;border-radius:10px}
.hx .nut.hx-tim{background:var(--nhan-nhat);color:var(--nhan)}
.hx .nut.hx-tim:hover{background:color-mix(in srgb, var(--nhan) 16%, var(--the))}
.hx .nut.hx-chu{background:transparent;color:var(--nhan);padding:0 10px}
.hx .nut.hx-chu:hover{background:var(--nhan-nhat)}
.hx .nut:disabled{opacity:1;background:var(--hx-mem);color:var(--chu3);box-shadow:none;cursor:default}

/* chọn tháng: một viên trắng ‹ lịch Tháng 9/2026 › */
.hx-thang{display:inline-flex;align-items:center;background:var(--the);border-radius:14px;height:44px;padding:0 2px}
.hx-thang b{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;padding:0 6px;white-space:nowrap}
.hx-thang b .hx-i{color:var(--nhan)}
.hx-thang button{width:40px;height:40px;border:0;background:transparent;border-radius:11px;color:var(--chu2);
  display:grid;place-items:center;cursor:pointer}
.hx-thang button:hover{background:var(--hx-mem);color:var(--chu)}
.hx-thang button:disabled{color:var(--vien);cursor:default;background:transparent}

/* thẻ số đầu màn — dùng `theSo`/`.the.so` sẵn có, chỉ vẽ lại: nhãn + biểu tượng TRÊN, số to DƯỚI */
.hx .dai-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0}
.hx .dai-so .the.so,.hx .hx-o{position:relative;background:var(--the);border:0;border-radius:20px;box-shadow:none;
  padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-height:0;margin:0;overflow:hidden}
.hx .dai-so .the.so::before{display:none}
.hx .the.so .l{order:-1;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--chu2);margin:0;
  padding-right:84px}
.hx .the.so .n{font-family:inherit;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--chu)}
.hx .the.so .n small{font-size:15px;font-weight:700;color:var(--chu3);margin-left:4px}
.hx .the.so > .hang{position:absolute;top:18px;right:18px;margin:0!important;gap:6px!important}
.hx .the.so > .hang small{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--hx-mem);color:var(--chu2);white-space:nowrap}
.hx .the.so > .hang:empty{display:none}
.hx .the.so .l::before{content:'';width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;display:none}
.hx .the.so[class*=" i-"] .l::before{display:inline-block;color:var(--nhan)}
/* biến thể màu: nền chuyển nhẹ, không viền; số mang màu trạng thái */
.hx .the.so.hx-canh{background:var(--hx-canh-nen)}
.hx .the.so.hx-canh .n,.hx .the.so.hx-canh .l,.hx .the.so.hx-canh .l::before{color:var(--canh)}
.hx .the.so.hx-canh > .hang small{background:color-mix(in srgb, var(--canh) 14%, var(--the));color:var(--canh)}
.hx .the.so.hx-loi{background:var(--hx-loi-nen)}
.hx .the.so.hx-loi .n,.hx .the.so.hx-loi .l,.hx .the.so.hx-loi .l::before{color:var(--loi)}
.hx .the.so.hx-tot .n{color:var(--tot)}
.hx .the.so.hx-tot .l::before{color:var(--tot)}
.hx .the.so.hx-tim .n{color:var(--nhan)}
.hx .the.so.hx-tot > .hang small{background:var(--tot-nhat);color:var(--tot)}

/* khối nội dung: thẻ trắng bo 24, đầu khối = tên + số đếm + (phải) thao tác */
.hx-khoi{background:var(--the);border-radius:24px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hx-khoi.tran{padding:0;gap:0;overflow:hidden}
.hx-khoi.tran > .hx-khoi-dau{padding:18px 22px 14px}
.hx-khoi-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px}
.hx-khoi-dau h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.hx-khoi-dau h3 .hx-i{color:var(--nhan)}
.hx-khoi-dau .hx-phai{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hx-mo{font-size:12.5px;color:var(--chu3)}
.hx-dem{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;
  font-size:12px;font-weight:800;background:var(--canh-nhat);color:var(--canh)}
.hx-dem.xam{background:var(--hx-mem);color:var(--chu2)}
.hx-dem.tim{background:var(--nhan-nhat);color:var(--nhan)}
/* khối không nền — chỉ đầu khối, thân là lưới thẻ */
.hx-nhom{display:flex;flex-direction:column;gap:14px;min-width:0}

/* dòng ghi chú cuối màn: biểu tượng + một câu, nền mềm */
.hx .hx-ghi,.hx-ghi{max-width:none;display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;background:var(--hx-mem2);
  color:var(--chu2);font-size:12.5px;margin:0}
.hx-ghi .hx-i{color:var(--nhan)}

/* ---------- 3. bảng trong khung: không viền, đầu cột chữ thường, hàng tách bằng nền ---------- */
.hx .bang{border:0;border-radius:0;background:transparent;box-shadow:none}
.hx .bang .bang{border:0}
.hx .bang table{font-size:13.5px}
.hx .bang th{background:var(--hx-mem2);border:0;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;
  color:var(--chu2);padding:12px 14px;white-space:nowrap}
.hx .bang th:first-child{padding-left:22px}
.hx .bang th:last-child{padding-right:22px}
.hx .bang td{border:0;padding:14px;vertical-align:middle}
.hx .bang td:first-child{padding-left:22px}
.hx .bang td:last-child{padding-right:22px}
.hx .bang tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--chu) 2.5%, var(--the))}
.hx .bang tbody tr:hover td{background:color-mix(in srgb, var(--nhan-nhat) 60%, var(--the))}
.hx .bang td.tien{font-family:inherit}
.hx .bang .nut{white-space:nowrap}
.hx .bang tfoot td,.hx .bang tr.hx-tong td{background:var(--hx-mem);font-weight:800}
.hx-nguoi{display:flex;align-items:center;gap:12px;min-width:0;text-align:left}
.hx-nguoi .avatar-pt{width:36px;height:36px;flex:none}
.hx .hx-nguoi-ten,.hx .bang .hx-nguoi-ten,.hx .tu-bang .tu-ten{display:flex;flex-direction:column;line-height:1.3;min-width:0;-webkit-line-clamp:unset;overflow:visible}
.hx .tu-ten b,.hx-nguoi-ten b{font-size:13.5px;font-weight:700;color:var(--chu)}
.hx .tu-ten span,.hx-nguoi-ten span,.hx-nguoi-ten small{font-size:12px;color:var(--chu3);font-weight:500}
.hx-so{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-so.am{color:var(--loi)}
.hx-so.tim{color:var(--nhan)}
.hx-ma{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;color:var(--nhan);white-space:nowrap}
.hx-kieu{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--chu2)}
.hx-kieu .hx-i{color:var(--chu3)}
.hx-ghi-nho{display:block;font-size:12px;color:var(--chu3);margin-top:4px;max-width:220px;white-space:normal}
.hx-ghi-nho.loi{color:var(--loi)}
.hx-hang-nut{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}

/* trạng thái rỗng gọn trong khung */
.hx .the.trong{border:0;box-shadow:none;background:var(--the);border-radius:24px;padding:36px 20px}
.hx .hx-khoi .the.trong{background:var(--hx-mem2);border-radius:18px;padding:28px 16px}

@media (max-width:760px){
  .hx{gap:16px}
  .hx > .dau{align-items:flex-start}
  .hx > .dau h2{font-size:20px}
  .hx > .dau > .hang{width:100%}
  .hx > .dau > .hang > .hang{width:100%}
  .hx .dai-so{grid-template-columns:1fr 1fr;gap:10px}
  .hx .dai-so .the.so{padding:14px 16px;border-radius:18px;gap:6px}
  .hx .the.so .n{font-size:20px}
  .hx .the.so .l{font-size:12.5px;padding-right:0}
  .hx .the.so > .hang{position:static}
  .hx-khoi{border-radius:20px;padding:16px}
  .hx-khoi.tran > .hx-khoi-dau{padding:16px 16px 12px}
  .hx .bang th:first-child,.hx .bang td:first-child{padding-left:16px}
  .hx .bang th:last-child,.hx .bang td:last-child{padding-right:16px}
}
.hx-than{display:flex;flex-direction:column;gap:20px;min-width:0}
.hx-than > *{margin-top:0;margin-bottom:0}

/* ---------- 4. TẠM ỨNG LƯƠNG (Stitch 3) ---------- */
.hx-tu .tu-so-dai .dai-so{grid-template-columns:repeat(3,minmax(0,1fr))}
.hx-tu .tu-khoi-ten{margin:0}
.hx-tu .hru-luoi-the{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.hx-tu .tu-the.hru-the{background:var(--the);border:0;box-shadow:none;border-radius:24px;padding:20px;gap:16px;
  display:flex;flex-direction:column}
.hx-tu .tu-the.hx-canh{background:linear-gradient(160deg, color-mix(in srgb, var(--canh-nhat) 70%, var(--the)), var(--the) 70%)}
.hx-tu .hru-the-dau{display:flex;align-items:center;gap:12px}
.hx-tu .hru-the-dau .avatar-pt{width:44px;height:44px}
.hx-tu .hru-the-ten{flex:1;min-width:0}
.hx-tu .hru-the-ten b{font-size:15px;font-weight:800}
.hx-tu .hru-vt{font-size:12px;color:var(--chu3)}
.hx-tu .hru-the-dau .hx-nhan{align-self:flex-start}
.hx-tu-xin{background:var(--hx-mem2);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.hx-tu .tu-the.hx-canh .hx-tu-xin{background:color-mix(in srgb, var(--the) 75%, transparent)}
.hx-tu .hru-tien{font-family:inherit;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--chu);line-height:1.15}
.hx-tu .hru-ly{font-size:13.5px;color:var(--chu2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-tu .hru-han{display:flex;flex-direction:column;gap:8px}
.hx-tu .hru-han-cau{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--chu3)}
.hx-tu .hru-han-cau .hx-con{color:var(--tot);font-weight:700}
.hx-tu .hru-han-cau .hx-con.het{color:var(--loi)}
.hx-tu .hru-han-nen{height:8px;border-radius:99px;background:var(--hx-mem)}
.hx-tu .hru-han-day{background:linear-gradient(90deg, color-mix(in srgb, var(--nhan) 70%, var(--the)), var(--nhan));border-radius:99px}
.hx-tu .hru-han-day.vuot{background:linear-gradient(90deg, color-mix(in srgb, var(--canh) 60%, var(--the)), var(--canh))}
.hx-tu .hru-canh-bao{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;font-weight:600;line-height:1.45;
  color:var(--canh);background:color-mix(in srgb, var(--canh-nhat) 85%, var(--the));padding:10px 12px;border-radius:12px;margin:0}
.hx-tu .hru-canh-bao .hx-i{margin-top:1px}
.hx-tu .hru-the-nut{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.hx-tu .hru-the-nut .nut{width:100%}
.hx-tu .hru-the-nut .tu-duyet{background:var(--nhan-nhat);color:var(--nhan);border:0}
.hx-tu .hru-the-nut .tu-duyet:hover{background:color-mix(in srgb, var(--nhan) 16%, var(--the))}
.hx-tu .tu-so .hru-bang td:first-child{white-space:nowrap}
.hx-tu .tu-so .hru-bang td:nth-child(2){min-width:220px}
.hx-tu .tu-so .hru-bang td:nth-child(4),.hx-tu .tu-so .hru-bang th:nth-child(4){text-align:right}
.hx-tu .tu-so .hru-bang .hx-nguoi-ten b{white-space:nowrap}
.hx-tu .tu-so .hx-khoi-dau{padding-bottom:12px}

@media (max-width:760px){
  .hx-tu .tu-so-dai .dai-so{grid-template-columns:1fr 1fr}
  .hx-tu .tu-so-dai .the.so:first-child{grid-column:1 / -1}
  .hx-tu .hru-luoi-the{grid-template-columns:1fr}
  .hx-tu .tu-the.hru-the{border-radius:20px;padding:16px}
  .hx-tu .hru-tien{font-size:20px}
  .hx-tu .hx-khoi-dau .hx-phai{display:none}
  /* Sổ ứng trên điện thoại: mỗi dòng thành một thẻ nhỏ — mã + chip trên, người, số tiền phải. */
  .hx-tu .tu-so .hru-bang thead{display:none}
  .hx-tu .tu-so .hru-bang table,.hx-tu .tu-so .hru-bang tbody{display:block;min-width:0!important;width:100%}
  .hx-tu .tu-so .hru-bang tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px;
    align-items:center}
  .hx-tu .tu-so .hru-bang tbody tr:nth-child(even){background:color-mix(in srgb, var(--chu) 2.5%, var(--the))}
  .hx-tu .tu-so .hru-bang td{display:block;padding:0!important;background:transparent!important;min-width:0!important}
  .hx-tu .tu-so .hru-bang td:nth-child(1){grid-column:1;grid-row:1}
  .hx-tu .tu-so .hru-bang td:nth-child(6){grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .hx-tu .tu-so .hru-bang td:nth-child(2){grid-column:1;grid-row:2}
  .hx-tu .tu-so .hru-bang td:nth-child(4){grid-column:2;grid-row:2;justify-self:end}
  .hx-tu .tu-so .hru-bang td:nth-child(3),.hx-tu .tu-so .hru-bang td:nth-child(5),
  .hx-tu .tu-so .hru-bang td:nth-child(7){grid-column:1 / -1;font-size:12px;color:var(--chu3);display:inline}
  .hx-tu .tu-so .hru-bang td:nth-child(3){grid-row:3}
  .hx-tu .tu-so .hru-bang td:nth-child(5),.hx-tu .tu-so .hru-bang td:nth-child(7){display:none}
  .hx-tu .tu-so .hru-bang td:nth-child(8){grid-column:1 / -1}
  .hx-tu .tu-so .hru-bang td:nth-child(8):empty{display:none}
  .hx-tu .tu-so .hru-bang .hx-hang-nut{justify-content:flex-start}
  .hx-tu .tu-so .hru-bang .hx-hang-nut .nut{min-height:40px}
}

/* ---------- 5. dải tab dùng chung: một viên trắng, tab chọn là nền tím nhạt (không phải nút đậm) ---------- */
.hx > .tab-ba{margin:0;align-self:flex-start;max-width:100%;background:var(--the);padding:5px;border-radius:16px;gap:4px}
.hx > .tab-ba .nut{min-height:40px;border:0;background:transparent;box-shadow:none;border-radius:12px;
  padding:0 16px;font-size:13.5px;font-weight:600;color:var(--chu2)}
.hx > .tab-ba .nut:not(.chon):hover{background:var(--hx-mem)}
.hx > .tab-ba .nut.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:700}
.hx > .tab-ba .nut .dem{background:var(--hx-mem);color:var(--chu2)}
.hx > .tab-ba .nut.chon .dem{background:var(--the);color:var(--nhan)}

/* menu ⋯ (việc khác của tháng · thao tác hàng) — viên mềm, thân nổi có bóng (thẻ nổi được bóng) */
.hx .bl-menu > summary{width:44px;height:44px;border-radius:12px;background:var(--hx-mem);color:var(--chu2);
  display:grid;place-items:center;font-size:18px;font-weight:800;border:0}
.hx .bang .bl-menu > summary{width:36px;height:36px;border-radius:10px;background:transparent}
.hx .bang .bl-menu > summary:hover{background:var(--hx-mem)}
.hx .bl-menu{position:relative}
.hx .bl-menu-than{position:absolute;right:0;top:100%;z-index:20;border:0;border-radius:14px;padding:6px;
  background:var(--the);box-shadow:0 16px 40px -18px rgba(20,20,40,.45);min-width:200px}
.hx .bl-menu-muc,.hx .hx-menu-muc{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px;
  border:0;border-radius:10px;background:transparent;color:var(--chu);font:inherit;font-size:13.5px;font-weight:600;
  text-align:left;cursor:pointer;white-space:nowrap}
.hx .bl-menu-muc:hover,.hx .hx-menu-muc:hover{background:var(--hx-mem)}
.hx .hx-o-nut{gap:10px}
.hx .hx-o-nut:empty{display:none}
.hx .hx-o-nut .bl-nut-dau{display:flex;gap:10px;margin:0;align-items:center}

/* ---------- 6. BẢNG LƯƠNG — dải 6 bước (Stitch 1 và 4) ---------- */
.hx .bl-buoc-dai{counter-reset:bl;background:var(--the);border-radius:24px;padding:14px;gap:10px;margin:0;
  overflow-x:auto;scrollbar-width:none}
.hx .bl-buoc-dai::-webkit-scrollbar{display:none}
.hx .bl-buoc{counter-increment:bl;border:0;border-radius:16px;background:var(--hx-mem2);padding:12px 14px;
  min-width:128px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center}
.hx .bl-buoc-cot{display:contents}
.hx .bl-buoc-cham{grid-row:1 / span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:13.5px;font-weight:800;background:var(--the);color:var(--chu3)}
.hx .bl-buoc:not(.xong) .bl-buoc-cham::before{content:counter(bl)}
.hx .bl-buoc-ten{font-size:13.5px;font-weight:700;color:var(--chu2);white-space:nowrap}
.hx .bl-buoc-dem{font-size:12px;color:var(--chu3);grid-column:2}
.hx .bl-buoc.xong{background:var(--hx-tot-nen)}
.hx .bl-buoc.xong .bl-buoc-cham{background:var(--tot);color:var(--the)}
.hx .bl-buoc.xong .bl-buoc-ten{color:var(--tot)}
.hx .bl-buoc.hien{background:var(--hx-nhan-nen);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--nhan) 45%, transparent)}
.hx .bl-buoc.hien .bl-buoc-cham{background:var(--nhan);color:var(--the)}
.hx .bl-buoc.hien .bl-buoc-ten{color:var(--nhan)}

/* dòng trạng thái tháng: hai chip nhỏ + câu chú thích — không nền, không thẻ */
.hx .bl-dai-tt{display:flex;flex-direction:column;align-items:stretch;gap:12px;background:transparent;border:0;padding:0;margin:0}
.hx .bl-dai-tt-chip{gap:8px}
.hx .bl-dai-tt-chip:empty{display:none}
.hx .bl-dai-tt .dai-so{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hx .bl-o-so .n{white-space:nowrap}

/* khối "Cần xử lý": mỗi vấn đề một dải màu chuyển nhẹ */
.hx .bl-xu.hx-khoi{margin:0;padding:20px 22px;gap:10px;border:0;box-shadow:none}
.hx .bl-xu-ten{margin:0;font-size:16px;font-weight:800}
.hx .hx-xu{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border:0;border-radius:16px;min-height:56px}
.hx .hx-xu:first-of-type{border-top:0}
.hx .hx-xu.loi{background:var(--hx-loi-nen);color:var(--loi)}
.hx .hx-xu.canh{background:var(--hx-canh-nen);color:var(--canh)}
.hx .hx-xu.nhan{background:var(--hx-nhan-nen);color:var(--nhan)}
.hx .hx-xu .bl-xu-than{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hx .hx-xu .bl-xu-than b{color:inherit;font-size:13.5px}
.hx .hx-xu .bl-xu-than small{color:var(--chu2);font-size:12.5px}
.hx .hx-xu .nut.hx-chu{color:inherit;min-height:40px}
.hx .hx-xu .nut.hx-chu:hover{background:color-mix(in srgb, currentColor 10%, transparent)}

/* lọc nhanh đầu khối bảng: viên mềm, chọn = tím; "Có vấn đề" vàng, "Đã duyệt" xanh */
.hx-loc{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.hx-loc-nut{min-height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--hx-mem2);color:var(--chu2);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.hx-loc-nut b{font-weight:800;margin-left:2px}
.hx-loc-nut:hover{background:var(--hx-mem)}
.hx-loc-nut.van-de{background:var(--canh-nhat);color:var(--canh)}
.hx-loc-nut.da-duyet{background:var(--tot-nhat);color:var(--tot)}
.hx-loc-nut.chon{background:var(--nhan);color:var(--the)}

/* bảng tháng */
.hx .bl-khoi-bang .bl-bang td,.hx .bl-khoi-bang .bl-bang th{padding-top:13px;padding-bottom:13px}
.hx .bl-bang th:not(:first-child):not(:nth-last-child(-n+2)),.hx .bl-bang td.bl-tien{text-align:right}
.hx .bl-bang td:first-child{min-width:210px}
.hx .bl-bang .bl-bam-ten{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.hx .bl-bang .bl-bam-ten:hover b{color:var(--nhan)}
.hx .bl-bam-tien{color:var(--nhan);font-weight:700;font-family:inherit}
.hx .bl-am{color:var(--loi)}
.hx .bl-dam b{font-weight:800;font-size:14px}
.hx td.hx-cong-thieu{color:var(--canh);font-weight:800}
.hx .bl-lech{display:block;margin-top:4px;font-size:12px}
.hx .bl-bang tr.hx-tong td{font-weight:800;color:var(--chu);white-space:nowrap}
.hx .bl-bang tr.hx-tong td.hx-so.tim{color:var(--nhan);font-size:15px}
.hx .bl-hang-nut .nut.phu.nho{background:var(--nhan-nhat);color:var(--nhan)}

/* thẻ gọn ≤760px (app.css bật/tắt) — nền trắng bo 16, tên hai dòng */
.hx .bl-the,.hx .cl-the{border-radius:16px;padding:10px 14px;background:var(--the);height:auto;min-height:64px;max-height:none}
.hx .bl-khoi-bang .bl-ds-the,.hx .cl-khoi-bang .cl-ds-the{padding:0 12px 12px;margin:0}
.hx .bl-khoi-bang .bl-the:nth-child(odd),.hx .cl-khoi-bang .cl-the:nth-child(odd){background:var(--hx-mem2)}
.hx .bl-the .bl-the-tien,.hx .cl-the .bl-the-tien{font-size:13.5px;font-weight:800}
.hx .bl-the .hx-nguoi-ten b{font-size:13.5px}

/* ---------- 7. PHIẾU LƯƠNG — ngăn kéo phải (Stitch 2) ---------- */
.lop.hx-keo{place-items:stretch end;padding:0;background:color-mix(in srgb, var(--navy) 42%, transparent)}
.lop.hx-keo .hop{max-width:560px;width:100%;height:100vh;max-height:100vh;border-radius:24px 0 0 24px;padding:0;
  display:flex;flex-direction:column;overflow:auto;background:var(--the)}
.lop.hx-keo .hop > h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lop.hx-keo .hop-nhac{display:none}
.lop.hx-keo .hru-phieu{min-width:0;padding:22px 24px 8px;display:flex;flex-direction:column;gap:18px;flex:1}
.lop.hx-keo .hop > .hang{position:sticky;bottom:0;margin:0!important;padding:14px 24px;background:var(--the);
  box-shadow:0 -10px 24px -18px rgba(20,20,40,.35);gap:10px;flex-wrap:wrap}
.lop.hx-keo .hop > .hang > .nut.phu:first-child{display:none}
.lop.hx-keo .hru-nut-hang{display:flex;gap:10px;width:100%;align-items:center;margin:0}
.lop.hx-keo .hru-nut-hang .nut{min-height:44px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;font-size:13.5px}
.lop.hx-keo .hru-nut-hang .nut.phu{background:color-mix(in srgb, var(--chu) 6%, var(--the));border:0;color:var(--chu)}
.lop.hx-keo .hru-nut-hang .nut.hx-chu{background:transparent;color:var(--nhan)}
.lop.hx-keo .hru-nut-hang .nut:not(.phu){margin-left:auto;border:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--nhan) 86%, var(--the)), var(--nhan));color:var(--the)}
.lop.hx-keo .hru-nut-hang:empty{display:none}
.hx-pl-dau{display:flex;align-items:center;gap:14px}
.hx-pl-dau .avatar-pt{width:48px;height:48px;flex:none}
.hx-pl-dau .hx-nguoi-ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hx-pl-dau .hx-nguoi-ten b{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hx-pl-dau .hx-nguoi-ten > span{font-size:12.5px;color:var(--chu3)}
.hx-pl-dau .bl-chi-tiet-dau{display:inline;margin:0}
.hx-pl-dong{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--chu2);
  display:grid;place-items:center;cursor:pointer;flex:none}
.hx-pl-dong:hover{background:color-mix(in srgb, var(--chu) 6%, var(--the))}
.lop.hx-keo .hru-thuc-linh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;
  border-radius:20px;background:linear-gradient(135deg, var(--nhan-nhat), color-mix(in srgb, var(--nhan-nhat) 35%, var(--the)));margin:0}
.lop.hx-keo .hru-thuc-linh .l{font-size:13.5px;font-weight:700;color:var(--nhan)}
.lop.hx-keo .hru-thuc-linh .n{font-family:inherit;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--chu);
  font-variant-numeric:tabular-nums}
.lop.hx-keo .bl-vuot-tran{margin:0;border-radius:14px}
.hx-pl-nhom{display:flex;flex-direction:column;gap:6px;margin:0!important}
.lop.hx-keo .hru-khoan-ten{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:800;
  letter-spacing:0;color:var(--chu);text-transform:none}
.lop.hx-keo .hru-khoan-ten small{margin-left:auto;font-size:12px;font-weight:600;color:var(--chu3)}
.hx-cham{width:8px;height:8px;border-radius:50%;background:var(--nhan);flex:none}
.hx-pl-nhom.tru .hx-cham{background:var(--loi)}
.lop.hx-keo .hx-pl-nhom .bang{border:0;background:transparent;box-shadow:none}
.lop.hx-keo .hx-pl-nhom thead{display:none}
.lop.hx-keo .hx-pl-nhom td{border:0;padding:10px 4px;font-size:13.5px;background:transparent!important}
.lop.hx-keo .hx-pl-nhom td:nth-child(2){text-align:right;font-weight:700;white-space:nowrap;font-family:inherit}
.lop.hx-keo .hx-pl-nhom td:nth-child(3){width:1px;padding-left:8px}
.lop.hx-keo .hx-pl-nhom td:nth-child(3):empty{padding:0}
.lop.hx-keo .hx-pl-nhom tr + tr td{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--chu) 8%, transparent)}
.lop.hx-keo .hx-pl-nhom .nut{min-height:32px;border:0;background:color-mix(in srgb, var(--chu) 6%, var(--the));border-radius:9px}
.hx-pl-tong{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:14px;
  background:color-mix(in srgb, var(--chu) 6%, var(--the));font-size:13.5px;font-weight:700}
.hx-pl-tong b{font-size:15px;font-weight:800}
.hx-pl-nhom.tru .hx-pl-tong{background:var(--loi-nhat);color:var(--loi)}
.lop.hx-keo .bl-kpi{margin:0;padding:12px 16px;border-radius:14px;background:var(--tot-nhat)}
.lop.hx-keo .bl-kpi .bl-nhom-ten{color:var(--tot);text-transform:none;letter-spacing:0;font-size:12.5px}
.hx-pl-ct{margin:0!important}
.hx-pl-ct > summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--chu3);text-transform:none;letter-spacing:0;
  min-height:32px;display:flex;align-items:center}
.lop.hx-keo .bl-ct{border:0;border-radius:12px;margin:6px 0 0}

/* ---------- 8. CHI LƯƠNG (Stitch 4) ---------- */
.hx .cl-so .dai-so{grid-template-columns:repeat(4,minmax(0,1fr))}
.hx .cl-lo-khoi.hx-khoi{margin:0;padding:20px 22px;gap:10px;border:0;box-shadow:none}
.hx .cl-lo-ten{margin:0;font-size:16px;font-weight:800;display:flex;gap:8px;align-items:center}
.hx .cl-lo-ten .hx-i{color:var(--nhan)}
.hx .cl-lo{border:0;border-radius:18px;padding:12px 14px;gap:14px;background:var(--hx-mem2)}
.hx .cl-lo.cho{background:var(--hx-canh-nen)}
.hx .cl-lo-than{flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
.hx .cl-lo-than > b{font-size:15px;font-weight:800}
.hx .cl-lo-than small{font-size:12.5px;color:var(--chu2)}
.hx .cl-lo-than small b{color:var(--chu);font-size:13.5px}
.hx-lo-so{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13.5px;
  background:var(--the);color:var(--chu2);flex:none}
.hx .cl-lo.cho .hx-lo-so{color:var(--canh)}
.hx .cl-lo.xong .hx-lo-so{color:var(--tot)}
.hx .cl-lo-nut .nut.phu{background:var(--the)}
.hx .cl-lo-nut .nut.hx-tim{background:var(--nhan-nhat);color:var(--nhan)}
.hx .cl-khoi-bang .cl-loc{margin:0}
.hx .cl-bang-vung td:nth-child(3),.hx .cl-bang-vung th:nth-child(3){text-align:right}
.hx .cl-bang-vung .cl-o-chon{accent-color:var(--nhan);width:20px;height:20px}
.hx .cl-bang-vung td:last-child .nut{background:var(--nhan-nhat);color:var(--nhan)}
.hx-doc{display:inline-flex;align-items:center;gap:6px;color:var(--tot);font-weight:600;white-space:nowrap}
.hx .cl-thanh{position:sticky;bottom:16px;z-index:8;margin:-96px 16px 0;border:0;border-radius:18px;padding:10px 12px 10px 18px;
  background:var(--the);box-shadow:0 18px 44px -18px rgba(20,20,40,.5)}
.hx .cl-thanh-cau{display:flex;align-items:center;gap:8px;font-size:13.5px}
.hx .cl-thanh-cau .hx-i{color:var(--nhan)}
.hx .cl-thanh-cau b{color:var(--nhan);font-size:15px;font-weight:800;margin-left:4px}
.hx .cl-thanh .hang{gap:8px}

/* hoa hồng · bảng giá: cùng khung, bảng nằm trên thẻ trắng */
.hx-bl .hx-than > .bang,.hx-bl .hx-than > .bl-khoi-dong .bang,.hx-bl .bl-nhom .bang{background:var(--the);border-radius:20px;overflow:hidden}
.hx-bl .bl-nut-dau{margin:0;display:flex;gap:10px}
.hx-bl .bl-nhom{background:var(--the);border-radius:20px;padding:6px 6px 10px;margin:0 0 14px}
.hx-bl .bl-nhom-dau{padding:10px 14px;border:0}
.hx-bl .bl-o-gia{border:0;border-radius:10px;min-height:36px;padding:0 12px;background:var(--hx-mem2);font-weight:700}
.hx-bl .bl-o-gia.trong{background:var(--canh-nhat);color:var(--canh)}

@media (max-width:1100px){
  .hx .bl-dai-tt .dai-so,.hx .cl-so .dai-so{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hx .bl-buoc-dai{border-radius:20px;padding:10px}
  .hx .bl-buoc{min-width:120px;padding:10px 12px}
  .hx .bl-dai-tt .dai-so,.hx .cl-so .dai-so{grid-template-columns:1fr 1fr}
  .hx .hx-xu{flex-wrap:wrap}
  .hx .hx-xu .nut.hx-chu{margin-left:auto}
  .hx .cl-lo{flex-wrap:wrap}
  .hx .cl-thanh{margin:-96px 0 0;bottom:10px}
  .lop.hx-keo{place-items:end stretch}
  .lop.hx-keo .hop{height:92vh;max-height:92vh;max-width:none;border-radius:24px 24px 0 0}
  .lop.hx-keo .hru-phieu{padding:18px 16px 8px}
  .lop.hx-keo .hop > .hang{padding:12px 16px}
  .lop.hx-keo .hru-thuc-linh .n{font-size:20px}
  .hx > .dau .hx-o-nut{width:100%}
  .hx > .dau .hx-o-nut .bl-nut-dau{width:100%}
  .hx > .dau .hx-o-nut .bl-nut-dau > .nut{flex:1}
  .hx .bl-menu-than{right:0}
}
@media (max-width:760px){
  /* thẻ gọn: ảnh | tên hai dòng + chip bên dưới | số tiền phải — tên không bị chip cắt cụt */
  .hx .bl-the,.hx .cl-the{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:4px;align-items:center}
  .hx .bl-the > :nth-last-child(4),.hx .cl-the > :nth-last-child(4){grid-row:1 / span 2;grid-column:1}
  .hx .cl-the > :nth-last-child(5){grid-row:1 / span 2;grid-column:1}
  .hx .cl-the:has(> :nth-last-child(5)){grid-template-columns:auto auto 1fr auto}
  .hx .cl-the:has(> :nth-last-child(5)) > :nth-last-child(4){grid-column:2}
  .hx .bl-the > :nth-last-child(3),.hx .cl-the > :nth-last-child(3){grid-column:-3;grid-row:1}
  .hx .bl-the > :nth-last-child(2),.hx .cl-the > :nth-last-child(2){grid-column:-3;grid-row:2;justify-self:start}
  .hx .bl-the > :last-child,.hx .cl-the > :last-child{grid-column:-2;grid-row:1 / span 2;margin:0}
  .hx .bl-the .avatar-pt,.hx .cl-the .avatar-pt{width:40px;height:40px}
  .hx .bl-the-than b{white-space:normal}
}

/* ---------- 9. NHÂN SỰ & VỊ TRÍ — danh sách (Stitch 7) ---------- */
.hx-xu-than{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hx-xu-than b{font-size:13.5px;color:inherit}
.hx-xu-than small{font-size:12.5px;color:var(--chu2)}
.hx .hx-xu.xam{background:var(--hx-mem2);color:var(--chu2)}
.hx-ns .hx-ns-xu{gap:10px}
.hx-ns .hx-ns-xu h3 .hx-i{color:var(--loi)}
.hx-ns .ns-loc.hx-khoi{margin:0;padding:16px;gap:12px;display:flex;flex-direction:column}
.hx-ns .ns-loc-hang{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hx-tim-boc{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;
  background:var(--hx-mem2);color:var(--chu3);cursor:text}
.hx-tim-boc:focus-within{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--nhan) 40%, transparent);color:var(--nhan)}
.hx .hx-tim-boc input{flex:1;min-width:0;border:0;background:transparent;height:40px;padding:0;font:inherit;font-size:13.5px;
  color:var(--chu);outline:0;box-shadow:none}
.hx-ns .ns-loc select{height:44px;border:0;border-radius:14px;background:var(--hx-mem2);padding:0 14px;font:inherit;
  font-size:13.5px;color:var(--chu);flex:0 1 240px;min-width:0}
.hx-ns .ns-dem{margin-left:auto;font-size:12.5px;color:var(--chu3)}
.hx-ns .ns-ds{display:flex;flex-direction:column;gap:16px}
.hx-ns .ns-nhom{background:var(--the);border-radius:24px;padding:0;overflow:hidden;border:0}
.hx-ns .ns-nhom-dau{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--hx-mem2);
  font-size:15px;min-height:52px}
.hx-ns .ns-nhom-dau::-webkit-details-marker{display:none}
.hx-ns .ns-nhom-dau > b{font-weight:800}
.hx-ns .ns-nhom .hx-cham{background:var(--nhan)}
.hx-ns .ns-nhom.canh .hx-cham{background:var(--canh)}
.hx-ns .ns-truong{margin-left:auto;font-size:12.5px;color:var(--chu3)}
.hx-ns .ns-truong b{color:var(--chu2);font-weight:700}
.hx-ns .ns-nhom .hru2-bang{margin:0}
.hx-ns .ns-nhom .bang th{background:transparent;padding-top:12px;padding-bottom:8px;color:var(--chu3)}
.hx-ns .hru2-nguoi{gap:12px}
.hx-ns .hru2-nguoi .avatar-pt{width:40px;height:40px}
.hx-ns .hru2-hang-ten b{font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.hx-ns .hru2-ma{font-size:12px;color:var(--chu3)}
.hx-ns .hru2-ma.hx-ma-nv{font-family:"IBM Plex Mono",monospace}
.hx-ns .ns-nhom-dau{color:var(--chu)}
/* các nhóm là bảng rời — cố định bề rộng cột để cột thẳng hàng từ nhóm này sang nhóm khác */
.hx-ns .ns-nhom table{table-layout:fixed;min-width:980px}
.hx-ns .ns-nhom th:nth-child(1){width:25%}
.hx-ns .ns-nhom th:nth-child(2){width:19%}
.hx-ns .ns-nhom th:nth-child(3){width:14%}
.hx-ns .ns-nhom th:nth-child(4){width:18%}
.hx-ns .ns-nhom th:nth-child(5){width:9%}
.hx-ns .ns-nhom th:nth-child(6){width:9%}
.hx-ns .ns-nhom th:nth-child(7){width:96px}
.hx-ns .ns-nhom td{overflow:hidden;text-overflow:ellipsis}
.hx-ns .hru2-vt{flex-wrap:wrap}
.hx-dau-loi{color:var(--loi);display:inline-flex}
.hx-vt{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:9px;font-size:12px;font-weight:600;
  background:var(--hx-mem);color:var(--chu2);white-space:nowrap}
.hx-vt.hx-vt-chinh{background:var(--nhan-nhat);color:var(--nhan);font-weight:700}
.hx-ns .hru2-vt{gap:6px}
.hx-cchn{display:flex;flex-direction:column;gap:2px}
.hx-cchn > b{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;color:var(--chu)}
.hx-cchn .hru2-cchn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.hx-ns .hru2-cchn.canh{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.hx-tk{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--chu)}
.hx-tk .hx-i{color:var(--tot)}
.hx-nghieng{font-style:italic}
.hx .bang tr.hx-dong-loi td{background:color-mix(in srgb, var(--loi-nhat) 55%, var(--the))}
.hx-ns .hru2-nut-hs{min-height:40px}
.hx-ns .hru2-nav{gap:10px}
@media (max-width:760px){
  .hx-ns .ns-loc-hang{flex-direction:column;align-items:stretch}
  .hx-tim-boc{flex:none}
  .hx-ns .ns-loc .hx-loc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hx-ns .ns-loc .hx-loc::-webkit-scrollbar{display:none}
  .hx-ns .ns-loc select{flex:none}
  .hx-ns .ns-dem{margin-left:0}
  .hx-ns .ns-nhom{border-radius:20px}
  .hx-ns .ns-nhom-dau{padding:12px 16px;flex-wrap:wrap}
  .hx-ns .ns-truong{margin-left:0;width:100%}
  /* bảng nhóm thành thẻ: người + trạng thái trên, vị trí, CCHN · tài khoản dưới, nút Hồ sơ phải */
  .hx-ns .ns-nhom thead{display:none}
  .hx-ns .ns-nhom table,.hx-ns .ns-nhom tbody{display:block;width:100%;min-width:0!important}
  .hx-ns .ns-nhom tr{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:14px 16px;align-items:center}
  .hx-ns .ns-nhom tbody tr:nth-child(even){background:color-mix(in srgb, var(--chu) 2.5%, var(--the))}
  .hx-ns .ns-nhom td{display:block;padding:0!important;background:transparent!important;min-width:0!important;white-space:normal!important}
  .hx-ns .ns-nhom td:nth-child(1){grid-column:1;grid-row:1}
  .hx-ns .ns-nhom td:nth-child(6){grid-column:2;grid-row:1}
  .hx-ns .ns-nhom td:nth-child(2){grid-column:1 / -1}
  .hx-ns .ns-nhom td:nth-child(3){grid-column:1}
  .hx-ns .ns-nhom td:nth-child(4){grid-column:1}
  .hx-ns .ns-nhom td:nth-child(5){display:none}
  .hx-ns .ns-nhom td:nth-child(7){grid-column:2;grid-row:3 / span 2;align-self:center}
}
@media (max-width:760px){.hx-ns .ns-nhom td:nth-child(3):has(> .chu3){display:none}}
/* tab Nghỉ phép · Cơ cấu: chỉ mượn đầu màn + dải tab; thân giữ dáng cũ (nút cỡ gốc) */
.hx-ns-khac > div:last-child .nut{min-height:revert;border-radius:revert;padding:revert;font-size:revert;box-shadow:none}

/* ---------- 10. NHÂN SỰ CỦA TÔI (Stitch 8 · mobile trước) — năm tab chung một ngôn ngữ ---------- */
.hx-nsct{gap:16px;max-width:760px}
.hx-nsct > .tab-ba{align-self:stretch;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hx-nsct > .tab-ba::-webkit-scrollbar{display:none}
.hx-nsct > .tab-ba .nut{flex:none;white-space:nowrap}
.hx-nsct > .tab-ba .nut .dem.loi{background:var(--loi);color:var(--the)}
.hx-nsct .hx-than{gap:16px}
/* mọi thẻ trong màn: trắng, bo 24, không viền — ghi đè cả style nội tuyến của `vtKhoi` */
.hx-nsct .hx-than .the{border:0!important;box-shadow:none!important;border-radius:24px;background:var(--the);
  padding:18px 18px!important;margin:0!important}
.hx-nsct .hx-than > .the,.hx-nsct .hx-than > section,.hx-nsct .hru2-thu-nhap > *{margin:0!important}
.hx-nsct .hx-than h3{font-size:16px!important;font-weight:800;margin:0!important;display:flex;align-items:center;gap:8px}
.hx-nsct .hx-than h3 .hx-i{color:var(--nhan)}
.hx-nsct .hx-than h3 + .chip{background:var(--hx-mem);color:var(--chu2)}
.hx-nsct .hx-than h3 + .chip.tot{background:var(--tot-nhat);color:var(--tot)}
.hx-nsct .hx-than small[style]{font-size:12px}
.hx-nsct .hru2-thu-nhap{display:flex;flex-direction:column;gap:16px}
.hx-nsct .hru2-thu-nhap .dai-so{grid-template-columns:1fr;margin:0!important}

/* ① thẻ đầu: thực lĩnh to, viên trạng thái, ô công có thanh */
.hx-nsct .the.so.hx-nsct-dau{padding:20px!important;gap:6px}
.hx-nsct .hx-nsct-dau .l{font-size:15px;font-weight:800;color:var(--chu)}
.hx-nsct .hx-nsct-dau .n{font-size:28px;margin-bottom:6px}
.hx-nsct .hx-nsct-dau > .hang small{background:var(--nhan-nhat);color:var(--nhan)}
.hx-nsct .hx-nsct-dau.da-xac > .hang small{background:var(--tot-nhat);color:var(--tot)}
.hx-cong{background:var(--hx-mem2);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.hx-cong-dau{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700}
.hx-cong-dau b{color:var(--nhan)}
.hx-cong-nen{height:8px;border-radius:99px;background:var(--hx-mem)}
.hx-cong-day{height:100%;border-radius:99px;background:linear-gradient(90deg, color-mix(in srgb, var(--nhan) 70%, var(--the)), var(--nhan))}
.hx-nsct .hx-nsct-dau .vt-pl-nut{margin:8px 0 0!important;gap:10px;display:flex;flex-wrap:wrap}
.hx-nsct .hx-nsct-dau .vt-pl-nut{flex-direction:row!important}
.hx-nsct .hx-nsct-dau .vt-pl-nut > *{flex:1 1 auto;min-width:140px}
.hx-nsct .hx-nsct-dau .vt-pl-daxac{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--tot);font-weight:700;
  min-height:44px;border-radius:12px;background:var(--tot-nhat)}
.hx-nsct .hx-nsct-dau .vt-pl-daxac .vt-pl-luc{color:var(--tot)}

/* ② dải cảnh báo: thẻ hổ phách, biểu tượng + tiêu đề đậm + một câu */
.hx-nsct .hru2-dai-canh{display:flex;gap:12px;align-items:flex-start;border-radius:20px;padding:16px 18px;
  background:var(--hx-canh-nen);margin:0!important;font-size:13.5px}
.hx-nsct .hru2-dai-canh > div{display:flex;flex-direction:column;gap:2px}
.hx-nsct .hru2-dai-canh b{font-weight:800}
.hx-nsct .hru2-dai-canh .hx-i{margin-top:2px}

/* ③ chi tiết các khoản: ô biểu tượng màu · tên · số tiền */
.hx-nsct-khoi-dau{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.hx-nsct-khoi-dau > small{margin-left:auto;font-size:12.5px;color:var(--chu3)}
.hx-nsct .hx-nsct-khoan{display:flex;flex-direction:column;gap:8px}
.hx-nsct .hx-nsct-khoan .hx-nsct-khoi-dau{margin:0 0 4px}
.hx-nsct .hx-khoan{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--hx-mem2);
  font-size:13.5px;margin:0}
.hx-khoan-o{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--hx-mem);color:var(--chu2)}
.hx-khoan-o.tim{background:var(--nhan-nhat);color:var(--nhan)}
.hx-khoan-o.tot{background:var(--tot-nhat);color:var(--tot)}
.hx-khoan-o.loi{background:var(--loi-nhat);color:var(--loi)}
.hx-khoan-o.lam{background:color-mix(in srgb, var(--sop-lien-ket-nhat) 100%, var(--the));color:var(--sop-lien-ket)}
.hx-khoan-ten{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hx-khoan-ten b{font-weight:700;font-size:13.5px;color:var(--chu)}
.hx-khoan-ten small{font-size:12px;color:var(--chu3)}
.hx-nsct .hx-khoan > b{font-family:inherit;font-weight:800;white-space:nowrap}
.hx-nsct .hx-khoan > b.tim{color:var(--nhan)}
.hx-nsct .hx-khoan > b.loi{color:var(--loi)}
.hx-vai{font-size:12px;color:var(--chu3);padding:0 4px}
.hx-khoan-cong{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--chu3);padding:4px 4px 0}
.hx-khoan-cong b{font-family:inherit;color:var(--chu);font-weight:700}
.hx-khoan-cong b.loi{color:var(--loi)}
.hx-nsct .hx-khoan-tong{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 14px;border-radius:14px;
  background:var(--nhan-nhat);color:var(--nhan);font-weight:800;border:0}
.hx-nsct .hx-khoan-tong b{font-family:inherit;font-size:16px}
.hx-nsct .hx-nsct-khoan .the.trong{padding:18px 12px!important;background:var(--hx-mem2);border-radius:16px}

/* ④ tạm ứng */
.hx-nsct .vt-tu-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.hx-nsct .nut.hx-vien{background:var(--the);color:var(--nhan);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--nhan) 55%, transparent);min-height:44px}
.hx-nsct .vt-tu-han{display:flex;flex-direction:column;gap:2px;background:var(--hx-mem2);border-radius:16px;padding:14px 16px}
.hx-nsct .vt-tu-han small{font-size:12px;color:var(--chu3)}
.hx-nsct .vt-tu-han b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.hx-nsct .vt-tu-han span{font-size:12px;color:var(--chu3)}
.hx-nsct .vt-tu-cho{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.hx-nsct .vt-tu-dong{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-radius:16px;background:var(--hx-canh-nen);border:0}
.hx-tu-cho-than{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.hx-tu-cho-than b{color:var(--nhan);font-weight:800}
.hx-tu-cho-than small{font-size:12px;color:var(--chu2)}
.hx-nsct .vt-tu-dong .nut{background:var(--the)}
.hx-nsct .vt-tu-dan{margin:0;font-size:13.5px;color:var(--chu2)}

/* ⑤ dòng hoa hồng (gập) */
.hx-nsct .hx-nsct-hh > summary{list-style:none;cursor:pointer;margin:0;min-height:40px}
.hx-nsct .hx-nsct-hh > summary::-webkit-details-marker{display:none}
.hx-nsct .hx-nsct-hh .vt-hh-tong{font-family:inherit;font-size:15px;font-weight:800;color:var(--nhan);letter-spacing:0}
.hx-nsct .hx-nsct-hh > summary > small{margin-left:0;margin-right:auto}
.hx-nsct .hx-nsct-hh .hx-mui{color:var(--chu3);transition:transform .2s}
.hx-nsct .hx-nsct-hh[open] .hx-mui{transform:rotate(90deg)}
.hx-nsct .hx-nsct-hh[open] > summary{margin-bottom:12px}
.hx-nsct .hx-nsct-hh > .bang{margin:0 -18px -18px}

/* bốn tab còn lại — cùng ngôn ngữ: chip lọc thành viên mềm, ô nhập nền mềm không viền */
.hx-nsct .dk-chip{min-height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--hx-mem2);color:var(--chu2);font-weight:600}
.hx-nsct .dk-chip.chon{background:var(--nhan);color:var(--the)}
.hx-nsct .dk-chip.chon .dem{opacity:1}
.hx-nsct .hx-than input:not([type=checkbox]):not([type=radio]),.hx-nsct .hx-than select,.hx-nsct .hx-than textarea{
  border:0;border-radius:12px;background:var(--hx-mem2);min-height:44px;padding:0 12px;font:inherit;font-size:13.5px;color:var(--chu)}
.hx-nsct .hx-than textarea{padding:10px 12px}
.hx-nsct .hx-than label{font-size:12.5px;color:var(--chu3);font-weight:600;display:flex;flex-direction:column;gap:6px}
.hx-nsct .hx-than .mach-nuoc{font-size:12.5px;color:var(--chu3)}
.hx-nsct .vt-phep{background:var(--hx-nhan-nen)!important}
.hx-nsct .vt-phep .n{font-family:inherit;font-size:20px;font-weight:800;color:var(--nhan)}
.hx-nsct .vt-don{background:var(--hx-mem2)!important;border-radius:18px!important;padding:14px!important}
.hx-nsct .vt-cong-tac{flex-direction:row!important;align-items:center;gap:10px!important;color:var(--chu2)!important}
.hx-nsct .vt-ngay-o{align-self:flex-end;min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px;
  background:var(--nhan-nhat);color:var(--nhan);font-weight:700;font-size:13.5px}
/* chấm công */
.hx-nsct .cc-the-ca{gap:12px}
.hx-nsct .cc-ca-icon{width:44px;height:44px;border-radius:14px}
.hx-nsct .cc-cham{padding:22px 18px!important}
.hx-nsct .cc-cam{border:0;background:radial-gradient(circle, var(--the) 55%, var(--hx-mem) 100%);box-shadow:0 0 0 6px var(--nhan-nhat)}
.hx-nsct .cc-cam.khong{box-shadow:0 0 0 6px var(--hx-mem)}
.hx-nsct .cc-kt-o{border:0;border-radius:14px;background:var(--hx-mem2);padding:10px 4px}
.hx-nsct .cc-kt-ten{font-size:12px}
.hx-nsct .cc-kt-tt{font-size:12px}
.hx-nsct .cc-nut{height:56px;border-radius:16px}
.hx-nsct .cc-tl-hang{background:var(--hx-mem2);border:0;border-radius:14px;padding:10px 12px;margin-bottom:6px}
.hx-nsct .cc-so{border-radius:14px;padding:12px 8px}
.hx-nsct .cc-so-n{font-size:20px}
.hx-nsct .cc-o{border:0;border-radius:10px}
.hx-nsct .cc-fab{border:0;box-shadow:0 14px 30px -12px var(--nhan)}
.hx-nsct .hx-than .bang{background:transparent}

@media (max-width:760px){
  .hx-nsct{gap:14px}
  .hx-nsct > .dau{gap:12px}
  .hx-nsct > .dau > .hang{width:100%}
  .hx-nsct > .dau .hx-thang{width:100%;justify-content:space-between}
  .hx-nsct .hx-than .the{border-radius:22px;padding:16px!important}
  .hx-nsct .hx-nsct-hh > .bang{margin:0 -16px -16px}
}
.hx-nsct .hx-khoan > .hx-khoan-o,.hx-nsct .hx-khoan .hx-i{flex:none}
.hx-nsct .hx-khoan > .hx-khoan-ten{flex:1}
.hx-nsct .vt-tu-dong > .nut{flex:none}
.hx-nsct .hx-nsct-dau > .hang{position:absolute!important;top:18px;right:18px}
.hx-nsct .hx-nsct-dau .l{padding-right:110px}
.hx-nsct .hx-nsct-dau .n{font-size:28px!important}
.hx-nsct .hx-nsct-hh h3{color:var(--chu)}
.hx-nsct .hx-than .mono{font-family:inherit;font-weight:700}
.hx-nsct .vt-qc-luong b{font-size:28px;font-weight:800;letter-spacing:-.02em}
.hx-nsct-lich-lam .hang > label{flex:1 1 160px;min-width:0}
.hx-nsct-lich-lam .hang > label > input,.hx-nsct-lich-lam .hang > label > select,.hx-nsct-lich-lam .hang > label > textarea{width:100%}
.hx-nsct-lich-lam .hang > .nut{flex:1 1 100%}
.hx-nsct-nghi-phep .vt-hang-ngay label,.hx-nsct-nghi-phep .hang > label{flex:1 1 150px;min-width:0}
.hx-nsct-nghi-phep label > select,.hx-nsct-nghi-phep label > input,.hx-nsct-nghi-phep label > textarea{width:100%}

/* ---------- 11. KPI CHU KỲ — số tuần (ngôn ngữ Stitch 5) ---------- */
.hx-cham-xanh{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.hx-kpi > .dau h2 .hx-nhan{font-size:12px;letter-spacing:0}
.hx-kpi .dai-so{grid-template-columns:repeat(4,minmax(0,1fr))}
.hx-kpi .hru2-dai-canh{margin:0;padding:16px;gap:8px;display:flex;flex-direction:column}
.hx-kpi-doi{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
.hx-kpi .hru2-khoi{margin:0;border:0;box-shadow:none;border-radius:24px;padding:20px 22px;gap:14px}
.hx-kpi .hru2-khoi-ten{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.hx-kpi .hru2-khoi-mo{color:var(--chu3);display:inline-flex;cursor:help}
.hx-kpi .hru2-khoi > .bang{margin:0 -22px -20px}
.hx-kpi .hru2-bang td:nth-child(n+2),.hx-kpi .hru2-bang th:nth-child(n+2){text-align:right}
.hx-kpi .hru2-bang .mono{font-family:inherit;font-weight:700}
.hx-ti-le{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;min-width:120px}
.hx-ti-le-nen{width:64px;height:6px;border-radius:99px;background:var(--hx-mem);overflow:hidden;display:inline-block}
.hx-ti-le-nen span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg, color-mix(in srgb, var(--nhan) 60%, var(--the)), var(--nhan))}
.hx-kpi-o3{display:grid;grid-template-columns:1fr;gap:10px}
.hx-kpi-o{background:var(--hx-mem2);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px}
.hx-kpi-o small{font-size:13.5px;font-weight:600;color:var(--chu2)}
.hx-kpi-o b{grid-row:1 / span 2;grid-column:2;font-size:28px;font-weight:800;letter-spacing:-.02em}
.hx-kpi-o span{font-size:12px;color:var(--chu3)}
.hx-kpi-o.canh{background:var(--hx-canh-nen)}
.hx-kpi-o.canh b{color:var(--canh)}
.hx-kpi-o.tot b{color:var(--tot)}
.hx-kpi .hx-kpi-ky > summary{list-style:none;cursor:pointer}
.hx-kpi .hx-kpi-ky > summary::-webkit-details-marker{display:none}
.hx-kpi .hx-kpi-ky .hx-mui{margin-left:auto;color:var(--chu3);transition:transform .2s}
.hx-kpi .hx-kpi-ky[open] .hx-mui{transform:rotate(90deg)}
@media (max-width:1100px){.hx-kpi .dai-so{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-kpi-doi{grid-template-columns:1fr}}
@media (max-width:760px){
  .hx-kpi > .dau .hx-thang{flex:1;justify-content:space-between}
  .hx-kpi .hru2-khoi{padding:16px;border-radius:20px}
  .hx-kpi .hru2-khoi > .bang{margin:0 -16px -16px}
  .hx-kpi-o b{font-size:20px}
}
.hx summary h3,.hx summary b{color:var(--chu)}
@media (max-width:760px){
  /* dòng hoa hồng: mỗi dòng một hàng gọn — dịch vụ đậm, ngày · mã khách nhỏ, tiền bên phải */
  .hx-nsct-hh thead{display:none}
  .hx-nsct-hh table,.hx-nsct-hh tbody{display:block;width:100%;min-width:0!important}
  .hx-nsct-hh tr{display:grid;grid-template-columns:auto auto 1fr auto;gap:2px 8px;padding:12px 16px;align-items:baseline}
  .hx-nsct-hh td{display:block;padding:0!important;background:transparent!important;min-width:0!important;border:0!important}
  .hx-nsct-hh td:nth-child(3){grid-column:1 / 4;grid-row:1;font-weight:700;color:var(--chu)}
  .hx-nsct-hh td:nth-child(5){grid-column:4;grid-row:1 / span 2;align-self:center;text-align:right}
  .hx-nsct-hh td:nth-child(1),.hx-nsct-hh td:nth-child(2),.hx-nsct-hh td:nth-child(4){grid-row:2;font-size:12px;color:var(--chu3);font-weight:500!important}
  .hx-nsct-hh tbody tr:nth-child(even){background:color-mix(in srgb, var(--chu) 2.5%, var(--the))}
}
.hx-nsct{margin-inline:auto;width:100%}
.lop.hx-keo .hru-thuc-linh{flex-direction:row!important;align-items:center!important}

/* ===== KPI — BẢNG ĐIỂM & XÉT THƯỞNG (Fable 24/09/2026 · Stitch hrm/5–6) ===== */
.kpd{display:flex;flex-direction:column;gap:14px}
.kpd-tu-dong{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tot);background:color-mix(in srgb,var(--tot) 12%,transparent);border-radius:999px;padding:3px 10px;vertical-align:middle}
.kpd-tu-dong::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tot)}
.kpd-tab{margin:0}
.kpd-so-hang{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpd-so{border-radius:20px;padding:14px 16px;background:var(--the);display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 2px rgba(30,20,70,.04)}
.kpd-so-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--chu2)}
.kpd-so-dau span{display:inline-flex;align-items:center;gap:6px}
.kpd-so b{font-size:28px;letter-spacing:-.02em}
.kpd-so small{font-size:12px;color:var(--chu3)}
.kpd-cham{width:9px;height:9px;border-radius:50%;display:inline-block}
.kpd-cham.xanh{background:var(--tot)}.kpd-cham.vang{background:var(--canh)}.kpd-cham.do{background:var(--loi)}
.kpd-so.tim{background:linear-gradient(145deg,var(--nhan-nhat),var(--the))}
.kpd-so.xanh b{color:var(--tot)}.kpd-so.vang b{color:var(--canh)}
.kpd-so.vang{background:linear-gradient(145deg,color-mix(in srgb,var(--canh) 12%,var(--the)),var(--the))}
.kpd-so.do{background:linear-gradient(145deg,color-mix(in srgb,var(--loi) 12%,var(--the)),var(--the))}.kpd-so.do b{color:var(--loi)}
.kpd-loc-ngay{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--loi);cursor:pointer}
.kpd-h3{margin:4px 2px 0;font-size:16px}
.kpd-to-hang{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpd-to{border-radius:18px;padding:12px 14px;background:var(--the);display:flex;flex-direction:column;gap:6px}
.kpd-to.do{background:linear-gradient(145deg,color-mix(in srgb,var(--loi) 10%,var(--the)),var(--the))}
.kpd-to-dau{display:flex;justify-content:space-between;gap:6px;font-size:12.5px;color:var(--chu2)}
.kpd-to-dau span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpd-to-dau em{font-style:normal;font-size:11.5px;font-weight:600;background:var(--nen);border-radius:8px;padding:1px 7px;white-space:nowrap}
.kpd-to-so{display:flex;justify-content:space-between;align-items:baseline}
.kpd-to-so b{font-size:24px}.kpd-to.xanh .kpd-to-so b{color:var(--tot)}.kpd-to.vang .kpd-to-so b{color:var(--canh)}.kpd-to.do .kpd-to-so b{color:var(--loi)}
.kpd-to-so small{font-size:12px;color:var(--chu3)}
.kpd-thanh{height:5px;border-radius:5px;background:var(--nen);position:relative;overflow:hidden;display:block}
.kpd-thanh::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:5px;background:var(--tot)}
.kpd-to.vang .kpd-thanh::after{background:var(--canh)}.kpd-to.do .kpd-thanh::after{background:var(--loi)}
.kpd-bang{background:var(--the);border-radius:22px;padding:14px 16px;box-shadow:0 1px 2px rgba(30,20,70,.04)}
.kpd-cong-cu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kpd-tim input{border:0;background:var(--nen);border-radius:12px;padding:10px 14px;font:inherit;font-size:13.5px;min-width:260px;outline:none;color:var(--chu)}
.kpd-chip{display:flex;gap:6px;flex-wrap:wrap}
.kpd-chip button{border:0;border-radius:999px;background:var(--nen);padding:7px 13px;font:inherit;font-size:13px;color:var(--chu2);cursor:pointer;min-height:34px}
.kpd-chip button.chon{background:var(--chu);color:var(--the)}
.kpd-meo{margin-left:auto;font-size:12px;color:var(--nhan)}
.kpd-dau-bang,.kpd-dong{display:grid;grid-template-columns:minmax(200px,1.3fr) 90px minmax(300px,2.4fr) 80px 70px minmax(160px,1.2fr);gap:12px;align-items:center}
.kpd-dau-bang{padding:8px 10px;font-size:12px;color:var(--chu3);font-weight:600}
.kpd-dong{padding:10px;border-radius:16px;cursor:pointer}
.kpd-dong:hover{background:var(--nen)}
.kpd-dong.do{background:linear-gradient(90deg,color-mix(in srgb,var(--loi) 6%,var(--the)),var(--the))}
.kpd-dong.mo{background:var(--nhan-nhat)}
.kpd-nguoi{display:flex;align-items:center;gap:10px;min-width:0}
.kpd-nguoi>span:last-child{display:flex;flex-direction:column;min-width:0}
.kpd-nguoi b{font-size:13.5px}.kpd-nguoi small{font-size:12px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpd-mat{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;display:inline-flex}
.kpd-diem{display:flex;flex-direction:column;align-items:center;gap:2px}
.kpd-diem b{font-size:20px}.kpd-diem.xanh b{color:var(--tot)}.kpd-diem.vang b{color:var(--canh)}.kpd-diem.do b{color:var(--loi)}
.kpd-diem em{font-style:normal;font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:var(--nen);color:var(--chu2);white-space:nowrap}
.kpd-diem.xanh em{background:color-mix(in srgb,var(--tot) 12%,transparent);color:var(--tot)}
.kpd-diem.vang em{background:color-mix(in srgb,var(--canh) 14%,transparent);color:var(--canh)}
.kpd-diem.do em{background:color-mix(in srgb,var(--loi) 12%,transparent);color:var(--loi)}
.kpd-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kpd-cs-o{border-radius:12px;padding:6px 9px;background:var(--nen);display:flex;flex-direction:column;gap:1px;position:relative;min-width:0}
.kpd-cs-o::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--chu3)}
.kpd-cs-o.xanh::after{background:var(--tot)}.kpd-cs-o.vang::after{background:var(--canh)}.kpd-cs-o.do::after{background:var(--loi)}
.kpd-cs-o.do{background:color-mix(in srgb,var(--loi) 8%,var(--nen))}.kpd-cs-o.vang{background:color-mix(in srgb,var(--canh) 8%,var(--nen))}
.kpd-cs-o small{font-size:11px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}
.kpd-cs-o b{font-size:13px}.kpd-cs-o b i{font-style:normal;font-weight:400;color:var(--chu3);font-size:11.5px}
.kpd-du{display:flex;flex-direction:column;align-items:center}.kpd-du b{font-size:16px}.kpd-du small{font-size:11px;color:var(--chu3)}
.kpd-hang-to{text-align:center;font-size:14px;font-weight:600;color:var(--chu2)}
.kpd-goi-y{font-size:12.5px;line-height:1.4;color:var(--chu2);border-radius:12px;padding:7px 10px;background:var(--nen)}
.kpd-goi-y.do{background:color-mix(in srgb,var(--canh) 14%,var(--the));color:var(--chu);font-weight:600}
.kpd-goi-y.xanh{background:color-mix(in srgb,var(--tot) 10%,var(--the))}
.kpd-cong-thuc{margin:2px 10px 10px 56px;border-radius:14px;padding:10px 14px;background:linear-gradient(90deg,var(--nhan-nhat),var(--the));font-size:13px}
.kpd-cong-thuc p{margin:4px 0}.kpd-cong-thuc small{color:var(--chu3)}
.kpd-xet{display:grid;grid-template-columns:minmax(200px,1.2fr) 60px minmax(240px,2.5fr) 60px 120px;gap:14px;align-items:center;padding:10px;border-radius:16px}
.kpd-xet:hover{background:var(--nen)}
.kpd-hang-to-lon{font-size:18px;font-weight:700;border-radius:12px;padding:4px 0;text-align:center;background:var(--nen)}
.kpd-hang-to-lon.hA{background:color-mix(in srgb,var(--tot) 14%,transparent);color:var(--tot)}
.kpd-hang-to-lon.hB{background:var(--nhan-nhat);color:var(--nhan)}
.kpd-hang-to-lon.hC,.kpd-hang-to-lon.hD{background:color-mix(in srgb,var(--canh) 16%,transparent);color:var(--canh)}
.kpd-xet-chu p{margin:0;font-size:13.5px}.kpd-xet-chu small{font-size:12px;color:var(--chu3)}
.kpd-dinh-tinh{font-size:13px;font-weight:600;color:var(--chu2);text-align:center}
.kpd-ky{font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;text-align:center;background:color-mix(in srgb,var(--canh) 14%,transparent);color:var(--canh)}
.kpd-ky.tot{background:color-mix(in srgb,var(--tot) 12%,transparent);color:var(--tot)}
@media (max-width:1100px){.kpd-so-hang{grid-template-columns:1fr 1fr}.kpd-dau-bang{display:none}
  .kpd-dong{grid-template-columns:1fr auto;grid-template-areas:"n d" "c c" "g g"}
  .kpd-dong .kpd-nguoi{grid-area:n}.kpd-dong .kpd-diem{grid-area:d}.kpd-dong .kpd-cs{grid-area:c}.kpd-dong .kpd-goi-y{grid-area:g}
  .kpd-dong .kpd-du,.kpd-dong .kpd-hang-to{display:none}
  .kpd-xet{grid-template-columns:1fr auto;grid-template-areas:"n h" "c c" "d k"}.kpd-xet .kpd-nguoi{grid-area:n}.kpd-xet .kpd-hang-to-lon{grid-area:h;padding:4px 12px}
  .kpd-xet .kpd-xet-chu{grid-area:c}.kpd-xet .kpd-dinh-tinh{grid-area:d;text-align:left}.kpd-xet .kpd-ky{grid-area:k}
  .kpd-cong-thuc{margin-left:10px}.kpd-tim input{min-width:0;width:100%}.kpd-tim{flex:1 1 100%}.kpd-meo{display:none}}
@media (max-width:560px){.kpd-cs{grid-template-columns:1fr}.kpd-so b{font-size:22px}}

/* ===== QC-2 (26/09/2026): đề xuất lương · tham số pháp lý · đối chiếu BHXH/thuế — tiền tố bl2- ===== */
.bl2-vung{display:flex;flex-direction:column;gap:12px}
.bl2-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.bl2-the{background:var(--the);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.bl2-the.cho{background:linear-gradient(var(--canh-nhat),var(--canh-nhat)) top/100% 4px no-repeat,var(--the)}
.bl2-the-dau{display:flex;align-items:center;gap:10px;min-width:0}
.bl2-the-dau > div{flex:1;min-width:0;display:flex;flex-direction:column}
.bl2-the-dau b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl2-the-dau small{color:var(--chu3);font-size:12px}
.bl2-mat{flex:none}
.bl2-so{display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:var(--chim);border-radius:10px;padding:8px 10px;font-variant-numeric:tabular-nums}
.bl2-so > span:first-child{color:var(--chu3)}
.bl2-so b{font-size:16px;color:var(--chu)}
.bl2-so .chu3{margin-left:auto}
.bl2-pc{display:flex;flex-wrap:wrap;gap:6px}
.bl2-ly-do{margin:0;color:var(--chu2);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bl2-nut{gap:8px;flex-wrap:wrap;align-items:center}
.bl2-ts{background:var(--the);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.bl2-ts-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bl2-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.bl2-dong{background:var(--chim);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bl2-dong span{font-size:12px;color:var(--chu3)}
.bl2-dong b{font-variant-numeric:tabular-nums}
.bl2-dong small{font-size:11.5px;color:var(--chu3);overflow-wrap:anywhere}
.bl2-bieu{background:var(--the);border-radius:12px;padding:10px 14px}
.bl2-bieu summary{cursor:pointer;font-weight:600;font-size:13.5px}
.bl2-bieu ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}
.bl2-bieu li .nut{margin-left:8px}
.bl2-ghi{margin:6px 0 0;font-size:12px}
.bl2-dc{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bl2-dc .bl2-luoi{margin-top:8px}
.bl2-canh{display:flex;gap:8px;align-items:flex-start;background:var(--canh-nhat);color:var(--canh);border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.45}
.bl2-hop{display:flex;flex-direction:column;gap:10px;min-width:min(460px,100%)}
.bl2-hop > label,.bl2-hop > .bl2-o{display:flex;flex-direction:column;gap:4px}
.bl2-hop > label > span,.bl2-hop > .bl2-o > span{font-size:12.5px;color:var(--chu3);font-weight:600}
.bl2-hop h5{margin:8px 0 0;font-size:13px;color:var(--chu2)}
.bl2-hop [hidden]{display:none}
.bl2-chon{display:flex;flex-wrap:wrap;gap:6px}
.bl2-chon button{border:0;border-radius:999px;background:var(--chim);font-size:13px;padding:7px 12px;cursor:pointer;color:var(--chu2)}
.bl2-chon button.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.bl2-pc-sua,.bl2-bieu-sua{display:flex;flex-direction:column;gap:6px}
.bl2-pc-sua .hang,.bl2-bieu-sua .hang{gap:6px;flex-wrap:nowrap;align-items:center}
.bl2-pc-sua input[type=text]{flex:2;min-width:0}
.bl2-pc-sua input[type=number],.bl2-bieu-sua input{flex:1;min-width:0}
.bl2-pc-sua select{flex:none;width:auto}
.bl2-pc-sua > .nut{align-self:flex-start}
@media (max-width:600px){.bl2-ds,.bl2-luoi{grid-template-columns:1fr}}
.bl2-cot2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bl2-cot2 > label{display:flex;flex-direction:column;gap:4px;min-width:0}
.bl2-cot2 > label > span{font-size:12.5px;color:var(--chu3);font-weight:600}
@media (max-width:520px){.bl2-cot2{grid-template-columns:1fr}}
.bl2-hop > label.bl2-tick{flex-direction:row;align-items:flex-start;gap:10px;background:var(--chim);border-radius:10px;padding:10px 12px;cursor:pointer}
.bl2-tick input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--nhan)}
.bl2-tick > span{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.bl2-tick small{color:var(--chu3);font-size:12px;font-weight:400}
.bl2-tom{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;cursor:pointer}
.bl2-tom small{font-weight:400;font-size:12px}