body{
    font-family: balootamma;
}



.library-header-content .header-content{
    max-width: 1128px;
    margin: auto;
    padding: 60px 15px 60px;
}
.library-header-content .left{
    width: 67%;
    float: left;
    padding-right: 30px;
}
.library-header-content .left h1{
    margin: 0;
    color: #9069CD;
    font-size: 48px;
    font-family: balootammaextrabold;
    max-width: 430px;
    background: url(../images/study-path-title-bg.svg);
    height: 173px;
    width: 430px;
    padding-top: 60px;
    padding-right: 10px;
    padding-left: 50px;
    margin-left: -50px;
}
.library-header-content .left .content{
    font-size: 18px;
    color: #9069CD;
    margin-top: 25px;
    max-width: 490px;
}
.library-header-content .left a{
    display: block;
    width: 212px;
    background: #9069CD;
    text-align: center;
    margin-top: 25px;
    height: 46px;
    line-height: 50px;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-family: balootammabold;
    border-bottom: 4px solid #7A53B5;
}
.library-header-content .right{
    width: 33%;
    float: right;
}
.library-header-content .right img{
    width: 100%;
}

.study-path-course{
    background: #9069CD;
}
.study-path-content{
    max-width: 1200px;
    margin: auto;
    background: url(../images/study-path-cloud.svg);
    background-repeat: no-repeat;
    padding-top: 70px;
}
.course-title h2{
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 38px;
    font-family: 'balootammabold';
    max-width: 740px;
}
.course-title h6{
    margin: 10px 0px 0px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-family: 'balootammamedium';
}
.course-package .course-package-content{
    max-width: 1200px;
    margin: 70px auto 60px;
    position: relative;
    padding: 0px 15px;
}
.course-package .course-package-content .btn-course-next{
    position: absolute;
    top: 180px;
    right: -10px;
    z-index: 1;
}
.course-package-content .course-content-item{
    display: none;
}
.course-package-content .course-content-item.active{
    display: block;
}
.course-package-content .item{
    border-radius: 23px;
    width: 258px;
    height: 390px;
    border: 16px solid #1CB0F6;
    background: #fff;
    padding: 20px 12px 10px;
    text-align: center;
}
.course-package-content .item.active{
    border-color: #1899D6;
    background: #1CB0F6;
}
.course-package-content .cefr .item,
.course-package-content .student .item,
.course-package-content .communicative .item,
.course-package-content .certificate .item{
    background: #F0F0F0;
    border: 1px solid #e5e5e5;
    padding: 15px;
}
.course-package-content .cefr .item .item-content,
.course-package-content .student .item .item-content,
.course-package-content .communicative .item .item-content,
.course-package-content .certificate .item .item-content{
    background: #fff;
    border-radius: 13px;
    border: 1px solid #E5E5E5;
    padding-top: 20px;
    height: 100%;
}
.course-package-content .skills .item svg{
    height: 50px;
}
.img-choosed{
    display: none;
}
.course-package-content .cefr .item svg,
.course-package-content .certificate .item svg{
    width: 100px;
    height: 80px;
}

.course-package-content .student .item svg,
.course-package-content .communicative .item svg{
    height: 80px;
}

.course-package-content .cefr .item.active.a0{
    background: #D17B00;
    border-color: #D17B00;
}
.course-package-content .cefr .item.active.a1{
    background: #CE82FF;
    border-color: #CE82FF;
}
.course-package-content .cefr .item.active.a2{
    background: #00CB7E;
    border-color: #00CB7E;
}
.course-package-content .cefr .item.active.b1{
    background: #FC4848;
    border-color: #FC4848;
}
.course-package-content .cefr .item.active.b2{
    background: #1CB0F6;
    border-color: #1CB0F6;
}
.course-package-content .cefr .item.active.c1{
    background: #58CC02;
    border-color: #58CC02;
}
.course-package-content .cefr .item.active.c2{
    background: #FF9600;
    border-color: #FF9600;
}
.course-package-content .student .item.active.toeic{
    background: #c93939;
    border-color: #c93939;
}
.course-package-content .student .item.active.ielts{
    background: #2b70c9;
    border-color: #2b70c9;
}
.course-package-content .student .item.active.primary{
    background: #ff9ed9;
    border-color: #ff9ed9;
}
.course-package-content .student .item.active.secondary{
    background: #84d8ff;
    border-color: #84d8ff;
}
.course-package-content .student .item.active.high{
    background: #2b70c9;
    border-color: #2b70c9;
}


.course-package-content .communicative .item.active.starter{
    background: #ffc800;
    border-color: #ffc800;
}
.course-package-content .communicative .item.active.functional{
    background: #ce82ff;
    border-color: #ce82ff;
}
.course-package-content .communicative .item.active.fluent{
    background: #58cc02;
    border-color: #58cc02;
}
.course-package-content .communicative .item.active.effortless{
    background: #fc4848;
    border-color: #fc4848;
}

.course-package-content .certificate .item.active.toeic{
    background: #c93939;
    border-color: #c93939;
}
.course-package-content .certificate .item.active.ielts{
    background: #2b70c9;
    border-color: #2b70c9;
}


.course-package-content .item.grammar{
    border-color: #00CB7E;
}
.course-package-content .item.sentence{
    border-color: #FC4848;
}
.course-package-content .item.pronunciation{
    border-color: #FFB100;
}
.course-package-content .item.natural{
    border-color: #58CC02;
}
.course-package-content .item.music{
    border-color: #A73AD4;
}
.course-package-content .item.writing{
    border-color: #709EFF;
}


.course-package-content .item.grammar.active{
    background: #00CB7E;
    border-color: #2AA171;
}
.course-package-content .item.sentence.active{
    background: #FC4848;
    border-color: #EA2B2B;
}
.course-package-content .item.pronunciation.active{
    background: #FFB100;
    border-color: #FF9600;
}
.course-package-content .item.natural.active{
    background: #58CC02;
    border-color: #58A700;
}
.course-package-content .item.music.active{
    background: #A73AD4;
    border-color: #8A29B2;
}
.course-package-content .item.writing.active{
    background: #2b70c9;
    border-color: #1453a3;
}

.course-package-content .item .border{
    border: 0px!important;
    border-top: 1px dashed #1CB0F6!important;
    margin-top: 22px;
}

.course-package-content .item.grammar .border{
    border-color: #00CB7E!important;
}
.course-package-content .item.sentence .border{
    border-color: #FC4848!important;
}
.course-package-content .item.pronunciation .border{
    border-color: #FFB100!important;
}
.course-package-content .item.natural .border{
    border-color: #58CC02!important;
}
.course-package-content .item.music .border{
    border-color: #A73AD4!important;
}
.course-package-content .item.writing .border{
    border-color: #709EFF!important;
}
.course-package-content .item.active .border{
    border-color: #fff!important;
}
.course-package-content .item.active .img-choose{
    display: none;
}
.course-package-content .item.active .img-choosed{
    display: inline-block;
}

.course-package-content .item .title{
    font-size: 20px;
    line-height: 23px;
    color: #777777;
    margin: 15px auto 0px;
    font-family: 'balootammabold';
    max-width: 185px;
}
.course-package-content .item.active .title{
    color: #fff;
}
.course-package-content .item.a0 .title,
.course-package-content .item.a1 .title,
.course-package-content .item.a2 .title,
.course-package-content .item.b1 .title,
.course-package-content .item.b2 .title,
.course-package-content .item.c1 .title,
.course-package-content .item.c2 .title{
    color: #777777;
}
.course-package-content .item.primary .title,
.course-package-content .item.secondary .title,
.course-package-content .item.high .title{
    color: #777777;
}
.course-package-content .item.toeic .title,
.course-package-content .item.ielts .title{
    color: #777777;
}
.course-package-content .item.starter .title,
.course-package-content .item.functional .title,
.course-package-content .item.effortless .title,
.course-package-content .item.fluent .title{
    color: #777777;
}
.course-package-content .item .time{
    font-size: 14px;
    color: #777777;
    margin-top: 10px;
}
.course-package-content .item.active .time{
    color: #fff;
}
.course-package-content .item.a0 .time,
.course-package-content .item.a1 .time,
.course-package-content .item.a2 .time,
.course-package-content .item.b1 .time,
.course-package-content .item.b2 .time,
.course-package-content .item.c1 .time,
.course-package-content .item.c2 .time{
    color: #777777;
}
.course-package-content .item.primary .time,
.course-package-content .item.secondary .time,
.course-package-content .item.high .time{
    color: #777777;
}
.course-package-content .item.toeic .time,
.course-package-content .item.ielts .time{
    color: #777777;
}
.course-package-content .item.starter .time,
.course-package-content .item.functional .time,
.course-package-content .item.fluent .time,
.course-package-content .item.effortless .time{
    color: #777777;
}
.course-package-content .item .time strong{
    font-weight: 100;
    font-family: 'balootammasemibold';
}

.course-package-content .item .course-quantity{
    font-size: 14px;
    color: #777777;
    margin-top: 5px;
}
.course-package-content .item.active .course-quantity{
    color: #fff;
}
.course-package-content .item.a0 .course-quantity,
.course-package-content .item.a1 .course-quantity,
.course-package-content .item.a2 .course-quantity,
.course-package-content .item.b1 .course-quantity,
.course-package-content .item.b2 .course-quantity,
.course-package-content .item.c1 .course-quantity,
.course-package-content .item.c2 .course-quantity{
    color: #777777;
}
.course-package-content .item.primary .course-quantity,
.course-package-content .item.secondary .course-quantity,
.course-package-content .item.high .course-quantity{
    color: #777777;
}
.course-package-content .item.toeic .course-quantity,
.course-package-content .item.ielts .course-quantity{
    color: #777777;
}
.course-package-content .item.starter .course-quantity,
.course-package-content .item.functional .course-quantity,
.course-package-content .item.fluent .course-quantity,
.course-package-content .item.effortless .course-quantity{
    color: #777777;
}
.course-package-content .item .course-quantity strong{
    font-weight: 100;
    font-family: 'balootammasemibold';
}

.course-package-content .item .price{
    font-size: 14px;
    color: #777777;
    margin-top: 5px;
}
.course-package-content .item.active .price{
    color: #fff;
}
.course-package-content .item.a0 .price,
.course-package-content .item.a1 .price,
.course-package-content .item.a2 .price,
.course-package-content .item.b1 .price,
.course-package-content .item.b2 .price,
.course-package-content .item.c1 .price,
.course-package-content .item.c2 .price{
    color: #777777;
}
.course-package-content .item.primary .price,
.course-package-content .item.secondary .price,
.course-package-content .item.high .price{
    color: #777777;
}
.course-package-content .item.toeic .price,
.course-package-content .item.ielts .price{
    color: #777777;
}
.course-package-content .item.starter .price,
.course-package-content .item.functional .price,
.course-package-content .item.fluent .price,
.course-package-content .item.effortless .price{
    color: #777777;
}
.course-package-content .item .price .line-through{
    text-decoration: line-through;
}
.course-package-content .item .price strong{
    font-weight: 100;
    font-size: 15px;
    font-family: 'balootammabold';
}
.course-package-content .item .btn-choose{
    display: block;
    width: 151px;
    height: 39px;
    text-align: center;
    margin: auto;
    border: 1px solid #1CB0F6;
    border-radius: 9px;
    line-height: 39px;
    margin-top: 10px;
    font-size: 15px;
    font-family: 'balootammabold';
    color: #1CB0F6;
    text-transform: uppercase;
    background: #1CB0F6;
    color: #fff;
}
.course-package-content .item .btn-choose:hover{
    text-decoration: none;
}


.course-package-content .item.grammar .btn-choose{
    background: #00CB7E;
    border-color: #00CB7E;
}
.course-package-content .item.sentence .btn-choose{
    background: #FC4848;
    border-color: #FC4848;
}
.course-package-content .item.pronunciation .btn-choose{
    background: #FFB100;
    border-color: #FFB100;
}
.course-package-content .item.natural .btn-choose{
    background: #58CC02;
    border-color: #58CC02;
}
.course-package-content .item.music .btn-choose{
    background: #A73AD4;
    border-color: #A73AD4;
}
.course-package-content .item.writing .btn-choose{
    background: #709EFF;
    border-color: #709EFF;
}
.course-package-content .item.toeic .btn-choose{
    background: #c93939;
    border-color: #c93939;
}
.course-package-content .item.ielts .btn-choose{
    background: #2b70c9;
    border-color: #2b70c9;
}
.course-package-content .item.primary .btn-choose{
    background: #ff9ed9;
    border-color: #ff9ed9;
}
.course-package-content .item.secondary .btn-choose{
    background: #84d8ff;
    border-color: #84d8ff;
}
.course-package-content .item.high .btn-choose{
    background: #ffc800;
    border-color: #ffc800;
}
.course-package-content .item.starter .btn-choose{
    background: #ff9ed9;
    border-color: #ff9ed9;
}
.course-package-content .item.functional .btn-choose{
    background: #ce82ff;
    border-color: #ce82ff;
}
.course-package-content .item.fluent .btn-choose{
    background: #58cc02;
    border-color: #58cc02;
}
.course-package-content .item.effortless .btn-choose{
    background: #fc4848;
    border-color: #fc4848;
}
.course-package-content .item.a0 .btn-choose{
    background: #D17B00;
    border-color: #D17B00;
}
.course-package-content .item.a1 .btn-choose{
    background: #CE82FF;
    border-color: #CE82FF;
}
.course-package-content .item.a2 .btn-choose{
    background: #00CB7E;
    border-color: #00CB7E;
}
.course-package-content .item.b1 .btn-choose{
    background: #FC4848;
    border-color: #FC4848;
}
.course-package-content .item.b2 .btn-choose{
    background: #1CB0F6;
    border-color: #1CB0F6;
}
.course-package-content .item.c1 .btn-choose{
    background: #58CC02;
    border-color: #58CC02;
}
.course-package-content .item.c2 .btn-choose{
    background: #FF9600;
    border-color: #FF9600;
}
.course-package-content .item.active .btn-choose{
    border-color: #fff;
    color: #1CB0F6;
    background: #fff;
}
.course-package-content .item.active.grammar .btn-choose{
    border-color: #fff;
    color: #00CB7E;
    background: #fff;
}
.course-package-content .item.active.sentence .btn-choose{
    border-color: #fff;
    color: #FC4848;
    background: #fff;
}
.course-package-content .item.active.pronunciation .btn-choose{
    border-color: #fff;
    color: #FFB100;
    background: #fff;
}
.course-package-content .item.active.music .btn-choose{
    border-color: #fff;
    color: #A73AD4;
    background: #fff;
}
.course-package-content .item.active.natural .btn-choose{
    border-color: #fff;
    color: #58CC02;
    background: #fff;
}
.course-package-content .item.active.writing .btn-choose{
    border-color: #fff;
    color: #709EFF;
    background: #fff;
}

.course-package-content .item.active.toeic .btn-choose{
    color: #fff;
    background: #c93939;
    border-color: #c93939;
}
.course-package-content .item.active.ielts .btn-choose{
    color: #fff;
    background: #2b70c9;
    border-color: #2b70c9;
}
.course-package-content .item.active.primary .btn-choose{
    color: #fff;
    background: #ff9ed9;
    border-color: #ff9ed9;
}
.course-package-content .item.active.secondary .btn-choose{
    color: #fff;
    background: #84d8ff;
    border-color: #84d8ff;
}
.course-package-content .item.active.high .btn-choose{
    color: #fff;
    background: #2b70c9;
    border-color: #2b70c9;
}
.course-package-content .item.active.a0 .btn-choose{
    color: #fff;
    background: #D17B00;
    border-color: #D17B00;
}

.course-package-content .item.active.starter .btn-choose{
    color: #fff;
    background: #ffc800;
    border-color: #ffc800;
}
.course-package-content .item.active.functional .btn-choose{
    color: #fff;
    background: #ce82ff;
    border-color: #ce82ff;
}
.course-package-content .item.active.fluent .btn-choose{
    color: #fff;
    background: #58cc02;
    border-color: #58cc02;
}
.course-package-content .item.active.effortless .btn-choose{
    color: #fff;
    background: #fc4848;
    border-color: #fc4848;
}

