#header {
    float: left;
    width: 100%;
    color: #999;
}
    /* Heder Menu */
    #header .headerMenu {
        width: 100%;
        justify-content: center;
        display: flex; 
        background-color: var(--color-primary-3);
        background: linear-gradient(90deg, #1387de 0%, #0ab2f0 100%)#000;
    }

        #header .headerMenu .headerMenu__pnl {
            display: flex;
            justify-content: space-between;
            height: 90px;  
        }
            #header .headerMenu .headerMenu__pnl-left {
                display: flex;
            }
            #header .headerMenu .headerMenu__pnl-mid {
                display: flex;
                margin: 0 auto;
            } 
                .menuListHori .menuListHori__lv0{
                    display: flex;
                    cursor: pointer;
                    align-items: center;
                    justify-content: center;
                    padding: 0 12px;
                    position: relative;
                    z-index: 2;
                    transition: background 0.35s ease; 
                }
                
                .menuListHori .menuListHori__lv0:hover{ 
                    background-color: #0D4C92;
                    background-color: var(--color-primary-1);
                }
                    /* submenu lv1 */
                    .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst{ 
                        background: white;
                        position: absolute;
                        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                        min-width: 250px;
                        height: auto;  
                        z-index: 1;
                        top: 100%;
                        left: 0; 
                         box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                        display: none;
                    } 
                    .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst.flip{  
                        right: 0; 
                        left: revert;
                    }
                    /* Show submenu khi hover vao menu cha  */
                    .menuListHori .menuListHori__lv0:hover .menuListHori__lv1Lst{ 
                        /* opacity: 1;
                        pointer-events: auto; 
                        transform: translateY(100%); */
                        display: block;
                    }
                        /* submenut item lv1 */
                        .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item{
                            align-content: center;
                            cursor: pointer;
                            display: flex;
                            text-decoration: none;
                            color: var(--color-text);
                            align-content: center;
                            align-items: center;
                            padding: 8px 10px;
                            position: relative;
                            justify-content: space-between;
                        } 
                        /* submenut item lv1: hover */
                        .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item:hover{ }  
                            .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item .ico{

                             }  
                       
                            /* submenu lv2  */
                            .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item .menuListHori__lv2Lst{
                                position: absolute;
                                top: 0;
                                left: 100%;
                                display: none; 
                                background: white;
                                min-width: 250px;
                                height: auto; 
                                border-end-end-radius: 4px;
                                border-bottom-left-radius: 4px;  
                                z-index: 1;
                                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
                            }
                            /* submenu lv2 hover */
                            .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item:hover .menuListHori__lv2Lst{
                                display: block !important;
                            }
                                .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item .menuListHori__lv2Lst .menuListHori__lv2Lst-item{
                                    color: var(--color-text);
                                    align-content: center;
                                    cursor: pointer;
                                    display: flex;
                                    text-decoration: none;
                                    color: var(--color-text);
                                    align-content: center;
                                    align-items: center;
                                    padding: 8px 10px;
                                    position: relative;
                                    justify-content: space-between;
                                    background-color: var(--color-primary-3); 
                                    color: var(--color-text-menu) !important;
                                } 
                                /* hover  */
                                .menuListHori .menuListHori__lv0 .menuListHori__lv1Lst .menuListHori__lv1Lst-item .menuListHori__lv2Lst .menuListHori__lv2Lst-item:hover{
                                    background-color: var(--color-primary-4); 
                                    color: initial !important;
                                }
 
                    /* menu item lv0 */
                    .menuListHori .menuListHori__lv0 > a{
                        color: white;
                        text-decoration: none;
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        text-transform: uppercase;
                        font-size: var(--size-text-menu);
                        cursor: pointer; 
                    } 
            #header .headerMenu .headerMenu__pnl-right {
                display: flex;
                color: var(--color-text-menu); 
                background-color: var(--color-primary-2);
                width: 400px !important;
                margin-left: auto;
                justify-content: center;
            }  
            
