/* CSS Document */


/***********************************************************/
/************************** home ***************************/

.banner-box{ position: relative; height: 100%; }
.banner-box::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(270deg,rgba(0, 0, 0, 0) 0%, rgba(79, 7, 28, 0.6) 100%); }

.banner-box--img{ height: 100%; }
.banner-box--img img{ object-fit: cover; object-position: top; width: 100%; height: 100%; }

.banner-box--detail{ position: absolute; top: calc(50% - 50px); left: 0; transform: translateY(-50%); width: 100%; color: var(--white); z-index: 10; }
.banner--title{ font-size: 60px; line-height: 1.3; font-weight: bold; margin-bottom: 50px; }
.banner--est{ position: relative; padding-left: 40px; font-family: var(--font-Bebas_Neue); font-size: 50px; }
.banner--est::before{ content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-color: var(--primary); }
.banner--est span{ font-size: 100px; display: block; }


.divBanner{ height: calc(100vh - 88px); }
.divBanner .swiper-pagination{ text-align: left; padding-left: 3%; bottom: 8%; }
.divBanner .swiper-pagination-bullet{ background: transparent; font-family: var(--font-Bebas_Neue); font-size: 30px; color: rgba(255, 255, 255, 0.5); width: auto; opacity: 1; }
.divBanner .swiper-pagination-bullet-active{ font-size: 40px; color: rgba(255, 255, 255, 1); }
.divBanner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.divBanner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 15px); }


@media (max-width: 1599px){
  .divBanner{ height: calc(100vh - 76px); }
}
@media (max-width: 1199px){

  .banner--title{ font-size: 50px; margin-bottom: 40px; }
  .banner--est{ font-size: 40px; padding-left: 40px; }
  .banner--est span{ font-size: 80px; }

  .divBanner{ height: auto; }
}
@media (max-width: 991px){

  .banner-box--detail{ top: calc(50% - 30px); }
  .banner--title{ font-size: 34px; margin-bottom: 30px; }
  .banner--est{ font-size: 28px; padding-left: 30px; }
  .banner--est::before{ width: 8px; }
  .banner--est span{ font-size: 60px; }

  .divBanner .swiper-pagination{ bottom: 5%; }

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

  .banner-box--detail{ top: 40%; }
  .banner--title{ font-size: 20px; margin-bottom: 10px; }
  .banner--est{ font-size: 16px; padding-left: 20px; }
  .banner--est span{ font-size: 30px; }

  .divBanner .swiper-pagination-bullet{ font-size: 20px; }
  .divBanner .swiper-pagination-bullet-active{ font-size: 30px; }
  .divBanner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px); }

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

  .banner-box--detail{ top: 45%; }
  .divBanner{ height: 400px; }
  .banner--title{ font-size: 30px; }
  .banner--est{ font-size: 24px; }
  .banner--est span{ font-size: 40px; }

}

/* iPads Pro (landscape) Styling */
@media handheld, all and (device-width: 1366px) and (device-height: 1024px) and (orientation : landscape) {
  .divBanner{ height: auto; }
}





.program-box{ display: flex; justify-content: flex-end; }

.program-box-img{ width: 70%; }
.program-box-img img{ filter: grayscale(100%); opacity: 0.5; }
.program-box-detail{ position: absolute; top: 0; right: 0; width: 50%; background-color: rgba(255, 255, 255, 0.9); height: 100%; flex-direction: column; justify-content: center; display: none; }
.program-box-detail--text{ width: 70%; margin: 0 auto; }
.program-detail{ position: relative; padding-left: 50px; margin-top: 20px; }
.program-detail::before{ content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--primary); }
.program-detail .head{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head3); line-height: 1.2; color: var(--dark); margin-bottom: 10px; }
.program-detail .title{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head5); line-height: 1.2; font-weight: bold; color: var(--dark); margin-bottom: 10px; }
.program-detail p{ font-size: var(--t-text3); line-height: 1.4; color: var(--dark);  margin-bottom: 10px; 
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.program-title-pc{ display: block; }
.program-title-mobile{ display: none; }
.program-box-number{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); margin-bottom: 20px; }
.program-box-number span{ color: var(--primary2); }


.program-slide .swiper-slide-active .program-box{ justify-content: flex-start; }
.program-slide .swiper-slide-active ~ div .program-box{ justify-content: flex-start; }

.program-slide .swiper-slide-active .program-box-img img{ filter: grayscale(0%); opacity: 1; }
.program-slide .swiper-slide-active .program-box-detail{ display: flex; }


.program-slide .swiper-pagination{ bottom: auto; top: 10%; width: auto; left: 55%; font-family: var(--font-Bebas_Neue); font-size: var(--s-text); }
.program-slide .swiper-pagination-current{ color: var(--primary); }
.program-slide .swiper-button-prev{ left: 11%; }
.program-slide .swiper-button-next{ right: 11%; }


