/*****************************************************HEADER TOP*****************************************************/

.header {
    transition: all 0.5s ease-in-out;
    position: relative;
    display: unset;
}

.header .header_optional{
    display: unset;
}

.header_optional > .nav_header {
    transition: all 0.5s ease-in-out;
    background: url(../images/background_menu.png) no-repeat;
    background-position: center;
    background-size: cover;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.20);
}

.menu-bar {
    background-color: white;
    border-bottom: none;
    display: unset;
}

.fixed-header .header_optional > .nav_header {
    width: 100%;
    /* box-shadow: 0px 2px 4px rgba(30, 45, 190, 0.12); */
    background-color: #FFF;
}
.menu-bar .header_top.header_top_noimg{
    background: none;
}
.menu-bar .header_top {
    background: url(../images/nav_background.png) no-repeat center;
    background-size: cover;
    border-bottom: 1px solid #E7EBF1;
    /* box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15); */
    z-index: 1;
    position: relative;
}

.menu-bar .header_top .nav_top_option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.menu-bar .header_top .nav_top_option > img {
    position: absolute;
    right: 0;
    z-index: -1;
}

.menu-bar .header_top .nav-brand {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    gap: 90px;
}

.menu-bar .header_top .nav-brand .main-logo-site {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.menu-bar .header_top .nav-brand .main-logo-site .slogan {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #EF9300;
    text-align: center;
    font-family: "SVN-A Love Of Thunder";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

.menu-bar .header_top .nav-brand::after {
    content: "";
    display: block;
    background: url(../images/bg-header.png) no-repeat center;
    width: 800px;
    position: absolute;
    height: 100%;
    left: -95px;
    z-index: -1;
}

.menu-bar .header_top .nav-brand > a {
    display: flex;
    flex-shrink: 0;
}

.menu-bar .header_top .nav-brand img {
    width: 100px;
    height: 100px;
    max-height: 100px;
    /* margin-right: 20px; */
    padding: 0;
}

.menu-bar .header_top .nav-brand .logocontent {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.menu-bar .header_top .nav-brand .logocontent {
    text-transform: uppercase;
    font-family: "Roboto Slab";
    font-weight: 800;
    font-style: normal;
    line-height: normal;
}

.menu-bar .header_top .nav-brand .logocontent .toplogocontent {
    color: var(--red, #D61C26);
    font-size: 40px;
}

.menu-bar .header_top .nav-brand .logocontent .middlelogocontent {
    color: #1653C8;
    font-size: 28px;
    letter-spacing: 1.4px;
}

.menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
    color: #1653C8;
    font-size: 17px;
    font-weight: 600;
}

.menu-bar .header_top #dnn_NavBanner_Pane {
    width: 590px;
}

.menu-bar .header_top .news_list .content_news {
    display: none;
}

/*****************************************************HEADER BOTTOM*****************************************************/

.menu-bar .header_bottom > #main-menu {
    float: unset;
}

.menu-bar .header_bottom > ul > li {
    margin-right: 36px;
    cursor: pointer
}

.menu-bar .header_bottom > ul > li:hover {
    border: none
}

.menu-bar .header_bottom > ul > li > a {
    letter-spacing: 0.15px;
    color: #FFF;
    font-family: "Roboto";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* 150% */
    padding: 12px 0;
    text-transform: uppercase;
    transition: none;
}

.menu-bar .header_bottom > ul > li > a.current,
.menu-bar .header_bottom > ul > li > a:hover,
.menu-bar .header_bottom > ul > li:hover > a {
    color: #FFC52D;
}

.menu-bar .header_bottom > ul > li > a.current::before,
.menu-bar .header_bottom > ul > li > a:hover::before,
.menu-bar .header_bottom > ul > li:hover > a::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 2px solid #FFC52D; 
    left: 0;
}

.menu-bar .header_bottom > ul > li > a.has-submenu {
    padding-right: 25px;
}

