/* ============================================================
SKH EVENTS THEME — Noel, Tết, Valentine, 30/4-1/5
Activate:
============================================================ */
/* ========== SHARED OVERLAY LAYER ========== */
body[data-event] { position: relative; }
body[data-event]::before {
content: ""; position: fixed; inset: 0; z-index: -1;
pointer-events: none;
}
body[data-event] .event-particles {
position: fixed; inset: 0; pointer-events: none; z-index: 1;
overflow: hidden;
}
body[data-event] .event-particles span {
position: absolute; top: -10%;
pointer-events: none; user-select: none;
}
/* Logo overlay anchor */
body[data-event] .logo-img { position: relative; }
body[data-event] .logo-img::after {
content: ""; position: absolute; pointer-events: none;
background-repeat: no-repeat; background-size: contain;
}
/* ============================================================
🎄 NOEL — Đỏ trắng, tuyết rơi, mũ Noel trên logo
============================================================ */
body[data-event="noel"] {
--accent: #c41e3a;
--accent-green: #2d8f4e;
}
body[data-event="noel"]::before {
background:
radial-gradient(circle at 20% 10%, rgba(196,30,58,0.10), transparent 50%),
radial-gradient(circle at 80% 90%, rgba(45,143,78,0.10), transparent 50%);
}
body:not(.dark-mode)[data-event="noel"]::before {
background:
radial-gradient(circle at 20% 10%, rgba(196,30,58,0.06), transparent 50%),
radial-gradient(circle at 80% 90%, rgba(45,143,78,0.06), transparent 50%);
}
@keyframes snowfall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(110vh) translateX(40px) rotate(360deg); opacity: 0.8; }
}
body[data-event="noel"] .event-particles span {
color: #fff; font-size: 14px;
text-shadow: 0 0 6px rgba(255,255,255,0.6);
animation: snowfall linear infinite;
}
body[data-event="noel"] .event-particles span::before { content: "❄"; }
body[data-event="noel"] .logo-img::after {
width: 26px; height: 22px;
top: -14px; left: -4px;
transform: rotate(-18deg);
background-image: url("data:image/svg+xml;utf8,");
}
body[data-event="noel"] .home-shell, body[data-event="noel"] .widget-card,
body[data-event="noel"] .subject-card, body[data-event="noel"] .info-panel {
border-color: rgba(196,30,58,0.25);
}
/* ============================================================
🌸 TẾT — Đỏ vàng, hoa mai/đào rơi, lì xì trên logo
============================================================ */
body[data-event="tet"] {
--accent: #d4af37;
--accent-green: #2d8f4e;
}
body[data-event="tet"]::before {
background:
radial-gradient(circle at 15% 10%, rgba(212,175,55,0.13), transparent 55%),
radial-gradient(circle at 85% 85%, rgba(200,16,46,0.10), transparent 55%);
}
body:not(.dark-mode)[data-event="tet"]::before {
background:
radial-gradient(circle at 15% 10%, rgba(212,175,55,0.10), transparent 55%),
radial-gradient(circle at 85% 85%, rgba(200,16,46,0.06), transparent 55%);
}
@keyframes blossomFall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(110vh) translateX(60px) rotate(540deg); opacity: 0.85; }
}
body[data-event="tet"] .event-particles span {
font-size: 18px; animation: blossomFall linear infinite;
filter: drop-shadow(0 0 4px rgba(255,193,7,0.4));
}
body[data-event="tet"] .event-particles span::before { content: "🌸"; }
body[data-event="tet"] .logo-img::after {
width: 22px; height: 28px;
top: -10px; right: -10px;
background-image: url("data:image/svg+xml;utf8,");
}
body[data-event="tet"] .home-shell, body[data-event="tet"] .widget-card,
body[data-event="tet"] .subject-card { border-color: rgba(212,175,55,0.3); }
body[data-event="tet"] .hero-banner {
background: linear-gradient(135deg, #1a0a0a 0%, #2a0f10 100%);
border: 1px solid rgba(212,175,55,0.3);
}
body:not(.dark-mode)[data-event="tet"] .hero-banner {
background: linear-gradient(135deg, #fff5e6 0%, #ffe8d4 100%);
}
/* ============================================================
💖 VALENTINE — Hồng, trái tim bay lên, tim trên logo
============================================================ */
body[data-event="valentine"] {
--accent: #e91e63;
--accent-green: #ff6b9d;
}
body[data-event="valentine"]::before {
background:
radial-gradient(circle at 30% 20%, rgba(233,30,99,0.12), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255,107,157,0.10), transparent 50%);
}
body:not(.dark-mode)[data-event="valentine"]::before {
background:
radial-gradient(circle at 30% 20%, rgba(233,30,99,0.06), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255,107,157,0.05), transparent 50%);
}
@keyframes heartFloat {
0% { transform: translateY(110vh) translateX(0) scale(0.6); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.9; }
100% { transform: translateY(-10vh) translateX(30px) scale(1.1); opacity: 0; }
}
body[data-event="valentine"] .event-particles span {
bottom: -10%; top: auto;
font-size: 16px;
animation: heartFloat linear infinite;
filter: drop-shadow(0 0 6px rgba(233,30,99,0.5));
}
body[data-event="valentine"] .event-particles span::before { content: "💗"; }
body[data-event="valentine"] .logo-img::after {
width: 18px; height: 18px;
top: -8px; right: -6px;
background-image: url("data:image/svg+xml;utf8,");
}
body[data-event="valentine"] .home-shell, body[data-event="valentine"] .widget-card,
body[data-event="valentine"] .subject-card { border-color: rgba(233,30,99,0.25); }
/* ============================================================
🇻🇳 30/4 - 1/5 — Đỏ vàng VN, sao vàng trên logo, confetti
============================================================ */
body[data-event="304"] {
--accent: #c8102e;
--accent-green: #ffcd00;
}
body[data-event="304"]::before {
background:
radial-gradient(circle at 20% 15%, rgba(200,16,46,0.13), transparent 50%),
radial-gradient(circle at 80% 85%, rgba(255,205,0,0.10), transparent 50%);
}
body:not(.dark-mode)[data-event="304"]::before {
background:
radial-gradient(circle at 20% 15%, rgba(200,16,46,0.07), transparent 50%),
radial-gradient(circle at 80% 85%, rgba(255,205,0,0.06), transparent 50%);
}
@keyframes confettiFall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(110vh) translateX(80px) rotate(720deg); opacity: 0.9; }
}
body[data-event="304"] .event-particles span {
font-size: 16px; animation: confettiFall linear infinite;
filter: drop-shadow(0 0 5px rgba(255,205,0,0.6));
}
body[data-event="304"] .event-particles span::before { content: "⭐"; }
body[data-event="304"] .event-particles span:nth-child(even)::before { content: "🎊"; }
body[data-event="304"] .logo-img::after {
width: 22px; height: 22px;
top: -10px; right: -8px;
background-image: url("data:image/svg+xml;utf8,");
}
body[data-event="304"] .hero-banner {
background: linear-gradient(135deg, #c8102e 0%, #8a0b1f 100%);
border: 1px solid #ffcd00;
}
body[data-event="304"] .hero-banner-title { color: #fff; }
body[data-event="304"] .hero-highlight { color: #ffcd00 !important; }
/* ============================================================
COMMON — Particle container (JS sẽ inject 25 spans)
============================================================ */
body[data-event] .event-particles span:nth-child(1) { left: 4%; animation-duration: 9s; animation-delay: 0s; }
body[data-event] .event-particles span:nth-child(2) { left: 12%; animation-duration: 11s; animation-delay: 1s; }
body[data-event] .event-particles span:nth-child(3) { left: 20%; animation-duration: 8s; animation-delay: 2s; }
body[data-event] .event-particles span:nth-child(4) { left: 28%; animation-duration: 13s; animation-delay: 0.5s; }
body[data-event] .event-particles span:nth-child(5) { left: 36%; animation-duration: 10s; animation-delay: 3s; }
body[data-event] .event-particles span:nth-child(6) { left: 44%; animation-duration: 12s; animation-delay: 1.5s; }
body[data-event] .event-particles span:nth-child(7) { left: 52%; animation-duration: 9s; animation-delay: 4s; }
body[data-event] .event-particles span:nth-child(8) { left: 60%; animation-duration: 14s; animation-delay: 2.5s; }
body[data-event] .event-particles span:nth-child(9) { left: 68%; animation-duration: 10s; animation-delay: 0s; }
body[data-event] .event-particles span:nth-child(10) { left: 76%; animation-duration: 11s; animation-delay: 3.5s; }
body[data-event] .event-particles span:nth-child(11) { left: 84%; animation-duration: 8s; animation-delay: 1s; }
body[data-event] .event-particles span:nth-child(12) { left: 92%; animation-duration: 12s; animation-delay: 2s; }
body[data-event] .event-particles span:nth-child(13) { left: 8%; animation-duration: 13s; animation-delay: 5s; font-size: 0.8em; }
body[data-event] .event-particles span:nth-child(14) { left: 24%; animation-duration: 9s; animation-delay: 6s; font-size: 1.2em; }
body[data-event] .event-particles span:nth-child(15) { left: 40%; animation-duration: 11s; animation-delay: 4.5s; }
body[data-event] .event-particles span:nth-child(16) { left: 56%; animation-duration: 10s; animation-delay: 5.5s; font-size: 0.9em; }
body[data-event] .event-particles span:nth-child(17) { left: 72%; animation-duration: 12s; animation-delay: 6.5s; }
body[data-event] .event-particles span:nth-child(18) { left: 88%; animation-duration: 9s; animation-delay: 4s; font-size: 1.1em; }
body[data-event] .event-particles span:nth-child(19) { left: 16%; animation-duration: 14s; animation-delay: 7s; }
body[data-event] .event-particles span:nth-child(20) { left: 64%; animation-duration: 11s; animation-delay: 8s; font-size: 0.85em; }