/* iAi Inspires Design System v1.0.44 — bản gộp, sinh bởi build/gop-css.py Nguồn: repo 09-design-system. Bản bất biến: /v/1.0.44/iai-ds.css */ :root{--ds-version:"1.0.44"} /* ============================================================================ iAi Inspires Design System — CỬA NẠP DUY NHẤT cho các hệ dev Nạp: Tệp này KHÔNG chứa luật — chỉ nối tới nguồn thật trong tokens/ và thanh-phan/, nên sửa design system là mọi hệ thấy ngay, không phải sinh lại bản sao. Thứ tự nạp có ý nghĩa: sau đè trước (kinh + phoi màu uupm nạp cuối cùng). ========================================================================== */ /* ── tokens/core.css ── */ /* ========================================================================== T2 — TOKEN LÕI iAi · 09-design-system/tokens/core.css Giá trị KHÔNG đổi theo theme, KHÔNG đổi theo app. CẤM dự án con sửa tệp này. Sửa ở kho, sinh/kiểm bằng scripts/kiem-chuan.py. ========================================================================== */ :root { /* ---------- 1. THANG TRUNG TÍNH — 13 nấc ---------- */ --n-0: #FFFFFF; --n-1: #FAFAFB; --n-2: #F4F5F7; --n-3: #EDEEF2; --n-4: #E1E3EA; --n-5: #CFD2DC; --n-6: #B2B6C4; --n-7: #8E93A3; --n-8: #6B7080; --n-9: #4A4E5C; --n-10: #2E313A; --n-11: #1A1C22; --n-12: #0E0F13; /* ---------- 2. THANG THƯƠNG HIỆU iAi — 10 nấc tím ---------- */ --b-1: #F3EDFE; --b-2: #E4D8FC; --b-3: #CDB8F8; --b-4: #B294F3; --b-5: #976FEC; --b-6: #7C4DE0; --b-7: #6D28D9; --b-8: #5A1FB8; --b-9: #451790; --b-10: #2E0F60; /* ---------- 3. VÀNG KIM CƯƠNG — con dấu nhà ---------- */ --g-1: #FEF7E0; --g-2: #FDE68A; --g-3: #FBBF24; --g-4: #F59E0B; --g-5: #B45309; /* ---------- 4. NGỮ NGHĨA — mỗi màu 3 nấc: nhạt · chuẩn · sâu ---------- */ --ok-1: #ECFDF5; --ok-2: #10B981; --ok-3: #065F46; --info-1: #EFF6FF; --info-2: #3B82F6; --info-3: #1E3A8A; --warn-1: #FFFBEB; --warn-2: #F59E0B; --warn-3: #78350F; --err-1: #FEF2F2; --err-2: #EF4444; --err-3: #7F1D1D; /* ---------- 4a. MÀU CHỮ NGỮ NGHĨA ---------- Nấc 1 của mỗi màu là màu NỀN nhạt — đem làm màu CHỮ thì chữ chìm vào nền (đo thật trên 11 màn: `-0,2 TB` và `+3,2%` chỉ đạt 1,00–1,04, tức VÔ HÌNH). Tách token riêng để: (a) chỗ nào cần màu chữ thì dùng đúng token, (b) chế độ tối đổi được mà không phải sờ vào thang nền --n-* (thang đó dùng chung cho cả 2 chế độ — `--n-0` còn làm vệt sáng inset cho .n, CẤM đảo). */ --ok-chu: var(--ok-3); --err-chu: var(--err-3); --info-chu: var(--info-3); --warn-chu: var(--warn-3); /* Nền NÚT NGUY HIỂM + mực trên nó. `--err-2` (#EF4444) là đỏ NHẤN, dùng làm nền nút thì chữ trắng chỉ đạt 3,76:1 (Sếp chửi 09/10/2026). Nay nền đỏ đậm hơn ⇒ trắng đạt 5,8:1; cặp nền/mực khai MỘT chỗ, mọi nút nguy hiểm ăn theo. */ --err-nen: color-mix(in srgb, var(--err-2) 78%, #000); --err-nen-hv: color-mix(in srgb, var(--err-2) 62%, #000); --err-nghich: var(--n-0); /* ---------- 4b. MÀU VAI — cho thẻ số đa sắc, dải màu đầu trang ---------- Sếp 05/10/2026: "màu sắc cực kỳ chán". Gốc: mỗi màn chỉ dùng MỘT màu nhấn (--app) nên mọi thứ cùng một tông. Bốn màu vai tách thẻ số thành 4 nhóm, đọc ra ngay nhóm nào là nhóm nào. Mỗi vai 3 nấc như màu ngữ nghĩa. */ --vai-1: #6D28D9; --vai-1-deep: #491D92; --vai-1-soft: #F3EEFC; --vai-2: #2563EB; --vai-2-deep: #1B439E; --vai-2-soft: #EEF3FD; --vai-3: #0891B2; --vai-3-deep: #155E75; --vai-3-soft: #ECF8FB; --vai-4: #C026D3; --vai-4-deep: #7E1C8E; --vai-4-soft: #FAEEFB; /* ---------- 4c. THANH CUỘN — ẩn hoàn toàn ---------- Sếp 05/10/2026: "dị ứng kiểu show thanh scroll" rồi nhắc lại "nhìn kinh lắm". Luật ẩn nằm ở cuối tệp này (mục THANH CUỘN). KHÔNG còn token bề dày/màu vì không vẽ thanh cuộn nữa. */ /* ---------- 5. CHỮ — một họ cho toàn hệ sinh thái ---------- */ --font-display: 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, -apple-system, 'Noto Sans', sans-serif; --font-ui: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, 'Noto Sans', sans-serif; --font-mono: 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace; --fw-thuong: 400; --fw-vua: 500; --fw-dam: 600; --fw-rat: 700; /* tỉ lệ cỡ chữ — cỡ TUYỆT ĐỐI nằm ở apps.css, đây là tỉ lệ để suy ra */ --ty-le-h1: 1.48; --ty-le-h2: 1.20; --ty-le-h3: 1.03; --ty-le-caption: .83; --fs-nho: 12px; /* SÀN CHỮ NHỎ NHẤT — đo thật 07/10/2026: các thành phần dùng calc(var(--fs-base) * .68…​.78) nên ở mật độ console (--fs-base 13,5px) tụt còn 9,18–10,53px, dưới ngưỡng đọc được. Luật truy cập: CẤM chữ dưới 11px. Mọi chỗ nhân tỉ lệ phải bọc `max(var(--fs-nho), …)` để tỉ lệ vẫn giữ nguyên phân cấp ở nơi đủ lớn, chỉ bị kéo lên ở nơi quá nhỏ. */ --ty-le-h0: 1.5; /* cỡ HIỂN THỊ (hero, số lớn) = --fs-h1 × 1.5 — CẤM nhân số lẻ tại chỗ */ --lh-chat: 1.30; --lh-thuong: 1.55; --lh-thoang: 1.72; /* ---------- 6. KHOẢNG CÁCH — thang 4 ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 120px; /* ---------- 7. BO GÓC — 7 nấc ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px; /* ---------- 8. BÓNG — 4 nấc, MỘT hướng sáng duy nhất ---------- */ --sh-1: 0 1px 2px rgba(16,18,26,.05), 0 2px 6px rgba(16,18,26,.05); --sh-2: 0 2px 4px rgba(16,18,26,.04), 0 6px 16px rgba(16,18,26,.07); --sh-3: 0 8px 24px rgba(16,18,26,.09), 0 2px 8px rgba(16,18,26,.05); --sh-4: 0 20px 48px rgba(16,18,26,.16), 0 6px 16px rgba(16,18,26,.08); --sh-trong: inset 0 1px 2px rgba(16,18,26,.06); /* ---------- 9. CHUYỂN ĐỘNG ---------- */ --t-nhanh: 120ms; --t-thuong: 180ms; --t-cham: 280ms; --ease: cubic-bezier(.2, 0, .38, .9); --ease-vao: cubic-bezier(.4, 0, 1, 1); /* ---------- 10. LỚP XẾP — 7 lớp, cấm dùng số lẻ ---------- */ --z-nen: 0; --z-noi: 10; --z-dinh: 100; --z-menu: 1000; --z-thongbao: 2000; --z-hopthoai: 3000; --z-nhac: 4000; /* ---------- 11. VIỀN ---------- */ --v-mong: 1px; --v-day: 2px; --v-nhan: 3px; /* ---------- 12. ĐỘ MỜ ---------- */ --mo-1: .04; --mo-2: .08; --mo-3: .16; --mo-4: .40; --mo-5: .64; /* ---------- 13. LỚP KÍNH (bậc B2 trở lên) ---------- Một thư viện hiệu ứng nặng đã đo: có GPU 117,6 FPS, KHÔNG GPU còn 6,8 FPS và nó KHÔNG tự hạ cấp. Nên lớp kính ở đây là token, và chỉ dùng ở bậc B2. Bắt buộc kèm nền đục --surface làm đường dự phòng. */ --kinh-mo: blur(18px) saturate(1.6); --kinh-vien: rgba(255,255,255,.38); /* 🔴 GỐC RỄ (09/10/2026): kính để TRẮNG CỐ ĐỊNH ở cả 2 chế độ ⇒ ở chế độ tối, nền tối + kính trắng .62 ra xám SÁNG trong khi chữ vẫn ăn token của chế độ tối ⇒ xám nhạt trên xám sáng, đo thật 1,6:1. Nay kính suy từ `--surface` nên tự theo chế độ: sáng thì y hệt cũ, tối thì kính tối ⇒ chữ theo chế độ lại đúng. */ --kinh-nen: color-mix(in srgb, var(--surface) 62%, transparent); /* ---------- 14. BẬC NĂNG LỰC THIẾT BỊ ---------- B1 nhẹ = mặc định, mọi portal nghiệp vụ, máy văn phòng/VM/điều khiển từ xa. B2 vừa = trang giới thiệu, màn đăng nhập. B3 nặng = chỉ trang demo cho khách, phải có đường dự phòng + tự hạ cấp. */ --bac-nhe: 1; --bac-vua: 2; --bac-nang: 3; } /* Đường dự phòng cho lớp kính khi máy yếu hoặc người dùng tắt hiệu ứng */ @supports not (backdrop-filter: blur(1px)) { :root { --kinh-mo: none; --kinh-nen: var(--n-0); } } @media (prefers-reduced-transparency: reduce) { :root { --kinh-mo: none; --kinh-nen: var(--n-0); } } /* Ghi chú: thuộc tính luận lý BẮT BUỘC — dùng margin-inline-start, padding-inline-end, inset-inline… thay cho left/right, để hệ chạy được cả chữ phải-sang-trái mà không phải viết lại. Cấm left/right trong mã mới. */ /* Cỡ chữ lẻ và màu cứng bị cổng kiểm chặn — xem scripts/kiem-chuan.py */ /* ============================ GẠCH CHÂN ============================ Sếp 05/10/2026: "các button chữ có gạch chân làm đéo gì". Mặc định của trình duyệt cho là GẠCH CHÂN, mà hệ dùng cho nút, tab, logo, mục menu, mục lục… ⇒ gạch chân rò ra khắp giao diện. Luật gốc: KHÔNG gạch chân; CHỈ gạch khi trỏ vào. Liên kết phân biệt bằng MÀU (--link = màu hệ) chứ không bằng gạch — vẫn đạt WCAG 1.4.1 vì màu liên kết lệch hẳn màu chữ thường. */ /* Đo 09/10/2026: chú thích trên ghi "phân biệt bằng MÀU" mà DÒNG `color` BỊ THIẾU ⇒ mọi lấy màu liên kết MẶC ĐỊNH của trình duyệt (#0000EE) — trên nền tối chỉ đạt 2,09, Sếp gọi là "phần mềm thập niên 90". Bổ sung. */ a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: var(--v-day); } /* ============================ THANH CUỘN — ẨN HOÀN TOÀN ============================ Sếp 05/10/2026 (nhắc lần 2): "tao đã bảo tao ko thích thanh scroll hiện rồi mà, nhìn kinh lắm". Lượt trước chỉ TẠO KIỂU thanh cuộn (rãnh trong suốt + con trượt mỏng) — đo lại vẫn thấy 15 ổ cuộn chiếm 10-11px bề ngang. Nay ẨN HẲN: không chiếm chỗ, không vẽ gì, mọi ổ cuộn vẫn cuộn được bằng lăn chuột / trackpad / bàn phím / kéo trên màn cảm ứng. Ba cơ chế song song vì mỗi nhân trình duyệt một khác. */ * { scrollbar-width: none; -ms-overflow-style: none; } /* Firefox · Edge cũ */ ::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome · Edge · Safari */ /* JS ẩn/hiện bảng bung bằng thuộc tính `hidden` (tuy-chon.js), nhưng thành phần khai `display: flex` nên nó ĐÈ luật [hidden] của trình duyệt ⇒ bảng không bao giờ ẩn được, nằm đè lên giao diện. Dòng này buộc `hidden` luôn thắng. */ [hidden] { display: none !important; } /* ── tokens/theme.css ── */ /* ========================================================================== T3 — TOKEN NGỮ NGHĨA iAi · 09-design-system/tokens/theme.css Ánh xạ token lõi (core.css) thành tên theo VAI TRÒ, cho từng chế độ sáng/tối. Thành phần chỉ được gọi TÊN Ở ĐÂY — CẤM gọi thẳng token lõi. ========================================================================== */ /* ------------------------------- SÁNG (mặc định) ------------------------------- Ghi bằng `html` (độ ưu tiên 0-0-1), CỐ Ý yếu hơn khối `[data-app=…]` của apps.css (0-1-0). Trước đây khối này là `:root` (0-1-0) và theme.css nạp sau apps.css ⇒ hai khối cùng độ ưu tiên, khối này thắng: MỌI màn khai `data-app` vẫn ra tím thương hiệu, không hệ nào đổi được màu. Hạ độ ưu tiên là hết, không phụ thuộc thứ tự nạp tệp. */ html, [data-theme='light'] { --bg: var(--n-2); --surface: var(--n-0); --surface-2: var(--n-1); --surface-hover: var(--n-2); --surface-boc: rgba(14,15,19,.44); /* lớp phủ sau hộp thoại */ --control: var(--n-1); --control-hover: var(--n-3); --control-active: var(--n-4); --border: var(--n-4); --border-manh: var(--n-5); --border-focus: var(--app); --focus-ring: var(--app); /* THANG MÀU CHỮ — đo thật 05/10/2026: bậc cũ quá nhạt. --text-3 cũ (#6B7080 n-8) chỉ đạt 4,46 trên nền trang ⇒ TRƯỢT AA. --text-4 cũ (#8E93A3 n-7) chỉ đạt 2,77 ⇒ TRƯỢT NẶNG (Sếp: "chữ nhợt nhạt"). Dịch cả thang xuống một nấc: giữ 4 bậc phân cấp rõ mà mọi bậc đều ≥ 4,5. */ --text: var(--n-12); /* 19,1 — tiêu đề, chữ chính */ --text-2: var(--n-10); /* 13,0 — chữ phụ đậm */ --text-3: var(--n-9); /* 7,6 — chữ phụ, nhãn */ --text-4: var(--n-8); /* 4,9 — chữ mờ nhất, vẫn đạt AA */ --text-nghich: var(--n-0); /* 🔴 MỰC GỐC THEO CHẾ ĐỘ — anh em sinh đôi của thang `--text`, nhưng KHÔNG bị luật "khoá mực cho khối nền" ghi đè. Sự cố 10/10/2026: `tokens/web.css` khoá `--text: var(--app-contrast)` trong `.chan` (đúng cho nền ĐẬM), rồi `mau-thu/phong-cach-uupm.css` đổi `.chan` sang nền `--bg` (SÁNG ở chế độ sáng) mà mực vẫn là trắng ⇒ 18 chỗ chữ trắng trên nền sáng = 1,09:1. Khối nào đổi nền về "theo chế độ" thì trả mực về `var(--muc*)` — một chỗ khai, hết cả cây, đúng ở CẢ 2 chế độ. */ --muc: var(--n-12); --muc-2: var(--n-10); --muc-3: var(--n-9); /* 🔴 MỰC TRÊN NỀN ĐẬM HƠN `--app` (`--app-deep`, gradient mặt tiền) — LUÔN sáng. Sự cố 10/10/2026: 5 khối đổ nền `--app-deep` nhưng giữ mực `--app-contrast`. Token đó là mực cho `--app` (bản NỀN CHUẨN của hệ), KHÔNG phải cho bản đậm hơn: 8/25 bảng màu là hệ màu SÁNG nên khai `--app-contrast: #14141C` (đúng cho `--app`, vd `bpm` #059669 + chữ đậm = 4,88:1) — nhưng trên `--app-deep` #07644A thì chỉ 2,56:1, và trên nền `--app-deep` của `visually` #993C0F còn 1,3:1. Đo sâu 25 hệ × 6 trang: 176 chỗ chìm, TẤT CẢ đều từ một cặp sai này. LUẬT: nền nào ĐẬM HƠN `--app` thì mực phải là `var(--app-deep-chu*)`. Đã đo cả 25 `--app-deep`: trắng đạt ≥ 6,0:1 (thấp nhất `databi` #855C0A). */ --app-deep-chu: #FFFFFF; --app-deep-chu-2: color-mix(in srgb, #FFFFFF 90%, var(--app-deep)); --app-deep-chu-3: color-mix(in srgb, #FFFFFF 84%, var(--app-deep)); /* CHỮ NHẤN MANG MÀU HỆ — token CHU, tách khỏi `--app` (token NỀN). Đo thật 07/10/2026 (23 hệ × 2 chế độ): dùng thẳng `--app` làm chữ thì 11/23 hệ trượt AA ở nền sáng (tệ nhất 2,22 — `surveys` vàng) và 15/23 ở nền tối (tệ nhất 1,79 — `systems-design`). Nguyên nhân: một màu không thể vừa đủ đậm để làm NỀN nút (chữ trắng trên nó) vừa đủ tương phản khi làm CHỮ trên nền trang. Cách chữa: pha về phía tương phản — sáng thì pha ĐEN, tối thì pha TRẮNG. Quét 23 màu × {nền trang, nền hộp, nền vùng chọn} ở cả 2 chế độ: giữ 70% → còn 1 cặp trượt (4,29) · 65% → 4,52 · CHỐT 60% → 5,12 (biên an toàn) Một luật phủ cả 23 hệ; hệ mới thêm vào apps.css tự đúng. Đổi 1 dòng = đổi all. */ --app-chu: color-mix(in srgb, var(--app) 60%, #000000); /* LIÊN KẾT VÀ TIÊU ĐIỂM MANG MÀU HỆ — không dùng tím lõi. Thiếu bước này thì màn hệ vàng vẫn có link tím: hai thương hiệu đánh nhau. */ --link: var(--app-chu); --link-hover: var(--app-deep); /* TẦNG VÙNG NHÓM — Sếp 05/10/2026: "ko có các màu nền gữa các section hoặc group info để tạo ranh giới thị giác mờ giữa các vùng". Đo thật: các nhóm (fieldset biểu mẫu, section nội dung) TRONG SUỐT ⇒ nằm trần trên nền trang, không ranh giới. Ba tầng đã đo: nền trang --bg (1.000) → VÙNG NHÓM (1.063) → hộp --surface (1.091 với nền trang, 1.17 với vùng nhóm). Vùng nhóm TỐI hơn nền một nấc để hộp trắng nổi hẳn lên trên. */ --nen-vung: var(--n-3); --shadow-1: var(--sh-1); --shadow-2: var(--sh-2); --shadow-3: var(--sh-3); --shadow-4: var(--sh-4); } /* ------------------------------- TỐI ------------------------------- */ [data-theme='dark'] { /* Màu CHỮ ngữ nghĩa phải đổi theo chế độ: --ok-3/--err-3 là màu ĐẬM, để nguyên trên nền tối thì `+3,2%` chỉ đạt 2,1 (cần 4,5). Pha với trắng để vẫn giữ sắc xanh/đỏ mà đủ tương phản. (core.css giữ nấc đậm cho nền SÁNG.) */ --ok-chu: color-mix(in srgb, var(--ok-2) 70%, #FFFFFF); --err-chu: color-mix(in srgb, var(--err-2) 55%, #FFFFFF); --info-chu: color-mix(in srgb, var(--info-2) 70%, #FFFFFF); --warn-chu: color-mix(in srgb, var(--warn-2) 75%, #FFFFFF); --bg: #0E0A21; /* tím than sâu — CẤM đen tuyền */ --surface: #191238; --surface-2: #1F1745; --surface-hover: #221A4A; --surface-boc: rgba(0,0,0,.60); --control: #221A4A; --control-hover: #2C2160; --control-active: #332768; --border: #3D3170; --border-manh: #55459A; --border-focus: #A78BFA; --focus-ring: #A78BFA; --text: #FDFBFF; --text-2: #E6DFFA; --text-3: #CFC4F0; --text-4: #AFA1D6; --text-nghich: #0E0A21; /* MỰC GỐC THEO CHẾ ĐỘ (xem chú thích ở khối sáng) */ --muc: #FDFBFF; --muc-2: #E6DFFA; --muc-3: #CFC4F0; /* CHỮ NHẤN ở chế độ tối: pha TRẮNG (xem chú thích khối sáng). */ --app-chu: color-mix(in srgb, var(--app) 60%, #FFFFFF); --link: var(--app-chu); --link-hover: color-mix(in srgb, var(--app) 45%, #FFFFFF); /* Tầng vùng nhóm ở chế độ tối: nổi hơn nền trang, chìm dưới hộp --surface */ --nen-vung: #150F2E; --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 4px 12px rgba(0,0,0,.40); --shadow-3: 0 10px 26px rgba(0,0,0,.45); --shadow-4: 0 20px 44px rgba(0,0,0,.50); } /* ------------------------- Ánh xạ lại màu app theo chế độ ------------------------- apps.css khai --app / --app-soft / --app-border ở chế độ sáng. Chế độ tối cần nền nhạt ĐẢO: tím nhạt thành tím than, chữ giữ nguyên. 🔴 ĐỘ ƯU TIÊN 0-3-1 — đo thật 07/10/2026, KHÔNG được hạ xuống: cùng khai --app-soft/--app-border/--focus-ring có 4 nơi tranh nhau: apps.css [data-app="…"] 0-1-0 (nạp SAU theme.css) mau-sac.css html[data-bang-mau='…'] 0-1-1 (máy sinh, nạp sau) mau-uupm.css html[data-app]:not([data-bang-mau]) 0-2-1 (nạp CUỐI) Bản cũ `[data-theme='dark']` chỉ 0-1-0 nên THUA cả ba ⇒ --app-soft giữ nguyên màu SÁNG #F1F0FD trên nền tối ở 23/23 hệ (đo: ô đang chọn gần trắng trên nền tím than) và kéo theo 52 cặp tương phản trượt AA, tệ nhất 1,00:1. `:not([data-mau-tuy-chon])`: khi người dùng tự pha màu thì mau-tuy-chon.css (0-3-1, nạp cuối) đã lo phần của nó — đừng tranh. */ html[data-theme='dark'][data-app]:not([data-mau-tuy-chon]) { --app-soft: color-mix(in srgb, var(--app) 22%, #0E0A21); --app-border: color-mix(in srgb, var(--app) 42%, #0E0A21); } /* Trang KHÔNG thuộc hệ nào (landing, tài liệu, đăng nhập chung) cũng phải đảo nền nhạt ở chế độ tối — nếu không, `--app-soft` giữ #EFF6FF (gần trắng) trên nền tối: đo thật 07/10/2026 ô "mục đang chọn" chỉ đạt 2,34. Đặc hiệu 0-4-1 để thắng khối `html:not([data-app]):not([data-bang-mau]):not([data-mau-tuy-chon])` (0-3-1) của mau-uupm.css (nạp sau theme.css). */ html[data-theme='dark']:not([data-app]):not([data-mau-tuy-chon]):not([data-bang-mau]) { --app-soft: color-mix(in srgb, var(--app) 22%, #0E0A21); --app-border: color-mix(in srgb, var(--app) 42%, #0E0A21); } /* ---------------------- VÒNG TIÊU ĐIỂM ĐẠT 3:1 (WCAG 1.4.11) ---------------------- Đo thật: --focus-ring = --app nguyên bản CHỈ đạt 3/48 màu — tệ nhất 2,09 (he `surveys` trên nền trang sáng) và 1,78 (he `systems-design` trên nền tối). Cách chữa: trộn về phía tương phản — nền sáng thì trộn ĐEN cho đậm thêm, nền tối thì trộn TRẮNG cho sáng thêm. Quét toàn bộ 48 màu × 3 sắc độ nền mỗi chế độ, chọn tỉ lệ NHỎ NHẤT mà mọi màu vượt 3,0 (giữ được nhiều sắc thái gốc): sáng 84% → 2,92 TRƯỢT · 82% → 3,06 · chốt 78% → 3,34 tối 82% → 2,87 TRƯỢT · 80% → 3,02 · chốt 76% → 3,40 Một luật phủ cả 48 màu; thêm hệ mới cũng tự đúng vì suy ra từ --app. */ html:not([data-theme='dark'])[data-app]:not([data-mau-tuy-chon]) { --focus-ring: color-mix(in srgb, var(--app) 78%, #000000); } html[data-theme='dark'][data-app]:not([data-mau-tuy-chon]) { --focus-ring: color-mix(in srgb, var(--app) 76%, #FFFFFF); } /* ------------------------- BA MẬT ĐỘ (nguồn: apps.json · nhóm 'matDo') ------------------------- Ghi bằng `html[data-mat-do=…]` (độ ưu tiên 0-1-1) để THẮNG khối `[data-app=…]` trong apps.css (0-1-0). Trước đây hai khối cùng độ ưu tiên, apps.css nạp sau nên mật độ khai trong màn KHÔNG có tác dụng — màn marketing chạy nhầm cỡ chữ của hệ console. */ /* SÀN CHUẨN cứng: chữ ≥14px, control ≥36px, chữ phụ ≥12px (Sếp chốt 08/10/2026). Bản cũ 13,5/34/11,5 — trên màn 100% là 13,5px thật, nhỏ hơn cả mặc định trình duyệt ⇒ đây là gốc của cảm giác "nhỏ, khó đọc, không giống storybook". Hạ mật độ bằng KHOẢNG CÁCH (--space-block · --space-card), KHÔNG bằng cách bóp chữ dưới sàn. */ html[data-mat-do='console'] { --fs-base: 14px; --lh-base: 1.5; --control-h: 36px; --radius-control: 8px; --fs-h1: 21px; --fs-h2: 16.5px; --fs-h3: 15px; --fs-caption: 12px; --space-block: 10px; --space-card: 12px; } html[data-mat-do='nghiep-vu'] { --fs-base: 15px; --lh-base: 1.55; --control-h: 40px; --radius-control: 10px; --fs-h1: 24px; --fs-h2: 18px; --fs-h3: 15.5px; --fs-caption: 12.5px; --space-block: 14px; --space-card: 16px; } html[data-mat-do='marketing'] { --fs-base: 16.5px; --lh-base: 1.65; --control-h: 44px; --radius-control: 12px; --fs-h1: 30px; --fs-h2: 21px; --fs-h3: 17px; --fs-caption: 13px; --space-block: 18px; --space-card: 20px; } /* ========================================================================== MÀU NHẬN DIỆN MẶC ĐỊNH — cho trang KHÔNG thuộc hệ nào (landing, tài liệu, cổng thông tin, trang lỗi). Đây là tím thương hiệu iAi. Thiếu khối này thì trang không khai `data-app` bị vỡ màu: --app rỗng ⇒ nút chính trong suốt, link mất màu, con dấu mất nền. Màn thuộc một hệ vẫn lấy Cũng ghi bằng `html` để khối `[data-app=…]` của apps.css (0-1-0) luôn thắng. ========================================================================== */ html { --app: var(--b-7); --app-light: var(--b-5); --app-deep: var(--b-8); --app-soft: var(--b-1); --app-border: var(--b-3); --app-contrast: var(--n-0); /* NHẤN NÓNG (đuôi gradient, icon nổi bật) — khai MỘT CHỖ dùng cho MỌI hệ. Gốc từ phối màu uupm; đây là sắc ĐÃ ĐO tương phản, không phải màu trang trí tuỳ hứng: #F97316 chỉ đạt 2,8 trên nền trắng (dưới ngưỡng 3,0 cho chữ lớn) nên CHỮ dùng bậc đậm hơn. Đổi 1 dòng ở đây là đổi cho cả 23 hệ. */ --app-nong: #F97316; /* trang trí: gradient, vệt sáng */ --app-nong-chu: #EA580C; /* chữ lớn: đo 3,56 trên nền trắng */ --app-nong-day: #C2410C; /* chữ thường: đo 5,18 */ --app-nong-soft: #FFF7ED; } /* Mật độ mặc định của trang mang màu thương hiệu: AIRY (trang giới thiệu). `html` (0-0-1) < `[data-app=…]` (0-1-0) < `html[data-mat-do=…]` (0-1-1): màn khai hệ thì ăn mật độ của hệ, màn khai thêm data-mat-do thì ăn mật độ của màn. */ html { --fs-base: 16.5px; --lh-base: 1.65; --control-h: 44px; --radius-control: 12px; --fs-h1: 30px; --fs-h2: 21px; --fs-h3: 17px; --fs-caption: 13px; --space-block: 18px; --space-card: 20px; } /* ── tokens/layout.css ── */ /* ========================================================================== T3 — BỐ CỤC & CO GIÃN iAi · 09-design-system/tokens/layout.css Luật dùng màn: 16:9 là màn CHÍNH (máy để bàn / console), các tỉ lệ khác là màn SUY GIẢM. CẤM thiết kế riêng cho từng tỉ lệ — chỉ đổi cách xếp. ========================================================================== */ :root { /* ---------- ĐIỂM NGẮT — 8 mốc, đủ mọi tỉ lệ thật ---------- */ --bp-do-doc: 380px; /* điện thoại dọc hẹp */ --bp-dt: 640px; /* điện thoại */ --bp-dt-ngang: 768px; /* điện thoại ngang / tablet dọc — Z-Fold mở */ --bp-tablet: 1024px; /* tablet ngang */ --bp-lap: 1280px; /* laptop 16:10 */ --bp-16-9: 1440px; /* MÀN CHÍNH — 16:9 phổ thông */ --bp-ultrawide: 1920px; --bp-sieu-rong: 2560px; /* ---------- KHUNG CHỨA ---------- */ --rong-doc: 720px; /* bài đọc, tài liệu */ --rong-form: 960px; /* biểu mẫu nhiều bước */ --rong-noi-dung: 1280px; --rong-day: 1600px; --rong-toi-da: 100%; /* console dùng HẾT bề ngang — CẤM bó hẹp */ /* ---------- XƯƠNG SỐNG BA CỘT (màn quản trị 16:9) ---------- */ --thanh-ben: 260px; --thanh-ben-thu: 68px; /* thu gọn còn icon */ --ray-phai: 320px; /* ray ngữ cảnh / chi tiết */ --thanh-tren: 56px; --thanh-ben-day: 280px; /* NGĂN KÉO (tablet · gập · điện thoại) */ --an-toan-duoi: env(safe-area-inset-bottom, 0px); /* iPhone: chừa vùng dưới */ /* ---------- CỠ MÀN TỐI THIỂU ---------- */ --màn-cao-1: 640px; /* dưới mức này phải cho cuộn, không nhồi */ --màn-cao-2: 800px; } /* ============================ NỀN CHUNG ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base, 15px); line-height: var(--lh-base, 1.55); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Cỡ chữ suy từ mật độ: --fs-h1/h2/h3/--fs-caption (apps.css · theme.css) là cỡ THẬT theo mật độ; calc(...) chỉ là đường lui khi trang chưa nạp tệp token mật độ. CẤM đặt cỡ tuyệt đối trong thành phần. */ h1 { font-family: var(--font-display); font-size: var(--fs-h1, calc(var(--fs-base) * var(--ty-le-h1))); line-height: var(--lh-chat); font-weight: var(--fw-rat); letter-spacing: -.02em; margin: 0; } h2 { font-family: var(--font-display); font-size: var(--fs-h2, calc(var(--fs-base) * var(--ty-le-h2))); line-height: var(--lh-chat); font-weight: var(--fw-dam); letter-spacing: -.01em; margin: 0; } h3 { font-size: var(--fs-h3, calc(var(--fs-base) * var(--ty-le-h3))); line-height: var(--lh-chat); font-weight: var(--fw-dam); margin: 0; } .nho { font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } /* CỠ HIỂN THỊ — tiêu đề hero, con số lớn. Một tỉ lệ duy nhất (--ty-le-h0), suy từ --fs-h1 nên tự đúng ở cả ba mật độ. CẤM nhân số lẻ tại chỗ như trước. */ .h0 { font-size: max(var(--fs-nho), calc(var(--fs-h1, calc(var(--fs-base) * var(--ty-le-h1))) * var(--ty-le-h0))); line-height: var(--lh-chat); letter-spacing: -.02em; } h1.h0, h2.h0 { font-size: max(var(--fs-nho), calc(var(--fs-h1, calc(var(--fs-base) * var(--ty-le-h1))) * var(--ty-le-h0))); } .ma { font-family: var(--font-mono); font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); font-variant-numeric: tabular-nums; } /* Khối mã nhiều dòng (pre.ma) PHẢI ngắt được dòng — nếu không, JSON/diff dài tràn ngang khỏi ô, đè sang ô bên (đo thật trên /audit: tràn 161px). Giữ khối mã cuộn dọc, không phá bố cục. */ pre.ma { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } /* Tiêu điểm PHẢI thấy rõ — luật truy cập, không được bỏ */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } /* ============================ KHUNG CHỨA ============================ */ .khung { width: 100%; max-width: var(--rong-noi-dung); margin-inline: auto; padding-inline: var(--s-6); } .khung--doc { max-width: var(--rong-doc); } .khung--form { max-width: var(--rong-form); } .khung--day { max-width: var(--rong-day); } .khung--tran { max-width: none; padding-inline: var(--s-6); } /* ======================= XƯƠNG SỐNG MÀN QUẢN TRỊ ======================= Ba cột: thanh bên · nội dung · ray phải. Ray phải TỰ ẨN khi hẹp. Đây là bố cục tận dụng 16:9 tốt nhất: 260 + nội dung + 320. */ .xuong { display: grid; grid-template-columns: var(--thanh-ben) minmax(0, 1fr); grid-template-rows: var(--thanh-tren) minmax(0, 1fr); grid-template-areas: 'thanh-tren thanh-tren' 'thanh-ben noi-dung'; min-height: 100dvh; } .xuong--co-ray { grid-template-columns: var(--thanh-ben) minmax(0, 1fr) var(--ray-phai); grid-template-areas: 'thanh-tren thanh-tren thanh-tren' 'thanh-ben noi-dung ray-phai'; } /* THU GỌN THANH BÊN — màn để bàn (07/10/2026). Nút 3 gạch (thanh-phan/tuy-chon.js) chỉ đổi lớp `menu--thu` trên RUỘT menu, mà cột lưới ở đây đọc `var(--thanh-ben)` ⇒ menu co còn 68px nhưng cột vẫn 236px: hụt 168px dải nền đậm rỗng, nội dung KHÔNG được giãn (đo thật 6/6 màn 03…08). Gốc: cho trạng thái thu gọn ghi đè CHÍNH token trên khung ⇒ mọi điểm ngắt (3 cột · 2 cột ≤1280 · ngăn kéo ≤1024) giữ nguyên, không phải viết lại luật lưới nào. `> .xuong__ben` là BẮT BUỘC: bản lỏng `.xuong:has(.menu--thu)` bắt nhầm khi trong ô nội dung có khung demo menu thu gọn (trang thư viện 08) — đã đo, 236px co thành 68px. Descendant duy nhất dùng `var(--thanh-ben)` là `.menu` (chính thanh bên) nên không rò. */ @media (min-width: 1025px) { .xuong:has(> .xuong__ben .menu--thu) { --thanh-ben: var(--thanh-ben-thu); } } /* Khung KÍN: cao đúng bằng khung nhìn, chỉ ô nội dung cuộn. Đây là cách "thiết kế cho 16:9" — đầu trang, thanh bên, ray phải luôn đứng yên; biểu mẫu/bảng dài cuộn trong lòng ô, KHÔNG đẩy tràn cả trang. */ .xuong--kin { height: 100dvh; min-height: 0; overflow: hidden; } .xuong--kin > * { min-height: 0; } .xuong--kin .xuong__tren { position: relative; } .xuong__tren { grid-area: thanh-tren; position: sticky; top: 0; z-index: var(--z-dinh); min-width: 0; /* thiếu dòng này: đầu trang không co được → đẩy vỡ lưới ở máy hẹp */ background: var(--surface); border-bottom: var(--v-mong) solid var(--border); } /* DẢI MÀU ĐẦU TRANG — Sếp 05/10/2026: giao diện sáng đều một tông nên đọc ra đơn điệu. Một vạch 4 màu vai chạy hết bề ngang đầu trang đủ để phá thế đơn sắc mà KHÔNG đụng nền, không tốn GPU, không phải đo lại tương phản chữ. */ .xuong__tren::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-1); background: linear-gradient(90deg, var(--vai-1), var(--vai-2) 25%, var(--vai-3) 50%, var(--vai-4) 75%, var(--warn-2)); } /* THANH BÊN ĐẬM — nền suy từ --app của chính hệ nên TỰ ĐỔI theo cả 26 bảng màu, không phải khai lại tay cho từng hệ. Chữ trắng vì nền luôn lấy nấc đậm. */ .xuong__ben { grid-area: thanh-ben; background: linear-gradient(170deg, color-mix(in srgb, var(--app-deep) 92%, rgb(0 0 0)) 0%, color-mix(in srgb, var(--app-deep) 78%, rgb(0 0 0)) 52%, color-mix(in srgb, var(--app-deep) 88%, rgb(0 0 0)) 100%); border-right: 0; overflow-y: auto; overscroll-behavior: contain; } .xuong__noi { grid-area: noi-dung; min-width: 0; overflow-y: auto; padding: var(--s-6); } .xuong__ray { grid-area: ray-phai; background: var(--surface-2); border-left: var(--v-mong) solid var(--border); overflow-y: auto; padding: var(--s-5); } /* min-width:0 ở ô lưới là BẮT BUỘC — thiếu nó bảng dài làm vỡ cả trang */ .xuong__noi > * { min-width: 0; } /* VÙNG NỘI DUNG THEO TAB — cùng lý do như .bieu-mau__nhom: section nội dung trước đây TRONG SUỐT nên không tách được vùng. Nền --nen-vung + bo + đệm. PHẢI loại .tp: đó là khung trưng bày của trang thư viện (08 có 26 cái) — đo thật: áp đều cho 26 khung thì bị chấm 6/10 vì "lặp lại, hơi nặng". */ .xuong__noi > section:not(.tp) { background: var(--nen-vung); border-radius: var(--r-lg); padding: var(--s-5); min-width: 0; } .xuong__noi > section:not(.tp) > :first-child { margin-top: 0; } /* ============================ CỘT CO GIÃN ============================ */ .hang { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; } .hang--tren { align-items: flex-start; } .hang--giua { justify-content: center; } .hang--cach { justify-content: space-between; } .cot { display: flex; flex-direction: column; gap: var(--s-4); } /* ---------- NẤC KHOẢNG CÁCH CHO .cot / .hang ---------- Vì sao cần: `.cot`/`.hang` chỉ có MỘT nấc (--s-4 = 16px). Thiếu nấc hẹp nên các hệ phải mượn lớp tiện ích của Tailwind (`gap-2` 8px · `gap-3` 12px · `mt-3` …) ⇒ khoảng cách chạy ngoài thang token, màn nào một kiểu (đo 08/10/2026 trên Mai Config Hub: 466 lượt lớp tiện ích chồng lên khuôn). Ba nấc dưới đây phủ hết các cỡ đang dùng thật. */ .cot--sat, .hang--sat { gap: var(--s-1); } /* 4px — dính nhau (chip, nhãn + dấu) */ .cot--hep, .hang--hep { gap: var(--s-2); } /* 8px — sát (ô trong một nhóm nhỏ) */ .cot--vua, .hang--vua { gap: var(--s-3); } /* 12px — vừa (khối trong thẻ) */ .cot--rong, .hang--rong { gap: var(--s-5); } /* 20px — rộng (giữa các nhóm lớn) */ .cot--dinh, .hang--dinh { gap: 0; } /* khít — cụm vốn không có khoảng cách */ /* ---------- TIỆN ÍCH KHUÔN (thay lớp Tailwind ngoài thềm) ---------- */ /* Bề rộng lấp đầy phần tử cha — dùng cho ô nhập/nút trong ô lưới. */ .rong-het { width: 100%; } /* Chữ một dòng, không xuống hàng (mã khoá, mã dự án…). */ .khong-ngat { white-space: nowrap; } /* Chuỗi dài không có dấu cách (mã, URL, JSON) — ngắt bất kỳ đâu, CẤM đẩy tràn lưới. */ .ngat-tu { overflow-wrap: anywhere; word-break: break-word; } /* Ẩn khỏi mắt nhưng còn cho trình đọc màn hình (nhãn phụ trợ). */ .chi-doc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Khoảng cách DỌC giữa hai khối rời (không nằm trong `.cot`). Cùng thang token với `.cot--*` để màn không tự chế số lẻ. */ .cach-tren--sat { margin-top: var(--s-1); } .cach-tren--hep { margin-top: var(--s-2); } .cach-tren--vua { margin-top: var(--s-3); } .cach-tren--rong { margin-top: var(--s-4); } .cach-tren--day { margin-top: var(--s-5); } .cach-tren--lon { margin-top: var(--s-6); } .cach-duoi--sat { margin-bottom: var(--s-1); } .cach-duoi--hep { margin-bottom: var(--s-2); } .cach-duoi--vua { margin-bottom: var(--s-3); } .cach-trai--sat { margin-left: var(--s-1); } .cach-trai--hep { margin-left: var(--s-2); } /* Bề rộng ô nhập: ba nấc phủ các cỡ dùng thật (ô tìm kiếm, ô lọc, ô số). Dùng min-width để ô vẫn co được trên màn hẹp — CẤM width cứng. */ .rong--nho { min-width: 4rem; } /* 64px — ô số rất hẹp */ .rong--vua { min-width: 18rem; } /* 288px — ô tìm/lọc thường */ .rong--lon { min-width: 24rem; } /* 384px — ô nội dung dài */ /* Danh sách gạch đầu dòng (hướng dẫn, cảnh báo nhiều ý). Ghép được với `.cot`/`.cach-tren--*`. */ .danh-sach { list-style: disc; padding-inline-start: var(--s-5); } /* Căn chữ trong ô bảng — ô ``/`` mặc định căn giữa nên phải khai tường minh. */ .trai { text-align: left; } .phai { text-align: right; } /* Hàng dừng ở đáy / theo đường chữ cái (nhãn + ô số lệch cỡ). */ .hang--day { align-items: flex-end; } .hang--chan { align-items: baseline; } /* Vùng tự cuộn khi nội dung dài (danh sách, khối mã) — kèm trần chiều cao ở nơi gọi. */ .cuon { overflow: auto; overscroll-behavior: contain; } /* Sàn chiều cao bằng khung nhìn: trang công khai một màn hình. */ .san-man { min-height: 100dvh; } /* Thanh tiến độ mảnh (tỉ lệ đạt/đủ). Nền do nơi gọi đặt qua biến màu. */ .thanh-mong { display: block; height: var(--s-2); border-radius: var(--r-md); overflow: hidden; } /* Rãnh nền trung tính cho thanh tiến độ (khi nơi gọi không cần màu riêng). */ .thanh-mong--ranh { background: var(--control-active); } /* Phần đã chạy của thanh tiến độ. BỀ RỘNG do nơi gọi đặt bằng style vì là SỐ ĐỘNG (%). */ .thanh-mong__day { display: block; height: 100%; border-radius: var(--r-full); background: var(--app); } /* Chữ giữ nguyên dấu xuống hàng và ngắt được cả chuỗi dài (khối JSON, nội dung thô). */ .giu-dong { white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------- HÀNH VI CO GIÃN TRONG HÀNG (thay `flex-1` · `shrink-0` · `min-w-0`) ---------- */ /* Ô tự giãn hết phần còn lại của hàng — dùng cho ô nhập cạnh nút. */ .gian-het { flex: 1 1 0%; min-width: 0; } /* Ô cỡ chuẩn của thanh công cụ: giãn nhưng không hẹp hơn 18rem, màn hẹp vẫn co được. */ .rong--co-gian { flex: 1 1 18rem; min-width: 0; } /* Ô lọc HẸP trong hàng nhiều ô (trạng thái, người, số dòng): giãn, không hẹp hơn 12rem. */ .rong--co-gian-hep { flex: 1 1 12rem; min-width: 0; } /* Cột bảng hẹp cỡ chữ (cột phụ, cột ghi chú) — thay số cứng `width: 220/260`. */ .rong--cot { width: 15rem; } /* Nhãn phụ xuống dòng trong tiêu đề (`.the__dau h3` …). */ .xuong-dong { display: block; } /* Xoá hết viền · lề · đệm còn sót của phần tử cha (nhãn lồng trong khối có đệm). */ .bo-gon { border: 0; margin: 0; padding: 0; } /* Vùng bấm được của cả nhãn (ô đánh dấu + chữ). */ .tro { cursor: pointer; } /* Nhãn đứng yên một cỡ, không co (nhãn cột trong hàng nhãn–giá trị). */ .rong--nhan { width: 11rem; flex: none; } /* Phần tử CẤM co (nút, ô vuông) trong hàng có ô giãn. */ .khong-co { flex: none; } /* Đẩy phần tử sang mép phải của hàng. */ .sang-phai { margin-left: auto; } /* ---------- ĐƯỜNG KẺ + ĐỆM LẺ (nấc của kho, không tự chế số) ---------- */ .ke-duoi { border-bottom: var(--v-mong) solid var(--border); } .dem-doc--hep { padding-block: var(--s-2); } .dem--lon { padding: var(--s-6); } /* ---------- TRẦN CHIỀU CAO (khối cuộn bên trong) ---------- */ .cao-toi-da--nho { max-height: 12rem; } .cao-toi-da--vua { max-height: 18rem; } .cao-toi-da--lon { max-height: 22rem; } .cao-toi-da--nua-man { max-height: 60vh; } /* Bảng NHIỀU CỘT: giữ bề rộng tối thiểu để cột không bị bóp, cuộn ngang thay vì tràn màn. */ .luoi-du-lieu--rong > table { min-width: 70rem; } /* Chữ SỐ thẳng cột (mọi con số cùng bề rộng chữ) — bảng số liệu, biểu đồ. */ .so-dem { font-variant-numeric: tabular-nums; } .luoi { display: grid; gap: var(--s-4); grid-template-columns: repeat(12, minmax(0, 1fr)); } .luoi > .o2 { grid-column: span 2; } .luoi > .o3 { grid-column: span 3; } .luoi > .o4 { grid-column: span 4; } .luoi > .o6 { grid-column: span 6; } /* .o5 / .o7 bổ sung 09/10/2026 — dãy cũ nhảy 4 → 6 → 8, THIẾU 5 và 7 nên hệ dùng `class="o5"`/`"o7"` rơi vào 1 cột (50px): chữ dồn cột dọc, khối cao 1423px. Trình duyệt IM LẶNG với class không tồn tại — 3 màn Sen Notes vỡ. */ .luoi > .o5 { grid-column: span 5; } .luoi > .o7 { grid-column: span 7; } .luoi > .o8 { grid-column: span 8; } .luoi > .o9 { grid-column: span 9; } .luoi > .o12 { grid-column: span 12; } /* Lưới thẻ tự động: co theo bề ngang, không cần điểm ngắt */ .luoi-the { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ============================ MÀN HẸP DẦN ============================ */ /* ≤ 1920: ray phải thu hẹp */ @media (max-width: 1920px) { :root { --ray-phai: 300px; } } /* ≤ 1440 — màn 16:9 phổ thông: giữ đủ ba cột */ @media (max-width: 1440px) { :root { --thanh-ben: 236px; --ray-phai: 280px; } } /* ≤ 1280: BỎ ray phải — nội dung chiếm chỗ, ray thành ngăn kéo */ @media (max-width: 1280px) { .xuong--co-ray { grid-template-columns: var(--thanh-ben) minmax(0, 1fr); grid-template-areas: 'thanh-tren thanh-tren' 'thanh-ben noi-dung'; } .xuong__ray { display: none; } .luoi > .o2, .luoi > .o3 { grid-column: span 4; } } /* SÀN CỠ ĐIỀU KHIỂN — `--control-h` (36px console · 40px nghiệp vụ · 44px mặt tiền), áp MỌI bề rộng. Trước đây chỉ 24×24 (sàn tối thiểu WCAG 2.5.8) ⇒ trên màn to điều khiển cao 24px, hẹp hơn cả chữ quanh nó — đo 08/10/2026 (Sếp: «control dị, xấu kinh hồn»): hàng cây 24px, ô nhập 24px. Sàn cũ chỉ đủ VỀ LUẬT, không đủ VỀ MẮT. Trước: luật này nằm TRONG @media ≤1024 nên ở màn để bàn nút × trong chip chỉ 15×15, nút đóng thông báo 17×16, nút nhỏ trong thư viện 9×15 — tất cả dưới sàn. Dùng :where() = độ đặc hiệu 0-0-0 ⇒ chỉ chạm thứ CHƯA có tầng nào tạo kiểu, KHÔNG đè được luật 44px ở ≤1024 hay bất kỳ thành phần nào (đã đo lại). Loại trừ .n--lk: nút dạng liên kết nằm trong câu — WCAG miễn cho liên kết nội dòng. */ :where(button, [role='button'], a.nut):where(:not(.n--i)):where(:not(.nut-nho)):where(:not(.n--lk)) { min-width: var(--control-h); min-height: var(--control-h); } /* ====================================================================== ≤ 1024 — TABLET NGANG · TABLET DỌC · ĐIỆN THOẠI GẬP MỞ (Z-Fold 717-1024) Thanh bên KHÔNG được ẩn trơ (ẩn trơ = không có đường vào menu = màn chết). Nó thành NGĂN KÉO trượt từ mép trái; nút menu ở đầu trang điều khiển. Thoát ngăn kéo: bấm màn che · bấm một mục menu · phím Esc. ====================================================================== */ /* ====================================================================== SÀN CỠ ĐIỀU KHIỂN — ÁP MỌI MÀN, MỌI THIẾT BỊ (CHUỘT LẪN TAY). Trước đây sàn chỉ nằm trong @media ≤1024 nên màn LỚN không có sàn nào: đo thật 07/10/2026 (1920x1080 và FHD) ô nhập cao 21px, nút cao 14px — vi phạm 2.5.8. Tiền tố `html` (0-1-1) để không bị CSS thành phần nạp sau đè. ====================================================================== */ /* BẪY ĐỘ ĐẶC HIỆU: `:is()` ăn theo đối số MẠNH NHẤT (`a.nut` = 0-1-1) ⇒ cả luật thành 0-1-2 và ĐÈ khối cảm ứng `html .n--i` (0-1-1). Đo thật 07/10/2026: 5 nút biểu tượng computed min-width = 24px thay vì 44px. Phải loại .n--i/.nut-nho khỏi luật này rồi cho chúng luật riêng CÙNG mức 0-1-1 để khối 44px nạp sau thắng. */ html :is(button, [role='button'], a.nut, a.menu__muc, input:not([type='checkbox']):not([type='radio']), select, textarea):not(.n--i):not(.nut-nho) { min-height: var(--control-h); } html :is(button, [role='button'], a.nut, a.menu__muc):not(.n--i):not(.nut-nho) { min-width: var(--control-h); } html .n--i, html .nut-nho { min-width: var(--control-h); min-height: var(--control-h); } html input[type='checkbox'], html input[type='radio'] { min-width: 24px; min-height: 24px; } /* NÚT × TRONG CHIP LỌC — chip cao `calc(var(--control-h) * .72)` = 28,8px nên KHÔNG chứa nổi đích chạm 40px mà luật sàn ngay trên ép (0-3-3). Đo thật 09/10/2026 trên hệ Sen Notes: chip scrollHeight 34 > clientHeight 27 ⇒ mất chân chữ ("Nhóm sản phẩm×", "Phòng B2×"); 22 chỗ ở 5 màn. Hạ nút × về --s-6 = 24px — ĐÚNG sàn tối thiểu của WCAG 2.5.8 (vẫn ≥ 24px). Nhân ba lớp + kèm `body` để đạt 0-3-3 rồi thắng nhờ NẠP SAU — cùng cách kho đang dùng cho `.nut-menu.nut-menu`. */ html body .chon-nhieu__chip.chon-nhieu__chip.chon-nhieu__chip button { min-width: var(--s-6); min-height: var(--s-6); width: var(--s-6); height: var(--s-6); padding: 0; } /* Nút mở menu ngăn kéo: màn RỘNG thì thanh bên luôn hiện ⇒ nút vô nghĩa, ẩn đi. (Luật cho hiện nằm trong khối @media ≤1024 ngay dưới.) */ .nut-menu.nut-menu { display: none; } @media (max-width: 1024px) { /* Một cột: đầu trang · nội dung · ray phải. Ray XUỐNG DƯỚI nội dung — CẤM display:none (mất thông tin ngữ cảnh). */ .xuong, .xuong--co-ray { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'thanh-tren' 'noi-dung' 'ray-phai'; } .xuong__ray { padding: var(--s-4); border-left: 0; border-top: var(--v-mong) solid var(--border); } /* Khung KÍN chỉ đúng ở màn 16:9 để bàn. Giữ overflow:hidden dưới mốc này là CẮT ĐÁY nội dung vĩnh viễn → trả về cuộn dọc bình thường. */ .xuong--kin { height: auto; min-height: 100dvh; overflow: visible; } .xuong--kin .xuong__tren { position: sticky; } .xuong__noi { overflow-y: visible; padding: var(--s-5); } /* ---------- THANH BÊN → NGĂN KÉO ---------- */ :root, html[data-app] { --thanh-ben: var(--thanh-ben-day); } .xuong__ben { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-menu); width: var(--thanh-ben-day); max-width: 88vw; overflow-y: auto; overscroll-behavior: contain; translate: -100% 0; /* mặc định ĐÓNG */ box-shadow: none; /* đóng thì CẤM hắt bóng vào màn (lem nhem) */ transition: translate var(--t-thuong) var(--ease); } .menu-mo .xuong__ben { translate: 0 0; box-shadow: 0 8px 32px rgba(0, 0, 0, .22); } /* Màn che: bấm ra ngoài là thoát */ .menu-mo::before { content: ''; position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: rgba(0, 0, 0, .45); } body.menu-mo { overflow: hidden; } /* NÚT MỞ MENU — kho lo phần khó (ngăn kéo + lớp `menu-mo` trên ) nhưng TRƯỚC ĐÂY KHÔNG cấp nút bấm, nên mọi hệ phải tự chế (Mai Config Hub khai `.nut-menu` mà 0 luật CSS ⇒ nút không có gì để hiện). Màn HẸP mới cần nút: ở đây cho hiện. Luật ẩn ở màn rộng nằm NGOÀI khối @media này (xem `.nut-menu` phía trên). */ .nut-menu.nut-menu { display: inline-flex; } /* Vào ngăn kéo thì LUÔN hiện đủ nhãn — trạng thái "thu gọn" của màn để bàn vô hiệu */ .xuong__ben .menu--thu { width: 100%; } .xuong__ben .menu--thu .menu__dau { justify-content: flex-start; padding: 0 var(--s-4); } .xuong__ben .menu--thu .menu__nhan, .xuong__ben .menu--thu .lb, .xuong__ben .menu--thu .thuong__ten, .xuong__ben .menu--thu .menu__chan .gc, .xuong__ben .menu--thu .menu__muc > span, .xuong__ben .menu--thu .menu__mui, .xuong__ben .menu--thu .menu__huy, .xuong__ben .menu--thu .menu__phu { display: revert; } .xuong__ben .menu--thu .menu__muc { justify-content: flex-start; padding: 0 var(--s-3); } .xuong__ben .menu--thu .menu__muc .sv ~ .sv { display: revert; } /* Hàng ngang của biểu mẫu/thanh lọc: màn hẹp thì XẾP DỌC, mỗi ô một hàng. Không xếp dọc thì ô dạt sát mép phải ⇒ bảng lịch 808px neo `left:0` lòi ra ngoài khung nhìn (đo thật: +323px ở 1024px). */ .hang--tren > .cn, .hang--tren > .chon-nhieu, .hang--tren > .khoang-ngay-gio, .hang--tren > .o-tim { flex: 1 1 100%; max-width: none; } .luoi > .o2, .luoi > .o3, .luoi > .o4 { grid-column: span 6; } .luoi > .o8, .luoi > .o9 { grid-column: span 12; } /* Ngón tay: 44px là LUẬT TRUY CẬP, không phải thẩm mỹ — áp cả tablet/gập. Dùng :is() (ăn theo độ đặc hiệu của đối số) chứ CẤM :where() — :where() có độ đặc hiệu 0 nên bị mọi lớp đè, nút menu tụt còn 40px (đo thật). */ /* Tiền tố `html` (0-1-1) để THẮNG CSS thành phần nạp sau: du-lieu.css đặt .phan-trang__nut--nho { min-width: 34px } (0-1-0, nạp sau) — đo thật 07/10/2026 nút phân trang chỉ rộng 34px dù luật 44px đã có sẵn trong file này. */ html :is(button, [role='button'], a.nut, a.menu__muc, input:not([type='checkbox']):not([type='radio']), select, textarea):not(.n--i):not(.nut-nho) { min-height: 44px; } /* Ô nhập/ô chọn hẹp < 44px cũng là vi phạm vùng chạm (đo thật iPhone: 42px) */ html input:not([type='checkbox']):not([type='radio']), html select, html textarea { min-width: 44px; } /* Sàn WCAG 2.5.8 (24x24) cho nút chỉ có biểu tượng: đo thật thấy nút × trong chip và nút đóng thông báo chỉ rộng 9-19px dù cao 44px. PHẢI loại .n--i ra khỏi luật này: `:is(…, a.nut)` có độ đặc hiệu 0-1-1, đè luật 44px của nút biểu tượng (0-1-0) ⇒ nút menu tụt còn 39,6px (đo thật). */ html :is(button, [role='button'], a.nut):not(.n--i):not(.nut-nho) { min-width: 24px; } /* Ô tick CẤM kéo cao 44px (thành 16x44 méo) — cho đúng cỡ chạm tối thiểu 24px */ html input[type='checkbox'], html input[type='radio'] { min-width: 24px; min-height: 24px; } html .n--i, html .nut-nho { min-width: 44px; min-height: 44px; } .cuon-ngang { overflow-x: auto; overscroll-behavior-x: contain; } } /* CẢM ỨNG RỘNG (iPad ngang 1180px, màn cảm ứng 1920px): 44px là LUẬT TRUY CẬP theo NGÓN TAY, không theo bề rộng màn. Trước đây chỉ có `max-width: 1024px` nên màn cảm ứng rộng rơi về sàn chuột 24px — đo thật 07/10/2026 trên 15 màn × 14 trang: nút menu cao 38px, nút lịch/nút biểu tượng 34x34. CHỈ chứa luật CỠ CHẠM — CẤM chép khối xếp dọc của ≤1024 vào đây, màn rộng mà xếp dọc là hỏng bố cục. */ @media (pointer: coarse) { /* Tiền tố `html` (0-1-1) để THẮNG CSS thành phần nạp sau: du-lieu.css đặt .phan-trang__nut--nho { min-width: 34px } (0-1-0, nạp sau) — đo thật 07/10/2026 nút phân trang chỉ rộng 34px dù luật 44px đã có sẵn trong file này. */ html :is(button, [role='button'], a.nut, a.menu__muc, input:not([type='checkbox']):not([type='radio']), select, textarea):not(.n--i):not(.nut-nho) { min-height: 44px; } /* Ô nhập/ô chọn hẹp < 44px cũng là vi phạm vùng chạm (đo thật iPhone: 42px) */ html input:not([type='checkbox']):not([type='radio']), html select, html textarea { min-width: 44px; } html :is(button, [role='button'], a.nut):not(.n--i):not(.nut-nho) { min-width: 44px; } /* Ô tick giữ 24x24 (WCAG 2.5.8) — kéo 44px là méo hộp; vùng chạm lớn do Thu gọn: thêm .menu--thu → chỉ còn biểu tượng, nhãn hiện khi rê (0 JS). ========================================================================== */ .menu { display: flex; flex-direction: column; min-width: 0; height: 100%; background: var(--surface); border-right: var(--v-mong) solid var(--border); width: var(--thanh-ben, 248px); transition: width var(--t-thuong) var(--ease); } .menu__dau { display: flex; align-items: center; gap: var(--s-2); min-height: var(--thanh-tren, 56px); padding: 0 var(--s-3); border-bottom: var(--v-mong) solid var(--border); } .menu__cuon { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-3) var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); } .menu__chan { border-top: var(--v-mong) solid var(--border); padding: var(--s-2); } .menu__nhan { margin: var(--s-3) var(--s-2) var(--s-1); color: var(--text-4); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-dam); text-transform: uppercase; letter-spacing: .06em; } .menu__nhan:first-child { margin-top: 0; } .menu__muc { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: calc(var(--control-h) + var(--s-1)); padding: 0 var(--s-2); border: 0; border-radius: var(--r-md); background: none; cursor: pointer; color: var(--text-2); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .93)); text-align: left; text-decoration: none; transition: background var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .menu__muc:hover { background: var(--surface-hover); color: var(--text); } .menu__muc .sv { flex: none; color: var(--text-3); transition: color var(--t-nhanh) var(--ease); } .menu__muc > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu__muc:hover .sv { color: var(--text-2); } .menu__muc--chon { background: var(--app-soft); color: var(--app-chu); font-weight: var(--fw-vua); } .menu__muc--chon .sv { color: var(--app-chu); } .menu__muc--chon::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--v-nhan); height: calc(var(--s-4) + var(--s-1)); border-radius: var(--r-full); background: var(--app); } /* ========================================================================== THANH BÊN ĐẬM (Sếp 05/10/2026 — "màu sắc cực kỳ chán") Nền gradient đặt ở tokens/layout.css (.xuong__ben). Ở đây chỉ khai màu chữ. Dùng rgb(...) chứ KHÔNG hex: cổng kiểm L1 chặn mã màu cứng ở tầng thành phần. Mọi nấc đều là trắng có độ mờ ⇒ tự đúng trên cả 26 bảng màu vì nền luôn đậm. ========================================================================== */ /* 🔴 KHOÁ TOKEN MỰC MỘT CHỖ (10/10/2026) — gốc rễ của `p.gc` 1,52:1. Khối này vốn ghim mực TỪNG con (`.thuong__ten`, `.menu__nhan`, `.menu__muc`…) nhưng bỏ sót `.gc` ⇒ nó rơi về `--text-3` của theme (xám #475569) trên nền đậm = 1,52:1. Vá từng con thì chỗ nào quên là chìm — y hệt bài học đã ghi ở `tokens/web.css`. LUẬT: khối nền đậm KHOÁ LẠI token mực trong phạm vi nó; con cháu cứ `var(--text*)` là tự ra màu sáng, kể cả con thêm sau này. Các ghim lẻ bên dưới chỉ còn giữ phần ĐỘ MỜ khác nhau, không còn là thứ bảo đảm tương phản. */ .xuong__ben { --text: rgb(255 255 255); --text-2: rgb(255 255 255 / .82); --text-3: rgb(255 255 255 / .70); --text-4: rgb(255 255 255 / .58); --link: rgb(255 255 255); --border: rgb(255 255 255 / .16); } .xuong__ben .menu { background: transparent; border-right: 0; } /* ! `.menu` khai `width: var(--thanh-ben, 248px)` cho trường hợp menu ĐỨNG RIÊNG. Khi nó nằm TRONG `.xuong__ben` (cột hẹp hơn, VD 236px) thì phải ăn theo cột, không thì menu tràn ra ngoài khung (đo thật 09/10/2026 trên Bàn biên tập Mai CMS: menu 280px trong cột 236px ⇒ tràn 24px). */ .xuong__ben > .menu, .xuong__ben .menu { width: 100%; max-width: 100%; } .xuong__ben .menu__dau, .xuong__ben .menu__chan { border-color: rgb(255 255 255 / .16); } .xuong__ben .thuong__ten { color: rgb(255 255 255 / .95); } .xuong__ben .menu__nhan { color: rgb(255 255 255 / .58); } .xuong__ben .menu__muc { color: rgb(255 255 255 / .82); } .xuong__ben .menu__muc .sv { color: rgb(255 255 255 / .62); } .xuong__ben .menu__muc:hover { background: rgb(255 255 255 / .13); color: rgb(255 255 255); } .xuong__ben .menu__muc:hover .sv { color: rgb(255 255 255); } .xuong__ben .menu__muc--chon { background: rgb(255 255 255 / .20); color: rgb(255 255 255); } .xuong__ben .menu__muc--chon .sv { color: rgb(255 255 255); } .xuong__ben .menu__muc--chon::before { background: rgb(255 255 255 / .92); } .xuong__ben .menu__huy, .xuong__ben .menu__muc b { background: rgb(255 255 255 / .24); color: rgb(255 255 255); } .xuong__ben .menu__mui { color: rgb(255 255 255 / .70); } .xuong__ben .menu__phu .menu__muc--nho { color: rgb(255 255 255 / .70); } .xuong__ben .av { background: rgb(255 255 255 / .24); color: rgb(255 255 255); } .xuong__ben .n--t { color: rgb(255 255 255 / .82); } .xuong__ben .n--t:hover, .xuong__ben .n--t.hv { background: rgb(255 255 255 / .14); color: rgb(255 255 255); } .xuong__ben .n--i { color: rgb(255 255 255 / .82); } .menu__muc--khoa { opacity: var(--mo-4); pointer-events: none; } .menu__muc--nho { min-height: var(--control-h); padding-left: calc(var(--s-6) + var(--s-1)); font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); } .menu__huy { flex: none; min-width: var(--s-5); padding: 0 var(--s-1); text-align: center; border-radius: var(--r-full); background: var(--control-active); color: var(--text-2); font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); line-height: calc(var(--s-4) + var(--s-1)); } .menu__huy--nhan { background: var(--app); color: var(--app-contrast); } .menu__huy--canh-bao { background: var(--err-3); color: var(--n-0); } .menu__mui { flex: none; width: calc(var(--fs-base) * .5); height: calc(var(--fs-base) * .5); border-right: var(--v-day) solid currentColor; border-bottom: var(--v-day) solid currentColor; transform: rotate(45deg) translateY(calc(var(--s-2) * -.5)); transition: transform var(--t-nhanh) var(--ease); } [aria-expanded='true'] > .menu__mui { transform: rotate(-135deg) translateY(calc(var(--s-2) * -.5)); } .menu__phu { display: flex; flex-direction: column; gap: var(--v-mong); padding-left: var(--s-3); margin-left: var(--s-4); border-left: var(--v-mong) solid var(--border); } .menu__phu[hidden] { display: none; } /* thu gọn: chỉ biểu tượng. Nhãn của mục là `title` gốc trình duyệt, gán trong tuy-chon.js lúc BẬT thu gọn (đo 07/10/2026: bản cũ dùng ::after{content:attr(data-nhan)} — hộp vẫn tính vào vùng cuộn dù `opacity: 0` ⇒ thanh bên trượt ngang 98px trên khung 68px). */ .menu--thu { width: var(--thanh-ben-thu, 60px); } .menu--thu .menu__dau { justify-content: center; padding: 0 var(--s-2); } .menu--thu .menu__nhan, .menu--thu .lb, .menu--thu .thuong__ten, .menu--thu .menu__chan .gc, .menu--thu .menu__muc > span, .menu--thu .menu__mui, .menu--thu .menu__huy, .menu--thu .menu__phu { display: none; } .menu--thu .menu__muc { justify-content: center; padding: 0; } /* mục có 2 icon (icon chính + icon phụ, VD "Nhập dữ liệu" ở màn 05/06): thu gọn chỉ giữ icon ĐẦU, kẻo icon phụ đẩy icon chính lệch 14px khỏi tâm mục */ .menu--thu .menu__muc .sv ~ .sv { display: none; } /* ========================================================================== 2. TAB BAR — 4 kiểu: gạch chân (mặc định) · viên · thẻ · phân đoạn
…
========================================================================== */ /* DẢI PHÂN ĐOẠN — kiểu thanh tab hiện đại (Sếp chốt 05/10/2026). Trước: mục tab trong suốt, bo góc 0, không nền ⇒ nhìn như dãy chữ rời, cổ điển. Nay: một rãnh nền --surface-2 có viền + bo góc, mục đang chọn là VIÊN TRẮNG nổi lên (bo góc lồng = bo ngoài − lề). Chiều cao khớp đúng mọi điều khiển khác. */ .tab-bar { display: flex; align-items: stretch; gap: var(--s-1); min-width: 0; width: fit-content; max-width: 100%; padding: var(--v-mong); background: var(--surface-2); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; } .tab-bar__muc { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); flex: none; min-height: calc(var(--control-h) - var(--v-mong) * 4); padding: 0 var(--s-3); border: 0; border-radius: calc(var(--radius-control) - var(--v-mong)); background: none; cursor: pointer; scroll-snap-align: start; color: var(--text-3); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .93)); font-weight: var(--fw-vua); white-space: nowrap; text-decoration: none; /* tab hay viết bằng — mặc định gạch chân */ transition: color var(--t-nhanh) var(--ease), background var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease); } .tab-bar__muc:hover { background: var(--control-hover); color: var(--text); } .tab-bar__muc .menu__huy, .tab-bar__muc b { min-width: var(--s-4); padding: 0 var(--s-1); border-radius: var(--r-full); background: var(--control-active); color: var(--text-2); text-align: center; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); line-height: calc(var(--s-4) + var(--s-1)); } .tab-bar__muc.dang-chon { background: var(--surface); color: var(--app-chu); box-shadow: var(--sh-1); } .tab-bar__muc.dang-chon b { background: var(--app); color: var(--app-contrast); } /* gạch chân — bỏ rãnh nền của dải phân đoạn, chỉ giữ đường gạch */ .tab-bar--gach { gap: var(--s-4); padding: 0; background: none; border: 0; border-bottom: var(--v-mong) solid var(--border); border-radius: 0; width: auto; max-width: none; } .tab-bar--gach .tab-bar__muc { padding: 0; border-radius: 0; } .tab-bar--gach .tab-bar__muc:hover { background: none; } .tab-bar--gach .tab-bar__muc::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--v-mong) * -1); height: var(--v-day); border-radius: var(--r-full); background: var(--app); transform: scaleX(0); transform-origin: left; transition: transform var(--t-thuong) var(--ease); } .tab-bar--gach .tab-bar__muc.dang-chon { background: none; box-shadow: none; } .tab-bar--gach .tab-bar__muc.dang-chon::after { transform: scaleX(1); } /* viên */ .tab-bar--vien { gap: var(--s-1); padding: var(--s-1); background: var(--surface-2); border: var(--v-mong) solid var(--border); border-radius: var(--r-full); width: fit-content; } .tab-bar--vien .tab-bar__muc { border-radius: var(--r-full); } .tab-bar--vien .tab-bar__muc.dang-chon { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } /* thẻ */ .tab-bar--the { gap: var(--s-2); padding: 0; background: none; border: 0; border-bottom: var(--v-mong) solid var(--border); border-radius: 0; width: auto; max-width: none; } .tab-bar--the .tab-bar__muc { border: var(--v-mong) solid var(--border); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); } .tab-bar--the .tab-bar__muc:hover { background: var(--control-hover); } .tab-bar--the .tab-bar__muc.dang-chon { background: var(--surface); color: var(--text); margin-bottom: calc(var(--v-mong) * -1); box-shadow: inset 0 var(--v-nhan) 0 var(--app); } /* phân đoạn (segmented) — CÙNG chiều cao với mọi điều khiển khác */ .tab-bar--doan { gap: var(--v-mong); padding: var(--v-mong); background: var(--control); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); width: fit-content; } .tab-bar--doan .tab-bar__muc { border-radius: calc(var(--radius-control) - var(--v-mong)); min-height: calc(var(--control-h) - var(--v-mong) * 4); } .tab-bar--doan .tab-bar__muc.dang-chon { background: var(--surface); color: var(--app-chu); box-shadow: var(--shadow-1); } .tab-than { padding-top: var(--s-5); min-width: 0; } /* ========================================================================== 3. DÒNG THỜI GIAN (timeline) — trạng thái lấy từ token ngữ nghĩa
  1. …
    2. …
========================================================================== */ .dtg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .dtg__muc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-3); padding-bottom: var(--s-5); } .dtg__muc:last-child { padding-bottom: 0; } .dtg__cham { grid-row: 1 / span 2; width: var(--s-3); height: var(--s-3); margin-top: var(--s-1); border-radius: var(--r-full); background: var(--surface); z-index: var(--z-noi); box-shadow: inset 0 0 0 var(--v-day) var(--border-manh); } .dtg__muc::before { content: ''; position: absolute; left: calc(var(--s-3) / 2 - var(--v-mong) / 2); top: var(--s-3); bottom: 0; width: var(--v-day); background: var(--border); } .dtg__muc:last-child::before { display: none; } .dtg__muc--xong .dtg__cham { background: var(--ok-1); box-shadow: inset 0 0 0 var(--v-day) var(--ok-1); } .dtg__muc--xong::before { background: var(--ok-1); } .dtg__muc--dang .dtg__cham { background: var(--app); box-shadow: 0 0 0 var(--s-1) var(--app-soft); } .dtg__muc--loi .dtg__cham { background: var(--err-1); } .dtg__muc--cho .dtg__cham { box-shadow: inset 0 0 0 var(--v-day) var(--border-manh); } .dtg__dau { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .dtg__dau b { font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); font-weight: var(--fw-dam); } .dtg__gio { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); } .dtg__the { grid-column: 2; margin-top: var(--s-1); padding: var(--s-3); background: var(--surface-2); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-2); } .dtg__the :is(h4, p) { margin: 0 0 var(--s-1); } .dtg__the :last-child { margin-bottom: 0; } /* ngang */ .dtg--ngang { flex-direction: row; align-items: flex-start; gap: 0; } .dtg--ngang .dtg__muc { flex: 1; grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-2) 0 0; } .dtg--ngang .dtg__cham { grid-row: auto; margin: 0 0 var(--s-2); } .dtg--ngang .dtg__muc::before { left: var(--s-3); top: calc(var(--s-3) / 2 - var(--v-mong) / 2); bottom: auto; right: 0; width: auto; height: var(--v-day); } .dtg--ngang .dtg__the { grid-column: 1; } /* ========================================================================== 4. TRÌNH TỰ BƯỚC (stepper · wizard · tiến trình)
  1. 1Khảo sát
    2. …
========================================================================== */ .buoc { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; min-width: 0; } .buoc__muc { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; padding: 0 var(--s-1); } .buoc__muc::before, .buoc__muc::after { content: ''; position: absolute; top: calc(var(--control-h) * .4); height: var(--v-day); background: var(--border); z-index: var(--z-nen); } .buoc__muc::before { left: 0; right: 50%; } .buoc__muc::after { left: 50%; right: 0; } .buoc__muc:first-child::before, .buoc__muc:last-child::after { display: none; } .buoc__muc--xong::before, .buoc__muc--dang::before { background: var(--app); } .buoc__nut { position: relative; z-index: var(--z-noi); width: calc(var(--control-h) * .8); height: calc(var(--control-h) * .8); display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 var(--v-day) var(--border-manh); color: var(--text-3); font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .86)); font-weight: var(--fw-dam); } .buoc__muc span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .86)); color: var(--text-3); } .buoc__muc--xong .buoc__nut { background: var(--app); color: var(--app-contrast); box-shadow: inset 0 0 0 var(--v-day) var(--app); } .buoc__muc--xong span { color: var(--text-2); } .buoc__muc--dang .buoc__nut { background: var(--surface); color: var(--app-chu); box-shadow: inset 0 0 0 var(--v-day) var(--app), 0 0 0 var(--s-1) var(--app-soft); } .buoc__muc--dang span { color: var(--app-chu); font-weight: var(--fw-dam); } .buoc__muc--loi .buoc__nut { background: var(--err-1); color: var(--text-nghich); box-shadow: inset 0 0 0 var(--v-day) var(--err-1); } .buoc__muc--loi span { color: var(--err-chu); } /* dọc — dùng cho "tiến trình" nhiều giai đoạn kèm mô tả */ .buoc--doc { flex-direction: column; gap: 0; } .buoc--doc .buoc__muc { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--s-3); padding: 0 0 var(--s-5); } .buoc--doc .buoc__muc::before, .buoc--doc .buoc__muc::after { left: calc(var(--control-h) * .4 - var(--v-mong) / 2); top: var(--control-h); bottom: 0; right: auto; width: var(--v-day); height: auto; } .buoc--doc .buoc__muc::after { display: block; bottom: 0; } .buoc--doc .buoc__muc::before { display: none; } .buoc--doc .buoc__muc:last-child::after { display: none; } .buoc--doc .buoc__than { min-width: 0; } .buoc--doc .buoc__than b { display: block; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); } .buoc--doc .buoc__than p { margin: var(--s-1) 0 0; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } /* thanh tiến trình chia đoạn (wizard kiểu băng) */ .buoc--bang { gap: var(--s-1); } .buoc--bang .buoc__muc { flex-direction: row; align-items: center; justify-content: center; gap: var(--s-2); height: var(--s-5); padding: 0; background: var(--control-active); border-radius: var(--r-sm); } .buoc--bang .buoc__muc:first-child { border-radius: var(--r-full) var(--r-sm) var(--r-sm) var(--r-full); } .buoc--bang .buoc__muc:last-child { border-radius: var(--r-sm) var(--r-full) var(--r-full) var(--r-sm); } .buoc--bang .buoc__muc::before, .buoc--bang .buoc__muc::after { display: none; } .buoc--bang .buoc__nut { width: auto; height: auto; background: none; box-shadow: none; font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); } .buoc--bang .buoc__muc span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); } .buoc--bang .buoc__muc--xong, .buoc--bang .buoc__muc--dang { background: var(--app); } .buoc--bang .buoc__muc--xong .buoc__nut, .buoc--bang .buoc__muc--dang .buoc__nut, .buoc--bang .buoc__muc--xong span, .buoc--bang .buoc__muc--dang span { color: var(--app-contrast); } .buoc-than { padding: var(--s-5) 0; min-width: 0; } @media (prefers-reduced-motion: reduce) { .menu, .menu__muc, .menu__mui, .tab-bar__muc, .tab-bar--gach .tab-bar__muc::after { transition: none; } } /* ========================================================================== 5. ĐƯỜNG DẪN (breadcrumb) ========================================================================== */ .duong-dan { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); color: var(--text-3); } .duong-dan a { color: var(--text-3); text-decoration: none; padding: var(--s-1) var(--s-1); border-radius: var(--r-sm); } .duong-dan a:hover { color: var(--app-chu); background: var(--app-soft); } .duong-dan span[aria-current] { color: var(--text); font-weight: var(--fw-vua); } .duong-dan .ngan { color: var(--text-4); } /* THANH CÔNG CỤ — nhóm nút trong đầu trang/khu vực, tự xuống dòng thay vì tràn */ .thanh-cong-cu { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; } /* LÒNG THANH TRÊN — hàng ngang trong ô lưới `thanh-tren`, cao đúng bằng ô. Thiếu lớp này thì đầu trang cao thêm padding và làm lệch cả xương 16:9. */ .tren-noi { display: flex; align-items: center; gap: var(--s-4); height: 100%; padding: 0 var(--s-5); } .tren-noi > .ml-tu, .tren-noi > .day { margin-left: auto; } .thanh-cong-cu .day { margin-left: auto; } .nhom-nut { display: inline-flex; gap: var(--v-mong); } .nhom-nut > .n { border-radius: 0; } .nhom-nut > .n:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); } .nhom-nut > .n:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; } /* ========================================================================== 6. THANH ĐIỀU HƯỚNG ĐÁY — ĐIỆN THOẠI (thanh-duoi) Quy chuẩn 15 mục 4 nói rõ ở ≤ 700 "thanh dưới chỉ còn 4–5 mục"; kho TRƯỚC ĐÂY CHƯA cấp thành phần này (nợ đã ghi trong quy-chuan/15) ⇒ mỗi hệ tự chế. Màn RỘNG: ẩn (thanh bên đã đủ việc). ≤ 700: hiện, neo đáy, chừa vùng an toàn iPhone. ⚠️ Phải có `` thì `env(safe-area-inset-bottom)` mới khác 0 — thiếu cờ đó giá trị LUÔN = 0. ⚠️ Thanh bên (ngăn kéo) vẫn giữ: thanh đáy chỉ chứa 4–5 việc chính, phần còn lại vào ngăn kéo. Mẫu: (Mục đang xem đánh dấu bằng `aria-current="page"` — CẤM thêm lớp trạng thái thứ hai.) ========================================================================== */ .thanh-duoi { display: none; } @media (max-width: 700px) { .thanh-duoi { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-dinh); /* dưới ngăn kéo (--z-menu) để ngăn kéo che được */ background: var(--surface); border-top: var(--v-mong) solid var(--border); padding-block-end: var(--an-toan-duoi); } .thanh-duoi__muc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-height: 56px; color: var(--text-3); text-decoration: none; font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .thanh-duoi__muc > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thanh-duoi__muc[aria-current='page'] { color: var(--app-chu); } /* chừa chỗ dưới nội dung — không thì mục cuối bị thanh đáy che mất */ .xuong__noi { padding-bottom: calc(var(--s-6) + 56px + var(--an-toan-duoi)); } } /* ── thanh-phan/du-lieu.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM DỮ LIỆU · thanh-phan/du-lieu.css Lưới dữ liệu · cây · lưới cây · chọn cây · chọn nhiều · đồ thị mạng · biểu đồ Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm chặn L1·L2·L3). Mọi khối có chuyển động đều tôn trọng prefers-reduced-motion (cổng kiểm L5). ========================================================================== */ /* Bảy dải màu cho chuỗi dữ liệu — SUY TỪ TOKEN, không phải màu mới. Biểu đồ nhiều chuỗi dùng --bd-1…--bd-7; đổi bộ màu ⇒ cả biểu đồ đổi theo. */ .luoi-du-lieu, .cay, .chon-cay, .chon-nhieu, .do-thi, .bd { --bd-1: var(--app); --bd-2: var(--info-1); --bd-3: var(--ok-1); --bd-4: var(--warn-1); --bd-5: var(--err-1); --bd-6: var(--app-light); --bd-7: var(--app-deep); --bd-luoi: var(--border); --bd-nhan: var(--text-3); } /* ========================================================================== 1. LƯỚI DỮ LIỆU (data grid — thay .bang khi cần sắp xếp/khoá cột/chọn dòng) Cấu trúc:
… tiêu đề + công cụ …
…
Dòng chọn: . Cột khoá: /. Sắp xếp: ========================================================================== */ .luoi-du-lieu { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .luoi-du-lieu__dau { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-bottom: var(--v-mong) solid var(--border); background: var(--surface); min-height: calc(var(--control-h) + var(--s-3)); } .luoi-du-lieu__dau h3 { margin-right: auto; } .luoi-du-lieu__cuon { overflow: auto; min-height: 0; flex: 1; max-height: var(--cao-vung, none); } .luoi-du-lieu table { width: 100%; border-collapse: separate; border-spacing: 0; } .luoi-du-lieu th, .luoi-du-lieu td { padding: var(--s-2) var(--s-3); text-align: left; vertical-align: middle; border-bottom: var(--v-mong) solid var(--border); white-space: nowrap; } .luoi-du-lieu thead th { position: sticky; top: 0; z-index: var(--z-noi); background: var(--surface-2); color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-dam); letter-spacing: .02em; text-transform: uppercase; } .luoi-du-lieu tbody td { font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); color: var(--text); } .luoi-du-lieu tbody tr:last-child td { border-bottom: 0; } .luoi-du-lieu tbody tr:hover td { background: var(--surface-hover); } .luoi-du-lieu tbody tr.dang-chon td { background: var(--app-soft); } .luoi-du-lieu tbody tr.dang-chon td:first-child { box-shadow: inset var(--v-nhan) 0 0 var(--app); } .luoi-du-lieu tbody tr.khoa-dong td { opacity: var(--mo-5); } /* cột khoá (frozen) — dính bên trái, có vạch ngăn */ .luoi-du-lieu th.khoa, .luoi-du-lieu td.khoa { position: sticky; left: 0; z-index: calc(var(--z-noi) + 1); background: var(--surface); box-shadow: inset calc(var(--v-mong) * -1) 0 0 var(--border); } .luoi-du-lieu thead th.khoa { z-index: calc(var(--z-noi) + 2); background: var(--surface-2); } .luoi-du-lieu tbody tr:hover td.khoa { background: var(--surface-hover); } .luoi-du-lieu tbody tr.dang-chon td.khoa { background: var(--app-soft); } /* nút sắp xếp trong tiêu đề — là ĐIỀU KHIỂN THẬT, cao bằng --control-h */ .luoi-du-lieu .sap-xep { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--control-h); padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; /* Mũi tên xoay 45° nên hộp bao lớn hơn ô gốc ⇒ thò ra ngoài nút 4px (đo thật trên /items). Chừa chỗ bằng padding rồi bù lại bằng margin âm: mũi tên nằm trong nút, lề tiêu đề KHÔNG lệch. */ padding-right: var(--s-1); margin-right: calc(var(--s-1) * -1); } .luoi-du-lieu .sap-xep:hover { color: var(--app-chu); } .luoi-du-lieu .mui { width: calc(var(--fs-base) * .5); height: calc(var(--fs-base) * .5); border-right: var(--v-day) solid currentColor; border-bottom: var(--v-day) solid currentColor; transform: rotate(45deg) translateY(calc(var(--s-1) * -1)); opacity: var(--mo-4); } .luoi-du-lieu [aria-sort='ascending'] .mui { transform: rotate(-135deg) translateY(calc(var(--s-1) * -1)); opacity: 1; } .luoi-du-lieu [aria-sort='descending'] .mui { transform: rotate(45deg) translateY(calc(var(--s-1) * -1)); opacity: 1; } /* tay kéo giãn cột */ .luoi-du-lieu .keo-cot { position: absolute; inset: 0 0 0 auto; width: var(--s-2); cursor: col-resize; } .luoi-du-lieu .keo-cot:hover { background: var(--app-soft); } .luoi-du-lieu th { position: relative; } /* kiểu ô */ .luoi-du-lieu .so { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .luoi-du-lieu .giua { text-align: center; } .luoi-du-lieu .hai-dong { white-space: normal; max-width: 32ch; } .luoi-du-lieu .phu { display: block; color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .luoi-du-lieu .thao-tac { display: flex; gap: var(--s-1); justify-content: flex-end; } /* Cột hành động TRONG CÂY: dồn phải + mọi nút cùng bề rộng tối thiểu ⇒ các hàng thẳng nhau cả mép trái lẫn mép phải (không thì mỗi hàng một cỡ nút, trông răng cưa). */ .cay details > summary .thao-tac { margin-left: auto; display: flex; gap: var(--s-2); } .cay details > summary .thao-tac .n { min-width: 9rem; justify-content: center; } .luoi-du-lieu .o-chon { width: calc(var(--control-h) * .78); } /* mật độ */ .luoi-du-lieu--gon th, .luoi-du-lieu--gon td { padding: var(--s-1) var(--s-3); } .luoi-du-lieu--thoang th, .luoi-du-lieu--thoang td { padding: var(--s-3) var(--s-4); } /* thanh tiến trình nhỏ trong ô */ .luoi-du-lieu .thanh-o { width: 78px; height: var(--s-1); border-radius: var(--r-full); background: var(--control-active); overflow: hidden; } .luoi-du-lieu .thanh-o i { display: block; height: 100%; background: var(--app); border-radius: inherit; } .luoi-du-lieu__chan { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4); border-top: var(--v-mong) solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .luoi-du-lieu__chan .phan-trang { margin-left: auto; } /* PHÂN TRANG — bộ nút chuyển trang (thiếu hoàn toàn trước đây) */ .phan-trang { display: inline-flex; align-items: center; gap: var(--v-mong); } .phan-trang__nut { min-width: var(--control-h); height: var(--control-h); padding: 0 var(--s-2); display: inline-grid; place-items: center; border: var(--v-mong) solid var(--border-manh); background: var(--surface); color: var(--text-2); border-radius: var(--radius-control); font: inherit; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .93)); font-variant-numeric: tabular-nums; cursor: pointer; } .phan-trang__nut:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-manh); } .phan-trang__nut[aria-current='page'] { background: var(--app); border-color: var(--app); color: var(--app-contrast); font-weight: var(--fw-dam); } .phan-trang__nut:disabled { opacity: var(--mo-4); cursor: not-allowed; } .phan-trang__nut--nho { min-width: var(--control-h); height: var(--control-h); } .phan-trang .ngan { color: var(--text-4); padding: 0 var(--s-1); } .phan-trang__cach { display: flex; align-items: center; gap: var(--s-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .luoi-du-lieu__trong { display: grid; place-items: center; gap: var(--s-2); text-align: center; padding: var(--s-9) var(--s-5); color: var(--text-3); } .luoi-du-lieu__trong .sv { width: calc(var(--fs-base) * 2.4); height: calc(var(--fs-base) * 2.4); color: var(--border-manh); } /* ========================================================================== 2. CÂY (tree) — dựng trên
/ của nền tảng: mở/gấp bằng 0 dòng JS, vẫn bàn phím + trình đọc màn hình dùng được. ========================================================================== */ .cay { font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); color: var(--text); } .cay ul { list-style: none; margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); position: relative; } .cay ul::before { content: ''; position: absolute; left: calc(var(--s-2) + var(--v-mong)); top: 0; bottom: var(--s-3); width: 0; border-left: var(--v-mong) dashed var(--border-manh); } .cay details > summary, .cay__muc { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-2); border-radius: var(--r-md); cursor: pointer; list-style: none; } .cay details > summary::-webkit-details-marker { display: none; } .cay details > summary:hover, .cay__muc:hover { background: var(--surface-hover); } .cay details[open] > summary { color: var(--app-chu); font-weight: var(--fw-vua); } .cay__gat { flex: none; width: calc(var(--fs-base) * 1.1); height: calc(var(--fs-base) * 1.1); display: grid; place-items: center; color: var(--text-3); transition: transform var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .cay details[open] > summary .cay__gat { transform: rotate(90deg); color: var(--app-chu); } .cay__nhan { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .cay__muc .sv, .cay details > summary .sv { flex: none; color: var(--text-3); } .cay__muc.dang-chon { background: var(--app-soft); color: var(--app-chu); box-shadow: inset var(--v-nhan) 0 0 var(--app); } .cay__muc.dang-chon .sv { color: var(--app-chu); } .cay__muc.khoa { opacity: var(--mo-4); pointer-events: none; } .cay__tay { color: var(--border-manh); cursor: grab; opacity: 0; transition: opacity var(--t-nhanh) var(--ease); } .cay__muc:hover .cay__tay { opacity: 1; } .cay--som { font-family: var(--font-mono); } .cay__so { color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-variant-numeric: tabular-nums; } /* lưới cây: đúng lưới dữ liệu, ô đầu chứa cây */ .cay-luoi td .cay__muc { min-height: calc(var(--control-h) * .9); } .cay-luoi td:first-child { padding-left: var(--s-2); } /* ========================================================================== 3. CHỌN CÂY (tree select) — nút mở + bảng chọn có cây bên trong ========================================================================== */ .chon-cay { position: relative; min-width: 0; } .chon-cay__nut { display: flex; align-items: center; gap: var(--s-2); width: 100%; height: var(--control-h); padding: 0 var(--s-3); background: var(--control); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); color: var(--text); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); cursor: pointer; text-align: left; } .chon-cay__nut:hover { border-color: var(--border-manh); } .chon-cay__nut .sv { flex: none; color: var(--text-3); } .chon-cay__nut .cay__nhan { flex: 1; } .chon-cay__nut[aria-expanded='true'] { border-color: var(--app); box-shadow: 0 0 0 var(--v-day) var(--app-soft); } .chon-cay__bang { position: absolute; z-index: var(--z-menu); inset: calc(100% + var(--s-1)) 0 auto 0; min-width: 260px; max-height: 320px; overflow: auto; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-2); } .chon-cay__bang .o-tim { position: sticky; top: 0; background: var(--surface); padding-bottom: var(--s-2); } /* ========================================================================== 4. CHỌN NHIỀU (multi select) — chip trong nút + bảng chọn có ô tìm ========================================================================== */ .chon-nhieu { position: relative; min-width: 0; } .chon-nhieu, .chon-nhieu__nut { min-width: 0; /* thiếu: nút chọn-nhiều không co được ⇒ đẩy tràn 16px ở 280px */ max-width: 100%; } .chon-nhieu__nut { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); min-height: var(--control-h); padding: var(--s-1) var(--s-2); background: var(--control); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); cursor: pointer; } .chon-nhieu__nut[aria-expanded='true'] { border-color: var(--app); box-shadow: 0 0 0 var(--v-day) var(--app-soft); } .chon-nhieu__chip { display: inline-flex; align-items: center; gap: var(--s-1); height: calc(var(--control-h) * .72); padding: 0 var(--s-1) 0 var(--s-2); background: var(--app-soft); border: var(--v-mong) solid var(--app-border); border-radius: var(--r-full); color: var(--app-chu); font-size: max(var(--fs-nho), calc(var(--fs-base) * .85)); font-weight: var(--fw-vua); } .chon-nhieu__chip button { width: var(--s-6); height: var(--s-6); display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: none; color: inherit; cursor: pointer; font-size: inherit; line-height: 1; } .chon-nhieu__chip button:hover { background: var(--app-border); } .chon-nhieu__goi-y { color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); } .chon-nhieu__bang { position: absolute; z-index: var(--z-menu); inset: calc(100% + var(--s-1)) 0 auto 0; min-width: 280px; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-2); } .chon-nhieu__ds { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: var(--v-mong); } .chon-nhieu__dong { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-2); border-radius: var(--r-md); cursor: pointer; font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); } .chon-nhieu__dong:hover { background: var(--surface-hover); } .chon-nhieu__chan { display: flex; align-items: center; gap: var(--s-2); justify-content: space-between; padding-top: var(--s-2); margin-top: var(--s-2); border-top: var(--v-mong) solid var(--border); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } /* ========================================================================== 5. ĐỒ THỊ MẠNG (network graph) — SVG thuần, không thư viện ========================================================================== */ .do-thi { position: relative; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .do-thi__ve { display: block; width: 100%; height: auto; background-image: radial-gradient(var(--border) var(--v-mong), transparent var(--v-mong)); background-size: var(--s-4) var(--s-4); } .do-thi__canh { stroke: var(--border-manh); stroke-width: 1.5; } .do-thi__canh--manh { stroke: var(--app); stroke-width: 2.5; } .do-thi__canh--chay { stroke-dasharray: var(--s-2) var(--s-1); animation: do-thi-chay 1.2s linear infinite; } .do-thi__nut { fill: var(--surface); stroke: var(--app); stroke-width: 2; } .do-thi__nut--chinh { fill: var(--app); stroke: var(--app-deep); } .do-thi__nut--phu { fill: var(--app-soft); stroke: var(--app-border); } .do-thi__nut--canh-bao { fill: var(--warn-1); stroke: var(--warn-2); } .do-thi__chu { fill: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-family: var(--font-ui); text-anchor: middle; } .do-thi__chu--to { fill: var(--text); font-weight: var(--fw-dam); } .do-thi__dieukhien { position: absolute; right: var(--s-3); top: var(--s-3); display: flex; gap: var(--s-1); } .do-thi__chuthich { position: absolute; left: var(--s-3); bottom: var(--s-3); display: flex; gap: var(--s-3); background: var(--kinh-nen); backdrop-filter: var(--kinh-mo); border-radius: var(--r-md); padding: var(--s-1) var(--s-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-2); } .do-thi__chuthich span { display: inline-flex; align-items: center; gap: var(--s-1); } .do-thi__chuthich i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--app); } @keyframes do-thi-chay { to { stroke-dashoffset: calc(var(--s-2) * -1.5); } } /* ========================================================================== 6. BIỂU ĐỒ (charts) — CSS + SVG thuần. Khung chung:
…
…
========================================================================== */ .bd { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; } .bd__dau { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } .bd__dau h3 { margin-right: auto; } .bd__tong { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h0))); font-weight: var(--fw-rat); color: var(--text); font-variant-numeric: tabular-nums; } .bd__bien { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } /* Dùng token MÀU CHỮ, không dùng nấc 1 (nấc 1 là màu NỀN nhạt — đem làm chữ thì vô hình: đo được 1,00–1,04). */ .bd__bien--len { color: var(--ok-chu); } .bd__bien--xuong { color: var(--err-chu); } .bd__than { position: relative; min-width: 0; } /* --- cột (bar) --- */ .bd--cot .bd__than { display: flex; align-items: flex-end; gap: var(--s-2); height: var(--cao, 180px); padding-left: var(--s-6); border-left: var(--v-mong) solid var(--border); border-bottom: var(--v-mong) solid var(--border); } .bd__goc { position: absolute; left: 0; right: 0; border-top: var(--v-mong) dashed var(--border); color: var(--text-4); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); line-height: 1.25; } .bd__cot { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .bd__cot i { display: block; width: min(46px, 72%); height: var(--cao-cot, 40%); background: linear-gradient(180deg, var(--bd-6), var(--bd-1)); border-radius: var(--r-sm) var(--r-sm) 0 0; transition: filter var(--t-nhanh) var(--ease); } .bd__cot:hover i { filter: brightness(1.08); } .bd__cot--so i { background: linear-gradient(180deg, var(--bd-2), var(--bd-7)); } .bd__cot b { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); color: var(--text-2); font-variant-numeric: tabular-nums; } .bd__cot span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); white-space: nowrap; } /* Nhãn trục là nowrap ⇒ không co được. Màn hẹp: cho LÔ BIỂU ĐỒ cuộn ngang thay vì để nhãn đẩy tràn cả trang (đo thật: +36px ở 280px trên màn danh sách, +13px trên landing). Cột giữ bề rộng đọc được, không bẹp dí. */ @media (max-width: 768px) { .bd--cot .bd__than { overflow-x: auto; overscroll-behavior-x: contain; } .bd--cot .bd__cot { min-width: 34px; } } /* Ô tìm kiếm trong ĐẦU LƯỚI: màn hẹp cho chiếm trọn hàng. Không có luật này thì `h3` + ô tìm + nút bị bóp còn ~12px rồi đẩy nút ra ngoài mép (đo thật 09/10/2026 trên Bàn biên tập Mai CMS ở khung 390px). */ @media (max-width: 1024px) { .luoi-du-lieu__dau > .o-tim, .luoi-du-lieu__dau > .tim-kiem { flex: 1 1 100%; } } .bd__cot::after { content: attr(data-nhac); position: absolute; bottom: calc(100% + var(--s-1)); left: 50%; transform: translateX(-50%) translateY(var(--s-1)); background: var(--text); color: var(--text-nghich); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease); } .bd__cot:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .bd__cot--trong i { background: var(--control-active); } /* cột chồng */ .bd--cot-chong .bd__cot { justify-content: flex-end; } .bd__chong { display: flex; flex-direction: column-reverse; width: min(46px, 72%); height: var(--cao-cot, 40%); border-radius: var(--r-sm) var(--r-sm) 0 0; overflow: hidden; } .bd__chong i { border-radius: 0; width: 100%; height: auto; flex: var(--phan, 1); } .bd__chong i:nth-child(1) { background: var(--bd-1); } .bd__chong i:nth-child(2) { background: var(--bd-2); } .bd__chong i:nth-child(3) { background: var(--bd-3); } .bd__chong i:nth-child(4) { background: var(--bd-4); } /* --- thanh ngang (hbar) --- */ .bd--ngang .bd__than { display: flex; flex-direction: column; gap: var(--s-3); } .bd__hang { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr) 7ch; align-items: center; gap: var(--s-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); } .bd__hang span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd__hang i { display: block; height: var(--s-3); border-radius: var(--r-full); width: var(--rong, 50%); background: linear-gradient(90deg, var(--bd-6), var(--bd-1)); } .bd__hang b { text-align: right; font-family: var(--font-mono); font-weight: var(--fw-vua); color: var(--text); font-variant-numeric: tabular-nums; } /* --- đường / vùng (line / area) — SVG do màn cấp dữ liệu --- */ .bd__ve { display: block; width: 100%; height: auto; overflow: visible; } .bd__luoi { stroke: var(--bd-luoi); stroke-width: 1; } .bd__truc { stroke: var(--border-manh); stroke-width: 1.5; } .bd__dulieu { fill: none; stroke: var(--bd-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .bd__dulieu--2 { stroke: var(--bd-2); stroke-dasharray: var(--s-2) var(--s-1); } .bd__dulieu--3 { stroke: var(--bd-3); stroke-dasharray: var(--s-1) var(--s-2); } .bd__vung { fill: var(--bd-1); opacity: var(--mo-2); } .bd__cham { fill: var(--surface); stroke: var(--bd-1); stroke-width: 2.5; } .bd__nhan-truc { fill: var(--bd-nhan); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-family: var(--font-ui); } /* --- tròn / vành (donut) --- */ .bd--tron { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .bd__vanh { position: relative; width: var(--co, 148px); height: var(--co, 148px); border-radius: var(--r-full); background: conic-gradient(var(--bd-1) 0 var(--p1, 40%), var(--bd-2) 0 var(--p2, 65%), var(--bd-3) 0 var(--p3, 85%), var(--bd-4) 0 100%); flex: none; } .bd__vanh::after { content: ''; position: absolute; inset: 26%; background: var(--surface); border-radius: var(--r-full); } .bd__vanh .bd__giua { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: var(--z-noi); } .bd__vanh .bd__giua b { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h2))); } .bd__vanh .bd__giua span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); } /* --- tia (radar) --- */ .bd--tia .bd__ve { max-width: 320px; margin: 0 auto; } .bd__luoi-tia { fill: none; stroke: var(--border); stroke-width: 1; } .bd__mien { fill: var(--bd-1); opacity: var(--mo-3); stroke: var(--bd-1); stroke-width: 2; } .bd__mien--2 { fill: var(--bd-2); stroke: var(--bd-2); } /* --- nhiệt (heatmap) --- */ .bd--nhiet .bd__than { display: grid; gap: var(--s-1); grid-template-columns: repeat(var(--cot, 12), minmax(0, 1fr)); } .bd__o-nhiet { aspect-ratio: 1; border-radius: var(--r-xs); background: var(--app); opacity: var(--muc, .3); transition: transform var(--t-nhanh) var(--ease); } .bd__o-nhiet:hover { transform: scale(1.14); box-shadow: var(--shadow-1); } .bd__nhan-nhiet { display: flex; justify-content: space-between; color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); } /* --- tia lửa (sparkline) --- */ .bd-spark { display: inline-block; width: 88px; height: var(--s-5, 20px); vertical-align: middle; } .bd-spark .bd__dulieu { stroke-width: 2; } /* --- chỉ số lớn (KPI) --- */ .bd--kpi { gap: var(--s-1); } .bd--kpi .bd__so { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h0))); font-weight: var(--fw-rat); color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; } .bd--kpi .bd__ten { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .bd__chuthich { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-2); } .bd__chuthich li { display: inline-flex; align-items: center; gap: var(--s-1); } .bd__chuthich i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-xs); background: var(--bd-1); } .bd__chuthich li:nth-child(2) i { background: var(--bd-2); } .bd__chuthich li:nth-child(3) i { background: var(--bd-3); } .bd__chuthich li:nth-child(4) i { background: var(--bd-4); } @media (prefers-reduced-motion: reduce) { .cay__gat, .cay__tay, .bd__cot i, .bd__cot::after, .bd__o-nhiet { transition: none; } .do-thi__canh--chay { animation: none; } } /* ── thanh-phan/nhap-lieu.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM NHẬP LIỆU · thanh-phan/nhap-lieu.css Biểu mẫu 16:9 · ô tìm · trượt · ngày giờ · khoảng ngày giờ · tải lên ảnh · xem trước tệp·ảnh·video·âm thanh · kéo thả · vẽ Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). ========================================================================== */ /* ========================================================================== 1. BIỂU MẪU CHO KHUNG 16:9 Vì sao auto-fit thay vì số cột cứng: khung nội dung 16:9 rộng thay đổi (thanh bên gấp/mở, mật độ, thu phóng). auto-fit + minmax(260px,1fr) tự chia cột mà KHÔNG BAO GIỜ tràn ngang — đúng lỗi "biểu mẫu không fit container". Cần ép số cột thì dùng .bieu-mau--2cot / .bieu-mau--3cot. ========================================================================== */ .bieu-mau { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; } /* VÙNG NHÓM THÔNG TIN — Sếp 05/10/2026: "ko có các màu nền gữa các section hoặc group info để tạo ranh giới thị giác mờ giữa các vùng". Đo thật: 5 nhóm (cao 354-515px) TRONG SUỐT + 0 viền + 0 đệm ⇒ nằm trần trên nền trang, không ranh giới. Nay nền --nen-vung (tối hơn nền trang một nấc, đo được 1.063) + bo góc + đệm. Hộp trắng bên trong vẫn nổi (1.159). */ .bieu-mau__nhom { border: 0; min-width: 0; margin: 0; background: var(--nen-vung); border-radius: var(--r-lg); padding: var(--s-4); } .bieu-mau__nhom > legend { padding-inline: var(--s-2); } .bieu-mau__nhom > legend, .bieu-mau__tieude { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 0 0 var(--s-3); margin-bottom: var(--s-4); border-bottom: var(--v-mong) solid var(--border); font-family: var(--font-display); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); font-weight: var(--fw-dam); color: var(--text); } .bieu-mau__tieude .phu { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-thuong); color: var(--text-3); } .bieu-mau__luoi { display: grid; gap: var(--s-4) var(--s-5); align-items: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Màn hẹp hơn 1 cột 260px: `auto-fit` vẫn ép cột 260px ⇒ tràn ngang (đo thật: 133 ô tràn ở 280px). Xuống hẳn 1 cột co giãn. */ @media (max-width: 520px) { .bieu-mau__luoi { grid-template-columns: minmax(0, 1fr); } } .bieu-mau--2cot .bieu-mau__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bieu-mau--3cot .bieu-mau__luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bieu-mau--doc .bieu-mau__luoi { grid-template-columns: minmax(0, 1fr); } /* ô chiếm trọn hàng — dùng lại .rong của layout nếu đã có; khai tại đây cho chắc */ .bieu-mau__luoi > .rong { grid-column: 1 / -1; } /* 🔴 BẪY TÊN LỚP DÙNG CHUNG (đo thật 09/10/2026): `rong` mang HAI nghĩa — ô biểu mẫu "chiếm trọn hàng" (đây) và khối "TRẠNG THÁI RỖNG" của bo-sung-c.css (`.rong { display:grid; justify-items:center; padding:var(--s-9) … }`), tệp sau NẠP SAU ⇒ thắng. Hệ quả: ô rộng của biểu mẫu bị CĂN GIỮA + đệm khổng lồ ⇒ bảng con nở hai bên, tràn ngang 284px (đo trên màn Portal P2 của Sen Notes; khuôn 07-bieu-mau.html của kho cũng dính). Luật dưới khai ĐỦ hình dạng ở mức 0-3-0 ⇒ thắng `.rong` (0-1-0) bất kể thứ tự nạp tệp. */ .bieu-mau__luoi > .bieu-mau__muc.rong { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-1); padding: 0; text-align: start; color: inherit; } .bieu-mau__muc { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .bieu-mau__muc > label { font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); font-weight: var(--fw-vua); color: var(--text-2); display: flex; align-items: center; gap: var(--s-1); } .bieu-mau__muc > label .bat-buoc { color: var(--err-chu); } .bieu-mau__muc--ngang { flex-direction: row; align-items: center; gap: var(--s-4); } .bieu-mau__muc--ngang > label { flex: 0 0 34%; } .bieu-mau__muc--ngang > .bieu-mau__dieukhien { flex: 1; min-width: 0; } .bieu-mau__dieukhien { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .bieu-mau__dieukhien > :is(input, select, textarea, .chon-cay, .chon-nhieu) { flex: 1; min-width: 0; } .bieu-mau textarea { min-height: calc(var(--control-h) * 3); padding: var(--s-2) var(--s-3); resize: vertical; } .bieu-mau__goi-y { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .bieu-mau__loi { display: flex; align-items: center; gap: var(--s-1); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--err-chu); } .bieu-mau__dem { margin-left: auto; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); } .bieu-mau__muc--loi :is(input, select, textarea, .chon-cay__nut, .chon-nhieu__nut) { border-color: var(--err-1); } .bieu-mau__muc--loi > label { color: var(--err-chu); } .bieu-mau__muc--dat :is(input, select, textarea) { border-color: var(--ok-1); } .bieu-mau__muc--khoa { opacity: var(--mo-5); } /* chân biểu mẫu: giữ trong tầm mắt khi cuộn khung dài */ .bieu-mau__chan { position: sticky; bottom: 0; z-index: var(--z-noi); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); margin: 0 calc(var(--s-4) * -1) calc(var(--s-4) * -1); background: var(--kinh-nen); backdrop-filter: var(--kinh-mo); border-top: var(--v-mong) solid var(--border); } .bieu-mau__chan .nhom-nut { margin-left: auto; display: flex; gap: var(--s-2); } /* ========================================================================== 2. Ô TÌM (search) — dùng chung cho bảng chọn, lưới, thanh trên ========================================================================== */ .o-tim { position: relative; display: flex; align-items: center; min-width: 0; } .o-tim .sv { position: absolute; left: var(--s-3); color: var(--text-3); pointer-events: none; } .o-tim input { width: 100%; min-width: 0; padding-left: calc(var(--s-6) + var(--s-1)); } .o-tim__xoa { position: absolute; right: var(--s-2); } .o-tim--lon input { height: calc(var(--control-h) * 1.24); } /* ========================================================================== 3. TRƯỢT (slider) — dùng của nền tảng ========================================================================== */ .truot { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .truot input[type='range'] { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: var(--s-5); background: none; cursor: pointer; } .truot input[type='range']::-webkit-slider-runnable-track { height: var(--s-1); border-radius: var(--r-full); background: linear-gradient(90deg, var(--app) var(--phan, 50%), var(--control-active) var(--phan, 50%)); } .truot input[type='range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--s-4); height: var(--s-4); margin-top: calc(var(--s-1) * -1.5); border-radius: var(--r-full); background: var(--surface); border: var(--v-day) solid var(--app); box-shadow: var(--shadow-1); } .truot input[type='range']::-moz-range-track { height: var(--s-1); border-radius: var(--r-full); background: var(--control-active); } .truot input[type='range']::-moz-range-progress { height: var(--s-1); border-radius: var(--r-full); background: var(--app); } .truot input[type='range']::-moz-range-thumb { width: var(--s-4); height: var(--s-4); border-radius: var(--r-full); background: var(--surface); border: var(--v-day) solid var(--app); } .truot input[type='range']:focus-visible { outline: none; } .truot input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--v-day) var(--app-soft); } .truot__so { flex: none; min-width: 6ch; text-align: right; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); font-variant-numeric: tabular-nums; } .truot__moc { display: flex; justify-content: space-between; font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); } /* ========================================================================== 4. NGÀY GIỜ (datetime) — .ngay-gio là ô; .lich + .dong-ho là bảng chọn
========================================================================== */ .ngay-gio { position: relative; display: flex; min-width: 0; } .ngay-gio input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-base); padding-right: calc(var(--s-7) + var(--s-1)); } /* Nút mở lịch: TRƯỚC chỉ có luật định vị, không tạo kiểu ⇒ giữ nguyên dáng nút mặc định của trình duyệt (xám, viền đen 2px, bo 0, cao 23px) — lệch hẳn cả hệ. */ .ngay-gio__mo { position: absolute; right: var(--s-1); top: 50%; transform: translateY(-50%); display: grid; place-items: center; inline-size: var(--s-6); block-size: var(--s-6); padding: 0; border: 0; border-radius: calc(var(--radius-control) - var(--s-1)); background: none; color: var(--text-3); cursor: pointer; transition: background var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .ngay-gio__mo:hover { background: var(--control-hover); color: var(--text); } .ngay-gio__mo:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } .ngay-gio__bang { position: absolute; z-index: var(--z-menu); top: calc(100% + var(--s-1)); left: 0; display: flex; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-3); gap: var(--s-4); } .lich { width: 252px; } .lich__dau { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); } .lich__thang { flex: 1; text-align: center; font-weight: var(--fw-dam); font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); } .lich__thu, .lich__luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--v-mong); } /* 🔴 13/10/2026: hàng THỨ trong tuần dùng `--text-3` ⇒ cổng đo render bắt **70 chỗ** dưới AA (đo thật: chữ rgb(203,213,225) trên nền rgb(255,255,255) = **1,48:1**). Nhãn thứ là chữ nhỏ 10–12px in hoa ⇒ cần tương phản CAO hơn chữ phụ thường. Dùng `--text-2`: vẫn là bậc phụ, nhưng đủ đọc (>= 4,5:1 ở mọi tông nền). */ .lich__thu span { text-align: center; padding: var(--s-1) 0; color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-dam); text-transform: uppercase; } .lich__ngay { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); font-variant-numeric: tabular-nums; cursor: pointer; } .lich__ngay:hover { background: var(--surface-hover); } .lich__ngay--ngoai { color: var(--text-4); } /* 🔴 13/10/2026: ô "hôm nay" KHÔNG được ăn màu hệ — đo thật 2 ca: · `--app-chu` trên nền SÁNG = 3,10:1 (vbi) ⇒ quá nhạt · `--app-deep` trên nền TỐI = 1,0x:1 (systems-design) ⇒ chìm hẳn Màu hệ đổi theo bảng màu, nền đổi theo chế độ ⇒ hai trục độc lập. SỬA LẦN 2 (13/10, cổng bắt ở 08 màn thư viện, chế độ tối = 1,31:1): dùng mực của theme (`--text`) VẪN SAI khi khối cha đã khoá `--text` cho nền sáng của nó — con cháu thừa hưởng mực sáng-trên-nền-sáng, gặp chế độ tối là chìm. GỐC RỄ: ô này chưa có NỀN riêng nên mực phải mượn bề mặt ⇒ không kiểm soát được. LUẬT (đã ghi ở `.tb--*`): ĐỔI NỀN ⇒ PHẢI KHOÁ LẠI MỰC. Nay ô "hôm nay" tự có nền `--app-soft` + mực `--app-chu` — cặp kho đã thiết kế đúng cho nhau, tự lật theo cả bảng màu LẪN chế độ, không phụ thuộc khối cha. `--app-border` giữ vòng nhận diện. */ .lich__ngay--hom-nay { background: var(--app-soft); color: var(--app-chu); font-weight: var(--fw-dam); box-shadow: inset 0 0 0 var(--v-mong) var(--app-border); } .lich__ngay--khoang { background: var(--app-soft); border-radius: 0; } .lich__ngay--chon { background: var(--app); color: var(--app-contrast); font-weight: var(--fw-dam); } .lich__ngay--khoa { color: var(--text-4); opacity: var(--mo-4); pointer-events: none; text-decoration: line-through; } .lich__chan { display: flex; gap: var(--s-2); justify-content: flex-end; padding-top: var(--s-2); margin-top: var(--s-2); border-top: var(--v-mong) solid var(--border); } .dong-ho { width: 96px; display: flex; flex-direction: column; gap: var(--s-1); max-height: 232px; overflow: auto; } .dong-ho__gio { border: 0; background: none; font: inherit; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); text-align: center; padding: var(--s-1); border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); } .dong-ho__gio:hover { background: var(--surface-hover); color: var(--text); } .dong-ho__gio--chon { background: var(--app); color: var(--app-contrast); font-weight: var(--fw-dam); } /* khoảng ngày giờ: 2 lịch cạnh nhau + dải chọn nhanh */ .khoang-ngay-gio { position: relative; min-width: 0; } .khoang-ngay-gio__nut { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--control-h); padding: 0 var(--s-3); background: var(--control); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); font-family: var(--font-mono); color: var(--text); cursor: pointer; text-align: left; } .khoang-ngay-gio__nut .sv { flex: none; color: var(--text-3); } .khoang-ngay-gio__nut .muiten { margin-left: auto; color: var(--text-3); } .khoang-ngay-gio__bang { position: absolute; z-index: var(--z-menu); top: calc(100% + var(--s-1)); left: 0; display: flex; gap: var(--s-4); padding: var(--s-3); background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); /* Bảng ~808px (cột lối tắt + 2 lịch). Màn hẹp: CẤM đẩy tràn trang (đo thật: +475px ở 717px) — bọc cuộn ngang trong lòng bảng. CHỈ dùng vw: `100%` sẽ bó bảng theo bề ngang ô nhập (300px) và bóp nát màn rộng. */ max-width: 92vw; overflow-x: auto; overscroll-behavior-x: contain; } .khoang-ngay-gio__nhanh { display: flex; flex-direction: column; gap: var(--v-mong); min-width: 128px; padding-right: var(--s-4); border-right: var(--v-mong) solid var(--border); } .khoang-ngay-gio__nhanh button { justify-content: flex-start; } .khoang-ngay-gio__nhanh button.dang-chon { background: var(--app-soft); color: var(--app-chu); } /* ========================================================================== 5. TẢI LÊN (upload) — vùng thả + danh sách tệp + tiến trình ========================================================================== */ .vung-tha { display: grid; place-items: center; gap: var(--s-2); text-align: center; padding: var(--s-7) var(--s-5); cursor: pointer; background: var(--surface-2); border: var(--v-day) dashed var(--border-manh); border-radius: var(--r-lg); transition: background var(--t-nhanh) var(--ease), border-color var(--t-nhanh) var(--ease); } .vung-tha:hover { background: var(--surface-hover); border-color: var(--app-border); } .vung-tha.dang-tha { background: var(--app-soft); border-color: var(--app); border-style: solid; } .vung-tha .sv { width: calc(var(--fs-base) * 2.2); height: calc(var(--fs-base) * 2.2); color: var(--app-chu); } .vung-tha b { font-weight: var(--fw-dam); } .vung-tha span { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .ds-tep { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; } .tep { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3); background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); } .tep__bieu { flex: none; width: calc(var(--control-h) * .92); height: calc(var(--control-h) * .92); display: grid; place-items: center; border-radius: var(--r-sm); background: var(--app-soft); color: var(--app-chu); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-rat); letter-spacing: .02em; } .tep__than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } .tep__ten { font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tep__meta { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); font-family: var(--font-mono); } .tep__thanh { height: var(--s-1); border-radius: var(--r-full); background: var(--control-active); overflow: hidden; } .tep__thanh i { display: block; height: 100%; width: var(--phan, 0%); background: var(--app); border-radius: inherit; transition: width var(--t-cham) var(--ease); } .tep--loi { border-color: var(--err-1); } /* Nền --err-3/--ok-3 là màu ĐẬM CỐ ĐỊNH ở cả 2 chế độ ⇒ chữ LUÔN sáng (--n-0). Trước đây để --err-2/--ok-2 (đỏ/xanh vừa) ⇒ đo được 2,66 trên nền đỏ đậm. */ .tep--loi .tep__bieu { background: var(--err-3); color: var(--n-0); } .tep--xong .tep__bieu { background: var(--ok-3); color: var(--n-0); } .tep__thao-tac { display: flex; gap: var(--s-1); flex: none; } /* ========================================================================== 6. ẢNH (image) — khung tỉ lệ cố định, không nhảy bố cục khi ảnh về ========================================================================== */ .anh { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .anh__khung { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); border: var(--v-mong) solid var(--border); aspect-ratio: var(--ti-le, 16/9); } .anh__khung img, .anh__khung video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--khop, cover); display: block; } .anh__khung--vua img { object-fit: contain; } /* 🔴 GỐC RỄ (09/10/2026): `linear-gradient(180deg, transparent, var(--mo-5))` — `--mo-5` là SỐ độ mờ (.64), KHÔNG phải màu ⇒ gradient KHÔNG HỢP LỆ, không vẽ lớp phủ nào ⇒ chữ nằm trần trên ảnh, gặp ảnh sáng là chìm (Sếp chửi). Nay bọc đúng `rgb(0 0 0 / <độ mờ>)`, và mực trên lớp phủ là màu SÁNG CỐ ĐỊNH — lớp phủ luôn tối nên không được ăn token theo chế độ. */ .anh__lop { position: absolute; inset: auto 0 0 0; padding: var(--s-4) var(--s-3) var(--s-2); background: linear-gradient(180deg, transparent, rgb(0 0 0 / calc(var(--mo-5) * .92))); color: #FFFFFF; text-shadow: 0 1px 2px rgb(0 0 0 / .45); font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); } .anh__nhan { position: absolute; top: var(--s-2); left: var(--s-2); } .anh figcaption { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .anh__bo-anh { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); } .anh__bo-anh .anh__khung { flex: none; width: 96px; cursor: pointer; border-radius: var(--r-md); } .anh__bo-anh .dang-chon .anh__khung, .anh__bo-anh .anh__khung.dang-chon { box-shadow: 0 0 0 var(--v-day) var(--app); } /* ========================================================================== 7. XEM TRƯỚC (preview tệp · ảnh · video · âm thanh) ========================================================================== */ .xem-truoc { display: flex; flex-direction: column; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; } .xem-truoc__dau { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: var(--v-mong) solid var(--border); background: var(--surface-2); } .xem-truoc__dau .ten { font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); font-weight: var(--fw-vua); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xem-truoc__dau .cong-cu { margin-left: auto; display: flex; gap: var(--s-1); } .xem-truoc__than { flex: 1; min-height: 0; display: flex; } .xem-truoc__khung { flex: 1; min-width: 0; display: grid; place-items: center; padding: var(--s-4); background: var(--surface-2); } .xem-truoc__khung img, .xem-truoc__khung video { max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-2); } .xem-truoc__khung audio { width: 100%; max-width: 420px; } .xem-truoc__tin { flex: none; width: 220px; border-left: var(--v-mong) solid var(--border); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); overflow: auto; } .xem-truoc__tin dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .xem-truoc__tin dt { color: var(--text-3); } .xem-truoc__tin dd { margin: 0; color: var(--text); overflow-wrap: anywhere; } .xem-truoc__chan { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-top: var(--v-mong) solid var(--border); background: var(--surface-2); } /* tệp không xem trước được: hiện thẻ nhận diện định dạng */ .xem-truoc__tep { display: grid; place-items: center; gap: var(--s-3); text-align: center; padding: var(--s-7); } .xem-truoc__tep .bieu { width: calc(var(--control-h) * 2); height: calc(var(--control-h) * 2); display: grid; place-items: center; border-radius: var(--r-lg); background: var(--app-soft); color: var(--app-chu); font-weight: var(--fw-rat); letter-spacing: .04em; } /* ========================================================================== 8. KÉO THẢ (drag & drop sắp xếp lại) ========================================================================== */ .keo-tha { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; } .keo-tha__muc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); transition: box-shadow var(--t-nhanh) var(--ease), opacity var(--t-nhanh) var(--ease); } .keo-tha__tay { flex: none; color: var(--border-manh); cursor: grab; } .keo-tha__tay:active { cursor: grabbing; } .keo-tha__muc:hover { border-color: var(--border-manh); } .keo-tha__muc.dang-keo { opacity: var(--mo-5); box-shadow: var(--shadow-3); } .keo-tha__muc.la-dich { border-color: var(--app); border-style: dashed; background: var(--app-soft); } .keo-tha__muc .so-thu-tu { flex: none; width: var(--s-5); text-align: center; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .78)); color: var(--text-4); } .keo-tha__muc .than { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== 9. VẼ (canvas chữ ký / vẽ tay) — ========================================================================== */ .ve { display: flex; flex-direction: column; gap: var(--s-2); } .ve__cong-cu { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .ve__mau { width: var(--control-h); height: var(--control-h); border-radius: var(--r-full); border: var(--v-mong) solid var(--border); background: var(--bt, var(--text)); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 var(--v-day) var(--surface); } .ve__mau.dang-chon { box-shadow: 0 0 0 var(--v-day) var(--app); } .ve__co { width: var(--control-h); height: var(--control-h); display: grid; place-items: center; border-radius: var(--r-md); background: none; border: var(--v-mong) solid var(--border); cursor: pointer; } .ve__co.dang-chon { border-color: var(--app); background: var(--app-soft); } .ve__co i { display: block; border-radius: var(--r-full); background: var(--text); width: var(--net, 2px); height: var(--net, 2px); } .ve__bang { width: 100%; height: auto; aspect-ratio: var(--ti-le, 16/6); display: block; background: var(--surface); border: var(--v-day) dashed var(--border-manh); border-radius: var(--r-lg); touch-action: none; cursor: crosshair; } .ve__bang.dang-ve { border-color: var(--app); border-style: solid; } @media (prefers-reduced-motion: reduce) { .vung-tha, .tep__thanh i, .keo-tha__muc { transition: none; } } /* ── thanh-phan/lop-phu.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM LỚP PHỦ · thanh-phan/lop-phu.css Hộp thoại (cỡ · nguy hiểm · trong hộp thoại) · đếm ngược · xem ảnh Bổ sung cho `.lop-phu` / `.hop-thoai` đã có trong thanh-phan.css. Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). ========================================================================== */ /* ========================================================================== 1. HỘP THOẠI — cấu trúc đầy đủ: __dau · __than · __chan ========================================================================== */ /* ! Cỡ MẶC ĐỊNH khai Ở ĐÂY (cùng tệp, TRƯỚC 4 cỡ bên dưới). CẤM khai `width` cho `.hop-thoai` ở tệp nạp SAU (đã từng khai ở `thanh-phan.css`): cùng độ ưu tiên mà đứng sau nên thắng, làm chết `.hop-thoai--nho|--vua|--lon|--toan` (mọi hộp thoại ra 520px — đo thật 09/10/2026 trên Bàn biên tập Mai CMS). */ .hop-thoai { display: flex; flex-direction: column; max-height: calc(100% - var(--s-8)); width: min(520px, 100%); } /* Hộp thoại GỐC của nền tảng: — được miễn phí bẫy tiêu điểm, đóng bằng ESC, khóa nền, xếp tầng. Vì .hop-thoai đặt display:flex (đè display:none mặc định của trình duyệt) nên phải khôi phục display:none khi chưa mở — thiếu dòng này hộp thoại HIỆN LUÔN. */ dialog.hop-thoai { border: 0; padding: var(--s-5); } dialog.hop-thoai:not([open]) { display: none; } dialog.hop-thoai::backdrop { background: var(--surface-boc); backdrop-filter: var(--kinh-mo); } dialog.hop-thoai--trong { border: var(--v-day) solid var(--app-border); } dialog.hop-thoai--trong::backdrop { background: var(--mo-3); } .hop-thoai__dau { display: flex; align-items: center; gap: var(--s-3); padding: 0 0 var(--s-3); margin-bottom: var(--s-4); border-bottom: var(--v-mong) solid var(--border); } .hop-thoai__dau h3 { margin-right: auto; } .hop-thoai__dau .sv { flex: none; color: var(--app-chu); } .hop-thoai__than { flex: 1; min-height: 0; overflow-y: auto; } .hop-thoai__than > :last-child { margin-bottom: 0; } /* cỡ */ .hop-thoai--nho { width: min(380px, 100%); } .hop-thoai--vua { width: min(520px, 100%); } .hop-thoai--lon { width: min(760px, 100%); } .hop-thoai--toan { width: calc(100% - var(--s-8)); max-width: 1180px; } .hop-thoai--canh { width: min(460px, 100%); text-align: center; display: grid; justify-items: center; gap: var(--s-3); } .hop-thoai--canh .vong { width: calc(var(--control-h) * 1.6); height: calc(var(--control-h) * 1.6); display: grid; place-items: center; border-radius: var(--r-full); background: var(--app-soft); color: var(--app-chu); } .hop-thoai--canh.hop-thoai--nguy .vong { background: var(--err-3); color: var(--err-1); } .hop-thoai--canh .nhom-nut { justify-content: center; width: 100%; } .hop-thoai__chan .trai { margin-right: auto; } .hop-thoai__chan :is(.n--chinh, .n--nguy) { min-width: 108px; } /* thân cuộn được nhưng đầu/chân dính — hộp thoại dài vẫn dùng được */ .hop-thoai--dinh .hop-thoai__dau { flex: none; } .hop-thoai--dinh .hop-thoai__chan { flex: none; margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--v-mong) solid var(--border); } /* ---- HỘP THOẠI TRONG HỘP THOẠI ---- Lớp phủ thứ hai phải NỔI TRÊN lớp thứ nhất và tối hơn để mắt tách được tầng. Dùng biến đếm tầng: --tang (1, 2, 3…) ⇒ z = z-hopthoai + tầng. */ .lop-phu { --tang: 1; z-index: calc(var(--z-hopthoai) + var(--tang)); } .lop-phu--trong { --tang: 2; background: var(--surface-boc); } .lop-phu--trong .hop-thoai { border: var(--v-day) solid var(--app-border); } .lop-phu--sau .hop-thoai { filter: saturate(.86); } .lop-phu--trong .hop-thoai--canh { box-shadow: var(--shadow-4); } /* ========================================================================== 2. ĐẾM NGƯỢC (countdown)
06ngày…
========================================================================== */ .dem-nguoc { display: flex; align-items: stretch; gap: var(--s-2); } .dem-nguoc__o { display: grid; justify-items: center; gap: var(--s-1); min-width: calc(var(--control-h) * 2); padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); background: var(--surface-2); border: var(--v-mong) solid var(--border); } .dem-nguoc__o b { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h1))); font-weight: var(--fw-rat); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; } .dem-nguoc__o span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .dem-nguoc__ngan { align-self: center; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); color: var(--text-4); } .dem-nguoc--nhan .dem-nguoc__o { background: var(--app); border-color: var(--app); } .dem-nguoc--nhan .dem-nguoc__o b { color: var(--app-contrast); } .dem-nguoc--nhan .dem-nguoc__o span { color: var(--app-contrast); opacity: var(--mo-5); } .dem-nguoc--gon .dem-nguoc__o { min-width: 0; padding: 0; background: none; border: 0; } .dem-nguoc--gon .dem-nguoc__o b { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h2))); } .dem-nguoc--gon .dem-nguoc__o span { display: none; } /* vành đếm ngược tròn */ .vong-dem { position: relative; width: var(--co, 120px); height: var(--co, 120px); flex: none; } .vong-dem svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .vong-dem .nen { fill: none; stroke: var(--control-active); stroke-width: 8; } .vong-dem .chay { fill: none; stroke: var(--app); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--con, 25); } .vong-dem .giua { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .vong-dem .giua b { font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h1))); } /* ========================================================================== 3. XEM ẢNH (lightbox)
…
…
========================================================================== */ .xem-anh { position: fixed; inset: 0; z-index: var(--z-hopthoai); display: flex; flex-direction: column; background: color-mix(in srgb, var(--n-12) 92%, transparent); backdrop-filter: var(--kinh-mo); } .xem-anh__dau { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--text-nghich); } .xem-anh__dau .ten { font-weight: var(--fw-vua); } .xem-anh__dau .so { margin-left: auto; font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); opacity: var(--mo-5); } .xem-anh__dau .n { color: var(--text-nghich); } .xem-anh__dau .n:hover { background: var(--mo-2); } .xem-anh__than { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; } .xem-anh__than img, .xem-anh__than video { max-width: 100%; max-height: 100%; display: block; } .xem-anh__lui, .xem-anh__tien { position: absolute; top: 50%; transform: translateY(-50%); width: calc(var(--control-h) * 1.4); height: calc(var(--control-h) * 1.4); display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: var(--mo-3); color: var(--text-nghich); cursor: pointer; } .xem-anh__lui { left: var(--s-4); } .xem-anh__tien { right: var(--s-4); } .xem-anh__lui:hover, .xem-anh__tien:hover { background: var(--mo-4); } .xem-anh__chan { display: flex; align-items: center; gap: var(--s-2); justify-content: center; padding: var(--s-3) var(--s-4); overflow-x: auto; } .xem-anh__chan img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); cursor: pointer; opacity: var(--mo-5); flex: none; } .xem-anh__chan img.dang-chon { opacity: 1; box-shadow: 0 0 0 var(--v-day) var(--app); } /* bảng trượt phụ (xem chi tiết bên cạnh ảnh) */ .xem-anh--co-tin .xem-anh__than { grid-template-columns: minmax(0, 1fr) 300px; } .xem-anh__tin { background: var(--surface); height: 100%; overflow: auto; padding: var(--s-4); color: var(--text); } @media (prefers-reduced-motion: reduce) { .hop-thoai { transition: none; } } /* LƯU Ý BỐ CỤC: mọi hộp thoại đều dùng width: min(...) + max-height: calc(100% - …) để KHÔNG BAO GIỜ tràn khung 16:9 ở mọi chiều cao cửa sổ. */ /* ── thanh-phan/giao-tiep.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM GIAO TIẾP · thanh-phan/giao-tiep.css Mặt (avatar) · trạng thái · khung chat · bình luận Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). GỐC CỦA "KHÔNG NHẤT QUÁN": `.av` từng bị khai 3 KIỂU KHÁC NHAU ở 3 màn (03, 04, 06). Nay `.av` khai MỘT LẦN tại đây; các màn chỉ dùng lại. ========================================================================== */ /* ========================================================================== 1. MẶT (avatar) + TRẠNG THÁI Cỡ: mặc định · .av--nho · .av--lon · .av--khong (chữ cái/ảnh) · .av--vuong ========================================================================== */ .av { position: relative; flex: none; display: grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: var(--r-full); background: var(--app-soft); color: var(--app-chu); border: var(--v-mong) solid var(--app-border); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-dam); line-height: 1; overflow: visible; user-select: none; } .av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .av--nho { width: calc(var(--control-h) * .76); height: calc(var(--control-h) * .76); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); } .av--lon { width: calc(var(--control-h) * 1.6); height: calc(var(--control-h) * 1.6); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h2))); } .av--khong { background: var(--control-active); color: var(--text-2); border-color: var(--border); } .av--vuong { border-radius: var(--r-md); } .av--vien { border: 0; box-shadow: 0 0 0 var(--v-day) var(--surface); } /* chấm trạng thái dính góc mặt */ .av__trang-thai { position: absolute; right: 0; bottom: 0; width: calc(var(--s-2) + var(--s-1)); height: calc(var(--s-2) + var(--s-1)); border-radius: var(--r-full); background: var(--text-4); border: var(--v-day) solid var(--surface); } .av__trang-thai--truc { background: var(--ok-1); } .av__trang-thai--cho { background: var(--warn-1); } .av__trang-thai--ngung { background: var(--err-1); } /* dãy mặt xếp chồng (người tham gia) */ .av-day { display: flex; align-items: center; } .av-day .av { margin-left: calc(var(--s-2) * -1); box-shadow: 0 0 0 var(--v-day) var(--surface); } .av-day .av:first-child { margin-left: 0; } .av-day__them { background: var(--control-active); color: var(--text-2); font-family: var(--font-mono); } /* trạng thái có chữ */ .trang-thai { display: inline-flex; align-items: center; gap: var(--s-1); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .trang-thai i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--text-4); } .trang-thai--truc i { background: var(--ok-1); } .trang-thai--cho i { background: var(--warn-1); } .trang-thai--ngung i { background: var(--err-1); } /* ========================================================================== 2. KHUNG CHAT (chatbox) ========================================================================== */ .khung-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .khung-chat__dau { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--v-mong) solid var(--border); background: var(--surface); } .khung-chat__dau .than { flex: 1; min-width: 0; display: flex; flex-direction: column; } .khung-chat__dau b { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); } .khung-chat__dau .than span { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .khung-chat__than { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); background: var(--surface-2); } .khung-chat__ngay { align-self: center; padding: var(--s-1) var(--s-3); border-radius: var(--r-full); background: var(--kinh-nen); backdrop-filter: var(--kinh-mo); color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); margin: 0; } .nhom-tin { display: flex; flex-direction: column; gap: var(--s-1); max-width: 76%; } .nhom-tin--ra { align-self: flex-end; align-items: flex-end; } .nhom-tin--vao { align-self: flex-start; } .tin { display: flex; align-items: flex-end; gap: var(--s-2); min-width: 0; } .tin--ra { flex-direction: row-reverse; } .tin__bong { padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); background: var(--surface); border: var(--v-mong) solid var(--border); color: var(--text); font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); min-width: 0; overflow-wrap: anywhere; } .tin--ra .tin__bong { background: var(--app); border-color: var(--app); color: var(--app-contrast); } /* góc nhọn phía người gửi — nhận ra ai nói mà không cần nhãn */ .nhom-tin--vao .tin:first-child .tin__bong { border-bottom-left-radius: var(--r-xs); } .nhom-tin--ra .tin:first-child .tin__bong { border-bottom-right-radius: var(--r-xs); } .tin__gio { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); font-family: var(--font-mono); align-self: flex-end; padding-bottom: var(--s-1); } .tin__dau { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); margin: 0 var(--s-1); } /* tệp trong tin */ .tin__tep { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); background: var(--mo-1); min-width: 0; } .tin--ra .tin__tep { background: var(--mo-2); } .tin__anh { max-width: 260px; border-radius: var(--r-md); display: block; } .tin__ghi-am { height: calc(var(--control-h) * 1.1); width: 220px; } /* cảm xúc gắn vào tin */ .tin__camon { display: inline-flex; gap: var(--v-mong); margin-top: calc(var(--s-1) * -1); } .tin__camon button { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2); height: calc(var(--control-h) * .7); border-radius: var(--r-full); border: var(--v-mong) solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: max(var(--fs-nho), calc(var(--fs-base) * .76)); } .tin__camon button:hover { border-color: var(--app-border); } .tin__camon button.dang-chon { background: var(--app-soft); border-color: var(--app-border); color: var(--app-chu); } /* đang gõ */ .dang-go { display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); background: var(--surface); border: var(--v-mong) solid var(--border); } .dang-go i { width: calc(var(--s-1) + var(--v-mong)); height: calc(var(--s-1) + var(--v-mong)); border-radius: var(--r-full); background: var(--text-3); animation: dang-go 1s infinite ease-in-out; } .dang-go i:nth-child(2) { animation-delay: .15s; } .dang-go i:nth-child(3) { animation-delay: .3s; } @keyframes dang-go { 0%, 60%, 100% { opacity: var(--mo-3); transform: translateY(0); } 30% { opacity: 1; transform: translateY(calc(var(--s-1) * -1)); } } .khung-chat__chan { flex: none; padding: var(--s-3) var(--s-4); border-top: var(--v-mong) solid var(--border); } .khung-chat__soan { display: flex; align-items: flex-end; gap: var(--s-2); padding: var(--s-2); background: var(--control); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); transition: border-color var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease); } .khung-chat__soan:focus-within { border-color: var(--app); box-shadow: 0 0 0 var(--v-day) var(--app-soft); } .khung-chat__soan textarea { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; resize: none; min-height: var(--control-h); max-height: 132px; padding: var(--s-2) 0; font-size: max(var(--fs-nho), calc(var(--fs-base) * .95)); } .khung-chat__soan textarea:focus { box-shadow: none; } .khung-chat__soan > .n { flex: none; } .khung-chat__goi-y { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); } .khung-chat__goi-y button { padding: var(--s-1) var(--s-3); height: calc(var(--control-h) * .82); border-radius: var(--r-full); border: var(--v-mong) solid var(--app-border); background: var(--app-soft); color: var(--app-chu); cursor: pointer; font-size: max(var(--fs-nho), calc(var(--fs-base) * .84)); } .khung-chat__goi-y button:hover { border-color: var(--app); } /* ========================================================================== 3. BÌNH LUẬN (comment) ========================================================================== */ .binh-luan { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .binh-luan__ds { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; padding: 0; list-style: none; } .bl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); min-width: 0; } .bl__than { min-width: 0; } .bl__hop { background: var(--surface-2); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); min-width: 0; } .bl__dau { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-1); } .bl__ten { font-size: max(var(--fs-nho), calc(var(--fs-base) * .92)); font-weight: var(--fw-dam); } .bl__vai { font-size: max(var(--fs-nho), calc(var(--fs-base) * .68)); padding: 0 var(--s-1); border-radius: var(--r-xs); background: var(--app-soft); color: var(--app-chu); font-weight: var(--fw-vua); } .bl__gio { font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); font-family: var(--font-mono); } .bl__chu { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text); overflow-wrap: anywhere; } .bl__chu p { margin: 0 0 var(--s-1); } .bl__chu p:last-child { margin: 0; } .bl__nhac { color: var(--app-chu); background: var(--app-soft); border-radius: var(--r-xs); padding: 0 var(--s-1); font-weight: var(--fw-vua); } /* TRÍCH DẪN NGUỒN — thẻ nguồn nằm TRONG DÒNG của câu trả lời ("Nguồn: · giờ"). 🔴 CẤM dùng `.tt` cho việc này: `.tt` là NHÃN TRẠNG THÁI ngắn và có `white-space: nowrap` ⇒ câu nguồn dài đẩy tràn ngang (đo thật 09/10/2026: +15px ở 390, +125px ở 280). Ở đây chữ XUỐNG DÒNG được, bọc trong câu vẫn liền mạch. */ .trich-dan { display: inline; white-space: normal; overflow-wrap: anywhere; color: var(--app-chu); background: var(--app-soft); border-radius: var(--r-xs); padding: 0 var(--s-1); font-weight: var(--fw-vua); text-decoration: none; } a.trich-dan:hover, a.trich-dan:focus-visible { text-decoration: underline; } .bl__thao-tac { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); } .bl__thao-tac button { border: 0; background: none; cursor: pointer; padding: 0; color: var(--text-3); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .78)); display: inline-flex; align-items: center; gap: var(--s-1); } .bl__thao-tac button:hover { color: var(--app-chu); } .bl__thao-tac button.dang-chon { color: var(--app-chu); font-weight: var(--fw-vua); } /* trả lời lồng nhau — thụt lề bằng vạch, tối đa 3 tầng để không hẹp dần vô hạn */ .bl__tra-loi { grid-column: 2; display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); padding-left: var(--s-3); border-left: var(--v-day) solid var(--border); } .bl__tra-loi .bl__tra-loi { margin-left: calc(var(--s-3) * -1); } .bl--da-xu-ly .bl__hop { opacity: var(--mo-5); } .bl--da-xu-ly .bl__dau::after { content: ' · đã xử lý'; color: var(--ok-chu); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-vua); } .binh-luan__soan { display: flex; gap: var(--s-2); align-items: flex-start; } .binh-luan__soan textarea { min-height: calc(var(--control-h) * 1.6); } .binh-luan__soan .cot-nut { display: flex; flex-direction: column; gap: var(--s-1); } .binh-luan__loc { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .khung-chat__soan { transition: none; } .dang-go i { animation: none; opacity: var(--mo-5); } } /* ── thanh-phan/tuy-chon.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM TÙY CHỌN NGƯỜI DÙNG · thanh-phan/tuy-chon.css Bảng chọn BỘ MÀU · TÔNG NỀN · BỘ CHỮ · chế độ sáng/tối · mật độ. Đây là bộ điều khiển để ecosystem cho người dùng tự chọn diện mạo: 25 bộ màu × 3 tông nền × 20 bộ chữ × 2 chế độ × 3 mật độ. Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). ========================================================================== */ .bang-chon { display: flex; flex-direction: column; gap: var(--s-3); } .bang-chon__dau { display: flex; align-items: baseline; gap: var(--s-2); } .bang-chon__dau b { font-size: max(var(--fs-nho), calc(var(--fs-base) * .88)); font-weight: var(--fw-dam); } .bang-chon__dau span { margin-left: auto; font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); color: var(--text-4); } /* --------------------------- CHỌN BỘ MÀU --------------------------- */ .chon-mau { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); max-height: var(--cao, 260px); overflow-y: auto; padding-right: var(--s-1); } .chon-mau__o { display: flex; align-items: center; gap: var(--s-2); min-width: 0; height: var(--control-h); padding: 0 var(--s-2); background: var(--surface); color: var(--text-2); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .84)); text-align: left; cursor: pointer; transition: border-color var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease); } .chon-mau__o i { flex: none; width: var(--s-5); height: var(--s-5); border-radius: var(--r-sm); background: var(--bt, var(--app)); box-shadow: inset 0 0 0 var(--v-mong) var(--mo-2); } .chon-mau__o b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-vua); } .chon-mau__o:hover { border-color: var(--border-manh); color: var(--text); } .chon-mau__o.dang-chon { border-color: var(--bt, var(--app)); color: var(--text); font-weight: var(--fw-dam); box-shadow: inset 0 0 0 var(--v-mong) var(--bt, var(--app)), 0 0 0 var(--v-day) var(--app-soft); } .chon-mau__o.dang-chon b::after { content: ' · đang dùng'; color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .72)); font-weight: var(--fw-thuong); } /* --------------------------- CHỌN TÔNG NỀN --------------------------- */ .chon-nen { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .chon-nen__o { display: flex; align-items: center; gap: var(--s-2); min-width: 0; height: calc(var(--control-h) * 1.1); padding: 0 var(--s-2); background: var(--surface); color: var(--text-2); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * .84)); cursor: pointer; text-align: left; } .chon-nen__o i { flex: none; width: var(--s-5); height: var(--s-5); border-radius: var(--r-sm); background: var(--nen, var(--surface-2)); box-shadow: inset 0 0 0 var(--v-mong) var(--border-manh); } .chon-nen__o.dang-chon { border-color: var(--app); box-shadow: 0 0 0 var(--v-day) var(--app-soft); color: var(--text); } /* --------------------------- CHỌN BỘ CHỮ --------------------------- */ .chon-chu { display: flex; flex-direction: column; gap: var(--s-1); max-height: var(--cao, 320px); overflow-y: auto; } .chon-chu__o { display: flex; flex-direction: column; gap: var(--v-mong); width: 100%; min-width: 0; padding: var(--s-2) var(--s-3); text-align: left; cursor: pointer; background: var(--surface); color: var(--text); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); transition: border-color var(--t-nhanh) var(--ease), background var(--t-nhanh) var(--ease); } .chon-chu__o b { font-size: max(var(--fs-nho), calc(var(--fs-base) * .84)); font-weight: var(--fw-dam); } .chon-chu__o span { font-size: max(var(--fs-nho), calc(var(--fs-base) * .86)); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chon-chu__o:hover { border-color: var(--border-manh); background: var(--surface-hover); } .chon-chu__o.dang-chon { border-color: var(--app); background: var(--app-soft); } .chon-chu__o.dang-chon b { color: var(--app-chu); } /* --------------------------- MẪU BỘ MÀU --------------------------- */ /* dải chứng minh bộ màu đổi thật: mọi ô đều ăn token, không màu cứng */ .mau-thu { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .mau-thu > i { width: var(--s-7); height: var(--s-7); border-radius: var(--r-md); box-shadow: var(--shadow-1); } .mau-thu > i:nth-child(1) { background: var(--app); } .mau-thu > i:nth-child(2) { background: var(--app-light); } .mau-thu > i:nth-child(3) { background: var(--app-deep); } .mau-thu > i:nth-child(4) { background: var(--app-soft); } .mau-thu > i:nth-child(5) { background: var(--app-border); } .mau-thu > i:nth-child(6) { background: var(--ok-1); } .mau-thu > i:nth-child(7) { background: var(--warn-1); } .mau-thu > i:nth-child(8) { background: var(--err-1); } @media (prefers-reduced-motion: reduce) { .chon-mau__o, .chon-chu__o { transition: none; } } /* ── thanh-phan/bo-sung-a.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM BỔ SUNG A · thanh-phan/bo-sung-a.css Đang tải · khung xương · chấm sao · chú thích nổi · menu ngữ cảnh · thanh tiêu đề · lọc theo trạng thái. Sáu thứ hệ còn thiếu, khai MỘT LẦN tại đây; các màn chỉ dùng lại. Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). Mọi chuyển động tắt ở khối prefers-reduced-motion cuối tệp (L5). ========================================================================== */ /* ========================================================================== 1. ĐANG TẢI (loading)
Đang tải…
Biến thể: --muc (chỉ vòng) · --lon (phủ toàn vùng) · --tren (thanh mảnh trên đỉnh) ========================================================================== */ .dang-tai { display: grid; place-items: center; gap: var(--s-3); padding: var(--space-block); text-align: center; color: var(--text-2); } .dang-tai__vong { flex: none; width: var(--co, calc(var(--control-h) * .84)); height: var(--co, calc(var(--control-h) * .84)); border-radius: var(--r-full); border: var(--v-day) solid var(--control-active); border-top-color: var(--app); animation: dang-tai-quay calc(var(--t-cham) * 3) linear infinite; } @keyframes dang-tai-quay { to { transform: rotate(360deg); } } .dang-tai__chu { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .dang-tai--muc { padding: 0; } .dang-tai--muc .dang-tai__chu { display: none; } /* --lon phủ toàn vùng: dán vào phần tử cha có position: relative */ .dang-tai--lon { position: absolute; inset: 0; z-index: var(--z-noi); padding: var(--s-8); background: var(--kinh-nen); backdrop-filter: var(--kinh-mo); } .dang-tai--lon .dang-tai__vong { --co: calc(var(--control-h) * 1.6); } .dang-tai--lon .dang-tai__chu { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); } /* thanh mảnh chạy ngang TRÊN ĐỈNH vùng — thanh báo tải không chiếm chỗ nội dung */ .dang-tai--tren { position: absolute; inset: 0 0 auto; z-index: var(--z-noi); display: block; padding: 0; height: var(--v-day); overflow: hidden; background: var(--control-active); } .dang-tai--tren::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--app); animation: dang-tai-chay calc(var(--t-cham) * 4) var(--ease) infinite; } /* đẩy bằng transform (không đụng layout) — dải 40% quét hết bề ngang khung */ @keyframes dang-tai-chay { from { transform: translateX(0); } to { transform: translateX(350%); } } /* ========================================================================== 2. KHUNG XƯƠNG (skeleton) — khối xám nhấp nháy giữ chỗ chờ nội dung
Bề ngang: mặc định 100% · --ngan 40% · --vua 60% · --dai 80% ========================================================================== */ .khung-xuong { display: flex; flex-direction: column; gap: var(--s-2); } .khung-xuong__dong { display: block; min-width: 0; height: var(--s-3); border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2), var(--surface-hover), var(--surface-2)); background-size: 220% 100%; animation: khung-xuong-nhap-nhay calc(var(--t-cham) * 6) var(--ease) infinite; } @keyframes khung-xuong-nhap-nhay { from { background-position: 100% 0; } to { background-position: -100% 0; } } .khung-xuong__dong--ngan { width: 40%; } .khung-xuong__dong--vua { width: 60%; } .khung-xuong__dong--dai { width: 80%; } /* ========================================================================== 3. CHẤM SAO (rating)
… 4,0
Mỗi sao là Phần tử mang [data-chi-dan] tự thành position:relative; bong bóng chỉ hiện khi :hover / :focus-visible / :focus-within của cha ⇒ không cần JS, vẫn dùng được bằng bàn phím. Mặc định = --tren; biến thể --tren · --duoi · --trai · --phai. Bong bóng đặt pointer-events:none để không cướp hover của cha. ========================================================================== */ [data-chi-dan] { position: relative; } [data-chi-dan]:is(:hover, :focus-visible, :focus-within) > .chi-dan { opacity: 1; visibility: visible; } .chi-dan { position: absolute; z-index: var(--z-noi); display: block; width: max-content; max-width: 320px; bottom: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); padding: var(--s-2) var(--s-3); background: var(--n-11); color: var(--text-nghich); border-radius: var(--r-md); box-shadow: var(--sh-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-thuong); line-height: var(--lh-thoang); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-nhanh) var(--ease), visibility var(--t-nhanh) var(--ease); } /* mũi nhọn: hình thoi xoay 45° lấn nửa ra ngoài mép — mặc định chúc XUỐNG (bong bóng ở trên) */ .chi-dan::after { content: ''; position: absolute; width: var(--s-2); height: var(--s-2); background: inherit; transform: rotate(45deg); top: 100%; left: 50%; margin-top: calc(var(--s-2) * -.5); margin-left: calc(var(--s-2) * -.5); } /* --tren là MẶC ĐỊNH ⇒ không khai lại; .chi-dan--duoi/--trai/--phai đè vị trí + mũi nhọn */ .chi-dan--duoi { bottom: auto; top: calc(100% + var(--s-2)); left: 50%; transform: translateX(-50%); } .chi-dan--duoi::after { top: auto; bottom: 100%; left: 50%; margin-top: 0; margin-bottom: calc(var(--s-2) * -.5); } .chi-dan--trai { bottom: auto; right: calc(100% + var(--s-2)); left: auto; top: 50%; transform: translateY(-50%); } .chi-dan--trai::after { top: 50%; right: 100%; left: auto; margin-top: calc(var(--s-2) * -.5); margin-left: 0; margin-right: calc(var(--s-2) * -.5); } .chi-dan--phai { bottom: auto; left: calc(100% + var(--s-2)); top: 50%; transform: translateY(-50%); } .chi-dan--phai::after { top: 50%; left: 100%; margin-top: calc(var(--s-2) * -.5); margin-left: calc(var(--s-2) * -.5); } /* chú thích dài: xuống dòng thay vì kéo dài vô tận */ .chi-dan--rong { width: auto; max-width: 280px; white-space: normal; overflow-wrap: anywhere; } .chi-dan--giai-thich { width: auto; max-width: 280px; white-space: normal; padding: var(--s-3); } .chi-dan__dau { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-dam); margin-bottom: var(--s-1); } .chi-dan__than { font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); line-height: var(--lh-thuong); } /* chế độ tối: --n-11 vẫn là màu tối còn --text-nghich lật thành tối ⇒ đè lại thành bong bóng SÁNG để vẫn tương phản (không dùng lại cặp token gốc). */ [data-theme='dark'] .chi-dan { background: var(--n-3); color: var(--n-12); } /* ========================================================================== 5. MENU NGỮ CẢNH (context menu) — dán vào con trỏ bằng top/left do JS đặt ========================================================================== */ .menu-ngu { position: fixed; z-index: var(--z-menu); min-width: 180px; max-width: 320px; display: flex; flex-direction: column; gap: var(--v-mong); padding: var(--s-1); background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text); } /* display:flex đè display:none mặc định của [hidden] ⇒ phải khôi phục, thiếu dòng này menu HIỆN LUÔN (cùng bẫy đã ghi ở lop-phu.css cho ). */ .menu-ngu[hidden] { display: none; } .menu-ngu__muc { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--control-h); padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); text-align: left; white-space: nowrap; cursor: pointer; } .menu-ngu__muc:hover, .menu-ngu__muc:focus-visible { background: var(--surface-hover); } .menu-ngu__muc .sv { flex: none; color: var(--text-3); } .menu-ngu__muc--nguy { color: var(--err-chu); } .menu-ngu__muc--nguy .sv { color: var(--err-chu); } /* Nền --err-3/--ok-3 là màu ĐẬM CỐ ĐỊNH (không đổi theo chế độ) ⇒ chữ phải LUÔN sáng. Dùng --n-0 (#FFFFFF), KHÔNG dùng --text-nghich (chế độ tối nó là #0E0A21 = chữ tối ⇒ 1,94 trên nền đỏ đậm). */ .menu-ngu__muc--nguy:hover, .menu-ngu__muc--nguy:focus-visible { background: var(--err-3); color: var(--n-0); } .menu-ngu__muc--nguy:hover .sv, .menu-ngu__muc--nguy:focus-visible .sv { color: var(--n-0); } .menu-ngu__muc--khoa { opacity: var(--mo-5); pointer-events: none; } .menu-ngu__ngan { flex: none; border: 0; border-top: var(--v-mong) solid var(--border); margin: var(--s-1) var(--s-2); } .menu-ngu__phim { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .76)); padding-left: var(--s-3); } .menu-ngu__muc--co-menu-con { position: relative; } .menu-ngu__muc--co-menu-con::after { content: '›'; margin-left: auto; color: var(--text-3); } /* menu con: mang CẢ HAI lớp (
) để dùng lại toàn bộ kiểu nền/viền/bóng ở trên ⇒ dưới đây chỉ còn vị trí và ẩn/hiện. */ .menu-ngu__con { position: absolute; top: calc(var(--s-1) * -1); left: 100%; display: none; } .menu-ngu__muc--co-menu-con:hover > .menu-ngu__con, .menu-ngu__muc--co-menu-con:focus-within > .menu-ngu__con { display: flex; } /* ========================================================================== 6. THANH TIÊU ĐỀ (title bar) — dải trên cùng của khối/hộp thoại
…Tên mô tả ngắn
…
Biến thể: --kinh (kính trong suốt) · --dinh (dính trên khi cuộn) ========================================================================== */ .thanh-tieu-de { display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h); padding: var(--s-2) var(--s-3); background: var(--surface); border-bottom: var(--v-mong) solid var(--border); color: var(--text); /* CẤM CO: cha flex-column (`.xuong__noi`) cao cố định sẽ ép thanh này xuống `min-height` trong khi con vẫn cao thật ⇒ con TRÀN ra hai phía và ĐÈ lên khối bên dưới (lỗi đè control 10/10/2026). `flex: none` giữ đúng chiều cao thật. Đồng thời cho xuống dòng để khối mô tả dài không bị nén ngang. */ flex: none; flex-wrap: wrap; row-gap: var(--s-2); } /* Khối mô tả dài nhét trong thanh: chặn phình vô hạn, quá 3 dòng thì cắt gọn. */ .thanh-tieu-de > .gc, .thanh-tieu-de > div > .gc { max-width: 84ch; } .thanh-tieu-de__ten { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); font-weight: var(--fw-vua); } .thanh-tieu-de__ten .sv { flex: none; color: var(--app-chu); } .thanh-tieu-de__phu { min-width: 0; color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thanh-tieu-de__nut { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--s-1); } .thanh-tieu-de--kinh { background: var(--kinh-nen-thanh); backdrop-filter: var(--kinh-blur); border-bottom-color: var(--kinh-vien); } .thanh-tieu-de--dinh { position: sticky; top: 0; z-index: var(--z-dinh); } /* ========================================================================== 7. LỌC THEO TRẠNG THÁI (status filter) — chip có chấm màu + số lượng
…
Màu chấm: --chay ok · --cho warn · --dung xám · --loi err · --tin info ========================================================================== */ .loc-tt { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .loc-tt__muc { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control-h); padding: 0 var(--s-3); border: var(--v-mong) solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); cursor: pointer; font: inherit; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-vua); white-space: nowrap; transition: background var(--t-nhanh) var(--ease), border-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .loc-tt__muc:hover { border-color: var(--border-manh); color: var(--text); } .loc-tt__cham { flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-full); background: var(--text-4); } .loc-tt__muc--chon { background: var(--app-soft); border-color: var(--app-border); color: var(--app-chu); } .loc-tt__dem { margin-left: auto; padding-left: var(--s-1); color: var(--text-3); font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .76)); font-variant-numeric: tabular-nums; } .loc-tt__muc--chay .loc-tt__cham { background: var(--ok-1); } .loc-tt__muc--cho .loc-tt__cham { background: var(--warn-1); } .loc-tt__muc--dung .loc-tt__cham { background: var(--text-3); } .loc-tt__muc--loi .loc-tt__cham { background: var(--err-1); } .loc-tt__muc--tin .loc-tt__cham { background: var(--info-1); } /* chọn nhiều: chip vuông hơn để thấy rõ đang bật NHIỀU mục cùng lúc */ .loc-tt--chon-nhieu .loc-tt__muc { border-radius: var(--r-md); } .loc-tt--chon-nhieu .loc-tt__muc[aria-pressed='true'] { background: var(--app-soft); border-color: var(--app-border); color: var(--app-chu); } @media (prefers-reduced-motion: reduce) { .dang-tai__vong { animation: none; } .dang-tai--tren::after { animation: none; left: 0; } .khung-xuong__dong { background: var(--surface-2); animation: none; } .chi-dan { transition: none; } .cham-sao > .sv, .cham-sao > button { transition: none; } .cham-sao > button:hover, .cham-sao > button:focus-visible { transform: none; } .loc-tt__muc { transition: none; } } /* ── thanh-phan/bo-sung-b.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM BỔ SUNG B · thanh-phan/bo-sung-b.css Cây có ô tick · thanh kéo chia vùng · biểu đồ gantt Hướng dẫn từng bước · chân trang (landing · website · cms) Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ chữ tuyệt đối (cổng kiểm L1·L2·L3). Không viết lại thứ đã có: `.cay` (du-lieu.css), ô tick `input[type=checkbox]` (thanh-phan.css), nút `.n`, ô nhập `.o` — các khối dưới đây DÙNG LẠI. ========================================================================== */ /* ========================================================================== 1. CÂY CÓ Ô TICK (tree check) — biến thể của `.cay` đã có ở du-lieu.css Dựng trên
/: 0 dòng JS. Ô tick BÊN TRÁI, trước `.cay__gat`.
  • …
    • ========================================================================== */ .cay--tick .cay__muc { gap: var(--s-1); } .cay--tick .cay__muc > .cay__tick { flex: none; margin-inline-end: var(--s-1); } /* ô tick: KHÔNG tự vẽ kiểu khác — dùng nguyên khuôn `input[type=checkbox]` của thanh-phan.css (appearance:none, --s-6, viền --border-manh, ::after là dấu tick). Ở đây chỉ thêm trạng thái CHỌN MỘT PHẦN (cha có con chọn chưa hết). Độ ưu tiên (0-3-0) > (0-2-1) của ô tick gốc nên thắng cả khi nạp trước. */ .cay--tick .cay__muc .cay__tick--nua { background: var(--app); border-color: var(--app); } .cay--tick .cay__muc .cay__tick--nua::after { content: ''; position: absolute; inset: 0; margin: auto; inline-size: calc(var(--s-3) * .66); block-size: var(--v-day); border: 0; border-radius: var(--r-full); background: var(--app-contrast); transform: none; } .cay--tick .cay__muc--chon { background: var(--app-soft); color: var(--app-chu); } .cay--tick .cay__muc--chon .sv { color: var(--app-chu); } .cay__dem-chon { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } /* ========================================================================== 2. THANH KÉO CHIA VÙNG (splitter) — KHÁC `.ngan-keo` (ngăn kéo trượt phải). Hiển thị đúng bằng flex, KHÔNG cần JS. Kéo là việc của JS: bắt pointerdown trên `.chia__thanh`, đổi flex-basis của `.chia__vung` đứng trước. ========================================================================== */ .chia { display: flex; align-items: stretch; min-width: 0; min-height: 0; background: var(--surface); } .chia__vung { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; } .chia__thanh { flex: none; display: grid; place-items: center; position: relative; inline-size: var(--s-2); background: var(--border); cursor: col-resize; touch-action: none; transition: background var(--t-nhanh) var(--ease); } .chia__thanh:hover, .chia__thanh--keo { background: var(--app); } .chia__thanh:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } /* tay cầm: 3 gạch nhỏ chia đều chiều cao — chỉ hiện khi hover/kéo */ .chia__tay { inline-size: var(--v-day); block-size: var(--control-h); opacity: 0; background-image: linear-gradient(to bottom, var(--text-nghich) 0 20%, transparent 20% 40%, var(--text-nghich) 40% 60%, transparent 60% 80%, var(--text-nghich) 80% 100%); transition: opacity var(--t-nhanh) var(--ease); } .chia__thanh:hover .chia__tay, .chia__thanh--keo .chia__tay { opacity: 1; } /* chiều dọc: chia trên/dưới, thanh kéo nằm ngang */ .chia--doc { flex-direction: column; } .chia--doc .chia__thanh { inline-size: auto; block-size: var(--s-2); cursor: row-resize; } .chia--doc .chia__tay { transform: rotate(90deg); } /* vùng thứ 2 đang thu gọn: về 0 nhưng thanh kéo VẪN hiện để mở lại */ .chia--thu > .chia__vung:last-child { flex: 0 0 0; inline-size: 0; overflow: hidden; } /* ========================================================================== 3. BIỂU ĐỒ GANTT (gantt) — cuộn ngang trong khối, tên dính trái, dải mốc dính trên. Vị trí thanh do dữ liệu đặt: ========================================================================== */ .gantt { position: relative; overflow-x: auto; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .gantt__dau { position: sticky; inset-block-start: 0; z-index: var(--z-nen); display: flex; background: var(--surface-2); border-bottom: var(--v-mong) solid var(--border); } .gantt__cot { flex: none; inline-size: var(--s-10); padding: var(--s-1) var(--s-2); color: var(--text-2); text-align: center; border-right: var(--v-mong) solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gantt__cot--cuoi { border-right-color: var(--border-manh); } .gantt__dong { display: flex; align-items: center; block-size: var(--s-10); border-bottom: var(--v-mong) solid var(--border); } .gantt__dong:last-child { border-bottom: 0; } .gantt__ten { position: sticky; inset-inline-start: 0; z-index: var(--z-nen); flex: none; inline-size: calc(var(--s-12) * 3); align-self: stretch; display: flex; align-items: center; padding-inline: var(--s-3); background: var(--surface); color: var(--text); border-right: var(--v-mong) solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gantt__ray { position: relative; flex: 1 1 auto; min-inline-size: 0; align-self: stretch; } .gantt__thanh { position: absolute; inset-block-start: 50%; transform: translateY(-50%); block-size: calc(var(--control-h) * .8); display: flex; align-items: center; padding-inline: var(--s-2); background: var(--app); color: var(--app-contrast); border-radius: var(--r-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 🔴 GỐC RỄ (09/10/2026): `.gantt__thanh` đặt mực `--app-contrast` (trắng) cho MỌI thanh, nhưng 3 biến thể đổi nền sang màu NHẠT CỐ ĐỊNH (`--ok-1`/`--err-1`/`--warn-1`) mà không đổi mực ⇒ trắng trên #ECFDF5/#FEF2F2/#FFFBEB = 1,05–1,1:1, 20 chỗ vô hình. LUẬT: đổi nền thì phải đổi mực theo. Nền nhạt CỐ ĐỊNH (không theo chế độ) ⇒ mực phải là màu ĐẬM CỐ ĐỊNH (`--ok-3`/`--err-3`/`--warn-3`), KHÔNG dùng `--*-chu` (token đó đổi theo chế độ, ở chế độ tối nó pha trắng ⇒ lại chìm trên nền nhạt). */ .gantt__thanh--xong { background: var(--ok-1); color: var(--ok-3); } .gantt__thanh--dang { background: var(--app); color: var(--app-contrast); } .gantt__thanh--tre { background: var(--err-1); color: var(--err-3); } .gantt__thanh--cho { background: var(--warn-1); color: var(--warn-3); } /* mốc tiến độ thực tế trên thanh */ .gantt__moc { position: absolute; inset-block: 0; inline-size: var(--v-day); border-radius: var(--r-full); background: var(--text-nghich); } /* đường nối phụ thuộc giữa 2 thanh — 1 góc vuông nét đứt bằng border */ .gantt__phu-thuoc { position: absolute; border-block-start: var(--v-nhan) dashed var(--text-4); border-inline-end: var(--v-nhan) dashed var(--text-4); border-start-end-radius: var(--r-sm); } .gantt__hom-nay { position: absolute; inset-block: 0; inline-size: 0; z-index: var(--z-nen); border-left: var(--v-nhan) dashed var(--err-1); } .gantt__chuthich { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin: 0; list-style: none; color: var(--text-2); border-top: var(--v-mong) solid var(--border); } .gantt__chuthich li { display: inline-flex; align-items: center; gap: var(--s-1); } .gantt__chuthich i { inline-size: var(--s-2); block-size: var(--s-2); border-radius: var(--r-xs); background: var(--app); } .gantt__chuthich li:nth-child(2) i { background: var(--ok-1); } .gantt__chuthich li:nth-child(3) i { background: var(--err-1); } .gantt__chuthich li:nth-child(4) i { background: var(--warn-1); } /* ========================================================================== 4. HƯỚNG DẪN TỪNG BƯỚC (tutorial guidelines) — khung nhúng hoặc nổi (.huong-dan--noi). Nút đóng dùng lại `.n .n--trong`, nút Trước/Tiếp/Bỏ qua dùng lại `.n`. ========================================================================== */ .huong-dan { position: relative; max-inline-size: var(--rong-form); padding: var(--s-4); background: var(--surface); border: var(--v-mong) solid var(--app-border); border-radius: var(--r-lg); box-shadow: var(--sh-3); color: var(--text-2); } .huong-dan--noi { position: fixed; z-index: var(--z-noi); inset: auto auto var(--s-5) var(--s-5); max-inline-size: calc(var(--rong-form) * .8); } .huong-dan__dau { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: var(--v-mong) solid var(--border); } .huong-dan__icon { flex: none; display: grid; place-items: center; inline-size: var(--control-h); block-size: var(--control-h); border-radius: var(--r-md); background: var(--app-soft); color: var(--app-chu); } .huong-dan__tieude { flex: 1; min-inline-size: 0; color: var(--text); font-weight: var(--fw-dam); font-size: max(var(--fs-nho), calc(var(--fs-base) * 1.05)); } /* vạch tiến độ các bước trên đầu: mỗi bước, bước đã qua thêm data-xong */ .huong-dan__tien { display: flex; gap: var(--s-1); padding-block: var(--s-3) 0; } .huong-dan__tien i { flex: 1; block-size: var(--v-day); border-radius: var(--r-full); background: var(--border); } .huong-dan__tien i[data-xong] { background: var(--app); } .huong-dan__buoc { display: flex; gap: var(--s-3); padding-block: var(--s-2); } .huong-dan__so { flex: none; display: grid; place-items: center; inline-size: calc(var(--control-h) * .8); block-size: calc(var(--control-h) * .8); border-radius: var(--r-full); background: var(--app); color: var(--app-contrast); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-dam); } .huong-dan__so--xong { background: var(--ok-1); } .huong-dan__chu { flex: 1; min-inline-size: 0; color: var(--text-2); } /* điểm neo: khoanh sáng phần tử cần chỉ vào */ .huong-dan__moc { position: relative; border-radius: var(--r-sm); outline: var(--v-nhan) solid var(--app); outline-offset: var(--s-1); box-shadow: 0 0 0 var(--s-3) var(--app-soft); animation: hd-nhap-nhay calc(var(--t-cham) * 2) var(--ease) infinite; } @keyframes hd-nhap-nhay { 0%, 100% { box-shadow: 0 0 0 var(--s-2) var(--app-soft); } 50% { box-shadow: 0 0 0 var(--s-4) var(--app-soft); } } .huong-dan__chan { display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--v-mong) solid var(--border); } .huong-dan__dem { margin-inline-end: auto; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } /* bản tối: thẻ tối CỐ ĐỊNH (không đảo theo chế độ) nên dùng thang xám --n-* */ .huong-dan--toi { background: var(--n-11); color: var(--n-2); border-color: var(--n-9); box-shadow: var(--sh-4); } .huong-dan--toi .huong-dan__dau, .huong-dan--toi .huong-dan__chan { border-color: var(--n-9); } .huong-dan--toi .huong-dan__tieude { color: var(--n-0); } .huong-dan--toi .huong-dan__chu { color: var(--n-2); } .huong-dan--toi .huong-dan__dem { color: var(--n-7); } .huong-dan--toi .huong-dan__icon { background: var(--n-9); color: var(--n-0); } .huong-dan--toi .huong-dan__tien i { background: var(--n-9); } .huong-dan--toi .huong-dan__tien i[data-xong] { background: var(--app); } /* ========================================================================== 5. CHÂN TRANG (footer) — 1 khối chung + 3 biến thể: --website · --cms · --landing ========================================================================== */ .chan-trang { background: var(--surface-2); border-top: var(--v-mong) solid var(--border); color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .chan-trang__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-6) var(--s-5); padding: var(--s-7) var(--s-5); } .chan-trang__cot { display: flex; flex-direction: column; gap: var(--s-2); min-inline-size: 0; } .chan-trang__tieude { color: var(--text); font-weight: var(--fw-vua); } .chan-trang__lien-ket { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; } .chan-trang__lien-ket a { color: var(--text-2); text-decoration: none; } .chan-trang__lien-ket a:hover { color: var(--app-chu); text-decoration: underline; } .chan-trang__dong { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: var(--v-mong) solid var(--border); } .chan-trang__mang { display: flex; gap: var(--s-1); } .chan-trang__mang a { display: grid; place-items: center; inline-size: var(--control-h); block-size: var(--control-h); border-radius: var(--r-md); color: var(--text-2); transition: background var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .chan-trang__mang a:hover { background: var(--app-soft); color: var(--app-chu); } .chan-trang__logo { display: flex; flex-direction: column; gap: var(--s-2); min-inline-size: 0; } .chan-trang__logo img { max-inline-size: 100%; block-size: auto; } /* đăng ký nhận tin: ô nhập dùng lại `.o`, nút dùng lại `.n`; tự xuống dòng khi hẹp */ .chan-trang__dang-ky { display: flex; flex-wrap: wrap; gap: var(--s-2); max-inline-size: 320px; } .chan-trang__dang-ky .o { flex: 1 1 180px; min-inline-size: 0; } .chan-trang__phien-ban { color: var(--text-3); font-family: var(--font-mono); } .chan-trang__trang-thai { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-3); } .chan-trang__trang-thai::before { content: ''; inline-size: var(--s-2); block-size: var(--s-2); border-radius: var(--r-full); background: var(--ok-1); } .chan-trang__trang-thai--loi::before { background: var(--err-1); } /* website: nền hộp, nhiều cột liên kết */ .chan-trang--website { background: var(--surface); } .chan-trang--website .chan-trang__luoi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* cms: gọn 1 dải — chỉ bản quyền + phiên bản + trạng thái hệ */ .chan-trang--cms { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-2) var(--s-4); color: var(--text-3); } .chan-trang--cms .chan-trang__dong { flex: 1 1 auto; border-top: 0; padding: 0; justify-content: flex-end; } /* landing: đậm — nền --app-deep. Mực PHẢI là `--app-deep-chu*` (LUÔN sáng): 8/25 bảng màu là hệ màu sáng nên `--app-contrast` = #14141C (đúng cho `--app`, SAI cho `--app-deep` ⇒ 22 chỗ/hệ chìm, sự cố 10/10/2026). Khoá luôn token mực cho con cháu — một chỗ khai. */ .chan-trang--landing { background: var(--app-deep); border-top: 0; color: var(--app-deep-chu); --text: var(--app-deep-chu); --text-2: var(--app-deep-chu-2); --text-3: var(--app-deep-chu-3); --link: var(--app-deep-chu); --text-nghich: var(--app-deep); } .chan-trang--landing .chan-trang__luoi { padding-block: var(--s-8); } .chan-trang--landing .chan-trang__tieude { color: var(--app-deep-chu); } .chan-trang--landing .chan-trang__lien-ket a { color: inherit; opacity: .82; } .chan-trang--landing .chan-trang__lien-ket a:hover { opacity: 1; color: inherit; } .chan-trang--landing .chan-trang__dong { border-top: var(--v-mong) solid var(--app-border); } .chan-trang--landing .chan-trang__mang a { color: var(--app-deep-chu); } .chan-trang--landing .chan-trang__mang a:hover { background: var(--app-deep-chu); color: var(--app-deep); } /* ========================================================================== MÀN NHỎ — dưới --bp-tablet (1024px; var() không dùng được trong @media) ========================================================================== */ @media (max-width: 1024px) { .chia { flex-direction: column; } .chia__thanh, .chia__tay { display: none; } /* màn nhỏ: xếp dọc, bỏ thanh kéo */ .chia__vung { flex: 1 1 auto; } .chia--thu > .chia__vung:last-child { flex: 1 1 auto; inline-size: auto; } .gantt__ten { inline-size: calc(var(--s-12) * 2); } .chan-trang--cms { justify-content: center; } .huong-dan--noi { inset: auto var(--s-4) var(--s-4) var(--s-4); max-inline-size: none; } } @media (prefers-reduced-motion: reduce) { .chia__thanh, .chia__tay, .chan-trang__mang a { transition: none; } .huong-dan__moc { animation: none; } } /* ── thanh-phan/bo-sung-c.css ── */ /* ========================================================================== THÀNH PHẦN · NHÓM BỔ SUNG C · thanh-phan/bo-sung-c.css Sáu thành phần mượn THIẾT KẾ từ Ant Design, viết bằng kho iAi: Rỗng · Kết quả · Mô tả nhãn–giá trị · Thanh tiến trình · Chuyển hai cột · Ghim KHÔNG nhúng Ant Design. Ant Design v5 là thư viện React + CSS-in-JS (SeedToken/AliasToken riêng) ⇒ nhúng là sinh NGUỒN TOKEN THỨ HAI, khoá hệ vào React, và đánh nhau với Tailwind ở 5 hệ đang dùng. Xem bao-cao/phan-tich-ant-design-20261008.md. Tệp này là BẢN DỊCH THIẾT KẾ. Chỉ gọi TÊN TOKEN. CẤM màu cứng / cỡ tuyệt đối (cổng kiểm L1·L2·L3). Không viết lại thứ đã có: nút `.n`, ô nhập `.o`, nút phụ `.ch`, chip `.he-tag`, biểu tượng `.sv`, khung xương `.khung-xuong`, đang tải `.dang-tai`, icon `.ic-*` (assets/icon.svg) — các khối dưới đây DÙNG LẠI. ========================================================================== */ /* ========================================================================== 1. RỖNG (empty) — danh sách/bảng không có dữ liệu Trạng thái màn, KHÔNG phải khung xương (`.khung-xuong` = giữ chỗ chờ nội dung). Phân biệt: RỖNG = chắc chắn không có gì; KHUNG XƯƠNG = đang chờ.

    Chưa có phiếu nào

    Tạo phiếu đầu tiên để bắt đầu.

    Tạo phiếu
    ========================================================================== */ .rong { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-9) var(--s-5); text-align: center; color: var(--text-3); min-width: 0; } /* bản gọn cho ô nhỏ (trong bảng, trong thẻ) */ .rong--gon { padding: var(--s-6) var(--s-4); gap: var(--s-2); } .rong__bieu { inline-size: calc(var(--s-9) * 1.5); block-size: calc(var(--s-9) * 1.5); color: var(--text-4); fill: none; } .rong--gon .rong__bieu { inline-size: var(--s-8); block-size: var(--s-8); } .rong__tieude { margin: 0; color: var(--text); font-weight: var(--fw-dam); font-size: var(--fs-base); } .rong__goi-y { margin: 0; max-inline-size: 42ch; color: var(--text-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); line-height: 1.5; } .rong__thao-tac { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; } /* ========================================================================== 2. KẾT QUẢ (result) — màn sau một hành động Bốn sắc thái: xong · lỗi · cảnh báo · thông tin. Màu KHÔNG phải tín hiệu duy nhất — luôn kèm biểu tượng + chữ (WCAG 1.4.1).

    Đã gửi duyệt

    Phiếu #1284 đã tới người duyệt.

    …
    ========================================================================== */ .ket-qua { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-9) var(--s-5); text-align: center; /* mặc định = thông tin */ --kq-nhat: var(--info-1); --kq-chuan: var(--info-2); --kq-sau: var(--info-3); } .ket-qua--xong { --kq-nhat: var(--ok-1); --kq-chuan: var(--ok-2); --kq-sau: var(--ok-3); } .ket-qua--loi { --kq-nhat: var(--err-1); --kq-chuan: var(--err-2); --kq-sau: var(--err-3); } .ket-qua--canh-bao { --kq-nhat: var(--warn-1); --kq-chuan: var(--warn-2); --kq-sau: var(--warn-3); } .ket-qua__bieu { inline-size: calc(var(--s-10) * 1.6); block-size: calc(var(--s-10) * 1.6); color: var(--kq-chuan); fill: none; } /* vòng tròn nhạt phía sau biểu tượng — thuần CSS, không ảnh */ .ket-qua__bieu-khung { display: grid; place-items: center; inline-size: calc(var(--s-10) * 2.4); block-size: calc(var(--s-10) * 2.4); border-radius: var(--r-full); background: var(--kq-nhat); } .ket-qua__tieude { margin: 0; color: var(--text); font-weight: var(--fw-dam); font-size: var(--fs-h3); } .ket-qua__mo-ta { margin: 0; max-inline-size: 46ch; color: var(--text-3); font-size: var(--fs-base); line-height: 1.55; } /* khối chi tiết lỗi (mã lỗi, dấu vết) — nền nhạt theo sắc thái */ .ket-qua__chi-tiet { inline-size: 100%; max-inline-size: 52ch; margin-block-start: var(--s-1); padding: var(--s-3) var(--s-4); text-align: start; background: var(--kq-nhat); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); color: var(--kq-sau); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); line-height: 1.6; overflow-wrap: anywhere; } .ket-qua__thao-tac { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; } /* ========================================================================== 3. MÔ TẢ NHÃN–GIÁ TRỊ (descriptions) — bảng chi tiết hồ sơ Dựng trên
    : 0 thẻ thừa, ngữ nghĩa đúng cho trình đọc màn hình.
    Mã phiếu
    #1284
    ========================================================================== */ .mo-ta { display: grid; gap: var(--s-3) var(--s-5); margin: 0; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); /* mặc định 2 cột */ } .mo-ta--mot-cot { grid-template-columns: minmax(0, 1fr); } .mo-ta--ngang { grid-template-columns: repeat(var(--mo-ta-cot, 3), minmax(0, 1fr)); } .mo-ta__muc { display: grid; gap: var(--s-1); min-width: 0; padding-block-end: var(--s-2); border-block-end: var(--v-mong) solid var(--border); } .mo-ta__nhan { color: var(--text-3); font-weight: var(--fw-thuong); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .mo-ta__gia { margin: 0; color: var(--text); overflow-wrap: anywhere; } .mo-ta--dam .mo-ta__gia { font-weight: var(--fw-dam); } /* ô chiếm cả hàng (ghi chú dài) */ .mo-ta__muc--rong { grid-column: 1 / -1; } /* bản gọn cho ngăn kéo hẹp */ .mo-ta--gon { gap: var(--s-2) var(--s-3); } .mo-ta--gon .mo-ta__muc { padding-block-end: var(--s-1); } @media (max-width: 640px) { .mo-ta, .mo-ta--ngang { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 4. THANH TIẾN TRÌNH (progress) — nạp tệp · đồng bộ · tác vụ nền Dùng của NỀN TẢNG (rung 4 của thang: tính năng sẵn có thắng JS). Thanh: `.tien-trinh__thanh`. Vòng: `.tien-trinh--vong` bằng conic-gradient.
    Đang tải tệp… 62% 62%
    ========================================================================== */ .tien-trinh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); min-width: 0; } .tien-trinh__nhan { grid-column: 1 / -1; color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .tien-trinh__so { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .tien-trinh__thanh { appearance: none; inline-size: 100%; block-size: var(--s-2); border: 0; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; display: block; } /* WebKit: thanh chạy + rãnh */ .tien-trinh__thanh::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-full); } .tien-trinh__thanh::-webkit-progress-value { background: var(--app); border-radius: var(--r-full); transition: inline-size var(--t-thuong) var(--ease); } /* Firefox */ .tien-trinh__thanh::-moz-progress-bar { background: var(--app); border-radius: var(--r-full); } /* sắc thái */ .tien-trinh--xong .tien-trinh__thanh::-webkit-progress-value { background: var(--ok-2); } .tien-trinh--xong .tien-trinh__thanh::-moz-progress-bar { background: var(--ok-2); } .tien-trinh--loi .tien-trinh__thanh::-webkit-progress-value { background: var(--err-2); } .tien-trinh--loi .tien-trinh__thanh::-moz-progress-bar { background: var(--err-2); } /* thanh mảnh, dùng trong thẻ tệp */ .tien-trinh--manh .tien-trinh__thanh { block-size: var(--v-nhan); } /* --- bản VÒNG: conic-gradient, không JS, không thư viện --- */ .tien-trinh--vong { grid-template-columns: auto minmax(0, 1fr); justify-items: start; } .tien-trinh__vong { --phan-tram: 62; display: grid; place-items: center; position: relative; inline-size: calc(var(--s-9) * 1.6); block-size: calc(var(--s-9) * 1.6); border-radius: var(--r-full); background: conic-gradient(var(--app) calc(var(--phan-tram) * 1%), var(--surface-2) 0); } .tien-trinh__vong::before { content: ''; position: absolute; inset: var(--s-2); border-radius: var(--r-full); background: var(--surface); } .tien-trinh__vong > * { position: relative; } /* đang chạy mà KHÔNG biết bao nhiêu → thanh chạy qua lại (KHÔNG bịa % giả) */ .tien-trinh__thanh--chay { position: relative; background: var(--surface-2); } .tien-trinh__thanh--chay::after { content: ''; position: absolute; inset-block: 0; inline-size: 34%; border-radius: var(--r-full); background: var(--app); animation: tt-chay calc(var(--t-cham) * 8) var(--ease) infinite; } @keyframes tt-chay { 0% { inset-inline-start: -34%; } 100% { inset-inline-start: 100%; } } /* Tôn trọng lựa chọn giảm chuyển động của hệ điều hành */ @media (prefers-reduced-motion: reduce) { .tien-trinh__thanh--chay::after { animation: none; inset-inline-start: 0; inline-size: 100%; } .tien-trinh__thanh::-webkit-progress-value { transition: none; } } /* ========================================================================== 5. CHUYỂN HAI CỘT (transfer) — chọn trái sang phải: gán quyền, chọn thành viên Dùng LẠI `.o-tim` (ô tìm), ô tick nền tảng, `.rong` (khi một cột trống). Di chuyển mục là việc của JS: đọc `input:checked` rồi chuyển node.
    …
    …
    ========================================================================== */ .chuyen { display: grid; align-items: stretch; min-width: 0; gap: var(--s-3); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .chuyen__cot { display: grid; align-content: start; min-width: 0; background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--radius-control); overflow: hidden; } .chuyen__dau { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface-2); border-block-end: var(--v-mong) solid var(--border); color: var(--text-2); font-weight: var(--fw-vua); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .chuyen__tim { padding: var(--s-2) var(--s-3); border-block-end: var(--v-mong) solid var(--border); } .chuyen__danh-sach { margin: 0; padding: var(--s-1); list-style: none; block-size: calc(var(--s-10) * 4.2); overflow: auto; } .chuyen__muc { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2); border-radius: var(--r-sm); cursor: pointer; min-block-size: var(--control-h); } .chuyen__muc:hover { background: var(--surface-hover); } .chuyen__muc--chon { background: var(--app-soft); color: var(--app-chu); } .chuyen__muc > .chuyen__nhan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chuyen__muc { cursor: pointer; } /* [hidden] phải THẮNG `display: flex` của .chuyen__muc — thiếu luật này ô tìm lọc mà mục không ẩn */ .chuyen__muc[hidden] { display: none; } /* "Bỏ chọn" ở đầu cột: chỉ tạo dáng bấm được, hành vi do tuy-chon.js */ .chuyen__bo-chon { cursor: pointer; padding-inline: var(--s-1); border-radius: var(--radius-control); } .chuyen__bo-chon:hover, .chuyen__bo-chon:focus-visible { color: var(--app-chu); text-decoration: underline; } .chuyen__giua { display: grid; align-content: center; gap: var(--s-2); } /* trên màn hẹp: xếp dọc, mũi tên thành nút rộng */ @media (max-width: 720px) { .chuyen { grid-template-columns: minmax(0, 1fr); } .chuyen__giua { grid-auto-flow: column; justify-content: center; } } /* ========================================================================== 6. GHIM (affix) — giữ khối đứng yên khi cuộn `position: sticky` của NỀN TẢNG (rung 4) — KHÔNG JS, KHÔNG thư viện. Cần tổ tiên KHÔNG có `overflow: hidden/auto`; nếu có, ghim im lặng mất tác dụng.
    …
    ========================================================================== */ .ghim { position: relative; min-width: 0; } .ghim__ruot { position: sticky; inset-block-start: var(--ghim-cach, 0); z-index: 2; background: var(--bg); min-width: 0; } /* ghim đáy khung (thanh hành động của hộp thoại dài) */ .ghim--duoi .ghim__ruot { inset-block-start: auto; inset-block-end: var(--ghim-cach, 0); } /* ghim cột trong bảng rộng: đi cùng `.cuon-ngang` của khung chứa */ .ghim--trai .ghim__ruot { inset-inline-start: var(--ghim-cach, 0); inset-block-start: auto; z-index: 3; } /* đổ bóng khi đã ghim — CHỈ khi cuộn (JS gắn `.ghim--dinh`; không JS thì đứng yên, không bóng) */ .ghim--dinh .ghim__ruot { background: var(--surface); box-shadow: var(--shadow-2); border-radius: var(--radius-control); } /* ── thanh-phan/website.css ── */ /* ========================================================================== T3 — TẦNG WEBSITE / LANDING · thanh-phan/website.css VÌ SAO ĐỜI TỆP NÀY: tầng mặt tiền công khai trước đây ở `tokens/web.css`, mà `tokens/` KHÔNG được nối vào `iai-ds.css` ⇒ hệ bên ngoài nạp MỘT thẻ chuẩn `/iai-ds.css` thì **không có lớp nào** để dựng website/landing; mỗi hệ tự chế (đúng gốc "app nào cũng làm sai"). Nay tầng này nằm trong `thanh-phan/`, được nối ở `thanh-phan.css` nên đi theo mọi bản phát hành. ĐỐI TƯỢNG: trang CÔNG KHAI — website giới thiệu, landing sản phẩm, trang đăng nhập/đăng ký, trang lỗi. Màn vận hành KHÔNG nạp tầng này (dùng `.xuong`). PHONG CÁCH «MẠCH LẠC» (chốt 13/10/2026 cùng nhóm theme Bảo hiểm): · Thang chữ mặt tiền LỚN (hero 34–60px) — gốc cũ là thang chữ console 24,75px. · Kẻ ô mảnh, tương phản cao, ít trang trí. Bóng sắc, không loe. · Mọi màu SUY TỪ TOKEN (`--app*`) ⇒ tự đúng cả 27 bộ màu, không khai màu hệ nào. · Khối nền ngược (chân trang, dải cam kết) phải KHOÁ LẠI TOKEN MỰC trong phạm vi nó — CẤM ghim mực từng phần tử con (đã trả giá: `.gc` chìm 1,13:1). LUẬT: CẤM số màu cứng · CẤM emoji · tiêu đề có dấu cần `line-height` >= 1,35 · mọi `transition` phải có nhánh `prefers-reduced-motion`. ========================================================================== */ /* ======================= 1. THANG CHỮ MẶT TIỀN =========================== Dùng rem/clamp: cỡ chữ khoá theo gốc trình duyệt nên người chỉnh cỡ chữ mặc định vẫn đọc được. Cổng kiểm chặn px tuyệt đối. */ .tieu-de-lon { font-size: clamp(2.125rem, 4.6vw, 3.75rem); /* lh 1.06 cắt dấu tiếng Việt (ệ/ộ/ằ) — đo thật: ô chữ vượt ô control 6,4px trên + 6,0px dưới. Chữ có dấu cần chỗ cho dấu cao và dấu nặng. */ line-height: 1.35; letter-spacing: -.032em; font-weight: 800; margin-top: var(--s-4); max-width: 20ch; } /* Từ 1600px nguồn rộng, ghim cỡ để hero không phình vô hạn */ @media (min-width: 1600px) { .tieu-de-lon { font-size: 3.75rem; } } .dau-muc h2 { font-size: clamp(1.5rem, 2.5vw, 2.125rem); line-height: 1.3; letter-spacing: -.024em; font-weight: 800; margin-top: var(--s-3); } .khoi h3, .the h3 { font-weight: 700; letter-spacing: -.012em; } .phu-de-mo { font-size: var(--fs-h3); line-height: var(--lh-thoang); } .dau-muc { max-width: 58ch; } .dau-muc--giua { margin-inline: auto; text-align: center; } /* Số liệu chứng minh: số to khoẻ, tô MÀU HỆ để nổi hẳn */ .dam-tin__so { font-size: clamp(1.75rem, 2.8vw, 2.375rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--app-chu); } .dam-tin__ten { text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } /* Dải số liệu chứng minh: 3 khối có VÁCH NGĂN DỌC, không rời rạc. Trước là 3 cụm chữ trôi nổi trên một đường kẻ ⇒ đọc ra rời. CẤM thêm vạch màu trên đầu khối — đã thử và bị đọc là "rời rạc, không đóng góp thông tin". */ .dam-tin { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin-top: var(--s-7); padding-top: var(--s-6); border-top: var(--v-mong) solid var(--border); } .dam-tin__o { padding-inline: var(--s-5); border-left: var(--v-mong) solid var(--border); } .dam-tin__o:first-child { padding-left: 0; border-left: 0; } @media (max-width: 700px) { .dam-tin__o { padding-inline: 0; border-left: 0; padding-block: var(--s-4); border-top: var(--v-mong) solid var(--border); } .dam-tin__o:first-child { border-top: 0; padding-top: 0; } } /* ======================= 2. PHÔNG MẶT TIỀN =============================== PHẠM VI HẸP CÓ CHỦ Ý: chọn `[data-mat-do='marketing']` (0-1-0), CẤM dùng `:root`. Vì tệp này nay nằm TRONG `thanh-phan.css` nên MỌI màn đều nạp nó; khai ở `:root` là đổi phông cả màn vận hành — hồi quy im lặng. Mật độ `marketing` chính là mặt tiền công khai (mm-01 · mm-09 · mm-11); màn console/nghiệp vụ không khai mật độ đó nên giữ nguyên phông của hệ. Người dùng tự chọn bộ chữ → `html[data-chu]` (0-1-1) vẫn thắng tệp này: đúng ý. */ [data-mat-do='marketing'] { --font-display: 'Bai Jamjuree', 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Noto Sans', sans-serif; --font-ui: 'Bai Jamjuree', 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Noto Sans', sans-serif; } /* ======================= 3. KHỐI MỞ ĐẦU ================================== Một vùng loang rất nhạt ở góc trên để nền không chết cứng. CẤM thêm lưới nền hay dải màu ngang (đã thử, bị đọc là "cố tỏ ra hiện đại" và "gây nhiễu"). */ .mo-dau { position: relative; overflow: hidden; background: radial-gradient(58vw 46vw at 90% -18%, color-mix(in srgb, var(--app) 12%, transparent), transparent 66%), var(--surface); border-bottom: var(--v-mong) solid var(--border); } .mo-dau > * { position: relative; z-index: var(--z-noi); } /* Hai cột: chữ bên trái, ảnh/cửa sổ bên phải. Hẹp thì dồn một cột. */ .mo-dau__luoi { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-8); align-items: center; } @media (max-width: 1000px) { .mo-dau__luoi { grid-template-columns: minmax(0, 1fr); } } /* Nút CTA chính trong khối mở đầu: to hơn + bóng nổi hẳn */ .mo-dau .nut-mo .n--c, .mo-dau .nut-mo .n--k { font-weight: 700; } .mo-dau .nut-mo .n--c { box-shadow: var(--sh-2), inset 0 1px 0 color-mix(in srgb, var(--n-0) 40%, transparent); } .mo-dau .nut-mo .n--c:hover { box-shadow: var(--sh-3), inset 0 1px 0 color-mix(in srgb, var(--n-0) 40%, transparent); } /* ======================= 4. ĐẦU TRANG: kính mờ ============================ */ .dau { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 var(--v-mong) 0 var(--border); } .menu-day a { font-weight: 600; padding: var(--s-2) var(--s-3); border-bottom: 0; border-radius: var(--r-full); transition: background var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease); } .menu-day a:hover { background: var(--app-soft); color: var(--app-chu); } .menu-day a[aria-current], .menu-day a.dang-chon { background: var(--app-soft); color: var(--app-chu); font-weight: 700; } /* ======================= 5. KHỐI NỘI DUNG ================================ Đo thật 05/10/2026: `.khoi--nen` cũ chênh nền trắng 5 đơn vị RGB ⇒ ~1,02:1, mắt KHÔNG thấy ("giữa các section không rõ ràng về không gian màu sắc"). Nay dải nền nhuộm màu HỆ nên vừa rõ tầng, vừa thêm sắc mà không khai màu nào. */ .khoi--nen { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 7%, var(--surface-2)), color-mix(in srgb, var(--app) 3%, var(--surface-2))); border-block: var(--v-mong) solid color-mix(in srgb, var(--app) 18%, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-0) 60%, transparent); } /* Khối đảo: nền ĐẬM màu hệ. KHOÁ TOKEN MỰC Ở ĐÂY (một chỗ, hết cả cây). */ .khoi--dam { --text: var(--app-deep-chu); --text-2: var(--app-deep-chu-2); --text-3: var(--app-deep-chu-3); --text-4: color-mix(in srgb, var(--n-0) 78%, var(--app-deep)); --link: var(--app-deep-chu); --link-hover: var(--app-deep-chu); --text-nghich: var(--app-deep); --border: color-mix(in srgb, var(--app-deep-chu) 22%, transparent); --border-manh: color-mix(in srgb, var(--app-deep-chu) 30%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--app) 74%, rgb(0 0 0)) 0%, var(--app-deep) 58%, color-mix(in srgb, var(--app-deep) 76%, rgb(0 0 0)) 100%); color: var(--text); } /* Thẻ: bo lớn + viền rõ + bóng nét (Swiss dùng bóng sắc, không loe) */ .luoi-the > .the { border-radius: var(--r-xl); padding: var(--s-5); transition: transform var(--t-thuong) var(--ease), box-shadow var(--t-thuong) var(--ease), border-color var(--t-thuong) var(--ease); } .luoi-the > .the:hover { transform: translateY(calc(var(--s-1) * -1)); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--app) 30%, var(--border)); } /* Ô biểu tượng hệ: vòng màu lấy từ currentColor — chính là màu của hệ đó */ .the-he__bieu { border-radius: var(--r-lg); box-shadow: 0 0 0 var(--v-mong) color-mix(in srgb, currentColor 22%, transparent); transition: transform var(--t-thuong) var(--ease); } .the-he:hover .the-he__bieu { transform: translateY(calc(var(--s-1) * -1)); } .the-he__ten { font-weight: 700; } .ve-nang-luc { border-radius: var(--r-xl); } /* ======================= 6. CỬA SỔ GIẢ LẬP =============================== */ .xem-he { border-radius: var(--r-xl); box-shadow: var(--sh-4); border-color: color-mix(in srgb, var(--app) 20%, var(--border)); } .xem-he__cham i:nth-child(1) { background: var(--vai-1); } .xem-he__cham i:nth-child(2) { background: var(--vai-3); } .xem-he__cham i:nth-child(3) { background: var(--vai-4); } .xem-he__dau, .xem-he__chan { background: var(--surface-2); } .xem-he__ten { font-weight: 700; letter-spacing: .01em; } .dong-he { padding-block: var(--s-3); } .dong-he__so { font-size: var(--fs-caption); font-weight: 600; } .xem-he__chan { font-size: var(--fs-caption); } /* ======================= 7. CHÂN TRANG =================================== GỐC RỄ (Sếp chửi 09/10/2026 "màu chữ gần đồng màu với màu nền bố ai nhìn được"): `.chan` chỉ khai `background`, không khoá token MỰC ⇒ chữ bên trong ăn `--text*` của theme SÁNG ⇒ vô hình trên nền đậm. Đo thật: 1,13:1. LUẬT: khối nền NGƯỢC phải khoá LẠI toàn bộ token mực trong phạm vi nó; con cháu cứ dùng `var(--text*)` là tự ra màu đối lập. Một chỗ khai, hết cây. */ .chan { --text: var(--app-deep-chu); --text-2: var(--app-deep-chu-2); --text-3: var(--app-deep-chu-3); --text-4: color-mix(in srgb, var(--n-0) 78%, var(--app-deep)); --link: var(--app-deep-chu); --link-hover: var(--app-deep-chu); --text-nghich: var(--app-deep); --border: color-mix(in srgb, var(--app-deep-chu) 22%, transparent); --border-manh: color-mix(in srgb, var(--app-deep-chu) 30%, transparent); background: radial-gradient(52vw 52vw at 92% -30%, color-mix(in srgb, var(--app) 30%, transparent), transparent 64%), var(--app-deep); color: var(--text); } .chan .lb, .chan .nho { color: var(--text-2); } /* ======================= 8. DẢI LOGO ĐỐI TÁC ============================ */ .dai-logo { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s-4); align-items: center; } .dai-logo__o { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: calc(var(--control-h) * 1.5); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); border: var(--v-mong) solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 700; letter-spacing: .02em; } .khoi--dam .dai-logo__o, .chan .dai-logo__o { background: color-mix(in srgb, var(--app-deep-chu) 8%, transparent); border-color: color-mix(in srgb, var(--app-deep-chu) 26%, transparent); color: var(--app-deep-chu); } /* ====================== 9. DẢI CAM KẾT SỐ ================================ */ .cam-ket { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-6); } .cam-ket__o { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .cam-ket__so { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.25; color: var(--app-chu); } .khoi--dam .cam-ket__so, .chan .cam-ket__so { color: var(--app-deep-chu); } .cam-ket__ten { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--text-2); } /* ====================== 10. THẺ TÍNH NĂNG ================================ */ .the-tinh-nang { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: var(--v-mong) solid var(--border); transition: border-color var(--t-thuong) var(--ease), box-shadow var(--t-thuong) var(--ease); } .the-tinh-nang:hover { border-color: color-mix(in srgb, var(--app) 34%, var(--border)); box-shadow: var(--sh-2); } .the-tinh-nang__bieu { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--control-h) * 1.25); height: calc(var(--control-h) * 1.25); border-radius: var(--r-lg); flex: none; background: var(--app-soft); color: var(--app-chu); } .the-tinh-nang__ten { font-weight: 700; margin: 0; } .the-tinh-nang__chu { margin: 0; color: var(--text-2); } .the-tinh-nang__ds { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-caption); } .the-tinh-nang__ds li { display: flex; align-items: flex-start; gap: var(--s-2); } .the-tinh-nang__ds .sv { flex: none; color: var(--app-chu); margin-top: calc(var(--fs-caption) * .18); } /* ====================== 11. BẢNG GIÁ ===================================== */ .bang-gia { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--s-5); align-items: stretch; } .goi { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-6); border-radius: var(--r-xl); background: var(--surface); border: var(--v-mong) solid var(--border); transition: transform var(--t-thuong) var(--ease), box-shadow var(--t-thuong) var(--ease); } .goi:hover { transform: translateY(calc(var(--s-1) * -1)); box-shadow: var(--sh-3); } /* Gói nổi bật: nhấc lên bằng VIỀN + NHÃN, CẤM phủ nền màu lên vùng chữ (bài học: bóng dọc làm sáng đỉnh nút, palette sát ngưỡng AA ⇒ chìm 200/200). */ .goi--chinh { border-color: var(--app); border-width: 2px; box-shadow: 0 0 0 var(--v-mong) color-mix(in srgb, var(--app) 26%, transparent), var(--sh-3); } .goi__dau { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .goi__ten { font-weight: 700; margin: 0; } .goi__nhan { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: var(--s-1) var(--s-3); border-radius: var(--r-full); background: var(--app-soft); color: var(--app-chu); } .goi__gia { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .goi__so { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; } .goi__don { color: var(--text-3); font-size: var(--fs-caption); } .goi__ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); color: var(--text-2); } .goi__ds li { display: flex; align-items: flex-start; gap: var(--s-2); } .goi__ds .sv { flex: none; color: var(--app-chu); margin-top: calc(var(--fs-base) * .22); } .goi__ds .khoa { color: var(--text-3); } .goi__ds .khoa .sv { color: var(--text-3); } .goi__chan { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); } .khoi--dam .goi { background: color-mix(in srgb, var(--app-deep-chu) 8%, transparent); border-color: color-mix(in srgb, var(--app-deep-chu) 22%, transparent); } /* ====================== 12. ĐÁNH GIÁ + LỜI CHỨNG ========================= */ .danh-gia { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--app-chu); } .khoi--dam .danh-gia, .chan .danh-gia { color: var(--app-deep-chu); } .danh-gia__so { font-weight: 700; color: var(--text-2); margin-left: var(--s-2); font-size: var(--fs-caption); } .loi-chung { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); border: var(--v-mong) solid var(--border); } .loi-chung__chu { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-thoang); } .loi-chung__nguoi { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: var(--v-mong) solid var(--border); } .loi-chung__ten { font-weight: 700; } .loi-chung__vai { color: var(--text-3); font-size: var(--fs-caption); } /* ====================== 13. KHỐI LỜI MỜI (CTA) =========================== */ .moi { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; } .moi__chu { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; } .moi__chu h2 { margin: 0; } .moi__nut { display: flex; gap: var(--s-3); flex-wrap: wrap; } /* ====================== 14. HỎI ĐÁP (FAQ) ================================ */ .hoi-dap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .hoi-dap .gg { background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); } .hoi-dap .gg + .gg { margin-top: var(--s-2); } /* ====================== 15. THẺ BÀI VIẾT ================================= */ .the-bai { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: var(--v-mong) solid var(--border); transition: border-color var(--t-thuong) var(--ease), box-shadow var(--t-thuong) var(--ease); } .the-bai:hover { border-color: color-mix(in srgb, var(--app) 32%, var(--border)); box-shadow: var(--sh-2); } .the-bai__anh { aspect-ratio: var(--bp-16-9); width: 100%; object-fit: cover; display: block; background: var(--app-soft); } .the-bai__than { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--s-5) var(--s-5); min-width: 0; } .the-bai__meta { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-3); } .the-bai__ten { font-weight: 700; margin: 0; } .the-bai__chu { margin: 0; color: var(--text-2); } /* ====================== 16. THANH TIN CHẠY =============================== */ .thanh-tin { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-block: var(--v-mong) solid var(--border); background: var(--app-soft); color: var(--app-chu); overflow: hidden; } .thanh-tin__nhan { flex: none; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .thanh-tin__noi { display: flex; gap: var(--s-6); min-width: 0; overflow-x: auto; scrollbar-width: none; } .thanh-tin__noi::-webkit-scrollbar { display: none; } .thanh-tin__muc { white-space: nowrap; font-size: var(--fs-caption); } /* ====================== 17. CHÂN TRANG =================================== ĐÃ CÓ SẴN TRONG KHO — CẤM làm lại: `thanh-phan/bo-sung-b.css` lo chân trang (`.chan-trang` + `__luoi` `__cot` `__tieude` `__lien-ket` `__dong` `__mang` `__logo` `__dang-ky` `__phien-ban` `__trang-thai`) với 3 biến thể: · `--website` nền `--surface`, lưới cột hẹp 150px ← WEBSITE CÔNG KHAI · `--landing` nền ĐẬM `--app-deep`, khoá token mực sẵn · `--cms` gọn một dải Tầng này CỐ Ý không khai thêm `.chan-*` nào. /* ====================== 18. TỆP / ẢNH TRONG KHỐI NỀN ĐẬM ================= GỐC ĐÃ ĐO (13/10/2026): `.the-cam-ket` khoá mực thành `--app-deep-chu` (trắng) cho con cháu, nhưng `.tep` của kho tự khai `background: var(--surface)` = TRẮNG ⇒ `.tep__ten` ra chữ trắng trên nền trắng = **1,03:1**, vô hình. Cổng soi-tuong-phan bắt đúng — KHÔNG phải báo oan, CẤM miễn. Chữa một chỗ: trong khối nền đậm, tệp/ảnh chuyển sang kiểu KÍNH (nền mờ sáng) và TRẢ LẠI bộ token mực sáng cho chính nó ⇒ con nào thêm sau cũng tự đúng. */ .khoi--dam .tep, .chan .tep, .the-cam-ket .tep { background: color-mix(in srgb, var(--app-deep-chu) 10%, transparent); border-color: color-mix(in srgb, var(--app-deep-chu) 26%, transparent); --text: var(--app-deep-chu); --text-2: var(--app-deep-chu-2); --text-3: var(--app-deep-chu-3); --border: color-mix(in srgb, var(--app-deep-chu) 26%, transparent); } .khoi--dam .tep__ten, .chan .tep__ten, .the-cam-ket .tep__ten, .khoi--dam .tep__meta, .chan .tep__meta, .the-cam-ket .tep__meta { color: var(--app-deep-chu); } .khoi--dam .tep__meta, .chan .tep__meta, .the-cam-ket .tep__meta { opacity: .8; } /* Xem trước tệp: khung bên trong cũng phải theo nền đậm */ .khoi--dam .xem-truoc, .the-cam-ket .xem-truoc { --text: var(--app-deep-chu); --text-2: var(--app-deep-chu-2); --text-3: var(--app-deep-chu-3); border-color: color-mix(in srgb, var(--app-deep-chu) 26%, transparent); } .khoi--dam .xem-truoc__khung, .the-cam-ket .xem-truoc__khung { background: color-mix(in srgb, var(--app-deep-chu) 10%, transparent); } /* ====================== 19. BIỂU MẪU TRÊN NỀN ĐẬM ======================= Biểu mẫu nằm TRONG khối nền đậm: hộp trắng nổi lên, mọi nhãn/ô bên trong vẫn theo theme SÁNG ⇒ trả lại token mực cho chính hộp đó. */ .hop-sang { --text: var(--n-12); --text-2: var(--n-8); --text-3: var(--n-4); --border: var(--n-4); --surface: var(--n-0); --surface-2: var(--n-0); background: var(--n-0); color: var(--n-12); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-3); } .hop-sang .lb, .hop-sang .nho { color: var(--n-8); } /* ====================== 19. TƯƠNG THÍCH MÀN HẸP ========================== */ @media (max-width: 760px) { .moi { flex-direction: column; align-items: flex-start; } .moi__nut { width: 100%; } .moi__nut .n { flex: 1 1 auto; justify-content: center; } } /* ====================== 20. GIẢM CHUYỂN ĐỘNG (cổng L5) =================== */ @media (prefers-reduced-motion: reduce) { .luoi-the > .the, .the-he__bieu, .the-tinh-nang, .the-tinh-nang:hover, .goi, .goi:hover, .the-bai, .menu-day a { transition: none; } .luoi-the > .the:hover, .the-he:hover .the-he__bieu, .goi:hover { transform: none; } } /* ------------------------------- KHUNG TRƯNG BÀY ------------------------------- */ .tp { border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--space-card); margin-bottom: var(--space-block); } .tp h3 { margin: var(--s-4) 0 var(--s-3); } .tp > h3:first-child { margin-top: 0; } .gc { margin: var(--s-3) 0 0; padding-top: var(--s-2); border-top: var(--v-mong) dashed var(--border); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .rw { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .cn { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; min-width: 0; } /* thiếu: cột biểu mẫu không co được ⇒ đẩy tràn lưới màn hẹp */ .lb { color: var(--text-2); font-weight: var(--fw-vua); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } .sv { width: calc(var(--fs-base) * 1.05); height: calc(var(--fs-base) * 1.05); flex: none; } /* ---------------------------------- NÚT ---------------------------------- */ .n { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: var(--control-h); padding-inline: var(--s-4); border: var(--v-mong) solid var(--border-manh); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-vua); line-height: 1; cursor: pointer; text-decoration: none; /* nút hay viết bằng — mặc định gạch chân */ /* Sếp: "control thô cứng". Gốc: viền 0,8px như sợi tóc + bóng alpha .05 gần như không có ⇒ phẳng lì, cạnh sắc. Nay thêm vệt sáng mảnh ở mép trên (inset) để nút "nổi" khỏi mặt phẳng mà không phải tăng bóng nặng. */ box-shadow: var(--sh-1), inset 0 1px 0 color-mix(in srgb, var(--n-0) 65%, transparent); transition: background var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease); } .n:hover, .n.hv { background: var(--control-hover); } .n:active, .n.nh { background: var(--control-active); } .n:focus-visible, .n.tf { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; } .n:disabled, .n.vo { opacity: var(--mo-4); cursor: not-allowed; } .n--c { background: var(--app); border-color: var(--app); color: var(--app-contrast); } .n--c:hover, .n--c.hv, .n--c:active, .n--c.nh { background: var(--app-deep); color: var(--app-deep-chu); } .n--p { background: var(--app-soft); border-color: var(--app-border); color: var(--app-chu); } .n--p:hover, .n--p.hv { background: var(--app-border); } .n--p:active, .n--p.nh { background: var(--app-light); } .n--t { background: transparent; color: var(--text-2); } .n--t:hover, .n--t.hv { background: var(--surface-hover); color: var(--text); } .n--g { background: var(--err-nen); border-color: var(--err-nen); color: var(--err-nghich); } .n--g:hover, .n--g.hv, .n--g:active, .n--g.nh { background: var(--err-nen-hv); } .n--lk { height: auto; padding: 0; background: transparent; border: 0; color: var(--link); text-decoration: underline; text-underline-offset: var(--v-day); } .n--lk:hover, .n--lk.hv { color: var(--link-hover); background: transparent; } /* NÚT LỚN — Sếp 05/10/2026: "các button bị to nhỏ khác nhau chiều cao vậy?" Gốc: hệ số ×1.35 là con số tuỳ hứng, không thuộc thang nào, lại đang gắn cho nút PHỤ (Bộ quy chuẩn · Lộ trình) nên nút phụ 59px trong khi nút CHÍNH 44px. Nay: MỌI nút cùng cao --control-h. Phân cấp bằng MÀU + BÓNG, không bằng cỡ. (Ở mặt tiền marketing --control-h = 44px nên CTA vẫn đủ to.) */ .n--k { height: var(--control-h); padding-inline: var(--s-5); } .n--m { height: var(--control-h); padding-inline: var(--s-3); font-size: max(var(--fs-nho), calc(var(--fs-base) * .93)); } .n--i, .n--m.n--i { width: var(--control-h); padding: 0; } .n--m.n--i { width: var(--control-h); } .n.ti::before { content: ''; width: calc(var(--fs-base) * .9); height: calc(var(--fs-base) * .9); border: var(--v-day) solid currentColor; border-top-color: transparent; border-radius: var(--r-full); animation: quay .7s linear infinite; } .n.lo { border-color: var(--err-2); background: var(--err-1); color: var(--err-3); } .n--c.lo { background: var(--err-nen); border-color: var(--err-nen); color: var(--err-nghich); } .n.dc { background: var(--surface-2); border-color: var(--border); color: var(--text-3); cursor: default; } @keyframes quay { to { transform: rotate(1turn); } } /* -------------------------------- Ô NHẬP -------------------------------- */ .o { display: block; width: 100%; height: var(--control-h); padding-inline: var(--s-3); border: var(--v-mong) solid var(--border-manh); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1; } .o::placeholder { color: var(--text-4); } .o:hover, .o.hv { border-color: var(--text-4); background: var(--control); } .o:focus-visible, .o.tf { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 1px; border-color: var(--border-focus); } .o:disabled, .o.vo { background: var(--control); color: var(--text-4); cursor: not-allowed; } .o[readonly], .o.dc { background: var(--surface-2); color: var(--text-2); border-style: dashed; } .o.lo { border-color: var(--err-2); background: var(--err-1); color: var(--err-3); } .o--v { width: 280px; height: auto; min-height: calc(var(--control-h) * 2.6); padding-block: var(--s-2); line-height: var(--lh-base); resize: vertical; } .o--f { width: 280px; padding-block: 0; line-height: calc(var(--control-h) - var(--v-day)); } .o--f::file-selector-button { margin-right: var(--s-3); height: calc(var(--control-h) * .8); padding-inline: var(--s-3); border: var(--v-mong) solid var(--border); border-radius: var(--r-sm); background: var(--control); color: var(--text); font-family: inherit; font-size: var(--fs-base); cursor: pointer; } .rw > .o { width: auto; flex: 1 1 170px; } /* -------------------- CHỌN NHIỀU · NÚT CHỌN · CÔNG TẮC -------------------- */ input[type='checkbox'], input[type='radio'] { accent-color: var(--app); width: calc(var(--fs-base) * 1.05); height: calc(var(--fs-base) * 1.05); } /* Ô tick/ô chọn TỰ VẼ (Sếp 05/10/2026): bản mặc định của trình duyệt chỉ 14px kiểu hệ điều hành ⇒ vừa dưới sàn chạm 24px vừa lệch hẳn hệ điều khiển. */ input[type='checkbox'], input[type='radio'] { appearance: none; -webkit-appearance: none; flex: none; inline-size: var(--s-6); block-size: var(--s-6); position: relative; border: var(--v-mong) solid var(--border-manh); border-radius: var(--r-xs); background: var(--surface); cursor: pointer; transition: background var(--t-nhanh) var(--ease), border-color var(--t-nhanh) var(--ease); } input[type='radio'] { border-radius: var(--r-full); } input[type='checkbox']:checked, input[type='radio']:checked { background: var(--app); border-color: var(--app); } input[type='checkbox']:checked::after { content: ''; position: absolute; inset: 0; margin: auto; inline-size: var(--s-1); block-size: var(--s-2); border: solid var(--app-contrast); border-width: 0 var(--v-day) var(--v-day) 0; transform: rotate(45deg) translate(calc(var(--v-mong) * -1), calc(var(--v-mong) * -1)); } input[type='radio']:checked::after { content: ''; position: absolute; inset: 0; margin: auto; inline-size: var(--s-2); block-size: var(--s-2); border-radius: var(--r-full); background: var(--app-contrast); } input[type='checkbox']:focus-visible, input[type='radio']:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; } input[type='checkbox']:disabled, input[type='radio']:disabled { opacity: var(--mo-4); cursor: not-allowed; } .gm { display: flex; align-items: center; gap: var(--s-2); } .hc { display: inline-flex; border-radius: var(--radius-control); overflow: hidden; } .hc label { position: relative; display: inline-flex; } .hc input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; inline-size: auto; block-size: auto; border: 0; } .hc span { display: inline-flex; align-items: center; height: var(--control-h); padding-inline: var(--s-3); background: var(--surface); border: var(--v-mong) solid var(--border); } .hc label + label span { border-left-width: 0; } .hc input:checked + span { background: var(--app-soft); color: var(--app-chu); border-color: var(--app-border); font-weight: var(--fw-dam); } .hc input:focus-visible + span { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } .sw { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; } .sw input { appearance: none; position: relative; margin: 0; border: 0; width: calc(var(--control-h) * 1.35); height: calc(var(--control-h) * .72); border-radius: var(--r-full); background: var(--control-active); cursor: pointer; transition: background var(--t-nhanh) var(--ease); } .sw input::after { content: ''; position: absolute; top: var(--v-day); left: var(--v-day); width: calc(var(--control-h) * .72 - var(--v-day) * 2); aspect-ratio: 1; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--sh-1); transition: margin var(--t-thuong) var(--ease); } .sw input:checked { background: var(--app); } .sw input:checked::after { margin-left: calc(var(--control-h) * .63 - var(--v-day) * 2); } .sw input:disabled { opacity: var(--mo-4); } .sw input:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; } input[type='range'] { width: 220px; accent-color: var(--app); } /* --------------------------- CHIP · THẺ CHỌN --------------------------- */ .ch { display: inline-flex; align-items: center; gap: var(--s-2); height: calc(var(--control-h) * .82); padding-inline: var(--s-3); border-radius: var(--r-full); background: var(--surface-2); border: var(--v-mong) solid var(--border); color: var(--text-2); font-size: max(var(--fs-nho), calc(var(--fs-base) * .9)); } .ch--on { background: var(--app-soft); border-color: var(--app-border); color: var(--app-chu); } .ch button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: max(var(--fs-nho), calc(var(--fs-base) * 1.1)); line-height: 1; padding: 0; } .tc { display: block; width: 260px; border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); padding: var(--space-card); background: var(--surface); cursor: pointer; } .tc input { float: right; } .tc:has(input:checked) { border-color: var(--app); background: var(--app-soft); box-shadow: inset 0 0 0 var(--v-mong) var(--app); } .tc:has(input:focus-visible) { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; } /* --------------------------------- THẺ --------------------------------- */ .the { background: var(--surface); border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); padding: var(--space-card); box-shadow: var(--shadow-1); } .the__dau { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); } .the__dau h3 { flex: 1; } .the--so { padding: var(--s-5); } /* Thẻ ĐANG CHỌN — cùng ngôn ngữ với `.bang tr.chon`: viền theo màu hệ + nâng bóng. Dùng cho mọi lưới thẻ bấm-để-lọc (không đặt viền/bóng bằng style nội tuyến trong màn). */ .the.chon { border-color: var(--app); box-shadow: var(--shadow-2); } .the--so .so { display: block; font-family: var(--font-display); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h1))); font-weight: var(--fw-rat); line-height: var(--lh-chat); } /* Nhãn dòng đầu phải CHỪA CHỖ cho badge góc (`.the--so .dd` là position:absolute). Không chừa ⇒ nhãn dài chạm badge 10–68px (đo được ở 03/06/08). Đo lại 11/10: chỉ chừa padding KHÔNG đủ — `.lb` là inline nên vẫn tràn ngang vào badge. Phải nowrap + ellipsis để hộp chữ bị chặn thật, không bao giờ chạm badge. */ .the--so .lb { display: block; padding-right: calc(var(--s-8) + var(--s-1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .luoi-the > .the { box-shadow: var(--shadow-1); } /* --------------------------------- BẢNG --------------------------------- */ .bang { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .bang th, .bang td { padding: var(--s-2) var(--s-3); border-bottom: var(--v-mong) solid var(--border); text-align: left; } .bang thead th { background: var(--surface-2); color: var(--text-2); font-weight: var(--fw-dam); white-space: nowrap; } .bang th button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; } .bang th button:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 2px; } .bang .so, .bang td.so { text-align: right; font-variant-numeric: tabular-nums; } .bang tbody tr:hover { background: var(--surface-hover); } .bang tr.chon { background: var(--app-soft); box-shadow: inset var(--v-nhan) 0 0 var(--app); } /* Hàng cảnh báo theo DỮ LIỆU (thao tác nhạy cảm, dòng lỗi) — dùng thay style nội tuyến. */ .bang tr.canh-bao { background: var(--warn-1); box-shadow: inset var(--v-nhan) 0 0 var(--warn-2); } .bang .dang-xep { color: var(--app-chu); } /* ------------------- HỘP THOẠI · NGĂN KÉO · TAB · KHỐI GẬP ------------------- */ .khung-xem { position: relative; height: 300px; border: var(--v-mong) solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); } .lop-phu { position: absolute; inset: 0; background: var(--surface-boc); z-index: var(--z-hopthoai); display: flex; align-items: center; justify-content: center; padding: var(--s-5); } .hop-thoai { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-4); padding: var(--s-5); } /* ! CẤM khai `width` ở đây: khối NÀY nạp SAU `lop-phu.css` ⇒ cùng độ ưu tiên (0-1-0) nhưng thắng vì đứng sau, làm chết cả 4 cỡ `.hop-thoai--nho|--vua|--lon|--toan` (mọi hộp thoại đều ra 520px — đo thật 09/10/2026 trên Bàn biên tập Mai CMS). */ .hop-thoai__chan { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); } .ngan-keo { position: absolute; inset: 0 0 0 auto; width: min(340px, 82%); background: var(--surface); border-left: var(--v-mong) solid var(--border); box-shadow: var(--shadow-4); z-index: var(--z-hopthoai); padding: var(--s-5); } .tab { display: flex; gap: var(--s-1); border-bottom: var(--v-mong) solid var(--border); } .tab button { height: var(--control-h); padding-inline: var(--s-3); border: 0; border-bottom: var(--v-day) solid transparent; background: transparent; color: var(--text-2); font-family: var(--font-ui); font-size: var(--fs-base); cursor: pointer; } .tab button:hover { background: var(--surface-hover); color: var(--text); } .tab button:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } .tab button[aria-selected='true'] { color: var(--app-chu); border-bottom-color: var(--app); font-weight: var(--fw-dam); } .gg { border: var(--v-mong) solid var(--border); border-radius: var(--r-md); background: var(--surface); } .gg summary { padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: var(--fw-vua); } .gg summary:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } .gg .gg__noi { padding: 0 var(--s-4) var(--s-4); color: var(--text-2); } .pc { height: var(--v-mong); border: 0; background: var(--border); margin: var(--s-5) 0; } .cuon-ngang { overflow-x: auto; overscroll-behavior-x: contain; } /* ------------------------------- XƯƠNG ĐANG TẢI ------------------------------- */ .xt { height: var(--control-h); border-radius: var(--r-sm); background: var(--surface-2); animation: nhap 1.4s ease-in-out infinite; margin-bottom: var(--s-2); } .xt--ngan { width: 40%; } .xt--vua { width: 70%; } .sp { width: calc(var(--fs-base) * 1.6); height: calc(var(--fs-base) * 1.6); flex: none; border: var(--v-nhan) solid var(--border-manh); border-top-color: var(--app); border-radius: var(--r-full); animation: quay .8s linear infinite; } @keyframes nhap { 50% { opacity: var(--mo-4); } } /* ------------------------------ THÔNG BÁO TẠI CHỖ ------------------------------ */ .tb { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: var(--v-mong) solid; border-radius: var(--r-md); font-size: var(--fs-base); } .tb .sv { margin-top: var(--v-day); } .tb strong { display: block; font-weight: var(--fw-dam); } .tb .tb__dong { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; line-height: 1; font-size: max(var(--fs-nho), calc(var(--fs-base) * 1.2)); min-width: var(--s-6); min-height: var(--s-6); display: grid; place-items: center; padding: 0 var(--s-1); } /* 🔴 GỐC RỄ (09/10/2026): `.tb--*` đổi NỀN sang màu nhạt cố định nhưng chỉ đặt `color`, KHÔNG khoá token mực ⇒ chữ bên trong (`a`, `b`, `.nho`) ăn `--text`/`--link` của khối CHA. Nằm trong chân trang `.chan` (đã khoá mực = trắng) thì thông báo thành trắng trên #ECFDF5/#FFFBEB/#FEF2F2 ⇒ 1,05:1. 12 + 4 chỗ vô hình ở `09-landing`. LUẬT: ĐỔI NỀN ⇒ PHẢI KHOÁ LẠI MỰC, kể cả khối nền NHẠT. Khoá bằng `currentColor` để mực luôn khớp nền của chính khối, không phụ thuộc khối cha. */ .tb--ok, .tb--info, .tb--warn, .tb--err { --text: currentColor; --link: currentColor; --link-hover: currentColor; --text-2: color-mix(in srgb, currentColor 82%, transparent); --text-3: color-mix(in srgb, currentColor 70%, transparent); } .tb--ok { background: var(--ok-1); border-color: var(--ok-2); color: var(--ok-3); } .tb--info { background: var(--info-1); border-color: var(--info-2); color: var(--info-3); } .tb--warn { background: var(--warn-1); border-color: var(--warn-2); color: var(--warn-3); } .tb--err { background: var(--err-1); border-color: var(--err-2); color: var(--err-3); } /* 🔴 GỐC RỄ (09/10/2026): `.tb-o` ghim `--err-3` (đỏ đậm) cho MỌI chế độ ⇒ ở chế độ tối, đỏ đậm trên nền tối = 1,77:1. Nay dùng `--err-chu` — token đã có nhánh đổi theo chế độ (tối thì pha trắng). Một chỗ khai, mọi màn ăn theo. */ .tb-o { display: flex; gap: var(--s-1); align-items: center; color: var(--err-chu); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-caption))); } /* ------------------ THÔNG BÁO NỔI — GÓC DƯỚI PHẢI (Sếp chốt 05/10/2026) ------------------ Trước ở góc TRÊN phải: che đúng vùng công cụ + thanh tab, mà mắt người dùng lại đang ở ĐÁY màn sau khi bấm nút ⇒ không thấy. Nay xuống góc dưới phải, có khu chứa xếp chồng (bấm liên tiếp không đè nhau) và chừa vạch an toàn đáy máy. */ .khu-noi { position: fixed; z-index: var(--z-thongbao); right: var(--s-5); bottom: calc(var(--s-5) + var(--an-toan-duoi, 0px)); display: flex; flex-direction: column-reverse; gap: var(--s-3); width: min(340px, calc(100vw - var(--s-7))); pointer-events: none; } .khu-noi > * { pointer-events: auto; } .noi { background: var(--surface); border: var(--v-mong) solid var(--border-manh); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; animation: noi-vao var(--t-cham) var(--ease); } @keyframes noi-vao { from { opacity: 0; transform: translateY(var(--s-3)); } } .noi__than { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--space-card); } .noi__than .rw { margin-top: var(--s-2); } .noi__dem { height: var(--v-nhan); background: var(--app); animation: dem 5s linear forwards; } @keyframes dem { from { width: 100%; } to { width: 0; } } /* --------------------------------- TRẠNG THÁI MÀN --------------------------------- */ .man { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; padding: var(--s-7) var(--s-5); border: var(--v-mong) dashed var(--border); border-radius: var(--r-lg); background: var(--surface); } .man .vong { display: flex; align-items: center; justify-content: center; width: calc(var(--control-h) * 1.8); height: calc(var(--control-h) * 1.8); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-3); } .man .vong .sv { width: calc(var(--fs-base) * 1.7); height: calc(var(--fs-base) * 1.7); } .man--loi .vong { background: var(--err-1); color: var(--err-2); } .man--kq .man__c { max-width: 54ch; color: var(--text-3); } .man--kq { border-style: solid; } /* ========================================================================== BỔ SUNG ĐỢT 02/10 — màn THẬT (landing, console) cần 4 thứ dưới đây. Đặt ở đây (lớp dùng chung) để màn thật không tự chế lại rồi lệch nhau. ========================================================================== */ /* ĐIỀU HƯỚNG TRONG THANH BÊN — dùng cho màn quản trị */ .muc { display: flex; align-items: center; gap: var(--s-3); height: var(--control-h); padding-inline: var(--s-4); border-left: var(--v-nhan) solid transparent; color: var(--text-2); font-size: var(--fs-base); } .muc:hover { background: var(--surface-hover); color: var(--text); } .muc:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: -2px; } .muc--chon, .muc--chon:hover { background: var(--app-soft); border-left-color: var(--app); color: var(--app-chu); font-weight: var(--fw-dam); } .muc .sv { color: currentColor; opacity: var(--mo-5); } .muc--chon .sv { opacity: 1; } .muc__so { margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); color: var(--text-3); } .muc--chon .muc__so { color: var(--app-chu); } .nhom { padding: var(--s-4) var(--s-4) var(--s-2); margin: 0; text-transform: uppercase; letter-spacing: .1em; color: var(--text-4); font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); } /* CHÊNH LỆCH — chỉ số tăng/giảm cạnh con số lớn */ .dd { display: inline-flex; align-items: center; gap: var(--s-1); padding-inline: var(--s-2); height: calc(var(--control-h) * .68); border-radius: var(--r-full); font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-dam); font-variant-numeric: tabular-nums; } .dd--len { background: var(--ok-1); color: var(--ok-3); } .dd--xuong { background: var(--err-1); color: var(--err-3); } .dd--canh { background: var(--warn-1); color: var(--warn-3); } /* Nhãn hệ inline — dùng trong ô bảng, dòng thẻ, danh sách. Con dấu màu = hệ nào. */ .he-tag { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); white-space: nowrap; } .he-tag .cham { width: .5em; height: .5em; } .dd--phang { background: var(--surface-2); color: var(--text-3); } /* THANH TỈ LỆ — lượng tương đối, KHÔNG phải trục toạ độ */ .thanh { height: var(--v-nhan); border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; } .thanh__chay { display: block; height: 100%; border-radius: inherit; background: var(--app); } /* CHẤM MÀU HỆ — đặt trên phần tử có data-app để ăn màu của chính hệ đó */ .cham { display: inline-block; flex: none; width: calc(var(--fs-base) * .6); height: calc(var(--fs-base) * .6); border-radius: var(--r-full); background: var(--app); } /* CON DẤU THƯƠNG HIỆU — khối màu hệ + viên kim cương bốn màu vàng. Mọi màn đều đeo. */ .lg { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--fs-base) * 2); height: calc(var(--fs-base) * 2); background: var(--app); color: var(--app-contrast); border-radius: var(--radius-control); font-family: var(--font-display); font-weight: var(--fw-rat); line-height: 1; font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h3))); } .lg::after { content: ''; position: absolute; top: calc(var(--s-1) * -1); right: calc(var(--s-1) * -1); width: calc(var(--fs-base) * .6); height: calc(var(--fs-base) * .6); transform: rotate(45deg); border-radius: var(--r-xs); background: conic-gradient(from 0deg, var(--g-3) 0 25%, var(--g-4) 0 50%, var(--g-5) 0 75%, var(--g-2) 0); } .lg--lon { width: calc(var(--fs-base) * 3); height: calc(var(--fs-base) * 3); font-size: max(var(--fs-nho), calc(var(--fs-base) * var(--ty-le-h1))); } /* KHOÁ THƯƠNG HIỆU — con dấu + tên + mô tả ngắn */ .thuong { display: flex; align-items: center; gap: var(--s-3); color: var(--text); font-weight: var(--fw-dam); text-decoration: none; } .thuong__ten { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .thuong__ten b { font-family: var(--font-display); font-size: var(--fs-h3, calc(var(--fs-base) * var(--ty-le-h3))); } /* NHÃN TRẠNG THÁI — trạng thái bản ghi trong bảng, KHÔNG dùng cho cảnh báo (dùng .tb) */ .tt { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-full); font-size: var(--fs-caption, calc(var(--fs-base) * var(--ty-le-caption))); font-weight: var(--fw-vua); white-space: nowrap; } .tt::before { content: ''; width: calc(var(--fs-base) * .45); height: calc(var(--fs-base) * .45); border-radius: var(--r-full); background: currentColor; } .tt--chay { background: var(--ok-1); color: var(--ok-3); } .tt--nhap { background: var(--warn-1); color: var(--warn-3); } .tt--dung { background: var(--err-1); color: var(--err-3); } .tt--info { background: var(--info-1); color: var(--info-3); } /* Bổ sung 09/10/2026: .tt--cho (trạng thái "Chưa đọc/chờ") hệ đang dùng mà kho THIẾU ⇒ nhãn mất nền, chìm vào bảng. Tông TRUNG TÍNH vì "chờ" không phải đúng/sai/cảnh báo. Chữ --text-2 trên nền --n-1: tương phản rất cao. */ .tt--cho { background: var(--n-1); color: var(--text-2); } .tt--tron { background: var(--surface-2); color: var(--text-2); } /* TIỆN ÍCH ÍT DÙNG NHẤT — chỉ 2 cái, không mở đường cho cả bộ tiện ích */ .ml-tu { margin-left: auto; } .mt-the { margin-top: var(--space-card); } /* ------------------------------- GIẢM CHUYỂN ĐỘNG ------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== LỚP TRAU CHUỐT Đặt SAU các @import nên ghi đè được lớp thành phần (cùng độ ưu tiên, tệp sau thắng). Mục tiêu: thẻ/khung có ĐỘ SÂU THẬT thay vì phẳng, điều khiển có phản hồi rõ, menu sắc nét, thứ bậc trong thẻ số rõ ràng. Chỉ dùng token — không màu cứng, không cỡ chữ tuyệt đối. ========================================================================== */ /* --- 1. MỘT CHUẨN ĐỘ SÂU CHO MỌI KHUNG --- Trước đây thẻ chỉ có --sh-1 (alpha .06/.08) nên nhìn phẳng. Nay: khung lớn --sh-1 · thẻ nội dung --sh-2 · lớp nổi --sh-3. */ .the, .tp, .luoi-du-lieu, .khung-chat, .xem-truoc, .do-thi, .gg, .anh__khung, .ve__bang, .vung-tha, .dem-nguoc__o { box-shadow: var(--sh-1); } .the, .xem-truoc, .do-thi, .tc, .dem-nguoc__o, .do-thi__chuthich { box-shadow: var(--sh-2); } .hop-thoai, .ngan-keo, .noi { box-shadow: var(--sh-4); } /* --- 1b. PHÂN TẦNG NỀN — mắt phải đọc được hộp nào là hộp gì (Sếp 05/10/2026) Trước: MỌI hộp đều trắng + cùng viền + cùng bóng ⇒ dính vào nhau, "không có sự phân hóa màu sắc background color giữa các box thông tin". Nay 4 mức rõ: nền trang --bg · hộp nổi --surface · dải/thanh --surface-2 · hộp số mang màu hệ. */ .the--so { background: color-mix(in srgb, var(--app) 4%, var(--surface)); } .the--so .the__dau { border-bottom: var(--v-mong) solid var(--app-border); padding-bottom: var(--s-2); } /* --- 1b2. THẺ SỐ ĐA SẮC (Sếp 05/10/2026 — "màu sắc cực kỳ chán") Trước: mọi thẻ số cùng MỘT màu nhấn ⇒ dãy thẻ đọc ra một khối. Nay xoay 4 màu vai theo thứ tự ⇒ mắt tách nhóm ngay. Chỉ gán lại các biến --app* nên MỌI thứ bên trong thẻ (dải màu, nhãn, số, badge) tự đổi theo, không phải sửa từng chỗ. */ /* HAI cách đặt thẻ số trong hệ (đo thật): thẻ BỌC trong ô lưới (03) hoặc thẻ ĐỨNG TRỰC TIẾP trong lưới/ray (05 · 06). Phải phủ cả hai, nếu không thì nth-child đếm sai tầng và mọi thẻ ra cùng một màu. */ :where(.luoi, .luoi-the) > :nth-child(4n+1) > .the--so, :where(.luoi, .luoi-the, .xuong__ray, .xuong__noi, .tp, .cot, .hang) > .the--so:nth-child(4n+1) { --app: var(--vai-1); --app-deep: var(--vai-1-deep); --app-soft: var(--vai-1-soft); } :where(.luoi, .luoi-the) > :nth-child(4n+2) > .the--so, :where(.luoi, .luoi-the, .xuong__ray, .xuong__noi, .tp, .cot, .hang) > .the--so:nth-child(4n+2) { --app: var(--vai-2); --app-deep: var(--vai-2-deep); --app-soft: var(--vai-2-soft); } :where(.luoi, .luoi-the) > :nth-child(4n+3) > .the--so, :where(.luoi, .luoi-the, .xuong__ray, .xuong__noi, .tp, .cot, .hang) > .the--so:nth-child(4n+3) { --app: var(--vai-3); --app-deep: var(--vai-3-deep); --app-soft: var(--vai-3-soft); } :where(.luoi, .luoi-the) > :nth-child(4n+4) > .the--so, :where(.luoi, .luoi-the, .xuong__ray, .xuong__noi, .tp, .cot, .hang) > .the--so:nth-child(4n+4) { --app: var(--vai-4); --app-deep: var(--vai-4-deep); --app-soft: var(--vai-4-soft); } /* viền suy từ --app nên tự theo màu vai vừa gán (nhãn .lb khai ở mục "THẺ SỐ") */ .the--so { --app-border: color-mix(in srgb, var(--app) 26%, var(--surface)); } /* --- 1c. NÚT CHÍNH — BỎ "BÓNG BẨY" DỌC (10/10/2026) ---------------------- Trước đây nút chính đổ `linear-gradient(180deg, color-mix(--app 86%, --surface), --app)` cho có độ bóng. SAI: 25 bảng màu đều được thiết kế SÁT ngưỡng AA (chữ trắng trên `ai-gateway` #0369A1 = 5,93:1; chữ đậm trên `bpm` #059669 = 4,86:1 — chỉ dư 0,36). Gradient đổi độ sáng ở đỉnh nút ⇒ đỉnh tụt dưới 4,5:1. Đo thật: 86% → 200 chỗ, 92% → 200, 96% → 18; KHÔNG tỉ lệ nào vừa đủ bóng vừa đủ tương phản. Hướng ngược lại cũng hỏng: 8/25 bảng màu dùng chữ ĐẬM trên nền hệ (bpm, surveys, ecom…) nên làm nền tối đi lại hạ tương phản của chúng. LUẬT: nút đổ màu hệ thì để PHẲNG. Muốn có chiều sâu, dùng `border`/`box-shadow` KHÔNG phủ lên vùng chữ, CẤM đổi độ sáng nền dưới chữ. */ .n--c { background-image: none; } .n--g { background-image: none; } /* --- 2. THẺ SỐ: dải màu hệ chạy cạnh trái + thứ bậc rõ --- Nối thẻ với bộ màu đang chọn, đồng thời tách nhãn khỏi con số. */ .the--so { position: relative; overflow: hidden; } .the--so::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v-nhan); background: var(--app); } .the--so .lb { text-transform: uppercase; letter-spacing: .05em; color: var(--app-chu); font-size: max(var(--fs-nho), calc(var(--fs-base) * .78)); } .the--so .so { letter-spacing: -.02em; } .the--so .dd { position: absolute; top: var(--s-4); right: var(--s-4); } /* --- 3. ĐIỀU KHIỂN: phản hồi rõ, vòng tiêu điểm không bị mất --- */ .n { box-shadow: var(--sh-1); } .n--t, .n--lk, .muc, .menu__muc, .tab-bar__muc, .phan-trang__nut--nho { box-shadow: none; } .o, select, textarea, .chon-cay__nut, .chon-nhieu__nut, .khoang-ngay-gio__nut { transition: border-color var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease), background var(--t-nhanh) var(--ease); } .o:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--v-nhan) solid var(--focus-ring); outline-offset: 1px; } /* --- 4. MENU: biểu tượng sắc hơn, nhịp nhóm đều --- */ .menu__muc .sv { width: calc(var(--fs-base) * 1.2); height: calc(var(--fs-base) * 1.2); stroke-width: 1.7; } .menu__cuon { gap: var(--s-2); } .menu__nhan { margin: var(--s-4) var(--s-2) var(--s-2); } .menu__nhan:first-child { margin-top: 0; } .menu__muc--chon { box-shadow: inset 0 0 0 var(--v-mong) var(--app-border); } .menu__dau { box-shadow: inset 0 calc(var(--v-mong) * -1) 0 var(--border); } /* --- 5. BẢNG: đầu bảng tách khỏi thân, hàng dễ dò mắt --- */ .luoi-du-lieu thead th { box-shadow: inset 0 calc(var(--v-mong) * -1) 0 var(--border); background: var(--surface-2); } .luoi-du-lieu__cuon { scrollbar-width: thin; } .bang tbody tr:nth-child(even), .luoi-du-lieu tbody tr:nth-child(even) { background: var(--mo-1); } .luoi-du-lieu tbody tr:nth-child(even):hover td { background: var(--surface-hover); } /* --- 6. PHẢN HỒI KHI RÊ: nâng nhẹ, chỉ trên thiết bị có trỏ chuột --- */ @media (hover: hover) { .the, .xem-truoc, .do-thi, .tc, .dem-nguoc__o, .anh__khung { transition: box-shadow var(--t-thuong) var(--ease), transform var(--t-thuong) var(--ease), border-color var(--t-thuong) var(--ease); } .the:hover, .xem-truoc:hover, .do-thi:hover, .tc:hover, .dem-nguoc__o:hover { box-shadow: var(--sh-3); border-color: var(--border-manh); transform: translateY(calc(var(--v-mong) * -1)); } .luoi-du-lieu tbody tr:hover td { box-shadow: inset var(--v-mong) 0 0 var(--border); } } @media (prefers-reduced-motion: reduce) { .the, .xem-truoc, .do-thi, .tc, .dem-nguoc__o, .anh__khung, .o, select, textarea, .chon-cay__nut, .chon-nhieu__nut, .khoang-ngay-gio__nut { transition: none; } .the:hover, .xem-truoc:hover, .do-thi:hover, .tc:hover, .dem-nguoc__o:hover { transform: none; } } /* ========================================================================== MÀN HẸP — BẢNG BUNG CỦA THÀNH PHẦN (đo thật 03/10/2026) Bốn bảng dưới đây là `position: absolute` neo `left: 0` theo ô nhập và khai cứng `min-width` 260-280px. Khi ô nhập nằm gần mép phải, bảng bị đẩy LÒI RA NGOÀI khung nhìn: 08-thư-viện tràn +323px ở 1024px, +332px ở 280px. Chữa tại gốc: cho bảng XUỐNG DÒNG TẠI CHỖ (không nổi đè), rộng đúng khung chứa, cuộn ngang bên trong. Trùng gu Sếp: ưu tiên nhúng INLINE, cấm popup. ========================================================================== */ @media (max-width: 1024px) { .ngay-gio__bang, .khoang-ngay-gio__bang, .chon-cay__bang, .chon-nhieu__bang { position: static; width: 100%; min-width: 0; max-width: 100%; margin-top: var(--s-1); overflow-x: auto; overscroll-behavior-x: contain; } } /* Bảng TRƯNG BÀY trong thư viện (`--tinh`) — bày sẵn nên phải nằm TRONG dòng chảy ở MỌI bề rộng, không chỉ ≤1024px. Để `absolute` thì ở màn rộng nó bay lên đè khối demo kế bên (đo thật 1440px: chọn-cây che 9 phần tử, chọn-nhiều che 4 — kể cả chip và tiêu đề dưới nó) rồi người xem không thu lại được. Cùng phép chữa với khối @media trên, chỉ khác là không giới hạn bề rộng. */ [class*="__bang--tinh"] { position: static; width: auto; min-width: 0; max-width: 100%; margin-top: var(--s-1); overflow-x: auto; overscroll-behavior-x: contain; } /* Ô tìm trong ĐẦU TRANG của màn mang viết thẳng `style="flex:1;max-width:360px"`; inline thắng mọi luật nên ở máy hẹp nó bị bóp còn 8px rồi đẩy ô nhập ra ngoài (đo thật: 07-biểu-mẫu tràn +14px ở 280px). !important là cách DUY NHẤT thắng inline — chỉ dùng ở đây, có chủ đích, đã đo. */ @media (max-width: 700px) { .tren-noi > .o-tim, .tren-noi > .tim-kiem { flex: 1 1 100% !important; max-width: none !important; } } /* ========================================================================== MÀN ĐIỆN THOẠI — KHỐI TRƯNG BÀY THÀNH PHẦN 08-thư-viện bày từng thành phần ở cỡ thật (bảng kéo-thả, thanh trượt, đồng hồ đếm ngược…), nên ở 280px chúng rộng hơn khung nhìn: đo thật +332px, gồm 8 nhóm / 30 phần tử. Khối demo tự cuộn ngang, CẤM đẩy tràn cả trang. ========================================================================== */ @media (max-width: 700px) { .tp { overflow-x: auto; overscroll-behavior-x: contain; } .tp > * { min-width: 0; } .keo-tha, .keo-tha__muc, .truot { min-width: 0; max-width: 100%; } .truot { flex-wrap: wrap; } .truot__so { min-width: 0; } /* Ô demo xếp ĐÔI trong một hàng (inline `flex:1` ⇒ basis 0) bị bóp còn 141px ở 380px, mà bảng trưng bày bên trong rộng 168/300px ⇒ tràn sang ô bên cạnh: hai bảng ngày-giờ chồng nhau 36px. Cho xuống dòng như mọi ô demo khác (chúng đã dùng `flex:1 1 100%`). `!important` vì style ghi thẳng trong thẻ — cùng cách đã dùng cho `.keo-tha` ngay trên. */ .tp .hang--tren > .cn { flex: 1 1 100% !important; } } @media (max-width: 480px) { .dem-nguoc { flex-wrap: wrap; } .dem-nguoc__o { min-width: 0; } } /* ── thanh-phan/mat-tien.css ── */ /* ========================================================================== MẶT TIỀN — màn công khai (đăng nhập · đăng ký · lỗi) thanh-phan/mat-tien.css VÌ SAO CÓ TỆP NÀY: khuôn mẫu `mau-man/02-dang-nhap.html` là bản hai cột, nhưng bộ lớp của nó (`.vao`, `.vao__thuong`, `.quyen-loi`…) chỉ nằm TRONG khối định kiểu nội tuyến của chính tệp mẫu ⇒ hệ nạp `/iai-ds.css` KHÔNG có lớp nào để dựng màn đăng nhập theo khuôn. Hệ phải tự chế (Mai Config Hub từng dựng màn đăng nhập một cột bằng lớp chắp vá). Tệp này đưa khuôn hai cột vào tầng phát hành, dùng token sẵn có — CẤM số cứng. Luật: · Màn hẹp (≤ 900px): bỏ cột thương hiệu, biểu mẫu một cột, hiện `.thuong-hep` (bản thu gọn của thương hiệu) — CẤM để người dùng màn nhỏ mất tên hệ. · Màu thương hiệu lấy từ `[data-app]` của từng hệ (`--app`, `--app-deep`, `--app-contrast`) ⇒ 23 hệ dùng chung, không hệ nào tự khai màu. ========================================================================== */ /* --- hai cột chia đôi màn --- */ .vao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; background: var(--bg); /* Chữ mặt tiền theo khuôn mm-01/mm-02/09 (Plus Jakarta). Khai TẠI KHUÔN, không ở `:root`: màn console phải giữ chữ của hệ (`[data-app]` trong apps.css = Segoe). Người dùng tự chọn bộ chữ (`html[data-chu] …`) vẫn thắng luật này. */ --font-ui: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Noto Sans', sans-serif; /* 🔴 PHAI khai CA --font-display: `chu.css` mặc định nó là 'Segoe UI Variable Display' (chữ console) và khoá hệ không đổi nó ⇒ thiếu dòng này thì tiêu đề lớn + con dấu hiệu render bằng chữ hệ điều hành, mất chất thương hiệu (đo 10/10/2026: `.vao__tieu-de` computed ra "Segoe UI Variable Display" thay vì Plus Jakarta). */ --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Noto Sans', sans-serif; font-family: var(--font-ui); /* Chữ thân mặt tiền = 400. Nhiều hệ đặt `body{font-weight:500}` (mật độ console) ⇒ không chốt ở đây thì chữ mặt tiền cũng bị 500, mọi mặt chữ nặng như nhau, mất phân cấp. */ font-weight: var(--fw-thuong); } /* --- cột trái: bảng thương hiệu --- */ .vao__thuong { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; /* cùng nhịp dọc với cột biểu mẫu (khuôn mm-02) */ align-items: center; /* canh giữa ngang */ gap: var(--s-6); padding: var(--s-8) var(--s-6); /* Nền: chuyển sắc màu hệ → màu hệ sâu (khuôn mm-02). 🔴 Đầu gradient pha 72% (không 88%): đo cả 25 hệ, ở 88% thì hệ màu SÁNG (`ecom` vàng chanh, `surveys` lam) cho nền quá sáng ⇒ chữ trắng chỉ 3,9:1 — dưới AA. Ở 72% thấp nhất đạt 5,0:1. Đổi nền ⇒ phải đo lại, không đoán. */ background: linear-gradient(168deg, color-mix(in srgb, var(--app) 72%, rgb(0 0 0)) 0%, var(--app-deep) 52%, color-mix(in srgb, var(--app-deep) 74%, rgb(0 0 0)) 100%); } /* Mọi khối nội dung cùng một bề rộng ⇒ mép trái/phải hai cột thẳng nhau. */ .vao__thuong > * { width: 100%; max-width: var(--rong-cot); } /* Vệt sáng thương hiệu — trang trí, CẤM chắn chuột. */ .vao__thuong::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 84% 8%, var(--app) 0%, transparent 62%); opacity: .55; } .vao__thuong > * { position: relative; z-index: var(--z-noi); } /* 🔴 KHOÁ TOKEN MỰC MỘT CHỖ (10/10/2026) — cùng luật đã áp ở `thanh-phan/dieu-huong.css` cho `.xuong__ben`. Vì sao: khối này ghim mực TỪNG con (`.thuong`, `.vao__tieu-de`, `.vao__dan`, `.quyen-loi`, `.chung-nhan`) nhưng bỏ sót phần còn lại ⇒ `.gc` rơi về `--text-3` của theme SÁNG (#475569) trên nền chuyển sắc đậm = 1,5:1. Đo thật 10/10/2026 trên Mai Config Hub: dòng "Bảng điều khiển quản trị" chìm hẳn, không đọc được. Nền mặt tiền luôn lấy nấc ĐẬM của `--app` và mực mặt tiền luôn là `--app-deep-chu` ⇒ khoá token đúng cho CẢ 26 bảng màu; con cháu cứ `var(--text*)` là tự ra màu sáng, kể cả con THÊM SAU NÀY. CẤM vá lẻ từng con. */ .vao__thuong { color: var(--app-deep-chu); --text: var(--app-deep-chu); --text-2: color-mix(in srgb, var(--app-deep-chu) 84%, transparent); --text-3: color-mix(in srgb, var(--app-deep-chu) 72%, transparent); --text-4: color-mix(in srgb, var(--app-deep-chu) 58%, transparent); --link: var(--app-deep-chu); --border: color-mix(in srgb, var(--app-deep-chu) 24%, transparent); } .vao__thuong .thuong { color: var(--app-deep-chu); } .vao__thuong .lg { background: var(--app-deep-chu); color: var(--app-deep); } .vao__tieu-de { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.25; letter-spacing: -.026em; font-weight: 800; max-width: 18ch; color: var(--app-deep-chu); margin: 0; } .vao__dan { max-width: 44ch; opacity: .88; margin: 0; color: var(--app-deep-chu); } /* Danh sách quyền lợi của hệ (đăng nhập để được gì). */ .quyen-loi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); color: var(--app-deep-chu); } .quyen-loi li { display: flex; align-items: flex-start; gap: var(--s-3); } .quyen-loi .sv { margin-top: calc(var(--fs-base) * .25); flex: none; } .quyen-loi b { display: block; font-weight: var(--fw-dam); } .quyen-loi span { opacity: .82; font-size: var(--fs-caption); } /* Dòng chứng nhận/cam kết ở chân cột thương hiệu. */ .chung-nhan { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .chung-nhan span { display: inline-flex; align-items: center; gap: var(--s-2); border: var(--v-mong) solid var(--app-deep-chu); border-radius: var(--r-full); padding: var(--s-1) var(--s-3); font-size: var(--fs-caption); color: var(--app-deep-chu); opacity: .9; } /* --- cột phải: biểu mẫu --- */ .vao__form { display: flex; align-items: center; justify-content: center; padding: var(--s-8) var(--s-6); } /* Một bề rộng nội dung chung cho cả hai cột (khuôn mm-02: hộp 480px canh giữa). */ .vao { --rong-cot: 30rem; } .vao__hop { width: 100%; max-width: var(--rong-cot); padding: var(--s-8); background: var(--surface); border: var(--v-mong) solid color-mix(in srgb, var(--app) 14%, var(--border)); border-radius: var(--r-xl); box-shadow: var(--sh-3); } /* Tiêu đề + dẫn của biểu mẫu. */ .the-cong { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); min-width: 0; } .the-cong h1 { font-size: calc(var(--fs-base) * var(--ty-le-h1)); margin: 0; } .the-cong p { margin: 0; color: var(--text-2); } /* Bản thương hiệu thu gọn — CHỈ hiện ở màn hẹp (khi cột trái đã bị bỏ). */ .thuong-hep { display: none; margin-bottom: var(--s-5); } /* Đường phân cách "hoặc" giữa hai đường đăng nhập. */ .hoac { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--fs-caption); } .hoac::before, .hoac::after { content: ''; flex: 1; height: var(--v-mong); background: var(--border); } /* Nút/nhãn chiếm hết bề ngang biểu mẫu. */ .nut-rong { width: 100%; } /* Chân trang điều khoản. */ .chan-dk { margin: var(--s-5) 0 0; color: var(--text-3); font-size: var(--fs-caption); text-align: center; } .chan-dk a { color: var(--app-chu); } /* -------------------------------------------------------------------------- NÚT NHÀ CUNG CẤP ĐĂNG NHẬP — Zalo · Google · MoMo (màn CÔNG KHAI) Màu thương hiệu bên thứ ba lấy từ `tokens/nha-cung-cap.css`; CẤM khai mã màu ở đây (cổng L1 chặn) và CẤM khai trong từng màn (mỗi màn một kiểu là hết đồng nhất). Nút để PHẲNG, không bóng dọc — cùng luật với `.n--c`: bóng dọc làm sáng đỉnh nút ngay dưới chân chữ và ăn mất tương phản. -------------------------------------------------------------------------- */ .n--ncc { background: var(--ncc); border-color: var(--ncc); color: var(--ncc-chu); } .n--ncc:hover, .n--ncc.hv, .n--ncc:active, .n--ncc.nh { background: color-mix(in srgb, var(--ncc) 86%, rgb(0 0 0)); border-color: color-mix(in srgb, var(--ncc) 86%, rgb(0 0 0)); } .n--zalo { --ncc: var(--ncc-zalo); } .n--google { --ncc: var(--ncc-google); } .n--momo { --ncc: var(--ncc-momo); } /* Nhãn "Khuyên dùng" của nhà cung cấp chính — nền TRẮNG đặc để chắc chắn đạt tương phản (nền trắng mờ trên nút màu làm tương phản tụt, không đoán được). `flex: none` + `nowrap`: nút là flex, nhãn bị co lại làm CẮT CHỮ (đo được «Khuyên dùng» cắt 2,0px khi nhãn chen cùng hàng với tên nhà cung cấp dài). */ .ncc__nhan { margin-left: auto; flex: none; white-space: nowrap; /* Nhãn nhỏ 13px kế thừa `line-height: 1` của nút ⇒ CẮT DẤU tiếng Việt («Khuyên dùng» cắt 1,0px phần dưới). Chữ có dấu cần >= 1,35. */ line-height: 1.35; padding: 0 var(--s-2); border-radius: var(--r-full); background: rgb(255 255 255); color: var(--ncc); font-size: var(--fs-caption); font-weight: var(--fw-dam); } /* -------------------------------------------------------------------------- ĐĂNG NHẬP BẰNG SỐ ĐIỆN THOẠI + OTP — đường KHÔNG cần mật khẩu của màn công khai Hàng [mã quốc gia] [số điện thoại] là lưới con 2 cột; ở màn ≤480px tự về 1 cột để ô số không bị bóp dưới ngưỡng gõ được. -------------------------------------------------------------------------- */ .hang-sdt { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--s-2); } @media (max-width: 480px) { .hang-sdt { grid-template-columns: minmax(0, 1fr); } } /* Ô nhập mã OTP 6 số: canh giữa + giãn chữ để đọc được từng số. */ .o--ma { text-align: center; letter-spacing: .5em; text-indent: .5em; /* bù khoảng giãn của ký tự cuối ⇒ chữ vẫn canh giữa thật */ font-size: calc(var(--fs-base) * 1.15); font-weight: var(--fw-dam); } /* -------------------------------------------------------------------------- KHỐI DÙNG THỬ KHÔNG CẦN TÀI KHOẢN — TUỲ CHỌN của từng website Đặt TRÊN biểu mẫu đăng nhập: người mới vào được ngay mà không phải có tài khoản. Website không có chế độ dùng thử thì BỎ khối này, phần còn lại không phụ thuộc nó. -------------------------------------------------------------------------- */ .dung-thu { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); padding: var(--s-5); background: var(--app-soft); border: var(--v-mong) solid var(--app-border); border-radius: var(--r-lg); } .dung-thu > b { font-size: calc(var(--fs-base) * 1.05); } .dung-thu > p { margin: 0; color: var(--text-2); font-size: var(--fs-caption); } /* --- MÀN HẸP: một cột, thương hiệu thu gọn lên đầu biểu mẫu --- */ @media (max-width: 900px) { .vao { grid-template-columns: minmax(0, 1fr); } .vao__thuong { display: none; } .vao__form { padding: var(--s-7) var(--s-5); align-items: flex-start; } .thuong-hep { display: flex; } } @media (prefers-reduced-motion: reduce) { .vao, .vao__form, .vao__thuong { transition: none; } } /* ── tokens/kinh.css ── */ /* ========================================================================== T4 — KINH.CSS · HIỆU ỨNG KÍNH TRONG SUỐT (glassmorphism) Sếp yêu cầu 06/10/2026: áp cho cả trang đăng nhập LẪN portal/CMS bên trong. Nguồn: số đo thật của uupm.cc (đọc từ stylesheet, không phỏng đoán): · thanh cố định (nav): backdrop-filter: blur(24px) nền 85% đục · viền 1px trắng 10% · bo 16px · thẻ: nền 8% + viền 10% · KHÔNG blur (toàn trang chỉ 1 phần tử có blur — chính là nav) ⇒ Áp đúng như vậy: BLUR chỉ cho thanh cố định (tiết kiệm GPU), thẻ chỉ nền bán trong suốt + viền. ĐIỀU KIỆN SỐNG CÒN: gương chỉ thấy khi CÓ THỨ MÀU Ở PHÍA SAU. Portal là dashboard nền phẳng ⇒ phải tự thêm vệt màu nền. Đó là khối `body::before` dưới đây (đo lại: blob phải nằm TRONG khung nhìn). HOÀN TÁC: xoá 1 thẻ khỏi màn đó là về nguyên trạng. ========================================================================== */ :root { --kinh-blur: 24px; --kinh-nen-thanh: color-mix(in srgb, var(--surface) 72%, transparent); --kinh-nen-the: color-mix(in srgb, var(--surface) 62%, transparent); /* CHẾ ĐỘ SÁNG phải dùng viền XẪM. Viền trắng trên nền sáng là VÔ HÌNH (đo thật: rgba(255,255,255,.55) trên nền #F1F5F9 — không thấy gì). uupm chế độ sáng dùng border 1px rgba(229,231,235,.8) = xám slate-200. */ --kinh-vien: color-mix(in srgb, var(--n-8) 20%, transparent); } [data-theme='dark'] { --kinh-nen-thanh: color-mix(in srgb, var(--surface) 68%, transparent); --kinh-nen-the: color-mix(in srgb, var(--surface) 55%, transparent); --kinh-vien: color-mix(in srgb, var(--n-0) 12%, transparent); } /* ---------- 1. VỆT MÀU NỀN: thứ để gương nhoè ---------- Cố định toàn trang, nằm DƯỚI mọi thứ (z-index -1). Suy từ token nên tự đúng cả 26 bảng màu. Đây chính là phần làm hiệu ứng kính NHÌN THẤY ĐƯỢC. */ body { position: relative; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 80% at 50% -20%, color-mix(in srgb, var(--app) 30%, transparent), transparent 70%), radial-gradient(50% 50% at 80% 55%, color-mix(in srgb, var(--app-nong, var(--g-3)) 18%, transparent), transparent 72%); } /* ---------- 2. THANH CỐ ĐỊNH: KÍNH THẬT (có blur) ---------- LƯU Ý: `.xuong__ben` (thanh bên) KHÔNG nằm trong nhóm này. Nó đã có gradient ĐẬM theo màu hệ ở `tokens/layout.css` — cho nền bán trong suốt vào là phá mất tầng đậm đó (đo thật: thanh bên thành trắng 72%, Sếp gọi là "menu left trắng tinh"). Chỉ thêm blur, giữ nguyên nền. */ .xuong__tren, .xuong__ray, .dau { background: var(--kinh-nen-thanh); -webkit-backdrop-filter: blur(var(--kinh-blur)) saturate(1.5); backdrop-filter: blur(var(--kinh-blur)) saturate(1.5); } /* ── THANH BÊN: nền ĐẬM theo màu hệ (giữ nguyên từ layout.css) ── Chỉ chỉnh vài chỗ để hợp giao diện kính: bo góc phải trên/dưới cho khớp thanh trên, và chữ dùng độ mờ trắng như cũ. */ .xuong__ben { background: linear-gradient(170deg, color-mix(in srgb, var(--app-deep) 92%, rgb(0 0 0)) 0%, color-mix(in srgb, var(--app-deep) 78%, rgb(0 0 0)) 52%, color-mix(in srgb, var(--app-deep) 88%, rgb(0 0 0)) 100%); } /* chữ trong thanh bên: trắng mờ — đúng như đã duyệt ở lượt trước */ .xuong__ben, .xuong__ben .menu, .xuong__ben .menu__muc, .xuong__ben .menu__muc span, .xuong__ben .thuong__ten, .xuong__ben .lb, .xuong__ben .menu__nhan, .xuong__ben .menu__mui { color: rgb(255 255 255 / .88); } .xuong__ben .menu__muc .sv { color: rgb(255 255 255 / .70); } .xuong__ben .menu__muc:hover { background: rgb(255 255 255 / .14); color: #fff; } .xuong__ben .menu__muc--chon { background: rgb(255 255 255 / .22); color: #fff; } .xuong__ben .menu__muc--chon .sv { color: #fff; } .xuong__ben .menu__huy, .xuong__ben .menu__muc b { background: rgb(255 255 255 / .26); color: #fff; } .xuong__ben .av { background: rgb(255 255 255 / .26); color: #fff; } .xuong__ben .n--t { color: rgb(255 255 255 / .88); } .xuong__ben .n--t:hover { background: rgb(255 255 255 / .16); color: #fff; } /* ---------- 3. THẺ / HỘP: KÍNH MỜ (nền bán trong suốt + viền, KHÔNG blur) ---------- */ .the, .luoi-du-lieu, .tp, .hop-thoai, .ngan-keo, .noi, .vao__hop, .khu { background: var(--kinh-nen-the); border-color: var(--kinh-vien); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* bảng dữ liệu nhiều ô ⇒ GIỮ NỀN ĐỤC cho dễ đọc số (ponytail: blur bảng làm chữ số nhoè, đọc báo cáo không nổi) */ .luoi-du-lieu { background: color-mix(in srgb, var(--surface) 88%, transparent); } /* ---------- 4. Ô NHẬP: kính nhẹ ---------- */ .o, select, textarea { background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ---------- 5. GIẢM CHUYỂN ĐỘNG ---------- */ @media (prefers-reduced-motion: reduce) { .the, .luoi-du-lieu, .tp, .hop-thoai, .ngan-keo, .noi, .o { transition: none; } } /* ── tokens/mau-uupm.css ── */ /* ========================================================================== T7 — PHỐI MÀU THEO uupm.cc · tokens/mau-uupm.css Sếp yêu cầu 06/10/2026: "màu cũng nên phối bắt chước ui ux pro max, màu nó đẹp vừa phải". SỐ ĐO THẬT từ https://uupm.cc/ (đọc từ stylesheet + computed style): · nhấn chính #2563EB (blue-600) · sáng hơn #3B82F6 (blue-500) · nhấn nóng #F97316 (orange-500) · gradient nhấn linear-gradient(90deg, #2563EB, #3B82F6, #F97316) · aurora radial 80%80% @50% -20% rgba(37,99,235,.30) radial 50%50% @80% 50% rgba(249,115,22,.15) · trung tính ĐÚNG thang Tailwind SLATE (không phải xám trung tính) · SÁNG nền #F8FAFC · hộp trắng .85 · chữ #0F172A · phụ #475569 · TỐI nền #0B0B10 · hộp trắng .08 · chữ #F8FAFC · phụ #94A3B8 ĐẶC TRƯNG DỄ NHẬN NHẤT: uupm chỉ dùng MỘT màu nhấn + MỘT màu nóng, còn lại là thang xám slate. Đó là lý do nó "đẹp vừa phải" — không sặc sỡ. 🔴 SẾP CHỐT 07/10/2026 — PHƯƠNG ÁN B "MỖI HỆ MỘT SẮC": uupm chỉ còn là lớp PHỐI MÀU CHUNG (thang xám slate + chế độ sáng/tối + aurora + gradient). MÀU NHẤN `--app` KHÔNG còn đè màu hệ: 23 hệ trong apps.css giữ bản sắc riêng. Đo thật trước khi sửa: khối cũ `html[data-app]:not([data-bang-mau])` (0-2-1) đè `[data-app=…]` (0-1-0) nên 23 hệ ra CÙNG một màu #2563EB. HOÀN TÁC: xoá 1 thẻ khỏi màn đó. ========================================================================== */ /* ---------- 1. THANG TRUNG TÍNH → TAILWIND SLATE ---------- Đè `:root` của core.css (cùng độ đặc hiệu 0-1-0) và nạp SAU nên thắng. Vì theme.css suy --bg/--surface/--text/--border TỪ thang này, sửa một chỗ là đổi màu toàn hệ — không phải vá từng vai trò. */ :root { --n-0: #FFFFFF; /* trắng thuần */ --n-1: #F8FAFC; /* slate-50 */ --n-2: #F1F5F9; /* slate-100 */ --n-3: #E2E8F0; /* slate-200 */ --n-4: #CBD5E1; /* slate-300 */ --n-5: #94A3B8; /* slate-400 */ --n-6: #64748B; /* slate-500 */ --n-7: #475569; /* slate-600 */ --n-8: #334155; /* slate-700 */ --n-9: #1E293B; /* slate-800 */ --n-10: #0F172A; /* slate-900 */ --n-11: #020617; /* slate-950 */ --n-12: #0B0B10; /* nền tối của uupm (đen ngả xanh) */ } /* ---------- 2. MÀU NHẤN: chỉ cho trang CHƯA GÁN HỆ NÀO ---------- `html:not([data-app])` ⇒ trang có `data-app` thì apps.css giữ nguyên sắc hệ. Vẫn nhường khi người dùng đã chọn bộ màu hoặc màu tự chọn. (màu nóng --app-nong* đã chuyển ra tầng chung ở theme.css — mọi hệ đều có) */ html:not([data-app]):not([data-bang-mau]):not([data-mau-tuy-chon]) { --app: #2563EB; --app-light: #3B82F6; --app-deep: #1D4ED8; --app-soft: #EFF6FF; --app-border: #BFDBFE; --app-contrast: #FFFFFF; --focus-ring: #2563EB; } /* ---------- 3. CHẾ ĐỘ SÁNG: 4 bậc chữ đúng uupm ---------- theme.css sáng đặt --text: var(--n-12). Thang n-* giờ là slate nên phải gán RÕ 4 bậc chữ cho khớp uupm (chữ #0F172A · phụ #475569), nếu không thang 13 nấc không map thẳng được vào slate 11 nấc. */ html, [data-theme='light'] { --text: #0F172A; /* uupm: chữ chính — 16,3 trên nền */ --text-2: #334155; /* slate-700 */ --text-3: #475569; /* uupm: chữ phụ — 6,9 */ --text-4: #57667C; /* đo 09/10/2026: #5B6A80 đạt 5,02 trên nền TRANG nhưng chỉ 4,46 trên --nen-vung #E2E8F0 (khối "vùng nền") ⇒ TRƯỢT AA ở đó. #57667C = 4,74 trên --nen-vung, 5,2 trên nền trang. */ --nen-vung: #E2E8F0; } /* ---------- 4. CHẾ ĐỘ TỐI: khớp TỪNG SỐ ĐO của uupm ---------- Đo trên bản render uupm (dark): nền trang rgb(11,11,16) = #0B0B10 section xen kẽ rgb(18,18,24) = #121218 thẻ / khối rgba(255,255,255,.08) + viền rgba(255,255,255,.1) thanh cố định rgba(17,24,39,.85) = #111827 nút phụ (ghost) rgba(255,255,255,.05) + viền .1 chữ chính #F8FAFC · phụ #94A3B8 */ [data-theme='dark'] { --bg: #0B0B10; --surface: #111827; --surface-2: #121218; --surface-hover: #1A1A22; --control: #121218; --control-hover: #1A1A22; --control-active: #23232C; --border: #1F2937; --border-manh: #334155; --text: #F8FAFC; --text-2: #CBD5E1; --text-3: #94A3B8; --text-4: #7C8798; --nen-vung: #121218; } /* nút phụ / ô nhập ở chế độ tối: nền trắng 5% như uupm, KHÔNG dùng xám đặc */ [data-theme='dark'] .n--t, [data-theme='dark'] .n--k { background: color-mix(in srgb, var(--n-0) 5%, transparent); border-color: color-mix(in srgb, var(--n-0) 10%, transparent); } [data-theme='dark'] .the, [data-theme='dark'] .luoi-du-lieu { border-color: color-mix(in srgb, var(--n-0) 10%, transparent); } /* ---------- 4. AURORA ĐÚNG 2 VỆT CỦA UUPM ---------- uupm: 1 vệt xanh (trên) + 1 vệt cam (phải). Dùng cho khối mở đầu. */ .mo-dau::before { background: radial-gradient(80% 80% at 50% -20%, color-mix(in srgb, var(--app) 40%, transparent), transparent 70%) !important; opacity: 1 !important; } .mo-dau::after { background: radial-gradient(50% 50% at 80% 60%, color-mix(in srgb, var(--app-nong, var(--g-3)) 26%, transparent), transparent 72%) !important; opacity: 1 !important; } /* ---------- 5. CHỮ NHẤN TRONG TIÊU ĐỀ ---------- 🔴 ĐÃ XOÁ luật tô chuyển sắc (10/10/2026). Nó ghi đè luật ĐÚNG của từng trang (`.tieu-de-lon em { color: var(--app-chu) }` — `--app-chu` là token chữ nhấn đã pha tương phản theo chế độ) bằng một gradient chữ trong suốt. Đo thật 2 trang, nền dải anh hùng KHÁC NHAU: 01-landing : dải TRẮNG #FFFFFF (chế độ sáng) → gradient bắt đầu `--app` #3730A3 09-landing : dải #0E0A21 (chế độ tối) → gradient bắt đầu `--app` #3730A3 Một luật toàn cục KHÔNG THỂ đúng cho cả hai. Và `mau-thu/phong-cach-uupm.css` còn khai lại y hệt ⇒ hai nguồn một khối (L18). Bỏ cả hai, trả quyền cho trang. */ /* ---------- 6. GIẢM CHUYỂN ĐỘNG ---------- */ @media (prefers-reduced-motion: reduce) { .mo-dau::before, .mo-dau::after { transition: none; } } /* ── tokens/mau-tuy-chon.css ── */ /* ========================================================================== T8 — MÀU TÙY CHỌN CỦA NGƯỜI DÙNG · tokens/mau-tuy-chon.css Sếp yêu cầu 06/10/2026: "sáng tạo thêm color theme cho người dùng có thể chọn color tùy ý". CÁCH LÀM (rẻ nhất): người dùng chọn MỘT màu bằng (thẻ có sẵn của trình duyệt, KHÔNG thêm thư viện). JS chỉ ghi 1 biến `--app-chon`; CSS tự suy 5 nấc còn lại bằng `color-mix` ⇒ không phải lưu 25 bộ màu, không phải sinh tệp. ĐIỀU KHIỂN TƯƠNG PHẢN: nút tô nền `--app` cần chữ đọc được, mà CSS thuần không so sánh được độ sáng ⇒ JS tính rồi đặt `--app-contrast` (đen hay trắng). Giá trị trong tệp này là DỰ PHÒNG khi JS chưa chạy. CHỌN MỘT TRONG HAI: người dùng hoặc chọn BỘ MÀU có sẵn (`data-bang-mau`) hoặc MÀU TÙY CHỌN (`data-mau-tuy-chon`). `tuy-chon.js` xoá cái kia khi người dùng đổi lựa chọn ⇒ không phải đấu thứ tự nạp tệp. ========================================================================== */ /* Chỉ chạy khi người dùng ĐÃ chọn màu tự do; chưa chọn thì không đụng gì. ĐỘ ĐẶC HIỆU PHẢI CAO HƠN `html[data-app]:not([data-bang-mau])` trong mau-uupm.css (0-2-1), nếu không `--app` vẫn ra màu mặc định — đo thật: chọn #E11D48 mà --app vẫn #2563EB. `html[data-app][data-mau-tuy-chon]:not([data-bang-mau])` = 0-3-1 ⇒ thắng chắc chắn, KHÔNG phụ thuộc thứ tự nạp tệp. */ html[data-app][data-mau-tuy-chon]:not([data-bang-mau]) { --app: var(--app-chon); /* nấc sáng: pha 18% về phía nền để nổi hơn nhưng không chói */ --app-light: color-mix(in srgb, var(--app-chon) 82%, var(--n-0)); /* nấc đậm: pha 22% về phía chữ nghịch (đen ở nền sáng, trắng ở nền tối) */ --app-deep: color-mix(in srgb, var(--app-chon) 78%, var(--text-nghich)); /* nấc nhạt: pha 92% về phía nền — dùng cho chip, mục đang chọn */ --app-soft: color-mix(in srgb, var(--app-chon) 8%, var(--surface)); --app-border: color-mix(in srgb, var(--app-chon) 32%, var(--surface)); /* CHỮ TRÊN NỀN MÀU: chọn đen/trắng theo độ sáng của màu người dùng. CSS thuần không so sánh được độ sáng ⇒ JS tính rồi đặt `--app-contrast` (xem doSang() trong tuy-chon.js). Giá trị dưới là DỰ PHÒNG. */ --app-contrast: var(--n-0); --focus-ring: color-mix(in srgb, var(--app-chon) 78%, #000000); } /* Ở chế độ tối, nấc "nhạt" phải pha về phía nền tối, nếu không chip sẽ sáng chói */ html[data-theme='dark'][data-app][data-mau-tuy-chon]:not([data-bang-mau]) { --app-soft: color-mix(in srgb, var(--app-chon) 22%, var(--surface)); --app-border: color-mix(in srgb, var(--app-chon) 46%, var(--surface)); /* Vòng tiêu điểm màu tự pha: cũng phải đạt 3:1 — đo như 48 màu gốc */ --focus-ring: color-mix(in srgb, var(--app-chon) 76%, #FFFFFF); } /* Ô chọn màu trong bảng tùy chọn — tự vẽ lại cho khớp hệ (mặc định trình duyệt là ô vuông bo nhỏ, lệch hẳn các điều khiển khác). */ .chon-mau-tu { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3); cursor: pointer; border: var(--v-mong) solid var(--border-manh); border-radius: var(--radius-control); background: var(--surface); } .chon-mau-tu:hover { background: var(--surface-hover); } .chon-mau-tu input[type='color'] { flex: none; inline-size: var(--s-7); block-size: var(--control-h); padding: 0; border: 0; background: none; cursor: pointer; } /* bỏ viền lõm mặc định của trình duyệt trên ô màu */ .chon-mau-tu input[type='color']::-webkit-color-swatch-wrapper { padding: 0; } .chon-mau-tu input[type='color']::-webkit-color-swatch { border: var(--v-mong) solid var(--border-manh); border-radius: var(--r-sm); } .chon-mau-tu b { font-weight: var(--fw-vua); } .chon-mau-tu span { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: max(var(--fs-nho), calc(var(--fs-base) * .9)); }