/* Trang Ghi nhanh trên điện thoại (s328; s339 thiết kế lại: hệ màu CÓ NGHĨA). Một tệp CSS riêng — không kéo cả bảng điều khiển về máy thợ.
   MÀU CÓ NGHĨA (định nghĩa MỘT chỗ ở :root, mọi chỗ khác chỉ dùng biến):
     xanh rêu = thương hiệu · khung · nút chính · Duyệt     CHI = đỏ son          THU = xanh lá
     tạm ứng / chờ duyệt = vàng hổ phách                   lương = lam            sổ riêng = tím (tiền cá nhân, tách bạch)
     việc cần làm / cảnh báo = cam
   Mỗi nghĩa có: chữ (--x), nền nhạt (--x-nhat), nền đặc cho nút (--x-dac, chữ trắng). Chữ thường đạt WCAG AA (≥ 4.5:1).
   Ô nhập 16px (iPhone không tự phóng to). */
:root {
  --bg: #f3f5f3; --mat: #ffffff; --mat2: #edf1ee; --chu: #14181a; --chu2: #46505a; --chu3: #5b666d;
  --vien: #d5dcd8; --vien2: #a9b4ae; --khung: #1c4a3a; --focus: rgba(28,74,58,.24);
  --ac: #1c4a3a; --ac-hi: #2a6b54; --ac-nhat: #e1efe8; --ac-chu: #ffffff;
  --chi: #b3261e; --chi-nhat: #fdeceb; --chi-dac: #b3261e;
  --thu: #0f6e39; --thu-nhat: #e3f5ea; --thu-dac: #11793f;
  --tu: #8f5200; --tu-nhat: #fff1d6; --tu-dac: #a65f00;
  --luong: #1b55c4; --luong-nhat: #e4edff; --luong-dac: #1b55c4;
  --rieng: #6a35c9; --rieng-nhat: #f0e9fd; --rieng-dac: #6a35c9;
  --canh: #a8380a; --canh-nhat: #ffeadb;
  --do: var(--chi); --do-nhat: var(--chi-nhat); --cam: var(--tu); --cam-nhat: var(--tu-nhat); --xanh: var(--thu); --xanh-nhat: var(--thu-nhat);
  --bong: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --font: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1112; --mat: #161b1d; --mat2: #1f2629; --chu: #eef1f1; --chu2: #b6bfc3; --chu3: #98a3a8;
    --vien: #2b3236; --vien2: #4a565e; --khung: #12302a; --focus: rgba(111,182,156,.38);
    --ac: #6fb69c; --ac-hi: #8acab2; --ac-nhat: #17302a; --ac-chu: #0d1112;
    --chi: #ff9b93; --chi-nhat: #3a1a19; --chi-dac: #c23a31;
    --thu: #7be0a3; --thu-nhat: #123023; --thu-dac: #1b8f4d;
    --tu: #f2c166; --tu-nhat: #35280d; --tu-dac: #b36a00;
    --luong: #9bbcff; --luong-nhat: #15264a; --luong-dac: #3b6fd8;
    --rieng: #c9b0ff; --rieng-nhat: #2a1f47; --rieng-dac: #7d4fdb;
    --canh: #ffa56b; --canh-nhat: #3a2112;
    --bong: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1112; --mat: #161b1d; --mat2: #1f2629; --chu: #eef1f1; --chu2: #b6bfc3; --chu3: #98a3a8;
  --vien: #2b3236; --vien2: #4a565e; --khung: #12302a; --focus: rgba(111,182,156,.38);
  --ac: #6fb69c; --ac-hi: #8acab2; --ac-nhat: #17302a; --ac-chu: #0d1112;
  --chi: #ff9b93; --chi-nhat: #3a1a19; --chi-dac: #c23a31;
  --thu: #7be0a3; --thu-nhat: #123023; --thu-dac: #1b8f4d;
  --tu: #f2c166; --tu-nhat: #35280d; --tu-dac: #b36a00;
  --luong: #9bbcff; --luong-nhat: #15264a; --luong-dac: #3b6fd8;
  --rieng: #c9b0ff; --rieng-nhat: #2a1f47; --rieng-dac: #7d4fdb;
  --canh: #ffa56b; --canh-nhat: #3a2112;
  --bong: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-400-viet.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-700-viet.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('fonts/barlow-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--chu); font-family: var(--font); font-size: 16px; line-height: 1.4;
  overscroll-behavior-y: none; }
body { min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }
button { cursor: pointer; }
.so { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ khung */
.dau { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px;
  background: var(--bg); border-bottom: 1px solid var(--vien); }
.dau h1 { margin: 0; font-size: 19px; font-weight: 600; flex: 1; letter-spacing: .01em; }
.dau .ten-nguoi { font-size: 13px; color: var(--chu2); text-align: right; line-height: 1.2; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ac); color: var(--ac-chu); display: grid;
  place-items: center; font-weight: 700; flex: none; }
.than { padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }

/* thanh dưới + nút ＋ giữa */
.thanh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--mat); border-top: 1px solid var(--vien); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.thanh button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11.5px; color: var(--chu3); padding: 4px 0; position: relative; min-height: 48px; }
.thanh button svg { width: 24px; height: 24px; }
.thanh button.chon { color: var(--ac); font-weight: 600; }
.thanh .cong { margin-top: -22px; }
.thanh .cong span.tron { width: 56px; height: 56px; border-radius: 50%; background: var(--ac); color: var(--ac-chu);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(28,74,58,.35); }
.thanh .cong svg { width: 28px; height: 28px; }
.huy-hieu { position: absolute; top: 0; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--do); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ------------------------------------------------ thẻ */
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px;
  box-shadow: var(--bong); }
.the h2 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--chu2); text-transform: uppercase; letter-spacing: .05em; }
.the .lon { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.the .phu { font-size: 13.5px; color: var(--chu2); margin-top: 2px; }
.hai { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hai .the { margin: 0; }
.hai .the .lon { font-size: 24px; white-space: nowrap; }
.nut-lon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
/* s331: CHI / THU thấp + gọn hơn */
.nut-lon button { border: 0; border-radius: 12px; padding: 10px 10px; font-size: 17px; font-weight: 700; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; }
.nut-lon .chi { background: var(--ac); color: var(--ac-chu); }
.nut-lon .thu { background: var(--mat); color: var(--ac); border: 2px solid var(--ac); }
.nut-lon .quet-nut { grid-column: 1 / -1; background: var(--mat2); color: var(--chu); font-size: 15.5px; letter-spacing: 0; font-weight: 600;
  border: 1px solid var(--vien); min-height: 44px; }
.nut-lon svg { width: 20px; height: 20px; }
/* Việc cần làm trống: một dòng */
.viec-trong { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--chu2); padding: 2px 4px 12px; }
.cham-xanh { width: 9px; height: 9px; border-radius: 50%; background: var(--xanh); flex: none; }
.the-gon { padding: 10px 14px; }
/* Chấm công hôm nay — đầy đủ trong một khối (s331) */
.cc .cc-tt { font-weight: 600; color: var(--cam); }
.cc .cc-tt.xong { color: var(--xanh); }
.cc-hang { display: grid; gap: 8px; }
.cc-hang.ba { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.cc-hang.hai-o { grid-template-columns: 1fr 1fr; flex: 1; max-width: 230px; }
.cc-hang button { border: 1px solid var(--vien); background: var(--mat); border-radius: 10px; padding: 8px 6px; font-size: 15px;
  min-height: 44px; }
.cc-hang button.chon { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); font-weight: 600; }
.cc-dong { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cc-dong > span { font-size: 14px; color: var(--chu2); flex: none; min-width: 64px; }
.cc-buoc { display: flex; align-items: center; gap: 10px; }
.cc-buoc button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vien); background: var(--mat); font-size: 22px;
  line-height: 1; }
.cc-buoc button:disabled { opacity: .4; }
.cc-buoc b { min-width: 64px; text-align: center; font-size: 16px; }
.cc-ct { margin-top: 10px; }
.viec { list-style: none; margin: 0; padding: 0; }
.viec li { padding: 10px 0; border-top: 1px solid var(--vien); display: flex; gap: 10px; align-items: center; font-size: 15px; }
.viec li:first-child { border-top: 0; }
.viec .cham { width: 9px; height: 9px; border-radius: 50%; background: var(--cam); flex: none; }
.viec .cham.do { background: var(--do); }
.mau { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.mau button { flex: none; border: 1px solid var(--vien); background: var(--mat); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; }

/* ------------------------------------------------ nút, ô */
.nut { border: 0; border-radius: 12px; background: var(--ac); color: var(--ac-chu); padding: 13px 18px; font-weight: 600; font-size: 16px;
  min-height: 48px; }
.nut.phu { background: var(--mat2); color: var(--chu); border: 1px solid var(--vien); }
.nut.do { background: var(--do-nhat); color: var(--do); border: 1px solid transparent; }
.nut.rong { width: 100%; }
.nut:disabled { opacity: .55; }
.nut svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
.hang-nut { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hang-nut .nut { flex: 1; min-width: 120px; }
.o { width: 100%; border: 1px solid var(--vien); border-radius: 12px; background: var(--mat); padding: 12px 14px; min-height: 48px; }
.o:focus { outline: 2px solid var(--ac); outline-offset: 0; border-color: transparent; }
label.nhan { display: block; font-size: 13px; font-weight: 600; color: var(--chu2); margin: 14px 0 6px; }
.loi { background: var(--do-nhat); color: var(--do); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; margin: 10px 0; }
.goi-y { font-size: 13.5px; color: var(--chu2); margin: 6px 0 0; }

/* ------------------------------------------------ form ghi */
.tien-o { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--ac); padding: 2px 2px 6px; }
.tien-o input { flex: 1; min-width: 0; border: 0; background: none; font-size: 36px; font-weight: 700; padding: 0; outline: 0;
  font-variant-numeric: tabular-nums; }
.tien-o span { font-size: 22px; color: var(--chu2); font-weight: 600; }
/* Ô tìm nhanh công trình (s331) — một ô gõ, danh sách khớp ngay dưới */
.tim-ct { position: relative; }
.tim-ct-ds { margin-top: 6px; border: 1px solid var(--vien); border-radius: 12px; background: var(--mat); overflow: hidden;
  max-height: 300px; overflow-y: auto; }
.tim-ct-ds button { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--vien); background: none;
  padding: 10px 14px; font-size: 15px; min-height: 44px; }
.tim-ct-ds button:first-child { border-top: 0; }
.tim-ct-ds button small { display: block; color: var(--chu3); font-size: 12.5px; }
.tim-ct-ds button.chon { background: var(--ac-nhat); }
.tim-ct-nhan { font-size: 12px; color: var(--chu3); padding: 6px 14px 2px; border-top: 1px solid var(--vien); }
.tien-nhanh { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tien-nhanh button { border: 1px solid var(--vien); background: var(--mat); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1px solid var(--vien); background: var(--mat); border-radius: 999px; padding: 10px 14px; font-size: 15px;
  max-width: 100%; text-align: left; min-height: 44px; }
.chips button small { color: var(--chu3); font-size: 12px; margin-left: 4px; }
.chips button.chon, .luoi button.chon { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); }
.chips button.chon small { color: inherit; opacity: .8; }
.luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.luoi button { border: 1px solid var(--vien); background: var(--mat); border-radius: 12px; padding: 12px 10px; font-size: 14.5px;
  text-align: left; min-height: 56px; line-height: 1.25; }
