.header {
    transition: .5s ease-in-out;
    position: relative;
    display: block
}

.header .header_optional {
    box-shadow: 0 2px 4px rgba(30, 45, 190, .12);
    display: unset
}

.menu-bar .header_top {
    background-size: cover;
    z-index: 1;
    position: relative
}
.header_optional>.nav_header {
    width: 100%;
    transition: .5s ease-in-out;
    position: absolute;
    top: 0;
    z-index: 10;
}
.nav_header .nav_bottom_option{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 64px;
    transition: .5s ease-in-out;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.81) 0%, rgba(0, 0, 0, 0) 100%);

}
.content-layout .header_optional>.nav_header{
    position: unset;
}
.home-layout .fixed-header .nav_bottom_option,
.content-layout .nav_header .nav_bottom_option{
    background: #152847;
}
.nav_header .nav_bottom_option .nav-language{
    display: flex;
}
.menu-bar {
    background-color: #fff;
    border-bottom: none;
    display: unset
}

.fixed-header .header_optional>.nav_header {
    width: -webkit-fill-available;
    position: fixed;
    transition: .5s ease-in-out;
}


.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;
    padding: 25px 0;
    height: 100%;
    position: relative
}

.menu-bar .header_top .nav-brand::after {
    content: "";
    display: block;
    background: url(../images/bg-header.png) center no-repeat;
    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: flex-start;
    position: relative;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px
}

.menu-bar .header_top .nav-brand .logocontent .toplogocontent {
    text-transform: uppercase;
    color: #d61c26;
    font-family: "Roboto Flex";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1
}

.menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
    color: #d61c26;
    font-family: "Roboto Flex";
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.11;
    text-transform: uppercase
}

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

.menu-bar .header_bottom>ul>li {
    margin-right: 24px
}

#searchModal .modal-body .search .searchInputContainer,
.menu-bar .header_bottom>ul>li:hover {
    border: none
}

.menu-bar .header_bottom>ul>li>a {
    letter-spacing: .15px;
    color:  #fff;
    font-family: "Roboto Flex";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    padding: 12px 0;
    transition: none
}

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

.menu-bar .header_bottom>ul>li:hover>a::before,
.menu-bar .header_bottom>ul>li>a.current::before,
.menu-bar .header_bottom>ul>li>a:hover::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 16px;
    border-bottom: 4px solid #fff;
    left: 40%;
    border-radius: 4px;
}

.menu-bar .header_bottom>ul>li>a.has-submenu {
    /* padding-right: 22px */
}

/* .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: 50%;
    transform: translateY(-50%);
    right: 0
} */

.menu-bar .header_bottom>ul>li:hover>a::after,
.menu-bar .header_bottom>ul>li>a.has-submenu.current::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="%23841800"/></svg>') */
    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>');
}
/* .menu-bar .header_bottom>ul>li>a.has-submenu:hover::after */
.menu-bar .header_bottom>ul>li:last-child,
.menu-bar .mini_nav .header_bottom>ul>li:last-child {
    margin-right: 0
}

.menu-bar .header_bottom ul li>a[title="Đào tạo"]~.RenderChildNodesMegaMenu .MegaMenu-wrapper a .sub-arrow,
.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 Flex";
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .15px;
    color: #333;
    padding: 6px 16px
}

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

.menu-bar .header_bottom>ul>li>ul,
.menu-bar .header_bottom>ul>li>ul>li>ul {
    padding: 10px 0;
    box-shadow: 0 2px 4px 0 #00000026;
    transition: .5s ease-in-out;
    background: #fff;
    min-width: 15em !important;
}

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

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

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

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

.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 Flex";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.33;
    text-align: left;
    text-transform: uppercase;
    color: #e88a27;
    transition: none;
    padding: 0 0 10px
}

.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 Flex";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    color: #333;
    transition: 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: 0 0;
    color: #e88a27 !important;
    -webkit-line-clamp: unset;
    max-height: 200px;
    transition: .5s ease-in-out
}

