/* ============================================================ themes.css — HỆ GIAO DIỆN (SKIN) TOÀN WEB Admin chọn ở Cấu hình web -> Giao diện -> site_theme. (đặt trong layout.html) Cơ chế: css/public-theme.css đã reskin toàn site qua các biến --pt-*. Mỗi skin ở đây chỉ ĐỔI LẠI BỘ BIẾN đó (+ vài chỉnh bố cục/điểm nhấn) -> đổi 1 dropdown là cả web đổi màu + phong cách, KHÔNG sửa 158 rule cũ. • kim-long = MẶC ĐỊNH (vàng/đen) -> dùng thẳng :root, KHÔNG cần block. • huyet-long / bich-hai / tu-van / thanh-vu = 4 skin bên dưới. ============================================================ */ /* ========== HUYẾT LONG — Đỏ · Đen (hào khí, sát phạt) ========== */ body.theme-huyet-long { --pt-bg: #0B0405; --pt-panel-bg: #160709; --pt-card-bg: #1E0A0D; --pt-glass: rgba(22, 7, 9, 0.85); --pt-gold: #FF7A6B; /* điểm nhấn chính = đỏ rực */ --pt-gold-dark: #7A1712; --pt-gold-bd: #C0392B; --pt-red: #E0281C; --pt-red-dark: #7A0F09; --pt-fire: #FF4D1A; --pt-text: #FFE3DE; --pt-text2: #F3D8D4; --pt-muted: #C99A94; --pt-border: rgba(224, 40, 28, 0.40); --pt-shadow-gold: 0 0 24px rgba(255, 90, 70, 0.25); --pt-shadow-red: 0 0 30px rgba(224, 40, 28, 0.30); } /* bố cục: góc sắc (khối chiến), viền đỏ đậm */ body.theme-huyet-long .pt-panel, body.theme-huyet-long .pt-card, body.theme-huyet-long article { border-radius: 6px !important; } body.theme-huyet-long .pt-card { background: linear-gradient(180deg, #250d10, #17080b) !important; } /* đồng hồ + widget theo tông đỏ */ body.theme-huyet-long .uvl-clock-time { color: #ff8a7a !important; text-shadow: 0 0 14px rgba(255,90,70,.6), 0 0 5px rgba(255,90,70,.9) !important; } body.theme-huyet-long .uvl-clock { border-color: rgba(224,40,28,.5) !important; box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 26px rgba(224,40,28,.10) !important; } body.theme-huyet-long .uvl-latest-widget header, body.theme-huyet-long .uvl-latest-toggle { background: linear-gradient(180deg, #7a1712, #4a0d0a) !important; } /* ========== BÍCH HẢI — Xanh Ngọc · Đen (thanh tú, huyền ảo) ========== */ body.theme-bich-hai { --pt-bg: #04090B; --pt-panel-bg: #071417; --pt-card-bg: #0A1B1F; --pt-glass: rgba(7, 20, 23, 0.85); --pt-gold: #35E0C8; /* điểm nhấn = xanh ngọc */ --pt-gold-dark: #0E5A50; --pt-gold-bd: #1FA894; --pt-red: #12A5B8; --pt-red-dark: #0A5563; --pt-fire: #2DD4BF; --pt-text: #D9FBF5; --pt-text2: #CDEDE8; --pt-muted: #7FA9A3; --pt-border: rgba(53, 224, 200, 0.35); --pt-shadow-gold: 0 0 24px rgba(53, 224, 200, 0.22); --pt-shadow-red: 0 0 30px rgba(18, 165, 184, 0.25); } /* bố cục: bo góc mềm, nhiều khoảng thở */ body.theme-bich-hai .pt-panel, body.theme-bich-hai .pt-card, body.theme-bich-hai article { border-radius: 18px !important; } body.theme-bich-hai .pt-panel { padding: 26px 28px !important; } body.theme-bich-hai .pt-card { background: linear-gradient(180deg, #0e2529, #081619) !important; } body.theme-bich-hai .uvl-clock-time { color: #6ff2df !important; text-shadow: 0 0 14px rgba(53,224,200,.55), 0 0 5px rgba(53,224,200,.85) !important; } body.theme-bich-hai .uvl-clock { border-color: rgba(53,224,200,.45) !important; box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 26px rgba(53,224,200,.08) !important; } body.theme-bich-hai .uvl-latest-widget header, body.theme-bich-hai .uvl-latest-toggle { background: linear-gradient(180deg, #0e5a50, #073b35) !important; } /* ========== TỬ VÂN — Tím · Huyền (thần bí, quý phái) ========== */ body.theme-tu-van { --pt-bg: #08050E; --pt-panel-bg: #120A1E; --pt-card-bg: #180D28; --pt-glass: rgba(18, 10, 30, 0.85); --pt-gold: #C79BFF; /* điểm nhấn = tím */ --pt-gold-dark: #4B2A7A; --pt-gold-bd: #8A5CD0; --pt-red: #E24BC4; --pt-red-dark: #7A1E63; --pt-fire: #B06BFF; --pt-text: #EEE0FF; --pt-text2: #E0D4F5; --pt-muted: #A38FC2; --pt-border: rgba(199, 155, 255, 0.35); --pt-shadow-gold: 0 0 24px rgba(199, 155, 255, 0.24); --pt-shadow-red: 0 0 30px rgba(226, 75, 196, 0.25); } body.theme-tu-van .pt-panel, body.theme-tu-van .pt-card, body.theme-tu-van article { border-radius: 20px !important; } body.theme-tu-van .pt-card { background: linear-gradient(180deg, #1d1230, #120a20) !important; } body.theme-tu-van .uvl-clock-time { color: #d7b6ff !important; text-shadow: 0 0 14px rgba(199,155,255,.6), 0 0 5px rgba(199,155,255,.9) !important; } body.theme-tu-van .uvl-clock { border-color: rgba(199,155,255,.45) !important; box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 26px rgba(199,155,255,.08) !important; } body.theme-tu-van .uvl-latest-widget header, body.theme-tu-van .uvl-latest-toggle { background: linear-gradient(180deg, #4b2a7a, #2c1749) !important; } /* ========== THANH VŨ — Xanh Dương · Đen (lạnh lẽo, uy nghi) ========== */ body.theme-thanh-vu { --pt-bg: #04070E; --pt-panel-bg: #07101F; --pt-card-bg: #0A1628; --pt-glass: rgba(7, 16, 31, 0.85); --pt-gold: #5AA8FF; /* điểm nhấn = xanh dương */ --pt-gold-dark: #143C6B; --pt-gold-bd: #2E77C7; --pt-red: #2CC6E0; --pt-red-dark: #0F5566; --pt-fire: #3B9EFF; --pt-text: #DCEBFF; --pt-text2: #CFE0F5; --pt-muted: #8AA3C2; --pt-border: rgba(90, 168, 255, 0.35); --pt-shadow-gold: 0 0 24px rgba(90, 168, 255, 0.22); --pt-shadow-red: 0 0 30px rgba(44, 198, 224, 0.25); } /* bố cục: góc vừa, viền mảnh gọn gàng */ body.theme-thanh-vu .pt-panel, body.theme-thanh-vu .pt-card, body.theme-thanh-vu article { border-radius: 10px !important; } body.theme-thanh-vu .pt-card { background: linear-gradient(180deg, #0f2036, #0a1526) !important; } body.theme-thanh-vu .uvl-clock-time { color: #8ec6ff !important; text-shadow: 0 0 14px rgba(90,168,255,.55), 0 0 5px rgba(90,168,255,.85) !important; } body.theme-thanh-vu .uvl-clock { border-color: rgba(90,168,255,.45) !important; box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 26px rgba(90,168,255,.08) !important; } body.theme-thanh-vu .uvl-latest-widget header, body.theme-thanh-vu .uvl-latest-toggle { background: linear-gradient(180deg, #143c6b, #0c2545) !important; } /* ================================================================ BIẾN THỂ LANDING theo SKIN — mỗi skin 1 PHONG CÁCH bố cục riêng. (màu tự lấy từ biến --pt-*; đây chỉ chỉnh menu/bề rộng/góc/hero) Kim Long = mặc định (menu giữa, khung 1160, góc vừa). Thanh Vũ = KHÔNG có .klx-* (giữ nguyên classic cột trái). ================================================================ */ /* HUYẾT LONG — "Sát phạt": menu căn TRÁI, góc SẮC, tiêu đề to đậm */ body.theme-huyet-long .klx-menu{justify-content:flex-start !important} body.theme-huyet-long .page-main .main-content{max-width:1080px !important} body.theme-huyet-long .klx-nav-cta, body.theme-huyet-long .klx-btn-primary, body.theme-huyet-long .klx-btn-ghost{border-radius:4px !important} body.theme-huyet-long .klx-hero h1{font-size:44px !important;font-weight:800} body.theme-huyet-long .klx-topnav{border-bottom-width:2px !important} /* BÍCH HẢI — "Thanh nhã tối giản": khung HẸP (tạp chí), góc BO TRÒN, thoáng */ body.theme-bich-hai .page-main .main-content{max-width:900px !important} body.theme-bich-hai .klx-nav-cta, body.theme-bich-hai .klx-btn-primary, body.theme-bich-hai .klx-btn-ghost{border-radius:24px !important} body.theme-bich-hai .klx-hero{padding:74px 16px 58px !important} body.theme-bich-hai .klx-hero h1{font-size:32px !important;font-weight:500} /* TỬ VÂN — "Huyền bí quý phái": khung RỘNG, tiêu đề RẤT LỚN, giãn chữ */ body.theme-tu-van .page-main .main-content{max-width:1240px !important} body.theme-tu-van .klx-hero h1{font-size:48px !important;letter-spacing:2px} body.theme-tu-van .klx-menu>li>a{letter-spacing:1.2px} body.theme-tu-van .klx-hero{padding:76px 16px 60px !important} /* ================================================================ CHỮ NỔI HƠN — GIỮ NỀN GỐC, chỉ tăng tương phản + thêm bóng chữ. (không đụng background trang — trả lại nền/texture gốc) ================================================================ */ /* Menu ngang + link sidebar: chữ SÁNG trắng + bóng để nổi trên nền */ body[class*="theme-"] .klx-menu>li>a, body[class*="theme-"] .hl-nav a{ color:#ffffff !important; text-shadow:0 1px 5px rgba(0,0,0,.85) !important } body[class*="theme-"] .klx-menu>li>a:hover, body[class*="theme-"] .hl-nav a:hover{ color:var(--pt-gold) !important } /* Tiêu đề hero: bóng đậm cho chữ nổi bật hẳn trên nền */ body[class*="theme-"] .klx-hero h1{ text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 26px rgba(0,0,0,.6) !important } body[class*="theme-"] .klx-hero .klx-sub{ color:#ffe9c2 !important } /* Tên danh mục trong sidebar Huyết Long sáng rõ */ body.theme-huyet-long .hl-cat{ color:#ffd9d2 !important } /* ================================================================ KIM LONG — nav nền KEM SÁNG (khác cách skin kia) -> chữ menu phải TỐI để đủ tương phản, ghi đè rule "chữ trắng" chung o tren. ================================================================ */ body.theme-kim-long .klx-menu>li>a{ color:#4a3208 !important; text-shadow:none !important } body.theme-kim-long .klx-menu>li>a:hover{ color:#8a2a1a !important } /* Nang cap HERO THAT (.pt-hero co san trong noi dung CMS) — chu lon hon, do bong dam hon cho dung "su thi hung trang" (tham khao VLTK 2.0), KHONG tao hero gia trung lap. */ body.theme-kim-long .pt-hero h1{ font-size:clamp(30px,4.6vw,52px) !important; letter-spacing:1.2px !important; text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 40px rgba(255,122,26,.45) !important } body.theme-kim-long .pt-panel-title{ font-size:23px !important } body.theme-kim-long .pt-panel-title::before{ content:"◆ " !important } body.theme-kim-long .pt-btn{ letter-spacing:.8px !important; text-transform:uppercase !important } /* ================================================================ TỬ VÂN — nav TRẮNG/XÁM NHẠT (khác kim-long kem, khác skin kia tối) -> chữ menu phải TỐI, ghi đè rule "chữ trắng" chung o tren. ================================================================ */ body.theme-tu-van .klx-menu>li>a{ color:#4a4358 !important; text-shadow:none !important } body.theme-tu-van .klx-menu>li>a:hover{ color:#7a4fc9 !important } /* Nang cap HERO THAT — tieu de nghieng kieu but long + anh sang tim mo ao, KHONG tao hero gia trung lap. */ body.theme-tu-van .pt-hero{ position:relative; overflow:hidden } body.theme-tu-van .pt-hero::after{ content:"✿"; position:absolute; top:14px; right:24px; font-size:34px; color:rgba(199,155,255,.35); pointer-events:none } body.theme-tu-van .pt-hero h1{ font-style:italic !important; font-family:Georgia,'Times New Roman',serif !important; letter-spacing:.5px !important } body.theme-tu-van .pt-panel-title{ font-style:italic } body.theme-tu-van .pt-panel-title::before{ content:"✿ " !important }