/* ============================================================================ FIVE STAR — DESIGN TOKENS ---------------------------------------------------------------------------- Nguon chan ly duy nhat ve hinh anh cua website. Khong hard-code mau/khoang cach/bo goc trong component — luon dung token. Mau thuong hieu duoc trich xuat tu LOGO THAT cua Five Star (logo: khoi bo goc chia cheo do/xanh, dai ruy bang trang + 5 ngoi sao, chu "5S"): - Do tham #C91A42 — trung binh 4.248 pixel vung do - Xanh thep #A0BFDF — trung binh 5.257 pixel vung xanh - Trang #F8FAFB — trung binh 3.743 pixel vung trang Khong su dung mau thuong hieu cua bat ky website tham chieu nao. ========================================================================== */ :root { /* ---------- 1. MAU THUONG HIEU ---------- */ /* Primary — Do Five Star (lay tu logo) */ --fs-primary-50: #FDF2F5; --fs-primary-100: #FBE0E7; --fs-primary-200: #F5B9C8; --fs-primary-300: #EC8BA3; --fs-primary-400: #DE4E72; --fs-primary-500: #C91A42; /* ← MAU CHINH */ --fs-primary-600: #AE1439; --fs-primary-700: #8E0F2E; --fs-primary-800: #6D0B23; --fs-primary-900: #4D0718; /* Secondary — Xanh navy (lam sau tu xanh logo, cung he mau) */ --fs-secondary-50: #F2F6FA; --fs-secondary-100: #E2EBF4; --fs-secondary-200: #C2D6E9; --fs-secondary-300: #93B5D6; --fs-secondary-400: #4F7BA8; --fs-secondary-500: #2A5A8C; --fs-secondary-600: #1E4873; --fs-secondary-700: #163A5F; /* ← MAU PHU */ --fs-secondary-800: #102A45; --fs-secondary-900: #0A1B2D; /* Accent — Xanh thep nhat (lay truc tiep tu logo) */ --fs-accent-50: #F4F8FC; --fs-accent-100: #EDF4FB; --fs-accent-200: #D6E6F5; --fs-accent-300: #A0BFDF; /* ← MAU NHAN */ --fs-accent-400: #7BA3CD; --fs-accent-500: #5886B5; /* Trung tinh */ --fs-white: #FFFFFF; --fs-gray-50: #F8FAFB; /* surface — lay tu vung trang cua logo */ --fs-gray-100: #F1F4F7; --fs-gray-200: #E4E9EF; --fs-gray-300: #CBD4DE; --fs-gray-400: #9AA7B5; --fs-gray-500: #6E7C8C; --fs-gray-600: #5A6775; --fs-gray-700: #3E4A57; --fs-gray-800: #27313C; --fs-gray-900: #1A2430; /* Trang thai */ --fs-success: #1F7A4D; --fs-warning: #B06A00; --fs-error: #B3261E; --fs-info: var(--fs-secondary-500); /* ---------- 2. VAI TRO NGU NGHIA ---------- */ --fs-color-text: var(--fs-gray-900); --fs-color-text-muted: var(--fs-gray-600); --fs-color-text-subtle: var(--fs-gray-500); --fs-color-text-inverse: var(--fs-white); --fs-color-heading: var(--fs-secondary-800); --fs-color-bg: var(--fs-white); --fs-color-bg-subtle: var(--fs-gray-50); --fs-color-bg-muted: var(--fs-gray-100); --fs-color-bg-inverse: var(--fs-secondary-800); --fs-color-bg-brand: var(--fs-primary-500); --fs-color-border: var(--fs-gray-200); --fs-color-border-strong: var(--fs-gray-300); --fs-color-link: var(--fs-primary-600); --fs-color-link-hover: var(--fs-primary-700); --fs-color-focus: var(--fs-secondary-500); /* ---------- 3. CHU ---------- */ /* Font stack he thong: khong goi font ngoai => tai nhanh, khong ro ri referrer, khop CSP font-src 'self'. */ --fs-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --fs-font-heading: var(--fs-font-sans); --fs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Thang chu — type scale 1.25 */ --fs-text-xs: 0.75rem; /* 12px */ --fs-text-sm: 0.875rem; /* 14px */ --fs-text-base: 1rem; /* 16px */ --fs-text-lg: 1.125rem; /* 18px */ --fs-text-xl: 1.375rem; /* 22px */ --fs-text-2xl: 1.75rem; /* 28px */ --fs-text-3xl: 2.125rem; /* 34px */ --fs-text-4xl: 2.75rem; /* 44px */ --fs-text-5xl: 3.25rem; /* 52px */ --fs-leading-tight: 1.18; --fs-leading-snug: 1.35; --fs-leading-normal: 1.6; --fs-leading-relaxed: 1.75; --fs-weight-normal: 400; --fs-weight-medium: 500; --fs-weight-semibold: 600; --fs-weight-bold: 700; --fs-tracking-tight: -0.02em; --fs-tracking-wide: 0.04em; --fs-tracking-wider: 0.1em; /* ---------- 4. KHOANG CACH (thang 4px) ---------- */ --fs-space-1: 0.25rem; --fs-space-2: 0.5rem; --fs-space-3: 0.75rem; --fs-space-4: 1rem; --fs-space-5: 1.25rem; --fs-space-6: 1.5rem; --fs-space-8: 2rem; --fs-space-10: 2.5rem; --fs-space-12: 3rem; --fs-space-16: 4rem; --fs-space-20: 5rem; --fs-space-24: 6rem; --fs-space-32: 8rem; /* Khoang cach doc giua cac section (co gian theo man hinh) */ --fs-section-y: clamp(3rem, 7vw, 6rem); --fs-section-y-lg: clamp(4rem, 9vw, 8rem); /* ---------- 5. BO CUC ---------- */ --fs-container: 1200px; --fs-container-narrow: 820px; --fs-container-wide: 1400px; --fs-gutter: clamp(1rem, 4vw, 2rem); /* ---------- 6. BO GOC ---------- */ --fs-radius-xs: 3px; --fs-radius-sm: 6px; --fs-radius-md: 10px; --fs-radius-lg: 16px; --fs-radius-xl: 24px; --fs-radius-full: 9999px; /* ---------- 7. DO BONG ---------- */ --fs-shadow-xs: 0 1px 2px rgba(16, 42, 69, 0.06); --fs-shadow-sm: 0 2px 6px rgba(16, 42, 69, 0.07); --fs-shadow-md: 0 6px 18px rgba(16, 42, 69, 0.09); --fs-shadow-lg: 0 14px 36px rgba(16, 42, 69, 0.12); --fs-shadow-xl: 0 24px 56px rgba(16, 42, 69, 0.16); --fs-shadow-brand: 0 10px 28px rgba(201, 26, 66, 0.22); /* ---------- 8. NUT ---------- */ --fs-button-radius: var(--fs-radius-sm); --fs-button-weight: var(--fs-weight-semibold); --fs-button-padding-y: 0.8rem; --fs-button-padding-x: 1.6rem; --fs-button-font-size: var(--fs-text-base); /* ---------- 9. CHUYEN DONG ---------- */ --fs-transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1); --fs-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --fs-transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1); /* ---------- 10. TANG LOP ---------- */ --fs-z-dropdown: 100; --fs-z-sticky: 200; --fs-z-drawer: 300; --fs-z-modal: 400; --fs-z-toast: 500; /* ---------- 11. KICH THUOC ---------- */ --fs-header-height: 84px; --fs-header-height-scrolled: 68px; --fs-topbar-height: 40px; } /* Giam chuyen dong theo tuy chon he thong cua nguoi dung */ @media (prefers-reduced-motion: reduce) { :root { --fs-transition-fast: 0ms; --fs-transition-base: 0ms; --fs-transition-slow: 0ms; } }