/* =======================================================
   1. CÁC THUỘC TÍNH CHUNG (BASE STYLES)
   ======================================================= */
/* --- CONTAINER TỔNG --- */
.DropdownMenu {
    width: auto;
    margin: 0 auto;
    background-color: #DB1413; /* Màu đỏ chủ đạo */
    position: relative;
    z-index: 1000;
    min-height: 50px; 
    height: auto !important;
    overflow: visible !important;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Tạo bóng nhẹ */
}

/* --- DANH SÁCH MENU CHÍNH --- */
.DropdownMenu .MenuList {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1250px; 
}

.DropdownMenu .MenuList li {
    flex: 1; 
    position: relative;
    list-style: none;
}

/* --- ĐỊNH DẠNG LINK CHUNG --- */
.DropdownMenu .MenuList .TopMenu a,
.DropdownMenu .MenuList .TopMenuActive a {
    color: #FFFFFF;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    line-height: 1.4;
    box-sizing: border-box;
}

/* --- MŨI TÊN XỔ XUỐNG --- */
.DropdownMenu .MenuList .HasChildren::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    transition: transform 0.3s;
}

.DropdownMenu .MenuList li:hover .HasChildren::after {
    transform: rotate(180deg);
}

.DropdownMenu .MenuList li:hover {
    background: #E36867; /* Màu nền hover PC */
}

/* --- MENU CON (DROPDOWN) CHUNG --- */
.DropdownMenu .MenuList .Dropdown {
    display: none;
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #fff;
    min-width: 240px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    z-index: 99999 !important;
    border: 1px solid #c60000;
    padding: 0;
}

.DropdownMenu .MenuList li:hover > .Dropdown {
    display: block !important;
}

.DropdownMenu .MenuList .Dropdown .sub {
    display: block;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.DropdownMenu .MenuList .Dropdown .sub a {
    color: #333 !important;
    padding: 10px 15px;
    font-size: 14px;
    text-align: left;
    height: auto;
    display: block;
    min-height: auto;
}

.DropdownMenu .MenuList .Dropdown .sub:hover {
    background-color: #f5f5f5;
}


/* =======================================================
   2. GIAO DIỆN MÁY TÍNH (PC - Màn hình lớn hơn 991px)
   ======================================================= */
@media (min-width: 992px) {
    .DropdownMenu .MenuList {
        display: flex !important;
        flex-direction: row !important;
    }
    
    .navbar-button {
        display: none !important; /* Luôn ẩn nút 3 gạch trên PC */
    }

    .DropdownMenu .MenuList li {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .DropdownMenu .MenuList li:last-child {
        border-right: none;
    }

    .DropdownMenu .MenuList .TopMenu a,
    .DropdownMenu .MenuList .TopMenuActive a {
        justify-content: center; /* Căn giữa trên PC */
        text-align: center;
        padding: 10px 5px;
        min-height: 60px; /* Đảm bảo chiều cao đồng đều cho các mục PC */
    }
}


/* =======================================================
   3. GIAO DIỆN ĐIỆN THOẠI (MOBILE - Màn hình nhỏ hơn 992px)
   ======================================================= */
@media (max-width: 991px) {
    /* Khung thanh Navbar di động */
    .DropdownMenu {
        justify-content: flex-end !important; 
        padding: 10px 20px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tạo kiểu nút 3 gạch */
    .navbar-button {
        display: block !important;
        width: 30px;
        height: 22px;
        cursor: pointer;
        background: linear-gradient(
            to bottom,
            #fff 0%, #fff 20%,
            transparent 20%, transparent 40%,
            #fff 40%, #fff 60%,
            transparent 60%, transparent 80%,
            #fff 80%, #fff 100%
        );
        z-index: 1001; 
    }

    /* --- BẢNG MENU DỌC (SỬA LỖI NỀN TRẮNG VÀ BỊ CẮT MỤC) --- */
    .DropdownMenu .MenuList {
        display: none; 
        position: absolute !important;
        top: 100% !important; 
        left: 0 !important;
        flex-direction: column !important; 
        width: 100% !important;
        background-color: #DB1413 !important; /* Ép nền đỏ */
        z-index: 99999 !important;
        
        /* Cho phép cuộn nếu 10 menu quá dài, không bị mất mục */
        max-height: 75vh !important;
        overflow-y: auto !important; 
        overflow-x: hidden !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
    }

    .DropdownMenu .MenuList li {
        width: 100% !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Căn trái và ép chữ trắng cho chuyên mục chính */
    .DropdownMenu .MenuList .TopMenu a,
    .DropdownMenu .MenuList .TopMenuActive a {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 20px !important; 
        min-height: auto !important;
        color: #ffffff !important; /* Ép chữ màu trắng */
        background-color: #DB1413 !important; /* Ép nền đỏ */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: block !important;
    }

    /* --- FIX LỖI KHOẢNG TRỐNG (MENU CON BỊ TÀNG HÌNH) --- */
    .DropdownMenu .MenuList .Dropdown {
        display: block !important; 
        position: static !important; 
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background-color: #b31010 !important; /* Nền đỏ đậm */
        
        /* Phá mọi lệnh ẩn từ CSS cũ của web */
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .DropdownMenu .MenuList .Dropdown .sub {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    }

    .DropdownMenu .MenuList .Dropdown .sub a {
        color: #ffffff !important; /* Ép chữ trắng */
        padding: 12px 15px 12px 40px !important; /* Thụt lề menu con */
        font-weight: normal !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ẩn mũi tên xổ xuống */
    .DropdownMenu .MenuList .HasChildren::after {
        display: none !important; 
    }
}