/* ============================================================================= TGSF — brand.css (bản mẫu v2 — đã sửa theo review của Codex) ----------------------------------------------------------------------------- Nguồn chân lý: brand/guideline.html, brand/index.html, brand/logo.html Mục tiêu: 1 file duy nhất định nghĩa token + typography + component cơ bản, để mọi report (index, deal, web, admin) dùng chung thay vì mỗi trang một hệ. ⚠️ THỨ TỰ NẠP CSS (quan trọng — Codex nêu): brand.css thay đổi cả html/body, heading, a — trùng selector với CSS sẵn có trong từng report. Quy tắc nạp: 1) brand.css (token + base) — nạp TRƯỚC 2) CSS tương thích của trang — nạp SAU, chỉ để đỡ vỡ layout cũ 3) gỡ dần override cũ cho tới khi trang chỉ còn dựa vào token brand Nếu nạp brand.css SAU CSS trang, nó sẽ đè padding/typography của trang → vỡ. Cách nhúng trong từng report: ============================================================================= */ :root{ color-scheme: light; /* ---- BRAND TOKENS (khớp CHÍNH XÁC brand/guideline.html — GIỮ ĐÚNG TÊN) - */ /* Tên biến phải khớp folder brand/: --accent2 --accent3 (KHÔNG gạch nối), */ /* nếu không var(--accent2) trong các trang brand/ sẽ thành undefined. */ --bg: #EFF2FF; /* nền trang, xanh rất nhạt */ --surface: #FFFFFF; /* nền card / bảng */ --ink: #0A0F33; /* chữ chính, navy */ --muted: #6E739C; /* chữ phụ (⚠️ contrast yếu — xem --muted-strong) */ --accent: #051ED8; /* MÀU CHỦ ĐẠO — xanh điện (9.62:1 trên trắng) */ --accent2: #3D6BFF; /* xanh trung */ --accent3: #9BB6FF; /* xanh nhạt */ --line: rgba(5,30,216,.14); /* viền, đường kẻ */ /* Alias gạch nối (tuỳ chọn, để tránh nhầm khi gõ) */ --accent-2: var(--accent2); --accent-3: var(--accent3); /* ---- MÀU PHỤ / SECONDARY (Tầng 2 "Expressive" — CÓ trong guideline) ---- Dùng cho phân loại danh mục, series biểu đồ, điểm nhấn. */ --coral: #FF3D77; /* Lip Coral — nhóm Makeup */ --plum: #7A2FF2; /* Berry Plum — mắt/má, nhấn sang */ --peach: #FFC4A3; /* Peach — nhóm Body */ --yellow: #FFCB2B; /* Sun Yellow — nhóm Suncare */ --pink: var(--coral); /* alias */ --accent-soft: #E7ECFF; /* nền nhấn xanh nhạt */ --accent-ink: #FFFFFF; /* chữ trên nền --accent */ /* ---- STATUS / DATA-VIZ ---- Xanh lá LÀ màu brand (#1FAA5A, chữ #178A48 trong guideline). Đỏ/cam cho âm/cảnh báo là mở rộng cho report (guideline không định nghĩa). */ --pos: #1FAA5A; /* tăng/tốt (fill) — brand green */ --neg: #E03131; /* giảm/xấu (fill) — report-specific */ --warn: #F08C00; /* cảnh báo (fill) — report-specific */ --info: var(--accent2); /* thông tin (xanh brand) */ /* Màu TEXT trạng thái — đủ đậm để đạt AA cho chữ nhỏ */ --pos-text: #147A3E; --neg-text: #C92A2A; --warn-text: #B45309; --muted-strong: #4E5680; /* thay --muted khi cần chữ phụ nhỏ đạt AA */ /* Dải màu biểu đồ — brand primary + màu phụ (tất cả đều là màu brand) */ --chart-1: #051ED8; /* royal blue */ --chart-2: #3D6BFF; /* blue mid */ --chart-3: #7A2FF2; /* plum */ --chart-4: #FF3D77; /* coral */ --chart-5: #FFCB2B; /* yellow */ --chart-6: #1FAA5A; /* green */ --chart-7: #FFC4A3; /* peach */ --chart-8: #9BB6FF; /* blue light */ /* ---- TYPOGRAPHY -------------------------------------------------------- Quy tắc font brand (brand/guideline.html + logo.html): - Thân bài: Be Vietnam Pro - Tiêu đề/display: Bricolage Grotesque - Serif nhấn: · Gilda Display → CHỈ dùng cho chữ KHÔNG DẤU (Skinfood, TGSF…) (Gilda không hỗ trợ tiếng Việt có dấu) · Playfair Display → dùng cho chữ tiếng Việt CÓ DẤU → Tách 2 token serif, KHÔNG gộp một fallback stack (Gilda-trước-Playfair sẽ khiến Playfair không bao giờ được chọn cho chữ có dấu). */ --font-body: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Bricolage Grotesque', var(--font-body); --font-serif-vn: 'Playfair Display', serif; /* mặc định cho chữ có dấu */ --font-serif-latin: 'Gilda Display', 'Playfair Display', serif; /* chữ không dấu */ /* ---- SHAPE / DEPTH ----------------------------------------------------- */ --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(10,15,51,.06), 0 4px 16px rgba(10,15,51,.06); --shadow-lg: 0 8px 30px rgba(10,15,51,.10); /* ---- SPACING (thang 4px) ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; } /* ============================================================================= BASE (⚠️ ghi đè html/body/heading/a — tuân thủ thứ tự nạp ở đầu file) ============================================================================= */ *{ box-sizing: border-box; } html, body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4{ font-family: var(--font-display); color: var(--ink); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 var(--space-3); } h1{ font-size: 30px; font-weight: 800; } h2{ font-size: 22px; font-weight: 700; } h3{ font-size: 18px; font-weight: 700; } a{ color: var(--accent); text-decoration: none; } a:hover{ color: var(--accent2); text-decoration: underline; } /* underline: không chỉ dựa vào màu */ /* ============================================================================= LAYOUT HELPERS ============================================================================= */ .tgsf-container{ max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); } /* ============================================================================= TOP BAR / HEADER dùng chung ⚠️ auth-gate.js chèn nút tài khoản position:fixed góc phải-trên (top-right). Topbar sticky có thể chồng lên nút đó → chừa padding-right hoặc chỉnh z-index khi tích hợp thực tế. ============================================================================= */ .tgsf-topbar{ display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); padding-right: 120px; /* chừa chỗ cho nút tài khoản của auth-gate */ background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .tgsf-topbar .brand{ display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 800; color: var(--ink); } .tgsf-topbar .brand img{ height: 24px; width: auto; display: block; } .tgsf-topbar .spacer{ flex: 1; } /* ============================================================================= CARD ============================================================================= */ .tgsf-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); } /* ============================================================================= BADGE / PILL (kèm icon/text để không chỉ phân biệt bằng màu) ============================================================================= */ .tgsf-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); } .tgsf-badge.is-pos{ background: rgba(11,122,87,.12); color: var(--pos-text); } .tgsf-badge.is-neg{ background: rgba(201,42,42,.12); color: var(--neg-text); } .tgsf-badge.is-warn{ background: rgba(180,83,9,.14); color: var(--warn-text); } /* ============================================================================= BUTTON (đủ hover / focus-visible / active / disabled) ============================================================================= */ .tgsf-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; } .tgsf-btn:hover{ background: var(--accent-soft); } .tgsf-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .tgsf-btn:active{ background: var(--accent3); } .tgsf-btn:disabled, .tgsf-btn[disabled]{ opacity: .5; cursor: not-allowed; } .tgsf-btn-primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tgsf-btn-primary:hover{ background: var(--accent2); border-color: var(--accent2); } .tgsf-btn-primary:active{ background: #041AAE; border-color: #041AAE; } /* ============================================================================= TABLE (bảng số liệu report) ============================================================================= */ .tgsf-table{ width: 100%; border-collapse: collapse; font-size: 14px; } .tgsf-table th{ text-align: left; font-weight: 600; color: var(--muted-strong); padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .tgsf-table td{ padding: 10px 12px; border-bottom: 1px solid var(--line); } .tgsf-table tbody tr:hover{ background: var(--accent-soft); } /* Số căn phải — ĐÃ đổi tên .num -> .tgsf-num để tránh đụng .num có sẵn trong report */ .tgsf-num{ text-align: right; font-variant-numeric: tabular-nums; } /* ============================================================================= NUMBER / TREND (dùng màu -text đậm cho chữ) ============================================================================= */ .trend-up{ color: var(--pos-text); } .trend-down{ color: var(--neg-text); } /* ============================================================================= PRINT (Codex: chưa trang nào có thiết kế in) ============================================================================= */ @media print{ html, body{ background: #fff; } .tgsf-topbar{ position: static; } .tgsf-card{ box-shadow: none; border-color: #ccc; break-inside: avoid; } .tgsf-table{ break-inside: auto; } .tgsf-table tr{ break-inside: avoid; } a[href]::after{ content: ""; } /* không in URL dài sau link */ }