.luoi button em { display: block; font-style: normal; font-size: 11.5px; opacity: .75; margin-top: 3px; }
.anh-hang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.anh-hang img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--vien); }
/* s413: nút ✕ xoá ảnh — nhìn nhỏ (22px) ở góc, vùng chạm 40px */
.anh-hang:has(.anh-xoa) { gap: 14px; padding-top: 6px; }
.anh-o { position: relative; display: inline-block; line-height: 0; }
.anh-o > a { display: block; }
.anh-xoa { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; padding: 0; margin: 0; border: 0;
  background: transparent; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.anh-xoa span { width: 22px; height: 22px; border-radius: 50%; background: var(--do); color: #fff; font-size: 12px;
  font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.anh-xoa:disabled span { opacity: .5; }
.anh-xoa:focus-visible span { outline: 2px solid var(--do); outline-offset: 2px; }

/* ------------------------------------------------ tấm trượt (sheet) */
.man-che { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; }
.tam { width: 100%; max-height: 94vh; max-height: 94dvh; overflow-y: auto; background: var(--bg); border-radius: 18px 18px 0 0;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.tam-dau { position: sticky; top: 0; z-index: 2; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; }
.tam-dau h2 { margin: 0; font-size: 19px; flex: 1; white-space: nowrap; }
.tam-dau .ngay-dau { width: auto; flex: 0 1 150px; min-width: 0; min-height: 40px; padding: 6px 10px; font-size: 16px; }
.dong-x { border: 0; background: var(--mat2); width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; }
.tam-cuoi { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); background: var(--bg); padding: 12px 0 calc(20px + env(safe-area-inset-bottom)); margin-top: 14px; display: flex; gap: 8px; }
.tam-cuoi .nut { flex: 1; }
.chon-lon { display: grid; gap: 10px; margin: 6px 0 16px; }
.chon-lon button { display: flex; align-items: center; gap: 14px; border: 1px solid var(--vien); background: var(--mat); border-radius: 14px;
  padding: 16px; font-size: 17px; font-weight: 600; text-align: left; min-height: 64px; }
.chon-lon button small { display: block; font-weight: 400; font-size: 13px; color: var(--chu2); }
.chon-lon .bieu { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ac-nhat); color: var(--ac); flex: none; }
.chon-lon .bieu svg { width: 24px; height: 24px; }

/* ------------------------------------------------ danh sách phiếu */
#so-tim { margin: 0 0 8px; }
.loc { display: flex; gap: 8px; margin: 0 0 8px; }
.loc select, .loc input { flex: 1; min-width: 0; }
/* s331: 5 chip chia đều bề ngang — vừa 390px, không cuộn ngang; số đếm là chấm nhỏ trên góc */
.loc-tt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; }
.loc-tt button { position: relative; border: 1px solid var(--vien); background: var(--mat); border-radius: 999px; padding: 7px 2px;
  font-size: 12.5px; white-space: nowrap; min-height: 36px; }