/* start: BannerST1 */
    .bannerST1 {
        width: 100%;
        min-height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .bannerST1 .bannerST1__pnl{  
            display: flex;
            justify-content: space-between;
            height: 90px;
        }
            .bannerST1 .bannerST1__pnl .bannerST1__pnl-left{
                display: flex;
                align-items: center;
                gap: 20px;
            }
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-logo{
                    height: 70px;
                }
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-text{
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                }
                    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-text .bannerST1__pnl-left-text-domain-name{
                        text-transform: uppercase;
                        font-size: 13px;
                    }
                    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-text .bannerST1__pnl-left-text-agency-name{
                        font-size: 24px;
                        color: var(--color-primary-1);
                        font-weight: bold;
                        display: flex;
                        justify-content: center; /* căn giữa ngang */
                        align-items: center;     /* căn giữa dọc */
                        text-align: center;      /* căn chữ trong nội dung */
                        height: 100%;       
                    }
                    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-text .bannerST1__pnl-left-text-portal{
                        font-size: 17px;
                    }
            .bannerST1 .bannerST1__pnl .bannerST1__pnl-right{
                display: flex;
                align-items: center;
                gap: 20px;
                width: 400px;
                color: var(--color-primary-1);
            } 
            /* ==== CUM HIEN THI THU/NGAY/THANG/NAM ====  */
            .bannerST1 .bannerST1__pnl .bannerST1__pnl-right .bannerST1__pnl-right-col{ 
                flex: 1; 
                text-align: center; 
            }
                /* ngay trong tuan  */
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-right .bannerST1__pnl-right-col #day_of_week{ 
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }                         

                /* ngay trong nam  */
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-right .bannerST1__pnl-right-col #day_of_year{ 
                } 
            /* ==== CUM HIEN THI THOI TIET ====  */ 
                /* nhiet do  */ 
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-right .bannerST1__pnl-right-col #weather_temp{ 
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 10px;
                } 
                /* trang thai thoi tiet  */
                .bannerST1 .bannerST1__pnl .bannerST1__pnl-right .bannerST1__pnl-right-col #weather_info{ 
                } 
                
/* end: bannerST1 */
    /* Heder Bot */
    #header #headerBot {
        width: 100%;
        justify-content: center;
        display: flex; 
    }
        #header #headerBot .headerBot__pnl{ 
            display: flex;
            justify-content: space-between;
            height: 40px;
            border-bottom: 4px double #C3D0E0;

        }
            #header #headerBot .headerBot__pnl-left{  
            }   
            #header #headerBot .headerBot__pnl-right{ 
                width: 100%;
            }  
                #header #headerBot .headerBot__pnl-right marquee{ 
                    display: flex;
                    align-items: center;
                    height: 100%;
                }         
                #header #headerBot .headerBot__pnl-right .slideNews{
                    display: flex;
                    gap: 40px;
                }    
                    #header #headerBot .headerBot__pnl-right .slideNews li{
                        list-style: none;
                        position: relative;
                    }  
                    #header #headerBot .headerBot__pnl-right .slideNews li::before{
                        position: absolute;
                        width: 0;
                        height: 0;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid #DA251C;
                        content: '';
                        display: inline-block;
                        margin-bottom: 2px;
                        top: 50%;
                        transform: translateY(-50%) rotate(90deg);
                        left: -12px;
                    }    
                        #header #headerBot .headerBot__pnl-right .slideNews a{
                            text-decoration: none;
                            color: #999;
                            text-transform: uppercase;
                            font-weight: 700;
                            color: var(--color-primary-1);
                            color: #12536C;
                        }             

                            



#header .headerMenu .headerMenuMobile{
    display: none;
}
.headerMenuMobile__pnl{
    display: none;
}






