/* ==========================================================================
   ULTRA-PREMIUM HIGH-END BRAND LOGO BANNER DESIGN SYSTEM V2
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@700;800;900&family=Montserrat:wght@800;900&family=Teko:wght@700;800&display=swap');

.xanhbien-container,
.v2-brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 2px 4px !important;
    user-select: none !important;
    text-decoration: none !important;
    background: transparent !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* ==========================================
   1. 3D EMBLEM ICON
   ========================================== */
.v2-brand-emblem {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #0369a1 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.v2-brand-logo:hover .v2-brand-emblem {
    transform: translateY(-2px) rotate(6deg) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
}

/* ==========================================
   2. BRAND INFO & TAGLINE
   ========================================== */
.v2-brand-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.v2-brand-tagline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(56, 189, 248, 0.12) 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 1px 6px !important;
    border-radius: 50px !important;
    font-family: 'Be Vietnam Pro', 'Montserrat', sans-serif !important;
    font-size: 7.5px !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

[data-theme="dark"] .v2-brand-tagline {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.v2-sparkle {
    font-size: 8px !important;
    color: #38bdf8 !important;
    animation: sparkleSpin 3s linear infinite !important;
    flex-shrink: 0 !important;
}

/* ==========================================
   3. BRAND TITLE METALLIC SHIMMER
   ========================================== */
h1.v2-brand-title,
span.v2-brand-title,
div.v2-brand-title,
.v2-brand-title,
.xanhbien-3d-text {
    font-family: 'Teko', 'Montserrat', 'Segoe UI', sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;

    color: #0284c7 !important; /* Fallback solid color */
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #0369a1 100%) !important;
    background-size: 200% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: brandTextShimmer 4s ease-in-out infinite !important;
    filter: drop-shadow(0 2px 5px rgba(2, 132, 199, 0.2)) !important;
    transition: all 0.3s ease !important;
}

.v2-brand-title.long-title {
    font-size: 16px !important;
    letter-spacing: 0px !important;
}

[data-theme="dark"] h1.v2-brand-title,
[data-theme="dark"] span.v2-brand-title,
[data-theme="dark"] div.v2-brand-title,
[data-theme="dark"] .v2-brand-title,
[data-theme="dark"] .xanhbien-3d-text {
    color: #38bdf8 !important;
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #38bdf8 100%) !important;
    background-size: 200% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 3px 10px rgba(56, 189, 248, 0.4)) !important;
}

.v2-brand-logo:hover .v2-brand-title {
    filter: drop-shadow(0 4px 16px rgba(56, 189, 248, 0.6)) !important;
}

/* Custom Image Logo Style */
.site-logo-img {
    max-height: 42px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* ==========================================
   4. ANIMATIONS & COMPATIBILITY
   ========================================== */
@keyframes brandTextShimmer {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes sparkleSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.25); }
    100% { transform: rotate(360deg) scale(1); }
}

.xanhbien-auth-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}