@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/* .testFont{ font-family: 'Lato', sans-serif; font-family: 'Roboto', sans-serif; } */

.section-learning h1, .section-learning h2, .section-learning h3, .section-learning h4 { font-family: 'Roboto', Georgia,Times,Times New Roman,serif !important; font-weight: 500; }
.section-learning p, .section-learning ul li, .section-learning ol li{ font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-weight: 400; }
.section-learning .h-line{ font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-size: 11px; font-weight: bold; color: #132F65; }
.section-learning .h-line a{ color: #FD6404; }
.section-learning a:hover{ color: #FD6404; }
.section-learning--article article{ padding-top: 20px; padding-bottom: 20px; }

.box--scholarship-bg .list-detail-mt{ margin: 0; padding: 10px 15px;}


.section-learning .article-news li, .section-learning .article-news p{ font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-weight: 400; }
/* .section-learning .articl-content ul li::before { background-color: #FD6404; } */
/* .section-learning .article-news a{ color: #FD6404; } */
.section-learning .box-share a:hover{ background-color: #FD6404; color: #fff; border-color: #FD6404; }
.section-learning .box-share li.comment-icon a:hover{ color: #FD6404; }
.section-learning a.btn-default, 
.section-learning .article-btn-comment a{ background-color: #FD6404; color: #fff; border:1px solid #FD6404; }
.section-learning a.btn-default:hover, 
.section-learning .article-btn-comment a:hover,
.section-learning .box-tag ul li a:hover:hover{ background-color: #fff; border-color: #FD6404; color: #FD6404; }
.section-learning .box-like_unlike .f-comment a{ color: #999; }
.section-learning .box-like_unlike .f-comment span a:hover{ color: #FD6404; }
.section-learning .btn-loadmore{ color: #FD6404; border: 1px solid #FD6404; }
.section-learning .btn-loadmore:hover{ background-color: #FD6404; color: #fff; border-color: #FD6404; }

.section-learning .article-news a.link-vocab{ color: #FD6404; font-weight: bold; text-decoration: underline; text-decoration-style: dotted; }

/* .section-learning .article-headline-fixed .box-share.box-share--h li.comment-icon-fixed a:hover{ color: #FD6404; } */
.article-headline-fixed .box-share.box-share--h a:hover{ background-color: #2B63D1; }

.div-article--container{ max-width: 626px; width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 40px; }


.section-learning .list-group li a{ font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-weight: 400; }
.section-learning .list-group li a:hover{ color: #FD6404; }


.section-life.section-learning a:hover,
.section-life.section-learning .h-line, 
.section-life.section-learning .h-line a,
.section-life.section-learning .list-num .num,
.section-life.section-learning .article-news a,
.section-life.section-learning .article-info span,
.section-life.section-learning .list-group li a:hover{ color: #FD6404; }

.section-life.section-learning .ads-cxense ul li a{ color: #000; }
.section-life.section-learning a.btn-default, 
.section-life.section-learning .article-btn-comment a{ background-color: #FD6404; color: #fff; border:1px solid #FD6404; }
.section-life.section-learning a.btn-default:hover,
.section-life.section-learning .article-btn-comment a:hover,
.section-life.section-learning .box-tag ul li a:hover:hover{ background-color: #fff; border-color: #FD6404; color: #FD6404; }
.section-life.section-learning .box-share a:hover{ color: #fff; }



.crop-img {
  position: relative; overflow: hidden;
  height: 120px; margin: 0px auto;
}
.crop-img img {
  position: absolute; left: 50%; top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%; 
}
@media (max-width: 1199px){

  .crop-img{ height: 93px; }
  
}
@media (max-width: 991px){

  .crop-img{ height: 110px; }
  
}
@media (max-width: 767px){

  .crop-img{ height: 200px; }
  
}
@media (max-width: 576px){

  .crop-img{ height: 150px; }
  
}
@media (max-width: 340px){

  .crop-img{ height: 130px; }
  
}



.learning-search--form [class*="col"]{ padding-top: 10px; padding-bottom: 10px; }

@media (min-width: 576px) {

  .learning-search--form .row{ margin-left: -10px; margin-right: -10px; }
  .learning-search--form [class*="col"]{ padding:10px; }

  .section-learning--article-3box .row{ margin-left: -10px; margin-right: -10px; }
  .section-learning--article-3box [class*="col"]{ padding-left:10px; padding-right: 10px; }

}
@media (min-width: 992px) {

  .learning-search--form [class*="col"]{ padding-top: 0px; padding-bottom: 0px; }

}

/**********************************************************/
/**********************************************************/
/**********************************************************/

.section-nav-learning{ background-color: #FD6404; padding: 5px 0 2px; }
.section-nav-learning .section-nav{ margin: 0; color: #fff; height: 35px; }
.section-nav-learning .section-nav ul li a{ color: #fff; }
.section-nav-learning .section-nav ul li:after{ display: none; }
.section-nav-learning .section-nav ul li:first-child{ font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 30px; }
.section-nav-learning .section-nav ul li:first-child:after{ 
  content: "";
  position: absolute;
  display: block;
  overflow: hidden;
  width: 1px;
  height: 16px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: -20px;
  background-color: #fff;
}
.section-nav-learning .section-nav ul li a{ font-family: 'Lato', sans-serif; font-size: 16px; line-height: 30px; font-weight: 400; }
.section-nav-learning .section-nav ul li a:after{ margin-top: 0; height: 30px; }
.section-nav-learning .section-nav.more_expanded{ height: auto; padding-bottom: 0; }


@media (max-width: 991px){

  /* .section-nav-learning .section-nav--more{ display: none; } */
  .section-nav-learning .section-nav--more{ display: inline-block; font-size: 14px; line-height: 32px; color: #fff; }
  /* .section-nav ul li:first-child{ font-size: 24px; line-height: 30px; }
  .section-nav-learning .section-nav ul li a:after{ height: 30px; } */

}
@media (max-width: 767px){

  /* .section-nav-learning .section-nav--more{ display: inline-block; font-size: 14px; line-height: 32px; color: #fff; } */
  
}
@media (max-width: 576px){

  .section-nav-learning{ padding: 6px 0; }
  .section-nav-learning .section-nav{ margin: 0 10px; height: 30px; }
  .section-nav-learning .section-nav ul li:first-child{ font-size: 20px; margin-right: 10px; }
  .section-nav-learning .section-nav ul li:first-child:after{ right: -10px; }
  .section-nav-learning .section-nav ul li a{ font-size: 14px; margin: 0; }
  .section-nav-learning .section-nav ul li a:after{ height: 27px; }

}
@media (max-width: 356px){

  .section-nav-learning .section-nav{ height: auto; }
  .section-nav-learning .section-nav--more{ display: none; }
  .section-nav-learning .section-nav ul li:first-child{ padding-bottom: 0; }
  .section-nav-learning .section-nav ul li{ margin: 0 6px; }

}




/**********************************************************/
/**********************************************************/
/**********************************************************/

.section--content{ padding: 40px 0; }

.box-for-hsubsec{ text-align: right; }
.subscr-head{ position: relative; text-align: left; }
.subscr-head::after{ content: ''; position: absolute; top: 12px; left: 0; width: 100%; height: 4px; background-color: #FD6404; }
.subscr-head span{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 26px; font-weight: bold; font-style: italic; color: #000; background-color: #fff; position: relative; z-index: 5; padding-right: 8px; text-transform: uppercase; }
.subscr-head.h-center{ text-align: center; }
.subscr-head.h-center span{ padding: 0 8px; }
.box-for-hsubsec a{ font-family: 'Lato', sans-serif; font-size: 15px; font-weight: bold; }
.box-for-hsubsec a:hover .icon-more{ background-image: url('../images/icon/arrow_more_h.svg'); }
.box-for-hsubsec.hsection .subscr-head::after{ display: none; }
.box-for-hsubsec.hsection .subscr-head span{ background-color: transparent; }

.box-learning--wordofday{ background-color: #F0F1F1; padding: 30px; margin-top: 20px; }
.box-learning--wordofday ul li{ border-bottom: 1px solid #ddd; padding: 30px 0 40px; }
.box-learning--wordofday ul li:first-of-type{ padding-top: 0; }
.box-learning--wordofday ul li:last-of-type{ border-bottom: 0; padding-bottom: 10px; }
.box-learning--wordofday ul li .word-vocab{ padding-bottom: 10px; }
.box-learning--wordofday ul li .word-vocab a{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 26px; font-weight: bold; color: #FD6404; position: relative; }
.box-learning--wordofday ul li .word-translate{ font-family: 'Lato', sans-serif; font-size: 15px; line-height: 20px; font-weight: 400; color: #3B3E41; }
.box-learning--wordofday ul li .word-translate a{ text-decoration: underline; }

.box-learning--wordofday ul li .word-vocab a:after{
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 4px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}
.box-learning--wordofday ul li .word-vocab a:hover:after{
    opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.section-learning--article.box--course .list-v{ padding-top: 20px; padding-bottom: 10px; }
.list-v{ position: relative; }
.list-detail-learning--bg{ position: absolute; bottom: 20px; left: 20px; right: 20px; width: calc(100% - 40px); background-color: rgba(255, 255, 255, 0.8); padding: 15px 15px 15px 21px; }
.list-detail-learning--bg::before{ content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: #FD6404; }
.list-detail-learning--bg h3{ font-size: 18px; line-height: 24px; }


.learning--bg-gradient{
  background: linear-gradient(180deg, rgba(52,106,211,0.25) 0%, rgba(255,255,255,0.25) 100%);
  padding: 40px 0;
}
.learning--title h2{ font-size: 32px; color: #2B63D1; margin-bottom: 20px;}


.form--search {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ddd;
  border-radius: 0;
}
.custom-select{ background: #fff url('../images/icon/arrow_select3.svg') no-repeat right 1rem center; border: 1px solid #ddd; border-radius: 0px; font-size: 12px; color: #333; height: calc(36px + 2px); padding: 8px 10px; }
.btn--search{ display: block; border:1px solid #2B63D1; background-color: #2B63D1; font-size: 15px; color: #fff; border-radius: 0; padding: 6px 10px; width: 100%; text-align: center; margin: 0 auto; transition: all 0.8s ease; cursor: pointer;}
.btn--search:hover{ background-color: #fff; color: #2B63D1; }


.learning--bg-gradient.box-search--word{ padding: 30px; }
.learning--bg-gradient.box-search--word h2{ color: #2B63D1; margin-bottom: 30px; font-size: 28px; }
.learning--bg-gradient.box-search--word h3{ color: #2B63D1; margin-bottom: 10px; font-size: 24px; }
.learning--bg-gradient.box-search--word .btn--search{ width: 120px; display: inline-block; }
.link-viewall{ font-size: 15px; line-height: 20px; color: #FD7622; vertical-align: bottom; margin-left: 10px; }
.search--container{ max-width: 900px; width: 100%; margin: 0 auto; }
.box-search--word hr{ border-top: 7px solid #FD6404; margin-top: 40px; margin-bottom: 0px; }



.box-destination--title{ text-align: center; padding-bottom: 20px; }
.box-destination--title a{ display: block; text-transform: uppercase; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: bold; color: #132F65; }
.box-destination--title a:last-of-type{ margin-top: 10px; height: 42px; overflow: hidden; }

.list-learning--v{ background-color: #EDF5FF; margin: 20px 0; }
.list-learning--v figure{ overflow: hidden; transition: transform .8s; }
.list-learning--v figure a{ display: block; width: 100%; height: 100%; }
.list-learning--v figure a:hover{ transform: scale(1.3); }
.list-destination--detail{ width: 90%; margin:0 auto; padding: 5px 0px; }
.list-destination--detail a{ display: block; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 18px; color: #132F65; height: 36px; overflow: hidden; }
.list-learning--v figure{
  position: relative;
  overflow: hidden;
  height: 100px;
  margin: 0px auto;
}
.list-learning--v figure img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}



.divDestination { padding-top: 20px; }
.divDestination .list-learning--v:last-of-type{ margin-bottom: 0; }


.box-thumb--highlight{ padding: 20px 0; }
.div-learning--boxpart{ padding-bottom: 40px; }


.crop-banner {
  position: relative; overflow: hidden;
  height: 400px; margin: 0px auto;
}
.crop-banner img {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%,0);
  width: 100%; 
}

.box--scholarship-bg{ background-color: #F3F3F3; }
.box--scholarship-bg .list-detail-mt h3{ height: 106px; overflow: hidden; }
.box--owl-padding{ padding: 20px 0 0 0; }
.list-detail--workshop{ padding-top: 10px; }
.list-detail--workshop li{ display: block; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 24px; font-weight: 400; color: #3B3E41; padding-bottom: 5px; }
.list-detail--workshop li span{ width: 15px; display: inline-block; margin-right: 10px; }
.div-learning--banner{ position: relative; }
.bx--counter{ position: absolute; right: 20px; bottom: 0; background-color: #fff; font-family: 'Roboto', sans-serif; font-size: 24px; color: #000; font-weight: bold; padding: 5px 20px; z-index: 6; }
.bx--caption{ position: absolute; background-color: rgba(255, 255, 255, 0.8); left: 20px; bottom: 20px; padding: 10px 20px; font-family: 'Roboto', sans-serif; font-size: 32px; color: #000; font-weight: bold; z-index: 5; }
.bx--caption span{ display: block; font-family: 'Lato', sans-serif; font-size: 11px; font-weight: bold; color: #EA6044; text-transform: uppercase; }


.list-detail--overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%, rgb(0, 0, 0) 100%); 
  position: absolute; width: 100%; left: 0; bottom: 0; padding: 10px 15px; transition: all 0.8s ease;
}
.list-detail--overlay h5{ font-family: 'Roboto', sans-serif; font-size: 20px; color: #fff; margin-bottom: 5px; }
.list-detail--overlay p{ color: #fff; }
.list-v.hover--zoom a figure{ overflow: hidden; }
.list-v.hover--zoom a figure img{ transition: all 0.8s ease; }
.list-v.hover--zoom a:hover figure img{ transform: scale(1.3); transition: all 0.8s ease; }

.icn--play{ position: absolute; width: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: all 0.8s ease; }
.list-v.list--vdo a:hover .list-detail--overlay{ opacity: 0; transition: all 0.5s ease; }
.list-v.list--vdo a:hover figure::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); transition: all 0.8s ease; }


.div-learning--article-3box{ padding-top: 20px; overflow: hidden; }
.div-learning--article-3box ul li{ position: relative; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; float: left; padding-left: 15px; }
.div-learning--article-3box ul li:first-of-type{  -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; padding-left: 0; padding-right: 5px; }
.div-learning--article-3box ul li:nth-child(2){ padding-bottom: 17px; }

.div-learning--article-3box ul li .list-detail--overlay h5{ font-size: 18px; line-height: 20px; }
.div-learning--article-3box ul li:first-of-type .list-detail--overlay h5{ font-size: 20px; line-height: 24px; }


.div-learning-listdetail article{ padding-bottom: 30px; }

.list--detail{ background-color: #EDF5FF;}
.list--detail .list-detail-mt{ border-left: 5px solid #FD6404; padding: 15px 20px; margin-top: 0; }
.list--detail figure{
  position: relative;
  overflow: hidden;
  height: 220px;
  margin: 0px auto;
}
.list--detail figure img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
.list--detail p{ height: 80px; overflow: hidden; }


.hover--vdo{ position: relative; }
.hover--vdo a{ display: block; }
.hover--vdo a::after{ content: ''; position: absolute; width: 60px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: all 0.8s ease; background-image: url('../images/icon/icon-play.svg'); background-size: cover; cursor: pointer; }
.hover--vdo a:hover .list-detail--overlay{ opacity: 0; transition: all 0.5s ease; }
.hover--vdo a:hover figure::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); transition: all 0.8s ease; }

.crop-img.hover--vdo a::after{ width: 50px; height: 50px;  }
.list-learning--v .hover--vdo a::after{ width: 40px; height: 40px;  }


.intro-title{ padding-bottom: 20px; }

.div-yourself--content{ position: relative; width: 100%; height: 320px; background-color: #E5E5E5; }
.div-yourself--content a{ display: block; position: relative; height: 100%; }
.div-yourself--content::before{ content: ''; position: absolute; top: 0; right: 0; background-image: url('../images/learning/img-download.jpg'); background-size: cover; width: 220px; height: 180px; }
.box-yourself--text{ width: 100%; position: absolute; top: 50%; text-align: center; padding: 0 20px; }
.box-yourself--title{ font-family: 'Lato', sans-serif; font-size: 18px; line-height: 34px; font-weight: 700; text-transform: uppercase; color: #121212; }
.box-yourself--by{ font-family: 'Lato', sans-serif; font-size: 18px; line-height: 34px; color: #FF6827; }

.audio--content{ overflow: hidden; font-family: 'Lato', sans-serif; font-size: 13px; padding-bottom: 20px; }
.audio--txt{ float: left; width: calc(100% - 100px);  }
.audio--btn{ float: right; }
.audio--btn a{ position: relative; display: block; border:1px solid #FF6827; border-radius: 5px; padding: 2px 5px 2px 20px; color: #FF6827; font-weight: 700; }
.audio--btn a::before{ content: ''; position: absolute; background-image: url('../images/learning/icon/arrow-down.svg'); width: 10px; height: 10px; background-size: cover; top: 7px; left: 5px; background-repeat: no-repeat; }
.audio--btn a:hover{ color: #fff; background-color: #FF6827; }
.audio--btn a:hover::before{ background-image: url('../images/learning/icon/arrow-down-h.svg'); }

.div-vocab--content{ width: 100%; background-color: #FCEEE8; padding: 30px; }
.div-vocab--content ul li{ padding-bottom: 20px; font-family: 'Lato', sans-serif; font-size: 15px; line-height: 22px; color: #121212; }
.div-vocab--content ul li span{ font-size: 18px; font-weight: bold; color: #FF6827; display: block; }

.box-course--detail{ padding: 50px 0; }
.box-interschool--content{ background-color: #F0F1F1; padding: 30px; margin-top: 20px; }
.box-interschool--content ul li{ padding-bottom: 30px; }
.box-interschool--content ul li .interschool-title{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 26px; font-weight: bold; color: #FD6404; padding-bottom: 10px; text-transform: uppercase; }
.box-interschool--content ul li .interschool-text{ font-family: 'Lato', sans-serif; font-size: 15px; line-height: 22px; font-weight: 400; color: #3B3E41; }


.word-alphabet{ padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.word-alphabet ul li{ display: inline-block; padding: 4px 3px; }
.word-alphabet ul li a{ display: block; width: 37px; height: 37px; font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 35px; color: #333; border-radius: 50%; border: 1px solid #333; text-align: center; background-color: #fff; }
.word-alphabet ul li a:hover{ color: #FD6404; border-color: #FD6404; }
.word-alphabet ul li.active a{ background-color: #FD6404; color: #fff; border-color: #FD6404; }

.word--vocabulary{ padding-bottom: 40px; }
.word--vocabulary ul li{ font-size: 18px; line-height: 26px; color: #333; padding-bottom: 25px; }
.word--vocabulary ul li:last-of-type{ padding-bottom: 0; }
.word--vocabulary ul li span{ display: block; }
.word--vocabulary ul li a{ font-weight: bold; text-decoration: underline; }

.box-word--vocabulary{ background-color: #FCEEE8; padding: 40px 0; text-align: center; margin-bottom: 50px; }
.box-word--vocabulary h2{ font-size: 40px; line-height: 50px; color: #FD6404; text-transform: uppercase; }
.box-word--vocabulary h2 span{ display: block; padding-top: 20px; font-family: 'Lato', sans-serif; font-size: 18px; line-height: 26px; color: #333; font-weight: 400; text-transform: none; }
.div-learning--boxmean{ padding-bottom: 20px; }
.div-learning--boxmean article p{ font-size: 18px; line-height: 32px; color: #000; }
.div-learning--boxmean article ul li{ font-size: 18px; line-height: 28px; color: #333; }
.boxword--meaning{ padding-bottom: 20px; }
.box-word--found{ border-top: 1px solid #ddd; padding-top: 20px; font-size: 18px; line-height: 28px; color: #000; }
.box-word--found ul{ margin-left: 20px; padding-top: 10px; }
.box-word--found ul li{ position: relative; padding-left: 15px; padding-bottom: 10px; }
.box-word--found ul li::before{ content: '- '; position: absolute; left: 0; }
.boxword--relate{ border-top: 1px solid #000; padding: 20px 0; font-size: 18px; line-height: 28px; color: #000; }
.boxword--relate .link--relate a{ position: relative; margin-right: 10px; color: #999; text-decoration: underline; }
.boxword--relate .link--relate a:hover{ color: #FD6404; text-decoration: none; }
.boxword--relate .link--relate a::after{ position: absolute; content: ',';  }
.boxword--relate .link--relate a:last-of-type{ margin-right: 0px; }
.boxword--relate .link--relate a:last-of-type::after{ display: none; }


.learning-search_result{ padding-bottom: 40px; }
.learning-search_result--title{ font-family: 'Lato', sans-serif; font-size: 18px; line-height: 26px; color: #3B3B3B; padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 30px; }
.search_result--loadmore{ max-width: 790px; width: 90%; margin: 0 auto; }


.search_result--notfound{ max-width: 460px; width: 90%; margin: 0 auto; padding-bottom: 50px; }
.icn-notfound{ max-width: 122px; width: 100%; margin: 30px auto; }
.search-notfound--title{ font-family: 'Lato', sans-serif; font-size: 18px; line-height: 30px; color: #FD6404; font-weight: 700; text-transform: uppercase; text-align: center; }
.search-notfound--text{ font-family: 'Lato', sans-serif; font-size: 18px; line-height: 30px; padding-top: 30px; }
.search-notfound--text ul{ margin-left: 20px; padding-top: 10px; }
.search-notfound--text ul li{ position: relative; padding-left: 15px; padding-bottom: 10px; }
.search-notfound--text ul li::before{ content: '- '; position: absolute; left: 0; }


.search--for-listing .learning--bg-gradient{ padding-bottom: 0; }
.search--for-listing .divDestination{ padding-top: 40px; }




@media (max-width: 1199px){

  .list-detail-learning--bg{ padding: 10px 10px 10px 15px; left: 15px; right: 15px; bottom: 15px; width: calc(100% - 30px); }
  .list-detail-learning--bg::before{ width: 5px; }
  .list-detail-learning--bg h3,
  .box--scholarship-bg .list-detail-mt h3{ font-size: 15px; line-height: 20px; }
  .box-thumb--highlight{ padding: 15px 0; }
  .box--scholarship-bg .list-detail-mt{ padding: 10px;}

  .div-learning--article-3box ul li{ padding-left: 10px; }
  .div-learning--article-3box ul li:first-of-type{ padding-left: 0; padding-right: 5px; }
  .div-learning--article-3box ul li:nth-child(2){ padding-bottom: 10px; }
  

}
@media (max-width: 991px){

  .section--content{ padding: 20px 0; }

  .btn--search{ width: 120px; }
  .box-right--word{ padding-top: 20px; }

  .crop-banner {
    position: relative; overflow: auto;
    height: 100%; margin: 0px auto;
  }
  .crop-banner img {
    position: relative; left: auto; top: auto;
    transform: translate(0,0);
    width: 100%; 
  }
  .learning--bg-gradient.divBanner{ background: linear-gradient(180deg, rgba(52,106,211,0.25) 60%, rgba(255,255,255,0.25) 130%); }
  .bx--counter{ right: 10px; font-size: 20px; padding: 5px 15px; }
  .bx--caption{ font-size: 28px; }

  .div-learning--article-3box article{ padding:0; }
  .div-learning-listdetail article{ padding-top: 0; }

  .box-course--detail{ padding: 30px 0; }

  .learning--title h2{ font-size: 28px; }

}
@media (max-width: 767px){

  .div-learning--article-3box ul li,
  .div-learning--article-3box ul li:first-of-type{  -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-bottom: 20px; padding-left: 0; padding-right: 0; }
  .div-learning--article-3box ul li:nth-child(2){ padding-bottom: 20px; }
  .list--detail p{ height: auto; overflow: auto; }

}
@media (max-width: 576px){

  .box-for-hsubsec{ margin: 0 20px; }
  .box-learning--wordofday{ margin: 20px 20px 0 20px; padding: 20px; }
  .box-learning--wordofday ul li{ padding: 15px 0 25px;}

  .learning-search--form{ padding: 0 20px; }
  .divDestination{ padding: 20px;}
  .list-detail-learning--bg h3{ font-size: 13px; line-height: 16px; }
  .box-thumb--highlight{ padding: 10px 0; }
  .box--owl-padding{ padding: 20px 0; }

  .learning--bg-gradient.divBanner{ padding-top: 0; }
  .bx--counter{ right: 0; font-size: 14px; padding: 5px 10px; }
  .bx--caption{ font-size: 20px; padding: 5px 10px; left: 10px; bottom: 10px; width: calc(100% - 20px); }

  .div-learning--article-3box article{ padding:0 20px; }
  .div-yourself--content::before{ width: 180px; height: 147px; }
  .box-yourself--text{ transform: translateY(-50%); }
  .div-yourself--content{ height: 420px; }

  .div-vocab--content{ padding: 20px; }
  .box-interschool--content{ padding: 20px; }
  .box-course--detail .box-for-hsubsec{ margin: 0; }

  .list-detail--overlay h5{ font-size: 18px; }
  .icn--play{ width: 50px; }
  .hover--vdo::after{ width: 50px; height: 50px; }

  .learning--bg-gradient.box-search--word{ padding: 30px 20px; }
  .learning--bg-gradient.box-search--word h2{ font-size: 20px; margin-bottom: 15px; }
  .learning--bg-gradient.box-search--word h3{ font-size: 20px; }
  .learning--bg-gradient.box-search--word .learning-search--form{ padding: 0; }

  .boxword--relate{ margin: 0 20px; }
  .box-word--vocabulary h2{ font-size: 30px; line-height: 40px; }

  .mglr-20{ margin-left: 20px; margin-right: 20px; }

}
@media (max-width: 360px){

  .word-alphabet ul li{ padding: 4px 2px; }

}



/**********************************************************/
/********************** all hack **************************/
/**********************************************************/

.div-slide--destination.owl-carousel .owl-item:before{ content: ''; position: absolute; width: 1px; height: 100%; width: 1px; height: 100%; background-color: #ddd; left: -20px; }

.splide--nav>.splide__track>.splide__list>.splide__slide{ border: 0; cursor: pointer; }
.splide--nav>.splide__track>.splide__list>.splide__slide::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } 
.splide--nav>.splide__track>.splide__list>.splide__slide span{ font-family: 'Lato', sans-serif; font-size: 20px; line-height: 24px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 90%; }
.splide--nav>.splide__track>.splide__list>.splide__slide:hover::before{ background-color: rgba(0,0,0,0.5); } 
.splide--nav>.splide__track>.splide__list>.splide__slide.is-active::before{ display: none; }
.splide--nav>.splide__track>.splide__list>.splide__slide.is-active span{ display: none; }

.splide--fade>.splide__track>.splide__list>.splide__slide div{ position: absolute; width: 100%; height: 100%; text-align: center; top: 0; left: 0; }
.splide--fade>.splide__track>.splide__list>.splide__slide div a{ position: absolute; width: 100%; height: 100%; left: 0; top:0; right: 0; bottom: 0; }
.splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-family: 'Roboto', sans-serif; font-size: 40px; color: #fff; font-weight: 400; position: absolute; width: 90%; left: 50%; top: 75%; transform: translateX(-50%); }
.splide--fade>.splide__track>.splide__list>.splide__slide div h3 span{ display: block; font-family: 'Lato', sans-serif; font-size: 20px; color: #fff; font-weight: 400; }
.splide--fade>.splide__track>.splide__list>.splide__slide div a:hover h3{ text-decoration: underline; }
.splide--fade>.splide__track>.splide__list>.splide__slide div a:hover h3 span{ text-decoration: none; }
.splide--fade>.splide__track>.splide__list>.splide__slide::before{
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 67%, rgba(0,0,0,0.7) 100%);
  content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
}
.learning-article--gallery .splide--fade>.splide__track>.splide__list>.splide__slide::before{
  display: none;
}
.splide--fade>.splide__track >.splide__list >.splide__slide.is-active{ background-position: center top !important; }

.splide--nav>.splide__track>.splide__list>.splide__slide.sponsored--highlight::after{ content: 'SPONSORED'; position: absolute; top:0; left: 0; font-size: 10px; color: #fff; padding: 3px 5px; background-color: rgba(0,0,0,0.6); } 
.splide--fade>.splide__track>.splide__list>.splide__slide.sponsored--highlight::after{ content: 'SPONSORED'; position: absolute; top:0; left: 0; font-size: 14px; color: #fff; padding: 3px 5px; background-color: rgba(0,0,0,0.6); } 


.learning-article--gallery{ max-width: 626px; width: 100%; margin: 20px auto; }

.div-learning--banner .bx-wrapper .bx-pager{ bottom: -25px; display: none; }
.div-learning--banner .bx-wrapper .bx-controls-direction a{ width: 25px; height: 43px; margin-top: -22px; }
.div-learning--banner .bx-wrapper .bx-next{ background: url('../images/learning/icon/arrow-next.svg') 0 0 no-repeat; background-size: cover; right: -45px; }
.div-learning--banner .bx-wrapper .bx-prev{ background: url('../images/learning/icon/arrow-prev.svg') 0 0 no-repeat; background-size: cover; left: -45px; }
.div-learning--banner .bx-wrapper .bx-pager.bx-default-pager a{ background: #fff; width: 10px; height: 10px; }
.div-learning--banner .bx-wrapper .bx-pager.bx-default-pager a.active, 
.div-learning--banner .bx-wrapper .bx-pager.bx-default-pager a:focus, 
.div-learning--banner .bx-wrapper .bx-pager.bx-default-pager a:hover{ background: #D96228; }



.div-model--vocab .modal-content{ background-color: #FCEEE8; border-radius: 0; border: 0; }
.div-model--vocab .modal-header{ border: 0; border-top: 12px solid #FD6404; border-radius: 0; }
.div-model--vocab .modal-footer{ border: 0; padding-right: 50px; }
.div-model--vocab .modal-footer a{ font-family: 'Lato', sans-serif; font-size: 15px; line-height: 20px; color: #FD6404; font-weight: 700; text-transform: uppercase; }

.vocab--close{ position: absolute; top: -18px; right: -18px; padding: 0; cursor: pointer; }
.div-model--detail{ width: 80%; margin: 0 auto; }
.div-model--detail h5{ font-family: 'Lato', sans-serif; font-size: 20px; line-height: 26px; color: #FD6404; font-weight: 700; margin-bottom: 15px; }
.div-model--detail .txt--vocub{ font-family: 'Lato', sans-serif; font-size: 20px; line-height: 26px; font-weight: 400; padding-bottom: 15px; }
.div-model--detail .txt--vocub strong{ font-weight: 700; }



.item-bx--content{ height: 400px; background-color: #FCEEE8; }
.box-bx--detail{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 70%; }
.box-bx--detail h2{ font-size: 40px; line-height: 50px; color: #FD6404; padding-bottom: 40px; text-transform: uppercase; }
.box-bx--detail h2 span{ display: block; padding-top: 20px; font-family: 'Lato', sans-serif; font-size: 18px; line-height: 26px; color: #333; font-weight: 400; text-transform: none; }
.box-bx--detail h2 a{ color: #FD6404; }
.box-bx--detail p{ max-width: 500px; width: 100%; margin: 0 auto; font-size: 18px; line-height: 28px; color: #121212; }
.box-bx--detail p a{ color: #FD6404; }
.box-bx--detail h2 a:hover,
.box-bx--detail p a:hover{ text-decoration: underline; }
.box-word--today{ padding-top: 30px; padding-bottom: 60px; }
.box-word--today .bx-wrapper .bx-controls-direction a{ width: 24px; height: 42px; margin-top: -21px; z-index: 90; }
.box-word--today .bx-wrapper .bx-next{ background-image: url('../images/learning/icon/arrow-next2.svg'); background-size: cover; background-position: 0 0; background-repeat: no-repeat; }
.box-word--today .bx-wrapper .bx-prev{ background-image: url('../images/learning/icon/arrow-prev2.svg'); background-size: cover; background-position: 0 0; background-repeat: no-repeat; }
.box-word--today .bx-wrapper .bx-pager{ bottom: -20px; }
.box-word--today .bx-wrapper .bx-pager.bx-default-pager a{ background: #E7E8E7; }
.box-word--today .bx-wrapper .bx-pager.bx-default-pager a.active, 
.box-word--today .bx-wrapper .bx-pager.bx-default-pager a:focus, 
.box-word--today .bx-wrapper .bx-pager.bx-default-pager a:hover{ background: #FD6404; }

.learning--sponsorlink{ padding: 20px 0; }
.learning-list-h { overflow: hidden; padding-top: 20px; }
.learning-list-h figure { width: 50%; float: left; }
.learning-list-h .list-detail { width: 50%; padding-left: 15px; float: left; margin: 0; }



@media (max-width: 1199px){

  .owl-destination.owl-carousel .owl-stage{ left: -50px; }
  .owl-destination.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }

  .splide--nav>.splide__track>.splide__list>.splide__slide span{ font-size: 16px; line-height: 20px;}

  .div-learning--banner .bx-wrapper .bx-next{ right: -35px; }
  .div-learning--banner .bx-wrapper .bx-prev{ left: -35px; }

}
@media (max-width: 991px){

  .splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 30px; }
  .splide--fade>.splide__track>.splide__list>.splide__slide div span{  font-size: 16px; }

  .div-learning--banner .bx-wrapper .bx-controls.bx-has-controls-direction .bx-controls-direction{ display: none; }
  .div-learning--banner .bx-wrapper .bx-pager{ bottom: -25px; display: block; }

}
@media (max-width: 767px){

  .owl-course.owl-carousel .owl-stage{ left: -30px; }
  .owl-course.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -30px!important; }

  .owl-workshop.owl-carousel .owl-stage{ left: -50px; }
  .owl-workshop.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }

  .owl-scholarship.owl-carousel .owl-stage{ left: -50px; }  
  .owl-scholarship.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }

  .splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 26px; }
  .splide--fade>.splide__track>.splide__list>.splide__slide div h3 span{ display: none;}

}
@media (max-width: 576px){

  .splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 20px; }
  .splide--fade>.splide__track>.splide__list>.splide__slide div span{  font-size: 14px; }
  .splide--nav>.splide__track>.splide__list>.splide__slide span{ font-size: 11px; line-height: 15px; }

  .owl-workshop.owl-carousel .owl-stage{ left: -10px; }
  .owl-workshop.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }

  .owl-scholarship.owl-carousel .owl-stage{ left: -10px; }  
  .owl-scholarship.owl-carousel .owl-stage.pos-right{ left: inherit!important; right: -50px!important; }

  .vocab--close{ right: -7px; }
  .box-bx--detail{ width: 90%; }
  .box-bx--detail h2{ font-size: 30px; line-height: 40px; padding-bottom: 20px; }
  .box-bx--detail h2 span{ padding-top: 10px; }
  .box-bx--detail p{ font-size: 16px; line-height: 26px; }

  .learning-list-h { padding: 10px 20px; }
  .learning-list-h figure { width: 40%; }
  .learning-list-h .list-detail { width: 60%; }
  .learning-list-h .list-detail h3{ padding: 0; font-size: 16px; line-height: 22px; }
  .div-learning--article-3box ul li:first-of-type .list-detail--overlay h5{ font-size: 16px; line-height: 22px; }

}
@media (max-width: 355px){

  .splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 18px; }
  .splide--fade>.splide__track>.splide__list>.splide__slide div span{  font-size: 13px; }

}



@media (min-width: 991px) {

  .owl-course .owl-item{
    width: 50% !important;
    position: relative;
    float: left;
  }
  .owl-course .owl-item:nth-child(1){
    width: 100% !important;
  }
  .owl-course .owl-item:nth-child(2){ padding-right: 15px; }
  .owl-course .owl-item:nth-child(3){ padding-left: 15px; }

}





/**********************************************************/
/**********************************************************/
/**********************************************************/



/*
  1. Base
*/
/*
  2. Components
*/
div.control-container {
  margin-top: 10px;
  padding-bottom: 10px; }
  div.control-container div.amplitude-play-pause {
    width: 44px;
    height: 44px;
    cursor: pointer;
    float: left;
    margin-left: 10px; }
  div.control-container div.amplitude-play-pause.amplitude-paused {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/single-song/play.svg");
    background-size: cover; }
  div.control-container div.amplitude-play-pause.amplitude-playing {
    background: url("https://521dimensions.com/img/open-source/amplitudejs/examples/single-song/pause.svg");
    background-size: cover; }
  div.control-container div.meta-container {
    float: left;
    width: calc(100% - 54px);
    text-align: center;
    color: white;
    margin-top: 10px; }
    div.control-container div.meta-container span[data-amplitude-song-info="name"] {
      font-family: "Open Sans", sans-serif;
      font-size: 16px;
      color: #fff;
      display: block; }
    div.control-container div.meta-container span[data-amplitude-song-info="artist"] {
      font-family: "Open Sans", sans-serif;
      font-weight: 100;
      font-size: 14px;
      color: #fff;
      display: block; }
  div.control-container:after {
    content: "";
    display: table;
    clear: both; }

/*
  Small only
*/
@media screen and (max-width: 39.9375em) {
  div.control-container div.amplitude-play-pause {
    background-size: cover;
    width: 34px;
    height: 34px; }
  div.control-container div.meta-container {
    width: calc(100% - 44px); margin-top: 5px;
  } 
  div.control-container div.meta-container span[data-amplitude-song-info="name"]{
    font-size: 14px;
  }
}
/*
  Medium only
*/
/*
  Large Only
*/
div.time-container {
  opacity: 0.5;
  font-family: 'Open Sans';
  font-weight: 100;
  font-size: 12px;
  color: #fff;
  height: 15px; }
  div.time-container span.current-time {
    float: left;
    margin-left: 5px; }
  div.time-container span.duration {
    float: right;
    margin-right: 5px; }

/*
  Small only
*/
/*
  Medium only
*/
/*
  Large Only
*/
progress.amplitude-song-played-progress {
  background-color: #313252;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  display: block;
  cursor: pointer;
  border: none; }
  progress.amplitude-song-played-progress:not([value]) {
    background-color: #313252; }

progress[value]::-webkit-progress-bar {
  background-color: #313252; }

progress[value]::-moz-progress-bar {
  background-color: #00a0ff; }

progress[value]::-webkit-progress-value {
  background-color: #00a0ff; }

/*
  Small only
*/
/*
  Medium only
*/
/*
  Large Only
*/
/*
  3. Layout
*/
div.bottom-container {
  background-color: #202136;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; }

/*
  Small only
*/
/*
  Medium only
*/
/*
  Large Only
*/
div#single-song-player {
  border-radius: 10px;
  margin: auto;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 50px;
  width: 100%;
  max-width: 630px;
  -webkit-font-smoothing: antialiased; }
  div#single-song-player img[data-amplitude-song-info="cover_art_url"] {
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px; }

a.learn-more{
  display: block;
  width: 300px;
  margin: auto;
  margin-top: 30px;
  text-align: center;
  color: white;
  text-decoration: none;
  background-color: #202136;
  font-family: "Lato", sans-serif;
  padding: 20px;
  font-weight: 100;
}
/*
  Small only
*/
/*
  Medium only
*/
/*
  Large Only
*/
/*
  4. Pages
*/
/*
  5. Themes
*/
/*
  6. Utils
*/
/*
  7. Vendors
*/

/*# sourceMappingURL=app.css.map */