/* ============================================================ BẾP CÔ LINH — DESIGN TOKENS · bepcolinh.com Màu gốc trích từ logo: Xanh lá đậm #084820 (áo bếp, chữ "Cô Linh") Nâu đất #603010 (chữ "Bếp", nét vẽ) Vàng nghệ #F8B810 (nền tròn phải) Kem #E0D8C0 (mũ bếp) 2 phương án — đổi bằng (mặc định: xanh-bep) Font gợi ý (hỗ trợ tiếng Việt tốt): ============================================================ */ /* ---------- PHƯƠNG ÁN A (mặc định): "XANH BẾP NHÀ" ---------- Xanh lá đậm làm chủ đạo — tin cậy, nghề nghiệp, đúng logo. Vàng nghệ dành riêng cho nút CTA để luôn nổi bật. */ :root { /* Màu thương hiệu */ --color-primary: #084820; /* xanh lá đậm — header, heading, link */ --color-primary-hover: #0B5E2B; --color-primary-soft: #E7F0E9; /* nền băng-rôn, badge nhạt */ --color-secondary: #603010; /* nâu đất — heading phụ, chân trang */ --color-accent: #F8B810; /* vàng nghệ — NÚT "Đăng ký học ngay" */ --color-accent-hover: #DC9E06; --color-on-accent: #3A2008; /* chữ trên nút vàng */ /* Nền & bề mặt (kem ấm từ mũ bếp) */ --color-bg: #FBF6EA; /* nền trang */ --color-surface: #FFFFFF; /* card khoá học */ --color-surface-alt: #F3EAD6; /* section xen kẽ */ --color-border: #E3D5BC; /* Chữ */ --color-text: #2A1A0E; /* nâu đậm thay cho đen — ấm hơn */ --color-text-muted: #6B5744; --color-on-primary: #FFFFFF; /* Ngữ nghĩa */ --color-price: #C2410C; /* giá ưu đãi — cam gạch kích thích */ --color-price-old: #9A8A76; /* giá gạch ngang */ --color-success: #1D7A3E; --color-error: #B3261E; /* Chữ nghĩa */ --font-heading: "Lora", Georgia, serif; --font-body: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-hero: clamp(2rem, 5vw, 3.25rem); --leading-body: 1.65; --leading-heading: 1.2; /* Khoảng cách & bo góc */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Bóng ám nâu ấm (không dùng bóng xám lạnh) */ --shadow-card: 0 2px 8px rgba(96, 48, 16, 0.10); --shadow-card-hover: 0 8px 24px rgba(96, 48, 16, 0.18); --container-max: 1140px; } /* ---------- PHƯƠNG ÁN B: "ẤM NỒI NƯỚC DÙNG" ---------- Nâu đất + đỏ ớt sa tế làm chủ đạo — cảm giác bếp lửa, thèm ăn. Xanh logo lùi về vai trò điểm tin cậy (badge, tick). */ [data-theme="am-nong"] { --color-primary: #5A2E0E; /* nâu đất đậm */ --color-primary-hover: #74400F; --color-primary-soft: #F6E7D4; --color-secondary: #084820; /* xanh logo — badge "20 năm nghề" */ --color-accent: #C4441C; /* đỏ ớt sa tế — nút CTA */ --color-accent-hover: #A33413; --color-on-accent: #FFF6EC; --color-bg: #FFF7EC; --color-surface: #FFFDF8; --color-surface-alt: #F9E9CF; --color-border: #EAD7B8; --color-text: #33200F; --color-text-muted: #7A6350; --color-on-primary: #FFF6EC; --color-price: #C4441C; --color-price-old: #A08B75; --shadow-card: 0 2px 8px rgba(90, 46, 14, 0.12); --shadow-card-hover: 0 8px 24px rgba(90, 46, 14, 0.22); } /* ---------- Ví dụ áp dụng nhanh ---------- */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); } h1, h2, h3 { font-family: var(--font-heading); color: var(--color-primary); line-height: var(--leading-heading); } .btn-cta { background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; padding: var(--space-4) var(--space-6); border-radius: var(--radius-pill); border: 0; cursor: pointer; box-shadow: var(--shadow-card); } .btn-cta:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-card-hover); } .card-khoa-hoc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .gia-uu-dai { color: var(--color-price); font-weight: 700; } .gia-niem-yet { color: var(--color-price-old); text-decoration: line-through; }