.course-package-content .item.active.a1 .btn-choose{
    color: #fff;
    background: #CE82FF;
    border-color: #CE82FF;
}
.course-package-content .item.active.a2 .btn-choose{
    color: #fff;
    background: #00CB7E;
    border-color: #00CB7E;
}
.course-package-content .item.active.b1 .btn-choose{
    color: #fff;
    background: #FC4848;
    border-color: #FC4848;
}
.course-package-content .item.active.b2 .btn-choose{
    color: #fff;
    background: #1CB0F6;
    border-color: #1CB0F6;
}
.course-package-content .item.active.c1 .btn-choose{
    color: #fff;
    background: #58CC02;
    border-color: #58CC02;
}
.course-package-content .item.active.c2 .btn-choose{
    color: #fff;
    background: #FF9600;
    border-color: #FF9600;
}

.course-package-content .item .btn-view{
    color: #1CB0F6;
    font-size: 15px;
    font-family: 'balootammasemibold';
    text-decoration: none;
    display: block;
    width: 151px;
    height: 39px;
    text-align: center;
    margin: auto;
    border: 1px solid #1CB0F6;
    border-radius: 9px;
    line-height: 39px;
    margin-top: 20px;

}
.course-package-content .item.active .btn-view{
    color: #fff;
    border-color: #fff;
}
.course-package-content .item.a0 .btn-view,
.course-package-content .item.a1 .btn-view,
.course-package-content .item.a2 .btn-view,
.course-package-content .item.b1 .btn-view,
.course-package-content .item.b2 .btn-view,
.course-package-content .item.c1 .btn-view,
.course-package-content .item.c2 .btn-view{
    color: #1CB0F6;
}
.course-package-content .item.primary .btn-view,
.course-package-content .item.secondary .btn-view,
.course-package-content .item.high .btn-view{
    color: #1CB0F6;
}
.course-package-content .item.starter .btn-view,
.course-package-content .item.functional .btn-view,
.course-package-content .item.fluent .btn-view,
.course-package-content .item.effortless .btn-view{
    color: #1CB0F6;
}
.course-package-content .item.toeic .btn-view,
.course-package-content .item.ielts .btn-view{
    color: #1CB0F6;
}


.full-course{
    margin-top: 40px;
}
.full-course-content{
    padding: 30px 50px 30px 40px;
    background: #fff;
    background-size: cover;
    border-radius: 23px;
}

.full-course-content .left{
    float: left;
    width: 176px;
}
.full-course-content .left img{
    width: 100%;
}
.full-course-content .middle{
    float: left;
    width: calc(100% - 419px);
    padding-left: 40px;
    padding-right: 20px;
    padding-top: 10px;
}
.full-course-content .right{
    width: 151px;
    float: right;
}
.full-course-premium .full-course-content .right{
    width: 240px;
}
.full-course-content .middle h5{
    margin: 0;
    color: #9069CD;
    font-size: 32px;
    font-family: 'balootammasemibold';
}
.full-course-premium .full-course-content .middle h5{
    font-size: 30px;
    font-family: 'balootammabold';
}
.full-course-content .middle .price{
    margin-top: 20px;
    color: #9069CD;
    font-size: 20px;
}
.full-course-premium .full-course-content .middle .price {
    font-size: 15px;
    max-width: 390px;
}
.full-course-content .middle .price strong{
    font-weight: 100;
    font-family: 'balootammabold';
}
.full-course-content .middle .price span{
    text-decoration: line-through;
}
.full-course-content .middle .time{
    margin-top: 5px;
    color: #9069CD;
    font-size: 20px;
}
.full-course-content .middle .time strong{
    font-weight: 100;
    font-family: balootammabold;
    margin-right: 15px;
}
.full-course-content .right a{
    display: block;
    background: #9069CD;
    border-radius: 9px;
    height: 39px;
    text-align: center;
    line-height: 41px;
    color: #fff;
    font-size: 15px;
    font-family: 'balootammabold';
    text-transform: uppercase;
    margin-top: 45px;
    border-bottom: 4px solid #7A53B5;
}
.full-course-premium .full-course-content .right a{
    height: 51px;
    color: #1CB0F6;
    line-height: 51px;
    border-right: 4px solid #BBF2FF;
    border-bottom: 4px solid #BBF2FF;
    border-radius: 16px;
}
.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-saver .premium-saver-content{
    max-width: 900px;
    padding: 40px 15px 75px;
    margin: auto;
}
.premium-saver .saver-left{
    width: 290px;
    float: left;
}
.premium-saver .saver-left img{
    max-width: 100%;
}
.premium-saver .saver-right{
    width: calc(100% - 290px);
    float: left;
    padding-left: 35px;
    margin-top: 65px;
}
.premium-saver .saver-right h1{
    margin: 0;
    font-size: 25px;
    color: #4C4C4C;
    font-family: 'balootammabold';
}
.premium-saver .saver-right .content{
    font-size: 17px;
    margin-top: 20px;
}





.premium-package .package-content{
    max-width: 1230px;
    margin: auto;
    padding: 30px 15px;
}
.package-content h2{
    color: #fff;
    font-size: 38px;
    text-align: center;
    font-family: 'balootammabold';
    margin: 30px auto 0px;
    max-width: 840px;   
}
.package-content h6{
    margin: 15px auto 6px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 20px;
} 
.package-content h4{
    text-align: center;
    font-size: 32px;
    font-family: 'balootammasemibold';
    color: #fff;
    max-width: 110px;
    margin: 40px auto 0px;
}
.package-content .sub-title{
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-family: 'balootammamedium';
}
.package-content .item-header{
    float: left;
    width: 100%;
    background: #fff;
    border-radius: 23px 23px 0px 0px;
    padding: 0px 8px 0px 0px;
}
.package-content .item-header .item-header-content{
    background: #58cc02;
    float: left;
    width: 100%;
    padding: 0px 15px 10px 25px;
    border-radius: 0px 23px 0px 0px;
    min-height: 155px;
}
.package-content .item-cefr .item-header .item-header-content{
    border-color: #6F4EA1;
    background: #9069CD;
}
.package-content .item-communicative .item-header .item-header-content{
    border-color: #58A700;
    background: #58CC02;
}
.package-content .item-premium-12 .item-header .item-header-content{
    background: #FF9600;
}
.package-content .item-premium-3 .item-header .item-header-content{
    background: #A73AD4;
}
.package-content .item-premium-24 .item-header .item-header-content{
    background: #2B70C9;
    
}
.package-content .item-premiums .item-header h3{
    font-size: 40px;
    margin-top: 20px;
    font-family: balootammasemibold;
    text-align: center;
}
.package-content .item-premiums .item-header h3 span{
    font-size: 20px;
    font-family: 'balootammamedium';
    width: 101px;
    height: 46px;
    display: inline-block;
    border: 1px solid #ffffff85;
    line-height: 46px;
    text-align: center;
    border-radius: 12px;
    margin-left: 5px;
}
.package-content .item-premiums .text{
    font-size: 12px;
    font-family: 'balootammamedium';
    color: #fff;
    opacity: 0.56;
}
.package-content .item-premiums .price-month{
    color: #fff;
    font-size: 17px;
    margin-top: 5px;
}
.package-content .item-premiums .price-month span{
    font-size: 28px;
    font-family: 'balootammamedium';
}
.package-content .item-premiums .item-header .item-header-left{
    float: left;
    width: calc(100% - 140px);
}
.package-content .item-premium-24 .item-header .item-header-left{
    width: calc(100% - 110px);
}
.package-content .item-premiums .item-header .item-header-left .text{
    font-size: 12px;
    font-family: 'balootammamedium';
    color: #ffffff8f;
    margin-top: 10px;
    opacity: 1;
}
.package-content .item-premiums .item-header .item-header-left .text .learning-time{
    color: #fff;
}
.package-content .item-premiums .item-header .item-header-left .text .price-payment{
    color: #fff;
}
.package-content .item-premiums .item-header .item-header-right{
    float: left;
    width: 140px;
    height: 58px;
    border-left: 1px dashed #fff;
}
.package-content .item-premium-24 .item-header .item-header-right{
    width: 110px;
}
.package-content .item-premiums .item-header .item-header-right .save{
    width: 102px;
    height: 57px;
    display: inline-block;
    background: #ffffffba;
    border-radius: 10px;
    text-align: center;
    margin-left: 24px;
    font-size: 14px;
    color: #709EFF;
    font-family: 'balootammamedium';
    padding-top: 10px;
}
.package-content .item-premium-24 .item-header .item-header-right .save{
    margin-left: 12px;
    color: #FF9600;
}
.package-content .item-premium-24 .item-header .item-header-right .save strong{
    display: block;
}
.package-content .item-header .header-left{
    width: calc(100% - 120px);
    float: left;
    padding-right: 10px;
    padding-top: 15px;
}
.package-content .item-header h3{
    font-size: 30px;
    font-family: 'balootammasemibold';
    color: #FFFFFF;
    margin: 0px;
}
.package-content .item-header h3{
    font-size: 27px;
}
.package-content .item-header .description{
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 15px;
    font-family: 'promtlight';
}
.package-content .item-header .header-tab{
    margin-top: 10px;
    width: 120px;
    float: left;
    border-left: 1px dashed #fff;
    height: 117px;
    padding: 4px 0px 10px 10px;
}
.package-content .item-header .header-tab span{
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'balootammamedium';
}
.package-content .item-header .header-tab .price-month{
    display: block;
}
.package-content .item-header .header-tab .price-month span{
    font-size: 25px;
}
.package-content .item-header .header-tab .text{
    font-size: 10px;
    font-family: 'balootamma';
    opacity: 0.56;
    display: block;
    margin-top: 5px;
}
.package-content .item-header .header-tab .learning-time{
    display: block;
    font-size: 14px;
    color: #FFFFFF;
    font-family: 'balootammamedium';
}
.package-content .item-header .header-tab .price-payment{
    font-size: 14px;
    font-family: 'balootammamedium';
    color: #fff;
}
.package-content .item-header .header-tab a{
    display: inline-block;
    border: 1px solid #ffffff82;
    margin-left: 8px;
    width: 74px;
    height: 28px; 
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    font-family: 'balootammamedium';
    color: #fff;
    border-radius: 5px;
}
.package-content .item-header .header-tab a:hover{
    text-decoration: none;
}
.package-content .item-header .header-tab a.active{
    border: 1px solid #fff;
    color: #FF9600;
    background: #fff;
}
.package-content .premium-item.premium18 .item-header .header-tab a.active{
    color: #9069CD;
}
.package-content .premium-item.premium30 .item-header .header-tab a.active{
    color: #709EFF;
}
.tab-premium-content .premium-item.premium30 .item-header h6,
.tab-premium-content .premium-item.premium36 .item-header h6{
    margin-top: 15px;
}

.package-content .item-content{
    background: #fff;
    border-radius: 0px 0px 21px 21px;
}
.package-content .item-content .item-body{
    padding: 25px 22px 0px;
}
.package-content .item-content .item-body .fee{
    font-size: 16px;
    font-family: 'balootammamedium';
}
.package-content .item-content .item-body .fee-content{
    font-size: 18px;
}
.package-content .item-content .item-body .fee-content strong{
    font-weight: 100;
    font-size: 28px;
    font-family: 'balootammasemibold';
}
.package-content .item-content .fee-save{
    color: #FC4848;
    font-size: 12px;
    font-family: 'balootammasemibold';
    margin-top: -5px;
}
.package-content .item-content .fee-save.line-through{
    text-decoration: line-through;
}

.package-content .premium30 .item-content{
    margin-top: 0px;
}
.package-content .item-content h6{
    font-size: 12px;
    color: #AFAFAF;
}

.package-content .item-content h6 span{
    color: #777777;
    font-size: 15px;
    margin-left: 10px;
    color: #FC4848;
    text-decoration: line-through;
    
}
.package-content .item-content h5{
    color: #777777;
    font-size: 30px;
    font-family: 'balootammasemibold';
}
.package-content .item-content h5 span{
    font-size: 12px;
    font-family: 'balootamma';
}
.package-content .item-content .discount{
    font-size: 13px;
    color: #1CB0F6;
    border-bottom: 1px solid #CFCFCF;
    padding-bottom: 10px;
}
.package-content .item-content .discount strong{
    font-weight: 100;
    font-family: 'balootammasemibold';
    font-size: 15px;
}
.item-choose{
    padding: 0px 20px 25px;
}
.item-premium-12 .item-choose{
    border-color: #2b70c98f;
    margin-top: 15px;
}
.item-premium-3 .item-choose{
    margin-top: 5px;
    border-color: #2b70c98f;
}
.item-premium-24 .item-choose{
    margin-top: 5px;
    border-color: #ffb1008f;
}

.item-choose-content .fee{
    margin-bottom: 10px;
}
.item-choose-content .fee .title{
    font-size: 14px;
    color: #AFAFAF;
    font-family: 'balootammamedium';
}
.item-choose-content .fee .save{
    color: #C93939;
}
.item-choose-content .fee .value{
    font-size: 14px;
    font-family: 'balootammabold';
    float: right;
}

.item-choose-content .promo{
    margin-bottom: 10px;
    min-height: 38px;
}

.item-choose-content .promo .title{
    font-size: 14px;
    color: #AFAFAF;
    font-family: 'balootammamedium';
}
.item-choose-content .promo .value{
    font-size: 14px;
    float: right;
}

.item-choose-content .item-payment .title{
    font-size: 14px;
    color: #AFAFAF;
    font-family: 'balootammamedium';
}
.item-choose-content .item-payment .value{
    font-size: 22px;
    font-family: 'balootammasemibold';
    float: right;
    color: #EA2B2B;
}




.package-tab .tab-content{
    width: 202px;
    height: 40px;
    margin: 20px auto 0px;
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    background: var(--color-white);
}
.package-tab .tab-content ul{
    padding: 0;
    display: block;
    font-size: 0;
}
.package-tab .tab-content li{
    list-style-type: none;
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 100%;
    padding-top: 4px;
}
.package-tab .tab-content li a{
    display: block;
    height: 30px;
    line-height: 34px;
    font-size: 15px;
    font-family: balootammamedium;
    text-transform: uppercase;
    color: var(--color-blue);
}
.package-tab .tab-content li.tab-skill a{
    border-left: 1px solid var(--color-gray);
    border-right: 1px solid var(--color-gray);
}
.package-tab .tab-content li a:hover{
    text-decoration: none;
}
.package-tab .tab-content li.active{
    
    background: var(--color-blue);
}
.package-tab .tab-content li.active a{
    color: var(--color-white);
}
.package-tab .tab-content li.tab-premium{
    border-radius: 10px 0px 0px 10px;
}
.package-tab .tab-content li.tab-compare{
    border-radius: 0px 10px 10px 0px;
}

.tab-content-item{
    display: none;
}
.tab-content-item.tab-active{
    display: block;
}
.tab-premium-content{
    margin: 20px auto 0px;
    max-width: 900px;
}
.tab-premium-content .premium-item {
    float: left;
    width: 354px;
    border-radius: 23px;
    margin: 15px 8px;
    position: relative;
}
.icon-plus{
    background: url(../images/voca-bg.svg?n=108) 0px -9440px;
    width: 58px;
    height: 58px;
    display: inline-block;
    position: absolute;
    top: -30px;
    right: -23px;
    z-index: 1;
    transform: scale(0.73);
}
.tab-content-item h2{
    text-align: center;
    font-size: 20px;
    color: var(--color-text);
    margin-top: 30px;
    text-transform: capitalize;
    font-family: balootammaextrabold;
}
.tab-premium-content .premium-item:hover{
    cursor: pointer;
}
.tab-premium-content .premium-item.premium30 {
    background: #58CC02;
    margin-right: 0px;
}
.tab-premium-content .premium-item.premium36 {
    margin-left: 0px;
    margin-top: 30px;
    background: #FF9600;
}
.tab-premium-content .premium-item.premium3 {
    margin-left: 0px;
}
.tab-premium-content .premium-item.premium18 {
    
    margin-top: 30px;
    background: #9069CD;
}

