/* =======================================================
   1. PHẦN CHUNG (Dùng cho cả 3 bài)
   ======================================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: Arial, sans-serif; 
}

ul { list-style: none; }

/* Định dạng thẻ A chung để có diện tích click lớn */
.main-menu a, .submenu a { 
    text-decoration: none; 
    color: white; 
    display: block; 
    padding: 12px 20px; 
    transition: 0.3s;
}

/* Hiệu ứng Hover màu Oldlace huyền thoại của tuần 6 */
.main-menu a:hover, .submenu a:hover { 
    background-color: oldlace; 
    color: blue; 
}

/* Container bao quanh mỗi bài tập */
.bai1-container, .bai2-container, .bai3-container {
    padding: 20px;
}

.badge {
    background-color: green;
    color: white;
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}

/* =======================================================
   2. BÀI 1 & BÀI 3: MENU NGANG
   ======================================================= */
.bai1-container .main-menu, 
.bai3-container .main-menu {
    display: flex; /* Dàn hàng ngang */
    background-color: blue;
    border: 1px solid white;
    width: fit-content; /* Gói gọn theo nội dung */
}

/* Đường kẻ phân cách dọc cho menu ngang */
.bai1-container .main-menu > li, 
.bai3-container .main-menu > li { 
    border-right: 1px solid white; 
}

/* =======================================================
   3. BÀI 2: MENU DỌC (Dàn hàng đứng)
   ======================================================= */
.bai2-container .main-menu {
    width: 250px; /* Độ rộng cố định cho menu dọc */
    background-color: blue;
    border: 1px solid white;
}

/* Đường kẻ phân cách ngang cho menu dọc */
.bai2-container .main-menu li { 
    border-bottom: 1px solid white; 
}

/* =======================================================
   4. XỬ LÝ MENU ĐA CẤP (Dùng cho Bài 2 & Bài 3)
   ======================================================= */
.has-dropdown { 
    position: relative; 
}

.submenu {
    display: none; /* Mặc định ẩn */
    position: absolute;
    background-color: blue;
    min-width: 220px;
    border: 1px solid white;
    z-index: 100;
}

/* Hiện submenu khi hover */
.has-dropdown:hover > .submenu { 
    display: block; 
}

/* Vị trí Submenu cho Bài 3 (Ngang): Hiện xuống dưới */
.bai3-container .main-menu > .has-dropdown > .submenu {
    top: 100%;
    left: 0;
}

/* Vị trí Submenu cho Bài 2 (Dọc) & Cấp 3: Hiện sang bên phải */
.bai2-container .submenu,
.side-menu {
    top: 0;
    left: 100%;
}