/* ==========================================================================
   TLongMusic - Ruby Crystal Glass & Shimmering Aurora Theme (PRO POLISHED)
   ========================================================================== */

:root {
    /* Khóa cố định giao diện nguyên bản, cấm trình duyệt tự ý đảo màu (Auto Dark Theme Opt-out) */
    color-scheme: only light !important;
    --bs-color-scheme: light;

    --bg-deep: #07070b;
    --bg-surface: rgba(14, 15, 24, 0.75);
    --bg-card: rgba(20, 22, 34, 0.65);
    --bg-card-hover: rgba(30, 32, 48, 0.85);
    
    --border-crystal: rgba(255, 255, 255, 0.12);
    --border-crystal-hover: rgba(255, 30, 80, 0.6);
    --border-ruby: rgba(255, 19, 74, 0.45);
    
    --ruby-primary: #ff134a;
    --ruby-glow: rgba(255, 19, 74, 0.5);
    --ruby-deep: #b30029;
    
    --gold-crystal: #ffd166;
    --gold-glow: rgba(255, 209, 102, 0.45);
    --amethyst: #a855f7;
    --cyan-crystal: #06b6d4;
    
    --text-pure: #ffffff;
    --text-silver: #cbd5e1;
    --text-dim: #94a3b8;
    
    --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono: 'Space Mono', monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    color-scheme: only light !important;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-pure);
    font-family: var(--font-heading);
    overflow-x: hidden;
    padding-bottom: 125px;
    min-height: 100vh;
    position: relative;
}

/* Chặn toàn bộ trình duyệt trên thiết bị bật Dark Mode can thiệp làm tối/đảo màu giao diện web */
@media (prefers-color-scheme: dark) {
    :root, html, body {
        color-scheme: only light !important;
    }
}

/* Modal Stacking & Backdrop Fix (Chống cứng đơ màn hình) */
.modal {
    z-index: 1060 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}
body:not(.modal-open) .modal-backdrop {
    display: none !important;
}

/* ==========================================
   MẶT SAU: CỰC QUANG (AURORA) & TINH THỂ SAO
   ========================================== */
.shimmer-bg-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, #180914 0%, #07070b 65%);
}

.aurora-glow {
    position: absolute;
    filter: blur(95px);
    opacity: 0.38;
    pointer-events: none;
    border-radius: 50%;
    animation: floatAurora 16s infinite ease-in-out alternate;
}

.aurora-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 19, 74, 0.65) 0%, rgba(168, 85, 247, 0.45) 50%, transparent 70%);
    top: -150px;
    left: -120px;
    animation-duration: 14s;
}

.aurora-2 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(255, 209, 102, 0.45) 0%, rgba(255, 19, 74, 0.55) 45%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation-duration: 18s;
}

.aurora-3 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(168, 85, 247, 0.45) 50%, transparent 70%);
    top: 40%;
    left: 35%;
    animation-duration: 20s;
}

@keyframes floatAurora {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(80px, 60px) scale(1.15) rotate(15deg); }
    100% { transform: translate(-60px, 90px) scale(0.95) rotate(-10deg); }
}

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

/* ==========================================
   NAVIGATION: KÍNH PHA LÊ TRONG SUỐT (CRYSTAL GLASS)
   ========================================== */
.tlong-navbar {
    background: rgba(10, 11, 18, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 1px 15px rgba(255, 19, 74, 0.15);
    padding: 10px 0;
    position: relative;
    z-index: 100;
}

.tlong-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.tlong-logo-container {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tlong-logo-container::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff134a, #ffd166, #a855f7, #06b6d4, #ff134a);
    animation: rotateGlowRing 4s linear infinite;
    filter: blur(3px);
    opacity: 0.9;
}

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

.tlong-logo-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 14px rgba(255, 19, 74, 0.7);
    flex-shrink: 0;
}

.tlong-brand-title {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 1.2px;
    color: #fff;
    margin: 0;
    white-space: nowrap !important;
    line-height: 1;
    flex-shrink: 0;
}

.tlong-brand-title span {
    background: linear-gradient(135deg, #ff134a 0%, #ffd166 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 19, 74, 0.6));
}

.tlong-nav-link {
    color: var(--text-silver) !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 6px 11px !important;
    border-radius: 20px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    white-space: nowrap !important;
    flex-shrink: 0;
    line-height: 1.4;
}

.tlong-nav-link:hover, .tlong-nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 15px rgba(255, 19, 74, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
}

@media (min-width: 1200px) {
    .tlong-brand-title {
        font-size: 1.45rem;
    }
    .tlong-nav-link {
        font-size: 0.92rem;
        padding: 7px 14px !important;
        gap: 8px;
    }
}

@media (min-width: 992px) {
    .tlong-navbar .navbar-collapse {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
    }
    .tlong-navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }
}

/* ==========================================
   BUTTONS: ÁNH NGỌC LUNG LINH (SHIMMER BUTTONS)
   ========================================== */
.btn-shimmer-ruby {
    background: linear-gradient(135deg, #ff134a 0%, #d80032 50%, #990022 100%);
    color: #fff;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    padding: 10px 24px;
    box-shadow: 0 4px 20px var(--ruby-glow), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.btn-shimmer-ruby::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: rotate(25deg);
    animation: buttonShineSweep 3.5s infinite;
}

@keyframes buttonShineSweep {
    0% { left: -60%; }
    30% { left: 140%; }
    100% { left: 140%; }
}

.btn-shimmer-ruby:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 30px rgba(255, 19, 74, 0.8), 0 0 20px rgba(255, 209, 102, 0.4);
}

.btn-shimmer-gold {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 50%, #d97706 100%);
    color: #111 !important;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 10px 24px;
    box-shadow: 0 4px 20px var(--gold-glow), inset 0 1px 2px rgba(255, 255, 255, 0.7);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.btn-shimmer-gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(25deg);
    animation: buttonShineSweep 3.5s infinite;
}

.btn-shimmer-gold:hover {
    color: #000 !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 30px rgba(255, 209, 102, 0.9), 0 0 25px rgba(255, 255, 255, 0.6);
}

.btn-glass-crystal {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 9px 20px;
    transition: all 0.25s ease;
}

