@media screen and (max-width: 567px) {
    
    
    .img-ex-right {
        width: 90% !important;
    }
    .title-sub-frame5 {
        width: 90%!important;
    }
    .title-sub-frame5 img {
        width: 50px;
    }
    .title-border img {
        width: 95% !important;
    }

    .col-20 {
        width: calc(50% - 10px) !important;
        margin-right: 10px;
    }

    .box-ex-img {
        padding: 15px;
    }

    .box-ex-img img {
        width: 80px;
    }

    #frame5 .row1 ul:after {
        content: "";
        width: 30px;
        height: 30px;
        opacity: 0
    }
    #frame5 .row1 ul:before {
        bottom: 42px;
        border-top-width: 5px;
    }
    .icon-ex{
        top: 0;
    }
    .item-f7{
        padding:0;
    }
    .des-f7{
        padding: 25px;
        margin-top: 60px
    }
    
}

@media screen and (max-width: 767px) {
    #frame7 {
        background: url(../img_Mobile/vongtron-bg.png) center;
        background-size: cover !important;
    }
    .btn-take-interest:before{
        border-radius: 12px;
    }
    #frame7 .main-content {
        padding: 0
    }
    #frame2 .txt-join-our a {
        width: 85%;
        margin: 30px auto;
        border-radius: 15px;
        box-shadow: 1px 1px 13px #0080c2;
        font-size: 13px;
    }
    .title-pos-f7.active .img-show span{
        font-size: 11px;
    }
    .auto-scroll p {
        padding: 0;
    }
    .blob-btn__inner{
        border-radius: 15px;
    }
    .content-des-f7 {
        margin: 25px 0 0 0;
    }
    .bg-btn-test:after {
        display: none;
    }
    .title-select-pro {
        border-width: 1px;
        border-radius: 10px;
        background: #fff;
    }
    #frame6 .title-lv2, #frame6 .title-lv1 {
        display: none;
    }
    .row-reverse-mb {
        flex-direction: row-reverse
    }

    .opportunities {
        background: url(../img_Mobile/bg-WhatForYou.jpg) -35px;
        background-size: cover;
    }
    .gr-content-sub p{
        padding-right: 10px
    }
    .des-MT-Program {
        margin-top: 30px;
        margin-left: 30px;
        margin-right: 30px;
    }
    .btn-take-interest {
        font-size: 15px;
        width: 90%;
        margin: 15px auto;
        border-radius: 12px;
        padding: 10px 15px;
    }
    .des-WhoWeAre {
        margin-top: 15px
    }
    .des-WhoWeAre .panel-heading.collapsed button {
        margin-bottom: 10px;
    }

    .des-WhoWeAre .panel-heading button {
        font-size: 20px;
        border-radius: 14px;
        height: 55px;
        width: 90%;
    }
    #frame6 .title-frame{
        text-align: center;
        height: auto;
        margin-bottom: 20px
    }
    #frame3 {
        background: url(../img_Mobile/bg-LookingFor.jpg);
        background-size: cover;
        padding-top: 30px !important;
        padding-bottom: 20px;
    }
    .navbar-toggle .icon-bar {
        background-color: #000 !Important;
    }
    .view-desktop {
        display: none;
    }
    .view-mobile{
        display: block
    }
    #frame7 .title-pos-f7 {
        font-size: 14px !important;
        width: 120px;
        height: 120px;
        margin: 0;
        flex-basis: 120px;
        flex-shrink: 0;
    }
    .gr-img-f7 .carousel-indicators {
        flex-wrap: revert;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-left: 0;
        justify-content: flex-start
    }
    .title-pos-f7.active .img-show img, .title-pos-f7.active .img-show::after {
        width: 120px;
        height: 120px;
    }
    .content-des-f7{
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    .auto-scroll {
        height: 260px;
        width: 100%!important
    }
    .auto-scroll p{
        padding-right: 10px
    }
    #frame5 .title-frame {
        position: relative;
        transform: translate(0)
    }
    #footer{
        margin-top: -50px
    }
    #frame5 ul li h5 {
        font-size: 17px
    }
    #frame2 {
        padding-top: 20px;
        background: #0d2a8a
    }
    #frame2 .title-frame {
        color: #fff;
    }
    .title-frame {
        font-size: 24px;
        margin: 20px 0;
    }
    .txt-join-our a{
        font-size: 18px!important;
    }
    #frame5 .row1 ul li, #frame5 .row2 ul li p {
        font-size: 16px;
    }
    #frame2 .progressbar li:before {
        width: 40px;
        font-size: 60px;
    }
    .gr-frame{
        background: transparent;
    }
    #frame2 .progressbar li.row-reverse-mb:before {
        margin-left: 20px
    }
    #frame5 {
        background: url(../../MT/img_Mobile/roadmap-bg.jpg) right no-repeat;
        background-size: cover!important;
        padding-bottom: 50px
    }
    .gr-img-f7 .item-f7:nth-child(2), .gr-img-f7 .item-f7:nth-child(5), .gr-img-f7 .item-f7:nth-child(4), .gr-img-f7 .item-f7:nth-child(6) {
        top: 0
    }
    .show-description h5, .txt-h5{
        font-size: 16px;
    }
    .txt-candi {
        margin: 20px 0
    }
    .des-WhoWeAre .panel-body ul{
        width: 100%;
        border-radius: 14px;
        margin-top: -30px;
        padding-top: 60px
    }
    .description-candidate, .internal-candidate .description-candidate {
        border-radius: 0
    }
    #frame3 .main-content .main-content-bottom {
        padding-top: 0px
    }
    #frame3 .show-description{
       padding: 0 10px
    }
    #frame2 .column-right {
        margin-top: 20px
    }
    #frame2 .title-border img{
        margin-bottom: 40px
    }
    .list-WFU{
        padding-top: 30px;
        background-size: cover;
        padding-bottom: 50px
    }
    .list-WFU .title-frame{
        margin-top: 20px;
        margin-bottom: 20px
    }

    .gr-img-f7{
        display: block
    }
    #frame6 .main-content-top {
        display: block;
    }
    #frame4 .main-content{
        padding: 0;
    }
    .text-select-pro ul li{
        padding-bottom: 5px;
    }
    .text-select-pro ul {
        padding: 20px 0 0 0
    }
    #frame6 .title-border img {
        margin-bottom: 0;
    }
    .gr-frame-bottom{
        background: #fff
    }
    #frame5 .main-content {
        margin-top: 0;
    }
    .description-candidate:after {
        display: none;
    }
    #frame6 .main-content-top.align-left {
        text-align: center !important;
    }
    #frame4 .slick-slide {
        margin: 0 10px
    }
    .col-20 {
        width: calc(20% - 10px);
        margin-right: 10px;
    }
    .line-slider-left, .line-slider-right{
        display: none;
    }
    .col-20 {
        width: calc(33% - 20px);
        margin-bottom: 15px;
    }
    #frame2 .progressbar li{
        width: 100%;
        margin-bottom: 20px
    }
    #frame2 .progressbar li p, #frame2 .progressbar + .progressbar li p {
        width: 70%
    }
    #frame2 .progressbar,#frame2 .progressbar + .progressbar {
        display: block;
    }
    .main-content {
        padding: 0 10px;
    }
    #frame2 .content-about {
        display: block
    }
    .column-left > iframe, #frame2 .column-left, #frame2 .column-right {
        width: 100% !important
    }
    #frame2 .icon-frame2{
        display: none;
    }
    #frame2 .title-border {
        top: 0;
    }
    .title-border img, #frame3 .main-content-top img{
        width: 85%;
        margin-bottom: 30px
    }
    .navbar-header {
        margin: 0;
    }
    .flex-frame-3{
        flex-direction: column;
    }
    #frame2 .progressbar{
        margin-bottom: 0px;
        margin-top: 10px
    }
    .candidate{
        margin-bottom: 40px
    }
    .external-candidate .d-flex {
        flex-direction: column-reverse;
    }
    .internal-candidate .d-flex {
        flex-direction: column;
    }
    .description-candidate{
        padding: 20px!important;
        margin-top: 10px
    }
    .txt-start-journey img{
        width: 100%;
    }
    #frame4{
        padding-top: 0;
    }
    .title-lv2 {
        font-size: 30px;
    }

    .tab-content {
        margin: 0;
        padding: 20px;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    #frame6 .txt-h5{
        text-align: center;
        font-size: 16px;
        height: auto;
        margin-bottom: 40px
    }
    #frame6 .txt-h5 img{
        width: 95px
    }
    .circle-arrow-btn {
        width: 50px;
    }

    #frame7 {
        padding-top: 30px;
        background-size: cover;
        padding-bottom: 40px
    }
    #frame7 .main-content-top{
        margin-bottom: 20px;
        padding-top: 20px;
    }
    #frame7 .w80 {
        width: 95%;
    }
    
    .title-sub-frame6 {
        margin-bottom: 20px;
    }
    .tab-custom{
        margin-top: 0px
    }
    .title-main-content-tab{
        position: relative;
        top: 0;
        border: none;
        padding: 0;
        right: 0;
    }
    #frame6 .title-main-content-tab{
        padding: 10px 20px
    }
    .f7-title-lv1 {
        font-size: 23px
    }
    .f7-title-lv1, .f7-title-lv2{
        padding: 0
    }
    .f7-title-lv2{
        font-size: 18px;
        margin-bottom: 10px
    }
    #frame7 .carousel .carousel-control, #frame7 .carousel .carousel-control{
        display: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .gr-img-f7 {
        flex-wrap: wrap;
    }
    .item-f7{
        width: 33.3%;
    }
    .gr-img-f7 .item-f7:nth-child(2), .gr-img-f7 .item-f7:nth-child(5), .gr-img-f7 .item-f7:nth-child(4), .gr-img-f7 .item-f7:nth-child(6) {
        top: 0
    }
    #frame7 .title-pos-f7{
        margin: 10px auto 20px auto;
        max-width: 160px
    }
    .des-f7{
        margin-top: 90px
    }
    .col-20 {
        width: calc(20% - 10px);
        margin-right: 10px;
    }
    #frame2 .progressbar li p, #frame2 .progressbar + .progressbar li p{
        width: 65%;
    }
    .txt-start-journey img {
        width: 70%;
    }

}

