.gold-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.gold-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);

  width: var(--size);
  height: var(--size);

  border-radius: 50%;

  background: radial-gradient(
    circle,
    #fffbd7 0%,
    #ffe477 30%,
    #f7b52f 58%,
    rgba(247, 181, 47, 0) 100%
  );

  box-shadow:
    0 0 5px rgba(255, 237, 151, 0.95),
    0 0 12px rgba(255, 192, 44, 0.75),
    0 0 24px rgba(224, 126, 14, 0.35);

  opacity: 0;

  animation:
    goldParticleFloat var(--duration) ease-in-out infinite,
    goldParticleBlink var(--blink-duration) ease-in-out infinite;

  animation-delay: var(--delay), var(--blink-delay);

  will-change: transform, opacity;
}

@keyframes goldParticleFloat {
  0% {
    transform: translate3d(0, 40px, 0) scale(0.25);
    opacity: 0;
  }

  15% {
    opacity: var(--opacity);
  }

  55% {
    opacity: calc(var(--opacity) * 0.9);
  }

  100% {
    transform: translate3d(var(--move-x), var(--move-y), 0)
      scale(var(--scale-end));
    opacity: 0;
  }
}

@keyframes goldParticleBlink {
  0%,
  100% {
    filter: brightness(0.8);
  }

  50% {
    filter: brightness(1.8);
  }
}

.bg_chuyengia {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gold-particle {
    animation: none;
    opacity: 0.5;
  }
}

.gold-particles-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gold-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.gold-gloss {
  position: absolute;
  top: -20%;
  left: -45%;
  z-index: 2;

  width: 38%;
  height: 140%;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 28%,
    rgba(255, 244, 190, 0.18) 42%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 219, 104, 0.2) 58%,
    rgba(255, 255, 255, 0.02) 72%,
    transparent 100%
  );

  filter: blur(18px);
  transform: skewX(-18deg);
  mix-blend-mode: screen;

  opacity: 0;
  animation: none;
}

.gold-gloss::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 46%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 215, 88, 0.12) 56%,
    transparent 100%
  );

  filter: blur(6px);
}

/* Hover mới chạy */
.bg_chuyengia:hover .gold-gloss {
  animation: goldGlossSweep 1.1s ease-out forwards;
}

/* Bỏ hover thì reset */
.bg_chuyengia:not(:hover) .gold-gloss {
  animation: none;
  left: -45%;
  opacity: 0;
}

@keyframes goldGlossSweep {
  0% {
    left: -45%;
    opacity: 0;
  }

  10% {
    opacity: 0.85;
  }

  35% {
    opacity: 1;
  }

  70% {
    opacity: 0.75;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}