/* ============================================================================= NHÂN BẢN DOANH NGHIỆP — brand.css · NGUỒN TOKEN DUY NHẤT cho toàn hệ web ----------------------------------------------------------------------------- Ba tầng: (1) PRIMITIVES — bảng màu/font thô, CHỈ khai ở đây. (2) SCALE — thang bo góc + đổ bóng dùng chung. (3) THEME APP — .theme-app (nền tối) → . Đang phủ: admin/ · learn/ >>> ĐỔI MÀU / FONT THƯƠNG HIỆU = sửa DUY NHẤT ở tầng (1) PRIMITIVES. <<< Chưa có theme sáng (landing/sale) vì bản này chưa có trang bán hàng. Khi dựng landing thì thêm khối semantic cho :root ở đây, KHÔNG khai màu trong trang. Tầng ALIAS ở cuối .theme-app map tên cũ (--bg, --bg2, --muted…) mà admin/ và learn/ đang dùng về token semantic. Bỏ dần alias khi đổi trang sang tên mới. ============================================================================= */ :root { /* ── (1) PRIMITIVES — bảng màu thô ──────────────────────────────────────── */ --c-app-green:#22c55e; /* xanh CHÍNH (trên nền tối) */ --c-app-green-2:#16a34a; /* xanh hover */ --c-gold:#ffc833; /* vàng nhấn */ --c-warn:#f97316; /* cam cảnh báo */ --c-danger:#ef4444; /* đỏ nguy hiểm */ --c-navy-900:#0b1020; /* nền app (sâu nhất) */ --c-navy-800:#131a2e; /* nền thẻ */ --c-navy-700:#1c2540; /* nền ô nhập / khối chìm */ --c-fog:#f4f6fb; /* chữ chính trên nền tối */ --c-fog-2:#c5cce0; /* chữ cấp 2 */ --c-fog-mut:#8b94b3; /* chữ mờ */ --c-fog-mut2:#5d6788; /* chữ mờ cấp 2 */ --f-app:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",sans-serif; /* ── (2) SCALE — bo góc + đổ bóng. Nắn giá trị lẻ mỗi trang về thang này → chỉnh 1 chỗ là cả web đổi theo. Bóng dưới đây hợp nền SÁNG; theme tối override lại trong .theme-app. ───────────────────────────────────────── */ --r-xs:4px; /* chip/tag nhỏ */ --r-sm:8px; /* nút phụ, input, ô nhỏ */ --r-md:12px; /* thẻ tiêu chuẩn, nút */ --r-lg:16px; /* thẻ lớn, panel, modal */ --r-xl:20px; /* hero, khối nổi bật */ --r-pill:9999px; /* viên thuốc (bo hết) */ --r-circle:50%; /* tròn (avatar, chấm) */ --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 6px 24px rgba(0,0,0,.10); --shadow-lg:0 16px 40px rgba(0,0,0,.14); } /* ── (3) THEME APP — nền tối (admin/, learn/): ───── */ .theme-app { --brand:var(--c-app-green); --brand-2:var(--c-app-green-2); --brand-dim:rgba(34,197,94,.18); --on-brand:#04120a; --surface:var(--c-navy-900); --surface-alt:var(--c-navy-800); --surface-2:var(--c-navy-800); --surface-3:var(--c-navy-700); --surface-hover:rgba(34,197,94,.08); --text:var(--c-fog); --text-2:var(--c-fog-2); --text-muted:var(--c-fog-mut); --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --accent-gold:var(--c-gold); --warn:var(--c-warn); --danger:var(--c-danger); --font-body:var(--f-app); --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 6px 22px rgba(0,0,0,.45); --shadow-lg:0 18px 40px rgba(0,0,0,.45); --glow-brand:0 8px 24px rgba(34,197,94,.28); /* hào quang xanh cho CTA */ /* layout app (learn/) */ --sidebar-w:380px; --topbar-h:56px; --footbar-h:64px; /* alias legacy · admin/ + learn/ */ --bg:var(--surface); --bg2:var(--surface-2); --bg3:var(--surface-3); --bg-hover:var(--surface-hover); --border2:var(--border-2); --brand2:var(--brand-2); --gold:var(--accent-gold); --muted:var(--text-muted); --muted2:var(--c-fog-mut2); --text2:var(--text-2); --font:var(--font-body); } /* ───────────────────────────────────────────────────────────────────────────── THEME SÁNG (260727) — restyle theo phong cách mini-keap CRM. Override toàn bộ token semantic ở trên ĐỂ GIỮ NGUYÊN cấu trúc HTML/JS của admin/ và learn/ — không phải sửa từng class. Mọi thành phần dùng var(--bg), var(--text), var(--brand)... tự động đổi sang palette sáng. Palette: nền xám nhạt #f4f6f8 + panel trắng, brand xanh forest #0f6e56 trầm. Token xanh nguyên thuỷ (--c-app-green) vẫn giữ #22c55e cho các chỗ CẦN xanh sáng (vd nút CTA chính) — chỉ đổi brand semantic sang forest để giống mini-keap. ───────────────────────────────────────────────────────────────────────────── */ .theme-app { /* Brand forest green (mini-keap) thay vì xanh fresher */ --brand:#0f6e56; --brand-2:#0c5e4a; --brand-dim:#e1f5ee; --on-brand:#ffffff; /* Nền sáng: xám nhạt + panel trắng */ --surface:#f4f6f8; --surface-alt:#ffffff; --surface-2:#ffffff; --surface-3:#f6f8fa; --surface-hover:#f6f8fa; /* Chữ tối trên nền sáng */ --text:#16202b; --text-2:#3d4a5c; --text-muted:#6b7a8d; /* Border nhẹ */ --border:#e3e8ee; --border-2:#d4dce6; --accent-gold:#b8860b; --warn:#b8730a; --danger:#c0392b; --font-body:var(--f-app); /* Bóng nhẹ hơn cho nền sáng */ --shadow-sm:0 1px 3px rgba(16,32,43,.06), 0 1px 2px rgba(16,32,43,.04); --shadow-md:0 1px 3px rgba(16,32,43,.06), 0 8px 24px rgba(16,32,43,.05); --shadow-lg:0 20px 60px rgba(0,0,0,.18); --glow-brand:0 4px 14px rgba(15,110,86,.22); /* alias legacy — ghi đè lần nữa cho theme sáng */ --bg:var(--surface); --bg2:var(--surface-2); --bg3:var(--surface-3); --bg-hover:var(--surface-hover); --border2:var(--border-2); --brand2:var(--brand-2); --gold:var(--accent-gold); --muted:var(--text-muted); --muted2:#8b94a3; --text2:var(--text-2); --font:var(--font-body); }