:root{--nen:#f5f3ef;--the:#fff;--chu:#1d1b18;--mo:#6b665e;--vien:#e4dfd6;--chinh:#d9480f;--chinh2:#b8390a;--xanh:#2b8a3e;--do:#c92a2a;--vang:#e8a400;--xanhnhat:#e6f4ea;--donhat:#fdecec;--vangnhat:#fff6dc} @media (prefers-color-scheme:dark){:root{--nen:#151412;--the:#1f1d1a;--chu:#f1ede6;--mo:#a39d93;--vien:#35322d;--xanhnhat:#183021;--donhat:#3a1d1d;--vangnhat:#3a3018}} *{box-sizing:border-box} body{margin:0;background:var(--nen);color:var(--chu);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} .khung{max-width:480px;margin:0 auto;padding:16px} .rong{max-width:1200px} .the{background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:16px;margin-bottom:14px} h1{font-size:20px;margin:4px 0 12px}h2{font-size:17px;margin:0 0 10px} .mo{color:var(--mo);font-size:14px} input,select{width:100%;padding:11px 12px;border:1px solid var(--vien);border-radius:10px;background:var(--the);color:var(--chu);font:inherit;margin:4px 0 10px} label{font-size:14px;color:var(--mo)} button{font:inherit;border:0;border-radius:10px;padding:11px 16px;background:var(--chinh);color:#fff;cursor:pointer;font-weight:600} button:hover{background:var(--chinh2)}button:disabled{opacity:.5;cursor:default} button.phu{background:transparent;color:var(--chu);border:1px solid var(--vien)} button.nho{padding:6px 10px;font-size:14px} .nut-to{width:100%;padding:22px;font-size:22px;border-radius:16px} .nut-to.ra{background:var(--xanh)} .dong{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dong>*{flex:1} .gio{font-size:44px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px} .tb{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:15px} .tb.ok{background:var(--xanhnhat);color:var(--xanh)}.tb.loi{background:var(--donhat);color:var(--do)}.tb.canh{background:var(--vangnhat)} .so{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;text-align:center} .so b{display:block;font-size:22px} .xanh{color:var(--xanh)}.docam{color:var(--chinh)} table{width:100%;border-collapse:collapse;font-size:14px} th,td{padding:7px 6px;border-bottom:1px solid var(--vien);text-align:left;white-space:nowrap} th{color:var(--mo);font-weight:600} td.so-tien,th.so-tien{text-align:right;font-variant-numeric:tabular-nums} .cuon{overflow-x:auto} .nhan{display:inline-block;padding:1px 7px;border-radius:20px;font-size:12px;font-weight:600} .nhan.muon{background:var(--vangnhat);color:#a06b00}.nhan.loi{background:var(--donhat);color:var(--do)}.nhan.ok{background:var(--xanhnhat);color:var(--xanh)} .nhan.canh{background:var(--vangnhat);color:#a06b00} .cham{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chinh);vertical-align:middle;margin-left:4px} .hs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 12px} .nhomHS{border:1px solid var(--vien);border-radius:12px;padding:12px;margin-bottom:12px} .nhomHS>h3{font-size:15px;margin:0 0 8px;color:var(--mo)} td.giua,th.giua{text-align:center} .tab{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px} .tab button{background:transparent;color:var(--chu);border:1px solid var(--vien);white-space:nowrap} .tab button.chon{background:var(--chu);color:var(--nen)} .an{display:none!important} a{color:var(--chinh)} .luoi td,.luoi th{text-align:center;padding:5px 3px;min-width:30px} .luoi td:first-child,.luoi th:first-child{text-align:left;position:sticky;left:0;background:var(--the)} .luoi td.o{cursor:pointer}.luoi td.o:hover{outline:2px solid var(--chinh)} .o1{background:var(--xanhnhat)}.oNua{background:var(--vangnhat)}.oLoi{background:var(--donhat)} .oNghi{background:#dbeafe;color:#1e40af;font-weight:700} @media (prefers-color-scheme:dark){.oNghi{background:#1e3a5f;color:#bfdbfe}} .cn{color:var(--mo)} td.cn{background:rgba(125,120,110,.09)} /* ---- Việc của người mới (khối onboarding trên màn nhân viên) ---- */ .ob-viec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 8px;border-radius:10px;cursor:pointer;border-bottom:1px solid var(--vien)} .ob-viec:last-child{border-bottom:0} /* Ô tick to 20px: màn này dùng trên điện thoại, ô 13px mặc định thì ngón tay bấm trượt sang dòng bên cạnh — mà bấm trượt ở đây là báo nhầm "em đã nộp" một giấy tờ chưa nộp. */ .ob-viec input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--chinh)} .ob-ten{flex:1 1 180px} .ob-viec.xong .ob-ten{text-decoration:line-through;color:var(--mo)} .ob-han{flex:0 0 auto;font-size:13.5px;color:var(--mo)} .ob-han.do{color:var(--do);font-weight:700} /* ---- Cổng của tôi: lưới 12 mục ---- */ /* 2 cột trên điện thoại. Một cột thì phải cuộn qua 12 ô mới thấy hết — mà cả điểm của màn này là NHÌN MỘT CÁI THẤY TOÀN CẢNH. Khung .khung giới hạn 480px nên 2 cột vẫn đọc được. */ .luoi-muc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px} .o-muc{display:block;width:100%;text-align:left;background:var(--the);border:1px solid var(--vien); border-radius:14px;padding:12px;color:var(--chu);font:inherit;font-weight:400;cursor:pointer} .o-muc:hover{background:var(--the);border-color:var(--chinh)} /* Ô chưa dùng được: mờ đi nhưng VẪN ĐỌC ĐƯỢC chữ. Làm mờ tới mức không đọc nổi thì người ta không biết mục đó là gì, và cũng không đọc được dòng giải thích vì sao nó chưa xong. */ .o-muc.chua{cursor:default;background:transparent;opacity:.72} .o-muc.chua:hover{border-color:var(--vien)} .o-muc-dau{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;min-height:20px} .o-muc-so{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--mo);font-variant-numeric:tabular-nums} .o-muc-ten{font-size:14.5px;font-weight:600;line-height:1.35;margin-bottom:4px} .o-muc-mo{font-size:12.5px;color:var(--mo);line-height:1.4} /* Dòng "đang thiếu gì" — viền trái để tách hẳn khỏi phần mô tả tính năng. Hai dòng này nói về hai thứ khác nhau: mô tả là "mục này SẼ làm gì", ghi chú là "vì sao nay chưa dùng được". */ .o-muc-ghi{margin-top:7px;padding-left:8px;border-left:2px solid var(--vien); font-size:12px;color:var(--mo);line-height:1.4} @media (max-width:359px){.luoi-muc{grid-template-columns:1fr}} /* ================= Cổng của tôi — bản thu gọn (12/11/2026, theo mẫu Sếp gửi) ================= */ .cong-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 16px} .cong-nhan{font-size:11.5px;font-weight:700;letter-spacing:1px;color:var(--mo);text-transform:uppercase;margin-bottom:4px} .cong-chao{font-size:26px;line-height:1.2;margin:0 0 4px;font-weight:700;letter-spacing:-.4px} .chuong{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--the); border:1px solid var(--vien);font-size:19px;padding:0;color:var(--chu)} .chuong:hover{background:var(--the);border-color:var(--chinh)} .chuong .cham{position:absolute;top:8px;right:9px} /* 4 ô số — 2×2. Mẫu Sếp vẽ đúng hình này, và nó cũng là hình duy nhất vừa màn điện thoại mà vẫn để con số đủ to để liếc một cái là đọc được. */ .luoi-so4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px} .o-so4{background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:13px 14px} .o-so4-dau{font-size:12.5px;color:var(--mo);margin-bottom:6px;line-height:1.3} .o-so4-so{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.8px;font-variant-numeric:tabular-nums} .o-so4-phu{font-size:12px;color:var(--mo);margin-top:4px;line-height:1.35} /* 🔴 Ô CHƯA CÓ NGUỒN: dấu "—" mờ hẳn đi, nhưng DÒNG LÝ DO thì giữ nguyên độ đậm. Làm mờ cả cụm thì người ta lướt qua và tưởng mình chưa đạt gì; thứ cần đọc ở đây chính là dòng giải thích, không phải cái dấu gạch. */ .o-so4.chua{background:transparent} .o-so4.chua .o-so4-so{color:var(--mo);opacity:.45} .cong-muc{font-size:18px;font-weight:700;margin:0 0 10px} .viec-dong{display:flex;align-items:center;gap:11px;background:var(--the);border:1px solid var(--vien); border-radius:14px;padding:13px 14px;margin-bottom:9px} .viec-cham{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--mo)} .viec-cham.tre{background:var(--do)} .viec-giua{flex:1 1 auto;min-width:0} .viec-ten{font-weight:600;font-size:15px;line-height:1.35} .viec-tt{flex:0 0 auto;font-size:13px;color:var(--mo)} /* 4 nút tắt — hàng ngang, icon trong ô bo tròn, đúng mẫu */ .cong-tat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 14px} .nut-tat{background:transparent;border:0;padding:0;color:var(--chu);font:inherit;font-size:12.5px; display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;text-align:center} .nut-tat-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:15px;background:var(--the);border:1px solid var(--vien);font-size:21px} .nut-tat:hover .nut-tat-icon{border-color:var(--chinh)} /* Nút chưa mở: mờ đi NHƯNG VẪN BẤM ĐƯỢC — bấm vào nó nói cho biết vì sao chưa có. Dùng `disabled` thì bấm không ra gì, mà không ra gì thì người dùng đọc là app treo. */ .nut-tat.chua{opacity:.5} /* Thanh tab thu gọn (12/11/2026). Trước đó 5 tab nhãn dài tràn khỏi màn 375px, tab cuối bị đẩy khuất mà thanh cuộn ngang trên điện thoại gần như vô hình — người dùng không biết là còn tab. Giảm padding + cỡ chữ để cả 5 cùng nằm trong khung. */ /* Đo thật ở 375px: nhãn hai từ ("Bảng công", "Nghỉ phép", "Phiếu lương") thì 5 tab cần ~430px, tab cuối rơi khỏi màn. Rút còn MỘT TỪ + padding 10px ⇒ tổng ~319px, vừa trong 343px khả dụng. Giữ đủ 5 tab nhìn thấy quan trọng hơn nhãn đầy đủ: tab khuất thì coi như không tồn tại. */ #tabs button{padding:8px 10px;font-size:13.5px;border-radius:9px;white-space:nowrap} /* Nút Đăng xuất không được xuống hai dòng — nó đẩy cả hàng đầu cao gấp đôi mà chẳng thêm gì. */ #nutDangXuat{white-space:nowrap;padding:7px 12px;font-size:13.5px} /* Đồng hồ trên màn Cổng nhỏ hơn bản cũ: nó không còn là thứ duy nhất trên màn nữa, dưới nó còn 4 ô số và danh sách việc. To như cũ (44px) thì đẩy hết phần dưới xuống quá nếp gấp. */ #tCong .gio{font-size:34px;margin-bottom:2px} #theCham{padding:14px 16px} /* ---- Hai thẻ chính cùng cỡ: Chấm công | Việc của tôi (12/11/2026) ---- */ .luoi-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;align-items:stretch} /* `stretch` + flex-column + `margin-top:auto` ở nút ⇒ hai thẻ LUÔN cao bằng nhau và hai cái nút luôn thẳng hàng, kể cả khi một bên có câu trạng thái dài hơn bên kia. Không có nó thì mỗi lần đổi nội dung là hai nút lệch nhau một chút — nhìn lộ ngay là ghép tạm. */ .the-doi{display:flex;flex-direction:column;margin-bottom:0;padding:13px 13px 14px;text-align:center} .the-doi-nhan{font-size:12.5px;color:var(--mo);margin-bottom:6px;line-height:1.3} .the-doi .gio{font-size:32px;letter-spacing:0;margin-bottom:1px} .the-doi .gio.trong{color:var(--mo);opacity:.45} .nho-gon{font-size:12px;line-height:1.35} .the-doi .tb.gon{margin:9px 0 0;padding:6px 8px;font-size:12.5px;line-height:1.35;text-align:center} .the-doi .tb.gon.mo{background:transparent;color:var(--mo);padding:6px 0} /* Nút cỡ vừa — không phải `nut-to` 22px nữa (thẻ chỉ rộng ~165px), nhưng vẫn cao 42px để ngón tay bấm không trượt. `margin-top:auto` đẩy nó xuống đáy thẻ. */ /* 🔴 `border:1px solid transparent` ở nút ĐẶC là cố ý. Không có nó thì nút viền (`.phu`) cao hơn nút đặc đúng 2px — hai cái nút cạnh nhau lệch nhau 2px, đủ để nhìn ra là ghép tạm mà không đủ để biết vì sao. Đo được 45px vs 47px trên bản mẫu ngày 12/11. */ .nut-doi{margin-top:auto;width:100%;padding:11px 8px;font-size:15px;border-radius:11px; min-height:42px;border:1px solid transparent} .nut-doi.ra{background:var(--xanh)} .nut-doi.phu{background:transparent;color:var(--chu);border-color:var(--vien);font-weight:600} /* Ô số nay là