.order-top{
    background: #FF9600;
}
.order-top.communicative{
    background: #FF9600;
}
.order-top .order-top-content{
    position: relative;
    max-width: 770px;
    padding: 40px 25px 80px;
    margin: auto;
}
.order-top .order-top-content h1{
    margin: 0;
    color: #fff;
    font-size: 34px;
    font-family: 'balootammabold';
    text-align: center;
}
.order-top .order-top-content .description{
    max-width: 666px;
    text-align: center;
    margin-top: 10px;
    color: #fff;
    font-size: 18px;
    display: block;
}
.order-top .order-top-content.active .description{
    display: none;
}
.order-top .order-top-content .full-desctiption{
    display: none;
}
.order-top .order-top-content.active .full-desctiption{
    display: block;
}
.order-top .order-top-content .description-item{
    margin-top: 40px;
    float: left;
}
.order-top .left{
    width: 200px;
    float: left;
    padding-right: 50px;
}
.order-top .left.revert{
    float: right;
    padding-right: 0;
    padding-left: 50px;
}
.order-top .left img{
    width: 100%;
}
.order-top .right{
    float: left;
    width: calc(100% - 200px);
}
.order-top .right h4{
    margin: 0;
    font-size: 20px;
    color: #fff;
    font-family: 'balootammabold';
}
.order-top .right .content{
    margin-top: 20px;
    font-size: 15px;
    color: #fff;
    font-family: 'balootammamedium';
    line-height: 25px;
}
.order-top .line{
    height: 1px;
    width: 100%;
    background: #fff;
    margin-top: 40px;
}
.order-top .top-note{
    margin-top: 40px;
}
.order-top .top-note h5{
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-family: 'balootammabold';
}
.order-top .top-note .note{
    margin-top: 15px;
    font-size: 15px;
    color: #fff;
    font-family: 'balootammamedium';
}
.order-top .view-more{
    display: block;
    position: absolute;
    bottom: -18px;
    width: 110px;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
}
.order-top .view-more span{
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-family: 'balootammasemibold';
    text-transform: uppercase;
    opacity: 0.83;
    margin-bottom: 5px;
}
.order-top .order-top-content.active .view-more span{
    display: none;
}
.order-top .order-top-content.active .view-more svg{
    transform: rotate(180deg);
}
.order-course{
    max-width: 1150px;
    margin: auto;
    padding: 60px 25px 0px;
}
.order-course h2{
    margin: 0;
    text-align: center;
    font-size: 34px;
    color: #201F1F;
    font-family: 'balootammaextrabold';
}
.order-course h6{
    margin: 5px 0px 0px;
    text-align: center;
    font-size: 34px;
    color: #201F1F;
    font-family: 'balootammabold';
}
.order-course .order-course-item{
    max-width: 1098px;
    margin: 10px auto 0px;
}
.order-course .course-item{
    margin: 30px 11px 0px;
    width: 258px;
    height: 318px;
    border-radius: 23px;
    border: 1px solid #E5E5E5;
    background: #f0f0f0;
    padding: 15px;
    position: relative;
    float: left;
}
.order-course .course-item.a0.active{
    background: #ffc800;
    border-color: #ffc800;
}
.order-course .course-item.a1.active{
    background: #CE82FF;
    border-color: #CE82FF;
}
.order-course .course-item.a2.active{
    background: #FF9600;
    border-color: #FF9600;
}
.order-course .course-item.b1.active{
    background: #FC4848;
    border-color: #FC4848;
}


