/* ==========================================================================
   LED CẦU THANG THÔNG MINH KHÁNH HÒA - CUSTOM STYLESHEET
   Brand: ledcauthangthongminh.com | Hotline: 09 3579 3070
   ========================================================================== */

/* Base font & theme settings */
body {
  font-family: 'Be Vietnam Pro', sans-serif;
  background-color: #070B11;
  color: #E2E8F0;
  overflow-x: hidden;
}

/* Background grid subtle effect */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(245, 158, 11, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Stair step LED glow effect */
.stair-step {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stair-step.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.95) 0%, rgba(251, 191, 36, 0.8) 70%, rgba(254, 243, 199, 0.95) 100%);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.75), 0 0 35px rgba(245, 158, 11, 0.4);
  border-color: #FDE68A;
  transform: scaleX(1.02);
}

.stair-step.active .step-indicator {
  opacity: 1;
  color: #78350F;
  font-weight: 700;
}

/* Custom Glass Panel & Cards */
.glass-panel {
  background: rgba(19, 27, 43, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-glow {
  background: rgba(19, 27, 43, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(245, 158, 11, 0.05);
}

/* Glow Text */
.text-glow-gold {
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.5), 0 0 40px rgba(245, 158, 11, 0.2);
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0B0F17;
}

::-webkit-scrollbar-thumb {
  background: #2A364F;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #F59E0B;
}

/* Pulse animation utility */
@keyframes pulseGlowCustom {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.7));
  }
  50% {
    opacity: 0.65;
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.3));
  }
}

.animate-pulse-glow {
  animation: pulseGlowCustom 2.5s infinite;
}