/* ═══════════════════════════════════════════════════════════════════════════ THE REED CHESS CLUB — Bộ token thiết kế (nguồn chân lý duy nhất) ───────────────────────────────────────────────────────────────────────── Màu lấy TRỰC TIẾP từ logo chính thức (wwwroot/img/brand/logo-trc.png): Vua cờ + bàn cờ xanh + bông sậy + vòng nguyệt quế trên nền vàng chanh. File này CHỈ khai báo biến, KHÔNG áp style lên bất kỳ thẻ nào — nạp vào trang cũ cũng không làm đổi giao diện trang đó. Quy tắc dùng: - Đặt tên theo CÔNG DỤNG (--surface-1, --text-muted), không theo màu. Sau này thêm chế độ tối chỉ cần khai lại token, không sửa trang nào. - Xanh #117844 là màu chủ đạo (nút chính, link, tiêu đề brand). - VÀNG CHANH #FBFE2F chỉ làm điểm nhấn nhỏ (chấm trạng thái, ring) trên nền xanh đậm — KHÔNG bao giờ làm màu chữ, KHÔNG làm nền cho chữ trắng. - Trang TRẺ EM (Step1) dùng palette candy riêng nhưng lấy gốc từ đây. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Màu thương hiệu (từ logo — không đổi) ────────────────────────── */ --trc-green-deep: #0B5C33; --trc-green: #117844; --trc-green-bright: #1B8A4F; --trc-green-soft: #DCFCE7; --trc-yellow: #FBFE2F; --trc-cream: #FFFDF0; /* Bản RGB rời (không có #) — dùng khi cần độ TRONG SUỐT thật (rgba()), ví dụ lớp phủ trên quân cờ vẫn phải thấy quân bên dưới. KHÔNG dùng color-mix() cho việc này — Chrome cũ (<111) không đọc được, máy ở trường không chắc đã cập nhật. rgba() chạy được từ IE9. */ --trc-green-rgb: 17, 120, 68; --trc-green-bright-rgb: 27, 138, 79; --trc-yellow-rgb: 251, 254, 47; --trc-brass: #B08D57; /* nhấn cho PA2 "Đồng cỏ lau" */ --trc-brass-deep: #6B5228; /* brass đậm — chữ trên nền kem/brass-soft, hover (tỉ lệ tương phản ≥6:1 trên brass-soft) */ --trc-brass-soft: #F1E8D8; /* brass rất nhạt — nền chip/nhãn trên PA2 */ --trc-ink-warm: #2B241C; /* mực ấm cho PA2 — thay --text-primary lạnh hơn của PA1 */ --trc-ink-warm-soft: #6B6154; /* chữ phụ ấm cho PA2 */ --trc-line-warm: #E6DCC8; /* viền/đường kẻ ấm cho PA2, thay --border lạnh hơn của PA1 */ /* ── 2. Nền (surface) — số càng lớn càng nổi lên trước ───────────────── */ --surface-0: #F4F6F4; /* nền trang, hơi ngả xanh */ --surface-1: #FAFCFA; /* sọc hàng bảng, vùng chìm */ --surface-2: #FFFFFF; /* thẻ, bảng, hộp thoại */ --surface-3: #EFF3F0; /* đầu bảng, thanh công cụ */ /* ── 3. Chữ ─────────────────────────────────────────────────────────── */ --text-primary: #101A14; /* xanh-đen, ấm hơn đen thuần */ --text-secondary: #5A6960; /* 17/10/2026 (Mốc 2 – NEN): #66736B → #5F6C64. #66736B chỉ đạt AA trên nền trắng/--surface-0..1 (4.57–4.97) nhưng TRƯỢT trên nền nhạt có màu: --surface-3 4.43, --success-bg 4.23, --info-bg 4.32, --warning-bg 4.46, --danger-bg 4.29 (axe đo thật ở Admin/Index "bài chờ HLV xem lại", Coach/GradeDetail). #5F6C64 đạt ≥4.53 trên MỌI nền của bảng (trắng 5.50 · surface-3 4.91 · success-bg 4.69). Cùng dải xanh-xám, chỉ tối hơn ~6%; vẫn nhạt hơn --text-secondary (#5A6960). Không phải màu thương hiệu. */ --text-muted: #5F6C64; --text-inverse: #FFFFFF; --text-accent: var(--trc-green); /* ── 4. Viền ────────────────────────────────────────────────────────── */ --border: #E1E7E2; --border-strong: #D6DFD9; --border-accent: var(--trc-green); /* ── 5. Trạng thái ──────────────────────────────────────────────────── */ --success: #117844; --success-bg: #E6EFE9; --success-text: #0B5C33; --danger: #C0392B; --danger-bg: #FBEBE9; --danger-text: #8C2318; --warning: #B45309; --warning-bg: #FEF3C7; --warning-text: #7C3A06; --info: #1B6B8A; --info-bg: #E6F1F5; --info-text: #11485E; /* 04/10/2026 (Phase 3.6a): màu VIỀN cho khung nền --*-bg (ô báo đúng/sai, cảnh báo). Giá trị lấy nguyên từ TOAST_SKIN của trc-ui.js (cột viền của toast); #E8B5AE còn nằm ở Views/PlanForm — gom về token để lô 3.6b/c dùng lại. */ --success-border: #A8CDB8; --danger-border: #E8B5AE; --warning-border: #E8CE8A; /* Hai tông riêng cho bảng "Lịch tập đăng ký" phân biệt hình thức tập — không dùng --warning (đã là màu cảnh báo, ý nghĩa khác) hay --trc-yellow (vàng chanh logo, giữ nguyên "không bao giờ làm màu chữ/nền chữ trắng"). Đổi tông 15/09/2026 (Thầy Nam nhắc lại rõ "1:1 HLV = cam") từ vàng-gold (#B8860B) sang cam thật, giữ nguyên tên biến — chỉ 1 chỗ dùng, không phải sửa lại các class đang gọi --tone-amber-*. */ --tone-amber: #C2570C; --tone-amber-bg: #FFE8D6; --tone-amber-text: #8A3A08; --tone-gray-bg: var(--surface-3); --tone-gray-text: #3E4A42; /* 26/09/2026 (dự án skill, Phase 3.1): chuyển từ hex cứng trong trc-layout.css về đây. purple = nhãn vai Admin (+ Step1Feedback/Step1Report), lime = nhãn vai Phụ huynh. */ --tone-purple-bg: #EDE9FE; --tone-purple-text: #6D28D9; /* 5.98:1 trên --tone-purple-bg */ --tone-lime-bg: #ECFCCB; --tone-lime-text: #3F6212; /* 6.52:1 trên --tone-lime-bg */ /* ── 6. Chữ: font + thang cỡ ────────────────────────────────────────── */ /* Đổi --trc-font-ui là đổi font toàn bộ màn quản trị, không sửa trang nào. Dùng font hệ thống, KHÔNG tải font ngoài, vì: máy dùng đều là Windows, "Segoe UI" có đủ dấu tiếng Việt và được tinh chỉnh sẵn cho cỡ chữ nhỏ; 0 KB, không lỗi khi mất mạng, không phải commit file nhị phân không tái tạo được (dự án không có bước build để sinh lại subset). "Segoe UI Variable Text" là bản tinh chỉnh của Windows 11; Windows 10 tự rơi xuống "Segoe UI". */ --trc-font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'Liberation Sans', Arial, sans-serif; --trc-font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif; --trc-font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif; --trc-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; --fs-xs: 0.75rem; /* 12px — nhãn cột, chú thích (17/10/2026 Mốc 2: từ 11px lên 12px — chữ nhỏ nhất của web; dưới 768px xem site.css) */ --fs-sm: 0.75rem; /* 12px — phụ đề, hint */ --fs-base: 0.8125rem; /* 13px — chữ thân, ô bảng */ --fs-md: 0.875rem; /* 14px — nút, input */ --fs-lg: 1rem; /* 16px — tiêu đề khối */ --fs-xl: 1.125rem; /* 18px — tiêu đề trang */ --fs-2xl: 1.5rem; /* 24px — số liệu lớn */ --fs-3xl: 2rem; /* 32px — số liệu nổi bật */ --lh-tight: 1.25; --lh-base: 1.5; /* ── 7. Khoảng cách (bậc 4px) ───────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; /* ── 8. Bo góc ──────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ── 9. Đổ bóng — dùng rất tiết chế, PA1 ưu tiên viền hơn bóng ───────── */ --shadow-sm: 0 1px 2px rgba(16, 26, 20, .05); --shadow-md: 0 2px 8px rgba(16, 26, 20, .07); --shadow-lg: 0 12px 32px rgba(16, 26, 20, .14); /* ── 10. Z-index — khai tập trung để hết lỗi chồng lớp ──────────────── */ /* Lỗi cũ: .trc-dlg-backdrop có nơi 1000, có nơi 1055 → hộp thoại chui xuống dưới modal Bootstrap. Bootstrap: modal 1055, tooltip 1080. */ --z-sticky: 900; --z-topbar: 1000; --z-dropdown: 1050; --z-dialog: 1060; /* trên modal Bootstrap (1055) */ --z-toast: 1090; /* trên tất cả */ /* ── 11. Khung app ──────────────────────────────────────────────────── */ --app-max-w: 1500px; /* 26/09/2026: 1400 → 1500, khớp giá trị trc-layout.css đang chạy ("giống ảnh mẫu") */ --app-backdrop: #ABDBC4; /* nền xanh bạc hà quanh khung app (body trong trc-layout.css) */ --transition: .18s ease; /* ── 12. Bàn cờ vẽ bằng CSS (bàn mini, ảnh xem trước) — không áp cho cm-chessboard ── */ /* 26/09/2026 (Phase 3.4b, QĐ-010): nâu cổ điển đang lặp ở Admin/FlashCards, Admin/PuzzleSetDetail, Prospect/ToaThanh, Prospect/TrinhTham. Không có chữ nằm trên ô → không áp chuẩn tương phản chữ. */ --board-light: #F0D9B5; --board-dark: #B58863; /* 04/10/2026 (Phase 3.6a): bảng màu bàn cờ Vỡ lòng Thầy chốt 21/09/2026 — cùng giá trị --s1-board-* ở trc-step1.css, nhưng trang công khai (Quiz) không nạp trc-step1.css. Dùng cho cm-chessboard (fill) và bàn CSS của Quiz/Take, Quiz/Result, Prospect/ToaThanh, Prospect/TrinhTham. Không có chữ nằm trên ô → không áp chuẩn tương phản chữ. */ --board-vl-light: #F7FAEB; --board-vl-dark: #8FAF6A; --board-vl-frame: #6B8F4E; } /* ═══════════════════════════════════════════════════════════════════════════ TƯƠNG THÍCH NGƯỢC — giữ cho tới khi chuyển đổi xong toàn bộ trang ───────────────────────────────────────────────────────────────────────── Có 80 chỗ dùng var(--primary…) nằm rải trong 11 file (5 partial _Architect*, Coach/Step1*, Admin/Step1Exercises…). Các biến đó hiện được khai trong khối