/* ========================================
   LPBXH PLUGIN v2.1 - OPTIMIZED VERSION
   - Fixed performance (smooth scroll)
   - Fixed clickable buttons
   - Fixed mobile responsive
   ======================================== */

/* ========================================
   FONT CONFIGURATION
   ======================================== */
/* 
   Plugin sẽ tự động kế thừa font từ site của bạn.
   Nếu bạn dùng 'Bai Jamjuree' cho toàn site, 
   plugin sẽ tự động dùng font đó.
   
   Nếu muốn force dùng font riêng cho plugin, 
   uncomment dòng bên dưới:
*/
/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap'); */

/* CSS Variables */
:root {
    --gold: #D4AF37;
    --gold-light: #E8D7A5;
    --dark: #0F0F0F;
    --dark-2: #1A1A1A;
    --dark-border: #2A2A2A;
    --white: #FFF;
    --gray: #999;
    --gray-light: #CCC;
    --green: #10B981;
}

/* ========================================
   MAIN WRAPPER - Performance Optimized
   ======================================== */
#toplist-wrapper {
    /* Kế thừa font từ body/site - sẽ dùng 'Bai Jamjuree' của bạn */
    font-family: inherit !important;
    background: var(--dark) !important;
    color: var(--white) !important;
    line-height: 1.6 !important;
    padding: 20px 0 !important;
    
    /* PERFORMANCE FIX: Remove perspective for smoother scroll */
    /* perspective: 1500px !important; */
    
    /* Enable GPU acceleration */
    will-change: transform !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#toplist-wrapper * {
    box-sizing: border-box !important;
}

#toplist-wrapper .container {
    max-width: 1220px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ========================================
   TOPLIST ITEMS
   ======================================== */
.toplist {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.toplist-item {
    position: relative !important;
    background: var(--dark-2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 2px solid var(--dark-border) !important;
    
    /* PERFORMANCE FIX: Simpler transition */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    
    /* Remove 3D transforms for better performance */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

.toplist-item:hover {
    /* PERFORMANCE FIX: Use only scale and shadow */
    transform: scale(1.02) translateZ(0) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* ========================================
   RANK NUMBER
   ======================================== */
.rank-number {
    position: absolute !important;
    top: -15px !important;
    left: 20px !important;
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, var(--gold), #FFA500) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--dark) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5) !important;
    z-index: 5 !important;
}

/* ========================================
   TOPLIST CONTENT LAYOUT
   ======================================== */
.toplist-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.logo-wrapper {
    width: 120px !important;
    height: 80px !important;
    border: 2px solid var(--dark-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.logo-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* ========================================
   INFO SECTION
   ======================================== */
.info {
    flex: 1 !important;
}

.brand-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--gold-light) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.verified-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #FFF !important;
    white-space: nowrap !important;
    font-family: inherit !important; /* Kế thừa font của site */
    line-height: 1 !important;
}

/* ========================================
   RATING
   ======================================== */
.rating {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.stars {
    display: flex !important;
    gap: 4px !important;
}

.star {
    color: var(--gold) !important;
    font-size: 18px !important;
    /* BLING BLING EFFECT */
    animation: star-bling 2s ease-in-out infinite !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8) !important;
}

/* Delay cho mỗi ngôi sao để tạo hiệu ứng sóng */
.star:nth-child(1) { animation-delay: 0s !important; }
.star:nth-child(2) { animation-delay: 0.2s !important; }
.star:nth-child(3) { animation-delay: 0.4s !important; }
.star:nth-child(4) { animation-delay: 0.6s !important; }
.star:nth-child(5) { animation-delay: 0.8s !important; }

@keyframes star-bling {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
    }
    50% { 
        transform: scale(1.3) rotate(10deg);
        text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

.rating-score {
    font-weight: 800 !important;
    color: var(--gold) !important;
    font-size: 18px !important;
    padding: 4px 12px !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    display: inline-flex !important;
    margin: 0 !important;
}

.rating-count {
    color: var(--gray) !important;
    font-size: 14px !important;
}

/* ========================================
   HIGHLIGHTS
   ======================================== */
.highlights {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.highlight-tag {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: var(--gray-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   ACTIONS - BUTTONS SECTION
   FIX: Make buttons clickable
   ======================================== */
.actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-end !important;
    
    /* FIX: Ensure buttons are above other elements */
    position: relative !important;
    z-index: 15 !important;
}

.bonus-tag {
    background: linear-gradient(135deg, var(--gold), #FFA500) !important;
    color: var(--dark) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    
    /* FIX: Ensure button is clickable */
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
}

.bonus-tag:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6) !important;
}

.cta-button {
    background: linear-gradient(135deg, var(--gold), #FFA500) !important;
    color: var(--dark) !important;
    padding: 14px 36px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5) !important;
    cursor: pointer !important;
    
    /* FIX: Ensure button is clickable */
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
    
    /* POWERFUL CALL TO ACTION EFFECT */
    animation: cta-pulse-strong 2s ease-in-out infinite !important;
}

.cta-button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 40px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 165, 0, 0.6) !important;
    animation: cta-hover-glow 0.5s ease-in-out infinite alternate !important;
}

/* POWERFUL CTA ANIMATION - Kêu gọi mạnh mẽ */
@keyframes cta-pulse-strong {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5), 0 0 0 0 rgba(255, 215, 0, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 30px rgba(255, 215, 0, 0.8), 0 0 0 15px rgba(255, 215, 0, 0);
    }
}

@keyframes cta-hover-glow {
    0% {
        box-shadow: 0 8px 40px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 165, 0, 0.8);
    }
    100% {
        box-shadow: 0 10px 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 165, 0, 1);
    }
}

/* ========================================
   RANK SPECIFIC STYLES
   ======================================== */
.rank-1 {
    border-color: var(--gold) !important;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.2) !important;
    
    /* WOW BORDER EFFECT FOR TOP 1 - ULTRA PREMIUM */
    border: 3px solid transparent !important;
    background: 
        linear-gradient(var(--dark-2), var(--dark-2)) padding-box,
        linear-gradient(90deg, #FFD700, #FFA500, #FF6B35, #FF1744, #FFA500, #FFD700) border-box !important;
    animation: rank1-border-rotate 3s linear infinite, rank1-glow-pulse 2s ease-in-out infinite !important;
    position: relative !important;
}

.rank-1::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 12px !important;
    padding: 3px !important;
    background: linear-gradient(90deg, #FFD700, #FFA500, #FF6B35, #FF1744, #FFA500, #FFD700) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: rank1-border-rotate 3s linear infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

@keyframes rank1-border-rotate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes rank1-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.4),
            0 0 60px rgba(255, 165, 0, 0.3),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 0.8),
            0 0 100px rgba(255, 165, 0, 0.6),
            inset 0 0 40px rgba(255, 215, 0, 0.2);
    }
}