.tab-premium-content .premium-item.item-premium-3{
    background: #A73AD4;
   
}
.tab-premium-content .premium-item.item-premium-24{
    background: #2B70C9;
}
.tab-premium-content .premium-item.item-premium-12{
    background: #FF9600;
}
.tab-premium-content .premium-item.item-skills{
    background: #FF9600;
}
.tab-premium-content .premium-item.item-cefr{
    background: #9069CD;
}
.tab-premium-content .premium-item.item-communicative{
    background: #58CC02;
}


.tab-premium-content .premium-item .item {
    padding: 3px 3px 3px 3px;
    text-align: left;
    position: relative;
    overflow: hidden;
    border-radius: 23px;
}

.tab-premium-content .premium-item .item .tag {
    position: absolute;
    background: var(--color-gray);
    display: block;
    left: 0;
    top: 0px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 11px 0px;
    color: var(--color-white);
    font-family: balootammamedium;
    border-radius: 18px 18px 0px 0px;
    font-size: 21px;
}
.tab-premium-content .premium-item.premium18 .item .tag {
    color: #fff;
    background: #3B5998;
}
.tab-premium-content .premium-item.premium30 .item .tag {
    color: #fff;
    background: #709EFF;
}
.tab-premium-content .premium-item.premium36 .item .tag {
    color: #fff;
    background: #709EFF;
}
.tab-premium-content .premium-item.premium18 .item .tag span{
    background: url(../images/standard.svg?n=1);
    width: 90.015px;
    height: 31px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 5px;
	font-size: 14px;
    color: #afafaf;
    line-height: 37px;
}
.tab-premium-content .premium-item.premium30 .item .tag span{
    background: url(../images/plus.svg);
    width: 71px;
    height: 31px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 5px;
}
.tab-premium-content .premium-item.premium3 .item .tag span{
    background: url(../images/plusplus1.svg);
    width: 90.015px;
    height: 31px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 5px;
}



.tab-premium-content .premium-item .item .line {
    border-top: 1px dashed var(--color-border-gray-light);
}
.tab-premium-content .premium-item .item .price {
    font-size: 31px;
    text-align: center;
    font-family: balootammasemibold;
    color: #bec0c8;
    margin-top: 10px;
}
.tab-premium-content .premium-item .item .price span {
    font-size: 20px;
}
.tab-premium-content .premium-item.premium18 .item .price span{
    font-size: 30px;
}
.tab-premium-content .premium-item.premium30 .item .price{
    color: var(--color-text);
}
.tab-premium-content .premium-item.premium30 .item .price span{
    font-size: 30px;
    
}
.tab-premium-content .premium-item .item .payment span {
    display: block;
    text-align: center;
    margin-top: -8px;
    font-size: 10px;
    color: #bec0c8;
    text-decoration: line-through;
}
.tab-premium-content .premium-item .item ul {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    overflow: hidden;
}
.tab-premium-content .premium-item .btn-view-more{
    font-size: 15px;
    font-family: balootammasemibold;
    display: block;
    text-align: center;
    color: #1CB0F6;
}
.tab-premium-content .premium-item.item-premium-trial .btn-view-more{
    margin-top: 12px;
}
.tab-premium-content .premium-item .item li {
    list-style: none;
    margin-left: 0px;
    font-size: 15px;
    color: #201F1F;
    margin-top: 0px;
    position: relative;
    padding-left: 25px;
    margin-bottom: 14px;
    margin-top: 14px;
    padding-top: 3px;
}
.tab-premium-content .premium-item .item li strong{
    font-weight: 100;
    font-family: balootammabold;
}
.tab-premium-content .premium-item .item li span{
    font-weight: 100;
    font-size: 13px;
    text-decoration: line-through;
    color: #707070;
}
.tab-premium-content .premium-item .item li::before{
    content: '';
    width: 19px;
    height: 19px;
    background: url(../images/voca-bg.svg?n=108) 0px -10300px;
    position: absolute;
    left: 0px;
    top: 2px;
}
.tab-premium-content .premium-item .item li.active::before{
    background-position: 0 -10300px;
}
.tab-premium-content .premium-item.item-premium-3 .item li.active::before{
    background-position: 0 -10330px;
}
.tab-premium-content .premium-item.item-premium-12 .item li.active::before{
    background-position: 0 -10360px;
}
.tab-premium-content .premium-item.item-premium-24 .item li.active::before{
    background-position: 0 -10390px;
}
.tab-premium-content .premium-item .item i{
    color: #FC4848;
    font-size: 12px;
    font-style: normal;
    margin-top: -18px;
    display: inline-block;
    margin-left: 112px;
    margin-bottom: 30px;
}
.tab-premium-content .premium-item.item-premium-24 .item i{
    margin-left: 100px;
}

.tab-premium-content .premium-item .item-choose-content .promo img{
    float: left;
    margin-right: 10px;
}
.tab-premium-content .premium-item .item-choose-content .promo strong{
    font-size: 13px;
    font-weight: 100;
    font-family: 'balootammabold';
    color: #FC4848;
}
.tab-premium-content .premium-item .item-choose-content .promo span{
    font-size: 13px;
    color: #777777;
    font-family: 'balootammamedium';
}


.tab-premium-content .premium-item .btn-choose,
.tab-premium-content .premium-item .btn-start {
    width: 183px ;
    display: block;
    margin: 15px auto 0px ;
    height: 45px ;
    text-align: center;
    line-height: 44px;
    border: 1px solid #58CC02;
    font-family: balootammasemibold;
    text-transform: uppercase;
    border-radius: 10px ;
    font-size: 15px;
    position: relative;
    border-bottom: 3px solid #58CC02;
    color: #58CC02;

    
}
.tab-premium-content .premium-item .btn-choose:hover,
.tab-premium-content .premium-item .btn-choose.active,
.tab-premium-content .premium-item .btn-start:hover,
.tab-premium-content .premium-item .btn-start.active{
    text-decoration: none;
    background: #58CC02;
    color: var(--color-white);
    border-color: #58A700;
}

.tab-premium-content .premium-item.item-cefr .btn-choose{
    border-color: #9069CD;
    color: #9069CD;
}
.tab-premium-content .premium-item.item-cefr .btn-choose:hover,
.tab-premium-content .premium-item.item-cefr .btn-choose.active{
    background: #9069CD;
    color: var(--color-white);
    border-color: #815bbb;
}

.tab-premium-content .premium-item.item-communicative .btn-choose{
    border-color: #58CC02;
    color: #58CC02;
}
.tab-premium-content .premium-item.item-communicative .btn-choose:hover,
.tab-premium-content .premium-item.item-communicative .btn-choose.active{
    background: #58CC02;
    color: var(--color-white);
    border-color: #58A700;
}

.tab-premium-content .premium-item.premium30 .btn-choose{
    border-color: #58CC02;
    color: #58CC02;
}
.tab-premium-content .premium-item.item-premium-12 .btn-choose,
.tab-premium-content .premium-item.premium30 .btn-choose:hover,
.tab-premium-content .premium-item.premium30 .btn-choose.active{
    background: #58CC02;
    color: var(--color-white);
    border-color: #58A700;
}


.tab-premium-content .premium-item.premium30.item-premium-3 .btn-choose{
    border-color: #A73AD4;
    color: #A73AD4;
}
.tab-premium-content .premium-item.premium30.item-premium-3 .btn-choose:hover,
.tab-premium-content .premium-item.premium30.item-premium-3 .btn-choose.active{
    background: #A73AD4;
    color: var(--color-white);
    border-color: #9d44d5;
}

.tab-premium-content .premium-item.premium30.item-premium-12 .btn-choose{
    border-color: #FF9600;
    background: var(--color-white);
    color: #FF9600;
}
.tab-premium-content .premium-item.premium30.item-premium-12 .btn-choose:hover,
.tab-premium-content .premium-item.premium30.item-premium-12 .btn-choose.active{
    background: #FF9600;
    color: var(--color-white);
    border-color: #e38602;
}

.tab-premium-content .premium-item.premium30.item-premium-24 .btn-choose{
    border-color: #2B70C9;
    color: #2B70C9;
}
.tab-premium-content .premium-item.premium30.item-premium-24 .btn-choose:hover,
.tab-premium-content .premium-item.premium30.item-premium-24 .btn-choose.active{
    background: #2B70C9;
    color: var(--color-white);
    border-color: #114b97;
}

.tab-premium-content .premium-item .item a i {
    margin-right: 5px;
    opacity: 0;
    display: inline-block;
    width: 23.233px;
    height: 16.782px;
    background: url(../images/voca-bg.svg?n=108) 0px -140px;
    transform: scale(0.75);
    position: absolute;
    left: 25px;
    top: 10px;
}

.package-tab .tab-content{
    width: 202px;
    height: 40px;
    margin: 20px auto 0px;
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    background: var(--color-white);
}
.package-tab .tab-content ul{
    padding: 0;
    display: block;
    font-size: 0;
}
.package-tab .tab-content li{
    list-style-type: none;
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 100%;
    padding-top: 4px;
}
.package-tab .tab-content li a{
    display: block;
    height: 30px;
    line-height: 34px;
    font-size: 15px;
    font-family: balootammamedium;
    text-transform: uppercase;
    color: var(--color-blue);
}
.package-tab .tab-content li.tab-skill a{
    border-left: 1px solid var(--color-gray);
    border-right: 1px solid var(--color-gray);
}
.package-tab .tab-content li a:hover{
    text-decoration: none;
}
.package-tab .tab-content li.active{
    
    background: var(--color-blue);
}
.package-tab .tab-content li.active a{
    color: var(--color-white);
}
.package-tab .tab-content li.tab-premium{
    border-radius: 10px 0px 0px 10px;
}
.package-tab .tab-content li.tab-compare{
    border-radius: 0px 10px 10px 0px;
}

.tab-item-content{
    position: relative;
    z-index: 1;
    margin-top: -1px;
    max-width: 1100px;
}
.tab-level.tab-level-hidden + .tab-list .tab-item-content{
    max-width: 100%;
}
.tab-item-content.tab-item-cefr{
    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;
}
.tab-item-content .item-content .owl-item{
    margin-right: 20px;
}
.tab-item-content .item-content .item{
    width: 139px;
    height: 160px;
    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: 18px;
    height: 18px;
    display: block;
    margin: auto;
    border: 1px solid #5C6CFC;
    border-radius: 9px;
    margin-top: 5px;
    padding: 2px;
}
.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: 12px;
    width: 12px;
    border-radius: 6px;
}

.premium-or{
    text-align: center;
    color: #fff;
    font-size: 25px;
    margin-top: 15px;
}
.premium-membership{
    text-align: center;
    font-size: 25px;
    font-family: 'balootammasemibold';
    color: #fff;
    margin-top: 5px;
}
.premium-membership-description{
    text-align: center;
    font-size: 18px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 15px;
}
.tab-premium-content .premium-item .item  a.btn-see-more{
    height: unset;
    width: unset;
    display: inline-block;
    line-height: unset;
    border: 0;
    font-family: balootammamedium;
    font-size: 15px;
    margin: 15px 27px 0px;
    text-align: left;
    text-transform: none;
    background: unset!important;
    color: var(--color-blue)!important;
    padding-left: 0px!important;
	display: none;
}
.tab-premium-content .premium-item .item  a.btn-see-more.up svg.up{
	display: inline-block!important;
}
.tab-premium-content .premium-item .item  a.btn-see-more.down svg.down{
	display: inline-block!important;
}

.tab-premium-content .premium-item.active .item a i {
    opacity: 0;
}



.tab-compare-content .compare-item{
    margin-top: 40px;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid var(--color-border-gray-light);
}
.tab-compare-content .compare-item table{
    width: 100%;
    background: var(--color-white);
}
.tab-compare-content .compare-item table th{
    height: 60px;
    text-align: center;
    color: var(--color-text-light);
    font-family: balootammasemibold;
    font-size: 15px;
    text-transform: uppercase;
    width: 20%;
    border-bottom: 1px solid var(--color-border-gray-light);
}
.tab-compare-content .compare-item table th.th-product{
    background: var(--color-blue-dark);
    text-align: center;
    color: var(--color-white);
    text-transform: unset;
    border-radius: 20px 0px 0px 0px;
    
}
.tab-compare-content .compare-item table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.tab-compare-content .compare-item table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
.tab-compare-content .compare-item table td{
    height: 50px;
    text-align: center;
    color: var(--color-text-light);
    font-family: balootammamedium;
    font-size: 15px;
    text-transform: uppercase;
    border-right: 1px solid var(--color-border-gray-light);
}
.tab-compare-content .compare-item table td.td-product{
    color: var(--color-text);
    font-family: balootammaextrabold;
}
.tab-compare-content .compare-item table .tr-fee-total td{
    font-family: balootammaextrabold;
    color: var(--color-blue);
    border-top: 1px solid var(--color-border-gray-light);
    border-right: 0;
}
.tab-compare-content .compare-item table td .price{
    display: block;
    color: var(--color-blue);
    font-family: balootammasemibold;
}
.tab-compare-content .compare-item table td .price-store{
    display: block;
    font-family: balootammamedium;
    color: #ff014e;
    text-decoration: line-through;
}
.tab-compare-content .compare-item table td .btn-choose{
    border: 1px solid var(--color-border-green);
    border-bottom: 2px solid var(--color-border-green);
    color: var(--color-green);
    margin-top: 15px;
}
.tab-compare-content .compare-item table td .btn-choose.btn-choose-active{
    background: var(--color-green);
    color: var(--color-white);
}
.tab-compare-content .compare-item table td .btn-choose:hover{
    background: var(--color-green);
    color: var(--color-white);
}
.tab-compare-content .compare-item td i{
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../images/voca-bg.svg?n=108) 0px -260px;
    transform: scale(0.65);
}
.tab-compare-content .compare-item td.td-active i{
    background-position: 0px -220px;
}
.tab-compare-content .compare-item table th.th-benefit {
    background: var(--color-blue-dark);
    text-align: center;
    color: var(--color-white);
    text-transform: unset;
    border-radius: 20px 0px 0px 0px;
}
.tab-compare-content .compare-item table td.td-benefit{
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    text-align: left;
    text-transform: unset;
    color: var(--color-text-dark);
}

.tab-skill-content{
    max-width: 632px;
    margin: auto;
}
.tab-skill-content .skill-item{
    width: 194px;
    height: 212px;
    border: 2px solid var(--color-vocabulary);
    border-bottom: 5px solid var(--color-vocabulary);
    background: var(--color-vocabulary-lighter);
    border-radius: 15px;
    margin-top: 30px;
    text-align: center;
    float: left;
    margin-right: 25px;
    position: relative;
}