@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 width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><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="%23D9D9D9"/></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="%231C1B1F"/></g></svg>')
    }

    #main-menu {
        -webkit-font-smoothing: subpixel-antialiased
    }

    #main-menu>li>ul.show-animation {
        -webkit-animation: .3s show-animation;
        animation: .3s show-animation
    }

    @-webkit-keyframes show-animation {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @keyframes show-animation {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    #main-menu>li>ul.hide-animation {
        -webkit-animation: .3s hide-animation;
        animation: .3s hide-animation
    }

    @-webkit-keyframes hide-animation {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }

    @keyframes hide-animation {
        0% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }
}

#searchModal .modal-content {
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .3);
    border: none
}

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

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

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

.extraoption #currentTime,
.language-object>:not(:last-child) {
    margin-right: 10px;
    padding-right: 10px
}

#searchModal .modal-body input {
    border-radius: 60px;
    border: 1px solid #ecd7c5;
    padding: 10px 15px;
    background: 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="%2373190F"/><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="%2373190F"/></svg>') no-repeat #fffbf0;
    background-position: calc(100% - 15px) 50%;
    outline: 0
}

footer {
    background: #234376;
    border: none;
    position: relative;
    padding: 0;
}
.yhy-append-wrap,
footer.footer-home{
    background: #152847;
}
.footer-top{
    position: relative;
    z-index: 2;
    background: #234376;
}
.footer-top .footer-top-wrapper{
    background-image: url(../images/bg-footer-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}
.main-footer {
    padding: 40px 0;
}

    .main-footer .container-footer {
        max-width: 1400px;
        margin: auto;
    }

    .main-footer .title-footer {
        color: #fff;
        text-align: left;
        font-size: 22px;
        line-height: 1.27;
        text-transform: uppercase;
        margin-bottom: 16px;
        font-family: "Roboto Flex", sans-serif;
        font-weight: 600;
    }

    .main-footer .info-content .about-investor,
    .infor-page-ct .about-investor {
        font-size: 15px;
        line-height: 1.5;
        font-weight: 400;
        font-family: 'Roboto';
    }

.form-dk-footer {
    font-family: 'Roboto';
}
footer .about-investor span,
footer .s-content a{
    font-family: "Roboto Flex", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    color: var(--white) !important;
    letter-spacing: 0.5px;
}
footer .s-content p{
    padding-bottom: 8px;
}
footer .s-content p:last-child{
    padding-bottom: 0;
}
.infor-page-ct .about-investor {
    color: #333333;
}

    .main-footer .info-content .about-investor span.fa,
    .infor-page-ct .about-investor span.fa {
        color: #fff;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .infor-page-ct .about-investor span.fa {
        color: #333;
    }

    .main-footer .info-content .about-investor .is-link,
    .infor-page-ct .about-investor .is-link {
        display: inline-block;
        padding: 0 5px 0 0;
        font-weight: 400;
        font-family: "Roboto Flex", sans-serif;
        word-break: break-all;
        color: #fff;
    }
.footer-bottom{
    background: #152847;
    padding: 16px 0;
}
footer::before {
    content: none;
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    top: -40px
}

footer .Footer_ThongTin {
    display: flex;
    flex-direction: column
}

footer .Footer_ThongTin * {
    color: var(--text-mi, #182940);
    font-family: "Roboto Flex";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.71
}

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: var(--red, #d61c26);
    font-family: "Roboto Flex";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.44;
    text-transform: uppercase;
    margin-bottom: 5px
}

footer .Footer_QR>* .Title,
footer .Footer_QR>* span {
    color: var(--text-mi, #182940);
    font-style: normal;
    font-weight: 500
}

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 {
    text-align: center;
    font-family: "Roboto Flex";
    font-size: 14px;
    line-height: 1.42;
    margin-bottom: 10px
}

footer .Footer_QR>* span {
    font-family: "Roboto Flex";
    font-size: 13px;
    line-height: 1.38
}

footer .copyright,
footer .copyright a {
    color: #58677a;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42
}

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
}

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

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

footer .copyright {
    font-family: "Roboto Flex";
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.extraoption #currentTime,
.language-object a,
.language-object span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Roboto Flex";
    font-size: 14px;
    line-height: 1.57;
    position: relative;
    color: #fff;
    font-weight: 500
}

footer .copyright a {
    font-family: "Roboto Flex";
    font-size: 14px
}

.menu-bar .mini_nav .header_bottom>ul>li>a,
.mini_nav h6 a,
.mini_nav>a.Home-link {
    font-family: "Roboto Flex";
    font-style: normal;
    line-height: 1.5
}

footer .main-footer {
    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
}

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

.extraoption,
.mini_nav>a.Home-link {
    align-items: center;
    display: flex
}

.language-object a,
.language-object span {
    font-style: normal
}

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

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

.extraoption #currentTime {
    font-style: normal
}

.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%);
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    background: var(--red, #d61c26);
    padding: 6px 12px
}

