/* --- 1. RESET & CẤU HÌNH CHUNG --- */
header, nav, .navbar, .navbar * {
    box-sizing: border-box !important;
}

/* Màu chủ đạo MTMATH cho Menu mức 0 */
.navbar-inverse .navbar-nav > li > a {
    color: chartreuse !important;
    font-weight: bold;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #000 !important;
}

/* Cấu trúc menu đa cấp */
.dropdown-submenu {
    position: relative;
}

/* Định dạng chung cho bảng Menu con (Dropdown) */
.dropdown-menu {
    background-color: #222 !important;
    border: 1px solid #444 !important;
    padding: 0;
    margin: 0;
}

    .dropdown-menu > li > a {
        color: #fff !important;
        padding: 10px 20px;
        display: block;
        transition: 0.2s;
    }

        .dropdown-menu > li > a:hover {
            background-color: #333 !important;
            color: chartreuse !important;
        }

/* --- 2. GIAO DIỆN DESKTOP (PC) --- */
@media (min-width: 768px) {
    /* Menu mức 1, 2, 3... tự dãn theo chữ, không khống chế width */
    .dropdown-menu {
        width: auto !important;
        min-width: 200px;
        max-width: none !important; /* Bỏ khống chế để tên bài học hiển thị đầy đủ */
        white-space: nowrap; /* Giữ chữ trên 1 dòng cho đẹp */
    }

    /* Hiệu ứng sổ ngang sang bên phải */
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none;
    }

    /* Hiện menu khi rê chuột */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

}

/* --- 3. GIAO DIỆN MOBILE (SMARTPHONE) --- */
@media (max-width: 767px) {
    /* Menu mức 0: Chuyển thành hàng dọc (Stack) */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }

        .navbar-nav > li {
            width: 100% !important;
            border-bottom: 1px solid #333;
        }

            .navbar-nav > li > a {
                padding: 15px 20px !important;
                text-align: left !important;
            }

    /* Menu con: Ép hiển thị kiểu Accordion (đẩy nội dung xuống) */
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        display: none; /* Điều khiển đóng mở bằng class .open qua JS */
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #1a1a1a !important;
        padding-left: 20px !important; /* Thụt lề để phân cấp */
        white-space: normal !important; /* Cho phép xuống dòng nếu tên bài quá dài trên mobile */
    }

    /* Mở menu khi có class .open */
    .dropdown-submenu.open > .dropdown-menu {
        display: block !important;
    }

    /* Icon mũi tên và hiệu ứng xoay */
    .dropdown-submenu > a:after {
        content: "\25BC" !important;
        float: right;
        font-size: 10px;
        margin-top: 5px;
        transition: transform 0.3s;
    }

    .dropdown-submenu.open > a:after {
        transform: rotate(180deg);
    }

    /* Xử lý Header/Logo không bị vỡ */
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
    }
}