/* ======================================================
   🧧 THEME OVERRIDES (Seasonal Themes) – Extended
   File: tino-theme-overrides.css
   ====================================================== */

/* ---------------------------------------
   🌸 Base (không đổi)
--------------------------------------- */
body.tino-theme {
}
@media (max-width: 575.98px) {
  .theme-side-icons {
    display: none;
  }
}
/* ---------------------------------------
   🧧 Tết (Vietnam Lunar New Year)  [1]
--------------------------------------- */
body.theme-tet {
  --bg: #1a0d0b;
  --bg-grad-a: #421a14;
  --card: #2c1612;
  --card-2: #2a1511;
  --text: #fff3da;
  --brand: #ffb347;
  --accent: #ff5858;
  --border: #803a2b;
  background: radial-gradient(
      80vw 80vh at 10% -10%,
      #4b1812 0%,
      #1a0d0b 55%,
      #1a0d0b 100%
    )
    #1a0d0b;
}
body.theme-tet .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 204, 100, 0.15),
    rgba(255, 100, 50, 0.1) 60%,
    rgba(20, 10, 5, 0.9)
  );
  box-shadow: 0 0 32px rgba(255, 180, 100, 0.2);
}
body.theme-tet .sec-title::before {
  content: "🧧 ";
}

/* ---------------------------------------
   🎃 Halloween  [3]
--------------------------------------- */
body.theme-halloween {
  --bg: #0b0710;
  --bg-grad-a: #2b1842;
  --card: #181028;
  --card-2: #1c1230;
  --text: #f9f5ff;
  --brand: #f97316;
  --accent: #a855f7;
  --border: #332155;
  background: radial-gradient(
      80vw 80vh at 15% -5%,
      #2b1842 0%,
      #0b0710 55%,
      #0b0710 100%
    )
    #0b0710;
}
body.theme-halloween .hero {
  background: linear-gradient(
    180deg,
    rgba(249, 115, 22, 0.15),
    rgba(168, 85, 247, 0.1) 60%,
    rgba(15, 10, 20, 0.8)
  );
  box-shadow: 0 0 36px rgba(255, 120, 40, 0.25);
}

/* ---------------------------------------
   🎄 Noel / Christmas  [2]
--------------------------------------- */
body.theme-noel {
  --bg: #07120b;
  --bg-grad-a: #144b2b;
  --card: #10281c;
  --card-2: #10291c;
  --text: #e8fff0;
  --brand: #72e062;
  --accent: #ff4f4f;
  --border: #205336;
  background: radial-gradient(
      80vw 80vh at 15% -5%,
      #144b2b 0%,
      #07120b 55%,
      #07120b 100%
    )
    #07120b;
}
body.theme-noel .hero {
  background: linear-gradient(
    180deg,
    rgba(114, 224, 98, 0.1),
    rgba(255, 79, 79, 0.1) 60%,
    rgba(10, 20, 10, 0.8)
  );
  box-shadow: 0 0 36px rgba(255, 100, 100, 0.25);
}
body.theme-noel .sec-title::before {
  content: "🎄 ";
}

/* ---------------------------------------
   🏮 Trung Thu – Đèn Lồng  [5]
--------------------------------------- */
body.theme-midautumn-lanterns {
  --bg: #0b0a16;
  --bg-grad-a: #2b1842;
  --card: #161327;
  --card-2: #1a1730;
  --text: #f2eaff;
  --brand: #ffaf45;
  --accent: #ff5d73;
  --border: #2c2150;
  background: radial-gradient(
      80vw 80vh at 20% -8%,
      #2b1842 0%,
      #0b0a16 55%,
      #0b0a16 100%
    )
    #0b0a16;
}
body.theme-midautumn-lanterns .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 175, 69, 0.12),
    rgba(255, 93, 115, 0.1) 60%,
    rgba(15, 12, 28, 0.82)
  );
  box-shadow: 0 0 36px rgba(255, 175, 69, 0.22);
}
body.theme-midautumn-lanterns .sec-title::before {
  content: "🏮 ";
}

