/* Sparkle Button Effect - Import và thêm class "sparkle-btn" vào button để sử dụng */

.sparkle-btn {
  position: relative;
  overflow: visible;
}

/* Glow effect - mềm mại với border-radius lớn */
.sparkle-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, 
    rgba(241, 167, 64, 0.4) 0%,
    rgba(241, 167, 64, 0.2) 40%,
    rgba(241, 167, 64, 0.1) 60%,
    transparent 80%
  );
  filter: blur(8px);
  z-index: -1;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Fire effect container */
.sparkle-btn .fire {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

.sparkle-btn .flame {
  position: absolute;
  bottom: -15px;
  border-radius: 50% 50% 30% 30%;
  background: linear-gradient(to top, 
    rgba(255, 60, 0, 0.5) 0%,
    rgba(255, 120, 0, 0.4) 25%,
    rgba(255, 180, 0, 0.3) 50%,
    rgba(255, 220, 50, 0.15) 75%,
    transparent 100%
  );
  filter: blur(3px);
  animation: flicker 0.15s ease-in-out infinite alternate;
}

.sparkle-btn .flame:nth-child(1) {
  left: 0%;
  width: 30%;
  height: 120%;
  animation-delay: 0s;
  animation-duration: 0.12s;
}

.sparkle-btn .flame:nth-child(2) {
  left: 15%;
  width: 28%;
  height: 140%;
  animation-delay: 0.05s;
  animation-duration: 0.18s;
}

.sparkle-btn .flame:nth-child(3) {
  left: 35%;
  width: 35%;
  height: 160%;
  animation-delay: 0.02s;
  animation-duration: 0.14s;
}

.sparkle-btn .flame:nth-child(4) {
  left: 55%;
  width: 28%;
  height: 130%;
  animation-delay: 0.08s;
  animation-duration: 0.16s;
}

.sparkle-btn .flame:nth-child(5) {
  left: 72%;
  width: 28%;
  height: 110%;
  animation-delay: 0.03s;
  animation-duration: 0.13s;
}

@keyframes flicker {
  0% {
    transform: scaleY(1) scaleX(1) translateY(0);
    opacity: 0.6;
  }
  100% {
    transform: scaleY(1.15) scaleX(0.92) translateY(-8px);
    opacity: 0.8;
  }
}

/* Sparkle particles container */
.sparkle-btn .sparkles {
  position: absolute;
  inset: -15px;
  pointer-events: none;
  z-index: 10;
}

.sparkle-btn .sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #fff 0%, #ffe066 40%, #f1a740 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 224, 102, 0.9);
}

/* Random floating animations */
.sparkle-btn .sparkle:nth-child(1) {
  top: 10%; left: 15%;
  animation: floatRandom1 4s ease-in-out infinite;
}

.sparkle-btn .sparkle:nth-child(2) {
  top: 25%; left: 70%;
  animation: floatRandom2 3.5s ease-in-out infinite 0.5s;
}

.sparkle-btn .sparkle:nth-child(3) {
  top: 60%; left: 5%;
  animation: floatRandom3 4.2s ease-in-out infinite 1s;
}

.sparkle-btn .sparkle:nth-child(4) {
  top: 75%; left: 85%;
  animation: floatRandom4 3.8s ease-in-out infinite 0.3s;
}

.sparkle-btn .sparkle:nth-child(5) {
  top: 45%; left: 40%;
  animation: floatRandom5 3.2s ease-in-out infinite 0.8s;
}

.sparkle-btn .sparkle:nth-child(6) {
  top: 15%; left: 90%;
  animation: floatRandom6 4.5s ease-in-out infinite 1.2s;
}

.sparkle-btn .sparkle:nth-child(7) {
  top: 85%; left: 30%;
  animation: floatRandom7 3.6s ease-in-out infinite 0.6s;
}

.sparkle-btn .sparkle:nth-child(8) {
  top: 50%; left: 60%;
  animation: floatRandom8 4s ease-in-out infinite 1.5s;
}

@keyframes floatRandom1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  20% { transform: translate(12px, -8px) scale(1.3); opacity: 1; }
  40% { transform: translate(-5px, 15px) scale(0.8); opacity: 0.7; }
  60% { transform: translate(18px, 5px) scale(1.1); opacity: 0.9; }
  80% { transform: translate(-10px, -12px) scale(1.2); opacity: 1; }
}

@keyframes floatRandom2 {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.5; }
  15% { transform: translate(-15px, 10px) scale(1.2); opacity: 1; }
  35% { transform: translate(8px, -18px) scale(0.7); opacity: 0.8; }
  55% { transform: translate(-12px, -5px) scale(1.4); opacity: 0.9; }
  75% { transform: translate(20px, 8px) scale(1); opacity: 1; }
}

@keyframes floatRandom3 {
  0%, 100% { transform: translate(0, 0) scale(1.1); opacity: 0.7; }
  25% { transform: translate(10px, 12px) scale(0.8); opacity: 1; }
  50% { transform: translate(-18px, -6px) scale(1.3); opacity: 0.6; }
  75% { transform: translate(5px, -15px) scale(1); opacity: 0.9; }
}

@keyframes floatRandom4 {
  0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.6; }
  20% { transform: translate(-8px, -14px) scale(1.2); opacity: 0.9; }
  45% { transform: translate(15px, 6px) scale(1); opacity: 1; }
  70% { transform: translate(-12px, 10px) scale(1.4); opacity: 0.8; }
}

@keyframes floatRandom5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  18% { transform: translate(14px, 8px) scale(1.3); opacity: 1; }
  38% { transform: translate(-10px, -12px) scale(0.9); opacity: 0.7; }
  58% { transform: translate(-5px, 18px) scale(1.1); opacity: 0.9; }
  78% { transform: translate(12px, -8px) scale(1.2); opacity: 1; }
}

@keyframes floatRandom6 {
  0%, 100% { transform: translate(0, 0) scale(1.2); opacity: 0.6; }
  22% { transform: translate(-18px, 5px) scale(0.8); opacity: 1; }
  48% { transform: translate(8px, -16px) scale(1.1); opacity: 0.8; }
  72% { transform: translate(15px, 12px) scale(1.4); opacity: 0.9; }
}

@keyframes floatRandom7 {
  0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.7; }
  30% { transform: translate(12px, -10px) scale(1.2); opacity: 1; }
  60% { transform: translate(-15px, 8px) scale(1); opacity: 0.8; }
  85% { transform: translate(6px, 14px) scale(1.3); opacity: 0.9; }
}

@keyframes floatRandom8 {
  0%, 100% { transform: translate(0, 0) scale(1.1); opacity: 0.5; }
  25% { transform: translate(-10px, -15px) scale(0.9); opacity: 0.9; }
  50% { transform: translate(18px, 6px) scale(1.3); opacity: 1; }
  75% { transform: translate(-8px, 12px) scale(1); opacity: 0.7; }
}

/* Small sparkle variant */
.sparkle-btn .sparkle.sm {
  width: 4px;
  height: 4px;
}

/* Large sparkle variant */
.sparkle-btn .sparkle.lg {
  width: 7px;
  height: 7px;
}