/* mau.css – Version 2: Ultra Neon 3D + Glow + RGB Border + Inner Pulse
   Cực đẹp – hiệu ứng mạnh hơn bản trước
*/

:root{
  --btn-radius: 14px;
  --btn-padding: 17px 26px;
  --rgb-speed: 3.5s;
  --pulse-speed: 2.2s;
}
/* ============================
   HIỆU ỨNG CHỮ NEON + FLOAT + SHAKE
   ============================ */

.Daubuoitaoss {
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ffffff;
    position: relative;
    overflow: hidden;

    /* Neon Glow */
    text-shadow:
        0 0 10px #00eaff,
        0 0 20px #00eaff,
        0 0 35px #00eaff,
        0 0 50px #00eaff;

    /* Floating + Shake */
    animation: floating 3.5s ease-in-out infinite,
               shake 6s ease-in-out infinite;
}

/* Ánh sáng chạy ngang */
.Daubuoitaoss::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.7) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: shineMove 3s infinite;
}

/* Shine Animation */
@keyframes shineMove {
    0%   { left: -120%; }
    70%  { left: 120%; }
    100% { left: 120%; }
}

/* Floating (nổi lên xuống) */
@keyframes floating {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Shake nhẹ (rung như có năng lượng) */
@keyframes shake {
    0%   { transform: translateX(0px) rotate(0deg); }
    25%  { transform: translateX(-2px) rotate(-0.5deg); }
    50%  { transform: translateX(2px) rotate(0.5deg); }
    75%  { transform: translateX(-1px) rotate(-0.3deg); }
    100% { transform: translateX(0px) rotate(0deg); }
}

.neon-btn{
  position: relative;
  display: inline-block;
  padding: var(--btn-padding);
  margin: 10px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  border-radius: var(--btn-radius);
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: 0.28s ease;

  /* 3D + Glow mạnh hơn */
  box-shadow:
    0 0 15px rgba(255,255,255,0.2),
    0 0 35px rgba(0,200,255,0.45),
    inset 0 0 18px rgba(255,255,255,0.1);
}

/* Màu nền từng nút */
.neon-btn.facebook{ background: linear-gradient(139deg,#4a60ff 40%, #00e5ff 100%);} 
.neon-btn.youtube { background: linear-gradient(139deg,#ff3232 40%, #ff8585 100%);} 
.neon-btn.discord { background: linear-gradient(139deg,#7289da 40%, #bb86ff 100%);} 

/* RGB viền ngoài */
.neon-btn::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background:linear-gradient(120deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size:400%;
  z-index:-1;
  filter:blur(8px);
  animation:rgbBorder var(--rgb-speed) linear infinite;
}
@keyframes rgbBorder{ 0%{background-position:0%} 100%{background-position:400%} }

/* Lớp sáng chuyển động */
.neon-btn .shine{
  position:absolute;
  top:0;
  left:-160%;
  width:65%;
  height:100%;
  background:rgba(255,255,255,0.25);
  transform:skewX(-25deg);
  transition:left .6s ease;
}
.neon-btn:hover .shine{ left:160%; }

/* Hiệu ứng rung nhẹ neon */
.neon-btn{ animation:btnPulse var(--pulse-speed) ease-in-out infinite; }
@keyframes btnPulse{
  0%{ transform:scale(1); box-shadow:0 0 20px rgba(0,200,255,0.25);} 
  50%{ transform:scale(1.035); box-shadow:0 0 35px rgba(255,0,160,0.35);} 
  100%{ transform:scale(1); box-shadow:0 0 20px rgba(0,200,255,0.25);} 
}

/* Hover: nổi mạnh + nghiêng 3D nhẹ */
.neon-btn:hover{
  transform:translateY(-6px) scale(1.08) rotateX(6deg);
  box-shadow:
    0 0 25px rgba(255,255,255,0.35),
    0 0 55px rgba(0,220,255,0.55),
    inset 0 0 22px rgba(255,255,255,0.2);
}

/* Ripple */
.neon-btn:active::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:230px;
  height:230px;
  background:rgba(255,255,255,0.32);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  animation:ripple .55s ease-out;
}
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(4.2); opacity:0; } }

/* Giật theo nhịp ánh sáng neon mạnh hơn */
.neon-btn:hover{
  animation:neonShock .8s infinite ease-in-out;
}
@keyframes neonShock{
  0%{ transform:scale(1.03); }
  30%{ transform:scale(1.09) translateX(-2px); }
  60%{ transform:scale(0.97) translateY(2px); }
  100%{ transform:scale(1.03); }
}

/* Full width */
.neon-btn.block{ display:block; width:100%; }

/* ==========================
   Hiệu ứng NÚT NỔI (POP EFFECT)
   ========================== */

/* Khi rê chuột vào → nút phồng lên kiểu đàn hồi */
.neon-btn.pop:hover{
  transform: translateY(-6px) scale(1.15) !important;
  animation: popBounce 0.35s ease-out;
}

@keyframes popBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1.15); }
}

/* Khi click → nút thụt xuống rồi bật lên */
.neon-btn.pop:active{
  transform: scale(0.9) !important;
  transition: 0.1s;
}


/* ==========================
   Hiệu ứng NỔI LƠ LỬNG (FLOATING)
   ========================== */

/* Tự động nổi lên – trôi nhẹ lên xuống */
.neon-btn.floating{
  animation: floatingMove 3.5s ease-in-out infinite;
}

@keyframes floatingMove {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Kết hợp với pop + neon RGB vẫn hoạt động bình thường */


/* ==========================
   Hiệu ứng FLOATING RANDOM (Lơ lửng ngẫu nhiên)
   ========================== */

/* Chuyển động random: lên – xuống – trái – phải nhẹ */
.neon-btn.floating-random{
  animation: floatingRandom 4s ease-in-out infinite;
}

@keyframes floatingRandom {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-6px, -8px); }
  50%  { transform: translate(5px, -3px); }
  75%  { transform: translate(-4px, 6px); }
  100% { transform: translate(0,0); }
}

/* Nếu muốn hiệu ứng mạnh hơn, chỉ cần tăng px */



/* ==========================
   Hiệu ứng FLOATING RANDOM (Lơ lửng ngẫu nhiên)
   ========================== */

/* Chuyển động random: lên – xuống – trái – phải nhẹ */
.neon-btn.floating-random{
  animation: floatingRandom 4s ease-in-out infinite;
}

@keyframes floatingRandom {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-6px, -8px); }
  50%  { transform: translate(5px, -3px); }
  75%  { transform: translate(-4px, 6px); }
  100% { transform: translate(0,0); }
}

/* Nếu muốn hiệu ứng mạnh hơn, chỉ cần tăng px */