*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:OpenSans;src:url(../../../font/OpenSans-Regular.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:OpenSans;src:url(../../../font/OpenSans-Bold.woff2) format("woff2");font-display:swap;font-weight:700;font-style:normal}
@font-face{font-family:OpenSans;src:url(../../../font/OpenSans-ExtraBold.woff2) format("woff2");font-display:swap;font-weight:900;font-style:normal}
body{font-family:OpenSans,sans-serif!important}
a{color:#000}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@keyframes translateX{
0%{transform:translate(0,0);opacity:0}
30%{opacity:1}
80%{opacity:.3}
100%{transform:translate(25%,0);opacity:0}
}
@keyframes cloundShowHide{
0%{opacity:.8}
100%{opacity:.1}
}
.container{width:100%;max-width:1224px;padding:0 12px;margin:0 auto}
h3.title, #listGift .title h3{text-align:center;font-weight:900;font-size:36px;margin-bottom:36px;color:#154ccb}
#normalHeader{background-repeat:no-repeat;background-position:bottom;background-size:cover;padding-top:56px;position:relative;overflow:hidden}
#normalHeader::after,#normalHeader::before{content:"";display:block;position:absolute;z-index:0}
#normalHeader::before{width:100%;height:300px;background:no-repeat url(../img/cloud1.webp);background-size:contain;top:20%;left:0;animation:translateX infinite 10s linear}
#normalHeader::after{width:100%;height:38%;background:no-repeat url(../img/cloud2.webp);background-size:contain;bottom:0;left:0;animation:cloundShowHide infinite alternate-reverse 10s linear}
#normalHeader.webp{background-image:url(../img/backgroundPC.webp)}
#normalHeader.png{background-image:url(../img/backgroundPC.png)}
#normalHeader .header>div>ul .hotline a{background:url(../img/hotLine.webp) no-repeat left}
#normalHeader .wrapperBanner .banner{cursor:pointer;position:relative;overflow:hidden;padding:80px 0}
#normalHeader .wrapperBanner canvas{cursor:pointer}
#normalHeader .wrapperBanner .headerForm{position:relative;width:352px;border-radius:0;height:80%;background:0 0;border:24px solid;border-image-source:url(../img/bg-form.webp);border-image-slice:115;border-image-repeat:round;padding:0;border-left:12px solid;border-right:12px solid}
#normalHeader .wrapperBanner .headerForm form{background:#fff}
#normalHeader .wrapperBanner .headerForm form img{width:70%;display:block;margin:0 auto}
#normalHeader .star{background:no-repeat center url(../img/blink.webp);background-size:contain}
#normalHeader .wrapperBanner .headerForm:hover{animation:unset}
#normalHeader .wrapperBanner .headerForm #img-title-form{width:70%;display:block;margin:0 auto;padding:10px 0 0}
#normalHeader .wrapperBanner{align-items:center;position:relative;z-index:10}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:18px;color:#9a0000;font-weight:700;margin-bottom:12px}
#normalHeader .wrapperBanner .headerForm form input,#normalHeader .wrapperBanner .headerForm form select{margin-bottom:12px;padding:6px 12px;border:none;width:100%;border-radius:0;outline:0;background:0 0;border-bottom:1px dashed #805e44}
#normalHeader .header>div{max-width:1224px}
#normalHeader .header{height:56px;background:#fff;color:#fff;width:100%;left:0;top:0;position:absolute;z-index:50}
#normalHeader a{color:#c71513;text-decoration:none!important}
#normalHeader .header>div>ul .loginGroup .login a:first-child::after{display:none}
#normalHeader .header>div>ul .loginGroup .login a:first-child{padding-right:12px;background:url(../img/iconUser.webp) no-repeat left}
#normalHeader .header>div .shareFB span:last-child{color:#274596;font-weight:700}
#normalHeader .header>div .shareFB span:first-child,#normalHeader .header>div .shareFB span:last-child{padding-top:4px}
#normalHeader .wrapperBanner .headerForm form>div .btnHeaderFormSubmit{background:#f06932;border-bottom-color:#f06932;color:#fff;font-size:16px;margin-top:12px;padding:6px 13px}
#normalHeader .selectExam{display:flex;flex-wrap:wrap;margin-top:12px;row-gap:10px}
#normalHeader .selectExam input{margin-bottom:6px}
#normalHeader .wrapperBanner .headerForm form>div label{display:flex;gap:10px;width:50%;align-items:center;font-size:16px}
#normalHeader .wrapperBanner .headerForm form>div label:hover{color:red;cursor:pointer}
#normalHeader .wrapperBanner .headerForm form>div label input{margin-bottom:0;width:20px}
.quyenLoi{overflow:hidden;position:relative}
.quyenLoi .title.pc{width:75%;margin-bottom:24px}
.quyenLoi .flexWrap .vuTru{width:100%}
.quyenLoi .flexWrap{display:grid;grid-template-columns:45% 1fr;gap:24px;align-items:center}
.quyenLoi .listInfo{list-style:none;display:grid;gap:12px}
.quyenLoi .listInfo li{border:1px solid;border-left-width:7px;padding:10px;border-radius:10px;box-shadow:0 0 5px 2px #ccc}
.quyenLoi .listInfo li:nth-child(1){border-color:#f45e00}
.quyenLoi .listInfo li:nth-child(2),.quyenLoi .listInfo li:nth-child(3){border-color:#1c7ce7}
.quyenLoi .listInfo li:nth-child(4){border-color:#aa5bf1}
.ecosystem-section{background:url(../img/may.png) no-repeat left -20% bottom 0/contain,url(../img/may.png) no-repeat right 0 bottom 0/contain,linear-gradient(to bottom,#fff 0,#1c7ce7 100%)}
.ecosystem-section .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-bottom:40px}
.ecosystem-section .card{background:#fff;border-radius:15px;padding:15px 0;box-shadow:0 10px 25px rgba(0,0,0,.05);transition:transform .3s ease;display:flex;flex-direction:column}
.ecosystem-section .card:hover{transform:translateY(-5px)}
.ecosystem-section .card-image img{width:100%}
.ecosystem-section .card-content h3{font-weight:900;color:#1a4fa0;font-size:1.1rem;display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center;min-height:66px}
.ecosystem-section .card-content ul li{margin:0 15px;text-align:justify}
.ecosystem-section .card-content p,.ecosystem-section .card-content ul{font-size:.9rem;color:#444;text-align:left;line-height:1.5;list-style:none}
.ecosystem-section .highlight{color:#d93025;font-weight:700}
.ecosystem-section .cta-container{margin-top:20px}
.ecosystem-section .cta-button{margin:0 auto;display:block;background:linear-gradient(90deg,#ff8a50,#ff5722);color:#fff;border:none;padding:15px 40px;font-size:1.1rem;font-weight:700;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px rgba(255,87,34,.4);transition:.3s}
.sun-roadmap{background-color:#f9fbfd}
.sun-roadmap .roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:center}
.sun-roadmap .roadmap-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px rgba(21,76,203,.08);transition:all .3s ease;display:flex;flex-direction:column;height:100%;border:1px solid #eee}
.sun-roadmap .roadmap-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(21,76,203,.15)}
.sun-roadmap .roadmap-card.featured{border:2px solid #feb325;transform:scale(1.05);z-index:2}
.sun-roadmap .roadmap-card.featured:hover{transform:scale(1.05) translateY(-10px)}
.sun-roadmap .card-header{padding:30px 20px;text-align:center;color:#fff}
.sun-roadmap .blue-theme .card-header{background:#154ccb}
.sun-roadmap .orange-theme .card-header{background:#feb325}
.sun-roadmap .yellow-theme .card-header{background:#fed92b;color:#333}
.sun-roadmap .card-header h3{font-size:18px;margin-bottom:10px;line-height:1.4;height:50px;display:flex;align-items:center;justify-content:center}
.sun-roadmap .card-header .subtitle{font-size:13px;font-style:italic;opacity:.9}
.sun-roadmap .card-body{padding:30px 25px;flex-grow:1}
.sun-roadmap .package-item{margin-bottom:15px}
.sun-roadmap .badge{display:inline-block;font-weight:800;font-size:14px;margin-bottom:8px}
.sun-roadmap .blue-theme .badge{color:#154ccb}
.sun-roadmap .orange-theme .badge{color:#d35400}
.sun-roadmap .yellow-theme .badge{color:#b7950b}
.sun-roadmap .package-item p{font-size:14.5px;line-height:1.6;color:#555}
.sun-roadmap .description{text-align:justify;font-size:14px;color:#777;border-top:1px dashed #ddd;padding-top:15px}
.sun-roadmap .package-divider{height:1px;background:#f0f0f0;margin:15px 0}
.sun-roadmap .card-footer{padding:0 25px 30px;text-align:center}
.sun-roadmap .btn-outline{display:block;padding:12px;border:1.5px solid #154ccb;color:#154ccb;text-decoration:none;border-radius:50px;font-weight:700;transition:.3s}
.sun-roadmap .btn-outline:hover{background:#154ccb;color:#fff}
.sun-roadmap .btn-solid{display:block;padding:14px;background:#c0392b;color:#fff;text-decoration:none;border-radius:50px;font-weight:700;box-shadow:0 4px 15px rgba(192,57,43,.3);transition:.3s}
.sun-roadmap .btn-solid:hover{background:#a93226;transform:scale(1.02)}
.list-teacher{background:url(../img/background-list-teacher.png) repeat-y top center/cover}
.list-teacher #listTeacherOnRoadTrain{padding:0}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .rightContent{padding-left:0}
.list-teacher #listTeacherOnRoadTrain .title{display:none}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher{margin-top:0}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabSubject{gap:10px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabSubject li a{font-size:18px;border:1px solid #c1c1c1;border-radius:99px;color:#c1c1c1;background:#fff}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabSubject li a.active{background:#fdb129;color:#fff;border:1px solid #fdb129;padding:2px 0}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .rightContent .aboutToTeacher{background:rgb(255 255 255 / 40%);border-radius:20px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .rightContent .aboutToTeacher li{color:#3f3f3f;background-image:url(../img/huan-chuong.png);background-size:14px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .rightContent .wrapBtn .btnStudyFree{border:2px solid #fc732e;border-bottom:5px solid #fc732e;font-size:24px;color:#fff;padding:7px 24px;background:#fdb129;text-decoration:none;border-radius:12px;text-transform:uppercase;font-weight:600}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher{width:100%;height:100%}
#listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher.active{display:flex;overflow-x:auto;overflow-y:hidden;gap:6px}
#listTeacherOnRoadTrain .contentListTeacher .tabSubject li a.active:after{border-bottom:10px solid rgb(255 255 255 / 40%)}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li{margin-left:0;width:88px;height:88px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li a{width:100%;height:100%;display:block}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li.active{border:2px solid #fff}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li.active a::after{background-image:url(../img/icon-active.webp);width:30px;height:30px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .wrapperVideo{margin-top:0;position:relative;margin:0 auto}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .wrapperVideo .bx-viewport{background:#3a406c;padding:0;border-radius:99px;padding:5px 50px 5px 5px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .leftContent .avatarSubject .teacherName{display:none}
#demoLesson{position:relative}
#demoLesson .title{padding:0}
#demoLesson .title>div{top:-50px;width:240px}
#demoLesson .content{background:#fff4b3!important;position:relative;margin-top:70px}
#demoLesson #listClass{margin-top:-6px!important;background:#fff!important;border:1px solid #0f7d9b;grid-template-columns:1fr 1fr}
#demoLesson .title>div ul li a{color:#000!important}
#demoLesson .content .lessons ul li a{font-size:11px}
#demoLesson .content .lessons ul li a.active{background:#f8d542;color:#fff}
#demoLesson .title>div ul li a.active,#demoLesson .title>div ul li a:hover{background:#ff7300;color:#fff!important}
#demoLesson .content .lessons ul li a div p:first-child{color:#000}
#demoLesson .content .video{padding-bottom:initial}
#demoLesson .title>div>a{background:#1897fb}
#demoLesson .content .lessons ul{background:#fff4b3}
#demoLesson .content .lessons ul li a.active div p:last-child{background:0 0}
#demoLesson .content .video.disable::after{content:"";width:100%;height:100%;display:block;background:0 0;position:absolute;top:0;left:0;cursor:pointer}
#demoLesson .content .video{position:relative}
#familyFeelToTs247{background:url(../img/background-cloud.png) no-repeat bottom center/cover;padding-top:30px;padding-bottom:30px}
#familyFeelToTs247 ul{list-style:none;z-index:3}
#familyFeelToTs247 #videoLeftStyle3 .wrapperVideo{background:#0072bc}
#familyFeelToTs247 .wrapSlider{display:flex;justify-content:center;column-gap:108px;row-gap:12px}
#familyFeelToTs247 .wrapSlider .listMsg{max-width:208px;width:100%}
#familyFeelToTs247 .wrapSlider .listFeelVideo{max-width:795px;width:100%}
#familyFeelToTs247 #videoLeftStyle3{padding:0}
#familyFeelToTs247 .listFeelVideo .bx-wrapper{position:relative}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction{display:flex;justify-content:space-between;align-items:center;padding:12px 0;column-gap:12px;z-index:0;position:absolute;width:100%;margin-top:-32%}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction a.bx-prev{margin-left:-55px}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction a.bx-next{margin-right:-55px}
#familyFeelToTs247 .listMsg .bx-controls-direction{display:flex;justify-content:center;column-gap:24px;margin-top:12px}
#familyFeelToTs247 .listMsg .bx-controls-direction a{border-radius:99px;display:flex;width:25px;height:25px;justify-content:center;align-items:center}
#familyFeelToTs247 .listMsg .bx-controls-direction a.bx-next:hover,#familyFeelToTs247 .listMsg .bx-controls-direction a.bx-prev:hover{background:#fff}
#familyFeelToTs247 .wrapperVideo{width:750px;margin:auto;padding:10px;background:#000;border-radius:15px}
#familyFeelToTs247 .wrapperVideo .video{position:relative;padding-bottom:56.25%;overflow:hidden}
#familyFeelToTs247 .wrapperVideo .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:7.5px}
.comment .sidebar{width:100%}
.comment .titlestyle h3{text-align:center;background:#43a1ff;padding:12px;color:#fff}
.comment .comment_teacher{display:flex;row-gap:12px;column-gap:12px;align-items:flex-start}
.comment .comment_teacher a img{width:40px;height:40px;border-radius:99px;display:block}
.comment .comment_teacher img{width:100%;object-fit:cover}
.comment .clearfix{width:calc(100% - 50px)}
.comment .clearfix a{color:#06c;text-decoration:none}
.comment ul.list{margin-top:12px;display:flex;flex-direction:column;row-gap:12px}
.comment .btn_gray{color:green;margin:12px 0;display:block}
.comment .body-comment{width:calc(100% - 30%);padding:0;margin:0}
#kyThiQuanTamForm .selectExam{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(33.33% - 12px),1fr));margin-top:12px;gap:12px;margin-bottom:12px}
#kyThiQuanTamForm .selectExam label{width:100%}
#kyThiQuanTamForm .selectExam label span{display:block;width:100%}
#kyThiQuanTamForm .selectExam label div{width:100%;display:flex;justify-content:center}
#kyThiQuanTamForm .selectExam label input{width:auto!important;margin-bottom:4px}
#boughtCountdownTime .containerCountdownTime{position:relative;z-index:2}
#boughtCountdownTime .the-countdown{position:absolute;width:100%;top:0;left:0;z-index:0}
#popupRequestAdvisory>div h3,[id^=popupNotify_]>div h3{background:#ad0b15;color:#fff;border-color:#fff}
#popupRequestAdvisory>div>div button{border-radius:9px;border:none;font-weight:700;font-size:16px;padding:11px 22px;color:#fff;background:#ff6a00;border-bottom:4px solid #f44336;cursor:pointer}
#popupRequestAdvisory>div>div input,#popupRequestAdvisory>div>div textarea{background:rgba(255,255,255,.3);color:#7057a9;border-radius:13px;padding:10px 15px;font-size:15px;border:1px solid #dbcbfd}
#popupRequestAdvisory{z-index:99}
#popupRequestAdvisory>div>div input[name=joinZalo]{width:auto;margin-bottom:0}
.bx-next,.bx-prev{width:30px;height:30px;border-radius:99px;background:#6073c6;display:flex;align-items:center;justify-content:center}
.bx-controls-direction a img{width:12px}
.bx-controls-direction a:hover{background:#3a406c}
.video{position:relative;padding-bottom:56.25%;overflow:hidden}
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:7.5px}
#boughtPopup{animation:fadeIn .6s}
#advisory_problem{display:none}
.bx-controls-direction{display:flex;align-items:center;justify-content:center;margin-top:12px;gap:12px}
section{padding:36px 0}
#familyFeelToTs247 img{vertical-align:middle;max-width:100%}
#listGift{padding:2rem 0}
#listGift .container{background:url(../img/vienPhongBiNgang.jpg) repeat-x top,url(../img/vienPhongBiNgang.jpg) repeat-x bottom,url(../img/vienPhongBiDoc.jpg) repeat-y left,url(../img/vienPhongBiDoc.jpg) repeat-y right;background-size:100px,100px,12px,12px;padding:24px;border-radius:10px}
#listGift ul.content{list-style:none;color:#262626}
#listGift .promoInfo ul>li span{width:112px;display:inline-block}
#listGift ul.content>li.itemPromo{margin-top:20px;border:1px solid #e0e0e0;padding:12px;border-radius:5px;background:#fff}
#listGift ul.content>li.itemPromo>.promoInfo{margin-top:18px}
#listGift ul.content>li.itemPromo>.promoInfo>ul{list-style:none;padding-left:25px}
#listGift .titleInfo{margin-bottom:10px}
#listGift .title{width:fit-content;margin:0 auto 5px;font-weight:800;font-size:36px;text-align:center;text-transform:uppercase;background:0 0}
#listGift .title label{color:#ea486a}
#listGift .btnConfirmGift{text-decoration:none;display:inline-block;padding:7px 12px;color:#000;background:#e8e8e8;border-radius:8px}
#listGift .btnConfirmGift:hover{background:#ccc}
#listGift ul.content>li .wrapPromo .btnGift{width:306px;text-align:right}
#listGift ul.content>li .wrapPromo{margin-bottom:10px}
#listGift .promoInfo ul{list-style:none}
#listGift .promoInfo ul>li{padding:3px 0;margin-bottom:12px}
#listGift .promoInfo ul>li input,#listGift .promoInfo ul>li textarea{width:100%;outline:0;border:none;border-bottom:1px dashed #ccc;padding:10px 0 2px;border-radius:5px;font-size:16px;color:#0f2475;font-family:Montserrat,sans-serif;transition:all .1s;font-style:italic}
#listGift .promoInfo ul>li textarea{resize:vertical}
#listGift .promoInfo ul>li input:focus,#listGift .promoInfo ul>li textarea:focus{border-bottom:1px dashed #0f2475}
#listGift .promoInfo ul>li input:focus~label,#listGift .promoInfo ul>li textarea:focus~label{color:#0f2475;font-size:14px}
#listGift .btnConfirmGift.btnChooseBook{padding:5px 18px;border-radius:20px;font-size:16px}
#listGift .confirmGift #thongBaoXacNhan{padding:5px;background:#fdda76;color:brown;margin-top:12px;border-radius:5px;display:none;font-style:italic}
#listGift ul.content>li.itemPromo ul{padding:0 20px}
#listGift .confirmGift{text-align:center;margin-bottom:20px}
#listGift .form_subject{display:flex;gap:20px;margin:15px 0}
#listGift .form_subject .input-group{position:relative;display:table;border-collapse:separate;margin-bottom:12px}
#listGift .form_subject .input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#fff;border:1px solid #ccc;border-radius:4px 0 0 4px;white-space:nowrap;vertical-align:middle;display:table-cell;border-right:0;width:1%}
#listGift .form_subject select{height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:0 4px 4px 0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);display:table-cell;width:100%}
.list-combo-sun{background:linear-gradient(180deg, #ffdb00, #ffdb00, #feb325);position:relative;overflow:hidden}
.list-combo-sun .container{position:relative;z-index:10}
.list-combo-sun .list-combo{display:flex;justify-content:center;gap:35px;align-items:end}
.list-combo-sun .list-combo>div{width:33.33%}
.list-combo-sun .list-combo .combo-sun{background:#dadada;border-radius:40px 40px 0 0}
.list-combo-sun .list-combo .combo-sun .combo-sun--head{text-align:center;font-weight:700;padding:12px;color:#262626}
.list-combo-sun .list-combo .combo-sun .combo-sun--head h4{font-size:20px}
.list-combo-sun .list-combo .combo-sun .combo-sun--head p{font-size:20px}
.list-combo-sun .list-combo .combo-sun .combo-sun--content{border-radius:60px 60px 0 0;border:1px solid #cdcdcd;padding:12px 12px 0 12px;width:calc(100% + 24px);margin-left:-12px;background:rgba(255,255,255,.6901960784);transition:all .4s}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap{width:100%;background:#fff;border-radius:60px 60px 0 0;box-shadow:0 0 5px 3px rgba(0,0,0,.0784313725);margin:0 auto;overflow:hidden}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row{border-bottom:1px solid #f06550;padding:8px;transition:all .2s}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row:nth-child(1){padding-top:27px}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row>b{margin-bottom:5px;display:block;min-height:43px}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row .flex-wrap{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row .flex-wrap .sale-price__combo span{color:#b60808}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .row:hover{background:#fff4cf}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .btn-viewmore{margin:20px auto 12px;text-decoration:none;color:#fff;padding:5px;transition:all .4s;display:block;width:fit-content;border-radius:99px}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .btn-viewmore p{padding:4px 24px;background:#fc732e;border-radius:99px;font-size:20px;font-weight:700}
.list-combo-sun .list-combo .combo-sun .combo-sun--content .wrap .btn-viewmore:hover{background:#fc732e61}
.list-combo-sun .list-combo .combo-sun .combo-sun--content:hover{background:rgba(240,101,80,.168627451)}
.list-combo-sun .list-combo .combo1 .combo-sun.active{background:#8c6afc}
.list-combo-sun .list-combo .combo2 .combo-sun.active{background:#1bbdcc}
.list-combo-sun .list-combo .combo3 .combo-sun.active{background:#fc5a4f}
.list-combo-sun .list-combo .combo-sun.active .combo-sun--head{color:#fff}
.list-combo-sun .list-combo .combo-sun .price-combo{text-decoration:line-through}
.list-combo-sun .list-combo .combo-sun:not(.active){filter:grayscale(1)}
.list-combo-sun .list-combo .progress-bar{width:100%;height:20px;background-color:#ddd;border-radius:10px;overflow:hidden;position:relative}
.list-combo-sun .list-combo .progress-fill{width:70%;height:100%;background:linear-gradient(to right,green,red);display:flex;align-items:center;justify-content:center;position:relative}
.list-combo-sun .list-combo .progress-fill span{color:#fff;font-weight:700;position:absolute}
.list-combo-sun .info{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.list-combo-sun .info .status{font-size:18px;font-weight:700;color:#ef652d}
.list-combo-sun .info .countdown #countdown{display:flex;justify-content:center;gap:5px}
.list-combo-sun .info .countdown #countdown .time-box{font-size:13px;font-weight:700;background:#2c3e50;color:#fff;padding:5px 7px;border-radius:5px}
.list-combo-sun .intro-text{font-size:24px}
.list-combo-sun .list-combo>div{max-width:450px;height:100%}
.list-combo-sun .list-combo .combo-sun{transform:unset}
.list-combo-sun .list-combo .combo-sun:not(.active){margin-top:25%}
.list-combo-sun .notify{text-align: justify;display: block;color: #333;max-width:768px; margin: 12px auto 0;}
.list-combo-sun .wrap-price-gift{display: flex; justify-content: space-between; align-items: center;}
.list-combo-sun .wrap-price-gift .img-gift{width: 70px;}
@media all and (max-width:1025px){
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:18px;margin-bottom:12px}
.list-video-demo .wrapperVideo .bx-viewport .bxsliderVideo{margin-left:23%}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabSubject li a{font-size:14px}
#familyFeelToTs247 .wrapSlider{flex-direction:column}
#familyFeelToTs247 .wrapSlider .listFeelVideo,#familyFeelToTs247 .wrapSlider .listMsg{margin:0 auto}
}
@media all and (max-width:769px){
#normalHeader{background-position:top;background-size:contain;background-color:#feb325}
#normalHeader.png{background-image:url(../img/backgroundMobi.png)}
#normalHeader.webp{background-image:url(../img/backgroundMobi.webp)}
#normalHeader .wrapperBanner{padding:0;gap:12px}
#normalHeader .header{display:flex;align-items:center}
#normalHeader::after{bottom:46%;height:10%}
#normalHeader .star{background-size:20px}
#normalHeader::before{top:13%}
#normalHeader .wrapperBanner .banner{padding:0}
#demoLesson .title{height:auto}
#demoLesson .title>div{top:unset}
.comment .sidebar{font-size:14px!important}
.quyenLoi .flexWrap{display:grid;grid-template-columns:45% 1fr}
.quyenLoi .flexWrap{flex-direction:column;row-gap:12px}
.quyenLoi .flexWrap .desc,.quyenLoi .flexWrap .vuTru{max-width:100%}
.quyenLoi .flexWrap{grid-template-columns:1fr}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction{z-index:6}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction a.bx-prev{margin-left:0}
#familyFeelToTs247 .listFeelVideo .bx-controls-direction a.bx-next{margin-right:0}
#familyFeelToTs247{padding:20px}
#familyFeelToTs247 .wrapperVideo{max-width:750px;width:auto;padding:10px;border-radius:10px}
#familyFeelToTs247 .wrapperVideo .video iframe{border-radius:5px}
.tabAvataTeacher.active{margin:0 auto;width:fit-content}
.tabAvataTeacher.active::-webkit-scrollbar{width:5px;height:5px}
.tabAvataTeacher.active::-webkit-scrollbar-track{background:#f1f1f1}
.tabAvataTeacher.active::-webkit-scrollbar-thumb{background:#888}
.tabAvataTeacher.active::-webkit-scrollbar-thumb:hover{background:#555}
.ecosystem-section .card-grid,.sun-roadmap .roadmap-grid{display:block}
.ecosystem-section .wrapperVideo,.sun-roadmap .wrapperVideo{margin:0 auto}
section{padding:24px 0}
.sun-roadmap .roadmap-card.featured{transform:unset}
.roadmap-grid .bx-viewport{padding:30px 30px 30px 30px}
.comment .body-comment{width:100%}
.body-comment{padding:0!important}
}
@media all and (max-width:500px){
*{font-size:14px}
.bx-viewport,.bx-wrapper,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
#normalHeader{margin-top:0}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:16px;margin-bottom:12px}
#normalHeader .header>div>ul .hotline a,#normalHeader .header>div>ul .loginGroup .login a:first-child{overflow:hidden;color:rgba(0,0,0,0)}
#normalHeader .header>div>ul .loginGroup .login{display:flex}
#normalHeader .header>div>ul .loginGroup .login a:first-child{padding-left:0;color:rgba(0,0,0,0)!important}
#normalHeader .wrapperBanner .headerForm{max-width:95%}
#normalHeader .wrapperBanner .headerForm form>div .btnHeaderFormSubmit{font-size:14px;padding:7px 12px}
#normalHeader .header>div>ul .logo{height:37px}
#demoLesson #listClass{margin-top:0!important}
h3.title{font-size:20px;margin-bottom:24px}
#normalHeader .wrapperBanner .headerForm::after{width:12px;height:30px;right:10%;top:66px;margin-top:-71px;margin-left:-52px;background-size:contain}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:16px}
#normalHeader .wrapperBanner .headerForm #normalHeader .wrapperBanner .headerForm form select,#normalHeader .wrapperBanner .headerForm form input{margin-bottom:12px;font-size:14px;padding:6px}
#normalHeader .header{height:35px}
#normalHeader .wrapperBanner .headerForm form>div label{font-size:14px}
#normalHeader::before{top:10%}
#normalHeader .wrapperBanner .headerForm{border-image-slice:140;margin-bottom:20px}
#listTeacherOnRoadTrain .contentListTeacher .tabSubject li{width:calc(16% + 3px)}
#listTeacherOnRoadTrain .contentListTeacher .tabMenuTeacherMobi{margin-bottom:12px}
#listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li,#listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li img{width:50px!important;height:50px!important}
#listTeacherOnRoadTrain .contentListTeacher .leftContent img{width:50%;min-width:auto;min-height:auto;margin-bottom:0}
#listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher.active{padding-bottom:12px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .rightContent .wrapBtn .btnStudyFree{font-size:16px;padding:6px 18px;display:block;width:fit-content;margin:0 auto}
#listTeacherOnRoadTrain .contentListTeacher .rightContent .aboutToTeacher{margin-bottom:12px}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .tabAvataTeacher li.active a::after{width:15px;height:15px;top:-2px}
#listTeacherOnRoadTrain .contentListTeacher .tabSubject{justify-content:center}
.list-teacher #listTeacherOnRoadTrain .contentListTeacher .wrapperVideo{width:215px}
.list-video-demo .wrapperVideo .bx-viewport .bxsliderVideo{margin-left:0}
.list-video-demo .wrapperVideo .bx-viewport .bxsliderVideo>div[aria-hidden=true]{transform:unset;filter:unset}
.list-video-demo .wrapperVideo .bx-viewport .bxsliderVideo>div[aria-hidden=false]{transform:unset}
.list-video-demo .wrapperVideo .bx-viewport{padding-bottom:0}
.list-combo-sun .list-combo>div{max-width:300px;height:100%}
#familyFeelToTs247 .wrapSlider .listMsg{max-width:75%}
#familyFeelToTs247 .listMsg .bx-controls-direction a{width:16px;height:16px;background:#fff}
#familyFeelToTs247 .listMsg .bx-controls-direction a img{width:5px}
#familyFeelToTs247{padding:24px 0}
#familyFeelToTs247 .listMsg .bx-controls-direction{position:static}
.wrapVideoLesson{background:0 0}
.listFeelVideo .bx-controls-direction a img{width:6px}
.list-combo-sun{padding:12px 0}
.list-combo-sun .intro-text{font-size:12px}
.list-combo-sun .info .status{font-size:14px}
.list-combo-sun .list-combo .combo-sun .combo-sun--head h4{font-size:18px}
.list-combo-sun .list-combo .combo-sun .combo-sun--head p{font-size:16px}
.list-combo-sun .list-combo{gap:0}
}