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;
      padding-right:5px;
    }
    .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;
    }
    
    /* ===== 2 CỘT: TRÁI (form + leaderboard), PHẢI (history) ===== */
    /*
     * Trick để sticky hoạt động trong flex:
     * .left-col dùng display:flex + flex-direction:column
     * .leaderboard-sticky có position:sticky + top:Xpx
     * Nó sẽ dính theo khi scroll vì right-col (history) dài hơn left-col
     */
    .left-col{
      flex:1.5;
      min-width:0;
      display:flex;
      flex-direction:column;
    }


    
    .right-col{
      flex:1;
      min-width:0;
      background:#0f172a;
      padding:25px;
      border-radius:20px;
    }
    
    @media (max-width:1024px){
      .main-layout{
        flex-direction:column;
      }
    
      .left-col{
        display:block;
      }

      .right-col{
        margin-top:30px;
      }

      .leaderboard-sticky{
        position:relative;
        top:auto;
      }
    }
    
    @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;
    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 ===== */
    
    .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;
      margin-bottom:2px;
    }
    
    .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:0px;
    }
    
    .donate-bubble{
      margin-top:4px;
      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%;
      display:block;
    }

    .leaderboard-sticky{
      position:relative;
      top:auto;
    }
    
    /* 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:-10px;
  right:-10px;
  width:34px;
  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:-5px;      /* chỉnh lên xuống */
left:-12px;      /* chỉnh trái phải */

margin-left:6px;

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

color:#f7e300;

}

.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%}
}

/* ===== 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.1),
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 */


@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;
}


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




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

#micWave{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.shop-tab{
  display:flex;
  align-items:center;
  gap:4px;
  color:#fff;
  font-size:14px;
  text-decoration:none;
  position:relative;

  animation: shopRainbowGlow 3s infinite linear;
}

/* ánh sáng nhiều màu */
@keyframes shopRainbowGlow{
  0%{ text-shadow:0 0 6px #ff0000,0 0 10px #ff0000; }
  20%{ text-shadow:0 0 6px #ff8800,0 0 10px #ff8800; }
  40%{ text-shadow:0 0 6px #ffff00,0 0 10px #ffff00; }
  60%{ text-shadow:0 0 6px #00ffcc,0 0 10px #00ffcc; }
  80%{ text-shadow:0 0 6px #0099ff,0 0 10px #0099ff; }
  100%{ text-shadow:0 0 6px #ff00cc,0 0 10px #ff00cc; }
}

/* NEW rung nhẹ */
.shop-tab img{
  height:19px;
  width:auto;
  animation: newShake 1s infinite;
}

@keyframes newShake{
  0%{transform:rotate(0deg);}
  25%{transform:rotate(-8deg);}
  50%{transform:rotate(8deg);}
  75%{transform:rotate(-8deg);}
  100%{transform:rotate(0deg);}
}

.name-wrapper{
  position:relative;
}

.name-wrapper .label{
  padding-right:90px; /* chừa chỗ cho nút shop */
  display:block;
}

.shop-corner{
  position:absolute;
  right:0;
  top:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
}

.shop-corner img{
  height:18px;
}

.donate-options.single{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}


/* ===== DONATE SOUND SELECT ===== */

#donate_sound{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #1f2a44;
  background:#0b1626;
  color:#e5e7eb;
  font-size:14px;
  font-family:'Poppins',sans-serif;
  outline:none;
  cursor:pointer;

  transition:all .25s ease;
}

/* hover */
#donate_sound:hover{
  border-color:#6366f1;
  box-shadow:0 0 10px rgba(99,102,241,0.25);
}

/* focus */
#donate_sound:focus{
  border-color:#00f5ff;
  box-shadow:
    0 0 8px rgba(0,245,255,0.4),
    0 0 16px rgba(0,245,255,0.2);
}

/* option */
#donate_sound option{
  background:#0b1626;
  color:#fff;
}

/* custom arrow (giả lập) */
#donate_sound{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-image:url("data:image/svg+xml;utf8,<svg fill='%23aaa' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px;
  padding-right:35px;
}

input, textarea{
  transition:all .25s ease;
}

input:hover, textarea:hover{
  border-color:#6366f1;
  box-shadow:0 0 10px rgba(99,102,241,0.25);
}

input:focus, textarea:focus{
  border-color:#00f5ff;
  box-shadow:
    0 0 8px rgba(0,245,255,0.4),
    0 0 16px rgba(0,245,255,0.2);
}

input, textarea, select{
  border:1px solid #1f2a44;
  background:#0b1626;
}

.tab-mic-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  vertical-align: middle;
}


