body{
      margin:0;
      font-family:'Poppins',sans-serif;
      background: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
      color:#fff;
    
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:flex-start;
     
    }
    
    .container{
      width:95%;
      max-width:1200px;
      background:#111827;
      border-radius:20px;
      padding:40px;
      box-shadow:0 0 50px rgba(0,0,0,0.6);
      margin-top:10px;
    }
    h1{
      margin:0;
      font-size:28px;
      background:linear-gradient(90deg,#00f5ff,#9d4edd);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .total{
      margin:10px 0 20px;
      font-size:16px;
      color:#aaa;
    }
    
    /* AUTH */
    .auth-box{
      margin-bottom:20px;
    }
    .auth-box a{
      color:#00f5ff;
      text-decoration:none;
      margin-right:15px;
      font-weight:600;
    }
    .user-info{
      margin-bottom:15px;
      padding:10px;
      background:#1f2937;
      border-radius:10px;
    }
    
    /* GLOW */
    .glow-name{
      color:#fff;
      font-weight:700;
      text-shadow:
        0 0 5px #00f5ff,
        0 0 10px #00f5ff,
        0 0 20px #9d4edd,
        0 0 30px #9d4edd;
      animation: glow 1.5s infinite alternate;
    }
    @keyframes glow{
      from { text-shadow:0 0 5px #00f5ff; }
      to   { text-shadow:0 0 25px #9d4edd; }
    }
    
    /* DONATE BOX */
    .label{ margin-bottom:8px; margin-top:8px; font-weight:600; display:block; }
    .input-group{
        position:relative;
        margin-bottom:20px;
        }

    
    input,textarea{
      width:100%;
      padding:14px;
      border-radius:10px;
      border:1px solid #1f2a44;
      background:#0b1626;
      color:#fff;
      font-size:15px;
      outline:none;
      box-sizing:border-box;
    }
    
    .quick-amount{
      position:absolute;
      right:8px;
      top:8px;
      display:flex;
      gap:8px;
    }
    .quick-amount button{
      background:#1f2a44;
      border:none;
      padding:6px 10px;
      border-radius:8px;
      color:#fff;
      cursor:pointer;
      font-size:13px;
    }
    .quick-amount button:hover{ background:#2d3b5f; }
    
    textarea{ resize:none; height:130px; }
    
    .char-count{
      position:absolute;
      right:40px;
      bottom:10px;
      font-size:12px;
      color:#6b7a99;
    }
    
    .emoji-btn{
      position:absolute;
      right:12px;
      bottom:12px;
      cursor:pointer;
      font-size:18px;
    }
    .emoji-picker{
      position:absolute;
      bottom:45px;
      right:10px;
      background:#1f2a44;
      padding:10px;
      border-radius:10px;
      display:none;
      max-width:200px;
    }
    .emoji-picker span{
      cursor:pointer;
      font-size:20px;
      margin:5px;
    }
    
    button.main-btn{
      width:100%;
      padding:14px;
      border:none;
      border-radius:12px;
      font-weight:600;
      font-size:16px;
      background:linear-gradient(90deg,#00f5ff,#9d4edd);
      color:#000;
      cursor:pointer;
    }
    button.main-btn:hover{ opacity:0.9; }
    
    /* HISTORY */
    .history{
      margin-top:30px;
      font-size:14px;
      color:#ccc;
     
    }
    .history div{ margin-bottom:8px; }
    .tab-btn{
      padding:6px 14px;
      border:none;
      border-radius:10px;
      background:#1f2937;
      color:#aaa;
      margin-right:8px;
      cursor:pointer;
    }
    
    .tab-btn.active-tab{
      background:#fff;
      color:#000;
      font-weight:600;
    }
    
    .lb-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:10px 0;
      border-bottom:1px solid rgba(255,255,255,0.05);
    }
    
    .lb-left{
      display:flex;
      align-items:center;
      gap:10px;
    }
    
    .lb-rank{
      width:30px;
      text-align:center;
      font-weight:600;
    }
    
    .gold{ color:#facc15; }
    .silver{ color:#cbd5e1; }
    .bronze{ color:#fb923c; }
    
    .avatar{
      width:35px;
      height:35px;
      border-radius:50%;
      background:#2d3748;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:600;
    }
    /* Animation container */
    #leaderboard{
      position:relative;
    }
    
    /* Row animation */
    .lb-row{
      opacity:0;
      transform:translateY(20px);
      animation:slideIn 0.4s ease forwards;
    }
    
    @keyframes slideIn{
      to{
        opacity:1;
        transform:translateY(0);
      }
    }
    
    /* Smooth move effect */
    .lb-row.move{
      transition:all 0.5s ease;
    }
    
    /* Fade refresh */
    .fade-refresh{
      animation:fadeRefresh 0.4s ease;
    }
    
    @keyframes fadeRefresh{
      from{opacity:0.4;}
      to{opacity:1;}
    }
    /* ===== CHIA 2 CỘT ===== */
    .main-layout{
      display:flex;
      gap:40px;
      align-items:flex-start;
    }
    
    .left-col{
      flex:1.6;
    }
    
    .right-col{
      flex:1;
      background:#0f172a;
      padding:25px;
      border-radius:20px;
    }
    
    @media(max-width:1000px){
      .main-layout{
        flex-direction:column;
      }
    }
    @media (max-width:1024px){
      .main-layout{
        flex-direction:column;
      }
    
    .right-col{
        margin-top:30px;
        max-height:none;
      }
    }
    
    @media (max-width:600px){
      .container{
        padding:20px;
      }
    
      h1{
        font-size:22px;
      }
    
      input, textarea{
        font-size:14px;
      }
    
      button.main-btn{
        font-size:14px;
        padding:12px;
      }
    }
    @media (max-width:1024px){
      body{
        align-items:flex-start;
        padding:30px 0;
      }
    }
    /* ===== MENU GÓC PHẢI ===== */
    .top-user-menu{
      display:flex;
      justify-content:flex-end;
      gap:15px;
      margin-bottom:15px;
      font-size:14px;
    }
    
    .top-user-menu a{
      color:#00f5ff;
      text-decoration:none;
      font-weight:600;
    }
    
    .top-user-menu a:hover{
      opacity:0.8;
    }
    /* ===== PROFILE HEADER ===== */
    .profile-header{
      position:relative;
      margin-bottom:60px;
    }
    
    .banner{
      height:250px;
      border-radius:20px;
      background:url('banner.png') center/cover no-repeat;
      background-color:#0f172a;
    }
    
    .profile-info{
      display:flex;
      align-items:flex-end;
      gap:20px;
      position:absolute;
      bottom:-59px;
      left:30px;
    }
    
    .avatar-big{
      position:relative;
      width:110px;
      height:110px;
      border-radius:25px;
      padding:6px;
      background:linear-gradient(135deg,#45edd7,#60a5fa);
      box-shadow:
        0 0 15px rgba(59,130,246,0.6),
        0 0 30px rgba(59,130,246,0.4),
        0 0 60px rgba(59,130,246,0.3);
    }
    
    .avatar-big img{
      width:100%;
      height:100%;
      border-radius:20px;
      object-fit:cover;
      background:#111827;
    }
    
    /* Tick xanh */
    .verified-badge{
      position:absolute;
      bottom:-5px;
      right:-5px;
      width:28px;
      height:28px;
      border-radius:50%;
      background:#2563eb;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:16px;
      font-weight:bold;
      border:3px solid #111827;
      box-shadow:0 0 10px rgba(37,99,235,0.8);
    }
    
    .profile-text h2{
      margin:0;
      font-size:22px;
    }
    
    .profile-text span{
      font-size:14px;
      color:#aaa;
    }
    
    #history {
        word-break: break-word;
    }
    
    .donate-item {
        padding: 5px 0;
        font-size: 14px;
        line-height: 1.4;
    }
    
    .donate-message {
        color: #808080;
    }
    /* select box */
    
    select{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #374151;
    background:#0f172a;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:all 0.25s ease;
    appearance:none;
    cursor:pointer;
    }
    
    /* hover */
    
    select:hover{
    border-color:#00f5ff;
    box-shadow:0 0 8px rgba(0,245,255,0.25);
    }
    
    /* focus */
    
    select:focus{
    border-color:#9d4edd;
    box-shadow:0 0 12px rgba(157,78,221,0.45);
    }
    
    /* dropdown option */
    
    select option{
    background:#111827;
    color:#fff;
    padding:10px;
    }
    
    /* ===== DONATE OPTIONS 2 CỘT ===== */
    .donate-options{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:15px;
      margin-top:10px;
      width:100%;
    }


    
    .donate-option-box{
      width:100%;
      display:flex;
      flex-direction:column;
    }
    
    .donate-option-box select{
        width:100%;
    }
    
    form{
        width:100%;
    }
    
    /* Mobile tự xuống 1 cột */
    @media(max-width:700px){
      .donate-options{
        grid-template-columns:1fr;
      }
    }
    /* ===== AUTH BUTTONS ===== */
    
    .auth-buttons{
      display:flex;
      gap:12px;
      margin-bottom:8px;
    }
    
    /* LOGIN */
    
    .btn-login{
      padding:8px 18px;
      border-radius:12px;
      background:#1f2937;
      color:#fff;
      text-decoration:none;
      font-weight:600;
      font-size:14px;
      transition:all 0.25s ease;
    }
    
    .btn-login:hover{
      background:#374151;
      transform:translateY(-2px);
    }
    
    /* REGISTER */
    
    .btn-register{
      padding:8px 18px;
      border-radius:12px;
      background:#111827;
      color:#00f5ff;
      border:1px solid rgba(0,245,255,0.4);
      text-decoration:none;
      font-weight:600;
      font-size:14px;
      transition:all 0.25s ease;
    }
    
    .btn-register:hover{
      background:#0f172a;
      border-color:#9d4edd;
      color:#9d4edd;
      transform:translateY(-2px);
    }
    /* NOTE */
    
    .auth-note{
      font-size:12px;
      color:#9ca3af;
    }
    
    /* ===== DONATE HISTORY CARD ===== */
    
    .history{
      margin-top:30px;
      padding-right:5px;
    }
    
    .donate-card{
      display:flex;
      gap:12px;
      margin-bottom:18px;
    }
    
    .donate-avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      background:#1f2937;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:16px;
      overflow:hidden;
    }
    
    .donate-content{
      flex:1;
    }
    
    .donate-header{
      display:flex;
      justify-content:space-between;
      font-size:14px;
    }
    
    .donate-name{
    position:relative;
    display:inline-block;
    font-weight:600;
    }
    
    .donate-amount{
      color:#facc15;
      font-weight:600;
    }
    
    .donate-sub{
      font-size:13px;
      color:#9ca3af;
      margin-top:2px;
    }
    
    .donate-bubble{
      margin-top:8px;
      background:#0b1626;
      border:1px solid #1f2a44;
      padding:12px 14px;
      border-radius:14px;
      font-size:14px;
      color:#e5e7eb;
      position: relative;
    }

    /* 👇 đuôi chuẩn, dính liền */
    .donate-bubble::after{
      content: "";
      position: absolute;
    
      top: -6px;
      left: 26px;
    
      width: 10px;
      height: 10px;
    
      background: #0b1626; /* 🔥 phải giống hệt bubble */
      transform: rotate(45deg);
    
      border-left: 1px solid #1f2a44;
      border-top: 1px solid #1f2a44;
    
      border-top-left-radius: 3px;
    }
    
    .donate-time{
      font-size:12px;
      color:#6b7280;
    }
    
    /* ===== MOBILE PERFECT FIX ===== */
    
    @media (max-width:768px){
    
    body{
      display:block;
      padding:15px 0;
    }
    
    /* container giữa màn hình */
    .container{
      width:94%;
      margin:0 auto;
      padding:20px;
    }
    
    /* layout 1 cột */
    .main-layout{
      flex-direction:column;
      gap:25px;
    }
    
    /* bỏ sticky mobile */
    .left-col,
    .right-col{
      position:relative;
      top:auto;
      width:100%;
    }
    
    /* banner thấp lại */
    .banner{
      height:180px;
    }
    
    /* profile chỉnh lại */
    .profile-info{
      position:relative;
      bottom:auto;
      left:auto;
      margin-top:-50px;
      justify-content:center;
      text-align:center;
    }
    
    /* avatar nhỏ hơn */
    .avatar-big{
      width:85px;
      height:85px;
    }
    
    /* quick amount xuống dòng */
    .quick-amount{
      position:static;
      margin-top:10px;
      flex-wrap:wrap;
    }
    
    .quick-amount button{
      flex:1;
      min-width:80px;
    }
    
    /* input full */
    input,
    textarea,
    select{
      width:100%;
      box-sizing:border-box;
    }
    
    /* donate options đẹp */
    .donate-options{
      grid-template-columns:1fr;
    }
    
    /* leaderboard chữ nhỏ */
    .lb-row{
      font-size:13px;
    }
    
    /* history avatar nhỏ */
    .donate-avatar{
      width:36px;
      height:36px;
    }
    
    /* auth button full */
    .auth-buttons{
      flex-direction:column;
    }
    
    .btn-login,
    .btn-register{
      text-align:center;
    }
    
    /* FIX HISTORY TRÀN MOBILE */
    .profile-header{
        margin-bottom:20px;
    }
    
    .right-col{
      width:100%;
      box-sizing:border-box;
    }
    
    .history{
      width:100%;
      max-width:100%;
    }
    
    .donate-card{
      width:100%;
      max-width:100%;
    }
    
    .donate-content{
      flex:1;
      min-width:0;
    }
    
    .donate-bubble{
      word-break:break-word;
      overflow-wrap:break-word;
    }
    }
    
.menu-new{
  position:relative;
  display:inline-block;
}

.icon-new{
  position:absolute;
  top:-9.8px;
  right:-8.5px;
  width:35px;
  height:auto;
  pointer-events:none;
}
.avatar-frame{
position:absolute;
top:-6px;
left:-6px;
width:54px;
height:54px;
pointer-events:none;
}

.donate-avatar{
position:relative;
width:42px;
height:42px;
border-radius:50%;
overflow:visible;
}

.avatar{
position:relative;
width:35px;
height:35px;
border-radius:50%;
background:#2d3748;
overflow:visible;
flex-shrink:0;
}

/* avatar image */
.avatar img{
position:absolute;
top:50%;
left:50%;
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transform:translate(-50%,-50%);
}

/* avatar frame */
.avatar-frame-small{
position:absolute;
top:50%;
left:50%;
width:45px;
height:45px;
pointer-events:none;
transform:translate(-50%,-50%);
}

/* VIP badge */

.vip-badge{
display:inline-block;
position:relative;

top:-6px;      /* chỉnh lên xuống */
left:-5px;      /* chỉnh trái phải */

margin-left:6px;

padding:1px 5px;
font-size:10px;
font-weight:700;

color:#000;
background:linear-gradient(135deg,#FFD700,#F59E0B);

border-radius:6px;

filter:drop-shadow(0 0 4px gold);

box-shadow:
0 0 3px rgba(255,215,0,0.8),
0 0 3px rgba(255,215,0,0.4);

letter-spacing:0.5px;
}

.lb-name{
position:relative;
display:inline-block;
font-weight:600;
}

/* ===== VIP NICKNAME ===== */

.fire{
background:linear-gradient(45deg,#ff0000,#ff9900,#ffff00);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:fireMove 2s linear infinite;
}

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

.rainbow{
background:linear-gradient(
90deg,
red,orange,yellow,green,cyan,blue,violet
);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:rainbowMove 3s linear infinite;
}

@keyframes rainbowMove{
0%{background-position:0%}
100%{background-position:300%}
}

.lightning{
color:#00f5ff;
text-shadow:
0 0 5px #00f5ff,
0 0 10px #00f5ff,
0 0 20px #00f5ff;
animation:lightning 1s infinite;
}

@keyframes lightning{
0%,100%{opacity:1}
50%{opacity:0.4}
}

.gold{
background:linear-gradient(90deg,#ffd700,#fff3a0,#ffd700);
background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:goldShine 2s linear infinite;
}

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


.dragon{
background:linear-gradient(
90deg,
#ff0000,
#ff3300,
#ff9900,
#ffff00
);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:dragonFire 1s linear infinite;
}

@keyframes dragonFire{
0%{background-position:0%}
100%{background-position:300%}
}

.water{
background:linear-gradient(
90deg,
#00d2ff,
#3a7bd5,
#00d2ff
);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:waterWave 2s linear infinite;
}

@keyframes waterWave{
0%{background-position:0%}
100%{background-position:300%}
}
/* ===== NEON CYBER ===== */

.neon{
color:#0ff;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #00ffff;
animation:neonBlink 1.5s infinite alternate;
}

@keyframes neonBlink{
from{opacity:1}
to{opacity:0.6}
}


/* ===== GALAXY ===== */

.galaxy{
background:linear-gradient(
90deg,
#ff00cc,
#3333ff,
#00ffff,
#ff00cc
);
background-size:400%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:galaxyMove 4s linear infinite;
}

@keyframes galaxyMove{
0%{background-position:0%}
100%{background-position:400%}
}


/* ===== ICE ===== */

.ice{
color:#a5f3fc;
text-shadow:
0 0 5px #67e8f9,
0 0 10px #22d3ee,
0 0 20px #06b6d4;
animation:iceGlow 2s infinite alternate;
}

@keyframes iceGlow{
from{opacity:0.8}
to{opacity:1}
}


/* ===== BLOOD ===== */

.blood{
background:linear-gradient(
90deg,
#660000,
#ff0000,
#990000
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:bloodFlow 2s linear infinite;
}

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


/* ===== SHADOW ===== */

.shadow{
color:#aaa;
text-shadow:
2px 2px 0 #000,
4px 4px 10px rgba(0,0,0,0.9);
animation:shadowMove 2s infinite alternate;
}

@keyframes shadowMove{
from{transform:translateX(0)}
to{transform:translateX(2px)}
}


/* ===== MATRIX ===== */

.matrix{
background:linear-gradient(
90deg,
#00ff00,
#003300,
#00ff00
);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:matrixMove 1s linear infinite;
}

@keyframes matrixMove{
0%{background-position:0%}
100%{background-position:300%}
}


/* ===== COSMIC ===== */

.cosmic{
background:linear-gradient(
90deg,
#7c3aed,
#22d3ee,
#f472b6,
#7c3aed
);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:cosmicMove 3s linear infinite;
}

@keyframes cosmicMove{
0%{background-position:0%}
100%{background-position:300%}
}


/* ===== TOXIC ===== */

.toxic{
color:#a3e635;

text-shadow:
0 0 5px #a3e635,
0 0 10px #65a30d,
0 0 20px #4d7c0f;

animation:toxicBlink 1.2s infinite alternate;
}

@keyframes toxicBlink{
from{opacity:1}
to{opacity:0.7}
}


/* ===== PINK POWER ===== */

.pinkpower{
background:linear-gradient(
90deg,
#ff00ff,
#ff66cc,
#ff00ff
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:pinkMove 1.5s linear infinite;
}

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

/* ===== GLITCH ===== */

.glitch{
position:relative;
color:#fff;
animation:glitch 1s infinite;
}

@keyframes glitch{
0%{text-shadow:2px 0 red,-2px 0 cyan}
25%{text-shadow:-2px 0 red,2px 0 cyan}
50%{text-shadow:2px 2px red,-2px -2px cyan}
75%{text-shadow:-2px 2px red,2px -2px cyan}
100%{text-shadow:2px 0 red,-2px 0 cyan}
}


/* ===== STARLIGHT ===== */

.starlight{
color:#fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ffd700,
0 0 30px #ffd700;
animation:starBlink 1.5s infinite alternate;
}

@keyframes starBlink{
from{opacity:0.7}
to{opacity:1}
}


/* ===== LASER ===== */

.laser{
background:linear-gradient(90deg,#ff0000,#ffffff,#ff0000);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:laserMove 1s linear infinite;
}

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


/* ===== SHOCK ===== */

.shock{
color:#fff;
animation:shock 0.3s infinite;
}

@keyframes shock{
0%{transform:translateX(0)}
25%{transform:translateX(-1px)}
50%{transform:translateX(1px)}
75%{transform:translateX(-1px)}
100%{transform:translateX(0)}
}


/* ===== FLAME BLUE ===== */

.blueflame{
background:linear-gradient(90deg,#00ccff,#0066ff,#00ccff);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:blueflameMove 1.2s linear infinite;
}

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


/* ===== SUN ===== */

.sun{
background:linear-gradient(90deg,#ffcc00,#ff6600,#ffcc00);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:sunShine 2s linear infinite;
}

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


/* ===== VOID ===== */

.void{
color:#999;
text-shadow:
0 0 10px #000,
0 0 20px #000,
0 0 40px #000;
animation:voidFade 2s infinite alternate;
}

@keyframes voidFade{
from{opacity:0.6}
to{opacity:1}
}


/* ===== PLASMA ===== */

.plasma{
background:linear-gradient(90deg,#ff00ff,#00ffff,#ff00ff);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:plasmaMove 1.5s linear infinite;
}

@keyframes plasmaMove{
0%{background-position:0%}
100%{background-position:300%}
}


/* ===== HACKER ===== */

.hacker{
color:#00ff00;
text-shadow:
0 0 5px #00ff00,
0 0 10px #00ff00,
0 0 20px #003300;
animation:hackerBlink 1s infinite alternate;
}

@keyframes hackerBlink{
from{opacity:0.6}
to{opacity:1}
}


/* ===== DIAMOND ===== */

.diamond{
background:linear-gradient(90deg,#a5f3fc,#ffffff,#a5f3fc);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:diamondShine 2s linear infinite;
}

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


/* ===== GHOST ===== */

.ghost{
color:#ddd;
opacity:0.8;
animation:ghostMove 2s infinite alternate;
}

@keyframes ghostMove{
from{transform:translateY(0)}
to{transform:translateY(-2px)}
}


/* ===== METAL ===== */

.metal{
background:linear-gradient(90deg,#bbb,#fff,#bbb);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:metalMove 2s linear infinite;
}

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


/* ===== ENERGY ===== */

.energy{
color:#ff00ff;
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff;
animation:energyPulse 1s infinite alternate;
}

@keyframes energyPulse{
from{opacity:0.7}
to{opacity:1}
}


/* ===== ROYAL ===== */

.royal{
background:linear-gradient(90deg,#ffd700,#ff00ff,#ffd700);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:royalMove 2s linear infinite;
}

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


/* ===== FROST ===== */

.frost{
color:#e0f2fe;
text-shadow:
0 0 5px #bae6fd,
0 0 10px #7dd3fc,
0 0 20px #38bdf8;
animation:frostBlink 1.5s infinite alternate;
}

@keyframes frostBlink{
from{opacity:0.7}
to{opacity:1}
}


/* ===== INFERNO ===== */

.inferno{
background:linear-gradient(90deg,#ff0000,#ff9900,#ff0000);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:infernoMove 1s linear infinite;
}

@keyframes infernoMove{
0%{background-position:0%}
100%{background-position:300%}
}


/* ===== AURA ===== */

.aura{
color:#fff;
text-shadow:
0 0 10px #00ffff,
0 0 20px #ff00ff;
animation:auraPulse 2s infinite alternate;
}

@keyframes auraPulse{
from{opacity:0.8}
to{opacity:1}
}


/* ===== WAVE ===== */

.wave{
background:linear-gradient(90deg,#00ffff,#0066ff,#00ffff);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:waveMove 1.5s linear infinite;
}

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


/* ===== VIP ULTRA ===== */

.vipultra{
background:linear-gradient(
90deg,
#ff0000,
#ff9900,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff
);

background-size:400%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:vipUltra 3s linear infinite;
}

@keyframes vipUltra{
0%{background-position:0%}
100%{background-position:400%}
}

/* ===== HOLOGRAM ===== */
.hologram{
background:linear-gradient(90deg,#00ffff,#ff00ff,#00ffff);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:holoMove 2s linear infinite;
}
@keyframes holoMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* ===== FIRE ICE ===== */
.fireice{
background:linear-gradient(90deg,#00ccff,#ffffff,#ff3300);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:fireiceMove 2s linear infinite;
}
@keyframes fireiceMove{
0%{background-position:0%}
100%{background-position:200%}
}

/* ===== RGB SHIFT ===== */
.rgb{
animation:rgbShift 1s infinite;
}
@keyframes rgbShift{
0%{text-shadow:2px 0 red,-2px 0 blue}
50%{text-shadow:-2px 0 red,2px 0 blue}
100%{text-shadow:2px 0 red,-2px 0 blue}
}

/* ===== SMOKE ===== */
.smoke{
color:#ccc;
text-shadow:
0 0 5px #aaa,
0 0 15px #666;
animation:smokeUp 2s infinite alternate;
}
@keyframes smokeUp{
from{transform:translateY(0)}
to{transform:translateY(-3px); opacity:0.7;}
}

/* ===== ELECTRIC ===== */
.electric{
color:#00ffff;
text-shadow:
0 0 5px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff;
animation:electricFlash 0.6s infinite;
}
@keyframes electricFlash{
0%,100%{opacity:1}
50%{opacity:0.3}
}

/* ===== LUXURY GOLD ===== */
.luxgold{
background:linear-gradient(90deg,#ffd700,#fff8dc,#ffd700);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxgoldMove 1.5s linear infinite;
}
@keyframes luxgoldMove{
0%{background-position:0%}
100%{background-position:200%}
}

/* ===== NEON PULSE ===== */
.neonpulse{
color:#ff00ff;
text-shadow:
0 0 5px #ff00ff,
0 0 20px #ff00ff;
animation:neonPulse 1s infinite alternate;
}
@keyframes neonPulse{
from{opacity:0.6}
to{opacity:1}
}

/* ===== GLASS ===== */
.glass{
color:rgba(255,255,255,0.6);
text-shadow:
0 0 5px rgba(255,255,255,0.4),
0 0 15px rgba(255,255,255,0.2);
}

/* ===== WAVE RGB ===== */
.wavergb{
background:linear-gradient(90deg,red,blue,green,red);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:wavergbMove 1.5s linear infinite;
}
@keyframes wavergbMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* ===== DARK MATTER ===== */
.darkmatter{
color:#999;
text-shadow:
0 0 10px purple,
0 0 20px black;
animation:darkPulse 2s infinite alternate;
}
@keyframes darkPulse{
from{opacity:0.7}
to{opacity:1}
}

/* ===== SHIMMER ===== */
.shimmer{
background:linear-gradient(90deg,#fff,#aaa,#fff);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:shimmerMove 1s linear infinite;
}
@keyframes shimmerMove{
0%{background-position:-100%}
100%{background-position:100%}
}

/* ===== PIXEL ===== */
.pixel{
font-family:monospace;
letter-spacing:2px;
animation:pixelFlick 0.5s infinite;
}
@keyframes pixelFlick{
0%,100%{opacity:1}
50%{opacity:0.5}
}

/* ===== VIP FLASH ===== */
.vipflash{
background:linear-gradient(90deg,#ffd700,#ff00ff,#ffd700);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:vipflashMove 1s linear infinite;
}
@keyframes vipflashMove{
0%{background-position:0%}
100%{background-position:200%}
}

/* ===== CYBERPUNK ===== */
.cyberpunk{
color:#ff00ff;
text-shadow:
0 0 5px #ff00ff,
0 0 20px #00ffff;
animation:cyberBlink 1.2s infinite alternate;
}
@keyframes cyberBlink{
from{opacity:0.8}
to{opacity:1}
}

/* ===== CRYSTAL ===== */
.crystal{
background:linear-gradient(90deg,#e0f2fe,#ffffff,#e0f2fe);
background-size:200%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:crystalMove 2s linear infinite;
}
@keyframes crystalMove{
0%{background-position:0%}
100%{background-position:200%}
}

/* ===== BURNING ===== */
.burning{
color:#ff6600;
text-shadow:
0 0 5px #ff0000,
0 0 15px #ff9900;
animation:burning 1s infinite alternate;
}
@keyframes burning{
from{transform:scale(1)}
to{transform:scale(1.05)}
}

/* ===== GLITCH HARD ===== */
.glitch2{
animation:glitch2 0.3s infinite;
}
@keyframes glitch2{
0%{transform:translate(1px,-1px)}
25%{transform:translate(-1px,1px)}
50%{transform:translate(1px,1px)}
75%{transform:translate(-1px,-1px)}
100%{transform:translate(1px,-1px)}
}

/* ===== AURORA ===== */
.aurora{
background:linear-gradient(90deg,#00ffcc,#66ff66,#00ccff);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:auroraMove 3s linear infinite;
}
@keyframes auroraMove{
0%{background-position:0%}
100%{background-position:300%}
}

/* ===== VIP GOD ===== */
.vipgod{
background:linear-gradient(
90deg,
#ffd700,
#ff0000,
#00ffff,
#ff00ff,
#ffd700
);
background-size:400%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:vipgodMove 2s linear infinite;
}
@keyframes vipgodMove{
0%{background-position:0%}
100%{background-position:400%}
}

/* ===== 3D BASE ===== */
.text3d{
display:inline-block;
transform-style:preserve-3d;
}

/* ===== ROTATE X ===== */
.rotateX{
animation:rotateX 2s infinite linear;
}
@keyframes rotateX{
0%{transform:rotateX(0)}
100%{transform:rotateX(360deg)}
}

/* ===== ROTATE Y ===== */
.rotateY{
animation:rotateY 2s infinite linear;
}
@keyframes rotateY{
0%{transform:rotateY(0)}
100%{transform:rotateY(360deg)}
}

/* ===== ROTATE Z ===== */
.rotateZ{
animation:rotateZ 2s infinite linear;
}
@keyframes rotateZ{
0%{transform:rotateZ(0)}
100%{transform:rotateZ(360deg)}
}

/* ===== FLOAT 3D ===== */
.float3d{
animation:float3d 2s infinite ease-in-out;
}
@keyframes float3d{
0%{transform:translateY(0)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0)}
}

/* ===== FLIP ===== */
.flip{
animation:flip 1.5s infinite;
}
@keyframes flip{
0%{transform:rotateY(0)}
100%{transform:rotateY(180deg)}
}

/* ===== SWING ===== */
.swing{
animation:swing 1.5s infinite ease-in-out;
}
@keyframes swing{
0%{transform:rotateY(-20deg)}
50%{transform:rotateY(20deg)}
100%{transform:rotateY(-20deg)}
}

/* ===== POP OUT ===== */
.pop3d{
animation:pop3d 1s infinite alternate;
}
@keyframes pop3d{
from{transform:scale(1)}
to{transform:scale(1.2)}
}

/* ===== WAVE 3D ===== */
.wave3d{
animation:wave3d 1.5s infinite;
}
@keyframes wave3d{
0%{transform:rotateX(0)}
50%{transform:rotateX(30deg)}
100%{transform:rotateX(0)}
}

/* ===== SPIN CRAZY ===== */
.spin3d{
animation:spin3d 1s infinite linear;
}
@keyframes spin3d{
0%{transform:rotateX(0) rotateY(0)}
100%{transform:rotateX(360deg) rotateY(360deg)}
}

/* ===== DEPTH ===== */
.depth{
text-shadow:
1px 1px 0 #000,
2px 2px 0 #000,
3px 3px 5px rgba(0,0,0,0.5);
animation:depthMove 2s infinite alternate;
}
@keyframes depthMove{
from{transform:translateZ(0)}
to{transform:translateZ(10px)}
}

/* =================================
   👾 BOSS RAID BASE
================================= */

.boss-raid{
position:relative;
display:inline-block;
font-weight:bold;
letter-spacing:1px;
}

/* AURA CHÍNH */
.boss-raid{
animation:bossPulse 2s infinite alternate;
text-shadow:
0 0 5px rgba(255,255,255,0.6),
0 0 10px rgba(255,0,255,0.8),
0 0 20px rgba(0,255,255,0.8);
}

@keyframes bossPulse{
from{transform:scale(1)}
to{transform:scale(1.05)}
}



/* =================================
   ⚡ ENERGY VÒNG TRONG
================================= */

.boss-raid::after{
content:"⚡";
position:absolute;
left:50%;
top:50%;
transform-origin:-25px center;
animation:bossRotateReverse 2s linear infinite;
font-size:14px;
}

/* =================================
   ANIMATION
================================= */

@keyframes bossRotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}

@keyframes bossRotateReverse{
0%{transform:rotate(360deg)}
100%{transform:rotate(0deg)}
}

/* =================================
   💥 GROUND SHAKE
================================= */

.boss-shake{
animation:bossShake 0.2s infinite;
}

@keyframes bossShake{
0%{transform:translate(0,0)}
25%{transform:translate(1px,-1px)}
50%{transform:translate(-1px,1px)}
75%{transform:translate(1px,1px)}
100%{transform:translate(0,0)}
}

/* =================================
   🌑 DARK BOSS
================================= */

.boss-dark{
color:#aaa;
text-shadow:
0 0 5px #000,
0 0 10px #555,
0 0 20px #000;
}

/* =================================
   🔥 FIRE BOSS
================================= */

.boss-fire{
color:#ff6600;
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff6600,
0 0 20px #ff0000;
}

/* =================================
   ⚡ ELECTRIC BOSS
================================= */

.boss-electric{
color:#00eaff;
text-shadow:
0 0 5px #00f5ff,
0 0 10px #00eaff,
0 0 20px #00f5ff;
}

/* =================================
   🟣 VOID BOSS
================================= */

.boss-void{
color:#c77dff;
text-shadow:
0 0 5px #7b2cbf,
0 0 10px #9d4edd,
0 0 20px #c77dff;
}

/* =================================
   💎 LEGEND BOSS
================================= */

.boss-legend{
background:linear-gradient(90deg,#ffd700,#00f5ff,#ff00ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0 0 10px rgba(255,255,255,0.8);
}

/* ===== MESSAGE TABS ===== */

/* ===== MESSAGE TAB WRAPPER ===== */

.message-tabs-wrapper{
margin-left: -5px;
margin-top:8px;
margin-bottom:12px;
}

/* TAB CONTAINER */

.message-tabs{

display:inline-flex;
gap:6px;

padding:6px;

border-radius:14px;

}

/* TAB BUTTON */

.msg-tab{

padding:10px 18px;

border:none;

border-radius:10px;

background:transparent;

color:#9ca3af;

cursor:pointer;

font-weight:600;

font-size:14px;

transition:all .25s ease;

display:flex;
align-items:center;
gap:6px;

}

/* HOVER */

.msg-tab:hover{

background:#111827;

color:#fff;

}

/* ACTIVE TAB */

.msg-tab.active{

background:linear-gradient(90deg,#6366f1,#8b5cf6);

color:#fff;

box-shadow:
0 0 10px rgba(139,92,246,0.2),
0 0 20px rgba(99,102,241,0.1);

}


/* TAB CONTENT */

.tab-content{
width:100%;
}

/* RECORD AREA */

.record-area{
border:1px dashed rgba(255,255,255,0.15);
padding:40px;
border-radius:16px;
text-align:center;
background:#0b1626;
margin-top:20px;
}


.record-label{
margin-top:10px;
font-weight:600;
}


/* RECORD BOX */

.record-box{
text-align:center;
padding:40px;
border:1px dashed rgba(255,255,255,0.15);
border-radius:16px;
background:#0b1626;
}


/* GLOW khi ghi */

.record-btn.recording{
animation:recordGlow 1s infinite alternate;
}

@keyframes recordGlow{
from{
box-shadow:
0 0 10px red,
0 0 30px red;
}
to{
box-shadow:
0 0 20px red,
0 0 60px red;
}
}

/* TEXT */

.record-text{
margin-top:10px;
font-weight:600;
}

/* hover */
.record-btn:hover{
transform:scale(1.05);
}

/* đang ghi âm */
.recording{
animation:micPulse 1s infinite;
}

/* hiệu ứng phát sáng */
@keyframes micPulse{

0%{
box-shadow:
0 0 10px rgba(255,0,0,0.6),
0 0 25px rgba(255,0,0,0.5);
}

50%{
box-shadow:
0 0 25px rgba(255,0,0,1),
0 0 45px rgba(255,0,0,0.8);
}

100%{
box-shadow:
0 0 10px rgba(255,0,0,0.6),
0 0 25px rgba(255,0,0,0.5);
}

}

/* nút dừng */
.stop-btn{
margin-top:12px;
padding:8px 18px;
border:none;
border-radius:6px;
background:#333;
color:white;
cursor:pointer;
}

.stop-btn:disabled{
opacity:0.4;
cursor:not-allowed;
}

/* nút hủy */
.cancel-btn{
margin-top:12px;
padding:8px 18px;
border:none;
border-radius:6px;
background:#333;
color:white;
cursor:pointer;
}

/* thời gian */
.record-time{
margin-top:10px;
font-weight:600;
color:#ff3b3b;
}

.msg-tab.disabled{
opacity:0.4;
pointer-events:none;
}

.mic-wrapper{
position:relative;
width:100px;
height:100px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
}

#micWave{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
pointer-events:none;
}

.record-btn{
position:relative;
width:65px;
height:65px;
border-radius:50%;
font-size:26px;
border:none;
cursor:pointer;
z-index:2;

background:linear-gradient(135deg,#6366f1,#8b5cf6); /* màu xanh */
color:white;

box-shadow:
0 0 5px #7c77ff,
0 0 15px #a78bfa;

transition:0.25s;
}

/* khi đang ghi âm */

.record-btn.recording{
background:#ff3b3b;

box-shadow:
0 0 10px #ff3b3b,
0 0 30px #ff3b3b;

animation:micPulse 1s infinite;
}

/* ===== NÚT NGHE THỬ SOUND ===== */
.sound-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.sound-btn{
  height: 100%;          /* 🔥 cao bằng select */
  border-radius:10px;
  border:1px solid #1f2a44;
  background:#0b1626;
  color:#fff;
  cursor:pointer;
  font-size:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:0.2s;
}

.sound-wrap{
  display:flex;
  align-items:stretch; /* 🔥 QUAN TRỌNG */
  gap:8px;
}

.sound-btn:hover{
  background:#16213a;
}

.sound-btn:active{
  transform:scale(0.95);
}