/* ============================================================ 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-50: #ECF8F4; --court-100: #D3EDE4; --court-200: #A5DBC8; --court-300: #7FD9BC; --court-400: #3EC49E; --court-500: #0E7A5F; --court-600: #0A6450; --court-700: #08503F; --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; /* --- 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: 60px; --topbar-height: 56px; /* --- Sidebar TỐI — độc lập theme sáng/tối, luôn xanh thảm đậ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 trên nền #093A2F: --nav-text 8,79:1 (cũ #C7D2E4 trên navy: 10,81:1) --nav-text-muted 5,54:1 (cũ #8394B0 trên navy: 5,36:1) --nav-group-label 3,69:1 (cũ #64789B trên navy: 3,69:1 — bằng đúng) 🔴 --nav-text TỤT từ 10,81 xuống 8,79. Vẫn trên cả AA (4,5) lẫn AAA (7), nên chấp nhận được: kéo lại đúng 10,81 phải đẩy chữ về gần trắng hẳn, làm nav mất sắc và trông gắt hơn hiện tại. Ghi ra đây để lần sau ai đo thấy con số nhỏ hơn thì biết là CÓ CHỦ Ý, không phải sót. 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. */ --nav-bg: linear-gradient(180deg, var(--court-900) 0%, var(--court-950) 100%); --nav-text: #C6DCD3; --nav-text-strong: #F8FAFC; --nav-text-muted: #8FB3A8; --nav-group-label: #6E9287; --nav-border: rgba(148,163,184,.14); --nav-hover-bg: rgba(148,163,184,.10); --nav-active-bg: var(--court-500); --nav-active-text: #FFFFFF; --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); --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; /* --- 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); --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; /* 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. */ .nav-tabs { --bs-nav-link-color: var(--action-primary); --bs-nav-link-hover-color: var(--action-primary-hover); } /* ============================================================ 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; } 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; } /* 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); } /* 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-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. */ .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ũ. */ .lich-grid .lich-buoi { display: block; width: 100%; } /* 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); } /* ============================================================ 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); } /* 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); } .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; } /* 🔴 Ô 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); } .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; } /* Đầu card có ô icon bo góc màu (kiểu FastClub) */ .stat-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-sm); } .stat-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; } /* Biến thể nhỏ cho hàng chỉ số THAM KHẢO (Báo cáo tài chính): giữ nguyên bộ màu is-* bên dưới, chỉ hạ kích thước để cụm nhãn không lấn chỗ của số tiền ở khổ máy tính bảng. */ .stat-card__icon--sm { width: 2rem; height: 2rem; border-radius: 9px; font-size: 1rem; } .stat-card__icon.is-blue { background: rgba(37,99,235,.12); color: var(--blue-600); } .stat-card__icon.is-green { background: rgba(22,163,74,.12); color: var(--green-600); } .stat-card__icon.is-amber { background: rgba(249,115,22,.14); color: var(--amber-600); } .stat-card__icon.is-violet { background: rgba(124,58,237,.12); color: var(--violet-500); } .stat-card__icon.is-red { background: rgba(220,38,38,.12); color: var(--red-500); } [data-bs-theme="dark"] .stat-card__icon.is-blue { color: #93C5FD; } [data-bs-theme="dark"] .stat-card__icon.is-green { color: #4ADE80; } [data-bs-theme="dark"] .stat-card__icon.is-amber { color: #FDBA74; } [data-bs-theme="dark"] .stat-card__icon.is-violet { color: var(--violet-300); } [data-bs-theme="dark"] .stat-card__icon.is-red { color: #FCA5A5; } /* Club pill — bộ chọn CLB góc phải header (kiểu FastClub) */ .page-header__aside { display: flex; align-items: center; gap: .6rem; } .club-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: var(--elevation-1); } .club-pill:hover { border-color: var(--border-strong); color: var(--text); } .club-pill .lead-ic { color: var(--action-primary); } .club-pill .chev { color: var(--text-muted); font-size: .8rem; } .club-pill__logo { width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; } .club-list__logo { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } /* Biến thể chỉ-hiển-thị: định danh CLB trong header trang, không bấm được (đổi CLB dùng switcher navbar). */ .club-pill--static { cursor: default; } .club-pill--static:hover { border-color: var(--border); color: var(--text); } /* Page Header — thay link "← Về…" đặt lệch */ .page-header { margin-bottom: var(--space-xl); } /* Hàng trên header: breadcrumb (trái) + club-pill định danh CLB (phải) — dùng CHUNG cho MỌI trang trong CLB qua fragment `page :: pageHeader`, để tên CLB đang xem luôn hiện, không chỉ Dashboard. flex-wrap: pill rớt xuống dòng dưới trên màn hẹp thay vì chèn ép breadcrumb. */ .page-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-2xs); } .page-header__top .page-header__crumb { margin-bottom: 0; } .page-header__top .club-pill { margin-left: auto; } /* Breadcrumb — "thanh menu" đường dẫn: mọi cấp cha bấm được để quay lại, cấp hiện tại là chữ mờ. Dùng flex + wrap để chuỗi dài (VD Buổi tập › Chi tiết buổi › Điểm danh) tự xuống dòng trên mobile. */ .page-header__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--space-2xs); } .page-header__crumb a { color: var(--action-primary); text-decoration: none; font-weight: 500; } .page-header__crumb a:hover { text-decoration: underline; } .page-header__crumb .sep { color: var(--text-muted); opacity: .55; } .page-header__crumb .current { color: var(--text-muted); } .page-header__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-2xs); } /* Tiêu đề trang to & đậm hơn — nhịp thị giác giống mockup FastClub */ .page-header__title { margin: 0; font-size: 1.75rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -.02em; } .page-header__subtitle { font-size: .9rem; color: var(--text-muted); margin-top: var(--space-2xs); max-width: 60ch; } /* --reserve: chừa cứng chiều cao 2 dòng cho subtitle. Dùng ở nhóm 4 tab Cài đặt (Chung / Cách chia tiền / Sân / Loại cầu): mô tả mỗi tab dài ngắn khác nhau (1 hay 2 dòng) làm page-header cao thấp khác nhau, đẩy thanh tab con bên dưới lệch vị trí khi chuyển tab. Ghim cao 2 dòng ⇒ tab luôn cùng một chỗ; tab nào mô tả 1 dòng thì dưới nó dư một dòng trắng (chấp nhận được, đổi lấy vị trí ổn định). line-height khai rõ để min-height khớp đúng 2 dòng. Mobile ẩn subtitle (display:none ở tầng mobile bên dưới) nên min-height này không tác động ở điện thoại. */ .page-header__subtitle--reserve { line-height: 1.4; min-height: calc(1.4em * 2); } /* ============================================================ NAV-PILLS — tab dạng segmented (Báo cáo, Sân, Cài đặt…) Active = viên xanh đặc (đã map --bs-primary). Track nền chìm. ============================================================ */ .nav-pills { display: inline-flex; flex-wrap: wrap; gap: .25rem; background: var(--surface-muted); padding: .3rem; border-radius: var(--radius-md); border: 1px solid var(--border); } /* P5: chữ tab chưa active (--text-muted) trên --surface-muted chỉ đạt 4,04:1 ở dark (--surface-muted dark #334155 sáng hơn light tương ứng, không đủ tối để bù cho --text-muted). Dark-only: hạ nền pill xuống --surface-sunken (đã có, dùng cho nền trang) — đạt ~7:1, không cần đổi --text-muted (dùng ở rất nhiều nơi khác, đổi token đó rủi ro lan rộng ngoài phạm vi task này). */ [data-bs-theme="dark"] .nav-pills { background: var(--surface-sunken); } .nav-pills .nav-link { color: var(--text-muted); font-weight: 600; font-size: .9rem; padding: .45rem 1rem; border-radius: var(--radius-sm); } .nav-pills .nav-link:hover:not(.active) { color: var(--text); background: var(--surface); } .nav-pills .nav-link.active { background: var(--action-primary-solid, var(--action-primary)); color: #fff; box-shadow: 0 4px 10px rgba(14,122,95,.28); } /* App Alert — soft, kèm hành động bên phải */ .app-alert { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid transparent; font-size: .95rem; margin-bottom: var(--space-md); } .app-alert__body { display: flex; align-items: center; gap: .5rem; } /* P5: nền dùng var(--alert-*-bg, rgba(...)) — chỉ định nghĩa ở [data-bs-theme="dark"], LIGHT rơi về fallback rgba() gốc, không đổi. */ .app-alert.is-info { background: var(--alert-info-bg, rgba(37,99,235,.10)); border-color: rgba(37,99,235,.22); color: var(--badge-blue-fg); } /* `is-court` — banner của luồng "Đăng ký đi tập" (vòng 2 task 5.12). Cùng lý do với `.btn-court-soft` ở khối nút: người dùng chốt cả MÀN đó mang xanh thảm, không còn xanh dương. Chỉ dùng ở màn này — `is-info` vẫn là ô màu "thông tin trung tính" dùng chung cho toàn app. Tương phản: light chữ --court-700 trên nền đã hoà rgb(231,242,239) = 8,23:1 · dark --court-300 trên --alert-court-bg = 8,04:1. Dark khai nền ĐẶC (đúng cơ chế P5 của 4 alert kia) để công cụ audit đọc được nền thật thay vì kênh RGB thô của rgba. */ .app-alert.is-court { background: var(--alert-court-bg, rgba(14,122,95,.10)); border-color: rgba(14,122,95,.22); color: var(--court-700); } [data-bs-theme="dark"] .app-alert.is-court { color: var(--court-300); } .app-alert.is-success { background: var(--alert-success-bg, rgba(22,163,74,.10)); border-color: rgba(22,163,74,.22); color: var(--badge-green-fg); } .app-alert.is-warning { background: var(--alert-warning-bg, rgba(249,115,22,.12)); border-color: rgba(249,115,22,.26); color: var(--badge-amber-fg); } .app-alert.is-danger { background: var(--alert-danger-bg, rgba(220,38,38,.10)); border-color: rgba(220,38,38,.24); color: var(--badge-red-fg); } /* Toast thông báo dùng chung (BmhToast, notification.js) — góc trên-phải ở MỌI cỡ màn hình (kể cả mobile). z-index trên cả modal vì lỗi có thể xảy ra khi đang mở modal. 🔴 SỬA COMMENT LỖI THỜI (task 1.2): đoạn trước đây ở đây nói `top` chỉ là giá trị mặc định vì notification.js "đo chiều cao THẬT của .app-topbar-mobile/.auth-topbar/.page-header__top rồi ghi đè top bằng inline style mỗi lần show()". Cơ chế đó ĐÃ BỊ BỎ (`notification.js` dòng 14–17: toast nay ghim cứng ở góc trên vì nền đậm/đặc, đè lên navbar vẫn đọc rõ) — comment cũ khiến người đọc đi tìm một hàm không còn tồn tại. `top: var(--space-md)` bây giờ là vị trí THẬT và duy nhất. Hệ quả trên mobile, đo được ở 390×844 (ghi lại chứ KHÔNG tự sửa — đây là quyết định thiết kế của spec toast 2026-08-17, đảo lại phải hỏi người dùng): toast rộng 350/390px nên nó che gần trọn topbar, gồm cả `.app-theme-toggle` — phần tử bấm được DUY NHẤT của topbar mobile — trong 4 giây (7 giây với toast `danger`). Trên desktop góc trên-phải là chỗ trống nên không ai mất gì. */ #bmh-toast-container { position: fixed; top: var(--space-md); right: var(--space-md); z-index: calc(var(--bs-modal-zindex, 1055) + 10); display: flex; flex-direction: column; gap: var(--space-sm); max-width: min(24rem, calc(100vw - 2rem)); } #bmh-toast-container .app-alert { margin-bottom: 0; box-shadow: var(--elevation-2); flex-wrap: nowrap; } /* Nền đậm/đặc thay vì màu nhạt (tint) của .app-alert dùng ở nội dung trang — toast cần nổi bật, tự ẩn nhanh nên không cần giữ tông nhẹ nhàng như banner tĩnh. Chữ/icon trắng để đủ tương phản trên nền đặc; .btn-close-white (Bootstrap) đổi màu nút đóng cho khớp. 🔴 Task 1.2 — ĐO ĐƯỢC hai nền TRƯỢT AA với chữ trắng, ở CẢ hai theme và CẢ desktop (probe riêng: `audit.js` không bao giờ thấy toast vì toast chỉ tồn tại sau khi JS gọi `BmhToast.show()`): • is-success `#16A34A` → **3,30:1** (cần 4,5 cho chữ 15,2px) ⇒ `--green-500` một bậc quá sáng • is-warning `#D97706` → **3,19:1** Sửa bằng token có sẵn, không nghĩ mã hex mới: • is-success → `--green-600` (#15803D) với chữ trắng: **5,02:1** đo được. Chỉ tối thêm một bậc, vẫn đọc ra "thành công". • is-warning → GIỮ nền amber, đổi CHỮ sang màu tối (`--slate-900`): **6,37:1**. 🔴 Bản sửa đầu tối nền lên `--amber-700` (#7C380B) đạt 8,65 nhưng chụp ảnh ra màu **nâu bùn**, mất luôn nghĩa "cảnh báo" và đá nhau với banner amber nhạt phía sau. Bảng màu không có bậc nào giữa `--amber-600` (#EA580C — vẫn chỉ 3,56, vẫn trượt) và `--amber-700`, nên đường đúng là đảo chiều tương phản chứ không phải tối nền: đây CHÍNH LÀ cách app đã làm cho `.btn-warning` (chữ đen trên #ffc107, đo được 12,9:1 ở task 0.6). Kéo theo: phải bỏ `filter` của `.btn-close-white` cho riêng toast này, nếu không dấu X trắng biến mất trên nền sáng. `is-info`/`is-danger` giữ nguyên GIÁ TRỊ (5,17 và 4,83 — đều đạt), chỉ đổi cách viết từ mã hex sang token tương ứng cho khớp luật "mọi màu đến từ token" (`--blue-500` = #2563EB, `--red-500` = #DC2626, đo lại xác nhận tương phản không đổi). 🔴 Đây là thay đổi nhìn thấy được TRÊN CẢ DESKTOP. Khác với ca nút "Chốt sổ ngay" bị hoàn tác ở task 0.6, ca này KHÔNG phải dọn thẩm mỹ: hai nền trên trượt tiêu chí `MB-7` bằng số, và AA không phụ thuộc bề rộng màn hình nên không thể sửa riêng cho mobile. `MB-8` (ảnh 1440×900) vẫn byte-identical vì ảnh chụp trang tĩnh không có toast nào. */ #bmh-toast-container .app-alert.is-success { background: var(--green-600); border-color: var(--green-600); color: #fff; } #bmh-toast-container .app-alert.is-info { background: var(--blue-500); border-color: var(--blue-500); color: #fff; } #bmh-toast-container .app-alert.is-warning { background: var(--amber-500); border-color: var(--amber-500); color: var(--slate-900); } #bmh-toast-container .app-alert.is-danger { background: var(--red-500); border-color: var(--red-500); color: #fff; } /* Dấu X của Bootstrap là ảnh nền; `.btn-close-white` (notification.js gắn cho MỌI toast) đảo nó thành trắng — trên nền amber sáng thì gần như mất hẳn. Trả về dấu X tối cho đúng một kiểu toast này. Dùng primitive `--slate-900` chứ không phải `--text-strong`: nền toast là màu CỐ ĐỊNH ở cả hai theme, nên chữ trên nó cũng phải cố định — `--text-strong` ở theme tối là màu SÁNG, sẽ mất chữ. */ #bmh-toast-container .app-alert.is-warning .btn-close { filter: none; } /* Empty State — biến màn trống thành điểm khởi đầu */ .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elevation-1); padding: var(--space-2xl) var(--space-xl); text-align: center; } .empty-state__mark { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin: 0 auto var(--space-md); border-radius: 50%; font-size: 1.6rem; line-height: 1; background: rgba(14,122,95,.10); color: var(--action-primary); } .empty-state__title { margin-bottom: var(--space-xs); } .empty-state__desc { color: var(--text-muted); margin-bottom: var(--space-lg); } /* ============================================================ Bọc nội dung trang — đẩy phải khi có sidebar (>=992px), chừa chỗ bottom-nav (<992px) ============================================================ */ .page-content { padding-top: var(--space-lg); } /* Bề rộng nội dung — QUY ƯỚC: MỌI màn trong CLB dùng content-wide (960) cho đồng nhất bề rộng. (Trước đây các màn *sua* dùng content-default(720) nên trông "bé hơn" màn danh sách — theo yêu cầu đồng bộ, đã gộp về cùng một size 960.) • content-wide (960): MỌI màn trong CLB — list, bảng tiền, dashboard, VÀ các màn *sua*. • content-default(720): còn định nghĩa để dùng lại nếu cần trang một cột hẹp (hiện không màn nào dùng). • content-narrow (560): dành cho auth/shell ngoài CLB. 🔴 Bảng dữ liệu KHÔNG được dùng content-default — nó co bảng lại hẹp hơn các màn khác (bug đã từng gặp ở bang-chia-tien). Thêm màn mới ⇒ content-wide. */ .page-content .content-narrow { max-width: var(--w-narrow); } .page-content .content-default { max-width: var(--w-content); } .page-content .content-wide { max-width: var(--w-wide); } @media (min-width: 992px) { .page-content { margin-left: var(--sidebar-width); padding-top: var(--space-xl); } } @media (max-width: 991.98px) { .page-content { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-md)); } } /* ============================================================ Topbar tối giản (<992px) ============================================================ */ .app-topbar-mobile { background: var(--surface); border-bottom: 1px solid var(--border); padding: .5rem 1rem; min-height: var(--topbar-height); } /* Tên CLB ở topbar: dài tới đâu cũng KHÔNG BAO GIỜ wrap — cắt bằng ellipsis (P3, task 0.4). 🔴 Vì sao luật này nằm ở ĐÂY chứ không trong khối tầng mobile ở cuối tệp (task 1.1) — và tại sao đừng viết lại nguyên văn chuỗi mốc của khối đó trong bất kỳ comment nào: `MobileScaleTest` đếm số lần chuỗi mốc xuất hiện để bắt lỗi "luật mobile rải rác nhiều khối", nên một comment nhắc đúng chuỗi đó cũng bị tính là mốc thứ hai và ba test của lớp này đỏ cùng lúc (đã xảy ra thật khi viết task 1.1). Lý do đặt ở đây: topbar mang `d-lg-none` nên nó SỐNG TỚI 991,98px, rộng hơn tầng mobile 767,98px — dải 768–991px (tablet dọc) vì thế nhận chrome điện thoại nhưng KHÔNG có luật chống wrap. Đo bằng probe task 1.1: ở 768px và 991px, tên CLB 95 ký tự đội topbar từ 56px lên **103,4px** (2 dòng), trong khi ở 390px cùng tên đó chỉ chiếm 234px (=60vw) và topbar giữ 60,2px. Đặt ngoài mọi @media là an toàn cho MB-8 theo đúng lý lẽ của tầng mobile — chỉ khác là bảo vệ bằng CẤU TRÚC COMPONENT (>=992px không render topbar này) thay vì bằng breakpoint. 🔴 --fs-strong/--tap-min chỉ tồn tại TRONG tầng mobile (<768px), nên mọi chỗ dùng token ở ngoài đó phải viết kèm giá trị dự phòng CÙNG con số — thiếu nó, 768–991px rơi về giá trị thừa hưởng chứ không phải bậc của thang chữ. */ .app-topbar-mobile__club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; font-size: var(--fs-strong, 1.0625rem); font-weight: 700; } .app-topbar-mobile .app-brand { min-width: 0; } /* Icon topbar về bậc 20px của thang icon (MB-4). `.app-theme-toggle` có `font-size: .85rem` nên icon con thừa hưởng 13,6px — đo thật ở 768×1024 (ở <768px tầng mobile đã ép 20px). */ .app-topbar-mobile .bi { font-size: var(--icon-md, 1.25rem); } /* Vùng chạm topbar (MB-3): logo+tên CLB đo 98×35 và nút đổi theme 35×34 ở 768px. GIỮ kích thước nhìn thấy — phóng to chúng đội cao topbar — mở vùng chạm bằng pseudo-element trong suốt như P1 làm với nút icon-only. Tầng mobile đã có luật này cho `.app-brand` trần (áp cả trang auth/entry ở <768px); cụm dưới đây chỉ mở rộng nó ra dải tablet và CHỈ trong topbar, không nới cho `.app-brand` ở nơi khác — chồng nhau ở <768px là vô hại vì cùng kích thước. `.app-theme-toggle` phải scope theo topbar: cùng class còn dùng ở footer sidebar desktop, nơi một lớp phủ 44px vô hình sẽ giành cú bấm của nút Đăng xuất ngay cạnh. */ .app-topbar-mobile .app-brand, .app-topbar-mobile .app-theme-toggle { position: relative; } .app-topbar-mobile .app-brand::after, .app-topbar-mobile .app-theme-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--tap-min, 44px); height: var(--tap-min, 44px); } /* ============================================================ Sidebar trái cố định (>=992px) ============================================================ */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--nav-bg); border-right: 1px solid var(--nav-border); padding: var(--space-md) 0 0; z-index: 1030; } .app-sidebar-brand { padding: 0 var(--space-md) var(--space-md); } .app-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--text-strong); text-decoration: none; } /* Logo mark: ô bo góc màu xanh — dùng chung sidebar + topbar mobile */ .app-brand .app-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 11px; background: var(--nav-brand-mark-bg); font-size: 1.15rem; flex: 0 0 auto; box-shadow: 0 4px 10px rgba(14,122,95,.35); } /* Cỡ mặc định logo SVG (auth/entry — không có ô tile): xanh thương hiệu */ .brand-svg { width: 1.4rem; height: 1.4rem; color: var(--action-primary); flex: 0 0 auto; vertical-align: -.2em; } /* Trong ô tile sidebar/topbar/entry: trắng, khớp tile */ .app-brand .app-brand-mark .brand-svg { width: 1.35rem; height: 1.35rem; color: #fff; } /* Biến thể logo CLB (topbar <992px): ảnh lấp KÍN ô tile ⇒ bỏ nền xanh + đổ bóng thương hiệu, nếu không ảnh sẽ có viền xanh thừa quanh mép. Giữ nguyên 2,2rem và bo góc 11px của .app-brand-mark ⇒ chiều cao topbar không đổi (MB-8 an toàn). Ngoài mọi @media: topbar sống tới 991,98px trong khi tầng mobile dừng ở 767,98px, và bảo vệ ở đây là bằng CẤU TRÚC (>=992px không render topbar). */ .app-brand .app-brand-mark--logo { background: none; box-shadow: none; overflow: hidden; } .app-brand .app-brand-mark__logo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .app-brand-text { display: flex; flex-direction: column; line-height: 1.12; } .app-brand-name { font-weight: 800; font-size: 1.05rem; } .app-brand-sub { font-size: .7rem; font-weight: 500; } /* Trong sidebar tối: chữ sáng */ .app-sidebar .app-brand-name { color: var(--nav-text-strong); } .app-sidebar .app-brand-sub { color: var(--nav-text-muted); } /* Club switcher — base SÁNG (dùng trong offcanvas menu mobile) */ .app-club-switch { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 var(--space-sm) var(--space-sm); padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text); text-decoration: none; font-size: .9rem; } .app-club-switch:hover { border-color: var(--border-strong); color: var(--text); } .app-club-switch .label { display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-club-switch i { color: var(--text-muted); } .app-club-switch__logo { width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; margin-right: .4rem; flex: 0 0 auto; } /* Trong sidebar TỐI: đổi sang nền/chữ sáng cho hợp navy */ .app-sidebar .app-club-switch { border-color: var(--nav-border); background: var(--nav-hover-bg); color: var(--nav-text); } .app-sidebar .app-club-switch:hover { border-color: var(--border-strong); color: var(--nav-text-strong); background: rgba(148,163,184,.16); } .app-sidebar .app-club-switch i { color: var(--nav-text-muted); } .app-sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--space-xs); } .app-sidebar-group-label { padding: var(--space-md) var(--space-sm) var(--space-2xs); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-group-label); } .app-sidebar-nav .nav-link { color: var(--nav-text); padding: .6rem .75rem; margin: 2px 0; border-radius: var(--radius-md); display: flex; align-items: center; gap: .7rem; font-size: .9375rem; font-weight: 500; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } .app-sidebar-nav .nav-link i { font-size: 1.1rem; color: var(--nav-text-muted); width: 1.2rem; text-align: center; } .app-sidebar-nav .nav-link:hover { background: var(--nav-hover-bg); color: var(--nav-text-strong); } .app-sidebar-nav .nav-link:hover i { color: var(--nav-text-strong); } .app-sidebar-nav .nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; box-shadow: 0 6px 14px rgba(14,122,95,.35); } .app-sidebar-nav .nav-link.active i { color: var(--nav-active-text); } .app-sidebar-footer { padding: var(--space-sm); margin-top: var(--space-xs); border-top: 1px solid var(--nav-border); display: flex; flex-direction: column; gap: var(--space-xs); } /* Hồ sơ người dùng cuối sidebar */ .app-user { display: flex; align-items: center; gap: .6rem; padding: .5rem; border-radius: var(--radius-md); text-decoration: none; color: var(--nav-text); } .app-user:hover { background: var(--nav-hover-bg); color: var(--nav-text-strong); } .app-user__avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: 0 0 auto; background: rgba(148,163,184,.18); color: var(--nav-text-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; overflow: hidden; } .app-user__avatar img { width: 100%; height: 100%; object-fit: cover; } .app-user__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .app-user__name { font-weight: 600; font-size: .85rem; color: var(--nav-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; } .app-user__role { font-size: .72rem; color: var(--nav-text-muted); } .app-user__chev { margin-left: auto; color: var(--nav-text-muted); font-size: .8rem; } /* 🔴 Hai nút [Giao diện] [Đăng xuất] phải rộng BẰNG NHAU, nhưng hai flex item lại khác loại: một bên là chính