/* ============================================================
   PHẦN CHUNG - Layout, Card, Reset
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --rainbow: linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ccff,#0044ff,#aa00ff,#ff0000);
  --bg: #0a0a1a;
}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:#fff;min-height:100vh;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:40px 20px;text-align:center}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;background:var(--rainbow);background-size:400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:slideGrad 4s linear infinite;margin-bottom:8px}
.subtitle{color:#888;font-size:1rem;margin-bottom:30px}
/* Tabs */
.tabs-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:40px;padding:6px;background:rgba(255,255,255,.05);border-radius:16px;border:1px solid rgba(255,255,255,.08);max-width:800px;margin-left:auto;margin-right:auto}
.tab-btn{padding:10px 24px;border:none;border-radius:12px;background:transparent;color:#888;font-family:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:.3s;letter-spacing:.5px}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.tab-btn.active{background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;color:#fff;box-shadow:0 4px 20px rgba(255,0,200,.3)}
.tab-content{display:none}
.tab-content.active{display:block}
/* Grid & Card */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:.3s}
.card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.card-number{font-size:.75rem;color:#555;font-weight:600;letter-spacing:2px}
.btn-name{font-size:.8rem;color:#666;margin-top:4px}
.header-button{min-height:60px;display:flex;align-items:center;justify-content:center}
.button{cursor:pointer;border:none;outline:none;font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:1px;text-transform:uppercase;text-decoration:none;display:inline-block;color:#fff}
/* Coming Soon placeholder */
.coming-soon{padding:80px 20px;color:#444;font-size:1.2rem;font-weight:600}
.coming-soon span{font-size:3rem;display:block;margin-bottom:16px}
/* Keyframe dùng chung */
@keyframes slideGrad{0%{background-position:0% 50%}100%{background-position:400% 50%}}


/* ============================================================
   SHOWCASE EXTRA - Modal & Toast Styles
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-card {
    background: rgba(18, 18, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #fff;
    text-align: left;
}
.modal-overlay.active .modal-card {
    transform: scale(1);
}
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close-btn:hover {
    color: #fff;
}
#modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    background: var(--rainbow);
    background-size: 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slideGrad 4s linear infinite;
}
#modal-preview-container {
    background: #050510;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    min-height: 120px;
}
.code-section {
    margin-bottom: 16px;
}
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #aaa;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.copy-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
.copy-btn:active {
    transform: scale(0.95);
}
.code-section pre {
    background: #020208;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    overflow-x: auto;
    max-height: 160px;
    margin: 0;
}
.code-section code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: #38bdf8;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Make card hover look clickable */
.card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.card::after {
    content: "ℹ️ Click to Copy";
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 0;
    text-align: center;
    transition: bottom 0.25s;
    font-weight: 600;
}
.card:hover::after {
    bottom: 0;
}

/* Preset buttons styling */
.preset-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.preset-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
.preset-btn.active {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #000;
    font-weight: 600;
}

/* Toast styling */
#toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background: rgba(16, 185, 129, 0.95);
    border: 1px solid rgba(16, 185, 129, 0.4);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px);
    opacity: 0;
    animation: toastIn 0.3s forwards, toastOut 0.3s 2.7s forwards;
}
@keyframes toastIn {
    to { transform: translateY(0); opacity: 1; }
}
@keyframes toastOut {
    to { transform: translateY(-20px); opacity: 0; }
}


/* ============================================================
   FLATSOME COMPATIBILITY RESET FOR CUSTOM BUTTONS
   ============================================================ */
.button[class*="btn-"], .button[class*="neon-"], .button[class*="glass-"], 
.button[class*="neu-"], .button[class*="cos-"], .button[class*="pas-"], 
.button[class*="gm-"], .button[class*="bt-"], .button[class*="bd-"], 
.button[class*="cp-"], .button[class*="mr-"], .button[class*="cs-"], 
.button[class*="lq-"], .button[class*="lx-"], .button[class*="rt-"], 
.button[class*="at-"], .button[class*="pt-"], 
.button.badge-btn {
    line-height: normal !important;
    min-height: auto !important;
    text-decoration: none !important;
}
.button[class*="btn-"] span, .button[class*="neon-"] span, .button[class*="glass-"] span, 
.button[class*="neu-"] span, .button[class*="cos-"] span, .button[class*="pas-"] span, 
.button[class*="gm-"] span, .button[class*="bt-"] span, .button[class*="bd-"] span, 
.button[class*="cp-"] span, .button[class*="mr-"] span, .button[class*="cs-"] span, 
.button[class*="lq-"] span, .button[class*="lx-"] span, .button[class*="rt-"] span,
.button[class*="at-"] span, .button[class*="pt-"] span {
    line-height: normal !important;
}


/* ============================================================
   01 - GRADIENT BORDER SPIN
   ============================================================ */
.button.btn-1{position:relative;padding:14px 36px;background:var(--bg);color:#fff;border-radius:50px;z-index:1;transition:.3s}
.button.btn-1::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;z-index:-1}
.button.btn-1::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.3s}
.button.btn-1 span{position:relative;z-index:2}
.button.btn-1:hover::after{background:transparent}
.button.btn-1:hover{color:#000;text-shadow:0 0 4px rgba(0,0,0,.3);transform:scale(1.08)}
/* ============================================================
   02 - RAINBOW PULSE
   ============================================================ */
@keyframes btn2Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.button.btn-2{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:50px;color:#fff;animation:slideGrad 3s linear infinite, btn2Pulse 2s ease infinite;box-shadow:0 0 20px rgba(255,0,200,.3),0 0 60px rgba(0,200,255,.2);transition:.3s}
.button.btn-2 span{position:relative;z-index:2}
.button.btn-2:hover{box-shadow:0 0 30px rgba(255,0,200,.6),0 0 80px rgba(0,200,255,.4),0 0 120px rgba(255,255,0,.2);transform:scale(1.12)}
/* ============================================================
   03 - WAVE GRADIENT
   ============================================================ */
@keyframes btn3Spotlight{0%{left:-60%}100%{left:120%}}
.button.btn-3{padding:14px 36px;background:var(--rainbow);background-size:600% 100%;border-radius:12px;color:#fff;animation:slideGrad 2.5s linear infinite;transition:.3s;position:relative;overflow:hidden}
.button.btn-3::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-100%);animation:btn3Spotlight 2s ease infinite}
.button.btn-3:hover{border-radius:50px;transform:scale(1.1);letter-spacing:3px}
/* ============================================================
   04 - SHIMMER EFFECT
   ============================================================ */
.button.btn-4{padding:14px 36px;background:linear-gradient(110deg,#0a0a1a 30%,rgba(255,255,255,.15) 50%,#0a0a1a 70%);background-size:300% 100%;border:2px solid;border-image:var(--rainbow) 1;border-image-slice:1;color:#fff;animation:slideGrad 2s linear infinite;position:relative;transition:.3s}
.button.btn-4:hover{background:var(--rainbow);background-size:400%;animation:slideGrad 1.5s linear infinite;color:#000;font-weight:800;transform:scale(1.08)}
/* ============================================================
   05 - RAINBOW OUTLINE
   ============================================================ */
@keyframes btn5Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.button.btn-5{position:relative;padding:14px 36px;background:transparent;color:#fff;border-radius:50px;z-index:1;animation:btn5Float 3s ease infinite;transition:.3s}
.button.btn-5::before{content:'';position:absolute;inset:-2px;border-radius:52px;background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;z-index:-1}
.button.btn-5::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.4s}
.button.btn-5 span{position:relative;z-index:2}
.button.btn-5:hover::after{opacity:0}
.button.btn-5:hover{color:#000;transform:scale(1.1)}
/* ============================================================
   06 - 3D GRADIENT
   ============================================================ */
.button.btn-6{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:14px;color:#fff;animation:slideGrad 3s linear infinite;box-shadow:0 6px 0 #333,0 8px 20px rgba(0,0,0,.4);transition:.15s;position:relative;top:0}
.button.btn-6:hover{top:3px;box-shadow:0 3px 0 #333,0 4px 10px rgba(0,0,0,.3)}
.button.btn-6:active{top:6px;box-shadow:0 0 0 #333,0 0 5px rgba(0,0,0,.2)}
/* ============================================================
   07 - HUE ROTATION
   ============================================================ */
@keyframes btn7Hue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.button.btn-7{padding:14px 36px;background:linear-gradient(135deg,#ff0066,#6600ff,#00ccff,#00ff88);border-radius:50px;color:#fff;animation:btn7Hue 4s linear infinite;box-shadow:0 0 25px rgba(100,0,255,.4);transition:.3s}
.button.btn-7:hover{transform:rotate(5deg) scale(1.1);box-shadow:0 0 40px rgba(100,0,255,.6),0 0 80px rgba(255,0,100,.3)}
/* ============================================================
   08 - NEON UNDERLINE
   ============================================================ */
.button.btn-8{padding:14px 36px 18px;background:transparent;color:#fff;border-radius:8px;position:relative;transition:.3s}
.button.btn-8 span{position:relative;z-index:2}
.button.btn-8::after{content:'';position:absolute;bottom:6px;left:10%;right:10%;height:3px;background:var(--rainbow);background-size:400%;animation:slideGrad 2s linear infinite;z-index:1;transition:.3s}
.button.btn-8:hover::after{height:6px;bottom:4px;filter:blur(1px)}
.button.btn-8:hover{transform:scale(1.08)}
/* ============================================================
   09 - MORPH SHAPE
   ============================================================ */
@keyframes btn9Morph{0%,100%{border-radius:50px 20px 50px 20px}25%{border-radius:20px 50px 20px 50px}50%{border-radius:50px 20px 50px 20px}75%{border-radius:20px 50px 20px 50px}}
.button.btn-9{padding:14px 36px;background:var(--rainbow);background-size:400%;color:#fff;animation:slideGrad 3s linear infinite, btn9Morph 4s ease infinite;transition:.3s;position:relative;overflow:hidden}
.button.btn-9 span{position:relative;z-index:2}
.button.btn-9:hover{animation:slideGrad 1s linear infinite;transform:scale(1.12);border-radius:50px!important;box-shadow:0 0 40px rgba(255,100,0,.4)}
/* ============================================================
   10 - GLITCH EFFECT
   ============================================================ */
@keyframes btn10Glitch{0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(10% 0 60% 0)}40%{clip-path:inset(40% 0 20% 0)}60%{clip-path:inset(80% 0 0 0)}80%{clip-path:inset(0 0 80% 0)}}
.button.btn-10{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:8px;color:#fff;animation:slideGrad 3s linear infinite;position:relative;transition:.3s}
.button.btn-10::before,.button.btn-10::after{content:attr(data-text);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:inherit;background-size:inherit;animation:inherit;border-radius:inherit;opacity:0;transition:.3s}
.button.btn-10::before{color:#0ff}
.button.btn-10::after{color:#f0f}
.button.btn-10:hover::before{opacity:.7;transform:translate(-3px,-2px);animation:slideGrad 3s linear infinite, btn10Glitch .3s steps(5) infinite}
.button.btn-10:hover::after{opacity:.7;transform:translate(3px,2px);animation:slideGrad 3s linear infinite, btn10Glitch .3s steps(5) infinite reverse}
.button.btn-10:hover{transform:scale(1.05)}
/* ============================================================
   11 - LIQUID FILL
   ============================================================ */
.button.btn-11{padding:14px 36px;background:transparent;border:2px solid #fff;border-radius:50px;color:#fff;position:relative;overflow:hidden;transition:.3s;z-index:1}
.button.btn-11 span{position:relative;z-index:2}
.button.btn-11::after{content:'';position:absolute;left:0;bottom:-100%;width:300%;height:200%;background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;border-radius:45%;z-index:-1;transition:all .8s ease}
.button.btn-11:hover::after{bottom:0}
.button.btn-11:hover{color:#000;border-color:transparent;transform:scale(1.08)}
/* ============================================================
   12 - BLUR GLOW BORDER
   ============================================================ */
.button.btn-12{position:relative;padding:14px 36px;background:var(--bg);border-radius:50px;color:#fff;z-index:1;transition:.3s}
.button.btn-12::before{content:'';position:absolute;inset:-4px;border-radius:54px;background:var(--rainbow);background-size:400%;animation:slideGrad 2s linear infinite;z-index:-1;filter:blur(4px)}
.button.btn-12::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.3s}
.button.btn-12 span{position:relative;z-index:2}
.button.btn-12:hover{transform:scale(1.1)}
.button.btn-12:hover::before{filter:blur(8px);inset:-8px}
.button.btn-12:hover::after{background:rgba(10,10,26,.6)}
/* ============================================================
   13 - SLIDE REVEAL
   ============================================================ */
.button.btn-13{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:50px;color:#fff;animation:slideGrad 3s linear infinite;position:relative;overflow:hidden;transition:.3s;display:inline-block}
.button.btn-13 span{display:inline-block;transition:.4s}
.button.btn-13::after{content:attr(data-hover);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(40px);opacity:0;white-space:nowrap;transition:.4s;z-index:2}
.button.btn-13:hover span{transform:translateY(-40px);opacity:0}
.button.btn-13:hover::after{transform:translate(-50%,-50%) translateY(0);opacity:1}
.button.btn-13:hover{transform:scale(1.08)}
/* ============================================================
   14 - DOUBLE BORDER
   ============================================================ */
.button.btn-14{position:relative;padding:14px 36px;background:transparent;color:#fff;border-radius:14px;z-index:1;transition:.3s}
.button.btn-14::before,.button.btn-14::after{content:'';position:absolute;border-radius:16px;background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;z-index:-1}
.button.btn-14::before{inset:-3px}
.button.btn-14::after{inset:0;background:var(--bg);border-radius:14px}
.button.btn-14 span{position:relative;z-index:2}
.button.btn-14:hover{transform:scale(1.1) rotate(-2deg)}
.button.btn-14:hover::before{animation:slideGrad 1s linear infinite;inset:-5px;filter:blur(3px)}
/* ============================================================
   15 - SPOTLIGHT SWEEP
   ============================================================ */
@keyframes btn15Sweep{0%{left:-60%}100%{left:120%}}
.button.btn-15{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:50px;color:#fff;animation:slideGrad 3s linear infinite;position:relative;overflow:hidden;transition:.3s}
.button.btn-15::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(25deg);animation:btn15Sweep 3s ease-in-out infinite}
.button.btn-15 span{position:relative;z-index:2}
.button.btn-15:hover{transform:scale(1.1);box-shadow:0 0 40px rgba(255,255,255,.2)}
.button.btn-15:hover::after{animation:btn15Sweep 1s ease-in-out infinite}
/* ============================================================
   16 - CYBERPUNK
   ============================================================ */
.button.btn-16{padding:14px 36px;background:var(--rainbow);background-size:400%;animation:slideGrad 3s linear infinite;color:#fff;position:relative;clip-path:polygon(10% 0%,100% 0%,90% 100%,0% 100%);transition:.3s}
.button.btn-16 span{position:relative;z-index:2}
.button.btn-16:hover{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);transform:scale(1.1);box-shadow:0 0 30px rgba(255,0,100,.5)}
/* ============================================================
   17 - SCALE BOUNCE
   ============================================================ */
@keyframes btn17Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes btn17Bounce{0%,100%{transform:scale(1)}30%{transform:scale(1.15)}50%{transform:scale(.95)}70%{transform:scale(1.05)}}
.button.btn-17{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:50px;color:#fff;animation:slideGrad 3s linear infinite, btn17Pulse 1.5s ease infinite;transition:.3s}
.button.btn-17:hover{animation:slideGrad 1.5s linear infinite, btn17Bounce .6s ease;transform:scale(1.15);box-shadow:0 0 50px rgba(255,100,0,.5),0 10px 40px rgba(0,0,0,.3)}
/* ============================================================
   18 - TEXT GRADIENT
   ============================================================ */
@keyframes btn18Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.button.btn-18{padding:14px 36px;background:transparent;border:2px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;position:relative;transition:.3s;animation:btn18Float 3s ease infinite}
.button.btn-18 span{background:var(--rainbow);background-size:400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:slideGrad 3s linear infinite;font-weight:800;font-size:1rem;position:relative;z-index:2}
.button.btn-18:hover{border-color:transparent;background:var(--rainbow);background-size:400%;animation:slideGrad 2s linear infinite;transform:scale(1.1)}
.button.btn-18:hover span{-webkit-text-fill-color:#000;background:none}
/* ============================================================
   19 - 3D FLIP
   ============================================================ */
.button.btn-19{padding:14px 36px;background:var(--rainbow);background-size:400%;border-radius:14px;color:#fff;animation:slideGrad 3s linear infinite;position:relative;transform-style:preserve-3d;transition:.6s;perspective:600px}
.button.btn-19 span{display:block;backface-visibility:hidden;transition:.6s}
.button.btn-19::after{content:attr(data-back);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transform:rotateX(180deg);transition:.6s;font-weight:bold;color:#fff}
.button.btn-19:hover{transform:rotateX(180deg) scale(1.05)}
/* ============================================================
   20 - ULTIMATE RAINBOW
   ============================================================ */
@keyframes btn20Hue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes btn20Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.button.btn-20{position:relative;padding:16px 44px;background:var(--bg);color:#fff;border-radius:50px;z-index:1;animation:btn20Pulse 2s ease infinite;font-size:1.1rem;font-weight:800;letter-spacing:3px;transition:.3s}
.button.btn-20::before{content:'';position:absolute;inset:-4px;border-radius:54px;background:conic-gradient(from 0deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ccff,#0044ff,#aa00ff,#ff0000);animation:btn20Hue 3s linear infinite;z-index:-2;filter:blur(6px)}
.button.btn-20::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.4s}
.button.btn-20 span{position:relative;z-index:2;background:var(--rainbow);background-size:400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:slideGrad 2s linear infinite}
.button.btn-20:hover{transform:scale(1.15)}
.button.btn-20:hover::before{filter:blur(12px);inset:-10px}
.button.btn-20:hover::after{opacity:.5}
/* ████████████████████████████████████████████████████████████████
   ⚡ NEON BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* ============================================================
   N01 - NEON CYAN PULSE
   ============================================================ */
@keyframes n1Pulse{0%,100%{box-shadow:0 0 5px #0ff,0 0 20px #0ff,0 0 40px #0ff}50%{box-shadow:0 0 10px #0ff,0 0 40px #0ff,0 0 80px #0ff}}
.button.neon-1{padding:14px 36px;background:transparent;border:2px solid #0ff;border-radius:50px;color:#0ff;animation:n1Pulse 2s ease infinite;transition:.3s}
.button.neon-1:hover{background:#0ff;color:#000;transform:scale(1.1)}
/* ============================================================
   N02 - NEON MAGENTA GLOW
   ============================================================ */
@keyframes n2Glow{0%,100%{box-shadow:0 0 5px #f0f,0 0 20px #f0f,0 0 40px #f0f}50%{box-shadow:0 0 15px #f0f,0 0 45px #f0f,0 0 90px #f0f}}
.button.neon-2{padding:14px 36px;background:transparent;border:2px solid #f0f;border-radius:50px;color:#f0f;animation:n2Glow 2s ease infinite;transition:.3s}
.button.neon-2:hover{background:#f0f;color:#000;transform:scale(1.1)}
/* ============================================================
   N03 - NEON LIME
   ============================================================ */
@keyframes n3Glow{0%,100%{box-shadow:0 0 5px #0f0,0 0 20px #0f0}50%{box-shadow:0 0 15px #0f0,0 0 50px #0f0,0 0 80px #0f0}}
.button.neon-3{padding:14px 36px;background:transparent;border:2px solid #0f0;border-radius:12px;color:#0f0;animation:n3Glow 1.8s ease infinite;transition:.3s}
.button.neon-3:hover{background:#0f0;color:#000;border-radius:50px;transform:scale(1.1)}
/* ============================================================
   N04 - NEON ORANGE FLICKER
   ============================================================ */
@keyframes n4Flicker{0%,100%{opacity:1}5%{opacity:.4}10%{opacity:1}15%{opacity:.7}20%{opacity:1}}
.button.neon-4{padding:14px 36px;background:transparent;border:2px solid #f80;border-radius:50px;color:#f80;box-shadow:0 0 10px #f80,0 0 30px #f80;animation:n4Flicker 3s linear infinite;transition:.3s}
.button.neon-4:hover{background:#f80;color:#000;transform:scale(1.1)}
/* ============================================================
   N05 - NEON VIOLET BORDER SPIN
   ============================================================ */
.button.neon-5{position:relative;padding:14px 36px;background:var(--bg);color:#a855f7;border-radius:50px;z-index:1;transition:.3s;text-shadow:0 0 10px #a855f7}
.button.neon-5::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:conic-gradient(#a855f7,#ec4899,#a855f7);animation:btn20Hue 3s linear infinite;z-index:-1;filter:blur(3px)}
.button.neon-5::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.3s}
.button.neon-5 span{position:relative;z-index:2}
.button.neon-5:hover::after{opacity:.5}
.button.neon-5:hover{color:#fff;transform:scale(1.08)}
/* ============================================================
   N06 - NEON DUAL (CYAN+MAGENTA)
   ============================================================ */
@keyframes n6Swap{0%,100%{border-color:#0ff;color:#0ff;box-shadow:0 0 15px #0ff,0 0 40px #0ff}50%{border-color:#f0f;color:#f0f;box-shadow:0 0 15px #f0f,0 0 40px #f0f}}
.button.neon-6{padding:14px 36px;background:transparent;border:2px solid #0ff;border-radius:50px;color:#0ff;animation:n6Swap 3s ease infinite;transition:.3s}
.button.neon-6:hover{background:linear-gradient(135deg,#0ff,#f0f);color:#000;border-color:transparent;transform:scale(1.1)}
/* ============================================================
   N07 - NEON FILL WIPE
   ============================================================ */
.button.neon-7{padding:14px 36px;background:transparent;border:2px solid #0ff;border-radius:8px;color:#0ff;box-shadow:0 0 10px #0ff;position:relative;overflow:hidden;transition:.3s;z-index:1}
.button.neon-7::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:#0ff;transition:.4s;z-index:-1}
.button.neon-7 span{position:relative;z-index:2}
.button.neon-7:hover::before{left:0}
.button.neon-7:hover{color:#000;box-shadow:0 0 20px #0ff,0 0 60px #0ff}
/* ============================================================
   N08 - NEON 3D LAYERS
   ============================================================ */
.button.neon-8{padding:14px 36px;background:transparent;border:none;color:#f0f;text-shadow:0 0 10px #f0f;box-shadow:0 0 5px #f0f,inset 0 0 5px #f0f,0 0 20px #f0f,inset 0 0 20px #f0f;border-radius:50px;transition:.3s}
.button.neon-8:hover{box-shadow:0 0 10px #f0f,inset 0 0 10px #f0f,0 0 40px #f0f,inset 0 0 40px #f0f,0 0 80px #f0f;transform:scale(1.08)}
/* ============================================================
   N09 - NEON TEXT ONLY
   ============================================================ */
@keyframes n9TextGlow{0%,100%{text-shadow:0 0 5px #0ff,0 0 15px #0ff}50%{text-shadow:0 0 10px #0ff,0 0 30px #0ff,0 0 60px #0ff}}
.button.neon-9{padding:14px 36px;background:transparent;border:none;color:#0ff;font-size:1.1rem;animation:n9TextGlow 2s ease infinite;transition:.3s;border-bottom:2px solid transparent}
.button.neon-9:hover{border-bottom-color:#0ff;transform:scale(1.1);letter-spacing:3px}
/* ============================================================
   N10 - NEON RED DANGER
   ============================================================ */
@keyframes n10Pulse{0%,100%{box-shadow:0 0 5px #f33,0 0 20px #f33}50%{box-shadow:0 0 15px #f33,0 0 50px #f33,0 0 80px #f33}}
.button.neon-10{padding:14px 36px;background:transparent;border:2px solid #f33;border-radius:8px;color:#f33;animation:n10Pulse 1.5s ease infinite;transition:.3s}
.button.neon-10:hover{background:#f33;color:#fff;transform:scale(1.1);border-radius:50px}
/* ============================================================
   N11 - NEON YELLOW BUZZ
   ============================================================ */
@keyframes n11Buzz{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes n11Glow{0%,100%{box-shadow:0 0 5px #ff0,0 0 15px #ff0}50%{box-shadow:0 0 15px #ff0,0 0 40px #ff0,0 0 60px #ff0}}
.button.neon-11{padding:14px 36px;background:transparent;border:2px solid #ff0;border-radius:50px;color:#ff0;animation:n11Glow 2s ease infinite;transition:.3s}
.button.neon-11:hover{animation:n11Buzz .15s linear infinite;background:#ff0;color:#000;transform:scale(1.05)}
/* ============================================================
   N12 - NEON GLASSMORPHISM
   ============================================================ */
.button.neon-12{padding:14px 36px;background:rgba(0,255,255,.08);backdrop-filter:blur(10px);border:1px solid rgba(0,255,255,.3);border-radius:50px;color:#0ff;box-shadow:0 0 15px rgba(0,255,255,.2);transition:.3s}
.button.neon-12:hover{background:rgba(0,255,255,.2);border-color:#0ff;box-shadow:0 0 30px rgba(0,255,255,.5),0 0 60px rgba(0,255,255,.2);transform:scale(1.08)}
/* ============================================================
   N13 - NEON SCAN LINE
   ============================================================ */
@keyframes n13Scan{0%{top:-100%}100%{top:100%}}
.button.neon-13{padding:14px 36px;background:transparent;border:2px solid #0ff;border-radius:8px;color:#0ff;box-shadow:0 0 10px #0ff;position:relative;overflow:hidden;transition:.3s}
.button.neon-13::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:50%;background:linear-gradient(transparent,rgba(0,255,255,.1),transparent);animation:n13Scan 2s linear infinite}
.button.neon-13 span{position:relative;z-index:2}
.button.neon-13:hover{box-shadow:0 0 20px #0ff,0 0 60px #0ff;transform:scale(1.05)}
/* ============================================================
   N14 - NEON GRADIENT BORDER
   ============================================================ */
@keyframes n14Border{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.neon-14{position:relative;padding:14px 36px;background:var(--bg);color:#fff;border-radius:50px;z-index:1;transition:.3s}
.button.neon-14::before{content:'';position:absolute;inset:-2px;border-radius:52px;background:linear-gradient(90deg,#0ff,#f0f,#0f0,#f80,#0ff);background-size:300%;animation:n14Border 3s linear infinite;z-index:-1;box-shadow:0 0 15px rgba(0,255,255,.3)}
.button.neon-14::after{content:'';position:absolute;inset:2px;border-radius:48px;background:var(--bg);z-index:-1;transition:.3s}
.button.neon-14 span{position:relative;z-index:2}
.button.neon-14:hover::after{opacity:.6}
.button.neon-14:hover{transform:scale(1.08)}
/* ============================================================
   N15 - NEON SKEW
   ============================================================ */
.button.neon-15{padding:14px 36px;background:transparent;border:2px solid #f0f;color:#f0f;box-shadow:0 0 10px #f0f,0 0 30px #f0f;transform:skewX(-10deg);transition:.3s}
.button.neon-15 span{display:inline-block;transform:skewX(10deg)}
.button.neon-15:hover{transform:skewX(0deg) scale(1.1);background:#f0f;color:#000}
/* ============================================================
   N16 - NEON DOUBLE OUTLINE
   ============================================================ */
@keyframes n16Pulse{0%,100%{box-shadow:0 0 5px #0ff,0 0 15px #0ff,inset 0 0 5px #0ff}50%{box-shadow:0 0 15px #0ff,0 0 40px #0ff,inset 0 0 15px #0ff}}
.button.neon-16{padding:14px 36px;background:transparent;border:2px solid #0ff;outline:2px solid #0ff;outline-offset:4px;border-radius:50px;color:#0ff;animation:n16Pulse 2s ease infinite;transition:.3s}
.button.neon-16:hover{background:#0ff;color:#000;outline-offset:8px;transform:scale(1.05)}
/* ============================================================
   N17 - NEON BOTTOM LIGHT
   ============================================================ */
.button.neon-17{padding:14px 36px;background:rgba(255,255,255,.05);border:none;border-bottom:3px solid #0ff;border-radius:8px;color:#0ff;box-shadow:0 4px 15px rgba(0,255,255,.3);transition:.3s}
.button.neon-17:hover{border-bottom-width:3px;box-shadow:0 6px 25px rgba(0,255,255,.6),0 0 60px rgba(0,255,255,.2);transform:translateY(-4px)}
/* ============================================================
   N18 - NEON SPLIT
   ============================================================ */
@keyframes n18Split{0%,100%{text-shadow:2px 0 #f0f,-2px 0 #0ff}50%{text-shadow:4px 0 #f0f,-4px 0 #0ff}}
.button.neon-18{padding:14px 36px;background:transparent;border:2px solid #fff;border-radius:50px;color:#fff;animation:n18Split 1.5s ease infinite;transition:.3s}
.button.neon-18:hover{border-color:#f0f;box-shadow:0 0 20px #f0f,0 0 40px #0ff;transform:scale(1.08)}
/* ============================================================
   N19 - NEON CIRCUIT
   ============================================================ */
.button.neon-19{padding:14px 36px;background:transparent;border:2px solid #0f0;color:#0f0;box-shadow:0 0 10px #0f0;clip-path:polygon(8% 0%,100% 0%,92% 100%,0% 100%);transition:.3s;position:relative}
.button.neon-19 span{position:relative;z-index:2}
.button.neon-19:hover{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);background:#0f0;color:#000;box-shadow:0 0 30px #0f0,0 0 60px #0f0}
/* ============================================================
   N20 - NEON ULTIMATE
   ============================================================ */
@keyframes n20Multi{0%{border-color:#0ff;color:#0ff;text-shadow:0 0 10px #0ff;box-shadow:0 0 10px #0ff,0 0 30px #0ff,inset 0 0 10px rgba(0,255,255,.1)}33%{border-color:#f0f;color:#f0f;text-shadow:0 0 10px #f0f;box-shadow:0 0 10px #f0f,0 0 30px #f0f,inset 0 0 10px rgba(255,0,255,.1)}66%{border-color:#0f0;color:#0f0;text-shadow:0 0 10px #0f0;box-shadow:0 0 10px #0f0,0 0 30px #0f0,inset 0 0 10px rgba(0,255,0,.1)}100%{border-color:#0ff;color:#0ff;text-shadow:0 0 10px #0ff;box-shadow:0 0 10px #0ff,0 0 30px #0ff,inset 0 0 10px rgba(0,255,255,.1)}}
.button.neon-20{padding:16px 44px;background:transparent;border:2px solid #0ff;border-radius:50px;color:#0ff;font-size:1.1rem;font-weight:800;letter-spacing:3px;animation:n20Multi 4s ease infinite;transition:.3s}
.button.neon-20:hover{background:rgba(255,255,255,.1);transform:scale(1.12);box-shadow:0 0 20px #0ff,0 0 60px #f0f,0 0 100px #0f0}
/* ████████████████████████████████████████████████████████████████
   🔮 GLASS BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* G01 - FROSTED WHITE */
.button.glass-1{padding:14px 36px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:50px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.2);transition:.3s}
.button.glass-1:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);transform:scale(1.08);box-shadow:0 12px 40px rgba(0,0,0,.3)}
/* G02 - FROSTED CYAN */
.button.glass-2{padding:14px 36px;background:rgba(0,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(0,255,255,.25);border-radius:50px;color:#0ff;box-shadow:0 8px 32px rgba(0,255,255,.1);transition:.3s}
.button.glass-2:hover{background:rgba(0,255,255,.18);box-shadow:0 8px 40px rgba(0,255,255,.25);transform:scale(1.08)}
/* G03 - FROSTED PINK */
/* G03 - GLASS SPOTLIGHT SWEEP */
.button.glass-3{position:relative;padding:14px 36px;background:rgba(255,0,150,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,0,150,.25);border-radius:50px;color:#f472b6;box-shadow:0 8px 32px rgba(255,0,150,.08);transition:.3s;overflow:hidden;z-index:1}
.button.glass-3::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%) skewX(-30deg);transition:.6s;z-index:1}
.button.glass-3 span{position:relative;z-index:2}
.button.glass-3:hover::after{transform:translateX(100%) skewX(-30deg)}
.button.glass-3:hover{background:rgba(255,0,150,.15);border-color:rgba(255,0,150,.4);box-shadow:0 8px 40px rgba(255,0,150,.25);transform:scale(1.08)}
/* G04 - AURORA GLASS */
@keyframes g4Aurora{0%{background-position:0% 50%}100%{background-position:400% 50%}}
.button.glass-4{padding:14px 36px;background:linear-gradient(90deg,rgba(0,255,255,.1),rgba(255,0,255,.1),rgba(0,255,0,.1),rgba(0,255,255,.1));background-size:400%;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;animation:g4Aurora 6s linear infinite;transition:.3s}
.button.glass-4:hover{border-color:rgba(255,255,255,.35);transform:scale(1.08);box-shadow:0 0 30px rgba(0,255,255,.15)}
/* G05 - GLASS CARD */
.button.glass-5{padding:14px 36px;background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);transition:.3s}
.button.glass-5:hover{background:rgba(255,255,255,.12);transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
/* G06 - GLASS GRADIENT BORDER */
@keyframes g6Border{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.glass-6{position:relative;padding:14px 36px;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);border-radius:50px;color:#fff;z-index:1;transition:.3s}
.button.glass-6::before{content:'';position:absolute;inset:-1px;border-radius:51px;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(0,255,255,.3),rgba(255,0,255,.3),rgba(255,255,255,.3));background-size:300%;animation:g6Border 4s linear infinite;z-index:-1}
.button.glass-6::after{content:'';position:absolute;inset:1px;border-radius:49px;background:rgba(10,10,26,.8);backdrop-filter:blur(12px);z-index:-1;transition:.3s}
.button.glass-6 span{position:relative;z-index:2}
.button.glass-6:hover{transform:scale(1.08)}
.button.glass-6:hover::after{background:rgba(10,10,26,.5)}
/* G07 - GLASS PRISM */
@keyframes g7Prism{0%{background-position:0% 0%}100%{background-position:200% 200%}}
.button.glass-7{padding:14px 36px;background:linear-gradient(135deg,rgba(255,0,0,.06),rgba(255,255,0,.06),rgba(0,255,0,.06),rgba(0,255,255,.06),rgba(0,0,255,.06),rgba(255,0,255,.06));background-size:200%;backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;animation:g7Prism 5s linear infinite;transition:.3s}
.button.glass-7:hover{border-color:rgba(255,255,255,.35);transform:scale(1.08)}
/* G08 - ICE GLASS */
.button.glass-8{padding:14px 36px;background:rgba(180,220,255,.08);backdrop-filter:blur(14px);border:1px solid rgba(180,220,255,.2);border-radius:12px;color:#b4dcff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 4px 20px rgba(0,100,255,.1);transition:.3s}
.button.glass-8:hover{background:rgba(180,220,255,.18);transform:scale(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 30px rgba(0,100,255,.2)}
/* G09 - GLASS DARK */
.button.glass-9{padding:14px 36px;background:rgba(0,0,0,.4);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:50px;color:rgba(255,255,255,.8);box-shadow:0 8px 32px rgba(0,0,0,.5);transition:.3s}
.button.glass-9:hover{background:rgba(0,0,0,.6);color:#fff;border-color:rgba(255,255,255,.15);transform:scale(1.08)}
/* G10 - GLASS SPOTLIGHT */
@keyframes g10Shine{0%{left:-60%}100%{left:120%}}
.button.glass-10{padding:14px 36px;background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;position:relative;overflow:hidden;transition:.3s}
.button.glass-10::after{content:'';position:absolute;top:-50%;left:-60%;width:30%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);animation:g10Shine 4s ease-in-out infinite}
.button.glass-10 span{position:relative;z-index:2}
.button.glass-10:hover{background:rgba(255,255,255,.15);transform:scale(1.08)}
/* G11 - GLASS PILL GLOW */
@keyframes g11Glow{0%,100%{box-shadow:0 0 15px rgba(0,255,255,.1),0 8px 32px rgba(0,0,0,.2)}50%{box-shadow:0 0 25px rgba(0,255,255,.2),0 8px 32px rgba(0,0,0,.3)}}
.button.glass-11{padding:14px 36px;background:rgba(0,255,255,.05);backdrop-filter:blur(12px);border:1px solid rgba(0,255,255,.15);border-radius:50px;color:#fff;animation:g11Glow 3s ease infinite;transition:.3s}
.button.glass-11:hover{background:rgba(0,255,255,.12);border-color:rgba(0,255,255,.3);transform:scale(1.08)}
/* G12 - GLASS CYBER GRID */
@keyframes g12CyberGrid{from{background-position:0 0}to{background-position:16px 16px}}
.button.glass-12{position:relative;padding:14px 36px;background:rgba(128,0,255,.05);backdrop-filter:blur(14px);border:1px solid rgba(128,0,255,.2);border-radius:50px;color:#c084fc;box-shadow:0 8px 32px rgba(128,0,255,.1);transition:.3s;overflow:hidden;z-index:1}
.button.glass-12::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(192,132,252,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(192,132,252,.1) 1px,transparent 1px);background-size:8px 8px;opacity:.3;transition:.3s;z-index:-1}
.button.glass-12 span{position:relative;z-index:2}
.button.glass-12:hover::before{opacity:1;animation:g12CyberGrid .8s linear infinite;background-image:linear-gradient(rgba(192,132,252,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(192,132,252,.25) 1px,transparent 1px)}
.button.glass-12:hover{background:rgba(128,0,255,.15);border-color:rgba(192,132,252,.5);box-shadow:0 8px 40px rgba(128,0,255,.3);transform:scale(1.08)}
/* G13 - GLASS INSET SHADOW */
.button.glass-13{padding:14px 36px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;box-shadow:inset 0 2px 4px rgba(255,255,255,.1),inset 0 -2px 4px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.3);transition:.3s}
.button.glass-13:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);box-shadow:inset 0 2px 4px rgba(255,255,255,.15),inset 0 -2px 4px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.4)}
/* G14 - GLASS LIQUID WAVE */
@keyframes g14GlassWave{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.glass-14{position:relative;padding:14px 36px;background:rgba(52,211,153,.05);backdrop-filter:blur(12px);border:1px solid rgba(52,211,153,.2);border-radius:50px;color:#34d399;box-shadow:0 8px 32px rgba(52,211,153,.1);transition:.3s;overflow:hidden;z-index:1}
.button.glass-14::after{content:'';position:absolute;left:-25%;top:110%;width:150%;height:150%;background:rgba(52,211,153,.25);border-radius:40%;transition:top .6s cubic-bezier(.4,0,.2,1);z-index:-1;animation:g14GlassWave 6s linear infinite;pointer-events:none}
.button.glass-14 span{position:relative;z-index:2}
.button.glass-14:hover::after{top:-20%;background:rgba(52,211,153,.35)}
.button.glass-14:hover{border-color:rgba(52,211,153,.5);box-shadow:0 8px 40px rgba(52,211,153,.35);transform:scale(1.08);color:#fff}
/* G15 - GLASS FLOATING PARTICLES */
@keyframes g15FloatParticles{0%{transform:translateY(0) scale(1);opacity:.4}50%{transform:translateY(-8px) scale(1.2);opacity:.8}100%{transform:translateY(0) scale(1);opacity:.4}}
.button.glass-15{position:relative;padding:14px 36px;background:rgba(251,191,36,.04);backdrop-filter:blur(12px);border:1px solid rgba(251,191,36,.2);border-radius:50px;color:#fbbf24;box-shadow:0 8px 32px rgba(251,191,36,.06);transition:.3s;overflow:hidden;z-index:1}
.button.glass-15::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#fbbf24;box-shadow:12px -12px 0 #fbbf24,-24px 8px 0 #fbbf24,20px 10px 0 #f59e0b,-15px -10px 0 #f59e0b,5px 15px 0 #fbbf24;left:50%;top:50%;opacity:0;transition:.3s;z-index:-1}
.button.glass-15 span{position:relative;z-index:2}
.button.glass-15:hover::before{opacity:.8;animation:g15FloatParticles 3s ease-in-out infinite}
.button.glass-15:hover{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.45);box-shadow:0 8px 40px rgba(251,191,36,.2);transform:scale(1.08)}
/* G16 - GLASS MULTI LAYER */
.button.glass-16{position:relative;padding:14px 36px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:50px;color:#fff;z-index:1;transition:.3s}
.button.glass-16::before{content:'';position:absolute;inset:3px;border-radius:47px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);z-index:-1}
.button.glass-16:hover{background:rgba(255,255,255,.1);transform:scale(1.08)}
/* G17 - GLASS FLOAT */
@keyframes g17Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.button.glass-17{padding:14px 36px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;animation:g17Float 3s ease infinite;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:.3s}
.button.glass-17:hover{background:rgba(255,255,255,.16);box-shadow:0 14px 36px rgba(0,0,0,.35)}
/* G18 - GLASS REFRACTION BORDER */
.button.glass-18{position:relative;padding:14px 36px;background:transparent;color:#fb7185;border-radius:50px;z-index:1;transition:.3s;border:none}
.button.glass-18::before{content:'';position:absolute;inset:-1.5px;border-radius:52px;background:linear-gradient(90deg,#fb7185,transparent,#fbbf24,transparent,#fb7185);background-size:200%;z-index:-2;transition:.3s;opacity:.4}
.button.glass-18::after{content:'';position:absolute;inset:1.5px;border-radius:48px;background:rgba(255,50,100,.05);backdrop-filter:blur(12px);z-index:-1;transition:.3s}
.button.glass-18 span{position:relative;z-index:2}
.button.glass-18:hover::before{opacity:1;animation:slideGrad 2s linear infinite}
.button.glass-18:hover::after{background:rgba(255,50,100,.12)}
.button.glass-18:hover{color:#fff;transform:scale(1.08);box-shadow:0 8px 32px rgba(255,50,100,.2)}
/* G19 - GLASS OUTLINE ONLY */
.button.glass-19{padding:14px 36px;background:transparent;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:50px;color:rgba(255,255,255,.7);transition:.3s}
.button.glass-19:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff;transform:scale(1.08)}
/* G20 - GLASS ULTIMATE */
@keyframes g20Aurora{0%{background-position:0% 50%}100%{background-position:400% 50%}}
@keyframes g20Glow{0%,100%{box-shadow:0 0 20px rgba(0,255,255,.1),0 8px 32px rgba(0,0,0,.3)}50%{box-shadow:0 0 30px rgba(255,0,255,.15),0 12px 40px rgba(0,0,0,.4)}}
.button.glass-20{padding:16px 44px;background:linear-gradient(90deg,rgba(0,255,255,.08),rgba(255,0,255,.08),rgba(255,255,0,.08),rgba(0,255,255,.08));background-size:400%;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:50px;color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:3px;animation:g20Aurora 6s linear infinite,g20Glow 4s ease infinite;transition:.3s}
.button.glass-20:hover{border-color:rgba(255,255,255,.4);transform:scale(1.12)}
/* ████████████████████████████████████████████████████████████████
   🎭 NEUMORPHISM BUTTONS
   M01-M10: Nền tối (#1a1a2e)  |  M11-M20: Nền sáng (#e0e5ec)
   ████████████████████████████████████████████████████████████████ */
/* M01 - DARK RAISED→PRESSED */
.button.neu-1{padding:14px 36px;background:#1a1a2e;border:none;border-radius:50px;color:#888;box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745;transition:.25s}
.button.neu-1:hover{color:#fff;box-shadow:8px 8px 20px #0d0d1a,-8px -8px 20px #2d2d50;transform:scale(1.04)}
.button.neu-1:active{box-shadow:inset 4px 4px 10px #0d0d1a,inset -4px -4px 10px #272745;transform:scale(.98)}
/* M02 - DARK CONCAVE + CYAN FILL */
.button.neu-2{padding:14px 36px;background:#1a1a2e;border:none;border-radius:50px;color:#666;box-shadow:inset 3px 3px 8px #0d0d1a,inset -3px -3px 8px #272745;transition:.3s}
.button.neu-2:hover{box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745;background:linear-gradient(135deg,#0d7377,#14b8a6);color:#fff;transform:scale(1.05)}
/* M03 - DARK NEON RING PULSE */
@keyframes m3Ring{0%,100%{box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745,0 0 0 0 rgba(0,255,255,.5)}50%{box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745,0 0 0 8px rgba(0,255,255,0)}}
.button.neu-3{padding:14px 36px;background:#1a1a2e;border:none;border-radius:50px;color:#0ff;text-shadow:0 0 8px rgba(0,255,255,.4);animation:m3Ring 2.5s ease infinite;transition:.3s}
.button.neu-3:hover{background:linear-gradient(145deg,#1e1e35,#161628);color:#fff;transform:scale(1.06)}
/* M04 - DARK PURPLE GRADIENT */
.button.neu-4{padding:14px 36px;background:linear-gradient(135deg,#1a1a2e,#2a1a3e);border:none;border-radius:16px;color:#c084fc;box-shadow:6px 6px 18px #0d0d1a,-6px -6px 18px #272745,inset 0 1px 0 rgba(255,255,255,.05);transition:.3s}
.button.neu-4:hover{background:linear-gradient(135deg,#2a1a3e,#3a1a5e);color:#e9d5ff;border-radius:50px;transform:scale(1.06)}
/* M05 - DARK RAINBOW SHADOW FLOAT */
@keyframes m5Rainbow{0%{box-shadow:8px 12px 24px rgba(255,0,0,.12),-6px -6px 16px #272745}25%{box-shadow:8px 12px 24px rgba(255,255,0,.12),-6px -6px 16px #272745}50%{box-shadow:8px 12px 24px rgba(0,255,255,.12),-6px -6px 16px #272745}75%{box-shadow:8px 12px 24px rgba(255,0,255,.12),-6px -6px 16px #272745}100%{box-shadow:8px 12px 24px rgba(255,0,0,.12),-6px -6px 16px #272745}}
@keyframes m5Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.button.neu-5{padding:14px 36px;background:#1a1a2e;border:none;border-radius:50px;color:#fff;animation:m5Rainbow 5s linear infinite,m5Float 3s ease infinite}
/* M06 - DARK 3D STACK */
.button.neu-6{position:relative;padding:14px 36px;background:#1a1a2e;border:none;border-radius:14px;color:#f80;text-shadow:0 0 6px rgba(255,136,0,.2);box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745;transition:.3s;z-index:1}
.button.neu-6::after{content:'';position:absolute;inset:5px 3px -5px 3px;background:#161628;border-radius:14px;box-shadow:4px 4px 10px #0d0d1a;z-index:-1;transition:.3s}
.button.neu-6:hover{transform:translateY(-4px);color:#ffb347}
.button.neu-6:hover::after{inset:8px 5px -8px 5px}
/* M07 - DARK ICON CIRCLE */
.button.neu-7{width:56px;height:56px;padding:0;background:#1a1a2e;border:none;border-radius:50%;color:#0ff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745;transition:.3s}
.button.neu-7:hover{box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745,0 0 20px rgba(0,255,255,.3);transform:scale(1.15) rotate(15deg)}
/* M08 - DARK MORPH SHAPE */
@keyframes m8Morph{0%,100%{border-radius:50px 18px 50px 18px}50%{border-radius:18px 50px 18px 50px}}
.button.neu-8{padding:14px 36px;background:#1a1a2e;border:none;color:#f0f;text-shadow:0 0 8px rgba(255,0,255,.3);box-shadow:6px 6px 16px #0d0d1a,-6px -6px 16px #272745;animation:m8Morph 4s ease infinite;transition:color .3s}
.button.neu-8:hover{color:#fff}
/* M09 - DARK BREATHING */
@keyframes m9Breathe{0%,100%{box-shadow:3px 3px 8px #0d0d1a,-3px -3px 8px #272745}50%{box-shadow:10px 10px 28px #0d0d1a,-10px -10px 28px #272745}}
.button.neu-9{padding:14px 36px;background:linear-gradient(145deg,#1e1e35,#161628);border:none;border-radius:50px;color:#888;animation:m9Breathe 3s ease infinite;transition:color .3s}
.button.neu-9:hover{color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.4)}
/* M10 - DARK ULTIMATE */
@keyframes m10Glow{0%,100%{box-shadow:6px 6px 18px #0d0d1a,-6px -6px 18px #272745,0 0 15px rgba(0,255,255,.15)}50%{box-shadow:6px 6px 18px #0d0d1a,-6px -6px 18px #272745,0 0 25px rgba(255,0,255,.2)}}
@keyframes m10Color{0%,100%{color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.3)}50%{color:#f0f;text-shadow:0 0 10px rgba(255,0,255,.3)}}
.button.neu-10{padding:16px 44px;background:linear-gradient(145deg,#1e1e35,#161628);border:none;border-radius:50px;font-size:1.05rem;font-weight:800;letter-spacing:2px;animation:m10Glow 4s ease infinite,m10Color 4s ease infinite;transition:transform .3s}
.button.neu-10:hover{transform:scale(1.1)}
/* === LIGHT NEUMORPHISM (M11-M20) === */
.card-light{background:#e0e5ec!important;border-color:#d0d5dc!important}
.card-light .card-number{color:#a0a8b4}
.card-light .btn-name{color:#8890a0}
/* M11 - LIGHT RAISED */
.button.neu-11{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#6b7280;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-11:hover{color:#1f2937;box-shadow:8px 8px 18px #b8bec7,-8px -8px 18px #fff;transform:scale(1.04)}
.button.neu-11:active{box-shadow:inset 4px 4px 10px #b8bec7,inset -4px -4px 10px #fff}
/* M12 - LIGHT PRESSED→RAISED */
.button.neu-12{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#9ca3af;box-shadow:inset 3px 3px 8px #b8bec7,inset -3px -3px 8px #fff;transition:.3s}
.button.neu-12:hover{box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;color:#374151;transform:scale(1.04)}
/* M13 - LIGHT BLUE FILL */
.button.neu-13{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#3b82f6;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-13:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff,0 0 20px rgba(59,130,246,.3);transform:scale(1.05)}
/* M14 - NEUMORPHISM SUNKEN TOGGLE */
.button.neu-14{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#6b7280;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:all .3s cubic-bezier(.4,0,.2,1)}
.button.neu-14 span{position:relative;z-index:2;transition:color .3s}
.button.neu-14:hover{box-shadow:inset 5px 5px 10px #b8bec7,inset -5px -5px 10px #fff;color:#10b981;transform:scale(.97)}
/* M15 - LIGHT SQUARE→PILL */
.button.neu-15{padding:14px 36px;background:#e0e5ec;border:none;border-radius:12px;color:#6b7280;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-15:hover{border-radius:50px;color:#1f2937;transform:scale(1.05)}
/* M16 - LIGHT GRADIENT */
.button.neu-16{padding:14px 36px;background:linear-gradient(145deg,#e8ecf3,#d8dde4);border:none;border-radius:50px;color:#6b7280;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-16:hover{color:#1f2937;transform:scale(1.05)}
/* M17 - NEUMORPHISM RADAR RING */
@keyframes neuRadar{0%{box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff,0 0 0 0 rgba(239,68,68,.5)}100%{box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff,0 0 0 16px rgba(239,68,68,0)}}
.button.neu-17{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#ef4444;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-17 span{position:relative;z-index:2}
.button.neu-17:hover{animation:neuRadar 1.2s infinite;transform:scale(1.05);color:#dc2626}
/* M18 - LIGHT FLOAT */
@keyframes m18Float{0%,100%{transform:translateY(0);box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff}50%{transform:translateY(-5px);box-shadow:8px 12px 22px #b8bec7,-6px -6px 14px #fff}}
.button.neu-18{padding:14px 36px;background:#e0e5ec;border:none;border-radius:50px;color:#6b7280;animation:m18Float 3s ease infinite;transition:color .3s}
.button.neu-18:hover{color:#1f2937}
/* M19 - LIGHT ICON CIRCLE */
.button.neu-19{width:56px;height:56px;padding:0;background:#e0e5ec;border:none;border-radius:50%;color:#8b5cf6;font-size:1.3rem;display:flex;align-items:center;justify-content:center;box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff;transition:.3s}
.button.neu-19:hover{color:#7c3aed;box-shadow:8px 8px 18px #b8bec7,-8px -8px 18px #fff,0 0 15px rgba(139,92,246,.2);transform:scale(1.15) rotate(-10deg)}
/* M20 - LIGHT ULTIMATE */
@keyframes m20LGlow{0%,100%{box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff,0 0 0 rgba(59,130,246,0)}50%{box-shadow:6px 6px 14px #b8bec7,-6px -6px 14px #fff,0 0 20px rgba(59,130,246,.2)}}
.button.neu-20{padding:16px 44px;background:linear-gradient(145deg,#e8ecf3,#d8dde4);border:none;border-radius:50px;color:#3b82f6;font-size:1.05rem;font-weight:800;letter-spacing:2px;animation:m20LGlow 3s ease infinite;transition:.3s}
.button.neu-20:hover{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;transform:scale(1.1)}
/* ████████████████████████████████████████████████████████████████
   🚀 COSMIC / CREATIVE BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* C01 - NEBULA */
@keyframes c1Nebula{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.cos-1{padding:14px 36px;background:linear-gradient(90deg,#4a00e0,#8e2de2,#00d2ff,#4a00e0);background-size:300%;border:none;border-radius:50px;color:#fff;animation:c1Nebula 4s linear infinite;box-shadow:0 4px 25px rgba(142,45,226,.4);transition:.3s}
.button.cos-1:hover{transform:scale(1.1) rotate(-2deg);box-shadow:0 8px 40px rgba(142,45,226,.6);letter-spacing:2px}
/* C02 - METEOR TRAIL */
@keyframes c2Meteor{0%{left:-30%;opacity:1}100%{left:130%;opacity:0}}
.button.cos-2{padding:14px 36px;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);border:1px solid rgba(255,255,255,.1);border-radius:50px;color:#fff;position:relative;overflow:hidden;transition:.3s}
.button.cos-2::after{content:'';position:absolute;top:50%;left:-30%;width:20%;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);animation:c2Meteor 2.5s linear infinite;box-shadow:0 0 8px #fff,0 0 16px #0ff}
.button.cos-2 span{position:relative;z-index:2}
.button.cos-2:hover{border-color:rgba(255,255,255,.3);transform:scale(1.08);box-shadow:0 0 30px rgba(48,43,99,.5)}
/* C03 - AURORA BOREALIS */
@keyframes c3Aurora{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.button.cos-3{padding:14px 36px;background:linear-gradient(135deg,rgba(0,255,128,.15),rgba(0,200,255,.15),rgba(128,0,255,.15),rgba(255,0,128,.15));background-size:400% 400%;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:50px;color:#fff;animation:c3Aurora 6s ease infinite;transition:.3s}
.button.cos-3:hover{transform:scale(1.08);border-color:rgba(255,255,255,.35)}
/* C04 - BLACK HOLE */
@keyframes c4Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.cos-4{position:relative;padding:14px 36px;background:#000;border:none;border-radius:50px;color:#fff;z-index:1;transition:.3s}
.button.cos-4::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:conic-gradient(#ff0055,#0099ff,#22cc88,#ffcc00,#ff0055);animation:c4Spin 3s linear infinite;z-index:-2}
.button.cos-4::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#000;z-index:-1;transition:.3s}
.button.cos-4 span{position:relative;z-index:2}
.button.cos-4:hover{transform:scale(1.1)}
.button.cos-4:hover::after{background:rgba(0,0,0,.6)}
.button.cos-4:hover::before{filter:blur(4px);inset:-6px}
/* C05 - PLASMA ORB */
@keyframes c5Plasma{0%,100%{box-shadow:0 0 20px rgba(138,43,226,.4),inset 0 0 20px rgba(138,43,226,.1)}50%{box-shadow:0 0 40px rgba(0,200,255,.4),inset 0 0 30px rgba(0,200,255,.1)}}
.button.cos-5{padding:14px 36px;background:radial-gradient(circle at 30% 30%,rgba(138,43,226,.2),rgba(0,200,255,.1),transparent);backdrop-filter:blur(8px);border:1px solid rgba(138,43,226,.3);border-radius:50px;color:#d8b4fe;animation:c5Plasma 3s ease infinite;transition:.3s}
.button.cos-5:hover{transform:scale(1.08);color:#fff}
/* C06 - HOLOGRAPHIC */
@keyframes c6Holo{0%{background-position:0% 50%;filter:hue-rotate(0deg)}100%{background-position:200% 50%;filter:hue-rotate(360deg)}}
.button.cos-6{padding:14px 36px;background:linear-gradient(135deg,#ff6ec4,#7873f5,#4adede,#ff6ec4);background-size:200%;border:none;border-radius:50px;color:#fff;animation:c6Holo 5s linear infinite;box-shadow:0 4px 20px rgba(120,115,245,.3);transition:.3s}
.button.cos-6:hover{transform:scale(1.1);box-shadow:0 8px 40px rgba(120,115,245,.5)}
/* C07 - GALAXY SPIN */
@keyframes c7Galaxy{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.cos-7{position:relative;padding:14px 36px;background:radial-gradient(circle,#1a0533,#000);border:none;border-radius:50px;color:#e9d5ff;z-index:1;overflow:hidden;transition:.3s}
.button.cos-7::before{content:'';position:absolute;inset:-50%;background:conic-gradient(transparent,rgba(138,43,226,.3),transparent,rgba(0,200,255,.3),transparent);animation:c7Galaxy 6s linear infinite;z-index:-1}
.button.cos-7 span{position:relative;z-index:2}
.button.cos-7:hover{transform:scale(1.08);color:#fff}
/* C08 - COMET TAIL */
@keyframes c8Comet{0%{left:-40%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:140%;opacity:0}}
.button.cos-8{padding:14px 36px;background:linear-gradient(135deg,#0a0020,#1a0040);border:1px solid rgba(200,150,255,.15);border-radius:50px;color:#c4b5fd;position:relative;overflow:hidden;transition:.3s}
.button.cos-8::after{content:'';position:absolute;top:0;left:-40%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(196,181,253,.15),rgba(255,255,255,.05),transparent);animation:c8Comet 3s ease-in-out infinite;transform:skewX(-20deg)}
.button.cos-8 span{position:relative;z-index:2}
.button.cos-8:hover{border-color:rgba(200,150,255,.4);transform:scale(1.08)}
/* C09 - SUPERNOVA */
@keyframes c9Explode{0%,100%{box-shadow:0 0 10px rgba(255,100,0,.2)}50%{box-shadow:0 0 30px rgba(255,100,0,.4),0 0 60px rgba(255,200,0,.2),0 0 90px rgba(255,50,0,.1)}}
.button.cos-9{padding:14px 36px;background:radial-gradient(circle at 40% 40%,#ff6600,#cc3300,#660000);border:none;border-radius:50px;color:#fff;animation:c9Explode 2s ease infinite;transition:.3s}
.button.cos-9:hover{transform:scale(1.12);filter:brightness(1.2)}
/* C10 - WORMHOLE */
@keyframes c10Worm{0%{background-size:100% 100%}50%{background-size:200% 200%}100%{background-size:100% 100%}}
.button.cos-10{padding:14px 36px;background:radial-gradient(ellipse at center,#4a00e0,#000 70%);border:1px solid rgba(74,0,224,.3);border-radius:50px;color:#c4b5fd;animation:c10Worm 3s ease infinite;transition:.3s}
.button.cos-10:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(74,0,224,.4)}
/* C11 - ELECTRIC STORM */
@keyframes c11Storm{0%,100%{text-shadow:0 0 4px #fff,0 0 11px #fff,0 0 19px #0ff,0 0 40px #0ff}50%{text-shadow:0 0 4px #fff,0 0 11px #fff,0 0 19px #f0f,0 0 40px #f0f}}
.button.cos-11{padding:14px 36px;background:linear-gradient(135deg,#0a0a2e,#1a1a4e);border:1px solid rgba(0,255,255,.2);border-radius:50px;color:#fff;animation:c11Storm 2s ease infinite;transition:.3s}
.button.cos-11:hover{border-color:rgba(0,255,255,.5);transform:scale(1.08)}
/* C12 - LIQUID METAL */
@keyframes c12Metal{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.cos-12{padding:14px 36px;background:linear-gradient(90deg,#434343,#8e8e8e,#d4d4d4,#8e8e8e,#434343);background-size:200%;border:none;border-radius:50px;color:#000;font-weight:800;animation:c12Metal 3s linear infinite;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:.3s}
.button.cos-12:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(0,0,0,.5)}
/* C13 - LAVA FLOW */
@keyframes c13Lava{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.cos-13{padding:14px 36px;background:linear-gradient(90deg,#f12711,#f5af19,#f12711,#ff4e00,#f12711);background-size:300%;border:none;border-radius:50px;color:#fff;animation:c13Lava 3s linear infinite;box-shadow:0 4px 20px rgba(241,39,17,.3);transition:.3s}
.button.cos-13:hover{transform:scale(1.1);box-shadow:0 8px 35px rgba(241,39,17,.5)}
/* C14 - TOXIC */
@keyframes c14Toxic{0%,100%{box-shadow:0 0 15px rgba(0,255,0,.2),inset 0 0 15px rgba(0,255,0,.05)}50%{box-shadow:0 0 30px rgba(0,255,0,.4),inset 0 0 20px rgba(0,255,0,.1)}}
.button.cos-14{padding:14px 36px;background:linear-gradient(135deg,#0a1a0a,#1a3a1a);border:1px solid rgba(0,255,0,.2);border-radius:50px;color:#4ade80;animation:c14Toxic 2s ease infinite;transition:.3s}
.button.cos-14:hover{transform:scale(1.08);color:#fff;background:linear-gradient(135deg,#0f2,#0a0)}
/* C15 - DIAMOND */
@keyframes c15Sparkle{0%{left:-30%}100%{left:130%}}
.button.cos-15{padding:14px 36px;background:linear-gradient(135deg,#e0e0e0,#fff,#c0c0c0,#fff);border:none;border-radius:50px;color:#333;font-weight:800;position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15);transition:.3s}
.button.cos-15::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:rotate(25deg);animation:c15Sparkle 3s ease-in-out infinite}
.button.cos-15 span{position:relative;z-index:2}
.button.cos-15:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(0,0,0,.25)}
/* C16 - CYBER GLITCH */
@keyframes c16Glitch{0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}20%{clip-path:inset(20% 0 30% 0);transform:translate(-3px)}40%{clip-path:inset(60% 0 10% 0);transform:translate(3px)}60%{clip-path:inset(10% 0 70% 0);transform:translate(-2px)}80%{clip-path:inset(40% 0 20% 0);transform:translate(2px)}}
.button.cos-16{padding:14px 36px;background:linear-gradient(135deg,#ff0080,#7928ca);border:none;border-radius:8px;color:#fff;position:relative;transition:.3s}
.button.cos-16:hover{animation:c16Glitch .3s steps(5) infinite;transform:scale(1.05)}
/* C17 - OCEAN DEPTH */
@keyframes c17Ocean{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.cos-17{padding:14px 36px;background:linear-gradient(90deg,#000428,#004e92,#00b4db,#004e92,#000428);background-size:300%;border:none;border-radius:50px;color:#7dd3fc;animation:c17Ocean 5s linear infinite;box-shadow:0 4px 20px rgba(0,78,146,.3);transition:.3s}
.button.cos-17:hover{transform:scale(1.08);color:#fff;box-shadow:0 8px 35px rgba(0,78,146,.5)}
/* C18 - FIRE & ICE */
.button.cos-18{padding:14px 36px;background:linear-gradient(135deg,#f12711 0%,#f5af19 30%,#fff 50%,#00d2ff 70%,#3a7bd5 100%);border:none;border-radius:50px;color:#fff;background-size:200%;background-position:0%;transition:.5s;box-shadow:0 4px 20px rgba(241,39,17,.3)}
.button.cos-18:hover{background-position:100%;box-shadow:0 4px 20px rgba(58,123,213,.3);transform:scale(1.08)}
/* C19 - MATRIX */
@keyframes c19Matrix{0%{text-shadow:0 0 5px #0f0,0 0 10px #0f0}50%{text-shadow:0 0 20px #0f0,0 0 40px #0f0,0 0 60px #0f0}100%{text-shadow:0 0 5px #0f0,0 0 10px #0f0}}
.button.cos-19{padding:14px 36px;background:#000;border:1px solid #0f0;border-radius:8px;color:#0f0;font-family:'Courier New',monospace;animation:c19Matrix 2s ease infinite;transition:.3s}
.button.cos-19:hover{background:#0f0;color:#000;border-color:#0f0;box-shadow:0 0 30px rgba(0,255,0,.4);transform:scale(1.08)}
/* C20 - COSMIC ULTIMATE */
@keyframes c20Cosmic{0%{background-position:0% 50%;filter:hue-rotate(0deg)}100%{background-position:300% 50%;filter:hue-rotate(360deg)}}
@keyframes c20Float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
@keyframes c20Glow{0%,100%{box-shadow:0 0 15px rgba(255,0,100,.3),0 0 30px rgba(0,200,255,.2)}50%{box-shadow:0 0 25px rgba(0,200,255,.4),0 0 50px rgba(255,0,200,.3),0 0 80px rgba(255,200,0,.1)}}
.button.cos-20{padding:16px 44px;background:linear-gradient(90deg,#ff0080,#7928ca,#00d4ff,#ff0080);background-size:300%;border:none;border-radius:50px;color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:3px;animation:c20Cosmic 4s linear infinite,c20Float 3s ease infinite,c20Glow 3s ease infinite;transition:.3s}
.button.cos-20:hover{animation-duration:1.5s,1.5s,1.5s;transform:scale(1.15)}
/* ████████████████████████████████████████████████████████████████
   🌸 PASTEL BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* P01 - CANDY GRADIENT */
@keyframes p1Candy{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.pas-1{padding:14px 36px;background:linear-gradient(90deg,#fbc2eb,#a6c1ee,#fbc2eb);background-size:300%;border:none;border-radius:50px;color:#fff;animation:p1Candy 4s linear infinite;box-shadow:0 4px 20px rgba(251,194,235,.3);transition:.3s}
.button.pas-1:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(251,194,235,.5)}
/* P02 - LAVENDER FLOAT */
@keyframes p2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.button.pas-2{padding:14px 36px;background:linear-gradient(135deg,#c3cfe2,#d5b4f7);border:none;border-radius:50px;color:#5b4a7a;animation:p2Float 3s ease infinite;box-shadow:0 6px 20px rgba(197,180,247,.3);transition:.3s}
.button.pas-2:hover{color:#fff;background:linear-gradient(135deg,#b19ddb,#8b6fc0)}
/* P03 - PEACH GLOW */
@keyframes p3Glow{0%,100%{box-shadow:0 4px 15px rgba(255,182,153,.3)}50%{box-shadow:0 4px 30px rgba(255,182,153,.5)}}
.button.pas-3{padding:14px 36px;background:linear-gradient(135deg,#ffb699,#ffd1b3);border:none;border-radius:50px;color:#7a3e1f;animation:p3Glow 3s ease infinite;transition:.3s}
.button.pas-3:hover{background:linear-gradient(135deg,#ff9a76,#ffb699);color:#fff;transform:scale(1.08)}
/* P04 - MINT BOUNCE */
@keyframes p4Bounce{0%,100%{transform:scale(1)}30%{transform:scale(1.08)}50%{transform:scale(.98)}70%{transform:scale(1.03)}}
.button.pas-4{padding:14px 36px;background:linear-gradient(135deg,#a8edea,#bef5cb);border:none;border-radius:50px;color:#2a6f5a;box-shadow:0 4px 15px rgba(168,237,234,.3);transition:.3s}
.button.pas-4:hover{animation:p4Bounce .6s ease;background:linear-gradient(135deg,#72dbd3,#8eeaa0);color:#fff}
/* P05 - SAKURA */
@keyframes p5Sakura{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.pas-5{padding:14px 36px;background:linear-gradient(90deg,#ffecd2,#fcb69f,#ffecd2);background-size:200%;border:none;border-radius:50px;color:#8b5a3c;animation:p5Sakura 4s linear infinite;box-shadow:0 4px 15px rgba(252,182,159,.3);transition:.3s}
.button.pas-5:hover{transform:scale(1.08);color:#fff;box-shadow:0 8px 25px rgba(252,182,159,.5)}
/* P06 - SUNSET DREAM */
@keyframes p6Sunset{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.pas-6{padding:14px 36px;background:linear-gradient(90deg,#f6d365,#fda085,#f093fb,#f6d365);background-size:300%;border:none;border-radius:50px;color:#fff;animation:p6Sunset 5s linear infinite;box-shadow:0 4px 20px rgba(253,160,133,.3);transition:.3s}
.button.pas-6:hover{transform:scale(1.1) rotate(1deg);box-shadow:0 8px 35px rgba(240,147,251,.4)}
/* P07 - COTTON CANDY */
.button.pas-7{padding:14px 36px;background:linear-gradient(135deg,#e0c3fc,#8ec5fc);border:none;border-radius:50px;color:#fff;box-shadow:0 4px 20px rgba(224,195,252,.3);transition:.4s}
.button.pas-7:hover{background:linear-gradient(135deg,#8ec5fc,#e0c3fc);transform:scale(1.08);letter-spacing:2px}
/* P08 - BUBBLEGUM */
@keyframes p8Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.button.pas-8{padding:14px 36px;background:linear-gradient(135deg,#ff9a9e,#fecfef);border:none;border-radius:50px;color:#fff;animation:p8Pulse 2s ease infinite;box-shadow:0 4px 18px rgba(255,154,158,.3);transition:.3s}
.button.pas-8:hover{box-shadow:0 8px 30px rgba(255,154,158,.5);transform:scale(1.1)}
/* P09 - PASTEL OUTLINE */
.button.pas-9{padding:14px 36px;background:transparent;border:2px solid #dab5f5;border-radius:50px;color:#b388eb;transition:.3s}
.button.pas-9:hover{background:linear-gradient(135deg,#dab5f5,#b388eb);color:#fff;border-color:transparent;transform:scale(1.08)}
/* P10 - ICE CREAM */
@keyframes p10Slide{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.pas-10{padding:14px 36px;background:linear-gradient(90deg,#fce4ec,#f3e5f5,#e8eaf6,#e0f7fa,#fce4ec);background-size:200%;border:none;border-radius:50px;color:#7b6b8a;animation:p10Slide 5s linear infinite;box-shadow:0 4px 15px rgba(243,229,245,.5);transition:.3s}
.button.pas-10:hover{transform:scale(1.08);color:#4a3660}
/* P11 - CORAL SHINE */
@keyframes p11Shine{0%{left:-40%}100%{left:140%}}
.button.pas-11{padding:14px 36px;background:linear-gradient(135deg,#ff9a9e,#fad0c4);border:none;border-radius:50px;color:#fff;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(255,154,158,.3);transition:.3s}
.button.pas-11::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(25deg);animation:p11Shine 3s ease-in-out infinite}
.button.pas-11 span{position:relative;z-index:2}
.button.pas-11:hover{transform:scale(1.08)}
/* P12 - SKY GLASS */
.button.pas-12{padding:14px 36px;background:rgba(142,197,252,.15);backdrop-filter:blur(10px);border:1px solid rgba(142,197,252,.3);border-radius:50px;color:#4a90d9;box-shadow:0 4px 15px rgba(142,197,252,.15);transition:.3s}
.button.pas-12:hover{background:rgba(142,197,252,.3);border-color:rgba(142,197,252,.5);color:#2563eb;transform:scale(1.08)}
/* P13 - LEMON DROP */
.button.pas-13{padding:14px 36px;background:linear-gradient(135deg,#fdfc47,#24fe41);border:none;border-radius:50px;color:#2a5a1a;box-shadow:0 4px 15px rgba(253,252,71,.2);transition:.3s}
.button.pas-13:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(36,254,65,.3)}
/* P14 - ROSE GOLD */
@keyframes p14Glow{0%,100%{box-shadow:0 4px 15px rgba(235,168,168,.3)}50%{box-shadow:0 4px 30px rgba(235,168,168,.5)}}
.button.pas-14{padding:14px 36px;background:linear-gradient(135deg,#f5cec7,#e79796,#ffc3a1);border:none;border-radius:50px;color:#fff;animation:p14Glow 3s ease infinite;transition:.3s}
.button.pas-14:hover{transform:scale(1.08)}
/* P15 - PASTEL RAINBOW */
@keyframes p15Rainbow{0%{background-position:0% 50%}100%{background-position:400% 50%}}
.button.pas-15{padding:14px 36px;background:linear-gradient(90deg,#ff9a9e,#fad0c4,#a1c4fd,#c2e9fb,#d4fc79,#ff9a9e);background-size:400%;border:none;border-radius:50px;color:#fff;animation:p15Rainbow 6s linear infinite;box-shadow:0 4px 20px rgba(161,196,253,.3);transition:.3s}
.button.pas-15:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(161,196,253,.5)}
/* P16 - BLUEBERRY */
.button.pas-16{padding:14px 36px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;color:#fff;box-shadow:0 4px 20px rgba(102,126,234,.3);transition:.3s}
.button.pas-16:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 8px 30px rgba(118,75,162,.4)}
/* P17 - PASTEL NEU */
.button.pas-17{padding:14px 36px;background:#f0e6ff;border:none;border-radius:50px;color:#8b6fc0;box-shadow:5px 5px 12px #d4c6e8,-5px -5px 12px #fff;transition:.3s}
.button.pas-17:hover{color:#6c4fa0;box-shadow:7px 7px 16px #d4c6e8,-7px -7px 16px #fff;transform:scale(1.05)}
/* P18 - PASTEL FLOATING BUBBLE */
@keyframes p18BubbleUp{0%{bottom:-10px;transform:translateX(0);opacity:0}20%{opacity:.6}80%{opacity:.6}100%{bottom:100%;transform:translateX(8px);opacity:0}}
.button.pas-18{position:relative;padding:14px 36px;background:linear-gradient(135deg,#ff9a9e,#fecfef);border:none;border-radius:50px;color:#c026d3;box-shadow:0 4px 18px rgba(255,154,158,.3);transition:.3s;overflow:hidden;z-index:1}
.button.pas-18::before{content:'';position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:-16px 12px 0 rgba(255,255,255,.4),16px 20px 0 rgba(255,255,255,.3),-8px 28px 0 rgba(255,255,255,.2),24px 8px 0 rgba(255,255,255,.2);z-index:-1;opacity:0;pointer-events:none}
.button.pas-18 span{position:relative;z-index:2}
.button.pas-18:hover::before{opacity:1;animation:p18BubbleUp 1.5s linear infinite}
.button.pas-18:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(255,154,158,.5);color:#a21caf}
/* P19 - AURORA PASTEL */
@keyframes p19Aurora{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.button.pas-19{padding:14px 36px;background:linear-gradient(135deg,rgba(255,154,158,.4),rgba(254,207,199,.3),rgba(161,196,253,.4),rgba(194,233,251,.3));background-size:400% 400%;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:50px;color:#7b6b8a;animation:p19Aurora 6s ease infinite;transition:.3s}
.button.pas-19:hover{transform:scale(1.08);color:#4a3660}
/* P20 - PASTEL ULTIMATE */
@keyframes p20Dream{0%{background-position:0% 50%;filter:hue-rotate(0deg)}100%{background-position:300% 50%;filter:hue-rotate(60deg)}}
@keyframes p20Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.button.pas-20{padding:16px 44px;background:linear-gradient(90deg,#fbc2eb,#a6c1ee,#d4fc79,#fda085,#fbc2eb);background-size:300%;border:none;border-radius:50px;color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:3px;animation:p20Dream 5s linear infinite,p20Float 3s ease infinite;box-shadow:0 6px 25px rgba(251,194,235,.4);transition:.3s}
.button.pas-20:hover{transform:scale(1.12);box-shadow:0 10px 40px rgba(166,193,238,.5)}
/* ████████████████████████████████████████████████████████████████
   🎮 GAMING BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* G01 - LEGENDARY GOLD */
@keyframes gm1Gold{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes gm1Pulse{0%,100%{box-shadow:0 0 15px rgba(255,200,0,.4),0 0 30px rgba(255,150,0,.2),inset 0 0 15px rgba(255,200,0,.1)}50%{box-shadow:0 0 25px rgba(255,200,0,.6),0 0 50px rgba(255,150,0,.3),inset 0 0 25px rgba(255,200,0,.15)}}
@keyframes gm1Shine{0%{left:-40%}100%{left:140%}}
.button.gm-1{padding:16px 40px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#bf953f);background-size:300%;border:none;border-radius:8px;color:#3a2500;font-weight:800;font-size:1rem;letter-spacing:1px;text-transform:uppercase;animation:gm1Gold 3s linear infinite,gm1Pulse 2s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.gm-1::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(25deg);animation:gm1Shine 2s ease-in-out infinite}
.button.gm-1 span{position:relative;z-index:2}
.button.gm-1:hover{transform:scale(1.1);filter:brightness(1.15)}
/* G02 - EPIC PURPLE */
@keyframes gm2Epic{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes gm2Glow{0%,100%{box-shadow:0 0 15px rgba(168,85,247,.4),0 4px 20px rgba(0,0,0,.3)}50%{box-shadow:0 0 30px rgba(168,85,247,.6),0 4px 30px rgba(0,0,0,.4)}}
.button.gm-2{padding:16px 40px;background:linear-gradient(90deg,#7c3aed,#a855f7,#c084fc,#a855f7,#7c3aed);background-size:300%;border:2px solid rgba(196,181,253,.3);border-radius:8px;color:#fff;font-weight:800;text-transform:uppercase;animation:gm2Epic 3s linear infinite,gm2Glow 2s ease infinite;transition:.3s}
.button.gm-2:hover{transform:scale(1.1);border-color:rgba(196,181,253,.6)}
/* G03 - RARE BLUE */
@keyframes gm3Glow{0%,100%{box-shadow:0 0 10px rgba(59,130,246,.3),0 4px 15px rgba(0,0,0,.3)}50%{box-shadow:0 0 25px rgba(59,130,246,.5),0 4px 25px rgba(0,0,0,.4)}}
.button.gm-3{padding:16px 40px;background:linear-gradient(135deg,#1e40af,#3b82f6,#60a5fa);border:2px solid rgba(96,165,250,.3);border-radius:8px;color:#fff;font-weight:800;text-transform:uppercase;animation:gm3Glow 2s ease infinite;transition:.3s}
.button.gm-3:hover{transform:scale(1.1);border-color:rgba(96,165,250,.6)}
/* G04 - PLAY NOW (aggressive CTA) */
@keyframes gm4Shake{0%,100%{transform:scale(1)}10%{transform:scale(1.05) rotate(-1deg)}20%{transform:scale(1.05) rotate(1deg)}30%{transform:scale(1)}85%{transform:scale(1)}90%{transform:scale(1.03)}95%{transform:scale(1)}}
@keyframes gm4Glow{0%,100%{box-shadow:0 0 15px rgba(34,197,94,.4),0 6px 20px rgba(0,0,0,.3)}50%{box-shadow:0 0 30px rgba(34,197,94,.6),0 6px 30px rgba(0,0,0,.4)}}
.button.gm-4{padding:18px 50px;background:linear-gradient(135deg,#15803d,#22c55e,#4ade80);border:none;border-radius:8px;color:#fff;font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;animation:gm4Shake 3s ease infinite,gm4Glow 2s ease infinite;transition:.3s}
.button.gm-4:hover{transform:scale(1.12);filter:brightness(1.1)}
/* G05 - SUMMON / GACHA */
@keyframes gm5Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes gm5Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.button.gm-5{position:relative;padding:16px 40px;background:linear-gradient(135deg,#1a0533,#2d1b69);border:2px solid rgba(168,85,247,.4);border-radius:12px;color:#e9d5ff;font-weight:800;text-transform:uppercase;z-index:1;animation:gm5Pulse 2s ease infinite;transition:.3s;overflow:hidden}
.button.gm-5::before{content:'';position:absolute;inset:-50%;background:conic-gradient(transparent 60%,rgba(168,85,247,.3) 70%,transparent 80%);animation:gm5Spin 4s linear infinite;z-index:-1}
.button.gm-5 span{position:relative;z-index:2}
.button.gm-5:hover{border-color:rgba(168,85,247,.8);transform:scale(1.08);box-shadow:0 0 30px rgba(168,85,247,.4)}
/* G06 - CLAIM REWARD */
@keyframes gm6Bounce{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(-3px) scale(1.02)}30%{transform:translateY(0) scale(1)}80%{transform:scale(1)}85%{transform:scale(1.03)}90%{transform:scale(1)}}
.button.gm-6{padding:16px 40px;background:linear-gradient(135deg,#f59e0b,#fbbf24,#fde68a);border:none;border-radius:8px;color:#78350f;font-weight:900;text-transform:uppercase;box-shadow:0 4px 0 #b45309,0 6px 20px rgba(0,0,0,.3);animation:gm6Bounce 2s ease infinite;transition:.15s;position:relative;top:0}
.button.gm-6:hover{top:2px;box-shadow:0 2px 0 #b45309,0 3px 10px rgba(0,0,0,.2)}
.button.gm-6:active{top:4px;box-shadow:0 0 0 #b45309}
/* G07 - POWER UP CHARGE */
@keyframes gm7Charge{0%{width:0;left:0}50%{width:100%;left:0}100%{width:0;left:100%}}
@keyframes gm7Glow{0%,100%{box-shadow:0 0 10px rgba(0,200,255,.2)}50%{box-shadow:0 0 25px rgba(0,200,255,.5),0 0 50px rgba(0,200,255,.2)}}
.button.gm-7{padding:16px 40px;background:#0c1222;border:2px solid #0ea5e9;border-radius:8px;color:#7dd3fc;font-weight:800;text-transform:uppercase;position:relative;overflow:hidden;animation:gm7Glow 2s ease infinite;transition:.3s}
.button.gm-7::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#0ea5e9,#38bdf8,#7dd3fc);animation:gm7Charge 2s linear infinite}
.button.gm-7 span{position:relative;z-index:2}
.button.gm-7:hover{background:#0f172a;transform:scale(1.05)}
/* G08 - RAGE MODE */
@keyframes gm8Rage{0%,100%{transform:translateX(0)}5%{transform:translateX(-2px) rotate(-.5deg)}10%{transform:translateX(2px) rotate(.5deg)}15%{transform:translateX(-1px)}20%{transform:translateX(1px)}25%{transform:translateX(0)}}
@keyframes gm8Fire{0%,100%{box-shadow:0 0 15px rgba(239,68,68,.4),inset 0 -5px 15px rgba(239,68,68,.2)}50%{box-shadow:0 0 30px rgba(239,68,68,.6),inset 0 -10px 25px rgba(239,68,68,.3)}}
.button.gm-8{padding:16px 40px;background:linear-gradient(135deg,#7f1d1d,#dc2626,#ef4444);border:2px solid rgba(239,68,68,.5);border-radius:8px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:gm8Rage 2s ease infinite,gm8Fire 1.5s ease infinite;transition:.3s}
.button.gm-8:hover{transform:scale(1.1);filter:brightness(1.2)}
/* G09 - XP BOOST */
@keyframes gm9Slide{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.gm-9{padding:16px 40px;background:linear-gradient(90deg,#065f46,#10b981,#34d399,#10b981,#065f46);background-size:200%;border:none;border-radius:8px;color:#fff;font-weight:800;text-transform:uppercase;animation:gm9Slide 2s linear infinite;box-shadow:0 4px 0 #064e3b,0 6px 15px rgba(0,0,0,.3);transition:.15s;position:relative;top:0}
.button.gm-9:hover{top:2px;box-shadow:0 2px 0 #064e3b,0 3px 8px rgba(0,0,0,.2)}
/* G10 - BOSS FIGHT */
@keyframes gm10Boss{0%,100%{text-shadow:0 0 10px rgba(239,68,68,.5);box-shadow:0 0 15px rgba(239,68,68,.3),inset 0 0 15px rgba(239,68,68,.1)}50%{text-shadow:0 0 20px rgba(255,200,0,.6);box-shadow:0 0 25px rgba(255,200,0,.4),inset 0 0 20px rgba(255,200,0,.1)}}
.button.gm-10{padding:16px 40px;background:linear-gradient(135deg,#1a0000,#3a0000,#5a0000);border:2px solid;border-image:linear-gradient(90deg,#ef4444,#f59e0b,#ef4444) 1;color:#fbbf24;font-weight:900;text-transform:uppercase;letter-spacing:3px;animation:gm10Boss 2s ease infinite;transition:.3s}
.button.gm-10:hover{transform:scale(1.08)}
/* G11 - LOOT DROP */
@keyframes gm11Drop{0%,70%{transform:translateY(0)}75%{transform:translateY(-8px)}80%{transform:translateY(0)}85%{transform:translateY(-4px)}90%{transform:translateY(0)}}
.button.gm-11{padding:16px 40px;background:linear-gradient(135deg,#78350f,#a16207,#ca8a04);border:2px solid rgba(253,224,71,.3);border-radius:8px;color:#fef3c7;font-weight:800;text-transform:uppercase;box-shadow:0 0 15px rgba(202,138,4,.3);animation:gm11Drop 3s ease infinite;transition:.3s}
.button.gm-11:hover{border-color:rgba(253,224,71,.6);transform:scale(1.08)}
/* G12 - SHIELD (tank style) */
.button.gm-12{padding:16px 40px;background:linear-gradient(135deg,#334155,#475569,#64748b);border:3px solid #94a3b8;border-radius:8px;color:#f1f5f9;font-weight:800;text-transform:uppercase;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 4px 0 #1e293b,0 6px 15px rgba(0,0,0,.4);transition:.15s;position:relative;top:0}
.button.gm-12:hover{top:2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 2px 0 #1e293b,0 3px 8px rgba(0,0,0,.3)}
/* G13 - MANA / MAGIC */
@keyframes gm13Mana{0%,100%{box-shadow:0 0 15px rgba(99,102,241,.3),inset 0 0 20px rgba(99,102,241,.1)}50%{box-shadow:0 0 30px rgba(99,102,241,.5),inset 0 0 30px rgba(99,102,241,.15)}}
@keyframes gm13Sparkle{0%{left:-30%}100%{left:130%}}
.button.gm-13{padding:16px 40px;background:linear-gradient(135deg,#1e1b4b,#3730a3,#4f46e5);border:1px solid rgba(129,140,248,.3);border-radius:8px;color:#c7d2fe;font-weight:800;text-transform:uppercase;animation:gm13Mana 2s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.gm-13::after{content:'';position:absolute;top:-50%;left:-30%;width:15%;height:200%;background:linear-gradient(90deg,transparent,rgba(199,210,254,.3),transparent);transform:rotate(25deg);animation:gm13Sparkle 2.5s ease-in-out infinite}
.button.gm-13 span{position:relative;z-index:2}
.button.gm-13:hover{transform:scale(1.08)}
/* G14 - HEALTH POTION */
@keyframes gm14Bubble{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.button.gm-14{padding:16px 40px;background:linear-gradient(180deg,#dc2626 60%,#991b1b 60%);border:3px solid #7f1d1d;border-radius:12px;color:#fecaca;font-weight:800;text-transform:uppercase;box-shadow:inset 0 -5px 15px rgba(0,0,0,.2),0 4px 15px rgba(220,38,38,.3);animation:gm14Bubble 2s ease infinite;transition:.3s}
.button.gm-14:hover{transform:scale(1.08);box-shadow:inset 0 -5px 15px rgba(0,0,0,.2),0 8px 25px rgba(220,38,38,.5)}
/* G15 - DIAMOND CURRENCY */
@keyframes gm15Rotate{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(30deg)}}
@keyframes gm15Flash{0%{left:-30%}100%{left:130%}}
.button.gm-15{padding:16px 40px;background:linear-gradient(135deg,#7dd3fc,#38bdf8,#0ea5e9,#38bdf8);border:none;border-radius:8px;color:#fff;font-weight:900;text-transform:uppercase;animation:gm15Rotate 3s linear infinite;box-shadow:0 4px 20px rgba(14,165,233,.3);position:relative;overflow:hidden;transition:.3s}
.button.gm-15::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(25deg);animation:gm15Flash 2s ease-in-out infinite}
.button.gm-15 span{position:relative;z-index:2}
.button.gm-15:hover{transform:scale(1.1)}
/* G16 - COUNTDOWN TIMER */
@keyframes gm16Urgency{0%,100%{border-color:rgba(239,68,68,.5);box-shadow:0 0 10px rgba(239,68,68,.2)}50%{border-color:rgba(239,68,68,1);box-shadow:0 0 20px rgba(239,68,68,.5)}}
.button.gm-16{padding:16px 40px;background:#1a0000;border:2px solid rgba(239,68,68,.5);border-radius:8px;color:#ef4444;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:gm16Urgency 1s ease infinite;transition:.3s}
.button.gm-16:hover{background:#ef4444;color:#fff;transform:scale(1.08)}
/* G17 - LEVEL UP */
@keyframes gm17Up{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gm17Stars{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.gm-17{padding:16px 40px;background:linear-gradient(90deg,#f59e0b,#fbbf24,#fff,#fbbf24,#f59e0b);background-size:200%;border:none;border-radius:8px;color:#78350f;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:gm17Up 2s ease infinite,gm17Stars 2s linear infinite;box-shadow:0 4px 25px rgba(245,158,11,.4);transition:.3s}
.button.gm-17:hover{transform:scale(1.1);filter:brightness(1.1)}
/* G18 - STEALTH */
.button.gm-18{padding:16px 40px;background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.6);font-weight:800;text-transform:uppercase;letter-spacing:3px;box-shadow:0 4px 15px rgba(0,0,0,.5);transition:.4s}
.button.gm-18:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3);color:#fff;letter-spacing:5px;box-shadow:0 0 20px rgba(255,255,255,.1)}
/* G19 - NUCLEAR */
@keyframes gm19Nuke{0%,100%{box-shadow:0 0 20px rgba(255,200,0,.3),0 0 40px rgba(255,100,0,.15)}50%{box-shadow:0 0 35px rgba(255,200,0,.5),0 0 70px rgba(255,100,0,.25),0 0 100px rgba(255,50,0,.1)}}
@keyframes gm19Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.button.gm-19{padding:16px 40px;background:radial-gradient(circle at 50% 40%,#fde68a,#f59e0b,#dc2626,#7f1d1d);border:none;border-radius:8px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 10px rgba(255,200,0,.5);animation:gm19Nuke 2s ease infinite,gm19Pulse 1.5s ease infinite;transition:.3s}
.button.gm-19:hover{transform:scale(1.12);filter:brightness(1.15)}
/* G20 - ULTIMATE GAMING */
@keyframes gm20Bg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes gm20Border{0%{border-color:rgba(255,200,0,.6)}33%{border-color:rgba(168,85,247,.6)}66%{border-color:rgba(239,68,68,.6)}100%{border-color:rgba(255,200,0,.6)}}
@keyframes gm20Text{0%,100%{text-shadow:0 0 10px rgba(255,200,0,.5)}33%{text-shadow:0 0 10px rgba(168,85,247,.5)}66%{text-shadow:0 0 10px rgba(239,68,68,.5)}}
@keyframes gm20Shake{0%,85%,100%{transform:scale(1) rotate(0)}88%{transform:scale(1.03) rotate(-.5deg)}91%{transform:scale(1.03) rotate(.5deg)}94%{transform:scale(1)}}
.button.gm-20{padding:18px 50px;background:linear-gradient(90deg,#bf953f,#7c3aed,#dc2626,#bf953f);background-size:300%;border:3px solid rgba(255,200,0,.6);border-radius:8px;color:#fde68a;font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:3px;animation:gm20Bg 4s linear infinite,gm20Border 4s ease infinite,gm20Text 4s ease infinite,gm20Shake 3s ease infinite;transition:.3s;position:relative;overflow:hidden}
.button.gm-20::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(25deg);animation:gm1Shine 2s ease-in-out infinite}
.button.gm-20 span{position:relative;z-index:2}
.button.gm-20:hover{transform:scale(1.12);filter:brightness(1.15)}
/* ████████████████████████████████████████████████████████████████
   ⚔️ BATTLE / PVP BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* B01 - CRITICAL HIT */
@keyframes bt1Crit{0%,80%{transform:scale(1);filter:brightness(1)}85%{transform:scale(1.15);filter:brightness(1.4)}90%{transform:scale(.98)}95%{transform:scale(1.05)}100%{transform:scale(1)}}
.button.bt-1{padding:16px 40px;background:linear-gradient(135deg,#7f1d1d,#b91c1c);border:2px solid #fca5a5;border-radius:4px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:bt1Crit 2.5s ease infinite;box-shadow:0 0 20px rgba(185,28,28,.4);transition:.3s}
.button.bt-1:hover{box-shadow:0 0 40px rgba(185,28,28,.6)}
/* B02 - COMBO x99 */
@keyframes bt2Combo{0%,100%{text-shadow:0 0 8px rgba(255,200,0,.5)}50%{text-shadow:0 0 20px rgba(255,200,0,.8),0 0 40px rgba(255,100,0,.4)}}
@keyframes bt2Shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
.button.bt-2{padding:16px 40px;background:linear-gradient(135deg,#78350f,#b45309);border:2px solid #fbbf24;border-radius:4px;color:#fde68a;font-weight:900;text-transform:uppercase;letter-spacing:1px;animation:bt2Combo 1s ease infinite,bt2Shake .15s ease infinite;transition:.3s}
.button.bt-2:hover{transform:scale(1.1)}
/* B03 - ARENA ENTER */
@keyframes bt3Gate{0%{border-color:rgba(239,68,68,.4);box-shadow:inset 0 0 20px rgba(239,68,68,.1)}50%{border-color:rgba(245,158,11,.4);box-shadow:inset 0 0 30px rgba(245,158,11,.15)}100%{border-color:rgba(239,68,68,.4);box-shadow:inset 0 0 20px rgba(239,68,68,.1)}}
.button.bt-3{padding:18px 50px;background:linear-gradient(135deg,#0a0000,#1a0505);border:3px solid;border-radius:0;color:#ef4444;font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:4px;animation:bt3Gate 2s ease infinite;transition:.3s}
.button.bt-3:hover{color:#fbbf24;transform:scale(1.05);letter-spacing:6px}
/* B04 - ASSASSIN */
@keyframes bt4Fade{0%,100%{opacity:1}50%{opacity:.6}}
.button.bt-4{padding:16px 40px;background:linear-gradient(135deg,#000,#1a1a2e);border:1px solid rgba(168,85,247,.3);border-radius:4px;color:rgba(168,85,247,.8);font-weight:800;text-transform:uppercase;letter-spacing:3px;animation:bt4Fade 3s ease infinite;transition:.4s}
.button.bt-4:hover{opacity:1;color:#a855f7;border-color:#a855f7;box-shadow:0 0 25px rgba(168,85,247,.3);letter-spacing:5px}
/* B05 - BERSERKER */
@keyframes bt5Rage{0%,100%{transform:translateX(0)}2%{transform:translateX(-3px)}4%{transform:translateX(3px)}6%{transform:translateX(-2px)}8%{transform:translateX(2px)}10%{transform:translateX(0)}}
@keyframes bt5Fire{0%{box-shadow:0 -5px 15px rgba(239,68,68,.3),0 0 0 transparent}50%{box-shadow:0 -10px 25px rgba(255,150,0,.4),0 -15px 35px rgba(239,68,68,.2)}100%{box-shadow:0 -5px 15px rgba(239,68,68,.3),0 0 0 transparent}}
.button.bt-5{padding:16px 40px;background:linear-gradient(0deg,#7f1d1d,#dc2626,#ef4444);border:none;border-radius:4px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:bt5Rage 1s ease infinite,bt5Fire 1.5s ease infinite;transition:.3s}
.button.bt-5:hover{filter:brightness(1.3);transform:scale(1.08)}
/* B06 - DRAGON FIRE */
@keyframes bt6Dragon{0%{background-position:0% 0%}100%{background-position:0% 300%}}
.button.bt-6{padding:16px 40px;background:linear-gradient(180deg,#fde68a,#f59e0b,#ea580c,#dc2626,#7f1d1d,#dc2626,#ea580c,#f59e0b,#fde68a);background-size:100% 300%;border:none;border-radius:4px;color:#fff;font-weight:900;text-transform:uppercase;text-shadow:0 0 10px rgba(0,0,0,.5);animation:bt6Dragon 2s linear infinite;transition:.3s}
.button.bt-6:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(234,88,12,.5)}
/* B07 - ICE WIZARD */
@keyframes bt7Ice{0%,100%{box-shadow:0 0 15px rgba(56,189,248,.3),inset 0 0 15px rgba(56,189,248,.1)}50%{box-shadow:0 0 30px rgba(56,189,248,.5),inset 0 0 25px rgba(56,189,248,.15)}}
.button.bt-7{padding:16px 40px;background:linear-gradient(135deg,#0c4a6e,#0284c7,#38bdf8);border:1px solid rgba(186,230,253,.3);border-radius:4px;color:#e0f2fe;font-weight:800;text-transform:uppercase;animation:bt7Ice 2s ease infinite;transition:.3s}
.button.bt-7:hover{transform:scale(1.08);border-color:rgba(186,230,253,.6)}
/* B08 - THUNDER STRIKE */
@keyframes bt8Thunder{0%,90%,100%{opacity:1;box-shadow:0 0 10px rgba(250,204,21,.2)}93%{opacity:.3;box-shadow:0 0 40px rgba(250,204,21,.8)}96%{opacity:1;box-shadow:0 0 10px rgba(250,204,21,.2)}}
.button.bt-8{padding:16px 40px;background:linear-gradient(135deg,#1a1a00,#3a3a00);border:2px solid #facc15;border-radius:4px;color:#facc15;font-weight:900;text-transform:uppercase;animation:bt8Thunder 3s ease infinite;transition:.3s}
.button.bt-8:hover{background:#facc15;color:#000;transform:scale(1.08)}
/* B09 - BLOOD MOON */
@keyframes bt9Moon{0%,100%{box-shadow:0 0 20px rgba(185,28,28,.3),0 0 40px rgba(185,28,28,.15)}50%{box-shadow:0 0 30px rgba(185,28,28,.5),0 0 60px rgba(185,28,28,.25)}}
.button.bt-9{padding:16px 40px;background:radial-gradient(circle at 30% 30%,#450a0a,#7f1d1d,#991b1b);border:2px solid rgba(252,165,165,.2);border-radius:50%;color:#fca5a5;font-weight:800;text-transform:uppercase;animation:bt9Moon 3s ease infinite;transition:.3s}
.button.bt-9:hover{transform:scale(1.1);border-color:rgba(252,165,165,.5)}
/* B10 - DARK KNIGHT */
.button.bt-10{padding:16px 40px;background:linear-gradient(135deg,#000,#111,#222);border:2px solid #555;border-radius:4px;color:#aaa;font-weight:900;text-transform:uppercase;letter-spacing:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 0 #000,0 5px 15px rgba(0,0,0,.5);transition:.2s;position:relative;top:0}
.button.bt-10:hover{color:#fff;top:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 0 #000}
/* B11 - POISON BLADE */
@keyframes bt11Drip{0%,100%{box-shadow:0 4px 10px rgba(74,222,128,.2)}50%{box-shadow:0 8px 25px rgba(74,222,128,.4),0 12px 35px rgba(74,222,128,.15)}}
.button.bt-11{padding:16px 40px;background:linear-gradient(135deg,#052e16,#166534);border:2px solid rgba(74,222,128,.4);border-radius:4px;color:#86efac;font-weight:800;text-transform:uppercase;animation:bt11Drip 2s ease infinite;transition:.3s}
.button.bt-11:hover{background:linear-gradient(135deg,#166534,#22c55e);color:#fff;transform:scale(1.08)}
/* B12 - HOLY LIGHT */
@keyframes bt12Holy{0%{left:-40%}100%{left:140%}}
@keyframes bt12Glow{0%,100%{box-shadow:0 0 15px rgba(253,224,71,.3)}50%{box-shadow:0 0 30px rgba(253,224,71,.5),0 0 60px rgba(253,224,71,.2)}}
.button.bt-12{padding:16px 40px;background:linear-gradient(135deg,#fffbeb,#fef3c7,#fde68a);border:none;border-radius:4px;color:#78350f;font-weight:900;text-transform:uppercase;position:relative;overflow:hidden;animation:bt12Glow 2s ease infinite;transition:.3s}
.button.bt-12::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:rotate(25deg);animation:bt12Holy 2.5s ease-in-out infinite}
.button.bt-12 span{position:relative;z-index:2}
.button.bt-12:hover{transform:scale(1.08)}
/* B13 - VOID WALKER */
@keyframes bt13Void{0%{background-size:100% 100%}50%{background-size:150% 150%}100%{background-size:100% 100%}}
.button.bt-13{padding:16px 40px;background:radial-gradient(circle,#1e1b4b,#000);border:1px solid rgba(99,102,241,.2);border-radius:4px;color:#818cf8;font-weight:800;text-transform:uppercase;letter-spacing:3px;animation:bt13Void 3s ease infinite;transition:.3s}
.button.bt-13:hover{border-color:rgba(99,102,241,.5);box-shadow:0 0 25px rgba(99,102,241,.3);color:#c7d2fe}
/* B14 - FIRE SLASH */
@keyframes bt14Slash{0%{left:-60%;opacity:0}30%{opacity:1}100%{left:160%;opacity:0}}
.button.bt-14{padding:16px 40px;background:linear-gradient(135deg,#431407,#9a3412,#ea580c);border:none;border-radius:4px;color:#fff;font-weight:900;text-transform:uppercase;position:relative;overflow:hidden;box-shadow:0 0 20px rgba(234,88,12,.3);transition:.3s}
.button.bt-14::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,200,100,.25),transparent);transform:skewX(-25deg);animation:bt14Slash 1.5s ease-in-out infinite}
.button.bt-14 span{position:relative;z-index:2}
.button.bt-14:hover{transform:scale(1.08);box-shadow:0 0 35px rgba(234,88,12,.5)}
/* B15 - SHIELD BASH */
@keyframes bt15Bash{0%,70%,100%{transform:scale(1)}75%{transform:scale(1.08) rotate(-2deg)}80%{transform:scale(1) rotate(0)}}
.button.bt-15{padding:16px 40px;background:linear-gradient(135deg,#44403c,#78716c,#a8a29e);border:3px solid #d6d3d1;border-radius:4px;color:#fafaf9;font-weight:900;text-transform:uppercase;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 4px 0 #292524,0 6px 15px rgba(0,0,0,.4);animation:bt15Bash 3s ease infinite}
.button.bt-15:hover{filter:brightness(1.1)}
/* B16 - ARCANE PORTAL */
@keyframes bt16Portal{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.bt-16{position:relative;padding:16px 40px;background:#0a0020;border:none;border-radius:50px;color:#c084fc;font-weight:800;text-transform:uppercase;z-index:1;transition:.3s;overflow:hidden}
.button.bt-16::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:conic-gradient(#7c3aed,#a855f7,#c084fc,#e9d5ff,#c084fc,#a855f7,#7c3aed);animation:bt16Portal 2s linear infinite;z-index:-2}
.button.bt-16::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#0a0020;z-index:-1}
.button.bt-16 span{position:relative;z-index:2}
.button.bt-16:hover{transform:scale(1.1);color:#e9d5ff}
/* B17 - VICTORY */
@keyframes bt17Victory{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes bt17Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.button.bt-17{padding:16px 40px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#bf953f,#fcf6ba,#bf953f);background-size:300%;border:3px solid #d4a843;border-radius:4px;color:#3a2500;font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:3px;animation:bt17Victory 3s linear infinite,bt17Float 2s ease infinite;transition:.3s}
.button.bt-17:hover{transform:scale(1.1);filter:brightness(1.1)}
/* B18 - DEFEAT / RETRY */
@keyframes bt18Flicker{0%,100%{opacity:1}50%{opacity:.7}}
.button.bt-18{padding:16px 40px;background:linear-gradient(135deg,#1c1917,#292524);border:2px solid rgba(239,68,68,.4);border-radius:4px;color:rgba(239,68,68,.8);font-weight:800;text-transform:uppercase;letter-spacing:2px;animation:bt18Flicker 1.5s ease infinite;transition:.3s}
.button.bt-18:hover{border-color:#ef4444;color:#ef4444;box-shadow:0 0 20px rgba(239,68,68,.3);transform:scale(1.05)}
/* B19 - ULTIMATE SKILL */
@keyframes bt19Charge{0%{background-position:100% 0}100%{background-position:0% 0}}
@keyframes bt19Ready{0%,100%{box-shadow:0 0 20px rgba(250,204,21,.3),0 0 40px rgba(239,68,68,.2)}50%{box-shadow:0 0 35px rgba(250,204,21,.5),0 0 60px rgba(239,68,68,.3),0 0 80px rgba(168,85,247,.15)}}
.button.bt-19{padding:16px 40px;background:linear-gradient(90deg,#7f1d1d,#b91c1c,#dc2626,#f59e0b,#fbbf24);background-size:300%;border:2px solid rgba(251,191,36,.5);border-radius:4px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(251,191,36,.5);animation:bt19Charge 3s linear infinite,bt19Ready 2s ease infinite;transition:.3s}
.button.bt-19:hover{transform:scale(1.1)}
/* B20 - GG ULTIMATE BATTLE */
@keyframes bt20Bg{0%{background-position:0% 50%}100%{background-position:400% 50%}}
@keyframes bt20Shake{0%,85%,100%{transform:scale(1)}87%{transform:scale(1.04) rotate(-1deg)}89%{transform:scale(1.04) rotate(1deg)}91%{transform:scale(1.04) rotate(-1deg)}93%{transform:scale(1)}}
@keyframes bt20Border{0%{border-color:#ef4444}25%{border-color:#f59e0b}50%{border-color:#a855f7}75%{border-color:#3b82f6}100%{border-color:#ef4444}}
@keyframes bt20Shine{0%{left:-30%}100%{left:130%}}
.button.bt-20{padding:20px 55px;background:linear-gradient(90deg,#dc2626,#f59e0b,#a855f7,#3b82f6,#dc2626);background-size:400%;border:3px solid #ef4444;border-radius:4px;color:#fff;font-size:1.2rem;font-weight:900;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 10px rgba(255,255,255,.4);animation:bt20Bg 4s linear infinite,bt20Shake 3s ease infinite,bt20Border 4s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.bt-20::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(25deg);animation:bt20Shine 2s ease-in-out infinite}
.button.bt-20 span{position:relative;z-index:2}
.button.bt-20:hover{transform:scale(1.15);filter:brightness(1.2)}
/* ████████████████████████████████████████████████████████████████
   🏷️ BADGE / LABEL BUTTONS
   Dùng data-badge="TEXT" trên thẻ <a> để đặt nội dung badge
   ████████████████████████████████████████████████████████████████ */
/* --- BASE BADGE (top-right corner) --- */
.button.badge-btn{position:relative;overflow:visible !important}
.button.badge-btn::before{content:attr(data-badge);position:absolute;font-size:.6rem;font-weight:800;line-height:1;padding:3px 8px;border-radius:50px;z-index:10;pointer-events:none;white-space:nowrap}
/* BD01 - HOT (đỏ, top-right, pulse) */
@keyframes bd1Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.button.bd-1{padding:14px 36px;background:linear-gradient(135deg,#dc2626,#ef4444);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-1::before{top:-8px;right:-8px;background:#fff;color:#dc2626;animation:bd1Pulse 1.5s ease infinite;box-shadow:0 2px 8px rgba(220,38,38,.3)}
.button.bd-1:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(220,38,38,.4)}
/* BD02 - NEW (xanh lá, top-right) */
.button.bd-2{padding:14px 36px;background:linear-gradient(135deg,#15803d,#22c55e);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-2::before{top:-8px;right:-8px;background:#fbbf24;color:#78350f;box-shadow:0 2px 8px rgba(251,191,36,.3)}
.button.bd-2:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(34,197,94,.4)}
/* BD03 - SALE (cam, ribbon góc) */
.button.bd-3{padding:14px 36px;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:12px;color:#fff;font-weight:700;transition:.3s}
.button.bd-3::before{top:-8px;right:-8px;background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;border-radius:4px;padding:4px 10px;box-shadow:0 2px 8px rgba(234,88,12,.3)}
.button.bd-3:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(124,58,237,.4)}
/* BD04 - VIP (vàng gold, shimmer) */
@keyframes bd4Shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.button.bd-4{padding:14px 36px;background:linear-gradient(135deg,#1a1a2e,#2d2d50);border:1px solid rgba(251,191,36,.3);border-radius:50px;color:#fbbf24;font-weight:700;transition:.3s}
.button.bd-4::before{top:-8px;right:-8px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#bf953f);background-size:200%;color:#3a2500;animation:bd4Shimmer 3s linear infinite;box-shadow:0 2px 8px rgba(191,149,63,.4)}
.button.bd-4:hover{border-color:rgba(251,191,36,.6);transform:scale(1.08)}
/* BD05 - PRO (xanh dương, top-left) */
.button.bd-5{padding:14px 36px;background:linear-gradient(135deg,#1e40af,#3b82f6);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-5::before{top:-8px;left:-8px;right:auto;background:#000;color:#3b82f6;border:1px solid #3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.button.bd-5:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(59,130,246,.4)}
/* BD06 - FREE (xanh lá sáng, bounce) */
@keyframes bd6Bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.button.bd-6{padding:14px 36px;background:linear-gradient(135deg,#065f46,#10b981);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-6::before{top:-8px;right:-8px;background:#22c55e;color:#fff;animation:bd6Bounce 1s ease infinite;box-shadow:0 2px 8px rgba(34,197,94,.3)}
.button.bd-6:hover{transform:scale(1.08)}
/* BD07 - BETA (tím, top-right) */
.button.bd-7{padding:14px 36px;background:linear-gradient(135deg,#581c87,#7c3aed);border:none;border-radius:50px;color:#e9d5ff;font-weight:700;transition:.3s}
.button.bd-7::before{top:-8px;right:-8px;background:rgba(168,85,247,.2);color:#c084fc;border:1px solid rgba(168,85,247,.4);box-shadow:0 0 10px rgba(168,85,247,.2)}
.button.bd-7:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(124,58,237,.4)}
/* BD08 - x2 BONUS (cam neon, glow) */
@keyframes bd8Glow{0%,100%{box-shadow:0 0 5px rgba(249,115,22,.4)}50%{box-shadow:0 0 15px rgba(249,115,22,.6)}}
.button.bd-8{padding:14px 36px;background:linear-gradient(135deg,#431407,#ea580c);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-8::before{top:-8px;right:-8px;background:#f97316;color:#fff;animation:bd8Glow 1.5s ease infinite}
.button.bd-8:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(234,88,12,.4)}
/* BD09 - LIMITED (đỏ nhấp nháy) */
@keyframes bd9Flash{0%,100%{opacity:1}50%{opacity:.4}}
.button.bd-9{padding:14px 36px;background:#1a0000;border:2px solid rgba(239,68,68,.4);border-radius:50px;color:#ef4444;font-weight:700;transition:.3s}
.button.bd-9::before{top:-8px;right:-8px;background:#ef4444;color:#fff;animation:bd9Flash 1s ease infinite}
.button.bd-9:hover{border-color:#ef4444;transform:scale(1.08)}
/* BD10 - TRENDING (gradient badge) */
@keyframes bd10Grad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.bd-10{padding:14px 36px;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(255,255,255,.1);border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-10::before{top:-8px;right:-8px;background:linear-gradient(90deg,#ec4899,#8b5cf6,#3b82f6,#ec4899);background-size:200%;color:#fff;animation:bd10Grad 3s linear infinite}
.button.bd-10:hover{border-color:rgba(255,255,255,.3);transform:scale(1.08)}
/* BD11 - 99+ (notification dot, đỏ tròn) */
.button.bd-11{padding:14px 36px;background:linear-gradient(135deg,#334155,#475569);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-11::before{top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:50%;padding:5px 7px;min-width:14px;text-align:center;box-shadow:0 2px 6px rgba(239,68,68,.4)}
.button.bd-11:hover{transform:scale(1.08);box-shadow:0 4px 15px rgba(71,85,105,.4)}
/* BD12 - TOP 1 (vàng crown) */
@keyframes bd12Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.button.bd-12{padding:14px 36px;background:linear-gradient(135deg,#78350f,#a16207);border:2px solid rgba(251,191,36,.3);border-radius:50px;color:#fde68a;font-weight:700;transition:.3s}
.button.bd-12::before{top:-12px;right:-5px;background:transparent;color:#fbbf24;font-size:.9rem;padding:0;animation:bd12Float 2s ease infinite;text-shadow:0 2px 8px rgba(251,191,36,.5)}
.button.bd-12:hover{transform:scale(1.08);border-color:rgba(251,191,36,.6)}
/* BD13 - PREMIUM (nền tối + badge vàng viền) */
.button.bd-13{padding:14px 36px;background:#000;border:1px solid rgba(191,149,63,.3);border-radius:50px;color:#d4a843;font-weight:700;transition:.3s}
.button.bd-13::before{top:-8px;right:-8px;background:#000;color:#fbbf24;border:1px solid #bf953f;box-shadow:0 0 10px rgba(191,149,63,.3)}
.button.bd-13:hover{border-color:rgba(191,149,63,.6);transform:scale(1.08)}
/* BD14 - OFF -50% (badge to, nền đỏ) */
.button.bd-14{padding:14px 36px;background:linear-gradient(135deg,#f97316,#fb923c);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-14::before{top:-10px;right:-12px;background:#dc2626;color:#fff;padding:5px 10px;font-size:.7rem;border-radius:4px;box-shadow:0 2px 8px rgba(220,38,38,.4)}
.button.bd-14:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(249,115,22,.4)}
/* BD15 - VERIFIED (xanh dương check) */
.button.bd-15{padding:14px 36px;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-15::before{top:-6px;right:-6px;background:#1d4ed8;color:#fff;border-radius:50%;padding:4px 5px;font-size:.7rem;box-shadow:0 2px 6px rgba(29,78,216,.4)}
.button.bd-15:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(14,165,233,.4)}
/* BD16 - LIVE (đỏ + dot animation) */
@keyframes bd16Live{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.button.bd-16{padding:14px 36px;background:linear-gradient(135deg,#1c1917,#292524);border:1px solid rgba(255,255,255,.1);border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-16::before{top:-8px;left:-8px;right:auto;background:#ef4444;color:#fff;animation:bd16Live 1.5s ease infinite}
.button.bd-16:hover{transform:scale(1.08);border-color:rgba(255,255,255,.3)}
/* BD17 - ACTIVE PULSING BADGE */
@keyframes bd17Pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
.button.bd-17{position:relative;overflow:visible !important;padding:14px 36px;background:linear-gradient(135deg,#047857,#10b981);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s;z-index:1}
.button.bd-17::before{top:-8px;right:-8px;background:#ec4899;color:#fff;box-shadow:0 2px 8px rgba(236,72,153,.3);z-index:10}
.button.bd-17::after{content:'';position:absolute;top:-8px;right:-8px;width:32px;height:16px;border-radius:50px;background:#ec4899;z-index:9;transform-origin:center;animation:bd17Pulse 1.5s infinite;pointer-events:none}
.button.bd-17:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(16,185,129,.4)}
/* BD18 - EARLY (tím + badge outline) */
.button.bd-18{padding:14px 36px;background:linear-gradient(135deg,#4c1d95,#7c3aed);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-18::before{top:-8px;right:-8px;background:transparent;color:#e9d5ff;border:1.5px solid #c084fc;padding:3px 8px}
.button.bd-18:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(124,58,237,.4)}
/* BD19 - RECOMMENDED (xanh dài) */
.button.bd-19{padding:14px 36px;background:linear-gradient(135deg,#0c4a6e,#0284c7);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.3s}
.button.bd-19::before{top:-10px;left:50%;transform:translateX(-50%);right:auto;background:linear-gradient(90deg,#0ea5e9,#06b6d4);color:#fff;padding:3px 12px;border-radius:4px;font-size:.55rem;box-shadow:0 2px 8px rgba(14,165,233,.3)}
.button.bd-19:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(2,132,199,.4)}
/* BD20 - ULTIMATE BADGE */
@keyframes bd20Badge{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes bd20Btn{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.bd-20{padding:16px 44px;background:linear-gradient(90deg,#dc2626,#f59e0b,#22c55e,#3b82f6,#a855f7,#dc2626);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:2px;animation:bd20Btn 4s linear infinite;transition:.3s}
.button.bd-20::before{top:-10px;right:-10px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#bf953f);background-size:300%;color:#3a2500;padding:4px 12px;font-size:.65rem;animation:bd20Badge 2s linear infinite;box-shadow:0 2px 10px rgba(191,149,63,.5)}
.button.bd-20:hover{transform:scale(1.12)}
/* ████████████████████████████████████████████████████████████████
   🔩 CYBERPUNK / HIGH-TECH BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* CP01 - HUD FRAME */
.button.cp-1{padding:14px 36px;background:rgba(0,255,255,.05);border:1px solid rgba(0,255,255,.3);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;transition:.3s;position:relative}
.button.cp-1::before{content:'';position:absolute;top:0;left:0;width:12px;height:12px;border-top:2px solid #0ff;border-left:2px solid #0ff}
.button.cp-1::after{content:'';position:absolute;bottom:0;right:0;width:12px;height:12px;border-bottom:2px solid #0ff;border-right:2px solid #0ff}
.button.cp-1:hover{background:rgba(0,255,255,.15);box-shadow:0 0 20px rgba(0,255,255,.2);color:#fff}
/* CP02 - GLITCH */
@keyframes cp2Glitch{0%,100%{transform:translate(0);text-shadow:2px 0 #f0f,-2px 0 #0ff}25%{transform:translate(-2px,1px);text-shadow:2px 2px #f0f,-2px -1px #0ff}50%{transform:translate(1px,-1px);text-shadow:-1px 2px #f0f,2px -2px #0ff}75%{transform:translate(2px,1px);text-shadow:-2px -1px #f0f,1px 2px #0ff}}
.button.cp-2{padding:14px 36px;background:#0a0a0a;border:1px solid rgba(255,0,255,.3);border-radius:0;color:#fff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:3px;transition:.3s}
.button.cp-2:hover{animation:cp2Glitch .3s steps(4) infinite;border-color:#f0f;box-shadow:0 0 15px rgba(255,0,255,.3)}
/* CP03 - SCANLINE */
@keyframes cp3Scan{0%{top:-100%}100%{top:200%}}
.button.cp-3{padding:14px 36px;background:linear-gradient(135deg,#0a0018,#1a0030);border:1px solid rgba(0,255,255,.2);border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.cp-3::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:4px;background:rgba(0,255,255,.15);animation:cp3Scan 2s linear infinite}
.button.cp-3 span{position:relative;z-index:2}
.button.cp-3:hover{background:linear-gradient(135deg,#0a0020,#2a0050);border-color:rgba(0,255,255,.5)}
/* CP04 - NEON SKEW */
.button.cp-4{padding:14px 40px;background:transparent;border:2px solid #f0f;border-radius:0;color:#f0f;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;transform:skewX(-5deg);transition:.3s}
.button.cp-4 span{display:inline-block;transform:skewX(5deg)}
.button.cp-4:hover{background:#f0f;color:#000;box-shadow:0 0 25px rgba(255,0,255,.5),0 0 50px rgba(255,0,255,.2)}
/* CP05 - DATA STREAM */
@keyframes cp5Stream{0%{background-position:0 0}100%{background-position:0 40px}}
.button.cp-5{padding:14px 36px;background:repeating-linear-gradient(0deg,transparent,transparent 18px,rgba(0,255,255,.03) 18px,rgba(0,255,255,.03) 20px);background-size:100% 40px;border:1px solid rgba(0,255,255,.2);border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:cp5Stream 2s linear infinite;transition:.3s;position:relative}
.button.cp-5 span{position:relative;z-index:2}
.button.cp-5:hover{border-color:rgba(0,255,255,.5);box-shadow:0 0 20px rgba(0,255,255,.15)}
/* CP06 - CIRCUIT BOARD */
.button.cp-6{padding:14px 36px;background:#050510;border:1px solid rgba(0,255,0,.2);border-radius:0;color:#0f0;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;box-shadow:inset 0 0 30px rgba(0,255,0,.03);transition:.3s;position:relative}
.button.cp-6::before{content:'//';position:absolute;left:8px;top:50%;transform:translateY(-50%);color:rgba(0,255,0,.3);font-size:.7rem}
.button.cp-6::after{content:'>';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:rgba(0,255,0,.3);font-size:.9rem}
.button.cp-6:hover{border-color:rgba(0,255,0,.5);box-shadow:inset 0 0 30px rgba(0,255,0,.06),0 0 15px rgba(0,255,0,.15)}
/* CP07 - HOLOGRAPHIC STRIPE */
@keyframes cp7Holo{0%{left:-100%}100%{left:200%}}
.button.cp-7{padding:14px 36px;background:linear-gradient(135deg,#0a0a2e,#1a1a4e);border:1px solid rgba(0,255,255,.15);border-radius:0;color:#7dd3fc;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.cp-7::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.08),rgba(255,0,255,.05),transparent);animation:cp7Holo 3s linear infinite;transform:skewX(-20deg)}
.button.cp-7 span{position:relative;z-index:2}
.button.cp-7:hover{border-color:rgba(0,255,255,.4)}
/* CP08 - WARNING */
@keyframes cp8Warn{0%,100%{border-color:rgba(250,204,21,.4)}50%{border-color:rgba(250,204,21,.8)}}
.button.cp-8{padding:14px 36px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(250,204,21,.03) 10px,rgba(250,204,21,.03) 20px);border:2px solid rgba(250,204,21,.4);border-radius:0;color:#facc15;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:cp8Warn 1.5s ease infinite;transition:.3s}
.button.cp-8:hover{background:rgba(250,204,21,.1);box-shadow:0 0 20px rgba(250,204,21,.2)}
/* CP09 - ERROR / RED ALERT */
@keyframes cp9Alert{0%,100%{opacity:1}50%{opacity:.7}}
.button.cp-9{padding:14px 36px;background:rgba(239,68,68,.05);border:2px solid rgba(239,68,68,.5);border-radius:0;color:#ef4444;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:3px;animation:cp9Alert 1s ease infinite;transition:.3s}
.button.cp-9:hover{background:rgba(239,68,68,.15);box-shadow:0 0 20px rgba(239,68,68,.3)}
/* CP10 - WIREFRAME */
.button.cp-10{padding:14px 36px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:0;color:rgba(255,255,255,.5);font-family:'Courier New',monospace;font-weight:400;text-transform:uppercase;letter-spacing:4px;transition:.4s}
.button.cp-10:hover{border-color:rgba(0,255,255,.6);color:#0ff;letter-spacing:6px;box-shadow:inset 0 0 30px rgba(0,255,255,.05),0 0 20px rgba(0,255,255,.1)}
/* CP11 - LOADING BAR */
@keyframes cp11Load{0%{width:0}100%{width:100%}}
.button.cp-11{padding:14px 36px;background:#080818;border:1px solid rgba(0,255,255,.2);border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.cp-11::after{content:'';position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,#0ff,#f0f);animation:cp11Load 2.5s ease-in-out infinite}
.button.cp-11 span{position:relative;z-index:2}
.button.cp-11:hover{box-shadow:0 0 15px rgba(0,255,255,.2)}
/* CP12 - HEXAGON */
.button.cp-12{padding:14px 40px;background:rgba(0,255,255,.05);border:none;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:.3s;position:relative}
.button.cp-12:hover{background:rgba(0,255,255,.15);color:#fff}
/* CP13 - DUAL BORDER */
.button.cp-13{padding:14px 36px;background:transparent;border:1px solid rgba(0,255,255,.3);border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;box-shadow:inset 0 0 0 3px transparent;transition:.3s}
.button.cp-13:hover{box-shadow:inset 0 0 0 3px rgba(0,255,255,.15);border-color:rgba(0,255,255,.6)}
/* CP14 - MATRIX RAIN */
@keyframes cp14Rain{0%{background-position:0 0}100%{background-position:0 200px}}
.button.cp-14{padding:14px 36px;background:linear-gradient(180deg,rgba(0,255,0,.03) 1px,transparent 1px);background-size:100% 8px;border:1px solid rgba(0,255,0,.2);border-radius:0;color:#0f0;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:cp14Rain 3s linear infinite;position:relative;overflow:hidden;transition:.3s}
.button.cp-14 span{position:relative;z-index:2}
.button.cp-14:hover{border-color:rgba(0,255,0,.5);box-shadow:0 0 15px rgba(0,255,0,.15)}
/* CP15 - NEON SPLIT */
.button.cp-15{padding:14px 36px;background:#0a0a0a;border-radius:0;color:#fff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;border:none;border-top:2px solid #0ff;border-bottom:2px solid #f0f;transition:.3s}
.button.cp-15:hover{box-shadow:0 -4px 15px rgba(0,255,255,.2),0 4px 15px rgba(255,0,255,.2);letter-spacing:4px}
/* CP16 - SYSTEM OVERRIDE */
@keyframes cp16Type{0%{width:0}50%{width:100%}100%{width:0}}
.button.cp-16{padding:14px 36px;background:#000;border:1px solid rgba(0,255,255,.3);border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.cp-16::after{content:'';position:absolute;top:0;left:0;height:100%;width:0;background:rgba(0,255,255,.06);animation:cp16Type 3s ease infinite}
.button.cp-16 span{position:relative;z-index:2}
.button.cp-16:hover{border-color:#0ff;box-shadow:0 0 20px rgba(0,255,255,.2)}
/* CP17 - DIAMOND CUT */
.button.cp-17{padding:14px 40px;background:linear-gradient(135deg,rgba(0,255,255,.05),rgba(255,0,255,.05));border:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);color:#c084fc;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;transition:.3s}
.button.cp-17:hover{background:linear-gradient(135deg,rgba(0,255,255,.12),rgba(255,0,255,.12));color:#fff}
/* CP18 - PULSE BORDER */
@keyframes cp18Pulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(0,255,255,.2),0 0 0 rgba(0,255,255,0)}50%{box-shadow:inset 0 0 0 1px rgba(0,255,255,.5),0 0 20px rgba(0,255,255,.15)}}
.button.cp-18{padding:14px 36px;background:rgba(0,255,255,.03);border:none;border-radius:0;color:#0ff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:cp18Pulse 2s ease infinite;transition:.3s}
.button.cp-18:hover{color:#fff}
/* CP19 - CYBER GRADIENT */
@keyframes cp19Grad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.cp-19{padding:14px 36px;background:linear-gradient(90deg,rgba(0,255,255,.1),rgba(255,0,255,.1),rgba(255,255,0,.1),rgba(0,255,255,.1));background-size:200%;border:1px solid rgba(0,255,255,.2);border-radius:0;color:#fff;font-family:'Courier New',monospace;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:cp19Grad 4s linear infinite;transition:.3s}
.button.cp-19:hover{border-color:rgba(0,255,255,.5);box-shadow:0 0 20px rgba(0,255,255,.15)}
/* CP20 - ULTIMATE CYBERPUNK */
@keyframes cp20Bg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes cp20Scan{0%{top:-100%}100%{top:200%}}
@keyframes cp20Glow{0%,100%{box-shadow:0 0 15px rgba(0,255,255,.2),0 0 30px rgba(255,0,255,.1)}50%{box-shadow:0 0 25px rgba(255,0,255,.3),0 0 50px rgba(0,255,255,.15)}}
.button.cp-20{padding:16px 44px;background:linear-gradient(90deg,rgba(0,255,255,.08),rgba(255,0,255,.08),rgba(255,255,0,.05),rgba(0,255,255,.08));background-size:300%;border:none;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);color:#fff;font-family:'Courier New',monospace;font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 10px rgba(0,255,255,.4);animation:cp20Bg 4s linear infinite,cp20Glow 3s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.cp-20::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:3px;background:rgba(0,255,255,.2);animation:cp20Scan 1.5s linear infinite}
.button.cp-20 span{position:relative;z-index:2}
.button.cp-20:hover{filter:brightness(1.3);transform:scale(1.08)}
/* ████████████████████████████████████████████████████████████████
   ✨ MORPH / TRANSITION BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* MR01 - 3D PRESS (cam) */
.button.mr-1{padding:14px 36px;background:#ff5722;border:none;border-radius:6px;color:#fff;font-weight:700;box-shadow:0 6px 0 #bf360c,0 8px 15px rgba(0,0,0,.2);position:relative;top:0;transition:.1s}
.button.mr-1:hover{top:3px;box-shadow:0 3px 0 #bf360c,0 5px 10px rgba(0,0,0,.15)}
.button.mr-1:active{top:6px;box-shadow:0 0 0 #bf360c}
/* MR02 - BORDER FILL LEFT */
.button.mr-2{padding:14px 36px;background:transparent;border:2px solid #4caf50;border-radius:6px;color:#4caf50;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-2::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:#4caf50;z-index:-1;transition:width .3s ease}
.button.mr-2:hover{color:#fff}
.button.mr-2:hover::before{width:100%}
/* MR03 - DOUBLE PULSE RINGS */
@keyframes mr3Ring1{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@keyframes mr3Ring2{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.button.mr-3{padding:14px 36px;background:#3f51b5;border:none;border-radius:50px;color:#fff;font-weight:700;position:relative;z-index:1;transition:.3s}
.button.mr-3::before,.button.mr-3::after{content:'';position:absolute;inset:0;background:rgba(63,81,181,.4);border-radius:50px;z-index:-1}
.button.mr-3::before{animation:mr3Ring1 2s ease-out infinite}
.button.mr-3::after{animation:mr3Ring2 2s ease-out .5s infinite}
.button.mr-3:hover{transform:scale(1.05)}
/* MR04 - MORPH CIRCLE (vuông → tròn) */
.button.mr-4{padding:14px 36px;background:#ff5722;border:none;border-radius:6px;color:#fff;font-weight:700;transition:.5s}
.button.mr-4:hover{border-radius:50px;background:#ff8a65;padding:14px 44px;box-shadow:0 8px 25px rgba(255,87,34,.3)}
/* MR05 - LIQUID SWEEP */
@keyframes mr5Liquid{0%{transform:translateX(-100%) skewX(-15deg)}40%{transform:translateX(30%) skewX(-15deg)}70%{transform:translateX(70%) skewX(-15deg)}100%{transform:translateX(100%) skewX(-15deg)}}
.button.mr-5{padding:14px 36px;background:#4169e1;border:none;border-radius:6px;color:#fff;font-weight:700;position:relative;overflow:hidden;z-index:1;transition:.3s}
.button.mr-5::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.15);z-index:-1;transform:translateX(-100%) skewX(-15deg)}
.button.mr-5 span{position:relative;z-index:2}
.button.mr-5:hover::before{animation:mr5Liquid 1.2s infinite}
/* MR06 - GRADIENT MORPH (tròn → vuông + gradient shift) */
.button.mr-6{padding:14px 36px;background:linear-gradient(to right,#fc5c7d,#6a82fb);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:700;box-shadow:0 4px 15px rgba(0,0,0,.2);transition:.5s}
.button.mr-6:hover{background-position:right;border-radius:6px;transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.3)}
/* MR07 - 3D RAINBOW */
@keyframes mr7Rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.button.mr-7{padding:14px 36px;background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);background-size:400%;border:none;border-radius:6px;color:#fff;font-weight:700;animation:mr7Rainbow 10s ease infinite;box-shadow:0 6px 0 rgba(0,0,0,.25),0 8px 15px rgba(0,0,0,.2);position:relative;top:0;transition:.1s}
.button.mr-7:hover{top:3px;box-shadow:0 3px 0 rgba(0,0,0,.25);animation-duration:3s}
.button.mr-7:active{top:6px;box-shadow:none}
/* MR08 - BORDER FILL RIGHT */
.button.mr-8{padding:14px 36px;background:transparent;border:2px solid #e91e63;border-radius:6px;color:#e91e63;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-8::before{content:'';position:absolute;top:0;right:0;width:0;height:100%;background:#e91e63;z-index:-1;transition:width .3s ease}
.button.mr-8:hover{color:#fff}
.button.mr-8:hover::before{width:100%}
/* MR09 - BORDER FILL CENTER */
.button.mr-9{padding:14px 36px;background:transparent;border:2px solid #9c27b0;border-radius:6px;color:#9c27b0;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-9::before{content:'';position:absolute;top:0;left:50%;width:0;height:100%;background:#9c27b0;z-index:-1;transition:width .3s ease,left .3s ease}
.button.mr-9:hover{color:#fff}
.button.mr-9:hover::before{width:100%;left:0}
/* MR10 - DRAW BORDER ANIMATION */
.button.mr-10{position:relative;padding:14px 36px;background:transparent;border:none;border-radius:6px;color:#009688;font-weight:700;transition:all .3s ease;z-index:1}
.button.mr-10::before,.button.mr-10::after{content:'';position:absolute;width:0;height:0;box-sizing:border-box;border:2px solid transparent;z-index:-1}
.button.mr-10::before{top:0;left:0;transition:width .1s ease .3s,height .1s ease .2s}
.button.mr-10::after{bottom:0;right:0;transition:width .1s ease .1s,height .1s ease 0s}
.button.mr-10 span{position:relative;z-index:2}
.button.mr-10:hover{color:#fff;background:#009688;transform:scale(1.05);box-shadow:0 8px 20px rgba(0,150,136,.3)}
.button.mr-10:hover::before,.button.mr-10:hover::after{width:100%;height:100%}
.button.mr-10:hover::before{border-top-color:#009688;border-right-color:#009688;transition:width .1s ease 0s,height .1s ease .1s}
.button.mr-10:hover::after{border-bottom-color:#009688;border-left-color:#009688;transition:width .1s ease .2s,height .1s ease .3s}
/* MR11 - SLIDE UP FILL */
.button.mr-11{padding:14px 36px;background:transparent;border:2px solid #2196f3;border-radius:6px;color:#2196f3;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-11::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:#2196f3;z-index:-1;transition:height .3s ease}
.button.mr-11:hover{color:#fff}
.button.mr-11:hover::before{height:100%}
/* MR12 - SLIDE DOWN FILL */
.button.mr-12{padding:14px 36px;background:transparent;border:2px solid #ff9800;border-radius:6px;color:#ff9800;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-12::before{content:'';position:absolute;top:0;left:0;width:100%;height:0;background:#ff9800;z-index:-1;transition:height .3s ease}
.button.mr-12:hover{color:#fff}
.button.mr-12:hover::before{height:100%}
/* MR13 - UNDERLINE GROW */
.button.mr-13{padding:14px 36px;background:transparent;border:none;border-radius:0;color:#333;font-weight:700;position:relative;transition:.3s}
.button.mr-13::after{content:'';position:absolute;bottom:4px;left:50%;width:0;height:3px;background:linear-gradient(90deg,#e91e63,#9c27b0);transition:width .3s ease,left .3s ease;border-radius:2px}
.button.mr-13:hover::after{width:70%;left:15%}
.button.mr-13:hover{color:#e91e63}
/* MR14 - SHADOW LIFT */
.button.mr-14{padding:14px 36px;background:#fff;border:1px solid #ddd;border-radius:8px;color:#333;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.08);transition:.3s}
.button.mr-14:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.15);border-color:#bbb}
/* MR15 - SPLIT FILL (2 bên vào giữa) */
.button.mr-15{padding:14px 36px;background:transparent;border:2px solid #607d8b;border-radius:6px;color:#607d8b;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-15::before,
.button.mr-15::after{content:'';position:absolute;top:0;width:0;height:100%;background:#607d8b;z-index:-1;transition:width .3s ease}
.button.mr-15::before{left:0}
.button.mr-15::after{right:0}
.button.mr-15:hover{color:#fff}
.button.mr-15:hover::before,
.button.mr-15:hover::after{width:50%}
/* MR16 - FLIP BACKGROUND */
.button.mr-16{padding:14px 36px;background:#673ab7;border:none;border-radius:6px;color:#fff;font-weight:700;transition:.4s cubic-bezier(.68,-.55,.27,1.55)}
.button.mr-16:hover{background:#ff5722;border-radius:50px;transform:scale(1.08) rotate(-2deg)}
/* MR17 - BORDER ROTATE */
@keyframes mr17Rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.mr-17{position:relative;padding:14px 36px;background:#1a1a2e;border:none;border-radius:50px;color:#fff;font-weight:700;z-index:1;transition:.3s;overflow:hidden}
.button.mr-17::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:conic-gradient(#e91e63,#9c27b0,#2196f3,#4caf50,#ff9800,#e91e63);z-index:-2;transition:1s}
.button.mr-17::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#1a1a2e;z-index:-1}
.button.mr-17 span{position:relative;z-index:2}
.button.mr-17:hover::before{animation:mr17Rotate 2s linear infinite}
/* MR18 - ELASTIC SCALE */
.button.mr-18{padding:14px 36px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;color:#fff;font-weight:700;transition:.4s cubic-bezier(.68,-.55,.27,1.55)}
.button.mr-18:hover{transform:scale(1.15);box-shadow:0 10px 30px rgba(102,126,234,.4)}
/* MR19 - DIAGONAL WIPE */
.button.mr-19{padding:14px 36px;background:transparent;border:2px solid #00bcd4;border-radius:6px;color:#00bcd4;font-weight:700;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.mr-19::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:#00bcd4;z-index:-1;transition:width .3s ease;transform:skewX(-15deg);transform-origin:top left}
.button.mr-19:hover{color:#fff}
.button.mr-19:hover::before{width:120%}
/* MR20 - ULTIMATE MORPH */
@keyframes mr20Bg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.button.mr-20{padding:16px 44px;background:linear-gradient(90deg,#fc5c7d,#6a82fb,#4caf50,#ff9800,#fc5c7d);background-size:300%;border:none;border-radius:6px;color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:2px;animation:mr20Bg 5s ease infinite;box-shadow:0 6px 0 rgba(0,0,0,.2),0 8px 20px rgba(0,0,0,.15);position:relative;top:0;transition:.2s cubic-bezier(.68,-.55,.27,1.55)}
.button.mr-20:hover{top:3px;border-radius:50px;box-shadow:0 3px 0 rgba(0,0,0,.2);transform:scale(1.05);animation-duration:2s}
.button.mr-20:active{top:6px;box-shadow:none}
/* ████████████████████████████████████████████████████████████████
   🎰 CASINO / BETTING BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* CS01 - BET NOW (xanh lá sáng, CTA chính) */
@keyframes cs1Pulse{0%,100%{box-shadow:0 0 10px rgba(34,197,94,.3),0 4px 0 #15803d}50%{box-shadow:0 0 25px rgba(34,197,94,.5),0 4px 0 #15803d}}
.button.cs-1{padding:16px 50px;background:linear-gradient(180deg,#22c55e,#16a34a);border:none;border-radius:6px;color:#fff;font-weight:900;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 0 #15803d,0 6px 15px rgba(0,0,0,.3);animation:cs1Pulse 2s ease infinite;position:relative;top:0;transition:.1s}
.button.cs-1:hover{top:2px;box-shadow:0 2px 0 #15803d,0 3px 8px rgba(0,0,0,.2)}
/* CS02 - DEPOSIT (cam/vàng khẩn cấp) */
@keyframes cs2Urgency{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.button.cs-2{padding:16px 44px;background:linear-gradient(180deg,#f59e0b,#d97706);border:none;border-radius:6px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 0 #b45309,0 6px 15px rgba(0,0,0,.3);animation:cs2Urgency 1.5s ease infinite;position:relative;top:0;transition:.1s}
.button.cs-2:hover{top:2px;box-shadow:0 2px 0 #b45309}
/* CS03 - JACKPOT GOLD */
@keyframes cs3Gold{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes cs3Shine{0%{left:-40%}100%{left:140%}}
.button.cs-3{padding:16px 44px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c,#bf953f);background-size:300%;border:none;border-radius:6px;color:#3a2500;font-weight:900;text-transform:uppercase;letter-spacing:2px;animation:cs3Gold 3s linear infinite;position:relative;overflow:hidden;transition:.3s}
.button.cs-3::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(25deg);animation:cs3Shine 2s ease-in-out infinite}
.button.cs-3 span{position:relative;z-index:2}
.button.cs-3:hover{transform:scale(1.08);box-shadow:0 0 30px rgba(191,149,63,.5)}
/* CS04 - SPIN (conic-gradient xoay + glow) */
@keyframes cs4Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes cs4Glow{0%,100%{box-shadow:0 0 15px rgba(168,85,247,.3),0 0 30px rgba(236,72,153,.15)}50%{box-shadow:0 0 30px rgba(168,85,247,.5),0 0 60px rgba(236,72,153,.25)}}
.button.cs-4{position:relative;padding:16px 44px;background:#1a0030;border:none;border-radius:50px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:3px;z-index:1;overflow:hidden;animation:cs4Glow 2s ease infinite;transition:.3s}
.button.cs-4::before{content:'';position:absolute;inset:-3px;border-radius:52px;background:conic-gradient(#a855f7,#ec4899,#f59e0b,#22c55e,#3b82f6,#a855f7);animation:cs4Spin 2s linear infinite;z-index:-2}
.button.cs-4::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#1a0030;z-index:-1}
.button.cs-4 span{position:relative;z-index:2}
.button.cs-4:hover{transform:scale(1.1);filter:brightness(1.2)}
/* CS05 - LIVE BET (đỏ + dot nhấp nháy) */
@keyframes cs5Live{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.button.cs-5{padding:16px 44px;background:linear-gradient(180deg,#dc2626,#b91c1c);border:none;border-radius:6px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 0 #991b1b,0 6px 15px rgba(0,0,0,.3);position:relative;top:0;transition:.1s;padding-left:36px}
.button.cs-5::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#fff;border-radius:50%;animation:cs5Live 1.5s ease infinite}
.button.cs-5:hover{top:2px;box-shadow:0 2px 0 #991b1b}
/* CS06 - FREE BET (gift box bounce + confetti vibe) */
@keyframes cs6Bounce{0%,70%,100%{transform:translateY(0)}75%{transform:translateY(-6px)}80%{transform:translateY(0)}85%{transform:translateY(-3px)}90%{transform:translateY(0)}}
@keyframes cs6Shine{0%{left:-40%}100%{left:140%}}
.button.cs-6{padding:14px 36px;background:linear-gradient(135deg,#7c3aed,#a855f7);border:2px dashed rgba(251,191,36,.6);border-radius:8px;color:#fde68a;font-weight:800;text-transform:uppercase;letter-spacing:1px;animation:cs6Bounce 3s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.cs-6::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(25deg);animation:cs6Shine 2s ease-in-out infinite}
.button.cs-6 span{position:relative;z-index:2}
.button.cs-6:hover{transform:scale(1.08);box-shadow:0 0 25px rgba(168,85,247,.4)}
/* CS07 - VIP BLACK & GOLD (luxury gradient border + inner glow) */
@keyframes cs7Gold{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes cs7Glow{0%,100%{box-shadow:inset 0 0 20px rgba(191,149,63,.08),0 0 10px rgba(191,149,63,.15)}50%{box-shadow:inset 0 0 30px rgba(191,149,63,.12),0 0 25px rgba(191,149,63,.25)}}
.button.cs-7{position:relative;padding:16px 44px;background:#080808;border:none;border-radius:6px;color:#d4a843;font-weight:800;text-transform:uppercase;letter-spacing:3px;z-index:1;overflow:hidden;animation:cs7Glow 3s ease infinite;transition:.3s}
.button.cs-7::before{content:'';position:absolute;inset:-2px;border-radius:8px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#aa771c,#fbf5b7,#bf953f);background-size:200%;animation:cs7Gold 4s linear infinite;z-index:-2}
.button.cs-7::after{content:'';position:absolute;inset:2px;border-radius:5px;background:#080808;z-index:-1}
.button.cs-7 span{position:relative;z-index:2}
.button.cs-7:hover{color:#fcf6ba;transform:scale(1.05)}
/* CS08 - CASHOUT (xanh lá success + check animation) */
@keyframes cs8Slide{0%{background-position:200% 0}100%{background-position:0% 0}}
.button.cs-8{padding:16px 44px;background:linear-gradient(90deg,#15803d,#22c55e,#4ade80,#22c55e,#15803d);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:1px;animation:cs8Slide 3s linear infinite;box-shadow:0 4px 20px rgba(34,197,94,.3);transition:.3s}
.button.cs-8:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(34,197,94,.5);filter:brightness(1.1)}
/* CS09 - ODDS DISPLAY (counting glow + border pulse) */
@keyframes cs9Glow{0%,100%{text-shadow:0 0 5px rgba(251,191,36,.3);box-shadow:inset 0 0 15px rgba(251,191,36,.05)}50%{text-shadow:0 0 15px rgba(251,191,36,.6),0 0 30px rgba(251,191,36,.2);box-shadow:inset 0 0 25px rgba(251,191,36,.1)}}
@keyframes cs9Border{0%,100%{border-color:rgba(251,191,36,.2)}50%{border-color:rgba(251,191,36,.6)}}
.button.cs-9{padding:14px 36px;background:linear-gradient(180deg,#0a0a1a,#1a1a2e);border:2px solid rgba(251,191,36,.2);border-radius:4px;color:#fbbf24;font-weight:900;font-size:1.2rem;font-family:'Courier New',monospace;text-align:center;animation:cs9Glow 2s ease infinite,cs9Border 2s ease infinite;transition:.3s}
.button.cs-9:hover{transform:scale(1.1);background:#1a1a3e;box-shadow:0 0 20px rgba(251,191,36,.3)}
/* CS10 - VEGAS NEON */
@keyframes cs10Neon{0%,100%{text-shadow:0 0 5px #ff0,0 0 10px #ff0,0 0 20px #ff8c00;box-shadow:0 0 10px rgba(255,140,0,.3)}50%{text-shadow:0 0 10px #ff0,0 0 20px #ff0,0 0 40px #ff8c00;box-shadow:0 0 20px rgba(255,140,0,.5)}}
.button.cs-10{padding:14px 36px;background:transparent;border:2px solid #fbbf24;border-radius:6px;color:#fbbf24;font-weight:800;text-transform:uppercase;letter-spacing:3px;animation:cs10Neon 2s ease infinite;transition:.3s}
.button.cs-10:hover{background:rgba(251,191,36,.1)}
/* CS11 - POKER CHIP (viền conic xoay + radial chip pattern) */
@keyframes cs11Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.cs-11{position:relative;padding:14px 40px;background:radial-gradient(circle at center,#dc2626 35%,#fff 35%,#fff 40%,#dc2626 40%);border:none;border-radius:50px;color:#fff;font-weight:900;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:1;overflow:hidden;transition:.3s}
.button.cs-11::before{content:'';position:absolute;inset:-4px;border-radius:54px;background:conic-gradient(#fbbf24,#bf953f,#fde68a,#d4a843,#fbbf24,#bf953f,#fde68a,#d4a843,#fbbf24);animation:cs11Spin 3s linear infinite;z-index:-2}
.button.cs-11::after{content:'';position:absolute;inset:3px;border-radius:47px;background:radial-gradient(circle at center,#dc2626 35%,#fff 35%,#fff 40%,#dc2626 40%);z-index:-1}
.button.cs-11 span{position:relative;z-index:2}
.button.cs-11:hover{transform:scale(1.1);box-shadow:0 4px 25px rgba(220,38,38,.4)}
/* CS12 - ROULETTE */
@keyframes cs12Spin{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.button.cs-12{padding:14px 36px;background:linear-gradient(135deg,#dc2626,#000,#15803d,#000,#dc2626);border:2px solid #d4a843;border-radius:6px;color:#fbbf24;font-weight:800;text-transform:uppercase;animation:cs12Spin 6s linear infinite;transition:.3s}
.button.cs-12:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(212,168,67,.3)}
/* CS13 - SLOT MACHINE */
@keyframes cs13Slot{0%,80%{transform:translateY(0)}85%{transform:translateY(-3px)}90%{transform:translateY(1px)}95%{transform:translateY(-1px)}100%{transform:translateY(0)}}
.button.cs-13{padding:16px 44px;background:linear-gradient(180deg,#b91c1c,#991b1b);border:3px solid #fbbf24;border-radius:8px;color:#fde68a;font-weight:900;text-transform:uppercase;letter-spacing:1px;animation:cs13Slot 2s ease infinite;box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),0 4px 15px rgba(0,0,0,.3);transition:.3s}
.button.cs-13:hover{box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),0 0 25px rgba(251,191,36,.4)}
/* CS14 - LUCKY GREEN */
@keyframes cs14Lucky{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.cs-14{padding:14px 36px;background:linear-gradient(90deg,#15803d,#22c55e,#4ade80,#22c55e,#15803d);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:800;text-transform:uppercase;animation:cs14Lucky 3s linear infinite;box-shadow:0 4px 20px rgba(34,197,94,.3);transition:.3s}
.button.cs-14:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(34,197,94,.5)}
/* CS15 - WELCOME BONUS */
@keyframes cs15Bounce{0%,70%,100%{transform:scale(1)}75%{transform:scale(1.05)}80%{transform:scale(.98)}85%{transform:scale(1.02)}}
.button.cs-15{padding:16px 44px;background:linear-gradient(135deg,#f59e0b,#fbbf24);border:none;border-radius:6px;color:#78350f;font-weight:900;text-transform:uppercase;letter-spacing:1px;animation:cs15Bounce 3s ease infinite;box-shadow:0 4px 0 #b45309,0 6px 20px rgba(0,0,0,.2);position:relative;top:0;transition:.1s}
.button.cs-15:hover{top:2px;box-shadow:0 2px 0 #b45309}
/* CS16 - WITHDRAW (outline minimal + slide fill) */
.button.cs-16{padding:14px 36px;background:transparent;border:2px solid #94a3b8;border-radius:6px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:1px;position:relative;z-index:1;overflow:hidden;transition:color .3s}
.button.cs-16::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(180deg,#475569,#334155);z-index:-1;transition:height .3s ease}
.button.cs-16:hover{color:#fff;border-color:#475569}
.button.cs-16:hover::before{height:100%}
/* CS17 - DOUBLE OR NOTHING */
@keyframes cs17Pulse{0%,100%{box-shadow:0 0 10px rgba(239,68,68,.3),0 0 10px rgba(34,197,94,.3)}50%{box-shadow:0 0 25px rgba(239,68,68,.4),0 0 25px rgba(34,197,94,.4)}}
.button.cs-17{padding:14px 36px;background:linear-gradient(90deg,#dc2626 50%,#22c55e 50%);border:none;border-radius:6px;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:1px;animation:cs17Pulse 2s ease infinite;transition:.3s}
.button.cs-17:hover{transform:scale(1.08)}
/* CS18 - PLAY LIVE */
@keyframes cs18Border{0%,100%{border-color:rgba(239,68,68,.5)}33%{border-color:rgba(34,197,94,.5)}66%{border-color:rgba(251,191,36,.5)}}
.button.cs-18{padding:14px 36px;background:#0a0a0a;border:2px solid;border-radius:6px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:2px;animation:cs18Border 3s ease infinite;transition:.3s}
.button.cs-18:hover{background:#1a1a1a;box-shadow:0 0 20px rgba(255,255,255,.1)}
/* CS19 - HIGH ROLLER */
@keyframes cs19Grad{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.cs-19{padding:16px 44px;background:linear-gradient(90deg,#000,#1a1a2e,#bf953f,#1a1a2e,#000);background-size:200%;border:1px solid rgba(191,149,63,.3);border-radius:6px;color:#d4a843;font-weight:800;text-transform:uppercase;letter-spacing:3px;animation:cs19Grad 4s linear infinite;transition:.3s}
.button.cs-19:hover{border-color:rgba(191,149,63,.6);box-shadow:0 0 25px rgba(191,149,63,.3)}
/* CS20 - MEGA JACKPOT ULTIMATE */
@keyframes cs20Bg{0%{background-position:0% 50%}100%{background-position:400% 50%}}
@keyframes cs20Shine{0%{left:-30%}100%{left:130%}}
@keyframes cs20Glow{0%,100%{box-shadow:0 0 15px rgba(255,200,0,.4),0 4px 0 #7a4a00}50%{box-shadow:0 0 30px rgba(255,200,0,.6),0 0 60px rgba(255,150,0,.2),0 4px 0 #7a4a00}}
.button.cs-20{padding:18px 55px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#aa771c,#fbf5b7,#bf953f,#fcf6ba);background-size:400%;border:none;border-radius:8px;color:#3a2500;font-weight:900;font-size:1.15rem;text-transform:uppercase;letter-spacing:3px;animation:cs20Bg 3s linear infinite,cs20Glow 2s ease infinite;position:relative;overflow:hidden;top:0;transition:.15s}
.button.cs-20::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(25deg);animation:cs20Shine 1.5s ease-in-out infinite}
.button.cs-20 span{position:relative;z-index:2}
.button.cs-20:hover{top:2px;transform:scale(1.05)}
/* ████████████████████████████████████████████████████████████████
   🌊 LIQUID / WATER BUTTONS
   ████████████████████████████████████████████████████████████████ */
@keyframes lqWave{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes lqRise{0%{top:80%}100%{top:-10%}}
@keyframes lqBubble{0%{transform:translateY(0) scale(1);opacity:.6}100%{transform:translateY(-40px) scale(.3);opacity:0}}
/* LQ01 - OCEAN WAVE */
.button.lq-1{padding:14px 36px;background:linear-gradient(90deg,#0077b6,#00b4d8,#90e0ef,#00b4d8,#0077b6);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:700;animation:lqWave 3s linear infinite;box-shadow:0 4px 20px rgba(0,119,182,.3);transition:.3s}
.button.lq-1:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(0,119,182,.5)}
/* LQ02 - WATER FILL */
.button.lq-2{padding:14px 36px;background:linear-gradient(180deg,transparent 50%,rgba(0,180,216,.3) 50%,rgba(0,119,182,.6));border:2px solid #0077b6;border-radius:50px;color:#0077b6;font-weight:700;position:relative;overflow:hidden;z-index:1;transition:.4s}
.button.lq-2::before{content:'';position:absolute;bottom:-100%;left:0;width:100%;height:100%;background:linear-gradient(180deg,#00b4d8,#0077b6);z-index:-1;transition:bottom .4s ease}
.button.lq-2:hover{color:#fff;border-color:#00b4d8}
.button.lq-2:hover::before{bottom:0}
/* LQ03 - BUBBLE FLOAT */
@keyframes lq3B1{0%{bottom:-10%;opacity:.6}100%{bottom:110%;opacity:0}}
@keyframes lq3B2{0%{bottom:-20%;opacity:.4}100%{bottom:120%;opacity:0}}
.button.lq-3{padding:14px 36px;background:linear-gradient(180deg,#0077b6,#023e8a);border:none;border-radius:50px;color:#90e0ef;font-weight:700;position:relative;overflow:hidden;transition:.3s}
.button.lq-3::before{content:'';position:absolute;left:20%;bottom:-10%;width:6px;height:6px;background:rgba(144,224,239,.4);border-radius:50%;animation:lq3B1 2s ease infinite}
.button.lq-3::after{content:'';position:absolute;right:25%;bottom:-20%;width:4px;height:4px;background:rgba(144,224,239,.3);border-radius:50%;animation:lq3B2 2.5s ease .5s infinite}
.button.lq-3 span{position:relative;z-index:2}
.button.lq-3:hover{transform:scale(1.08)}
/* LQ04 - RIPPLE RING */
@keyframes lq4Ring{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.button.lq-4{padding:14px 36px;background:#0077b6;border:none;border-radius:50px;color:#fff;font-weight:700;position:relative;z-index:1;transition:.3s}
.button.lq-4::before,.button.lq-4::after{content:'';position:absolute;inset:0;border:2px solid rgba(144,224,239,.4);border-radius:50px;z-index:-1}
.button.lq-4::before{animation:lq4Ring 2s ease-out infinite}
.button.lq-4::after{animation:lq4Ring 2s ease-out .6s infinite}
.button.lq-4:hover{background:#00b4d8}
/* LQ05 - AQUA GLASS */
.button.lq-5{padding:14px 36px;background:rgba(0,180,216,.15);backdrop-filter:blur(10px);border:1px solid rgba(144,224,239,.3);border-radius:50px;color:#00b4d8;font-weight:700;box-shadow:inset 0 0 20px rgba(0,180,216,.05);transition:.3s}
.button.lq-5:hover{background:rgba(0,180,216,.25);border-color:rgba(144,224,239,.6);box-shadow:0 8px 25px rgba(0,180,216,.2)}
/* LQ06 - DEEP SEA */
@keyframes lq6Deep{0%,100%{box-shadow:inset 0 0 20px rgba(2,62,138,.3),0 0 15px rgba(0,119,182,.2)}50%{box-shadow:inset 0 0 35px rgba(2,62,138,.5),0 0 25px rgba(0,119,182,.3)}}
.button.lq-6{padding:14px 36px;background:linear-gradient(180deg,#023e8a,#001845);border:1px solid rgba(0,119,182,.3);border-radius:8px;color:#90e0ef;font-weight:700;animation:lq6Deep 3s ease infinite;transition:.3s}
.button.lq-6:hover{border-color:rgba(144,224,239,.5)}
/* LQ07 - FROST ICE */
.button.lq-7{padding:14px 36px;background:linear-gradient(135deg,rgba(224,242,254,.9),rgba(186,230,253,.7));border:1px solid rgba(56,189,248,.3);border-radius:8px;color:#0c4a6e;font-weight:700;box-shadow:0 2px 10px rgba(56,189,248,.15);transition:.3s}
.button.lq-7:hover{box-shadow:0 8px 25px rgba(56,189,248,.25);transform:translateY(-3px)}
/* LQ08 - WAVE BOTTOM */
@keyframes lq8Wave{0%{d:path('M0,8 Q15,0 30,8 T60,8 V20 H0 Z')}50%{d:path('M0,8 Q15,16 30,8 T60,8 V20 H0 Z')}100%{d:path('M0,8 Q15,0 30,8 T60,8 V20 H0 Z')}}
.button.lq-8{padding:14px 36px;background:linear-gradient(180deg,#0284c7,#0369a1);border:none;border-radius:8px;color:#fff;font-weight:700;position:relative;overflow:hidden;transition:.3s}
.button.lq-8::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:8px;background:repeating-linear-gradient(90deg,transparent,transparent 10px,rgba(255,255,255,.1) 10px,rgba(255,255,255,.1) 20px);animation:lqWave 2s linear infinite;background-size:200% 100%}
.button.lq-8 span{position:relative;z-index:2}
.button.lq-8:hover{transform:scale(1.08)}
/* LQ09 - DROPLET */
.button.lq-9{padding:16px 36px;background:linear-gradient(180deg,#38bdf8,#0284c7);border:none;border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;color:#fff;font-weight:700;transition:.5s}
.button.lq-9:hover{border-radius:50px;box-shadow:0 8px 25px rgba(2,132,199,.4)}
/* LQ10 - TIDAL GRADIENT */
@keyframes lq10Tide{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
.button.lq-10{padding:14px 36px;background:linear-gradient(135deg,#0077b6,#00b4d8,#90e0ef,#caf0f8);background-size:300%;border:none;border-radius:50px;color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.2);animation:lq10Tide 4s ease infinite;transition:.3s}
.button.lq-10:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(0,119,182,.3)}
/* LQ11 - MERCURY */
@keyframes lq11Merc{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lq-11{padding:14px 36px;background:linear-gradient(90deg,#94a3b8,#e2e8f0,#cbd5e1,#f1f5f9,#94a3b8);background-size:200%;border:none;border-radius:50px;color:#334155;font-weight:700;animation:lq11Merc 3s linear infinite;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
.button.lq-11:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(0,0,0,.15)}
/* LQ12 - LAVA */
@keyframes lq12Lava{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lq-12{padding:14px 36px;background:linear-gradient(90deg,#dc2626,#f97316,#fbbf24,#f97316,#dc2626);background-size:200%;border:none;border-radius:8px;color:#fff;font-weight:700;animation:lq12Lava 3s linear infinite;box-shadow:0 4px 20px rgba(220,38,38,.3);transition:.3s}
.button.lq-12:hover{box-shadow:0 8px 30px rgba(220,38,38,.5);transform:scale(1.08)}
/* LQ13 - ACID GREEN */
@keyframes lq13Acid{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lq-13{padding:14px 36px;background:linear-gradient(90deg,#15803d,#4ade80,#a3e635,#4ade80,#15803d);background-size:200%;border:none;border-radius:50px;color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:lq13Acid 3s linear infinite;transition:.3s}
.button.lq-13:hover{transform:scale(1.08);box-shadow:0 0 25px rgba(74,222,128,.4)}
/* LQ14 - PURPLE INK */
@keyframes lq14Ink{0%,100%{box-shadow:inset 0 -10px 20px rgba(168,85,247,.2)}50%{box-shadow:inset 0 -15px 30px rgba(168,85,247,.35)}}
.button.lq-14{padding:14px 36px;background:linear-gradient(180deg,#1e1b4b,#312e81);border:1px solid rgba(168,85,247,.2);border-radius:50px;color:#c084fc;font-weight:700;animation:lq14Ink 3s ease infinite;transition:.3s}
.button.lq-14:hover{border-color:rgba(168,85,247,.5);color:#e9d5ff}
/* LQ15 - RAIN DROP */
@keyframes lq15Drop{0%{top:-8px;opacity:0}30%{opacity:1}100%{top:calc(100% + 8px);opacity:0}}
.button.lq-15{padding:14px 36px;background:#0c4a6e;border:none;border-radius:8px;color:#7dd3fc;font-weight:700;position:relative;overflow:hidden;transition:.3s}
.button.lq-15::after{content:'';position:absolute;left:70%;top:-8px;width:2px;height:8px;background:rgba(125,211,252,.4);border-radius:0 0 2px 2px;animation:lq15Drop 1.5s ease infinite}
.button.lq-15 span{position:relative;z-index:2}
.button.lq-15:hover{background:#0369a1}
/* LQ16 - CORAL REEF */
.button.lq-16{padding:14px 36px;background:linear-gradient(135deg,#0891b2,#06b6d4,#22d3ee);border:none;border-radius:50px;color:#fff;font-weight:700;box-shadow:0 4px 15px rgba(6,182,212,.3);transition:.3s}
.button.lq-16:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(6,182,212,.4)}
/* LQ17 - OIL SLICK */
@keyframes lq17Oil{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.button.lq-17{padding:14px 36px;background:linear-gradient(135deg,#1e1b4b,#312e81,#3730a3,#4f46e5);border:none;border-radius:50px;color:#c7d2fe;font-weight:700;animation:lq17Oil 6s linear infinite;transition:.3s}
.button.lq-17:hover{transform:scale(1.08)}
/* LQ18 - FROZEN */
@keyframes lq18Frost{0%,100%{box-shadow:0 0 15px rgba(56,189,248,.2),inset 0 0 15px rgba(186,230,253,.1)}50%{box-shadow:0 0 25px rgba(56,189,248,.35),inset 0 0 25px rgba(186,230,253,.15)}}
.button.lq-18{padding:14px 36px;background:linear-gradient(135deg,#e0f2fe,#bae6fd,#7dd3fc);border:1px solid rgba(56,189,248,.3);border-radius:4px;color:#0c4a6e;font-weight:700;animation:lq18Frost 3s ease infinite;transition:.3s}
.button.lq-18:hover{transform:scale(1.05);border-color:rgba(56,189,248,.6)}
/* LQ19 - NEON LIQUID */
@keyframes lq19Glow{0%,100%{box-shadow:0 0 10px rgba(0,255,255,.3),inset 0 0 10px rgba(0,255,255,.05)}50%{box-shadow:0 0 25px rgba(0,255,255,.5),inset 0 0 20px rgba(0,255,255,.1)}}
.button.lq-19{padding:14px 36px;background:rgba(0,255,255,.05);border:1px solid rgba(0,255,255,.3);border-radius:50px;color:#0ff;font-weight:700;animation:lq19Glow 2s ease infinite;transition:.3s}
.button.lq-19:hover{background:rgba(0,255,255,.12);color:#fff}
/* LQ20 - ULTIMATE LIQUID */
@keyframes lq20Bg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes lq20Shine{0%{left:-40%}100%{left:140%}}
.button.lq-20{padding:16px 44px;background:linear-gradient(90deg,#0077b6,#00b4d8,#90e0ef,#48cae4,#0096c7,#0077b6);background-size:300%;border:none;border-radius:50px;color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:2px;animation:lq20Bg 4s linear infinite;position:relative;overflow:hidden;transition:.3s}
.button.lq-20::after{content:'';position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(25deg);animation:lq20Shine 2s ease-in-out infinite}
.button.lq-20 span{position:relative;z-index:2}
.button.lq-20:hover{transform:scale(1.1);box-shadow:0 8px 35px rgba(0,119,182,.5)}
/* ████████████████████████████████████████████████████████████████
   💎 LUXURY / JEWELRY BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* LX01 - DIAMOND WHITE */
@keyframes lx1Shine{0%{left:-40%}100%{left:140%}}
@keyframes lx1Sparkle{0%,100%{box-shadow:0 0 15px rgba(255,255,255,.2)}50%{box-shadow:0 0 30px rgba(255,255,255,.4),0 0 60px rgba(200,200,255,.15)}}
.button.lx-1{padding:14px 36px;background:linear-gradient(135deg,#f8fafc,#e2e8f0,#f1f5f9,#cbd5e1);border:1px solid rgba(203,213,225,.5);border-radius:4px;color:#334155;font-weight:700;letter-spacing:2px;text-transform:uppercase;animation:lx1Sparkle 3s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.lx-1::after{content:'';position:absolute;top:-50%;left:-40%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:rotate(25deg);animation:lx1Shine 2.5s ease-in-out infinite}
.button.lx-1 span{position:relative;z-index:2}
.button.lx-1:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.1)}
/* LX02 - RUBY RED */
@keyframes lx2Glow{0%,100%{box-shadow:0 0 15px rgba(190,18,60,.3),inset 0 0 10px rgba(255,200,200,.1)}50%{box-shadow:0 0 30px rgba(190,18,60,.5),inset 0 0 20px rgba(255,200,200,.15)}}
.button.lx-2{padding:14px 36px;background:linear-gradient(135deg,#9f1239,#be123c,#e11d48,#be123c);border:1px solid rgba(225,29,72,.3);border-radius:4px;color:#ffe4e6;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx2Glow 3s ease infinite;transition:.3s}
.button.lx-2:hover{transform:scale(1.05)}
/* LX03 - EMERALD GREEN */
@keyframes lx3Glow{0%,100%{box-shadow:0 0 15px rgba(5,150,105,.3)}50%{box-shadow:0 0 30px rgba(5,150,105,.5)}}
.button.lx-3{padding:14px 36px;background:linear-gradient(135deg,#064e3b,#059669,#10b981,#059669);border:1px solid rgba(16,185,129,.3);border-radius:4px;color:#d1fae5;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx3Glow 3s ease infinite;transition:.3s}
.button.lx-3:hover{transform:scale(1.05)}
/* LX04 - SAPPHIRE BLUE */
@keyframes lx4Glow{0%,100%{box-shadow:0 0 15px rgba(29,78,216,.3)}50%{box-shadow:0 0 30px rgba(29,78,216,.5)}}
.button.lx-4{padding:14px 36px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8,#3b82f6,#1d4ed8);border:1px solid rgba(59,130,246,.3);border-radius:4px;color:#dbeafe;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx4Glow 3s ease infinite;transition:.3s}
.button.lx-4:hover{transform:scale(1.05)}
/* LX05 - ROSE GOLD */
@keyframes lx5Gold{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lx-5{padding:14px 36px;background:linear-gradient(90deg,#b76e79,#e8b4b8,#daa0a6,#f0c4c8,#b76e79);background-size:200%;border:none;border-radius:50px;color:#4a1520;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx5Gold 3s linear infinite;box-shadow:0 4px 15px rgba(183,110,121,.3);transition:.3s}
.button.lx-5:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(183,110,121,.4)}
/* LX06 - PLATINUM */
@keyframes lx6Plat{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lx-6{padding:14px 36px;background:linear-gradient(90deg,#9ca3af,#e5e7eb,#d1d5db,#f3f4f6,#9ca3af);background-size:200%;border:none;border-radius:4px;color:#1f2937;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx6Plat 3s linear infinite;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
.button.lx-6:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.15)}
/* LX07 - PEARL */
@keyframes lx7Pearl{0%,100%{box-shadow:0 0 15px rgba(255,255,255,.3),inset 0 0 20px rgba(255,228,230,.2)}50%{box-shadow:0 0 25px rgba(255,255,255,.5),inset 0 0 30px rgba(255,228,230,.3)}}
.button.lx-7{padding:14px 36px;background:linear-gradient(135deg,#fff1f2,#ffe4e6,#fecdd3,#ffe4e6);border:1px solid rgba(252,165,165,.2);border-radius:50px;color:#881337;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx7Pearl 3s ease infinite;transition:.3s}
.button.lx-7:hover{transform:scale(1.05)}
/* LX08 - AMETHYST */
@keyframes lx8Glow{0%,100%{box-shadow:0 0 15px rgba(124,58,237,.3)}50%{box-shadow:0 0 30px rgba(124,58,237,.5)}}
.button.lx-8{padding:14px 36px;background:linear-gradient(135deg,#2e1065,#5b21b6,#7c3aed,#5b21b6);border:1px solid rgba(139,92,246,.3);border-radius:4px;color:#ede9fe;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx8Glow 3s ease infinite;transition:.3s}
.button.lx-8:hover{transform:scale(1.05)}
/* LX09 - GOLD BAR */
@keyframes lx9Bar{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.lx-9{padding:14px 36px;background:linear-gradient(90deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c,#bf953f);background-size:300%;border:none;border-radius:4px;color:#3a2500;font-weight:800;text-transform:uppercase;letter-spacing:2px;animation:lx9Bar 3s linear infinite;box-shadow:inset 0 -3px 6px rgba(0,0,0,.15),0 4px 10px rgba(0,0,0,.15);transition:.3s}
.button.lx-9:hover{transform:scale(1.05)}
/* LX10 - BLACK ONYX */
.button.lx-10{padding:14px 36px;background:linear-gradient(135deg,#000,#111,#1a1a1a,#111);border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#a3a3a3;font-weight:700;text-transform:uppercase;letter-spacing:3px;box-shadow:0 4px 15px rgba(0,0,0,.4);transition:.3s}
.button.lx-10:hover{border-color:rgba(255,255,255,.2);color:#e5e5e5;box-shadow:0 8px 25px rgba(0,0,0,.5);transform:scale(1.05)}
/* LX11 - CRYSTAL CLEAR */
@keyframes lx11Crystal{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.button.lx-11{padding:14px 36px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.3),rgba(255,255,255,.1));background-size:200%;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.25);border-radius:4px;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx11Crystal 4s ease infinite;transition:.3s}
.button.lx-11:hover{border-color:rgba(255,255,255,.5);box-shadow:0 0 20px rgba(255,255,255,.15)}
/* LX12 - COPPER */
@keyframes lx12Copper{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.lx-12{padding:14px 36px;background:linear-gradient(90deg,#92400e,#d97706,#b45309,#f59e0b,#92400e);background-size:200%;border:none;border-radius:4px;color:#fef3c7;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx12Copper 3s linear infinite;transition:.3s}
.button.lx-12:hover{transform:scale(1.05);box-shadow:0 4px 20px rgba(217,119,6,.3)}
/* LX13 - SILVER CHAIN */
@keyframes lx13Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.lx-13{position:relative;padding:14px 36px;background:#1a1a1a;border:none;border-radius:50px;color:#e5e7eb;font-weight:700;text-transform:uppercase;letter-spacing:2px;z-index:1;overflow:hidden;transition:.3s}
.button.lx-13::before{content:'';position:absolute;inset:-2px;border-radius:52px;background:conic-gradient(#9ca3af,#e5e7eb,#6b7280,#f3f4f6,#9ca3af);animation:lx13Spin 4s linear infinite;z-index:-2}
.button.lx-13::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#1a1a1a;z-index:-1}
.button.lx-13 span{position:relative;z-index:2}
.button.lx-13:hover{transform:scale(1.08)}
/* LX14 - OPAL */
@keyframes lx14Opal{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.button.lx-14{padding:14px 36px;background:linear-gradient(135deg,#fce7f3,#dbeafe,#d1fae5,#fef3c7);border:1px solid rgba(255,255,255,.4);border-radius:50px;color:#1f2937;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx14Opal 8s linear infinite;transition:.3s}
.button.lx-14:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(0,0,0,.1)}
/* LX15 - TOPAZ */
@keyframes lx15Glow{0%,100%{box-shadow:0 0 15px rgba(245,158,11,.3)}50%{box-shadow:0 0 30px rgba(245,158,11,.5)}}
.button.lx-15{padding:14px 36px;background:linear-gradient(135deg,#78350f,#b45309,#f59e0b,#b45309);border:1px solid rgba(245,158,11,.3);border-radius:4px;color:#fef3c7;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx15Glow 3s ease infinite;transition:.3s}
.button.lx-15:hover{transform:scale(1.05)}
/* LX16 - OBSIDIAN */
.button.lx-16{padding:14px 36px;background:linear-gradient(135deg,#0a0a0a,#171717,#262626,#171717);border:1px solid rgba(168,85,247,.15);border-radius:4px;color:#a855f7;font-weight:700;text-transform:uppercase;letter-spacing:3px;box-shadow:inset 0 0 20px rgba(0,0,0,.5);transition:.3s}
.button.lx-16:hover{border-color:rgba(168,85,247,.4);box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 0 20px rgba(168,85,247,.2)}
/* LX17 - JADE */
.button.lx-17{padding:14px 36px;background:linear-gradient(135deg,#064e3b,#047857,#059669);border:none;border-radius:4px;color:#a7f3d0;font-weight:700;text-transform:uppercase;letter-spacing:2px;box-shadow:inset 0 2px 4px rgba(255,255,255,.1),0 4px 15px rgba(5,150,105,.3);transition:.3s}
.button.lx-17:hover{transform:scale(1.05);box-shadow:inset 0 2px 4px rgba(255,255,255,.1),0 8px 25px rgba(5,150,105,.4)}
/* LX18 - CHAMPAGNE */
@keyframes lx18Bub{0%{bottom:-5%;opacity:.5}100%{bottom:110%;opacity:0}}
.button.lx-18{padding:14px 36px;background:linear-gradient(180deg,#fde68a,#fbbf24,#f59e0b);border:none;border-radius:50px;color:#78350f;font-weight:700;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.lx-18::after{content:'';position:absolute;left:30%;bottom:-5%;width:3px;height:3px;background:rgba(255,255,255,.5);border-radius:50%;animation:lx18Bub 2s ease infinite}
.button.lx-18 span{position:relative;z-index:2}
.button.lx-18:hover{transform:scale(1.08);box-shadow:0 8px 25px rgba(251,191,36,.3)}
/* LX19 - TANZANITE */
@keyframes lx19Glow{0%,100%{box-shadow:0 0 15px rgba(79,70,229,.3)}50%{box-shadow:0 0 30px rgba(79,70,229,.5),0 0 60px rgba(99,102,241,.2)}}
.button.lx-19{padding:14px 36px;background:linear-gradient(135deg,#1e1b4b,#3730a3,#4f46e5,#3730a3);border:1px solid rgba(99,102,241,.3);border-radius:4px;color:#c7d2fe;font-weight:700;text-transform:uppercase;letter-spacing:2px;animation:lx19Glow 3s ease infinite;transition:.3s}
.button.lx-19:hover{transform:scale(1.05)}
/* LX20 - ULTIMATE LUXURY */
@keyframes lx20Bg{0%{background-position:0% 50%}100%{background-position:400% 50%}}
@keyframes lx20Shine{0%{left:-30%}100%{left:130%}}
@keyframes lx20Glow{0%,100%{box-shadow:0 0 15px rgba(191,149,63,.3),0 0 30px rgba(190,18,60,.1)}50%{box-shadow:0 0 25px rgba(191,149,63,.5),0 0 50px rgba(190,18,60,.2)}}
.button.lx-20{padding:16px 44px;background:linear-gradient(90deg,#bf953f,#be123c,#1d4ed8,#059669,#bf953f);background-size:400%;border:none;border-radius:4px;color:#fff;font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:3px;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:lx20Bg 6s linear infinite,lx20Glow 3s ease infinite;position:relative;overflow:hidden;transition:.3s}
.button.lx-20::after{content:'';position:absolute;top:-50%;left:-30%;width:20%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(25deg);animation:lx20Shine 2s ease-in-out infinite}
.button.lx-20 span{position:relative;z-index:2}
.button.lx-20:hover{transform:scale(1.1)}
/* ████████████████████████████████████████████████████████████████
   🕹️ RETRO / SYNTHWAVE BUTTONS
   ████████████████████████████████████████████████████████████████ */
/* RT01 - SYNTHWAVE GRADIENT */
@keyframes rt1Synth{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.rt-1{padding:14px 36px;background:linear-gradient(90deg,#ff006e,#8338ec,#3a86ff,#8338ec,#ff006e);background-size:200%;border:none;border-radius:0;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;animation:rt1Synth 3s linear infinite;box-shadow:0 0 15px rgba(255,0,110,.3);transition:.3s}
.button.rt-1:hover{box-shadow:0 0 30px rgba(255,0,110,.5);transform:scale(1.08)}
/* RT02 - PIXEL BORDER */
.button.rt-2{padding:14px 36px;background:#1a1a2e;color:#0ff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;border:4px solid #0ff;border-radius:0;box-shadow:inset 0 0 0 2px #1a1a2e,inset 0 0 0 4px #0ff;transition:.3s}
.button.rt-2:hover{background:#0ff;color:#1a1a2e;box-shadow:0 0 20px rgba(0,255,255,.4)}
/* RT03 - VHS GLITCH */
@keyframes rt3Glitch{0%,100%{text-shadow:2px 0 #ff006e,-2px 0 #0ff}25%{text-shadow:-2px 0 #ff006e,2px 0 #0ff}50%{text-shadow:1px 0 #ff006e,-1px 0 #0ff}75%{text-shadow:-1px 0 #ff006e,1px 0 #0ff}}
.button.rt-3{padding:14px 36px;background:#000;border:2px solid #333;border-radius:0;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;transition:.3s}
.button.rt-3:hover{animation:rt3Glitch .3s linear infinite;border-color:#ff006e}
/* RT04 - CRT SCANLINE */
@keyframes rt4Scan{0%{background-position:0 0}100%{background-position:0 4px}}
.button.rt-4{padding:14px 36px;background:#0a0a0a;border:2px solid #22c55e;border-radius:0;color:#22c55e;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.rt-4::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.3) 1px,rgba(0,0,0,.3) 2px);animation:rt4Scan 0.5s linear infinite;pointer-events:none}
.button.rt-4 span{position:relative;z-index:2}
.button.rt-4:hover{text-shadow:0 0 10px #22c55e;box-shadow:0 0 15px rgba(34,197,94,.3)}
/* RT05 - VAPORWAVE */
@keyframes rt5Vapor{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.rt-5{padding:14px 36px;background:linear-gradient(90deg,#ff71ce,#01cdfe,#05ffa1,#b967ff,#fffb96,#ff71ce);background-size:200%;border:none;border-radius:0;color:#1a1a2e;font-weight:900;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;animation:rt5Vapor 4s linear infinite;transition:.3s}
.button.rt-5:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(255,113,206,.3)}
/* RT06 - 8-BIT */
.button.rt-6{padding:14px 36px;background:#e74c3c;border:none;border-radius:0;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;box-shadow:4px 4px 0 #000;transition:.15s}
.button.rt-6:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.button.rt-6:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
/* RT07 - NEON GRID */
@keyframes rt7Grid{0%{background-position:0 0}100%{background-position:0 20px}}
.button.rt-7{padding:14px 36px;background:#0a0020;background-image:linear-gradient(rgba(255,0,110,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,110,.1) 1px,transparent 1px);background-size:20px 20px;border:2px solid #ff006e;border-radius:0;color:#ff006e;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;animation:rt7Grid 2s linear infinite;transition:.3s}
.button.rt-7 span{position:relative;z-index:2}
.button.rt-7:hover{text-shadow:0 0 15px #ff006e;box-shadow:0 0 20px rgba(255,0,110,.3)}
/* RT08 - ARCADE INSERT COIN */
@keyframes rt8Blink{0%,100%{opacity:1}50%{opacity:.4}}
.button.rt-8{padding:14px 36px;background:#000;border:3px solid #fbbf24;border-radius:0;color:#fbbf24;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;animation:rt8Blink 1.5s ease infinite;transition:.3s}
.button.rt-8:hover{background:#fbbf24;color:#000;animation:none;box-shadow:0 0 20px rgba(251,191,36,.4)}
/* RT09 - SUNSET DRIVE */
.button.rt-9{padding:14px 36px;background:linear-gradient(180deg,#ff006e,#8338ec,#1a1a2e);border:none;border-radius:0;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 15px rgba(131,56,236,.3);transition:.3s}
.button.rt-9:hover{box-shadow:0 8px 30px rgba(131,56,236,.5);transform:translateY(-3px)}
/* RT10 - DOS TERMINAL */
.button.rt-10{padding:14px 36px;background:#000;border:1px solid #22c55e;border-radius:0;color:#22c55e;font-weight:700;font-family:'Courier New',monospace;letter-spacing:1px;box-shadow:inset 0 0 30px rgba(34,197,94,.05);transition:.3s}
.button.rt-10:hover{text-shadow:0 0 10px #22c55e;box-shadow:inset 0 0 30px rgba(34,197,94,.1),0 0 15px rgba(34,197,94,.2)}
/* RT11 - CASSETTE TAPE */
@keyframes rt11Spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.button.rt-11{padding:14px 36px;background:linear-gradient(180deg,#78350f,#92400e,#78350f);border:2px solid #fbbf24;border-radius:0;color:#fde68a;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden;transition:.3s}
.button.rt-11::after{content:'\u25cf';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:#fbbf24}
.button.rt-11 span{position:relative;z-index:2}
.button.rt-11:hover{background:#92400e;box-shadow:0 0 15px rgba(251,191,36,.3)}
.button.rt-11:hover::after{animation:rt11Spin 1s linear infinite}
/* RT12 - CHROME TEXT */
@keyframes rt12Chrome{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.button.rt-12{padding:14px 36px;background:linear-gradient(90deg,#666,#fff,#aaa,#fff,#666);background-size:200%;border:none;border-radius:0;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;animation:rt12Chrome 3s linear infinite;position:relative;transition:.3s}
.button.rt-12::before{content:'';position:absolute;inset:0;border:2px solid #888;border-radius:0}
.button.rt-12:hover{transform:scale(1.08)}
/* RT13 - OUTRUN */
@keyframes rt13Out{0%,100%{box-shadow:0 0 15px rgba(255,0,110,.3),0 0 15px rgba(0,255,255,.2)}50%{box-shadow:0 0 25px rgba(255,0,110,.5),0 0 25px rgba(0,255,255,.3)}}
.button.rt-13{padding:14px 36px;background:linear-gradient(135deg,#0a0020,#1a0040);border:2px solid;border-image:linear-gradient(90deg,#ff006e,#0ff) 1;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;animation:rt13Out 2s ease infinite;transition:.3s}
.button.rt-13:hover{transform:scale(1.05)}
/* RT14 - GAMEBOY */
.button.rt-14{padding:14px 36px;background:#9bbc0f;border:3px solid #0f380f;border-radius:0;color:#0f380f;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;box-shadow:3px 3px 0 #306230;transition:.15s}
.button.rt-14:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #306230}
.button.rt-14:active{transform:translate(1px,1px);box-shadow:2px 2px 0 #306230}
/* RT15 - DISCO */
@keyframes rt15Disco{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.button.rt-15{padding:14px 36px;background:linear-gradient(135deg,#ff006e,#fbbf24,#22c55e,#3b82f6,#a855f7);border:none;border-radius:0;color:#fff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;animation:rt15Disco 4s linear infinite;transition:.3s}
.button.rt-15:hover{transform:scale(1.08);box-shadow:0 0 20px rgba(255,255,255,.3)}
/* RT16 - TYPEWRITER */
@keyframes rt16Cursor{0%,100%{border-right-color:#22c55e}50%{border-right-color:transparent}}
.button.rt-16{padding:14px 36px;background:#111;border:1px solid #333;border-radius:0;color:#22c55e;font-weight:700;font-family:'Courier New',monospace;letter-spacing:1px;border-right:3px solid #22c55e;animation:rt16Cursor 1s step-end infinite;transition:background .3s}
.button.rt-16:hover{background:#1a1a1a}
/* RT17 - NEON SIGN */
@keyframes rt17Flicker{0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:0 0 5px #ff006e,0 0 15px #ff006e,0 0 30px #ff006e;opacity:1}20%,24%,55%{text-shadow:none;opacity:.8}}
.button.rt-17{padding:14px 36px;background:transparent;border:2px solid #ff006e;border-radius:0;color:#ff006e;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;animation:rt17Flicker 3s linear infinite;transition:.3s}
.button.rt-17:hover{background:rgba(255,0,110,.1)}
/* RT18 - FLOPPY DISK */
.button.rt-18{padding:14px 36px;background:#1e3a5f;border:3px solid #3b82f6;border-radius:0;color:#93c5fd;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;position:relative;transition:.3s}
.button.rt-18::before{content:'';position:absolute;top:4px;right:4px;width:12px;height:8px;background:#93c5fd;border-radius:0 0 2px 2px}
.button.rt-18 span{position:relative;z-index:2}
.button.rt-18:hover{background:#2a4a6f;box-shadow:0 0 15px rgba(59,130,246,.3)}
/* RT19 - LASER GRID */
@keyframes rt19Laser{0%{background-position:0 0}100%{background-position:40px 40px}}
.button.rt-19{padding:14px 36px;background:#0a0020;background-image:linear-gradient(rgba(0,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.08) 1px,transparent 1px);background-size:20px 20px;border:1px solid rgba(0,255,255,.3);border-radius:0;color:#0ff;font-weight:700;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:2px;animation:rt19Laser 2s linear infinite;transition:.3s}
.button.rt-19 span{position:relative;z-index:2}
.button.rt-19:hover{border-color:#0ff;box-shadow:0 0 20px rgba(0,255,255,.2)}
/* RT20 - ULTIMATE RETRO */
@keyframes rt20Bg{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes rt20Scan{0%{top:-100%}100%{top:100%}}
.button.rt-20{padding:16px 44px;background:linear-gradient(90deg,#ff006e,#8338ec,#0ff,#22c55e,#fbbf24,#ff006e);background-size:200%;border:3px solid;border-image:linear-gradient(90deg,#ff006e,#0ff) 1;color:#fff;font-weight:900;font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:3px;font-size:1.05rem;animation:rt20Bg 3s linear infinite;position:relative;overflow:hidden;transition:.3s}
.button.rt-20::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:3px;background:#fff;opacity:.3;animation:rt20Scan 2s linear infinite}
.button.rt-20 span{position:relative;z-index:2}
.button.rt-20:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(255,0,110,.4)}
/* ============================================ */
/* TAB 16: ATTRACT (CTA Hành vi - dụ click)     */
/* ============================================ */
/* AT01 - MAGNETIC LIFT */
.button.at-1{padding:14px 36px;background:linear-gradient(135deg,#7c3aed,#db2777);border-radius:50px;color:#fff;box-shadow:0 8px 25px rgba(124,58,237,.4);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.button.at-1:hover{transform:translateY(-6px) scale(1.06);box-shadow:0 18px 40px rgba(219,39,119,.55)}
.button.at-1:active{transform:translateY(-2px) scale(1.02)}
/* AT02 - HEARTBEAT CTA */
@keyframes at2Beat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.08)}60%{transform:scale(1)}}
.button.at-2{padding:14px 40px;background:linear-gradient(135deg,#ff416c,#ff4b2b);border-radius:50px;color:#fff;font-weight:800;box-shadow:0 6px 20px rgba(255,65,108,.4);animation:at2Beat 1.4s ease-in-out infinite;transition:.3s}
.button.at-2:hover{animation-duration:.7s;box-shadow:0 0 35px rgba(255,75,43,.6)}
/* AT03 - SHAKE ATTENTION */
@keyframes at3Shake{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-3deg)}92%{transform:rotate(3deg)}94%{transform:rotate(-3deg)}96%{transform:rotate(2deg)}98%{transform:rotate(-1deg)}}
.button.at-3{padding:14px 36px;background:linear-gradient(135deg,#f7971e,#ffd200);border-radius:12px;color:#1a1a1a;font-weight:800;box-shadow:0 6px 18px rgba(247,151,30,.4);animation:at3Shake 4s ease-in-out infinite;transition:.3s}
.button.at-3:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(255,210,0,.6)}
/* AT04 - ARROW NUDGE */
@keyframes at4Nudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(6px)}}
.button.at-4{padding:14px 52px 14px 36px;background:linear-gradient(135deg,#11998e,#38ef7d);border-radius:50px;color:#fff;font-weight:700;position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(17,153,142,.4);transition:.3s}
.button.at-4::after{content:'\2192';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:800;animation:at4Nudge 1.2s ease-in-out infinite}
.button.at-4:hover{padding-right:60px;box-shadow:0 8px 30px rgba(56,239,125,.6);transform:scale(1.05)}
/* AT05 - RIPPLE RADAR */
@keyframes at5Radar{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.button.at-5{position:relative;padding:14px 36px;background:#16a34a;border-radius:50px;color:#fff;font-weight:700;z-index:1;transition:.3s}
.button.at-5 span{position:relative;z-index:2}
.button.at-5::before,.button.at-5::after{content:'';position:absolute;inset:0;border-radius:50px;border:2px solid #16a34a;z-index:-1;animation:at5Radar 2s ease-out infinite}
.button.at-5::after{animation-delay:1s}
.button.at-5:hover{background:#15803d;transform:scale(1.06)}
/* AT06 - SHINE PASS */
@keyframes at6Shine{0%{left:-70%}55%,100%{left:130%}}
.button.at-6{position:relative;padding:14px 36px;background:linear-gradient(135deg,#2563eb,#1e40af);border-radius:12px;color:#fff;font-weight:700;overflow:hidden;box-shadow:0 6px 20px rgba(37,99,235,.4);transition:.3s}
.button.at-6 span{position:relative;z-index:2}
.button.at-6::after{content:'';position:absolute;top:-50%;left:-70%;width:50%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(25deg);animation:at6Shine 3s ease-in-out infinite}
.button.at-6:hover{transform:scale(1.06);box-shadow:0 8px 30px rgba(37,99,235,.6)}
/* AT07 - BOUNCE IDLE */
@keyframes at7Bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.button.at-7{padding:14px 36px;background:linear-gradient(135deg,#ec4899,#8b5cf6);border-radius:50px;color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(236,72,153,.4);animation:at7Bounce 1.6s ease-in-out infinite;transition:.3s}
.button.at-7:hover{animation-play-state:paused;transform:scale(1.1);box-shadow:0 10px 35px rgba(139,92,246,.6)}
/* AT08 - COUNTDOWN URGENCY */
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes at8Count{0%{--p:0%}100%{--p:100%}}
.button.at-8{position:relative;padding:14px 36px;background:#0f172a;border-radius:50px;color:#fff;font-weight:700;z-index:1;transition:.3s}
.button.at-8 span{position:relative;z-index:2}
.button.at-8::before{content:'';position:absolute;inset:-3px;border-radius:53px;background:conic-gradient(#ef4444 var(--p,0%),rgba(255,255,255,.12) 0);animation:at8Count 4s linear infinite;z-index:-1}
.button.at-8::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#0f172a;z-index:-1}
.button.at-8:hover{transform:scale(1.06)}
/* AT09 - GLOW BREATH */
@keyframes at9Breath{0%,100%{box-shadow:0 0 10px rgba(6,182,212,.4),0 0 20px rgba(59,130,246,.2)}50%{box-shadow:0 0 25px rgba(6,182,212,.7),0 0 55px rgba(59,130,246,.5)}}
.button.at-9{padding:14px 36px;background:linear-gradient(135deg,#06b6d4,#3b82f6);border-radius:50px;color:#fff;font-weight:700;animation:at9Breath 2.4s ease-in-out infinite;transition:.3s}
.button.at-9:hover{transform:scale(1.08);animation-duration:1.2s}
/* AT10 - TILT 3D HOVER */
.button.at-10{padding:16px 40px;background:linear-gradient(135deg,#334155,#0f172a);border-radius:14px;color:#fff;font-weight:700;box-shadow:0 10px 25px rgba(0,0,0,.5);transition:transform .3s ease,box-shadow .3s ease}
.button.at-10:hover{transform:perspective(500px) rotateX(12deg) rotateY(-12deg) scale(1.05);box-shadow:-12px 18px 35px rgba(0,0,0,.55)}
/* AT11 - CLICK ME TOOLTIP */
@keyframes at11Hint{0%,70%,100%{opacity:0;transform:translateX(-50%) translateY(6px)}80%,90%{opacity:1;transform:translateX(-50%) translateY(0)}}
.button.at-11{position:relative;padding:14px 36px;background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:50px;color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(245,158,11,.4);transition:.3s;overflow:visible}
.button.at-11::after{content:'\1F446 Click!';position:absolute;top:-34px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;font-size:.65rem;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap;animation:at11Hint 2.5s ease-in-out infinite;pointer-events:none}
.button.at-11:hover{transform:scale(1.08);box-shadow:0 10px 35px rgba(239,68,68,.6)}
/* AT12 - SPARKLE BURST */
@keyframes at12Spark{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}
.button.at-12{position:relative;padding:14px 36px;background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:50px;color:#fff;font-weight:700;overflow:visible;box-shadow:0 6px 18px rgba(139,92,246,.4);transition:.3s}
.button.at-12::before,.button.at-12::after{content:'\2728';position:absolute;font-size:.9rem;animation:at12Spark 2s ease-in-out infinite}
.button.at-12::before{top:-8px;left:14px}
.button.at-12::after{bottom:-8px;right:14px;animation-delay:1s}
.button.at-12:hover{transform:scale(1.08);box-shadow:0 10px 35px rgba(236,72,153,.6)}
/* AT13 - WOBBLE JELLY */
@keyframes at13Jelly{0%,100%{transform:scale(1,1)}40%{transform:scale(1.06,.94)}55%{transform:scale(.96,1.04)}70%{transform:scale(1.02,.98)}}
.button.at-13{padding:14px 36px;background:linear-gradient(135deg,#10b981,#059669);border-radius:14px;color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(16,185,129,.4);animation:at13Jelly 3s ease-in-out infinite;transition:.3s}
.button.at-13:hover{animation:at13Jelly .6s ease-in-out infinite;transform:scale(1.05)}
/* AT14 - SLIDE REVEAL CTA */
.button.at-14{position:relative;padding:14px 36px;background:linear-gradient(135deg,#f43f5e,#be123c);border-radius:50px;color:#fff;font-weight:700;overflow:hidden;box-shadow:0 6px 18px rgba(244,63,94,.4);transition:.3s}
.button.at-14 span{display:inline-block;transition:transform .35s}
.button.at-14::after{content:'\1F4B0';position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-size:1.1rem;transition:right .35s}
.button.at-14:hover span{transform:translateX(-10px)}
.button.at-14:hover::after{right:20px}
.button.at-14:hover{transform:scale(1.05);box-shadow:0 10px 35px rgba(190,18,60,.6)}
/* AT15 - PULSE RING DOUBLE */
@keyframes at15Ring{0%{box-shadow:0 0 0 0 rgba(124,58,237,.6)}100%{box-shadow:0 0 0 22px rgba(124,58,237,0)}}
.button.at-15{position:relative;padding:14px 36px;background:#7c3aed;border-radius:50px;color:#fff;font-weight:700;z-index:1;transition:.3s}
.button.at-15 span{position:relative;z-index:2}
.button.at-15::before,.button.at-15::after{content:'';position:absolute;inset:0;border-radius:50px;box-shadow:0 0 0 0 rgba(124,58,237,.6);animation:at15Ring 2.4s ease-out infinite;z-index:-1}
.button.at-15::after{animation-delay:1.2s}
.button.at-15:hover{background:#6d28d9;transform:scale(1.06)}
/* AT16 - GRADIENT BEAM */
@keyframes at16Beam{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.button.at-16{position:relative;padding:14px 36px;background:#0a0a1a;border-radius:50px;color:#fff;font-weight:700;z-index:1;transition:.3s}
.button.at-16 span{position:relative;z-index:2}
.button.at-16::before{content:'';position:absolute;inset:-3px;border-radius:53px;background:conic-gradient(from 0deg,transparent 70%,#22d3ee,#a855f7,transparent);animation:at16Beam 2.5s linear infinite;z-index:-1}
.button.at-16::after{content:'';position:absolute;inset:2px;border-radius:48px;background:#0a0a1a;z-index:-1}
.button.at-16:hover{transform:scale(1.06)}
.button.at-16:hover::before{animation-duration:1.2s}
/* AT17 - POP SCALE LOOP */
@keyframes at17Pop{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.button.at-17{padding:14px 36px;background:linear-gradient(135deg,#fb7185,#f43f5e);border-radius:50px;color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(251,113,133,.4);animation:at17Pop 1.8s ease-in-out infinite;transition:.3s}
.button.at-17:hover{animation-play-state:paused;transform:scale(1.12);box-shadow:0 10px 35px rgba(244,63,94,.6)}
/* AT18 - FLIP HINT */
@keyframes at18Hint{0%,80%,100%{transform:perspective(400px) rotateX(0)}88%{transform:perspective(400px) rotateX(18deg)}94%{transform:perspective(400px) rotateX(-6deg)}}
.button.at-18{padding:14px 36px;background:linear-gradient(135deg,#0ea5e9,#2563eb);border-radius:14px;color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(14,165,233,.4);animation:at18Hint 3.5s ease-in-out infinite;transition:.3s;transform-origin:center}
.button.at-18:hover{animation-play-state:paused;transform:scale(1.06);box-shadow:0 10px 35px rgba(37,99,235,.6)}
/* AT19 - GLOW TRAIL */
@keyframes at19Trail{0%{left:0}50%{left:100%}100%{left:0}}
.button.at-19{position:relative;padding:14px 36px;background:#111827;border-radius:50px;color:#fff;font-weight:700;overflow:hidden;z-index:1;transition:.3s}
.button.at-19 span{position:relative;z-index:2}
.button.at-19::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.7),transparent 70%);top:50%;left:0;transform:translate(-50%,-50%);animation:at19Trail 3s ease-in-out infinite;z-index:0}
.button.at-19:hover{transform:scale(1.06);box-shadow:0 0 30px rgba(34,211,238,.4)}
/* AT20 - ULTIMATE ATTRACT */
@keyframes at20Beat{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes at20Bg{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes at20Ring{0%{box-shadow:0 0 0 0 rgba(219,39,119,.6)}100%{box-shadow:0 0 0 24px rgba(219,39,119,0)}}
.button.at-20{position:relative;padding:16px 44px;background:linear-gradient(135deg,#7c3aed,#db2777,#f59e0b);background-size:200%;border-radius:50px;color:#fff;font-weight:800;letter-spacing:1px;z-index:1;overflow:visible;animation:at20Beat 1.6s ease-in-out infinite,at20Bg 4s linear infinite;box-shadow:0 8px 25px rgba(219,39,119,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.button.at-20 span{position:relative;z-index:2}
.button.at-20::before{content:'';position:absolute;inset:0;border-radius:50px;box-shadow:0 0 0 0 rgba(219,39,119,.6);animation:at20Ring 2s ease-out infinite;z-index:-1}
.button.at-20::after{content:'\2728';position:absolute;top:-10px;right:10px;font-size:1rem;animation:at12Spark 2s ease-in-out infinite}
.button.at-20:hover{transform:translateY(-6px) scale(1.1);box-shadow:0 18px 45px rgba(245,158,11,.6)}
/* ============================================ */
/* TAB 17: PARTY (Nổ / Confetti / Bùm chéo)     */
/* ============================================ */
/* PT01 - CONFETTI POP : idle tự bắn confetti, hover bắn dồn dập */
@keyframes pt1Confetti{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.2) rotate(360deg)}}
@keyframes pt1Glow{0%,100%{box-shadow:0 6px 20px rgba(247,37,133,.5)}50%{box-shadow:0 6px 32px rgba(114,9,183,.7),0 0 16px rgba(247,37,133,.5)}}
.button.pt-1{position:relative;padding:14px 38px;background:linear-gradient(135deg,#f72585,#7209b7);border-radius:50px;color:#fff;font-weight:800;overflow:visible;animation:pt1Glow 2s ease-in-out infinite;box-shadow:0 6px 20px rgba(247,37,133,.5);transition:transform .25s cubic-bezier(.34,1.6,.6,1)}
.button.pt-1 span{position:relative;z-index:2}
.button.pt-1 i{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:2px;opacity:0;pointer-events:none;animation:pt1Confetti 2s ease-out infinite}
.button.pt-1 i:nth-child(1){background:#ffbe0b;--tx:-60px;--ty:-46px}
.button.pt-1 i:nth-child(2){background:#fb5607;--tx:60px;--ty:-46px;animation-delay:.3s}
.button.pt-1 i:nth-child(3){background:#3a86ff;--tx:-72px;--ty:30px;animation-delay:.6s}
.button.pt-1 i:nth-child(4){background:#06ffa5;--tx:72px;--ty:30px;animation-delay:.9s}
.button.pt-1 i:nth-child(5){background:#ff006e;--tx:0;--ty:-58px;animation-delay:1.2s}
.button.pt-1 i:nth-child(6){background:#8338ec;--tx:0;--ty:54px;animation-delay:1.5s}
.button.pt-1:hover{transform:scale(1.1)}
.button.pt-1:hover i{animation-duration:.7s}
/* PT02 - BOOM BURST : idle tự nổ vòng + rung liên tục */
@keyframes pt2Ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes pt2Idle{0%,70%,100%{transform:scale(1) rotate(0)}74%{transform:scale(1.06) rotate(-1.5deg)}78%{transform:scale(1.06) rotate(1.5deg)}82%{transform:scale(1.05) rotate(-1deg)}86%{transform:scale(1.04) rotate(1deg)}}
@keyframes pt2Shake{0%,100%{transform:scale(1.1) translate(0)}25%{transform:scale(1.1) translate(-3px,2px)}50%{transform:scale(1.1) translate(3px,-2px)}75%{transform:scale(1.1) translate(-2px,-2px)}}
.button.pt-2{position:relative;padding:14px 38px;background:linear-gradient(135deg,#ff4d00,#ff0054);border-radius:14px;color:#fff;font-weight:800;overflow:visible;animation:pt2Idle 2.6s ease-in-out infinite;box-shadow:0 6px 22px rgba(255,0,84,.55);transition:.2s}
.button.pt-2 span{position:relative;z-index:2}
.button.pt-2::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border:3px solid #ffbe0b;border-radius:14px;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;animation:pt2Ring 2.6s ease-out infinite}
.button.pt-2:hover{animation:pt2Shake .3s ease-in-out infinite;box-shadow:0 10px 34px rgba(255,77,0,.7)}
.button.pt-2:hover::before{animation:pt2Ring .6s ease-out infinite}
/* PT03 - STAR SHOWER : sao bắn chéo lên góc */
@keyframes pt3Star{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.1) rotate(220deg)}}
.button.pt-3{position:relative;padding:14px 38px;background:linear-gradient(135deg,#4361ee,#3a0ca3);border-radius:50px;color:#fff;font-weight:800;overflow:visible;box-shadow:0 6px 20px rgba(67,97,238,.4);transition:transform .25s}
.button.pt-3 span{position:relative;z-index:2}
.button.pt-3 i{position:absolute;top:40%;left:50%;font-size:14px;opacity:0;pointer-events:none}
.button.pt-3 i::before{content:'\2728'}
.button.pt-3 i:nth-child(1){--sx:-70px;--sy:-50px}
.button.pt-3 i:nth-child(2){--sx:70px;--sy:-50px;animation-delay:.1s}
.button.pt-3 i:nth-child(3){--sx:-40px;--sy:-66px;animation-delay:.18s}
.button.pt-3 i:nth-child(4){--sx:40px;--sy:-66px;animation-delay:.26s}
.button.pt-3:hover{transform:scale(1.08)}
.button.pt-3:hover i{animation:pt3Star .8s ease-out infinite}
/* PT04 - SPARK CROSS : 2 tia chéo nổ chữ X */
@keyframes pt4Cross{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(45deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(45deg)}}
@keyframes pt4Cross2{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-45deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-45deg)}}
@keyframes pt4Glow{0%,100%{box-shadow:0 6px 20px rgba(6,214,160,.5)}50%{box-shadow:0 6px 30px rgba(17,138,178,.7),0 0 14px rgba(6,214,160,.4)}}
.button.pt-4{position:relative;padding:14px 38px;background:linear-gradient(135deg,#06d6a0,#118ab2);border-radius:12px;color:#fff;font-weight:800;overflow:visible;animation:pt4Glow 2s ease-in-out infinite;box-shadow:0 6px 20px rgba(6,214,160,.5);transition:.25s}
.button.pt-4 span{position:relative;z-index:2}
.button.pt-4::before,.button.pt-4::after{content:'';position:absolute;top:50%;left:50%;width:120%;height:4px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0;pointer-events:none}
.button.pt-4::before{animation:pt4Cross 2.4s ease-out infinite}
.button.pt-4::after{animation:pt4Cross2 2.4s ease-out infinite}
.button.pt-4:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(17,138,178,.7)}
.button.pt-4:hover::before{animation:pt4Cross .5s ease-out infinite}
.button.pt-4:hover::after{animation:pt4Cross2 .5s ease-out infinite}
/* PT05 - EMOJI RAIN : 🎉🎊 rơi chéo */
@keyframes pt5Rain{0%{opacity:0;transform:translate(0,-30px) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--rx),50px) rotate(160deg)}}
.button.pt-5{position:relative;padding:14px 38px;background:linear-gradient(135deg,#ff9e00,#ff0054);border-radius:50px;color:#fff;font-weight:800;overflow:visible;box-shadow:0 6px 20px rgba(255,0,84,.4);transition:transform .25s}
.button.pt-5 span{position:relative;z-index:2}
.button.pt-5 i{position:absolute;top:0;left:50%;font-size:16px;opacity:0;pointer-events:none}
.button.pt-5 i:nth-child(1)::before{content:'\1F389'}
.button.pt-5 i:nth-child(2)::before{content:'\1F38A'}
.button.pt-5 i:nth-child(3)::before{content:'\2B50'}
.button.pt-5 i:nth-child(1){--rx:-50px}
.button.pt-5 i:nth-child(2){--rx:55px;animation-delay:.15s}
.button.pt-5 i:nth-child(3){--rx:10px;animation-delay:.3s}
.button.pt-5:hover{transform:scale(1.08)}
.button.pt-5:hover i{animation:pt5Rain 1s ease-in infinite}
/* PT06 - FIREWORK : pháo hoa nổ tỏa tròn (12 chấm box-shadow) */
@keyframes pt6Fire{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes pt6Pulse{0%,100%{transform:scale(1);box-shadow:0 6px 20px rgba(114,9,183,.5)}50%{transform:scale(1.04);box-shadow:0 6px 30px rgba(58,12,163,.7)}}
.button.pt-6{position:relative;padding:14px 38px;background:linear-gradient(135deg,#7209b7,#3a0ca3);border-radius:50px;color:#fff;font-weight:800;overflow:visible;animation:pt6Pulse 2.2s ease-in-out infinite;box-shadow:0 6px 20px rgba(114,9,183,.5);transition:transform .25s}
.button.pt-6 span{position:relative;z-index:2}
.button.pt-6::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;pointer-events:none;box-shadow:0 -34px 0 #ffbe0b,24px -24px 0 #fb5607,34px 0 0 #ff006e,24px 24px 0 #06ffa5,0 34px 0 #3a86ff,-24px 24px 0 #f72585,-34px 0 0 #ffd60a,-24px -24px 0 #4cc9f0;animation:pt6Fire 2.2s ease-out infinite}
.button.pt-6:hover{transform:scale(1.1)}
.button.pt-6:hover::after{animation:pt6Fire .7s ease-out infinite}
/* PT07 - JIGGLE PARTY : lắc vui + nền cầu vồng chạy */
@keyframes pt7Jiggle{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-4deg) scale(1.03)}40%{transform:rotate(4deg) scale(1.03)}60%{transform:rotate(-3deg) scale(1.02)}80%{transform:rotate(3deg) scale(1.02)}}
@keyframes pt7Bg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.button.pt-7{padding:14px 38px;background:linear-gradient(90deg,#ff006e,#ffbe0b,#06ffa5,#3a86ff,#8338ec,#ff006e);background-size:300%;border-radius:50px;color:#fff;font-weight:800;animation:pt7Jiggle 2.5s ease-in-out infinite,pt7Bg 4s linear infinite;box-shadow:0 6px 20px rgba(131,56,236,.4);transition:.3s}
.button.pt-7:hover{animation:pt7Jiggle .5s ease-in-out infinite,pt7Bg 1.5s linear infinite;transform:scale(1.1)}
/* PT08 - DIAGONAL BLAST : vệt sáng nổ chéo qua nút (bùm chéo) */
@keyframes pt8Blast{0%{transform:translate(-150%,-150%) rotate(45deg);opacity:0}40%{opacity:1}100%{transform:translate(150%,150%) rotate(45deg);opacity:0}}
@keyframes pt8Glow{0%,100%{box-shadow:0 6px 20px rgba(255,0,110,.4)}50%{box-shadow:0 6px 30px rgba(58,134,255,.6)}}
.button.pt-8{position:relative;padding:16px 42px;background:linear-gradient(135deg,#ff006e,#3a86ff);border-radius:14px;color:#fff;font-weight:800;letter-spacing:1px;overflow:hidden;animation:pt8Glow 2s ease-in-out infinite;transition:transform .25s}
.button.pt-8 span{position:relative;z-index:2}
.button.pt-8::before{content:'';position:absolute;top:0;left:0;width:60%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:pt8Blast 2.8s ease-in-out infinite;z-index:1}
.button.pt-8:hover{transform:scale(1.08)}
.button.pt-8:hover::before{animation:pt8Blast .9s ease-in-out infinite}
.button.button.rt-20:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(255,0,110,.4)}