#aqProMotionBanner3D,
#aqProMotionBanner3D * {
  box-sizing: border-box;
}

#aqProMotionBanner3D {
  width: min(calc(100% - 28px), 1380px);
  height: clamp(120px, 14vw, 185px);
  margin: 8px auto 0;
  position: relative;
  z-index: 50;
  perspective: 1000px;
  isolation: isolate;
}

#aqProMotionBanner3D .aq3d-scene {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  position: relative;
  background:
    radial-gradient(circle at 50% 48%, rgba(0,245,255,.32), transparent 14%),
    radial-gradient(circle at 50% 55%, rgba(255,0,145,.28), transparent 26%),
    linear-gradient(110deg, #680030 0%, #25175d 48%, #003f4a 100%);
  border: 1px solid rgba(0,238,255,.22);
  box-shadow:
    0 24px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -25px 80px rgba(0,0,0,.36);
  transform-style: preserve-3d;
  animation: aq3dFloat 4.2s ease-in-out infinite, aq3dDriftHue 8s linear infinite;
}

#aqProMotionBanner3D .aq3d-scene::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(0,238,255,.26),
    transparent,
    rgba(255,0,145,.28),
    transparent,
    rgba(120,0,255,.22),
    transparent
  );
  filter: blur(16px);
  animation: aq3dSpin 5.8s linear infinite;
}

#aqProMotionBanner3D .aq3d-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: aq3dGrid 3.8s linear infinite;
}

#aqProMotionBanner3D .aq3d-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -32%;
  height: 76%;
  background:
    linear-gradient(90deg, rgba(0,238,255,.18) 1px, transparent 1px),
    linear-gradient(rgba(255,0,145,.16) 1px, transparent 1px);
  background-size: 58px 26px;
  transform: rotateX(68deg) translateZ(-45px);
  transform-origin: bottom;
  opacity: .62;
  animation: aq3dRun 2s linear infinite;
}

#aqProMotionBanner3D .aq3d-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(86px, 10vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(85px);
  background: radial-gradient(circle, #cffff5 0 13%, #00eaff 14% 29%, #651cff 42%, transparent 58%);
  box-shadow: 0 0 30px rgba(0,238,255,.9), 0 0 70px rgba(255,0,145,.52);
  animation: aq3dPulse .92s ease-in-out infinite, aq3dOrbit 2.8s ease-in-out infinite;
}

#aqProMotionBanner3D .aq3d-ring {
  position: absolute;
  border-radius: 50%;
  inset: -20%;
  border: 3px solid rgba(255,0,145,.56);
  box-shadow: 0 0 22px rgba(255,0,145,.55);
  animation: aq3dRing 1.15s ease-in-out infinite;
}

#aqProMotionBanner3D .aq3d-ring.r2 {
  inset: -42%;
  border-color: rgba(0,238,255,.48);
  animation-delay: -.7s;
}

#aqProMotionBanner3D .aq3d-ring.r3 {
  inset: -64%;
  border-color: rgba(120,0,255,.48);
  animation-delay: -1.25s;
}

#aqProMotionBanner3D .aq3d-bars {
  position: absolute;
  inset: 0;
  padding: 0 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateZ(70px);
}

#aqProMotionBanner3D .aq3d-side {
  display: flex;
  gap: clamp(10px, 1.7vw, 22px);
  align-items: center;
}

#aqProMotionBanner3D .aq3d-bar {
  width: clamp(12px, 1.35vw, 20px);
  height: clamp(58px, 8vw, 112px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff1c91, #a90070);
  box-shadow: 0 0 24px rgba(255,0,145,.75);
  animation: aq3dBar .58s ease-in-out infinite, aq3dBarSway 1.8s ease-in-out infinite;
}

#aqProMotionBanner3D .aq3d-bar.cyan {
  background: linear-gradient(180deg, #00eaff, #008fa8);
  box-shadow: 0 0 24px rgba(0,238,255,.75);
  animation-delay: -.25s, -.6s;
}

#aqProMotionBanner3D .aq3d-bar.small {
  height: clamp(42px, 5.8vw, 84px);
  animation-delay: -.5s, -1.1s;
}

#aqProMotionBanner3D .aq3d-side .aq3d-bar:nth-child(1) { animation-duration: .52s, 1.6s; }
#aqProMotionBanner3D .aq3d-side .aq3d-bar:nth-child(2) { animation-duration: .63s, 1.95s; }
#aqProMotionBanner3D .aq3d-side .aq3d-bar:nth-child(3) { animation-duration: .56s, 1.7s; }
#aqProMotionBanner3D .aq3d-side .aq3d-bar:nth-child(4) { animation-duration: .68s, 2.1s; }

#aqProMotionBanner3D .aq3d-title {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.8vw, 20px);
  transform: translateX(-50%) translateZ(100px);
  width: 92%;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: clamp(15px, 2.1vw, 30px);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(0,238,255,.85), 0 0 30px rgba(255,0,145,.6);
  animation: aq3dGlow 2s ease-in-out infinite;
}

#aqProMotionBanner3D .aq3d-sub {
  display: block;
  margin-top: 4px;
  font-size: clamp(9px, .9vw, 13px);
  letter-spacing: .32em;
  color: #00eaff;
}

/* Bỏ toàn bộ text banner theo yêu cầu */
#aqProMotionBanner3D .aq3d-title,
#aqProMotionBanner3D .aq3d-sub {
  display: none !important;
}

@keyframes aq3dFloat {
  0%,100% { transform: rotateX(-.8deg) rotateY(-2.8deg) translateY(0); }
  50% { transform: rotateX(2.6deg) rotateY(2.8deg) translateY(-7px); }
}

@keyframes aq3dSpin {
  to { transform: rotate(360deg); }
}

@keyframes aq3dDriftHue {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.02); }
  50% { filter: hue-rotate(18deg) saturate(1.14); }
}

@keyframes aq3dGrid {
  to { background-position: 96px 48px, 96px 48px; }
}

@keyframes aq3dRun {
  to { background-position: 0 52px, 58px 0; }
}

@keyframes aq3dPulse {
  0%,100% { transform: translate(-50%, -50%) translateZ(85px) scale(.88); }
  50% { transform: translate(-50%, -50%) translateZ(108px) scale(1.16); }
}

@keyframes aq3dOrbit {
  0%, 100% { left: 50%; top: 50%; }
  25% { left: 51.1%; top: 48.8%; }
  50% { left: 48.9%; top: 51.1%; }
  75% { left: 50.8%; top: 49.3%; }
}

@keyframes aq3dRing {
  0%,100% { opacity: .2; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes aq3dBar {
  0%,100% { transform: scaleY(.42); opacity: .54; }
  50% { transform: scaleY(1.28); opacity: 1; }
}

@keyframes aq3dBarSway {
  0%, 100% { translate: 0 0; }
  25% { translate: 1.4px -1.2px; }
  50% { translate: -1.2px 1.2px; }
  75% { translate: .8px -.8px; }
}

@media (prefers-reduced-motion: reduce) {
  #aqProMotionBanner3D .aq3d-scene,
  #aqProMotionBanner3D .aq3d-scene::before,
  #aqProMotionBanner3D .aq3d-scene::after,
  #aqProMotionBanner3D .aq3d-floor,
  #aqProMotionBanner3D .aq3d-core,
  #aqProMotionBanner3D .aq3d-ring,
  #aqProMotionBanner3D .aq3d-bar {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes aq3dGlow {
  0%,100% { opacity: .78; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

@media (max-width: 820px) {
  #aqProMotionBanner3D {
    width: min(calc(100% - 16px), 720px);
    height: 116px;
    margin-top: 8px;
  }

  #aqProMotionBanner3D .aq3d-scene {
    border-radius: 20px;
  }

  #aqProMotionBanner3D .aq3d-bars {
    padding: 0 5%;
  }

  #aqProMotionBanner3D .aq3d-side {
    gap: 8px;
  }

  #aqProMotionBanner3D .aq3d-title {
    letter-spacing: .13em;
  }

  #aqProMotionBanner3D .aq3d-sub {
    letter-spacing: .16em;
  }
}