/* ===== BUTTON ===== */
.record-btn{
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

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

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: visible; /* 🔥 cho ripple tràn ra */
}

/* ===== ICON ===== */
.mic-icon{
  width: 25px;
  height: 25px;
  fill: #fff;
  z-index: 3;
}

/* ===== RIPPLE BASE ===== */
.ripple{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.7), transparent 70%);
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}

/* ===== 3 LỚP SÓNG ===== */
.r1{
  animation: rippleWave 2.5s infinite;
}

.r2{
  animation: rippleWave 2.5s infinite;
  animation-delay: 0.6s;
}

.r3{
  animation: rippleWave 2.5s infinite;
  animation-delay: 1.2s;
}

/* ===== ANIMATION ===== */
@keyframes rippleWave{
  0%{
    transform: scale(1);
    opacity: 0.7;
  }
  70%{
    transform: scale(2.0);
    opacity: 0;
  }
  100%{
    transform: scale(2.0);
    opacity: 0;
  }
}

/* ===== HOVER ===== */
.record-btn:hover{
  transform: scale(1.08);
}

/* ===== RECORDING (ĐỎ) ===== */
.record-btn.recording{
  background: linear-gradient(135deg,#ff2d2d,#ff0000);
}

.record-btn.recording .ripple{
  background: radial-gradient(circle,
    rgba(255,0,0,0.8) 0%,
    rgba(255,0,0,0.4) 40%,
    transparent 70%
  );

}

/* ===== PULSE ĐỎ ===== */
.record-btn.recording{
  animation: none; /* tắt pulse cũ */
}


.record-btn.recording::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:0;

  animation: pulseRedSoft 1.5s infinite;
}

@keyframes pulseRedSoft{
  0%{
    box-shadow: 0 0 0 0 rgba(255,0,0,0.4);
  }
  70%{
    box-shadow: 0 0 0 18px rgba(255,0,0,0);
  }
}

.record-btn.recording .ripple{
  filter: blur(2px);
}


.no-donate{

  padding:5px;
  margin-top: 5px;
  font-size:15px;
  line-height:1.6;
  animation: fadeIn 0.5s ease;
}

.no-donate span{
  display:block;
  margin-top:6px;
  font-size:13px;
  opacity:0.7;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}




/* ===== NHÓM NÚT GÓC PHẢI DƯỚI ===== */
.float-actions{
  position: fixed;
  bottom: 25px;
  right: 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  z-index: 9999;
}

/* ===== CHUÔNG THÔNG BÁO ===== */
.notify-wrapper{
  font-size: 34px;
  cursor: pointer;
  display: none;
  line-height: 1;

  text-shadow:
    0 0 10px rgba(139,92,246,0.8),
    0 0 20px rgba(99,102,241,0.6);

  transition: transform .2s;
  position: relative; /* cho badge */
}

.notify-wrapper:hover{
  transform: scale(1.15);
}

/* ===== BADGE ===== */
.notify-badge{
  position: absolute;
  top: -6px;
  right: -6px;

  font-size: 12px;
  padding: 4px 7px;

  background: linear-gradient(135deg,#ff3b3b,#ff0000);
  color: #fff;

  font-weight: 700;
  border-radius: 999px;

  box-shadow:
    0 0 8px rgba(255,0,0,0.6),
    0 0 15px rgba(255,0,0,0.4);

  animation: badgePulse 1.5s infinite;

  display: none;
}

@keyframes badgePulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

/* ===== BOX ===== */
.notify-box{
  position: fixed;

  bottom: 130px; /* nằm trên cả 2 nút xếp dọc */
  right: 25px;

  width: 340px;
  max-height: 420px;
  overflow-y: auto;

  padding: 12px;

  background: #111827; /* 🔥 fix var lỗi */
  border-radius: 16px;

  border: 1px solid rgba(0,245,255,0.6);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.6),
    0 0 20px rgba(0,245,255,0.05);

  backdrop-filter: blur(10px);

  display: none;
  z-index: 9999;

  animation: notifyFade 0.25s ease;
}

