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:18px;
  font-weight:600;
  display:block;
}

    .input-group{
  position:relative;
  margin-bottom:10px;
}


    
    
    
    .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:140px;
}

    
    .char-count{
  position:absolute;
  right:40px;
  bottom:10px;
  font-size:12px;
  color:#6b7a99;
}

    
    
    .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;
  margin-top:20px;
  margin-bottom:30px;
}

    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-left{
  display:flex;
  align-items:center;
  gap:10px;
}

    
    .lb-rank{
  width:30px;
  text-align:center;
  font-weight:600;
}

    
    
    /* Animation container */
    #leaderboard{
  position:relative;
}

    
    .lb-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  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: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; }
      .main-layout{ flex-direction:column; }
      .left-col{ display:block; }
      .right-col{ margin-top:30px; }
      .leaderboard-sticky{ position:relative; top:auto; }
    }
    /* ===== 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:100px;
}

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

    
    .donate-bubble audio,#preview{
  width:100%;
  display:block;
}

        
        

    /* 👇 đuôi chuẩn, dính liền */
    .donate-bubble::after{
  content:"";
  position:absolute;
  top:-6px;
  left:26px;
  width:10px;
  height:10px;
  background:#0b1626;
  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:50px;
    }
    
    .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;
}


.navbar-avatar-btn .avatar-frame{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:47px;
  height:47px;
  pointer-events:none;
}


.avatar-wrap .avatar-img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}


.donate-avatar{
  position:relative;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#1f2937;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  overflow:visible;
}


.avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  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;
  left:-12px;
  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 TAB WRAPPER ===== */

.message-tabs-wrapper{
  margin-left:-5px;
  margin-top:18px;
  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:12px;
  margin-bottom:12px;
}


.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 */


/* đ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;
  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:5px;
}


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


/* 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{
  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;
  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{
  width:100%;
  padding:14px;
  border-radius:10px;
  border:1px solid #1f2a44;
  background:#0b1626;
  color:#fff;
  font-size:15px;
  outline:none;
  box-sizing:border-box;
  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);
}


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


/* ===== 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 .ripple{
  background:radial-gradient(circle,
    rgba(255,0,0,0.8) 0%,
    rgba(255,0,0,0.4) 40%,
    transparent 70%
  );
  filter:blur(2px);
}


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


.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);
  }
}


.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{
  cursor:pointer;
  display:none;
  line-height:1;
  transition:transform .2s;
  position:relative;
  align-items:center;
  background:none;
}


.notify-wrapper .notify-icon{
  width:34px;
  height:34px;
  color:#facc15;
  filter:drop-shadow(0 0 4px rgba(250,204,21,0.7));
  transition:filter .2s;
  background:none;
}


.notify-wrapper:hover .notify-icon{
  filter:drop-shadow(0 0 7px rgba(250,204,21,1));
}


/* ===== 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;
  right:25px;
  width:340px;
  max-height:420px;
  overflow-y:auto;
  padding:12px;
  background:#111827;
  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;
}


/* 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;
  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;
  margin-bottom:8px;
  margin-top:8px;
}


.label-row .label{
  display:inline;
  margin:0;
  padding:0;
  font-weight:600;
  white-space:nowrap;
}


.change-name{
  font-size:13px;
  color:#4da6ff;
  text-decoration:none;
  white-space:nowrap;
}


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


/* ===== NAVBAR CỐ ĐỊNH ===== */
.top-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:99999;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17, 24, 39, 0.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0, 245, 255, 0.15);
  box-shadow:0 2px 20px rgba(0,0,0,0.5);
  transition:background 0.3s ease, transform 0.35s ease;
}


.top-navbar.scrolled{
  background:rgba(17, 24, 39, 0.97);
}


.top-navbar.hidden{
  transform:translateY(-100%);
}