.btn-glass-crystal:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 19, 74, 0.5);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 19, 74, 0.3);
    transform: translateY(-2px);
}

.badge-shimmer-ruby {
    background: linear-gradient(135deg, rgba(255, 19, 74, 0.95), rgba(180, 0, 40, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 0 12px var(--ruby-glow);
}

.badge-shimmer-gold {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 50%, #d97706 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #0b0c10 !important;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 0 16px var(--gold-glow);
}

.badge-shimmer-cyan {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #38bdf8;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

/* ==========================================
   TIER HIERARCHY ACCENTS:
   STANDARD VIP (MÀU ĐỎ) & PREMIUM VIP (MÀU VÀNG)
   ========================================== */

/* --- STANDARD VIP ACCENTS (MÀU ĐỎ - RUBY) --- */
.text-accent-standard {
    color: #ff2d55 !important;
    text-shadow: 0 0 12px rgba(255, 19, 74, 0.6);
}

.badge-standard-red {
    background: linear-gradient(135deg, #ff134a 0%, #c4002b 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 0 12px rgba(255, 19, 74, 0.6);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-download-standard {
    background: rgba(255, 19, 74, 0.12);
    border: 1px solid rgba(255, 19, 74, 0.45);
    color: #ff6b8b;
    font-weight: 600;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.btn-download-standard:hover {
    background: linear-gradient(135deg, #ff134a, #c4002b);
    border-color: #fff;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 19, 74, 0.8);
    transform: translateY(-2px);
}

.crystal-pricing-card.card-tier-standard {
    border: 1.5px solid rgba(255, 19, 74, 0.65);
    background: radial-gradient(circle at 50% 0%, rgba(255, 19, 74, 0.22) 0%, rgba(20, 22, 34, 0.9) 70%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 19, 74, 0.35);
    transform: scale(1.02);
}

.crystal-pricing-card.card-tier-standard:hover {
    transform: translateY(-8px) scale(1.04);
    border-color: rgba(255, 19, 74, 0.95);
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 19, 74, 0.65);
}

.crystal-pricing-card.card-tier-standard .crystal-price {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 19, 74, 0.6);
}

.crystal-pricing-card.card-tier-standard .crystal-features-list li i {
    color: #ff134a !important;
    filter: drop-shadow(0 0 6px rgba(255, 19, 74, 0.8));
}

/* --- PREMIUM VIP ACCENTS (MÀU VÀNG - ROYAL GOLD) --- */
.text-accent-premium {
    background: linear-gradient(135deg, #fff3b0 0%, #ffd166 40%, #ff9f1c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.6));
}

.badge-premium-gold {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 50%, #d97706 100%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #0c0d14 !important;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.7);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-download-premium {
    background: rgba(255, 209, 102, 0.14);
    border: 1px solid rgba(255, 209, 102, 0.55);
    color: #ffd166;
    font-weight: 700;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.btn-download-premium:hover {
    background: linear-gradient(135deg, #ffd166, #ff9f1c);
    border-color: #fff;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(255, 209, 102, 0.9);
    transform: translateY(-2px);
}

.crystal-pricing-card.card-tier-premium {
    border: 1.5px solid rgba(255, 209, 102, 0.75);
    background: radial-gradient(circle at 50% 0%, rgba(255, 209, 102, 0.22) 0%, rgba(26, 23, 20, 0.92) 70%);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 209, 102, 0.35);
    transform: scale(1.02);
}

.crystal-pricing-card.card-tier-premium:hover {
    transform: translateY(-8px) scale(1.04);
    border-color: #ffd166;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 209, 102, 0.7);
}

.crystal-pricing-card.card-tier-premium .crystal-price {
    background: linear-gradient(135deg, #ffffff 20%, #ffd166 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 209, 102, 0.7));
}

.crystal-pricing-card.card-tier-premium .crystal-features-list li i {
    color: #ffd166 !important;
    filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.8));
}

/* ==========================================
   DYNAMIC BODY THEME PER LOGGED-IN TIER
   ========================================== */
body.tier-active-standard .tlong-player-bar {
    border-top: 1px solid rgba(255, 19, 74, 0.5);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85), 0 -1px 25px rgba(255, 19, 74, 0.35);
}

body.tier-active-premium .tlong-player-bar {
    border-top: 1px solid rgba(255, 209, 102, 0.6);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85), 0 -1px 30px rgba(255, 209, 102, 0.4);
}

body.tier-active-premium .player-btn-main {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%) !important;
    color: #0b0c10 !important;
    box-shadow: 0 0 25px rgba(255, 209, 102, 0.8) !important;
}

body.tier-active-premium .seek-slider::-webkit-slider-thumb {
    background: #ffd166 !important;
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.9) !important;
}

/* ==========================================
   HERO BANNER: PHA LÊ CỰC QUANG (CRYSTAL STAGE)
   ========================================== */
.crystal-hero-stage {
    position: relative;
    background: rgba(18, 19, 32, 0.55);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    padding: 60px 45px;
    margin-top: 25px;
    margin-bottom: 50px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    overflow: hidden;
    z-index: 2;
}

.crystal-hero-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff134a, #ffd166, #06b6d4, transparent);
    filter: blur(1px);
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 30px;
    background: rgba(255, 19, 74, 0.12);
    border: 1px solid rgba(255, 19, 74, 0.35);
    box-shadow: 0 0 15px rgba(255, 19, 74, 0.2);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff94ab;
}

.crystal-hero-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-top: 16px;
    margin-bottom: 18px;
}

.text-gradient-shimmer {
    background: linear-gradient(135deg, #ffffff 20%, #ff134a 60%, #ffd166 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 15px rgba(255, 19, 74, 0.4));
}

.crystal-hero-desc {
    color: var(--text-silver);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 32px;
}

.glass-stat-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 20px;
    backdrop-filter: blur(10px);
}

/* ==========================================
   GLASS CARDS (MẶT KÍNH PHA LÊ CHIẾU SÁNG)
   ========================================== */
.crystal-card {
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-crystal);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.crystal-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--border-crystal-hover);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 19, 74, 0.3);
    background: var(--bg-card-hover);
}

