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

/* === FIRE === */
.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 === */
.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 === */
.lightning { color:#00f5ff; text-shadow:0 0 5px #00f5ff,0 0 10px #00f5ff,0 0 20px #00f5ff; animation:lightningBlink 1s infinite; }
@keyframes lightningBlink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* === GOLD === */
.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 === */
.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 === */
.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 === */
.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} }

/* === PINKPOWER === */
.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:glitchAnim 1s infinite; }
@keyframes glitchAnim { 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:shockShake 0.3s infinite; }
@keyframes shockShake { 0%{transform:translateX(0)} 25%{transform:translateX(-1px)} 50%{transform:translateX(1px)} 75%{transform:translateX(-1px)} 100%{transform:translateX(0)} }

/* === BLUEFLAME === */
.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; font-family:monospace; 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 === */
.rgb { color:#fff; 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} }

/* === 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:burningPulse 1s infinite alternate; }
@keyframes burningPulse { from{transform:scale(1)} to{transform:scale(1.05)} }

/* === GLITCH 2 === */
.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%} }

/* =========================================================
   PROFESSIONAL USERNAME EFFECTS - ADDON
   Đã gộp selector trùng. Giá trị override ở cuối file cũ được giữ lại.
========================================================= */

.pro-platinum,
.pro-chrome,
.pro-obsidian,
.pro-sapphire,
.pro-emerald,
.pro-amethyst,
.pro-rosegold,
.pro-titanium,
.pro-carbon,
.pro-pearl,
.pro-holo,
.pro-glass,
.pro-royalblue,
.pro-crimson,
.pro-celestial,
.pro-velvet,
.pro-mint,
.pro-sunset {
  font-family:inherit;
  font-weight:700;
  letter-spacing:-0.1px;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-rendering:geometricPrecision;

  /* Giữ giá trị dưới cùng khi gộp */
  text-shadow:0 1px 2px rgba(0,0,0,.25) !important;
  filter:none !important;
}