.order-course .course-item .font{
    position: absolute;
    background: #fff;
    left: 15px;
    right: 15px;
    border-radius: 13px;
    top: 15px;
    bottom: 15px;
    z-index: 1;
    text-align: center;
    padding-top: 75px;
}
.order-course .course-item .back{
    position: absolute;
    background: #AFAFAF;
    left: 15px;
    right: 15px;
    border-radius: 13px;
    top: 15px;
    bottom: 15px;
    z-index: 1;
    display: none;
    padding: 40px 15px 20px;
    text-align: center;
    background: url(../images/order-course-bg.png);
}
.order-course .course-item.entered .font{
    display: none;
}
.order-course .course-item.entered .back{
    display: block;
}
.order-course .course-item .font img{
    width: 130px;
}
.order-course .course-item .font .name{
    color: #777777;
    font-size: 20px;
    font-family: 'balootammasemibold';
    margin-top: 15px;
}
.order-course .course-item .back .name-vi{
    color: #fff;
    font-size: 22px;
    font-family: 'balootammasemibold';
}
.order-course .course-item .back .time{
    margin-top: 15px;
    color: #fff;
}
.order-course .course-item .back .time strong{
    font-family: 'balootammasemibold';
}
.order-course .course-item .back .price{
    width: 151px;
    height: 39px;
    margin: 5px auto 0px;
    border: 1px solid #fff;
    border-radius: 9px;
    line-height: 39px;
    color: #fff;
    font-size: 15px;
}
.order-course .course-item .back .price strong{
    font-weight: 100;
    font-size: 18px;
    font-family: 'balootammabold';
}
.order-course .course-item .back a{
    display: block;
    width: 151px;
    height: 39px;
    text-align: center;
    margin: 10px auto;
    border-radius: 9px;
    background: #fff;
    line-height: 42px;
    color: #AFAFAF;
    font-size: 15px;
    font-family: 'balootammabold';
    text-transform: uppercase;
    color: #1CB0F6;
    border: 1px solid #1CB0F6;
}
.order-course .course-item .back a.btn-choose{
    color: #1CB0F6;
    border: 1px solid #1CB0F6;
}
.order-course .course-item .back a:hover{
    text-decoration: none;
}
.order-course .course-item .back a.btn-choosed,
.order-course .course-item.active .back a.btn-choose{
    display: none;
}
.order-course .course-item.active .back a.btn-choosed{
    display: block;
}
.full-course{
    margin-top: 40px;
}
.full-course{
    background: #1CB0F6;
    border-radius: 23px;
}
.full-course-content{
    padding: 30px 50px 30px 40px;
    background: url(../images/order-skills-bg.png);
    background-size: cover;
    
}
.full-course h5{
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-family: 'balootammabold';
}
.full-course-content .left{
    float: left;
    width: 300px;
}
.full-course-content .left .time{
    margin-top: 10px;
    color: #fff;
    font-size: 18px;
}
.full-course-content .left .time strong{
    font-weight: 100;
    font-size: 25px;
    font-family: balootammasemibold;
    margin-left: 10px;
}
.full-course-content .left .price{
    margin-top: 10px;
    color: #fff;
    font-size: 18px;
}
.full-course-content .left .price strong{
    font-weight: 100;
    font-size: 28px;
    font-family: balootammabold;
    margin-left: 20px;
}
.full-course-content .left .price-store{
    font-weight: 100;
    font-size: 20px;
    padding-left: 90px;
    color: #fff;
    text-decoration: line-through;
    opacity: 0.6;
    margin-top: -8px;
}
.full-course-content .middle{
    float: left;
    width: calc(100% - 455px);
    padding-left: 40px;
    padding-right: 20px;
    padding-top: 10px;
}
.full-course-content .right{
    width: 151px;
    float: right;
}
.full-course-content .middle .special{
    color: #fff;
    font-size: 18px;
    margin-top: 5px;
}

.full-course-content .right a{
    display: block;
    background: #fff;
    border-radius: 9px;
    height: 39px;
    text-align: center;
    line-height: 41px;
    color: #1cb0f6;
    font-size: 15px;
    font-family: 'balootammabold';
    text-transform: uppercase;
    margin-top: 25px;
}
.full-course-content .right a:hover{
    text-decoration: none;
}
.full-course-content .right a.btn-choosed{
    display: none;
}
.full-course.active .full-course-content .right a.btn-choose{
    display: none;
}
.full-course.active .full-course-content .right a.btn-choosed{
    display: block;
}
.premium-form{
    margin-top: 40px;
}
.premium-form h2{
    margin: 0;
    text-align: center;
    font-size: 34px;
    color: #201F1F;
    font-family: 'balootammaextrabold';
}
.premium-form h6{
    margin: 5px 0px 0px;
    text-align: center;
    font-size: 34px;
    color: #201F1F;
    font-family: 'balootammabold';
}
.premium-form .form-content{
    max-width: 555px;
    margin: 40px auto;
}
.premium-form .form-content input[type="text"],
.premium-form .form-content input[type="email"]{
    border: 1px solid #E5E5E5;
    height: 59px;
    background: #FAF9FC;
    border-radius: 18px;
    font-size: 18px;
    font-family: 'balootammasemibold';
    margin-top: 18px;
    padding-left: 20px;
}
.premium-form .form-content input[type="text"]:focus,
.premium-form .form-content input[type="email"]:focus{
    box-shadow: none;
    outline: none;
}
.premium-form .form-content h4{
    margin: 0 0 20px;
    font-size: 20px;
    color: #201F1F;
    font-family: 'balootammabold';
}