/* VIỀN VÀNG CHO BÀI SLOT & VIỀN ĐỎ CHO BÀI NHÓM */
.border-slot-gold {
    border: 2px solid #ffd166 !important;
    box-shadow: 0 0 18px rgba(255, 209, 102, 0.38), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
.border-slot-gold:hover {
    border-color: #ffe082 !important;
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.65), 0 20px 45px rgba(0, 0, 0, 0.8) !important;
}

.border-nhom-red {
    border: 2px solid #ff134a !important;
    box-shadow: 0 0 18px rgba(255, 19, 74, 0.38), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
.border-nhom-red:hover {
    border-color: #ff4d6d !important;
    box-shadow: 0 0 30px rgba(255, 19, 74, 0.65), 0 20px 45px rgba(0, 0, 0, 0.8) !important;
}

.track-cover-slot {
    border: 2px solid #ffd166 !important;
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.5) !important;
}

.track-cover-nhom {
    border: 2px solid #ff134a !important;
    box-shadow: 0 0 10px rgba(255, 19, 74, 0.5) !important;
}

.track-row-slot {
    border-left: none !important;
    border-right: none !important;
    background: rgba(255, 209, 102, 0.035) !important;
}
.track-row-slot:hover td {
    background: rgba(255, 209, 102, 0.08) !important;
}

.track-row-nhom {
    border-left: none !important;
    border-right: none !important;
    background: rgba(255, 19, 74, 0.035) !important;
}
.track-row-nhom:hover td {
    background: rgba(255, 19, 74, 0.08) !important;
}

.track-row-lot {
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}
.track-row-lot:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

.crystal-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-25deg);
    transition: 0.6s ease;
    pointer-events: none;
}

.crystal-card:hover::after {
    left: 150%;
}

.crystal-card-img-wrapper {
    position: relative;
    padding-top: 85%;
    overflow: hidden;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.crystal-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.crystal-card:hover .crystal-card-img {
    transform: scale(1.08);
}

.track-title-link {
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.track-title-link:hover {
    color: #ffd166 !important;
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

.crystal-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff134a 0%, #b30029 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 25px var(--ruby-glow);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.crystal-card:hover .crystal-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.crystal-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.crystal-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.crystal-card-artist {
    font-size: 0.84rem;
    color: var(--text-dim);
    margin-bottom: 14px;
}

/* ==========================================
   KHO TRACK DJ: BẢNG KÍNH THỦY TINH SANG TRỌNG
   ========================================== */
.crystal-table-wrapper {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-crystal);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.crystal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.crystal-table th {
    background: rgba(14, 15, 26, 0.9);
    color: var(--text-dim);
    font-size: 0.76rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none !important;
    border-right: none !important;
}

.crystal-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
    font-size: 0.92rem;
    transition: all 0.2s ease;
}

.crystal-table-row {
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
}

.crystal-table-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* 1. Track Nhóm khi Active -> NỀN ĐỎ RUBY */
.crystal-table-row.track-row-nhom.active-track td,
body.playing-nhom .crystal-table-row.track-row-nhom.active-track td {
    background: rgba(255, 19, 74, 0.18) !important;
    border-left: none !important;
    border-right: none !important;
}
.crystal-table-row.track-row-nhom.active-track .track-play-inline-btn,
body.playing-nhom .crystal-table-row.track-row-nhom.active-track .track-play-inline-btn {
    background: #ff134a !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(255, 19, 74, 0.85) !important;
}

/* 2. Track Slot khi Active -> NỀN VÀNG HOÀNG GIA */
.crystal-table-row.track-row-slot.active-track td,
body.playing-slot .crystal-table-row.track-row-slot.active-track td {
    background: rgba(255, 209, 102, 0.18) !important;
    border-left: none !important;
    border-right: none !important;
}
.crystal-table-row.track-row-slot.active-track .track-play-inline-btn,
body.playing-slot .crystal-table-row.track-row-slot.active-track .track-play-inline-btn {
    background: #ffd166 !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.85) !important;
}

/* 3. Track Lọt khi Active -> HOÀN TOÀN KHÔNG CÓ NỀN (transparent) */
.crystal-table-row.track-row-lot.active-track td,
.crystal-table-row:not(.track-row-slot):not(.track-row-nhom).active-track td,
body.playing-lot .crystal-table-row.active-track td {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
}
.crystal-table-row.track-row-lot.active-track .track-play-inline-btn,
.crystal-table-row:not(.track-row-slot):not(.track-row-nhom).active-track .track-play-inline-btn,
body.playing-lot .crystal-table-row.active-track .track-play-inline-btn {
    background: rgba(0, 180, 216, 0.25) !important;
    color: #00b4d8 !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 12px rgba(0, 180, 216, 0.6) !important;
}

/* Ẩn hoàn toàn các vạch sóng mini nhảy trong bảng để giữ giao diện sạch đẹp, không bị gạch dọc */
.table-mini-wave {
    display: none !important;
}

.track-play-inline-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.track-play-inline-btn:hover, .crystal-table-row.active-track .track-play-inline-btn {
    background: var(--ruby-primary);
    border-color: #fff;
    box-shadow: 0 0 18px var(--ruby-glow);
    color: #fff;
    transform: scale(1.1);
}

/* ==========================================
   BẢNG GÓI HỘI VIÊN: BLACK DIAMOND & RUBY CARDS
   ========================================== */
.crystal-pricing-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-crystal);
    border-radius: 24px;
    padding: 38px 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.35s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.crystal-pricing-card.featured {
    border-color: rgba(255, 19, 74, 0.6);
    background: radial-gradient(circle at 50% 0%, rgba(255, 19, 74, 0.25) 0%, rgba(20, 21, 33, 0.9) 70%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 19, 74, 0.3);
    transform: scale(1.03);
}

.crystal-pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 19, 74, 0.7);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px var(--ruby-glow);
}

.crystal-price {
    font-size: 2.3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.5px;
}

.crystal-features-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    flex-grow: 1;
}

.crystal-features-list li {
    padding: 10px 0;
    color: var(--text-silver);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.crystal-features-list li i {
    color: var(--ruby-primary);
    filter: drop-shadow(0 0 6px var(--ruby-glow));
}

/* ==========================================
   STICKY BOTTOM PLAYER: VIÊN NGỌC RUBY PHA LÊ
   ========================================== */
.tlong-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: rgba(12, 13, 22, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.75), 0 -1px 20px rgba(255, 19, 74, 0.12);
    padding: 22px 20px 14px 20px;
    height: 104px;
    min-height: 104px;
    display: flex;
    align-items: center;
}