@media (max-width: 1999px){

  .program-slide .swiper-pagination{ top: 5%; }


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

  .program-detail{ padding-left: 30px; }
  .program-detail p{ -webkit-line-clamp: 2;}


  .program-slide .swiper-pagination{ top: 5%; left: 55.5%; }
  .program-slide .swiper-button-prev{ left: 7%; }
  .program-slide .swiper-button-next{ right: 7%; }


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

  .program-box-detail--text{ width: 80%; }

  .program-slide .swiper-pagination{ left: 54%; }
  .program-slide .swiper-button-prev{ left: 4%; }
  .program-slide .swiper-button-next{ right: 4%; }


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

  .program-box-img{ width: 90%; }
  .program-detail .head, .program-detail .title, .program-detail p{ margin-bottom: 5px; }

  .program-detail{ margin-top: 15px; }
  .program-box-number{ margin-bottom: 10px; }

  .program-slide .swiper-button-prev{ left: 2%; }
  .program-slide .swiper-button-next{ right: 2%; }

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

  .program-slide .swiper-button-prev,
  .program-slide .swiper-button-next{ top: auto; bottom: 20px; }

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

  .program-title-pc{ display: none; }
  .program-title-mobile{ display: block; }

  .program-box{ flex-direction: column; }
  .program-box-img{ width: 100%; margin-bottom: 20px; }
  .program-box-detail{ position: relative; width: 100%; }
  .program-box-detail--text{ width: 90%; }
  .program-detail .head, .program-detail .title, .program-detail p{ margin-bottom: 10px; }

  .program-slide .swiper-pagination{ top: 55%; left: 50%; transform: translateY(-50%); }
  .program-slide .swiper-button-prev,
  .program-slide .swiper-button-next{ display: block; top: 50%; bottom: auto; }
}
@media (max-width: 600px){

  .program-slide .swiper-pagination{ top: 52%; }

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

  .program-slide .swiper-button-prev,
  .program-slide .swiper-button-next{ top: 45%; }

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

  .program-slide .swiper-pagination{ top: 50%; }

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

  .program-slide .swiper-pagination{ top: 47%; }
  .program-slide .swiper-button-prev,
  .program-slide .swiper-button-next{ top: 40%; }

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

  .program-slide .swiper-pagination{ top: 43%; }
  .program-slide .swiper-button-prev,
  .program-slide .swiper-button-next{ top: 37%; }

}


.home-about{ display: flex; width: 100%; }
.home-about .home-about-text{ width: 473px; }
.home-about .home-about-img{ position: relative; width: calc(100% - 473px); }


.icon-play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 74px; height: 74px; }
.icon-play img{ filter: var(--filter-white); opacity: 0.3; transition: all 0.3s ease; cursor: pointer; }
.home-about-img:hover .icon-play img{ opacity: 1; transition: all 0.3s ease; }


.home-logo-gold{ width: 174px; margin: 15px 0; }
.home-about-text-box{ background-color: var(--secondary); color: var(--white); padding: 30px; }
.home-about-text-box h3{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head3); margin-bottom: 5px; }
.home-about-text-box p{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; }


@media (max-width: 1199px){

  .home-about .home-about-text{ width: 400px; }
  .home-about .home-about-img{ width: calc(100% - 400px); }
  
  .home-logo-gold{ width: 150px; }

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

  .home-about{ flex-direction: column; text-align: center;}
  .home-about .home-about-text{ width: 100%; }
  .home-about .home-about-img{ width: 100%; }
  
  .home-logo-gold{ margin: 15px auto; }
  .home-about-text-box{ text-align: left; }

}
@media (max-width: 767px){
  .home-about .home-about-img.imgvdo::before{ width: 50px; height: 50px; }
}


.home-about-row{ display: flex; justify-content: space-between; flex-flow: row wrap; }
.home-about-col{ width: 335px; display: flex; flex-direction: column; }
.home-about-col.col-reverse{ flex-direction: column-reverse; }
.home-about-col figure{ margin-bottom: 1rem; }
.home-about-col.col-reverse figure{ margin-bottom: 0; margin-top: 1rem; }

.home-about-boxdetail .title{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head5); line-height: 1.2; color: var(--dark); }
.home-about-boxdetail p{ font-size: var(--t-text); line-height: 1.6; font-weight: 300; color: var(--dark); }


@media (max-width: 1199px){

  .home-about-col{ width: 280px }

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

  .home-about-col{ width: 220px }

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

.home-about-row{ display: flex; justify-content: space-between; }
.home-about-col{ width: 100%; margin-bottom: 30px; }
.home-about-col.col-reverse{ flex-direction: column; }
.home-about-col.col-reverse figure{ margin-bottom: 1rem; margin-top: 0; }

}


