/* --- HEADER & NAVIGATION --- */
.main-header {
    position: absolute;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header.is-sticky {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    transition: padding 0.3s ease;
}

.main-header.is-sticky .header-flex { padding: 8px 0; }

.header-left-group { display: flex; align-items: center; }

.logo-wrapper { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    gap: 15px; 
    flex-wrap: wrap; /* Khắc phục vấn đề đè chữ khi thu nhỏ */
}

.logo-img {
    height: 60px; width: auto;
    transition: height 0.3s ease;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.main-header.is-sticky .logo-img { height: 50px; }

.company-info { display: flex; flex-direction: column; gap: 2px; margin-left: 10px; }

.company-name {
    color: var(--text-white);
    font-weight: 700; font-size: 1.05rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.header-contact {
    font-weight: 500; color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem; display: inline-flex;
    margin-top: 4px; align-items: center; gap: 8px;
}

.header-contact i {
    font-size: 0.8rem; color: var(--accent-color);
    animation: phone-shake 3s infinite;
}

@keyframes phone-shake {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(10deg); }
    94% { transform: rotate(-10deg); }
    96% { transform: rotate(10deg); }
    98% { transform: rotate(-10deg); }
}

.header-contact a { color: var(--accent-color); text-decoration: none; font-weight: 700; }

.main-header.is-sticky .company-name { color: var(--primary-color); }
.main-header.is-sticky .header-contact { color: #666; }

/* Navbar & Menus */
.navbar { background: transparent; }
.nav-menu { list-style: none; display: flex; gap: 30px; }

.nav-menu>li>a {
    display: block; padding: 10px 0;
    color: var(--text-white); text-decoration: none;
    font-weight: 500; text-transform: uppercase;
    font-size: 0.85rem; letter-spacing: 0.5px;
    transition: 0.3s;
}

.nav-menu>li.dropdown { position: relative; }
.nav-menu>li>a:hover, .nav-menu>li>a.active { color: var(--accent-color); }
.main-header.is-sticky .nav-menu>li>a { color: var(--text-dark); }

.dropdown-menu {
    position: absolute; top: 100%; left: 0;
    background: #fff; min-width: 240px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 0; visibility: hidden;
    transform: translateY(15px); transition: all 0.3s ease;
    list-style: none; padding: 10px 0;
    border-top: 3px solid var(--accent-color);
    border-radius: 0 0 8px 8px;
}

.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-menu li a {
    padding: 12px 25px; display: block;
    color: #444; text-decoration: none;
    font-size: 0.9rem; transition: 0.2s;
}

.dropdown-menu li a:hover {
    background: #f8f9fa; color: var(--primary-color);
    padding-left: 30px;
}

/* Mobile Header Adjustment */
@media (max-width: 768px) {
    .navbar { display: none; }
    .header-flex { padding: 10px 0; }
    .company-name { font-size: 0.9rem; } /* Thu nhỏ font chữ để tránh đè */
}