.tlong-player-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 19, 74, 0.5) 25%, rgba(255, 209, 102, 0.6) 50%, rgba(0, 223, 216, 0.5) 75%, transparent 100%);
    pointer-events: none;
}

.player-cover-anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.player-track-cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.player-cover-anchor:hover .player-track-cover {
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.4);
}

.player-ctrl-row {
    margin-top: 3px;
    margin-bottom: 5px;
}

/* ========================================================
   CIRCULAR CONTINUOUS MARQUEE (CHỮ DÀI CHẠY VÒNG TRÒN CHẬM)
   ======================================================== */
.marquee-track-container {
    overflow: hidden !important;
    white-space: nowrap !important;
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
}

.marquee-track-container.has-overflow {
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%) !important;
}

.marquee-circular-track {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    will-change: transform !important;
}

@keyframes marqueeCircularLoop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--marquee-loop-distance, -50%));
    }
}

.marquee-circular-track.is-looping {
    animation: marqueeCircularLoop var(--marquee-loop-speed, 18s) linear infinite !important;
}

.marquee-duplicate-text {
    display: inline-block !important;
    padding-left: 32px !important;
    white-space: nowrap !important;
    opacity: 0.95 !important;
}

/* ========================================================
   PLAYER DOWNLOAD BUTTON: CHUẨN FORM VIÊN THUỐC ĐỎ RUBY
   ======================================================== */
.player-download-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #ff134a 0%, #e00034 50%, #b80028 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 50px !important;
    padding: 7px 18px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 18px rgba(255, 19, 74, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, filter 0.2s ease !important;
    text-decoration: none !important;
}

.player-download-pill-btn i {
    font-size: 0.92rem !important;
    line-height: 1 !important;
}

.player-download-pill-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 6px 24px rgba(255, 19, 74, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
    filter: brightness(1.12) !important;
}

.player-download-pill-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* NÚT PLAY/PAUSE MASTER CHÍNH: HÀO QUANG ĐỎ RUBY */
.player-btn-main {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff134a 0%, #ff2a5f 50%, #c4002b 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 0 20px var(--ruby-glow), 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    cursor: pointer;
}

.player-btn-main:hover {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(255, 19, 74, 0.95), 0 6px 15px rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* NÚT TIẾN/LÙI BÀI (PREV / NEXT): KÍNH TRÒN BO ĐẸP */
.player-btn-step {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.player-btn-step:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: scale(1.08);
}

/* NÚT ĐIỀU KHIỂN PHỤ (SHUFFLE, REPEAT): VIÊN NGỌC TINH TẾ */
.player-btn-ctrl {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-btn-ctrl:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.player-btn-ctrl.active {
    color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.15) !important;
    border-color: rgba(255, 209, 102, 0.4) !important;
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.35) !important;
}

/* NÚT TUA 10 GIÂY (-10S / +10S) */
.player-btn-skip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-btn-skip:hover {
    color: #ffd166 !important;
    background: rgba(255, 209, 102, 0.15) !important;
    border-color: rgba(255, 209, 102, 0.35) !important;
    transform: scale(1.08);
}

.btn-quick-fav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.btn-quick-fav:hover {
    color: #ff134a !important;
    background: rgba(255, 19, 74, 0.12);
    border-color: rgba(255, 19, 74, 0.3);
    transform: scale(1.1);
}

.digital-time-display {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    user-select: none;
}

.seek-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: height 0.15s ease, background 0.15s ease;
    padding: 0;
    margin: 0;
}

.seek-slider:hover {
    height: 8px;
    background: rgba(255, 255, 255, 0.28);
}

.seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ff134a;
    border: 2px solid #fff;
    box-shadow: 0 0 12px var(--ruby-glow);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.seek-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.seek-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ff134a;
    border: 2px solid #fff;
    box-shadow: 0 0 12px var(--ruby-glow);
    cursor: pointer;
}

#audioWaveCanvas {
    height: 24px;
    width: 100%;
    border-radius: 4px;
    filter: drop-shadow(0 0 8px rgba(255, 19, 74, 0.5));
}

/* ==========================================
   VIETQR CHECKOUT MODAL STYLING
   ========================================== */
.vietqr-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   ĐỔI MÀU CON TRỎ KHI PHÁT BÀI (SLOT = VÀNG, NHÓM = ĐỎ)
   ========================================== */

/* 1. KHI PHÁT BÀI SLOT -> CON TRỎ VÀNG HOÀNG GIA */
body.playing-slot .seek-slider::-webkit-slider-thumb {
    background: #ffd166 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.95), 0 0 25px rgba(255, 209, 102, 0.6) !important;
    transform: scale(1.2);
}
body.playing-slot .seek-slider::-moz-range-thumb {
    background: #ffd166 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.95) !important;
    transform: scale(1.2);
}
body.playing-slot .seek-slider {
    accent-color: #ffd166 !important;
}
body.playing-slot .player-btn-main {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%) !important;
    color: #0b0c10 !important;
    box-shadow: 0 0 25px rgba(255, 209, 102, 0.85) !important;
}
body.playing-slot .crystal-player-bar {
    border-top: 1px solid rgba(255, 209, 102, 0.5) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85), 0 -1px 30px rgba(255, 209, 102, 0.3) !important;
}

/* 2. KHI PHÁT BÀI NHÓM -> CON TRỎ ĐỎ RUBY */
body.playing-nhom .seek-slider::-webkit-slider-thumb {
    background: #ff134a !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 19, 74, 0.95), 0 0 25px rgba(255, 19, 74, 0.6) !important;
    transform: scale(1.2);
}
body.playing-nhom .seek-slider::-moz-range-thumb {
    background: #ff134a !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 19, 74, 0.95) !important;
    transform: scale(1.2);
}
body.playing-nhom .seek-slider {
    accent-color: #ff134a !important;
}
body.playing-nhom .player-btn-main {
    background: linear-gradient(135deg, #ff134a 0%, #b30029 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 25px rgba(255, 19, 74, 0.85) !important;
}
body.playing-nhom .crystal-player-bar {
    border-top: 1px solid rgba(255, 19, 74, 0.5) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85), 0 -1px 30px rgba(255, 19, 74, 0.3) !important;
}