.loc-tt button i { position: absolute; top: -7px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--ac); color: var(--ac-chu); font-style: normal; font-size: 11px; font-weight: 700; line-height: 17px; }
.loc-tt button[data-tt="tra_lai"] i { background: var(--do); color: #fff; }
.loc-tt button.chon { background: var(--chu); color: var(--bg); border-color: var(--chu); }
.ds { list-style: none; margin: 0; padding: 0; }
.ds li { background: var(--mat); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; }
.ds li > button { all: unset; display: block; width: 100%; cursor: pointer; }
.hang1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hang1 b { font-size: 15.5px; }
.tien-chi { color: var(--do); font-weight: 700; white-space: nowrap; }
.tien-thu { color: var(--xanh); font-weight: 700; white-space: nowrap; }
.hang2 { font-size: 13px; color: var(--chu2); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tt { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tt.cho_duyet { background: var(--cam-nhat); color: var(--cam); }
.tt.da_duyet { background: var(--xanh-nhat); color: var(--xanh); }
.tt.tra_lai { background: var(--do-nhat); color: var(--do); }
.tt.huy { background: var(--mat2); color: var(--chu3); }
.tt.da_chi { background: var(--ac); color: var(--ac-chu); }
/* Hộp duyệt — đổi tài khoản (s331): cũ → mới */
.doi-tk { margin-top: 8px; display: grid; gap: 6px; font-size: 14.5px; }
.doi-tk small { display: block; font-size: 12px; color: var(--chu3); }
.doi-tk i { color: var(--chu3); }
/* Cài đặt — tài khoản nhận tiền */
.tk-hien { display: grid; gap: 2px; font-size: 16px; }
.tk-hien .so { font-size: 19px; font-weight: 700; letter-spacing: .03em; }
.tk-hien small { color: var(--chu2); font-size: 13.5px; }
.tk-cho { margin-top: 10px; font-size: 14px; }
.loi-nhan { margin-top: 8px; background: var(--do-nhat); color: var(--do); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.trong { text-align: center; color: var(--chu2); padding: 30px 10px; font-size: 15px; }
.nhom-h { font-size: 13px; color: var(--chu2); font-weight: 600; margin: 16px 0 8px; display: flex; justify-content: space-between; }

/* chi tiết */
.ct-dong { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--vien); font-size: 15px; }
.ct-dong span:first-child { color: var(--chu2); }
.ct-dong span:last-child { text-align: right; }
.ct-dong span.so { white-space: nowrap; }          /* s330: số tiền không gãy dòng khi chữ bên trái dài */

/* thanh toán QR */
.tt-qr { display: block; width: min(300px, 82vw); height: auto; margin: 6px auto 10px; border-radius: 12px; border: 1px solid var(--vien); background: #fff; }
.tt-nd { text-align: center; font-size: 14px; color: var(--chu2); }
.tt-nd code { display: inline-block; margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--chu); background: var(--mat2);
  padding: 4px 10px; border-radius: 8px; letter-spacing: .03em; }
.nguoi-nhan { background: var(--mat); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; margin: 4px 0 6px; }

/* camera quét */
.quet { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; }
.quet video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.quet .khung { position: absolute; left: 50%; top: 42%; width: min(70vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.quet .duoi { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 10px; background: #000; color: #fff; }
.quet .duoi p { margin: 0; text-align: center; font-size: 15px; }
.quet .duoi .hai { gap: 10px; }

/* màn đăng nhập / khoá */
.dn { max-width: 420px; margin: 0 auto; padding: 48px 20px 30px; }
.dn .logo { width: 64px; height: 64px; border-radius: 18px; font-size: 30px; margin: 0 auto 14px; }
.dn h1 { text-align: center; font-size: 23px; margin: 0 0 4px; }
.dn p.phu { text-align: center; color: var(--chu2); margin: 0 0 18px; font-size: 15px; }
.chon-o { display: flex; gap: 10px; align-items: center; margin: 14px 0; font-size: 15px; }
.chon-o input { width: 22px; height: 22px; accent-color: var(--ac); }
/* s371: nút Google + dòng chia "hoặc dùng mật khẩu" ở màn đăng nhập */
.dn .nut.phu.rong.dn-gg { margin: 4px 0 0; min-height: 40px; font-size: 15px; }      /* cao bằng nút Đăng nhập */
.dn-hoac { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--chu2); font-size: 13px; }
.dn-hoac::before, .dn-hoac::after { content: ""; flex: 1; border-top: 1px solid var(--vien); }

/* báo ngắn ở TRÊN (dưới thanh tiêu đề) — không che nút Ghi / Duyệt ở đáy màn */
#bao { position: fixed; left: 12px; right: 12px; top: calc(62px + env(safe-area-inset-top)); z-index: 50; display: grid; gap: 8px;
  pointer-events: none; }
#bao div { background: var(--chu); color: var(--bg); padding: 12px 8px 12px 14px; border-radius: 12px; font-size: 15px; box-shadow: var(--bong);
  display: flex; align-items: flex-start; gap: 8px; pointer-events: auto; }
#bao div.loi-bao { background: var(--do); color: #fff; }
#bao .bao-chu { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
#bao .bao-x { flex: none; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; width: 44px; height: 44px;
  margin: -12px -8px -12px 0; border-radius: 12px; opacity: .85; }
/* s399: hộp hỏi / nhập của app (thay confirm / prompt) */
dialog.hop-hoi { width: min(92vw, 420px); border: 1px solid var(--vien); border-radius: 16px; background: var(--mat); color: var(--chu);
  padding: 18px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); font-family: var(--font); }
dialog.hop-hoi::backdrop { background: rgba(0,0,0,.45); }
.hop-chu { margin: 0 0 14px; font-size: 16px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.hop-nut { display: flex; gap: 10px; margin-top: 14px; }
dialog.hop-hoi .hop-nut .nut { flex: 1; min-height: 48px; font-size: 16px; padding: 0 12px; }
dialog.hop-hoi .hop-nut .nut.nguy { background: var(--chi-dac); color: #fff; }

/* ------------------------------------------------ s332: quỹ của tôi · sổ riêng · chọn việc gọn · hồ sơ của tôi */
.quy-ds { list-style: none; margin: 6px 0 0; padding: 0; }
.quy-ds li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--vien); font-size: 14.5px; }
.quy-ds li span { color: var(--chu2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--mat2); border: 1px solid var(--vien); border-radius: 12px;
  padding: 3px; margin: 0 0 10px; }
.seg button { border: 0; background: none; border-radius: 9px; padding: 8px 6px; font-size: 15px; min-height: 40px; color: var(--chu2); }
.seg button.chon { background: var(--mat); color: var(--chu); font-weight: 700; box-shadow: var(--bong); }
.ba-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.ba-so > div { background: var(--mat); border: 1px solid var(--vien); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ba-so small { display: block; font-size: 12px; color: var(--chu3); }
.ba-so b { font-size: clamp(12.5px, 3.7vw, 15px); overflow-wrap: anywhere; display: block; line-height: 1.25; }   /* s332rv: không cắt số tiền */
.dong-tinh { opacity: .92; }
.chon-lon.chon-gon { grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.chon-lon.chon-gon button { padding: 10px 12px; font-size: 15px; min-height: 52px; line-height: 1.2; }
.chon-lon.chon-gon button small { display: none; }
.nhom-h svg { width: 16px; height: 16px; vertical-align: -3px; }
.hai-o-nhap { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; }
.the-nut { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
details.gap { background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; margin: 0 0 10px; padding: 0 16px; }
details.gap > summary { list-style: none; cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 16px; display: flex;
  justify-content: space-between; gap: 10px; align-items: baseline; }
details.gap > summary::-webkit-details-marker { display: none; }
details.gap > summary::after { content: "›"; color: var(--chu3); transform: rotate(90deg); transition: transform .15s; }
details.gap[open] > summary::after { transform: rotate(-90deg); }
details.gap > summary small { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--chu2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 55%; }
details.gap[open] { padding-bottom: 14px; }
details.gap .the { box-shadow: none; margin: 0; padding: 0; border: 0; }
.hs-dau { display: flex; gap: 14px; align-items: center; }
.hs-chan-dung { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--ac-nhat); color: var(--ac);
  display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.hs-anh-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hs-anh { border: 1px dashed var(--vien); background: var(--mat2); border-radius: 12px; padding: 8px; min-height: 96px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--chu2); }
.hs-anh img { width: 100%; height: 72px; object-fit: cover; border-radius: 8px; }
.hs-anh svg { width: 26px; height: 26px; }
.dong-tinh .hang1 span { white-space: nowrap; }
/* s337: quỹ = số trên sổ, không phải số dư ngân hàng */
.the h2 .nhan-so { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--chu2); }
.quy-chu { margin: 8px 0 0; font-size: 12.5px; }

/* ------------------------------------------------ s338: thanh chan 6 o, So rieng, Cong viec, Cai dat */
.thanh.sau { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 2px; padding-right: 2px; }
.thanh.sau button { font-size: 11px; letter-spacing: -.01em; white-space: nowrap; }
.thanh.sau button span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.thanh.sau .cong span.tron { width: 52px; height: 52px; }
.o-nho { padding: 6px 8px; font-size: 15px; min-height: 0; width: auto; }
.sr-tq { padding: 12px 14px; }
.sr-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sr-dau h2 { margin: 0; }
.sr-tq .ba-so { margin-bottom: 10px; }
.sr-dm { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-dm li { display: grid; grid-template-columns: 34% 1fr auto; align-items: center; gap: 8px; font-size: 13.5px; }
.sr-dm li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu2); }
.sr-dm li i { height: 8px; border-radius: 4px; background: var(--mat2); display: block; overflow: hidden; }
.sr-dm li i em { display: block; height: 100%; background: var(--do); opacity: .7; border-radius: 4px; }
.sr-dm li b { font-size: 13.5px; }
.sr-tk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--vien); font-size: 14px; }
.sr-tk span { color: var(--chu2); }
.sr-tk b { margin-left: auto; font-size: 17px; }
.sr-tk small { flex-basis: 100%; color: var(--chu3); font-size: 12.5px; }
.lien-ket { border: 0; background: none; color: var(--ac); font-weight: 600; padding: 4px 0; text-align: left; }
.sr-chon { flex-wrap: wrap; overflow: visible; }
.sr-chon button.chon, .mau button.chon { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); }
.seg-ben button svg { width: 16px; height: 16px; vertical-align: -3px; }
.the-nhac { border-color: var(--cam); background: var(--cam-nhat); }
.the-nhac h2 { color: var(--cam); }
.the-do { border-color: var(--do); background: var(--do-nhat); }
.the-do h2 { color: var(--do); }
.chu-do { color: var(--do); font-weight: 600; }
.nc-o { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--chu2); }
.nc-o select { flex: 1; min-width: 0; }
.cd-dm { margin-bottom: 12px; }
.cd-dm ul { list-style: none; margin: 6px 0; padding: 0; }
.cd-dm li { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--vien); font-size: 15px; }
.cd-dm li span { flex: 1; min-width: 0; }
.cd-dm li small { color: var(--chu3); font-size: 12px; }
.nut-nho { border: 1px solid var(--vien); background: var(--mat); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.nut-nho.do { color: var(--do); }
.cd-them { display: flex; gap: 6px; }
.cd-them input { flex: 1; min-width: 0; }

/* ================================================================== s339: thiết kế lại giao diện (chỉ trình bày)
   Thang khoảng cách 4 / 8 / 12 / 16 / 24. Ba bậc nút: chính (đặc, màu theo nghĩa) · phụ (viền) · nguy hiểm (chữ + viền đỏ). */
body { padding-top: 0; }
.so, .lon, .tien-chi, .tien-thu, .ba-so b, .quy-ds b, .hang1 > span, .tien-o input, .ct-dong .so { font-variant-numeric: tabular-nums; }

/* ---- khung đầu: nền xanh rêu, chữ trắng */
.dau { background: var(--khung); color: #fff; border-bottom: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.dau h1 { color: #fff; font-size: 20px; font-weight: 700; }
.dau .ten-nguoi { color: #e4f0ea; }
.dau .ten-nguoi small { color: #cfe3da; font-size: 12.5px; }
.dau .logo { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.than { padding-top: 16px; }

/* ---- thanh chân: biểu tượng + chữ, thẻ chọn có viên thuốc màu */
.thanh { box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding-top: 6px; }
.thanh button { gap: 2px; font-size: 11.5px; color: var(--chu2); }
.thanh button .bi { display: grid; place-items: center; width: min(54px, 100%); height: 30px; border-radius: 15px; transition: background .12s; }
.thanh button .bi svg { width: 22px; height: 22px; }
.thanh button .nh { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.thanh button.chon { color: var(--ac); font-weight: 700; }
.thanh button.chon .bi { background: var(--ac-nhat); box-shadow: inset 0 0 0 1.5px var(--ac); }
.thanh button.chon .bi svg { stroke-width: 2.4; }
.thanh .cong { margin-top: -26px; }
.thanh .cong span.tron { width: 58px; height: 58px; background: linear-gradient(145deg, var(--ac-hi), var(--ac)); border: 4px solid var(--mat);
  box-shadow: 0 6px 16px rgba(28,74,58,.4); }
.thanh .cong:active span.tron { transform: scale(.94); }
.thanh.sau .cong span.tron { width: 56px; height: 56px; }
.huy-hieu { top: -2px; right: calc(50% - 38px); border: 2px solid var(--mat); box-sizing: content-box; min-width: 16px; height: 16px; line-height: 16px; background: var(--chi-dac); color: #fff; }

/* ---- thẻ: khối điểm nhấn có nền màu nhạt + viền trái theo nghĩa */
.the h2 svg { width: 18px; height: 18px; flex: none; }
.the-quy, .the-tu, .the-luong, .the-rieng, .the-canh, .the-cc { border-left-width: 5px; }
.the-quy h2, .the-tu h2, .the-luong h2, .the-rieng h2, .the-canh h2, .the-cc h2 { display: flex; align-items: center; gap: 8px; }
.the-quy { background: var(--ac-nhat); border-color: var(--ac); }
.the-quy h2 { color: var(--ac); }
.the-quy .lon { font-size: 34px; color: var(--ac); }
.the-quy .quy-ds li { border-top-color: var(--vien2); }
.the-tu { background: var(--tu-nhat); border-color: var(--tu); }
.the-tu h2 { color: var(--tu); }
.the-tu .lon { color: var(--tu); }
.the-luong { background: var(--luong-nhat); border-color: var(--luong); }
.the-luong h2, .the-luong .lon { color: var(--luong); }
.the-rieng { background: var(--rieng-nhat); border-color: var(--rieng); }
.the-rieng h2 { color: var(--rieng); }
.the-canh { background: var(--canh-nhat); border-color: var(--canh); }
.the-canh h2 { color: var(--canh); }
.the-cc { border-color: var(--ac); }
.the-cc h2 { color: var(--ac); }
.the-gon h2 { margin-bottom: 4px; }
.hai .the { padding: 12px 14px; }
.hai .the .lon { font-size: 22px; }
.the-nut h2 { display: flex; align-items: center; gap: 8px; color: var(--ac); }
.the-nhac h2 { display: flex; align-items: center; gap: 8px; }

/* ---- nhóm: tiêu đề có biểu tượng + chip đếm */
.nhom-h { align-items: center; font-weight: 700; margin: 24px 0 8px; }
.nhom-h > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.nhom-h svg { width: 18px; height: 18px; vertical-align: 0; }
.nhom-h .dem { min-width: 24px; padding: 1px 8px; border-radius: 12px; background: var(--ac-nhat); color: var(--ac); text-align: center; }
.nhom-h.h-tu { color: var(--tu); }
.nhom-h.h-tu .dem { background: var(--tu-nhat); color: var(--tu); }
.nhom-h.h-duyet { color: var(--ac); }
.ngay-h { display: flex; align-items: center; gap: 12px; margin: 16px 4px 8px; font-size: 13px; font-weight: 700; color: var(--chu2); text-transform: uppercase; letter-spacing: .04em; }
.ngay-h::after { content: ""; flex: 1; height: 1px; background: var(--vien2); opacity: .6; }
.ngay-h:first-child { margin-top: 4px; }

/* ---- nút: chính / phụ / nguy hiểm */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.2); transition: transform .06s, filter .1s; }
.nut:active:not(:disabled) { transform: translateY(1px); box-shadow: none; filter: brightness(.92); }
.nut svg { margin: 0; vertical-align: 0; flex: none; }
.nut.phu { background: var(--mat); color: var(--ac); border: 2px solid var(--ac); box-shadow: none; }
.nut.do { background: var(--mat); color: var(--chi); border: 2px solid var(--chi); box-shadow: none; }
.nut.chi { background: var(--chi-dac); color: #fff; }
.nut.thu { background: var(--thu-dac); color: #fff; }
.nut.rieng { background: var(--rieng-dac); color: #fff; }
.nut:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; filter: grayscale(.4); }
.hang-nut .nut { min-height: 44px; }
.nut-nho { min-height: 36px; border-width: 1.5px; font-weight: 600; }
.nut-nho.do { border-color: var(--chi); color: var(--chi); }

/* CHI / THU lớn ở Tổng quan */
.nut-lon { gap: 12px; margin-bottom: 16px; }
.nut-lon button { min-height: 56px; font-size: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.nut-lon button:active { transform: translateY(2px); box-shadow: none; }
.nut-lon .chi { background: var(--chi-dac); color: #fff; }
.nut-lon .thu { background: var(--thu-dac); color: #fff; border: 0; }
.nut-lon svg { width: 24px; height: 24px; stroke-width: 2.6; }
.nut-lon .quet-nut { background: var(--mat); color: var(--ac); border: 2px solid var(--ac); box-shadow: none; min-height: 48px; font-weight: 700; }
.nut-lon .quet-nut svg { width: 22px; height: 22px; stroke-width: 2; }
.mau button { min-height: 44px; font-weight: 600; border-width: 1.5px; border-color: var(--vien2); }
.mau button::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--chu3); }
.mau button.m-chi::before { background: var(--chi-dac); }
.mau button.m-thu::before { background: var(--thu-dac); }
.mau button.m-chi { border-color: var(--chi); }
.mau button.m-thu { border-color: var(--thu); }
.viec-trong { color: var(--thu); font-weight: 600; }

/* chấm công */
.cc-hang button { border: 1.5px solid var(--vien2); font-weight: 600; }
.cc-hang button.chon { background: var(--thu-dac); border-color: var(--thu-dac); color: #fff; }
.cc-buoc button { border: 1.5px solid var(--ac); color: var(--ac); font-weight: 700; }
.cc .cc-tt { color: var(--tu); }
.cc .cc-tt.xong { color: var(--thu); }

/* ---- ô nhập */
.o { border: 1.5px solid var(--vien2); }
.o:focus { outline: 0; border-color: var(--ac); box-shadow: 0 0 0 4px var(--focus); }
label.nhan { color: var(--chu); margin: 16px 0 8px; }
.tien-o { border: 2px solid var(--vien2); border-radius: 14px; background: var(--mat); padding: 8px 16px; margin-top: 4px; }
.tien-o:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.tien-o.chi { border-color: var(--chi); background: var(--chi-nhat); }
.tien-o.chi input, .tien-o.chi span { color: var(--chi); }
.tien-o.thu { border-color: var(--thu); background: var(--thu-nhat); }
.tien-o.thu input, .tien-o.thu span { color: var(--thu); }
.tien-nhanh button { border: 1.5px solid var(--vien2); min-height: 40px; font-weight: 600; }
.chips button, .tim-ct-ds { border-color: var(--vien2); }
.tim-ct-ds button.chon { background: var(--ac-nhat); }

/* lưới khoản: thẻ có biểu tượng */
.luoi button { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--vien2); font-weight: 600; min-height: 60px; padding: 8px 10px; }
.luoi button > span { min-width: 0; }
.luoi .kic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--mat2); color: var(--chu3); }
.luoi .kic svg { width: 16px; height: 16px; }
.luoi.l-chi .kic { background: var(--chi-nhat); color: var(--chi); }
.luoi.l-thu .kic { background: var(--thu-nhat); color: var(--thu); }
.luoi.l-chi button.chon { background: var(--chi-nhat); color: var(--chu); border-color: var(--chi); box-shadow: inset 0 0 0 1px var(--chi); }
.luoi.l-chi button.chon .kic { background: var(--chi-dac); color: #fff; }
.luoi.l-thu button.chon { background: var(--thu-nhat); color: var(--chu); border-color: var(--thu); box-shadow: inset 0 0 0 1px var(--thu); }
.luoi.l-thu button.chon .kic { background: var(--thu-dac); color: #fff; }
.luoi button em { opacity: 1; color: var(--chu3); }
.chips button.chon, .sr-chon button.chon, .mau button.chon { background: var(--rieng-nhat); color: var(--rieng); border-color: var(--rieng); font-weight: 700; }

/* ---- tấm trượt */
.tam { border-top: 4px solid var(--ac); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.tam-dau h2 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 18px; }
.td-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; color: #fff; }
.td-ic svg { width: 16px; height: 16px; stroke-width: 2.6; }
.td-chi .td-ic { background: var(--chi-dac); }
.td-thu .td-ic { background: var(--thu-dac); }
.dong-x { color: var(--chu); font-weight: 700; }
.tam-cuoi { box-shadow: 0 -8px 8px -6px var(--bg); }

/* phân đôi Chi / Thu, Sổ xưởng / Sổ riêng */
.seg { border-width: 1.5px; border-color: var(--vien2); }
.seg button { font-weight: 600; min-height: 44px; }
.seg button.chon { background: var(--ac); color: var(--ac-chu); font-weight: 700; box-shadow: none; }
.seg button.chon[data-ben="chi"], .seg button.chon[data-lo="chi"] { background: var(--chi-dac); color: #fff; }
.seg button.chon[data-ben="thu"], .seg button.chon[data-lo="thu"] { background: var(--thu-dac); color: #fff; }
.seg button.chon[data-so="rieng"] { background: var(--rieng-dac); color: #fff; }
.seg-ben button svg { width: 18px; height: 18px; vertical-align: -4px; }

/* bảng chọn việc: mỗi việc một màu */
.chon-lon button { border: 1.5px solid var(--vien); border-left-width: 6px; box-shadow: var(--bong); }
.chon-lon button:active { filter: brightness(.95); }
.chon-lon .bieu { background: var(--ac-nhat); color: var(--ac); }
.chon-lon .vt { min-width: 0; }
.chon-lon .v-chi { border-left-color: var(--chi-dac); }
.chon-lon .v-chi .bieu { background: var(--chi-nhat); color: var(--chi); }
.chon-lon .v-thu { border-left-color: var(--thu-dac); }
.chon-lon .v-thu .bieu { background: var(--thu-nhat); color: var(--thu); }
.chon-lon .v-tu { border-left-color: var(--tu-dac); }
.chon-lon .v-tu .bieu { background: var(--tu-nhat); color: var(--tu); }
.chon-lon .v-luong { border-left-color: var(--luong-dac); }
.chon-lon .v-luong .bieu { background: var(--luong-nhat); color: var(--luong); }
.chon-lon .v-quy { border-left-color: var(--ac); }
.chon-lon.chon-gon { gap: 8px; }
.chon-lon.chon-gon button { gap: 8px; padding: 8px 10px; border-left-width: 5px; }
.chon-lon.chon-gon .bieu { width: 34px; height: 34px; border-radius: 10px; }
.chon-lon.chon-gon .bieu svg { width: 18px; height: 18px; }

/* ---- danh sách phiếu: dải màu + biểu tượng theo loại, số tiền màu theo nghĩa */
.ds li { border-left: 4px solid var(--vien2); padding: 12px; }
.ds li.p-chi { border-left-color: var(--chi-dac); }
.ds li.p-thu { border-left-color: var(--thu-dac); }
.ds li.p-quy { border-left-color: var(--ac); }
.hang1 { align-items: center; }
.hang1 b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15.5px; line-height: 1.25; }
.hang1 b > span { min-width: 0; overflow-wrap: anywhere; }
.cd { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--mat2); color: var(--chu3); }
.cd svg { width: 15px; height: 15px; stroke-width: 2.6; }
.p-chi .cd { background: var(--chi-nhat); color: var(--chi); }
.p-thu .cd { background: var(--thu-nhat); color: var(--thu); }
.p-quy .cd { background: var(--ac-nhat); color: var(--ac); }
.tien-chi, .tien-thu { font-size: 16.5px; }
.hang2 { margin-top: 4px; }
.tt { font-size: 12px; padding: 2px 10px; }
.tt.cho_duyet { background: var(--tu-nhat); color: var(--tu); box-shadow: inset 0 0 0 1px var(--tu); }
.tt.da_duyet { background: var(--thu-nhat); color: var(--thu); box-shadow: inset 0 0 0 1px var(--thu); }
.tt.tra_lai { background: var(--chi-nhat); color: var(--chi); box-shadow: inset 0 0 0 1px var(--chi); }
.tt.huy { background: var(--mat2); color: var(--chu3); box-shadow: inset 0 0 0 1px var(--vien2); }
.tt.da_chi { background: var(--ac); color: var(--ac-chu); }
.loi-nhan { border-left: 3px solid var(--chi); }
.loc-tt button { border: 1.5px solid var(--vien2); font-weight: 600; }
.loc-tt button.chon { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); font-weight: 700; }
.loc-tt button[data-tt="cho_duyet"] { border-color: var(--tu); color: var(--tu); }
.loc-tt button[data-tt="tra_lai"] { border-color: var(--chi); color: var(--chi); }
.loc-tt button[data-tt="da_duyet"] { border-color: var(--thu); color: var(--thu); }
.loc-tt button[data-tt="huy"] { color: var(--chu3); }
.loc-tt button.chon[data-tt="cho_duyet"] { background: var(--tu-dac); color: #fff; border-color: var(--tu-dac); }
.loc-tt button.chon[data-tt="tra_lai"] { background: var(--chi-dac); color: #fff; border-color: var(--chi-dac); }
.loc-tt button.chon[data-tt="da_duyet"] { background: var(--thu-dac); color: #fff; border-color: var(--thu-dac); }
.loc-tt button.chon[data-tt="huy"] { background: var(--chu3); color: var(--bg); border-color: var(--chu3); }
.loc-tt button i { box-shadow: 0 0 0 2px var(--bg); background: var(--ac); color: var(--ac-chu); }
.loc-tt button[data-tt="cho_duyet"] i { background: var(--tu-dac); color: #fff; }
.loc-tt button[data-tt="tra_lai"] i { background: var(--chi-dac); color: #fff; }
.loc-tt button[data-tt="da_duyet"] i { background: var(--thu-dac); color: #fff; }
.the-do { background: var(--chi-nhat); border-color: var(--chi); border-left-width: 5px; }

/* ---- Sổ riêng: tím */
.rieng-nhan { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--rieng); margin: 0 0 12px; }
.rieng-nhan svg { width: 15px; height: 15px; flex: none; }
.ba-so { gap: 8px; }
.ba-so > div { border: 0; padding: 8px 12px; }
.ba-so .b-thu { background: var(--thu-nhat); }
.ba-so .b-chi { background: var(--chi-nhat); }
.ba-so .b-con { background: var(--mat); box-shadow: inset 0 0 0 1.5px var(--rieng); }
.ba-so .b-thu small, .ba-so .b-chi small, .ba-so .b-con small { color: var(--chu2); font-weight: 600; }
.ba-so .b-con b { color: var(--rieng); }
.the-rieng .sr-dm li i { background: var(--mat); }
.the-rieng .sr-dm li i em { background: var(--rieng); opacity: .9; }
.the-rieng .sr-tk { border-top-color: var(--vien2); }
.lien-ket { color: var(--rieng); }

/* ---- Công việc / Cài đặt: khối gập có biểu tượng màu */
details.gap { border-width: 1.5px; border-color: var(--vien2); border-left-width: 5px; }
details.gap > summary { align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; }
details.gap > summary .gt { font-weight: 700; flex: none; }
details.gap > summary small { color: var(--chu2); }
.gi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex: none; background: var(--ac-nhat); color: var(--ac); }
.gi svg { width: 18px; height: 18px; }
.g-tu { background: var(--tu-nhat); color: var(--tu); }
.g-rieng { background: var(--rieng-nhat); color: var(--rieng); }
.g-quy { background: var(--ac-nhat); color: var(--ac); }
details.gap:has(.g-tu) { border-left-color: var(--tu-dac); }
details.gap:has(.g-rieng) { border-left-color: var(--rieng-dac); }
details.gap:has(.g-quy) { border-left-color: var(--ac); }
.nc-o { color: var(--chu); font-weight: 600; }
.nc-nhac { font-size: 13px; margin: 8px 0 4px; background: var(--canh-nhat); color: var(--canh); border-left: 4px solid var(--canh); border-radius: 8px; }
.viec .cham { background: var(--canh); }
.viec .cham.do { background: var(--chi-dac); }
.the-canh .viec li { border-top-color: var(--vien2); }

/* ---- s339 luật chủ xưởng: tiết kiệm tối đa không gian — điểm nhấn bằng MÀU / viền / biểu tượng, không bằng khoảng trắng.
   Thang gọn 4 / 6 / 8 / 12; lề thẻ nhỏ; nút vẫn cao ≥ 44px nhưng không thêm lề thừa. */
.dau { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.dau h1 { font-size: 18px; }
.logo { width: 28px; height: 28px; border-radius: 8px; }
.than { padding: 8px 12px calc(76px + env(safe-area-inset-bottom)); }
.thanh { padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); }
.thanh button { min-height: 44px; padding: 2px 0; }
.thanh button .bi { height: 26px; }
.thanh button .bi svg { width: 20px; height: 20px; }
.thanh .cong { margin-top: -20px; }
.thanh .cong span.tron, .thanh.sau .cong span.tron { width: 52px; height: 52px; border-width: 3px; }
.thanh .cong svg { width: 26px; height: 26px; }
.the { padding: 8px 12px; margin: 0 0 8px; border-radius: 12px; }
.the h2 { margin: 0 0 4px; font-size: 12.5px; }
.the .lon { font-size: 24px; line-height: 1.2; }
.the-quy .lon { font-size: 28px; }
.the .phu { font-size: 13px; margin-top: 0; }
.hai { gap: 8px; }
.hai .the { margin: 0; padding: 8px 12px; }
.hai .the .lon { font-size: 20px; }
.nut-lon { gap: 8px; margin: 0 0 8px; }
.nut-lon button { min-height: 48px; font-size: 17px; padding: 6px 8px; }
.nut-lon .quet-nut { min-height: 44px; font-size: 15px; border-width: 1.5px; padding: 4px 8px; }
.mau { padding: 0 0 4px; gap: 6px; }
.mau button { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.nhom-h { margin: 12px 0 6px; font-size: 13px; }
.viec li { padding: 6px 0; font-size: 14.5px; gap: 8px; }
.viec-trong { padding: 0 4px 8px; font-size: 13.5px; }
.the-gon { padding: 8px 12px; }
.the-gon h2 { margin-bottom: 2px; }
.quy-ds { margin: 2px 0 0; }
.quy-ds li { padding: 4px 0; font-size: 14px; }
.quy-chu { margin: 4px 0 0; font-size: 12px; }
.cc-hang.ba { margin-top: 6px; }
.cc-hang button { min-height: 44px; padding: 4px; }
.cc-dong { margin-top: 6px; }
.cc-ct { margin-top: 6px; }
.o { min-height: 44px; padding: 8px 12px; }
label.nhan { margin: 10px 0 4px; font-size: 13px; }
.tien-o { padding: 4px 12px; }
.tien-o input { font-size: 30px; }
.tien-nhanh { margin-top: 6px; gap: 6px; }
.tien-nhanh button { min-height: 36px; padding: 4px 12px; }
.luoi { gap: 6px; }
.luoi button { min-height: 48px; padding: 6px 8px; }
.chips { gap: 6px; }
.chips button { min-height: 40px; padding: 6px 12px; }
.tam { padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.tam-dau { padding: 10px 0 6px; }
.tam-dau h2 { font-size: 17px; }
.tam-cuoi { padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 8px; bottom: calc(-12px - env(safe-area-inset-bottom)); }
.seg { margin: 0 0 6px; }
.seg button { min-height: 40px; padding: 6px; }
.chon-lon { gap: 6px; margin: 4px 0 8px; }
.chon-lon button { min-height: 52px; padding: 8px 12px; gap: 10px; }
.chon-lon .bieu { width: 36px; height: 36px; }
.chon-lon.chon-gon { gap: 6px; margin: 4px 0 6px; }
.chon-lon.chon-gon button { min-height: 48px; padding: 6px 8px; }
#so-tim { margin: 0 0 6px; }
.loc { margin: 0 0 6px; }
.loc-tt { margin: 0 0 8px; }
.ds li { padding: 8px 10px; margin: 0 0 6px; }
.ngay-h { margin: 8px 4px 4px; font-size: 12.5px; }
.hang1 b { font-size: 15px; gap: 8px; }
.cd { width: 24px; height: 24px; }
.cd svg { width: 13px; height: 13px; }
.hang2 { margin-top: 2px; font-size: 12.5px; }
.loi-nhan { margin-top: 6px; padding: 6px 8px; }
.hang-nut { margin-top: 6px; gap: 6px; }
.trong { padding: 12px 8px; font-size: 14px; }
details.gap { margin: 0 0 6px; padding: 0 12px; }
details.gap > summary { min-height: 44px; padding: 4px 0; gap: 8px; }
details.gap[open] { padding-bottom: 8px; }
.gi { width: 28px; height: 28px; }
.ba-so { margin: 0 0 8px; gap: 6px; }
.ba-so > div { padding: 6px 10px; }
.sr-tq { padding: 8px 12px; }
.sr-dau { margin-bottom: 4px; }
.rieng-nhan { margin: 0 0 6px; font-size: 12.5px; }
.sr-dm { gap: 4px; }
.sr-tk { margin-top: 6px; padding-top: 6px; }
.ct-dong { padding: 6px 0; }
.nc-nhac { padding: 6px 8px; margin: 4px 0; font-size: 12.5px; }
.hs-anh { min-height: 72px; }

.ds-g .ng { display: none; }
.the h2:has(> svg) { display: flex; align-items: center; gap: 8px; }
details.gap > summary .gt { flex: 1 1 auto; min-width: 0; }
details.gap > summary small { flex: none; max-width: 36%; }

/* ---- s340 (chủ xưởng 17/10 "1a"): biểu tượng thanh chân mỗi thẻ MỘT MÀU theo nghĩa; thẻ đang chọn tô đặc nhạt + to hơn */
.thanh button[data-tab] { --mt: var(--chu2); --mt-nhat: var(--ac-nhat); }
.thanh button[data-tab="tongquan"] { --mt: var(--ac); --mt-nhat: var(--ac-nhat); }
.thanh button[data-tab="so"] { --mt: var(--chi); --mt-nhat: var(--chi-nhat); }
.thanh button[data-tab="rieng"] { --mt: var(--rieng); --mt-nhat: var(--rieng-nhat); }
.thanh button[data-tab="viec"] { --mt: var(--canh); --mt-nhat: var(--canh-nhat); }
.thanh button[data-tab="caidat"] { --mt: var(--chu2); --mt-nhat: var(--vien); }
.thanh button[data-tab] .bi { color: var(--mt); }
.thanh button[data-tab] .bi svg { transition: transform .12s; }
.thanh button[data-tab].chon { color: var(--mt); }
.thanh button[data-tab].chon .bi { background: var(--mt-nhat); box-shadow: inset 0 0 0 1.5px var(--mt); }
.thanh button[data-tab].chon .bi svg { fill: var(--mt); fill-opacity: .22; transform: scale(1.12); }

/* s341: nhắc thiếu biên lai gắn thẳng vào dòng khoản + Công việc gọn */
.nhac-bl { display: flex; gap: 8px; margin-top: 8px; }
.nhac-bl .nut-nho { flex: 1; min-width: 0; padding: 5px 6px; white-space: nowrap; }
.nbl-chu { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--canh); }
.nbl-chu svg { width: 15px; height: 15px; }
.ds li:has(> .nhac-bl) { border-color: var(--canh); background: var(--canh-nhat); }
.bl-ds { margin-bottom: 8px; }
.bl-ds li { padding: 10px 14px; }
.bl-khong { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13.5px; color: var(--chu2); }
.bl-khong span { flex: 1; min-width: 0; }
.tq-viec { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; cursor: pointer; margin-bottom: 12px; }
.tq-viec svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--canh); }
.tq-viec i { font-style: normal; color: var(--chu3); font-size: 20px; }
.nhac-cc { margin-bottom: 8px; }
.nhac-cc .hang1 b { font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.nhac-cc .hang1 b svg { width: 16px; height: 16px; }
.ds li > .nbl-chu { margin-top: 6px; }

/* s341: bảng chọn toàn màn cho ô tìm có danh sách (điện thoại) — cao theo visualViewport, ô tìm sát đầu */
.tim-bang { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.tb-dau { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--vien); background: var(--mat); flex: none; }
.tb-dau .o { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; }
.tb-xong { border: 0; background: var(--ac); color: var(--ac-chu); border-radius: 10px; padding: 0 16px; min-height: 44px; font-weight: 600; }
.tb-ds { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; }
.tb-ds button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--vien); background: none; padding: 10px 4px; min-height: 48px; }
.tb-ds button small { display: block; color: var(--chu3); font-size: 12.5px; }
.tb-ds button.chon { background: var(--ac-nhat); }
.tb-ds .tim-ct-nhan { padding: 8px 4px 2px; }

/* s341: Tổng hợp thu chi xưởng — mục gập trong khối quỹ */
#o-th { margin-top: 8px; border-top: 1px solid var(--vien); padding-top: 6px; }
details.th > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 0; font-weight: 600; font-size: 15px; }
details.th > summary::-webkit-details-marker { display: none; }
details.th > summary::after { content: "›"; color: var(--chu3); transform: rotate(90deg); transition: transform .15s; margin-left: auto; }
details.th[open] > summary::after { transform: rotate(-90deg); }
details.th > summary small { order: 3; width: 100%; font-weight: 500; font-size: 13px; white-space: nowrap; }
.th-loc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.th-chip { display: flex; gap: 6px; flex-wrap: wrap; }
.th-chip button { border: 1px solid var(--vien2); background: var(--mat); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.th-chip button.chon { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); }
.th-tong { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.th-tong > div { background: var(--mat2); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.th-tong small { display: block; font-size: 11.5px; color: var(--chu2); }
.th-tong b { font-size: 14px; white-space: nowrap; }
.th-lo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 2px; }
.th-lo.th-thu { color: var(--thu); }
.th-lo.th-chi { color: var(--chi); }
details.th-n { border-top: 1px solid var(--vien); }
details.th-n > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 48px auto; gap: 8px; align-items: center; padding: 7px 0; font-size: 14px; }
details.th-n > summary::-webkit-details-marker { display: none; }
.th-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-bar { height: 6px; background: var(--mat2); border-radius: 3px; overflow: hidden; display: block; }
.th-bar i { display: block; height: 100%; }
.th-n-thu .th-bar i { background: var(--thu); }
.th-n-chi .th-bar i { background: var(--chi); }
.th-muc { all: unset; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 0 6px 12px; font-size: 13.5px; cursor: pointer; }
.th-sl { color: var(--chu3); font-size: 12px; }
.th-ph { margin: 0 0 4px 12px; padding: 4px 8px; background: var(--mat2); border-radius: 8px; }
.th-p { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.th-p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhac-bl { align-items: center; gap: 6px; }
.nhac-bl .nut-nho { flex: 0 1 auto; min-height: 32px; padding: 3px 8px; font-size: 12.5px; font-weight: 500; border-width: 1px; background: transparent; }
.nhac-bl .nbl-chu { margin-right: auto; }

/* ============================================================ s341b — nút / thẻ gọn, tinh tế (kiểu app tài chính)
   Chỉ lớp trình bày: nút chính 40px phẳng, nút phụ 32–36px viền 1px, nhóm chọn dạng thanh liền, thẻ viền trái 3px. */
.nut { min-height: 40px; padding: 7px 16px; font-size: 15px; font-weight: 600; border-radius: 10px; box-shadow: none; gap: 6px; }
.nut:active:not(:disabled) { transform: none; box-shadow: none; filter: brightness(.94); }
.nut svg { width: 18px; height: 18px; }
.nut.phu, .nut.do { min-height: 34px; padding: 5px 14px; font-size: 14px; border-width: 1px; }
.hang-nut { justify-content: flex-end; gap: 8px; margin-top: 8px; }
.hang-nut .nut { flex: 0 0 auto; min-width: 0; min-height: 36px; padding: 6px 18px; font-size: 14.5px; }
.hang-nut .nut.do { min-height: 36px; }
.tam-cuoi .nut { flex: 1; min-height: 42px; }
.tam-cuoi .nut.phu, .tam-cuoi .nut.do { flex: 0 0 auto; }
.nut-nho { min-height: 32px; padding: 3px 10px; font-size: 13.5px; border-width: 1px; font-weight: 600; border-radius: 8px; }
.nut-lon { grid-template-columns: 1fr 1fr 44px; gap: 8px; margin-bottom: 10px; }
.nut-lon button { min-height: 40px; padding: 6px 10px; font-size: 15px; font-weight: 600; letter-spacing: .04em; border-radius: 10px; box-shadow: none; gap: 6px; }
.nut-lon button:active { transform: none; filter: brightness(.94); }
.nut-lon svg { width: 18px; height: 18px; stroke-width: 2.4; }
.nut-lon .quet-nut { grid-column: auto; min-height: 40px; padding: 0; border: 1px solid var(--vien2); color: var(--ac); }
.nut-lon .quet-nut svg { width: 20px; height: 20px; }
.mau { gap: 6px; padding: 0 0 6px; }
.mau button { min-height: 30px; padding: 3px 12px; font-size: 13px; font-weight: 600; border-width: 1px; }
.mau button::before { width: 7px; height: 7px; margin-right: 6px; }
.cc-hang { display: flex; gap: 2px; padding: 2px; background: var(--mat2); border: 1px solid var(--vien); border-radius: 10px; margin-top: 8px; }
.cc-hang.hai-o { margin-top: 0; }
.cc-hang button { flex: 1; min-width: 0; min-height: 32px; padding: 3px 6px; font-size: 14px; font-weight: 500; border: 0; background: transparent; border-radius: 8px; color: var(--chu2); }
.cc-hang button.chon { background: var(--thu-dac); color: #fff; font-weight: 600; }
.cc-dong { margin-top: 8px; }
.cc-buoc { gap: 8px; }
.cc-buoc button { width: 30px; height: 30px; font-size: 18px; border: 1px solid var(--vien2); }
.cc-buoc b { font-size: 15px; min-width: 56px; }
.seg { border-radius: 10px; }
.seg button { min-height: 34px; padding: 4px 6px; font-size: 14px; }
.chips button, .luoi button { padding: 6px 12px; font-size: 14px; }
.the { padding: 10px 12px; border-radius: 12px; box-shadow: none; margin-bottom: 10px; }
.the h2 { font-size: 12px; letter-spacing: .07em; margin-bottom: 4px; }
.the-quy, .the-tu, .the-luong, .the-rieng, .the-canh, .the-cc { border-left-width: 3px; }
.the-quy .lon { font-size: 28px; }
.the-gon { padding: 8px 12px; }
.hai .the { padding: 10px 12px; }
.o { min-height: 42px; padding: 8px 12px; border-radius: 10px; border-width: 1px; }
label.nhan { margin: 12px 0 6px; font-size: 14px; }
.chon-lon { gap: 8px; margin: 4px 0 12px; }
.chon-lon button { min-height: 48px; padding: 8px 12px; gap: 10px; font-size: 15px; border-radius: 10px; border-width: 1px; border-left-width: 4px; box-shadow: none; }
.chon-lon .bieu { width: 30px; height: 30px; border-radius: 8px; }
.chon-lon .bieu svg { width: 17px; height: 17px; }
.chon-lon.chon-gon button { min-height: 44px; padding: 6px 10px; font-size: 14px; gap: 8px; }
.nhom-h .nh-r { display: inline-flex; align-items: center; gap: 8px; }
.nhom-h { margin: 14px 0 6px; }
.ds li { padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; }
.tien-o { padding: 4px 14px; border-width: 1px; border-radius: 12px; }
.dong-x { width: 34px; height: 34px; font-size: 18px; }

/* ============================================================ s341c — dày nội dung: vùng chữ >= 38% (390×844)
   Đầu trang 48px · chữ thân 14 / phụ 12 / số 15 / số chính 22 · thẻ đệm 8×10, cách 6 · lề màn 10 · thẻ duyệt hai dòng. */
html, body { font-size: 14px; line-height: 1.32; }
.dau { min-height: 48px; padding: 6px 10px; gap: 8px; }
.dau h1 { font-size: 17px; }
.logo { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.dau .ten-nguoi { font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
.dau .ten-nguoi br { display: none; }
.dau .ten-nguoi small { font-size: 11.5px; margin-left: 5px; opacity: .85; }
.than { padding: 8px 10px calc(78px + env(safe-area-inset-bottom)); }
.the { padding: 8px 10px; margin-bottom: 6px; }
.the h2 { font-size: 11.5px; margin-bottom: 2px; letter-spacing: .06em; }
.the .lon { font-size: 22px; line-height: 1.15; }
.the-quy .lon { font-size: 22px; }
.the .phu { font-size: 12px; margin-top: 0; }
.hai { gap: 6px; }
.hai .the { padding: 8px 10px; }
.hai .the .lon { font-size: 18px; }
.the-gon { padding: 6px 10px; }
.viec-trong { padding: 0 2px 6px; font-size: 13px; }
.nut-lon { margin-bottom: 6px; }
.nhom-h { margin: 8px 0 4px; font-size: 12.5px; }
.mau { padding: 0 0 4px; }
.nhan-so, .quy-chu { display: none; }
.the-quy { position: relative; }
.quy-ds li { padding: 5px 0; font-size: 13.5px; min-height: 0; }
.ii { position: absolute; top: 6px; right: 10px; }
.ii summary { list-style: none; cursor: pointer; font-size: 16px; color: var(--chu2); line-height: 1; padding: 2px 4px; }
.ii summary::-webkit-details-marker { display: none; }
.ii p { position: absolute; right: 0; top: 24px; width: 230px; margin: 0; padding: 6px 8px; background: var(--mat); border: 1px solid var(--vien2); border-radius: 8px;
  font-size: 12px; color: var(--chu2); box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 4; }
/* chấm công: một hàng segmented + một hàng chip nhỏ */
.cc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cc > h2, .cc > .phu, .cc > .cc-hang.ba, .cc > .cc-ct { flex: 1 0 100%; }
.cc > h2 { margin-bottom: 0; }
.cc > .phu { margin: 0; }
.cc .cc-dong { margin: 0; gap: 4px; }
.cc .cc-dong > span { display: none; }
.cc .cc-hang.ba { margin-top: 2px; }
.cc .cc-hang.hai-o { max-width: none; flex: none; }
.cc .cc-hang.hai-o button { padding: 2px 10px; min-height: 28px; font-size: 13px; }
.cc-hang button { min-height: 30px; font-size: 13.5px; }
.cc-buoc { gap: 4px; }
.cc-buoc button { width: 26px; height: 26px; font-size: 16px; }
.cc-buoc b { min-width: 42px; font-size: 13px; }
.cc-ct { margin-top: 0; }
/* thẻ duyệt phiếu / thẻ biên lai của mình: dòng 1 tên + tiền, dòng 2 ngày·người·mã + cụm nút nhỏ bên phải */
.ds li { padding: 6px 10px; margin-bottom: 5px; }
.hang1 b { font-size: 14px; min-width: 0; display: flex; align-items: center; gap: 6px; }
.hang1 b > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hang1 b .cd { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; }
.hang1 b .cd svg { width: 12px; height: 12px; }
.hang1 > .so, .hang1 .tien-chi, .hang1 .tien-thu { font-size: 15px; font-weight: 700; white-space: nowrap; }
.hang2 { font-size: 12px; margin-top: 1px; gap: 4px; flex-wrap: nowrap; min-width: 0; }
.hang2 > span:not(.tt):not(.nbl-chu) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hang2 .ma { margin-left: auto; }
.nbl-chu em { display: none; font-style: normal; }
.nbl-chu svg { width: 14px; height: 14px; }
#cv-duyet .ds li:has(> .hang-nut), .bl-ds li:has(> .nhac-bl) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
#cv-duyet .ds li:has(> .hang-nut) > *, .bl-ds li:has(> .nhac-bl) > * { grid-column: 1 / -1; }
#cv-duyet .ds li:has(> .hang-nut) > .hang1 + .hang2, .bl-ds li:has(> .nhac-bl) > .hang2 { grid-column: 1; grid-row: 2; }
#cv-duyet .ds li:has(> .hang-nut) > .hang-nut, .bl-ds li:has(> .nhac-bl) > .nhac-bl { grid-column: 2; grid-row: 2; margin: 0; }
.hang-nut { margin-top: 0; gap: 4px; flex-wrap: nowrap; }
.hang-nut .nut { min-height: 30px; padding: 3px 12px; font-size: 13px; border-radius: 8px; }
.hang-nut .nut.do, .nhac-bl .nut-nho { min-height: 30px; }
.hang-nut .nut.do { background: transparent; border-color: transparent; color: var(--chi); padding: 3px 8px; }
.nhac-bl { margin-top: 0; gap: 4px; }
.nhac-bl .nut-nho { padding: 2px 8px; font-size: 12.5px; }
.bl-ds li, #cv-duyet .ds li { margin-bottom: 5px; }
/* hàng tiêu đề nhóm duyệt: tên · [quỹ] · tổng · Duyệt tất cả */
.nhom-h.h-duyet { gap: 6px; }
.nhom-h .nh-r { gap: 6px; min-width: 0; }
.nhom-h .nh-r select { min-height: 28px; padding: 1px 6px; font-size: 12.5px; width: auto; max-width: 92px; border-radius: 8px; }
.nhom-h .nh-r .nut-nho { min-height: 28px; padding: 1px 8px; font-size: 12.5px; white-space: nowrap; }
.nhom-h .nh-r .so { font-size: 12.5px; }
/* Sổ xưởng: mỗi dòng <= 2 dòng chữ */
.dong-tinh, .ds li > button { line-height: 1.25; }
.ngay-h { margin: 8px 4px 4px; font-size: 12px; }
.loc-tt { margin-bottom: 8px; }
.loc-tt button { padding: 5px 2px; font-size: 12.5px; }
#so-tim, .o { min-height: 38px; }
select.o { padding-right: 24px; }
/* Ghi CHI: nhãn nhỏ, lưới khoản 3 cột */
.tam label.nhan { font-size: 11.5px; font-weight: 500; color: var(--chu2); margin: 8px 0 2px; }
.chon-lon.chon-gon { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 6px; }
.chon-lon.chon-gon button { min-height: 40px; padding: 4px 6px; font-size: 13px; line-height: 1.15; gap: 0; border-left-width: 3px; text-align: left; }
.chon-lon.chon-gon .bieu { display: none; }
.chon-lon.chon-gon .vt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tien-o { padding: 2px 12px; }
.tien-o input { font-size: 22px; }
.tam-dau { padding: 8px 0 6px; }
.tam-dau h2 { font-size: 16px; }
.tam-cuoi { padding-top: 8px; margin-top: 8px; }
.tam-cuoi .nut { min-height: 40px; }

/* ============================================================ s341c — MỘT bảng cỡ nút (biến ở :root)
   Bậc 1 hành động chính: 40px · Bậc 2 trong thẻ/dòng: 30–32px · Bậc 3 liên kết/biểu tượng: 28px không nền · cách nhau >= 6px. */
:root { --b1: 40px; --b2: 32px; --b2-dong: 30px; --b3: 28px; --gn: 6px; }
.nut, .nut-lon button, .tam-cuoi .nut, .tb-xong { min-height: var(--b1); font-size: 14.5px; font-weight: 600; padding: 0 16px; border-radius: 10px; }
.nut.phu, .nut.do, .nut-nho, .th-chip button { min-height: var(--b2); font-size: 13px; padding: 0 12px; border-width: 1px; border-radius: 8px; font-weight: 600; }
.nut.rong { padding: 0 16px; }
.nut.phu.rong, .nut.do.rong { min-height: var(--b2); }
.hang-nut .nut, .nhac-bl .nut-nho, .ds li .nut-nho, .nhom-h .nut-nho, .nhac-cc .nut-nho, .bl-khong .nut-nho { min-height: var(--b2-dong); font-size: 13px; padding: 0 12px; }
.hang-nut { flex-direction: row-reverse; justify-content: flex-start; gap: var(--gn); margin-top: var(--gn); }
.nhac-bl { gap: var(--gn); margin-top: var(--gn); }
.tam-cuoi { gap: var(--gn); }
.tam-cuoi .nut.phu, .tam-cuoi .nut.do { min-height: var(--b1); font-size: 14.5px; }
.dong-x, .ii summary, .tb-x { min-width: var(--b3); min-height: var(--b3); width: var(--b3); height: var(--b3); background: none; border: 0; font-size: 18px; color: var(--chu2); }
.cc-hang button, .seg button { min-height: var(--b2-dong); }
.mau button { min-height: var(--b2-dong); }
.nut-lon button { padding: 0 10px; }
.nut-lon .quet-nut { min-width: var(--b1); }
.chon-lon.chon-gon button { min-height: var(--b1); }
.nhac-bl .nut-nho, .hang-nut .nut { flex: 0 0 auto; }
.bl-ds li:has(> .nhac-bl) > .hang2 .ma { display: none; }
.nhom-h > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nhom-h .nh-r .so { white-space: nowrap; }
.nhom-h .nh-r select { max-width: 84px; }
/* s341c — lưới khoản chi/thu trong form Ghi: 3 cột, ô 40px, tên tối đa 2 dòng */
.luoi { grid-template-columns: repeat(3, 1fr); gap: var(--gn); }
.luoi button { min-height: var(--b1); padding: 3px 6px; font-size: 13px; line-height: 1.15; gap: 5px; border-width: 1px; border-radius: 10px; text-align: left; }
.luoi .kic { width: 18px; height: 18px; }
.luoi .kic svg { width: 11px; height: 11px; }
.luoi button > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.luoi button em { display: none; }
.tien-nhanh button, .loc-tt button { min-height: var(--b2-dong); min-width: 75px; font-size: 13px; padding: 0 12px; border-width: 1px; }
.loc-tt button { min-width: 0; padding: 0 2px; }
.nut.phu, .nut.do, .nut-nho { min-width: 75px; }
.nut.phu.rong { min-width: 0; }
.nut, .nut-lon .chi, .nut-lon .thu { min-width: 100px; }
.nut.rong { min-width: 0; }
.dong-x { min-width: var(--b3); }
.nhom-h .nh-r select { max-width: 84px; }
/* s341c — cỡ nút TỶ LỆ với công dụng: bật/tắt & chọn một trong vài = chip nhỏ 26–28px một hàng; nguy hiểm = chữ màu nhỏ */
.cc { gap: 4px 8px; }
.cc > h2 { flex: 0 0 auto; }
.cc > .phu { flex: 1 1 0; text-align: right; font-size: 12px; }
.cc .cc-hang.ba { flex: none; display: inline-flex; margin: 0; width: auto; }
.cc .cc-hang, .cc .cc-hang.hai-o { padding: 1px; border-radius: 8px; gap: 1px; }
.cc-hang button, .cc .cc-hang.hai-o button { flex: none; min-height: 26px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; min-width: 0; }
.cc-buoc button { width: 26px; height: 26px; font-size: 15px; }
.cc-buoc b { min-width: 40px; font-size: 12.5px; }
.cc-ct .o { min-height: 34px; padding: 4px 10px; font-size: 14px; }
.loc-tt button, .seg button, .th-chip button, .tien-nhanh button { min-height: 28px; font-size: 12.5px; }
.tien-nhanh button { min-width: 0; padding: 0 12px; }
.nut.do { background: transparent; border-color: transparent; color: var(--chi); min-height: 28px; min-width: 0; padding: 0 8px; font-size: 13px; }
.tam-cuoi .nut.do { min-height: var(--b2); }
.hang-nut .nut.do { min-height: var(--b2-dong); }
.cc > .phu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc > h2 { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc { gap: 3px 8px; }
.cc-ct .o { min-height: 28px; padding: 2px 8px; font-size: 13px; border-radius: 8px; }

/* ============================================================ s342 — chốt ngày chấm công ngay trong Công việc
   Mỗi người MỘT dòng ~32px: chấm đỏ · tên · ô công xoay vòng · T / Tối · tăng ca. Chip 26–28px (bảng cỡ nút s341c). */
.nhac-cc .cc-ngays { margin-top: 4px; }
.cc-ngay { border-top: 1px solid var(--vien); }
.cc-ngay:first-child { border-top: 0; }
.cc-ngay > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--b2); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.cc-ngay > summary::-webkit-details-marker { display: none; }
.cc-ngay > summary::after { content: "▾"; color: var(--chu3); font-size: 12px; margin-left: auto; }
.cc-ngay[open] > summary::after { content: "▴"; }
.cc-thieu { font-style: normal; font-size: 12px; font-weight: 600; color: var(--do); }
.cc-than { padding-bottom: 6px; }
.cx-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--gn); margin: 2px 0 4px; }
.cx-tt { font-size: 13.5px; margin-right: auto; }
.cx-dau .nut-nho { min-height: var(--b2-dong); font-size: 13px; padding: 0 12px; }
.cx-dau .nut-nho:disabled { opacity: .45; }
.nut-chu { min-height: var(--b3); background: none; border: 0; padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ac); }
.cx-hoi { display: flex; gap: var(--gn); align-items: center; margin-bottom: 4px; }
.cx-hoi .o { flex: 1; min-width: 0; }
.cx-ds { display: block; }
.cx-d { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.cx-d + .cx-d, .cx-ct + .cx-d { border-top: 1px solid var(--vien); }
.cx-cham { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--thu-dac); opacity: .5; }
.cx-cham.do { background: var(--do); opacity: 1; }
.cx-ten { flex: 1 1 0; min-width: 0; text-align: left; background: none; border: 0; padding: 0 2px; min-height: 28px; font-size: 14px; color: var(--chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-chua .cx-ten { font-weight: 700; }
.cx-cong, .cx-o { flex: none; min-height: 26px; min-width: 28px; padding: 0 8px; border: 1px solid var(--vien2); border-radius: 7px; background: var(--mat); color: var(--chu2); font-size: 12.5px; font-weight: 600; }
.cx-cong { min-width: 48px; }
.cx-cong.l-chua { border-style: dashed; color: var(--do); border-color: var(--do); }
.cx-cong.l-du { background: var(--thu-dac); border-color: var(--thu-dac); color: #fff; }
.cx-cong.l-nua { background: var(--tu-nhat); border-color: var(--tu); color: var(--tu); }
.cx-cong.l-nghi { background: var(--mat2); color: var(--chu3); }
.cx-o.chon { background: var(--thu-nhat); border-color: var(--thu-dac); color: var(--thu); }
.cx-o:disabled { opacity: .35; }
.cx-tc { display: inline-flex; gap: 2px; flex: none; }
.cx-ct { display: flex; align-items: center; gap: var(--gn); padding: 0 0 4px 12px; }
.cx-ct .o { flex: 1; min-width: 0; min-height: 28px; padding: 2px 8px; font-size: 13px; }
.cx-seg { display: inline-flex; gap: 2px; flex: none; }
.cx-seg button { min-height: 26px; padding: 0 10px; border: 1px solid var(--vien2); border-radius: 7px; background: var(--mat); font-size: 12.5px; color: var(--chu2); }
.cx-seg button.chon { background: var(--thu-dac); border-color: var(--thu-dac); color: #fff; font-weight: 600; }
.cx-xem { min-height: 26px; font-size: 13px; }
.cx-xem .cx-ten { flex: 0 1 auto; padding: 0; min-height: 0; font-weight: 600; }
.cx-xt { flex: 1 1 0; min-width: 0; text-align: right; color: var(--chu2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }

/* s343: chú giải cột bảng chốt chấm công + ô công "Nghỉ" mặc định Chủ nhật */
.cx-cot { display: grid; grid-template-columns: 1fr 56px 34px 42px 66px; gap: 4px; align-items: end; font-size: 11px; color: var(--chu2);
  padding: 2px 0 2px; border-bottom: 1px solid var(--vien); }
.cx-cot span { text-align: center; line-height: 1.15; }
.cx-cot span:first-child { text-align: left; font-style: italic; }
.cx-cong.l-mac { color: var(--chu2); border-style: dashed; background: transparent; }
/* cột cố định để khớp chú giải */
.cx-d .cx-cong { width: 56px; padding: 0; }
.cx-d [data-bua="trua"] { width: 34px; padding: 0; min-width: 0; }
.cx-d [data-bua="toi"] { width: 42px; padding: 0; min-width: 0; }
.cx-d .cx-tc { width: 66px; justify-content: flex-end; }
.cx-d .cx-tc [data-tc="-0.5"] { width: 22px; min-width: 0; padding: 0; }
.cx-d .cx-tc [data-tc="0.5"] { min-width: 40px; padding: 0 4px; }

/* s344 — "Đã nhận": nút bậc 2 (30px) cuối dòng; MỘT ô chọn tài khoản nhận lương ở đầu nhóm (đổi được lúc bấm); nhãn quá hạn tô đỏ */
.nhan-ds .hang2 .tt { flex: none; white-space: nowrap; }
.nhom-h .nh-r .nhan-tk { min-height: 28px; height: 28px; padding: 0 20px 0 8px; font-size: 14px; width: auto; max-width: 156px; border: 1px solid var(--vien); border-radius: 8px; background: var(--mat); }
.nhan-ds .nut-nho.ac { background: var(--ac); border-color: var(--ac); color: var(--ac-chu); padding: 0 14px; }
.nhan-ds .nut-nho.ac:disabled { opacity: .55; }

/* s351 — màn chờ chuyển khoản: gọn một màn 375px. Bậc 1 (40px) = Sao chép mã & mở ngân hàng; bậc 2 (32px) = Đính hoá đơn ·
   Xong; ảnh đã đính là ô 44px có dấu ✓ */
.mc-tt { font-size: 12.5px; color: var(--chu2); margin: -2px 0 4px; }
.tam .mc-qr { width: min(220px, 58vw); margin: 2px auto 4px; }
.tam .mc-nd { font-size: 12px; line-height: 1.35; }
.tam .mc-nd code { font-size: 14px; margin-top: 0; padding: 1px 6px; }
.tam .mc-chep { min-height: var(--b1); margin-top: 8px; }
.mc-gy { font-size: 12px; margin: 4px 0 0; }
.tam .mc-loi { font-size: 12.5px; line-height: 1.3; padding: 6px 10px; margin-top: 6px; }
.mc-anh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gn); margin-top: 8px; }
.mc-tn { position: relative; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--vien); background: var(--mat2); overflow: hidden; flex: none; }
.mc-tn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-tn i { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--thu-dac); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.mc-dem { font-size: 12.5px; color: var(--thu); font-weight: 600; }
.mc-cuoi { display: flex; gap: var(--gn); margin-top: 10px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.mc-cuoi .nut, .tam .mc-cuoi .nut.phu { flex: 1; min-height: var(--b2); font-size: 13.5px; }

/* ============================================================ s357 — gọn màn theo luật chủ xưởng (20/10/2026)
   "Tiết kiệm tối đa không gian" · "mỗi việc hiện MỘT chỗ" · "nút to nhỏ theo công dụng". Cỡ nút CHỈ đọc từ bảng biến ở :root
   (--b1 40 hành động chính · --b2 32 nút phụ / ô chọn · --b2-dong 30 nút trong dòng · --b3 28 chip / liên kết · --gn 6 cách). */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Chấm công hôm nay: HAI hàng. (1) dấu trạng thái · Chấm công · Đủ|Nửa|Nghỉ · − 0g +  (2) Trưa|Tối · nơi làm · công trình
   Trạng thái = màu + dấu ở đầu khối (cam "!" chưa tích · xanh ✓ đã lưu · đỏ lỗi), không nhắc lại chữ của ô đã chọn. */
.cc { display: block; padding: 5px 10px; }
.cc-h1, .cc-h2 { display: flex; align-items: center; gap: var(--gn); min-width: 0; }
.cc-h2 { margin-top: 4px; }
.cc .cc-h1 > h2 { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--tu); }
.cc.cc-xong .cc-h1 > h2 { color: var(--ac); }
.cc.cc-loi .cc-h1 > h2 { color: var(--chi); }
.cc-ic { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--tu-dac); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; }
.cc-ic svg { width: 12px; height: 12px; stroke-width: 3; }
.cc.cc-xong .cc-ic { background: var(--thu-dac); }
.cc.cc-loi .cc-ic { background: var(--chi-dac); }
.cc .cc-hang.ba, .cc .cc-hang.hai-o { flex: none; display: inline-flex; width: auto; max-width: none; margin: 0; padding: 0; gap: 0; }
.cc .cc-hang button, .cc .cc-hang.hai-o button { min-height: var(--b2); padding: 0 8px; font-size: 13px; }
.cc .cc-buoc { flex: none; gap: var(--gn); }
.cc .cc-buoc button { width: var(--b2); height: var(--b2); min-height: var(--b2); font-size: 16px; padding: 0; }
.cc .cc-buoc b { min-width: 22px; font-size: 12.5px; text-align: center; }
.cc .cc-ct { flex: 1 1 0; min-width: 0; margin: 0; }
.cc .cc-ct .o { min-height: var(--b2); height: var(--b2); padding: 0 8px; font-size: 13px; }
.cc-khoa { flex: none; font-size: 12px; color: var(--chu2); }
.cc-tom { margin-top: 2px; }

/* ---- Tổng quan / Công việc: bỏ dòng tiêu đề thừa, lề nhỏ */
.tq-viec { margin-bottom: 6px; }
.hai { margin-bottom: 6px; }
.cv-cc span { display: inline-flex; align-items: center; gap: 6px; }
.cv-cc svg { color: var(--ac); }
.the-quy .quy-ds li { padding: 3px 0; }
#cv-duyet .ds li > .hang1 + .hang2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds li .loi { padding: 4px 8px; margin: 4px 0; font-size: 12.5px; }
.nc-o { margin-top: 4px; font-size: 12.5px; }
.nc-o select.o { min-height: var(--b2); height: var(--b2); padding: 0 24px 0 8px; }

/* ---- Sổ xưởng / Sổ riêng: ô lọc bậc 2 */
.loc .o, #sr-thang { min-height: var(--b2); height: var(--b2); padding-top: 0; padding-bottom: 0; }
#so-tim, #sr-tim { min-height: var(--b2); height: 34px; padding-top: 0; padding-bottom: 0; }
#sr-tim { margin: 0 0 4px; }
.sr-dau h2 svg { color: var(--rieng); }
.sr-dau h2 .sr-rieng { margin-left: 2px; width: 40px; white-space: normal; font-size: 11px; line-height: 1.15; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--chu3); }
.sr-dau { gap: 4px; }
.sr-dau .sr-loc { gap: 4px; }
.sr-dau .sr-loc select { font-size: 14px; padding: 0 14px 0 4px; background-position: right 4px center; }
.sr-dau .lc-chip button { padding: 0 6px; }
.sr-dau h2 svg { width: 16px; height: 16px; }

/* ---- Cài đặt: MỘT dòng tài khoản / hồ sơ; khoá máy = nút bậc 2 cạnh tiêu đề; Đăng xuất bậc 3 cùng hàng chân trang */
.cd-tk { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; }
.cd-tk .gi { width: 28px; height: 28px; }
.cd-tk-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cd-tk-t b { font-size: 14.5px; }
.cd-tk-t small { font-size: 12px; color: var(--chu2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-mui { font-style: normal; color: var(--chu3); font-size: 20px; flex: none; }
.cd-khoa-h { display: flex; align-items: center; justify-content: space-between; gap: var(--gn); }
.cd-khoa-h h2 { margin: 0; }
.cd-khoa .nut { min-height: var(--b2); min-width: 64px; }
.cd-khoa .nut.bat { background: var(--ac); color: var(--ac-chu); border-color: var(--ac); }
.cd-cuoi { display: flex; align-items: center; justify-content: space-between; gap: var(--gn); margin-top: 2px; }
.cd-cuoi .goi-y { margin: 0; font-size: 12px; }
.cd-cuoi .nut.do { min-height: var(--b3); flex: none; }
details.gap > summary { min-height: calc(var(--b2) + 4px); padding: 2px 0; font-size: 14.5px; }
details.gap > summary .gt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.gap .gi { width: 24px; height: 24px; border-radius: 8px; }
details.gap .gi svg { width: 15px; height: 15px; }
.cd-dm { margin-bottom: 6px; }
.cd-dm ul { margin: 2px 0 4px; }
.cd-dm li { padding: 0; min-height: 30px; font-size: 14px; gap: 2px; }
.cd-dm li .nut-nho { min-height: var(--b3); min-width: 0; padding: 0 8px; border: 0; background: none; color: var(--ac); font-weight: 600; }
.cd-dm li .nut-nho.do { color: var(--chi); }
.cd-them { gap: var(--gn); }
.cd-them .o, .cd-them .nut { min-height: var(--b2); height: var(--b2); }
.cd-them .o { padding: 0 10px; }

/* ---- Lương: ô tháng + "Xin ứng lương" một hàng; MỘT thẻ (số còn được nhận ở đầu, bảng chi tiết dưới) */
.lg-dau { display: flex; align-items: center; gap: var(--gn); margin: 0 0 6px; }
.lg-dau select { flex: 1 1 auto; min-width: 0; }
.lg-dau #lg-ky { min-height: var(--b2); height: var(--b2); padding: 0 24px 0 10px; }
.lg-dau .nut { flex: none; min-height: var(--b1); }
.lg-cho { margin: -2px 0 6px; font-size: 12px; }
.lg-so { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-bottom: 2px; }
.lg-the .ct-dong { padding: 4px 0; font-size: 14px; border-top-color: var(--vien2); }
.lg-the .ct-dong small.phu { font-size: 11.5px; }
.lg-nhom { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--luong); margin: 6px 0 0; }
.lg-don .hang1 small.ma { font-weight: 400; font-size: 12px; color: var(--chu3); }
.lg-don .hang2 { flex-wrap: wrap; align-items: baseline; }
.lg-don .hang2 .tt { flex: none; }
.lg-don .hang2 > span.lg-ct { white-space: normal; overflow: visible; }

/* ---- Hồ sơ: ảnh chân dung bấm ngay ở đầu; Lưu / Gửi = bậc 1 cạnh câu giải thích; Khai / đổi tài khoản = bậc 2 */
.hs-dau { gap: 10px; padding: 8px 10px; align-items: flex-start; }
.hs-chan-dung { width: 48px; height: 48px; font-size: 20px; position: relative; border: 0; padding: 0; cursor: pointer; overflow: visible; }
.hs-chan-dung img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hs-cam { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ac); color: var(--ac-chu);
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--mat); }
.hs-cam svg { width: 12px; height: 12px; }
.hs-tt { min-width: 0; line-height: 1.3; }
.hs-tt .phu { font-size: 12px; }
.hs-tt .hs-chi-xem { color: var(--chu3); font-size: 11.5px; }
.hs-cuoi { display: flex; align-items: center; gap: var(--gn); margin-top: 8px; }
.hs-cuoi .goi-y { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12px; line-height: 1.3; }
.hs-cuoi .nut { flex: none; min-height: var(--b1); }
.hs-cuoi .nut.phu { min-height: var(--b2); }
.tk-nhan .tk-hien { font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
details.gap .goi-y { font-size: 12px; line-height: 1.3; }
.tk-nhan .tk-hien .so { font-size: 16px; }
details.gap label.nhan { margin: 6px 0 2px; font-size: 12px; }

/* ---- ＋ Ghi khoản mới: Chi|Thu và Sổ xưởng|Sổ riêng một hàng; Quét & trả nằm trong lưới việc */
.seg-hai { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gn); margin: 0 0 6px; }
.seg-hai .seg { margin: 0; }
.chon-lon.chon-gon .vt svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.chon-lon.chon-gon .v-quy { border-left-color: var(--ac); }

/* ---- form Ghi: số tiền + (+000 · Xoá) một hàng; Ghi chú | Trả cho ai hai cột; ảnh hoá đơn một nút */
.tien-hang { display: flex; align-items: center; gap: var(--gn); margin-top: 6px; }
.tien-hang .tien-o { flex: 1 1 auto; min-width: 0; margin: 0; }
.tien-hang .tien-nhanh { margin: 0; flex-wrap: nowrap; flex: none; }
.tam label.nhan i { font-style: normal; color: var(--chu3); }
.hai-o-nhap.f-hai { grid-template-columns: 1fr 1fr; gap: var(--gn); }
.f-anh { margin-top: 8px; gap: var(--gn); }
.f-anh .nut { min-height: var(--b2); }
.f-anh .phu { font-size: 12px; }
.tam .goi-y { font-size: 12px; line-height: 1.3; }

/* ---- mật độ chung (s357): dòng chữ 1.28, thẻ / dòng phiếu / tiêu đề nhóm sát hơn — khoảng trắng không mang thông tin */
html, body { line-height: 1.28; }
.the { padding: 6px 10px; margin-bottom: 5px; }
.hai .the { padding: 6px 10px; }
.the.cc { padding: 5px 10px; }
.ds li { padding: 5px 10px; margin-bottom: 4px; }
.nhom-h { margin: 6px 0 3px; }
.ngay-h { margin: 6px 4px 3px; }
#o-th { margin-top: 4px; padding-top: 2px; }
details.th > summary { padding: 4px 0; }
.mau { padding: 0 0 5px; }
/* ---- s369 — nguồn trả trên màn chờ / màn chi: [ô chọn tài khoản / ngân hàng] khi cần · [Sao chép mã & mở <NH>] [Đổi] */
.mc-ck { margin-top: 8px; }
.mc-ck .mc-nguon { min-height: var(--b2); font-size: 13.5px; padding: 0 8px; margin: 0 0 6px; }
.mc-ck-h { display: flex; align-items: center; gap: var(--gn); }
.mc-ck-h > button:first-child { flex: 1; min-width: 0; }
.tam .mc-ck .mc-chep { margin-top: 0; }
.mc-ck .mc-doi { flex: none; min-width: 0; min-height: var(--b3); padding: 0 10px; font-size: 12.5px; font-weight: 500; }
.tk-nh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* s399: dòng ghi rõ kỳ của con số (Tổng quan, Sổ xưởng) */
.ky-tq { margin: -2px 0 6px; }
.ky-tom { font-size: 12.5px; color: var(--chu2); margin: 2px 2px 4px; }
#cd-localhost { display: block; text-align: center; text-decoration: none; margin-top: 8px; min-height: 44px; line-height: 44px; padding: 0 16px; box-sizing: border-box; }

/* s416: Cài đặt › Đổi mật khẩu */
.cd-mk-o { display: block; margin: 0 0 8px; }
.cd-mk-o > span { display: block; font-size: 13px; font-weight: 600; color: var(--chu2); margin: 0 0 4px; }
.cd-mk-cuoi { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; }
.cd-mk-hien { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* s423 (C4 Cửa hàng): Công việc › Giao hàng của tôi — mỗi phiếu giao đang trên xe một thẻ gọn: người nhận + số thu hộ, SĐT bấm gọi, địa chỉ, hàng, hai nút */
.gh-ds li.gh-the { display: block; padding: 9px 12px; }
.gh-ds .hang1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gh-ds .gh-thu { font-weight: 700; color: var(--ac); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gh-ct { font-size: 13px; color: var(--chu2); margin-top: 3px; overflow-wrap: anywhere; }
.gh-ct a { color: var(--luong); font-weight: 600; text-decoration: none; }
.gh-ct.gh-hg { color: var(--chu3); font-size: 12.5px; }
.gh-nut { display: flex; gap: 8px; margin-top: 8px; }
.gh-nut .nut-nho { flex: 1; min-width: 0; padding: 5px 6px; white-space: nowrap; }