.tab-skill-content .skill-item.skill-item-vocabulary{
    border: 2px solid var(--color-vocabulary);
    border-bottom: 5px solid var(--color-vocabulary);
    background: var(--color-vocabulary-lighter);
}
.tab-skill-content .skill-item.skill-item-grammar{
    border: 2px solid var(--color-grammar);
    border-bottom: 5px solid var(--color-grammar);
    background: var(--color-grammar-lighter);
}
.tab-skill-content .skill-item.skill-item-pronunciation{
    margin-right: 0px;
    border: 2px solid var(--color-pronunciation);
    border-bottom: 5px solid var(--color-pronunciation);
    background: var(--color-pronunciation-lighter);
}
.tab-skill-content .skill-item.skill-item-natural{
    border: 2px solid var(--color-natural);
    border-bottom: 5px solid var(--color-natural);
    background: var(--color-natural-lighter);
}
.tab-skill-content .skill-item.skill-item-music{
    border: 2px solid var(--color-music);
    border-bottom: 5px solid var(--color-music);
    background: var(--color-music-lighter);
}
.tab-skill-content .skill-item.skill-item-writing{
    margin-right: 0px;
    border: 2px solid var(--color-writing);
    border-bottom: 5px solid var(--color-writing);
    background: var(--color-writing-lighter);
}
.skill-item .item-content img{
    width: 77px;
    margin-top: 20px;
}
.skill-item .item-content h5{
    margin: 15px 0px 0px;
    font-size: 18px;
    font-family: balootammasemibold;
    color: var(--color-vocabulary);
}
.skill-item.skill-item-vocabulary .item-content h5{
    color: var(--color-vocabulary);
}
.skill-item.skill-item-grammar .item-content h5{
    color: var(--color-grammar);
}
.skill-item.skill-item-pronunciation .item-content h5{
    color: var(--color-pronunciation);
}
.skill-item.skill-item-natural .item-content h5{
    color: var(--color-natural);
}
.skill-item.skill-item-music .item-content h5{
    color: var(--color-music);
}
.skill-item.skill-item-writing .item-content h5{
    color: var(--color-writing);
}
.skill-item .item-content h6{
    color: var(--color-text-light);
    font-size: 15px;
    margin-top: 10px;
}
.tab-skill-content .skill-item a{
    display: block;
    padding: 28px;
}
.tab-skill-content .skill-item a:hover,
.tab-skill-content .skill-item a:focus{
    text-decoration: none;
}
.tab-skill-content .skill-item i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/voca-bg.svg?n=108) 0px -2570px;
    position: absolute;
    top: 10px;
    right: 10px;

}
.tab-skill-content .skill-item.item-active i{
 background-position: 0px -300px;	
}
.tab-skill-content .skill-item.item-active i{
    display: block;
}
.tab-skill-content .skill-item .skill-tooltip{
    width: 300px;
    position: absolute;
    background: var(--color-blue);
    z-index: 2;
    left: -53px;
    bottom: -145px;
    border-radius: 10px;
    padding: 20px 15px;
    display: none;
}
.tab-skill-content .skill-item.item-active .skill-tooltip{
    display: block;
}
.tab-skill-content .skill-item .skill-tooltip::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--color-blue);;
    display: inline-block;
    position: absolute;
    top: -6px;
    left: calc(50% - 6px);
    transform: rotate(45deg);
}
.tab-skill-content .skill-item .skill-tooltip p{
    margin: 0;
    color: var(--color-white);
    font-size: 15px;
}
.tab-skill-content .skill-item .skill-tooltip .btn-choose{
    width: 100%;
    display: block;
    margin-top: 10px;
    background: var(--color-white);
    border: 1px solid #10aadb;
    border-bottom: 2px solid #10aadb;
    color: var(--color-blue);
    text-transform: uppercase;
    font-family: balootammasemibold;
    padding: 0px;
}
.tab-skill-content .skill-item .skill-tooltip .btn-choose-active{
    border: 1px solid var(--color-border-green);
    border-bottom: 2px solid  var(--color-border-green);
    color: var(--color-white);
    background: var(--color-green);
}
.tab-skill-content .skill-item .skill-tooltip .btn-choose strong{
    display: block;
    line-height: 0px;
    margin-top: 15px;
    color: #FF2828;
}
.tab-skill-content .skill-item .skill-tooltip .btn-choose span{
    display: block;
    margin-top: -4px;
    font-size: 12px;
    font-family: balootamma;
    text-decoration: line-through;
}
.form-line{
    max-width: 1006px;
    height: 1px;
    background: #DDDDDD;
    margin: 30px auto 60px;
}

.premium-form{
    max-width: 1030px;
    margin: 15px auto 0px;
    padding: 50px 15px 10px;
    border-top: 1px solid #ffffff80;
}
.premium-form .form-content{
    max-width: 912px;
    margin: 30px auto 0px;
}
.premium-form h3{
    text-align: center;
    font-size: 34;
    font-family: 'balootammabold';
    line-height: 1.5;
    margin-top: 6px;
    color: #fff;
}
.premium-form h4{
    margin: 0 auto 20px;
    font-size: 20px;
    color: #fff;
    font-family: 'balootammabold';
    width: 100%;
    text-align: left;
    max-width: 555px;
}
.premium-form input[type="text"],
.premium-form input[type="number"],
.premium-form input[type="email"]{
    display: block;
    width: 100%;
    height: 59px;
    max-width: 555px;
    margin: 15px auto 0px;
    background: #FFFFFF;
    border-radius: 15px;
    border: 0;
    color: #CE82FF;
    font-size: 18px;
    padding-left: 15px;
}
.premium-form input[type="email"]{
    /*margin-right: 0px;*/
}
.premium-form input[type="text"]:focus,
.premium-form input[type="number"]:focus,
.premium-form input[type="email"]:focus{
    outline: none;
    border-color: var(--color-blue);
    box-shadow: none;
}
.premium-form input[type="text"]::placeholder,
.premium-form input[type="number"]::placeholder,
.premium-form input[type="email"]::placeholder{
    font-size: 18px;
    color: #AFAFAF;
    font-family: balootamma;
}
.premium-form button{
    display: block;
    width: 100%;
    max-width: 368px;
    margin: 30px auto 50px;
    border: 0px;
    background: #FFB100;
    height: 50px;
    line-height: 50px;
    border-bottom: 3px solid #DE8200;
    box-shadow: none;
    outline: none;
    font-size: 15px;
    font-family: balootammabold;
    text-transform: uppercase;
    color: var(--color-white);
    border-radius: 14px;
    border-right: 3px solid #DE8200;
}
.premium-form button:hover{
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}
.choose-group {
    max-width: 555px;
    margin: 20px auto 0px;
}
.choose-group .title {
    color: #fff;
    font-size: 20px;
    font-family: 'balootammabold';
}
.choose-group .choose-group-content {
    border: 1px solid #FFFFFF;
    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: #FFFFFF;
    font-size: 18px;
    line-height: 21px;
}
.choose-group .choose-group-content .name::before {
    content: "";
    background: #FFFFFF;
    width: 11px;
    height: 11px;
    border-radius: 6px;
    position: absolute;
    left: 0px;
    top: 3px;
}
.choose-group .choose-group-content .name .line-through{
    font-size: 15px;
    font-family: 'balootammasemibold';
    text-decoration: line-through;
    margin-left: 5px;
}
.choose-group .choose-group-content .name .price{
    margin-left: 15px;
    font-size: 18px;
    font-family: 'balootammasemibold';
}
.student-group{
    width: 100%;
    max-width: 555px;
    margin: 20px auto 0px;
    color: #fff;
    font-size: 15px;
}

.premium-benefit-content{
    max-width: 1130px;
    margin: auto;
    padding: 60px 15px 0px;
}
.premium-benefit-content h2{
    font-size: 38px;
    text-align: center;
    font-family: 'balootammabold';
    color: #201F1F;
    margin: 0;
}
.premium-benefit-content h6{
    font-size: 30px;
    text-align: center;
    font-family: 'balootammasemibold';
    margin: 30px auto 15px;
    color: #201F1F;
}
.premium-benefit-content h6 span{
    color: #FF9600;
}
.item-skills-intro{
    border: 1px solid #E5E5E5;
    border-radius: 23px;
    padding: 20px 30px;
    position: relative;
    display: none;
}
.item-skills-intro.active{
    display: block;
}
.item-skills-intro::before{
    content: '';
    display: block;
    position: absolute;
    left: 61px;
    width: 15px;
    height: 15px;
    background: var(--color-white);
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    top: -8px;
}

.item-skills-intro .intro-title{
    color: #777777;
    font-size: 22px;
    font-family: balootammabold;
    margin-bottom: 10px;
}
.item-skills-intro.item-vocabulary .intro-title span{
    color: var(--color-vocabulary);
}
.item-skills-intro.item-grammar .intro-title span{
    color: var(--color-grammar);
}
.item-skills-intro.item-sentence .intro-title span{
    color: var(--color-sentence);
}
.item-skills-intro.item-pronunciation .intro-title span{
    color: var(--color-pronunciation);
}
.item-skills-intro.item-natural .intro-title span{
    color: var(--color-natural);
}
.item-skills-intro.item-music .intro-title span{
    color: var(--color-music);
}
.item-skills-intro.item-writing .intro-title span{
    color: var(--color-writing);
}
.item-skills-intro .intro-content-item{
    position: relative;
    padding-left: 25px;
    font-size: 18px;
    color: #777777;
    margin-bottom: 12px;
}
.item-skills-intro .intro-content-item::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #AFAFAF;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 5px;
}
.item-skills-intro a{
    color: #1CB0F6;
    font-size: 15px;
}
.item-skills-intro a:hover,
.item-skills-intro a:focus{
    text-decoration: none;
}

.premium-benefit2{
    background: #F8FAFB;
}
.premium-benefit2 .premium-benefit2-content{
    max-width: 1130px;
    margin: 60px auto 0px;
    padding: 50px 15px 60px;
}
.premium-benefit2 .premium-benefit2-content h6{
    font-size: 30px;
    text-align: center;
    font-family: 'balootammasemibold';
    margin: 0px auto 15px;
    color: #201F1F;
}
.premium-benefit2 .premium-benefit2-content h6 span{
    color: #FF9600;
}
.order-course-content{
    width: calc(100% + 40px);
    margin-left: -10px;
    margin-top: 30px;
}
.order-course-content .course-item{
    width: 340px;
    margin: 15px 20px 20px;
    background: #716be2;
    border-radius: 20px;
    height: 415px;
    float: left;
    transition: all .2s ease-in-out;
}
.order-course-content .course-item.skills{
    background: #FF9600;
}
.order-course-content .course-item.communicative{
    background: #58CC02;
}
.order-course-content .course-item.student{
    background: #FF9BD9;
}
.order-course-content .course-item a{
    padding: 25px 5px 10px 20px;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    background-size: cover;
    text-align: center;
    
}


.order-course-content .course-item h4{
    margin: 20px 0px 0px;
    color: #fff;
    font-size: 30px;
    font-family: 'balootammabold';
    line-height: 35px;
}
.order-course-content .course-item .description{
    margin-top: 15px;
    margin-right: 10px;
    font-size: 18px;
    color: #fff;
    line-height: 22px;
}
.order-course-content .course-item .view-course{
    display: block;
    width: 137px;
    height: 41px;
    color: #fff;
    border: 1px solid #fff;
    line-height: 41px;
    border-radius: 9px;
    font-size: 15px;
    font-family: 'balootammamedium';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
}

.premium-benefit3 .premium-benefit3-content{
    max-width: 1260px;
    padding: 60px 15px 90px;
	margin: auto;
}
.premium-benefit3 h6{
    font-size: 30px;
    text-align: center;
    font-family: 'balootammasemibold';
    margin: 0px auto 15px;
    color: #201F1F;
}
.premium-benefit3 h6 span{
    color: #FF9600;
}
.premium-benefit3 .course-benefit{
    width: calc(100% + 30px);
    margin-left: -15px;
}
.premium-benefit3 .course-benefit .benefit-item{
    width: 287px;
    margin: 30px 14px 0px;
    float: left;
    height: 310px;
    border: 1px solid #E5E5E5;
    border-radius: 18px;
    text-align: center;
    padding-top: 35px;
}
.premium-benefit3 .course-benefit .benefit-item .content{
    color: #777777;
    font-size: 18px;
    max-width: 190px;
    margin: 15px auto;
    line-height: 22px;
}
.premium-benefit3 .course-benefit .benefit-item.item-unitest .content{
    max-width: 100%;
}


.voca-story{
    max-width: 1088px;
    margin: 50px auto 0px;
    border-top: 1px solid #CFCFCF;
}
.voca-story .voca-story-content{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    background: #1CB0F6;
    max-width: 821px;
    margin: 55px auto;
    border-radius: 25px;
    padding: 45px 25px;
    border-bottom: 6px solid #1899D6;
}
.voca-story .story-left img{
    max-width: 260px;
}
.voca-story .story-right{
    padding-right: 20px;
}
.voca-story .story-right h3{
    margin: 0;
    font-size: 25px;
    color: #fff;
    font-family: 'balootammasemibold';
    text-align: left;
    line-height: 1.5;
}
.voca-story .story-right h2{
    font-size: 30px;
    color: #FFFFFF;
    margin: 10px 0px 15px;
    font-family: 'balootammasemibold';
}
.voca-story .story-right .content{
    font-size: 17px;
    font-family: 'balootammamedium';
    color: #fff;
    line-height: 1.5;
    margin-top: 15px;
}
.voca-story .story-right a{
    color: #709EFF;
    font-size: 17px;
    margin-top: 20px;
    display: inline-block;
    font-family: 'balootammasemibold';
    text-decoration: underline;
}







.home-register{
    margin-top: 60px;
    background: url(../images/cloud-bg-2.png), #1CB0F6;
    background-repeat: no-repeat;
    background-position: center;
}
.home-register .home-register-content{
    max-width: 698px;
    margin: auto;
    padding: 70px 15px 60px;
    text-align: center;
}
.home-register .home-register-content h4{
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-family: 'balootammasemibold';
    line-height: 1.5;
}

.home-register .home-register-content .btn-premium{
    height: 48px;
    line-height: 44px;
    text-transform: uppercase;
    color: #fff;
    background: #2B70C9;
    border: 0;
    border-bottom: 4px solid #709EFF;
    margin-top: 35px;
}

/* The.group-checkbok */
.student-group{
    display: none;
}
.group-checkbok {
     display: block;
	position: relative;
	padding-left: 40px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 100;
	padding-top: 5px;
	color: #fff;
	font-size: 18px;
	font-family: balootamma;
}