/* ==========================================
   TAB PHÂN LOẠI: TRACK NHÓM (ĐỎ), DEMO SLOT (VÀNG), TRACK LỌT
   ========================================== */

/* 1. NÚT TAB TRACK NHÓM -> SÁNG ĐỎ RỰC RỠ KHI ACTIVE */
.pill-nhom {
    border: 1px solid rgba(255, 19, 74, 0.5) !important;
    color: #ff6b8b !important;
    transition: all 0.25s ease !important;
}
.pill-nhom:hover,
.pill-nhom.active,
#packageFilterPills button.pill-nhom.active {
    background: linear-gradient(135deg, #ff134a 0%, #b30029 100%) !important;
    color: #ffffff !important;
    border-color: #ff134a !important;
    box-shadow: 0 0 18px rgba(255, 19, 74, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

/* 2. NÚT TAB DEMO TRACK SLOT -> SÁNG VÀNG HOÀNG GIA KHI ACTIVE */
.pill-slot {
    border: 1px solid rgba(255, 209, 102, 0.5) !important;
    color: #ffd166 !important;
    transition: all 0.25s ease !important;
}
.pill-slot:hover,
.pill-slot.active,
#packageFilterPills button.pill-slot.active {
    background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%) !important;
    color: #0b0c10 !important;
    border-color: #ffd166 !important;
    box-shadow: 0 0 18px rgba(255, 209, 102, 0.85), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

/* 3. NÚT TAB TRACK LỌT -> TAB RIÊNG BIỆT (XANH NGỌC / BẠC) */
.pill-lot {
    border: 1px solid rgba(0, 180, 216, 0.5) !important;
    color: #00b4d8 !important;
    transition: all 0.25s ease !important;
}
.pill-lot:hover,
.pill-lot.active,
#packageFilterPills button.pill-lot.active {
    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%) !important;
    color: #ffffff !important;
    border-color: #00b4d8 !important;
    box-shadow: 0 0 18px rgba(0, 180, 216, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}

/* 4. NÚT TAB TẤT CẢ */
.pill-all.active,
#packageFilterPills button.pill-all.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

/* Hiệu ứng viền bảng khi đang lọc Track Nhóm vs Track Slot vs Track Lọt */
.crystal-table-wrapper.filter-active-nhom {
    border: 1px solid rgba(255, 19, 74, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 19, 74, 0.15) !important;
}
.crystal-table-wrapper.filter-active-slot {
    border: 1px solid rgba(255, 209, 102, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 209, 102, 0.15) !important;
}
.crystal-table-wrapper.filter-active-lot {
    border: 1px solid rgba(0, 180, 216, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 180, 216, 0.15) !important;
}

/* =========================================================
   FORM ĐĂNG NHẬP ĐỘC ĐÁO: STUDIO CYBER GLASSMORPHISM MODAL
   ========================================================= */
.login-studio-modal .modal-dialog {
    max-width: 880px;
}

.login-studio-modal .modal-content {
    background: radial-gradient(circle at 10% 20%, rgba(255, 19, 74, 0.22) 0%, rgba(15, 16, 28, 0.98) 55%),
                radial-gradient(circle at 90% 80%, rgba(255, 209, 102, 0.15) 0%, rgba(10, 11, 20, 0.98) 65%);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 70px rgba(255, 19, 74, 0.3);
    overflow: hidden;
    position: relative;
}

.login-studio-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff134a, #ffd166, #00b4d8, #ff134a);
    background-size: 300% 100%;
    animation: gradientShimmer 6s linear infinite;
    z-index: 5;
}

/* Vinyl DJ Disc Showcase */
.vinyl-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 25px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.5) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
}

.vinyl-disc-container {
    position: relative;
    width: 170px !important;
    height: 170px !important;
    margin: 10px auto 25px auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vinyl-disc {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, #2b2c3a 14%, #0e0f18 15%, #1a1b26 38%, #0e0f18 39%, #1a1b26 58%, #080910 100%);
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 19, 74, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: spinVinyl 12s linear infinite;
    z-index: 2;
    margin: 0 auto;
}

@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vinyl-center-label {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff134a 20%, #850020 100%);
    border: 2px solid #ffd166;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 209, 102, 0.6);
}

.vinyl-center-hole {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #080910;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.vinyl-needle {
    position: absolute;
    top: -6px;
    right: 8px;
    width: 48px;
    height: 68px;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    transform-origin: 45px 5px;
    transform: rotate(0deg);
    z-index: 4;
}

/* Audio Visualizer Waves */
.equalizer-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 24px;
    margin-top: 15px;
}

.equalizer-bar {
    width: 4px;
    background: linear-gradient(180deg, #ffd166, #ff134a);
    border-radius: 3px;
    animation: eqPulse 1.2s ease-in-out infinite alternate;
}
.equalizer-bar:nth-child(1) { height: 35%; animation-delay: 0.1s; }
.equalizer-bar:nth-child(2) { height: 80%; animation-delay: 0.3s; }
.equalizer-bar:nth-child(3) { height: 100%; animation-delay: 0.5s; }
.equalizer-bar:nth-child(4) { height: 55%; animation-delay: 0.2s; }
.equalizer-bar:nth-child(5) { height: 90%; animation-delay: 0.4s; }
.equalizer-bar:nth-child(6) { height: 40%; animation-delay: 0.6s; }

@keyframes eqPulse {
    0% { height: 20%; opacity: 0.4; }
    50% { height: 100%; opacity: 1; }
    100% { height: 35%; opacity: 0.5; }
}

/* Sound Wave Rings around Vinyl Turntable */
.sound-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 19, 74, 0.4);
    pointer-events: none;
    box-shadow: 0 0 15px rgba(255, 19, 74, 0.2);
    z-index: 1;
}
.sound-ring.ring-1 {
    width: 160px;
    height: 160px;
    animation: soundRingPulse 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.sound-ring.ring-2 {
    width: 185px;
    height: 185px;
    border-color: rgba(255, 209, 102, 0.35);
    animation: soundRingPulse 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 1.5s;
}

@keyframes soundRingPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.85;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 0;
    }
}

