*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:OpenSans;src:url(../../../font/OpenSans-Regular.eot);src:url(../../../font/OpenSans-Regular.eot?#iefix) format("embedded-opentype"),url(../../../font/OpenSans-Regular.otf) format("opentype"),url(../../../font/OpenSans-Regular.svg) format("svg"),url(../../../font/OpenSans-Regular.ttf) format("truetype"),url(../../../font/OpenSans-Regular.woff) format("woff"),url(../../../font/OpenSans-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:OpenSansBold;src:url(../../../font/OpenSans-Bold.eot);src:url(../../../font/OpenSans-Bold.eot?#iefix) format("embedded-opentype"),url(../../../font/OpenSans-Bold.otf) format("opentype"),url(../../../font/OpenSans-Bold.svg) format("svg"),url(../../../font/OpenSans-Bold.ttf) format("truetype"),url(../../../font/OpenSans-Bold.woff) format("woff"),url(../../../font/OpenSans-Bold.woff2) format("woff2");font-display:swap}
body{font-family:OpenSans,sans-serif!important;color:#383838}
a{color:#000}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@keyframes zoom{
0%{transform:scale(1)}
100%{transform:scale(1.1);filter: drop-shadow(2px 4px 40px rgba(255, 255, 0, 0.651));}
}
:root{font-size:16px}
.container{width:100%;max-width:1224px;padding:0 12px;margin:0 auto}
#boughtPopup{animation:fadeIn .6s}
#normalHeader{background-repeat:no-repeat;background-position:bottom;background-size:cover;margin-top:56px;position:relative}
#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.png) no-repeat left}
#normalHeader .wrapperBanner .banner{width:calc(100% - 385px);cursor:pointer;position: relative;}
#normalHeader .wrapperBanner .banner::before{content:"";width:71%;height:30%;left:2%;bottom:28%;background:no-repeat center/100% url(../img/text-gift.png);position:absolute;z-index:2;animation:zoom 1s infinite alternate linear}
#normalHeader .wrapperBanner canvas{cursor:pointer}
#normalHeader .wrapperBanner .headerForm{position:relative;width:340px;height:calc(100% - 200px);border-radius:0;padding:12px;background:#fee9cb;box-shadow:0 0 7px 4px #0000004a}
#normalHeader .wrapperBanner .headerForm:hover{animation:unset}
#normalHeader .wrapperBanner .headerForm form{height:100%;border:24px solid transparent;border-image:url(../img/border-form.png) 30 round}
#normalHeader .wrapperBanner{align-items:center;padding:0;height:748px;position:relative;padding-right:50px}
#normalHeader .wrapperBanner .headerForm::before{content:"";width:calc(100% + 100px);height:150px;position:absolute;background:center/contain url(../img/le-truc.png);top:-6%;left:-15%}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:18px;color:#9a0000;font-family:OpenSansBold,sans-serif}
#normalHeader .wrapperBanner .headerForm form input,#normalHeader .wrapperBanner .headerForm form select{padding:12px;border:none;margin-bottom:24px;width:100%;border-radius:0;outline:0;background:0 0;border-bottom:1px solid #805e44}
#normalHeader .header>div{max-width:1224px}
#normalHeader .header{height:56px;background:#fff;color:#fff;width:100%;left:0;top:-56px;position:absolute}
#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.png) 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:#ce081f;border-bottom-color:#aa0202;color:#fff;font-size:20px}
.title h3 span{display:flex;align-items:center;height:100%;font-family:OpenSansBold,sans-serif!important}
.title{position:relative;text-align:center}
.title h3{text-transform:uppercase;padding:0 40px;height:auto!important;display:inline-block;color:#fff;position:relative;clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);clip-path:none!important;border-radius:50px;margin-top:30px!important;font-size:36px!important;background:0 0!important}
#demoLesson{padding-top:12px;padding-bottom:36px;background:linear-gradient(to bottom,#f6c92b ,#fee15e)}
#magazine3 .posts .title{color:#ffe63d}
#demoLesson .title h3 span,#listSubject .title h3{color:#89101d}
#boughtCountdownTime span.textCountDown{color:#ffe63d;margin:0 0 1rem 0}
#countdownTime{border-top:24px solid transparent;border-bottom:24px solid transparent;border-image:url(../img/vien.png) 300 round}
#countdownTime .title h3 span,#demoTopup .title h3 span,#listSubject{color:#fff}
#countdownTime,#demoTopup{background:#ac081e}
#demoTopup{padding-bottom:40px}
#demoTopup .content{display:flex;flex-wrap:wrap;justify-content:center;position:relative;width:100%;max-width:1224px;margin:38px auto 0}
#demoTopup .content .hand_gif{position:absolute;left:52px;width:104px;top:-10px}
#demoTopup .content .label{margin-right:35px;display:flex;align-items:center;font-size:17px;color:#fff}
#demoTopup .content .wrapInput input{border-radius:5px;padding:7px 5px;outline:0;font-family:OpenSansBold,sans-serif;font-size:16px;text-align:center;border:1px solid #ddd;margin-right:20px;color:#c71d23;background:#fff;font-weight:700}
#demoTopup .content .wrapInput{display:flex}
#demoTopup .content a.loadNow{border:1px solid;text-decoration:none;padding:7px 14px;display:inline-block}
#demoTopup .content .wrapInput input{color:#c71d23}
#demoTopup .content a.loadNow{background:#fee54c;border:none;border-radius:5px;font-weight:700;color:#b91e19}
#demoTopup{position:relative;overflow:hidden;background:repeat-y 100%/cover url(../img/4_bg.png)}
#guide{background:bottom center/contain url(../img/2_cac_buoc.png),linear-gradient(to top,#f6c92b ,#fee15e),linear-gradient(to top,#f6c92b ,#fee15e);padding:2rem 0}
#guide .guide__title{font-size:2.25rem;text-align:center;color:#b40021;font-family:OpenSansBold,sans-serif!important;margin-bottom:1rem}
#guide .guide__steps__wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
#guide .step_wrap{background:#fff;padding:10px}
#guide .guide__step{display:flex;flex-direction:column;justify-content:space-between;position:relative;gap:1rem;border:24px solid transparent;border-image:url(../img/border-image.png) 30 round;padding-top:1rem;min-height:100%}
#guide .guide__step:not(:nth-child(1)){text-align:justify}
#guide .guide__step label{position:absolute;width:200px;font-weight:700;background:#49c6b8;color:#fff;border-radius:0 0 99px 99px;left:calc(50% - 100px);top:-24px;text-align:center;padding:.3rem 0;text-transform:uppercase}
#guide .guide__step .guide__group-btn{display:flex;justify-content:center;align-items:center;gap:.3rem;position:absolute;width:100%;bottom:-42px}
#guide .guide__step .guide__group-btn a{background:#c51421;color:#fff;display:inline-block;padding:.2rem 1rem;text-decoration:none;border-radius:99px}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span{font-size:50px}
#table{background:#b60021;padding:0 calc((100% - 1200px)/ 2) 20px;border-top:24px solid transparent;border-bottom:24px solid transparent;border-image:url(../img/vien.png) 300 round}
#table .headTable{margin-bottom:24px}
#magazine3 .achievement ul li p,#magazine3 .posts .title,#magazine3 .title,#table .headTable .title h3 span,.comment H3.title{color:#fff}
#table .customer{width:100%;border-collapse:collapse;text-align:center}
#table .customer tr th:first-child{border-left:none}
#table .customer tr td,#table .customer tr th{border-left:1px solid #c0b7a4;border-right:1px solid #c0b7a4}
#table .customer tr th:last-child{border-right:none}
#table .customer tr th{text-transform:uppercase;padding:30px 0;background:#fde9cc}
#table .customer tr th:first-child{border-left:none;border-radius:15px 0 0;width:77px}
#table .customer tr th.colAccountName{width:55%}
#table .customer tr th:last-child{border-radius:0 15px 0 0}
#table .customer tr td{padding:.5rem 0}
#table .customer tr{background:#fff}
#table .customer tr:nth-child(odd){background:#f2f2f2}
.comment{padding-top:20px;background:no-repeat left bottom -40px url(../img/4-1.png),no-repeat right bottom -40px url(../img/4-2.png),#b60021}
.comment H3.title{font-family:OpenSansBold,sans-serif;color:#ffe63d;font-size:2rem}
.body-comment{padding:20px!important;background:#fff}
#videoLeft>div .wrapperContent h3{color:#c3031a;font-family:OpenSansBold}
#videoLeft>div{border-color:#fff;position:relative;z-index:1;background:#fff}
#videoLeft>div .wrapperContent div #btnVideoIntro{color:transparent;background:no-repeat url(../img/btnMuaNgay.png);border-color:unset;padding:6px 16px;border-radius:1px;width:177px;height:65px;background-size:contain}
#videoLeft>div .wrapperContent div #btnVideoIntro:hover{transform:scale(1.1);animation:unset;transition:.4s all}
#videoLeft>div .wrapperContent ul li{background:url(../img/lixi.png) left 4px no-repeat}
#videoLeft>div .wrapperContent ul li:nth-child(1){background:0 0;padding-left:0}
#videoLeft{background:no-repeat bottom left url(../img/1_left.png),no-repeat bottom right url(../img/1_right.png),linear-gradient(to bottom,#fee15e,#f6c92b)}
#demoLesson .title>div>a{background:#f5e296;color:#ad081d}
#demoLesson .title>div ul{background:#12ae88}
#demoLesson .title>div ul li a{color:#ffe44c}
#demoLesson .title>div ul li a:hover{background:#d03529;color:#fff}
#demoLesson .content{background:#aa0322;position:relative;z-index:1}
#demoLesson .content .lessons{background:#8c0006}
#demoLesson .content .lessons ul li a div p:first-child{margin-bottom:19px}
#demoLesson .content .lessons ul li a div p:last-child{display:none}
#demoLesson .content .lessons ul li a.active{background:#f8d542}
#demoLesson .title>div{z-index:2}
#listSubject .content>div{background:#c22f29}
#listSubject .content>div p{color:#f8d542}
#listSubject .content>div ul li a{background:#fade57;color:#6e6252;border-radius:99px}
#listSubject .content>div ul li a:hover{background:#fade57;color:#6e6252;transform:scale(1.1)}
#listSubject .content{position:relative;z-index:1}
#listSubject{padding-bottom:12px;background:no-repeat left -10% top/34% url(../img/canh-dao.png),no-repeat right top/15% url(../img/den-long.png),no-repeat right bottom/10% url(../img/quat-phai.png),no-repeat left bottom/10% url(../img/quat-trai.png),repeat top/100% url(../img/background-course.png)}
#listSubject .title{z-index:2}
#listSubject .title h3 span{flex-direction:column}
#popupRequestAdvisory>div h3{background:#c71d23;color:#fff609;border-color:#fff609}
#popupRequestAdvisory>div>div button{background:#c71d23;color:#fff609;border-color:#7c1a2a}
#popupRequestAdvisory>div>div input,#popupRequestAdvisory>div>div textarea{border-color:#ddd}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{border:none;background:no-repeat center 100%/contain url(../img/bg_countDown.png);padding:0;row-gap:0;justify-content:center;line-height:67px;width:120px;height:120px}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span .number{color:#49c6b8;font-weight:700;-webkit-text-stroke:1px #fff;font-family:OpenSansBold,sans-serif}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span .subText{color:#fff}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span>span{line-height:normal}
#boughtCountdownTime{padding-bottom:30px}
#csWrapper{z-index:99}
#magazine3 .achievement,#magazine3 .wrap{padding:24px calc((100% - 1224px)/ 2)}
#magazine3{background:no-repeat left top url(../img/3-1.png),no-repeat right top url(../img/3-2.png),#b60021}
#magazine3 .title{font-family:OpenSansBold}
@media all and (max-width:1023px){
.title h3{font-size:24px!important}
#demoTopup{padding:0 10px 30px}
div#demoTopup .content .hand_gif{display:none}
div#demoTopup .content{flex-direction:column;margin-top:20px}
#demoTopup .content a.loadNow{width:200px;text-align:center;margin:0 auto}
div#demoTopup .content .label{margin-right:0;justify-content:center;margin-bottom:20px}
div#demoTopup .content .wrapInput{justify-content:center;margin-bottom:12px}
#videoLeft>div{margin:0 12px}
#listSubject .content{padding:20px 12px}
#magazine3 .achievement,#magazine3 .wrap{padding:24px 12px}
#magazine3 .CompanysCooperated{margin-bottom:0}
}
@media all and (max-width:768px){
#normalHeader .wrapperBanner{padding-right:0}
#normalHeader{background-color: #ab0321;}
#normalHeader.webp{background-image:url(../img/backgroundMobi.webp)}
#normalHeader.png{background-image:url(../img/backgroundMobi.png)}
#normalHeader .header{height:auto;z-index:2;top:-40px}
#normalHeader .header>div>ul .hotline a{overflow:initial;color:#fff}
#normalHeader .header>div>ul .loginGroup .login{display:block}
#normalHeader .header>div>ul .loginGroup .login a:first-child{padding-left:24px}
div#demoTopup .content .wrapInput input{margin-bottom:10px;margin-right:0}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{line-height:36px;width:auto;height:auto;padding:10px 5px 0 5px;font-size:3rem}
#demoLesson{background-size:100px}
#normalHeader .header>div>ul .hotline a{overflow:hidden}
#normalHeader .header>div>ul .loginGroup .login a:first-child{color:#795429!important}
#normalHeader .wrapperBanner{position:relative;z-index:4;height:auto;padding-bottom:20px}
#normalHeader{position:relative;background-size:contain;background-position:top;margin-top:40px}
#videoLeft{padding:12px 0}
#listSubject{padding:0}
div#demoTopup .content .wrapInput{column-gap:12px}
#magazine3 .wrap{background-size:180px,105px,200px}
#normalHeader .wrapperBanner .banner{padding-bottom:10%;width:88%}
#normalHeader .wrapperBanner .headerForm{animation:unset;max-width:385px;margin-top:24px}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span>span.subText{font-size:1.5rem}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{background:#89101d;padding:0 5px 10px 5px;border-radius:5px;border:2px solid #f4e299;margin-left:12px}
#magazine3 .wrap{background-size:cover}
#guide .guide__title{font-size:1.6rem}
#videoLeft>div .wrapperContent ul li:nth-child(1){background:0 0;font-family:OpenSans;font-size:12px}
}
@media all and (max-width:480px){
body,html{font-size:14px}
#normalHeader .wrapperBanner .headerForm form input, #normalHeader .wrapperBanner .headerForm form select,
#normalHeader .wrapperBanner .headerForm form input::placeholder, #normalHeader .wrapperBanner .headerForm form select::placeholder{font-size:14px}
#normalHeader .wrapperBanner .banner{width:100%}
#normalHeader .wrapperBanner .banner::before{width:50%;height:24%;left:14%;bottom:32%}
#normalHeader .wrapperBanner .banner{padding-bottom:3%}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:15px;margin-bottom:12px}
#demoTopup .title h3{padding:0}
#normalHeader .wrapperBanner .headerForm::before{display:none}
#table .customer tr th{padding:12px 0}
#table .customer tr th:first-child{width:44px}
#table .customer tr th.colAccountName{width:43%}
#normalHeader .header>div>ul .hotline a,#normalHeader .header>div>ul .loginGroup .login a:first-child{overflow:hidden;color:transparent}
#normalHeader .header>div>ul .loginGroup .login{display:flex}
#normalHeader .header>div>ul .loginGroup .login a:first-child{padding-left:0;color:transparent!important}
#demoLesson{background-size:100px}
#listSubject .title h3 span .warning-text{font-size:.8rem}
.title h3{font-size:18px!important}
div#demoTopup .content .wrapInput input{width:50%}
select{padding:12px!important;font-size:16px;color:#000}
#listSubject .content>div{padding:0}
#normalHeader .wrapperBanner .headerForm{max-width:95%;margin-top:10px}
#listSubject .content{padding:20px 5px}
#countdownTime,#table{border-image:url(../img/vien.png) 1000 round}
#table{background-size:20%}
#normalHeader .wrapperBanner .headerForm form>div .btnHeaderFormSubmit{font-size:14px}
#normalHeader .wrapperBanner .headerForm form{border:14px solid transparent;border-image:url(../img/border-form.png) 30 round}
#guide .guide__title{font-size:1.2rem}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{font-size:2rem}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span>span.subText{font-size:1rem}
#videoLeft>div .wrapperContent h3{font-size:18px;}
#videoLeft>div .wrapperContent div #btnVideoIntro{width:140px;}
}