body {
    font-family: 'Times New Roman', Times, serif; /* Cài font có chân giống hình */
    padding: 20px;
}

/* Xóa định dạng mặc định của danh sách */
#horizontal-menu,
#horizontal-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: blue; /* Nền màu xanh dương */
}

/* =========================================
   1. ĐỊNH DẠNG MENU CHÍNH (CẤP 1 - NẰM NGANG)
   ========================================= */
#horizontal-menu {
    display: flex; /* Dàn các thẻ li thành hàng ngang */
}

#horizontal-menu > li {
    border-right: 1px solid white; /* Vạch phân cách màu trắng */
    position: relative; /* Tạo điểm tựa để menu con xổ xuống đúng chỗ */
}

#horizontal-menu > li:last-child {
    border-right: none; /* Bỏ vạch trắng ở mục cuối cùng */
}

#horizontal-menu a {
    display: block;
    color: white; /* Chữ trắng */
    text-decoration: none;
    padding: 10px 15px;
    font-size: 15px;
    text-align: center;
}

/* Hiệu ứng Hover đổi màu nền và màu chữ */
#horizontal-menu li:hover > a {
    background-color: oldlace; /* Chuyển nền sang màu vàng nhạt */
    color: black; /* Đổi chữ sang màu đen */
}

/* =========================================
   2. ĐỊNH DẠNG MENU CON (CẤP 2 & CẤP 3)
   ========================================= */
#horizontal-menu ul.submenu {
    display: none; /* Ẩn menu con đi */
    position: absolute; /* Định vị trí tự do so với phần tử cha */
    width: max-content; /* Độ rộng tự động ôm khít chữ */
    flex-direction: column; /* Các thẻ li con nằm dọc */
    z-index: 100; /* Nổi lên trên cùng */
}

#horizontal-menu ul.submenu li {
    border-top: 1px solid white; /* Vạch kẻ ngang chia các mục con */
    position: relative; /* Tạo điểm tựa cho menu cấp 3 */
}

#horizontal-menu ul.submenu li:first-child {
    border-top: none; /* Mục đầu tiên không cần vạch trên */
}

/* Vị trí Menu cấp 2: Rơi xuống dưới menu cha */
#horizontal-menu > li > ul.submenu {
    top: 100%;
    left: 0;
}

/* Vị trí Menu cấp 3: Đẩy sang bên phải menu cấp 2 */
#horizontal-menu ul.submenu ul.submenu {
    top: 0; /* Nằm ngang hàng với mục cha đang trỏ */
    left: 100%; /* Sang hẳn lề phải */
    border-left: 1px solid white; /* Vạch phân cách dọc */
}

/* Hiển thị menu con khi hover chuột vào phần tử chứa nó */
#horizontal-menu li:hover > ul.submenu {
    display: flex;
}