/* Pulsing Online Dot */
.live-dot-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ed573;
    box-shadow: 0 0 10px #2ed573;
    animation: liveDotBlink 1.4s ease-in-out infinite alternate;
}
@keyframes liveDotBlink {
    0% { opacity: 0.35; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.25); }
}

/* Floating Studio Input styling */
.studio-input-group {
    position: relative;
    border-radius: 14px;
    background: rgba(18, 19, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
}

.studio-input-group:focus-within {
    border-color: #ff134a;
    box-shadow: 0 0 20px rgba(255, 19, 74, 0.35);
    background: rgba(25, 26, 42, 0.95);
}

.studio-input-group .form-control {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 12px 14px;
    font-size: 0.92rem;
}

.studio-input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #8e9aaf;
    padding-left: 14px;
    padding-right: 4px;
}

.studio-input-group:focus-within .input-group-text {
    color: #ff134a;
}

/* Eye Toggle Password Button */
.btn-password-toggle {
    background: transparent;
    border: none;
    color: #8e9aaf;
    padding: 0 14px;
    transition: color 0.2s ease;
    cursor: pointer;
}
.btn-password-toggle:hover {
    color: #ffd166;
}

/* Quick Actor Pills */
.actor-pill-card {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cfd2dc;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    user-select: none;
    text-decoration: none;
}
.actor-pill-card:hover {
    transform: translateY(-2px);
    color: #fff;
}
.actor-pill-admin:hover {
    border-color: #ff134a;
    background: rgba(255, 19, 74, 0.18);
    box-shadow: 0 0 14px rgba(255, 19, 74, 0.5);
}
.actor-pill-producer:hover {
    border-color: #00b4d8;
    background: rgba(0, 180, 216, 0.18);
    box-shadow: 0 0 14px rgba(0, 180, 216, 0.5);
}
.actor-pill-standard:hover {
    border-color: #ff4d6d;
    background: rgba(255, 77, 109, 0.18);
    box-shadow: 0 0 14px rgba(255, 77, 109, 0.5);
}
.actor-pill-premium:hover {
    border-color: #ffd166;
    background: rgba(255, 209, 102, 0.18);
    box-shadow: 0 0 14px rgba(255, 209, 102, 0.5);
}
.actor-pill-free:hover {
    border-color: #8e9aaf;
    background: rgba(142, 154, 175, 0.18);
}

/* ========================================================
   ADMIN VIP EXTEND MODAL STYLING
   ======================================================== */
.vip-select-card {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    position: relative;
}
.vip-select-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
}
.vip-select-card.active.card-standard {
    border-color: #ff134a;
    background: rgba(255, 19, 74, 0.12);
    box-shadow: 0 0 20px rgba(255, 19, 74, 0.35);
}
.vip-select-card.active.card-premium {
    border-color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    box-shadow: 0 0 20px rgba(255, 209, 102, 0.35);
}
.vip-select-card .vip-check-indicator {
    opacity: 0.3;
    transition: opacity 0.2s ease;
    font-size: 1rem;
}
.vip-select-card.active .vip-check-indicator {
    opacity: 1;
}

.day-chip-btn {
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #cfd2dc;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.day-chip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
.day-chip-btn.active {
    background: #ffd166 !important;
    color: #121320 !important;
    border-color: #ffd166 !important;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(255, 209, 102, 0.5);
}

.reason-chip {
    padding: 3px 9px;
    border-radius: 16px;
    font-size: 0.72rem;
    color: #a0a6b5;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    cursor: pointer;
    transition: all 0.2s ease;
}
.reason-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.reason-chip.active {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.12);
    border-color: #ffd166;
}

/* ========================================================
   ADMIN COMMAND CENTER 2.0 STYLING
   ======================================================== */
.admin-hero-banner {
    background: linear-gradient(135deg, rgba(255, 19, 74, 0.14) 0%, rgba(18, 19, 32, 0.95) 50%, rgba(10, 11, 20, 0.98) 100%);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 19, 74, 0.35);
    border-radius: 24px;
    box-shadow: 0 0 50px rgba(255, 19, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.admin-hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 209, 102, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.admin-nav-tabs {
    background: rgba(18, 19, 32, 0.75);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admin-nav-tabs .nav-link {
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #a0a6b5;
    padding: 9px 18px;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.admin-nav-tabs .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}
.admin-nav-tabs .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255, 19, 74, 0.3) 0%, rgba(255, 19, 74, 0.15) 100%) !important;
    border-color: rgba(255, 19, 74, 0.6) !important;
    box-shadow: 0 0 18px rgba(255, 19, 74, 0.4);
}

.admin-mega-kpi {
    padding: 24px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1.5px solid;
    backdrop-filter: blur(20px);
}
.admin-mega-kpi:hover {
    transform: translateY(-3px);
}
.admin-mega-revenue {
    background: linear-gradient(135deg, rgba(0, 204, 136, 0.12) 0%, rgba(18, 19, 32, 0.95) 100%);
    border-color: rgba(0, 204, 136, 0.4);
    box-shadow: 0 0 30px rgba(0, 204, 136, 0.15);
}
.admin-mega-revenue:hover {
    box-shadow: 0 0 45px rgba(0, 204, 136, 0.3);
}
.admin-mega-vip {
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.12) 0%, rgba(18, 19, 32, 0.95) 100%);
    border-color: rgba(255, 209, 102, 0.4);
    box-shadow: 0 0 30px rgba(255, 209, 102, 0.15);
}
.admin-mega-vip:hover {
    box-shadow: 0 0 45px rgba(255, 209, 102, 0.3);
}