/* The.group-checkbok */
.group-checkbok {
    display: block;
    position: relative;
    padding-left: 50px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 100;
    padding-top: 5px;
    color: #777777;
    line-height: 30px;
}

/* Hide the browser's default checkbox */
.group-checkbok input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    width: 35px;
    background-color: #fff;
    border-radius: 9px;
    border: 1px solid #E5E5E5;
}

/* On mouse-over, add a grey background color */
.group-checkbok:hover input ~ .checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.group-checkbok input:checked ~ .checkmark {
    
    background-color: #D7FFB8;
    border-color: #58CC02;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.group-checkbok input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.group-checkbok .checkmark:after {
    left: 12px;
    top: 6px;
    width: 10px;
    height: 15px;
    border: solid #58CC02;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.student-group{
    margin-top: 15px;
}
.premium-form .form-content button{
    border: 0;
    height: 51px;
    display: block;
    width: 100%;
    max-width: 326px;
    margin: 30px auto;
    background: #1CB0F6;
    border-bottom: 4px solid #1899D6;
    border-right: 4px solid #1899D6;
    border-radius: 16px;
    line-height: 53px;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'balootammabold';
}
.student-msg{
    display:none; 
    font-size: 13px;
    font-family: balootamma;
    margin-top: 5px;
}
.student-msg strong,
.student-msg a{
    color: #FF9600;
    font-family: 'balootammasemibold';
    font-weight: 100;
}

.order-comment{
    max-width: 1245px;
    margin: auto;
    padding: 0 25px 60px;
}
.order-comment .order-comment-content{
    padding: 60px 47px 0px;
}


