/* Thiết lập chung cho menu chính */
#vertical-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 150px; /* Độ rộng: 150px theo yêu cầu */
}

#vertical-menu li {
    position: relative; /* Làm gốc định vị cho menu con */
    background-color: #000000; /* Background: đen */
    border-bottom: 1px solid #FFF; /* Border-bottom theo yêu cầu */
}

#vertical-menu a {
    display: block;
    text-decoration: none;
    color: #FFF; /* Text màu: trắng */
    padding: 10px 15px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* Hiệu ứng Hover */
#vertical-menu li:hover > a {
    background-color: darkgray; /* Đổi màu nền khi hover */
}

/* --- XỬ LÝ MENU CON (CẤP 2 & 3) --- */

/* Ẩn menu con mặc định */
#vertical-menu .submenu-l2, 
#vertical-menu .submenu-l3 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; /* Đẩy sang bên phải của menu cha */
    width: max-content; /* Chiều rộng theo nội dung */
}

/* Hiện menu con khi hover vào mục cha tương ứng */
#vertical-menu li:hover > .submenu-l2,
#vertical-menu li:hover > .submenu-l3 {
    display: block;
}

/* Menu cấp 3 kế thừa lại thuộc tính của cấp 2 (đã xử lý ở trên) */