@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');



:root{

  --learning: #EC5F3A;

  --filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
  --filter-learning: invert(67%) sepia(48%) saturate(6676%) hue-rotate(336deg) brightness(94%) contrast(97%);

}




/* .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: var(--learning); }
.section-learning a:hover{ color: var(--learning); }
.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: var(--learning); } */
/* .section-learning .article-news a{ color: var(--learning); } */
.section-learning .box-share a:hover{ background-color: var(--learning); color: #fff; border-color: var(--learning); }
.section-learning .box-share li.comment-icon a:hover{ color: var(--learning); }
.section-learning a.btn-default, 
.section-learning .article-btn-comment a{ background-color: var(--learning); color: #fff; border:1px solid var(--learning); }
.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: var(--learning); color: var(--learning); }
.section-learning .box-like_unlike .f-comment a{ color: #999; }
.section-learning .box-like_unlike .f-comment span a:hover{ color: var(--learning); }
.section-learning .btn-loadmore{ color: var(--learning); border: 1px solid var(--learning); }
.section-learning .btn-loadmore:hover{ background-color: var(--learning); color: #fff; border-color: var(--learning); }

.section-learning .article-news a.link-vocab{ color: var(--learning); 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: var(--learning); } */
.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: var(--learning); }


.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: var(--learning); }

.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: var(--learning); color: #fff; border:1px solid var(--learning); }
.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: var(--learning); color: var(--learning); }
.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: var(--learning); 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 a{ margin-left: 0; }
.section-nav-learning .section-nav ul li:last-child a{ margin-right: 0; }
.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 ul{ max-width: 100%; }
  .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; } */
  .section-nav-learning .section-nav ul li{ margin: 0 7px; }

}
@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: var(--learning); }
.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: var(--learning); 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: var(--learning); }
.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 var(--learning); 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{ position: relative; z-index: 9; }
.div-learning-listdetail article{ padding-bottom: 30px; }

.list--detail{ background-color: #EDF5FF;}
.list--detail .list-detail-mt{ border-left: 5px solid var(--learning); 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: var(--learning); 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: var(--learning); border-color: var(--learning); }
.word-alphabet ul li.active a{ background-color: var(--learning); color: #fff; border-color: var(--learning); }

.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: var(--learning); 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: var(--learning); 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: var(--learning); 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; }

.box-thumb--highlight.splide--nav>.splide__track>.splide__list>.splide__slide{ border: 0; cursor: pointer; }
.box-thumb--highlight.splide--nav>.splide__track>.splide__list>.splide__slide::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } 
.box-thumb--highlight.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%; }
.box-thumb--highlight.splide--nav>.splide__track>.splide__list>.splide__slide:hover::before{ background-color: rgba(0,0,0,0.5); } 
.box-thumb--highlight.splide--nav>.splide__track>.splide__list>.splide__slide.is-active::before{ display: none; }
.box-thumb--highlight.splide--nav>.splide__track>.splide__list>.splide__slide.is-active span{ display: none; }

#primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div{ position: absolute; width: 100%; height: 100%; text-align: center; top: 0; left: 0; }
#primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div a{ position: absolute; width: 100%; height: 100%; left: 0; top:0; right: 0; bottom: 0; }
#primary-slider.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%); }
#primary-slider.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; }
#primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div a:hover h3{ text-decoration: underline; }
#primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div a:hover h3 span{ text-decoration: none; }
#primary-slider.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 #primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide::before{
  display: none;
}
#primary-slider.splide--fade>.splide__track >.splide__list >.splide__slide.is-active{ background-position: center top !important; }

.box-thumb--highlight.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); } 
#primary-slider.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 var(--learning); 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: var(--learning); 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: var(--learning); 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: var(--learning); 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: var(--learning); }
.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: var(--learning); }
.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: var(--learning); }