.navbar-inner{
  width:95%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.navbar-logo{
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  background:linear-gradient(90deg, #00f5ff, #9d4edd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


.navbar-links{
  display:flex;
  gap:24px;
}


.navbar-links a{
  color:#e2e8f0;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:color 0.2s;
}


.navbar-links a:hover{
  color:#00f5ff;
}


.navbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}


/* Nút Đăng nhập */
.navbar-login-btn{
  padding:8px 22px;
  border-radius:999px;
  background:linear-gradient(90deg, #00f5ff, #9d4edd);
  color:#000;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s;
  box-shadow:0 0 12px rgba(0,245,255,0.35);
}


.navbar-login-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(0,245,255,0.6);
}


.navbar-avatar-btn{
  width:40px;
  height:40px;
  padding:0;
  border:2px solid rgba(0, 245, 255, 0.5);
  border-radius:50%;
  background:linear-gradient(135deg, #00f5ff, #9d4edd);
  color:#000;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
  flex-shrink:0;
  overflow:visible;
}


.navbar-avatar-btn:hover{
  box-shadow:0 0 12px rgba(0, 245, 255, 0.5);
}


/* ===== DROPDOWN ===== */
.navbar-dropdown{
  position:relative;
}


.navbar-dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:230px;
  background:#111827;
  border:1px solid rgba(0, 245, 255, 0.2);
  border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  padding:8px;
  z-index:999999;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}


.navbar-dropdown-menu.open{
  opacity:1;
  pointer-events:all;
  transform:translateY(0);
}


.dropdown-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}


.dropdown-name{
  font-weight:700;
  font-size:14px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}


.dropdown-role{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}


.dropdown-divider{
  height:1px;
  background:rgba(255,255,255,0.07);
  margin:6px 0;
}


.dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:#d1d5db;
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
}


.dropdown-item svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  stroke:currentColor;
}


.dropdown-item:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}


.dropdown-logout{
  color:#f87171;
}


.dropdown-logout:hover{
  background:rgba(248,113,113,0.1);
  color:#f87171;
}


/* ===== NÚT TOGGLE ===== */
.navbar-toggle-btn{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(0,245,255,0.25);
  background:transparent;
  color:#6b7280;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-left:4px;
  transition:all 0.2s;
}


.navbar-toggle-btn:hover{
  color:#00f5ff;
  border-color:rgba(0,245,255,0.5);
}


.navbar-toggle-btn svg{
  width:14px;
  height:14px;
  transition:transform 0.3s ease;
}


.top-navbar.hidden .navbar-toggle-btn svg{
  transform:rotate(180deg);
}


/* ===== NÚT PEEK ===== */
.navbar-peek-btn{
  position:fixed;
  top:0;
  z-index:100000;
  width:44px;
  height:30px;
  background:linear-gradient(135deg, rgba(17,24,39,0.97), rgba(30,40,60,0.97));
  border:1px solid rgba(0, 245, 255, 0.4);
  border-top:none;
  border-radius:0 0 12px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s, box-shadow 0.2s;
  color:#00f5ff;
  box-shadow:0 4px 12px rgba(0,245,255,0.15);
}


.navbar-peek-btn:hover{
  box-shadow:0 4px 16px rgba(0,245,255,0.35);
}


.navbar-peek-btn svg{
  width:16px;
  height:16px;
}


.navbar-peek-btn.show{
  opacity:1;
  pointer-events:all;
}


/* Mobile */
@media (max-width: 600px) {
  .top-navbar { padding: 0 14px; }
  .navbar-links { display: none; }
  .navbar-peek-btn {
      margin-right: 10px;
  }
}


.vip-role{
  color:#FFD700;
  font-weight:600;
}


/* ===== POPUP ĐỔI TÊN ===== */
.cn-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(4px);
}

.cn-overlay.open{
  display:flex;
}

.cn-box{
  position:relative;
  width:100%;
  max-width:420px;
  background:#111827;
  border-radius:20px;
  padding:35px 28px 28px;
  box-shadow:0 0 50px rgba(0,0,0,0.8);
  animation:cnFadeIn 0.25s ease;
}

@keyframes cnFadeIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.cn-close{
  position:absolute;
  top:14px;
  right:16px;
  background:transparent;
  border:none;
  color:#6b7280;
  font-size:18px;
  cursor:pointer;
  width:auto;
  padding:4px 8px;
  border-radius:6px;
  transition:color .2s;
}

.cn-close:hover{
  color:#fff;
}