.menu-bar .header_bottom > ul > li > a.has-submenu::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.9996 7.5C5.78029 7.5 5.56087 7.41455 5.39373 7.24365L0.251105 1.99365C-0.0837016 1.65186 -0.0837016 1.09814 0.251105 0.756348C0.585911 0.414551 1.1283 0.414551 1.4631 0.756348L5.9996 5.38906L10.5369 0.757031C10.8717 0.415234 11.4141 0.415234 11.7489 0.757031C12.0837 1.09883 12.0837 1.65254 11.7489 1.99434L6.60627 7.24434C6.43886 7.41523 6.21923 7.5 5.9996 7.5Z" fill="white"/></svg>');
    position: absolute;
    top: calc(50%);
    transform: translateY(-50%);
    right: 0;
}

.menu-bar .header_bottom > ul > li > a.has-submenu.current::after,
.menu-bar .header_bottom > ul > li > a.has-submenu:hover::after,
.menu-bar .header_bottom > ul > li:hover > a::after {
    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.9996 7.5C5.78029 7.5 5.56087 7.41455 5.39373 7.24365L0.251105 1.99365C-0.0837016 1.65186 -0.0837016 1.09814 0.251105 0.756348C0.585911 0.414551 1.1283 0.414551 1.4631 0.756348L5.9996 5.38906L10.5369 0.757031C10.8717 0.415234 11.4141 0.415234 11.7489 0.757031C12.0837 1.09883 12.0837 1.65254 11.7489 1.99434L6.60627 7.24434C6.43886 7.41523 6.21923 7.5 5.9996 7.5Z" fill="%23FFC52D"/></svg>');
}

.menu-bar .header_bottom > ul > li:last-child {
    margin-right: 0;
}

.menu-bar .header_bottom > ul > li > a > span {
    display: none;
}

.menu-bar .header_bottom > ul > li > ul > li > a,
.menu-bar .header_bottom > ul > li > ul > li > ul > li > a {
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.15px;
    color: #fff;
    padding: 6px 16px
}

.menu-bar .header_bottom > ul > li > ul > li > a.has-submenu {
    padding: 6px 30px 6px 16px;
}

@media (min-width: 768px) {
    .sm-contra ul a span.sub-arrow {
        border: none;
        width: 20px;
        height: 20px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin-top: 0;
        font-size: 0;
    }
    
    .sm-contra ul a span.sub-arrow::before,
    .sm-contra ul a.has-submenu.highlighted span.sub-arrow::before {
        content:"" !important;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: block;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><mask id="mask0_778_5250" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect width="20" height="20" fill="%23fff"/></mask><g mask="url(%23mask0_778_5250)"><path d="M10.7885 9.99991L7.39424 6.60566C7.27885 6.49028 7.21982 6.34525 7.21716 6.17057C7.21448 5.99591 7.2735 5.84821 7.39424 5.72749C7.51496 5.60675 7.66132 5.54639 7.83332 5.54639C8.00532 5.54639 8.15168 5.60675 8.27241 5.72749L12.0176 9.47268C12.0956 9.55066 12.1506 9.63293 12.1827 9.71947C12.2147 9.806 12.2307 9.89948 12.2307 9.99991C12.2307 10.1003 12.2147 10.1938 12.1827 10.2803C12.1506 10.3669 12.0956 10.4492 12.0176 10.5271L8.27241 14.2723C8.15703 14.3877 8.012 14.4467 7.83732 14.4494C7.66266 14.4521 7.51496 14.3931 7.39424 14.2723C7.2735 14.1516 7.21313 14.0052 7.21313 13.8332C7.21313 13.6612 7.2735 13.5149 7.39424 13.3942L10.7885 9.99991Z" fill="%23FFF"/></g></svg>');
    }
}

.menu-bar .header_bottom > ul > li > ul {
    padding: 10px 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    background: #1850CD;
    transition: all 0.5s ease-in-out;
}

.menu-bar .header_bottom > ul > li > ul > li > ul {
    padding: 10px 0;
    box-shadow: 0px 2px 4px 0px #00000026;
    transition: all 0.5s ease-in-out;
    background: #1850CD;
}

.menu-bar .header_bottom > ul > li > ul > li > a:hover {
    background: none;
    color: #FFC52D;
}

.menu-bar .header_bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

/*****************************************************HEADER BOTTOM - MEGA MENU*****************************************************/

.sm {
    position: unset;
}

.menu-bar .header_bottom > ul > li.has_megamenu {
    position: unset;
}

/* .header .menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu {
    display: none;
} */

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu {
    width: auto !important;
    max-width: unset !important;
    /* gap: 30px;
    flex-wrap: wrap; */
    transition: none;
    padding: 20px;
    margin: 0 !important;
}