.order-comment h2{
    margin: 0;
    color: #201F1F;
    font-size: 34px;
    text-align: center;
    font-family: 'balootammabold';
}
.order-comment .comment-content{
    width: calc(100% + 22px);
    margin-top: 30px;
}
.order-comment .commment-item{
    width: 353px;
    height: 320px;
    background: #F7F7F7;
    border-radius: 21px;
    padding: 30px 25px 30px 30px;
    margin: 30px 0px 0px;
    float: left;
    position: relative;
    border: 1px solid #e5e5e5;
}
.order-comment .commment-item .comment{
    font-size: 15px;
    font-family: balootammamedium;
    color: #4c4c4c;
}
.order-comment .commment-item .name{
    font-size: 18px;
    color: #4c4c4c;
    font-family: 'balootammabold';
    margin-top: 5px;
}
.order-comment .commment-item .item-avatar{
    width: 101px;
    height: 101px;
    background: #fff;
    border-radius: 52px;
    padding: 5px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%);
}
.order-comment .commment-item .item-avatar img{
    width: 100%;
    height: 100%;
    border-radius: 52px;
}
.order-action{
    background: #FF9600;
}
.order-action .order-action-content{
    max-width: 930px;
    padding: 40px 25px;
    margin: auto;
}
.order-action .order-action-content h6{
    margin: 0;
    color: #FFFFFF;
    font-size: 34px;
    font-family: 'balootammabold';
    text-align: center;
}
.order-action .order-action-content .action-content{
    margin-top: 25px;
    text-align: center;
}
.order-action .order-action-content .btn-order{
    width: 100%;
    display: inline-block;
    max-width: 326px;
    height: 51px;
    background: #fff;
    border-radius: 16px;
    line-height: 53px;
    color: #FF9600;
    font-size: 15px;
    font-family: 'balootammabold';
    border-right: 4px solid #FFF4BE;
    border-bottom: 4px solid #FFF4BE;
    margin-right: 10px;
}
.order-action .order-action-content .btn-order:hover{
    text-decoration: none;
}
.order-action .order-action-content .btn-learning{
    width: 100%;
    display: inline-block;
    max-width: 326px;
    height: 51px;
    border: 1px solid #fff;
    border-radius: 16px;
    line-height: 53px;
    color: #fff;
    font-size: 15px;
    font-family: 'balootammabold';
    border-right: 4px solid;
    border-bottom: 4px solid;
    background: #FF9600;
    margin-left: 10px;
}
.order-action .order-action-content .btn-learning:hover{
    text-decoration: none;
}
.order-video .order-video-content{
    max-width: 1150px;
    margin: auto;
    padding: 10px 25px 10px;
}
.order-video .order-video-content .left{
    width: 50%;
    float: left;
}
.order-video .video-image{
    background: url(../images/order-video-bg.svg);
    padding: 25px;
    background-size: cover;
    border-radius: 20px;
}
.order-video .video-image video{
    width: 100%;
    border-radius: 14px;
}
.order-video .right{
    float: left;
    width: 50%;
    padding-left: 30px;
}
.order-video .right h6{
    margin: 0;
    color: #201F1F;
    font-size: 32px;
    font-family: 'balootammabold';
}
.order-video .right .content{
    color: #777777;
    font-size: 15px;
    font-family: balootammamedium;
    margin-top: 5px;
}
.hotline-group{
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px;
    margin-top: 15px;
    background: #FAF9FC;
}
.hotline-group .hotline-title{
    color: #777777;
    font-size: 20px;
    font-family: balootammasemibold;
}
.hotline-group .hotline-content{
    position: relative;
    padding-left: 45px;
    color: #1CB0F6;
    font-size: 30px;
    font-family: balootammabold;
    margin-top: 5px;
}
.hotline-group .hotline-content::before{
    content: "";
    width: 38px;
    height: 38px;
    display: inline-block;
    background: url(../images/order-phone.svg);
    position: absolute;
    left: 0;

}
.hotline-group .hotline-time{
    color: #777777;
    font-size: 15px;
    margin-top: 5px;
}
.zalo-content{
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px 10px 3px;
    margin-top: 10px;
    background: #FAF9FC;
}
.zalo-content span{
    color: #777777;
    font-size: 20px;
    font-family: balootammasemibold;
}
.zalo-content strong{
    font-weight: 100;
    color: #1CB0F6;
    font-size: 20px;
    font-family: balootammasemibold;
}
.email-content{
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px 10px 3px;
    margin-top: 10px;
    background: #FAF9FC;
}
.email-content span{
    color: #777777;
    font-size: 20px;
    font-family: balootammasemibold;
}
.email-content strong{
    font-weight: 100;
    color: #1CB0F6;
    font-size: 20px;
    font-family: balootammasemibold;
}
.email-content .description{
    color: #777777;
    font-size: 15px;
}
.order-comment .owl-carousel .owl-stage-outer{
    height: 400px;
}
.description-content{
    color: #777777;
    font-size: 15px;
    font-family: 'balootammamedium';
    margin-top: 10px;
}



 .tab-item-content{
    max-width: 100%;
}
.tab-item-content.tab-item-plan{
    border-radius: 18px;
}
.tab-item-content.tab-item-student{
    border-radius: 18px 0px 18px 18px;
}
.tab-level.tab-level-hidden + .tab-list .tab-item-content.tab-item-student{
    border-radius: 18px;
}
.tab-item-content.active{
    display: block;
}
.tab-item-content .item-content{
    padding: 20px 0px 14px 20px;
}
.tab-item-content .item-content .owl-item{
    margin-right: 20px;
}
.tab-item-content .item-content .item{
    width: 150px;
    height: 175px;
    float: left;
    margin-right: 0px;
}
.tab-item-content .item-content .item a{
    display: block;
}
.tab-item-content .item-content .item a img{
    display: block;
}
.tab-item-content .item-content .item a span{
    width: 23px;
    height: 23px;
    display: block;
    margin: auto;
    border: 1px solid #DCDEF6;
    border-radius: 12px;
    margin-top: 7px;
    padding: 3px;
}
.tab-item-content .item-content .item.active a span{
    border-color: #5C6CFC;
}
.tab-item-content .item-content .item.active a span i{
    display: block;
    background: #5C6CFC;
    height: 15px;
    width: 15px;
    border-radius: 10px;
}

.special-content .content{
    float: left;
    width: calc(100% - 50px);
    padding-left: 20px;
    font-size: 20px;
    font-family: 'balootammasemibold';
    color: #fff;
    margin-top: 10px;
}