@keyframes notifyFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== TITLE ===== */
.notify-title{
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  color: #fff;
    
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ===== CARD ===== */
.notify-card{
  background: #0b1626;
  border: 1px solid rgba(255,255,255,0.05);

  border-radius: 14px;
  padding: 12px;

  margin-bottom: 10px;

  transition: all .25s ease;
}

.notify-card:hover{
  transform: translateY(-2px);

  box-shadow:
    0 0 10px rgba(157,78,221,0.2),
    0 0 20px rgba(157,78,221,0.1);
}

/* ===== HEADER ===== */
.notify-header{
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

/* ICON */
.notify-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;

  background: linear-gradient(135deg,#00f5ff,#9d4edd);

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

  margin-right: 8px;

  font-size: 14px;
  color: #000;

  box-shadow: 0 0 10px rgba(0,245,255,0.4);
}

/* unread */
.notify-card.unread .notify-icon{
  background: linear-gradient(135deg,#ff3b3b,#ff0000);
  color:#fff;
}

/* TITLE TRONG CARD */
.notify-header .notify-title{
  border: none;
  padding: 0;
  margin: 0;

  font-size: 14px;
  font-weight: 600;
}

/* CONTENT */
.notify-content{
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* TIME */
.notify-time{
  text-align: right;
  font-size: 11px;
  color: #6b7280;

  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 6px;
}

/* SCROLL */
.notify-box::-webkit-scrollbar{
  width: 6px;
}
.notify-box::-webkit-scrollbar-thumb{
  background: linear-gradient(#6366f1,#8b5cf6);
  border-radius: 10px;
}

/* EMPTY */
.notify-empty{
  text-align:center;
  padding:20px;
  font-size:13px;
  color:#9ca3af;
  opacity:0.7;
}

.notify-text{
  font-size: 12px;
  color: #ff4d4f;
  cursor: pointer;
  display: none;
  white-space: nowrap;
  margin-left: 5px;
}

.notify-text:hover{
  text-decoration: underline;
}

.record-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  margin-top:10px;
  font-size:13px;
  color:#ff3b3b;
}

.time-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.8;
}

/* ===== NÚT VỀ ĐẦU TRANG ===== */
#scrollTopBtn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #00f5ff, #9d4edd);
  color: #fff;

  display: none; /* ẩn mặc định, JS thêm class show */
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 10px rgba(0,245,255,0.4),
    0 0 20px rgba(157,78,221,0.3);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

#scrollTopBtn.show{
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

#scrollTopBtn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 0 15px rgba(0,245,255,0.6),
    0 0 30px rgba(157,78,221,0.5);
}

#scrollTopBtn svg{
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ===== MOBILE FIX NOTIFY ===== */
@media (max-width:768px){

  .float-actions{
    bottom: 15px;
    right: 15px;
    gap: 8px;
  }

  /* ICON */
  .notify-wrapper{
    font-size: 28px;
  }

  #scrollTopBtn{
    width: 36px;
    height: 36px;
  }

  /* BADGE */
  .notify-badge{
    font-size: 10px;
    padding: 3px 6px;
    top: -5px;
    right: -5px;
  }

  /* BOX */
  .notify-box{
    bottom: 120px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: 100%;
    max-height: 60vh;
    padding: 10px;
    border-radius: 14px;
  }

  /* CARD */
  .notify-card{
    padding: 10px;
  }

  /* TITLE */
  .notify-title{
    font-size: 14px;
  }

  /* TEXT */
  .notify-content{
    font-size: 13px;
  }

  .notify-time{
    font-size: 11px;
  }

  /* ICON TRONG CARD */
  .notify-icon{
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

}

#history-loading {
  text-align: center;
  padding: 15px;
  color: #aaa;
  font-size: 14px;
  opacity: 0.8;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 10px;          /* khoảng cách giữa label và link */
  justify-content: flex-start; /* đảm bảo không bị dàn ra */
}

.change-name {
    font-size: 13px;
    color: #4da6ff;
    text-decoration: none;
    margin-left: 10px;  /* tạo khoảng cách nhẹ */
}

.change-name:hover {
    text-decoration: underline;
}

.top-menu{
  position: fixed;        /* 🔥 cốt lõi */
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;

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

  padding: 0 40px;

  background: linear-gradient(90deg,#0b0f2a,#0d1435);
  z-index: 9999;          /* 🔥 luôn nổi trên cùng */
}

/* tránh nội dung bị che */
body{
  padding-top: 70px;
}

/* left */
.menu-left{
  display: flex;
  align-items: center;
  gap: 25px;
}

.menu-left a{
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* logo */
.logo{
  font-weight: 700;
  color: #fff;
}

/* right button */
.btn-login-top{
  background: linear-gradient(90deg,#6a5cff,#8e6bff);
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}