/* .menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu:hover{
    display: flex;
} */

/* .menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper {
    flex: 0 0 calc(100%/6 - 25px);
} */

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper {
    width: calc(100%/4 - 22.5px);
    float: left;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper:not(:last-child) {
    margin-right: 30px;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper > a {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.33;
    text-align: left;
    text-transform: uppercase;
    /* active */
    color: #E88A27;
    transition: none;
    padding: 0 0 10px 0;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper a .sub-arrow {
    display: none;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper .MegaMenu-parent {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    margin: 0 !important;
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
    border: none;
    display: flex !important;
    text-align: left !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper .MegaMenu-parent .MegaMenu-child a {
    padding: 0;
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    /* or 150% */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    /* Gray 1 */
    color: #333333;
    transition: all 2s ease-in-out;
    max-height: 21px;
}

.menu-bar .header_bottom ul li > a[title="Đào tạo"] ~ .RenderChildNodesMegaMenu .MegaMenu-wrapper .MegaMenu-parent .MegaMenu-child a:hover {
    background: none;
    color: #E88A27 !important;
    -webkit-line-clamp: unset;
    max-height: 200px;
    transition: all 0.5s ease-in-out;
}

/* .menu-bar .header_bottom ul li a[title="Tuyển sinh"] {
    background: linear-gradient(0deg, #C86000 0%, #A04D00 100%);
    border-radius: 60px;
    padding: 9px 40px 9px 20px;
    margin-top: 4px;
    margin-right: 0
}

.menu-bar .header_bottom ul li a[title="Tuyển sinh"]:hover,
.menu-bar .header_bottom ul li a[title="Tuyển sinh"]:focus {
    color: #FFF;
    border: none;
}

.menu-bar .header_bottom > ul > li > a[title="Tuyển sinh"].has-submenu::after {
    right: 16px;
    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.9996 7.5C5.78029 7.5 5.56087 7.41455 5.39373 7.24365L0.251105 1.99365C-0.0837016 1.65186 -0.0837016 1.09814 0.251105 0.756348C0.585911 0.414551 1.1283 0.414551 1.4631 0.756348L5.9996 5.38906L10.5369 0.757031C10.8717 0.415234 11.4141 0.415234 11.7489 0.757031C12.0837 1.09883 12.0837 1.65254 11.7489 1.99434L6.60627 7.24434C6.43886 7.41523 6.21923 7.5 5.9996 7.5Z" fill="white"/></svg>') !important;
} */

@media (min-width:768px) {
    /* prevent text rendering degrade during animation in Mac browsers */
    #main-menu {
        -webkit-font-smoothing: subpixel-antialiased;
    }
    /* show animation */
    #main-menu > li > ul.show-animation {
        -webkit-animation: show-animation 0.3s;
        animation: show-animation 0.3s;
    }
    @-webkit-keyframes show-animation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes show-animation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    /* hide animation */
    #main-menu > li > ul.hide-animation {
        -webkit-animation: hide-animation 0.3s;
        animation: hide-animation 0.3s;
    }
    @-webkit-keyframes hide-animation {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes hide-animation {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
}

/*****************************************************SEARCH BOX*****************************************************/
#searchModal .modal-content {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
    border: none;
}

#searchModal .modal-header {
    border-bottom: none;
    padding: 15px 20px;
}

#searchModal .modal-header h5 {
    color: var(--text, #323232);
    font-family: Roboto Slab;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 111.111% */
}

#searchModal .modal-body {
    padding: 0 20px 15px;
}

#searchModal .modal-body input {
    border-radius: 60px;
    border: 1px solid #D7E0F2;
    padding: 10px 15px;
    background: #F4F8FF url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.6 1.4C3.2804 1.4 1.4 3.2804 1.4 5.6C1.4 7.9196 3.2804 9.8 5.6 9.8C7.9196 9.8 9.8 7.9196 9.8 5.6C9.8 3.2804 7.9196 1.4 5.6 1.4ZM0 5.6C0 2.50721 2.50721 0 5.6 0C8.69279 0 11.2 2.50721 11.2 5.6C11.2 8.69279 8.69279 11.2 5.6 11.2C2.50721 11.2 0 8.69279 0 5.6Z" fill="%23182940"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.60542 8.60493C8.87878 8.33156 9.322 8.33156 9.59537 8.60493L13.7954 12.8049C14.0687 13.0783 14.0687 13.5215 13.7954 13.7949C13.522 14.0682 13.0788 14.0682 12.8054 13.7949L8.60542 9.59488C8.33205 9.32151 8.33205 8.87829 8.60542 8.60493Z" fill="%23182940"/></svg>') no-repeat;
    background-position: calc(100% - 15px) 50%;
    outline: none
}

