/* EOS Studio — nền: bảng màu, chữ, và các phần tử cơ bản. * * ── MỘT KHỐI, HAI BẢNG MÀU ──────────────────────────────────── * Mọi màu nằm trong khối `:root` dưới đây. Không một mã màu nào được viết * thẳng ở nơi khác — `npm run test-mau` đỏ nếu có. * * `light-dark(sáng, tối)` khai CẢ HAI bảng trên cùng một dòng, nên đọc bảng * màu là đọc một cột. Trình duyệt chọn vế nào theo `color-scheme`: * - mặc định `light` → NỀN SÁNG, bất kể hệ điều hành đang để gì; * - `` → nền tối, vì người dùng đã tự chọn. * Nút chuyển nằm ở dải trạng thái, mã trong `loi/nen.js`. * * ── VÌ SAO KHÔNG HỎI HỆ ĐIỀU HÀNH ───────────────────────────── * Bản trước để `light dark`, tức là theo cài đặt máy. Chủ dự án chốt: mặc * định là NỀN SÁNG, cố định. Nghĩa là mọi người mở app lần đầu đều thấy một * giao diện giống nhau — và ảnh chụp màn hình gửi cho nhau thì khớp. Máy để * nền tối cũng không đổi được điều đó; chỉ cú bấm của người dùng mới đổi, và * cú bấm ấy được nhớ lại. * * ── VÌ SAO CÓ CỘT SÁNG, KHÔNG PHẢI "ĐẢO NGƯỢC BẢNG TỐI" ─────── * Đảo ngược là cái bẫy. Trong nền tối, mặt phẳng NỔI LÊN thì sáng hơn; trong * nền sáng nó cũng sáng hơn (ngà trên giấy ngà sẫm) — thứ tự KHÔNG lật. Và ba * màu trạng thái phải đổi hẳn: lục rêu `#a3bf7f` đọc tốt trên nền tối nhưng * chưa đạt 2:1 trên nền giấy sáng, tức là không đọc được. Mỗi vế được đo riêng. * * Con số trong chú thích là tỉ lệ tương phản WCAG, đo bằng `scripts/test-mau.mjs`. */ :root { /* `light`, không phải `light dark`: nền sáng là mặc định CỐ ĐỊNH, không * nhường cho cài đặt của máy. Nó cũng quyết luôn cách trình duyệt vẽ thanh * cuộn và các ô điều khiển gốc, nên hai thứ đó đi theo đúng bảng màu. */ color-scheme: light; /* ── NHẬN DIỆN NOCTURNE (27/08/2026) ────────────────────────── * Bộ bàn giao «AI Control Layout» mang theo một design system tên Nocturne: * nền xanh xám gần trung tính, chữ Inter, bo 8px, và MỘT màu nhấn tím-lam * dùng làm ĐƯỜNG KẺ và ÁNH SÁNG chứ không phải mảng tô. Chủ dự án chốt * 27/08 lấy Nocturne cho CẢ HAI nền, thay nhận diện giấy ngà + mực sepia + * Palatino của bản 20/08. * * ── NỬA NỀN SÁNG LÀ SUY RA, KHÔNG PHẢI CHÉP ─────────────────── * Bộ bàn giao chỉ vẽ nửa TỐI. Nửa sáng dưới đây suy từ chính thang màu của * Nocturne, theo đúng luật readme của nó ghi: trên nền tối lấy bậc 700–900 * làm mảng tô và 100–300 làm chữ đặt trên mảng ấy; trên nền sáng thì đảo * vai — nhấn lùi về bậc 600 trở xuống. Không một bậc nào bịa thêm ngoài * thang, nên hai nền vẫn là một hệ chứ không phải hai bảng rời. * * ── VÌ SAO MÀU NHẤN LÀ BẬC 700, KHÔNG PHẢI #9184d9 ──────────── * Nocturne khai nhấn là #9184d9 và dặn ĐỪNG tô mảng lớn bằng nó — nút chính * của nó là một cái viền, không phải một mảng nền. App này thì có * `button.chinh` tô đặc ở gần như mọi màn, mà chữ sáng trên #9184d9 chỉ đạt * 2,6:1 — không đọc được. Nên `--thuong` lấy bậc 700 (#5d5294): cùng sắc, * đủ sẫm để chở chữ ở 6,22:1, và bằng nhau ở cả hai nền. Bản #9184d9 nguyên * gốc vẫn còn, làm `--vien-chon` — nó là ĐƯỜNG KẺ, đúng vai readme giao. * * Con số trong chú thích là tỉ lệ tương phản WCAG, đo bằng `npm run test-mau`. */ /* ── Mặt phẳng ───────────── SÁNG TỐI */ --nen: light-dark(#e4e7f5, #161826); /* trang */ --tam: light-dark(#f3f5fe, #232532); /* thẻ, nổi lên một bậc */ --sau: light-dark(#dfe3f3, #101220); /* ô nhập, lõm xuống */ /* ── Viền: HAI loại, khác chuẩn ─────────────────────────────── * Viền trang trí chỉ cần thấy được. Viền ĐIỀU KHIỂN (ô nhập, nút, ô chọn) * là thứ nói cho người ta biết bấm vào đâu — WCAG 1.4.11 đòi ≥3:1. Gộp * chung thì hoặc ô nhập tàng hình, hoặc mọi cái thẻ đều kẻ khung chói. */ --vien: light-dark(#cfd3e5, #3f424d); /* trang trí */ --vien-nut: light-dark(#75798c, #75798c); /* điều khiển · 3.50 / 4.08 */ --vien-sang: light-dark(#9397ab, #9397ab); /* điều khiển, đang trỏ vào */ /* ── Chữ ──────────────────────────────────────────────────── */ --chu: light-dark(#23263a, #e9e9ed); /* 12.09 / 14.54 */ --chu-nhat: light-dark(#4e5364, #b2b6ca); /* 6.21 / 8.75 */ --chu-mo: light-dark(#565b6d, #b2b6ca); /* 5.48 / 8.75 */ --chu-code: light-dark(#5d5294, #d2cefd); /* Chữ đặt TRÊN MẢNG MÀU (nút chính, nhãn trạng thái) — không phải "chữ * sáng". Hai nghĩa này trùng nhau ở bản tối và tách hẳn ở bản sáng: dùng * nhầm cái này cho chữ trên thẻ là chữ trắng trên thẻ trắng. */ --chu-tren-mau: #f5f4ff; /* Chữ và nền đè LÊN ẢNH — cố ý KHÔNG đi qua `light-dark()`, vì tấm ảnh bên * dưới không đổi theo nền trang. Nhãn trên khung xem cắt, và ô xem mặt chữ * (nó mô phỏng chữ trắng trên ảnh thật) phải đọc được y hệt ở cả hai bản. */ --chu-tren-anh: #fff; --nen-gia-anh: #23303f; /* Ô đứng sau bản logo dùng cho nền tối (thẻ Cẩm nang, 24/08/2026). KHÔNG theo chủ đề: một logo vẽ cho nền tối phải luôn đứng trên nền tối, kể cả lúc app đang ở chế độ sáng — không thì nó thành một ô trống và người xem báo mất logo. */ --nen-logo-toi: #1b1d29; /* ── Nhấn ─────────────────────────────────────────────────── */ --thuong: #5d5294; /* tím-lam Nocturne bậc 700 */ --chon: light-dark(#e7e5fe, #2b2741); /* mảng "đang chọn" */ /* Viền của thứ ĐANG CHỌN / ĐANG FOCUS — chính là màu nhấn nguyên bản của * Nocturne. Ở những chỗ này MÀU LÀ TÍN HIỆU DUY NHẤT nói cái nào đang được * chọn, nên nó phải thấy được chứ không chỉ "có màu". */ --vien-chon: light-dark(#796cbf, #9184d9); /* 3.62 / 5.45 */ --lien-ket: light-dark(#5d5294, #d2cefd); /* 5.50 / 11.73 */ /* ── Trạng thái ─────────────────────────────────────────────── * Nocturne là hệ MỘT màu nhấn, nhưng ba màu này không phải trang trí: chúng * là NGHĨA (được · coi chừng · hỏng), và nghĩa thì không được nói bằng cùng * một sắc với mọi thứ khác. Chúng giữ ba họ màu riêng, chỉ hạ độ bão hoà cho * hợp nền xanh xám. */ --tot: light-dark(#2f6b45, #8fd0a4); /* 5.15 / 9.83 */ --canh: light-dark(#7a5312, #e0b070); /* 5.55 / 8.90 */ --xau: light-dark(#a03a3a, #e59a92); /* 5.39 / 7.85 */ --nen-dung: light-dark(#f6e0e0, #3a1f22); --vien-dung: light-dark(#9b3535, #a04a4a); --nen-chan: light-dark(#f2e8d8, #2b2416); --vien-chan: light-dark(#7a5312, #7d5a1e); --vien-re: light-dark(#2f6b45, #4f7d5f); /* ── Bề mặt phụ ───────────────────────────────────────────── */ --nen-luot: light-dark(#dcdfef, #2b2e3d); /* đang trỏ vào */ --vien-bang: light-dark(#cfd3e5, #292b31); /* kẻ dòng bảng */ /* Nền sau ảnh/video khi ảnh chưa tải hoặc không kín khung. Đen tuyền ở bản sáng là một lỗ đen giữa trang, nên bản sáng dùng một bậc xám của thang. */ --nen-anh: light-dark(#cfd3e5, #0b0c14); /* Vạch chân DẢI ĐIỂM NHẤN — dải chở «cái gì đang chặn tôi» của mỗi tab, và nó phải đọc ra một tầng khác thẻ thường dù cùng dùng `--tam`. Nocturne kẻ vạch ấy bằng một bậc của màu nhấn, không bằng viền trung tính. */ --vien-nhan: light-dark(#b5abfc, #423a6a); /* ── Ô BỊ KHOÁ — 29/08/2026 ─────────────────────────────────── * Trước hôm nay ô `disabled` KHÔNG có một dòng CSS nào: app đã đè cả nền * lẫn viền của ô nhập, nên phần làm xám sẵn có của trình duyệt không còn * chỗ bám, và một ô không gõ được trông y hệt một ô gõ được. * * Nền RIÊNG chứ không mượn `--sau`: `--sau` nghĩa là "chỗ bỏ gì đó vào", * và dùng nó cho một ô không bỏ được gì vào là nói dối bằng hình khối. */ --nen-khoa: light-dark(#e9ebf4, #1c1e2b); --vien-khoa: light-dark(#c3c8dc, #34384a); /* `--nen-de` và `--vien-de` ĐI HẲN 29/08 (đợt 6): chúng chỉ tô cái hộp của `.de-so`, và cái hộp ấy đã bỏ — tiêu đề mục nay phân cấp bằng SỐ, không bằng khung, vì `.tam` đã là một cái khung rồi. Hai token không ai dùng là hai màu người sau sẽ tưởng còn vai; `test-kieu` mục 6b nay gác cả token chứ không chỉ lớp. */ /* ── MÀU NHẤN KHI NÓ LÀM MỰC — 29/08/2026 ───────────────────── * `--thuong` là màu nhấn khi nó làm MẢNG TÔ, và nó cố định ở cả hai nền vì * mảng tô phải đủ sẫm để chở chữ sáng. Nhưng cùng màu ấy đem làm CHỮ hoặc * ĐƯỜNG KẺ trên nền tối thì chìm: đo được 2,60:1 ở nút phụ ngày 29/08, dưới * cả ngưỡng chữ 4,5 lẫn ngưỡng viền điều khiển 3,0. Một token không gánh * được hai vai qua hai nền — mảng tô cần SẪM, mực cần TƯƠNG PHẢN. * * Nên tách: `--thuong` là sơn, `--thuong-chu` là mực. Bậc 700 ở nền sáng, * bậc 400 ở nền tối, cùng một thang Nocturne. */ --thuong-chu: light-dark(#5d5294, #b5abfc); /* ── SƠN CỦA NÚT TIÊU TIỀN — 06/09/2026 ────────────────────── * Khối ⑤ có ba cột, và ĐÚNG MỘT cột tiêu tiền. Làm nổi nó bằng một mảng tô * quanh cả cột thì ba tiêu đề lệch nhau (đệm của hộp đẩy tiêu đề cột giữa * xuống) — chủ dự án chỉ ra bằng ảnh chụp. Nên nổi bằng MÀU của tiêu đề và * nút, không bằng một cái hộp. * * `--canh` là MỰC: nó đo tương phản với nền trang (5,55 / 8,90), và ở nền tối * nó sáng (#e0b070) — tô làm nền nút rồi đặt `--chu-tren-mau` lên là chữ sáng * trên nền sáng. Đúng cái bẫy mà khối «màu nhấn có hai vai» ngay trên đã ghi, * chỉ ngược chiều. Nên token này cố định SẪM ở cả hai nền, y như `--thuong`: * #f5f4ff trên #8a5a12 đo được 6,2:1. * * Tiêu đề cột vẫn dùng `--canh` — nó là mực, và nó đứng trên nền trang. */ --tien: #8a5a12; /* ── Họ chữ ─────────────────────────────────────────────────── * Inter cho CẢ tiêu đề lẫn thân bài — Nocturne ghép Inter trên Inter, và * thứ bậc đến từ cỡ chữ với khoảng trắng chứ không từ hai họ chữ khác nhau. * Tệp nằm sẵn trong `assets/fonts/inter`, phục vụ qua `/font/inter/…`, nên * app vẫn chạy khi không có mạng — xem khối `@font-face` ngay dưới. * Đo cmap 27/08/2026: Inter đủ dấu chồng tiếng Việt, và có cả ký tự ₫. */ --tieu-de: "Inter", "Segoe UI", system-ui, sans-serif; /* Nền mờ sau hộp thoại. Tám ký tự — hai ký tự cuối là độ đục. Nó KHÔNG chở * chữ nào nên không có ngưỡng tương phản; việc của nó là làm trang phía sau * lùi lại đủ để hộp đọc ra một tầng riêng. */ --nen-phu: light-dark(#23263a66, #0000008c); /* Bo góc theo thang Nocturne: `--bo` là radius-md (nút, ô nhập, mục thanh * bên), `--bo-lon` là radius-lg (thẻ lớn, hộp thoại, fieldset). Bản 20/08 * cố ý bo hẹp 4/7 để ra chất ấn loát cổ điển; nhận diện ấy đã thôi, và * Nocturne bo rộng hơn. */ --bo-nho: 4px; --bo: 8px; --bo-lon: 14px; /* ── THANG CỠ CHỮ — 29/08/2026 ──────────────────────────────── * Bảy bậc, thay cho HAI MƯƠI cỡ đo được hôm 29/08 (có cả 9,5 · 10,5 · * 11,5 · 12,5 · 13,5px — dấu vân tay của việc chỉnh tay từng màn). * * Vì sao tầng này trôi mà bảng màu thì không: màu có token VÀ có * `test-mau` gác. Cỡ chữ trước hôm nay không có cái nào. Thang này chỉ * đứng được nếu `npm run test-kieu` gác nó — token một mình chưa từng * giữ được luật nào trong kho này. * * Không bậc nào giữa hai bậc. Cần nhỏ hơn 11 thì không phải cần chữ nhỏ * hơn — là đang nhồi quá nhiều vào một chỗ. */ --cs-nho: 11px; /* nhãn bảng, chú thích, huy hiệu, code */ --cs-phu: 12px; /* chữ phụ (.nhat), dòng meta */ --cs-ban: 13px; /* chữ trong bảng, danh sách dày, mục thanh bên */ --cs-chinh: 14px; /* MẶC ĐỊNH — thân bài, ô nhập, nút */ --cs-de: 16px; /* tiêu đề thẻ, tên app ở thanh bên */ --cs-tab: 20px; /* tiêu đề tab */ --cs-so: 26px; /* con số lớn — tiền, đếm */ /* ── THANG KHOẢNG CÁCH — 29/08/2026 ─────────────────────────── * Bảy bậc chia hết cho 4, thay cho 15 giá trị `gap` và hơn 20 tổ hợp * `padding` rời rạc. Chủ dự án chốt bản NGHIÊM: bỏ 6 và 10, dù chúng * đang dùng nhiều (6px ×13, 10px ×26 chỉ tính `gap`). Lý do chọn nghiêm: * một thang chín bậc thì thôi là thang — người viết vẫn phải chọn giữa * 8 và 10 mà không luật nào nói chọn cái nào, tức là vẫn trôi. * * Khoảng cách NÓI QUAN HỆ, không nói thẩm mỹ: hai thứ gần nhau hơn thì * người đọc hiểu chúng thuộc về nhau. Nên khoảng cách TRONG một nhóm * phải nhỏ hơn hẳn khoảng cách GIỮA hai nhóm — chênh một bậc chưa đủ. */ --k-0: 2px; /* trong một điều khiển — dấu tick với nhãn */ --k-1: 4px; /* hai thứ dính nhau về nghĩa — nhãn với đơn vị */ --k-2: 8px; /* MẶC ĐỊNH — giữa hai nút, giữa nhãn và ô */ --k-3: 12px; /* giữa hai trường trong một thẻ */ --k-4: 16px; /* đệm trong thẻ, giữa hai nhóm trường */ --k-5: 24px; /* giữa hai thẻ */ --k-6: 32px; /* giữa hai khối lớn trong một tab */ /* Chiều cao dải công cụ của trang Hướng dẫn. Là TOKEN vì hai chỗ đọc nó: chính dải ấy, và `--cao-dinh` của cột mục lục dính — cột ấy phải bám DƯỚI dải, không thì phần đầu của nó nằm khuất sau dải. Hai con số gõ tay ở hai chỗ là hai con số sẽ lệch. */ --cao-hd-cong-cu: 57px; /* MỘT chiều cao cho mọi điều khiển đứng cùng hàng. Trước hôm nay * `button` trần cao 31,7px còn `.chinh` · `.phu` · ô nhập đều 39,7px — * ba nút cạnh nhau thì một cái thụt chân. */ /* 40, không phải 38: chiều cao TỰ NHIÊN của nút chính (đệm 9px trên dưới, * chữ 14px cao dòng 1,55) rơi vào 39,7px. Đặt trần thấp hơn con số ấy thì * `min-height` không với tới nó và ba hạng nút vẫn lệch nhau — đo được * 38 · 39,3 · 39,7 ngay lượt thử đầu. Trần phải CAO HƠN mọi chiều cao tự * nhiên thì nó mới là trần. 40 cũng chia hết cho 4, như thang khoảng cách. */ --cao-dk: 40px; /* ── VÙNG CHẠM NHỎ NHẤT — 07/09/2026 ────────────────────────── * * `--cao-dk` là chiều cao của điều khiển đứng THÀNH HÀNG. Nút gỡ dấu «×» thì * không đứng hàng với ai — nó ngồi ở góc một tấm ảnh, nên nó có quyền nhỏ * hơn. Nhưng nhỏ tới đâu thì trước hôm nay không ai nói, và ba chủ tự đặt ba * con số: 18 · 20 · 21px. * * Đo trong trình duyệt 07/09: `.bd-anh .nut-bo` ra **18×18**. WCAG 2.5.8 (AA * của WCAG 2.2) đòi 24×24 — và đây là nút XOÁ một tấm ảnh khỏi khối, tức * loại nút mà bấm trượt tốn nhất. Một dấu «×» 18px cạnh một tấm ảnh là chỗ * ngón tay và con trỏ đều dễ trượt. * * 24 không chia hết cho 4 theo kiểu thang khoảng cách — nó KHÔNG phải một * bậc của thang ấy. Nó là một ngưỡng đến từ bên ngoài, như 3:1 của viền điều * khiển, nên nó đứng riêng và mang con số của chuẩn chứ không của app. */ --cham: 24px; /* ── CAO DÒNG — 29/08/2026, đợt 6 ───────────────────────────── * Mục 04 sổ tay chốt HAI giá trị từ đợt 1: 1,55 cho chữ chạy, 1,2 cho tiêu * đề và chữ trong điều khiển. Nhưng chúng chưa bao giờ có token, nên chưa * bao giờ có lưới — và tầng này trôi đúng như cỡ chữ đã trôi: đo ra **16 giá * trị** (1,15 · 1,2 · 1,25 · 1,3 · 1,35 · 1,45 · 1,5 · 1,55 · 1,6 · 1,65 · * 1,7 · 1,75 · 1,85 · 1,9 · 2). Cùng dấu vân tay của việc chỉnh tay từng màn. * * Số đo LÀ bằng chứng cho câu mở đầu của cả sổ tay: luật nào có phép thử thì * luật ấy còn, luật nào chỉ nằm trong đầu người viết thì luật ấy đã đi. Hai * con số này nằm trong sổ tay từ đợt 1 và vẫn đi mất. */ --dong-chay: 1.55; /* chữ chạy — đoạn văn, ô nhập nhiều dòng */ --dong-chat: 1.2; /* tiêu đề, và chữ bên trong một điều khiển */ /* ── BẢN ĐỒ TẦNG — 29/08/2026, đợt 6 ────────────────────────── * App có 11 giá trị `z-index` rải ở ba tệp: 1 · 2 · 3 · 8 · 10 · 12 · 15 · * 16 · 20 · 40 · 41. Từng con số đều đúng; cái thiếu là **một chỗ đọc được * cả chồng**. Không có nó thì mỗi lần thêm một thứ nổi lên, người viết chọn * số bằng cách đoán cho to hơn cái mình nhớ — và cái mình nhớ thì mỗi người * một khác. * * Khối này KHÔNG đổi một con số nào, cố ý: đổi thứ tự chồng lớp là đổi cái * gì che cái gì, và đó là hạng thay đổi phải nhìn thấy mới dám làm. Nó chỉ * đặt TÊN cho những gì đang có, và tên thì đọc được thành một câu: * * trong thẻ → dính → dải tiêu đề → đáy → phủ → ngăn kéo → dừng khẩn → hộp * * Băng DỪNG KHẨN đứng trên mọi thứ của vỏ (20). Hộp chi tiết (40·41) cao hơn * nó vì nó là một lượt đối thoại người dùng vừa mở bằng tay — thứ họ đang * nhìn thì không được có gì chen lên trên. */ --lop-trong-the: 1; /* nhãn·nút nổi trên một tấm ảnh, bên trong một thẻ */ --lop-dinh: 2; /* dải hành động dính đáy vùng nội dung */ --lop-dinh-tren: 3; /* thanh dính ngay dưới dải tiêu đề màn */ --lop-dau-man: 8; /* dải tiêu đề màn */ --lop-day: 10; /* hàng nút cố định ở đáy một tab */ --lop-day-vo: 12; /* thanh đáy của VỎ, khổ điện thoại */ --lop-phu: 15; /* lớp phủ mờ sau ngăn kéo */ --lop-ngan-keo: 16; /* ngăn kéo thanh bên */ --lop-khan: 20; /* băng DỪNG KHẨN */ --lop-hop-phu: 40; /* nền mờ của hộp chi tiết */ --lop-hop: 41; /* hộp chi tiết */ /* Bóng LÕM của ô gõ được — 29/08/2026. Chủ dự án chốt: ô thật phải có * chiều sâu lõm vào trong. Đây là nửa còn lại của cặp tín hiệu ở mục 06 * sổ tay: ô gõ được là một CÁI LÕM, ô bị khoá là chữ nằm PHẲNG. Phân * biệt bằng hình khối thì còn đúng cả khi in đen trắng và với người mù * màu; phân biệt bằng sắc độ thì không. * Bản tối cần đậm hơn: bóng đen trên nền vốn đã tối thì mờ đi. */ /* ── `light-dark()` LÀ HÀM MÀU, KHÔNG BỌC ĐƯỢC CẢ MỘT BÓNG — 01/09/2026 ── * Bản trước viết `light-dark(inset 0 1px 3px #23263a26, inset 0 1px 3px #00000073)`. * Đo trong trình duyệt: `CSS.supports('box-shadow', …)` trả **false**, và * `box-shadow` rơi về `none`. Tức là **bóng lõm chưa bao giờ vẽ ra** — kể từ * dòng nó được viết. * * Nó không phải trang trí. Sổ tay nhận diện mục 06 giao cho nó một VAI: bóng * lõm là thứ phân biệt ô «gõ được» với ô «bị khoá», và mục 09 ghi đúng câu * chủ dự án chốt — *«Ô thật → đổ bóng tạo chiều sâu lõm vào trong»*. Hỏng * lặng thì bảng bốn trạng thái mất một tín hiệu ở CẢ HAI vế: ô gõ được không * có bóng, và «không bóng» của ô khoá thôi nói được điều gì. * * Chữa: đưa `light-dark()` vào trong, bọc đúng cái MÀU. Đây cũng đúng họ lỗi * «token bịa ra không kêu» — chỉ khác chỗ tên biến thì có thật, giá trị của * nó mới là thứ không hợp lệ cho thuộc tính đang dùng. */ --bong-lom: inset 0 1px 3px light-dark(#23263a26, #00000073); /* ── Ô ĐIỀU KHIỂN GỐC CỦA TRÌNH DUYỆT — 23/08/2026 ─────────── * Thanh trượt, ô tick và nút chọn được trình duyệt tô bằng màu nhấn của HỆ * ĐIỀU HÀNH — xanh dương `#0d6efd` trên Windows. `accent-color` chữa cả ba * loại ô bằng một dòng, và không phải dựng lại thanh trượt bằng tay — tức là * không mất phần bàn phím và trình đọc màn hình mà ô gốc cho sẵn. */ accent-color: var(--thuong); } /* ── Inter, phục vụ từ chính máy chủ này ────────────────────── * KHÔNG `@import` Google Fonts. Bộ bàn giao Nocturne khai font bằng một dòng * `@import url('https://fonts.googleapis.com/…')`; ở đây thì không, vì app này * phải mở được khi máy không có mạng, và một `@import` hỏng làm cả trang đứng * chờ trước khi vẽ dòng đầu tiên. * * Khối này đứng SAU khối token, không đứng trước. `test-mau` đọc bảng màu * bằng cách cắt từ `:root {` tới dấu `}` đầu dòng đầu tiên — một khối * `@font-face` chen lên trước sẽ cắt mất cả bảng, và phép thử đỏ vì lý do * chẳng liên quan gì tới màu. (Lưới ấy nay đã neo hai đầu, nhưng thứ tự này * vẫn là thứ tự đúng.) * * Kho chỉ có hai nét: Regular 400 và Bold 700. Nocturne dặn "đừng đậm quá 500" * cho tiêu đề — nhưng với hai nét, 500 rơi về đúng Regular, tức là tiêu đề 15px * trông y hệt thân bài, và thứ bậc biến mất ở đúng cỡ chữ mà app này dùng nhiều * nhất. Nên tiêu đề ở đây là 600 (rơi về Bold). Lệch một bậc so với readme của * hệ, có chủ ý, và đây là lý do. */ @font-face { font-family: "Inter"; src: url("/font/inter/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/font/inter/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ── Nét NGHIÊNG THẬT — 29/08/2026 ──────────────────────────── * Tải về vì ô bị khoá dùng chữ nghiêng. Không có tệp này thì trình duyệt * TỰ BỊA chữ nghiêng bằng cách xô nghiêng nét đứng — và với tiếng Việt dấu * chồng (ề · ộ · ữ) thì dấu trượt khỏi thân chữ nó thuộc về. Đúng loại lỗi * không kêu: chữ vẫn đọc được, chỉ là sai chính tả về mặt hình. * Qua đủ bốn cửa của `npm run test-font` ngày 29/08. */ @font-face { font-family: "Inter"; src: url("/font/inter/Inter-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("/font/inter/Inter-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } /* Lời chọn của người dùng — thứ DUY NHẤT đổi được nền. `="sang"` viết ra cho * đủ cặp: nó trùng mặc định, nhưng nhờ có nó mà một người đã từng chọn tối rồi * quay lại sáng vẫn được ghi một giá trị rõ ràng, thay vì phải xoá khoá lưu. */ :root[data-nen="sang"] { color-scheme: light } :root[data-nen="toi"] { color-scheme: dark } * { box-sizing: border-box } body { margin: 0; background: var(--nen); color: var(--chu); /* 1.55 thay vì 1.5: mực sepia trên giấy ngà cần thoáng dòng hơn một chút * mới ra vẻ nhàn nhã — chữ nêm chặt là chữ của bảng tính, không phải của * ấn phẩm. */ font: 14px/1.55 var(--tieu-de); } /* TIÊU ĐỀ và THÂN BÀI cùng một họ chữ — Nocturne ghép Inter trên Inter. Thứ bậc đến từ CỠ và KHOẢNG TRẮNG, không từ hai họ chữ đối nhau. Giãn chữ âm nhẹ là chữ ký của hệ: Inter ở cỡ tiêu đề mà nêm chặt lại thì đọc ra một khối liền, không phải một dãy chữ rời. */ h1, h2, h3 { font-family: var(--tieu-de); font-weight: 600; letter-spacing: -.015em } /* ── `h3` PHẢI TỰ KHAI CỠ — 07/09/2026 ──────────────────────── * Tới hôm nay chỉ `.tam h3` khai `font-size`. Mọi `h3` ra ngoài một thẻ trôi * về mặc định trình duyệt — đo được **16,38px** (1.17em × 14px), tức một bậc * KHÔNG có trong thang bảy bậc ở đầu tệp này, và không lưới nào kêu vì nó * không phải một giá trị ai gõ ra. * * Đúng thứ ba tiêu đề đang treo ở mục N2 tiến độ (`h3.ng-nhom`, `h3.tr-nhom`, * «Dây thử») sẽ rơi vào. Khai ở luật GỐC thì chúng thôi phụ thuộc vào việc có * nằm trong `.tam` hay không. */ h1, h2 { font-size: var(--cs-tab) } h3 { font-size: var(--cs-de) } /* ── TIÊU ĐỀ MỤC CÓ SỐ — 29/08, dời khỏi `.de-so` ở đợt 6 ───── * * Chủ dự án chốt: tiêu đề mục trong một tab dùng CÙNG MỘT CỠ, phân cấp bằng SỐ * chứ không bằng cỡ chữ. Vì một tab ở đây thường có bốn tới bảy mục NGANG HÀNG * nhau, không phải một cây phân cấp ba tầng. Cỡ chữ giảm dần chỉ nói được «cái * này nhỏ hơn cái kia»; số thì nói được «cái này là mục 3 trong 6», tức trả lời * luôn câu «còn bao nhiêu nữa». * * ── VÌ SAO CÁI HỘP ĐI, CÒN CON SỐ Ở LẠI ────────────────────── * Đợt 1 gói chốt ấy vào một lớp riêng `.de-so`: cùng cỡ, có số, VÀ có khung * nền. Bốn phép lưới gác nó, cả bốn xanh suốt năm đợt — và đợt 6 đếm ra * **không tab nào dùng nó**. Không một chỗ. * * Lý do lộ ra khi đếm ba lối tiêu đề đang cùng làm một việc: * *

trong .tam 47 chỗ mực mờ, không gạch * .kf-buoc 34 chỗ font tiêu đề, GẠCH CHÂN * .de-so 0 chỗ HỘP + nền + số * * `.tam` đã là một cái khung. Thêm một cái hộp có nền vào trong nó là khung * lồng khung — nên `.de-so` không dùng được ở đúng chỗ mà 81 tiêu đề kia đang * đứng, và nó chết vì thế chứ không vì ai quên. * * Cái nó mang lại mà hai lối kia KHÔNG có chỉ là con số. Nên đợt 6 giữ con số * và bỏ cái hộp: cơ chế đánh số về thẳng hai lối đang sống, và bất kỳ tiêu đề * mục nào cũng đeo được số chỉ bằng cách thêm `data-so`. Ba luật của mục 06b * sống nguyên vẹn; lối thứ tư thì đi. * *

Ảnh nhận diện

* * Số nằm trong `::before` lấy từ thuộc tính, KHÔNG gõ vào chữ: chèn số vào * chính câu thì trình đọc màn hình đọc «Không ba Ảnh nhận diện», và tìm kiếm * trong trang cũng vấp phải nó. * * Chữ số đẳng chiều rộng, nếu không thì «11» hẹp hơn «03» và mép trái của các * tiêu đề so le nhau vài pixel. * * Nét 600 chứ không 700: kho font chỉ có 400 và 700, nên 600 và 700 vẽ ra * GIỐNG HỆT (đo 29/08). Khai 700 ở đây là hứa một bậc đậm mà font không giữ * được — sức nhấn thật đến từ màu `--thuong-chu`. Xem mục 02 sổ tay. */ /* ── `h3`, KHÔNG PHẢI `.tam h3` — đợt 7 ──────────────────────── * Bản đợt 6b bó cơ chế vào `.tam h3`, vì lúc ấy 81 tiêu đề đều đứng trong một * `.tam`. Đo 31/08: **năm `

` đứng NGOÀI** — `h3.ng-nhom` (tiêu đề nhóm trên * lưới ảnh Media nguồn), `h3.tr-nhom` (tiêu đề nhóm cột Trần chi tiêu), «Dây * thử» của Phòng thử, cộng hai tiêu đề hộp thoại. Ba cái đầu là MỤC thật. * * Với bộ chọn cũ, gắn `data-so` vào một trong ba chỗ ấy thì KHÔNG VẼ GÌ và * không lưới nào kêu: một đầu GHI thuộc tính, đầu kia ĐỌC bằng một bộ chọn hẹp * hơn, và chưa ai hỏi hai bên có khớp. Đúng chỗ hở mà đợt 6 đã gặp ở `/khoa-phong-cach`. * * Mở sang mọi `h3` là AN TOÀN, và an toàn nhờ chính luật 3 của mục 06b: quy tắc * `:not([data-so])` dưới đây tắt số cho mọi tiêu đề không mang thuộc tính. Nên * tiêu đề hộp thoại và tên tệp trong ngăn kéo vẫn không vẽ ô số rỗng — thay đổi * hôm nay là **0px**, và ba mục kia thì từ nay đeo được số. */ /* ── MỘT HÌNH SỐ CHO CẢ APP — chốt 02/09/2026 ───────────────── * Đợt chuẩn hoá 02/09 chia «hai tầng, hai hình»: BƯỚC dùng huy hiệu `.khoi-so` * (chuỗi có trạng thái xong/chưa), MỤC dùng chữ phẳng hai chữ số `01 02 03` * (phần trong một màn). Chủ dự án soi app thật và chỉ ra phân biệt ấy SAI: * * «Đánh số của Kịch bản ngắn và 2 tab trong Chuẩn thương hiệu vẫn khác biệt * so với các tab khác» * * Đúng — và đó là lỗi ở chính cái chuẩn, không phải chỗ bỏ sót. «Có trạng thái * xong/chưa hay không» là phân biệt KỸ THUẬT; người dùng không thấy nó. Với họ, * `01 → 02 → 03` rồi bấm «Cắt phân cảnh» CHÍNH LÀ làm tuần tự từng bước, y như * 1→8 của Kịch bản phim. Hai hình cho cùng một trải nghiệm là hai hình không * đồng bộ, bất kể lý lẽ đứng sau chúng gọn đến đâu. * * Nay MỘT hình: huy hiệu, giống `.khoi-so` tới từng thuộc tính (đo trong trình * duyệt: 11px · `--thuong` · bo 4px · đệm `1px 8px` · sàn 29px · tabular-nums). * Số một chữ số, không «0» đứng đầu — chuỗi dài nhất của hệ này là 3 mục, nên * `01` đọc như thể còn hàng chục mục nữa ở dưới. * * `top: -1px` vì đây là `::before` của một tiêu đề 16px, còn `.khoi-so` là con * của một dòng `.khoi-dau` căn theo `baseline` — cùng huy hiệu, hai ngữ cảnh * căn chỉnh khác nhau, và một pixel ấy là chỗ mắt thấy hai bên lệch nhau. * * Chữ cái khoanh tròn `Ⓐ Ⓑ Ⓒ Ⓓ` của tầng VÙNG (thẻ Cẩm nang) KHÔNG gộp vào * đây: nó là tầng TRÊN, và khác hệ ký hiệu nên không ai đọc lẫn một chữ cái * với một con số. */ h3::before { content: attr(data-so); flex: 0 0 auto; font-size: var(--cs-nho); font-weight: 600; color: var(--chu-tren-mau); background: var(--thuong); border-radius: var(--bo-nho); padding: 1px var(--k-2); min-width: calc(var(--cs-nho) + var(--k-2) * 2 + 2px); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0; margin-right: var(--k-2); position: relative; top: -1px; } /* Không có `data-so` thì không vẽ ô số rỗng. Một mục lẻ không đánh số vẫn phải * trông như người nhà — và đây là lý do cơ chế này dời được mà không đụng một * dòng markup nào: 81 tiêu đề đang có đều không mang `data-so`, nên hôm nay * chúng vẽ ra y như hôm qua. */ h3:not([data-so])::before { content: none } .an { display: none } .nhat { color: var(--chu-nhat); font-size: var(--cs-phu) } .canh { color: var(--canh) } .xau { color: var(--xau) } .tot { color: var(--tot) } code { font-family: Consolas, monospace; font-size: var(--cs-nho); color: var(--chu-code); background: var(--sau); padding: 1px var(--k-1); border-radius: var(--bo-nho); } /* ── Điều khiển ─────────────────────────────────────────── */ /* Nút KHÔNG khai lớp nào vẫn phải mang mặt của app — 23/08/2026. * * Ba hạng nút dưới đây (`chinh` · `phu` · `lienket`, cộng `mieng` ở `man.css`) * phủ gần hết, nhưng **13 nút trong `web/man/` quên khai lớp**, và chúng rơi về * kiểu mặc định của trình duyệt: nền xám lạnh `buttonface` giữa một trang nền * be. Chủ dự án chụp lại nút «Nạp từ địa chỉ» ngày 23/08. * * Đúng cùng một lỗi mà chú thích của khối ô nhập ngay dưới đã mô tả — *"ô vẫn * gõ được, chỉ là nhìn như của app khác"* — và cùng cách chữa: khai một nền * đúng cho chính thẻ, để quên lớp cũng không rơi ra ngoài bảng màu. * * Ba hạng kia đều đặt lại ĐỦ `background`, `border`, `padding`, nên chúng không * bị dòng này chạm tới. `mieng` cố ý KHÔNG đặt nền — nó nhận nền từ đây, và đó * là cái nó vẫn thiếu: viền của `mieng` là thứ duy nhất nói "bấm được", còn nền * xám của trình duyệt thì cãi lại điều đó. */ /* `inline-flex` + căn giữa cho MỌI nút: `min-height` một mình chỉ kéo cao cái * hộp, chữ vẫn nằm theo dòng cơ sở cũ và bị lệch lên trên. Đặt ở đây một lần * để ba hạng nút dưới không phải lặp lại. * * `justify-content: center` đúng cho một nút NHÃN. Nút nào là một HÀNG — ảnh * bên trái, chữ bên phải — phải tự khai `flex-start`; xem `.lua-chon` ở * `man.css` và `.ht-muc` bên dưới. */ button { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-2); background: var(--tam); color: var(--chu); border: 1px solid var(--vien-nut); border-radius: var(--bo); padding: var(--k-1) var(--k-4); min-height: var(--cao-dk); font: inherit; cursor: pointer; } button:hover:not(:disabled) { background: var(--nen-luot); color:var(--thuong); } /* ── MẢNG BẤM ĐƯỢC: MỘT `