/* CSS DÙNG CHUNG CHO TOÀN BỘ HỆ SINH THÁI */
:root { 
    --primary: #4a90e2; --primary-hover: #357abd; --bg: #f8fafc; --text: #334155; --border: #cbd5e1; 
    --success: #22c55e; --success-hover: #16a34a; --warning: #f59e0b; --warning-hover: #d97706; 
    --info: #0ea5e9; --info-hover: #0284c7; 
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: var(--bg); color: var(--text); line-height: 1.6; }

/* TOP BANNER */
.top-ad { width: 100%; height: 90px; background: #e2e8f0; display: flex; justify-content: center; align-items: center; color: #94a3b8; font-size: 14px; border-bottom: 1px solid var(--border); }

/* HEADER & MEGA MENU */
header { background: #fff; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; height: 65px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); position: relative; z-index: 100; }
.logo { font-size: 26px; font-weight: 800; color: #1e293b; text-decoration: none; display: flex; align-items: center;}
.logo span { color: var(--primary); margin: 0 3px; }
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links > a { text-decoration: none; color: #475569; font-weight: 600; font-size: 15px; transition: 0.2s; }
.nav-links > a:hover { color: var(--primary); }

/* DROPDOWN (CHUẨN 5 CỘT - ĐÃ TỐI ƯU) */
.dropdown { position: relative; height: 65px; display: flex; align-items: center; cursor: pointer; }
.dropdown > span { color: #475569; font-weight: 600; font-size: 15px; transition: 0.2s;}
.dropdown:hover > span { color: var(--primary); }

/* Hiệu ứng hiển thị menu */
.dropdown:hover .mega-menu { 
    display: grid; 
    opacity: 1; 
    visibility: visible; 
    transform: translate(-50%, 0); 
}

.mega-menu { 
    display: none; opacity: 0; visibility: hidden; 
    transform: translate(-50%, 10px); /* Dùng transform thay vì translate để tương thích 100% */
    transition: all 0.2s ease; 
    position: absolute; top: 65px; left: 50%; 
    width: 980px; /* Độ rộng cố định cho 5 cột */
    background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
    border-radius: 12px; padding: 25px; 
    grid-template-columns: repeat(5, 1fr); /* Chia đều 5 cột */
    gap: 20px; border: 1px solid #e2e8f0; 
    z-index: 9999; /* Đảm bảo luôn nổi lên trên cùng */
}

.mega-col h4 { font-size: 12px; color: #94a3b8; text-transform: uppercase; margin-bottom: 15px; font-weight: 700; letter-spacing: 0.5px; }
.mega-col a { 
    display: flex; align-items: center; gap: 10px; 
    text-decoration: none; color: #334155; padding: 8px 0; font-size: 14px; font-weight: 500; transition: 0.2s; 
}
.mega-col a:hover { color: var(--primary); transform: translateX(3px); }
.mega-col a.coming-soon { color: #94a3b8; cursor: not-allowed; }
.mega-col a.coming-soon:hover { transform: none; color: #94a3b8; }
.mega-col a .icon { font-size: 18px; width: 24px; text-align: center; }

/* NÚT ĐĂNG NHẬP */
.btn-login { background: var(--primary); color: #fff !important; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: 0.3s; }
.btn-login:hover { background: var(--primary-hover); }

/* FOOTER */
footer { text-align: center; padding: 30px; margin-top: 50px; background: #fff; border-top: 1px solid var(--border); color: #64748b; font-size: 14px; }
footer a { color: var(--primary); text-decoration: none; font-weight: 600; margin: 0 10px; }

/* MOBILE RESPONSIVE */
@media (max-width: 1024px) {
    .mega-menu { 
        width: 90vw; 
        transform: translate(-50%, 10px);
        grid-template-columns: repeat(2, 1fr); /* Trên mobile chia 2 cột */
    }
    .dropdown:hover .mega-menu {
        transform: translate(-50%, 0);
    }
    .nav-links { display: none; } /* Tạm ẩn menu trên mobile */
}