#searchModal .modal-body .search .searchInputContainer {
    border: none;
}

/*****************************************************FOOTER TOP*****************************************************/
footer {
    padding-top: 20px;
    background: #FFF;
    border: none;
    position: relative;
    background-size: cover;
    background: url(../images/background_footer.png) no-repeat center;
    background-size: cover;
    /* border-top: 2px solid #FFB6BA; */
}

footer::before {
    content: none;
    display: block;
    /* background: url(../images/hoavan.png); */
    width: 100%;
    height: 40px;
    position: absolute;
    top: -40px;
}

footer .Footer_ThongTin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 15px;
}

footer .Footer_copyright {
    color: #86B9FF !important;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.42857; /* 142.857% */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

footer .Footer_copyright a {
    color: #86B9FF !important;
}

footer .Footer_ThongTin * {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 137.5% */
}

footer .Footer_ThongTin strong {
    font-weight: 700;
}

footer .Footer_ThongTin .phone_fax {
    display: flex;
    column-gap: 20px;
    flex-wrap: wrap;
}

footer .Footer_ThongTin h2 {
    color: #FFCB59;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.375; /* 137.5% */
    text-transform: uppercase;
    margin-bottom: 5px;
}

footer .Footer_QR {
    border-radius: 10px;
    border: 1px solid #F5D6D6;
    background: #FFF5F5;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px;
}

footer .Footer_QR > *:not(:last-child) {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #F5D6D6;
}

footer .Footer_QR > * .Title {
    color: var(--text-mi, #182940);
    text-align: center;
    font-family: "Roboto Slab";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.42; /* 142.857% */
    margin-bottom: 10px;
}

footer .Footer_QR > * span {
    color: var(--text-mi, #182940);
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.38; /* 138.462% */
}

footer .Footer_QR .Group_QR {
    display: flex;
    gap: 10px;
}

footer .Footer_QR .Group_QR li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

footer .Footer_QR .Group_App {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

footer .Footer_QR .App_Download span {
    width: 95px;
    text-align: center;
    display: block;
}

footer .Footer_QR .Option ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

footer .Footer_QR .Option ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer .Footer_QR .Option .Title {
    margin-bottom: 5px;
}

footer .follow-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

footer .follow-link > div {
    flex-shrink: 0;
}

footer .follow-link img {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
}

footer .footer-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
}

footer .copyright {
    color: #58677A;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

footer .copyright a {
    color: #58677A;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42; /* 142.857% */
}

.onlinecounter-statistics {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    margin-left: 20px;
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    margin-bottom: 20px;
}

.onlinecounter-statistics span span:last-child {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

footer .main-footer {
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

footer .main-footer .footer-main {
    /* display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;
    flex-wrap: wrap;
    row-gap: 15px; */
}

footer .box_map {
    position: relative;
    border-radius: 10px;
    border: 4px solid #FFF;
    background-color: lightgray;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.30);
    height: 188px;
    overflow: hidden;
}

footer .box_map img {
    position: absolute;
    top: 15px;
    left: 10px;
}

/*****************************************************LANGUAGE*****************************************************/
.language-object {
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-object a,
.language-object span {
    overflow: hidden;
    color: var(--text-mi, #182940);
    text-overflow: ellipsis;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.57; /* 157.143% */
    position: relative;
}

.language-object > *:not(:last-child) {
    margin-right: 10px;
    padding-right: 10px;
}

.language-object > *:not(:last-child)::after,
.extraoption #currentTime::after {
    content: "";
    width: 1px;
    height: 15px;
    background: #ACB7C9;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nav_option {
    display: flex;
    align-items: center;
    gap: 20px;
}

#currentTime {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
}

.search-svg {
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 160px;
    background: #134796;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.6 1.4C3.2804 1.4 1.4 3.2804 1.4 5.6C1.4 7.9196 3.2804 9.8 5.6 9.8C7.9196 9.8 9.8 7.9196 9.8 5.6C9.8 3.2804 7.9196 1.4 5.6 1.4ZM0 5.6C0 2.50721 2.50721 0 5.6 0C8.69279 0 11.2 2.50721 11.2 5.6C11.2 8.69279 8.69279 11.2 5.6 11.2C2.50721 11.2 0 8.69279 0 5.6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.60542 8.60493C8.87878 8.33156 9.322 8.33156 9.59537 8.60493L13.7954 12.8049C14.0687 13.0783 14.0687 13.5215 13.7954 13.7949C13.522 14.0682 13.0788 14.0682 12.8054 13.7949L8.60542 9.59488C8.33205 9.32151 8.33205 8.87829 8.60542 8.60493Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.language-object .Language.selected {
    color: #D61C26;
    display: none;
}

.extraoption {
    display: flex;
    align-items: center;
}

.extraoption #currentTime {
    overflow: hidden;
    color: var(--text-mi, #182940);
    text-overflow: ellipsis;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.57; /* 157.143% */
    margin-right: 10px;
    position: relative;
    padding-right: 10px;
}

/*****************************************************MINI NAV*****************************************************/
.mini_nav {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.mini_nav > a.Home-link {
    position: absolute;
    right: calc(100% + 30px);
    width: max-content;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFF;
    font-family: "Roboto Slab";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    background: var(--red, #D61C26);
    padding: 6px 12px;
}

.mini_nav h6 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini_nav h6 a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--red, #D61C26);
    font-family: "Roboto Slab";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5; /* 181.818% */
    text-transform: uppercase;
}

.menu-bar .mini_nav .header_bottom > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-right: 30px;
}

.menu-bar .mini_nav .header_bottom > ul > li:last-child {
    margin-right: 0;
}

.menu-bar .mini_nav .header_bottom > ul > li > a {
    color: var(--text-mi, #182940);
    font-family: "Roboto Slab";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    text-transform: none;
}

.menu-bar .mini_nav .header_bottom > ul > li > a.current, .menu-bar .mini_nav .header_bottom > ul > li > a:hover, .menu-bar .mini_nav .header_bottom > ul > li:hover > a {
    color: #D61C26;
}

.menu-bar .mini_nav .header_bottom > ul > li > a.current::before, .menu-bar .mini_nav .header_bottom > ul > li > a:hover::before, .menu-bar .mini_nav .header_bottom > ul > li:hover > a::before {
    bottom: 8px;
}

/*****************************************************RESPONSIVE NAV*****************************************************/
@media screen and (max-width: 1366px) {
    .menu-bar .header_top .nav-brand .logocontent .toplogocontent {
        font-size: 32px;
    }
    .menu-bar .header_top .nav-brand .logocontent .middlelogocontent {
        font-size: 22px;
    }
    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 15px;
    }
    .menu-bar .header_top #dnn_NavBanner_Pane {
        width: 520px;
    }

    .menu-bar .header_bottom > ul > li {
        margin-right: 20px;
    }
    
    .menu-bar .header_top .nav-action .search-group .searchInputContainer input {
        font-size: 14px;
        width: 280px;
    }
}

@media screen and (max-width: 1240px) {
    .footer-CM > div {
        flex: 0 0 calc(50% - 30px)
    }
    .menu-bar .header_bottom > ul > li > a.has-submenu{
        padding-right: 20px;
    }
    .menu-bar .header_bottom > ul > li {
        margin-right: 20px;
    }
    .menu-bar .header_bottom .icon-search {
        transition: none;
    }

    .menu-bar .header_top .nav-brand img {
        width: 90px;
        height: 90px;
    }

    .menu-bar .header_top .nav-brand {
        gap: 40px;
    }

    .menu-bar .header_top #dnn_NavBanner_Pane {
        width: 480px;
    }

    .menu-bar .header_top .nav-brand .main-logo-site .slogan {
        font-size: 12px;
    }

    .menu-bar .header_top #dnn_NavBanner_Pane {
        width: 420px;
    }

    .menu-bar .header_top .nav-brand .logocontent .toplogocontent {
        font-size: 28px;
    }
    .menu-bar .header_top .nav-brand .logocontent .middlelogocontent {
        font-size: 20px;
    }
    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 14px;
    }

    .menu-bar .header_top .nav-brand img {
        width: 72px;
        height: 72px;
    }

    /* footer .main-footer > div {
        flex: 0 0 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }  */

    footer .main-footer {
        gap: 10px;
    }

    .menu-bar .header_top .nav_top_option > img {
        max-height: 135px;
    }
}

@media screen and (max-width: 1117px) {
    .sm-contra ul a span.sub-arrow {
        display: none;
    }

    .menu-bar .header_top .nav_top_option > img {
        max-height: 130px;
    }

    .header .contra-nav label {
        display: block;
        top: -93px;
        z-index: 100;
        left: 10px;
        margin: 0;
        float: unset;
        position: absolute;
    }

    .menu-bar .header_bottom > ul > li > a.has-submenu::after {
        content: none;
    }

    #main-menu-state:not(:checked)~.header_bottom .nav_option .icon-search {
        display: block;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10000;
        right: 20px;
        margin: 0;
        float: unset;
        position: absolute;
    }

    /* .menu-bar .header_top .nav_top_option {
        padding-left: 52px;
    } */

    .menu-bar .header_top .nav-brand {
        margin-left: 35px;
        padding: 0;
    }

    .main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
        background: #182940;
        width: 20px;
        /* background: #FFF; */
    }

    #main-menu-state:not(:checked)~.header_bottom #main-menu {
        display: none;
    }

    #main-menu-state:not(:checked)~.header_bottom .nav_option {
        padding: 10px;
    }

    #main-menu-state:not(:checked)~.header_bottom .nav-action {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    .menu-bar .header_top #dnn_NavBanner_Pane {
        width: 360px;
    }
}