.home-logo_school ul{ display: flex; align-items: center; justify-content: center; gap: 40px; flex-flow: row wrap; }
.home-logo_school ul li img{ max-height: 70px; filter: grayscale(100%); opacity: 0.5; }
.home-logo_school ul li a:hover img{ filter: grayscale(0%); opacity: 1; }


@media (max-width: 1199px){

.home-logo_school ul li img{ max-height: 50px; }

}


.home-facility--intro{ max-width: 925px; width: 80%; margin: 30px auto; text-align: center; font-size: var(--t-text); line-height: 1.6; }
.home-facility{ background-image: url('../images/home/bg-facility.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; color: var(--white); }

.facility-box-img{ margin-bottom: 30px; overflow: hidden; }
.facility-box-img img{ filter: grayscale(100%); opacity: 0.5; }


.facility-box-detail{ display: flex; justify-content: space-between; opacity: 0; }
.facility-box-detail .title{ width: 200px; padding-right: 40px; font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; font-weight: 500; color: var(--white); 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.facility-box-detail .detail{ width: calc(100% - 200px); font-size: var(--t-text); line-height: 1.6; font-weight: 300; color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



.facility-slide .swiper-pagination{ bottom: 110px; font-family: var(--font-Bebas_Neue); font-size: var(--s-text); }
.facility-slide .swiper-slide-active .facility-box-detail{ opacity: 1; }
.facility-slide .swiper-slide-active .facility-box-img img{ filter: grayscale(0%); opacity: 1; transition: all 0.5s ease; }
.facility-slide .swiper-slide-active .facility-box a:hover img{ transform: scale(1.1); transition: all 0.5s ease; }

.facility-slide .swiper-button-prev{ filter: var(--filter-white); left: 23%; }
.facility-slide .swiper-button-next{ filter: var(--filter-white); right: 23%; }



@media (max-width: 1199px){

  .home-facility--intro{ max-width: 650px; }

  .facility-slide .swiper-button-prev{ left: 11%; }
  .facility-slide .swiper-button-next{ right: 11%; }

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

  .facility-box-detail{ flex-direction: column; }
  .facility-box-detail .title{ width: 100%; -webkit-line-clamp: 1; }
  .facility-box-detail .detail{ width: 100%; -webkit-line-clamp: 2; }
  .facility-box-img{ margin-bottom: 20px; }

  .facility-slide .swiper-pagination{ bottom: 105px; }

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

  .home-facility--intro{ width: 93%; }

  .facility-slide{ padding: 0 15px; }

}



.home-announcements{ display: flex; flex-flow: row wrap; height: 500px; }
.home-announcements--img{ width: 50%; height: 100%; }

.home-announcements--list{ width: 50%; height: 100%; }

.list-box{ width: 80%; margin: 0 auto; }

@media (max-width: 1199px){

  .home-announcements{ height: 400px; }
  .home-announcements--img{ width: 45%; }
  .home-announcements--list{ width: 55%; }
  .list-box{ width: 90% }

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

  .home-announcements{ height: auto; }
  .home-announcements--img{ width: 100%; height: 300px; margin-bottom: 20px; }
  .home-announcements--list{ width: 100%; height: 400px; }
  .list-box{ width: 90% }

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

  .list-box{ width: 100%; padding-right: 20px; }

}


.scroll-box {
  overflow-y: scroll;
}
/* Custom Scrollbar - WebKit (Chrome, Safari, Edge) */
.scroll-box::-webkit-scrollbar {
  width: 7px;
}
.scroll-box::-webkit-scrollbar-track {
  background: transparent; /* หรือใช้ #f0f0f0 */
}
.scroll-box::-webkit-scrollbar-thumb {
  background-color: var(--primary); 
  border-radius: 0;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
}

/* Firefox */
.scroll-box {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.announcements-list-box {
  display: flex; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray);
}
.announcements-list-box .date {
  color: #999; font-family: var(--font-Bebas_Neue); font-size: 16px; line-height: 1.6;
  min-width: 80px;
}
.announcements-list-box .content .title {
  font-size: 20px; line-height: 1.2; font-weight: bold; margin-bottom: 10px;
}
.announcements-list-box .content p {
  font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--dark);
}
.announcements-list-box .content .linktext {
  color: var(--primary);
  font-weight: bold;
}
.announcements-list-box .content a{ color: var(--dark); }
.announcements-list-box .content a:hover{ color: var(--primary); }
.announcements-list-box .content a.linktext:hover {
  color: var(--secondary);
}

@media (max-width: 576px){

  .announcements-list-box{ flex-direction: column; gap: 10px; }

}


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