.group-checkbok .price-store{
    font-size: 15px;
    font-family: 'balootammasemibold';
    text-decoration: line-through;
    margin-left: 5px;
}
.group-checkbok .price{
    font-size: 18px;
    font-family: 'balootammasemibold';
    margin-left: 5px;
}
/* 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: 32px;
	width: 32px;
	border: 1px solid #fff;
	border-radius: 9px;
}

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

/* 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: 10px;
	top: 5px;
	width: 10px;
	height: 15px;
	border: solid #58CC02;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


.premium-member{
    background: var(--color-blue);
}
.premium-member .premium-member-content{
    max-width: 810px;
    margin: auto;
    padding: 15px 15px;
}
.premium-member .member-left{
    float: left;
    max-width: 450px;
    padding-top: 130px;
}
.premium-member .member-left h5{
    font-size: 20px;
    font-family: balootammaextrabold;
    text-transform: uppercase;
    color: var(--color-white);
}
.premium-member .member-left h6{
    font-size: 17px;
    color: var(--color-white);
    margin-top: 10px;
    font-family: balootammamedium;
    line-height: 1.4;
}
.premium-member .member-right{
    float: left;
    max-width: 300px;
    padding-left: 80px;
}
.premium-member .member-right{
    float: left;
    max-width: 300px;
    padding-left: 80px;
}
.premium-member .member-right img{
    width: 100%;
}


.premium-quote .premium-quote-content{
    max-width: 1260px;
    padding: 0px 15px 90px;
	margin: auto;
}
.premium-quote-content .left{
    width: 108px;
    float: left;
    margin-top: 80px;
}
.premium-quote-content .right{
    width: calc(100% - 128px);
    float: left;
    margin-left: 20px;
    border-radius: 27px;
    background: #EBFBFF;
    min-height: 245px;
    padding: 25px;
}
.premium-quote-content .right .right-content{
    border: 1px dashed #1CB0F6;
    border-radius: 17px;
    padding: 30px 15px;
}
.premium-quote-content .right .right-content .content{
    color: #1899D6;
    font-size: 34px;
    text-align: center;
    font-family: balootammamedium;
}
.premium-commit-content{
    max-width: 1225px;
    padding: 0px 15px 30px;
	margin: auto;
}
.premium-commit-content h2{
    margin: 0;
    text-align: center;
    color: #201F1F;
    font-size: 38px;
    font-family: 'balootammabold';
}
.premium-commit-content .commit-item{
    padding: 60px 0px;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
}
.premium-commit-content .commit-item .item-text{
    width: 59%;
    float: left;
    max-width: 640px;
}
.premium-commit-content .commit-item .item-text.item-right{
    padding-left: 60px;
}
.premium-commit-content .commit-item .item-title{
    font-size: 32px;
    color: #201F1F;
    font-family: 'balootammabold';
    margin-top: 20px;
}
.premium-commit-content .commit-item .item-title span{
    color: #FF9600;
    position: relative;
}
.premium-commit-content .commit-item .item-title span::before{
    content: '';
    display: block;
    background: #FFC97D;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 6px;
    bottom: 14px;
    z-index: -1;
}
.premium-commit-content .commit-item .item-content{
    color: #4C4C4C;
    font-size: 20px;
    line-height: 27px;
    margin-top: 15px;
}
.premium-commit-content .commit-item .item-image{
    width: 41%;
    float: left;
}
.premium-commit-content .commit-item .item-image img{
    max-width: 100%;
}
.commit-item .item-right.item-image{
    text-align: right;
    float: right;
}
.premium-commit-content .commit-item.commit-item-3{
    border-bottom: 0;
}
.study-path-commit-content{
    padding: 30px 15px 60px;
    text-align: center;
}
.study-path-commit-content h2{
    margin: 0;
    color: #4C4C4C;
    font-size: 32px;
    font-family: 'balootammabold';
}
.study-path-commit-content img{
    display: block;
    margin: 45px auto 0;
    max-width: 1200px;
}
.study-path-progress .progress-content{
    position: relative;
    min-height: 645px;
    margin-top: 25px;
    max-width: 1240px;
    margin: 25px auto 0px;
}
.study-path-progress .progress-line{
    height: 11px;
    background: #F4DCFF;
    display: block;
    max-width: 1100px;
    border-radius: 11px;
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.progress-item{
    width: 278px;
    left: 0;
    top: 50%;
    position: absolute;
}

.progress-item .milestones{
    position: absolute;
    left: 0;
    top: -15px;
    z-index: 1;
}
.progress-item .progress-border{
    position: absolute;
    left: 14px;
    height: 93px;
    z-index: 0;
}
.progress-item .content{
    background: #FFECD1;
    border-radius: 19px;
    border: 2px solid #DE8200;
    position: absolute;
    top: 80px;
    z-index: 1;
    text-align: left;
    height: 190px;
    padding: 15px;
}
.progress-item .content h3{
    margin: 0;
    text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    font-size: 44px;
    font-family: 'balootammaextrabold';
    color: #D17B00;
}
.progress-item .content h4{
    margin: 5px 0px 0px;
    font-size: 22px;
    font-family: 'balootammabold';
}
.progress-item .content h6{
    margin: 5px 0px 0px;
    font-size: 15px;
    line-height: 20px;
}

.progress-item.a1 .content h3{
    color: #CE82FF;
}
.progress-item.a2 .content h3{
    color: #00CB7E;
}
.progress-item.b1 .content h3{
    color: #FC4848; 
}
.progress-item.b2 .content h3{
    color: #1CB0F6;
}
.progress-item.c1 .content h3{
    color: #58CC02;
}
.progress-item.c2 .content h3{
    color: #FFC800; 
}

.progress-item.a1{
    top: 0;
    left: 120px;
}
.progress-item.a1 .milestones{
    top: 306px;
    left: 50px;
}
.progress-item.a1 .progress-border{
    top: 210px;
    left: 64px;
}
.progress-item.a1 .content{
    top: 15px;
    height: 225px;
    border-color: #CE82FF;
    background: #F8EBFF;
}
.progress-item.a2{
    left: 320px;
}
.progress-item.a2 .content{
    height: 225px;
    border-color: #00CB7E;
    background: #E5F8D8;
}


.progress-item.b1{
    top: 0;
    left: 450px;
}
.progress-item.b1 .milestones{
    top: 306px;
    left: 30px;
}
.progress-item.b1 .progress-border{
    top: 210px;
    left: 44px;
}
.progress-item.b1 .content{
    top: 15px;
    height: 225px;
    border-color: #FC4848;
    background: #FFE2E2;
}

.progress-item.b2{
    left: 640px;
}
.progress-item.b2 .content{
    height: 225px;
    background: #DBF3FE;
    border-color: #1CB0F6;
}

.progress-item.c1{
    top: 0;
    left: 770px;
}
.progress-item.c1 .milestones{
    top: 306px;
    left: 90px;
}
.progress-item.c1 .progress-border{
    top: 210px;
    left: 104px;
}
.progress-item.c1 .content{
    top: 0px;
    height: 235px;
    background: #E5F8D8;
    border-color: #58CC02;
}

.progress-item.c2{
    left: 960px;
}
.progress-item.c2 .content{
    height: 225px;
    background: #FFF5D3;
    border-color: #FFC800;
}
.progress-item.c2 .milestones{
    left: calc(50% - 20px);
}
.progress-item.c2 .progress-border{
    left: calc(50% - 6px);
}

.premium-video-line{
    height: 1px;
    background: #E5E5E5;
    max-width: 1195px;
    margin: auto;
}
.premium-video .premium-video-content{
    max-width: 1225px;
    margin: auto;
    padding: 60px 15px 10px;
}
.premium-video .premium-video-content h2{
    margin: 0px 0px 60px;
    text-align: center;
    color: #201F1F;
    font-size: 38px;
    font-family: 'balootammabold';
}
.premium-video .premium-video-content h2 span{
    position: relative;
    z-index: 1;
    color: #FF9600;
}
.premium-video .premium-video-content h2 span::before{
    content: '';
    display: block;
    background: #FFC97D;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 6px;
    bottom: 17px;
    z-index: -1;
}
.premium-video .premium-video-content .left{
    width: 54%;
    float: left;
    border-radius: 25px;
    border: 1px solid #E5E5E5;
    padding: 50px 50px 60px;
}
.premium-video .premium-video-content .left .content{
    font-size: 20px;
    font-family: 'balootammamedium';
    line-height: 32px;
}
.premium-video .premium-video-content .right{
    width: 46%;
    float: right;
    padding-left: 50px;
}
.premium-video .video-image{
    background: url(../images/premium-video-bg.svg);
    padding: 25px;
    background-size: cover;
    border-radius: 20px;
}
.premium-video .premium-video-content .right video{
    width: 100%;
    border-radius: 14px;
}



.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: 38px;
    text-align: center;
    font-family: 'balootammabold';
}
.order-comment h2 span{
    position: relative;
    z-index: 1;
    color: #FF9600;
}
.order-comment h2 span::before{
    content: '';
    display: block;
    background: #FFC97D;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 6px;
    bottom: 17px;
    z-index: -1;
}
.order-comment .comment-content{
    width: calc(100% + 22px);
    margin-top: 30px;
}
.order-comment .commment-item{
    width: 353px;
    height: 282px;
    background: #F7F7F7;
    border-radius: 21px;
    padding: 30px 25px 45px 30px;
    margin: 30px 0px 0px;
    float: left;
    position: relative;
    border: 1px solid #e5e5e5;
    margin-bottom: 95px;
}
.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;
    position: absolute;
    bottom: -100px;
    z-index: 111111111;
    text-align: center;
    display: block;
    width: 100%;
    left: 0;
}
.order-comment .commment-item .name span{
    display: block;
    color: #AFAFAF;
    font-size: 15px;
    font-family: 'balootammamedium';
}
.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;
}


.promotion-tag{
    position: absolute;
    z-index: 1;
    width: 94.78px;
    display: block;
    height: 94.78px;
    background: url("../images/voca-bg.svg?n=108") 0px -3990px;
    top: 30px;
    left: -20px;
    text-align: center;
}
.promotion-tag-premium{
    background-position: 0px -3890px;
}

.promotion-tag i{
    font-size: 13px;
    font-family: balootammamedium;
    font-style: normal;
    color: #FE415C;
    line-height: 4px;
    margin-top: 33px;
    display: block;
}

.promotion-tag strong{
    font-size: 15px;
    font-family: balootammabold;
    font-style: normal;
    color: #FE415C;
    margin-top: 3px;
    display: block;
    font-weight: 400;
}
.promotion-tag-premium i,
.promotion-tag-premium strong{
    color: #FEF06B;
}


.vip-tag{
    position: absolute;
    z-index: 1;
    width: 62.64px;
    display: block;
    height: 61.17px;
    background: url("../images/voca-bg.svg?n=108") 0px -4090px;
    top: 10px;
    left: -20px;
    text-align: center;
}
.vip-tag span{
    font-size: 10px;
    font-family: balootammamedium;
    font-style: normal;
    color: #FE415C;
    line-height: 4px;
    margin-top: 33px;
    display: block;
}
.vip-tag strong{
    font-size: 12px;
    font-family: balootammabold;
    font-style: normal;
    color: #FE415C;
    margin-top: 2px;
    display: block;
    font-weight: 400;
}

.payment-promotion{
    display: block;
    text-align: center;
    font-size: 13px;
    font-family: balootammamedium;
    color: #FE415C;
    margin-top: 4px;
}
.see-more{
    font-size: 15px;
    color: var(--color-blue);
    font-family: balootammamedium;
    display: inline-block;
    margin-top: 0px;
    width: 229px;
    height: 60px;
    line-height: 60px;
    display: block;
    background: #FF9600;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 10px;
    border-bottom: 3px solid #DE8200;
    text-align: center;
}
.see-more:hover,
.see-more:focus{
    text-decoration: none;
    color: #fff;
}
.benefit1-middle-mobile{
    display: none;
}



.home-benefit .home-benefit-content{
    background: #9069CD;
    padding: 50px 0px 0px;
    padding-bottom: 70px;
}
.home-benefit .home-benefit-content h2{
    margin: 0;
    color: #FFFFFF;
    text-align: center;
    font-size: 32px;
    font-family: 'balootammabold';
}
.home-benefit .home-benefit-content h2 span{
    position: relative;
    z-index: 1;
}
.home-benefit .home-benefit-content h2 span::before{
    content: '';
    display: block;
    background: #FFC97D;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 6px;
    bottom: 14px;
    z-index: -1;
}
.home-benefit .benefit-content{
    max-width: 1500px;
    margin: auto;
    background: url(../images/home-multiple-cloud-bg.svg);
}
.home-benefit .benefit-content-item{
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}
.home-benefit .benefit-item{
    float: left;
    width: 100%;
    margin-top: 70px;
    border-bottom: 1px dashed #E5E5E5;
    padding-bottom: 30px;
    padding-left: 70px;
    padding-right: 70px
}
.home-benefit .benefit-item.benefit-4{
    border-bottom: 0;
    padding-bottom: 0;
}
.home-benefit .benefit-item .left{
    width: 31%;
    float: left;
}
.home-benefit .benefit-item .left img{
    width: 100%;
}
.home-benefit .benefit-item.benefit-2 .left img{
    max-width: 265px;
}
.home-benefit .benefit-item .right{
    width: 69%;
    float: left;
    padding-left: 75px;
    padding-top: 20px;
}
.home-benefit .benefit-item .right .right-content{
    background: #ffffff33;
    border-radius: 22px;
    padding: 40px;
}

.home-benefit .benefit-item .right .content{
    font-size: 22px;
    color: #fff;
    font-family: 'balootammabold';
    max-width: 560px;
}

.home-benefit .benefit-item.benefit-2 .left,
.home-benefit .benefit-item.benefit-4 .left{
    float: right;
    text-align: right;
}



.study-path-object{
    padding: 60px 24px 0px;
}
.study-path-object h2{
    margin: 0;
    text-align: center;
    font-size: 32px;
    font-family: 'balootammabold';
}
.study-path-object h2 span{
    position: relative;
    z-index: 1;
    color: #FF9600;
}
.study-path-object h2 span::before{
    content: '';
    display: block;
    background: #FFC97D;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 6px;
    bottom: 14px;
    z-index: -1;
}
.study-path-object .study-path-object-content{
    max-width: 1168px;
    margin: 50px auto 50px;
}
.study-path-object .object-item{
    width: 304px;
    float: left;
    text-align: center;
}
.study-path-object .object-item.object-1{
    margin-right: 64px;
}
.study-path-object .object-item.object-2{
    margin-right: 64px;
    margin-left: 64px;
}
.study-path-object .object-item.object-3{
    margin-left: 64px;
}

.study-path-object .object-item h4{
    margin: 0;
    font-size: 30px;
    color: #4C4C4C;
    font-family: 'balootammasemibold';
}
.study-path-object .object-item img{
    max-width: 100%;
}
.study-path-object .object-item.object-1 img{
    margin-top: 5px;
}
.study-path-object .object-item.object-3 img{
    margin-top: 35px;
}
.study-path-object .object-item h4 span{
    font-size: 60px;
    font-family: 'balootammabold';
}
.study-path-object .object-item .content{
    max-width: 240px;
    margin: 10px auto 0px;
    color: #777777;
    font-size: 18px;
}
.study-path-object .study-path-object-teacher{
    max-width: 1060px;
    margin: 45px auto 0px;
    font-size: 18px;
    text-align: center;
}

.order-action{
    background: url(../images/study-path-register-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 60px;
}
.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: #9069CD;
    font-size: 15px;
    font-family: 'balootammabold';
    border-right: 4px solid #E7C1FF;
    border-bottom: 4px solid #E7C1FF;
    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: #9069CD;
    margin-left: 10px;
}
.order-action .order-action-content .btn-learning:hover{
    text-decoration: none;
}


.package-note{
    max-width: 1250px;
    margin: 50px auto 0px;
    border-top: 1px solid #E5E5E5;
    padding-top: 50px;
}
.package-note .package-note-content{
    max-width: 1000px;
    margin: auto;
}
.package-note .package-note-content h3{
    margin: 0;
    color: #4C4C4C;
    text-align: center;
    font-size: 32px;
    font-family: balootammasemibold;
}
.package-note .package-note-content .note-content{
    margin-top: 15px;
}
.package-note .package-note-content .note-item{
    margin-top: 30px;
}
.package-note .package-note-content .note-title{
    background: #9069CD;
    border-radius: 14px;
    min-height: 68px;
    color: #fff;
    font-size: 20px;
    font-family: 'balootammamedium';
    padding: 25px 20px 15px;
    position: relative;
}
.package-note .package-note-content .active .note-title{
    background: #fff;
    color: #9069CD;
    border: 1px solid #9069CD;
}
.package-note .package-note-content .note-title:hover{
    cursor: pointer;
}
.package-note .package-note-content .note-title::after{
    content: '';
    width: 22.059px;
    height: 22.059px;
    background: url(../images/scholarship-plus.svg);
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 24px;
}
.package-note .package-note-content .active .note-title::after{
    background: url(../images/study-path-minus-active.svg); 
    background-repeat: no-repeat;
    top: 30px;
}
.package-note .package-note-content .note-description{
    color: #9069CD;
    font-size: 15px;
    padding: 20px 0px 0px 20px;
    display: none;
}
.package-note .package-note-content .active .note-description{
    display: block;
}
.package-note .package-note-content .note-description a{
    color: #9069CD  ;
}

@media(min-width: 768px){
    .premium-header .premium-header-content{
        display: flex;
        flex-direction: row-reverse;
    }
    .premium-benefit-content .premium-benefit-item{
        display: block;
    }
	
}
@media(max-width: 991px){
    /*.premium-form input[type="text"], 
    .premium-form input[type="number"], 
    .premium-form input[type="email"]{
        width: 30%;
    }*/
	
	
	.tab-premium-content .premium-item .item a.btn-see-more{
		display: block;
	}
	
    .premium-package .package-tab-content{
      
        
        padding-bottom: 0px;
        margin-bottom: 30px;
    }
    
	
    .premium-package .package-content{
        padding: 30px 15px 0px;
    }
    .premium-form .form-content{
        max-width: 450px;
    }
    .premium-benefit-content h2{
        font-size: 25px;
        margin-top: 0px;
        line-height: 30px;
    }
    .premium-benefit-content h6{
        font-size: 20px;
        line-height: 27px;
        max-width: 275px;
        margin-top: 20px;
    }
    .item-skills-intro.active::before{
        display: none;
    }
    .premium-benefit2 .premium-benefit2-content{
        margin-top: 35px;
        padding-top: 35px;
        padding-bottom: 40px;
    }
    .order-course-content .course-item{
        width: 290px;
    }
    .premium-benefit3 .premium-benefit3-content{
        padding-top: 35px;
        padding-bottom: 35px;
    }
    .premium-benefit3 h6{
        font-size: 20px;
        line-height: 25px;
        margin-bottom: 0;
    }
    .course-benefit-content{
        overflow: auto;
    }
    .course-benefit-content .benefit-content{
        width: 1260px;
    }
    .premium-quote-content .left{
        display: none;
    }
    .premium-quote-content .right{
        width: 100%;
        padding: 15px;
        margin: 0;
    }
    .premium-quote-content .right .right-content .content{
        font-size: 26px;
        line-height: 36px;
    }
    .order-course-group{
        overflow: auto;
    }
    .order-course-content{
        width: 990px;
    }
    .benefit1-middle{
        display: none;
    }
    .benefit1-middle-mobile{
        display: block;
        margin-bottom: 40px;
    }
    .premium-benefit-content .benefit1-content{
        display: block;
        margin-top: 30px;
    }
    .premium-benefit-content h4,
    .premium-benefit-content h4{
        line-height: 1.5;
    }
    
    .icon-plus{
        transform: scale(0.8);
    }
    .tab-premium-content .premium-item .item-header h6{
        font-size: 15px;
    }
    .tab-premium-content .premium-item .item-header h5{
        font-size: 20px;
    }
    .package-content .item-header .header-left{
        width: 175px;
    }
    .package-content .item-header .header-promotion{
        margin-top: -42px;
    }

    .benefit3-content .content .content-text{
        float: none;
        width: 100%;
    }
    .benefit3-content .content .content-image{
        float: none;
        margin: auto;
        display: none;
    }
    .benefit3-content .content .content-image-mobile{
        display: block;
        text-align: center;
        margin-bottom: 30px;
        width: 230px;
		margin: auto;
    }
    .benefit3-content .content .content-image-mobile img{
        max-width: 100%;;
    }
    .benefit3-content .content.content-support .content-right{
        text-align: center;
    }
    .benefit3-content .content{
        padding: 30px;
    }
    
    .voca-story .voca-story-content{
        display: block;
        text-align: center;
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    .voca-story .story-right {
        padding: 0;
        margin-top: 30px;
        text-align: left;
    }
    .premium-benefit2-content .benefit2-content{
        grid-gap: 30px;
    }

    .premium-commit-content{
        padding: 0px 15px 35px;
    }
    .premium-commit-content h2{
        font-size: 25px;
    }
    .premium-benefit2 .premium-benefit2-content h6{
        font-size: 20px;
        margin-bottom: 0;
        line-height: 27px;
    }
}
@media(max-width: 800px){
   
  
    /* .premium-form input[type="text"], 
    .premium-form input[type="number"], 
    .premium-form input[type="email"]{
        max-width: 313px;
        margin-right: 0px;
    } */
}
@media(max-width: 768px){

    .tab-premium-content{
        min-width: 100%;
		width: 100%;
		/* overflow: hidden; */
		/* overflow-x: auto; */
    }
    .tab-premium-content .premium-item{
        margin: 40px 15px 0px 0px;
        max-width: 100%;
        width: 342px!important;
        float: none;
    }
   
    .premium-header .header-right{
        width: 100%;
        margin: auto;
    }
    .premium-header .header-left{
        width: 100%;
        margin: 10px auto 0px;
        text-align: center;
    }
   
    
    .premium-form input[type="text"], 
    .premium-form input[type="number"], 
    .premium-form input[type="email"]{
        width: 100%;
        display: block;
        max-width: unset;
        margin: 20px auto;
    }
    .premium-benefit-content .benefit-item{
        float: none;
    }
    .premium-benefit-content .item-image{
        float: none;
        margin: auto;
        padding: 0px;
        text-align: center;
        max-width: 150px;
    }
    .premium-benefit-content .item-text{
        padding: 0;
        float: none;
        margin: 20px auto 20px;
        text-align: center;
    }
    .premium-benefit-content .item-image img{
        width: 100%;
        max-width: 150px;
    }
    .premium-benefit-content .item-image.visible-xs{
        display: block;
    }
    .premium-benefit-content .item-image.hidden-xs{
        display: none;
    }
    .premium-member .member-left{
        padding-top: 30px;
        text-align: center;
        float: none;
    }
    .premium-member .member-right{
        padding: 0;
        max-width: 150px;
        margin: 20px auto;
        float: none;
        text-align: center;
    }
   
    .tab-compare-content .compare-item{
        overflow-x: auto;
    }
    .tab-compare-content .compare-item table{
        min-width: 800px;
    }


    .library-header-content .right{
        width: 100%;
        float: none;
        max-width: 260px;
        margin: auto;
    }
    .library-header-content .left{
        width: 100%;
        margin-top: 30px;
        padding: 0;
        float: none;
    }
    .library-header-content .left h1{
        font-size: 28px;
        text-align: center;
        border: unset;
        margin: auto;
        background: unset;
        padding: 0;
        height: unset;
        text-align: center;
        width: unset;
    }
    .library-header-content .left .content {
        font-size: 15px;
        text-align: center;
        max-width: 300px;
        margin: 10px auto 0px;
    }
    .library-header-content .header-content{
        padding-bottom: 30px;
        padding-top: 30px;
    }
    .library-header-content .left a{
        width: 100%;
        margin-top: 15px;
    }
}
@media(max-width: 600px){
    .tab-skill-content{
        padding-bottom: 0px;
        margin-bottom: 30px;
    }
    .skill-item-content{
        width: 440px;
		padding-bottom: 15px;
    }
	.tab-skill-content .skill-item.skill-item-pronunciation{
		margin-right: 20px;
	}
}
.footer-info .footer-info-content .footer-button{
	display: none;
}