.mini_nav h6 a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--red, #d61c26);
    font-size: 22px;
    font-weight: 600;
    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>a {
    color: var(--text-mi, #182940);
    font-size: 16px;
    font-weight: 500;
    text-transform: none
}

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

@media screen and (max-width:1366px) {
    .menu-bar .header_bottom>ul>li {
        margin-right: 50px
    }

    .menu-bar .header_top .nav-action .search-group .searchInputContainer input {
        font-size: 14px;
        width: 280px
    }

    .menu-bar .header_top .nav-brand img {
        margin-right: 16px
    }
}

@media screen and (max-width:1240px) {
    .footer-CM>div {
        flex: 0 0 calc(50% - 30px)
    }

    .menu-bar .header_bottom>ul>li {
        margin-right: 45px
    }

    .menu-bar .header_bottom .icon-search {
        margin-left: 10px
    }

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

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

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

    footer .main-footer {
        gap: 10px
    }

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

@media screen and (max-width:1117px) {
    .nav_header .nav_bottom_option{
        position: relative;
        display: block;
        padding: 16px 32px;
    }

    #main-menu-state:not(:checked)~.header_bottom #main-menu,
    .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: 10000;
        /* left: 10px; */
        right: 10px;
        margin: 0;
        float: unset;
        position: absolute
    }

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

    .menu-bar .header_bottom .icon-search {
        display: block;
        top: -62px;
        z-index: 10000;
        right: 20px;
        margin: 0;
        float: unset;
        position: absolute
    }

    .menu-bar .header_top .nav-brand {
        margin-left: 45px
    }

    .main-menu-btn-icon,
    .main-menu-btn-icon:after,
    .main-menu-btn-icon:before {
        background: #fff;
        width: 20px;
    }

    #main-menu-state:not(:checked)~.header_bottom .nav-action {
        display: flex
    }
    .header .contra-nav label {
        top: -85px !important;
        right: -75px !important;
    }
}

@media screen and (max-width:991px) {
    .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 .main-footer>div:first-child {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media screen and (max-width:767px) {

    .menu-bar .header_top .nav-information,
    .menu-bar .header_top .nav_top_option>img {
        display: none
    }

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

    #main-menu:before,
    .menu-bar .header_bottom>ul>li:hover>a::before,
    .menu-bar .header_bottom>ul>li>a.current::before,
    .menu-bar .header_bottom>ul>li>a:hover::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
    }

    .header_optional>.nav_header,
    .sm-contra>li:hover {
        background: 0 0
    }

    .menu-bar .header_bottom>ul>li:hover>a,
    .menu-bar .header_bottom>ul>li>a.current,
    .menu-bar .header_bottom>ul>li>a:hover {
        border-bottom: none
    }

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

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

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

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

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

    .menu-bar .header_bottom {
        display: block
    }

    .menu-bar .header_bottom>ul>li>ul {
        background: 0 0;
        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,
    .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: 700;
        display: inline-block;
        width: 1em;
        margin-left: -1em
    }
}

@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,
    .menu-bar .header_top .nav-brand .logocontent .bottomlogocontent {
        font-size: 28px
    }

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

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

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

    .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,
    footer .main-footer .footer-main .footer-CM {
        display: none
    }

    footer .Footer_QR {
        justify-content: center
    }

    .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
    }

    #currentTime {
        display: none
    }

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

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

    .menu-bar .header_top .nav-brand .logocontent .toplogocontent,
    footer .Footer_ThongTin h2 {
        font-size: 16px
    }

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

    .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
    }
}