html, body{ font-family: 'Kanit', "Open Sans", sans-serif; font-style: normal; font-weight: normal; line-height: 110%; color: #000000; }
.section-banner{ padding: 100px 0 80px 0 !important; }
.section-academy, .section-gray{ padding-top: 3rem; padding-bottom: 3rem; }
.section-gray{ background-color: #F8F8F9 !important; }
.title-academy{ padding-bottom: 35px; }
.sub-title-academy{ padding-bottom: 5px; }
.fs-48{ font-size: 48px; }
.fs-32{ font-size: 32px; }

.btn-academy{
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.16); border-radius: 8px; padding: 12px 12px; min-width: 164px; height: 48px;
    font-weight: 500; font-size: 18px; line-height: 18px; text-align: center; letter-spacing: 0.01em; color: #FFFFFF; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); transition: none;
}
.btn-academy:hover{  color: #fff;  cursor: pointer; }

#search{ border-left: 1px solid transparent;  }
.btn-academy-search{
    width: 48px; background-color: transparent; color: #cccccc; height: 48px;  border-top: 1px solid #E1E1E1; border-left: 1px solid #E1E1E1;
    border-right: 1px solid transparent; border-bottom: 1px solid #E1E1E1;  box-sizing: border-box;  border-radius: 8px;
}
.btn-academy-search:hover{  background-color: rgba(245,255,242,0.03); color: #000000; }
.btn-academy-search:hover > i{ color: #000000; }

.accordion-btn {
    width: 100%; padding-left: 0; padding-right: 0; font-size: 1.2rem;  font-weight: 500; color: #999999;
    cursor: pointer; background: inherit; border: none; outline: none; text-align: left;  margin-top: 1rem;
}
.accordion-btn:after { font-family: "Font Awesome 5 Pro"; content: "\f107"; font-weight: 900; float: right; transition: all 0.3s linear; }
.accordion-btn.is-open:after { transform: rotate(-180deg); }
.accordion-content { max-height: 0; font-size: 1.2rem; font-weight: 400; overflow: hidden; transition: max-height 0.3s ease-in-out; margin-bottom: 1rem; }
.accordion-content .content {  color: #000000; padding-left: 0;  padding-right: 0; }

.navigate-academy::after {
    content: " ";  height: 0;  width: 0; position: absolute;  right: -13px; border-style: solid;
    border-width: 20px 0 20px 13px; border-color: transparent  #F2F7FB; z-index: 10;
}
.navigate-academy.now::after {
    content: " "; height: 0;  width: 0;  position: absolute;  right: -13px;  border-style: solid;
    border-width: 20px 0 20px 13px;  border-color: transparent  #F2F7FB;  z-index: 10;
}

.navigate-academy.bf::before {
    content: " ";  height: 0;  width: 0;  position: absolute;  right: -14.5px; border-style: solid;
    border-width: 20px 0 20px 13px;  border-color: transparent rgba(177,177,178,0.43);  z-index: 10;
}
.nav-link {  color: #BDBDBD; }
.section-academy .plyr--video, .section-academy-detail .plyr--video{  border-radius: 20px !important; }
.section-academy .plyr__control--overlaid, .section-academy-detail .plyr__control--overlaid{
    background: rgba(255, 255, 255, 0.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(2px) !important;
}
.section-academy .plyr__control:hover, .section-academy-detail .plyr__control:hover{  background: #691018 !important; }
.section-academy .plyr--full-ui input[type=range], .section-academy-detail .plyr--full-ui input[type=range]{
    color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#691018))) !important;
}
.section-academy .plyr__controls__item.plyr__control:hover, .section-academy-detail .plyr__controls__item.plyr__control:hover{  background: #691018 !important; }

::placeholder, .form-control::placeholder { color: #999999; }
::-ms-input-placeholder {  color: #999999; }
select:invalid, select:required:invalid, .form-select { font-size: 0.8rem; color: #999999; }
option[value=""][disabled] { display: none; }

.card-body, .card-course, .card-course-title .card-text{   text-align: left; }
.card-course-title{  font-weight: 600;  font-size: 18px;  line-height: 140%; }
.card-course{ position: relative; height:450px; }
.card-course:hover { box-shadow: 2px 4px 8px rgb(154 99 210 / 40%) !important; }
.card-course:active { border: 1px solid #9A63D2 !important; }
.card-course-absolute{ position: absolute;z-index:1;bottom:0;left:0;width:100%; }
.div-card-course{ padding-left: 0; }

.div_content{ margin-top: 0; margin-left: 0; margin-right: 0; }

#div_course, #div_content, #div_activity, #div_review{ margin-left: 0; margin-right: 0; }

@media screen and (max-width: 1024px) {
    .section-banner{ padding: 60px 0 60px 0 !important; }
    .title-academy{ padding-bottom: 30px; }
    .sub-title-academy{ padding-bottom: 5px; }
    .fs-40{ font-size: 1.4rem;}
    .fs-36{ font-size: 1.2rem;  }
    .fs-18{ font-size: 0.9rem; }
}
@media screen and (max-width: 834px) {
    .section-banner{ padding: 60px 0 60px 0 !important; }
    .title-academy{ padding-bottom: 25px; }
}
@media screen and (max-width: 576px) {
    .section-banner{ padding: 50px 0 40px 20px !important; }
    .title-academy{ padding-bottom: 15px; }
    .sub-title-academy{ padding-bottom: 15px; }
    .fs-40{ font-size: 40px;}
    .fs-36{ font-size: 36px;  }
    .fs-18{ font-size: 18px; }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .card-course{ height:425px; }
}
@media only screen and (max-device-width: 480px) {

}