.admin-metric-card {
    padding: 18px;
    border-radius: 16px;
    background: rgba(18, 19, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    transition: all 0.25s ease;
}
.admin-metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Metal Titanium Card for Bank */
.metal-bank-card {
    background: linear-gradient(135deg, #1f2233 0%, #0e101a 60%, #171926 100%);
    border: 1px solid rgba(255, 209, 102, 0.4);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.metal-bank-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 209, 102, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.metal-chip {
    width: 44px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffd166 0%, #b8860b 100%);
    border: 1px solid #ffe699;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
}
.metal-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.3);
}

/* ZERO-LATENCY INSTANT TAB SWITCHING ACROSS ENTIRE PLATFORM */
.tab-pane.fade {
    transition: opacity 0.04s ease-out !important;
}
.tab-pane.fade:not(.show) {
    display: none !important;
}
.nav-pills .nav-link, .nav-tabs .nav-link {
    transition: background-color 0.05s ease, color 0.05s ease, border-color 0.05s ease !important;
}

/* ========================================================
   COMPREHENSIVE MOBILE & SMARTPHONE RESPONSIVE OPTIMIZATION
   ======================================================== */

/* Prevent horizontal overflow on mobile devices */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* ==========================================
   SEAMLESS SPA TOP PROGRESS BAR (TURBO GLOW)
   ========================================== */
.seamless-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #ff134a 0%, #ffd166 50%, #00b4d8 100%);
    background-size: 200% 100%;
    z-index: 99999;
    pointer-events: none;
    transition: width 0.25s ease, opacity 0.2s ease;
    opacity: 0;
    box-shadow: 0 0 10px rgba(255, 19, 74, 0.9), 0 0 5px rgba(255, 209, 102, 0.9);
}
.seamless-progress-bar.loading {
    opacity: 1;
}

/* Tablet & Mobile Breakpoint: max-width 991.98px */
@media (max-width: 991.98px) {
    /* Mobile Glassmorphic Navbar Dropdown */
    .tlong-navbar .navbar-collapse {
        background: rgba(14, 15, 25, 0.96) !important;
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(30px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 18px !important;
        padding: 18px !important;
        margin-top: 12px !important;
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 19, 74, 0.18) !important;
    }

    .tlong-navbar .nav-link {
        padding: 10px 14px !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }

    .tlong-navbar .nav-link:hover,
    .tlong-navbar .nav-link.active {
        background: rgba(255, 19, 74, 0.15) !important;
    }

    /* Auth & User status on mobile menu */
    .tlong-navbar .navbar-nav:last-child {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .tlong-navbar .navbar-nav:last-child .btn,
    .tlong-navbar .navbar-nav:last-child a.btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Smartphone Breakpoint: max-width 767.98px */
@media (max-width: 767.98px) {
    /* Safe viewport bottom padding for player */
    body {
        padding-bottom: 165px !important;
    }

    /* Compress standard spacing on mobile */
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    .my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* 1. HERO STAGE & HEADERS COMPRESSION */
    .crystal-hero-stage,
    .crystal-hero-banner {
        padding: 16px 14px 18px 14px !important;
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        border-radius: 16px !important;
    }

    .hero-pill-badge {
        padding: 3px 10px !important;
        font-size: 0.66rem !important;
        margin-bottom: 6px !important;
        gap: 5px !important;
    }

    .crystal-hero-title {
        font-size: 1.25rem !important;
        line-height: 1.28 !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        letter-spacing: -0.2px !important;
    }

    .crystal-hero-desc {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
    }

    /* Compact CTA Hero Buttons */
    .crystal-hero-stage .btn-shimmer-ruby,
    .crystal-hero-stage .btn-shimmer-gold,
    .crystal-hero-stage .btn-glass-crystal,
    .btn-shimmer-ruby,
    .btn-shimmer-gold {
        padding: 6px 13px !important;
        font-size: 0.78rem !important;
        border-radius: 20px !important;
    }

    /* Compact Glass Stat Pills */
    .glass-stat-pill {
        padding: 8px 4px !important;
        border-radius: 10px !important;
    }
    .glass-stat-pill h4 {
        font-size: 1rem !important;
        margin-bottom: 1px !important;
    }
    .glass-stat-pill span {
        font-size: 0.65rem !important;
    }

    /* 2. MASTER CATEGORY SELECTOR & SECTION BANNERS */
    .master-type-selector {
        padding: 10px 12px !important;
        margin-bottom: 16px !important;
        border-radius: 14px !important;
    }

    .master-type-selector h5 {
        font-size: 0.9rem !important;
    }
    .master-type-selector small {
        font-size: 0.72rem !important;
    }

    /* Scale down oversized header icons */
    .master-category-container .fa-2x,
    .master-type-selector .fa-lg {
        font-size: 1.15rem !important;
    }
    .master-category-container .p-3.rounded-circle,
    .master-type-selector .p-2.rounded-circle {
        padding: 8px !important;
    }

    .master-category-container .h4 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    /* Legend Pills on Track / Nonstop pages */
    .crystal-hero-stage .rounded-pill.p-2.px-3 {
        padding: 4px 8px !important;
        gap: 6px !important;
    }
    .crystal-hero-stage .rounded-pill strong {
        font-size: 0.72rem !important;
    }
    .crystal-hero-stage .rounded-pill .rounded-circle {
        width: 10px !important;
        height: 10px !important;
    }

    /* Horizontal swipeable pill buttons */
    #packageFilterPills, #mainTypeTabs, #nonstopFilterPills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    #packageFilterPills::-webkit-scrollbar,
    #mainTypeTabs::-webkit-scrollbar,
    #nonstopFilterPills::-webkit-scrollbar {
        display: none !important;
    }

    #packageFilterPills button,
    #mainTypeTabs button,
    #nonstopFilterPills button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.76rem !important;
        padding: 5px 11px !important;
        border-radius: 16px !important;
    }

    /* Filter Search Inputs on mobile */
    #trackSearchInput, #genreFilterSelect, #bpmFilterSelect,
    #nonstopSearchInput, #nonstopGenreFilterSelect {
        font-size: 0.78rem !important;
        padding: 5px 10px !important;
        height: 32px !important;
        max-width: 100% !important;
    }

    /* 3. CRYSTAL MUSIC TABLES COMPACT MODE */
    .crystal-table-wrapper {
        border-radius: 12px !important;
        padding: 0 !important;
        overflow-x: auto !important;
    }

    .crystal-table th,
    .crystal-table td {
        padding: 6px 4px !important;
        font-size: 0.8rem !important;
    }

    .crystal-table th {
        font-size: 0.72rem !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .crystal-table .track-title-wrapper a,
    .crystal-table .track-title-wrapper span {
        max-width: 155px !important;
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }

    .crystal-table .track-title-wrapper .badge {
        font-size: 0.58rem !important;
        padding: 1px 4px !important;
    }

    .crystal-table img,
    .crystal-table .track-table-cover-img,
    .crystal-table .track-cover-slot,
    .crystal-table .track-cover-nhom {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
    }

    .track-play-inline-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.72rem !important;
    }

    /* 4. NONSTOP CARDS COMPACT WIDESCREEN RATIO */
    .crystal-card {
        border-radius: 14px !important;
    }

    .crystal-card-img-wrapper {
        padding-top: 48% !important; /* Sleek 2:1 ratio instead of 85% bulky block */
    }

    .crystal-card-body {
        padding: 10px 12px !important;
    }

    .crystal-card-title {
        font-size: 0.88rem !important;
        margin-bottom: 3px !important;
        line-height: 1.3 !important;
    }

    .crystal-card-artist {
        font-size: 0.74rem !important;
        margin-bottom: 6px !important;
    }

    .crystal-play-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
    }

    /* 5. PRICING SECTION COMPACT */
    #pricingSection {
        padding: 16px 0 !important;
        margin-bottom: 24px !important;
    }

    #pricingSection .crystal-hero-title {
        font-size: 1.25rem !important;
    }

    .crystal-pricing-card {
        padding: 18px 16px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    .crystal-price {
        font-size: 1.55rem !important;
        margin-bottom: 4px !important;
    }

    .crystal-pricing-card h3 {
        font-size: 1.1rem !important;
    }

    .crystal-features-list {
        padding-left: 0 !important;
        margin-bottom: 12px !important;
    }

    .crystal-features-list li {
        font-size: 0.78rem !important;
        padding: 3px 0 !important;
    }

    /* 6. DETAIL PAGE SOUNDCLOUD PLAYER */
    .soundcloud-hero-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }

    .soundcloud-big-play-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .soundcloud-track-title {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .soundcloud-waveform-wrapper {
        height: 55px !important;
    }

    #detailWaveformCanvas {
        height: 55px !important;
    }

    .soundcloud-cover-img {
        width: 140px !important;
        height: 140px !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
    }

    /* 7. BOTTOM STICKY PLAYER BAR - MOBILE PRO DESIGN */
    .tlong-player-bar {
        height: auto !important;
        min-height: 100px !important;
        padding-top: 10px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 34px !important;
        padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.92), 0 -2px 18px rgba(255, 19, 74, 0.25) !important;
    }

    .player-ctrl-row {
        gap: 10px !important;
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }

    .player-seek-row {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        padding: 0 2px !important;
    }

    .player-track-cover {
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
    }

    #playerTrackTitle {
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }

    #playerTrackArtist {
        font-size: 0.68rem !important;
    }

    .player-btn-main {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.88rem !important;
        margin: 0 3px !important;
    }

    .player-btn-step {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    .player-btn-ctrl {
        padding: 4px 6px !important;
        font-size: 0.82rem !important;
    }

    /* Nút Tải trên Mobile: Chuẩn form viên thuốc căng tròn, nổi bật */
    .player-download-pill-btn {
        padding: 5px 13px !important;
        font-size: 0.76rem !important;
        border-radius: 50px !important;
        gap: 5px !important;
        box-shadow: 0 3px 14px rgba(255, 19, 74, 0.6) !important;
    }

    .player-download-pill-btn i {
        font-size: 0.85rem !important;
    }

    #playerCurrentTime,
    #playerDuration {
        font-size: 0.68rem !important;
        min-width: 30px !important;
    }

    .seek-slider {
        height: 4px !important;
        margin: 2px 0 !important;
        cursor: pointer;
    }

    .seek-slider::-webkit-slider-thumb {
        width: 12px !important;
        height: 12px !important;
    }

    /* 8. MODALS & POPUPS COMPACT SIZING */
    .modal-dialog {
        margin: 10px auto !important;
        max-width: calc(100% - 20px) !important;
    }

    .login-studio-modal .vinyl-stage {
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .login-studio-modal .vinyl-disc-container {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 10px auto !important;
    }

    .login-studio-modal .vinyl-disc {
        width: 90px !important;
        height: 90px !important;
    }

    .login-studio-modal .vinyl-center-label {
        width: 34px !important;
        height: 34px !important;
    }

    .login-studio-modal .vinyl-needle {
        display: none !important;
    }

    .login-studio-modal .sound-ring.ring-1 {
        width: 95px !important;
        height: 95px !important;
    }

    .login-studio-modal .sound-ring.ring-2 {
        width: 110px !important;
        height: 110px !important;
    }

    .login-studio-modal .modal-content {
        border-radius: 18px !important;
    }

    .studio-input-group .form-control {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }
}