/**header**/

/*header{
    background: #3b5998!important;
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 1000;
    top: 0px;
	border-bottom:0!important;
}
header .header-menu-content{
    max-width: 1170px;
    padding: 0px 15px;
    margin: auto;
}
.header-menu-content .header-menu-item{
    float: left;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
}
.header-menu-content .menu-item-back a{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header-menu-content .menu-item-back i{
    display: block;
    width: 24.248px;
    height: 22.809px;
    background: url(../images/menu.svg) 0px -400px;
}
.header-menu-content .menu-item-back img{
    width: 90px;
    margin-left: 15px;
}
.header-menu-content .menu-item-back a span{
    font-size: 15px;
    font-family: balootammamedium;
    color: var(--color-white);
    margin-left: 10px;
    text-transform: uppercase;
}
.header-menu-content .header-menu-item.menu-item-phone{
    float: right;
    background: var(--color-orange);
    height: 46px;
    margin-top: 12px;
    border-radius: 10px;
}
.header-menu-content .menu-item-phone a {
        display: flex;
    flex-direction: row;
    align-items: center;
    transform: scale(0.85);
}
.header-menu-content .menu-item-phone i {
    display: block;
    width: 35.891px;
    height: 35.889px;
    background: url(../images/menu.svg) 0px -430px;
}
.header-menu-content .menu-item-phone span{
    display: block;
    color: var(--color-white);
    font-family: balootammamedium;
   
}
.header-menu-content .menu-item-phone .hotline{
    font-size: 15px;
    margin-left: 10px;
}
.header-menu-content .menu-item-phone .time{
    font-size: 10px;
    margin-top: -3px;
    display: block;
    margin-left: 10px;
}
@media(max-width: 767px){
	.header-menu-content .menu-item-back img{
		display: none;
	}
	
	.header-menu-content .header-menu-item.menu-item-phone{
		margin-top: 6px;
	}
	.header-function{
		display: none!important;
	}
}*/
/**header**/








#description-modal .modal-dialog{
    max-width: 750px;
}
#description-modal .modal-content{
    border-radius: 15px;
}
#description-modal .modal-header{
    border: 0px;
    position: relative;
}
#description-modal .modal-header a{
    display: inline-block;
    width: 15.879px;
    height: 15.878px;
    background: url(../images/voca-bg.svg?n=108) 0px -490px;
    position: absolute;
    right: 15px;
    top: 15px;
	z-index: 1;
}
#description-modal .modal-body{
    padding: 10px 50px 25px;
}
#description-modal .modal-body iframe{
    max-width: 100%;
}
#description-modal .modal-body table{
    width: 100%;
}
#description-modal .modal-body table td{
    height: 30px;
    padding-left: 10px;
}
#description-modal .modal-body img{
	max-width: 100%;
	height: auto!important;
}
@media(max-width: 600px){
    #description-modal .modal-body{
		padding: 10px 15px 25px;
	}
    .library-header .header-left .see-more{
        margin-bottom: 20px;
    }
}

.landing-method {
    text-align: center;
}

.method-content-item{
    margin-top: -111px;
}
.landing-method .method-content-item .method-content {
    position: sticky;
}
.landing-method .method-content-item{
    position: relative;
}
.landing-method .method-content-item .method-content{
    position: sticky;
}

.landing-method .method-content-item .content-item{
   position: relative;
}

.landing-method .method-content-item .content-item-image{
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    top: 175px;
    width: 279px;
}

.landing-method .method-content-item .image-sticky{
    position: sticky;
    top: calc(50vh - 282.5px);
    height: 565px;
}
.landing-method .item-left{
    max-width: 350px;
    width: 100%;
    padding-top: 190px;
    min-height: 880px;
    display: flex;
}
.landing-method .item-left .item-left-content{
    margin: auto;
    text-align: left;
}
.landing-method .item-left h4{
    color: #201F1F;
    font-size: 25px;
    font-family: 'balootammasemibold';
    line-height: 1.4;
    margin: 0;
    text-transform: capitalize;
}
.landing-method .item-left h5{
    font-size: 124px;
    margin: 0 0px 3px;
    font-family: 'balootammasemibold';
}
.landing-method .item-left .app-item-1 h5,
.landing-method .item-left .app-item-1 h4{
    color: #1CB0F6;
}
.landing-method .item-left .app-item-2 h5,
.landing-method .item-left .app-item-2 h4{
    color: #2BC788;
}
.landing-method .item-left .app-item-3 h5,
.landing-method .item-left .app-item-3 h4{
    color: #FEB200;
}
.landing-method .item-left .app-item-6 h5{
    font-size: 110px;
}
.landing-method .item-left .app-item-6 h5,
.landing-method .item-left .app-item-6 h4{
    color: #A73AD4;
}
.landing-method .item-left .app-item-5 h5,
.landing-method .item-left .app-item-5 h4{
    color: #3762CC;
}
.landing-method .item-left .app-item-4 h5,
.landing-method .item-left .app-item-4 h4{
    color: #7AC70C;
}
.landing-method .item-left p{
    margin: 12px 0px 0px;
    font-size: 15px;
    color: #4C4C4C;
    font-family: 'balootammasemibold';
}
.landing-method .item-right{
    float: right;
    max-width: 240px;
    padding-top: 80px;
}
.landing-method .item-right img{
    width: 100%;
}

.landing-method .method-content-item .image-sticky figure{
    position: relative;
}
.device-hardware {
    position: absolute;
    z-index: 2;
    background: url("../images/landing-page-phone.png");
    width: 279px;
    height: 603px;
}

.device-screen {
    position: absolute;
    z-index: 1;
    width: 247px;
    height: 535px;
    top: 15px;
    left: 15px;			
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 100ms ease-out;
    -webkit-transition-delay: 110ms;
    transition-delay: 110ms;
    opacity: 0;
}
.device-screen-1{
    background: url("../images/premium-phone-1.png");

}
.device-screen-2{
    background: url("../images/landing-page-phone-2.png");
}
.device-screen-3{
    background: url("../images/premium-phone-3.png");
}

.device-screen-4{
    background: url("../images/premium-phone-4.png?n=1");

}
.device-screen-5{
    background: url("../images/premium-phone-5.png");
}
.device-screen-6{
    background: url("../images/premium-phone-6.png");
}

.device-screen-1.device-screen-visible,
.device-screen-2.device-screen-visible,
.device-screen-3.device-screen-visible,
.device-screen-4.device-screen-visible,
.device-screen-5.device-screen-visible,
.device-screen-6.device-screen-visible{
    opacity: 1;
}
.landing-method .item-left figure{
    display: none;
    position: relative;
}


.premium-benefit-other{
    background: #01357A;
    padding: 40px 15px;
    margin-top: 50px;
}
.premium-benefit-other-content{
    max-width: 980px;
    margin: auto;
}
.premium-benefit-other-content h2{
    margin: 0;
    text-align: center;
    font-size: 25px;
    color: #fff;
    font-family: 'balootammabold';
}
.premium-benefit-other-content h3{
    margin: 15px auto 0px;
    max-width: 600px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}
.premium-benefit-other-content .benefit-other-content{
       width: 100%;
    margin: 40px auto 0px;
    overflow: auto;
	max-width: 894px;
}
.other-item-compare{
    width: 240px;
    float: left;
}
.other-item-compare .title{
    background: #FFFFFF;
    border-radius: 12px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'balootammabold';
    color: #AFAFAF;
}
.benefit-other-item .feature i{
    width: 32.333;
    height: 32.333;
    background: url(../images/voca-bg.svg?n=108) 0px -8450px;
    float: left;
    display: block;
    margin-left: 5px;
    margin-top: 7px;
}
.benefit-other-item .feature{
    height: 52px;
    background: #FFFFFF;
    border-radius: 50px;
    margin-top: 10px;
    padding: 8px 13px 8px 8px;
}
.benefit-other-item .feature span{
    float: left;
    display: block;
    width: calc(100% - 45px);
    font-size: 14px;
    color: #201F1F;
    margin-top: 0px;
    padding-left: 7px;
}
.benefit-other-item .feature.price span{
    display: block;
    text-align: center;
    width: 100%;
    line-height: 35px;
}
.benefit-other-item .feature.support span,
.benefit-other-item .feature.ads span{
    margin-top: 10px;
}
.benefit-other-item .feature.course i{
	 background-position-y: -8870px;
    margin-top: 13px;
}
.benefit-other-item .feature.pin i{
    background-position-y: -8490px;
    margin-top: 4px;
    margin-left: 3px;
    margin-right: 2px;
}
.benefit-other-item .feature.ept i{
    background-position-y: -8580px;
    margin-top: 5px;
}
.benefit-other-item .feature.promotion i{
    background-position-y: -8540px;
}
.benefit-other-item .feature.support i{
    background-position-y: -8620px;
}
.benefit-other-item .feature.ads i{
    background-position-y: -8660px;
}
.other-item-compare-product{
    float: left;
    width: 203px;
    margin-left: 15px;
}
.other-item-compare-product .compare-product-content{
    border: 1px solid #FF9600;
    border-radius: 12px;
    overflow: hidden;
}
.other-item-compare-product.premium .compare-product-content{
    border: 1px solid #1CB0F6;
}
.other-item-compare-product.skills .compare-product-content{
    border: 1px solid #E5E5E5;
}
.other-item-compare-product .compare-product-content .title{
    background: #FF9600;
    color: #fff;
    height: 56px;
    line-height: 60px;
    font-size: 18px;
    text-align: left;
    font-family: 'balootammasemibold';
}
.other-item-compare-product.premium .compare-product-content .title{
    background: #1CB0F6;
    text-align: center;
}
.other-item-compare-product.skills .compare-product-content .title{
    background: #E5E5E5;
    text-align: center;
    color: #AFAFAF;
}
.other-item-compare-product.premium-plus .compare-product-content .title i{
    background: url(../images/plus.svg);
    width: 60px;
    height: 29px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 5px;
    font-style: normal;
    line-height: 32px;
    margin-left: 6px;
    text-align: center;
}
.other-item-compare-product.premium .compare-product-content .title i{
    background: url(../images/plusplus2.svg);
    width: 82.837px;
    height: 29px;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 5px;
    font-style: normal;
    line-height: 32px;
    margin-left: 6px;
    text-align: left;
}
.other-item-compare-product .compare-product-content .time{
    height: 29px;
    background: #fff;
    line-height: 29px;
    font-size: 15px;
    color: #333;
    font-family: 'balootammabold';
    text-align: center;
}
.other-item-compare-product .compare-product-content .check{
    height: 62px;
    background: #fff;
    text-align: center;
    padding-top: 15px;
}
.other-item-compare-product.premium-plus .compare-product-content .check-1,
.other-item-compare-product.premium-plus .compare-product-content .check-3,
.other-item-compare-product.premium-plus .compare-product-content .check-5{
    background: #fff4be;
}
.other-item-compare-product.premium .compare-product-content .check-1,
.other-item-compare-product.premium .compare-product-content .check-3,
.other-item-compare-product.premium .compare-product-content .check-5{
    background: #EBFBFF;
}
.other-item-compare-product.skills .compare-product-content .check-1,
.other-item-compare-product.skills .compare-product-content .check-3,
.other-item-compare-product.skills .compare-product-content .check-5{
    background: #F0F0F0;
}
.other-item-compare-product .compare-product-content .check i{
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/voca-bg.svg?n=108) 0px -8840px;
    border-radius: 20px
}
.other-item-compare-product.premium-plus .compare-product-content .check.active i{
    background-position-y: -8780px;
}
.other-item-compare-product.premium .compare-product-content .check.active i{
    background-position-y: -8810px;
}
.other-item-compare-product.skills .compare-product-content .check.active i{
    background-position-y: -8910px;
}
.other-item-compare-product  a{
    display: block;
    width: 100%;
    height: 55px;
    text-align: center;
    margin-top: 15px;
    background: #FEB200;
    color: #fff;
    border: 1px solid #ec9212;
    border-radius: 15px;
    line-height: 55px;
    border-bottom: 5px solid #e2901b;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'balootammasemibold';
}
.other-item-compare-product a:hover{
    color: #fff;
    text-decoration: none;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}
