/* Header Layout Redesign - Background Full Width */

/* Reset body và html để loại bỏ margin/padding mặc định */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Header Full Width Container */
.header-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Enhanced Header Container với Video Background */
.g_header {
    height: 100vh;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* Enhanced Video Container - Works on all devices */
.m_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Enhanced Responsive Video Background */
.hero-video-fullwidth {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    object-fit: cover;
    object-position: center center;
    filter: contrast(1.1) saturate(1.1);
    transition: opacity 0.5s ease;
    will-change: transform;
    /* Enhanced mobile optimization */
    -webkit-transform: translateX(-50%) translateY(-50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Video Loading Placeholder */
.video-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.video-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-top: 3px solid #FFD700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Navigation Container - nằm trên cùng và đè lên background */
.g_nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 75px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 2px solid #FFD700;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Navigation Content Container */
.g_nav .g_cont {
    width: 100%;
    max-width: 1292px;
    margin: 0 auto;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

/* Menu List - nằm giữa */
.m_navList {
    position: relative;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.m_navList .u_navItem {
    display: inline-block;
    margin: 0;
    position: relative;
}

/* Menu Navigation - Bỏ gạch chân hoàn toàn */
.m_navList .u_navItem a,
.m_navList .u_navItem .u_tit {
    font-size: 14px;
    color: white !important;
    font-weight: normal;
    font-family: 'Times New Roman', Times, serif;
    text-decoration: none !important;
    padding: 10px 15px;
    display: block;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    border-radius: 5px;
}

.m_navList .u_navItem.on a,
.m_navList .u_navItem.on .u_tit {
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Logo positioning - nằm dưới menu, bên phải - TO GẤP ĐÔI */
.u_logo {
    position: absolute;
    top: 100px; /* Dưới menu (75px height + 25px margin) */
    right: 50px; /* Bên phải màn hình */
    z-index: 12;
    transition: all 0.3s ease;
}

.u_logo img {
    height: 160px; /* TO GẤP ĐÔI từ 80px thành 160px */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 174, 0, 0.5));
    transition: all 0.3s ease;
}

.u_logo:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 174, 0, 0.8));
}

/* User Authentication Items trong menu */
.m_navList .u_navItem.group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 174, 0, 0.1);
    border-radius: 25px;
    padding: 5px 15px;
    border: 1px solid rgba(255, 174, 0, 0.3);
}

.m_navList .u_navItem.group a {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.m_navList .u_navItem.group a:hover {
    color: #ffae00 !important;
    text-decoration: none !important;
}

/* Main Content Container */
.main-content {
    width: 100%;
    max-width: 1292px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Content overlay trên video */
.g_header .g_cont {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== MOBILE VIDEO RESPONSIVE OPTIMIZATIONS ========== */

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
    .g_header {
        height: 100vh;
    }
    
    .hero-video-fullwidth {
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
    }
    
    .loading-spinner {
        width: 50px;
        height: 50px;
    }
}

/* Tablet - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .g_header {
        height: 90vh;
        min-height: 600px;
    }

    .hero-video-fullwidth {
        /* Ensure perfect video coverage on tablets */
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
    }
    
    .loading-spinner {
        width: 45px;
        height: 45px;
    }
    
    .g_nav {
        display: block;
    }
}

/* Mobile Large - 576px to 767px */
@media (min-width: 576px) and (max-width: 767px) {
    .g_header {
        height: 100vh;
        min-height: 500px;
    }

    /* Enhanced mobile video display - FULL like desktop */
    .hero-video-fullwidth {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
        /* Enhanced mobile performance */
        will-change: transform;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
    }
    
    .g_nav {
        display: none;
    }
}

