/* ========================================
   LOGO OPTIMIZATION
   Logo rõ hơn, to hơn, cắt viền trắng
   ======================================== */

/* ============ HEADER LOGO ============ */

.nav-logo img {
    height: 105px !important;          /* Tăng từ 70px lên 105px (1.5x = 70*1.5) */
    width: auto;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) 
            contrast(1.15) 
            brightness(1.1);           /* Tăng contrast và brightness */
    transition: all 0.3s ease;
    /* Cắt viền trắng bằng clip-path */
    clip-path: inset(12px 18px 12px 18px); /* top, right, bottom, left - tăng theo tỷ lệ */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.nav-logo img:hover {
    filter: drop-shadow(0 4px 12px rgba(79, 195, 247, 0.4)) 
            contrast(1.15) 
            brightness(1.1);
    transform: scale(1.05);
}

/* ============ FOOTER LOGO ============ */

.footer-logo img {
    height: 90px !important;           /* Tăng từ 60px lên 90px (1.5x = 60*1.5) */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3))
            contrast(1.1)
            brightness(1.2);           /* Tăng độ sáng thay vì invert */
    transition: all 0.3s ease;
    /* Cắt viền */
    clip-path: inset(12px 18px 12px 18px);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    display: block;                    /* Đảm bảo hiển thị */
}

.footer-logo img:hover {
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.4))
            contrast(1.15)
            brightness(1.3);
    transform: scale(1.05);
}

/* ============ LOGO WITH GRADIENT GLOW ============ */

/* Thêm hiệu ứng glow gradient cho logo */
.nav-logo {
    position: relative;
}

.nav-logo::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, #4FC3F7, #FF6B6B);
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.3s ease;
    border-radius: 8px;
    z-index: -1;
}

.nav-logo:hover::before {
    opacity: 0.4;
}

/* ============ RESPONSIVE LOGO SIZES ============ */

/* Desktop - Logo lớn nhất */
@media (min-width: 1200px) {
    .nav-logo img {
        height: 112px !important;      /* 75 * 1.5 = 112.5px */
    }
    
    .footer-logo img {
        height: 97px !important;       /* 65 * 1.5 = 97.5px */
    }
}

/* Laptop */
@media (max-width: 1199px) and (min-width: 992px) {
    .nav-logo img {
        height: 105px !important;      /* 70 * 1.5 = 105px */
    }
    
    .footer-logo img {
        height: 90px !important;       /* 60 * 1.5 = 90px */
    }
}

/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
    .nav-logo img {
        height: 97px !important;       /* 65 * 1.5 = 97.5px */
    }
    
    .footer-logo img {
        height: 82px !important;       /* 55 * 1.5 = 82.5px */
    }
}

/* Mobile */
@media (max-width: 767px) {
    .nav-logo img {
        height: 82px !important;       /* 55 * 1.5 = 82.5px */
        clip-path: inset(10px 15px 10px 15px);
    }
    
    .footer-logo img {
        height: 75px !important;       /* 50 * 1.5 = 75px */
        clip-path: inset(10px 15px 10px 15px);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .nav-logo img {
        height: 75px !important;       /* 50 * 1.5 = 75px */
        clip-path: inset(8px 12px 8px 12px);
    }
    
    .footer-logo img {
        height: 67px !important;       /* 45 * 1.5 = 67.5px */
        clip-path: inset(8px 12px 8px 12px);
    }
}

/* ============ LOGO TEXT (WORKFAST) ============ */

.nav-logo span,
.footer-logo span {
    font-size: 24px;                   /* Tăng từ 20px */
    font-weight: 700;
    margin-left: 12px;
    background: linear-gradient(135deg, #4FC3F7 0%, #FF6B6B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.nav-logo:hover span {
    background: linear-gradient(135deg, #FF6B6B 0%, #4FC3F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-logo span {
    background: none;
    -webkit-text-fill-color: white;
    color: white;
}

/* ============ LOGO ANIMATION ON PAGE LOAD ============ */

@keyframes logo-entrance {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    60% {
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.nav-logo {
    animation: logo-entrance 0.8s ease-out;
}

/* ============ LOGO SHARP MODE ============ */

/* Tăng độ sắc nét tối đa */
.nav-logo img,
.footer-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);          /* GPU acceleration */
}

/* ============ LOGO SHADOW VARIANTS ============ */

/* Shadow theo gradient colors */
.nav-logo.shadow-blue img {
    filter: drop-shadow(0 4px 12px rgba(79, 195, 247, 0.5))
            contrast(1.15);
}

.nav-logo.shadow-coral img {
    filter: drop-shadow(0 4px 12px rgba(255, 107, 107, 0.5))
            contrast(1.15);
}

.nav-logo.shadow-both img {
    filter: drop-shadow(0 4px 8px rgba(79, 195, 247, 0.4))
            drop-shadow(0 4px 8px rgba(255, 107, 107, 0.4))
            contrast(1.2);
}

/* ============ LOGO CONTAINER ============ */

.nav-logo a,
.footer-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav-logo a:hover {
    background: rgba(79, 195, 247, 0.05);
    transform: translateX(5px);
}

.footer-logo a:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ============ LOGO QUALITY ENHANCEMENT ============ */

/* Force high quality rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .nav-logo img,
    .footer-logo img {
        image-rendering: -webkit-optimize-contrast;
        filter: contrast(1.15) brightness(1.05) saturate(1.1);
    }
}

/* ============ ACCESSIBILITY ============ */

/* Ensure logo is visible in high contrast mode */
@media (prefers-contrast: high) {
    .nav-logo img {
        filter: contrast(1.3) brightness(1.1);
    }
}

/* ============ PRINT STYLES ============ */

@media print {
    .nav-logo img,
    .footer-logo img {
        filter: none;
        clip-path: none;
        height: 60px !important;
    }
}