/* ============================================
   HYDRASTORE — COMBO FULL EFFECTS v1.0
   An toàn: chỉ override CSS, không sửa HTML
   ============================================ */

/* ===== FX 1: AURORA BACKGROUND ===== */
body::before{
  background:
    radial-gradient(circle at 15% 10%, rgba(139,92,246,.30), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(6,182,212,.25), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(236,72,153,.12), transparent 60%) !important;
  animation: hydraAurora 12s ease-in-out infinite alternate !important;
}
@keyframes hydraAurora{
  0%{opacity:.85;transform:scale(1) rotate(0deg);filter:hue-rotate(0deg)}
  50%{opacity:1;transform:scale(1.08) rotate(2deg);filter:hue-rotate(20deg)}
  100%{opacity:.95;transform:scale(1.12) rotate(-2deg);filter:hue-rotate(-15deg)}
}

/* ===== FX 4: TEXT GRADIENT ANIMATION ===== */
.tg{
  background: linear-gradient(90deg,#c084fc,#60a5fa,#22d3ee,#ec4899,#c084fc) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: hydraTextFlow 6s linear infinite !important;
  filter: drop-shadow(0 0 12px rgba(139,92,246,.35)) !important;
}
@keyframes hydraTextFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* ===== FX 5: GLOW VIỀN ĐỘNG ===== */
.glass,.card,.card-clone,.stat-card{
  position: relative !important;
}
.glass::after,.card::after,.card-clone::after{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:inherit !important;
  padding:1px !important;
  background: conic-gradient(from var(--hydra-angle,0deg),
    transparent 0deg,
    rgba(139,92,246,.6) 60deg,
    rgba(6,182,212,.6) 120deg,
    transparent 180deg,
    rgba(236,72,153,.5) 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: .8 !important;
  animation: hydraSpin 6s linear infinite !important;
  z-index: 1 !important;
}
@keyframes hydraSpin{ to{ --hydra-angle: 360deg } }
@property --hydra-angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* Fallback nếu @property không hỗ trợ */
@supports not (background: conic-gradient(from var(--x), red, blue)){
  .glass::after,.card::after,.card-clone::after{ display:none !important }
}

/* ===== FX 6: HẠT BAY LƠ LỬNG (CSS-only dots) ===== */
.hydra-particle{
  position: fixed;
  width: 3px;height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle,rgba(192,132,252,.9),rgba(192,132,252,0));
  box-shadow: 0 0 8px rgba(139,92,246,.7);
  animation: hydraFloat linear infinite;
  opacity: 0;
}
@keyframes hydraFloat{
  0%{ transform: translateY(0) scale(.4); opacity: 0 }
  15%{ opacity: .9 }
  85%{ opacity: .9 }
  100%{ transform: translateY(-110vh) scale(1.2); opacity: 0 }
}

/* ===== FX 7: ICON MICRO-ANIMATION ===== */
.menu:hover i,
.bnav a:hover i,
.tb-btn:hover i{
  animation: hydraIconPop .5s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes hydraIconPop{
  0%{ transform: scale(1) rotate(0) }
  40%{ transform: scale(1.35) rotate(-12deg) }
  70%{ transform: scale(.92) rotate(6deg) }
  100%{ transform: scale(1) rotate(0) }
}

/* Nút hover icon bay nhẹ */
.btn i{ transition: transform .3s ease }
.btn:hover i{ transform: translateX(2px) scale(1.1) }

/* ===== FX 9: TOAST NÂNG CẤP ===== */
.toast{
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 20px 45px -10px rgba(0,0,0,.7),
              0 0 30px rgba(139,92,246,.25) !important;
  padding: 14px 18px 16px 18px !important;
}
.toast::before{
  content:"" !important;
  position:absolute; left:0; right:0; bottom:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.2)) !important;
  transform-origin: left;
  animation: hydraToastBar 3.2s linear forwards !important;
}
@keyframes hydraToastBar{
  from{ transform: scaleX(1) }
  to{ transform: scaleX(0) }
}
.toast i{
  display: inline-block !important;
  margin-right: 6px !important;
  animation: hydraToastIcon .6s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes hydraToastIcon{
  0%{ transform: scale(0) rotate(-90deg) }
  60%{ transform: scale(1.3) rotate(10deg) }
  100%{ transform: scale(1) rotate(0) }
}

/* ===== FX 10: BUTTON MORPH ===== */
.btn{
  position: relative !important;
  overflow: hidden !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease,
              border-radius .3s ease !important;
}
.btn:hover{
  border-radius: 18px 12px 18px 12px !important;
}
.btn:active{
  border-radius: 22px !important;
  transform: scale(.96) !important;
}

/* ===== FX 3: RIPPLE (JS bơm vào) ===== */
.hydra-ripple{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0));
  pointer-events: none;
  animation: hydraRippleAnim .7s ease-out forwards;
  z-index: 2;
}
@keyframes hydraRippleAnim{
  to{ transform: scale(4); opacity: 0 }
}

/* ===== FX 8: SKELETON LOADING ===== */
.hydra-skeleton{
  background: linear-gradient(90deg,
    rgba(30,41,59,.35) 25%,
    rgba(51,65,85,.7) 50%,
    rgba(30,41,59,.35) 75%) !important;
  background-size: 200% 100% !important;
  animation: hydraSkelShine 1.5s infinite !important;
  border-radius: 14px !important;
  min-height: 20px !important;
}
@keyframes hydraSkelShine{
  0%{ background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}

/* ===== FX 2 (bonus): CARD 3D TILT — chỉ desktop ===== */
@media (hover:hover) and (pointer:fine){
  .card,.card-clone{
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1),
                box-shadow .35s ease !important;
    will-change: transform;
  }
}

/* ===== TINH CHỈNH: nút đẹp hơn ===== */
.btn{
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.btn:hover{
  box-shadow: 0 15px 35px -8px rgba(139,92,246,.75),
              0 0 25px rgba(6,182,212,.4) !important;
}

/* Sidebar menu active đẹp hơn */
.menu.active{
  text-shadow: 0 0 12px rgba(192,132,252,.6) !important;
}

/* Stat card viền sáng hơn */
.stat-card:hover{
  box-shadow: 0 20px 45px -15px rgba(139,92,246,.5),
              0 0 30px rgba(6,182,212,.25) !important;
}

/* Scrollbar đẹp hơn */
::-webkit-scrollbar{ width: 8px !important; height: 8px !important }
::-webkit-scrollbar-track{ background: rgba(15,20,36,.5) !important }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#8b5cf6,#06b6d4) !important;
  border-radius: 4px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#c084fc,#22d3ee) !important;
  background-clip: padding-box !important;
}

/* Giảm hiệu ứng nếu user muốn (accessibility) */
@media (prefers-reduced-motion: reduce){
  .hydra-particle{ display: none !important }
  .glass::after,.card::after,.card-clone::after{ display: none !important }
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important }
}