/* Font sản phẩm: Be Vietnam Pro — file nằm sẵn trong public/fonts/, khai báo @font-face ở public/css/fonts.css, nạp bằng thẻ riêng. KHÔNG @import ra Google Fonts ở đây: @import là lời gọi mạng CHẶN việc vẽ trang, và còn ẩn hơn thẻ vì nó nằm trong file CSS chứ không ở — đã có lần gỡ CDN khỏi HTML mà quên mất dòng này. */ /* ============================================ DESIGN TOKENS — DevDash Generated Quy định toàn bộ giá trị visual cho project. AI coder: LUÔN dùng var(--xxx), KHÔNG hardcode giá trị. ============================================ */ :root { /* ---- Colors ---- */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-light: #dbeafe; --color-secondary: #64748b; --color-secondary-hover: #475569; --color-success: #16a34a; --color-success-light: #dcfce7; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-warning: #d97706; --color-warning-light: #fef3c7; --color-info: #0891b2; --color-info-light: #cffafe; /* ---- Background ---- */ --color-bg: #ffffff; --color-bg-secondary: #f8fafc; --color-bg-tertiary: #f1f5f9; /* ---- Text ---- */ --color-text: #1e293b; --color-text-secondary: #64748b; --color-text-tertiary: #94a3b8; --color-text-inverse: #ffffff; /* ---- Border ---- */ --color-border: #e2e8f0; --color-border-hover: #cbd5e1; --color-border-focus: #2563eb; /* ---- Spacing ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ---- Typography ---- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-loose: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---- Border Radius ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ---- Shadow ---- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* ---- Transition ---- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ---- Layout ---- */ --container-max: 1200px; --sidebar-width: 260px; --header-height: 64px; } /* ========================================================================== APP TOKENS — QuanLyPhongTap Port 1:1 hệ thống thiết kế của Mockups/index.html (Tailwind CDN) sang CSS thuần. Đây là NHÓM TOKEN DÙNG CHO MỌI MÀN HÌNH SẢN PHẨM. Nhóm token mặc định ở trên (--color-primary, --font-size-*) được GIỮ NGUYÊN để không phá các trang cũ — KHÔNG dùng cho màn hình mới. ========================================================================== */ :root { /* ---- Bảng màu (lấy nguyên văn từ mockup, không làm tròn) ---------------- */ --color-ink: #14181F; /* chữ chính */ --color-muted: #69727F; /* chữ phụ — 4.87:1 trên nền trắng (AA) */ --color-muted-strong: #5F6875;/* chữ phụ đặt TRỰC TIẾP trên nền paper — 4.98:1 (AA) */ --color-faint: #98A0AC; /* CHỈ cho hình trang trí. KHÔNG dùng cho chữ/icon điều khiển */ --color-line: #E1E5EB; /* viền */ --color-paper: #EFF1F4; /* nền app */ --color-surface: #FFFFFF; /* nền thẻ, panel, header, tabbar */ --color-brand: #0F4C81; /* xanh chủ đạo */ --color-brand-dark: #0B3A64; /* trạng thái :active của nút chủ đạo */ --color-brand-soft: #E6EEF6; /* nền nhạt */ /* Nền nhạt ĐẬM HƠN một bậc — chỉ dùng cho :hover của dòng ĐANG ĐƯỢC CHỌN. Không đậm hơn nữa được: tối thêm là --color-muted-strong tụt dưới 4.5:1. */ --color-brand-soft-hover: #DFE9F3; --color-ok: #0E7A3C; /* Đang tập */ --color-ok-soft: #E3F2E8; --color-warn: #9A5B00; /* Sắp hết hạn */ --color-warn-soft: #FBEFD9; --color-bad: #B3261E; /* Đã hết hạn / công nợ */ --color-bad-soft: #FBE8E6; /* Bảo lưu dùng chính --color-brand + --color-brand-soft */ /* ---- Màu phụ trong mockup ---------------------------------------------- */ --color-avatar-rose-bg: #F3E8F0; /* avatar nữ — nền */ --color-avatar-rose-text: #7B3F66; /* avatar nữ — chữ (6.41:1) */ --color-chart-bar: #C8D4E2; /* cột biểu đồ không nổi bật */ --color-disabled: #E9ECF1; /* nền nút bị vô hiệu hoá */ --color-switch-off: #CFD6DF; /* công tắc ở trạng thái tắt */ --color-timeline: #DDE2E9; /* vạch dọc timeline nhật ký */ --color-dashed: #C6CCD5; /* viền nét đứt (nút thêm gói) */ --color-debt-border: #F3CFCB; /* viền khối cảnh báo công nợ */ --color-debt-text: #8C3B34; /* chữ phụ trong khối công nợ (6.38:1) */ /* ---- Màu chữ trên nền đậm ---------------------------------------------- */ --color-on-brand: #FFFFFF; --color-on-brand-muted: rgba(255, 255, 255, 0.72); --color-on-brand-faint: rgba(255, 255, 255, 0.60); /* ---- Lớp phủ & skeleton ------------------------------------------------ */ --color-overlay: rgba(0, 0, 0, 0.35); /* nền mờ sau sheet (mobile) */ --color-overlay-strong: rgba(0, 0, 0, 0.50); /* nền mờ sau modal (desktop) */ --color-sk-base: #E4E8EE; --color-sk-shine: #EDF0F4; /* ---- Tông trạng thái (được .tone-* / .pill-* ghi đè) -------------------- */ --tone: var(--color-ink); --tone-soft: var(--color-paper); /* ---- Chữ ---------------------------------------------------------------- */ --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Thang cỡ chữ đọc ngược từ mockup — tên theo đúng số px để không đoán nhầm */ --fs-10: 10px; /* nhãn tháng dưới cột biểu đồ */ --fs-10-5: 10.5px; /* nhãn thanh tab dưới, số trên cột biểu đồ */ --fs-11: 11px; /* eyebrow header, ngày ở timeline */ --fs-11-5: 11.5px; /* nhãn form nhỏ, meta dòng học viên */ --fs-12: 12px; /* caption, phụ đề menu */ --fs-12-5: 12.5px; /* ghi chú, chip, nút nhỏ */ --fs-13: 13px; /* nhãn form, toast */ --fs-13-5: 13.5px; /* chữ thân chính */ --fs-14: 14px; /* chữ thân lớn, tiêu đề mục */ --fs-14-5: 14.5px; /* tên học viên trong danh sách */ --fs-15: 15px; /* tiêu đề thẻ, nút CTA */ --fs-16: 16px; /* tiêu đề sheet, tên gói hiện tại */ --fs-17: 17px; /* tiêu đề header, số tiền nổi bật */ --fs-18: 18px; /* giá gói, avatar lớn */ --fs-19: 19px; /* tiêu đề hồ sơ học viên */ --fs-22: 22px; /* số đếm dòng "Cần xử lý hôm nay" */ --fs-27: 27px; /* số trong 3 thẻ trạng thái */ --fs-28: 28px; /* doanh thu trên thẻ brand */ --fs-32: 32px; /* tổng doanh thu */ --fs-36: 36px; /* lượt điểm danh hôm nay */ --lh-none: 1; --lh-tight: 1.25; --lh-snug: 1.375; --lh-base: 1.5; --lh-relaxed: 1.625; /* ---- Khoảng cách — lưới 2px, đọc ngược từ thang Tailwind của mockup ----- */ --sp-2: 2px; --sp-3: 3px; /* nửa bậc — chỉ dùng cho pill và núm công tắc */ --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; /* lề ngang chuẩn của mọi màn hình */ --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-36: 36px; --sp-40: 40px; --sp-44: 44px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; /* ---- Bo góc (bổ sung cho --radius-sm/md/lg/xl/full ở trên) -------------- */ --radius-2xl: 16px; /* thẻ, panel, sheet con */ --radius-3xl: 24px; /* mép trên của sheet trượt */ /* ---- Đổ bóng ------------------------------------------------------------ */ --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.10); /* ---- Chiều cao điều khiển ----------------------------------------------- */ --h-xs: 32px; /* chip lọc, nút "Trả đủ" */ --h-sm: 36px; /* nút trong dòng: Thu tiền, Check-in, Xuất Excel */ --h-md: 40px; /* nút phụ, nút tròn icon */ --h-lg: 44px; /* ô nhập nhỏ, nút nhóm chọn */ --h-xl: 48px; /* ô nhập chính, nút CTA, nút hành động hồ sơ */ --tap-min: 44px; /* vùng bấm tối thiểu (WCAG 2.5.5) */ --app-header-h: 56px; --tabbar-h: 56px; /* ---- Bố cục ------------------------------------------------------------- */ --content-max: 1040px; /* bề rộng tối đa nội dung ở desktop */ --sheet-max-w: 520px; /* sheet hoá modal ở desktop */ --auth-max-w: 380px; /* thẻ đăng nhập — màn không điều hướng nên hẹp hơn sheet */ /* Điểm gãy desktop = 900px (không dùng được var() trong @media) */ /* ---- Lớp xếp chồng ------------------------------------------------------ */ --z-sticky: 10; --z-tabbar: 20; --z-sheet: 40; --z-toast: 50; /* ---- Chuyển động -------------------------------------------------------- */ --ease-sheet: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-sheet: 220ms; --dur-fade: 180ms; --dur-sk: 1300ms; } /* ========================================================================== HÌNH HỌC COMPONENT — các con số phải đi cùng nhau mới đúng hình ========================================================================== */ :root { /* Thang cỡ icon (lucide vẽ trên khung 24x24) */ --icon-14: 14px; --icon-16: 16px; --icon-17: 17px; --icon-18: 18px; --icon-19: 19px; --icon-20: 20px; --icon-21: 21px; --icon-24: 24px; --icon-32: 32px; /* ---- Bề rộng cột của hai bảng desktop ------------------------------------- CÔNG THỨC NGÂN SÁCH (học thuộc, tôi đã tính thiếu một lần và bảng tràn): tổng track + (số cột - 1) x 16 (gap) + 32 (padding của dòng) <= bề rộng danh sách Quên số 32 là tràn. Bề rộng danh sách .bleed = (viewport - 260 sidebar), TRỪ thêm ~10px khi vùng nội dung có thanh cuộn dọc — nên lấy mốc an toàn: ở 900px -> 628px ở 1024px -> 754px ------------------------------------------------------------------------- */ /* Bảng "Học viên" — bật từ 1024px, KHÔNG phải 900px. Vì sao: 590 + 64 + 32 = 686px, mà ở 900px chỉ có 628px -> tràn ngang trên đúng màn hình được dùng nhiều nhất. Ở 1024px có 754px, dư 68px cho các cột fr thở. Dưới 1024px giữ dòng gộp — bố cục đó đọc tốt ở mọi bề rộng. SĐT và ngày là bề rộng CỐ ĐỊNH: hai thứ đó cắt cụt là vô dụng. */ --member-col-name: 160px; /* "Học viên" — avatar 40 + gap 12 + tên; co giãn 2.2fr */ --member-col-phone: 100px; /* "SĐT" — cố định, đủ "0909 214 776" (đo: 95px) */ --member-col-package: 110px; /* "Gói hiện tại" — cắt được; co giãn 1.6fr */ --member-col-date: 90px; /* "Hết hạn"/"Nợ từ" — cố định, đủ "30/09/2026" (đo: 85px) */ --member-col-status: 130px; /* "Trạng thái" — pill + dòng meta; co giãn 1.2fr */ /* Bảng "Theo tháng" — bật ngay từ 900px (nội dung chỉ là số nên vừa chỗ). 160 + 3×80 + 110 = 510; 510 + 64 + 32 = 606px, vừa trong 628px, dư 22px. Hàng tiêu đề và mỗi dòng là những lưới RIÊNG BIỆT, không phải một . Vì thế mọi track phải là số ĐO ĐƯỢC (px hoặc fr), tuyệt đối không dùng `auto`: track `auto` co theo nội dung của riêng từng lưới, mà nhãn "Doanh thu" hẹp hơn số tiền bên dưới → cột lệch dần, tới cột cuối lệch 20px. Đã đo thật. */ --month-col-name: 160px; /* cột "Tháng" — icon 19 + gap 12 + nhãn; co giãn 2fr */ --month-col-count: 80px; /* ba cột đếm: Đang tập / Mới / Hết hạn — mức sàn, 1fr */ --month-col-money: 110px; /* cột Doanh thu — CỐ ĐỊNH, đủ chứa "125.000.000đ" */ /* Bảng bóc tách của tab Báo cáo lớp (shared.css mục H3) — bảng 3 cột từ 900px. Ngân sách ở ĐÚNG 900px: 900 − sidebar 260 = 640; trừ padding .screen 24×2 và viền panel 1×2 còn 590; trừ padding dòng 16×2 còn 558 cho track + gap. 170 + 104 + 104 = 378, cộng 2 gap 16 = 410 — dư 148px cho cột tên nở ra. Hai cột tỷ lệ CỐ ĐỊNH vì chúng chứa cùng một hình dạng ở mọi dòng ("100%" trên thanh tiến độ); để chúng co giãn là mỗi bảng rộng một kiểu. */ --report-col-name: 170px; /* cột "Lớp" / "Giáo viên" — tên + chuỗi số; co giãn 2fr */ --report-col-rate: 104px; /* hai cột tỷ lệ — CỐ ĐỊNH, đủ "100%" và thanh bên dưới */ /* Timeline nhật ký — 5 giá trị này PHẢI sửa cùng nhau, nếu không vạch lệch chấm */ --ledger-indent: 70px; /* thụt lề nội dung */ --ledger-rail: 58px; /* vị trí vạch dọc */ --ledger-dot-x: 54px; /* tâm chấm tròn */ --ledger-dot-size: 9px; --ledger-date-w: 52px; /* bề rộng cột ngày ở lề trái */ }