/* Mobile/Tablet doc */
@media (max-width: 768px) { 
    .bannerST1{
        min-height: auto;
    }
    .bannerST1 .bannerST1__pnl{
        height: auto;
        padding: 10px 0px;
    }
    .container{
        width: calc(100% - 20px) !important;
    }   
    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left{
        gap: 10px;
    }
    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-logo{
        height: 30px;
    }
    .bannerST1 .bannerST1__pnl .bannerST1__pnl-left .bannerST1__pnl-left-text .bannerST1__pnl-left-text-agency-name{
        font-size: 14px;
        width: 100%;
    }
    /* Menu */
    #header .headerMenu .headerMenu__pnl{
        display: none;
    }




    /* Menu Mobile */
    #header .headerMenu{
        height: 60px;
    }
    #header .headerMenu .headerMenuMobile{
        display: flex;
        gap: 10px;
        float: left;
        width: 100%;
        height: 100%;
        padding: 0 10px;
    }
        #header .headerMenu .headerMenuMobile .headerMenuMobile__left{
            display: flex;
            align-items: center;
            float: left;
            width: 25px;
            height: 100%;
        }
        #header .headerMenu .headerMenuMobile .headerMenuMobile__right{
            display: flex;
            align-items: center;
            float: left;
            width: calc(100% - 25px);
            height: 100%;
            padding: 13px 0px;
            box-sizing: border-box;
        }
            #header .headerMenu .headerMenuMobile .headerMenuMobile__right-search{
                display: flex;
                gap: 5px;
                align-items: center;
                float: left;
                width: 100%;
                height: 100%;
                padding: 2px;
                box-sizing: none;
                border: 1px solid #fff;
                border-radius: 50px;
                background-color: #fff
            }
                #header .headerMenu .headerMenuMobile .headerMenuMobile__right-search > span{
                    float: left;
                    width: 25px;
                    font-size: 22px;
                }
                #header .headerMenu .headerMenuMobile .headerMenuMobile__right-search > span:hover{
                    color: var(--color-primary-1);
                }
                #header .headerMenu .headerMenuMobile .headerMenuMobile__right-search > input{
                    float: left;
                    width: calc(100% - 25px);
                    height: 100%;
                    padding-left: 10px;
                    outline: none;
                    border: none;
                    font-size: 14px;
                    border-radius: 50px;
                }
                #header .headerMenu .headerMenuMobile .headerMenuMobile__right-search > input:focus{
                    outline: none;
                    border: none !important;
                }

                .visuallyHidden {
                    position: absolute; 
                    overflow: hidden; 
                    clip: rect(0 0 0 0); 
                    height: 1px; width: 1px; 
                    margin: -1px; padding: 0; border: 0; 
                }

                .menuIcoClose {
                    margin: 0 auto;
                    width: 25px;
                    height: 25px;
                    position: relative;
                }

                .menuIcoClose .lineIco {
                    padding: 0;
                    width: 25px;
                    height: 3px;
                    background-color: #fff;
                    display: block;
                    border-radius: 4px;
                    transition: all 0.4s ease-in-out;
                    position: absolute; 
                }

                .lineIco1 {
                    top: 0;
                }

                .lineIco2,
                .lineIco3 {
                    top: 9.5px;
                }

                .lineIco3 {
                    right: 0;
                }

                .lineIco4 {
                    bottom: 0;
                    top: 20px;
                }

                /* HAMBURGER 3 */

                .menuIcon .lineIco1 {
                    transform-origin: 5%;
                }

                .menuIcon .lineIco4 {
                    transform-origin: 5%;
                }

                .menu_mobile_icoStt:checked + label > .menuIcon > .lineIco1{
                    transform: rotate(45deg);
                    height: 3px;
                    width: 32px;
                }

                .menu_mobile_icoStt:checked + label > .menuIcon > .lineIco3{
                    transform: rotate(45deg);
                    height: 3px;
                    background-color: transparent;
                }

                .menu_mobile_icoStt:checked + label > .menuIcon > .lineIco2{
                    transform: rotate(-45deg);
                    height: 3px;
                    background-color: transparent;
                }

                .menu_mobile_icoStt:checked + label > .menuIcon > .lineIco4{
                    transform: rotate(-45deg);
                    height: 3px;
                    width: 32px;
                }
    .headerMenuMobile__pnlOff{
        width: 0px !important;
        overflow: hidden;
    }
    .headerMenuMobile__pnl{
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 128px;
        float: left;
        width: 100%;
        height: calc(100% - 130px);
        padding: 25px 0px;
        background: linear-gradient(90deg, #1387de 0%, #0ab2f0 100%) #000;
        transition: all 0.2s ease-in-out;
    }
    .headerMenuMobile__pnl-block{
        float: left;
        width: 100%;
        box-sizing: border-box;
    }
        .headerMenuMobile__pnl-block .headerMenuMobile__pnl-block-items{
            display: flex;
            flex-direction: column;
            float: left;
            width: 100%;
        }
            .headerMenuMobile__pnl-block .headerMenuMobile__pnl-block-items .headerMenuMobile__block-items-content{
                float: left;
                width: 100%;
            }
            .headerMenuMobile__pnl-block .headerMenuMobile__pnl-block-items .headerMenuMobile__block-items-child{
                display: flex;
                display: none;
                flex-direction: column;
                float: left;
                width: calc(100% - 0px);
                padding-left: 35px;
                max-width: 5px 0;
                box-sizing: border-box;
                background: linear-gradient(90deg, #ebedef99 0%, #edf0f152 100%) #00000000;
            }

            .itemsMenuMobile__item{
                /* display: flex; */
                align-items: center;
                float: left;
                width: 100%;
                padding: 6px 25px;
            }
            .itemsMenuMobile__item:hover{}
                .itemsMenuMobile__item .itemsMenuMobile__item-txtFather{
                    float: left;
                    color: #fff;
                    text-transform: uppercase;
                }
                .itemsMenuMobile__item .itemsMenuMobile__item-txt{
                    float: left;
                    color: #333;
                    text-transform: uppercase;
                }
                .itemsMenuMobile__item .itemsMenuMobile__item-ico{
                    float: left;
                }










    /* slider Article */
    #header #headerBot .headerBot__pnl-right .slideNews a{
        font-size: 12px;
    }
}
 
/* Từ 1024px den 1299px */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
}

/* Toi da 1300px */
@media (max-width: 1300px) { 
}

/* Toi thieu 1301px */
@media (min-width: 1301px) and (max-width: 1400px) {  
}

/* Từ 1400px trở lên */
@media (min-width: 1400px) and (max-width: 1499px) { 
}

@media (min-width: 1500px)  { 
}