#banner {
    text-align: center;
    margin-bottom: 20px;
}

.banner-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* hiệu ứng fade-in */ 
.fade-in {
  opacity: 0;
  transform: translateY(20px); 
  animation: fadeInUp 2s ease forwards;
}

/* keyframes cho hiệu ứng */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* cho từng phần tử vào chậm dần */
.fade-delay-1 { animation-delay: 0.3s; }
.fade-delay-2 { animation-delay: 0.6s; }
.fade-delay-3 { animation-delay: 0.9s; }

/*tỏa aura sáng */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px 2px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 215, 0, 1);
  }
  100% {
    box-shadow: 0 0 5px 2px rgba(255, 215, 0, 0.5);
  }
}
/*zoom ne*/
@keyframes zoomOutGlow {
  0% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.s-rank-zoom {
  animation: zoomOutGlow 0.6s ease-out;
}

.s-rank-glow {
  animation: glow 2s ease-in-out;
  background-color: rgba(255, 255, 0, 0.1);
  border: 2px solid gold;
  border-radius: 8px;
  padding: 5px;
  transition: all 0.3s ease-in-out;
  animation: glow 3s ease-in-out infinite;
}


/*che đen 50/50*/
.s-rank-hidden {
  background-color: #111;
  color: #111; /* Ẩn chữ */
  border: 2px solid gold;
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.s-rank-hidden::after {
  content: "CLICK để mở kết quả S-rank!";
  color: gold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
}