* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Nunito;
  src: url(/themes/fonts/Nunito-Regular.eot);
  src: url(/themes/fonts/Nunito-Regular.eot?#iefix) format("embedded-opentype"), url(/themes/fonts/Nunito-Regular.otf) format("opentype"), url(/themes/fonts/Nunito-Regular.svg) format("svg"), url(/themes/fonts/Nunito-Regular.ttf) format("truetype"), url(/themes/fonts/Nunito-Regular.woff) format("woff"), url(/themes/fonts/Nunito-Regular.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: NunitoBold;
  src: url(/themes/fonts/Nunito-Bold.eot);
  src: url(/themes/fonts/Nunito-Bold.eot?#iefix) format("embedded-opentype"), url(/themes/fonts/Nunito-Bold.otf) format("opentype"), url(/themes/fonts/Nunito-Bold.svg) format("svg"), url(/themes/fonts/Nunito-Bold.ttf) format("truetype"), url(/themes/fonts/Nunito-Bold.woff) format("woff"), url(/themes/fonts/Nunito-Bold.woff2) format("woff2");
  font-display: swap;
}
img.logo {
  width: 130px;
  height: auto;
}

.bold {
  font-family: NunitoBold, sans-serif !important;
  color: #424242;
}

.header .container {
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.menuPopupHeader .container {
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.container-homepage {
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.blueGradien {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}

.violetGradien {
  background: linear-gradient(127.41deg, #FE91D1 -41.57%, #7B58FC 91.25%);
}

.pinkGradien {
  background: linear-gradient(180deg, #FD9786 0%, #F567DB 100%);
}

.yellowGradien {
  background: linear-gradient(315deg, #FF8359 0%, #FFDF40 100%);
}

ul {
  list-style: none;
}

.header {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
  box-sizing: border-box;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}

.header * {
  box-sizing: border-box;
}

.header .logo {
  display: block;
}
.header .wrapContent {
  display: flex;
  column-gap: 16px;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.header .searchBox {
  background: #FFFFFF;
  border: 2px solid #E0E0E0;
  box-sizing: border-box;
  border-radius: 100px;
  position: relative;
  width: calc(100% - 160px);
  height: 38px;
  transition: all 0.4s;
}
.header .searchBox .inputSearch {
  width: 100%;
  height: 34px;
  border: none;
  border-radius: 20px;
  padding: 0 35px 0 12px;
  outline: none;
}

.header .searchBox .inputSearch::placeholder {
  font-size: 16px;
  font-family: Nunito, sans-serif !important;
  color: #757575;
  font-weight: 400;
}

.header .searchBox .btnSearch {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 7px;
  top: 7px;
  background: no-repeat center url(/themes/images/outline.png);
}
.header .searchBox.focus {
  position: absolute;
  width: calc(100% - 28px);
  margin-left: -2px;
}
.header .btnMenu {
  width: 24px;
  height: 24px;
  background: center url(/themes/images/IconMenu.png);
  margin: 0;
}

.main-menu-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #424242;
  margin-top: 16px;
  margin-bottom: 4px;
}

.homeMenuParent {
  margin-top: 16px;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}



.homeMenuParent li {
  margin-bottom: 8px;
}
.homeMenuParent li .className {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 16px;
  background: #F5F5F5;
  border-radius: 8px;
}

.menu-select-book-cat {
  margin: 16px 0;
  border: 1px solid #1270E3;
  border-radius: 8px;
  padding: 0 16px;

  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

.menu-select-book-cat .IconArrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center url(/themes/images/IconDown.png);
}

.menu-select-book-cat .IconUp {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center url(/themes/images/IconUp.png);
}

.menu-select-book-cat.open {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  padding: 8px 16px;
}

.menu-select-book-cat.open .book-cat-inner{
  display: block;
}

.menu-select-book-cat .book-cat-inner {
  display: none;
}
.menu-select-book-cat a {
  text-decoration: none;
  color: #424242;
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 6px;
}

.menu-select-book-cat a.active {
  color: #1270E3;
}

.menu-select-book-cat .book-cat-inner ul {
  padding-left: 16px;
}

.book-cat-inner li {
  margin: 0;
}

.menu-select-book-cat .select-title {
  padding: 6px 0;text-align:center;color: #1270E3;font-size: 16px;cursor:pointer; display: block;
  font-weight: 700;line-height: 22px;
  position: relative;
  padding-right: 24px;
}

.menu-select-book-cat .select-title .IconArrow {
  position: absolute;
  right: 0;
  top: calc(50% - 12px);
}

.menu-select-book-cat .select-title .IconUp {
  position: absolute;
  right: 0;
  top: calc(50% - 12px);
}

.homeMenuParent li .className > span {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.homeMenuParent .menu-grade-title-12 {
  background: linear-gradient(315deg, #F5317F 0%, #FF7C6E 100%);
}

.homeMenuParent .menu-grade-title-11 {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}

.homeMenuParent .menu-grade-title-10 {
  background: linear-gradient(127.41deg, #FE91D1 -41.57%, #7B58FC 91.25%);
}

.homeMenuParent .menu-grade-title-9 {
  background: linear-gradient(315deg, #FF8359 0%, #FFDF40 100%);
}

.homeMenuParent .menu-grade-title-8 {
  background: linear-gradient(315deg, #F5317F 0%, #FF7C6E 100%);
}

.homeMenuParent .menu-grade-title-7 {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}

.homeMenuParent .menu-grade-title-6 {
  background: linear-gradient(127.41deg, #FE91D1 -41.57%, #7B58FC 91.25%);
}

.homeMenuParent .menu-grade-title-5 {
  background: linear-gradient(315deg, #FF8359 0%, #FFDF40 100%);
}

.homeMenuParent .menu-grade-title-4 {
  background: linear-gradient(315deg, #F5317F 0%, #FF7C6E 100%);
}

.homeMenuParent .menu-grade-title-3 {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}

.homeMenuParent .menu-grade-title-2 {
  background: linear-gradient(127.41deg, #FE91D1 -41.57%, #7B58FC 91.25%);
}

.homeMenuParent .menu-grade-title-1 {
  background: linear-gradient(315deg, #FF8359 0%, #FFDF40 100%);
}


.homeMenuParent li .className .IconArrow {
  display: block;
  width: 20px;
  height: 20px;
  background: no-repeat center url(/themes/images/IconDown.png);
}
.homeMenuParent li .wrapContent {
  display: none;
  padding: 0 16px 10px;
  margin-bottom: 10px;
}
.homeMenuParent li .wrapContent .titleSubject {
  color: #424242;
  margin: 6px 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}
.homeMenuParent li .wrapContent .subMenuChild {
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.homeMenuParent li .wrapContent .subMenuChild li .tag {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #EEEEEE;
  border-radius: 8px;
  margin: 4px 0px;
  color: #424242;
  text-decoration: none;
  font-size: 16px;
}
.homeMenuParent li .wrapContent .subMenuChild li .tag:nth-child(1) span {
  display: flex;
  align-items: center;
  column-gap: 10px;
  color: #fff;
  text-transform: uppercase;
}
.homeMenuParent li .wrapContent .subMenuChild li.titleCourse {
  display: none;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 10px !important;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #424242;
}
.homeMenuParent li .wrapContent .subMenuChild li .gradienBlue {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}
.homeMenuParent li .wrapContent .subMenuChild li .gradienYellow {
  background: linear-gradient(315deg, #FF8359 0%, #FFDF40 100%);
}
.homeMenuParent li .wrapContent .subMenuChild li .gradienPink {
  background: linear-gradient(180deg, #FD9786 0%, #F567DB 100%);
}
.homeMenuParent li .wrapContent .subMenuChild li .gradienRedBod {
  background: linear-gradient(315deg, #F5317F 0%, #FF7C6E 100%);
}
.homeMenuParent li .wrapContent .subMenuChild li .gradienViolet {
  background: linear-gradient(127.41deg, #FE91D1 -41.57%, #7B58FC 91.25%);
}
.homeMenuParent li .wrapContent .subMenuChild .listPost {
  display: none;
}
.homeMenuParent li .wrapContent .subMenuChild:last-child {
  margin-bottom: 0;
}
.homeMenuParent li .wrapContent .subMenuChild.open {

}
.homeMenuParent li .wrapContent .subMenuChild.open li:nth-child(1) {
  margin-bottom: 0;
}
.homeMenuParent li .wrapContent .subMenuChild.open .listPost {
  display: block;
}
.homeMenuParent li:last-child {
  margin-bottom: 0;
}
.homeMenuParent li.open {
  background: #F5F5F5;
}
.homeMenuParent li.open .wrapContent {
  display: block;
}
.homeMenuParent li.open .className {
  /* background: transparent;
   color: #fff;*/
}
.homeMenuParent li.open .className .IconArrow {
  background: no-repeat center url(/themes/images/iconUp.png);
}

.slider {
  margin-top: 24px;
}
.slider .sliderImage img {
  width: 100%;
}
.slider .bx-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  margin-top: 5px;
}
.slider .bx-pager a {
  width: 12px;
  height: 4px;
  border-radius: 100px;
  display: block;
  background: #EEEEEE;
  color: transparent;
  overflow: hidden;
}
.slider .bx-pager a.active {
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
}

.homepage-top-ads {
  margin: 16px auto;
  text-align: center;
}

.blockPR {
  margin-top: 24px;
  box-sizing: border-box;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}

.blockPR * {
  box-sizing: border-box;
}

.blockPR .title {
  font-size: 24px;
  line-height: 28px;
}
.blockPR .title p {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.blockPR .title span {
  color: #2888E1;
}
.blockPR .listPR {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 24px;
  justify-content: center;
  margin-top: 24px;
}
.blockPR .listPR li {
  max-width: 320px;
  width: calc(50% - 16px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 16px;
  padding: 16px 16px;
  background: #FFFFFF;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.blockPR .listPR li img {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}
.blockPR .listPR li span {
  width: calc(100% - 28px);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.blockPR .listPR li .borderBottom {
  height: 6px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.blockPR .listPR li:nth-child(1) {
  box-shadow: 0px 2px 8px rgba(18, 112, 227, 0.04), 0px 16px 24px rgba(66, 66, 66, 0.16);
}
.blockPR .listPR li:nth-child(2) {
  box-shadow: 0px 2px 8px rgba(18, 112, 227, 0.04), 0px 16px 24px rgba(66, 66, 66, 0.16);
}
.blockPR .listPR li:nth-child(3) {
  box-shadow: 0px 2px 8px rgba(18, 112, 227, 0.04), 0px 16px 24px rgba(66, 66, 66, 0.16);
}
.blockPR .listPR li:nth-child(4) {
  box-shadow: 0px 2px 8px rgba(18, 112, 227, 0.04), 0px 16px 24px rgba(66, 66, 66, 0.16);
}

.box-download-app {
  width: 100vw;
  max-width: 100vw;
  margin: 48px 0;
  box-sizing: border-box;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}

.box-download-app * {
  box-sizing: border-box;
  max-width: 100vw;
}

.box-download-app .box-download-app-title {
  width: 100%; text-align: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  margin-bottom: 24px;
}

.box-download-app .box-download-app-content {
  text-align: center;width: 100%;
}

.box-download-app-content > a {
  display: inline-block;
  padding: 10px;
}

.listHostSession {
  margin-top: 47px;
  box-sizing: border-box;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}

.listHostSession * {
  box-sizing: border-box;
}

.listHostSession .title {
  margin-bottom: 12px;
  font-size: 18px;
}
.listHostSession ul li a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #F5F5F5;
  border-radius: 8px;
  color: #424242;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 16px;
}

.homepage-bottom-ads {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 48px 0;
}

.footer {
  margin: 18px 0 0 0;
  background: #F5F5F5;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  font-size: 16px;
  font-family: Nunito, sans-serif !important;
  color: #424242;
}

.footer * {
  box-sizing: border-box;
}

.footer > ul {
  padding: 33px 16px;
}
.footer .menuFooter a {
  color: #404040;
  padding: 8px 0;
  display: block;
  text-decoration: none;
}

.footer .menuFooter p {
  color: #404040;
  padding: 8px 0;
  display: block;
  text-decoration: none;
}

.footer .dowloadApp {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}
.footer .dowloadApp img {
  display: block;
}
.footer .chanelAndFanpage {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  margin-top: 16px;
}
.footer .chanelAndFanpage a.social {
  background: #FFFFFF;
  border-radius: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menuPopupHeader {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
  display: none;
}

.menuPopupHeader * {
  box-sizing: border-box;
}

.menuPopupHeader .btnClose {
  position: fixed;
  right: 25px;
  top: 25px;
  border-radius: 99px;
  width: 24px;
  height: 24px;
  background: no-repeat center url(/themes/images/iconClose.png);
  z-index: 2000;
}
.menuPopupHeader .listCardClass {
  margin: 75px 0 30px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 16px;
  justify-content: center;
}
.menuPopupHeader .listCardClass .btnStudyNowBox {
  text-align: center;
  box-shadow: 0px 2px 8px rgba(255, 131, 89, 0.08), 0px 20px 32px rgba(255, 131, 89, 0.24);
  border-radius: 24px;
  padding: 16px 4px;
  display: block;
}
.menuPopupHeader .listCardClass li .btnStudyNow {
  width: 117px;
  height: 38px;
  display: inline-block;
  background: linear-gradient(315deg, #1270E3 0%, #59C2FF 100%);
  border-radius: 100px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0;
}