.pro-platinum { background-image:linear-gradient(90deg,#94a3b8,#ffffff,#cbd5e1,#64748b,#ffffff); background-size:280%; animation:proGradientMove 3.4s linear infinite; }
.pro-chrome { background-image:linear-gradient(90deg,#64748b,#f8fafc,#94a3b8,#1e293b,#f8fafc); background-size:320%; animation:proGradientMove 2.8s linear infinite; }
.pro-obsidian { background-image:linear-gradient(90deg,#020617,#475569,#f8fafc,#334155,#020617); background-size:300%; animation:proGradientMove 4s linear infinite; }
.pro-sapphire { background-image:linear-gradient(90deg,#1d4ed8,#38bdf8,#dbeafe,#2563eb); background-size:280%; animation:proGradientMove 3s linear infinite; }
.pro-emerald { background-image:linear-gradient(90deg,#047857,#34d399,#ecfdf5,#10b981,#065f46); background-size:280%; animation:proGradientMove 3.2s linear infinite; }
.pro-amethyst { background-image:linear-gradient(90deg,#6d28d9,#a78bfa,#f5f3ff,#8b5cf6,#4c1d95); background-size:300%; animation:proGradientMove 3.4s linear infinite; }
.pro-rosegold { background-image:linear-gradient(90deg,#be645c,#f9a8d4,#fff1f2,#f59e0b,#be645c); background-size:320%; animation:proGradientMove 3.5s linear infinite; }
.pro-titanium { background-image:linear-gradient(90deg,#334155,#94a3b8,#e2e8f0,#475569,#f8fafc); background-size:300%; animation:proGradientMove 4s linear infinite; }
.pro-carbon { background-image:linear-gradient(135deg,#111827,#6b7280,#f3f4f6,#374151,#111827); background-size:320%; animation:proGradientMove 4.2s linear infinite; }
.pro-pearl { background-image:linear-gradient(90deg,#f8fafc,#fdf2f8,#e0f2fe,#ffffff,#cbd5e1); background-size:320%; animation:proGradientMove 4s linear infinite; }
.pro-holo { background-image:linear-gradient(90deg,#22d3ee,#a78bfa,#f0abfc,#67e8f9,#facc15,#22d3ee); background-size:420%; animation:proGradientMove 3.6s linear infinite; }
.pro-glass { background-image:linear-gradient(90deg,#dbeafe,#ffffff,#bae6fd,#e0f2fe,#ffffff); background-size:280%; animation:proGradientMove 3.8s linear infinite; }
.pro-royalblue { background-image:linear-gradient(90deg,#1e3a8a,#3b82f6,#bfdbfe,#2563eb,#172554); background-size:300%; animation:proGradientMove 3.2s linear infinite; }
.pro-crimson { background-image:linear-gradient(90deg,#7f1d1d,#ef4444,#fecaca,#dc2626,#450a0a); background-size:300%; animation:proGradientMove 3.3s linear infinite; }
.pro-celestial { background-image:linear-gradient(90deg,#0f172a,#6366f1,#22d3ee,#f8fafc,#818cf8); background-size:360%; animation:proGradientMove 4.4s linear infinite; }
.pro-velvet { background-image:linear-gradient(90deg,#581c87,#9f1239,#fb7185,#fdf2f8,#7f1d1d); background-size:340%; animation:proGradientMove 3.8s linear infinite; }
.pro-mint { background-image:linear-gradient(90deg,#064e3b,#5eead4,#ecfeff,#34d399,#0f766e); background-size:300%; animation:proGradientMove 3.5s linear infinite; }
.pro-sunset { background-image:linear-gradient(90deg,#7c2d12,#fb923c,#fde68a,#f472b6,#7c3aed); background-size:360%; animation:proGradientMove 3.4s linear infinite; }

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

@media (prefers-reduced-motion:reduce) {
  :is(.pro-platinum,.pro-chrome,.pro-obsidian,.pro-sapphire,.pro-emerald,.pro-amethyst,.pro-rosegold,.pro-titanium,.pro-carbon,.pro-pearl,.pro-holo,.pro-glass,.pro-royalblue,.pro-crimson,.pro-celestial,.pro-velvet,.pro-mint,.pro-sunset) { animation:none !important; }
}

/* =========================================================
   BACKGROUND GIF USERNAME EFFECTS
   bg-gif   = uploads/name_bg/1.gif
   bg-gif-2 = uploads/name_bg/2.gif
   ...
   bg-gif-21 = uploads/name_bg/21.gif
========================================================= */

:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21),
.name-preview:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21),
.user-name .name:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21) {
  display:inline-block !important;
  font-family:inherit !important;
  font-weight:900 !important;
  line-height:1.15 !important;

  background-size:cover !important;
  background-position:center !important;
  background-repeat:repeat !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  text-shadow:none !important;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.65)) !important;
}

.bg-gif,
.name-preview.bg-gif,
.user-name .name.bg-gif { background-image:url("uploads/name_bg/1.gif?v=1") !important; }

.bg-gif-2,
.name-preview.bg-gif-2,
.user-name .name.bg-gif-2 { background-image:url("uploads/name_bg/2.gif?v=1") !important; }

.bg-gif-3,
.name-preview.bg-gif-3,
.user-name .name.bg-gif-3 { background-image:url("uploads/name_bg/3.gif?v=1") !important; }

.bg-gif-4,
.name-preview.bg-gif-4,
.user-name .name.bg-gif-4 { background-image:url("uploads/name_bg/4.gif?v=1") !important; }

.bg-gif-5,
.name-preview.bg-gif-5,
.user-name .name.bg-gif-5 { background-image:url("uploads/name_bg/5.gif?v=1") !important; }

.bg-gif-6,
.name-preview.bg-gif-6,
.user-name .name.bg-gif-6 { background-image:url("uploads/name_bg/6.gif?v=1") !important; }

.bg-gif-7,
.name-preview.bg-gif-7,
.user-name .name.bg-gif-7 { background-image:url("uploads/name_bg/7.gif?v=1") !important; }

.bg-gif-8,
.name-preview.bg-gif-8,
.user-name .name.bg-gif-8 { background-image:url("uploads/name_bg/8.gif?v=1") !important; }

.bg-gif-9,
.name-preview.bg-gif-9,
.user-name .name.bg-gif-9 { background-image:url("uploads/name_bg/9.gif?v=1") !important; }

.bg-gif-10,
.name-preview.bg-gif-10,
.user-name .name.bg-gif-10 { background-image:url("uploads/name_bg/10.gif?v=1") !important; }

.bg-gif-11,
.name-preview.bg-gif-11,
.user-name .name.bg-gif-11 { background-image:url("uploads/name_bg/11.gif?v=1") !important; }

.bg-gif-12,
.name-preview.bg-gif-12,
.user-name .name.bg-gif-12 { background-image:url("uploads/name_bg/12.gif?v=1") !important; }

.bg-gif-13,
.name-preview.bg-gif-13,
.user-name .name.bg-gif-13 { background-image:url("uploads/name_bg/13.gif?v=1") !important; }

.bg-gif-14,
.name-preview.bg-gif-14,
.user-name .name.bg-gif-14 { background-image:url("uploads/name_bg/14.gif?v=1") !important; }

.bg-gif-15,
.name-preview.bg-gif-15,
.user-name .name.bg-gif-15 { background-image:url("uploads/name_bg/15.gif?v=1") !important; }

.bg-gif-16,
.name-preview.bg-gif-16,
.user-name .name.bg-gif-16 { background-image:url("uploads/name_bg/16.gif?v=1") !important; }

.bg-gif-17,
.name-preview.bg-gif-17,
.user-name .name.bg-gif-17 { background-image:url("uploads/name_bg/17.gif?v=1") !important; }

.bg-gif-18,
.name-preview.bg-gif-18,
.user-name .name.bg-gif-18 { background-image:url("uploads/name_bg/18.gif?v=1") !important; }

.bg-gif-19,
.name-preview.bg-gif-19,
.user-name .name.bg-gif-19 { background-image:url("uploads/name_bg/19.gif?v=1") !important; }

.bg-gif-20,
.name-preview.bg-gif-20,
.user-name .name.bg-gif-20 { background-image:url("uploads/name_bg/20.gif?v=1") !important; }

.bg-gif-21,
.name-preview.bg-gif-21,
.user-name .name.bg-gif-21 { background-image:url("uploads/name_bg/21.gif?v=1") !important; }

/* =========================================================
   FIX ONLY PREMIUM GIF BOXES
   Chỉ chỉnh 21 hiệu ứng mới bg-gif -> bg-gif-21
   Không ảnh hưởng hiệu ứng cũ
========================================================= */

.name-effect:has(.name-preview:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21)) {
  width:150px !important;
  min-width:150px !important;
  box-sizing:border-box !important;
}

.name-preview:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21) {
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

/* =========================================================
   FIX PROFILE VIP NAME + VERIFIED TICK
   Chỉ sửa 21 hiệu ứng Premium GIF trên profile
   Giữ tick xanh nằm ngang hàng với nickname
========================================================= */

.user-name .name:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21) {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:auto !important;
  max-width:100% !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}

.user-name .name:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21) :is(.verified-badge,.overlay-verified-badge,svg,img),
:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21):not(.name-preview) :is(svg,img,.verified-badge,.overlay-verified-badge,.verified-icon,.rank-badge,.vip-badge,.vip-rank-badge) {
  flex:0 0 auto !important;
  display:inline-flex !important;
  vertical-align:middle !important;

  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  color:inherit !important;
  filter:none !important;
}

/* =========================================================
   FIX PREMIUM GIF INLINE BADGES EVERYWHERE
   Sửa sidebar, dropdown menu, profile card, overlay
   Không ảnh hưởng ô preview trong tab Nickname
========================================================= */

:is(.bg-gif,.bg-gif-2,.bg-gif-3,.bg-gif-4,.bg-gif-5,.bg-gif-6,.bg-gif-7,.bg-gif-8,.bg-gif-9,.bg-gif-10,.bg-gif-11,.bg-gif-12,.bg-gif-13,.bg-gif-14,.bg-gif-15,.bg-gif-16,.bg-gif-17,.bg-gif-18,.bg-gif-19,.bg-gif-20,.bg-gif-21):not(.name-preview) {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;

  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;

  vertical-align:middle !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
}