/* CSS Document */


/***********************************************************/
/************************** program ************************/


.section-program{ background-color: #231F21; background-image: url('../images/program/bg-program.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center top; width: 100%; color: var(--white); }


.divProgram-boxintro{ display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; margin-bottom: 50px; }
.divProgram-intro{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; position: relative; padding-left: 40px; width: 46%; }
.divProgram-intro::before{ content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-color: var(--primary); }
.divProgram-line{ width: 46%; }



.divProgram-list{ display: flex; flex-flow: row wrap; margin-bottom: 50px; color: var(--white); }
.divProgram-list.box-reverse{ flex-direction: row-reverse; }

.divProgram-list-box{ 
  background-color: #21468B; padding: 30px; height: 100%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
  display: flex; justify-content: space-between; flex-direction: column;
}
.divProgram-list:hover .divProgram-list-box{ background-color: var(--primary2); }

.divProgram-list-box h2{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head3); line-height: 1.1; }

.divProgram-list-detail h3{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head5); line-height: 1.2; margin-bottom: 5px; margin-top: 25px; }
.divProgram-list-detail ul li{ font-size: 15px; line-height: 1.6; }
.divProgram-list-detail ul li a:hover{ color: rgba(255, 255, 255, 0.5); }


.divProgram-list--nav{ width: 450px; }
.divProgram-list--img{ width: calc(100% - 450px); }



@media (max-width: 1199px) {

  .divProgram-list{ height: 400px; }
  .divProgram-list--nav{ width: 350px; }
  .divProgram-list--img{ width: calc(100% - 350px); }

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

  .divProgram-list-box{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%; width: 100%;
  }
  .divProgram-list--nav{ width: 40%; }
  .divProgram-list--img{ width: 60%; }

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

  .divProgram-list{ height: auto; }
  .divProgram-list--nav,
  .divProgram-list--img{ width: 100%; }

  .divProgram-boxintro{ margin-bottom: 30px; }
  .divProgram-intro{ width: 100%; padding-left: 25px; }
  .divProgram-intro::before{ width: 6px; }
  .divProgram-line{ width: 100%; }
  .divProgram-line .hr--line{ margin-top: 30px; margin-bottom: 30px; }
  

}


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


.divProgram--bar{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; color: var(--white); position: relative; padding-left: 40px; max-width: 645px; margin-top: 30px; }
.divProgram--bar::before{ content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-color: var(--primary2); }



.divProgram--intro .title{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head1); line-height: 1.2; font-weight: 500; padding-right: 100px; }
.divProgram--intro p{ font-size: var(--t-text); line-height: 1.6; margin-bottom: 30px; }
.divProgram--intro p:last-child{ margin-bottom: 0; }

@media (max-width: 1199px) {

  .divProgram--intro .title{ padding-right: 50px; }  

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

  .divProgram--intro .title{ padding-right: 0px; margin-bottom: 30px; }  

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

  .divProgram--bar{ padding-left: 25px; }
  .divProgram--bar::before{ width: 6px; }

}

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

.divProgram-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-left: -15px; margin-right: -15px;
}
.divProgram-intro-left,
.divProgram-col-left{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding-left: 15px; padding-right: 15px;
}
.divProgram-intro-right,
.divProgram-col-right{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 66.666666%;
  flex: 0 0 66.666666%;
  max-width: 66.666666%;
  padding-left: 15px; padding-right: 15px;
}


.divProgram-detail-left{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px; padding-right: 15px;
}
.divProgram-detail-right{
  position: relative;
  width: 100%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px; padding-right: 15px;
}


@media (max-width: 1199px) {

  .divProgram-detail-left{ 
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .divProgram-detail-right{ 
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  
}
@media (max-width: 991px) {

  .divProgram-intro-left,
  .divProgram-intro-right{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

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

  .divProgram-detail-left,
  .divProgram-detail-right,
  .divProgram-col-left,
  .divProgram-col-right{ 
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  

}


/* .divProgram-slidebar{ max-width: 388px; width: 90%; } */
.divProgram-nav{ margin-bottom: 50px; max-width: 388px; width: 90%; }
.divProgram-nav .title{ font-family: var(--font-Bebas_Neue); font-size: var(--s-head3); line-height: 1.2; padding-bottom: 15px; border-bottom: 6px solid var(--primary2); }
.divProgram-nav .title span{ display: block; color: var(--primary2);}
.nav--box-list li a{ font-family: var(--font-Bebas_Neue); font-size: var(--s-text); line-height: 1.2; color: var(--black); display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--gray); }
.nav--box-list li a i{ line-height: 0; }
.nav--box-list li a img{ width: 30px; height: auto; }
.nav--box-list li a.active,
.nav--box-list li a:hover{ color: var(--primary2);  }
.nav--box-list li a.active img,
.nav--box-list li a:hover img{ filter: var(--filter-primary2); }

.divProgram-nav .title.noborder{ border-bottom: 0; }
.divProgram-nav .btn-download{ margin-bottom: 10px; }

.btn-filter{ display: none; margin-bottom: 30px; }


@media (max-width: 991px) {

  .divProgram-nav .title{ font-size: 26px; padding-bottom: 10px; border-bottom-width: 4px; }
  .nav--box-list li a{ font-size: 20px; padding: 15px 0; }

  .nav--box-list li a img{ width: 20px; }

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

  .btn-filter{ display: block; text-align: center; }
  .btn-filter #btn-filter{ display: inline-flex; align-items: center; font-family: var(--font-Bebas_Neue); font-size: 20px; line-height: 1; color: var(--primary); }
  .btn-filter img{ width: 18px; }
  #btn-filter.open{ color: var(--primary); }
  #btn-filter.open img{ filter: var(--filter-primary); transform: rotate(180deg); }

  .divProgram-slidebar{ display: none; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.5s ease, height 0.5s ease; margin: 0 auto; width: 100%; }
  .divProgram-slidebar.open{ display: block; opacity: 1; height: 100%; }
  .divProgram-nav{ width: 100%; }
  .nav--box-list li a img{ width: 25px; }

}


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


.divProgram-nav_tab{ margin: 40px 0 90px; border-bottom: 1px solid var(--gray); }
.divProgram-nav_tab .tabs{ display: flex; justify-content: center; gap: 50px; }
.divProgram-nav_tab .tabs .tab{ font-family: var(--font-Bebas_Neue); font-size: var(--txt-menu); color: var(--dark); padding-bottom: 30px; position: relative; display: block; background: transparent; border: 0; cursor: pointer; }
.divProgram-nav_tab .tabs .tab::before{ content: ''; position: absolute; bottom: 0; right: 0; left: 0; height: 5px; background-color: var(--primary); transform: scaleX(0) translateZ(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.37,.31,0,1); }
.divProgram-nav_tab .tabs .tab.active::before,
.divProgram-nav_tab .tabs .tab:hover::before{ transform: scaleX(1) translateZ(0); transform-origin: 0 50%; }
.divProgram-nav_tab .tabs .tab:hover, .divProgram-nav_tab .tabs .tab.active{ color: var(--primary); }


.tab-content .content { display: none; }
.tab-content .content.active { display: block; }




@media (max-width: 991px){

  .divProgram-nav_tab{ margin: 40px 0; }

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

  .divProgram-nav_tab{ overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; margin-bottom: 40px; }
  .divProgram-nav_tab .tabs{ justify-content: flex-start; gap: 40px; }
  .divProgram-nav_tab .tabs .tab{ padding-bottom: 20px;}

}



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