/* themes.css — 5 theme toàn hệ thống, khớp phieuhocphi.com. Đổi class trên là toàn bộ giao diện thay đổi. */ /* ===== 1. Hoa Anh Đào (mặc định) ===== */ body.theme-classic { --app-bg: #fdf2f6; --app-nav-bg: #fdeef3; --app-primary: #c2185b; --app-primary-soft: #fce4ec; --d-bg: #fdf2f6; --d-surface: #ffffff; --d-text: #1f2937; --d-muted: #c98aa8; --d-border: #f5e3eb; --d-primary: #be185d; --d-primary-soft: #fdf2f8; --d-pill-grad: linear-gradient(135deg, #f06292, #ba68c8); --d-circle-text: #db2777; --d-c1-grad: linear-gradient(145deg, #fff0f6, #ffd6e8, #ffcce0); --d-c1-text: #b0134e; --d-c1-border: rgba(244,143,177,.6); --d-c2-grad: linear-gradient(145deg, #fce4ec, #f8bbd0, #f48fb1); --d-c2-text: #880e4f; --d-c2-border: rgba(240,98,146,.5); --d-c3-grad: linear-gradient(145deg, #f3e5f5, #e1bee7, #ce93d8); --d-c3-text: #6a1b9a; --d-c3-border: rgba(186,104,200,.5); --d-c4-grad: linear-gradient(145deg, #e8eaf6, #c5cae9, #9fa8da); --d-c4-text: #1a237e; --d-c4-border: rgba(121,134,203,.5); --d-input-bg: #fff; --d-input-border: #f0c4d6; --d-input-focus: #e91e63; --d-table-bg: #fff; --d-table-border: #FFD1DC; --d-table-head-bg: #fdf2f8; --d-table-head-text: #be185d; --d-att-theme: #9C27B0; --d-att-bg: #F8F0FF; --d-sch-theme: #4CAF50; --d-sch-bg: #F1F8F1; --d-rev-theme: #FF9800; --d-rev-bg: #FFF8E1; --d-modal-bg: #fff; --d-card-shadow: rgba(0,0,0,.08); --d-pink: #FFD1DC; --d-dark-pink: #D81B60; --d-light-pink: #FFF5F7; } /* ===== 2. Đại Dương ===== */ body.theme-ocean { --app-bg: #f0f7ff; --app-nav-bg: #eaf3ff; --app-primary: #0369a1; --app-primary-soft: #e0f2fe; --d-bg: #f0f7ff; --d-surface: #ffffff; --d-text: #0f2942; --d-muted: #7ba3c7; --d-border: #dbeafe; --d-primary: #0369a1; --d-primary-soft: #eff6ff; --d-pill-grad: linear-gradient(135deg, #38bdf8, #2563eb); --d-circle-text: #0369a1; --d-c1-grad: linear-gradient(145deg, #f0f9ff, #dbeafe, #bfdbfe); --d-c1-text: #075985; --d-c1-border: rgba(56,189,248,.5); --d-c2-grad: linear-gradient(145deg, #e0f2fe, #bae6fd, #7dd3fc); --d-c2-text: #0c4a6e; --d-c2-border: rgba(14,165,233,.5); --d-c3-grad: linear-gradient(145deg, #ecfeff, #cffafe, #a5f3fc); --d-c3-text: #155e75; --d-c3-border: rgba(34,211,238,.5); --d-c4-grad: linear-gradient(145deg, #eef2ff, #c7d2fe, #a5b4fc); --d-c4-text: #312e81; --d-c4-border: rgba(99,102,241,.5); --d-input-bg: #fff; --d-input-border: #90CAF9; --d-input-focus: #1E88E5; --d-table-bg: #fff; --d-table-border: #90CAF9; --d-table-head-bg: #E3F2FD; --d-table-head-text: #0D47A1; --d-att-theme: #1E88E5; --d-att-bg: #E3F2FD; --d-sch-theme: #00897B; --d-sch-bg: #E0F2F1; --d-rev-theme: #0277BD; --d-rev-bg: #E1F5FE; --d-modal-bg: #fff; --d-card-shadow: rgba(0,0,0,.08); --d-pink: #90CAF9; --d-dark-pink: #0D47A1; --d-light-pink: #E3F2FD; } /* ===== 3. Cluvix Spa ===== */ body.theme-forest { --app-bg: #f7fdfd; --app-nav-bg: #f0fbfb; --app-primary: #0f766e; --app-primary-soft: #ccfbf1; --d-bg: #f7fdfd; --d-surface: #ffffff; --d-text: #134e4a; --d-muted: #8fb8b4; --d-border: #d9f2ef; --d-primary: #0f766e; --d-primary-soft: #f0fdfa; --d-pill-grad: linear-gradient(135deg, #5eead4, #14b8a6); --d-circle-text: #0d9488; --d-c1-grad: linear-gradient(145deg, #f0fdfa, #ccfbf1, #99f6e4); --d-c1-text: #115e59; --d-c1-border: rgba(45,212,191,.5); --d-c2-grad: linear-gradient(145deg, #ecfeff, #cffafe, #a5f3fc); --d-c2-text: #155e75; --d-c2-border: rgba(34,211,238,.5); --d-c3-grad: linear-gradient(145deg, #f0fdf4, #dcfce7, #bbf7d0); --d-c3-text: #166534; --d-c3-border: rgba(74,222,128,.5); --d-c4-grad: linear-gradient(145deg, #f8fafc, #e2e8f0, #cbd5e1); --d-c4-text: #334155; --d-c4-border: rgba(148,163,184,.5); --d-input-bg: #fff; --d-input-border: #80CBC4; --d-input-focus: #0D9488; --d-table-bg: #fff; --d-table-border: #80CBC4; --d-table-head-bg: #E0F2F1; --d-table-head-text: #004D40; --d-att-theme: #00897B; --d-att-bg: #E0F2F1; --d-sch-theme: #2E7D32; --d-sch-bg: #E8F5E9; --d-rev-theme: #F57F17; --d-rev-bg: #FFF8E1; --d-modal-bg: #fff; --d-card-shadow: rgba(0,0,0,.06); --d-pink: #80CBC4; --d-dark-pink: #00695C; --d-light-pink: #E0F2F1; } /* ===== 4. Hoàng Hôn ===== */ body.theme-sunset { --app-bg: #fffaf3; --app-nav-bg: #fff4e6; --app-primary: #c2410c; --app-primary-soft: #ffedd5; --d-bg: #fffaf3; --d-surface: #ffffff; --d-text: #431407; --d-muted: #d3a382; --d-border: #ffe6cc; --d-primary: #c2410c; --d-primary-soft: #fff7ed; --d-pill-grad: linear-gradient(135deg, #fb923c, #f43f5e); --d-circle-text: #ea580c; --d-c1-grad: linear-gradient(145deg, #fff7ed, #ffedd5, #fed7aa); --d-c1-text: #9a3412; --d-c1-border: rgba(251,146,60,.55); --d-c2-grad: linear-gradient(145deg, #fff1f2, #ffe4e6, #fecdd3); --d-c2-text: #9f1239; --d-c2-border: rgba(251,113,133,.5); --d-c3-grad: linear-gradient(145deg, #fefce8, #fef9c3, #fde68a); --d-c3-text: #854d0e; --d-c3-border: rgba(250,204,21,.5); --d-c4-grad: linear-gradient(145deg, #fdf4ff, #fae8ff, #f5d0fe); --d-c4-text: #86198f; --d-c4-border: rgba(232,121,249,.5); --d-input-bg: #fff; --d-input-border: #FFCC80; --d-input-focus: #EF6C00; --d-table-bg: #fff; --d-table-border: #FFCC80; --d-table-head-bg: #FFF3E0; --d-table-head-text: #BF360C; --d-att-theme: #E65100; --d-att-bg: #FBE9E7; --d-sch-theme: #FF8F00; --d-sch-bg: #FFF8E1; --d-rev-theme: #D84315; --d-rev-bg: #FBE9E7; --d-modal-bg: #fff; --d-card-shadow: rgba(0,0,0,.08); --d-pink: #FFCC80; --d-dark-pink: #BF360C; --d-light-pink: #FFF3E0; } /* ===== 5. Giấy Ngà Mực Nâu ===== */ body.theme-neon { --app-bg: #faf6ee; --app-nav-bg: #f5efe2; --app-primary: #7c4a21; --app-primary-soft: #f0e6d6; --d-bg: #faf6ee; --d-surface: #fffdf8; --d-text: #43301c; --d-muted: #b09a7d; --d-border: #ece0cc; --d-primary: #7c4a21; --d-primary-soft: #f7f1e6; --d-pill-grad: linear-gradient(135deg, #a97c50, #7c4a21); --d-circle-text: #8b5a2b; --d-c1-grad: linear-gradient(145deg, #fdfaf3, #f2e8d8, #e8dbc3); --d-c1-text: #6b4423; --d-c1-border: rgba(169,124,80,.45); --d-c2-grad: linear-gradient(145deg, #faf3e8, #eddcc4, #e0cba8); --d-c2-text: #7c4a21; --d-c2-border: rgba(140,94,52,.4); --d-c3-grad: linear-gradient(145deg, #f6f1e6, #e6dcc8, #d8cbb0); --d-c3-text: #5b4126; --d-c3-border: rgba(120,90,60,.4); --d-c4-grad: linear-gradient(145deg, #f3f4ee, #dfe2d5, #cdd2c0); --d-c4-text: #3f4a33; --d-c4-border: rgba(120,130,100,.45); --d-input-bg: #fffdf8; --d-input-border: #D7CCC8; --d-input-focus: #6D4C41; --d-table-bg: #fffdf8; --d-table-border: #D7CCC8; --d-table-head-bg: #EFEBE0; --d-table-head-text: #4E342E; --d-att-theme: #6D4C41; --d-att-bg: #EFEBE0; --d-sch-theme: #8D6E63; --d-sch-bg: #F5EFE6; --d-rev-theme: #A1887F; --d-rev-bg: #F5F0E8; --d-modal-bg: #fffdf8; --d-card-shadow: rgba(0,0,0,.06); --d-pink: #D7CCC8; --d-dark-pink: #4E342E; --d-light-pink: #EFEBE0; } body.theme-neon .page-title, body.theme-neon .stats-label { letter-spacing: 1px; }