@media screen and (max-width: 991px) {
    .menu-bar .header_top #dnn_NavBanner_Pane {
        display: none
    }
    .menu-bar .header_top {
        background: url(../images/nav_background_2.png) no-repeat center;
        padding: 15px;
    }
    .menu-bar .header_top .nav-brand {
        margin-left: 35px;
        padding: 0;
        gap: 60px;
    }

    .header_optional > .nav_header {
        position: static;
    }

    footer .main-footer .footer-main {
        flex-direction: column;
        justify-content: unset;
        gap: 10px;
    }

    footer .main-footer {
        gap: 10px;
    }

    /* .footer-CM > div {
        flex: unset;
    } */

    /* footer .main-footer > div {
        flex: 0 0 calc(100%/3 - 20px);
        max-width: calc(100%/3 - 20px);
    } */

    footer .main-footer > div:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    footer .main-footer .footer-main > .row {
        row-gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .onlinecounter-statistics {
        margin-left: 0;
        align-items: flex-start;
    }

    footer .follow-link {
        justify-content: flex-start;
    }

    .menu-bar .header_top .nav_top_option > img {
        display: none;
    }

    .menu-bar .header_top .nav-brand::after {
        width: 100%;
        left: 0;
    }

    .menu-bar .header_bottom > ul > li > ul > li > a,
    .menu-bar .header_bottom > ul > li > ul > li > ul > li > a {
        color: #FFF;
    }

    .menu-bar .header_bottom > ul > li > a.current::before, .menu-bar .header_bottom > ul > li > a:hover::before, .menu-bar .header_bottom > ul > li:hover > a::before {
        content: none;
    }

    .menu-bar .header_bottom > ul > li:last-child {
        margin-right: 15px;
    }

    .menu-bar .header_bottom > ul > li > a > span {
        display: block;
        padding-top: 6px;
    }

    .menu-bar .header_bottom > ul > li > a.has-submenu {
        margin-right: 0;
    }

    #main-menu-state:checked~.header_bottom .nav_option {
        padding-bottom: 10px;
        padding: 10px 0;
    }

    /* .header_optional > .nav_header {
        background: none;
    } */

    /* .menu-bar .header_bottom > ul > li > a {
        color: #D61C26;
    } */

    .menu-bar .header_bottom > ul > li > a.current, .menu-bar .header_bottom > ul > li > a:hover, .menu-bar .header_bottom > ul > li:hover > a {
        border-bottom: none;
        padding: 10px 0;
    }
    
    .menu-bar .header_top .nav-information {
        display: none;
    }

    .menu-bar .header_top .nav-brand {
        margin-left: 0;
    }

    .menu-bar .header_top .nav_top_option {
        justify-content: flex-start;
    }

    .menu-bar .logocontent {
        align-items: flex-start;
    }

    .menu-bar .header_top .nav_top_option {
        margin: 0;
    }

    .header .contra-nav label {
        left: unset;
        right: 0;
    }

    .menu-bar .header_bottom .icon-search {
        top: -58px;
        right: 50px;  
    }

    #main-menu:before {
        content: none;
    }

    .menu-bar .header_bottom {
        display: block;
    }

    .sm-contra > li:hover {
        background: none;
    }

    .menu-bar .header_bottom > ul > li > ul {
        background: none;
        box-shadow: none;
        padding: 0;
        margin-bottom: 10px;
    }

    .menu-bar .header_bottom > ul > li > ul > li {
        display: flex;
        align-items: center;
        padding-bottom: 15px;
    }

    .menu-bar .header_bottom > ul > li > ul > li:last-child {
        padding-bottom: 0;
    }

    .menu-bar .header_bottom > ul > li > ul > li > a {
        padding-bottom: 0;
    }

    /* .menu-bar .header_bottom > ul > li > ul > li::before {
        content: "\2022";  
        color: #FFF; 
        font-weight: bold; 
        display: inline-block; 
        width: 1em; 
        margin-left: -1em; 
    } */

    .fixed-header .header_optional > .nav_header {
        position: relative;
    }
}