/* Mobile Standard - 480px to 575px */
@media (min-width: 480px) and (max-width: 575px) {
    .g_header {
        height: 100vh;
        min-height: 450px;
    }

    /* Full video display on standard mobile */
    .hero-video-fullwidth {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
        /* Mobile optimization */
        will-change: transform;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .loading-spinner {
        width: 35px;
        height: 35px;
        border-width: 2px;
    }
    
    .g_nav {
        display: none;
    }
}

/* Mobile Small - 320px to 479px */
@media (max-width: 479px) {
    .g_header {
        height: 100vh;
        min-height: 400px;
    }

    /* Full video display on small mobile */
    .hero-video-fullwidth {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
        /* Enhanced small mobile performance */
        will-change: transform;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .loading-spinner {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }
    
    .g_nav {
        display: none;
    }
}

/* Landscape Mobile Optimizations */
@media (max-width: 767px) and (orientation: landscape) {
    .g_header {
        height: 100vh;
        min-height: 350px;
    }

    /* Perfect landscape video display */
    .hero-video-fullwidth {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
        object-fit: cover;
        object-position: center center;
        filter: brightness(0.7) contrast(1.1) saturate(1.1);
    }
    
    .g_nav {
        display: none;
    }
}

/* Enhanced Video Aspect Ratio Fixes for Mobile */
@media (max-width: 767px) {
    /* Portrait mobile - ensure perfect video coverage */
    @media (orientation: portrait) {
        .hero-video-fullwidth {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            object-fit: cover;
        }
    }

    /* Landscape mobile - ensure perfect video coverage */
    @media (orientation: landscape) {
        .hero-video-fullwidth {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            object-fit: cover;
        }
    }
}

/* Desktop Video Aspect Ratio Fixes */
@media (min-width: 768px) {
    @media (max-aspect-ratio: 16/9) {
        .hero-video-fullwidth {
            height: 100%;
            width: auto;
            min-width: 100%;
        }
    }

    @media (min-aspect-ratio: 16/9) {
        .hero-video-fullwidth {
            width: 100%;
            height: auto;
            min-height: 100%;
        }
    }

    /* Ultra-wide screens */
    @media (min-aspect-ratio: 21/9) {
        .hero-video-fullwidth {
            width: 100%;
            height: auto;
            min-height: 100%;
        }
    }
}

/* Enhanced Performance optimizations for mobile */
@media (max-width: 767px) {
    .hero-video-fullwidth {
        /* GPU acceleration for smooth video */
        will-change: transform;
        transform: translateZ(0) translateX(-50%) translateY(-50%);
        -webkit-transform: translateZ(0) translateX(-50%) translateY(-50%);
        /* Better rendering on mobile */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        perspective: 1000px;
        /* Optimize for mobile browsers */
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
}

/* iOS Safari Specific Optimizations */
@supports (-webkit-touch-callout: none) {
    .g_header {
        height: -webkit-fill-available;
    }
    
    .hero-video-fullwidth {
        /* iOS-specific video optimizations */
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000px;
        /* Fix iOS video rendering issues */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
}

/* Android Chrome Specific Optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .hero-video-fullwidth {
        /* Android-specific optimizations */
        backface-visibility: hidden;
        perspective: 1000px;
        transform-style: preserve-3d;
    }
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
    /* Optimize video for touch devices */
    .hero-video-fullwidth {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
    }
}

/* hide g_nav in mobile */
@media (max-width: 768px) {
    .g_nav {
        display: none;
    }
}

/* Animation cho menu items */
@keyframes menuItemFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.m_navList .u_navItem:hover {
    animation: menuItemFloat 0.6s ease-in-out;
}

/* Glow effect cho navigation bar */
@keyframes navGlow {
    0%, 100% {
        border-bottom-color: #ffae00;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    50% {
        border-bottom-color: #ffc107;
        box-shadow: 0 2px 15px rgba(255, 174, 0, 0.5);
    }
}

.g_nav {
    animation: navGlow 3s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .g_nav .g_cont {
        padding: 0 40px;
    }
    
    .u_logo {
        right: 40px;
    }
    
    .u_logo img {
        height: 140px; /* Điều chỉnh cho responsive nhưng vẫn lớn hơn ban đầu */
    }
}

/* Responsive adjustments với text-decoration fix */
@media (max-width: 1200px) {
    .m_navList {
        gap: 15px;
    }
    
    .m_navList .u_navItem a,
    .m_navList .u_navItem .u_tit {
        font-size: 14px;
        padding: 8px 12px;
        text-decoration: none !important;
    }
    
    .u_logo {
        top: 90px;
        right: 30px;
    }
    
    .u_logo img {
        height: 120px;
    }
}

@media (max-width: 768px) {
    .g_nav {
        height: 60px;
    }
    
    .g_nav .g_cont {
        padding: 0 15px;
    }
    
    .m_navList {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .m_navList .u_navItem a,
    .m_navList .u_navItem .u_tit {
        font-size: 12px;
        padding: 6px 10px;
        text-decoration: none !important;
    }
    
    .u_logo {
        top: 70px;
        right: 15px;
    }
    
    .u_logo img {
        height: 100px;
    }
    
    .main-content {
        padding: 0 15px;
    }
}