.rank-1 .verified-badge {
    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.6) !important;
}

/* WOW BORDER FOR TOP 2 - SILVER PREMIUM */
.rank-2 {
    border: 3px solid transparent !important;
    background: 
        linear-gradient(var(--dark-2), var(--dark-2)) padding-box,
        linear-gradient(90deg, #E8E8E8, #C0C0C0, #A8A8A8, #C0C0C0, #E8E8E8) border-box !important;
    animation: rank2-border-shine 2.5s linear infinite, rank2-glow-pulse 2s ease-in-out infinite !important;
}

@keyframes rank2-border-shine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes rank2-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(232, 232, 232, 0.4),
            0 0 40px rgba(192, 192, 192, 0.3),
            inset 0 0 15px rgba(232, 232, 232, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(232, 232, 232, 0.7),
            0 0 70px rgba(192, 192, 192, 0.5),
            inset 0 0 30px rgba(232, 232, 232, 0.2);
    }
}

.rank-2 .verified-badge,
.rank-3 .verified-badge {
    background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.5) !important;
}

/* WOW BORDER FOR TOP 3 - BRONZE PREMIUM */
.rank-3 {
    border: 3px solid transparent !important;
    background: 
        linear-gradient(var(--dark-2), var(--dark-2)) padding-box,
        linear-gradient(90deg, #CD7F32, #B8860B, #D4A017, #B8860B, #CD7F32) border-box !important;
    animation: rank3-border-shine 2.5s linear infinite, rank3-glow-pulse 2s ease-in-out infinite !important;
}

@keyframes rank3-border-shine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes rank3-glow-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(205, 127, 50, 0.4),
            0 0 40px rgba(184, 134, 11, 0.3),
            inset 0 0 15px rgba(205, 127, 50, 0.1);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(205, 127, 50, 0.7),
            0 0 70px rgba(184, 134, 11, 0.5),
            inset 0 0 30px rgba(205, 127, 50, 0.2);
    }
}

