/* ==========================================================================
   HUB TRUYEN - CENTRALIZED VIP EFFECTS SYSTEM (VIP 0 - VIP 9)
   Single Source of Truth for App, Member, Mod & Admin Layouts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VIP AVATAR CONTAINER & FRAME STYLES
   -------------------------------------------------------------------------- */
.vip-avatar-container {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    overflow: visible;
    border-radius: 50%;
}

.vip-avatar-frame {
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vip-avatar-frame img,
.vip-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   2. VIP FRAME TIERS (VIP 0 - VIP 9)
   -------------------------------------------------------------------------- */
/* VIP 0: Phàm Nhân (Mặc định) */
.vip-frame-0 {
    border: 1.5px solid rgba(160, 174, 192, 0.4);
}

/* VIP 1: Tân Thần (Bronze) */
.vip-frame-1 {
    border: 2px solid #cd7f32;
    box-shadow: 0 0 6px rgba(205, 127, 50, 0.4);
}
.vip-frame-1:hover {
    transform: scale(1.05);
}

/* VIP 2: Độc Giả Sơ Cấp (Silver) */
.vip-frame-2 {
    border: 2px solid #e2e8f0;
    box-shadow: 0 0 10px rgba(226, 232, 240, 0.5);
    animation: vip-silver-pulse 4s ease-in-out infinite;
}

/* VIP 3: Độc Giả Trung Cấp (Gold) */
.vip-frame-3 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #b45309);
    padding: 2.5px;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* VIP 4: Độc Giả Cao Cấp (Platinum / Pink Gem) */
.vip-frame-4 {
    background: linear-gradient(135deg, #f472b6, #ec4899, #be185d);
    padding: 2.5px;
    animation: vip-pulse-pink 2s ease-in-out infinite;
}

/* VIP 5: Độc Giả Kim Cương (Diamond Cyan) */
.vip-frame-5 {
    background: linear-gradient(135deg, #38bdf8, #06b6d4, #2563eb);
    padding: 2.5px;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.7);
    position: relative;
}

/* VIP 6: Tinh Anh Tinh Không (Galaxy Purple) */
.vip-frame-6 {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    padding: 3px;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.8);
    animation: vip-galaxy-aura 3.5s ease-in-out infinite;
}

/* VIP 7: Tôn Giả Hỏa Long (Fire Blaze) */
.vip-frame-7 {
    background: linear-gradient(135deg, #f97316, #ef4444, #eab308);
    padding: 3px;
    animation: vip-fire-pulse 1.8s ease-in-out infinite;
}

/* VIP 8: Đế Tôn Cầu Vồng (Imperial Rainbow) */
.vip-frame-8 {
    background: linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #06b6d4);
    background-size: 200% 200%;
    padding: 3px;
    animation: vip-shimmer 3s ease infinite, vip-rainbow-aura 2.5s ease-in-out infinite;
}

/* VIP 9: Thượng Đế Vô Song (Mythic Godlike) */
.vip-frame-9 {
    background: linear-gradient(135deg, #e11d48, #f59e0b, #8b5cf6, #3b82f6, #10b981);
    background-size: 300% 300%;
    padding: 3.5px;
    animation: vip-shimmer 2.5s ease infinite, vip-pulse-aura 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3. VIP TEXT NAME STYLES & GRADIENTS (VIP 0 - VIP 9)
   -------------------------------------------------------------------------- */
.vip-name {
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease;
}

/* VIP 0: Phàm Nhân */
.vip-name-0 {
    color: inherit;
}

/* VIP 1: Tân Thần (Bronze) */
.vip-name-1 {
    background: linear-gradient(135deg, #f6b76e 0%, #cd7f32 50%, #b76e28 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 4px rgba(205, 127, 50, 0.4));
}

/* VIP 2: Độc Giả Sơ Cấp (Silver) */
.vip-name-2 {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 5px rgba(226, 232, 240, 0.45));
}

/* VIP 3: Độc Giả Trung Cấp (Gold) */
.vip-name-3 {
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}

/* VIP 4: Độc Giả Cao Cấp (Platinum / Pink Gem) */
.vip-name-4 {
    background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 50%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.55));
}

/* VIP 5: Độc Giả Kim Cương (Diamond Cyan) */
.vip-name-5 {
    background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 50%, #0284c7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}

/* VIP 6: Tinh Anh Tinh Không (Galaxy Purple) */
.vip-name-6 {
    background: linear-gradient(135deg, #d8b4fe 0%, #a855f7 50%, #6366f1 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: vip-text-shift 3s ease infinite;
    filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.6));
}

/* VIP 7: Tôn Giả Hỏa Long (Fire Blaze) */
.vip-name-7 {
    background: linear-gradient(135deg, #fed7aa 0%, #f97316 40%, #ef4444 80%, #b91c1c 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: vip-text-shift 2.5s ease infinite;
    filter: drop-shadow(0 0 7px rgba(249, 115, 22, 0.65));
}

/* VIP 8: Đế Tôn Cầu Vồng (Imperial Rainbow) */
.vip-name-8 {
    background: linear-gradient(135deg, #fbbf24, #f43f5e, #a855f7, #06b6d4, #10b981) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: vip-rainbow-text 4s linear infinite;
    filter: drop-shadow(0 0 8px rgba(244, 63, 94, 0.6));
}

/* VIP 9: Thượng Đế Vô Song (Mythic Godlike) */
.vip-name-9 {
    background: linear-gradient(135deg, #ffffff, #fbbf24, #ec4899, #8b5cf6, #3b82f6) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: vip-rainbow-text 3s linear infinite;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.75)) drop-shadow(0 0 12px rgba(139, 92, 246, 0.55));
}

/* --------------------------------------------------------------------------
   4. VIP KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes vip-silver-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(226, 232, 240, 0.4); }
    50% { box-shadow: 0 0 14px rgba(226, 232, 240, 0.8); }
}

@keyframes vip-pulse-pink {
    0%, 100% { box-shadow: 0 0 8px rgba(236, 72, 153, 0.5); }
    50% { box-shadow: 0 0 16px rgba(236, 72, 153, 0.9), 0 0 24px rgba(244, 63, 94, 0.5); }
}

@keyframes vip-galaxy-aura {
    0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.6), 0 0 20px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 18px rgba(168, 85, 247, 0.9), 0 0 28px rgba(236, 72, 153, 0.7); }
}

@keyframes vip-fire-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.6), 0 0 16px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 18px rgba(249, 115, 22, 0.95), 0 0 30px rgba(234, 179, 8, 0.8); }
}

@keyframes vip-rainbow-aura {
    0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.6), 0 0 20px rgba(139, 92, 246, 0.5); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 0 30px rgba(6, 182, 212, 0.8); }
}

@keyframes vip-pulse-aura {
    0%, 100% { box-shadow: 0 0 10px rgba(225, 29, 72, 0.7), 0 0 22px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 22px rgba(225, 29, 72, 1), 0 0 36px rgba(139, 92, 246, 0.8); }
}

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

@keyframes vip-text-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes vip-rainbow-text {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   FACEBOOK STYLE ONLINE / OFFLINE STATUS DOT
   -------------------------------------------------------------------------- */
.vip-avatar-container .fb-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    border-radius: 50%;
    border-style: solid;
    border-color: #ffffff;
    box-sizing: border-box;
    z-index: 4;
    pointer-events: auto;
    display: block;
}

[data-bs-theme="dark"] .vip-avatar-container .fb-status-dot,
body.dark-mode .vip-avatar-container .fb-status-dot,
.dark-theme .vip-avatar-container .fb-status-dot {
    border-color: #141a29;
}

.vip-avatar-container .fb-status-dot.online {
    background-color: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.75);
}

.vip-avatar-container .fb-status-dot.offline {
    background-color: #64748b;
}