.course-info .switch {
    position: relative;
    display: inline-block;
    width: 49px;
    height: 24px;
    margin-top: 10px;
    float: left;
}

.course-info .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.course-info .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(255,255,255,0.7);
    -webkit-transition: .4s;
    transition: .4s;
}

.course-info .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #1CB0F6;
    -webkit-transition: .4s;
    transition: .4s;
}
.course-info.grammar .slider:before{
    background-color: #01cb7e;
}
.course-info.sentence .slider:before{
    background-color: #ea2b2b;
}
.course-info.pronunciation .slider:before{
    background-color: #ff9600;
}
.course-info.natural .slider:before{
    background-color: #58cc02;
}
.course-info.music .slider:before{
    background-color: #ce82ff;
}
.course-info.writing .slider:before{
    background-color: #2b70c9;
}

.course-info input:checked + .slider {
    background-color: #fff;
}

.course-info input:focus + .slider {
    box-shadow: 0 0 1px #fff;
}

.course-info input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.course-info .slider.round {
    border-radius: 34px;
}

.course-info .slider.round:before {
    border-radius: 50%;
}






.calculate-compare{
    max-width: 1245px;
    margin: auto;
    padding: 0 25px 60px;
}
.calculate-compare-container{
    border-top: 1px solid #E5E5E5;
    padding: 60px 47px 0px;
}
.calculate-compare h2{
    margin: 0;
    text-align: center;
    font-size: 34px;
    font-family: balootammabold;
}
.calculate-compare .calculate-compare-content{
    margin-top: 50px;
    border: 1px solid #CFCFCF;
    border-radius: 20px;
    padding: 0px 20px;
}
.calculate-compare .compare-item{
    padding: 25px 0px 20px; 
    min-height: 90px;
    border-bottom: 1px solid #e5e5e5;
}
.calculate-compare .compare-item:last-child {
    border-bottom: 0;
}
.calculate-compare .compare-item .item-left{
    float: left;
    width: 220px;
    text-align: center;
    
}

.calculate-compare .compare-item .item-middle{
    width: 200px;
    float: left;
    min-height: 50px;
}
.calculate-compare .compare-item.compare-header .item-left .content{
    font-size: 19px;
    font-family: 'promtsemibold';
    margin-top: 30px;
}
.calculate-compare .compare-item.compare-header .item-middle .content{
    font-size: 19px;
    font-family: 'promtsemibold';
    margin-top: 30px;
}
.calculate-compare .compare-item .item-right{
    width: calc(100% - 420px);
    float: left;
}
.calculate-compare .compare-item.compare-header .item-right  .content{
    font-size: 19px;
    font-family: 'promtsemibold';
    margin-top: 30px;
}
.calculate-compare .line{
    margin: 0;
}
.calculate-compare .compare-item.compare-body .item-left .content{
    color: #FF9600;
    font-size: 18px;
    font-family: 'promtsemibold';
}
.calculate-compare .compare-item.compare-body .item-right .content{
    color: #777777;
    font-size: 15px;
    font-family: 'promtmedium';
    margin-bottom: 15px;
    text-align: left;
}
.calculate-compare .compare-item.compare-body .item-right .content-item{
    font-size: 14px;
    color: #777777;
    margin-bottom: 8px;
    position: relative;
    padding-left: 10px;
    text-align: left;
}

.calculate-compare .compare-item.compare-body .item-right .content-item::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #777777;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 6px;
}
.calculate-compare .compare-item .item-middle .content span{
    display: block;
    font-size: 15px;
    color: #777777;
}
.calculate-compare .compare-item .item-middle .content span strong{
    font-family: balootammabold;
}

.choose-group{
    margin-top: 20px;
}
.choose-group .title{
    color: #201F1F;
    font-size: 20px;
    font-family: 'balootammabold';
}
.choose-group .choose-group-content{
    border: 1px solid #E5E5E5;
    border-radius: 18px;
    padding: 20px 20px 15px;
    margin-top: 15px;
    margin-bottom: 30px;
}
.choose-group .choose-group-content .name{
    position: relative;
    padding-left: 25px;
    color: #777777;
    font-size: 18px;
    line-height: 21px;
}
.choose-group .choose-group-content .name::before{
    content: "";
    background: #BBF2FF;
    width: 11px;
    height: 11px;
    border-radius: 6px;
    position: absolute;
    left: 0px;
    top: 3px;
}

