/* ===================================================================== App-dntc — THEME Dựng theo phong cách anh Trung chọn 09/08/2026 (ảnh dashboard tài chính): nền xám nhạt · thẻ trắng bo góc lớn · số to đậm · một màu nhấn duy nhất. ĐỔI MÀU NHẤN: sửa đúng một dòng — thẻ gắn class `mau-cam` (thương hiệu DNTC) hoặc `mau-xanh` (giống hệt ảnh mẫu). Không chỗ nào khác trong app viết mã màu cứng, nên đổi là đổi cả app. MỘT ĐIỀU QUAN TRỌNG: ảnh mẫu là màn hình MÁY TÍNH, nhưng nhân viên DNTC dùng ĐIỆN THOẠI là chính. Nên theme này dựng "điện thoại trước": dưới 900px thì cột trái tự biến thành thanh điều hướng dưới đáy, thẻ xếp dọc, chữ số vẫn to. Cùng một bộ mã, hai dáng. ===================================================================== */ /* ---------- 1. BỘ BIẾN ---------- */ :root { /* Nền và bề mặt */ --nen: #F1F2F4; --the: #FFFFFF; --the-vien: #EBECEF; --the-mo: #F7F8F9; /* thẻ chìm, dùng cho khối phụ bên trong thẻ */ /* Chữ */ --chu: #14161A; --chu-phu: #8A8F98; --chu-nhat: #B4B8BF; /* Màu nhấn — bị class mau-cam / mau-xanh ghi đè */ --nhan: #F07818; --nhan-dam: #D8620B; --nhan-nhat: #FDF0E4; --nhan-chu: #FFFFFF; /* Màu báo trạng thái — dùng chung cho mọi dải nhấn */ --tot: #4CAF50; --tot-nhat: #E9F6EA; --cho: #F5A623; --cho-nhat: #FEF4E4; --xau: #E5484D; --xau-nhat: #FDECEC; /* Bo góc */ --bo-lon: 20px; --bo-vua: 14px; --bo-nho: 10px; --bo-tron: 999px; /* Khoảng cách */ --day: 20px; --khe: 16px; /* Đổ bóng — rất nhẹ, phong cách này không dùng bóng nặng */ --bong: 0 1px 2px rgba(20, 22, 26, .04); --bong-noi: 0 8px 24px rgba(20, 22, 26, .08); /* Chữ */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; } /* Dải cam — thương hiệu DNTC (lấy từ logo: #F07818, vàng #FCD800) */ body.mau-cam { --nhan: #F07818; --nhan-dam: #D8620B; --nhan-nhat: #FDF0E4; --nhan-chu: #FFFFFF; } /* Dải xanh lá — giống hệt ảnh mẫu */ body.mau-xanh { --nhan: #7CC22B; --nhan-dam: #63A31C; --nhan-nhat: #EEF8E2; --nhan-chu: #FFFFFF; } /* Nền tối — để dành, chưa bật. Nhân viên chấm công buổi tối hay chói mắt. */ @media (prefers-color-scheme: dark) { body.theo-may { --nen: #0F1113; --the: #17191C; --the-vien: #24272B; --the-mo: #1D2023; --chu: #F2F3F5; --chu-phu: #8F949C; --chu-nhat: #5E636B; } } /* ---------- 2. NỀN CHUNG ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--nen); color: var(--chu); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* Bỏ hiệu ứng nhấp nháy xanh khi chạm trên iPhone */ * { -webkit-tap-highlight-color: transparent; } /* ---------- 3. KHUNG: CỘT TRÁI + VÙNG CHÍNH ---------- */ .khung { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .cot-trai { background: var(--the); border-right: 1px solid var(--the-vien); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .hieu { display: flex; align-items: center; gap: 10px; padding: 0 10px 20px; font-weight: 800; font-size: 19px; letter-spacing: -.3px; } .hieu .cham { width: 26px; height: 26px; border-radius: 8px; background: var(--nhan); display: grid; place-items: center; color: var(--nhan-chu); font-size: 13px; } /* Mục điều hướng */ .muc { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--bo-vua); color: var(--chu-phu); text-decoration: none; font-weight: 500; border: 0; background: none; width: 100%; cursor: pointer; font-family: inherit; font-size: 15px; text-align: left; position: relative; } .muc:hover { background: var(--the-mo); color: var(--chu); } .muc.dang { background: var(--the-mo); color: var(--chu); font-weight: 650; } /* Vạch nhấn bên trái mục đang mở — chi tiết đặc trưng của phong cách này */ .muc.dang::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nhan); } .muc .bieu { width: 20px; text-align: center; font-size: 17px; flex: none; } .muc .so { margin-left: auto; background: var(--the-mo); color: var(--chu-phu); border-radius: var(--bo-tron); padding: 1px 8px; font-size: 12px; font-weight: 700; } .muc.dang .so { background: var(--nhan-nhat); color: var(--nhan-dam); } .cot-trai .day-ngan { margin-top: auto; } /* ---------- 4. VÙNG CHÍNH ---------- */ .chinh { padding: 22px 24px 40px; min-width: 0; } .dinh { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .dinh h1 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.4px; } .dinh .phu { color: var(--chu-phu); font-size: 14px; margin: 2px 0 0; } .dinh .day-ra { margin-left: auto; display: flex; gap: 10px; align-items: center; } /* Lưới thẻ */ .luoi { display: grid; gap: var(--khe); } .luoi.c2 { grid-template-columns: repeat(2, 1fr); } .luoi.c3 { grid-template-columns: repeat(3, 1fr); } .luoi.chinh-phu { grid-template-columns: 1.6fr 1fr; } /* ---------- 5. THẺ ---------- */ .the { background: var(--the); border: 1px solid var(--the-vien); border-radius: var(--bo-lon); padding: var(--day); box-shadow: var(--bong); } .the.chim { background: var(--the-mo); border-color: transparent; box-shadow: none; } .the-dinh { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .the-dinh h2 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.2px; } .the-dinh .phu { margin: 2px 0 0; color: var(--chu-phu); font-size: 13px; } .the-dinh .day-ra { margin-left: auto; } /* Số lớn — thứ làm nên phong cách này */ .so-lon { font-size: 38px; font-weight: 780; letter-spacing: -1.4px; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; } .so-lon.vua { font-size: 28px; letter-spacing: -.8px; } .so-nho-phu { color: var(--chu-phu); font-size: 13px; margin: 6px 0 0; } /* Dòng "tăng 5,1% so với tháng trước" */ .doi { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; margin-top: 8px; } .doi.len { color: var(--tot); } .doi.xuong{ color: var(--xau); } .doi .sau { color: var(--chu-phu); font-weight: 500; } /* ---------- 6. CHIP, NÚT, HUY HIỆU ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--bo-tron); border: 1px solid var(--the-vien); background: var(--the); color: var(--chu-phu); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .chip.dang { background: var(--chu); color: #fff; border-color: var(--chu); } .nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--bo-vua); border: 1px solid transparent; background: var(--nhan); color: var(--nhan-chu); font-weight: 650; font-size: 15px; font-family: inherit; cursor: pointer; text-decoration: none; } .nut:hover { background: var(--nhan-dam); } .nut.phu { background: var(--the); color: var(--chu); border-color: var(--the-vien); } .nut.phu:hover { background: var(--the-mo); } .nut.to { padding: 15px 22px; font-size: 16px; width: 100%; border-radius: var(--bo-vua); } .huy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--bo-tron); font-size: 12px; font-weight: 650; background: var(--the-mo); color: var(--chu-phu); } .huy.tot { background: var(--tot-nhat); color: var(--tot); } .huy.cho { background: var(--cho-nhat); color: #B87710; } .huy.xau { background: var(--xau-nhat); color: var(--xau); } .huy.nhan{ background: var(--nhan-nhat); color: var(--nhan-dam); } /* ---------- 7. THANH TIẾN TRÌNH ---------- */ .thanh { height: 10px; border-radius: var(--bo-tron); background: var(--the-mo); overflow: hidden; } .thanh > i { display: block; height: 100%; border-radius: var(--bo-tron); background: var(--nhan); } .thanh-nhan { display: flex; justify-content: space-between; font-size: 13px; color: var(--chu-phu); margin-top: 8px; } .thanh-nhan b { color: var(--chu); font-weight: 650; } /* Dải nhiều đoạn màu (như "Cost analysis" trong ảnh mẫu) */ .dai { display: flex; gap: 3px; height: 12px; } .dai > i { display: block; border-radius: 3px; } /* ---------- 8. DANH SÁCH VIỆC ---------- */ .ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ds > li { display: flex; /* Canh theo ĐẦU dòng, không canh giữa. Việc dài xuống 2–3 dòng trên điện thoại thì ô tick phải thẳng hàng với dòng chữ đầu tiên, canh giữa là ô tick trôi xuống giữa khối chữ, nhìn như đang tick vào chỗ trống. */ align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--bo-vua); background: var(--the-mo); } /* Mờ RIÊNG phần chữ, không mờ cả dòng — mờ cả dòng thì ô tick cam cũng nhạt theo, nhìn không ra là đã xong hay chưa. */ .ds > li.xong .noi { text-decoration: line-through; color: var(--chu-phu); } .ds > li.xong .phu { color: var(--chu-nhat); } .ds .o { width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--the-vien); background: var(--the); flex: none; display: grid; place-items: center; cursor: pointer; color: transparent; font-size: 13px; font-weight: 700; } .ds > li.xong .o { background: var(--nhan); border-color: var(--nhan); color: var(--nhan-chu); } .ds .noi { flex: 1; min-width: 0; font-weight: 500; } /* Giờ và huy hiệu bên phải: không co, không dính vào chữ khi chữ xuống dòng. */ .ds .phu, .ds .huy { flex: none; margin-left: auto; padding-left: 4px; } .ds .phu { color: var(--chu-phu); font-size: 13px; margin-top: 2px; } /* ---------- 9. HÀNG NGƯỜI / BẢNG ---------- */ .hang { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--the-vien); } .hang:last-child { border-bottom: 0; } .anh { width: 38px; height: 38px; border-radius: var(--bo-tron); background: var(--nhan-nhat); color: var(--nhan-dam); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; } .hang .ten { font-weight: 600; } .hang .duoi { color: var(--chu-phu); font-size: 13px; } .hang .day-ra { margin-left: auto; text-align: right; } .hang .tien { font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- 10. THANH DƯỚI CHO ĐIỆN THOẠI ---------- */ .thanh-duoi { display: none; } @media (max-width: 900px) { .khung { grid-template-columns: 1fr; } /* Cột trái biến mất, thay bằng thanh dưới đáy — ngón cái với tới được. */ .cot-trai { display: none; } .chinh { padding: 16px 14px 96px; } .luoi.c2, .luoi.c3, .luoi.chinh-phu { grid-template-columns: 1fr; } .the { padding: 16px; border-radius: var(--bo-vua); } .so-lon { font-size: 32px; } .dinh h1 { font-size: 19px; } /* Hàng nút ở đỉnh: trên máy tính nó nằm nép bên phải, trên điện thoại nép phải là vỡ hàng và dồn cục sang một góc. Cho nó xuống hàng riêng, trải đều hết chiều ngang, nút chính to hơn để ngón cái bấm trúng. */ .dinh { gap: 10px; } .dinh .day-ra { margin-left: 0; width: 100%; display: flex; gap: 8px; } .dinh .day-ra .nut { flex: 1; padding: 12px 16px; } .dinh .day-ra .chip { padding: 10px 14px; } .thanh-duoi { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; background: var(--the); border-top: 1px solid var(--the-vien); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 30; } .thanh-duoi a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: var(--bo-nho); color: var(--chu-nhat); text-decoration: none; font-size: 11px; font-weight: 600; } .thanh-duoi a .bieu { font-size: 19px; } .thanh-duoi a.dang { color: var(--nhan); } } /* Máy tính thì ẩn thanh dưới */ @media (min-width: 901px) { .thanh-duoi { display: none !important; } } /* ---------- 11. LẶT VẶT ---------- */ .chi-doc-may { display: none; } @media (min-width: 901px) { .chi-doc-may { display: revert; } } .chi-dien-thoai { display: revert; } @media (min-width: 901px) { .chi-dien-thoai { display: none; } } .tach { height: 1px; background: var(--the-vien); margin: 14px 0; border: 0; } .mo { color: var(--chu-phu); } .so-deu { font-variant-numeric: tabular-nums; }