/* CSS Document */


/***********************************************************/
/************************ course ***************************/


.course-col--nav, .course-col--content{ padding-left: 15px; padding-right: 15px; }
.course-col--nav{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}
.course-col--content{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%;
}


@media (max-width: 767px){

  .course-col--nav,
  .course-col--content{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 20px; padding-right: 20px;
  }
  .course-col--nav{ margin-bottom: 30px; }

}


.course--selectsum{ position: relative; display: flex; justify-content: space-between; margin-bottom: 30px; }

.course--allsum{ font-size: var(--small); font-weight: 400; color: var(--dark100); position: relative; top: 70px; }



.course--box{ margin-bottom: 30px; }
.course--box .title{ font-size: var(--head6); font-weight: 500; color: var(--secondary); margin-bottom: 15px; }
.course--box-list li{ margin-bottom: 5px; }


.btn-filter{ display: none; }


@media (max-width: 991px){

  .course--selectsum{ align-items: center; }
  .course--allsum{ top: auto; }

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

  .btn-filter{ display: block; text-align: center; }
  .btn-filter a{ display: inline-flex; align-items: center; font-size: var(--small); color: var(--secondary); }
  .btn-filter img{ width: 18px; }
  .btn-filter a.open{ color: var(--primary); }
  .btn-filter a.open img{ filter: var(--filter-primary); }

  .course-slidebar{ display: none; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.5s ease, height 0.5s ease; }
  .course-slidebar.open{ display: block; opacity: 1; height: 100%; }

}



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


.tablist-container {
  width: 100%;
  margin: 0 auto;
}

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--blue75); }
.tab {
  padding: 5px 15px;
  cursor: pointer;
  border: 0; border-bottom: 3px solid transparent;
  background-color: var(--white);
  font-family: "IBM Plex Sans Thai", serif;
  font-size: 16px; color: var(--secondary);
}
.tab:hover, .tab.active  {
  color: var(--primary);
  border-color: var(--primary);
}

.tab-content { padding: 30px 0; }
.tab-content .content { display: none; }
.tab-content .content.active { display: block; }






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