/* ============================================================ Be Vietnam Pro — tự host, subset vietnamese + latin, weight 400/500/600/700/800 ============================================================ */ @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/be-vietnam-pro-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/be-vietnam-pro-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/be-vietnam-pro-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/be-vietnam-pro-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/be-vietnam-pro-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ DESIGN TOKENS — 04_Design_System.md Lớp 1 (primitive) → lớp 2 (semantic). Component CHỈ dùng semantic. ============================================================ */ :root { /* --- Primitive: Slate --- */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; /* --- Primitive: Green (hành động + thương hiệu) --- */ --green-50: #E9F9EF; --green-100: #D9F2E3; --green-200: #A6E0BC; --green-400: #22C55E; --green-500: #16A34A; --green-600: #15803D; --green-700: #0F6B30; /* --- Primitive: Court (XANH THẢM SÂN CẦU LÔNG — primary hành động + thương hiệu) --- Xanh lá ngả lam, trầm — màu mặt thảm thi đấu BWF/Yonex. Đây là "xanh lá điềm đạm làm neo thương hiệu (không phải xanh 'success' chói)" mà 02_Brand_Identity.md § 7.3/§ 8 đã chốt; code trước đây dùng --blue-500 nên lệch với brand doc, đợt này đưa về đúng hướng. 🔴 Ngả LAM là điều kiện, không phải sở thích: brand doc buộc primary phải "tách khỏi màu-ngữ-nghĩa-tiền". Chọn một xanh lá thuần (vd #157A47) sẽ gần như trùng --money-positive (#15803D) ⇒ nút "Lưu" và con số tiền dương cùng màu trên cùng màn hình. Tương phản đã tính theo công thức WCAG, không ước lượng: court-500 trên trắng / trắng trên court-500 = 5,29:1 (blue-500 cũ: 5,17:1 — nhỉnh hơn một chút) court-700 trên court-100 = 7,63:1 (chữ mục nav đang chọn; cặp blue cũ: 7,15:1) court-400 trên --surface tối (#1E293B) = 6,68:1 (blue-400 cũ: 5,75:1) court-300 trên --surface tối = 8,74:1 (hover, phải sáng hơn base) trắng trên court-600 = 7,11:1 (nền đặc ở theme tối; blue-600 cũ: 6,70:1) court-650 (#0B5A48) + court-800 (#0A493B) thêm 2026-08-27 khi làm NHẠT nền sidebar — chỉ phục vụ --nav-bg, số đo tương phản của chúng nằm ở khối --nav-* bên dưới. */ --court-50: #ECF8F4; --court-100: #D3EDE4; --court-200: #A5DBC8; --court-300: #7FD9BC; --court-400: #3EC49E; --court-500: #0E7A5F; --court-600: #0A6450; --court-650: #0B5A48; --court-700: #08503F; --court-800: #0A493B; --court-900: #093A2F; --court-950: #06281F; /* --- Primitive: Blue (KHÔNG còn là màu thương hiệu — chỉ là một Ô MÀU PHÂN LOẠI) --- 🔴 Đừng đổi ramp này sang xanh thảm cho "thống nhất": nó đang phục vụ bánh xe màu avatar (--c0), .badge-soft.is-blue, .stat-card__icon.is-blue, --status-info và .app-alert.is-info — những chỗ mà xanh dương mang NGHĨA (thông tin / một ô trong dải màu phân biệt người), không mang thương hiệu. Đổi ở đây là đổi nghĩa, và làm tên biến nói dối. */ --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-300: #93C5FD; --blue-400: #60A5FA; --blue-500: #2563EB; --blue-600: #1D4ED8; --blue-700: #1E40AF; /* --- Primitive: Violet (accent icon tile) --- */ --violet-500: #7C3AED; --violet-300: #C4B5FD; /* --- Primitive: Red (danger / money âm) --- */ --red-50: #FEF2F2; --red-100: #FBDADA; --red-200: #F3A8A8; --red-400: #F87171; --red-500: #DC2626; --red-600: #B91C1C; --red-700: #8A1919; /* --- Primitive: Amber (accent ấm) --- */ --amber-50: #FFF7ED; --amber-100: #FDE5D1; --amber-200: #FBC496; --amber-400: #FB923C; --amber-500: #F97316; --amber-600: #EA580C; --amber-700: #7C380B; /* --- Primitive: Pink (icon giới tính Nữ trên trang chia sẻ công khai — KHÔNG dùng cho tiền) --- */ --pink-300: #F9A8D4; --pink-700: #BE185D; /* --- Spacing (4px) --- */ --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* --- Radius --- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-btn: 14px; --radius-card: 20px; --radius-pill: 999px; /* --- Content width --- */ --w-narrow: 560px; --w-content: 720px; --w-wide: 960px; /* --- Motion --- */ --motion-instant: 100ms; --motion-fast: 150ms; --motion-base: 250ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* --- Kích thước khung --- */ --sidebar-width: 248px; --bottom-nav-height: 73px; --topbar-height: 56px; /* Khe hở giữa viên thuốc điều hướng và hai mép NGANG của màn hình (trái · phải). Một nguồn cho `padding-inline` của khung nav. */ --bottom-nav-gap: 12px; /* Khe hở DƯỚI, tách khỏi khe ngang (22/09/2026 — người dùng báo nav trông xa mép dưới quá). Hai khe không cùng vai trò nên không dùng chung một con số: khe ngang 12px là để nội dung cuộn qua thấy được hai bên viên thuốc, còn khe dưới chỉ cần đủ cho bóng đổ + bo góc 20px đọc ra là "nổi" chứ không phải "dán mép". 4px làm được việc đó mà nav vẫn sát đáy. 🔴 Đổi con số này phải đổi luôn --bottom-nav-height ở trên (= khe dưới + thân 69 đo được) và giá trị AdSenseAdviceTest chốt — token là CẢ DẢI nav chiếm, không phải chiều cao thân. */ --bottom-nav-gap-bottom: 4px; /* Trần bề ngang viên thuốc lúc THU NHỎ: 5 ô × 56px + 2 × 8px đệm = 296. Là `max-width` chứ không phải `width` để nội suy mượt được từ trạng thái giãn (`100%`) — và vì nav chỉ có 4 ô khi người dùng không thấy Sổ quỹ, lúc đó 4 ô chia nhau 296px, mỗi ô rộng hơn chứ không hụt vùng chạm. */ --bottom-nav-compact-max: 296px; /* Khe dưới 4px + viên thuốc thu gọn 50px (ô chạm 48px và viền 2px). Chỉ các lớp nổi dùng mốc này; phần đệm nội dung vẫn giữ chiều cao nav đầy đủ. */ --bottom-nav-compact-height: 54px; /* Chiều cao nút nổi Góp ý (.bmh-fab) — một nguồn cho cả nút lẫn phần `.page-content` chừa ra để dòng cuối trang cuộn lên được khỏi nút. */ --fab-height: 48px; /* 🔴 --bottom-nav-height là cả DẢI CHIỀU DỌC mà .app-bottom-nav chiếm ở đáy màn hình, không phải con số thiết kế: khe hở dưới (--bottom-nav-gap-bottom 4) + chiều cao thật đo được của viên thuốc (69) = 73. Nav không lấy chiều cao từ token này (nó tự cao theo nội dung: viền 1 + ô `min-height: 56px` nhưng thực tế 67,9 vì icon 20px mang line-height của bootstrap-icons) — token chỉ dùng để CÁC LỚP KHÁC né nó. Nên token nhỏ hơn dải thật = mọi lớp chồng lên trên đều tụt xuống đè vào nav. 🔴 Token KHÔNG co lại khi nav thu nhỏ (`is-compact`) dù lúc đó viên thuốc chỉ cao 48px. Cố ý: nếu `padding-bottom` của .page-content co theo thì toàn trang nhảy mỗi lần người dùng đổi hướng vuốt — đúng thứ khó chịu nhất khi đang đọc. Đổi lại là ~21px trống thừa dưới đáy lúc compact, mà chỗ đó đang có nội dung cuộn qua nên không ai thấy. Trước 2026-08-28 token là 60px trong khi đo được 68,9px ở 390×844 (tools/mobile-audit). Chênh 9px đó vô hại với `.page-content`/`.bmh-fab` vì hai chỗ đó còn cộng thêm --space-md (16px) nên vẫn dư — nhưng thanh quảng cáo dán đáy KHÔNG cộng gì: nó ngồi đúng `bottom: var(--bottom-nav-height)` nên đè lên 9px trên cùng của nav, tức che mất một dải của chính vùng chạm điều hướng (đo lại sau khi sửa: nav 775,1–844, quảng cáo 710–784 ⇒ chồng 8,9px). Sửa ở TOKEN chứ không cộng bù ở từng chỗ: mọi lớp né nav đều đúng một lần. */ /* Quảng cáo dán đáy màn hình (fragments/ads :: oQuangCaoDinh). Đặt cạnh --bottom-nav-height vì cùng loại: kích thước của một lớp cố định mà .page-content và nút Góp ý đều phải né. 🔴 --sticky-ad-band là chiều cao THẬT của cả thanh và là HỢP ĐỒNG — nút Góp ý và dòng cuối trang cộng đúng nó để né. Giá trị init ở đây là bản DESKTOP/TABLET (leaderboard 728×90: 4 padding + 13 nhãn + 4 + 90 + 1 viền = 112, làm tròn 114); tầng mobile hạ xuống banner 320×50 bằng cách override đúng ba token này, không sửa luật nào khác. 🔴 Nhưng con số init chỉ là DỰ ĐOÁN: khổ cuối cùng do AdSense chọn, nên chiều cao thật được script trong fragments/ads.html ĐO lại và ghi đè --sticky-ad-band. Đổi khổ quảng cáo giờ không còn bắt buộc phải nhớ sửa số ở đây — nhưng vẫn nên sửa cho lần vẽ đầu khỏi giật. */ --sticky-ad-height: 90px; --sticky-ad-band-init: 114px; --sticky-ad-max: 728px; /* 🔴 HAI token cho một chiều cao, vì có hai nguồn sự thật khác nhau: --sticky-ad-band-init = chiều cao CSS đoán trước, dùng cho lần vẽ đầu khi quảng cáo chưa về. Chỉ CSS đặt, không ai ghi đè. --sticky-ad-band = chiều cao THẬT của thanh, thứ .page-content / nút Góp ý / cột dọc cộng vào để né. Khởi đầu bằng init, rồi script trong fragments/ads.html ĐO thanh sau khi quảng cáo về và ghi đè inline lên . Tách ra vì thanh tự cao theo quảng cáo (min-height: init) — nếu chính nó cũng đọc --sticky-ad-band thì sau một quảng cáo 100px thanh không bao giờ co lại được cho quảng cáo 50px kế tiếp: min-height đã bị kéo lên 122px và tự giữ mình ở đó. */ --sticky-ad-band: var(--sticky-ad-band-init); /* Hai cột quảng cáo dọc hai bên nội dung (fragments/ads :: oQuangCaoDoc). Chỉ sống ở màn đủ rộng — ngưỡng tính ở khối .bmh-ad-side, không phải con số chọn cho đẹp. */ --side-ad-width: 120px; --side-ad-height: 600px; /* --- Sidebar TỐI — độc lập theme sáng/tối, luôn xanh thảm --- 🔴 Bộ CHỮ phải đổi cùng nền, không được giữ lại bộ xám-lam cũ (#C7D2E4 / #8394B0 / #64789B): xám ngả lam đứng trên nền xanh lá cho ra sắc tím bẩn. Bộ dưới đây ngả lục, chọn theo SỐ ĐO chứ không theo mắt — tính bằng công thức WCAG, KHÔNG ước lượng bằng mắt. 🟢 2026-08-27 — nền được LÀM NHẠT theo yêu cầu người dùng, HAI đợt trong cùng một ngày: đợt 1 court-900 → court-950 thành court-800 → court-900 (+~6 L*, người dùng đo bằng mắt thấy "gần như vẫn vậy"), đợt 2 thành court-650 → court-800 (L* 33,7 → 27,1). Tổng cộng đỉnh gradient sáng lên 12,5 điểm L* so với bản gốc #093A2F. Đỉnh (court-650 #0B5A48) là chỗ nền SÁNG NHẤT nên mọi con số dưới đây đo trên nó (worst case): --nav-text 6,63:1 (#C6DCD3 → #DCEBE4; giữ nguyên #C6DCD3 chỉ còn 5,67:1) --nav-text-muted 5,01:1 (#8FB3A8 → #9CBFB4 → #B7D0C8; giữ #9CBFB4 chỉ còn 4,09:1 — DƯỚI AA) --nav-group-label 3,70:1 (#6E9287 → #81A197 → #9AB4AC — bám đúng mức 3,69:1 lịch sử) --nav-text-strong 7,81:1 (#F8FAFC giữ nguyên) 🔴 --nav-text TỤT khỏi AAA (nền gốc 8,79 → 7,19 đợt 1 → 6,63 bây giờ). Vẫn trên AA (4,5) và đây là CÓ CHỦ Ý: kéo lại ≥7 phải dùng #E6F0EC (L* 94) — gần trắng hẳn, vừa làm nav mất sắc vừa nuốt luôn phân cấp với --nav-text-strong (#F8FAFC, L* 98) khiến hai bậc chữ không còn phân biệt được. Nhãn nhóm vốn đã dưới AA từ trước khi đổi màu; ở đây giữ NGUYÊN mức đó, không làm tệ hơn — nâng nó lên là việc của một task riêng về tương phản, không nhân tiện làm ở đợt đổi màu. 🔴 MỤC ĐANG CHỌN ĐỔI TỪ PILL XANH ĐẶC SANG PILL SÁNG — đây là hệ quả BẮT BUỘC của nền nhạt, không phải dọn thẩm mỹ tiện tay: nền cũ court-500 chỉ còn nổi 1,54:1 trên nền mới (bản gốc 2,39:1), tức gần như tan vào nền. Pill sáng court-100 nổi 6,62:1 trên đỉnh gradient và 8,38:1 ở đáy, chữ+icon court-700 trên court-100 đạt 7,63:1 — cao hơn cả cặp trắng/court-500 cũ (5,29:1). Vai trò này 04_Design_System.md vốn đã ghi sẵn cho court-100 ("nền mục nav đang chọn (sáng)"). 🔴 Đừng "tiết kiệm" bằng cách đẩy pill lên court-400 để giữ nền xanh: trắng trên court-400 chỉ 2,19:1 (xem ghi chú ở --action-primary-solid). Ô dấu thương hiệu (--nav-brand-mark-bg) VẪN là court-500 — BrandMarkTest gác nền ô đúng màu đó, và con cầu trắng bên trong vẫn giữ 5,29:1 dù ô bớt nổi trên nền nhạt. Đối chiếu bộ chữ xám-lam cũ trên nền navy trước đợt xanh thảm: #C7D2E4 10,81:1 · #8394B0 5,36:1 · #64789B 3,69:1. */ --nav-bg: linear-gradient(180deg, var(--court-650) 0%, var(--court-800) 100%); --nav-text: #DCEBE4; --nav-text-strong: #F8FAFC; --nav-text-muted: #B7D0C8; --nav-group-label: #9AB4AC; --nav-border: rgba(148,163,184,.14); --nav-hover-bg: rgba(148,163,184,.10); --nav-active-bg: var(--court-100); --nav-active-text: var(--court-700); --nav-brand-mark-bg: var(--court-500); } /* ============================================================ SEMANTIC — Light (mặc định) + [data-bs-theme="light"] ============================================================ */ :root, [data-bs-theme="light"] { --surface: #FFFFFF; --surface-sunken: var(--slate-50); --surface-muted: var(--slate-100); --border: var(--slate-200); --border-strong: var(--slate-300); --text: var(--slate-800); --text-strong: var(--slate-900); --text-muted: var(--slate-600); --text-disabled: var(--slate-400); --action-primary: var(--court-500); --action-primary-hover: var(--court-600); --action-secondary: var(--green-500); --money-positive: var(--green-600); --money-negative: var(--red-500); --money-neutral: var(--slate-800); --status-danger: var(--red-500); --status-warning: var(--amber-500); --status-info: var(--blue-500); /* 🔴 `--status-warning` là màu VIỀN/NỀN, KHÔNG dùng được làm màu CHỮ ở theme sáng: amber-500 (#F97316) trên nền trắng chỉ ra 2,8:1 — trượt cả 4,5:1 của chữ thường lẫn 3:1 của chữ ≥20px (MB-7, đo ở task 4.6 trên màn Báo cáo công nợ: "CLB nợ lại thành viên" + "CLB nợ họ …₫"). Đây là bậc CHỮ của cùng ngữ nghĩa cảnh báo, tách riêng thay vì đổi `--status-warning` — token kia đang làm đúng việc của nó ở `border-color` và không có vấn đề tương phản nào ở đó. amber-700 trên trắng = 8,65:1. Theme tối có bản đối ứng ngay dưới (khối [data-bs-theme="dark"]). */ --status-warning-text: var(--amber-700); --focus-ring: rgba(14, 122, 95, .38); /* Hộp thư thông báo — dòng CHƯA ĐỌC (ADR-22, `TB-4`). Nền phải nhấn đủ để thấy ngay trong `.modal-body` của chuông: bản đầu dùng `--bs-tertiary-bg`, gần như trùng nền modal nên hai trạng thái trông y hệt nhau (người dùng báo 09/09/2026). court-50 là bậc nhạt nhất của màu thương hiệu — nhấn được mà không biến danh sách thành một mảng màu. */ --tb-unread-bg: var(--court-50); --tb-unread-bg-hover: var(--court-100); --tb-unread-bar: var(--action-primary); --sidebar-active-bg: var(--court-100); --sidebar-active-text: var(--court-700); --elevation-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.06); --elevation-2: 0 2px 4px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08); --elevation-3: 0 8px 16px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.14); /* Badge soft — foreground đổi theo theme, background dùng rgba (chung 2 theme) */ --badge-green-fg: #0F6B30; --badge-blue-fg: #1E40AF; --badge-red-fg: #8A1919; --badge-amber-fg: #7C380B; --badge-slate-fg: #475569; /* --badge-pink-fg: var(--pink-700) — icon "Nữ" trên /chia-se/{token}. Trên trắng = 6,03:1 (AA). */ --badge-pink-fg: var(--pink-700); /* --- Ghi đè biến Bootstrap --- */ --bs-primary: var(--action-primary); --bs-primary-rgb: 14, 122, 95; --bs-primary-text-emphasis: var(--court-700); --bs-primary-bg-subtle: var(--court-100); --bs-primary-border-subtle: var(--court-200); /* Bootstrap :root bake --bs-link-color: #0d6efd. `a{}` bên dưới đã tự đặt màu, nhưng .btn-link và .link-primary đọc BIẾN này chứ không đọc quy tắc `a` ⇒ vẫn ra xanh dương nếu bỏ qua. */ --bs-link-color: var(--action-primary); --bs-link-color-rgb: 14, 122, 95; --bs-link-hover-color: var(--action-primary-hover); /* 🔴 `` — Bootstrap bake --bs-code-color: #d63384 (hồng). Trên nền TRANG (--surface-sunken #F8FAFC, vì app override --bs-body-bg thành nền chìm) ra ĐÚNG 4,30:1 — con số đã gặp 5 lần ở họ nút, nay lặp lại ở một element HTML thuần. Đo ở task 6.1 tại `/clb/{id}/cai-dat`, nơi `` in MÃ THAM GIA CLB (BR-MEM-13) — chuỗi ngắn, cỡ .fs-5, là thứ Owner đọc để đọc/gõ cho người khác, nên đọc sai một ký tự là hỏng việc thật. Trỏ về token app đã có thay vì bịa hex mới: light court-500 trên nền chìm = 5,06:1. Theme tối KHÔNG trượt (Bootstrap tự đổi sang #e685b5 = 7,13:1 trên #0F172A) nhưng vẫn có bản đối ứng ngay dưới (court-400 = 8,16:1) — luật P5: một màu chỉ đúng ở một theme thì phải có bản đối ứng ở theme kia, không để rơi về mặc định Bootstrap. */ --bs-code-color: var(--action-primary); --bs-success: var(--green-500); --bs-success-rgb: 22, 163, 74; --bs-danger: var(--red-500); --bs-danger-rgb: 220, 38, 38; --bs-warning: var(--amber-500); --bs-warning-rgb: 249, 115, 22; --bs-info: var(--blue-500); --bs-info-rgb: 37, 99, 235; --bs-body-bg: var(--surface-sunken); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-body-font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ============================================================ SEMANTIC — Dark ============================================================ */ [data-bs-theme="dark"] { --surface: #1E293B; --surface-sunken: #0F172A; --surface-muted: #334155; /* P5: #334155 trùng luôn --surface-muted ⇒ viền .data-card gần như biến mất trên nền tối (~1,5:1, dưới ngưỡng 3:1 khuyến nghị cho viền mang nghĩa — WCAG 1.4.11). Nới sáng hơn để ranh giới rõ. */ --border: #3E4C63; --border-strong: #475569; --text: #E2E8F0; --text-strong: #F8FAFC; --text-muted: #94A3B8; --text-disabled: #64748B; --action-primary: var(--court-400); --action-primary-hover: var(--court-300); --action-secondary: var(--green-400); --money-positive: #4ADE80; --money-negative: #F87171; --money-neutral: #E2E8F0; --status-danger: #F87171; --status-warning: #FB923C; --status-info: #60A5FA; /* Theme tối KHÔNG có vấn đề: #FB923C trên nền thẻ #1E293B ra 6,46:1 (đo được `tươngphản = 0` ở dark trước khi sửa). Vẫn khai tường minh vì spec § 3.5 cấm để một token rơi về giá trị mặc định ở một theme — đọc được ngay rằng "ở dark, màu cảnh báo dùng làm chữ được luôn". */ --status-warning-text: var(--status-warning); /* Bản đối ứng theme tối: court-50 (#ECF8F4) trên nền #1E293B là một vệt trắng chói, ngược hẳn ý đồ "nhấn nhẹ". Dùng chính màu thương hiệu của theme tối pha loãng — nền sáng hơn `--surface` vừa đủ để tách khỏi dòng đã đọc mà không tranh chấp với chữ. */ --tb-unread-bg: rgba(62, 196, 158, .13); --tb-unread-bg-hover: rgba(62, 196, 158, .20); --tb-unread-bar: var(--court-400); --focus-ring: rgba(62, 196, 158, .45); --sidebar-active-bg: rgba(62, 196, 158, .20); --sidebar-active-text: var(--court-300); --elevation-1: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --elevation-2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35); --elevation-3: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.40); --badge-green-fg: #4ADE80; --badge-blue-fg: #93C5FD; --badge-red-fg: #FCA5A5; --badge-amber-fg: #FDBA74; --badge-slate-fg: #CBD5E1; /* --badge-pink-fg: var(--pink-300) — icon "Nữ" trên nền thẻ tối (#1E293B) = 8,07:1 (AAA). */ --badge-pink-fg: var(--pink-300); /* P5 — nền "mềm" (badge-soft/avatar/app-alert) khai báo dùng chung 2 theme bằng rgba() (xem comment ở nơi khai báo .badge-soft, .avatar--cN, .app-alert). Công cụ audit (audit.js `bgOf`) đọc RAW kênh r/g/b của rgba() và BỎ QUA alpha (coi như nền ĐẶC nguyên bản), nên báo trượt tương phản dù mắt nhìn thật vẫn ổn (nền đã hoà rgba lên --surface trong thực tế). Ở đây viết lại chính giá trị ĐÃ HOÀ đó thành số đặc — cho công cụ đo đúng, mắt nhìn không đổi. Tính tay bằng công thức alpha*fg + (1-alpha)*30,41,59 (=#1E293B=--surface) cho từng cặp màu+alpha gốc, đã đo lại xác nhận contrast 6,9–8,3:1 với --badge-*-fg / --violet-300 hiện có (không cần đổi fg). LIGHT không định nghĩa các biến này ⇒ var(...,fallback) ở nơi dùng tự trả về đúng rgba() gốc, không đổi gì. */ --badge-green-bg: #1D3A3D; --badge-blue-bg: #1F3154; --badge-red-bg: #392929; --badge-amber-bg: #413535; --badge-slate-bg: #293548; --badge-violet-bg: #2B2B54; --alert-court-bg: #1C313F; /* rgba(14,122,95,.10) đã hoà lên --surface — xem .app-alert.is-court */ --alert-info-bg: #1F2F4D; --alert-success-bg: #1D353D; --alert-warning-bg: #383237; --alert-danger-bg: #312929; /* --action-primary (court-400) được chọn để làm CHỮ/ICON nổi trên nền tối (6,68:1) — nhưng vài nơi tái dùng nó làm NỀN ĐẶC với chữ trắng đè lên (.nav-pills .nav-link.active, .pagination-bar__btn .is-active, .step-flow__item .num): court-400 quá sáng để làm nền cho chữ trắng (trắng/court-400 chỉ 2,19:1 — blue-400 cũ 2,54:1, cùng một cái bẫy). Token riêng cho vai trò "nền đặc" — dark dùng --court-600 (đã có sẵn trong ramp, không phải màu mới) đạt 7,11:1 với chữ trắng; LIGHT không định nghĩa ⇒ fallback về --action-primary y hệt trước (light vốn đã dùng court-500 làm cả 2 vai trò ổn, không cần tách). 🔴 KHÔNG áp dụng cho `.action-bar__primary .btn` (P4, task 0.5) — ngoài phạm vi task này. */ --action-primary-solid: var(--court-600); --bs-primary: var(--action-primary); --bs-primary-rgb: 62, 196, 158; --bs-primary-text-emphasis: var(--court-300); --bs-primary-bg-subtle: rgba(62,196,158,.18); --bs-primary-border-subtle: rgba(62,196,158,.32); --bs-link-color: var(--action-primary); --bs-link-color-rgb: 62, 196, 158; --bs-link-hover-color: var(--action-primary-hover); /* Bản đối ứng của --bs-code-color ở khối :root (task 6.1): court-400 trên nền chìm tối = 8,16:1. */ --bs-code-color: var(--action-primary); --bs-success: var(--green-400); --bs-success-rgb: 34, 197, 94; --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113; --bs-warning: #FB923C; --bs-warning-rgb: 251, 146, 60; --bs-info: #60A5FA; --bs-info-rgb: 96, 165, 250; --bs-body-bg: var(--surface-sunken); --bs-body-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border); --bs-emphasis-color: var(--text-strong); } /* ============================================================ 🔴 GHI ĐÈ COMPONENT BOOTSTRAP BAKE CỨNG HEX PRIMARY (#0d6efd) ------------------------------------------------------------ Đổi `--bs-primary` là KHÔNG ĐỦ. Bootstrap 5.3.3 sinh các component dưới đây bằng mixin, và mixin ghi thẳng giá trị hex vào selector chứ KHÔNG tham chiếu `--bs-primary`: .btn-primary { --bs-btn-bg: #0d6efd; ... } ← 11 giá trị hex, không có var() nào Hệ quả đo được (2026-08-20, đọc thẳng webjar bootstrap-5.3.3.jar): nút primary của app **chưa bao giờ** mang màu token. App khai `--action-primary: #2563EB` nhưng nút thật vẫn là #0d6efd của Bootstrap — hai màu xanh dương khác nhau sống song song mà không ai thấy, vì chúng gần giống nhau. Chỉ tới khi primary đổi sang XANH LÁ thì sai lệch mới lộ ra: sidebar đổi màu, nút thì không. 🔴 Đây là lần thứ SÁU của cùng một cái bẫy #0d6efd trong file này (2.1 · 3.3 · 5.6 · nav-tabs · nút Messenger — xem các comment bên dưới). Năm lần trước đều vá theo kiểu SCOPE HẸP cho đúng một nút đang trượt AA. Khối này vá tận gốc: liệt kê ĐỦ mọi selector Bootstrap bake hex primary, tìm bằng cách grep chính file bootstrap.css chứ không dựa vào trí nhớ. ⚠️ Ai nâng cấp Bootstrap: grep lại `#0d6efd` trong bootstrap.css của bản mới rồi đối chiếu danh sách này. Selector mới xuất hiện sẽ âm thầm mang màu xanh dương, không có test nào bắt được. ============================================================ */ /* --- Nút --- */ .btn-primary { --bs-btn-bg: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary-hover); --bs-btn-hover-border-color: var(--action-primary-hover); --bs-btn-active-bg: var(--action-primary-hover); --bs-btn-active-border-color: var(--action-primary-hover); --bs-btn-disabled-bg: var(--action-primary); --bs-btn-disabled-border-color: var(--action-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* 🔴 Theme tối: --action-primary (court-400) là màu để làm CHỮ trên nền tối, làm NỀN cho chữ trắng chỉ được 2,19:1. Nút nền đặc phải dùng --action-primary-solid (court-600, 7,11:1) — cùng lý do đã ghi ở chỗ khai báo token đó. Không có dòng này thì nút primary ở dark trượt AA. */ [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--action-primary-solid); --bs-btn-border-color: var(--action-primary-solid); --bs-btn-hover-bg: var(--court-700); --bs-btn-hover-border-color: var(--court-700); --bs-btn-active-bg: var(--court-700); --bs-btn-active-border-color: var(--court-700); --bs-btn-disabled-bg: var(--action-primary-solid); --bs-btn-disabled-border-color: var(--action-primary-solid); } .btn-outline-primary { --bs-btn-color: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary); --bs-btn-hover-border-color: var(--action-primary); --bs-btn-active-bg: var(--action-primary); --bs-btn-active-border-color: var(--action-primary); --bs-btn-disabled-color: var(--action-primary); --bs-btn-disabled-border-color: var(--action-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-bg: var(--action-primary-solid); --bs-btn-hover-border-color: var(--action-primary-solid); --bs-btn-active-bg: var(--action-primary-solid); --bs-btn-active-border-color: var(--action-primary-solid); } /* --- Ô nhập: viền focus #86b7fe + ô tích #0d6efd --- */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--action-primary); } .form-check-input:checked { background-color: var(--action-primary); border-color: var(--action-primary); } .form-check-input[type=checkbox]:indeterminate { background-color: var(--action-primary); border-color: var(--action-primary); } .form-range::-webkit-slider-thumb { background-color: var(--action-primary); } .form-range::-moz-range-thumb { background-color: var(--action-primary); } /* Trạng thái :active của nút kéo dùng một hex KHÁC (#b6d4fe — bậc nhạt), không phải #0d6efd. Hai dòng này do BootstrapPrimaryOverrideTest bắt được; đọc mắt thường đã bỏ sót vì chỉ dò #0d6efd. */ .form-range::-webkit-slider-thumb:active { background-color: var(--court-200); } .form-range::-moz-range-thumb:active { background-color: var(--court-200); } /* --- Component khác đặt hex qua biến RIÊNG của chúng (không phải --bs-primary) --- */ .dropdown-menu { --bs-dropdown-link-active-bg: var(--action-primary-solid, var(--action-primary)); } .nav-pills { --bs-nav-pills-link-active-bg: var(--action-primary-solid, var(--action-primary)); } .pagination { --bs-pagination-active-bg: var(--action-primary-solid, var(--action-primary)); --bs-pagination-active-border-color: var(--action-primary-solid, var(--action-primary)); } .list-group { --bs-list-group-active-bg: var(--action-primary-solid, var(--action-primary)); --bs-list-group-active-border-color: var(--action-primary-solid, var(--action-primary)); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--action-primary); } /* ============================================================ P5 — Dark: fix riêng cho vài component KHÔNG dùng token màu theo cách bình thường (Bootstrap bake literal hex ở .btn-outline-secondary; --nav-group-label cố định 2 theme). Chỉ áp trong [data-bs-theme="dark"] — LIGHT không đụng tới (MB-8). ============================================================ */ /* .btn-outline-secondary của Bootstrap bake CỨNG #6c757d vào --bs-btn-color/--bs-btn-border-color ngay trên chính selector (không tham chiếu --bs-secondary) — override --bs-primary/--bs-danger... ở :root KHÔNG áp dụng vào đây (đã lộ y hệt ở task 0.5 với .btn-outline-info/.btn-outline-primary). #6c757d trên nền tối (--surface/--surface-sunken) chỉ ra 3,12–3,81:1. Dùng --text-muted (đã có, đạt 5,7–7:1 với 2 nền đó) thay vì bịa màu mới. */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--text-muted); --bs-btn-disabled-color: var(--text-disabled); --bs-btn-disabled-border-color: var(--text-disabled); } /* .btn-outline-danger cũng bake CỨNG #dc3545 (--bs-danger của Bootstrap, KHÁC --red-500 #DC2626 của app) vào --bs-btn-color/--bs-btn-border-color — cùng cơ chế .btn-outline-secondary ở trên, override --bs-danger ở :root KHÔNG tới được. #dc3545 trên nền tối (--surface #1E293B) chỉ 3,23:1 — đo ở nút "Vô hiệu hoá tài khoản của tôi" (/toi = auth/ho-so.html) theme dark, task 1.7. Dùng --red-400 (#F87171) = chính màu danger dark app đã chọn cho --money-negative/--status-danger ⇒ 5,29:1. Hover nền đặc --red-600 để chữ trắng đạt ~6,5:1. Chỉ dark; light giữ nguyên #dc3545 (đạt AA ⇒ MB-8 an toàn). */ /* 🔴 Task 1.7 kết luận "light giữ nguyên #dc3545 (đạt AA)" — đúng với NGỮ CẢNH nó đo (nút nằm trong .app-card nền trắng: #dc3545/#FFFFFF = 4,53:1, vừa đủ). Đo ở task 5.2 tại `member/sua.html` cho ngữ cảnh KHÁC: nút "Cho rời CLB" nằm trong .page-header, tức đứng TRỰC TIẾP trên nền trang (--surface-sunken = --slate-50 #F8FAFC) ⇒ chỉ còn **4,33:1**, dưới AA. Cùng cơ chế đã gặp ở task 3.3 với .btn-outline-primary: một màu "vừa đủ đạt" trên nền trắng sẽ trượt ngay khi đổi sang nền chìm. Dùng --red-500 (#DC2626 — chính màu danger của app, không bịa màu mới): **4,62:1**; hover nền đặc --red-600 với chữ trắng ~7,6:1. Scope theo 2 ngữ cảnh có nền CHÌM — .page-header và .modal-footer (nút "Cho rời CLB" xuất hiện ở CẢ HAI: một nút mở modal trên header, một nút submit trong chân modal; đo lần đầu chỉ sửa .page-header thì nút trong modal vẫn 4,33 — bắt được nhờ đo lại với BMH_OPEN). Trong card trắng nút này vẫn đạt AA nên không đổi hàng loạt. Đặt TRƯỚC luật dark ngay dưới để dark vẫn thắng theo thứ tự nguồn (cùng độ đặc hiệu) và giữ --red-400 của task 1.7. 🔴 Đây là thay đổi thấy được cả trên DESKTOP: AA không phụ thuộc bề rộng màn hình nên không thể sửa riêng cho mobile — cùng lập luận đã ghi ở toast (task 1.2) và .btn-outline-primary (task 3.3). */ .page-header .btn-outline-danger, .modal-footer .btn-outline-danger { --bs-btn-color: var(--red-500); --bs-btn-border-color: var(--red-500); --bs-btn-hover-bg: var(--red-600); --bs-btn-hover-border-color: var(--red-600); --bs-btn-active-bg: var(--red-600); --bs-btn-active-border-color: var(--red-600); } /* Cùng CHÍNH XÁC cơ chế đó cho .btn-outline-secondary, chỉ khác con số: #6c757d đạt 4,69:1 trên nền trắng của card nhưng chỉ **4,48:1** trên nền chìm --slate-50 (#F8FAFC) — nền của .page-header và của .modal-footer. Mục này đã bị ghi nhận rồi bỏ qua ở 0.6 · 3.4 · 3.5 · 4.1 · 5.1 với lý do "marginal Bootstrap default"; đến task 5.2 thì nó rơi đúng vào nút "Hủy" của modal đang đo nên xử luôn, bằng ĐÚNG cách theme tối đã xử ở task 0.6: dùng --text-muted (light = --slate-600 #475569) ⇒ **7,24:1**. Vẫn scope theo ngữ cảnh nền chìm — trong card trắng nút này đạt AA, không có lý do đổi hàng loạt. 🔴 Task 4.5 (lần ghi nhận thứ 7 của đúng lỗi này): nút "Tháng trước"/"Tháng sau"/"Xem sổ giao dịch" ở báo cáo tài chính đứng TRỰC TIẾP trên nền trang — cũng là nền chìm, cũng 4,48:1, nhưng không nằm trong `.page-header` lẫn `.modal-footer` nên 2 selector trên không với tới. Thêm `is-on-sunken` làm móc dùng chung cho đúng tình huống đó, thay vì đẻ thêm một selector theo tên trang mỗi lần gặp lại (đã gặp ở 0.6 · 3.4 · 3.5 · 4.1 · 5.1 · 5.2 · 4.5). Màn sau gặp nút outline-secondary nằm ngoài card thì gắn class này, KHÔNG viết luật mới. */ .page-header .btn-outline-secondary, .modal-footer .btn-outline-secondary, .btn-outline-secondary.is-on-sunken { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--text-muted); } /* 🔴 `.btn-outline-info` — cùng CƠ CHẾ bake hex, và là ca NẶNG NHẤT của cả họ: đã bị ghi nhận rồi bỏ qua từ task 0.5. Bootstrap bake `#0dcaf0` (cyan) thẳng vào chữ/viền, nên `--bs-info: var(--blue-500)` mà app khai ở `:root` (dòng ~239) CHƯA BAO GIỜ tới được một nút nào — y hệt chuyện `--action-primary` với `#0d6efd` ở khối trên. Đo ở task 5.12: chữ `#0dcaf0` trên nền trắng chỉ **1,96:1** — thấp nhất trong mọi mục `MB-7` của Đợt 0-5 (kỷ lục cũ là 2,80:1 của `--status-warning` bị dùng làm màu chữ). Sửa = trỏ về đúng token app ĐÃ khai, không bịa hex mới: • light: chữ `--status-info` (= `--blue-500` #2563EB) trên trắng = **5,17:1**, trên nền chìm #F8FAFC = 4,94:1 — đạt AA ở cả hai nền • dark: chữ `--status-info` #60A5FA trên `--surface` #1E293B = **5,75:1** Còn dùng ở: "Vote tham gia" · "Chia sẻ buổi tập" · "Chia sẻ bảng chia tiền" · các LỐI VÀO của luồng đăng ký ở `session/buoi.html` + `dashboard/cua-toi.html` — blue ở đó vẫn đúng nghĩa "thông tin trung tính" (xem ghi chú ở ramp Blue, dòng ~115). 🔴 Thay đổi này THẤY ĐƯỢC TRÊN DESKTOP — đúng tiền lệ toast 1.2 / CTA 2.1 / nav-tabs G2: AA không phụ thuộc bề rộng màn hình nên không nhét được vào tầng mobile. 🔴 `.btn-info` (nền đặc) đã từng được sửa ở đây rồi GỠ ĐI ở vòng 2 của task 5.12: người dùng chốt luồng "Đăng ký đi tập" chuyển hẳn sang XANH THẢM (xem `.btn-court-soft` ngay dưới), nên không template nào còn dùng `.btn-info` — giữ lại chỉ là code chết. Bài học của lần đó vẫn đáng nhớ: **nhóm nút NỀN ĐẶC có HAI màu ràng buộc nhau** — Bootstrap để `--bs-btn-color: #000` cho `.btn-info` vì cyan rất sáng, nên đổi nền sang một màu đậm mà quên chữ thì chữ đen trên nền đó ra 4,06:1, tức vừa sửa xong một vi phạm AA đã đẻ ngay một vi phạm khác ở đúng nút đó. `.action-bar__primary .btn` (tầng mobile) tự ép màu riêng nên không bị ảnh hưởng. */ .btn-outline-info { --bs-btn-color: var(--status-info); --bs-btn-border-color: var(--status-info); --bs-btn-hover-bg: var(--blue-500); --bs-btn-hover-border-color: var(--blue-500); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--blue-500); --bs-btn-active-border-color: var(--blue-500); --bs-btn-active-color: #fff; --bs-btn-disabled-color: var(--status-info); --bs-btn-disabled-border-color: var(--status-info); } [data-bs-theme="dark"] .btn-outline-info { --bs-btn-hover-bg: var(--blue-600); --bs-btn-hover-border-color: var(--blue-600); --bs-btn-active-bg: var(--blue-600); --bs-btn-active-border-color: var(--blue-600); } /* 🔴 `.btn-court-soft` — nút của luồng "Đăng ký đi tập" (`OQ-54`), thêm ở vòng 2 task 5.12 theo quyết định của người dùng: luồng này mang XANH THẢM như phần còn lại của app, không còn xanh dương. Vì sao là bậc SOFT (nền tint) chứ không phải `.btn-primary` nền đặc — đây là ràng buộc, không phải thẩm mỹ: `AC-SESS-03.6` (`20_Requirements.md`) buộc giao diện phải phân biệt **rõ ràng bằng mắt** "Đã đăng ký" với "Đã điểm danh", **không cùng icon, không cùng màu** — và đó là một AC về giao diện nhưng nó BẢO VỆ TIỀN (nhầm hai danh sách = tính tiền cho người không đi). Cho "Tôi sẽ đi" nền đặc `--action-primary` là biến nó thành đúng cái nút mà mọi màn khác dùng cho hành động chính, kể cả luồng điểm danh ⇒ mất luôn tín hiệu mà AC này đòi. Bậc soft giữ được ba việc cùng lúc: • cùng HỆ MÀU thương hiệu (court) — thứ người dùng yêu cầu; • khác hẳn nút "Có mặt" của màn Điểm danh (nút đó là `.btn-success`, ramp GREEN `#16A34A` nền đặc) và khác nút hành động chính `--action-primary` nền đặc — thoả `AC-SESS-03.6`; • nói đúng nghĩa "DỰ KIẾN, chưa tính tiền": trọng lượng thị giác nhẹ hơn một hành động đã chốt. Tương phản tính theo WCAG, không ước lượng: light court-700 trên court-100 = 7,63:1 · hover court-700 trên court-200 = 6,08:1 dark court-300 trên court-900 = 7,57:1 · hover court-300 trên court-700 = 5,63:1 */ .btn-court-soft { --bs-btn-bg: var(--court-100); --bs-btn-border-color: var(--court-200); --bs-btn-color: var(--court-700); --bs-btn-hover-bg: var(--court-200); --bs-btn-hover-border-color: var(--court-300); --bs-btn-hover-color: var(--court-700); --bs-btn-active-bg: var(--court-200); --bs-btn-active-border-color: var(--court-300); --bs-btn-active-color: var(--court-700); --bs-btn-disabled-bg: var(--court-100); --bs-btn-disabled-border-color: var(--court-200); --bs-btn-disabled-color: var(--court-700); } [data-bs-theme="dark"] .btn-court-soft { --bs-btn-bg: var(--court-900); --bs-btn-border-color: var(--court-700); --bs-btn-color: var(--court-300); --bs-btn-hover-bg: var(--court-700); --bs-btn-hover-border-color: var(--court-600); --bs-btn-hover-color: var(--court-300); --bs-btn-active-bg: var(--court-700); --bs-btn-active-border-color: var(--court-600); --bs-btn-active-color: var(--court-300); --bs-btn-disabled-bg: var(--court-900); --bs-btn-disabled-border-color: var(--court-700); --bs-btn-disabled-color: var(--court-300); } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--red-400); --bs-btn-border-color: var(--red-400); --bs-btn-hover-bg: var(--red-600); --bs-btn-hover-border-color: var(--red-600); --bs-btn-active-bg: var(--red-600); --bs-btn-active-border-color: var(--red-600); } /* --nav-group-label (#64789B) là hằng số DÙNG CHUNG 2 theme, định cho nền navy cố định của sidebar desktop (--nav-bg) — nhưng cùng class còn được dùng lại trong offcanvas menu mobile, nơi nền theo theme (.offcanvas{background:var(--surface)}, dòng ~879). Trên --surface tối, #64789B chỉ ra 3,28:1. Dark-only: đổi sang --text-muted (đã qua theme, đạt AA trên --surface tối). Light giữ nguyên --nav-group-label (không thuộc phạm vi task này). */ [data-bs-theme="dark"] .app-sidebar-group-label { color: var(--text-muted); } /* Task 2.1 — nút CTA "Xem cách hoạt động" (.auth-cta-landing) là .btn-outline-primary. Bootstrap bake CỨNG #0d6efd vào --bs-btn-color/border (không lấy --bs-primary app đã override ở :root — cùng cơ chế .btn-outline-secondary/danger ở trên). #0d6efd trên nền vỏ auth --surface-sunken chỉ **4,3:1 (light)** / **3,97:1 (dark)** — DƯỚI AA ở CẢ hai theme (đo tĩnh, task 2.1). Đổi sang --action-primary (đã theo theme: light --court-500 #0E7A5F ⇒ 5,29:1; dark --court-400 #3EC49E ⇒ 6,68:1 — trước đợt đổi sang xanh thảm là --blue-500/--blue-400, cùng mức tương phản nên kết luận AA của task 2.1 không đổi); hover nền đặc --action-primary-solid (dark = --court-600) cho chữ trắng đạt. Đây là fix AA THẬT nên áp mọi viewport (AA độc lập bề rộng — như ca toast task 1.2), CÓ đổi desktop; scope theo .auth-cta-landing để chỉ chạm đúng nút này, KHÔNG lan ra .btn-outline-primary trên nền trắng (ở đó #0d6efd vẫn đạt AA). */ .auth-cta-landing .btn-outline-primary { --bs-btn-color: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-color: #fff; } /* Đợt 3 task 3.3 — "Thêm người khác"/"Thêm khách vãng lai" (attendance/fragments.html) là .btn-outline-primary đứng TRỰC TIẾP trên nền trang (--surface-sunken, không phải trong .app-card trắng) — CÙNG hoàn cảnh và CÙNG số đo với .auth-cta-landing ở trên (#0d6efd bake cứng: 4,3:1 light / 3,97:1 dark, cả hai DƯỚI AA — đã đo ở task 0.5, để dành "đợt sau" xử, nay đúng lúc). Fix giống hệt, scope riêng để KHÔNG lan ra .btn-outline-primary ở chỗ khác (trong .app-card trắng #0d6efd vẫn ổn, 9 template khác dùng class này chưa đo, không tự ý đổi hàng loạt). */ .attendance-quick-add .btn-outline-primary { --bs-btn-color: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-color: #fff; } /* Task 5.6 — nút "Thêm sân" của fragment dùng chung `court-slots :: editor` cũng là .btn-outline-primary, và nó nằm trên `.modal-body` (nền `--surface-sunken` #F8FAFC) ⇒ **cùng con số 4,3:1** đã đo hai lần trước (2.1 và 3.3). Đây là lần thứ BA của đúng một lỗi, nên fix y hệt và scope bằng attribute sẵn có `[data-court-slots]` — không phải thêm class vào template, và một lần sửa ăn cả **4 form** dùng fragment này (thêm/sửa Lịch tập · thêm/sửa Buổi tập). Là fix AA THẬT nên áp mọi viewport (AA không phụ thuộc bề rộng); `MB-8` của màn Lịch tập vẫn byte-identical vì nút này nằm trong modal đang đóng (`display: none`, không vẽ pixel nào ở ảnh desktop). */ [data-court-slots] .btn-outline-primary, /* Lần thứ NĂM của đúng lỗi #0d6efd-trên-nền-chìm (2.1 · 3.3 · 5.6 · nav-tabs). Nút "Nhắn tin trực tiếp qua Messenger" trong modal Góp ý cũng nằm trên `.modal-body` (--surface-sunken #F8FAFC) ⇒ ĐÚNG 4,30:1 như ba lần trước, đo bằng tools/mobile-audit ở 390×844 (2026-08-20). Gộp vào cùng khối thay vì viết luật thứ năm y hệt. 🔴 Ghi chú cho lần sau: `.btn-outline-secondary` đã có móc dùng chung `is-on-sunken` sau 7 lần lặp; `.btn-outline-primary` nay cũng tới lần thứ 5 — đáng làm móc tương tự trong một task dọn dẹp riêng, thay vì cứ thêm selector theo tên component. */ #modalGopY .btn-outline-primary { --bs-btn-color: var(--action-primary); --bs-btn-border-color: var(--action-primary); --bs-btn-hover-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-border-color: var(--action-primary-solid, var(--action-primary)); --bs-btn-active-color: #fff; } /* Lần thứ TƯ của đúng một lỗi #0d6efd-trên-nền-chìm (2.1 · 3.3 · 5.6 ở trên), lần này qua --bs-nav-link-color chứ không phải --bs-btn-color: tab CHƯA chọn của .nav-tabs đo được **4,30:1** (#0d6efd trên --surface-sunken #F8FAFC) ở màn Chi tiết buổi tập — dưới AA 4,5:1. Task 3.3 đã thấy đúng con số này ("phát hiện phụ, KHÔNG sửa — để lại cho lần sau chạm tới CSS thanh tab"); đo lại khi đóng khoảng hở G2 (2026-08-20) xác nhận nó vẫn còn, nên nay xử. Scope `.nav-tabs` là hẹp CÓ ĐO: chỉ 2 template dùng class này (`session/buoi.html` + `expense/fragments.html`, đều là thanh tab của chính màn buổi tập). KHÔNG lan sang `.nav-pills` (`fragments/tabs.html`, màn Cài đặt) — kiểu active của nó khác hẳn (nền đặc) và CHƯA ĐO, đổi mù là đúng thứ CLAUDE.md cấm. Tab ĐANG chọn không bị chạm (nó dùng --bs-nav-tabs-link-active-color). Là fix AA THẬT ⇒ áp mọi viewport, CÓ đổi desktop — giống ca toast 1.2 / CTA auth 2.1. 🔴 Đổi lần hai 12/10/2026 — bản vá trên chữa đúng tương phản nhưng để lại THỨ BẬC NGƯỢC: tab chưa chọn mang màu thương hiệu, còn tab ĐANG chọn giữ màu mặc định của Bootstrap (đen trên nền xám), nên mắt bị kéo về chỗ mình không đứng. Nay đảo lại: tab đang chọn mới là thứ mang màu thương hiệu, tab chưa chọn lùi về --text-muted. Vẫn qua AA ở cả hai theme (slate-600 trên --surface-sunken sáng ≈ 7,2:1; #94A3B8 trên #0F172A tối ≈ 7:1), nên không mở lại lỗi 4,30:1 ở trên. */ .nav-tabs { --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--text-strong); --bs-nav-tabs-link-active-color: var(--action-primary); } /* Hệ quả của việc đảo màu ở trên: màu tab KHOÁ của Bootstrap (--bs-secondary-color) trong app này trùng đúng --text-muted, nên tab chưa mở được ("Chi phí & chốt sổ" khi buổi chưa điểm danh) nhìn y hệt tab bấm được. Làm mờ đi để còn phân biệt — trạng thái khoá không thuộc diện phải qua AA. */ .nav-tabs .nav-link.disabled { opacity: .5; } /* ============================================================ BASE ============================================================ */ /* Luôn chừa chỗ cho thanh cuộn dọc — thiếu dòng này, trang có nội dung ngắn (không cần cuộn) sẽ nhích ngang vài px so với trang có nội dung dài (có thanh cuộn) vì layout mất/còn khác nhau bề rộng viewport khả dụng. Rõ nhất khi chuyển qua lại giữa các tab cùng một nhóm (VD: Cài đặt). */ html { scrollbar-gutter: stable; } /* scrollbar-gutter:stable chỉ áp dụng khi overflow ở trạng thái auto/scroll — Bootstrap Modal khoá cuộn nền bằng cách set body.style.overflow = 'hidden' (bootstrap.bundle.js ScrollBarHelper), làm "gutter" vừa chừa sẵn ở trên BIẾN MẤT đúng lúc đó, ĐỒNG THỜI Bootstrap còn tự cộng thêm padding-right = bề rộng thanh cuộn vào để "bù" cho thanh cuộn biến mất — cộng dồn hai hiệu ứng này khiến bề rộng nội dung hụt hẳn một khoảng bằng bề rộng thanh cuộn (~15-17px) trong lúc modal mở, nội dung (căn giữa bằng margin auto trong .page-content) nhích ngang, rồi trả lại đúng vị trí cũ khi đóng modal — đã đo trực tiếp bằng CDP (BEFORE/AFTER getBoundingClientRect lệch, dừng lệch khi bỏ dòng padding-right này). Phần bù của Bootstrap thành thừa vì gutter đã tự lo chuyện này rồi — vô hiệu hoá nó bằng !important (thắng inline style Bootstrap tự set qua JS). */ body.modal-open { padding-right: 0 !important; } /* Các hộp thoại Bootstrap thường dùng .modal-dialog trống; căn giữa chúng theo cùng cơ chế của .modal-dialog-centered. Sheet và hộp toàn màn hình giữ vị trí riêng. */ .modal:not(.modal-sheet) > .modal-dialog:not(.modal-dialog-centered):not(.modal-sheet):not(.modal-fullscreen) { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); } body { background: var(--surface-sunken); color: var(--text); } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text-strong); } h1 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -.01em; } h2 { font-size: 1.25rem; line-height: 1.75rem; } h3 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; } a { color: var(--action-primary); } a:hover { color: var(--action-primary-hover); } /* Focus ring thống nhất — không bao giờ mất dấu focus */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .stat-card:focus-visible, .app-sidebar-nav .nav-link:focus-visible, .app-bottom-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } /* Input ≥16px trên mobile — chống Safari iOS auto-zoom */ .form-control, .form-select { font-size: 1rem; background: var(--surface); color: var(--text); } /* ============================================================ TYPOGRAPHY UTILITIES ============================================================ */ .text-app-muted { color: var(--text-muted) !important; } .text-caption { font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); } /* Số tiền — luôn tabular-nums, và không bao giờ bẻ dòng: "1.575.000" rớt chữ "₫" xuống dòng dưới đọc như hai con số khác nhau. */ .money { font-variant-numeric: tabular-nums; white-space: nowrap; } /* white-space cùng lý do với .money ở trên: chuỗi chữ số không có chỗ ngắt, nên chỗ DUY NHẤT bẻ được là khoảng trắng trước "₫" — bẻ ở đó làm "1.575.000" và "₫" nằm hai dòng, đọc như hai con số. */ .money-hero { font-size: 1.75rem; line-height: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--money-neutral); } .money-lg { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--money-neutral); } .money-pos { color: var(--money-positive) !important; } .money-neg { color: var(--money-negative) !important; } .money-neutral { color: var(--money-neutral) !important; } /* ------------------------------------------------------------ Dòng "tên sân + khoảng giờ" — court-slot. 🔴 Cạm bẫy đứng ngay cạnh `.money` ở trên, nên để luật ngay đây: `nowrap` là ĐÚNG cho con số, nhưng một giá trị TRỘN chữ tự do với số thì không được thừa hưởng nó. Tên sân do người dùng tự đặt, tới 100 ký tự (`CourtSlotForm`); gộp "tên: 19:00–21:00" thành một chuỗi rồi gắn `.money` là ép cả cụm nằm lì một dòng. Đã lộ thật ở 3 chỗ cùng render dữ liệu này (2026-08-25), đo với tên 100 ký tự: • `session/buoi.html` (Thông tin buổi tập) — 1440×900: chữ vọt khỏi cột lưới 800px, đẩy CẢ TRANG cuộn ngang 644px. Nặng nhất vì cột `row-cols-md-4` rộng cố định 208px. • `fragments/buoi-hero.html` (chip trang chia sẻ) — 390×844: chip vọt khỏi thẻ 236px. • `schedule/lich-tap.html` (ô Giờ) — 390×844: ô cắt cụt 201px chữ. Cách sửa nằm ở TEMPLATE, không phải ở đây: tách tên và giờ thành hai , `.money` chỉ bọc khoảng giờ. Class này lo phần còn lại — cho bẻ giữa từ khi tên không có dấu cách nào (`anywhere` chứ không `break-word`, cùng lý do đã ghi ở `can-wrap-note`). ------------------------------------------------------------ */ .court-slot { overflow-wrap: anywhere; } /* Chip mang `nowrap` từ CHÍNH `.badge-soft` (không chỉ từ `.money`) nên phải gỡ riêng, và nó là inline-flex ⇒ cần `flex-wrap` thì hai mảnh bên trong mới xuống hàng được thay vì phình ngang. */ .badge-soft.court-slot { white-space: normal; flex-wrap: wrap; max-width: 100%; } /* ============================================================ BADGE — soft (thay bg-* đặc mặc định Bootstrap) ============================================================ */ .badge-soft { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } /* P5: nền dùng var(--badge-*-bg, rgba(...)) — chỉ định nghĩa ở [data-bs-theme="dark"] (xem chỗ khai báo), nên LIGHT vẫn ra đúng rgba() y hệt trước (fallback), không đổi 1 pixel nào. */ .badge-soft.is-green { background: var(--badge-green-bg, rgba(22,163,74,.14)); color: var(--badge-green-fg); } .badge-soft.is-blue { background: var(--badge-blue-bg, rgba(37,99,235,.14)); color: var(--badge-blue-fg); } .badge-soft.is-red { background: var(--badge-red-bg, rgba(220,38,38,.14)); color: var(--badge-red-fg); } .badge-soft.is-amber { background: var(--badge-amber-bg, rgba(249,115,22,.16)); color: var(--badge-amber-fg); } .badge-soft.is-slate { background: var(--badge-slate-bg, rgba(100,116,139,.16)); color: var(--badge-slate-fg); } /* Bộ đếm của tab Điểm danh ("N người tham gia" / "N đã điểm danh" / "N nam · N nữ"). Trước đây cỡ chữ + padding nằm ở `style=` ngay trong template; đưa ra đây vì tầng mobile cần bóp padding lại mà inline style thì @media không đè được. Cỡ chữ .95rem là CỐ Ý to hơn badge thường (.75rem) và cố ý giữ nguyên ở mobile — đây là con số Admin đọc từ xa khi đang đứng ở sân (CT-6), không phải chip phụ; nó đè luật `.badge-soft { font-size: var(--fs-caption) }` của tầng mobile nhờ specificity. */ .attendance-counter .badge-soft { font-size: .95rem; padding: .35rem .7rem; } /* Khoảng cách của hai hàng đầu tab Điểm danh (bộ đếm và cụm nút "Thêm …"). Trước đây là utility `gap-1 gap-sm-2` / `gap-2` ngay trong template; chuyển ra đây vì utility của Bootstrap là `!important` nên tầng mobile KHÔNG đè nổi để đặt `column-gap: 0` — cùng cái bẫy đã ghi ở `.lich-buoi` và `.lich-header-actions` phía trên. `.5rem` là ĐÚNG giá trị cũ ở mọi bề rộng mà luật này còn hiệu lực: `gap-sm-2` (≥576px) và `gap-2`. Bậc 4px của `gap-1` (<576px) không cần chép lại — dải đó đã nằm trọn trong tầng ≤767,98px, nơi `column-gap` bị đặt về 0 để `space-evenly` chia đều. Nhờ vậy desktop ≥768px không đổi một pixel (`MB-8`). */ .attendance-counter, .attendance-quick-add { gap: .5rem; } /* Khối "Hoạt động đăng ký gần đây" là đích anchor của thông báo (BR-NOTI-16): trình duyệt cuộn tới nó khi bấm thông báo. Chừa chỗ cho thanh trên cùng dính của điện thoại để tiêu đề không bị che. */ #hoatDongDangKy { scroll-margin-top: 4.5rem; } /* Chấm trạng thái bên trong chip (VD "Đang sinh hoạt"). Màu kế thừa currentColor của chip. */ .badge-soft .dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; } /* Chữ màu theo status (VD giờ buổi tập ở màn Lịch) — dùng chung biến màu với .badge-soft cho nhất quán. */ .text-status-green { color: var(--badge-green-fg); } .text-status-amber { color: var(--badge-amber-fg); } .text-status-slate { color: var(--badge-slate-fg); } /* `blue` = buổi ĐÃ CHỐT SỔ, tách khỏi nhóm xanh lá "đang mở" từ 2026-09-06 (TrainingSessionStatus #badgeTone). Bốn nhóm màu của màn Lịch phải có đủ bốn lớp ở CẢ BA họ (.badge-soft / .text-status / .legend-dot) — thiếu một lớp thì chữ giờ trong ô lịch rơi về màu mặc định và trông như lỗi. */ .text-status-blue { color: var(--badge-blue-fg); } /* Cố ý KHÔNG dùng .text-danger của Bootstrap cho việc này: nó ghim cứng #dc3545 ở CẢ hai theme (chỉ nền mới đổi theo data-bs-theme), nên trên nền tối chữ tụt tương phản. Biến ở đây có sẵn bản sáng/tối. */ .text-status-red { color: var(--badge-red-fg); } /* Chấm tròn chú thích màu status (VD legend phía trên bảng Lịch). */ .legend-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; } .legend-dot.is-green { background: var(--badge-green-fg); } .legend-dot.is-amber { background: var(--badge-amber-fg); } .legend-dot.is-blue { background: var(--badge-blue-fg); } .legend-dot.is-slate { background: var(--badge-slate-fg); } /* Ô ngày bấm-được (Owner/Admin) — bấm vùng trống mở modal tạo buổi đột xuất. Dấu "+" mờ hiện khi rê chuột (desktop có hover); màn hình cảm ứng không hiện nhưng cả ô vẫn chạm được. `position: relative` để neo dấu "+" tuyệt đối vào góc phải-trên ô. */ .lich-day--clickable { position: relative; cursor: pointer; } .lich-day--clickable::after { content: "\002B"; /* dấu + */ position: absolute; top: 2px; right: 6px; font-size: .95rem; line-height: 1; font-weight: 700; color: var(--bs-primary); opacity: 0; pointer-events: none; transition: opacity .12s ease-in-out; } @media (hover: hover) { .lich-day--clickable:hover::after { opacity: .55; } } /* Lưới lịch tháng — chuyển từ style inline sang class ở task 5.11, GIỮ NGUYÊN từng giá trị cũ. Lý do phải chuyển: tầng mobile cần nới chiều cao ô để mỗi buổi tập đạt vùng chạm 44px (`MB-3`), mà style inline thì chỉ `!important` mới đè được — và `!important` trong tầng mobile là thứ luật này cấm (nó khoá luôn mọi lần chỉnh sau). `height` trên `` là chiều cao TỐI THIỂU theo cách trình duyệt tính bảng; `.lich-day` là hộp cuộn bên trong để một ngày nhiều buổi không đội cả hàng tuần cao lên. */ /* Hộp cuộn ngang bao quanh lưới tháng. Trước 20/09/2026 là `style="overflow-x: auto"` inline trên thẻ `.app-card`; tách ra thành class vì JS cần một móc để TÌM đúng hộp này (`bmhCuonLichToiHomNay()` ở `fragments/layout :: scripts` canh cột hôm nay vào giữa nó). Giá trị y hệt style cũ ⇒ không đổi một pixel nào ở mọi bề rộng; việc cuộn ngang vẫn là ngoại lệ có chủ đích của `MB-1` (xem tầng mobile bên dưới). */ .lich-cuon { overflow-x: auto; } .lich-grid > tbody > tr > td { width: 14.28%; height: 110px; overflow: hidden; } .lich-grid .lich-day { max-height: 94px; overflow-y: auto; } /* Nút "một buổi tập" trong ô ngày. Trước đây dùng `.d-block w-100` của Bootstrap, nhưng utility đó là `!important` nên tầng mobile KHÔNG đè được — luật `display: flex` viết cho nó ở tầng mobile (task 5.11) thực ra chưa bao giờ chạy, và chữ giờ nằm dính mép TRÊN của vùng chạm 44px thay vì căn giữa. Một class thường (không !important) trả lại quyền đè cho tầng mobile. Desktop: y hệt `.d-block w-100` cũ. 🔴 `padding`/`margin-top` cũng phải khai ở đây, KHÔNG để lại utility `p-0 mt-1` trên thẻ như trước (2026-08-30, lúc tách nút này ra fragment dùng chung với lưới TUẦN): `p-0` là `!important` nên biến thể `.lich-buoi--day-du` — chip lưới tuần, cần đệm quanh chữ — không thể có padding nào khác 0 nếu utility còn nằm trên thẻ. Hai giá trị dưới đây bằng ĐÚNG `p-0` (0) và `mt-1` (.25rem) cũ, nên lưới tháng không đổi một pixel. */ .lich-grid .lich-buoi { display: block; width: 100%; padding: 0; margin-top: .25rem; } /* Hàng nút của header lịch. `flex-wrap`/`gap` khai ở đây thay vì bằng utility `.flex-wrap`/`.gap-2` (đúng giá trị cũ: wrap + .5rem) — utility của Bootstrap là `!important`, tầng mobile sẽ không đè nổi để ép bốn nút về một dòng. */ .lich-header-actions, .lich-header-actions__nav { flex-wrap: wrap; gap: var(--space-xs, .5rem); } /* Nút "tạo buổi" TƯỜNG MINH (chế độ Ngày) — dùng chung móc JS `.lich-day--clickable[data-day]` với ô ngày trên lưới, nhưng nó đã có nhãn chữ nên dấu "+" mờ (gợi ý cho vùng trống) là thừa và còn đè lên chữ. */ .lich-day--clickable.lich-day--nut::after { content: none; } /* Hàng nút cuối màn Lịch: "Tạo buổi ngày dd/MM" (chỉ chế độ Ngày, chỉ Owner/Admin) + "Xem dạng danh sách". Hai nút phải nằm trên CÙNG MỘT dòng ở mọi bề rộng — `nowrap` là phần cưỡng chế, không có nó chỉ cần một nhãn dài hơn dự tính là hàng vỡ đôi. `space-between` đẩy mỗi nút dính một mép nội dung (trái/phải), khoảng trống dồn hết vào giữa; `gap` vì thế chỉ còn là SÀN tối thiểu, giữ để hai nút không chạm nhau nếu nhãn dài ra. Ở chế độ Tuần/Tháng hàng chỉ còn một nút — `space-between` với một phần tử để nó dính mép trái, đúng chỗ cũ trước khi gộp hàng. `gap`/`flex-wrap` khai bằng class thường thay vì utility `gap-2`/`flex-nowrap` của Bootstrap (utility là `!important`, tầng mobile sẽ không đè nổi để hạ cỡ chữ) — cùng lý do với `.lich-header-actions` ở trên. */ .lich-footer-actions { flex-wrap: nowrap; gap: var(--space-xs, .5rem); justify-content: space-between; } /* Hàng công cụ của màn Lịch: bộ chọn chế độ (Ngày · Tuần · Tháng) bên trái, chú thích màu status bên phải. Cùng lý do với `.lich-header-actions` ở trên — `gap`/`flex-wrap`/`display` khai bằng class thường thay vì utility `d-flex`/`gap-*` của Bootstrap, để tầng mobile còn đè được (ở đó bộ chọn chiếm trọn bề ngang). Giá trị `gap` của `.lich-legend` bằng đúng `gap-3` cũ của hàng chú thích. */ .lich-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs, .5rem); } .lich-legend { display: flex; flex-wrap: wrap; gap: var(--space-md, 1rem); } /* Nút chế độ đang chọn: `.active` của Bootstrap trên `.btn-outline-secondary` đổi nền thành xám đặc. Đây là bộ lọc CHÍNH của màn, nên dùng màu thương hiệu để nó đọc được ngay là "đang xem cái nào" — cùng cách trạng thái chọn được đánh dấu ở nav. */ .lich-mode .btn.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } /* ------------------------------------------------------------ Lưới TUẦN (chế độ `?cheDo=tuan`, 2026-08-30). Cố ý KHÔNG dùng `` như lưới tháng: tuần chỉ có một hàng, nên grid CSS cho phép tầng mobile đổi thẳng `grid-template-columns` về một cột — 7 ngày xếp chồng thành một lịch trình đọc dọc — mà không phải phá cấu trúc bảng (thứ đã buộc lưới THÁNG phải chấp nhận cuộn ngang, xem ghi chú ở tầng mobile). `minmax(0, 1fr)`: thiếu `minmax` thì cột grid lấy `min-width: auto`, và một tên sân dài sẽ phình cột đó ra, đẩy cả lưới rộng hơn thẻ chứa. ------------------------------------------------------------ */ .lich-tuan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs, .25rem); } .lich-tuan__cot { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } /* Đầu cột XẾP DỌC (thứ ở trên, ngày ở dưới) chứ không nằm ngang: cột tuần hẹp nhất đo được ~93px (máy tính bảng dọc 768px, đúng mép breakpoint), mà "Hôm nay 31/08" cần ~95px ⇒ riêng cột hôm nay tự xuống hai dòng và đầu cột đó cao hơn 6 cột còn lại, làm nội dung bên trong lệch hàng. Xếp dọc là hai dòng ở MỌI cột, mọi bề rộng — cao bằng nhau một cách tất định, và cũng đúng khuôn quen thuộc của lịch tuần (tên thứ ở trên, ngày ở dưới). Ở điện thoại cột trải hết bề ngang nên tầng mobile lật lại thành một hàng. */ .lich-tuan__dau { display: flex; flex-direction: column; gap: 0; padding: .3rem .45rem; background: var(--surface-sunken); border-bottom: 1px solid var(--border); font-size: var(--fs-caption, .8125rem); } .lich-tuan__thu { font-weight: 700; } .lich-tuan__than { flex: 1 1 auto; padding: .3rem; min-height: 5rem; } /* Cột hôm nay: viền màu thương hiệu, cùng tín hiệu với ô "hôm nay" của lưới tháng (`border-primary` `border-2` ở template). `box-shadow` inset thay vì tăng `border-width` để không làm lệch bề rộng cột so với 6 cột còn lại. */ .lich-tuan__cot.is-today { border-color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary); } .lich-tuan__cot.is-today .lich-tuan__dau { background: var(--badge-green-bg, rgba(22,163,74,.14)); color: var(--badge-green-fg); } /* Chip buổi tập ở lưới tuần — ba dòng (giờ · sân · trạng thái) thay vì một dòng giờ như lưới tháng: cột tuần rộng gấp đôi ô lưới tháng nên đủ chỗ, và đó chính là lý do người dùng chọn chế độ Tuần. */ .lich-tuan .lich-buoi--day-du { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; padding: .3rem .4rem; margin-top: .25rem; border-radius: var(--radius-sm); background: var(--surface-sunken); } .lich-tuan .lich-buoi--day-du:hover { background: var(--surface-muted); } /* Tên sân trong chip: kẹp 2 dòng. Tên do người dùng tự đặt tới 100 ký tự — ở cột tuần rộng ~127px nó ăn 5-6 dòng và đẩy chip cao gấp ba những chip khác, làm hàng tuần so le. Bản đầy đủ vẫn còn nguyên trong modal xem-nhanh (bấm chính chip đó), nên không mất thông tin — chỉ là chip tóm tắt, giống việc lưới THÁNG không hiện tên sân chút nào. */ .lich-tuan .lich-buoi__san { line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ CARD & COMPONENT ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); } .app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--elevation-1); } /* Thẻ vừa được tạo ở request ngay trước (màn "Lời mời") — chỉ đổi VIỀN chứ không đổi nền: thẻ chứa một ô trắng, tô nền thẻ sẽ làm ô input nổi lên trông như lỗi hiển thị. Dùng token --action-primary (đã có bản đối ứng ở [data-bs-theme="dark"]), không hardcode màu. */ .app-card.is-highlight { border-color: var(--action-primary); box-shadow: 0 0 0 1px var(--action-primary), var(--elevation-1); } /* Radius mới theo DESIGN_RULES — card mềm hơn, nút/ô nhập bo 14px */ .card, .app-card, .stat-card, .empty-state, .auth-card { border-radius: var(--radius-card); } .btn { border-radius: var(--radius-btn); } /* ============================================================ PHẢN HỒI NHẤN — dùng chung cho mọi thứ bấm được ============================================================ */ /* Bootstrap tắt -webkit-tap-highlight-color ở , và :active của .btn chỉ đổi màu nền đi một bậc — trên điện thoại gần như không thấy. Hệ quả đo 12/10/2026: chạm vào nút, mục bottom nav hay thẻ bấm được thì KHÔNG có gì xảy ra cho tới khi trang đổi; cả file chỉ có 8 luật :active, đều cục bộ. Một cú lún nhỏ ngay lúc ngón tay CHẠM XUỐNG (không đợi nhấc lên) lấp đúng khoảng lặng đó — cùng ý với việc fast-nav.js tô sáng mục menu ở pointerdown. 🔴 Chỉ `transform`: không đổi bố cục, không đẩy phần tử bên cạnh, và chạy trên compositor. 🔴 `.btn` phải khai LẠI đủ bốn thuộc tính màu của Bootstrap: `transition` không cộng dồn giữa các luật, viết mỗi `transform` là mất hết chuyển màu khi hover. */ .btn { transition: color var(--motion-fast) ease-in-out, background-color var(--motion-fast) ease-in-out, border-color var(--motion-fast) ease-in-out, box-shadow var(--motion-fast) ease-in-out, transform var(--motion-instant) ease-out; } .btn:active { transform: scale(.97); } /* Nút dính liền nhau (btn-group, nút gắn vào ô nhập) mà lún riêng từng mảnh thì hở khe ở chỗ nối. */ .btn-group > .btn:active, .input-group > .btn:active { transform: none; } /* Bộ chọn có thẻ `a` vừa để loại bản khoá (`div.stat-card--locked`, không bấm được), vừa để thắng translateY(-1px) của .stat-card:hover — trên máy tính con trỏ luôn hover lẫn active cùng lúc. */ a.stat-card:active { transform: scale(.985); } .app-bottom-nav-item:active { transform: scale(.94); } .bmh-fab:active { transform: scale(.95); } /* Người bật "giảm chuyển động": bỏ cú lún, phản hồi còn lại là đổi màu nền sẵn có của Bootstrap. */ @media (prefers-reduced-motion: reduce) { .btn:active, a.stat-card:active, .app-bottom-nav-item:active, .bmh-fab:active { transform: none; } } .form-control, .form-select { border-radius: var(--radius-btn); padding: .625rem .85rem; } /* Tom Select — ô tìm kiếm cho mọi select.form-select (CLAUDE.md § 2). tom-select.bootstrap5.css tự đọc --bs-body-bg/--bs-border-color, nhưng --bs-body-bg ở app này trỏ --surface-sunken (nền TRANG, dòng 196/257) chứ không phải --surface (nền Ô NHẬP mà .form-control/.form-select dùng ở dòng 310) — không override thì ô Tom Select lệch màu nền so với mọi input khác trên cùng form. */ .ts-wrapper.form-select .ts-control { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-btn); padding: .625rem .85rem; } /* Trạng thái tải nằm cạnh nhãn ô chọn, không đẩy các trường trong popup. Thông báo lỗi hoặc danh sách trống vẫn hiện dưới ô chọn khi cần. */ #modalDieuChinh .fund-correction__status:empty { display: none; } #modalDieuChinh .ts-wrapper.disabled .ts-control, #modalDieuChinh .form-select:disabled { background: var(--surface); opacity: 1; } /* 🔴 Ô tìm kiếm của Tom Select không được chiếm chỗ trong .ts-control khi danh sách ĐANG ĐÓNG. Mặc định thư viện chỉ đưa input ra khỏi luồng (class input-hidden) khi ô MẤT focus — inputState() gate bằng `!isFocused`. Nhưng ngay sau khi người dùng chọn một dòng, dropdown đã đóng mà ô VẪN đang focus, nên input còn nằm trong luồng flex với `margin: 0 4px !important` (.has-items .ts-control > input) và `min-width: 7rem` + `flex-wrap: wrap` (.ts-control) ⇒ (a) luôn thừa một dấu cách 4px ngay sau chữ, (b) nhãn dài thì input WRAP xuống dòng 2, đội ô cao thêm đúng một dòng. Đo bằng Chrome headless/CDP ở viewport 390px (2026-08-09): .ts-control cao 44px → 68px ngay sau khi chọn "Chị Hằng (Quản trị viên CLB Cầu Giấy)", và cũng 68px khi mở lại ô đã có giá trị. Lòng ô ở 390px chỉ còn 314px (padding-right 36px do --ts-pr-caret ép !important, cộng padding .85rem ở trên) nên nhãn dài hơn ~198px là wrap — nhãn thật trong app vượt ngưỡng này dễ dàng (vd option sổ quỹ "dd/MM — mô tả — 500.000 ₫"). Điều kiện đúng là "danh sách đang đóng" (:not(.dropdown-active)), KHÔNG phải "mất focus". ⚠️ KHÔNG sửa bằng plugin 'dropdown_input' của thư viện: nó dời ô tìm kiếm ra ngoài .modal và bị _enforceFocus của Bootstrap chặn — xem ghi chú ở fragments/layout.html. */ .ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input { position: absolute; left: -10000px; opacity: 0; } /* Danh sách ĐANG MỞ thì input phải gõ được thật: nhường trọn dòng cho nó bằng cách ẩn nhãn đã chọn. Không làm vậy thì nhãn + input(min 7rem) vẫn wrap thành 2 dòng như cũ, còn ép min-width: 0 thì input chỉ còn ~6px, không nhìn thấy mình đang gõ gì. Giá trị hiện tại vẫn tra được: nó được tô sáng trong danh sách ngay bên dưới. */ .ts-wrapper.single.has-items.dropdown-active .ts-control > .item { display: none; } /* 🔴 Nguyên nhân THỨ HAI, độc lập với ô tìm kiếm ở trên: nhãn đã chọn tự wrap vì thư viện để `white-space: normal`. Đo trong modal ở 390px (2026-08-09): lòng ô chỉ còn 288.4px mà nhãn "Chị Hằng (Quản trị viên CLB Cầu Giấy)" cần 300.5px ⇒ 2 line box, .item cao 24px → 48px ⇒ ô 68px. Ở 1280px thì lòng ô 414.4px nên vừa 1 dòng, đó là lý do lỗi chỉ lộ trên máy nhỏ. Cắt bằng ellipsis thay vì để wrap: ô nhập luôn cao đúng một dòng như mọi .form-control khác trên cùng form, giống hành vi của ) ═══════════════════════════════════ Dùng ở "Thêm người khác" (Điểm danh) và "Đăng ký hộ" (Đăng ký đi tập). Mọi luật dưới đây là để ghi đè CSS mặc định của thư viện, không phải trang trí: (1) MÀU CHIP BỊ HARDCODE. tom-select.bootstrap5.css đặt thẳng `.ts-wrapper.multi .ts-control > div { background: #efefef; color: #343a40 }` và `.remove { border-left: 1px solid #dee2e6 }` — số hex cứng, KHÔNG đọc biến theme. Ở theme tối chip thành mảng xám sáng chữ đen giữa ô nền tối, và `MB-7` (tương phản AA cả hai theme) hỏng. Selector ở đây dùng `.item` (0,4,0) nên thắng `> div` (0,3,1) của thư viện. (2) PADDING CỦA Ô. `.ts-wrapper.multi.has-items .ts-control` (0,3,0) của thư viện thắng `.ts-wrapper.form-select .ts-control` (0,2,0) ở khối trên ⇒ ô multi khi ĐÃ có chip lại lệch padding so với mọi .form-control khác cùng form. Phải khai riêng ở đúng độ đặc hiệu đó. (3) `padding-right: 0 !important` trên .item là của plugin remove_button — đừng chống lại nó: nút × tự mang padding của mình và nằm sát mép phải chip, đó là bố cục thư viện thiết kế sẵn. (4) TRÀN NGANG (`MB-1`). Tên thật dài ("Chị Hằng (Quản trị viên CLB Cầu Giấy)") vượt lòng ô 288px ở 390px. KHÔNG cắt bằng ellipsis như select đơn: ở đây người dùng cần đọc đủ tên để biết mình đã chọn đúng ai. Cho chữ xuống dòng TRONG chip (`white-space: normal` + `overflow-wrap: anywhere`) và chặn `max-width: 100%` — chip cao thêm chứ không đẩy ngang. (5) CHIỀU CAO Ô. Chọn 10-20 người thì ô dài bằng cả màn hình, nút "Thêm" bị đẩy khỏi tầm nhìn và không ai biết là còn nút. Cap chiều cao rồi cho cuộn DỌC bên trong (cuộn dọc có chủ ý, không vi phạm MB-1 vốn chỉ nói về chiều ngang). */ .ts-wrapper.multi.form-select .ts-control, .ts-wrapper.multi.form-select.has-items .ts-control { padding: .45rem .5rem; gap: .3rem; max-height: 11rem; overflow-y: auto; } .ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; margin: 0; /* khoảng cách do `gap` ở .ts-control lo, tránh cộng dồn hai lớp */ padding: .2rem 0 .2rem .6rem; /* padding-right bị plugin ép 0 !important — xem (3) */ background: var(--surface-muted); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-btn); font-size: .9375rem; /* 15px — trên ngưỡng 13px của MB-2 */ line-height: 1.35; white-space: normal; overflow-wrap: anywhere; } .ts-wrapper.multi .ts-control > .item.active { background: var(--surface-muted); color: var(--text); border-color: var(--border); } .ts-wrapper.multi .ts-control > .item > .remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: stretch; min-width: 2rem; margin-left: .4rem; padding: 0 .35rem; border-left: 1px solid var(--border); border-radius: 0 var(--radius-btn) var(--radius-btn) 0; color: var(--text-muted); font-size: 1.1rem; line-height: 1; text-decoration: none; } .ts-wrapper.multi .ts-control > .item > .remove:hover { background: var(--surface); color: var(--bs-danger); } /* Ô tìm kiếm ở chế độ multi phải LUÔN nhìn thấy (khác select đơn — nơi nó bị đẩy ra khỏi luồng khi danh sách đóng): nó chính là chỗ gõ để chọn thêm người kế tiếp. */ .ts-wrapper.multi .ts-control > input { min-width: 6rem; font-size: .9375rem; } /* 🔴 KHÔNG có biến thể riêng cho điện thoại — chip ở mọi bề ngang trông GIỐNG HỆT nhau (người dùng chốt 2026-08-19). Bản đầu tiên cho mỗi chip chiếm trọn một dòng với nút × 44×44 để qua `MB-3`, nhưng tên ngắn ("Chi Lan") để lại một khoảng trống dài tới tận nút × ở mép phải — nhìn rời rạc, không còn ra hình cái chip. Đã đảo lại theo yêu cầu. ⚠️ Đánh đổi ĐÃ BIẾT, đừng "sửa" lại mà không hỏi: nút × giờ ~32×30px ⇒ `tools/mobile-audit` sẽ đếm nó vào `smallTargets` và `MB-3` (vùng chạm ≥ 44×44) BÁO ĐỎ ở màn Điểm danh và Đăng ký đi tập. Đây là ngoại lệ có chủ ý, không phải sót. Bỏ nhầm một người thì chọn lại được ngay ở cùng ô nên hậu quả nhẹ; muốn quay lại bố cục cũ thì khôi phục khối @media trong lịch sử git của file này. */ /* Statistic Card — cả card là link về nguồn (PP-3) */ .stat-card { display: block; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--elevation-1); text-decoration: none; color: inherit; transition: box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); } /* Hover chỉ dành cho thiết bị CÓ con trỏ. Trên cảm ứng, trình duyệt giữ :hover ở phần tử vừa chạm cho tới khi chạm chỗ khác ⇒ thẻ/nút "dính" ở trạng thái nhấc lên sau khi đã buông tay. */ @media (hover: hover) { .stat-card:hover { border-color: var(--border-strong); box-shadow: var(--elevation-2); transform: translateY(-1px); color: inherit; } } .stat-card__label { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-xs); } .stat-card__label i { font-size: 1rem; } .stat-card__value { margin-bottom: var(--space-2xs); } .stat-card__meta { font-size: .875rem; color: var(--text-muted); } .stat-card__meta .arrow { color: var(--action-primary); } /* Thẻ CLB đang chờ duyệt (BR-MEM-13, Đ8) — không click được, không giống link thường. */ .stat-card--locked { opacity: .6; cursor: default; } .stat-card--locked:hover { border-color: var(--border); box-shadow: var(--elevation-1); transform: none; } /* Biểu đồ doanh thu 12 tháng (`/admin/doanh-thu`) — cột dựng bằng div, KHÔNG nạp thư viện chart. Lý do: