/* ============================================
   HYDRASTORE — PREMIUM UPGRADE v3.0
   Đồ họa xịn · Giao diện đẹp · Hiệu ứng cao cấp
   ============================================ */

:root{
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  --grad-primary: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #06b6d4 100%);
  --grad-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --grad-pink: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  --grad-aurora: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899, #fbbf24, #8b5cf6);
  
  --glow-purple: 0 0 40px rgba(139, 92, 246, 0.4);
  --glow-cyan: 0 0 40px rgba(6, 182, 212, 0.4);
  --glow-pink: 0 0 40px rgba(236, 72, 153, 0.4);
}

/* ============================================================
   ✨ GLASS MORPHISM 3.0 — Kính mờ đa lớp với viền sáng
   ============================================================ */
.glass{
  position: relative !important;
  background:
    linear-gradient(135deg, rgba(20,26,45,.75) 0%, rgba(8,11,20,.92) 100%) !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.06) inset,
    0 -1px 0 0 rgba(0,0,0,.4) inset,
    0 0 0 1px rgba(139,92,246,.05),
    0 20px 50px -15px rgba(0,0,0,.6),
    0 0 60px -20px rgba(139,92,246,.3) !important;
  transition:
    border-color .5s var(--ease-out-expo),
    box-shadow .5s var(--ease-out-expo),
    transform .5s var(--ease-out-expo) !important;
  overflow: hidden !important;
}

/* Viền Aurora chạy quanh glass */
.glass::before{
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: conic-gradient(
    from var(--glass-angle, 0deg),
    transparent 0deg,
    rgba(139,92,246,.5) 60deg,
    rgba(6,182,212,.5) 120deg,
    transparent 180deg,
    rgba(236,72,153,.4) 240deg,
    transparent 300deg,
    transparent 360deg
  ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  opacity: .7 !important;
  animation: glassAuroraSpin 8s linear infinite !important;
  z-index: 1 !important;
}
@keyframes glassAuroraSpin{
  to { --glass-angle: 360deg }
}
@property --glass-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.glass:hover{
  border-color: rgba(139,92,246,.4) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(139,92,246,.2),
    0 30px 70px -20px rgba(0,0,0,.7),
    0 0 80px -20px rgba(139,92,246,.5) !important;
  transform: translateY(-2px);
}

/* ============================================================
   💎 BUTTON HOLOGRAM 3.0 — Nút phát sáng với hiệu ứng cao cấp
   ============================================================ */
.btn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
  background-size: 300% 300% !important;
  background-position: 0% 50% !important;
  letter-spacing: .5px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition:
    transform .3s var(--ease-spring),
    box-shadow .4s var(--ease-out-expo),
    background-position .6s var(--ease-out-expo),
    border-radius .4s var(--ease-spring),
    filter .25s ease !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.2) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 8px 24px -8px rgba(139,92,246,.5),
    0 0 0 1px rgba(255,255,255,.05) !important;
}

/* Lớp sáng bên trên */
.btn::before{
  content: "" !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.05) 40%,
    transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}

/* Lớp shimmer chạy qua */
.btn::after{
  content: "" !important;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.3),
    transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
  z-index: 1;
}

.btn:hover{
  background-position: 100% 50% !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.3) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 20px 45px -10px rgba(139,92,246,.75),
    0 0 40px -5px rgba(6,182,212,.6),
    0 0 0 1px rgba(255,255,255,.15) !important;
  filter: brightness(1.1) saturate(1.1);
}

.btn:hover::before{ opacity: 1 }
.btn:hover::after{ left: 100% }

.btn:active{
  transform: translateY(-1px) scale(.98) !important;
  transition-duration: .1s !important;
}

.btn:focus-visible{
  outline: 3px solid rgba(192,132,252,.8);
  outline-offset: 4px;
}

.btn:disabled{
  opacity: .4 !important;
  filter: saturate(.3) brightness(.7) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn:disabled::after{ display: none }

/* Nút vàng gold — thêm hiệu ứng lấp lánh */
.btn-gold{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.4) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 8px 24px -8px rgba(251,191,36,.6),
    0 0 0 1px rgba(255,200,50,.3) !important;
}
.btn-gold:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.5) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 20px 45px -10px rgba(251,191,36,.8),
    0 0 40px -5px rgba(245,158,11,.7),
    0 0 0 1px rgba(255,220,80,.4) !important;
}

/* Nút xanh green */
.btn-green{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.3) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 8px 24px -8px rgba(16,185,129,.6),
    0 0 0 1px rgba(50,220,150,.2) !important;
}
.btn-green:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.4) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 20px 45px -10px rgba(16,185,129,.8),
    0 0 40px -5px rgba(6,182,212,.6),
    0 0 0 1px rgba(50,220,150,.3) !important;
}

/* Nút đỏ */
.btn-red:hover{
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.3) inset,
    0 -2px 0 0 rgba(0,0,0,.2) inset,
    0 20px 45px -10px rgba(239,68,68,.7),
    0 0 40px -5px rgba(220,38,38,.6),
    0 0 0 1px rgba(255,100,100,.3) !important;
}

/* ============================================================
   🎴 CARD 3D HOLOGRAPHIC — Thẻ nổi với viền sáng chuyển động
   ============================================================ */
.card, .card-clone, .stat-card, .stat-box{
  position: relative !important;
  transform-style: preserve-3d;
  transition:
    transform .6s var(--ease-out-expo),
    box-shadow .6s var(--ease-out-expo),
    border-color .4s ease !important;
  will-change: transform;
  backface-visibility: hidden;
}

.card::before, .card-clone::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(255,255,255,.1) 50%,
    transparent 70%);
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity .5s ease, background-position 1.2s ease;
  pointer-events: none !important;
  z-index: 3 !important;
  mix-blend-mode: overlay;
}

.card:hover::before, .card-clone:hover::before{
  opacity: 1;
  background-position: -200% -200%;
}

.card:hover, .card-clone:hover{
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow:
    0 40px 80px -25px rgba(139,92,246,.6),
    0 0 0 1px rgba(139,92,246,.4),
    0 0 60px -15px rgba(6,182,212,.4),
    0 0 100px -30px rgba(236,72,153,.2) !important;
  border-color: rgba(139,92,246,.6) !important;
}

.card:hover .prod-img img{
  transform: scale(1.12) rotate(.8deg) !important;
  filter: brightness(1.1) saturate(1.15);
}

/* ============================================================
   🎨 INPUT FIELDS — Ô nhập liệu phát sáng khi focus
   ============================================================ */
.inp{
  transition:
    border-color .4s var(--ease-out-expo),
    box-shadow .4s var(--ease-out-expo),
    background-color .3s ease,
    transform .2s ease !important;
  background: rgba(8,11,20,.85) !important;
  caret-color: #c084fc;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.03) inset,
    0 0 0 1px rgba(139,92,246,.08) !important;
}

.inp:hover{
  border-color: rgba(139,92,246,.4) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.05) inset,
    0 0 0 1px rgba(139,92,246,.15) !important;
}

.inp:focus{
  border-color: #8b5cf6 !important;
  background: rgba(15,20,36,.98) !important;
  box-shadow:
    0 0 0 4px rgba(139,92,246,.2),
    0 0 0 1px #8b5cf6,
    0 0 30px -5px rgba(139,92,246,.5) !important;
  transform: translateY(-1px);
}

.inp::placeholder{
  color: #4b5563 !important;
  transition: color .3s ease, transform .3s ease;
}
.inp:focus::placeholder{
  color: #6b7280 !important;
  transform: translateX(3px);
}

/* ============================================================
   💬 TOAST PREMIUM — Thông báo trượt với hiệu ứng kính
   ============================================================ */
.toast{
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    0 30px 70px -15px rgba(0,0,0,.85),
    0 0 50px -10px rgba(139,92,246,.5),
    0 1px 0 0 rgba(255,255,255,.2) inset,
    0 -1px 0 0 rgba(0,0,0,.3) inset !important;
  padding: 16px 20px 18px 20px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  animation: toastSlideIn .5s var(--ease-spring) !important;
}

@keyframes toastSlideIn{
  from{
    transform: translateX(120%) scale(.9);
    opacity: 0;
  }
  to{
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.toast::before{
  content: "" !important;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.3),
    rgba(255,255,255,.95)) !important;
  background-size: 200% 100% !important;
  transform-origin: left;
  animation:
    hydraToastBar 3.2s linear forwards,
    toastShimmer 1.5s linear infinite !important;
}

@keyframes toastShimmer{
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

@keyframes hydraToastBar{
  from { transform: scaleX(1) }
  to { transform: scaleX(0) }
}

.toast i{
  display: inline-block !important;
  margin-right: 10px !important;
  animation: hydraToastIcon .7s var(--ease-spring) !important;
  filter: drop-shadow(0 0 8px currentColor);
}

@keyframes hydraToastIcon{
  0%{ transform: scale(0) rotate(-180deg); opacity: 0 }
  60%{ transform: scale(1.4) rotate(15deg); opacity: 1 }
  100%{ transform: scale(1) rotate(0) }
}

/* ============================================================
   🎯 SIDEBAR MENU — Menu phát sáng khi active
   ============================================================ */
.menu{
  position: relative;
  transition: all .4s var(--ease-out-expo) !important;
  overflow: hidden;
}

.menu::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 0;
  background: var(--grad-primary);
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%);
  transition: height .4s var(--ease-out-expo);
  box-shadow: 0 0 15px rgba(139,92,246,.9);
}

.menu.active::before{
  height: 70%;
  box-shadow:
    0 0 20px rgba(139,92,246,1),
    0 0 40px rgba(139,92,246,.5);
}

.menu.active{
  background: linear-gradient(135deg,
    rgba(139,92,246,.3),
    rgba(6,182,212,.15)) !important;
  box-shadow:
    0 0 30px -5px rgba(139,92,246,.4),
    0 1px 0 0 rgba(255,255,255,.05) inset !important;
}

.menu:hover{
  background: rgba(139,92,246,.12) !important;
  transform: translateX(4px);
}

.menu:hover i,
.menu.active i{
  transform: scale(1.15);
  transition: transform .4s var(--ease-spring);
  filter: drop-shadow(0 0 10px rgba(192,132,252,.9));
}

/* ============================================================
   📱 BOTTOM NAV — Thanh điều hướng mobile đẹp hơn
   ============================================================ */
.bnav{
  box-shadow:
    0 30px 60px -15px rgba(0,0,0,.95),
    0 0 0 1px rgba(139,92,246,.2),
    0 0 40px -10px rgba(139,92,246,.3) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
}

.bnav a{
  transition: color .4s ease, transform .4s var(--ease-spring) !important;
  position: relative;
}

.bnav a.on::after{
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%; transform: translateX(-50%);
  width: 24px; height: 4px;
  background: var(--grad-primary);
  border-radius: 4px;
  box-shadow:
    0 0 15px rgba(139,92,246,1),
    0 0 30px rgba(139,92,246,.6);
  animation: navPulse 2.5s ease-in-out infinite;
}

@keyframes navPulse{
  0%,100%{ opacity: .7; transform: translateX(-50%) scaleX(1) }
  50%{ opacity: 1; transform: translateX(-50%) scaleX(1.5) }
}

.bnav a.on i{
  filter: drop-shadow(0 0 12px rgba(192,132,252,1));
  transform: scale(1.2) translateY(-3px);
}

/* ============================================================
   🖼️ SCROLLBAR — Thanh cuộn gradient
   ============================================================ */
::-webkit-scrollbar{
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track{
  background: rgba(15,20,36,.6) !important;
  border-radius: 5px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset;
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #8b5cf6, #06b6d4) !important;
  border-radius: 5px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 15px rgba(139,92,246,.6),
    0 1px 0 0 rgba(255,255,255,.2) inset !important;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #c084fc, #22d3ee) !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 25px rgba(192,132,252,.9) !important;
}

/* ============================================================
   ⚡ SPINNER — Vòng xoay phát sáng
   ============================================================ */
.sp{
  filter:
    drop-shadow(0 0 25px rgba(139,92,246,.8))
    drop-shadow(0 0 50px rgba(139,92,246,.4));
  animation: spinPulse 2s ease-in-out infinite;
}
@keyframes spinPulse{
  0%,100%{ filter: drop-shadow(0 0 25px rgba(139,92,246,.8)) drop-shadow(0 0 50px rgba(139,92,246,.4)) }
  50%{ filter: drop-shadow(0 0 35px rgba(6,182,212,.9)) drop-shadow(0 0 70px rgba(6,182,212,.5)) }
}

/* ============================================================
   ✍️ TEXT GRADIENT — Chữ gradient chuyển động
   ============================================================ */
.tg{
  background: linear-gradient(90deg,
    #c084fc,
    #60a5fa,
    #22d3ee,
    #ec4899,
    #fbbf24,
    #c084fc) !important;
  background-size: 400% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: hydraTextFlow 8s linear infinite !important;
  filter:
    drop-shadow(0 0 15px rgba(139,92,246,.4))
    drop-shadow(0 0 30px rgba(139,92,246,.2)) !important;
}
@keyframes hydraTextFlow{
  0%{ background-position: 0% 50% }
  100%{ background-position: 400% 50% }
}

/* ============================================================
   🪟 MODAL — Cửa sổ bật lên với hiệu ứng kính
   ============================================================ */
#modal{
  backdrop-filter: blur(25px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
  background: rgba(0,0,0,.85) !important;
  animation: modalFadeIn .3s ease !important;
}
@keyframes modalFadeIn{
  from{ opacity: 0 }
  to{ opacity: 1 }
}

.mbox{
  box-shadow:
    0 50px 120px -25px rgba(0,0,0,.9),
    0 0 0 1px rgba(139,92,246,.4),
    0 0 80px -15px rgba(139,92,246,.5),
    0 0 150px -30px rgba(6,182,212,.3) !important;
  border-color: rgba(139,92,246,.5) !important;
  animation: modalPop .5s var(--ease-spring) !important;
  position: relative;
  overflow: hidden;
}

@keyframes modalPop{
  0%{
    transform: translateY(60px) scale(.85);
    opacity: 0;
  }
  60%{
    transform: translateY(-8px) scale(1.02);
    opacity: 1;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.mbox::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(139,92,246,.8),
    rgba(6,182,212,.8),
    transparent);
  animation: modalBorderShine 3s linear infinite;
}

@keyframes modalBorderShine{
  0% { transform: translateX(-100%) }
  100% { transform: translateX(100%) }
}

/* ============================================================
   🎯 FOCUS STATES — Trạng thái focus đẹp
   ============================================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible{
  outline: 3px solid rgba(192,132,252,.85);
  outline-offset: 3px;
  border-radius: inherit;
  box-shadow: 0 0 30px rgba(192,132,252,.5);
}

/* ============================================================
   ✨ TEXT SELECTION — Bôi đen gradient
   ============================================================ */
::selection{
  background: linear-gradient(135deg, rgba(139,92,246,.6), rgba(6,182,212,.6));
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.5);
}
::-moz-selection{
  background: rgba(139,92,246,.6);
  color: #fff;
}

/* ============================================================
   🖼️ IMAGES — Ảnh đẹp hơn
   ============================================================ */
img{
  -webkit-user-drag: none;
  user-drag: none;
  image-rendering: -webkit-optimize-contrast;
  transition: filter .4s ease, transform .4s ease;
}

/* ============================================================
   📊 STAT CARD — Thẻ thống kê phát sáng
   ============================================================ */
.stat-card{
  position: relative;
  overflow: hidden;
}

.stat-card::after{
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
    rgba(139,92,246,.15) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.stat-card:hover::after{
  opacity: 1;
  animation: statGlow 3s ease-in-out infinite;
}

@keyframes statGlow{
  0%,100%{ transform: translate(0,0) }
  50%{ transform: translate(-30px,30px) }
}

/* ============================================================
   🌟 PRODUCT IMAGE — Ảnh sản phẩm lung linh
   ============================================================ */
.prod-img{
  position: relative;
  overflow: hidden;
}

.prod-img::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255,255,255,.15) 50%,
    transparent 60%);
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.card:hover .prod-img::after{
  opacity: 1;
  animation: imageShine 1s ease-out;
}

@keyframes imageShine{
  0% { background-position: 200% 200% }
  100% { background-position: -200% -200% }
}

/* ============================================================
   💰 PRICE TAG — Giá tiền phát sáng
   ============================================================ */
.prod-price,
.prod-detail-price{
  text-shadow:
    0 0 10px rgba(16,185,129,.5),
    0 0 20px rgba(16,185,129,.3) !important;
  transition: text-shadow .4s ease;
}

.card:hover .prod-price,
.prod-detail-price{
  text-shadow:
    0 0 15px rgba(16,185,129,.8),
    0 0 30px rgba(16,185,129,.5),
    0 0 45px rgba(16,185,129,.3) !important;
}

/* ============================================================
   🎯 BADGES — Nhãn nổi bật hơn
   ============================================================ */
.badge{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .3s var(--ease-spring), box-shadow .3s ease;
}

.card:hover .badge{
  transform: scale(1.1);
}

.badge-hot{
  box-shadow:
    0 6px 20px rgba(239,68,68,.7),
    0 0 30px rgba(239,68,68,.4) !important;
  animation: badgePulse 2s ease-in-out infinite;
}
.badge-new{
  box-shadow:
    0 6px 20px rgba(16,185,129,.7),
    0 0 30px rgba(16,185,129,.4) !important;
}
.badge-sale{
  box-shadow:
    0 6px 20px rgba(139,92,246,.7),
    0 0 30px rgba(139,92,246,.4) !important;
  animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse{
  0%,100%{ transform: scale(1) }
  50%{ transform: scale(1.05) }
}

/* ============================================================
   🎨 CHIPS — Nhãn nhỏ đẹp hơn
   ============================================================ */
.chip{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s var(--ease-spring), box-shadow .3s ease;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139,92,246,.3);
}

/* ============================================================
   🌈 BACKGROUND AURORA — Nền động cho toàn trang
   ============================================================ */
body::after{
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139,92,246,.12), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(6,182,212,.10), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(236,72,153,.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: auroraMove 20s ease-in-out infinite;
  opacity: .8;
}

@keyframes auroraMove{
  0%,100%{
    transform: translate(0,0) rotate(0deg) scale(1);
    filter: hue-rotate(0deg);
  }
  33%{
    transform: translate(30px,-30px) rotate(2deg) scale(1.05);
    filter: hue-rotate(15deg);
  }
  66%{
    transform: translate(-30px,30px) rotate(-2deg) scale(1.08);
    filter: hue-rotate(-15deg);
  }
}

/* ============================================================
   🎬 REDUCED MOTION — Tôn trọng cài đặt người dùng
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover{
    transform: none !important;
  }
  .glass::before,
  .mbox::before,
  body::after{
    animation: none !important;
  }
}

/* ============================================================
   📱 MOBILE OPTIMIZATIONS
   ============================================================ */
@media (max-width: 768px){
  .glass{
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  }
  .toast{
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .btn:hover{
    transform: translateY(-2px) scale(1.01) !important;
  }
  .card:hover{
    transform: translateY(-4px) !important;
  }
  /* Giảm hiệu ứng nặng trên mobile */
  .glass::before{
    animation-duration: 12s !important;
  }
}

/* ============================================================
   🎯 HIỆU ỨNG RIÊNG CHO TỪNG TRANG
   ============================================================ */

/* Sidebar logo — phát sáng liên tục */
.sidebar .tg{
  animation:
    hydraTextFlow 8s linear infinite,
    sidebarLogoGlow 4s ease-in-out infinite !important;
}
@keyframes sidebarLogoGlow{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(139,92,246,.4)) }
  50%{ filter: drop-shadow(0 0 20px rgba(139,92,246,.8)) drop-shadow(0 0 40px rgba(6,182,212,.4)) }
}

/* Số dư ví — nhấp nháy nhẹ */
.glass [style*="color:#10b981"]{
  text-shadow: 0 0 15px rgba(16,185,129,.4);
}

/* Step box trong hướng dẫn */
.step-box{
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.step-box:hover{
  transform: translateX(4px);
  background: rgba(139,92,246,.1);
  box-shadow: 0 4px 15px rgba(139,92,246,.2);
}

/* Opt item (chọn gói) */
.opt-item{
  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s var(--ease-spring),
    box-shadow .3s ease !important;
}
.opt-item:hover{
  transform: translateX(3px);
}
.opt-item.active{
  animation: optActive 1.5s ease-in-out infinite;
}
@keyframes optActive{
  0%,100%{ box-shadow: 0 0 20px rgba(139,92,246,.3) }
  50%{ box-shadow: 0 0 35px rgba(139,92,246,.6), 0 0 60px rgba(6,182,212,.3) }
}

/* Info row hover */
.info-row{
  transition: background .3s ease;
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
}
.info-row:hover{
  background: rgba(139,92,246,.06);
}

/* Contact admin box */
.contact-admin-box{
  transition:
    transform .3s var(--ease-spring),
    box-shadow .3s ease,
    border-color .3s ease !important;
}
.contact-admin-box:hover{
  transform: translateX(6px) scale(1.01) !important;
  box-shadow: 0 10px 30px -5px rgba(139,92,246,.4);
}

/* ============================================================
   🌟 HIỆU ỨNG ĐẶC BIỆT — Loading shimmer toàn trang
   ============================================================ */
@keyframes globalShimmer{
  0%{ background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}

/* ============================================================
   🎨 ĐỔI MÀU ĐỒNG BỘ — Aurora theme colors
   ============================================================ */
:root{
  --aurora-1: #8b5cf6;
  --aurora-2: #06b6d4;
  --aurora-3: #ec4899;
  --aurora-4: #fbbf24;
  --aurora-5: #10b981;
}

/* Thanh tiến trình animated */
.progress-bar{
  position: relative;
  overflow: hidden;
}
.progress-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent);
  animation: progressShimmer 2s linear infinite;
}
@keyframes progressShimmer{
  0%{ transform: translateX(-100%) }
  100%{ transform: translateX(100%) }
}

/* ============================================================
   🎯 XONG — Version 3.0
   ============================================================ */