@media screen and (max-width: 700px) {
    .menu-bar .header_top .nav-brand img {
        width: 64px;
        height: 64px;
    }

    .menu-bar .header_top .nav-brand {
        align-items: flex-start;
    }

    .logocontent .toplogocontent {
        font-size: 20px;
    }

    .logocontent .bottomlogocontent {
        font-size: 28px;
    }

    .header .contra-nav label {
        top: -80px;
    }

    /* .menu-bar .header_top .nav-brand .logocontent .toplogocontent {
        font-size: 18px;
    }

    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 28px;
    } */

    .menu-bar .header_top .nav-brand {
        gap: 20px;
    }
}

@media screen and (max-width: 600px) {
    .menu-bar .logocontent {
        display: none;
    }

    .menu-bar .header_top .nav-brand .logocontent .toplogocontent {
        font-size: 24px;
    }
    .menu-bar .header_top .nav-brand .logocontent .middlelogocontent {
        font-size: 16px;
    }
    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 12px;
    }

    .menu-bar .header_top .nav-brand {
        gap: 10px;
    }


    .extraoption {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .extraoption #currentTime::after {
        content: none
    }
}

@media screen and (max-width: 576px) {
    .footer .Footer_QR .QRCode {
        display: none;
    }

    .menu-bar .header_top .nav-brand .logocontent {
        display: none;
    }

    #currentTime {
        font-size: 14px;
    }

    /* footer .Footer_QR .Option ul {
        flex-direction: row;
        flex-wrap: wrap;
    } */

    footer .Footer_QR {
        justify-content: center;    
    }

    footer .main-footer .footer-main .footer-CM {
        display: none;
    }

    .header .contra-nav label {
        position: absolute;
        top: -85px;
    }

    footer .copyright {
        align-items: flex-start;
        flex-direction: column;
    }


    footer .copyright .follow-link {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    footer .footer-information ul li .address {
        width: unset;
    }
}

@media screen and (max-width: 460px) {
    .menu-bar .header_top .nav-brand img {
        width: 64px;
        height: 64px;
    }

    .menu-bar .header_bottom .icon-search {
        top: -55px;
    }

    .language-object {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
    }

    .language-object > *:not(:last-child)::after, .extraoption #currentTime::after {
        content: none
    }

    .menu-bar .header_top .nav-brand .logocontent .toplogocontent {
        font-size: 16px;
    }

    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 22px;
    }

    footer .Footer_ThongTin h2 {
        font-size: 16px;
    }

    .menu-bar .header_top .nav-brand .logocontent {
        gap: 4px;
    }

    .language-object > * {
        margin-right: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 380px) {
    .footer-CM > div {
        flex: 0 0 100%;
    }

    footer .main-footer .footer-action {
        flex-direction: column;
        align-items: flex-start;
    }
}