/* ---------------------------------------
   🇻🇳 Quốc Khánh 2/9  [6]
--------------------------------------- */
body.theme-nationalday {
  --bg: #220202;
  --bg-grad-a: #5b0f0f;
  --card: #1a0a0a;
  --card-2: #230d0d;
  --text: #ffe9c0;
  --brand: #ffd24d;
  --accent: #ff3b30;
  --border: #6b1b1b;
  background: radial-gradient(
      80vw 80vh at 12% -10%,
      #5b0f0f 0%,
      #220202 55%,
      #220202 100%
    )
    #220202;
}
body.theme-nationalday .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 210, 77, 0.12),
    rgba(255, 59, 48, 0.1) 60%,
    rgba(24, 8, 8, 0.85)
  );
  box-shadow: 0 0 32px rgba(255, 210, 77, 0.22);
}
body.theme-nationalday .sec-title::before {
  content: "🇻🇳 ";
}

/* ---------------------------------------
   💖 Valentine  [7]
--------------------------------------- */
body.theme-valentine {
  --bg: #180a12;
  --bg-grad-a: #401428;
  --card: #23101b;
  --card-2: #2a1420;
  --text: #ffeef5;
  --brand: #ff5c8a;
  --accent: #ff2e63;
  --border: #5e1d36;
  background: radial-gradient(
      80vw 80vh at 18% -8%,
      #401428 0%,
      #180a12 55%,
      #180a12 100%
    )
    #180a12;
}
body.theme-valentine .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 92, 138, 0.14),
    rgba(255, 46, 99, 0.1) 60%,
    rgba(24, 8, 16, 0.86)
  );
  box-shadow: 0 0 32px rgba(255, 92, 138, 0.24);
}
body.theme-valentine .sec-title::before {
  content: "💖 ";
}

/* ---------------------------------------
   🌕 Rằm Tháng 8 – Trăng & Sao (biến thể Trung Thu)  [8]
--------------------------------------- */
body.theme-midautumn-moon {
  --bg: #070a16;
  --bg-grad-a: #0c1e4f;
  --card: #0c1224;
  --card-2: #0e1430;
  --text: #eaf1ff;
  --brand: #ffd24d;
  --accent: #7aa8ff;
  --border: #1b2d5b;
  background: radial-gradient(
      80vw 80vh at 18% -8%,
      #0c1e4f 0%,
      #070a16 55%,
      #070a16 100%
    )
    #070a16;
}
body.theme-midautumn-moon .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 210, 77, 0.12),
    rgba(122, 168, 255, 0.1) 60%,
    rgba(10, 16, 32, 0.82)
  );
  box-shadow: 0 0 30px rgba(122, 168, 255, 0.22);
}
body.theme-midautumn-moon .sec-title::before {
  content: "🌕 ";
}

/* ---------------------------------------
   ☀️ Summer  [9]
--------------------------------------- */
body.theme-summer {
  --bg: #06161b;
  --bg-grad-a: #0a3a4a;
  --card: #0a1f23;
  --card-2: #0b242a;
  --text: #eaffff;
  --brand: #ffd166;
  --accent: #06d6a0;
  --border: #1f4d57;
  background: radial-gradient(
      80vw 80vh at 18% -8%,
      #0a3a4a 0%,
      #06161b 55%,
      #06161b 100%
    )
    #06161b;
}
body.theme-summer .hero {
  background: linear-gradient(
    180deg,
    rgba(255, 209, 102, 0.12),
    rgba(6, 214, 160, 0.1) 60%,
    rgba(6, 22, 27, 0.84)
  );
  box-shadow: 0 0 32px rgba(6, 214, 160, 0.22);
}
body.theme-summer .sec-title::before {
  content: "☀️ ";
}

/* ======================================================
   🌟 Seasonal FX – Common (containers & base) 
   (kế thừa phần bạn đã có, bổ sung thêm các hạt)
   ====================================================== */
#theme-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fx {
  position: absolute;
  left: var(--x, 50%);
  top: -8vh;
  width: var(--size, 4px);
  height: var(--size, 4px);
  animation: fx-fall var(--dur, 16s) var(--delay, 0s) linear infinite;
  will-change: transform, top, left;
}
@keyframes fx-fall {
  to {
    top: 110vh;
    transform: translateX(var(--drift, 20px)) rotate(var(--rot, 0deg));
  }
}