.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; }

  .box-thumb--highlight.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){

  #primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 30px; }
  #primary-slider.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; }

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

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

  #primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 20px; }
  #primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div span{  font-size: 14px; }
  .box-thumb--highlight.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){

  #primary-slider.splide--fade>.splide__track>.splide__list>.splide__slide div h3{ font-size: 18px; }
  #primary-slider.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 */


a.popular-right-link{ color: #121212 !important; font-weight: bold; }
a.popular-right-link:hover{ color: var(--learning) !important; }







/**********************************************************/
/********************* flashcard **************************/
/**********************************************************/

.ads-flashcards{ height: 100%; padding: 0; }

.learning-flashapp{ background-color: #FBFCFE; }
.learning-flashapp .ads.adstop{ background-color: #CDDAF4; }
.learning--header{ font-size: 42px; font-weight: 500; color: var(--learning); text-align: center; margin-bottom: 20px; }
.learning--header a{ color: var(--learning); }
.learning--header a:hover{ color: #000; }

.learning--titlebar{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--learning); padding-bottom: 10px; margin-bottom: 40px; }
.learning--titlebar h2{ font-size: 36px; font-weight: 500; color: var(--learning); }
.learning--titlebar .viewmore-arrow{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--learning); }
.learning--titlebar .viewmore-arrow img{ filter: var(--filter-learning); }
.learning--titlebar .viewmore-arrow:hover{ background-color: var(--learning); }
.learning--titlebar .viewmore-arrow:hover img{ filter: var(--filter-white); }


.nav--flashcard{ margin-bottom: 40px; }
.nav--flashcard ul{ display: flex; align-items: center; justify-content: center; }
.nav--flashcard ul li{ width: 200px; }
.nav--flashcard ul li a{ display: block; background-color: #fff; font-size: 20px; font-weight: 500; color: var(--learning); text-align: center; border: 2px solid var(--learning); border-right: 0; padding: 10px; }
.nav--flashcard ul li a:hover, .nav--flashcard ul li a.active{ background-color: var(--learning); color: #fff; }
.nav--flashcard ul li:first-child a{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.nav--flashcard ul li:last-child a{ border-right: 2px solid var(--learning); border-top-right-radius: 8px; border-bottom-right-radius: 8px; }


.logospon{ position: absolute; top: 20px; left: 20px;}

.splide__slide.is-next .logospon{ display: none; }

@media (max-width: 992px){

  .learning--header{ font-size: 38px; }
  .learning--titlebar h2{ font-size: 30px; }
  .nav--flashcard ul li a{ font-size: 18px;}

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

  .learning--titlebar{ margin: 0 20px 30px; }
  .learning--header{ font-size: 32px; }
  .learning--titlebar h2{ font-size: 26px; }
  .nav--flashcard ul li{ width: 45%; }

}


.learning--bg-flashcard{ position: relative; }
.learning--bg-flashcard::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 600px; background: transparent linear-gradient(360deg, #FBFCFE 0%, #CDDAF4 100%) 0% 0% no-repeat padding-box; }
.learning--bg-flashcard .div-learning-listdetail article{ margin-bottom: 20px; }

.learning-flashcard--title{ position: relative; z-index: 9; }
.learning-flashcard--title .learning--title h2{ color: #000; margin-bottom: 20px; }
.learning-flashcard--title .box-for-hsubsec{ margin-bottom: 30px; }
.learning-flashcard--title .subscr-head{ display: flex; }
.learning-flashcard--title .subscr-head span{ background-color: transparent; }
.learning-flashcard--title .subscr-head::after{ position: relative; display: inline-block; }

.learning-flashcard--title .line_bottom{ border-bottom: 1px solid var(--learning); }
.title-flashapp{ margin-bottom: 30px; }
.title-flashapp p{ max-width: 600px; margin: 0 auto; font-size: 16px; line-height: 1.56; }


.list--fcard{ position: relative; }
.list--fcard figure img{ border-radius: 5px; box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.15); }
.list--fcard .list--fcard-detail{ position: absolute; bottom: 0; left: 0;  width: 100%; height: 30%; background-color: #fff; padding: 20px; }
.list--fcard .list--fcard-detail .fcard-category{ font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-size: 10px; font-weight: bold; color: var(--learning); margin-bottom: 5px; }
.list--fcard .list--fcard-detail h3{ font-size: 24px; font-weight: bold; }

.list--fcard:hover .list--fcard-detail{ background-color: var(--learning); }
.list--fcard:hover .list--fcard-detail a{ color: #fff !important; }

.hr--line{ border-color: #DFDFDF; }

.div-pagenumber{ display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 30px; }
.div-pagenumber .pagenumber-button{ border: 1px solid var(--learning); background-color: #fff; border-radius: 50%; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;  line-height: 0; }
.div-pagenumber .pagenumber-button a{ color: var(--learning); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }
.div-pagenumber .pagenumber-button.active{ background-color: var(--learning); }
.div-pagenumber .pagenumber-button.active{ color: #fff; }
.div-pagenumber .pagenumber-button a img{ filter: var(--filter-learning); }
.div-pagenumber .pagenumber-button a:hover{ color: #fff; background-color: var(--learning); }
.div-pagenumber .pagenumber-button a:hover img{ filter: var(--filter-white); }

.fcard-recommend{ position: absolute; top: 12px; right: 12px; }
.fcard-recommend img{ width: 35px; }

.link--seemore{ color: #333; text-decoration: underline; text-decoration-style: solid; margin-left: 5px; }
.link--seemore:hover{ color: var(--learning); text-decoration: underline; }


@media (max-width: 1199px){

  .list--fcard .list--fcard-detail{ padding: 20px; }
  .list--fcard .list--fcard-detail h3{ font-size: 18px; }

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

  .learning--bg-flashcard .div-learning-listdetail article{ margin-bottom: 0; padding-left: 15px; padding-right: 15px; }

  .learning-flashcard--title .learning--title{ margin-left: 20px; margin-right: 20px; }
  .learning-flashcard--title .learning--title h2{ margin-bottom: 30px; }

  .list--fcard .list--fcard-detail{ padding: 5px 10px; max-height: 80px; }
  .list--fcard .list--fcard-detail .fcard-category{ font-size: 10px; }
  .list--fcard .list--fcard-detail h3{ font-size: 16px; }

  .hr--line{ margin: 0 20px; }

  .div-learning-listdetail.beginner .list--fcard .list--fcard-detail{ width: 100%; border-radius: 5px; }
  .div-learning-listdetail.beginner .list--fcard .list--fcard-detail h3{ font-size: 14px; }

}




.learning-flashcard--beginner{ position: relative; z-index: 9; padding-top: 50px; }

.fc-beginner--detail{ margin-left: 50px;}
.fc-beginner--detail h1{ font-size: 32px; line-height: 1.4; font-weight: bold; color: #000; margin-bottom: 10px; }
.fc-beginner--detail h3{ font-size: 16px; line-height: 1.4; font-weight: bold; color: #333; margin-bottom: 20px; }
.fc-beginner--detail p{ font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 10px; }

.fc-btn{ max-width: 250px; margin-top: 30px; }
.btn--download{ width: 100%; background-color: var(--learning); border: 1px solid var(--learning); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Lato',Helvetica Neue,Helvetica,sans-serif; font-size: 16px; font-weight: bold; color: #fff; padding: 18px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15); }
.btn--download:hover{ background-color: #fff; border-color: var(--learning); }

.btn--spon img{ max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15); }
.btn--spon:hover img{ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.29); }


.zoomimg, .soundimg{ position: absolute; bottom: 10px; right: 10px; z-index: 55; }
.zoomimg .btnzoom,
.soundimg .btnsound{ background-color: #F2F2F2; border-radius: 5px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.zoomimg .btnzoom:hover{ background-color: #fff; }
.soundimg{ display: flex; gap: 10px; }
.soundimg .btnsound{ width: 50px; height: 50px; }
.soundimg .btnsound img{ width: 35px !important; height: auto !important; filter: var(--filter-learning); }
.zoomimg .btnzoom img{ width: 20px !important; height: auto !important; filter: invert(73%) sepia(0%) saturate(409%) hue-rotate(169deg) brightness(84%) contrast(91%); }


/* .slidemain .splide__list .splide__slide{ aspect-ratio: 5/6; } */
.slidemain .splide__list .splide__slide img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }


.slidethumb{ margin: 1rem auto 0;  }
/* .slidethumb .splide__list{ display: flex; justify-content: center; } */
.slidethumb .splide__slide img{ object-fit: cover; object-position: center; width: 100%; height: auto; }

.slidethumb .splide__track--nav>.splide__list>.splide__slide{ opacity: 0.3; margin: 0 0.2rem; border: 0; border-radius: 5px; overflow: hidden; }
.slidethumb .splide__track--nav>.splide__list>.splide__slide.is-active{ border: 0; opacity: 1; }

.fc-beginner--img .splide__arrow{ background: #F2F2F2; opacity: 0.8; width: 47px; height: 47px; border-radius: 50%; }
.fc-beginner--img .splide__arrow.splide__arrow--prev{ left: 10px; }
.fc-beginner--img .splide__arrow.splide__arrow--next{ right: 10px; }

.fc-beginner--img .splide__arrow svg{ fill: #333; }







.modal--flashcard{ max-width: 1200px; width: 90%; }
.modal--flashcard .modal-body{ padding: 30px; }
.modal--flashcard-detail{ max-width: 600px; width: 100%; margin: 0 auto; }
.closex{ opacity: 1; position: absolute; right: 20px; top: 30px; z-index: 6; }
.closex:hover{ opacity: 0.6; }


.boxbtn-nextprev{ margin-top: 50px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 20px; }
.boxbtn-nextprev .btn_arrow{ background-color: #F6F5F4; color: #2F261E; width: 100px; border-radius: 8px; border: 2px solid #D0CBC6; font-size: 14px; }
.boxbtn-nextprev .btn_arrow:hover{ background-color: #ddd; }
.boxbtn-pagination{ font-family: 'Lato', sans-serif; font-size: 12px; color: #2F261E; }


#main-carousel .soundimg{ right: auto; left: 10px; }
#thumbnail-carousel{ display: none; }


#main-carousel .splide__track .splide__slide{ padding-bottom: 50px; }
#main-carousel .soundimg{ bottom: 0; }
#main-carousel .zoomimg{ bottom: 60px; }
#main-carousel .soundimg .btnsound{ background-color: transparent; width: 40px; height: 40px; }
#main-carousel .soundimg .btnsound img{ width: 40px !important; }



@media (max-width: 1199px){

  .fc-beginner--detail{ margin-left: 30px; }

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


  .modal--flashcard .modal-body{ padding: 20px; }
  .closex{ top: 20px; right: 10px; }

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

  #thumbnail-carousel{ display: block; }
  #main-carousel .zoomimg{ display: none; }
  /* #main-carousel .soundimg{ display: block; } */

  .fc-beginner--detail{ margin-left: 0; margin-top: 30px; }

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

  .fc-beginner--detail{ padding: 0 20px; }
  .fc-beginner--img .splide__arrow svg{ width: 1em; height: 1em; }
  .fc-beginner--img .splide__arrow,
  .zoomimg .btnzoom,
  .soundimg .btnsound{ width: 35px; height: 35px; }

  .modal--flashcard{ width: auto; }
  /* .modal--flashcard-detail{ width: 95%; } */
  .zoomimg, .soundimg { bottom: 10px; right: 10px; }
  .zoomimg .btnzoom img{ width: 18px; }
  .soundimg .btnsound img{ width: 50px !important; height: auto !important; }
  .closex{ top: 10px; right: 5px; }
  .closex img{ width: 20px; }


}



.boxnav-intermediate{ margin-bottom: 50px; }
.boxnav-intermediate ul{ display: flex; }
.boxnav-intermediate ul li{ margin-right: 20px; }
.boxnav-intermediate ul li a{ font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 900; color: #000; }
.boxnav-intermediate ul li a.active, .boxnav-intermediate ul li a:hover{ color: #5B8DF7; }



.txt-000{ color: #000 !important; }
.div-learning-flashapp{ position: relative; z-index: 9; padding: 50px 0; }
.fc-btn--intermediate{ display: flex; gap: 20px; justify-content: center; align-items: center; flex-flow: row wrap; }
.fc-btn--intermediate a{ width: 250px; }

.icn--flip{ position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #F2F2F2; border-radius: 50%; }
.icn--flip img{ filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(100%) contrast(100%); }

.splide__slide.is-prev .icn--flip{ display: none; }

@media (max-width: 576px){

  .div-learning-flashapp{ padding: 50px 20px; }

}


.flashcard-app{ max-width: 900px; margin: 0 auto; }
.flashcard-app .cards {
  /* height: calc(304px - 60px); margin: 30px -40px;  */
  height: 350px; transform: scale(0.8); margin: 10px 0px;
  border-radius: 5px; 
  display: flex; 
  transition: opacity 0.3s, transform 0.3s, z-index 0.3s;
  /* transition: all 0.3s ease; */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  perspective: 1000px;
}
.flashcard-app .cards.flipped .faces {
  transform: rotateY(180deg);
}
/* .flashcard-app .cards.unflip .faces {
  transform: rotateY(0deg);
} */

.flashcard-app .cards .faces {
  flex: 1;
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flashcard-app .cards .front,
.flashcard-app .cards .back {
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.19);
  border-radius: 5px;
  position: absolute;
  top: 0; 
  transition: top 0.1s ease-in, box-shadow 0.1s;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flashcard-app .cards .inner-border {
  flex: 1;
  padding: 10px;
  display: flex; align-items: center; flex-direction: column;
  justify-content: center;
  border: 2px solid var(--learning);
  border-radius: 5px;
  position: relative;
  text-align: center;
  line-height: 1.2em;
  word-break: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.flashcard-app .cards .word {
  color: #545454;
  font-family: 'Roboto', sans-serif;
  font-size: 30px; line-height: 1.3;
  font-weight: bold;
  margin-bottom: 15px;
}
.flashcard-app .cards .variants .ipa-variant{ display: flex; gap: 10px; justify-content: center; }
/* .flashcard-app .cards .variants .audios .btnsound{ position: relative; } */
.flashcard-app .cards .variants .audios img{
  width: 18px; height: 16px; filter: invert(46%) sepia(79%) saturate(606%) hue-rotate(337deg) brightness(96%) contrast(92%);
}
.flashcard-app .cards .variants .ipas{ font-family: 'Roboto', sans-serif; color: #979898; }

.flashcard-app .cards .back {
  font-size: 14px; color: #707070;
  transform: rotateY(180deg); 
}
.flashcard-app .cards .back .pos-def {
  text-align: center; padding: 20px; font-size: 18px; line-height: 1.4;
}
.flashcard-app .cards .back .pos {
  color: #EB6E2E;
}
.flashcard-app .cards .img-definition {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  justify-content: center;
}
.flashcard-app .cards .pos-def .translate {
  display: block; color: #EB6E2E; padding: 5px;
}

/* .flashcard-app .cards.flipped .front{ z-index: 0; }
.flashcard-app .cards.flipped .back{ z-index: 101; background-color: #eee; } */


/* .flashcard-app .splide__slide.is-active{ width: 70% !important; } */
.flashcard-app .splide__slide.is-active .cards{ 
  /* height: 304px; margin-top: 0; */ 
  position: relative; transform: scale(1); margin: 10px auto; z-index: 9;
}
.flashcard-app .splide__arrow{ height: 100%; border-radius: 0; width: 120px; opacity: 0; }
.flashcard-app .splide__arrow--next{ right: 0; }
.flashcard-app .splide__arrow--prev{ left: 0; }
.flashcard-app .splide__arrow:hover:not(:disabled){ opacity: 0; }



.show--pc{ display: block; }
.show--mobi{ display: none; }


@media (max-width: 767px){

  .show--pc, .notshow--mobi{ display: none; }
  .show--mobi{ display: block; }

}


/* new share */
.box--share{ margin-top: 20px; }
.box--share li{ position: relative; text-align: center; margin: 0 0 10px; }
.box--share label{ font-family: Arial,Helvetica Neue,Helvetica,sans-serif; line-height: 12px; margin: 0; }
.box--share ul li a{ width: 40px; height: 40px; margin: 0 auto; border: 1px solid var(--learning); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--learning); }
.box--share ul li a i{ line-height: 0; }
.box--share ul li a img{ filter: var(--filter-learning); }
/* .box--share ul li a.share-fb img{ width: 10px; } */
.box--share ul li a.share-reddit img{ width: 20px; }
.box--share ul li a.share-link img{ width: 18px; }
.box--share ul li a:hover{ background-color: var(--learning); color: var(--learning); border-color: var(--learning); }
.box--share ul li a:hover img{ filter: var(--filter-white); }



.flashcard--vertical .modal--flashcard-detail .flashcardimg{ aspect-ratio: 3/4; height: 75vh; margin: 0 auto; }

/* iPads (portrait) Styling */
@media handheld, all and  (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) {
  /* Add your styling here */
  .flashcard--vertical .modal--flashcard-detail .flashcardimg{ aspect-ratio: auto; height: auto; }
}

/* iPads (landscape) Styling */
@media handheld, all and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) {
  /* Add your styling here */
}

/* iPads Air (portrait) Styling */
@media handheld, all and  (device-width: 820px) and (device-height: 1180px) and (orientation : portrait) {
  /* Add your styling here */
  .flashcard--vertical .modal--flashcard-detail .flashcardimg{ aspect-ratio: auto; height: auto; }

}

/* iPads Pro (portrait) Styling */
@media handheld, all and  (device-width: 1024px) and (device-height: 1366px) and (orientation : portrait) {
  /* Add your styling here */
  .flashcard--vertical .modal--flashcard-detail .flashcardimg{ aspect-ratio: auto; height: auto; }
}

@media (max-width: 767px){

  .flashcard--vertical .modal--flashcard-detail .flashcardimg{ aspect-ratio: auto; height: auto; }

}



/* MODAL STYLES
-------------------------------*/
.jw-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, .75);
  padding: 40px;
  overflow: auto;
}
.jw-modal.open {
  display: block;
}
.jw-modal-body {
  background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 90%;
}
body.jw-modal-open {
  overflow: hidden;
}
 
@media (max-width: 767px){

  .jw-modal{ padding: 25px; }
  .jw-modal-body { position: relative; top: auto; left: auto; transform: translate(0,0); width: 100%; }

}





/* sponsor
-------------------------------*/
:root{
  --spon-sponsor: #707070;
  --spon-nestle: #615240;
  --spon-adchariya: #7910FF;
  --spon-tell_score: #cf00ff; 
  --spon-museum_siam: #7a222e; 
}

.flashapp--sponsor .div-learning-flashapp{  background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; padding: 100px 0; }
.flashapp--sponsor .div-learning-flashapp::after{ content: ''; position: absolute; left: 0; bottom: 0; background: transparent linear-gradient(180deg, #3F3B1DBF 0%, #7E7C6800 100%) 0% 0% no-repeat padding-box; transform: matrix(-1, 0, 0, -1, 0, 0); width: 100%; height: 400px; }
.flashapp--sponsor .div-learning-flashapp::before{ content: ''; position: absolute; left: 0; top: 0; background: transparent linear-gradient(180deg, #3F3B1DBF 0%, #7E7C6800 100%) 0% 0% no-repeat padding-box;  width: 100%; height: 400px; }

.flashapp--sponsor .learning--bg-flashcard .learning--titlebar h2{ color: var(--spon-sponsor); }

.flashapp--sponsor .container{ position: relative; z-index: 9; }
.flashapp--sponsor .div-learning-flashapp .learning--title h2,
.flashapp--sponsor .div-learning-flashapp .learning--title p{ color: #fff; }

.flashapp--sponsor .boxbtn-pagination{ color: #fff; }



@media (max-width: 576px){

  .flashapp--sponsor .div-learning-flashapp{ padding: 50px 20px; }

}


/* nestle */
.spon--nestle .div-learning-flashapp{ background-image: url('../images/learning/flashcard/sponsor/nestle/bg.webp'); }

.spon--nestle .learning--bg-flashcard .learning--titlebar h2{ color: var(--spon-nestle); }
.spon--nestle .flashcard-app .cards .inner-border{ border-color: #D0CBC6; }

.spon--nestle .btn--download{ background-color: #71A433; border-color: #71A433; }
.spon--nestle .btn--download:hover{ background-color: #fff; color: #71A433; }

.spon--nestle .box--share ul li a{ border-color: var(--spon-nestle); color: var(--spon-nestle); }
.spon--nestle .box--share ul li a img{ filter: invert(29%) sepia(31%) saturate(368%) hue-rotate(353deg) brightness(99%) contrast(90%); }
.spon--nestle .box--share ul li a:hover{ background-color: var(--spon-nestle); }
.spon--nestle .box--share ul li a:hover img{ filter: var(--filter-white); }


/* adchariya */
.spon--adchariya .div-learning-flashapp{ background-image: url('../images/learning/flashcard/sponsor/adchariya/bg.jpg'); }

.spon--adchariya .learning--bg-flashcard .learning--titlebar h2{ color: var(--spon-adchariya); }
.spon--adchariya .flashcard-app .cards .inner-border{ border-color: #fd20ca; border-image: linear-gradient(270deg,#7910FF,#fd20ca) 1; }

.spon--adchariya .btn--download{ background-color: #fd20ca; border-color: #fd20ca; }
.spon--adchariya .btn--download:hover{ background-color: #fff; color: #fd20ca; }

.spon--adchariya .box--share ul li a{ border-color: var(--spon-adchariya); color: var(--spon-adchariya); }
.spon--adchariya .box--share ul li a img{ filter: invert(24%) sepia(71%) saturate(7161%) hue-rotate(264deg) brightness(91%) contrast(124%); }
.spon--adchariya .box--share ul li a:hover{ background-color: var(--spon-adchariya); }
.spon--adchariya .box--share ul li a:hover img{ filter: var(--filter-white); }


/* tell_score */
.spon--tell_score .div-learning-flashapp{ background-image: url('../images/learning/flashcard/sponsor/tell_score/bg.jpg'); }

.spon--tell_score .learning--bg-flashcard .learning--titlebar h2{ color: var(--spon-tell_score); }
.spon--tell_score .flashcard-app .cards .inner-border{ border-color: #92ddff; border-image: linear-gradient(270deg,#d846dd,#a792ed 50%,#92ddff) 1; } 

.spon--tell_score .btn--download{ background-color: #3e65ff; border-color: #3e65ff; }
.spon--tell_score .btn--download:hover{ background-image: none; background-color: #fff; color: #3e65ff; }

.spon--tell_score .box--share ul li a{ border-color: var(--spon-tell_score); color: var(--spon-tell_score); }
.spon--tell_score .box--share ul li a img{ filter: invert(26%) sepia(84%) saturate(7436%) hue-rotate(281deg) brightness(104%) contrast(131%); }
.spon--tell_score .box--share ul li a:hover{ background-color: var(--spon-tell_score); }
.spon--tell_score .box--share ul li a:hover img{ filter: var(--filter-white); }



/* museum_siam */
.spon--museum_siam .div-learning-flashapp{ background-image: url('../images/learning/flashcard/sponsor/museum_siam/bg.jpg'); }

.spon--museum_siam .learning--bg-flashcard .learning--titlebar h2{ color: var(--spon-museum_siam); }
.spon--museum_siam .flashcard-app .cards .inner-border{ border-color: var(--spon-museum_siam); } 

.spon--museum_siam .btn--download{ background-color: #EC1C24; border-color: #EC1C24; }
.spon--museum_siam .btn--download:hover{ background-image: none; background-color: #fff; color: #EC1C24; }

.spon--museum_siam .box--share ul li a{ border-color: var(--spon-museum_siam); color: var(--spon-museum_siam); }
.spon--museum_siam .box--share ul li a img{ filter: invert(14%) sepia(83%) saturate(1784%) hue-rotate(329deg) brightness(94%) contrast(91%); }
.spon--museum_siam .box--share ul li a:hover{ background-color: var(--spon-museum_siam); }
.spon--museum_siam .box--share ul li a:hover img{ filter: var(--filter-white); }




.learning--header-intro{ max-width: 780px; width: 90%; margin: 0 auto 50px; text-align: center; }
.learning--header-intro h3{ font-size: 22px; line-height: 1.3; font-weight: bold; margin-bottom: 20px; }
.learning--header-intro p{ font-family: 'Roboto', Georgia,Times,Times New Roman,serif; font-size: 14px; line-height: 1.5; }

@media (max-width: 576px){

  .learning--header-intro h3{ font-size: 17px; margin-bottom: 10px; }
  .learning--header-intro p{ font-size: 13px; }

}

.learning-flashcard--title .learning--header{ font-weight: bold; }





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

.update-news--topic{ position: fixed; bottom: 60px; right: 20px; color: #fff; z-index: 10001; border-radius: 10px;  width: 120px; height: 108px; display: flex; align-items: flex-end; justify-content: center; }
.update--btnclose{ position: absolute; top: -5px; right: 5px; line-height: 0; background-color: #eee; border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
.update--btnclose img{ width: 10px; }
.update--imgnoti{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  display: block;
  background: url('https://static.bangkokpost.com/v3/assets/images/alert_popup/noti_flashcard.png') no-repeat center center;
  background-size: cover; 
  pointer-events: auto;
}

#draggable-mobile{ display: none; }
#draggable-pc{ display: block; }

@media (max-width: 767px) {

  #draggable-mobile{ display: block; }
  #draggable-pc{ display: none; }

  .update-news--topic{ bottom: 110px; right: 10px; border-radius: 8px; width: 100px; height: 90px; }

}


/* edit taboola */
@media screen and (max-width: 480px){
  #taboola-below-homepage-thumbnails[data-feed-main-container-id="taboola-below-homepage-thumbnails"].tbl-feed-full-width{
    margin: 0 !important; padding: 0 !important;
  }
  #taboola-below-article-widget-mobile[data-feed-main-container-id="taboola-below-article-widget-mobile"].tbl-feed-full-width{
    margin: 0 !important;
  }
}
.trc_related_container.tbl_rr_pre_roll_hidden{ width: auto !important; }


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

.section--bg-flashcard{ background-color: var(--learning); }
.section--bg-flashcard .subscr-head span{ background-color: var(--learning); color: #fff; }
.section--bg-flashcard .subscr-head::after{ background-color: #fff; }
.section--bg-flashcard .box-for-hsubsec a{ color: #fff; }
.section--bg-flashcard .icon-more{ filter: var(--filter-white); }
.section--bg-flashcard .box-for-hsubsec a:hover{ color: #000; }
.section--bg-flashcard .box-for-hsubsec a:hover .icon-more{ filter: none; background-image: url(../images/icon/arrow_more.svg); }

.flashcard--slide{ margin-top: 20px;}
.flashcard--slide .owl-carousel .owl-stage{display: flex;}
.flashcard--slide .owl-carousel .item{
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.flashcard--slide .owl-carousel .item .list--fcard{
    position: relative;
    overflow: hidden;
    /* margin-bottom: 80px; *//*This is optional*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.flashcard--slide .list--fcard .list--fcard-detail{ height: 25%; padding: 15px; }
.flashcard--slide .list--fcard .list--fcard-detail h3{ font-size: 18px; }
.flashcard--slide .list--fcard:hover .list--fcard-detail{ background-color: #fff; }
.flashcard--slide .list--fcard:hover .list--fcard-detail a{ color: var(--learning) !important; }

@media (max-width: 1199px){
  
.flashcard--slide .list--fcard .list--fcard-detail{ padding: 10px; }

}

@media (max-width: 991px){

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

}
@media (max-width: 576px){
  
  .flashcard--slide{ padding-right: 20px; padding-left: 20px; }

}