@media(max-width: 767px){
    .order-top .left{
        float: none;
        padding: 0;
        margin: auto;
    }
    .order-top .right{
        float: none;
        width: 100%;
        margin-top: 30px;
        text-align: center;
    }
    .order-top .left.revert{
        float: none;
        padding: 0;
        margin: auto;
    }
    .order-top .top-note h5{
        text-align: center;
    }
    .order-top .top-note .note{
        text-align: center;
    }
    .order-course .course-item{
        float: none;
        margin: 30px auto 0px;
    }
    
    .full-course-content{
        border-radius: 18px;
        background-image: url(../images/order-bg.png);
        background-size: cover;
    }
    .full-course-content .left{
        float: none;
        margin: auto;
    }
    .full-course-content .middle{
        float: none;
        width: 100%;
        padding: 0px 0px 0px;
    }
    .full-course-content .right{
        float: none;
        margin: auto;
        width: 100%;
    }
    .full-course-content .right a{
        margin-top: 20px;
    }
    .group-checkbok{
        font-size: 16px;
    }
    .order-video .order-video-content .left{
        width: 100%;
        float: none;
    }
    .order-video .order-video-content{
        padding-top: 30px;
    }
    .order-video .right{
        width: 100%;
        float: none;
        padding: 30px 0px 0px;
    }
    .order-action .order-action-content .btn-order,
    .order-action .order-action-content .btn-learning{
        display: block;
        margin: 10px 0px 0px;
    }
    .order-video .right h6{
        text-align: center; 
    }
    .description-content{
        text-align: center;
        margin-top: 10px;
    }
    .order-comment .order-comment-content{
        padding: 30px 0px 0px;
    }
    .order-comment .commment-item{
        width: 320px;
    }
    .order-comment{
        padding: 0 25px 0px;
    }
    .order-comment .comment-content{
        margin-top: 0px;
    }
   
    .order-video .video-image{
        padding: 10px;
        border-radius: 12px;
    }
    .order-video .video-image video{
        border-radius: 8px;
    }
    .order-video .order-video-content{
        padding-bottom: 0px;
    }


    .calculate-compare h2{
        font-size: 22px;
    }
    .calculate-compare .compare-item.compare-header .item-left{
        float: none;
        margin: auto;
    }
    .calculate-compare .compare-item .item-middle{
        width: 100%;
        float: none;
        text-align: center;
    }
    .calculate-compare .compare-item .item-right{
        width: 100%;
        float: none;
        text-align: center;
    }
    .calculate-compare .compare-item .item-left{
        float: none;
        width: 100%;
        text-align: center;
    }
    .calculate-compare .compare-item .item-middle{
        width: 100%;
        text-align: center;
        float: none;
        min-height: unset;
        margin-top: 15px;
    }
    .calculate-compare .compare-item .item-right{
        float: none;
        width: 100%;
        margin-top: 15px;
    }
    .calculate-compare-container{
        padding: 30px 0px 0px;
    }
    .full-course{
        margin-top: 20px;
    }




    .full-course-content .middle .price span{
        display: none;
    }
    .full-course-content .middle .time br{
        display: inline-block;
    }
    .order-course h2{
        font-size: 22px;
    }
    .premium-form h6{
        font-size: 22px;
    }
    .premium-form .form-content input[type="text"],
    .premium-form .form-content input[type="email"]{
        height: 49px;
        border-radius: 9px;
        margin-top: 10px;
    }
    .premium-form .form-content h4,
    .choose-group .title{
        font-size: 18px;
    }
    .calculate-compare .compare-item.compare-header{
        display: none;
    }
    .calculate-compare{
        padding: 0 25px 30px;
    }
    .order-action .order-action-content h6{
        font-size: 22px;
    }
    .order-comment h2{
        font-size: 22px;
    }
    .order-video .right h6{
        font-size: 22px;
    }
    .description-content{
        font-size: 14px;
    }
    .calculate-compare .calculate-compare-content{
        margin-top: 30px;
    }
    .order-course h6{
        font-size: 22px;
    }
    
    .tab-item-content .item-content{
        padding: 20px 0px 14px 0px;
    }
    .course-tab{
        margin-right: -25px;
    }
    .order-top .order-top-content h1{
        font-size: 25px;
    }
    .order-top .order-top-content .description{
        font-size: 15px;
    }
}