/* Toàn màn hình */
#page-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #ffffff, #f6f8ff);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99999;
  transition: opacity 1s ease, visibility 1s ease;
}

/* Ẩn khi xong */
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Nền động ánh sáng */
.floating-bg {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, #cfe8ff, #ffffff, #ffffff);
  animation: moveLight 8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes moveLight {
  0% { transform: translate(-10%, -10%); }
  100% { transform: translate(10%, 10%); }
}

/* Khung trung tâm */
.loader-container {
  position: relative;
  z-index: 10;
  text-align: center;
  font-family: "Inter", sans-serif;
}

/* Logo phát sáng */
.loader-glow {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, #fff 60%, #d8f1ff);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(0, 145, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.loader-logo {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  object-fit: cover;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(0,145,255,0.4); transform: scale(1); }
  50% { box-shadow: 0 0 45px rgba(0,145,255,0.6); transform: scale(1.05); }
}

/* Thanh tiến trình */
.progress-bar {
  width: 240px;
  height: 7px;
  background: #eaeaea;
  border-radius: 10px;
  overflow: hidden;
  margin: 15px auto 10px;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00b3ff, #0066ff);
  border-radius: 10px;
  position: relative;
  transition: width 0.4s ease;
}

.progress-shine {
  content: "";
  position: absolute;
  top: 0; left: -40px;
  width: 40px; height: 100%;
  background: rgba(255,255,255,0.5);
  filter: blur(8px);
  animation: shine 1.5s infinite linear;
}

@keyframes shine {
  0% { left: -50px; }
  100% { left: 250px; }
}

/* Chữ phần trăm */
.loading-text {
  color: #333;
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-top: 6px;
  font-weight: 500;
}

/* Floating circles */
.float-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  animation: float 8s ease-in-out infinite;
  z-index: 1;
}

.c1 { width: 100px; height: 100px; background: #00b3ff; top: 10%; left: 20%; animation-delay: 0s; }
.c2 { width: 150px; height: 150px; background: #ffcf00; top: 70%; right: 15%; animation-delay: 2s; }
.c3 { width: 80px; height: 80px; background: #ff4e4e; bottom: 10%; left: 10%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-25px); }
}