/* CSS từ trungquandev/fireworks-tqd */

:root {
  --title-font-size: clamp(2rem, 4vw, 3rem);
  --title-letter-spacing: clamp(-1px, -0.5vw, -2px);
  --color-01: #45aaf2; /* High Blue */
  --color-02: #ffc312; /* Sun Flower */
  --color-03: #26de81; /* Reptile Green */
  --color-04: #d980fa; /* Lighter Purple */
}

.fireworks-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
}

/* Hiệu ứng chữ đổi màu và bay lượn nếu cần dùng */
.animate-color {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.animate-color_item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);
  z-index: -1;
}

.animate-color_item:nth-child(1) {
  background-color: var(--color-01);
  animation: animate-color-01 10s infinite linear;
}
.animate-color_item:nth-child(2) {
  background-color: var(--color-02);
  animation: animate-color-02 12s infinite linear;
}
.animate-color_item:nth-child(3) {
  background-color: var(--color-03);
  animation: animate-color-03 15s infinite linear;
}
.animate-color_item:nth-child(4) {
  background-color: var(--color-04);
  animation: animate-color-04 18s infinite linear;
}

@keyframes animate-color-01 {
  0% { top: 0; right: 0; }
  50% { top: 100%; right: 75%; }
  75% { top: 100%; right: 25%; }
  100% { top: 0; right: 0; }
}

@keyframes animate-color-02 {
  0% { top: -50%; left: 0; }
  60% { top: 100%; left: 75%; }
  40% { top: 100%; left: 25%; }
  100% { top: -50%; left: 0; }
}

@keyframes animate-color-03 {
  0% { bottom: 0; left: 0; }
  40% { bottom: 100%; left: 75%; }
  60% { bottom: 40%; left: 50%; }
  100% { bottom: 0; left: 0; }
}

@keyframes animate-color-04 {
  0% { bottom: 0; right: 0; }
  50% { bottom: 100%; right: 75%; }
  75% { bottom: 100%; right: 25%; }
  100% { bottom: 0; right: 0; }
}