/* ==========================================================================
   GIỮ NGUYÊN TOÀN BỘ PHẦN CSS DESKTOP CỦA BẠN (TỪ ĐẦU ĐẾN TRƯỚC @MEDIA)
   ========================================================================== */
.UIDropdownMenu_daithanh .DropdownMenu ul {
        list-style: outside none none;
        margin: 0;
        padding: 0;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList li {
        /* display: block; */
        /* float: left; */
        /* list-style: outside none none; */
}
.UIDropdownMenu_daithanh .DropdownMenu ul.MenuList li.sub img {
    display: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList>li:last-child{
        border-right: none;
}


.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu .HasChildren:after, .DropdownMenu .MenuList .TopMenuActive .HasChildren:after {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 5px;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        margin-bottom: 3px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu {
    /* Các thuộc tính cũ (float, width...) */
    float: left; 
    height: 40px; /* Chiều cao menu của bạn */
    position: relative;
    border: 1px solid transparent; 
    
    /* --- THÊM 3 DÒNG NÀY ĐỂ CĂN GIỮA TUYỆT ĐỐI --- */
    display: flex !important;           /* 1. Sử dụng Flexbox */
    align-items: center !important;    /* 2. Căn giữa theo chiều dọc (trên/dưới) */
    justify-content: center !important;/* 3. Căn giữa theo chiều ngang (trái/phải) */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu a:hover,
.TopMenuActive a:hover {
        /* height: 45px; */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu:hover a {
        text-decoration: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar>i{
       font-size: 22px;
       color: #fff;
       padding: 10px 0;
       cursor: pointer;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown li a:hover {
        color: #fdf418;
        background: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList li.LanguageMenu img {
        width: 35px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList li.LanguageMenu img[style*="border-bottom: 2px solid rgb(255, 235, 59)"] {
        width: 38px;
        border: 1px solid rgb(255 235 59 / 54%) !important;
}
.UIDropdownMenu_daithanh .DropdownMenu {
    height: 45px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #cccccc;
    background-color: #3890fe;
    background: url("images/bg-header.png") repeat-x top;
}
.UIDropdownMenu_daithanh .DropdownMenu ul {
        list-style: outside none none;
        margin: 0;
        padding: 0;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList {
        margin: 0 auto;
        width: 1200px;
        position: relative;
        max-width: 100vw;
        flex-direction: row;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList li {
        /* display: block; */
        float: left;
        list-style: outside none none;
        /* margin: 0  10px; */
        padding: 0px 10px;
        /* margin-right: 1px; */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList>li:first-child{
        margin-left: 0;
        /* max-width: 120px; */
        float: inline-start;
        /* padding-left: 0; */
        /* border-radius: 50%; */
        padding: 0 5px;
        /* clip-path: circle(); */
        /* padding-left: 0; */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList>li:first-child>a{
        
}
.UIDropdownMenu_daithanh .DropdownMenu ul.MenuList img {
    max-width: 20px;
    /* margin-right: 5px; */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList>li:last-child{
        border-right: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu {
        position: relative;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenuActive, .DropdownMenu .MenuList .TopMenu:hover {
    position: relative; 
    background-color: #7dbae94d;
}

li.TopMenuActive {}

.UIDropdownMenu_daithanh .DropdownMenu .TopMenu span, .DropdownMenu .TopMenuActive span {
        font-family: Arial;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        color: #ffffff;
        /*text-transform: uppercase;*/
}
.UIDropdownMenu_daithanh .DropdownMenu>.MenuList>li>a>span[class*='trang-chu']{
        /* display: none; */
} 
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu a,.DropdownMenu .MenuList .TopMenuActive a  {
    display: inline-block;
    height: 100%;
    padding: 10px 0;
    color: #ffffff;
}

a.HasChildren {}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown {
        color: #fff;
        left: 0;
        position: absolute;
        text-align: left;
        top: 100%;
        z-index: 1000;
        overflow: unset !important;
        background-color: rgba(255,255,255,1);
        box-shadow: -1px 3px 3px 0 rgb(0 0 0 / 30%);
        border: 1px solid #fff;
        /* column-count: 1; */
        min-width: 280px;
        display: block;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown .sub {
    display: block;
    min-height: 45px;
    position: relative;
    width: 100%;
    margin: 1px 0px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub{
        padding: 0 10px;
        border-bottom: 1px solid #f9f9f9;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub span{
        color: #004A82;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub:after {
        display: none;
        content: "";
        width: 80px;
        height: 2px;
        background: var(--bg-blue);
        left: 0;
        position: absolute;
        top: 42px;
        transition: width .1s;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub:hover:after{
        width: 100px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub:last-child{
        border-bottom: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown .sub:hover {
    background: #0068b447 none repeat-x scroll left top;
    cursor: pointer;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub a {
        color: #212529;
        display: block;
        height: 45px;
        margin: 0;
        padding: 0;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        white-space: nowrap;
        font-weight: 600;
        font-size: 15px;
        line-height: 45px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown>.sub>a.HasChildren:after{
        transform: rotate(-90deg);
        margin-bottom: 3px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Popup {
        background: #ecedef none repeat scroll 0 0;
        display: inline-block;
        left: 100%;
        position: absolute;
        top: 0;
        min-width: 200px;
        width: auto;
        z-index: 1001;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Popup .sub {
        position: relative;
        border-left: 1px solid #ddd;
        padding: 0 10px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Popup .sub a {
        padding-right: 10px;
        font-weight: 600;
        font-size: 15px;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu.AdvanceBar {
        position: unset;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone {
        background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
        background-color: #e8e8e8;
        position: absolute;
        top: 100%;
        height: 600px;
        width: 100%;
        max-width: 1200px;
        right: 0;
        z-index: 99; 
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
        padding: 20px;
        display: grid; 
        grid-template-columns: repeat(3, minmax(100px, 3fr)); 
        column-gap: 20px;
        row-gap: 20px;
        overflow: auto;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem{border-bottom: 1px solid var(--color-primary);/* height: auto; *//* width: 100%; *//* display: inline-block; *//* margin-bottom: 20px; */grid-column: 1 span;/* grid-row: 1 span; *//* flex-grow: 1; */float: left;/* margin-right: 20px; *//* overflow: scroll; */}
.DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>a{
        height: auto;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>a>span{
        font-size: 18px;
        color: var(--color-primary);
        white-space: normal;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown{
        display: flex;
        flex-direction: column;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li{
        padding: 8px 0;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li>a{
        padding: 0 0 0 20px;
        background: url(images/chuamotcot.png) no-repeat left;
        background-size: 20px;
        filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -moz-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -o-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -ms-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        /* padding-left: 20px; */
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li>a>span{
        font-weight: 500;
        font-size: 14px;
        color: #213121;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li>.Popup{
        position: unset;
        background: transparent;
        min-width: unset;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li>.Popup>.sub{
        border: 0;
        margin: 0 0 0 20px;
        padding: 0 0 0 20px;
        width: 100%;
        background: url(images/chuamotcot.png) no-repeat left;
        background-size: 20px;
        filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -webkit-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -moz-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -o-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
        -ms-filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(1854%) hue-rotate(71deg) brightness(95%) contrast(88%);
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem>.AdvanceDropdown>li>.Popup>.sub>a>span{
        font-weight: 500;
        color: #231231;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem .HasChildren:after, .DropdownMenu .MenuList .AdvanceBar .AdvanceBarZone>.AdvanceItem .HasChildren:after{
        color: var(--color-primary);
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown li a:hover {
        color: var(--bg-blue);
        background: none;
}
.UIDropdownMenu_daithanh .DropdownMenu .MenuList li.LanguageMenu {
        height: 45px;
        padding: 0 15px;
        gap: 3px;
}

/* ==========================================================================
   PHẦN RESPONSIVE ĐÃ ĐƯỢC ĐIỀU CHỈNH MÀU SẮC
   ========================================================================== */

@media only screen and (min-width: 769px) and (max-width: 1199px){
        .UIDropdownMenu_daithanh  .DropdownMenu, .DropdownMenu .MenuList{
                max-width: 100vw;
                width: 100%;
                left: 0;
        }
        .UIDropdownMenu_daithanh .DropdownMenu .MenuList{
                /* flex-wrap: wrap; */
                padding: 0 5px;
                justify-content: flex-start;
                /* gap: 20px; */
                display: inline-block;
        }
       .UIDropdownMenu_daithanh  .DropdownMenu .MenuList>li{
                margin: 0;
                margin-right: 5px;
        }
       .UIDropdownMenu_daithanh  .DropdownMenu .TopMenu span, .DropdownMenu .TopMenuActive span{
                font-size: 0.7em;
                white-space: nowrap;
        }
}

@media only screen and (max-width: 768px) {
    /* 1. Cấu trúc khung chứa Menu chính */
    .UIDropdownMenu_daithanh .DropdownMenu {
        background-color: #3890fe !important;
        background: url("https://storage-vnportal.vnpt.vn/cto-chinhquyen/5456/Anh_baner/bg-header.png") repeat-x top !important;
        height: auto !important;
        min-height: 45px;
        position: relative;
    }

    /* 2. Menu chính (MenuList) */
    div.DropdownMenu > ul.MenuList {
        display: none; /* Sẽ hiện khi nhấn nút navbar-button */
        position: fixed;
        top: 45px; /* Khớp với chiều cao header */
        left: 0;
        width: 100vw;
        height: calc(100vh - 45px);
        background: #3890fe !important;
        flex-direction: column;
        overflow-y: auto;
        padding: 10px 0 !important;
        z-index: 9999;
    }

    /* 3. Các mục menu cha (TopMenu) */
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList li.TopMenu, 
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList li.TopMenuActive {
        width: 100% !important;
        float: none !important;
        display: block !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu a,
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenuActive a {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important; /* Đẩy chữ sang trái, mũi tên sang phải */
        padding: 12px 20px !important;
        height: auto !important;
        width: 100%;
        color: #ffffff !important;
        text-align: left !important;
    }

    /* 4. Xử lý mục có con (HasChildren) */
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenu a.HasChildren::after,
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .TopMenuActive a.HasChildren::after {
        content: "\25BC"; /* Biểu tượng mũi tên xuống */
        font-size: 10px;
        border: none !important; /* Bỏ border cũ của desktop */
        margin-left: auto;
        transform: rotate(0deg);
        transition: transform 0.3s;
    }

    /* 5. Menu con (Dropdown) */
    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown {
        position: static !important; /* Đẩy menu con xuống dưới menu cha thay vì đè lên */
        display: block !important; /* Hoặc điều khiển bằng JS nếu muốn đóng mở */
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.1) !important; /* Màu nền tối hơn để phân biệt */
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0 20px !important; /* Thụt lề vào trong */
    }

    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown .sub {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        min-height: 40px;
    }

    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown .sub a {
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 40px;
        padding: 0 10px !important;
    }

    .UIDropdownMenu_daithanh .DropdownMenu .MenuList .Dropdown .sub span {
        color: #ffffff !important;
    }

    /* 6. Nút ngôn ngữ và các icon khác */
    div.DropdownMenu li.LanguageMenu {
        display: flex !important;
        padding: 15px 20px !important;
        justify-content: flex-start !important;
        gap: 10px;
    }

    /* Ẩn các thành phần dư thừa trên mobile để menu gọn hơn */
    div.DropdownMenu .TopMenuActive::after {
        display: none !important;
    }
}