/* Extra small devices (< 420px) */
@media (max-width: 420px) {
    .crystal-table .track-title-wrapper span,
    .crystal-table .track-title-wrapper a {
        max-width: 120px !important;
    }

    .tlong-player-bar .btn-sm {
        padding: 2px 4px !important;
        font-size: 0.72rem !important;
    }
}

/* ========================================================
   PRODUCER STUDIO - NÚT 7 MÀU (RAINBOW HOLOGRAPHIC AURORA)
   ======================================================== */
.btn-producer-studio-rainbow {
    background: linear-gradient(135deg, #ff007f, #7928ca, #0070f3, #00dfd8, #43e97b, #fa709a, #fee140, #ff007f) !important;
    background-size: 300% 300% !important;
    animation: rainbowShift 4s ease infinite !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50px !important;
    padding: 0.38rem 1.05rem !important;
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.5), 0 0 25px rgba(0, 112, 243, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-producer-studio-rainbow:hover,
.btn-producer-studio-rainbow:focus {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.8), 0 0 38px rgba(0, 223, 216, 0.7), inset 0 0 12px rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.btn-producer-studio-rainbow:active {
    transform: translateY(0) scale(0.98) !important;
}

.btn-producer-studio-rainbow::after {
    vertical-align: middle !important;
    margin-left: 0.4rem !important;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.producer-menu-item {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.producer-menu-item:hover {
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.15) !important;
}

/* ========================================================
   SMOOTH MODAL TRANSITIONS (HIỆU ỨNG CHUYỂN MODAL MƯỢT MÀ)
   ======================================================== */
.modal.fade .modal-dialog {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease !important;
    transform: scale(0.94) translateY(-14px);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

.modal-backdrop.fade {
    transition: opacity 0.25s ease !important;
}