*{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}
a{color:#000}
@keyframes fadeIn{
0%{opacity:0}
100%{opacity:1}
}
: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 .header>div>ul .hotline a{background:url(../img/hotLine.png) no-repeat left}
#normalHeader .wrapperBanner .banner{width:calc(100% - 385px);cursor:pointer}
#normalHeader .wrapperBanner canvas{cursor:pointer;}
#normalHeader .wrapperBanner .headerForm{position:relative;width:385px;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}
#normalHeader .wrapperBanner .headerForm::before{content:"";width:calc(100% + 100px);height:150px;position:absolute;background:url(../img/le-truc.png);top:-37px;left:-56px}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:21px;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-bottom:12px;background:no-repeat left top url(../img/1-1.png),no-repeat right top url(../img/1-2.png),#aa0322}
#demoLesson .title h3 span,#magazine3 .posts .title{color:#ffe63d}
#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:url(../img/texture.png);padding:2rem 0}
#guide .guide__title{font-size:2rem;text-align:center;color:#b40021;font-family:OpenSansBold,sans-serif!important;margin-bottom:1rem}
#guide .guide__steps__wrap{display:flex;gap:32px;align-items:center;justify-content:center}
#guide .guide__step{width:33.33%;min-height:239px;background:#8a121a;display:flex;flex-direction:column;justify-content:space-between;position:relative;gap:1rem;border:24px solid transparent;border-image:url(../img/duong-vien-2.png) 25 round;padding-top:1rem}
#guide .guide__step:not(:nth-child(1)){text-align: justify;}
#guide .guide__step label{position:absolute;width:200px;font-weight:700;background:#c51421;color:#fde156;border-radius:0 0 99px 99px;left:calc(50% - 100px);top:-24px;text-align:center;padding:.3rem 0;text-transform:uppercase}
#guide .guide__step div>p{color:#fff}
#guide .guide__step .guide__group-btn{display:flex;justify-content:center;align-items:center;gap:.3rem}
#guide .guide__step .guide__group-btn a{display:inline-block;padding:.2rem 1rem;text-decoration:none;border-radius:99px}
#guide .guide__step .guide__group-btn a:nth-child(1){background:#fee357;color:#8a121a}
#guide .guide__step .guide__group-btn a:nth-child(2){background:#c51421;color:#fff}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span{font-size:50px}
#table{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;background:no-repeat left top url(../img/3-1.png),no-repeat right top url(../img/3-2.png),#b60021}
#table .headTable{margin-bottom:24px}
#table .headTable .title h3 span{color:#fff}
#table .customer{width:100%;border-collapse:collapse;text-align:center}
#table .customer tr th:first-child{border-left:none}
#table .customer tr th,#table .customer tr td{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:0.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:none;font-family: OpenSansBold;}
#videoLeft{background:no-repeat left 5% top url(../img/den-long-trai.png),no-repeat right 5% top url(../img/den-long-phai.png),#ffd396}
#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:#fff;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:#860007}
#listSubject .content>div p{color:#f8d542}
#listSubject .content>div ul li a{background:#fadcb2;color:#6e6252;font-weight:700}
#listSubject .content>div ul li a:hover{background:#f4c98d;color:#6e6252;transform:scale(1.1)}
#listSubject .content{position:relative;z-index:1}
#listSubject{padding-bottom:12px;background:no-repeat left top url(../img/2-1.png),no-repeat right top url(../img/2-2.png),#b60021;background-size:20%}
#listSubject .title{z-index:2}
#listSubject .title h3 span{flex-direction: column;}
#listSubject .title h3 span .warning-text{font-size: 1rem;color:#f4c98d;text-transform: initial;}
#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;color:#f4e299;font-weight:700;-webkit-text-stroke:1px #e7ac6f;font-family:OpenSansBold,sans-serif;line-height:67px;width:120px;height:120px}
#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 .wrap{background:no-repeat top url(../img/4_bg.png)}
#magazine3 .achievement{background:#bf0020;color:#fff}
#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.webp{background-image:url(../img/backgroundMobi.webp)}
#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;background-color:#900808;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}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span>span.subText{font-size:1.5rem}
#guide .guide__steps__wrap{flex-direction:column}
#guide .guide__step{width:80%;min-height:auto}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{background:#89101d;padding:0px 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:none;font-family:OpenSans;font-size: 12px;}
}
@media all and (max-width:480px){
#normalHeader .wrapperBanner .banner{padding-bottom:3%}
#normalHeader .wrapperBanner .headerForm .formTitle{font-size:16px;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: 0.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%}
#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}
#guide .guide__title{font-size:1.2rem}
#boughtCountdownTime .containerCountdownTime #timeCoutDown>span{font-size: 2rem;}
#boughtCountdownTime .containerCountdownTime>#timeCoutDown>span>span.subText {font-size: 1rem;}
}