/* ============================================================================ TODAYTV — TOKENS NGUỒN DUY NHẤT cho màu, chữ và khoảng cách của TOÀN BỘ site. Sửa ở file này là đổi mọi trang. Không đặt màu cứng ở file khác. Nạp ĐẦU TIÊN trên mọi trang (trước main.css / inner-pages.css / ai-hub.css). Khối ghi đè token Tailwind ở cuối dùng selector :root:root nên thắng main.css bất kể thứ tự nạp — an toàn khi đưa vào WordPress. ============================================================================ */ :root { /* ---- BẢNG MÀU THƯƠNG HIỆU ------------------------------------------------ Đây là 4 màu chính thức. Mọi màu khác trong site đều phái sinh từ đây. */ --brand: #FD3509; /* cam CHÍNH — nút, nhấn mạnh, trạng thái active */ --brand-2: #FC850E; /* cam PHỤ — hover, viền, quầng sáng, gradient */ --grey: #7D7C7D; /* xám thương hiệu (xem cảnh báo tương phản dưới) */ --white: #FFFFFF; /* Sắc độ phái sinh */ --brand-hover: #D22A05; /* đậm hơn brand — dùng cho :hover trên nền brand */ --brand-accent: #FDA347; /* tint sáng — chữ nhấn trên nền tối */ --brand-on-card: #FD5C33; /* brand đặt trên nền thẻ sáng (#202020+) */ --brand-tint: #FECFA5; --brand-tint-soft: #FEE3DB; /* Dạng kênh RGB — để dựng rgba() với alpha tuỳ ý */ --brand-rgb: 253, 53, 9; --brand-2-rgb: 252, 133, 14; /* Nền phủ theo brand */ --brand-fill: rgba(var(--brand-rgb), 0.18); --brand-line: rgba(var(--brand-rgb), 0.35); --brand-glow: rgba(var(--brand-rgb), 0.35); /* ---- THANG XÁM TRUNG TÍNH ----------------------------------------------- Toàn bộ trung tính đều R=G=B. Không dùng xám ám xanh. */ --bg-0: #0B0B0B; /* nền sâu nhất */ --bg: #0F0F0F; /* nền trang */ --bg-1: #131313; --bg-2: #1C1C1C; /* dải/băng nội dung */ --bg-3: #272727; --bg-veil: rgba(23, 23, 23, 0.72); /* lớp phủ mờ */ --surface: #202020; /* mặt thẻ */ --surface-raised: #2A2A2A; /* thẻ khi hover */ --border: #474747; --border-strong: #676767; --border-soft: rgba(255, 255, 255, 0.06); --text: #F9F9F9; /* chữ thường */ --text-strong: #FFFFFF; /* tiêu đề */ --text-1: #E9E9E9; --text-2: #A6A6A6; /* chữ phụ — an toàn trên mọi nền tối */ --text-3: #7D7C7D; /* CẢNH BÁO: chỉ đạt AA trên nền ≤ #0E0E0E. Trên nền sáng hơn (vd #1C1C1C) hãy dùng --text-2. */ --muted: #B4B4B4; --muted-2: #999999; /* ---- CHỮ ----------------------------------------------------------------- */ --font-site: 'Open Sans', system-ui, sans-serif; --sans: var(--font-site); --mono: var(--font-site); --title-size: clamp(20px, 2.2vw, 28px); /* tiêu đề section */ --title-weight: 700; --title-line: 1.18; --title-color: var(--text-strong); --title-transform: uppercase; --hero-title-size: clamp(28px, 2.7vw, 34px); /* h1 hero trang con */ /* ---- KHOẢNG CÁCH & HÌNH KHỐI --------------------------------------------- */ --sec-pad: clamp(36px, 4.5vw, 70px); --max: 1340px; --maxw: 1200px; --radius: 12px; /* ---- ALIAS TƯƠNG THÍCH NGƯỢC -------------------------------------------- Giữ tên cũ để các rule sẵn có không phải viết lại. Không dùng cho code mới. */ --brand2: var(--brand-accent); --brand-soft: var(--brand-2); --panel: var(--surface); --panel2: var(--surface-raised); --line: var(--border); --card: var(--surface); --card-bd: var(--border); --text-0: var(--text-strong); --ui-page: var(--bg); --ui-section: #171717; --ui-surface: var(--surface); --ui-surface-raised: var(--surface-raised); --ui-border: var(--border); --ui-border-strong: var(--border-strong); --ui-text: #FAFAFA; --ui-text-muted: #C5C5C5; --ui-accent: var(--brand); --ui-accent-hover: var(--brand-2); } /* ============================================================================ GHI ĐÈ TOKEN CỦA TEMPLATE NEXTSAAS (assets/main.css) main.css là bản Tailwind compile sẵn nên không sửa trực tiếp được. Dùng :root:root để độ ưu tiên cao hơn :root của main.css — nhờ vậy khối này thắng bất kể tokens.css được nạp trước hay sau main.css. ============================================================================ */ :root:root { /* chữ: template dùng Inter Tight → ép về Open Sans */ --font-inter-tight: var(--font-site); --default-font-family: var(--font-site); --font-mono: var(--font-site); /* thang primary của template vốn màu TÍM → đưa về cam thương hiệu */ --color-primary-50: #F3F3F3; --color-primary-100: var(--brand-tint-soft); --color-primary-200: #FEC9BA; --color-primary-300: #FE9A80; --color-primary-400: var(--brand-on-card); --color-primary-500: var(--brand); --color-primary-600: var(--brand-hover); --color-secondary: #1A1A1A; --color-accent: #FCFCFC; /* nền & viền của template vốn ám xanh → trung tính, giữ nguyên độ sáng */ --color-background-1: #FCFCFC; --color-background-2: #FAFAFA; --color-background-3: #F5F5F5; --color-background-4: #F2F2F2; --color-background-5: #171717; --color-background-6: #121212; --color-background-7: #1D1D1D; --color-background-8: #0B0B0B; --color-background-9: #242424; --color-background-12: #ECECEC; --color-stroke-1: #E3E3E3; --color-stroke-2: #E7E7E7; --color-stroke-3: #DCDCDC; --color-stroke-4: #EFEFEF; --color-stroke-5: #222222; --color-stroke-6: #262626; --color-stroke-7: #323232; --color-stroke-8: #3A3A3A; /* các màu nhấn pastel của template → hệ cam */ --color-ns-yellow: var(--brand-2); --color-ns-green: var(--brand-accent); --color-ns-red: #FEC9BA; --color-ns-cyan: #FDBA7A; --color-ns-green-light: var(--brand-tint-soft); --color-ns-cyan-light: var(--brand-tint-soft); --color-ns-yellow-light: #FEEFD9; --color-ns-ivory: #F1F1F1; --color-ns-linen: #B0B0B0; /* gradient & swiper của template còn mang tím/cyan/xanh lá/xanh dương */ --color-gradient-1: linear-gradient(135deg, var(--brand) 0%, var(--brand-tint) 100%); --color-gradient-6: linear-gradient(#FDBA7A 0%, var(--brand-accent) 100%); --color-gradient-7: linear-gradient(#FFFFFF 0%, #FDBA7A 100%); --color-gradient-8: linear-gradient(156deg, #FFFFFF 32.92%, var(--brand) 91%); --color-gradient-9: linear-gradient(156deg, #FEC9BA 32.92%, var(--brand-tint) 100%); --swiper-theme-color: var(--brand); }