.cn-title{
  margin:0 0 12px;
  text-align:center;
  background:linear-gradient(90deg,#00f5ff,#9d4edd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:20px;
  margin-bottom:15px;
}

.cn-current{
  text-align:center;
  font-size:13px;
  color:#9ca3af;
  margin-bottom:16px;
}

.cn-current b{
  color:#00f5ff;
}

.cn-msg{
  padding:10px 14px;
  border-radius:10px;
  font-size:13px;
  text-align:center;
  margin-bottom:14px;
}

.cn-msg.success{
  background:#0f5132;
  color:#75ffb0;
}

.cn-msg.error{
  background:#5a1c1c;
  color:#ff9b9b;
}

.cn-input{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #1f2a44;
  background:#0b1626;
  color:#fff;
  font-size:14px;
  font-family:"Poppins",sans-serif;
  outline:none;
  box-sizing:border-box;
  margin-bottom:14px;
  transition:all .25s;
}

.cn-input:focus{
  border-color:#00f5ff;
  box-shadow:0 0 8px rgba(0,245,255,0.3);
}

.cn-btn{
  width:100%;
  padding:13px;
  border:none;
  border-radius:12px;
  background:linear-gradient(90deg,#00f5ff,#9d4edd);
  color:#000;
  font-weight:700;
  font-size:15px;
  font-family:"Poppins",sans-serif;
  cursor:pointer;
  transition:.2s;
}

.cn-btn:hover{
  opacity:0.9;
  transform:translateY(-2px);
}


.dropdown-avatar{
  background:linear-gradient(135deg, #00f5ff, #9d4edd);
  font-size:16px;
  color:#000;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}


.navbar-avatar-btn img,.dropdown-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}


.link{
  margin-top:15px;
  text-align:center;
  font-size:14px;
}


.link a{
  color:#00f5ff;
  text-decoration:none;
}


.link a:hover{
  text-decoration:underline;
}


.avatar-wrap{
  position:relative;
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}


.navbar-avatar-btn.has-avatar{
  border-color:transparent;
  background:transparent;
}


.avatar-text{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-weight:700;
  font-size:15px;
  color:#000;
}


.crown_icon{
  width:18px;
  height:18px;
  vertical-align:middle;
}


.crown_icon.silver{
  color:#C0C0C0;
}
 /* bạc */
.crown_icon.bronze{
  color:#CD7F32;
}
  /* nâu cam */

.crown_icon.gold{
  color:#FFD700;
  filter:drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
  animation:goldGlow 3.4s ease-in-out infinite;
}


@keyframes goldGlow{
  0%, 100%{
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
    transform: scale(1);
  }
  50%{
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
    transform: scale(1.05);
  }
}

.lb-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}


.lb-crown-icon{
  width:20px;
  height:20px;
  color:#a855f7;
  filter:drop-shadow(0 0 4px rgba(168,85,247,0.5));
  animation:purpleGlow 3s ease-in-out infinite;
}


@keyframes purpleGlow{
  0%,100%{
    filter: drop-shadow(0 0 2px rgba(168,85,247,0.3));
  }
  50%{
    filter: drop-shadow(0 0 6px rgba(168,85,247,0.6));
  }
}

.emoji-btn{
  position:absolute;
  right:12px;
  bottom:12px;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
}

.emoji-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}


/* ===== LANDSCAPE MOBILE FIX ===== */
@media (max-width: 900px) and (orientation: landscape) {

  body {
    display: block;
    padding: 8px 0;
  }

  .container {
    width: 94%;
    margin: 0 auto !important;
    margin-top: 68px !important;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Giữ 1 cột như portrait */
  .main-layout {
    flex-direction: column !important;
    gap: 20px;
  }

  .left-col,
  .right-col {
    width: 100% !important;
    min-width: 0;
    display: block;
    box-sizing: border-box;
  }

  .right-col {
    margin-top: 20px;
    padding: 20px;
  }

  /* Bỏ sticky leaderboard */
  .leaderboard-sticky {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
  }

  /* Banner thấp hơn cho landscape */
  .banner {
    height: 130px;
  }

  /* Profile header */
  .profile-header {
    margin-bottom: 55px;
  }

  .profile-info {
    position: absolute;
    bottom: -42px;
    left: 20px;
    flex-direction: row;
    align-items: flex-end;
    text-align: left;
    justify-content: flex-start;
    margin-top: 0;
  }

  .avatar-big {
    width: 72px;
    height: 72px;
  }

  /* quick-amount không absolute */
  .quick-amount {
    position: static;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .quick-amount button {
    flex: 1;
    min-width: 80px;
  }

  /* Textarea thấp hơn chút */
  textarea {
    height: 100px;
  }

  /* Float actions */
  .float-actions {
    bottom: 12px;
    right: 12px;
  }

  .notify-box {
    bottom: 100px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 45vh;
  }
}