.other-item-compare-product a.btn-choose-premium{
    border-color: #cfcfcf;
    color: #b5b5b5;
    background: #fff;
}
.other-item-compare-product a.btn-choose-premium-plus-plus{
    background: #1CB0F6;
    border-color: #0a8cca;
}

.other-item-compare-product .compare-product-fee{
    height: 250px;
    margin-top: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
}
.other-item-compare-product .compare-product-fee div{
    height: 62.5;
    border-bottom: 1px solid #ddd;
    line-height: 62.5px;
    text-align: center;
    font-size: 15px;
    color: #4C4C4C;
    font-family: 'balootammasemibold';
}
.other-item-compare-product .compare-product-fee div:last-child{
    border-bottom: 0
}

.other-item-compare-product .compare-product-fee div.discount{
    
    color: #85cb21;
}
.other-item-compare-product .compare-product-fee div.price{
    font-size: 18px;
    color: #FC4848;
}

.premium-rate-content{
    max-width: 895px;
    margin: auto;
    padding: 40px 15px;
}
.premium-rate-content h2{
    text-align: center;
    margin: 0;
    font-size: 32px;
    color: #201F1F;
    font-family: 'balootammabold';
    margin-bottom: 60px;
}

.comment-rating-group{
    max-width: 593px;
    margin: auto;
}
.comment-rating-group h3{
    font-size: 17px;
    font-family: 'balootammasemibold';
    color: #201F1F;
    margin-top: 0px;
}

.comment-rating-group .rating-box {
    width: 143px;
    float: left;
    min-height: 165px;
}
.comment-rating-group .rating-box-review {
    text-align: center;
}
.comment-rating-group .review-point {
    text-align: left;
    font-size: 103px;
    color: #201F1F;
    line-height: 100px;
    margin-top: 15px;
    margin-bottom: 10px!important;
    font-family: 'balootammamedium';
}
.comment-rating-group .review-star {
    text-align: left;
    margin-bottom: 10px!important;
}
.comment-rating-group .sp-star {
    font-size: 0;
    line-height: 1;
    position: relative;
    white-space: nowrap;
    display: inline-block;
    margin: 0 auto;
}
.comment-rating-group .sp-star i {
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    margin: .1rem;
    color: #bcbcbc!important;
    text-rendering: auto;
    font-size: 21px;
    margin-right: 10px;
}
.comment-rating-group .sp-star span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    line-height: 1;
}

.comment-rating-group .sp-star i {
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    margin: .1rem;
    color: #bcbcbc!important;
    text-rendering: auto;
    font-size: 21px;
    margin-right: 10px;
}
.comment-rating-group .sp-star span i {
    color: #FED42D!important;
}
.comment-rating-group .review-amount {
    font-size: 15px;
    color: #afafaf;
}
.comment-rating-group .rating-level-box {
    width: 100%;
    float: left;
    padding: 10px;
    min-height: 165px;
    margin-top: 15px;
    padding-left: 100px;
    max-width: 450px;
}
.rating-level-box .item-rate {
    margin-bottom: 14px;
    text-align: left;
    font-size: 0;
}
.rating-level-box .rating-num {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    width: 32px;
    line-height: 18px;
    vertical-align: middle;
    position: relative;
    font-family: 'balootammamedium';
    color: #8a8a8a;
}
.rating-level-box .progress {
    display: inline-block;
    height: 13px;
    margin: 0;
    vertical-align: middle;
    width: calc(100% - 41px);
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #F6F6F6;
}
.rating-level-box .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
.rating-level-box .progress-bar-success {
    background-color: #FEB200;
    border-radius: 20px;
}

.premium-rate-content .content-item{
    margin: 40px auto 20px;
    border-radius: 15px;
    padding: 20px 35px;
    position: relative;
    border: 1px solid #1CB0F6;
    background: #EBFBFF;
}
.premium-rate-content .content-item.green{
    border: 1px solid #7AC70C;
    background: #F2FFE8;
}
.premium-rate-content .content-item.orange{
    border: 1px solid #FEB200;
    
    background: #FFF4BE;
}
.premium-rate-content .content-item.purpple{
    border: 1px solid #A73AD4;
    background: #FCF5FF;
}
.premium-rate-content .content-item.red{
    border: 1px solid #FC4848;
    background: #FFEEEE;
}
.premium-rate-content .content-item::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -16px;
    left: 36px;
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    z-index: 0;
    background: #FFFFFF;
    border-right: 1px solid #85cb21;
    border-bottom: 1px solid #85cb21;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.premium-rate-content .content-item.blue::after{
    border-color: #1CB0F6;
    background: #EBFBFF;
}
.premium-rate-content .content-item.orange::after{
    background: #FFF4BE;
    border-color:  #FEB200;
}
.premium-rate-content .content-item.green::after{
    background: #F2FFE8;
    border-color: #7AC70C;
}
.premium-rate-content .content-item.purpple::after{
    background: #FCF5FF;
    border-color: #A73AD4;
}
.premium-rate-content .content-item.red::after{
    background: #FFEEEE;
    border-color: #FC4848;
}
.content-item-top .item-top-left{
    width: 55px;
    float: left;
    height: 55px;
    border-radius: 31px;
}
.content-item-top .item-top-left img{
    width: 100%;
    height: 100%;
    border-radius: 31px;
}
.content-item-top .item-top-right{
    float: left;
    width: calc(100% - 82px);
    padding-left: 17px;
}
.content-item-top .item-top-right .sp-name{
    font-size: 16px;
    font-family: 'balootammasemibold';
}
.content-item-top .item-top-right .name-group img{
        margin-left: 10px;
}
.content-item-top .item-top-right .sp-advice{
    margin-left: 10px;
    font-size: 12px;
    font-family: 'balootammamedium';
}

.content-item-top .item-top-right .sp-basis{
    font-size: 12px;
    font-family: 'balootammamedium';
    color: #00A3F8;
}
.content-item-comment{
    color: #201F1F;
    font-size: 15px;
    /* font-family: 'balootammamedium'; */
    margin-top: 15px;
    position: relative;
    z-index: 1;
    max-width: 791px;
    margin: 15px auto 10px;
}
.content-item-comment a{
    font-size: 16px;
    color: #1CB0F6;
}
.comment-content-item{
    padding-bottom: 50px;
    border-bottom: 1px solid #ddd;
    max-width: 865px;
    margin: auto;
}
.landing-htv{
    max-width: 895px;
    margin: auto;
    padding: 0px 15px 50px;
    
}
.landing-htv .landing-htv-video-left{
    
    width: 47%;
    max-width: 470px;
    float: left;
    padding-right: 40px;

}
.landing-htv .landing-htv-video-left h3{
    margin: 0;
    font-size: 20px;
    color: #AFAFAF;
}
.landing-htv .landing-htv-video-left h2{
    font-size: 29px;
    margin: 0px;
    color: #4C4C4C;
    font-family: 'balootammamedium';
    margin-top: 15px;
    line-height: 1.2;
}
.landing-htv .landing-htv-video-left p{
    margin: 15px 0px 0px;
    font-size: 15px;
    color: #000;
}
.landing-htv .landing-htv-video{
    float: left;
    width: 53%;
}
.landing-htv video{
    border-radius: 10px;
    width: 100%;
}



.home-dream{
    max-width: 1118px;
    margin: auto;
    padding: 0px 15px;
}
.home-dream .home-dream-content{
    border-top: 1px solid #cfcfcf;
    padding-top: 45px;
}
.home-dream .home-dream-content h2{
    font-size: 25px;
    margin: 0px 0px 40px;
    text-align: center;
    font-family: 'balootammabold';
}
.home-dream .home-dream-content .home-dream-item{
    max-width: 980px;
    margin: auto;
}
.home-dream .home-dream-content .dream-item{
    width: 313px;
}
.home-dream .home-dream-content .dream-text{
    width: 100%;
    background: #58CC02;
    border-radius: 20px;
    padding: 30px 15px;
    font-size: 16px;
    color: #fff;
    font-family: 'balootammamedium';
    border-bottom: 6px solid #58CC02;
    position: relative;
}
.home-dream .home-dream-content .dream-text::before {
    content: '';
    display: block;
    position: absolute;
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    background: #58CC02;
    border-right: 3px solid #58CC02;
    border-bottom: 3px solid #58CC02;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    bottom: -18px;
    border-radius: 6px;
}
.home-dream .home-dream-content .dream-user{
    width: 100%;
    background: #5ECE00;
    border-radius: 15px;
    border-bottom: 6px solid #65A20E;
    padding: 10px;
    margin-top: 40px;
    display: flex;
}

.home-dream .item-2 .dream-text{
    background: #1CB0F6;
    border-bottom: 6px solid #1CB0F6;
}
.home-dream .item-2 .dream-text::before{
    background: #1CB0F6;
    border-right: 3px solid #1CB0F6;
    border-bottom: 3px solid #1CB0F6;
}
.home-dream .item-2 .dream-user{
    background: #1CB0F6;
    border-bottom: 6px solid #1899D6;
}


.home-dream .item-3 .dream-text{
    background: #FFC800;
    border-bottom: 6px solid #FFC800;
	
}
.home-dream .item-3 .dream-text::before{
    background: #FFC800;
    border-right: 3px solid #FFC800;
    border-bottom: 3px solid #FFC800;
}
.home-dream .item-3 .dream-user{
    background: #FFC800;
    border-bottom: 6px solid #E1B400;
}



.home-dream .home-dream-content .dream-avatar img{
    width: 80px;
    border-radius: 13px;
}
.home-dream .home-dream-content .dream-username{
    padding-left: 10px;
}
.home-dream .home-dream-content .dream-username h5{
    margin: 10px 0px 0px;
    color: #fff;
    font-size: 20px;
    font-family: 'balootammasemibold';
}
.home-dream .home-dream-content .dream-username h6{
    margin: 7px 0px 0px;
    font-size: 17px;
    color: #fff;
}



.home-video-content{
    max-width: 590px;
    padding: 50px 15px 20px;
    margin: auto;
}
.home-video-content h2{
    text-align: center;
    font-family: 'balootammabold';
    font-size: 25px;
    margin: auto;
    line-height: 1.5;
}
.home-video-content h6{
    margin: 20px 0px 0px;
    font-size: 17px;
    text-align: center;
    line-height: 1.5;
}
.home-video-content video{
    margin: 25px auto 0px;
    width: 100%;
    max-width: 535px;
    border-radius: 20px;
    display: block;
}
.home-video-content video:hover{
    cursor: pointer;
}
.home-partner-content{
    max-width: 780px;
    padding: 0px 15px 30px;
    margin: auto;
}
.home-partner-content h2{
    text-align: center;
    font-family: 'balootammabold';
    font-size: 25px;
    max-width: 550px;
    margin: 50px auto 20px;
    line-height: 1.5;
}
.home-partner-content .kenh-14{
    max-width: 70px;
}
.home-partner-content .htv-key{
    max-width: 113px;
    margin-left: 10px;
}
.home-partner-content .zing{
    max-width: 70px;
    margin-left: 10px;
}
.home-partner-content .dantri{
    max-width: 70px;
    margin-left: 15px;
}
.home-partner-content .doanh-nhan{
    margin-left: 10px;
    max-width: 165px;
}
.home-partner-content .sohuutritue{
    margin-left: 20px;
    max-width: 165px;
}

.skill-item label{
    display: block;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 100;
    height: 48px;
    background: #F4F6F5;
    border-radius: 10px;
    padding: 15px 12px 15px 36px;
    border: 1px solid #F4F6F5;
}

.skill-item label .checkmark{
    position: absolute;
    top: 15px;
    left: 12px;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #CFCFCF;
}
.skill-item label input{
    display: none;
}
.skill-item label .item-name{
    font-size: 12px;
    font-family: balootammamedium;
}
.skill-item label .item-price{
    display: inline-block;
    float: right;
    width: 82px;
    height: 24px;
    background: #DDF4FF;
    text-align: center;
    line-height: 25px;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'balootammamedium';
    color: #1CB0F6;
    margin-top: -2px;
    display: none;
}
.skill-item label .item-link{
    display: inline-block;
    float: right;
    width: 82px;
    height: 24px;
    background: #FFF4BE;
    text-align: center;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
    color: #FF9600;
    margin-top: -2px;
}
.skill-item label .item-link:hover{
    text-decoration: none;
}
.item-cefr .skill-item label .item-link{
    background: #F4DCFF;
    color: #9069CD;
}
.item-communicative .skill-item label .item-link{
    background: #E9FFD8;
    color: #58CC02;
}
.skill-item label input:checked ~ .checkmark {
    background: #FF9600;
    border-color: #FF9600;
}
.item-cefr .skill-item label input:checked ~ .checkmark {
    background: #9069CD;
    border-color: #9069CD;
}

