/* Google Translate Widget - Hide default UI */
.goog-te-banner-frame,
.goog-te-gadget-icon,
.goog-te-menu-value,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

body { 
    top: 0 !important; 
}

#google_translate_element { 
    display: none !important; 
}

/* Khi Google chèn iframe, tránh nhảy layout */
iframe[id^=":"] { 
    display: none !important; 
}

/* Modern Language Switcher Dropdown */
.language-switcher {
    position: relative;
    display: inline-block;
    margin-left: 15px;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    min-width: 150px;
}

.custom-select {
    position: relative;
    font-family: 'Be Vietnam Pro', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
}

.select-selected {
    background: #ffffff;
    color: #333333;
    padding: 10px 35px 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-height: 20px;
}

.select-selected:hover {
    border-color: #2196F3;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.15);
    transform: translateY(-1px);
}

.select-selected:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: #666666 transparent transparent transparent;
    transform: translateY(-25%);
    transition: transform 0.3s ease;
}

.select-arrow-active .select-selected:after {
    border-color: transparent transparent #666666 transparent;
    transform: translateY(-75%) rotate(180deg);
}

.select-items {
    position: absolute;
    background: #ffffff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    margin-top: -1px;
    /* Remove scrollbar for modern look */
    max-height: none;
    overflow: visible;
}

.select-hide {
    display: none;
}

.lang-option {
    color: #333333;
    padding: 12px 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f5f5f5;
    font-weight: 400;
}

.lang-option:last-child {
    border-bottom: none;
    border-radius: 0 0 11px 11px;
}

.lang-option:hover {
    background: #f8f9ff;
    color: #2196F3;
    transform: translateX(3px);
}

.lang-option.same-as-selected {
    background-color: #2196F3;
    color: #000000;
    font-weight: 600;
}

.select-items div span {
    margin-left: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .custom-select {
        min-width: 140px;
        height: 38px;
    }
    
    .select-selected {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .flag-img {
        width: 20px;
        height: 15px;
        object-fit: cover;
        border-radius: 3px;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .language-switcher {
        margin-left: 10px;
    }
    
    .select-items div {
        padding: 8px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .custom-select {
        min-width: 120px;
        height: 34px;
    }
    
    .select-selected {
        padding: 4px 10px;
        font-size: 12px;
    }
    
    .flag-img {
        width: 16px;
        height: 12px;
        margin-right: 5px;
    }
    
    .select-items div {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Flag images styling */
.flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Animation for smooth transitions */
@keyframes languageSwitch {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.language-select.switching {
    animation: languageSwitch 0.3s ease-in-out;
}