.rank-4 .verified-badge,
.rank-5 .verified-badge,
.rank-6 .verified-badge,
.rank-7 .verified-badge,
.rank-8 .verified-badge,
.rank-9 .verified-badge,
.rank-10 .verified-badge {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

/* ========================================
   FOOTER
   ======================================== */
.lpbxh-footer {
    margin-top: 40px !important;
    padding: 30px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer-warning {
    padding: 20px !important;
    background: rgba(255, 165, 0, 0.15) !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-size: 15px !important;
    color: var(--white) !important;
}

.footer-text {
    text-align: center !important;
    color: var(--gray) !important;
    font-size: 13px !important;
}

/* ========================================
   TOP BADGES (Rank 1, 2, 3)
   FIX: Prevent overlapping on mobile
   ======================================== */
.rank-1::after,
.rank-2::after,
.rank-3::after {
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: var(--dark) !important;
    padding: 8px 30px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.7) !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

.rank-2::after {
    background: linear-gradient(135deg, #E8E8E8, #C0C0C0) !important;
    top: -10px !important;
    padding: 6px 24px !important;
    font-size: 11px !important;
}

.rank-3::after {
    background: linear-gradient(135deg, #CD7F32, #B8860B) !important;
    color: var(--white) !important;
    top: -10px !important;
    padding: 6px 24px !important;
    font-size: 11px !important;
}

/* ========================================
   MOBILE RESPONSIVE - FULLY FIXED
   ======================================== */
@media (max-width: 768px) {
    #toplist-wrapper {
        padding: 15px 0 !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .toplist {
        gap: 25px !important;
    }
    
    .toplist-item {
        padding: 25px 15px 20px !important;
        
        /* FIX: Remove min-height to prevent layout issues */
        min-height: auto !important;
    }
    
    .toplist-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    /* FIX: Prevent rank number from overlapping */
    .rank-number {
        top: -12px !important;
        left: 15px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }
    
    /* FIX: Logo size optimization */
    .logo-wrapper {
        width: 100% !important;
        max-width: 200px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }
    
    /* FIX: Info section full width */
    .info {
        width: 100% !important;
    }
    
    .brand-name {
        font-size: 20px !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    /* FIX: Badge positioning on mobile */
    .verified-badge {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }
    
    /* FIX: Rating responsive */
    .rating {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .stars {
        gap: 2px !important;
    }
    
    .star {
        font-size: 16px !important;
    }
    
    .rating-score {
        font-size: 16px !important;
        padding: 3px 10px !important;
    }
    
    .rating-count {
        font-size: 13px !important;
    }
    
    /* FIX: Highlights wrap properly */
    .highlights {
        gap: 6px !important;
    }
    
    .highlight-tag {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
    
    /* FIX: Actions full width with proper spacing */
    .actions {
        width: 100% !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }
    
    .bonus-tag {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    .cta-button {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 30px !important;
        font-size: 14px !important;
    }
    
    /* FIX: Top badges on mobile - prevent overlap with logo */
    .rank-1::after,
    .rank-2::after,
    .rank-3::after {
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 6px 20px !important;
        font-size: 10px !important;
        letter-spacing: 1px !important;
        
        /* FIX: Ensure badge stays above content */
        z-index: 25 !important;
    }
    
    .rank-2::after,
    .rank-3::after {
        padding: 5px 16px !important;
        font-size: 9px !important;
    }
    
    /* FIX: Footer on mobile */
    .lpbxh-footer {
        margin-top: 30px !important;
        padding: 20px 15px !important;
    }
    
    .footer-warning {
        padding: 15px !important;
        font-size: 13px !important;
    }
    
    .footer-text {
        font-size: 12px !important;
    }
}

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 750px !important;
    }
    
    .toplist-content {
        gap: 15px !important;
    }
    
    .logo-wrapper {
        width: 100px !important;
        height: 70px !important;
    }
    
    .brand-name {
        font-size: 20px !important;
    }
    
    .actions {
        gap: 10px !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Improve rendering performance */
.toplist-item,
.rank-number,
.logo-wrapper,
.verified-badge,
.bonus-tag,
.cta-button {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Force GPU acceleration for smooth animations */
.toplist-item:hover,
.bonus-tag:hover,
.cta-button:hover {
    will-change: transform !important;
}