/* ❄️ Snow (Noel) */
.fx.snow {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* 🌸 Petal (Tết) */
.fx.petal {
  width: calc(var(--size) * 1.4);
  height: var(--size);
  background: radial-gradient(circle at 30% 30%, #ffd1e1 0 60%, transparent 61%),
    radial-gradient(circle at 70% 70%, #ff9fb8 0 55%, transparent 56%);
  border-radius: 60% 40% 60% 40%;
  opacity: 0.95;
  animation-name: fx-fall, fx-sway;
  animation-duration: var(--dur, 16s), calc(var(--dur, 16s) * 0.7);
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-sway {
  50% {
    transform: translateX(var(--drift, 28px))
      rotate(calc(var(--rot, 0deg) + 30deg));
  }
}

/* 🦇 Bat (Halloween) */
.fx.bat {
  width: calc(var(--size) * 2.2);
  height: calc(var(--size) * 1.2);
  background: radial-gradient(circle at 35% 60%, #2e2045 55%, transparent 56%),
    radial-gradient(circle at 65% 60%, #2e2045 55%, transparent 56%),
    radial-gradient(circle at 50% 40%, #2e2045 60%, transparent 61%);
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.35));
  animation-name: fx-fall, fx-flap;
  animation-duration: var(--dur, 16s), 900ms;
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-flap {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(var(--drift, 18px)) rotate(-8deg);
  }
}

/* 🏮 Lantern (Trung Thu – Đèn lồng) */
.fx.lantern {
  width: calc(var(--size) * 2.6);
  height: calc(var(--size) * 3.2);
  background: radial-gradient(
      circle at 50% 35%,
      rgba(255, 210, 77, 0.9) 0 55%,
      transparent 56%
    ),
    linear-gradient(#ff7a59, #ffaf45);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 175, 69, 0.55),
    0 0 20px rgba(255, 175, 69, 0.25);
  animation-name: fx-fall, fx-lantern-sway;
  animation-duration: var(--dur, 18s), 2.6s;
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-lantern-sway {
  50% {
    transform: translateX(var(--drift, 24px)) rotate(4deg);
  }
}

/* 🇻🇳 Flag (Quốc Khánh) – cách điệu hình cờ & sao */
.fx.flag {
  width: calc(var(--size) * 3.2);
  height: calc(var(--size) * 2.2);
  background: linear-gradient(90deg, #ff3b30 0 70%, transparent 71%),
    radial-gradient(circle at 35% 50%, #ffd24d 0 12%, transparent 13%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.35);
  animation-name: fx-fall, fx-flag-wave;
  animation-duration: var(--dur, 16s), 1.8s;
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-flag-wave {
  50% {
    transform: translateX(var(--drift, 22px)) skewX(4deg);
  }
}

/* 💘 Heart (Valentine) */
.fx.heart {
  width: calc(var(--size) * 1.6);
  height: calc(var(--size) * 1.6);
  position: relative;
  transform: rotate(45deg);
  background: radial-gradient(circle at 30% 30%, #ff5c8a 0 60%, transparent 61),
    radial-gradient(circle at 70% 70%, #ff2e63 0 55%, transparent 56);
  border-radius: 4px;
  filter: drop-shadow(0 0 6px rgba(255, 92, 138, 0.35));
  animation-name: fx-fall, fx-heart-pulse;
  animation-duration: var(--dur, 16s), 1.6s;
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-heart-pulse {
  50% {
    transform: translateX(var(--drift, 20px)) rotate(45deg) scale(1.08);
  }
}

/* 🌟 Star (Rằm tháng 8) */
.fx.star {
  width: 0;
  height: 0;
  border-left: calc(var(--size) * 0.7) solid transparent;
  border-right: calc(var(--size) * 0.7) solid transparent;
  border-bottom: calc(var(--size) * 1.2) solid #ffd24d;
  position: relative;
  filter: drop-shadow(0 0 6px rgba(255, 210, 77, 0.45));
  animation-name: fx-fall, fx-star-twinkle;
  animation-duration: var(--dur, 16s), 1.5s;
  animation-timing-function: linear, ease-in-out;
}
.fx.star:after {
  content: "";
  position: absolute;
  left: -calc(var(--size) * 0.7);
  top: calc(var(--size) * 0.2);
  width: 0;
  height: 0;
  border-left: calc(var(--size) * 0.7) solid transparent;
  border-right: calc(var(--size) * 0.7) solid transparent;
  border-top: calc(var(--size) * 1.2) solid #ffd24d;
}
@keyframes fx-star-twinkle {
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 210, 77, 0.75));
  }
}

/* 🫧 Bubble (Summer) */
.fx.bubble {
  width: calc(var(--size) * 1.8);
  height: calc(var(--size) * 1.8);
  border-radius: 50%;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.9) 0 25%,
      rgba(255, 255, 255, 0.2) 60%,
      transparent 61%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgba(255, 255, 255, 0.5) 0 35%,
      transparent 36%
    );
  mix-blend-mode: screen;
  opacity: 0.8;
  animation-name: fx-fall, fx-bubble-drift;
  animation-duration: var(--dur, 20s), 3s;
  animation-timing-function: linear, ease-in-out;
}
@keyframes fx-bubble-drift {
  50% {
    transform: translateX(var(--drift, 30px)) scale(1.06);
  }
}

/* ======================================================
   📌 Side Icons – fixed theo viewport (dùng tạm emoji)
   ====================================================== */
.theme-side-icons .side-icon {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  z-index: 2;
  opacity: 0.9;
  display: grid;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.theme-side-icons .left {
  left: 12px;
}
.theme-side-icons .right {
  right: 12px;
}
.theme-side-icons .side-icon::before {
  font-size: 42px;
  line-height: 1;
  content: "⭐";
}

/* icon theo theme */
body.theme-noel .theme-side-icons .left::before {
  content: "🎄";
}
body.theme-noel .theme-side-icons .right::before {
  content: "🎁";
}

body.theme-tet .theme-side-icons .left::before {
  content: "🧧";
}
body.theme-tet .theme-side-icons .right::before {
  content: "🌸";
}

body.theme-halloween .theme-side-icons .left::before {
  content: "🎃";
}
body.theme-halloween .theme-side-icons .right::before {
  content: "🦇";
}

body.theme-midautumn-lanterns .theme-side-icons .left::before {
  content: "🏮";
}
body.theme-midautumn-lanterns .theme-side-icons .right::before {
  content: "🐉";
}

body.theme-nationalday .theme-side-icons .left::before {
  content: "🇻🇳";
}
body.theme-nationalday .theme-side-icons .right::before {
  content: "✨";
}

body.theme-valentine .theme-side-icons .left::before {
  content: "💘";
}
body.theme-valentine .theme-side-icons .right::before {
  content: "💝";
}

body.theme-midautumn-moon .theme-side-icons .left::before {
  content: "🌕";
}
body.theme-midautumn-moon .theme-side-icons .right::before {
  content: "⭐";
}

body.theme-summer .theme-side-icons .left::before {
  content: "🌴";
}
body.theme-summer .theme-side-icons .right::before {
  content: "☀️";
}

/* float nhẹ */
.theme-side-icons .side-icon {
  animation: side-float 6s ease-in-out infinite;
}
.theme-side-icons .side-icon.right {
  animation-delay: 0.8s;
}
@keyframes side-float {
  0%,
  100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(calc(-50% - 6px));
  }
}

/* nhấn nút theo theme */
body.theme-noel .btn-brand {
  box-shadow: 0 8px 24px rgba(114, 224, 98, 0.18);
}
body.theme-tet .btn-brand {
  box-shadow: 0 8px 24px rgba(255, 180, 100, 0.22);
}
body.theme-halloween .btn-brand {
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.22);
}
body.theme-nationalday .btn-brand {
  box-shadow: 0 8px 24px rgba(255, 210, 77, 0.22);
}
body.theme-valentine .btn-brand {
  box-shadow: 0 8px 24px rgba(255, 92, 138, 0.24);
}
body.theme-midautumn-lanterns .btn-brand {
  box-shadow: 0 8px 24px rgba(255, 175, 69, 0.22);
}
body.theme-midautumn-moon .btn-brand {
  box-shadow: 0 8px 24px rgba(122, 168, 255, 0.22);
}
body.theme-summer .btn-brand {
  box-shadow: 0 8px 24px rgba(6, 214, 160, 0.22);
}