/* --- CẤU TRÚC KHUNG CHÍNH --- */
.VerticalMenuControl {
    margin-bottom: 10px;
    padding: 0;
    background: #016d3e !important;
    border-radius: 5px;
    width: 100%;
}

.VerticalMenuControl ul.MenuList {
    list-style: none;
    margin: 0;
    padding: 10px 15px 20px 1px;
    background-image: url(https://storage-vnportal.vnpt.vn/cto-chinhquyen/5533/AnhBia/bg-trongdong-menu.png);
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    border: 1px solid #fff;
    border-radius: 5px;
}

/* --- CÁC MỤC CẤP 1 (TOP) --- */
.VerticalMenuControl .MenuList li.top {
    background: url(images/arrow3.png) no-repeat 10px 15px; /* Icon mũi tên */
    margin: 1px 0;
    padding: 8px 10px 5px 10px;
    position: relative;
    border-bottom: 1px dashed #CFD8DC; /* Gạch chân mờ */
}

/* Bỏ gạch chân ở mục cuối cùng */
.VerticalMenuControl .MenuList li.top:last-child {
    border: none;
}

/* Hiệu ứng khi di chuột vào mục cấp 1 */
.VerticalMenuControl .MenuList li.top:hover {
    background-color: #005a32; /* Màu xanh đậm hơn khi hover */
    width: 100%;
    cursor: pointer;
}

/* Link của mục cấp 1 */
.VerticalMenuControl .MenuList .top > a.sublink {
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    display: inline-block;
    padding-left: 1px; /* Né icon mũi tên */
    width: 85%; /* Chừa chỗ cho icon mở rộng nếu có */
}

/* --- XỬ LÝ MENU CON (DROPDOWN & SECOND) --- */
/* Gộp chung style cho cả .dropdown và .second để đồng bộ giao diện */
.VerticalMenuControl .MenuList .top:hover .dropdown,
.VerticalMenuControl .MenuList .top:hover .second {
    display: block !important;
    background: #016d3e; /* MÀU XANH CHỦ ĐẠO */
    border-left: 1px dashed #d0c031; /* Viền vàng nét đứt */
    position: absolute;
    left: 100%; /* Đẩy sang bên phải */
    top: 0;
    min-width: 250px;
    z-index: 50;
    padding: 0;
    margin-right: 1px;
}

/* Ẩn menu con mặc định */
.VerticalMenuControl .MenuList .dropdown,
.VerticalMenuControl .MenuList .second {
    display: none;
}

/* --- CÁC MỤC CẤP 2 (SUB ITEMS) --- */
.VerticalMenuControl .MenuList .dropdown .sub,
.VerticalMenuControl .MenuList .second .sub {
    display: block;
    background: url(images/arrow3.png) no-repeat 10px 15px;
    margin: 0;
    padding: 8px 10px 8px 10px;
    position: relative;
    border-bottom: 1px dashed #CFD8DC; /* Gạch chân mờ cho mục con */
    list-style: none;
}

/* Bỏ gạch chân mục con cuối cùng */
.VerticalMenuControl .MenuList .dropdown .sub:last-child,
.VerticalMenuControl .MenuList .second .sub:last-child {
    border-bottom: none;
}

/* Link bên trong menu con */
.VerticalMenuControl .MenuList .dropdown .sub a.sublink,
.VerticalMenuControl .MenuList .second .sub a.sublink {
    color: #ffffff !important; /* Bắt buộc màu trắng */
    font-size: 14px;
    font-weight: normal; /* Chữ thường cho menu con */
    text-decoration: none;
    padding-left: 1px;
    display: block;
}

/* Hiệu ứng Hover vào mục con */
.VerticalMenuControl .MenuList .dropdown .sub:hover,
.VerticalMenuControl .MenuList .second .sub:hover {
    background-color: #005a32;
}

.VerticalMenuControl .MenuList .dropdown .sub:hover a,
.VerticalMenuControl .MenuList .second .sub:hover a {
    color: #ffffff;
}

/* --- CÁC THÀNH PHẦN KHÁC (ICON, TOGGLE) --- */
.VerticalMenuControl li span.toggle {
    display: inline-block;
    white-space: nowrap;
}

/* Icon mũi tên chỉ sang phải (FontAwesome) cho mục có menu con */
.VerticalMenuControl a.sublink.has-sub::after {
    content: "\f105"; /* Mã icon FontAwesome */
    position: absolute;
    right: 5px;
    font-family: "Font Awesome 5 Pro", "FontAwesome"; /* Fallback font */
    font-weight: normal;
    font-size: 15px;
    color: #fff;
}

/* --- RESPONSIVE (MOBILE/TABLET) --- */
@media only screen and (max-width: 1023px) {
    div.VerticalMenuControl {
        padding: 0 10px !important;
        margin-bottom: 10px;
        border: none;
        background: #fff !important; /* Nền trắng trên mobile */
        display: block;
    }

    div.VerticalMenuControl .MenuList {
        background: none;
        border: none;
        padding: 0;
    }

    div.VerticalMenuControl .MenuList .top > a.sublink {
        color: #fff; /* Chữ đen trên nền trắng mobile */
        line-height: 35px !important;
        padding-top: 0 !important;
    }
    
    /* Reset hiển thị menu con trên mobile để không bị bay ra ngoài */
    .VerticalMenuControl .MenuList .top:hover .dropdown,
    .VerticalMenuControl .MenuList .top:hover .second {
        position: relative;
        left: 0;
        width: 100%;
        border-left: none;
        background: #fff; /* Hoặc màu khác tùy thiết kế mobile của bạn */
    }
    
    /* Trên mobile link con có thể cần màu đen lại */
    .VerticalMenuControl .MenuList .dropdown .sub a.sublink, 
    .VerticalMenuControl .MenuList .second .sub a.sublink {
        color: #fff !important;
    }
}

/* --- RESPONSIVE CHO MOBILE & TABLET (Dưới 992px) --- */
@media only screen and (max-width: 991px) {

    /* 1. XỬ LÝ BỐ CỤC: Chuyển từ "Bay ngang" sang "Xếp chồng" */
    .VerticalMenuControl .MenuList .top > .dropdown,
    .VerticalMenuControl .MenuList .sub > .dropdown {
        position: relative !important; /* Nằm ngay dưới mục cha */
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        border: none !important; /* Bỏ viền bao ngoài để liền mạch */
        padding: 0 !important;
        background: #016d3e !important; /* GIỮ NGUYÊN MÀU NỀN XANH */
        box-shadow: none !important;
        z-index: 1;
    }

    /* 2. GIỮ NGUYÊN MÀU SẮC & FONT CHỮ */
    .VerticalMenuControl ul li,
    .VerticalMenuControl ul li.top,
    .VerticalMenuControl .MenuList .sub,
    .VerticalMenuControl .MenuList .sub .sub {
        background-color: #016d3e !important; /* Tất cả các cấp đều màu xanh này */
        border: none !important;
        width: 100%;
    }

    /* Giữ nguyên đường kẻ nét đứt trắng phân cách các mục */
    .VerticalMenuControl ul li a {
        border-top: 1px dashed #fff !important; /* Giữ nguyên style desktop */
        color: #fff !important; /* Chữ luôn màu trắng */
        font-weight: normal;    /* Hoặc bold tùy desktop của bạn */
    }

    /* Bỏ đường kẻ thừa ở mục đầu tiên của menu con */
    .VerticalMenuControl .MenuList .dropdown > li:first-child > a {
        border-top: 1px dashed #fff !important;
    }

    /* 3. PHÂN CẤP BẰNG KHOẢNG CÁCH (Thay vì đổi màu) */
    
    /* Cấp 1: Giữ nguyên */
    .VerticalMenuControl ul li.top > a {
        padding-left: 10px !important; /* Padding chuẩn desktop */
    }

    /* Cấp 2 (Menu con): Thụt vào trong */
    .VerticalMenuControl .MenuList .sub > a,
    .VerticalMenuControl .MenuList .dropdown a.sublink {
        padding-left: 30px !important; /* Thụt vào 30px để biết là con */
        background-color: transparent !important; /* Để lộ màu xanh nền của thẻ li */
    }

    /* Cấp 3 (Menu cháu - nếu có): Thụt sâu hơn nữa */
    .VerticalMenuControl .MenuList .sub .sub > a {
        padding-left: 50px !important; /* Thụt vào 50px */
    }

    /* 4. ICON & HÌNH ẢNH NỀN */
    /* Đảm bảo icon mũi tên hoặc chấm tròn vẫn hiển thị */
    .VerticalMenuControl ul li a.sublink,
    .VerticalMenuControl ul li a.sublink.has-sub,
    .VerticalMenuControl ul li a.title-cat {
        background-position: 10px center !important; /* Căn chỉnh lại icon nếu cần */
    }
    
    /* 5. Tăng chiều cao dòng một chút để dễ bấm trên điện thoại */
    .VerticalMenuControl ul li a {
        line-height: 35px !important; /* Cao hơn chút so với 25px của desktop */
    }
}