/* Reset cơ bản cho thẻ ul */
#vertical-menu, 
#vertical-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #000000; /* Background: #000000 (đen) */
}

/* Định dạng menu cấp 1 */
#vertical-menu {
    width: 150px; /* Độ rộng: 150px */
}

/* Định dạng các thẻ li */
#vertical-menu li {
    position: relative; /* Dùng relative để làm mốc định vị cho menu con absolute */
}

/* Định dạng các thẻ a (liên kết) */
#vertical-menu a {
    display: block;
    color: #FFF; /* Text màu: #FFF (trắng) */
    text-decoration: none;
    padding: 12px 15px; /* Thêm padding cho dễ nhìn, giống hình */
    border-bottom: 1px solid #FFF; /* Border-bottom: 1px solid #FFF */
}

/* Hiệu ứng khi hover vào thẻ li */
#vertical-menu li:hover > a {
    background-color: darkgray; /* Khi hover chuột qua màu nền chuyển sang: darkgray */
}

/* =========================================
   Định dạng Menu con (Cấp 2, Cấp 3)
   ========================================= */

/* Ẩn menu con ở trạng thái bình thường và định vị trí */
#vertical-menu ul {
    display: none; 
    position: absolute;
    top: 0;
    left: 100%; /* Đẩy menu con sang bên phải, nối tiếp với menu cha */
    width: max-content; /* Chiều rộng menu cấp 2, 3: max-content */
}

/* Menu cấp 3 tự động kế thừa các thuộc tính trên vì dùng selector #vertical-menu ul */

/* Hiển thị menu con khi di chuột vào mục chứa nó */
#vertical-menu li:hover > ul {
    display: block;
}