/* ============================================================ TÀI CHÍNH GIA ĐÌNH — bộ nền giao diện dùng chung Agent 1 giữ file này. Ba trang còn lại chỉ DÙNG, không sửa. Viết cho điện thoại 375px trước, máy tính mở rộng sau. ============================================================ */ /* ---------- 1. Bảng màu (chép nguyên từ hợp đồng) ---------- */ :root { --bg-dark-1:#1a0d3a; --bg-dark-2:#2d1659; --bg-dark-3:#3a1e6e; --red:#ff1f3d; --red-dark:#d4163a; --orange:#ff7a1a; --gold:#ffd84a; --gold-warm:#ffbc01; --green:#00c87a; --white:#ffffff; --ink:#1a0d3a; --text:#2d1659; --text-soft:#5a4a7a; --text-muted:#908a9e; --card:#ffffff; --card-soft:#fff6e0; --line:#ece7f5; --bg-page:#fafafa; /* Nền tối dùng lặp nhiều nơi */ --nen-tim: linear-gradient(135deg, #1a0d3a 0%, #3a1e6e 50%, #1a0d3a 100%); --nen-do-cam: linear-gradient(135deg, #ff1f3d 0%, #ff7a1a 100%); /* ---- Bộ màu ĐỔI THEO SỔ (xem mục 4B ở dưới) ---- Mặc định là sổ GIA ĐÌNH, y hệt màu cũ — không lệch một pixel. Sổ công ty chỉ việc đặt lại đúng mấy biến này ở body.so-cong-ty, khỏi phải viết lại từng lớp. */ --nen-thanh-tren: var(--nen-tim); /* nền thanh trên cùng, thẻ "Còn lại" */ --nen-thanh-tab: #2d1659; /* nền thanh chuyển trang, nền đầu bảng */ --nen-chuyen-so: #241148; /* nền dải nút gạt chuyển sổ */ --nhan: #3a1e6e; /* màu nhấn: viền ô nhập, viền nút phụ */ --nhan-mo: rgba(58,30,110,0.12); /* quầng sáng quanh ô nhập đang gõ */ --chu-thanh-mo: #b8acd0; /* chữ mờ nằm trên nền tối */ /* Chiều cao hai thanh dính trên đầu — để xếp chồng cho khớp */ --cao-thanh-tren: 56px; --cao-chuyen-so: 56px; /* Bo góc */ --bo-the:14px; --bo-nut:10px; --bo-vien:30px; /* Đổ bóng */ --bong-the: 0 2px 12px rgba(26,13,58,0.06); --bong-the-noi: 0 8px 28px rgba(26,13,58,0.12); --bong-nut: 0 8px 28px rgba(255,31,61,0.35); /* Nhịp chuyển động */ --nhanh: 0.15s ease; --vua: 0.25s ease; } /* ---------- 1B. Sổ CÔNG TY — chỉ đổi lại mấy biến màu ở trên ---------- chung.js gắn lớp .so-cong-ty vào thẻ khi đang mở sổ công ty. Tím than đổi thành xanh mực. Đỏ (chi) · xanh lá (thu) · vàng (nhấn) giữ nguyên ở cả hai sổ, để nhìn con số là hiểu ngay, khỏi học lại. Bỏ lớp này ra thì trang trở về y hệt sổ gia đình. */ body.so-cong-ty { --nen-thanh-tren: linear-gradient(135deg, #0b4f6c 0%, #12718f 50%, #0b4f6c 100%); --nen-thanh-tab: #0a4257; --nen-chuyen-so: #08374a; --nhan: #0b4f6c; --nhan-mo: rgba(11,79,108,0.14); --chu-thanh-mo: #a8c8d6; } /* ---------- 2. Gỡ lề mặc định, đặt nền ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: clamp(15px, 2vw, 17px); line-height: 1.55; color: var(--text); background: var(--bg-page); -webkit-font-smoothing: antialiased; /* chặn cả trang trượt ngang trên điện thoại */ overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } h1, h2, h3, h4 { line-height: 1.2; font-weight: 900; color: var(--ink); } h1 { font-size: clamp(28px, 5.5vw, 44px); } h2 { font-size: clamp(20px, 3.4vw, 28px); } h3 { font-size: clamp(16px, 2.4vw, 20px); } /* ---------- 3. Khung trang ---------- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 18px; } /* Khoảng cách dọc chuẩn giữa các khối */ .khoi { margin-top: 16px; } .khoi-lon { margin-top: 24px; } /* ---------- 4. Thanh trên cùng ---------- */ .thanh-tren { position: sticky; top: 0; z-index: 90; background: var(--nen-thanh-tren); transition: background var(--vua); color: var(--white); box-shadow: 0 4px 16px rgba(26,13,58,0.28); } .thanh-tren__trong { max-width: 1100px; margin: 0 auto; padding: 10px 18px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .thanh-tren__trai { display: flex; align-items: center; gap: 10px; min-width: 0; } .thanh-tren__icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(255,216,74,0.15); border: 1px solid rgba(255,216,74,0.35); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } .thanh-tren__ten { font-size: 16px; font-weight: 900; color: var(--white); letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thanh-tren__phu { display: block; font-size: 11px; font-weight: 600; color: var(--chu-thanh-mo); letter-spacing: 0.6px; margin-top: 1px; } .nut-thoat { flex-shrink: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: var(--white); border-radius: var(--bo-nut); padding: 0 14px; min-height: 40px; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--nhanh), border-color var(--nhanh); } .nut-thoat:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,216,74,0.5); } .nut-thoat:active { transform: translateY(1px); } /* ---------- 5. Thanh chuyển trang ---------- */ .thanh-tab { /* Dính dưới thanh trên cùng VÀ dưới dải chuyển sổ, nên phải cộng cả hai */ position: sticky; top: calc(var(--cao-thanh-tren) + var(--cao-chuyen-so)); z-index: 80; background: var(--nen-thanh-tab); transition: background var(--vua); border-bottom: 1px solid rgba(255,255,255,0.08); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .thanh-tab::-webkit-scrollbar { display: none; } .thanh-tab__trong { max-width: 1100px; margin: 0 auto; padding: 0 18px; display: flex; gap: 4px; } .thanh-tab__muc { flex: 1 0 auto; min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--chu-thanh-mo); text-decoration: none; white-space: nowrap; background: none; border: none; cursor: pointer; border-bottom: 3px solid transparent; transition: color var(--nhanh), border-color var(--nhanh); } .thanh-tab__muc:hover { color: #e4dcf2; } .thanh-tab__muc.dang-mo { color: var(--gold); border-bottom-color: var(--gold); } /* ---------- 5B. Nút gạt CHUYỂN SỔ ---------- Nằm ngay dưới thanh trên cùng, trên thanh chuyển trang. Kiểu nút gạt hai bên như công tắc: con trượt trắng chạy qua chạy lại. chung.js dựng phần chữ, ở đây chỉ lo hình. Chiều cao khoá cứng bằng --cao-chuyen-so để thanh chuyển trang dính bên dưới không bao giờ bị lệch. */ .chuyen-so { position: sticky; top: var(--cao-thanh-tren); z-index: 85; height: var(--cao-chuyen-so); background: var(--nen-chuyen-so); box-shadow: 0 2px 10px rgba(26,13,58,0.18); transition: background var(--vua); } .chuyen-so__trong { max-width: 1100px; height: 100%; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; } .chuyen-so__hop { --vi-tri: 0; /* chung.js đặt lại: 0 = gia đình · 1 = công ty */ position: relative; flex: 1 1 auto; max-width: 420px; display: flex; gap: 0; padding: 4px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; } /* Con trượt trắng — đúng bằng nửa khung, chạy sang phải 100% bề ngang của nó */ .chuyen-so__truot { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,0.28); transform: translateX(calc(var(--vi-tri) * 100%)); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .chuyen-so__nut { position: relative; z-index: 1; flex: 1 1 50%; min-width: 0; min-height: 44px; /* ngón tay bấm được trên điện thoại */ display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; background: none; border: none; cursor: pointer; border-radius: 9px; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; color: var(--chu-thanh-mo); transition: color var(--vua); -webkit-tap-highlight-color: transparent; } .chuyen-so__nut:hover { color: var(--white); } .chuyen-so__nut.dang-chon { color: var(--nhan); } .chuyen-so__nut.dang-chon:hover { color: var(--nhan); } .chuyen-so__nut:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .chuyen-so__icon { font-size: 16px; line-height: 1; flex-shrink: 0; } .chuyen-so__ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .chuyen-so__truot { transition: none; } .thanh-tren, .thanh-tab, .chuyen-so { transition: none; } } /* ---------- 6. Thẻ trắng chung ---------- */ .the { background: var(--card); border-radius: var(--bo-the); padding: 20px; box-shadow: var(--bong-the); } .the__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .the__tieu-de { font-size: 16px; font-weight: 900; color: var(--ink); } /* ---------- 7. Thẻ số liệu ---------- */ .the-so { background: var(--card); border-radius: var(--bo-the); padding: 16px; box-shadow: var(--bong-the); border-top: 3px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: transform var(--vua), box-shadow var(--vua); } .the-so:hover { box-shadow: var(--bong-the-noi); } .the-so__nhan { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .the-so__so { /* Số tiền dài như 18.400.000đ phải nằm gọn 1 dòng ở bề ngang 375px. Không cho bẻ giữa con số — chỉ chữ có dấu cách mới được xuống dòng. */ font-size: clamp(18px, 4.6vw, 30px); font-weight: 900; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; word-break: normal; overflow-wrap: normal; } .the-so__phu { font-size: 12px; color: var(--text-soft); } .the-so--chi { border-top-color: var(--red); } .the-so--chi .the-so__so { color: var(--red); } .the-so--thu { border-top-color: var(--green); } .the-so--thu .the-so__so { color: var(--green); } .the-so--vang { background: var(--nen-thanh-tren); border-top-color: var(--gold); box-shadow: 0 8px 28px rgba(26,13,58,0.22); } .the-so--vang .the-so__nhan { color: var(--chu-thanh-mo); } .the-so--vang .the-so__so { color: var(--gold); } .the-so--vang .the-so__phu { color: #d6cce8; } /* Lưới thẻ số: điện thoại 2 cột nhỏ */ .luoi-so { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .luoi-so > .rong-het { grid-column: 1 / -1; } /* ---------- 8. Thanh tiến trình ngân sách ---------- */ .thanh-ngan-sach { --day: 0%; /* trang gọi đặt lại bằng style="--day:64%" */ height: 10px; background: var(--line); border-radius: var(--bo-vien); overflow: hidden; position: relative; } .thanh-ngan-sach__day { display: block; height: 100%; width: var(--day); max-width: 100%; border-radius: var(--bo-vien); background: linear-gradient(90deg, #00c87a 0%, #00e08c 100%); transform-origin: left center; animation: chay-ngang 0.6s cubic-bezier(.2,.8,.2,1) both; } /* 80–100% ngân sách */ .thanh-ngan-sach--sap .thanh-ngan-sach__day { background: linear-gradient(90deg, #ff9a3d 0%, #ff7a1a 100%); } /* trên 100% ngân sách */ .thanh-ngan-sach--vuot .thanh-ngan-sach__day { background: linear-gradient(90deg, #ff4d64 0%, #ff1f3d 100%); } .thanh-ngan-sach--nho { height: 6px; } .thanh-ngan-sach--to { height: 14px; } @keyframes chay-ngang { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* dòng chữ đi kèm thanh */ .thanh-ngan-sach__chu { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-soft); margin-bottom: 6px; } .thanh-ngan-sach__chu b { font-variant-numeric: tabular-nums; color: var(--ink); } @media (prefers-reduced-motion: reduce) { .thanh-ngan-sach__day { animation: none; } } /* ---------- 9. Thẻ nhóm chi ---------- */ .the-nhom { background: var(--card); border-radius: var(--bo-the); padding: 14px 16px; box-shadow: var(--bong-the); display: grid; grid-template-columns: 42px 1fr auto; grid-template-areas: "icon ten tien" "icon thanh thanh"; column-gap: 12px; row-gap: 8px; align-items: center; transition: transform var(--vua), box-shadow var(--vua); } .the-nhom:hover { transform: translateY(-2px); box-shadow: var(--bong-the-noi); } .the-nhom__icon { grid-area: icon; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; background: var(--card-soft); /* trang gọi đặt màu riêng: style="--mau:#ff7a1a" */ box-shadow: inset 0 0 0 2px var(--mau, var(--line)); } .the-nhom__ten { grid-area: ten; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .the-nhom__phu { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); } .the-nhom__tien { grid-area: tien; font-size: 15px; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; } .the-nhom .thanh-ngan-sach { grid-area: thanh; } .the-nhom--thu .the-nhom__tien { color: var(--green); } /* ---------- 10. Bảng ---------- */ .bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border-radius: var(--bo-the); box-shadow: var(--bong-the); max-height: 70vh; } .bang { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; /* hẹp hơn thì cuộn ngang trong khung riêng */ } .bang thead th { position: sticky; top: 0; z-index: 2; background: var(--nen-thanh-tab); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; text-align: left; padding: 12px 14px; white-space: nowrap; } .bang tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .bang tbody tr:nth-child(even) { background: #faf8fd; } .bang tbody tr:hover { background: var(--card-soft); } .bang tbody tr:last-child td { border-bottom: none; } .bang .phai { text-align: right; } .bang .giua { text-align: center; } .bang .khong-xuong { white-space: nowrap; } /* dòng đã xoá: vẫn hiện, chỉ mờ và gạch ngang */ .bang tr.da-xoa td { opacity: 0.45; text-decoration: line-through; } /* ---------- 11. Nút ---------- */ .nut-chinh, .nut-phu, .nut-vang { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--bo-nut); font-size: 15px; font-weight: 900; letter-spacing: 0.3px; text-decoration: none; cursor: pointer; border: none; transition: transform var(--nhanh), box-shadow var(--nhanh), background var(--nhanh); } .nut-chinh { background: var(--nen-do-cam); color: var(--white); box-shadow: var(--bong-nut), inset 0 -3px 0 rgba(0,0,0,0.18); } .nut-chinh:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,31,61,0.45), inset 0 -3px 0 rgba(0,0,0,0.18); } .nut-chinh:active { transform: translateY(0); } .nut-phu { background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: var(--bong-the); } .nut-phu:hover { border-color: var(--nhan); color: var(--ink); } .nut-phu.dang-chon { border-color: var(--nhan); background: var(--card-soft); color: var(--ink); } .nut-vang { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%); color: #6b4400; box-shadow: 0 6px 20px rgba(255,188,1,0.32); } .nut-vang:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,188,1,0.45); } .nut-chinh:disabled, .nut-phu:disabled, .nut-vang:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .nut--rong { width: 100%; } .nut--nho { min-height: 36px; padding: 0 14px; font-size: 13px; } /* ---------- 12. Ô nhập ---------- */ .o-nhap-boc { display: block; margin-bottom: 14px; } .nhan-o { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .nhan-o .bat-buoc { color: var(--red); } .o-nhap { width: 100%; min-height: 46px; padding: 11px 14px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--bo-nut); color: var(--ink); transition: border-color var(--nhanh), box-shadow var(--nhanh); -webkit-appearance: none; appearance: none; } .o-nhap::placeholder { color: var(--text-muted); } .o-nhap:focus { outline: none; border-color: var(--nhan); box-shadow: 0 0 0 4px var(--nhan-mo); } .o-nhap:disabled { background: #f6f4fa; color: var(--text-muted); } .o-nhap.co-loi { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,31,61,0.12); } textarea.o-nhap { min-height: 84px; resize: vertical; } select.o-nhap { background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; } /* ô nhập có nút bên trong (ví dụ con mắt xem mật khẩu) */ .o-nhap-co-nut { position: relative; } .o-nhap-co-nut .o-nhap { padding-right: 50px; } .nut-trong-o { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; border-radius: 8px; font-size: 17px; line-height: 1; color: var(--text-soft); transition: background var(--nhanh); } .nut-trong-o:hover { background: var(--line); } /* ---------- 13. Viên nhãn ---------- */ .vien { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: var(--bo-vien); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--line); color: var(--text-soft); } .vien--chi { background: #ffe8ec; color: var(--red-dark); } .vien--thu { background: #dcfbef; color: #027a4c; } .vien--canh-bao { background: #fff0dd; color: #a1500a; } .vien--nghi-ngo { background: #f1ecfb; color: #5a3fa8; } /* ---------- 14. Khối cảnh báo ---------- */ .canh-bao { background: #fff4e2; border: 1px solid #ffd9a8; border-left: 5px solid var(--orange); border-radius: var(--bo-nut); padding: 14px 16px; color: #6b4400; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; } .canh-bao__icon { flex-shrink: 0; font-size: 17px; line-height: 1.35; } .canh-bao b, .canh-bao strong { color: #8a3d00; } .canh-bao + .canh-bao { margin-top: 10px; } /* nặng hơn: đã vượt hạn mức */ .canh-bao--vuot { background: #fff0f2; border-color: #ffc3cd; border-left-color: var(--red); color: #8c0f22; } .canh-bao--vuot b, .canh-bao--vuot strong { color: var(--red-dark); } /* ---------- 15. Trạng thái rỗng ---------- */ .trong { text-align: center; padding: 40px 20px; color: var(--text-soft); } .trong__icon { font-size: 42px; line-height: 1; opacity: 0.35; margin-bottom: 12px; } .trong__chu { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .trong__goi-y { font-size: 13px; color: var(--text-muted); max-width: 380px; margin: 0 auto; } .trong .nut-chinh, .trong .nut-phu { margin-top: 16px; } /* ---------- 16. Khung xương chờ tải ---------- */ .dang-tai { position: relative; color: transparent !important; border-radius: 8px; background: linear-gradient(90deg, #eee9f6 25%, #f7f4fc 50%, #eee9f6 75%); background-size: 400% 100%; animation: lap-lanh 1.3s ease-in-out infinite; pointer-events: none; user-select: none; } .dang-tai * { visibility: hidden; } /* dòng xương rời, dùng khi muốn dựng khung tay */ .xuong { height: 14px; border-radius: 7px; margin-bottom: 10px; background: linear-gradient(90deg, #eee9f6 25%, #f7f4fc 50%, #eee9f6 75%); background-size: 400% 100%; animation: lap-lanh 1.3s ease-in-out infinite; } .xuong--to { height: 26px; } .xuong--ngan { width: 45%; } .xuong--the { height: 92px; border-radius: var(--bo-the); } @keyframes lap-lanh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .dang-tai, .xuong { animation: none; } } /* ---------- 17. Dải báo lỗi (chung.js gọi) ---------- */ .dai-loi { position: fixed; left: 0; right: 0; top: 0; z-index: 999; background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%); color: var(--white); padding: 12px 18px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 20px rgba(255,31,61,0.35); animation: tut-xuong 0.2s ease both; } .dai-loi__dong { background: rgba(0,0,0,0.2); border: none; color: var(--white); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 14px; line-height: 1; } @keyframes tut-xuong { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Lời báo lỗi nằm trong thẻ (trang đăng nhập dùng) */ .loi-trong-the { background: #fff0f2; border: 1px solid #ffc3cd; border-left: 4px solid var(--red); color: var(--red-dark); border-radius: var(--bo-nut); padding: 11px 14px; font-size: 14px; font-weight: 700; display: flex; align-items: flex-start; gap: 8px; animation: rung 0.3s ease; } @keyframes rung { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { .loi-trong-the, .dai-loi { animation: none; } } /* ---------- 18. Lớp tiện ích ---------- */ .an { display: none !important; } .chu-nho { font-size: 12px; } .chu-mo { color: var(--text-muted); } .so-tien { font-variant-numeric: tabular-nums; font-weight: 900; } .so-tien--chi { color: var(--red); } .so-tien--thu { color: var(--green); } .tang { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; } .giam { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; } .giua-chu { text-align: center; } .phai-chu { text-align: right; } .hang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hang--giua { justify-content: space-between; } .cot { display: flex; flex-direction: column; gap: 12px; } .chi-may-tinh { display: none; } /* chỉ hiện trên máy tính */ /* ---------- 19. Trang đăng nhập ---------- */ .nen-dang-nhap { min-height: 100vh; min-height: 100dvh; background: var(--nen-tim); display: flex; align-items: center; justify-content: center; padding: 24px 18px; position: relative; overflow: hidden; } /* hai quầng sáng mờ như trang bán hàng */ .nen-dang-nhap::before { content: ''; position: absolute; top: -25%; right: -30%; width: 620px; height: 620px; pointer-events: none; background: radial-gradient(circle, rgba(255,122,26,0.22) 0%, transparent 70%); } .nen-dang-nhap::after { content: ''; position: absolute; bottom: -30%; left: -25%; width: 560px; height: 560px; pointer-events: none; background: radial-gradient(circle, rgba(255,31,61,0.16) 0%, transparent 70%); } .the-dang-nhap { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--card); border-radius: var(--bo-the); padding: 32px 24px 26px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); animation: noi-len 0.3s ease both; } @keyframes noi-len { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .the-dang-nhap { animation: none; } } /* ---------- 20. Máy tính bảng và máy tính ---------- */ @media (min-width: 768px) { .container { padding: 0 24px; } .thanh-tren__trong { min-height: 64px; padding: 12px 24px; } .thanh-tren__icon { width: 40px; height: 40px; font-size: 21px; } .thanh-tren__ten { font-size: 19px; } /* Thanh trên cao lên 64px thì hai thanh dính bên dưới phải tụt theo */ :root { --cao-thanh-tren: 64px; --cao-chuyen-so: 58px; } .thanh-tab__trong { padding: 0 24px; gap: 8px; } .thanh-tab__muc { flex: 0 0 auto; min-height: 52px; font-size: 16px; } .chuyen-so__trong { padding: 0 24px; } .chuyen-so__hop { max-width: 460px; } .chuyen-so__nut { font-size: 16px; min-height: 46px; } .the { padding: 24px; } .the-so { padding: 20px; } .luoi-so { grid-template-columns: repeat(4, 1fr); gap: 16px; } .luoi-so > .rong-het { grid-column: auto; } .the-nhom { grid-template-columns: 48px 1fr 160px; grid-template-areas: "icon ten tien" "icon thanh tien"; padding: 16px 20px; } .the-nhom__icon { width: 48px; height: 48px; font-size: 22px; } .the-nhom__tien { font-size: 17px; text-align: right; } .bang { font-size: 15px; min-width: 0; } .bang thead th, .bang tbody td { padding: 14px 18px; } .the-dang-nhap { padding: 40px 34px 30px; max-width: 420px; } .chi-may-tinh { display: revert; } .chi-dien-thoai { display: none; } } @media (min-width: 1024px) { .luoi-nhom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* ============================================================ 21. TRANG XEM THEO NGÀY (thêm ngày 22/08/2026) Mọi lớp mới đều mở đầu bằng "tn-" để không giẫm chân lên phần trên. Chỉ THÊM, không sửa một dòng nào của các mục 1–20. ============================================================ */ /* Chiều cao thanh chuyển trang — thanh chọn ngày phải dính ngay dưới nó, nên cần biết nó cao bao nhiêu. Điện thoại 48px, máy tính 52px (đúng bằng min-height của .thanh-tab__muc ở mục 5). */ :root { --cao-thanh-tab: 48px; } @media (min-width: 768px) { :root { --cao-thanh-tab: 52px; } } /* Thanh chuyển trang nay có BA mục. Ở màn hình hẹp, ba mục cỡ cũ là tràn ra ngoài, phải cuộn ngang mới thấy hết. Bóp nhẹ chữ và lề lại cho vừa. Bộ chọn dưới đây CHỈ trúng khi thanh có đúng ba mục — thanh hai mục như trước vẫn giữ nguyên cỡ cũ, không lệch một pixel. */ @media (max-width: 480px) { .thanh-tab__muc:first-child:nth-last-child(3), .thanh-tab__muc:first-child:nth-last-child(3) ~ .thanh-tab__muc { padding: 0 9px; font-size: 14px; gap: 5px; } } /* ---------- 21.1 Thanh chọn ngày ---------- */ .tn-thanh-ngay { position: sticky; top: calc(var(--cao-thanh-tren) + var(--cao-chuyen-so) + var(--cao-thanh-tab)); z-index: 75; margin-top: 14px; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--bo-the); box-shadow: var(--bong-the); } /* Hai mũi tên tới lui */ .tn-mui { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--card-soft); border: 1.5px solid var(--line); border-radius: var(--bo-nut); font-size: 20px; font-weight: 900; line-height: 1; color: var(--nhan); cursor: pointer; transition: background var(--nhanh), border-color var(--nhanh), transform var(--nhanh); -webkit-tap-highlight-color: transparent; } .tn-mui:hover:not(:disabled) { border-color: var(--nhan); background: var(--line); } .tn-mui:active:not(:disabled) { transform: scale(0.94); } .tn-mui:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* Ở hôm nay thì không có ngày mai để xem — mờ hẳn và không bấm được */ .tn-mui:disabled { opacity: 0.3; cursor: not-allowed; background: var(--card); } /* Ô ngày ở giữa — bấm vào mở lịch của máy */ .tn-o-ngay { position: relative; flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: var(--bo-nut); transition: background var(--nhanh), box-shadow var(--nhanh); } .tn-o-ngay:hover { background: var(--card-soft); } .tn-ngay-chu { font-size: clamp(14px, 3.7vw, 19px); font-weight: 900; color: var(--ink); line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn-ngay-chu::after { content: ' \25BE'; color: var(--text-muted); font-size: 0.78em; font-weight: 700; } /* Ô lịch thật nằm trong suốt phủ kín ô ngày: chạm chỗ nào cũng mở lịch, mà vẫn dùng được bàn phím vì nó là ô nhập thứ thiệt. */ .tn-lich { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; background: none; padding: 0; } .tn-o-ngay:focus-within { background: var(--card-soft); box-shadow: 0 0 0 3px var(--nhan-mo); } /* Nút Hôm nay — chỉ hiện khi đang xem ngày khác */ .tn-hom-nay { flex: 0 0 auto; min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-warm) 100%); color: #6b4400; border: none; border-radius: var(--bo-nut); font-size: 13px; font-weight: 900; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 14px rgba(255,188,1,0.32); transition: transform var(--nhanh), box-shadow var(--nhanh); } .tn-hom-nay:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(255,188,1,0.45); } .tn-hom-nay:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; } /* ---------- 21.2 Ba thẻ số — điện thoại vẫn một hàng ba ---------- */ .tn-luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* Bóp lại cho ba thẻ nằm vừa bề ngang 375px mà chữ không tràn ra ngoài */ .tn-luoi-3 > .the-so { padding: 12px 9px; gap: 3px; min-width: 0; } .tn-luoi-3 .the-so__nhan { font-size: 10px; letter-spacing: 0.3px; line-height: 1.25; gap: 4px; align-items: flex-start; } .tn-luoi-3 .the-so__so { font-size: clamp(13px, 3.3vw, 26px); letter-spacing: -0.5px; line-height: 1.15; } .tn-luoi-3 .the-so__phu { font-size: 11px; line-height: 1.3; } /* Thẻ so sánh: mũi tên lên đỏ, xuống xanh — dùng lại lớp .tang / .giam */ .tn-luoi-3 .the-so__so.tang { color: var(--red); } .tn-luoi-3 .the-so__so.giam { color: var(--green); } .tn-luoi-3 .the-so__so.chu-mo { color: var(--text-muted); } .the-so--so-sanh { border-top-color: var(--nhan); } @media (min-width: 768px) { .tn-luoi-3 { gap: 16px; } .tn-luoi-3 > .the-so { padding: 20px; gap: 5px; } .tn-luoi-3 .the-so__nhan { font-size: 12px; letter-spacing: 0.8px; } } /* ---------- 21.3 Dải bảy ngày gần nhất ---------- */ .tn-dai7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .tn-cot { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 7px; background: none; border: 1.5px solid transparent; border-radius: 11px; cursor: pointer; min-width: 0; transition: background var(--nhanh), border-color var(--nhanh), transform var(--nhanh); -webkit-tap-highlight-color: transparent; } .tn-cot:hover { background: var(--card-soft); } .tn-cot:active { transform: scale(0.96); } .tn-cot:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; } /* Ngày đang xem — tô vàng cho nhìn phát thấy ngay */ .tn-cot.dang-chon { background: var(--card-soft); border-color: var(--gold-warm); box-shadow: 0 2px 10px rgba(255,188,1,0.28); } /* Rãnh dựng cột: cao cố định nên bảy cột không nhảy hình */ .tn-cot__ranh { width: 100%; max-width: 26px; height: 46px; display: flex; align-items: flex-end; background: var(--line); border-radius: 5px; overflow: hidden; } .tn-cot__day { width: 100%; height: var(--cao, 0%); background: linear-gradient(180deg, #ff4d64 0%, #ff1f3d 100%); border-radius: 5px; transition: height 0.3s cubic-bezier(.2,.8,.2,1); } .tn-cot.dang-chon .tn-cot__day { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-warm) 100%); } /* Ngày không có khoản nào: một vạch xám mảnh, KHÔNG phải cột 0 giả */ .tn-cot__day--trong { height: 3px; background: #ddd6ea; } .tn-cot__thu { font-size: 11px; font-weight: 700; color: var(--text-muted); line-height: 1; } .tn-cot__so { font-size: 13px; font-weight: 900; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .tn-cot.dang-chon .tn-cot__thu { color: #a1500a; } .tn-cot.dang-chon .tn-cot__so { color: #6b4400; } @media (prefers-reduced-motion: reduce) { .tn-cot__day { transition: none; } } /* ---------- 21.4 Danh sách khoản trong ngày ---------- */ .tn-ds { display: flex; flex-direction: column; } .tn-dong { width: 100%; text-align: left; display: grid; grid-template-columns: 44px 34px 1fr auto; align-items: center; column-gap: 10px; padding: 11px 4px; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; transition: background var(--nhanh); -webkit-tap-highlight-color: transparent; } .tn-ds > .tn-dong:first-child { border-top: none; } .tn-dong:hover { background: var(--card-soft); } .tn-dong:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; } .tn-gio { font-size: 13px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; } .tn-tron { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; background: var(--card-soft); box-shadow: inset 0 0 0 2px var(--mau, var(--line)); } .tn-giua { min-width: 0; } .tn-mota { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tn-phu { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tn-phai { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .tn-phai .so-tien { font-size: 15px; white-space: nowrap; } .tn-phai .vien { font-size: 10px; padding: 2px 8px; } /* Khoản độ chắc thấp — nền vàng nhạt, nhắc anh soát lại */ .tn-dong--ngo { background: #fffaeb; } .tn-dong--ngo:hover { background: #fff4d6; } /* Khoản đã huỷ — gạch ngang, mờ, không tính vào tổng */ .tn-dong--huy { opacity: 0.5; } .tn-dong--huy .tn-mota, .tn-dong--huy .tn-phu, .tn-dong--huy .so-tien, .tn-dong--huy .tn-gio { text-decoration: line-through; } .vien--huy { background: #eceaf1; color: #6c6579; text-decoration: none; } /* Dòng đang mở chi tiết */ .tn-dong[aria-expanded="true"] { background: var(--card-soft); } /* ---------- 21.5 Khối chi tiết trượt xuống ---------- */ .tn-ct { max-height: 0; overflow: hidden; transition: max-height 0.26s cubic-bezier(.2,.8,.2,1); background: #faf8fd; border-radius: 10px; } .tn-ct.tn-mo { max-height: 640px; } .tn-ct__trong { padding: 14px; } .tn-ct__luoi { display: grid; gap: 8px; } .tn-ct__truong { display: grid; grid-template-columns: 104px 1fr; gap: 10px; font-size: 13px; align-items: baseline; } .tn-ct__ten { color: var(--text-muted); font-weight: 700; } .tn-ct__gia { color: var(--ink); word-break: break-word; } .tn-ma { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--line); padding: 1px 6px; border-radius: 5px; } @media (prefers-reduced-motion: reduce) { .tn-ct { transition: none; } } @media (min-width: 768px) { .tn-ct__luoi { grid-template-columns: repeat(2, 1fr); gap: 8px 24px; } } /* ---------- 21.6 Chân trang: xem cả tháng ---------- */ .tn-chan { margin: 20px 0 34px; text-align: center; } .tn-chan .nut-phu { min-width: 220px; }