/* ============================================================================= DESIGN TOKEN — assets/css/tokens.css Chặng 1 của kế hoạch tái thiết giao diện (xem 01_DE_XUAT_TAI_THIET_GIAO_DIEN.md) VÌ SAO FILE NÀY TỒN TẠI Đo trên bản chạy thật (ghi trong PROJECT_MEMORY 29/07): 63 phần tử có chữ dưới 12px, trong đó 37 ở 8,4px và 3 ở 7,5px. Nguyên nhân KHÔNG phải ai đó cố tình chọn cỡ chữ nhỏ — mà là `em` lồng nhau: 0,7em của 0,7em của 12px. Mười file CSS forex chồng nhau, mỗi file tự chế một hệ số, không file nào biết file kia. Cách chữa duy nhất có hiệu lực lâu dài là XOÁ QUYỀN TỰ CHẾ: mọi màu, cỡ chữ, khoảng cách chỉ được lấy từ đây. Không component nào viết mã màu trực tiếp, không component nào dùng `em` cho font-size. BỐN LUẬT BẤT BIẾN (đã ghi vào AGENTS.md): 1. Sàn cỡ chữ 12px. Cấm `em` cho font-size — chỉ dùng var(--fs-*). 2. Đỏ CHỈ dành cho giá giảm và lỗ. Điều kiện chặn lệnh dùng --warn (hổ phách), lý do/diễn giải dùng --text-3 (xám). Lý do: chín dòng đỏ liền nhau thì không dòng nào còn là cảnh báo. 3. Không viết hex trực tiếp trong component. Chỉ var(--...). 4. Mọi thứ bấm được ≥ 44×44px (--tap), kể cả icon nhỏ (nới bằng padding). ========================================================================== */ /* ----------------------------------------------------------------------------- NỀN SÁNG — mặc định, dùng cho phần tài chính gia đình. Đọc ban ngày, ngoài trời, nhiều chữ và số. Nền sáng đọc tốt hơn. -------------------------------------------------------------------------- */ :root{ /* --- BỀ MẶT ------------------------------------------------------------ */ --bg:#F4F6FA; /* nền trang */ --surface:#FFFFFF; /* thẻ, panel */ --surface-2:#F0F3F8; /* thẻ chìm, ô nhập, vùng nhấn */ --surface-3:#E6EBF3; /* thanh tiến trình, nền chip */ --line:#DCE3ED; /* đường kẻ mảnh */ --line-strong:#C3CDDC; /* đường kẻ nhấn */ --overlay:rgba(11,18,32,.45); /* nền mờ sau bottom sheet */ /* --- CHỮ: ĐÚNG BA BẬC, KHÔNG HƠN --------------------------------------- */ /* Bốn bậc trở lên thì bậc 3 và 4 không phân biệt được bằng mắt, và người viết component sẽ chọn bừa. Ba bậc buộc phải quyết định rõ ràng. */ --text:#0F1A2E; /* nội dung chính, con số */ --text-2:#5B6B85; /* nhãn, phụ đề */ --text-3:#8A98AF; /* chú thích, lý do, placeholder */ /* --- NGỮ NGHĨA: MỖI MÀU MỘT NHIỆM VỤ, KHÔNG KIÊM NHIỆM ----------------- */ --up:#0FA968; /* CHỈ: giá tăng, lãi, tiền vào */ --up-soft:#E3F6ED; --down:#E23D4D; /* CHỈ: giá giảm, lỗ, tiền ra */ --down-soft:#FDEAEC; --accent:#2E7BFF; /* hành động chính, liên kết, tab đang chọn */ --accent-soft:#E8F0FF; --warn:#D98008; /* điều kiện đang CHẶN — không phải đỏ */ --warn-soft:#FFF3E0; --info:#6C6BD8; /* trạng thái trung tính đáng chú ý (paper, demo) */ --info-soft:#EEEDFB; --on-accent:#FFFFFF; /* chữ trên nền --accent */ --gp-nam:var(--accent); --gp-nu:var(--info); --gp-noi:var(--up); --gp-ngoai:var(--warn); /* --- CỠ CHỮ: THANG CỐ ĐỊNH --------------------------------------------- Sàn là --fs-xs = 12px. Không có bậc nào dưới nó. Nếu một chỗ thấy "cần nhỏ hơn nữa", đó là dấu hiệu chỗ đó đang nhồi quá nhiều chữ — sửa nội dung, đừng sửa cỡ chữ. */ --fs-xs:12px; /* nhãn nhỏ, badge, chú thích */ --fs-sm:13px; /* phụ đề, chữ trong bảng */ --fs-md:15px; /* nội dung chính */ --fs-lg:18px; /* tiêu đề khối */ --fs-xl:24px; /* con số lớn trong thẻ thống kê */ --fs-2xl:30px; /* tài sản ròng */ --fs-price:34px; /* giá forex trên thanh dính đỉnh */ --lh-tight:1.25; --lh-normal:1.5; /* --- ĐẬM: HAI BẬC ------------------------------------------------------ 400 và 600. Không 500, không 700. Ba bậc đậm trở lên thì thứ bậc nhoè. */ --fw-normal:400; --fw-bold:600; /* --- KHOẢNG CÁCH: NHỊP 4px, SÁU BẬC ------------------------------------ */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; /* --- BO GÓC ------------------------------------------------------------ */ --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px; /* --- ĐỔ BÓNG: HAI BẬC, RẤT NHẸ ----------------------------------------- */ --shadow-1:0 1px 2px rgba(15,26,46,.06); --shadow-2:0 8px 24px rgba(15,26,46,.12); /* --- CẢM GIÁC CHẠM ----------------------------------------------------- */ --tap:44px; /* vùng chạm tối thiểu — luật 4 */ --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px); /* --- CHUYỂN CẢNH ------------------------------------------------------- 150–200ms. Dài hơn thì cảm giác chậm, ngắn hơn thì như giật. */ --dur-fast:120ms; --dur-base:180ms; --ease:cubic-bezier(.32,.72,0,1); /* --- CHỮ VIẾT ---------------------------------------------------------- */ --font-sans:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif; --font-num:"Be Vietnam Pro","SF Mono",ui-monospace,monospace; /* --- BẢNG MÀU BIỂU ĐỒ (thêm 28/08/2026) -------------------------------- Biểu đồ tròn và biểu đồ nhiều lát cần 5–6 màu phân biệt được, mà bảng ngữ nghĩa ở trên chỉ có 5 màu và mỗi màu đã có đúng một nhiệm vụ. Không có bảng này thì người vẽ biểu đồ buộc phải tự chế mã màu — tức là luật 3 bị phá ngay ở chỗ đầu tiên cần đến nó. CỐ Ý KHÔNG CÓ MÀU ĐỎ. Đỏ vẫn chỉ dành cho tiền ra và lỗ (luật 2). Miếng bánh "Ăn uống" trong biểu đồ cơ cấu chi KHÔNG phải một khoản lỗ, và nếu tô đỏ thì mọi con số đỏ thật trong app mất trọng lượng. */ --c1:#2E7BFF; /* lát 1 — trùng --accent, cố ý: lát lớn nhất dùng màu chính */ --c2:#6C6BD8; --c3:#0FA968; --c4:#D98008; --c5:#3EB7C9; --c6:#8A98AF; /* "Khác" — luôn là lát xám, không bao giờ là màu nổi */ /* --- VỎ CONSOLE VẬN HÀNH (thêm 28/08/2026) ----------------------------- Console của người vận hành nền tảng PHẢI trông khác app của gia đình. Đây không phải chuyện thẩm mỹ mà là chuyện an toàn: người vận hành cần biết mình đang đứng ở đâu TRƯỚC khi bấm một nút có hậu quả. Cách rẻ nhất và rõ nhất là đổi màu thanh bên — AWS, Stripe, Shopify đều vậy. Bảng này KHÔNG đảo theo chế độ sáng/tối: mặt vận hành giữ một màu duy nhất để nó luôn nhận ra được. */ --con-bg:#0F1728; --con-bg-2:#1A2437; --con-line:#28334A; --con-text:#E8EDF7; --con-text-2:#93A1BC; } /* ----------------------------------------------------------------------------- NỀN TỐI — dùng cho terminal forex (giống MT5 / TradingView / SSI Pro). Vì sao tách riêng chứ không đảo toàn app: nhìn nến và số nhấp nháy liên tục trong thời gian dài thì nền tối đỡ mỏi mắt, và xanh/đỏ nổi rõ hơn nhiều trên nền tối. Nhưng sổ thu–chi gia đình thì ngược lại — đọc ban ngày, nhiều chữ, nền sáng tốt hơn. Hai chế độ vì hai công việc khác nhau, không phải vì thẩm mỹ. Cách dùng: bọc vùng terminal bằng
…
. Mọi biến bên dưới ghi đè, nên component KHÔNG cần biết mình đang ở chế độ nào. -------------------------------------------------------------------------- */ [data-theme="dark"]{ --bg:#0B1220; --surface:#141C2B; --surface-2:#1C2536; --surface-3:#243046; --line:#26314A; --line-strong:#39466380; --overlay:rgba(3,7,15,.62); --text:#E8EDF7; --text-2:#93A1BC; --text-3:#5B6987; /* Xanh/đỏ sáng hơn bản nền sáng: trên nền tối, cùng một mã màu trông xỉn đi. */ --up:#00C48C; --up-soft:#0C2E27; --down:#FF4D5E; --down-soft:#331A20; --accent:#4E90FF; --accent-soft:#152540; --warn:#FFB020; --warn-soft:#33270D; --info:#8E8CF0; --info-soft:#1E1C3A; --on-accent:#06101F; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.5); /* Màu biểu đồ sáng hơn bản nền sáng: trên nền tối, cùng một mã màu trông xỉn đi. Cùng lý do với --up/--down ở trên. */ --c1:#4E90FF; --c2:#8E8CF0; --c3:#00C48C; --c4:#FFB020; --c5:#4FD0E3; --c6:#7C8AA5; } /* ----------------------------------------------------------------------------- NỀN TỐI CHO CẢ APP (28/08/2026) Khối [data-theme="dark"] ở trên vốn viết cho terminal forex rồi bỏ không dùng — nay dùng lại nguyên vẹn cho toàn app bằng cách đặt thuộc tính lên . Không có bảng màu thứ hai nào được tạo ra. HỆ QUẢ CÒN NGUYÊN VÀ LÀ CHỦ Ý: terminal forex vẫn ở tông SÁNG kể cả khi app đang tối, vì khối `.fxt` trong terminal.css tự khai lại --bg/--surface/--text của riêng nó. Mười stylesheet của forex ghi cứng nền trắng ở rất nhiều chỗ, ép tối là chữ sáng trên nền trắng — không đọc được. Muốn terminal tối thật thì phải viết lại tầng vẽ của màn phân tích, không phải đổi vài biến. -------------------------------------------------------------------------- */ html[data-theme="dark"]{ color-scheme:dark } html[data-theme="light"]{ color-scheme:light } /* ============================================================================= MÀU DANH TÍNH MODULE (thêm 29/08/2026) VÌ SAO CÓ BẢNG NÀY, VÀ VÌ SAO KHÔNG DÙNG LẠI --c1…--c6 Hai bảng làm hai việc khác nhau, trộn vào nhau thì hỏng cả hai: · Bảng biểu đồ (--c1…--c6) cần các màu phân biệt được TRONG MỘT HÌNH. Sáu màu là đủ, và đổi lúc nào cũng được — không ai để ý miếng bánh đổi màu. · Bảng module (--m1…--m8) cần phân biệt được TRONG TOÀN BỘ SẢN PHẨM, và phải ỔN ĐỊNH VĨNH VIỄN. Đổi màu một module là đổi danh tính của thứ khách đã bỏ tiền mua, ngang với đổi logo. Ràng nó vào bảng biểu đồ nghĩa là một ngày nào đó ai đó chỉnh màu miếng bánh "Ăn uống" và vô tình đổi màu module Gia phả. CỐ Ý KHÔNG MODULE NÀO MÀU ĐỎ (luật 2), và không màu nào trùng --up / --down / --warn: ô module Chứng khoán mà xanh lá đúng bằng --up thì người dùng đọc nó là "đang lãi". ========================================================================== */ :root{ --m1:#2E7BFF; /* Tài chính — cố ý trùng --accent: module lõi mang màu chính */ --m2:#7A5AF8; /* Két an toàn */ --m3:#0E9BA8; /* Gia phả */ --m4:#C2603A; /* Nhà trọ */ --m5:#A3439B; /* Khoảnh khắc */ --m6:#3F7D3B; /* Terminal Forex */ --m7:#8A6C2E; /* Chứng khoán */ --m8:#5D7290; /* Lịch gia đình */ /* Chữ trên nền màu module. Tách riêng khỏi --on-accent vì nó đi cùng bảng --m1…--m8, và bảng đó đổi được mà --accent không đổi. */ --on-mod:#FFFFFF; } [data-theme="dark"]{ /* Sáng hơn một bậc: trên nền tối, cùng một mã màu trông xỉn đi. */ --m1:#5C9BFF; --m2:#9B85FF; --m3:#2DBECB; --m4:#E08356; --m5:#C767BE; --m6:#62A55C; --m7:#B8952F; --m8:#8296B5; /* Màu module ở chế độ tối đã được làm sáng, nên chữ trên nó phải là mực đậm. Giữ trắng là chữ trắng trên nền cam nhạt — tương phản 2,4:1. */ --on-mod:#0A1120; } /* ----------------------------------------------------------------------------- THEME THEO MODULE — đứng trong module nào thì cả màn mang màu module đó. CƠ CHẾ: KHÔNG sửa một component nào. Chỉ ánh xạ lại --accent / --accent-soft / --on-accent sang màu module ở phần tử bao ngoài. Mọi thứ vốn đã dùng --accent — nút chính, mục điều hướng đang chọn, chip nhấn, vạch .t-ac, viền ô nhập đang focus — tự đổi theo, không cần biết module là gì. Đây là lý do luật 3 (không viết hex trong component) đáng giá: vì không component nào tự chế mã màu, nên đổi một biến là đổi được cả màn. Nếu có dù chỉ vài chỗ viết #2E7BFF thì thứ này không chạy được, và sẽ có những nút xanh lạc lõng giữa một màn hình màu cam. --accent-soft dựng bằng color-mix thay vì khai tám biến tint. Trình duyệt không hiểu color-mix thì bỏ qua dòng đó và giữ --accent-soft cũ — vẫn đọc được, chỉ là nền chip không mang màu module. Suy giảm êm, không vỡ. VÙNG ÁP DỤNG: đặt data-mod lên phần tử bao MÀN HÌNH, không phải lên . Thanh bên phải giữ màu trung tính — nếu cả thanh bên cũng đổi màu thì người dùng mất điểm neo và không còn thấy đâu là "app", đâu là "module đang mở". -------------------------------------------------------------------------- */ [data-mod]{ --accent:var(--mod, var(--m1)); --accent-soft:color-mix(in srgb, var(--mod, var(--m1)) 13%, var(--surface)); --on-accent:var(--on-mod); } [data-mod="tai-chinh"]{ --mod:var(--m1) } [data-mod="ket"] { --mod:var(--m2) } [data-mod="gia-pha"] { --mod:var(--m3) } [data-mod="nha-tro"] { --mod:var(--m4) } [data-mod="khoanh-khac"]{ --mod:var(--m5) } [data-mod="forex"] { --mod:var(--m6) } [data-mod="chung-khoan"]{ --mod:var(--m7) } [data-mod="lich"] { --mod:var(--m8) } /* Vạch màu module 2px dưới thanh trên của màn. Người dùng biết mình đang ở đâu bằng đuôi mắt, không phải bằng cách đọc breadcrumb. */ [data-mod] .c-screen__bar{ box-shadow:inset 0 -2px 0 var(--mod) } /* ----------------------------------------------------------------------------- TÔN TRỌNG NGƯỜI DÙNG TẮT HIỆU ỨNG. Không phải trang trí: có người bị say chuyển động thật. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ :root{--dur-fast:0ms;--dur-base:0ms} }