.item-communicative .skill-item label input:checked ~ .checkmark {
    background: #58CC02;
    border-color: #58CC02;
}
.skill-item label input:checked ~ .checkmark:after {
    display: block;
}
.skill-item label .checkmark:after {
    left: 4px;
    top: 1px;
    width: 7px;
    height: 9px;
    border: solid #fff;
    border-width: 0px 2px 2px 0px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.choose-skill{
    font-size: 14px;
    color: #AFAFAF;
    margin-bottom: 15px;
    font-family: balootammamedium;
}
.list-skill{
    height: 200px;
    overflow: hidden;
    overflow-y: auto;
}
.item-3 .list-skill{
    height: 240px;
}
.skill-item.active label{
    border: 1px solid #FF9600;
    background: #fff;
}
.item-cefr .skill-item.active label{
    border-color: #9069CD;
}
.item-communicative .skill-item.active label{
    border-color: #58CC02;
}


.list-skill::-webkit-scrollbar {
    background-color:var(--color-white);
    width:16px
}

.list-skill::-webkit-scrollbar-track {
    background-color:var(--color-white);
}
.list-skill::-webkit-scrollbar-thumb {
    background-color: var(--color-border-gray-light);
    border-radius:16px;
    border: 4px solid var(--color-white);
}


.package-tab-link{
    width: 373px;
    margin: 25px auto 0px;
    display: flex;
    flex-direction: row;
}
.package-tab-link a{
    display: inline-block;
    width: 117px;
    text-align: center;
    height: 53px;
    border: 1px solid #fff;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 12px;
    line-height: 53px;
    color: #fff;
    font-size: 16px;
    font-family: 'balootammamedium';
}
.package-tab-link a.active,
.package-tab-link a:hover{
    text-decoration: none;
    background: #fff;
    color: #1CB0F6;
}
.item-3,
.item-12,
.item-24{
    display: none;
}
.item-3.active,
.item-12.active,
.item-24.active{
    display: block;
}

@media(min-width: 1100px){
	.premium-content-group{
		display: block!important;
	}
    
}

@media(max-width: 1100px){
	
    .tab-premium-content .premium-item{
        width: 340px;
    }
    .tab-premium-content .premium-item.item-premium-3,
    .tab-premium-content .premium-item.item-premium-12,
    .tab-premium-content .premium-item.item-premium-24{
        width: 340px!important;
    }


    .study-path-progress .progress-content{
        min-height: 1375px;
    }
    .progress-content .progress-line{
        height: 1220px;
        width: 11px;
        right: 12px;
        top: 75px;
        transform: unset;
    }
    .progress-item{
        top: 0;
        width: calc(100% - 25px);
    }
    .progress-item .milestones{
        left: unset;
        right: -24px;
        top: 65px;
    }
    .progress-item .content{
        width: calc(100% - 50px);
        top: 0;
        height: 145px;
    }
    .progress-item .progress-border{
        transform: rotate(90deg);
        left: unset;
        right: 35px;
        top: 35px;
    }
    .progress-item .content h3{
        font-size: 38px;
        float: left;
    }
    .progress-item .content h4{
        float: left;
        font-size: 18px;
        width: calc(100% - 74px);
        margin-left: 10px;
        margin-top: 10px;
    }
    .progress-item .content h6{
        float: left;
        margin-top: 0px;
    }
    .progress-item.a1{
        top: 155px;
        left: 0;
    }
    .progress-item.a2{
        top: 380px;
        left: 0;
    }
    .progress-item.b1{
        top: 575px;
        left: 0;
    }
    .progress-item.b2{
        top: 800px;
        left: 0;
    }
    .progress-item.c1{
        top: 1010px;
        left: 0;
    }
    .progress-item.c2{
        top: 1215px;
        left: 0;
    }
    .progress-item.a1 .content,
    .progress-item.a2 .content,
    .progress-item.b1 .content,
    .progress-item.b2 .content,
    .progress-item.c1 .content,
    .progress-item.c2 .content{
        height: 185px;
    }
    .progress-item.a1 .milestones,
    .progress-item.a2 .milestones,
    .progress-item.b1 .milestones,
    .progress-item.b2 .milestones,
    .progress-item.c1 .milestones,
    .progress-item.c2 .milestones{
        left: unset;
        right: -24px;
        top: 65px;
    }

    .progress-item.a1 .progress-border,
    .progress-item.a2 .progress-border,
    .progress-item.b1 .progress-border,
    .progress-item.b2 .progress-border,
    .progress-item.c1 .progress-border,
    .progress-item.c2 .progress-border{
        transform: rotate(90deg);
        left: unset;
        right: 35px;
        top: 35px;
    }
    .study-path-commit-content{
        padding-top: 0;
    }
}



@media(max-width: 991px){
	.tab-premium-content .premium-item{
		margin-top: 25px;
	}
    .benefit-other-item{
	    width: 1005px;
	}
    .premium-saver .saver-left{
        float: none;
        margin: auto;
        width: 250px;
    }
    .premium-saver .saver-right{
        float: none;
        width: 100%;
        margin-top: 30px;
        padding-left: 0;
    }
    .package-content h2{
        line-height: 1.2;
        margin-top: 10px;
        font-size: 25px;
        max-width: 450px;
        margin: auto;
    }

    .tab-premium-content .premium-item.item-premium-3, 
    .tab-premium-content .premium-item.item-premium-12, 
    .tab-premium-content .premium-item.item-premium-24 {
        margin: 20px auto 0px;
        display: block!important;
    }
 
    .premium-content-group {
        max-width: 355px;
        margin: auto;
    }
    .package-content .item-premium-24 .item-content .item-body{
        padding-left: 40px;
    }
    .package-content .item-premium-24 .item-header .item-header-content{
        padding-left: 15px;
    }
    .item-choose-content .promo{
        min-height: unset;
    }
    .premium-form{
        padding: 30px 15px 10px;
    }
    .premium-form h3{
        line-height: 1.2;
        margin-top: 10px;
        font-size: 25px;
        max-width: 450px;
        margin: auto;
    }
    .premium-benefit-content{
        padding-top: 30px;
    }
    .premium-commit-content .commit-item{
        padding: 30px 0px;
    }
    .commit-item .item-right,
    .commit-item .item-left{
        float: none;
    }
    .commit-item .item-right.item-image{
        float: none;
        width: 260px;
        margin: auto;
        text-align: center;
    }
    .commit-item .item-right.item-image img{
        float: none;
        width: 260px;
        margin: auto;
        text-align: center;
    }
    .premium-commit-content .commit-item .item-text{
        width: 100%;
        float: none;
        text-align: center;
        margin: auto;
    }
    .premium-commit-content .commit-item .item-text.item-right{
        padding-left: 0;
    }
    .premium-commit-content .commit-item .item-title{
        font-size: 28px;
        max-width: 300px;
        margin: 30px auto 0px;
    }
    .premium-commit-content .commit-item .item-title span{
        display: inline-block;
    }
    .premium-commit-content .commit-item .item-title span::before{
        bottom: 9px;
        height: 9px;
    }
    .premium-commit-content .commit-item .item-content{
        font-size: 18px;
    }
    .premium-commit-content .commit-item .item-image{
        width: 300px;
        float: none;
        text-align: center;
        margin: auto;
    }
    .premium-commit-content .commit-item .item-image img{
        width: 100%;
    }
    .premium-scholarship::before{
        transform: scale(0.4);
        left: -100px;
        top: -160px;
    }
    .premium-scholarship::after{
        transform: scale(0.25);
        top: unset;
        bottom: -177px;
        right: -146px;
    }
    .premium-scholarship-content h3{
        max-width: 280px;
        margin: auto;
        font-size: 22px;
        line-height: 30px;
    }
    .premium-scholarship-content h6{
        font-size: 16px;
    }
    .premium-scholarship-content a{
        margin-top: 20px;
    }
    .premium-scholarship .premium-scholarship-content{
        padding-bottom: 100px;
        padding-top: 35px;
    }
    .order-comment{
        max-width: 1245px;
        margin: auto;
        padding: 35px 12px 35px;
    }
    .order-comment .order-comment-content{
        padding: 0 ;
        width: 100%;
    }
    .order-comment h2{
        font-size: 25px;
        line-height: 34px;
    }
    .order-comment h2 span::before{
        height: 7px;
    }
    .order-comment .comment-content{
        margin-top: 0px;
        width: 100%;
    }
    .premium-video .premium-video-content{
        padding-top: 35px;
    }
    .premium-video .premium-video-content h2{
        font-size: 25px;
        line-height: 34px;
        margin-bottom: 20px;
    }
    .premium-video .premium-video-content h2 span::before{
        height: 7px;
    }
    .premium-video .premium-video-content .right{
        width: 100%;
        float: none;
        padding: 0;
    }
    .premium-video .video-image{
        padding: 15px;
    }
    .premium-video .premium-video-content .left{
        width: 100%;
        float: none;
        margin-top: 20px;
        padding: 25px;
    }
    .order-comment .commment-item{
        width: 350px;
    }

    .package-note{
        margin-top: 30px;
        padding-top: 45px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .package-note .package-note-content h3{
        font-size: 28px;
        line-height: 1.3;
    }
    .package-note .package-note-content .note-title{
        font-size: 18px;
        padding-left: 46px;
    }
    .package-note .package-note-content .note-title::after {
        right: unset;
        left: 15px;
        transform: scale(0.85);
        top: calc(50% - 10px);
    }
    .package-note .package-note-content .active .note-title::after {
        top: 50%;
    }
    .study-path-content{
        padding-top: 30px;
    }

	.premium-content-group {
		display: block!important;
	}
    .comment-rating-group .rating-box{
        width: 100%;
    }
    .comment-rating-group .rating-level-box {
        width: 100%;
		padding: 0px 15px;
    }
    .method-content-item {
        margin-top: 0px;
    }
    .landing-method .item-left .item-left-content{
        text-align: center;
    }
    .landing-method .item-left {
        min-height: unset;
        padding: 30px 15px;
        text-align: center;
        display: block;
        margin: auto;
    }
    .landing-method .item-left figure{
        display: block;
        position: relative;
        margin: auto;
        width: 279px;
        height: 603px;
    }
    .device-screen {
        opacity: 1;
    }
    .method-content-item .content-item-image {
        display: none;
    }
    .landing-htv .landing-htv-video-left {
        width: 100%;
    }
    .landing-htv .landing-htv-video{
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }
	.comment-rating-group h3{
		text-align: center;
	}
	.comment-rating-group .review-point{
		    text-align: center;
	}
	.comment-rating-group .review-star {
		text-align: center;
	}
	.landing-method .item-left h5 {
		font-size: 100px;
	}
	.landing-method .item-left .app-item-6 h5{
		font-size: 90px;
	}
	
    .package-tab-link{
        width: 322px;
    }
    .package-tab-link a{
        width: 100px;
    }
    .tab-premium-content .premium-item.item-premium-3,
    .tab-premium-content .premium-item.item-premium-12,
    .tab-premium-content .premium-item.item-premium-24{
        margin: 20px auto 0px;
    }
    
    .course-package .course-package-content .btn-course-next{
        right: 0px;
    }

    /*.course-content-item .owl-carousel .owl-stage{
        width: 100%!important;
        transition: unset!important;
        transform: unset!important;
    }
    .course-package-content .item{
        margin-right: 20px;
        margin-bottom: 20px;
        margin: 0px auto 20px;
        float: none;
    }
    .course-package .course-package-content .btn-course-next{
        display: none;
    }
    .course-package-content .owl-carousel .owl-item{
        width: 100%!important;
        margin: 0!important;
    }*/
    .course-title h2{
        font-size: 25px;
        max-width: 300px;
        margin: 30px auto 20px;
    }


    .full-course-content{
        padding: 20px;
        border-radius: 18px;
        
    }
  
    .full-course-content .left{
        float: none;
        margin: auto;
    }
    .full-course-content .middle{
        float: none;
        width: 100%;
        padding: 30px 0px 0px;
        text-align: center;
    }
    .full-course-content .right{
        float: none;
        margin: auto;
        width: 100%;
    }
    .full-course-content .right a{
        margin-top: 20px;
    }
    .full-course-premium .full-course-content .right{
        float: none;
        margin: auto;
        width: 100%;
    }

    .full-course-content .middle .price span{
        display: none;
    }
    .full-course-content .middle .time br{
        display: inline-block;
    }

    .course-tab-content .course-tab-item{
        overflow-x: auto;
    }
    .course-tab-content ul{
        width: 452px;
        border-radius: 18px;
    }
    .course-package .course-package-content{
        margin: 30px auto 30px;
    }
    .course-tab .course-tab-content{
        padding: 30px 15px 0px;
    }
    .course-tab-content ul li{
        width: 90px;
        height: 110px;
    }
    .course-tab-content ul li a .image{
        background: transparent!important;
        height: unset;
        padding-top: 5px;
    }
    .course-tab-content ul li a .item-title{
        font-size: 15px;
        font-family: 'balootammamedium';
        margin-top: 7px;
    }
    .course-tab-content ul li a .item-desctiption{
        display: none;
    }
    .course-tab-content ul li.skills a {
        border-radius: 18px 0px 0px 18px;
    }
    .course-tab-content ul li a .image svg.arrow{
        display: none;
    }
    .course-tab-content ul li.premium a {
        border-radius: 0px 18px 18px 0px;
    }
    .voca-header-menu{
        position: relative;
    }
    body{
        padding: 0;
    }
    .course-title h2{
        margin-top: 0px;
        line-height: 30px;
    }
    .course-tab .course-tab-content{
        padding: 0px 15px 0px;
    }
    .course-tab{
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1000;
    }
    .course-tab-content ul{
        margin-top: 10px;
    }

    .study-path-object{
        padding-top: 30px;
    }
    .study-path-object h2{
        font-size: 28px;
        line-height: 1.3;
        max-width: 300px;
        margin: auto;
    }
    .study-path-object .study-path-object-content{
        margin: 0;
    }
    .study-path-object .object-item.object-1,
    .study-path-object .object-item.object-2,
    .study-path-object .object-item.object-3 {
        margin: 40px auto 0px;
        float: none;
        padding-top: 0px;
    }
    .study-path-object .object-item h4{
        margin-top: 0px;
    }
    .study-path-object .study-path-object-teacher{
        font-size: 15px;
    }
    .order-action{
        margin-top: 35px;
        background: #9069cd;
    }
    .order-action .order-action-content .btn-order,
    .order-action .order-action-content .btn-learning{
        display: block;
        margin: 10px auto 0px;
    }
    .order-action .order-action-content h6{
        font-size: 25px;
        line-height: 32px;
    }
    .order-action .order-action-content{
        max-width: 930px;
        padding: 30px 25px;
        margin: auto;
    }

    .home-benefit .home-benefit-content h2{
        font-size: 28px;
        margin-left: 24px;
        margin-right: 24px;
        line-height: 1.4;
    }
    .home-benefit .benefit-content-item {
        padding: 0 24;
    }
    .home-benefit .benefit-item .left{
        width: 100%;
        float: none;
        max-width: 283px;
        margin: auto;
    }
    .home-benefit .benefit-item {
        float: none;
        width: 100%;
        margin-top: 50px;
        padding: 0;
    }
    .home-benefit .benefit-item .right{
        width: 100%;
        float: none;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item .right .right-content{
        padding: 20px;
        margin-bottom: 30px;
    }
    .home-benefit .benefit-item .right .content {
        font-size: 20px;
    }
    .home-benefit .benefit-item.benefit-2 .left{
        float: none;
        width: 100%;
        max-width: 310px;
    }
    .home-benefit .benefit-item.benefit-2 .right{
        width: 100%;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item.benefit-3 .left {
        width: 100%;
        max-width: 300px;
    }
    .home-benefit .benefit-item.benefit-3 .right{
        width: 100%;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item.benefit-4 .left{
        float: none;
        max-width: 300px;
    }
    .home-benefit .benefit-item.benefit-4 .right{
        width: 100%;
        float: none;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item.benefit-5 .left{
        width: 100%;
        float: none;
        max-width: 330px;
    }
    .home-benefit .benefit-item.benefit-5 .right{
        width: 100%;
        float: none;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item.benefit-6 .left{
        width: 100%;
        float: none;
        max-width: 330px;
    }
    .home-benefit .benefit-item.benefit-6 .right{
        width: 100%;
        float: none;
        padding: 30px 0px 0px;
    }
    .home-benefit .benefit-item.benefit-6 .right a {
        display: inline-block;
        margin-top: 30px;
        margin-right: 15px;
        width: 150px;
    }
    .home-benefit .benefit-item.benefit-6 .right a.google-play{
        margin-right: 0;
    }
    .home-benefit .benefit-item.benefit-6 .right a  img{
        width: 100%;
    }
    .home-benefit .home-benefit-content{
        padding-bottom: 50px;
    }

    
    
}