/* ═══════════════════════════════════════════
   TitiMoney — Shared Background Styles
   ═══════════════════════════════════════════ */

body {
  background-color: #050d1a !important;
  background-image: url('Imge/Background.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  position: relative;
  overflow-x: hidden;
}

/* ── Animated gradient layer (overlay on top of background image) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 80, 200, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(0, 160, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 40%, rgba(10, 40, 120, 0.4) 0%, transparent 60%),
    linear-gradient(170deg, rgba(2,11,24,0.6) 0%, rgba(4,21,48,0.5) 40%, rgba(7,30,64,0.5) 70%, rgba(5,13,26,0.6) 100%);
  animation: bgShift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bgShift {
  0%   { opacity: 1; filter: hue-rotate(0deg); }
  50%  { opacity: 0.92; filter: hue-rotate(8deg); }
  100% { opacity: 1; filter: hue-rotate(-5deg); }
}

/* ── Floating orbs ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle 300px at 10% 80%, rgba(0, 120, 255, 0.12) 0%, transparent 70%),
    radial-gradient(circle 200px at 90% 20%, rgba(0, 200, 255, 0.1) 0%, transparent 70%),
    radial-gradient(circle 250px at 50% 50%, rgba(20, 60, 180, 0.08) 0%, transparent 70%);
  animation: orbFloat 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20px, -15px) scale(1.05); }
  66%  { transform: translate(-15px, 10px) scale(0.97); }
  100% { transform: translate(10px, -20px) scale(1.03); }
}

/* ── Grid lines overlay ── */
.binary-bg {
  position: fixed !important;
  bottom: 0; left: 0;
  width: 100%; height: 100% !important;
  background:
    repeating-linear-gradient(
      0deg, transparent, transparent 40px,
      rgba(0, 120, 255, 0.04) 40px, rgba(0, 120, 255, 0.04) 41px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 40px,
      rgba(0, 120, 255, 0.03) 40px, rgba(0, 120, 255, 0.03) 41px
    ) !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* ── Building overlay → đổi thành light rays ── */
.building-overlay {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%; height: 100% !important;
  background:
    conic-gradient(from 200deg at 110% -10%,
      transparent 0deg,
      rgba(0, 140, 255, 0.06) 20deg,
      transparent 40deg,
      rgba(0, 100, 255, 0.04) 60deg,
      transparent 80deg
    ) !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* ── Đảm bảo content luôn trên background ── */
.page, .container, #loginScreen, #dashboard {
  position: relative;
  z-index: 1;
}