@media screen and (max-width: 991px) {
    .menu-right {
        bottom: 0;
        top: auto;
        display: none
    }
    .img-ex-right{
        width: 60%;
        margin: 0 auto;
    }
    #frame5 .main-content-top {
        display: block;
    }
    .title-sub-frame5{
        width: 60%;
        margin: 30px auto 20px auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    #frame6{
        width: 100%;
        margin-top: 0px
    }
    
    #frame6 .panel-heading{
        max-width: 230px;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1101px) and (max-width: 1250px) {
    header .navbar-nav {
        float: none
    }
    #navbar a{
        padding: 15px;
    }
    .main-content, .container-custom {
        padding: 0 60px
    }

    .description-candidate {
        height: 307px;
    }
    #frame7 .title-pos-f7{
        font-size: 16px;
    }
}

@media only screen and (max-width: 1100px) {
    .title-main-content-tab{
        min-width: auto
    }
    #frame7 .title-pos-f7 {
        font-size: 15px;
    }
    #frame1 {
        margin-top: 0;
    }

    .description-candidate {
        height: 264px;
        padding: 10px;
    }
    .main-content, .container-custom{
        padding: 0 15px
    }
    .navbar-brand-custom-2 {
        padding: 0 15px;
        position: absolute;
        right: 59px;
    }

    .navbar-brand > img {
        width: 100px !important;
        margin-left: 15px;
    }

    header .collapse.in {
        display: block !important;
    }

    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
        margin-right: 25px;
        border: none;
        background-color: #fff!important
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 0;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        
    }
    .hight-light-menu a {
        max-width: 160px;
        margin-bottom: 10px
    }
    .menu-right ul li {
        width: 45px;
    }

    .menu-right ul li a {
        font-size: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}
@media only screen and (min-width: 1200px) {
    #frame6 .tab-content {
        min-height: 615px
    }
}