@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

@font-face {

  font-family: 'Chulalongkorn-R';

  src: url("../fonts/Chulalongkorn/chulalongkornreg.woff2") format("woff2"), url("../fonts/Chulalongkorn/chulalongkornreg.woff") format("woff");

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Chulalongkorn-B';

  src: url("../fonts/Chulalongkorn/chulalongkornbold.woff2") format("woff2"), url("../fonts/Chulalongkorn/chulalongkornbold.woff") format("woff");

  font-weight: normal;

  font-style: normal;

}



.FontAwesome, .mainmenu > li.main-sub > a:after, .FAQ-acc .panel-group .panel.panel-default .panel-heading a:before, .footer-acc .panel-group .panel.panel-default .panel-heading a:before {

  font-family: "Font Awesome 5 free";

  moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased;

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  line-height: normal;

  font-weight: 900;

}



.line-number, .course-name p, .curriculum-info .txt-content p, .knowledgeBox .txt-content p, .knowledge-topic p, .newsBox .txt-content p, .news-topic p {

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  margin-bottom: 0;

}



body {

  font-family: 'Sarabun', sans-serif;

  font-size: 16px;

  font-weight: 300;

  color: #636363;

  line-height: normal;

}



html {

  scroll-padding-top: 3.5rem;

}



.wrap-pad {

  width: 88%;

  padding: 0 15px;

  margin: 0 auto;

}



a, a:hover {

  text-decoration: none !important;

  outline: 0 !important;

  display: block;

}



*:focus, *:active {

  outline: 0 !important;

  -webkit-box-shadow: none !important;

          box-shadow: none !important;

}



input::-moz-focus-inner {

  border: 0 !important;

}



ul {

  list-style: none;

  padding-left: 0;

  margin-bottom: 0;

}



button {

  border: none;

  background: none;

}



.btn {

  border-radius: 0;

}



.transitHeight {

  -webkit-transition: height 0.5s;

  transition: height 0.5s;

}



.transitAll, .mainmenu, .mainmenu > li, .mainmenu > li > a, .mainmenu-sub, .mainmenu-sub li, .social li a, .social li a i, .lang li button, .input-group.search .btn, .buttonPK, .buttonM, .buttonBD, .slide-navButton .owl-carousel .owl-nav .owl-prev, .slide-navButton .owl-carousel .owl-nav .owl-next, .slide-navButton .owl-carousel .owl-dots .owl-dot span, .course-category li a, .news-slide .newsBox, .courseBox, .course-name p, .academic-list li, .academic-list li .img-width, .academic-name p, .topic-type, .knowledgeBox .img-width, .knowledgeBox .img-width img, .knowledgeBox .txt-content p, .knowledge-topic p, .newsBox .img-width, .newsBox .img-width img, .newsBox .txt-content p, .news-topic p, .faqBox, .FAQ-acc .panel-group .panel.panel-default .panel-heading, .FAQ-acc .panel-group .panel.panel-default .panel-heading a, .partner-slide .items, .content-page .txt-content a, .content-page .list-decor li a, .anchor-list li a, .box-list > li ul li a {

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

}



h1 {

  font-family: 'Chulalongkorn-B';

  font-size: 34px;

  line-height: normal;

  color: #111111;

  letter-spacing: 0.02rem;

  text-align: center;

  margin-bottom: 45px;

}



h2 {

  font-family: 'Chulalongkorn-B';

  font-size: 32px;

  line-height: normal;

  color: #111111;

  letter-spacing: 0.02rem;

  text-align: center;

  margin-bottom: 45px;

}



h2.decor {

  float: none;

  margin: 0 auto 45px auto;

  display: table;

  position: relative;

}



h2.decor:after {

  content: '';

  width: 100px;

  height: 3px;

  background-color: #f6adb9;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



h3 {

  font-family: 'Chulalongkorn-B';

  font-size: 30px;

  line-height: normal;

  color: #111111;

  text-align: center;

  letter-spacing: 0.015rem;

  margin-bottom: 30px;

}



h4 {

  font-family: 'Chulalongkorn-B';

  font-size: 26px;

  line-height: normal;

  color: #111111;

  letter-spacing: 0.015rem;

  margin-bottom: 25px;

}



h5 {

  font-family: 'Chulalongkorn-B';

  font-size: 22px;

  line-height: normal;

  color: #111111;

  letter-spacing: 0.02rem;

  margin-bottom: 25px;

}



h6 {

  font-family: 'Chulalongkorn-B';

  font-size: 20px;

  line-height: normal;

  color: #111111;

  letter-spacing: 0.015rem;

  margin-bottom: 15px;

}



/*---------- HEADER ----------*/

header {

  background-color: white;

  padding-top: 14px;

}



header .mainlogo {

  margin-bottom: 22px;

}



.top-headerBG {

  background: #e99fbb;

  background: -webkit-gradient(linear, left top, right top, from(#e99fbb), to(#db5f8e));

  background: linear-gradient(90deg, #e99fbb 0%, #db5f8e 100%);

  padding: 9px 0;

}



.top-headerBG .social li {

  margin-right: 12px;

}



.top-headerBG .social li a {

  width: 30px;

  height: 30px;

}



.top-headerBG .social li a i {

  font-size: 14px;

}



.mainlogo {

  float: left;

}



.mainlogo img {

  width: auto;

  height: 46px;

}



.mainmenu {

  float: right;

}



.mainmenu > li {

  float: left;

  padding-bottom: 18px;

  margin-right: 30px;

}



.mainmenu > li:last-child {

  margin-right: 0 !important;

}



.mainmenu > li.active > a {

  font-family: 'Chulalongkorn-B';

  color: #DB5F8E !important;

}



.mainmenu > li:hover > a {

  color: #d75d73;

}



.mainmenu > li > a {

  font-family: 'Chulalongkorn-R';

  font-size: 19px;

  line-height: 50px;

  color: #252525;

}



.mainmenu > li.main-sub {

  position: relative;

}



.mainmenu > li.main-sub > a {

  padding-right: 15px;

}



.mainmenu > li.main-sub > a:after {

  content: '\f078';

  font-size: 9px;

  color: #898989;

  position: absolute;

  top: 21px;

  right: 0;

}



.mainmenu > li:hover .dropdown-container {

  opacity: 1;

  visibility: visible;

}



.mainmenu > li:hover .mainmenu-sub {

  display: block;

}



.mainmenu-sub {

  width: 220px;

  display: none;

  position: absolute;

  top: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

  z-index: 99;

  margin-top: 68px;

}



.mainmenu-sub li {

  width: 100%;

  float: left;

  background-color: #F28A9B;

  border-bottom: 1px solid white;

}



.mainmenu-sub li:last-child {

  border-bottom: none;

  margin-bottom: 70px;

}



.mainmenu-sub li a {

  font-size: 15px;

  font-weight: 400;

  color: white;

  text-align: center;

  letter-spacing: 0.01rem;

  padding: 10px 12px 11px 12px;

}



.mainmenu-sub li:hover {

  background-color: #DB5F8E;

}



.social {

  float: left;

}



.social li {

  float: left;

  margin-right: 15px;

}



.social li:last-child {

  margin-right: 0 !important;

}



.social li a {

  width: 40px;

  height: 40px;

  border: 1px solid white;

  border-radius: 50%;

  text-align: center;

  position: relative;

}



.social li a i {

  font-size: 18px;

  color: white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.social li a:hover {

  background-color: white;

}



.social li a:hover i {

  color: #DB5F8E;

}



.top-menu {

  float: right;

}



.top-menu > li {

  float: left;

}



.top-menu > li:first-child {

  margin-right: 25px;

}



.top-menu .input-group.search .form-control {

  min-width: 200px;

}



.lang {

  float: left;

}



.lang li {

  float: left;

  margin-right: 3px;

  position: relative;

}



.lang li:last-child {

  margin-right: 0 !important;

}



.lang li.active button {

  background-color: #c80072;

  color: white;

  opacity: 1;

}



.lang li button {

  width: 30px;

  height: 30px;

  background: none;

  border-radius: 50%;

  font-size: 12px;

  font-weight: 400;

  line-height: 30px;

  color: white;

  letter-spacing: 0.02rem;

  text-align: center;

  padding: 0;

}



.input-group.search {

  background: none;

  border: none;

  border-radius: 15px;

  overflow: hidden;

  position: relative;

}



.input-group.search .form-control {

  background: white;

  border: none;

  font-size: 15px;

  line-height: normal;

  color: #DB5F8E !important;

  padding: 0 5px 3px 15px;

}



.input-group.search .form-control::-webkit-input-placeholder {

  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #DB5F8E;

  opacity: 1;

  /* Firefox */

}



.input-group.search .form-control:-ms-input-placeholder {

  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #DB5F8E;

  opacity: 1;

  /* Firefox */

}



.input-group.search .form-control::-ms-input-placeholder {

  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #DB5F8E;

  opacity: 1;

  /* Firefox */

}



.input-group.search .form-control::placeholder {

  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #DB5F8E;

  opacity: 1;

  /* Firefox */

}



.input-group.search .btn {

  min-height: 30px;

  background: white;

  border: none;

  border-radius: 0;

  font-size: 16px;

  line-height: normal;

  color: #DB5F8E;

  padding: 0 34px 0 0;

  position: relative;

}



.input-group.search .btn i {

  position: absolute;

  top: 47%;

  right: 11px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.input-group.search .btn:hover {

  color: #c80072;

}



/*---------- FOOTER ----------*/

footer {

  background-color: #DB5F8E;

  padding: 45px 0 50px 0;

}



footer .mainlogo {

  margin-bottom: 22px;

}



footer .mainlogo img {

  height: 90px;

}



footer h6 {

  color: white;

  letter-spacing: 0.02rem;

  padding-bottom: 7px;

  margin-bottom: 20px;

  position: relative;

}



footer h6:after {

  content: '';

  width: 35px;

  height: 2px;

  background-color: #f6adb9;

  position: absolute;

  left: 0;

  bottom: 0;

}



.copyright {

  background-color: #c80072;

  font-size: 14px;

  font-weight: 400;

  color: white;

  letter-spacing: 0.02rem;

  text-align: center;

  padding: 13px 0;

}



.copyright.PK {

  background-color: #DB5F8E;

}



.footer-menu li {

  margin-bottom: 3px;

}



.footer-menu li a {

  font-size: 15px;

  line-height: 1.6rem;

  color: white;

  letter-spacing: 0.015rem;

}



/*---------- BUTTON -----------*/

.buttonPK {

  min-width: 120px;

  float: left;

  background-color: #DB5F8E;

  border-radius: 18px;

  font-size: 15px;

  font-weight: 400;

  color: white !important;

  text-align: center;

  padding: 5px 15px 8px 15px;

}



.buttonPK:hover {

  background-color: #d75d73;

}



.buttonM {

  min-width: 120px;

  float: left;

  background-color: #c80072;

  border-radius: 18px;

  font-size: 15px;

  font-weight: 400;

  color: white !important;

  text-align: center;

  padding: 5px 15px 8px 15px;

}



.buttonM i {

  padding-right: 7px;

}



.buttonM:hover {

  background-color: #EF0088;

}



.buttonBD {

  min-width: 120px;

  float: left;

  border: 1px solid #DB5F8E;

  border-radius: 18px;

  font-size: 15px;

  font-weight: 400;

  color: #DB5F8E;

  text-align: center;

  padding: 7px 15px 8px 15px;

}



.buttonBD i {

  padding-right: 7px;

}



.buttonBD i.fa-arrow-left {

  font-size: 13px;

}



.buttonBD:hover {

  background-color: #DB5F8E;

  color: white;

}



.button-txt {

  float: left;

  font-size: 15px;

  letter-spacing: 0.02rem;

}



.button-txt i.fa-arrow-right {

  font-size: 12px;

  padding-left: 8px;

}



/*top-button*/

.scrolltop {

  display: none;

  width: 100%;

  margin: 0 auto;

  position: fixed;

  bottom: 0;

  right: 0;

  z-index: 99;

}



.scroll {

  width: 45px;

  height: 45px;

  background: #d75d73;

  border: 2px solid #FCE2E6;

  border-radius: 50%;

  text-align: center;

  margin: 0;

  cursor: pointer !important;

  position: absolute;

  right: 30px;

  bottom: 30px;

  transition: 0.5s;

  -moz-transition: 0.5s;

  -webkit-transition: 0.5s;

  -o-transition: 0.5s;

}



.scroll i {

  font-size: 17px;

  color: white;

  text-align: center;

  transition: 0.5s;

  -moz-transition: 0.5s;

  -webkit-transition: 0.5s;

  -o-transition: 0.5s;

  position: absolute;

  top: 47%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.scroll:hover {

  background: #C8314C;

  transition: 0.5s;

  -moz-transition: 0.5s;

  -webkit-transition: 0.5s;

  -o-transition: 0.5s;

}



/*---------- CONTENT ----------*/

.content-padding {

  padding: 80px 0;

}



.content-padding.foot-pad {

  padding-bottom: 140px;

}



.content-center {

  float: none;

  margin: 0 auto;

  display: table;

}



.txt-content {

  margin-bottom: 35px;

}



.txt-content p {

  line-height: 1.7rem;

  margin-bottom: 20px;

}



.txt-content p:last-child {

  margin-bottom: 0 !important;

}



.txt-content ul {

  margin-bottom: 20px;

}



.txt-content ul li {

  line-height: 1.7rem;

  margin-bottom: 4px;

}



.txt-content.indent {

  text-indent: 40px;

}



.txt-content strong {

  font-weight: 600;

  color: #363636;

}



.img-width img {

  width: 100%;

  height: auto;

}



.img-width.decor {

  position: relative;

}



.img-width.decor:before {

  content: '';

  width: calc(100% - 14px);

  height: calc(100% - 14px);

  border: 2px solid white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.top-banner {

  height: 250px;

  background: #ebebeb;

  position: relative;

}



.top-banner:before {

  content: '';

  width: 100%;

  height: 100%;

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: 50% 50%;

  background-size: cover;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  mix-blend-mode: luminosity;

  opacity: 0.8;

}



.top-banner.w-filter .banner-txt {

  top: calc(50% - 20px);

}



.banner-txt {

  border-top: 1px solid white;

  border-bottom: 1px solid white;

  text-align: center;

  padding: 5px 30px;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.banner-txt p {

  font-family: 'Chulalongkorn-B';

  font-size: 36px;

  color: #707070;

  letter-spacing: 0.2rem;

  white-space: nowrap;

  margin-bottom: 0;

}



.header-wButton {

  margin-bottom: 40px;

}



.header-wButton h2 {

  text-align: left;

  margin-bottom: 0;

}



.header-wButton .buttonBD {

  float: right;

  margin-top: 5px;

}



/*----------- FILTER -----------*/

.filterBox {

  border-radius: 10px;

  padding: 40px 45px 32px 45px;

  margin-top: -120px;

  margin-bottom: 75px;

  position: relative;

  z-index: 1;

}



.filterBox:before, .filterBox:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

}



.filterBox:before {

  border-radius: 10px;

  background: #d75d73;

  background: -webkit-gradient(linear, left bottom, left top, from(#d75d73), to(#f6adb9));

  background: linear-gradient(0deg, #d75d73 0%, #f6adb9 100%);

  top: 0;

  left: 0;

  z-index: -1;

}



.filterBox:after {

  background-image: url(../images/bg/bg-02.jpg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  mix-blend-mode: luminosity;

  opacity: 0.25;

  z-index: -1;

}



.filterBox .form-select {

  border-radius: 22px;

  font-size: 17px;

  text-align: center;

  padding: 11px 15px;

  margin-bottom: 30px;

}



.filterBox .form-select option {

  font-size: 16px;

}



.filterBox .buttonM {

  min-width: 140px;

  border: 2px solid white;

  border-radius: 23px;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 0.01rem;

  padding: 9px 15px;

}



.filterBox .buttonM i {

  font-size: 15px;

  padding-right: 8px;

}



/* FORM */

.input-form .form-control {

  background-color: white;

  border: none;

  border-radius: 0;

  font-size: 15px;

  line-height: normal;

  color: #636363;

  padding: 7px 12px;

  margin-bottom: 22px;

}



.input-form textarea.form-control {

  height: 100px;

  border-radius: 0;

  margin-bottom: 40px;

}



.input-form p {

  line-height: normal;

  color: #363636;

  white-space: nowrap;

  margin-bottom: 10px;

}



.form-select {

  background-color: white;

  border: none;

  border-radius: 0;

  font-size: 16px;

  line-height: normal !important;

  color: #636363;

  padding: 8px 15px;

  margin-bottom: 22px;

}



.form-select option {

  font-weight: 300;

  color: #707070;

}



/*------------ PAGE ------------*/

.pagination {

  margin-top: 2rem;

}



.pagination li {

  margin: 0 3px !important;

}



.pagination .page-link {

  width: 44px;

  height: 44px;

  background: none;

  border: none;

  border-radius: 50%;

  font-size: 19px;

  font-weight: 400;

  line-height: 42px;

  color: #959595;

  text-align: center;

  padding: 0;

}



.pagination .page-link i {

  font-size: 17px;

}



.pagination .page-link:hover {

  color: #DB5F8E;

}



.pagination .page-item.active .page-link {

  background-color: #f6adb9;

  color: white;

}



/*------------ OWL -------------*/

.slide-navButton {

  position: relative;

}



.slide-navButton .owl-carousel .owl-nav {

  margin-top: 0;

  z-index: 99;

}



.slide-navButton .owl-carousel .owl-nav .owl-prev, .slide-navButton .owl-carousel .owl-nav .owl-next {

  width: 40px;

  height: 40px;

  background: #d75d73;

  border-radius: 50%;

  margin: 0;

  -webkit-box-shadow: none;

          box-shadow: none;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  z-index: 99;

}



.slide-navButton .owl-carousel .owl-nav .owl-prev:hover, .slide-navButton .owl-carousel .owl-nav .owl-next:hover {

  background-color: #f6adb9;

}



.slide-navButton .owl-carousel .owl-nav i {

  font-size: 15px;

  color: white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.slide-navButton .owl-carousel .owl-nav .owl-prev {

  left: 0;

}



.slide-navButton .owl-carousel .owl-nav .owl-next {

  right: 0;

}



.slide-navButton .owl-carousel .owl-nav .disabled {

  opacity: 0.6;

}



.slide-navButton .owl-carousel .owl-dots {

  margin-top: 0;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.slide-navButton .owl-carousel .owl-dots .owl-dot.active span {

  width: 14px;

  height: 14px;

  background: #DB5F8E !important;

  margin: 3px 6px;

}



.slide-navButton .owl-carousel .owl-dots .owl-dot span {

  width: 10px;

  height: 10px;

  background: #d7d7d7;

  margin: 5px 8px;

}



.slide-navButton .owl-carousel .owl-dots .owl-dot:hover span {

  background-color: #898989;

}



.slide-navButton .owl-carousel.nav-out .owl-nav .owl-prev {

  left: -50px;

}



.slide-navButton .owl-carousel.nav-out .owl-nav .owl-next {

  right: -50px;

}



.slide-navButton .owl-theme .owl-nav.disabled + .owl-dots {

  margin-top: 0;

}



/*------- INDEX -COVER --------*/

.index-pinkBG {

  height: 100%;

  padding: 75px 0 55px 0;

  position: relative;

}



.index-pinkBG:before, .index-pinkBG:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

}



.index-pinkBG:before {

  background-color: #f6adb9;

  left: 0;

  z-index: -2;

}



.index-pinkBG:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.7;

  z-index: -1;

}



.index-grayBG {

  width: 100%;

  height: 30%;

  background: #F5F5F5;

  position: absolute;

  bottom: 0;

  left: 0;

  z-index: -4;

}



.index-grayBG:before {

  content: '';

  width: 100%;

  height: 100%;

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.8;

  z-index: -3;

  position: absolute;

  bottom: 0;

  left: 0;

}



.index-img-cover {

  position: relative;

}



.index-img-cover .img-width.first-page {

  border-radius: 20px 20px 0 0;

  overflow: hidden;

}



.logo-cover {

  background: white;

  border-radius: 50px;

  padding: 16px 35px 20px 35px;

  position: absolute;

  top: -45px;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.logo-cover img {

  width: auto;

  height: 54px;

}



.index-coverBox {

  background-color: white;

  border-radius: 0 0 20px 20px;

  padding: 35px 45px 55px 45px;

  margin-bottom: 50px;

}



.index-coverBox h1 {

  font-size: 40px;

  color: #c80072;

  letter-spacing: 0.025rem;

  margin-bottom: 28px;

}



.index-cover-info {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.index-cover-info li {

  float: left;

  border: 3px solid #f6adb9;

  border-radius: 25px;

  padding: 4px 47px 4px 25px;

  margin: 0 35px 0 20px;

  position: relative;

}



.index-cover-info li:first-child {

  margin-left: 0 !important;

}



.index-cover-info li:last-child {

  margin-right: 0 !important;

}



.index-cover-info li p {

  font-family: 'Chulalongkorn-B';

  font-size: 24px;

  color: #111111;

  letter-spacing: 0.015rem;

  margin-bottom: 0;

}



.index-cover-info li img {

  width: 48px;

  height: auto;

  position: absolute;

  top: 50%;

  right: -15px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.learner-type-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.learner-type-button li {
  float: left;
  padding: 0 15px;
}

.learner-type-button li a {
  min-width: 270px;
  border-radius: 28px;
  font-family: 'Chulalongkorn-B';
  font-size: 26px;
  letter-spacing: 0.02rem;
  padding: 7px 30px;
  margin-bottom: 32px;
  position: relative;
}

.learner-type-button li a:before {
  content: '';
  width: calc(100% + 9px);
  height: calc(100% + 9px);
  border-radius: 35px;
  border: 1px solid #c80072;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.learner-type-button li:last-child {
  width: 100%;
}

.learner-type-button li:last-child a {
  float: none;
  margin: 0 auto;
  display: table;
}



.academicBG {

  background-color: rgba(255, 255, 255, 0.5);

  border-radius: 20px;

  padding: 65px 25px 30px 25px;

  margin-top: -26px;

}



.academicBG .academic-list li {

  width: calc(100% / 9);

  padding: 0 6px;

  margin-bottom: 12px;

}



.academicBG .academic-list li .img-width {

  padding: 0;

  margin-bottom: 0;

}



.academicBG .academic-list li:hover {

  -webkit-transform: unset;

          transform: unset;

}



/*----------- INDEX -----------*/

.main-banner.owl-carousel .owl-dots {

  top: 50%;

  bottom: auto;

  left: auto;

  right: 2%;

  -webkit-transform: translateX(0);

          transform: translateX(0);

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.main-banner.owl-carousel .owl-dots .owl-dot {

  display: block;

}



.main-banner.owl-carousel .owl-dots .owl-dot.active span {

  width: 16px;

  height: 16px;

  background: none !important;

  border: 2px solid white;

  margin: 7px 3px;

}



.main-banner.owl-carousel .owl-dots .owl-dot.active span:hover {

  border-color: #DB5F8E;

}



.main-banner.owl-carousel .owl-dots .owl-dot span {

  background: white;

  margin: 9px 6px;

}



.main-banner.owl-carousel .owl-dots .owl-dot:hover span {

  background-color: #c80072;

}



.categoryBG {

  background: white;

  background-image: url(../images/index/categoryBG.jpg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  padding: 80px 0 125px 0;

  margin-bottom: 140px;

}



.course-category {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.course-category li {

  width: calc(100% / 5);

  max-width: 214px;

  float: left;

  padding: 0 8px 16px 8px;

}



.course-category li a {

  background-color: #C16382;

  border-radius: 7px;

  padding: 13px 15px 16px 15px;

}



.course-category li a:hover {

  -webkit-transform: scale(1.05);

          transform: scale(1.05);

  background-color: #D28DA4;

}



.course-category li a.c-language {

  background-color: #828BC4;

}



.course-category li a.c-language:hover {

  background-color: #9DA4D1;

}



.course-category li a.c-technology {

  background-color: #F49522;

}



.course-category li a.c-technology:hover {

  background-color: #F6A747;

}



.course-category li a.c-management {

  background-color: #28A9E0;

}



.course-category li a.c-management:hover {

  background-color: #5BBEE7;

}



.course-category li a.c-health {

  background-color: #40AC6F;

}



.course-category li a.c-health:hover {

  background-color: #62C58D;

}



.category-icon {

  float: none;

  margin: 0 auto 7px auto;

  display: table;

}



.category-icon img {

  width: auto;

  height: 100px !important;

}



.category-topic {

  width: 100%;

  height: 52px;

  text-align: center;

  display: table;

}



.category-topic p {

  font-family: 'Chulalongkorn-R';

  font-size: 20px;

  line-height: 1.55rem;

  color: white;

  letter-spacing: 0.02rem;

  margin-bottom: 0;

  display: table-cell;

  vertical-align: middle;

}



.pink-topBG {

  padding-top: 75px;

  position: relative;

}



.pink-topBG:before, .pink-topBG:after {

  content: '';

  width: 100%;

  height: 46%;

  position: absolute;

  top: 0;

}



.pink-topBG:before {

  background-color: #f6adb9;

  left: 0;

  z-index: -2;

}



.pink-topBG:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.7;

  z-index: -1;

}



.pink-topBG h1 {

  color: #252525;

  margin-bottom: 35px;

}



.newcourse-slide.owl-carousel .owl-nav .owl-prev, .newcourse-slide.owl-carousel .owl-nav .owl-next {

  top: 35%;

}



.newcourse-slide .items {

  padding: 12px 13px;

}



.newcourse-slide .courseBox {

  margin-bottom: 40px;

}



.newcourse-slide .courseBox-info {

  min-height: 128px;

}



.newcourse-slide .course-name {

  min-height: 61px;

  margin-bottom: 6px;

}



.newcourse-slide .course-name p {

  font-size: 19px;

  line-height: 1.9rem;

}



.newcourse-slide .courseID {

  font-size: 16px;

  margin-bottom: 15px;

}



.newcourse-slide .cate-tag {

  line-height: 22px;

  padding: 0 12px;

}



.newcourse-slide .capacity {

  font-size: 13px;

  padding: 3px 12px 4px 12px;

}



.course-slide {

  margin-bottom: 85px;

}



.course-pad .items {

  padding: 10px;

}



.course-pad .courseBox {

  margin-bottom: 55px;

}



.news-section {

  padding: 75px 0 100px 0;

  position: relative;

}



.news-section:before, .news-section:after {

  content: '';

  width: 48%;

  height: 45%;

  position: absolute;

  top: 0;

  left: 0;

}



.news-section:before {

  background: #d75d73;

  z-index: -2;

}



.news-section:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: bottom center;

  background-size: cover;

  opacity: 0.55;

  z-index: -1;

}



.news-section h1 {

  font-size: 40px;

  line-height: 2.8rem;

  color: white;

  text-align: left;

  letter-spacing: 0.15rem;

  margin-bottom: 0;

  position: absolute;

  top: 25%;

}



.news-section h1 span {

  font-family: 'Chulalongkorn-R';

  font-size: 36px;

  display: block;

}



.news-slide.owl-carousel .owl-nav .owl-prev, .news-slide.owl-carousel .owl-nav .owl-next {

  width: 48px;

  height: 48px;

  top: 58%;

}



.news-slide.owl-carousel .owl-nav i {

  font-size: 18px;

}



.news-slide.owl-carousel .owl-nav .owl-prev {

  left: -51%;

}



.news-slide.owl-carousel .owl-nav .owl-next {

  right: auto;

  left: calc(-51% + 64px);

}



.news-slide .items {

  padding: 10px;

}



.news-slide .newsBox:hover {

  -webkit-transform: scale(1.03);

          transform: scale(1.03);

}



.news-slide .newsBox:hover .img-width {

  background-color: white;

}



.news-slide .newsBox:hover .img-width img {

  opacity: 1;

  mix-blend-mode: normal;

}



.news-slide .newsBox:hover .news-topic p {

  color: #c80072;

}



.news-slide .newsBox:hover .txt-content p {

  color: #898989;

}



/*----- COURSE - DETAIL -------*/

.pinkBG {

  padding: 75px 0;

  position: relative;

}



.pinkBG:before, .pinkBG:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}



.pinkBG:before {

  background: #f6adb9;

  z-index: -2;

}



.pinkBG:after {

  background-image: url(../images/bg/bg-04.jpg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.4;

  z-index: -1;

}



.pinkBG .row > .col-lg-6:first-child {

  padding-right: 20px;

}



.pinkBG .row > .col-lg-6:last-child {

  padding-left: 20px;

}



.pinkBG .row > .col-lg-6:last-child .img-width {

  border: 4px solid white;

}



.course-infoPKbox h4 {

  margin-bottom: 8px;

}



.course-infoPKbox h6 {

  font-family: 'Sarabun', sans-serif;

  font-size: 19px;

  font-weight: 600;

  letter-spacing: 0.01rem;

  margin-bottom: 20px;

}



.course-info {

  width: 100%;

  float: left;

  margin-bottom: 25px;

}



.course-info li {

  width: 100%;

  float: left;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.85rem;

  color: #363636;

  letter-spacing: 0.01rem;

  margin-bottom: 3px;

}



.course-info li strong {

  float: left;

  font-weight: 600;

  color: #252525;

  padding-right: 12px;

}



.course-info li.category strong {

  padding-right: 15px;

}



.course-info li.category .cate-tag {

  margin-top: 3px;

}



.course-info li .cate-tag {

  min-width: 70px;

  border: none !important;

  background-color: #C16382;

  font-size: 13px;

  font-weight: 400;

  line-height: 24px;

  letter-spacing: 0.02rem;

  color: white !important;

  padding: 0 13px;

}



.course-info li .cate-tag.language {

  background-color: #828BC4;

}



.course-info li .cate-tag.technology {

  background-color: #F49522;

}



.course-info li .cate-tag.management {

  background-color: #28A9E0;

}



.course-info li .cate-tag.health {

  background-color: #40AC6F;

}



.noteBox {

  background-color: rgba(255, 255, 255, 0.5);

  padding: 12px 20px;

  margin-bottom: 30px;

}



.noteBox p {

  font-weight: 500;

  line-height: 1.6rem;

  color: #c80072;

  letter-spacing: 0.01rem;

  margin-bottom: 10px;

}



.noteBox p:last-child {

  margin-bottom: 0 !important;

}



.register-button li {

  float: left;

  margin-right: 15px;

}



.register-button li:last-child {

  margin-right: 0 !important;

}



.register-button li .buttonM {

  min-width: 200px;

  border: 2px solid white;

  border-radius: 25px;

  font-size: 17px;

  text-align: center;

  padding: 8px 20px 11px 20px;

}



.container-vdo {

  width: 100%;

  padding-top: 56.25%;

  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

  position: relative;

  overflow: hidden;

}



.container-vdo.cover {

  margin-bottom: 40px;

}



.responsive-vdo {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

}



.imgBox {

  margin-bottom: 120px;

  position: relative;

}



.imgBox:before, .imgBox:after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

}



.imgBox:before {

  background: #F5F5F5;

  z-index: -4;

}



.imgBox:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.65;

  top: 0;

  right: 0;

  z-index: -3;

}



.imgBox .row > .col-lg-6:first-child {

  padding-right: 0;

}



.imgBox .row > .col-lg-6:first-child .img-width {

  z-index: -2;

}



.imgBox .row > .col-lg-6:last-child {

  padding-left: 0;

  position: relative;

}



.imgBox-BD {

  z-index: -1;

}



.imgBox-BD:before {

  content: '';

  width: calc(100% - 14px);

  height: calc(100% - 14px);

  border: 2px solid white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.imgBox-info {

  width: calc(100% - 12px);

  letter-spacing: 0.01rem;

  padding: 25px 50px;

  position: absolute;

  top: 45%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.imgBox-info .row {

  padding: 12px 0;

}



.imgBox-info .row .col-lg-4 {

  font-family: 'Chulalongkorn-B';

  font-size: 21px;

  line-height: 2.1rem;

  color: #252525;

}



.imgBox-info .row .col-lg-8 {

  font-size: 18px;

  line-height: 1.95rem;

  padding-left: 0;

}



.topicPK {

  float: left;

  background: #f6adb9;

  background: linear-gradient(120deg, #f6adb9 0%, #f0788b 70%);

  border-radius: 25px;

  padding: 8px 28px 8px 56px;

  margin-bottom: 25px;

  position: relative;

}



.topicPK p {

  font-family: 'Chulalongkorn-B';

  font-size: 22px;

  line-height: 32px;

  color: white;

  letter-spacing: 0.03rem;

  margin-bottom: 0;

}



.icon-circle {

  width: 40px;

  height: 40px;

  background-color: white;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  left: 4px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.icon-circle img {

  width: 24px;

  height: auto;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.genBox {

  min-height: 222px;

  color: #464646;

  padding: 25px 25px 28px 25px;

  margin: 15px 0;

  position: relative;

}



.genBox:before, .genBox:after {

  content: '';

  position: absolute;

}



.genBox:before {

  width: 100%;

  height: 100%;

  background: #FCE2E6;

  top: 0;

  left: 0;

  z-index: -2;

}



.genBox:after {

  width: calc(100% - 10px);

  height: calc(100% - 10px);

  border: 1px solid white;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  z-index: -1;

}



.genBox h5 {

  float: none;

  text-align: center;

  padding: 0 5px 2px 5px;

  margin: 0 auto 20px auto;

  display: table;

  position: relative;

}



.genBox h5:after {

  content: '';

  width: 100%;

  height: 2px;

  background-color: #d75d73;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.genBox.now-open:before {

  background: #f49caa;

  background: -webkit-gradient(linear, left bottom, left top, from(#f49caa), color-stop(65%, #fce2e6));

  background: linear-gradient(0deg, #f49caa 0%, #fce2e6 65%);

}



.genBox.now-open h5:after {

  background-color: white;

}



.genBox.now-open .period li {

  color: #363636;

}



.genBox.now-open .button-list li .buttonPK:hover {

  background-color: #c80072;

}



.genBox.coming-soon:before {

  background: #d7d7d7;

  background: -webkit-gradient(linear, left bottom, left top, from(#d7d7d7), color-stop(65%, whitesmoke));

  background: linear-gradient(0deg, #d7d7d7 0%, whitesmoke 65%);

}



.period {

  margin-bottom: 20px;

}



.period li {

  line-height: 1.85rem;

  text-align: center;

  letter-spacing: 0.01rem;

}



.button-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.button-list li {

  float: left;

  margin-right: 12px;

}



.button-list li:last-child {

  margin-right: 0 !important;

}



.button-list li .buttonPK {

  min-width: 105px;

  border: 1px solid white;

  font-size: 14px;

  letter-spacing: 0.01rem;

  padding: 6px 12px 9px 12px;

}



.ribbon-tag {

  height: 24px;

  float: left;

  background-color: #c80072;

  border-radius: 3px 0 0 3px;

  line-height: 24px;

  font-size: 12px;

  font-weight: 500;

  color: white;

  letter-spacing: 0.02rem;

  padding: 0 6px 0 9px;

  position: absolute;

  top: 12px;

  left: -2px;

}



.ribbon-tag:after {

  content: '';

  width: 8px;

  height: 24px;

  background-image: url(../images/icon/tag-decor.svg);

  background-repeat: no-repeat;

  position: absolute;

  top: 0;

  right: -8px;

}



.coming-soon-tag {

  min-width: 125px;

  float: none;

  background-color: #FAD0D7;

  border: 1px solid white;

  border-radius: 20px;

  font-size: 14px;

  font-weight: 500;

  color: #d75d73;

  text-align: center;

  letter-spacing: 0.015rem;

  padding: 7px 18px 8px 18px;

  margin: 0 auto;

  display: table;

}



.doubleBD {

  border-top: 1px solid #ebebeb;

  padding-bottom: 4px;

  margin: 55px 0 75px 0;

  position: relative;

}



.doubleBD:after {

  content: '';

  width: 100%;

  height: 1px;

  background-color: #ebebeb;

  position: absolute;

  bottom: 0;

  left: 0;

}



.course-detail > .row.half-content {

  margin-bottom: 65px;

}



.course-detail > .row > .col-lg-6:first-child {

  padding-right: 20px;

}



.course-detail > .row > .col-lg-6:last-child {

  padding-left: 20px;

}



.list-decimal, .list-check, .list-decor {

  margin-bottom: 45px;

}



.list-decimal li, .list-check li, .list-decor li {

  line-height: 1.7rem;

  margin-bottom: 5px;

}



.list-decimal {

  list-style: decimal;

  padding-left: 20px;

}



.list-check {

  list-style: none;

}



.list-check li {

  padding-left: 20px;

  position: relative;

}



.list-check li:before {

  content: '';

  width: 14px;

  height: 14px;

  background-image: url(../images/icon/icon-checklist.svg);

  position: absolute;

  top: 8px;

  left: 0;

}



.list-decor {

  list-style: disc;

  padding-left: 20px;

}



.list-decor li::marker {

  color: #DB5F8E;

}



.teacher-list {

  margin-top: 15px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.teacher-list > li {

  width: 25%;

  float: left;

  padding: 0 12px;

  margin-bottom: 45px;

}



.teacher-info .img-width {

  float: none;

  margin: 0 auto 15px auto;

  display: table;

}



.teacher-info .img-width img {

  width: auto;

  height: 170px;

}



.teacher-info ul li {

  line-height: 1.65rem;

  text-align: center;

}



.teacher-info ul li:first-child {

  font-size: 17px;

  font-weight: 600;

  line-height: 1.9rem;

  color: #252525;

  padding-bottom: 10px;

  margin-bottom: 14px;

  position: relative;

}



.teacher-info ul li:first-child:after {

  content: '';

  width: 45px;

  height: 2px;

  background-color: #f6adb9;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.gray-topBG {

  padding: 75px 0 120px 0;

  position: relative;

}



.gray-topBG:before, .gray-topBG:after {

  content: '';

  width: 100%;

  height: 45%;

  position: absolute;

  top: 0;

}



.gray-topBG:before {

  background-color: #F5F5F5;

  left: 0;

  z-index: -2;

}



.gray-topBG:after {

  background-image: url(../images/bg/bg-04.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.55;

  z-index: -1;

}



.gray-topBG h1 {

  color: #252525;

  margin-bottom: 35px;

}



.gray-topBG .courseBox {

  margin-bottom: 0;

}



/*---------- COURSE -----------*/

.courseBox {

  border-bottom: 3px solid #DB5F8E;

  padding-bottom: 25px;

  margin-bottom: 60px;

}



.courseBox .img-width {

  border-radius: 12px;

  overflow: hidden;

  margin-bottom: 12px;

}



.courseBox:hover {

  -webkit-transform: scale(1.025);

          transform: scale(1.025);

}



.courseBox:hover .course-name p {

  color: #707070;

}



.courseBox-info {

  min-height: 108px;

}



.course-name {

  min-height: 53px;

  margin-bottom: 5px;

}



.course-name p {

  font-size: 17px;

  font-weight: 600;

  line-height: 1.65rem;

  color: #252525;

  -webkit-line-clamp: 2;

}



.courseID {

  font-size: 14px;

  color: #898989;

  letter-spacing: 0.01rem;

  margin-bottom: 10px;

}



.cate-tag {

  min-width: 55px;

  float: left;

  border: 1px solid #C16382;

  border-radius: 15px;

  font-size: 12px;

  font-weight: 500;

  line-height: 18px;

  color: #C16382;

  text-align: center;

  padding: 0 10px;

}



.cate-tag.language {

  border-color: #828BC4;

  color: #828BC4;

}



.cate-tag.technology {

  border-color: #F49522;

  color: #F49522;

}



.cate-tag.management {

  border-color: #28A9E0;

  color: #28A9E0;

}



.cate-tag.health {

  border-color: #40AC6F;

  color: #40AC6F;

}



.capacity {

  float: right;

  background-color: #f6adb9;

  border-radius: 3px;

  font-size: 12px;

  font-weight: 500;

  color: #EA435E;

  text-align: center;

  padding: 2px 10px 3px 10px;

}



.capacity.full {

  background-color: #EA435E;

  font-weight: 400;

  color: white;

  letter-spacing: 0.01rem;

}



.tag-section .col-lg-4 {

  padding-left: 0;

}



.course-colPad.all-year .courseBox-info {

  min-height: 106px;

}



/*-------- CURRICULUM ---------*/

.curriculum-info {

  margin: 90px 0 120px 0;

  position: relative;

}



.curriculum-info:before, .curriculum-info:after {

  content: '';

  width: 52%;

  height: 68%;

  position: absolute;

  bottom: 0;

  right: 0;

}



.curriculum-info:before {

  background-color: #F5F5F5;

  z-index: -2;

}



.curriculum-info:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.65;

  z-index: -1;

}



.curriculum-info .wrap-pad {

  width: 94%;

}



.curriculum-info .row .col-lg-6:last-child {

  padding-left: 40px;

}



.curriculum-info .img-width {

  position: relative;

}



.curriculum-info .img-width:before {

  content: '';

  width: calc(100% - 14px);

  height: calc(100% - 14px);

  border: 1px solid white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.curriculum-info h2 {

  float: left;

  text-align: left;

  padding-bottom: 4px;

  margin: 0;

  display: block;

  position: absolute;

  top: calc(21% - 25px);

}



.curriculum-info h2:after {

  width: 85px;

  height: 3px;

  left: 0;

  -webkit-transform: translateX(0);

          transform: translateX(0);

}



.curriculum-info h5 {

  font-size: 26px;

  color: #DB5F8E;

  margin-bottom: 0;

  position: absolute;

  top: calc(16% - 32px);

}



.curriculum-info .txt-content {

  width: 42%;

  margin-bottom: 0;

  position: absolute;

  top: calc(50% + 14%);

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.curriculum-info .txt-content p {

  color: #464646;

  -webkit-line-clamp: 9;

}



.academic-list {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.academic-list li {

  width: calc(100% / 5);

  float: left;

  padding: 0 10px;

  margin-bottom: 35px;

}



.academic-list li .img-width {

  padding: 0 9%;

  margin-bottom: 12px;

}



.academic-list li:hover {

  -webkit-transform: scale(1.03);

          transform: scale(1.03);

}



.academic-list li:hover .academic-name p {

  color: #DB5F8E;

}



.academic-name p {

  font-size: 17px;

  font-weight: 600;

  line-height: 1.8rem;

  color: #252525;

  text-align: center;

  margin-bottom: 0;

}



/*--------- KNOWLEDGE ---------*/

.type-slide {

  margin-bottom: 85px;

}



.type-slide.owl-carousel .owl-nav .owl-prev, .type-slide.owl-carousel .owl-nav .owl-next {

  width: 32px;

  height: 32px;

  background: #f6adb9;

}



.type-slide.owl-carousel .owl-nav .owl-prev:hover, .type-slide.owl-carousel .owl-nav .owl-next:hover {

  background-color: #F0788C;

}



.type-slide.owl-carousel .owl-nav i {

  font-size: 13px;

}



.type-slide.owl-carousel .owl-nav .owl-prev {

  left: -45px;

}



.type-slide.owl-carousel .owl-nav .owl-next {

  right: -45px;

}



.type-slide .items {

  padding: 0 7px;

}



.type-slide .items.active .topic-type {

  background: #DB5F8E;

  color: white !important;

  letter-spacing: 0.025rem;

}



.topic-type {

  border: 1px solid #DB5F8E;

  border-radius: 25px;

  background: white;

  font-family: 'Chulalongkorn-B';

  font-size: 20px;

  color: #DB5F8E;

  letter-spacing: 0.02rem;

  text-align: center;

  padding: 7px 15px;

}



.topic-type:hover {

  border-color: #c80072;

  color: #c80072;

}



.knowledgeBox {

  border-top: 3px solid #DB5F8E;

  padding-top: 13px;

  margin-bottom: 70px;

}



.knowledgeBox .img-width {

  border-radius: 12px;

  padding-top: 78%;

  position: relative;

  overflow: hidden;

}



.knowledgeBox .img-width img {

  width: auto !important;

  height: 100% !important;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.knowledgeBox .news-img {

  margin-bottom: 20px;

}



.knowledgeBox .txt-content {

  margin-bottom: 0;

}



.knowledgeBox .txt-content p {

  font-size: 15px;

  line-height: 1.6rem;

  color: #636363;

  -webkit-line-clamp: 3;

}



.knowledgeBox:hover .img-width {

  background-color: #f6adb9;

}



.knowledgeBox:hover .img-width img {

  opacity: 0.6;

  mix-blend-mode: luminosity;

}



.knowledgeBox:hover .knowledge-topic p {

  color: #c80072;

}



.knowledgeBox:hover .txt-content p {

  color: #898989;

}



.knowledge-topic {

  margin-bottom: 8px;

}



.knowledge-topic p {

  font-size: 18px;

  font-weight: 600;

  line-height: 1.8rem;

  color: #252525;

  letter-spacing: 0.01rem;

  -webkit-line-clamp: 2;

}



.knowledge-tag {

  min-width: 55px;

  float: left;

  background-color: #F28A9B;

  border-radius: 15px;

  font-size: 12px;

  font-weight: 400;

  line-height: 21px;

  color: white;

  text-align: center;

  letter-spacing: 0.02rem;

  padding: 0 10px 1px 10px;

  margin-bottom: 15px;

}



/*----------- NEWS ------------*/

.newsBox {

  margin-bottom: 70px;

}



.newsBox .img-width {

  border-radius: 12px;

  padding-top: 78%;

  position: relative;

  overflow: hidden;

}



.newsBox .img-width img {

  width: auto !important;

  height: 100% !important;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.newsBox .txt-content {

  margin-bottom: 0;

}



.newsBox .txt-content p {

  font-size: 15px;

  line-height: 1.6rem;

  color: #636363;

  -webkit-line-clamp: 2;

}



.newsBox:hover .img-width {

  background-color: #f6adb9;

}



.newsBox:hover .img-width img {

  opacity: 0.6;

  mix-blend-mode: luminosity;

}



.newsBox:hover .news-topic p {

  color: #c80072;

}



.newsBox:hover .txt-content p {

  color: #898989;

}



.news-img {

  border-radius: 12px;

  margin-bottom: 15px;

  overflow: hidden;

}



.date {

  float: left;

  font-size: 15px;

  font-weight: 500;

  color: #DB5F8E;

  letter-spacing: 0.01rem;

  margin-bottom: 6px;

}



.news-topic {

  margin-bottom: 7px;

}



.news-topic p {

  font-size: 19px;

  font-weight: 600;

  color: #252525;

  letter-spacing: 0.01rem;

  -webkit-line-clamp: 1;

}



/* DETAIL */

.detail-page .row .col-lg-9 {

  padding-right: 20px;

}



.detail-page .row .col-lg-9 .date {

  margin-bottom: 8px;

}



.detail-page .img-width.cover {

  border-radius: 12px;

  margin-bottom: 40px;

  overflow: hidden;

}



.detail-page .txt-content {

  margin-bottom: 60px;

}



.detail-page .knowledge-tag {

  font-size: 13px;

  line-height: 24px;

  padding: 0 12px;

  margin-bottom: 10px;

}



.news-gallery {

  width: 100%;

  float: left;

  margin-bottom: 60px;

}



.news-gallery li {

  width: calc(100% / 5);

  float: left;

  padding: 5px;

}



.news-gallery li .img-width {

  padding-top: 70%;

  position: relative;

  overflow: hidden;

  margin-bottom: 0;

}



.news-gallery li .img-width img {

  width: auto !important;

  height: 100% !important;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.fancybox__thumbs .carousel__slide .fancybox__thumb::after {

  border-color: #DB5F8E !important;

  border-width: 4px !important;

}



/* SIDE NEWS */

.lastest-newsBox {

  background-color: #FEF4F5;

  padding: 25px 20px;

  margin-bottom: 60px;

}



.lastest-newsBox .row .col-lg-12:last-child .newsBox {

  margin-bottom: 15px;

}



.lastest-newsBox .newsBox {

  margin-bottom: 37px;

}



.lastest-newsBox h5 {

  font-size: 23px;

  border-bottom: 3px solid #DB5F8E;

  text-align: center;

  padding-bottom: 8px;

  margin-bottom: 40px;

  position: relative;

}



.lastest-newsBox .news-img {

  margin-bottom: 12px;

}



.lastest-newsBox .date {

  font-size: 12px;

  margin-bottom: 5px;

}



.lastest-newsBox .news-topic {

  margin-bottom: 0;

}



.lastest-newsBox .news-topic p {

  font-size: 16px;

  font-weight: 500;

  -webkit-line-clamp: 2;

}



/*------------ FAQ ------------*/

.faq-slide {

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

  margin-bottom: 85px;

}



.faq-slide .items {

  padding: 0 7px;

}



.faq-slide .items:hover .faqBox {

  background-color: #FEF4F5;

  border-color: #f6adb9;

}



.faqBox {

  border: 1px solid #DB5F8E;

  border-radius: 5px;

  padding: 22px 15px 18px 15px;

}



.faqBox.active {

  background-color: #DB5F8E !important;

}



.faqBox.active .faq-icon img {

  -webkit-filter: brightness(0) invert(1);

  filter: brightness(0) invert(1);

}



.faqBox.active .faq-topic p {

  font-family: 'Chulalongkorn-R';

  color: white;

  letter-spacing: 0.01rem;

}



.faq-icon {

  margin-bottom: 18px;

}



.faq-icon img {

  width: auto;

  height: 80px !important;

}



.faq-topic {

  width: 100%;

  height: 58px;

  text-align: center;

  display: table;

}



.faq-topic p {

  font-family: 'Chulalongkorn-B';

  font-size: 20px;

  color: #DB5F8E;

  margin-bottom: 0;

  display: table-cell;

  vertical-align: middle;

}



.FAQ-acc {

  border-bottom: 3px solid #d75d73;

  padding-bottom: 5px;

  margin-bottom: 65px;

}



.FAQ-acc .panel-group .panel {

  border-top: none;

  -webkit-box-shadow: none;

          box-shadow: none;

}



.FAQ-acc .panel-group .panel.panel-default {

  border: none;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading {

  font-size: 19px;

  font-weight: 600;

  line-height: 30px;

  color: #363636;

  border-top: 1px solid #ebebeb;

  letter-spacing: 0.01rem;

  padding: 16px 20px;

  position: relative;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading:first-child {

  border-top: none;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading.active {

  color: #c80072;

  margin-bottom: 0;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading.active a {

  background-color: #c80072;

  border-color: #c80072;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading.active a:before {

  content: '\f068';

  color: white;

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading a {

  float: right;

  width: 30px;

  height: 30px;

  border: 1px solid #DB5F8E;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  right: 20px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.FAQ-acc .panel-group .panel.panel-default .panel-heading a:before {

  content: '\f067';

  font-size: 14px;

  color: #DB5F8E;

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.FAQ-acc .panel-group .panel.panel-default .panel-collapse {

  padding: 0 20px 20px 20px;

  margin-top: 8px;

}



.FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body {

  background: #f6adb9;

  background: -webkit-gradient(linear, left bottom, left top, from(#f6adb9), to(#fce2e6));

  background: linear-gradient(0deg, #f6adb9 0%, #fce2e6 100%);

  padding: 20px 45px 25px 45px;

  z-index: 0;

  position: relative;

}



.FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body:before {

  content: '';

  width: calc(100% - 12px);

  height: calc(100% - 12px);

  border: 1px solid white;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  z-index: -1;

}



.FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .img-width, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .container-vdo {

  margin: 20px 0;

}



.FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content p {

  color: #464646;

  margin-bottom: 17px;

}



.FAQ-acc .panel-group .panel + .panel {

  margin-top: 0;

}



/*---------- CONTACT ----------*/

.contact-page h3 {

  margin-bottom: 7px;

}



.sub-topic {

  font-size: 20px;

  font-weight: 600;

  color: #c80072;

  letter-spacing: 0;

  text-align: center;

  margin-bottom: 45px;

}



.contact-info {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

  margin-bottom: 40px;

}



.contact-info > li {

  float: left;

  padding: 0 22px;

}



.contact-info > li:first-child {

  padding-left: 0 !important;

}



.contact-info > li:last-child {

  padding-right: 0 !important;

}



.contact-info > li > div {

  padding-left: 55px;

  position: relative;

}



.contact-info > li p {

  font-size: 18px;

  line-height: 42px;

  margin-bottom: 0;

}



.contact-icon {

  width: 42px;

  height: 42px;

  border: 1px solid #DB5F8E;

  border-radius: 50%;

  text-align: center;

  position: absolute;

  top: 0;

  left: 0;

}



.contact-icon i {

  font-size: 18px;

  color: #DB5F8E;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



.contact-social {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

  margin-bottom: 100px;

}



.contact-social li {

  width: 395px;

  float: left;

  padding: 0 20px;

}



.contact-social li:first-child a p {

  font-size: 20px;

  letter-spacing: 0;

}



.contact-social li a {

  background: #f6adb9;

  background: linear-gradient(120deg, #f6adb9 12%, #db5f8e 100%);

  border-radius: 35px;

  padding: 20px 20px 20px 78px;

  position: relative;

}



.contact-social li a p {

  font-family: 'Poppins';

  font-size: 23px;

  font-weight: 500;

  line-height: 30px;

  color: white;

  letter-spacing: 0.02rem;

  margin-bottom: 0;

}



.contact-social li a:hover {

  background: #DB5F8E;

}



.circle-icon {

  width: 58px;

  height: 58px;

  background-color: white;

  border-radius: 50%;

  position: absolute;

  top: 50%;

  left: 6px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.circle-icon i {

  font-size: 25px;

  color: #DB5F8E;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}



/*----------- ABOUT -----------*/

.about-img-section {

  padding: 100px 0 75px 0;

  margin-bottom: 30px;

  position: relative;

}



.about-img-section:before, .about-img-section:after {

  content: '';

  width: 94%;

  height: 60%;

  position: absolute;

  bottom: 0;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



.about-img-section:before {

  background-color: #f6adb9;

  z-index: -2;

}



.about-img-section:after {

  background-image: url(../images/bg/bg-01.jpg);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

  mix-blend-mode: luminosity;

  opacity: 0.7;

  z-index: -1;

}



.about-img-section .row .col-lg-5 {

  position: relative;

}



.about-header-txt {

  position: absolute;

  left: 0;

  bottom: 20%;

}



.about-header-txt li {

  font-family: 'Chulalongkorn-B';

  font-size: 50px;

  line-height: 3.5rem;

  color: #111111;

  letter-spacing: 0.05rem;

  text-transform: uppercase;

}



.about-header-txt li:last-child {

  font-size: 42px;

  color: #c80072;

  padding-left: 85px;

}



.about-page .txt-content p {

  font-size: 17px;

  line-height: 1.85rem;

  margin-bottom: 22px;

}



.about-page .txt-content.indent {

  text-indent: 50px;

}



.about-page h4 {

  float: none;

  margin: 0 auto 30px auto;

  display: table;

  border-bottom: 3px solid #c80072;

}



.category-group {

  padding: 0 3%;

  margin: 25px 0 65px 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.category-group li {

  width: 20%;

  float: left;

  margin: 15px 0;

}



.category-group li p {

  font-family: 'Chulalongkorn-B';

  font-size: 21px;

  line-height: 1.75rem;

  color: #252525;

  letter-spacing: 0.01rem;

  text-align: center;

  margin-bottom: 0;

}



.category-icon-circle {

  width: 140px;

  height: auto;

  float: none;

  margin: 0 auto 15px auto;

  display: table;

  /*float: none;

    background-color: $PK;

    border-radius: 50%;

    margin: 0 auto 15px auto;

    display: table;

    position: relative;

    &:before{

        content: '';

        width: calc(100% - 10px);

        height: calc(100% - 10px);

        border: 2px solid white;

        border-radius: 50%;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    img{

        width: 95px;

        height: auto;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    &.language{

        background-color: $PP;

        img{

            top: 48%;

        }

    }

    &.technology{

        background-color: $OR;

    }

    &.management{

        background-color: $Blue;

    }

    &.health{

        background-color: $GR;

    }*/

}



.partner-slide {

  display: -webkit-box !important;

  display: -ms-flexbox !important;

  display: flex !important;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.partner-slide .items:hover {

  -webkit-transform: scale(1.12);

          transform: scale(1.12);

}



/*----- PRIVACY - POLICY ------*/

.content-page h4.decor {

  float: none;

  border-bottom: 3px solid #c80072;

  margin: 0 auto 25px auto;

  display: table;

}



.content-page h5 {

  float: left;

  padding-right: 62px;

  margin-bottom: 22px;

  position: relative;

}



.content-page h5:after {

  content: '';

  width: 45px;

  height: 2px;

  background-color: #f6adb9;

  position: absolute;

  top: 50%;

  right: 0;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.content-page .txt-content {

  margin-bottom: 45px;

}



.content-page .txt-content .list-decor li {

  margin-bottom: 8px;

}



.content-page .txt-content .list-decor li ol {

  list-style: circle;

  list-style-position: inside;

  margin: 8px 0 12px 0;

}



.content-page .txt-content .list-decor li ol li {

  margin-bottom: 5px;

  text-indent: 45px;

}



.content-page .txt-content .list-decor li ol li::marker {

  color: #d75d73;

}



.content-page .txt-content a {

  font-weight: 400;

  color: #d75d73;

  text-indent: 0;

  display: inline-block;

}



.content-page .txt-content a:hover {

  color: #c80072;

}



.content-page .list-decor {

  list-style-position: inside;

  padding-left: 0;

}



.content-page .list-decor li {

  margin-bottom: 20px;

}



.content-page .list-decor li:last-child {

  margin-bottom: 0 !important;

}



.content-page .list-decor li a {

  font-weight: 400;

  color: #d75d73;

  text-decoration: underline !important;

  text-indent: 0;

  display: inline-block;

}



.content-page .list-decor li a:hover {

  color: #c80072;

}



.content-head {

  margin-bottom: 55px;

}



.content-head h3 {

  margin-bottom: 0;

}



.content-head h4 {

  color: #c80072;

  text-align: center;

  margin-bottom: 0;

}



.content-head p {

  font-size: 15px;

  color: #898989;

  text-align: center;

  margin: 10px 0 0 0;

}



.content-leftTB {

  margin: 20px 0 100px 0;

}



.content-leftTB table thead tr th {

  border-bottom: 2px solid #f6adb9;

  font-family: 'Chulalongkorn-B';

  font-size: 20px;

  font-weight: 500;

  color: #252525;

  letter-spacing: 0.02rem;

  white-space: nowrap;

  padding: 8px 15px;

}



.content-leftTB table thead tr th:first-child {

  width: 34%;

}



.content-leftTB table tbody tr:nth-child(even) {

  background-color: #FEF4F5;

}



.content-leftTB table tbody tr th, .content-leftTB table tbody tr td {

  font-size: 15px;

  line-height: 1.65rem;

  padding: 18px 15px 20px 15px;

  vertical-align: top;

}



.content-leftTB table tbody tr th {

  font-weight: 600;

  color: #363636;

}



.content-leftTB table tbody tr td ul {

  margin-bottom: 0 !important;

}



.content-leftTB table tbody tr td ul li {

  line-height: 1.65rem;

  margin-bottom: 0 !important;

}



.content-leftTB.wBD {

  border-bottom: 2px solid #f6adb9;

  padding-bottom: 5px;

}



.qrcode-section {

  padding-left: 22%;

  margin-top: 30px;

}



.qrcode {

  border: 1px solid #ebebeb;

  padding: 22px;

}



.anchor-list {

  max-width: 1300px;

  margin: 15px auto 85px auto;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.anchor-list li {

  float: left;

  margin: 6px;

}



.anchor-list li a {

  border: 1px solid #f6adb9;

  border-radius: 20px;

  font-size: 15px;

  font-weight: 400;

  color: #555555;

  letter-spacing: 0.005rem;

  padding: 8px 17px 9px 17px;

}



.anchor-list li a:hover {

  background-color: #FCE2E6;

  color: #d75d73;

}



.section-padding {

  padding-bottom: 45px;

}



.box-list {

  margin-bottom: 55px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-flow: row wrap;

          flex-flow: row wrap;

}



.box-list > li {

  width: 45%;

  float: left;

  background-color: #f9f9f9;

  border: 1px solid #ebebeb;

  padding: 28px 30px;

}



.box-list > li h6 {

  color: #c80072;

  margin-bottom: 12px;

}



.box-list > li ul li {

  line-height: 1.7rem;

  margin-bottom: 4px;

}



.box-list > li ul li strong {

  font-weight: 600;

  color: #363636;

  padding-right: 12px;

}



.box-list > li ul li a {

  color: #636363;

  display: inline-block;

}



.box-list > li ul li a:hover {

  color: #DB5F8E;

}



/*----- COOKIES - POLICY ------*/

.contentTB {

  border: 1px solid #ebebeb;

  border-radius: 5px;

  margin-bottom: 55px;

  overflow: hidden;

}



.contentTB table thead tr th {

  min-width: 120px;

  background-color: #DB5F8E;

  border-right: 1px solid white;

  font-size: 17px;

  font-weight: 500;

  color: white;

  text-align: center;

  letter-spacing: 0.02rem;

  white-space: nowrap;

  padding: 12px 15px;

}



.contentTB table thead tr th:first-child {

  border-radius: 5px 0 0 0;

}



.contentTB table thead tr th:last-child {

  border-right: none;

  border-radius: 0 5px 0 0;

}



.contentTB table tbody tr {

  border-bottom: 1px solid #ebebeb;

}



.contentTB table tbody tr:nth-child(even) {

  background-color: #f9f9f9;

}



.contentTB table tbody tr:last-child {

  border-bottom: none;

}



.contentTB table tbody tr td, .contentTB table tbody tr th {

  border-right: 1px solid #ebebeb;

  line-height: 1.7rem;

  padding: 15px 15px 17px 15px;

  vertical-align: top;

}



.contentTB table tbody tr th {

  font-weight: 600;

  color: #363636;

}



.contentTB table tbody tr td:nth-child(2), .contentTB table tbody tr td:nth-child(3) {

  text-align: center;

}



.contentTB table tbody tr td:last-child {

  border-right: none;

}



/*---------- FOOTER - MOBILE ----------*/

.footer-acc {

  margin-bottom: 18px;

}



.footer-acc .panel-group .panel {

  border-top: none;

  -webkit-box-shadow: none;

          box-shadow: none;

}



.footer-acc .panel-group .panel.panel-default {

  border: none;

}



.footer-acc .panel-group .panel.panel-default .panel-heading {

  border-top: 1px dashed #f6adb9;

  letter-spacing: 0.01rem;

  padding: 13px 10px;

}



.footer-acc .panel-group .panel.panel-default .panel-heading:first-child {

  border-top: none;

}



.footer-acc .panel-group .panel.panel-default .panel-heading.active {

  padding-bottom: 8px;

}



.footer-acc .panel-group .panel.panel-default .panel-heading.active a {

  -webkit-transition: ease 0.5s;

  transition: ease 0.5s;

}



.footer-acc .panel-group .panel.panel-default .panel-heading.active a:before {

  content: '\f078';

}



.footer-acc .panel-group .panel.panel-default .panel-heading a {

  font-size: 15px;

  font-weight: 400;

  color: white;

  letter-spacing: 0.015rem;

  position: relative;

}



.footer-acc .panel-group .panel.panel-default .panel-heading a:before {

  content: '\f054';

  font-size: 12px;

  color: #FEF4F5;

  text-align: center;

  position: absolute;

  top: 50%;

  right: 0;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.footer-acc .panel-group .panel.panel-default .panel-collapse {

  padding: 4px 20px 15px 20px;

}



.footer-acc .panel-group .panel.panel-default .panel-collapse .panel-body {

  z-index: 0;

}



.footer-acc .panel-group .panel.panel-default .panel-collapse .panel-body h6 {

  font-size: 15px;

  font-weight: 400;

  text-align: left;

  margin-bottom: 8px;

}



.footer-acc .panel-group .panel + .panel {

  margin-top: 0;

}



/*---------- MENU - MOBILE ----------*/

.nav-menu.btn {

  float: right;

  border: none;

  font-size: 20px;

  line-height: 28px !important;

  color: #DB5F8E;

  padding: 0 5px;

}



.modal.left {

  z-index: 9999;

}



.modal.left .modal-dialog {

  width: 320px;

  height: 100%;

  margin: auto;

  position: fixed;

  -webkit-transform: translate3d(0%, 0, 0);

  transform: translate3d(0%, 0, 0);

  border-right: 1px solid #ebebeb;

}



.modal.left .modal-header {

  width: 100%;

  float: left;

  background-color: white;

  border-bottom: none;

  border-radius: 0;

  padding: 30px 20px;

  position: relative;

}



.modal.left .modal-header .mainlogo {

  padding: 0;

  margin: 0;

  position: absolute;

  top: 50%;

  left: 20px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.modal.left .modal-header .mainlogo img {

  height: 32px;

}



.modal.left .modal-header .close {

  background: none;

  margin: 0;

  text-shadow: none;

  cursor: pointer;

  opacity: 1;

  z-index: 99;

  position: absolute;

  top: 50%;

  right: 5px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



.modal.left .modal-header .close i {

  font-size: 16px !important;

  color: #959595;

}



.modal.left .modal-content {

  height: 100%;

  border: none;

  border-radius: 0;

  overflow-y: auto;

}



.modal.left .modal-body {

  padding: 0;

}



.modal.left.fade .modal-dialog {

  left: -320px;

  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;

  transition: opacity 0.3s linear, left 0.3s ease-out;

}



.modal.left.fade.show .modal-dialog {

  left: 0;

}



#menu {

  width: 100%;

  height: 100%;

  background-color: white;

  position: fixed;

  left: 0%;

  z-index: 100;

  -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.1);

  box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.1);

}



#menu .menu-wrapper {

  position: relative;

  overflow-x: hidden;

}



#menu .menu {

  width: 320px;

  float: left;

}



#menu .menu ul li {

  width: 100%;

  float: left;

  border-top: 1px solid #ebebeb;

}



#menu .menu ul li i {

  font-size: 18px;

  padding-right: 9px;

}



#menu .menu ul li.active a {

  font-family: 'Chulalongkorn-B';

  color: #c80072;

  letter-spacing: 0.015rem;

}



#menu .menu ul li.active a:before {

  content: '';

  width: 4px;

  height: 100%;

  background-color: #f6adb9;

  position: absolute;

  top: 0;

  left: 0;

}



#menu .menu ul li.gray-BG {

  background-color: #464646;

}



#menu .menu ul li.gray-BG .menu-item a {

  color: white;

  letter-spacing: 0.015rem;

  padding: 13px 20px;

}



#menu .menu-item {

  width: 100%;

  float: left;

  position: relative;

}



#menu .menu-item a {

  font-family: 'Chulalongkorn-R';

  font-size: 16px;

  line-height: normal;

  color: #252525;

  letter-spacing: 0.01rem;

  padding: 11px 20px;

  display: block;

  position: relative;

}



#menu .menu-item .detail {

  width: 22px;

  height: auto;

  margin-right: 0;

  position: absolute;

  top: 50%;

  right: 12px;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  cursor: pointer;

}



#menu .menu-item .detail.back {

  right: auto;

  left: 15px;

  right: auto;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}



#menu .menu-item .flag {

  width: 20px;

  line-height: 20px;

  margin-right: 12px;

  margin-top: -3px;

}



#menu .menu-item.lang-menu a {

  font-family: 'Sarabun', sans-serif;

  font-size: 15px;

  line-height: 20px;

  color: #464646;

}



#menu .menu-slider {

  width: 2000px;

  position: relative;

  left: 0;

}



#menu .submenu {

  display: none;

}



#menu .submenu ul {

  width: 100%;

  float: left;

}



#menu .submenu ul li {

  width: 100%;

  float: left;

}



#menu .submenu ul.lang-menu a {

  font-family: 'Sarabun', sans-serif;

  font-size: 15px;

  line-height: 20px;

  letter-spacing: 0;

  padding: 13px 20px;

}



#menu .submenu-back {

  text-align: right;

}



#menu .submenu-back .menu-item {

  background-color: #F5F5F5;

}



#menu .submenu-back .menu-item a {

  font-family: 'Sarabun', sans-serif;

  font-size: 14px;

  line-height: 20px;

  font-weight: 400;

  line-height: 25px;

  color: #555555;

  padding: 13px 20px;

}



.menu-box {

  height: 100%;

  overflow: auto;

  position: relative;

}



.top-headerMBG {

  background: #e99fbb;

  background: -webkit-gradient(linear, left top, right top, from(#e99fbb), to(#db5f8e));

  background: linear-gradient(90deg, #e99fbb 0%, #db5f8e 100%);

}



/*---------- MOBILE ----------*/

@media (max-width: 1199px) {

  .wrap-pad {

    width: 100%;

    margin: 0;

  }

  body {

    font-size: 15px;

  }

  html {

    scroll-padding-top: 2.7rem;

  }

  h1 {

    font-size: 30px;

    letter-spacing: 0.015rem;

    margin-bottom: 32px;

  }

  h2 {

    font-size: 28px;

    margin-bottom: 32px;

  }

  h2.decor:after {

    width: 85px;

  }

  h3 {

    font-size: 26px;

    margin-bottom: 30px;

  }

  h4 {

    font-size: 24px;

    margin-bottom: 22px;

  }

  h5 {

    font-size: 20px;

    letter-spacing: 0.015rem;

    margin-bottom: 20px;

  }

  h6 {

    font-size: 19px;

    letter-spacing: 0.01rem;

    margin-bottom: 12px;

  }

  /*---------- HEADER -----------*/

  header {

    padding-top: 13px;

  }

  header .mainlogo {

    margin-bottom: 17px;

  }

  .top-headerBG {

    padding: 7px 0;

  }

  .top-headerBG .social li {

    margin-right: 8px;

  }

  .top-headerBG .social li a {

    width: 25px;

    height: 25px;

  }

  .top-headerBG .social li a i {

    font-size: 12px;

  }

  .mainlogo img {

    height: 34px;

  }

  .mainmenu > li {

    padding-bottom: 12px;

    margin-right: 19px;

  }

  .mainmenu > li > a {

    font-size: 15px;

    line-height: 39px;

  }

  .mainmenu > li.main-sub > a {

    padding-right: 12px;

  }

  .mainmenu > li.main-sub > a:after {

    font-size: 7px;

    top: 15px;

  }

  .mainmenu-sub {

    width: 180px;

    margin-top: 50px;

  }

  .mainmenu-sub li:last-child {

    margin-bottom: 50px;

  }

  .mainmenu-sub li a {

    font-size: 13px;

    padding: 9px 8px 10px 8px;

  }

  .social li {

    margin-right: 14px;

  }

  .social li a {

    width: 36px;

    height: 36px;

  }

  .social li a i {

    font-size: 16px;

  }

  .top-menu > li:first-child {

    margin-right: 18px;

  }

  .top-menu .input-group.search .form-control {

    min-width: 165px;

  }

  .lang li {

    margin-right: 0;

  }

  .lang li button {

    width: 25px;

    height: 25px;

    font-size: 10px;

    line-height: 25px;

    letter-spacing: 0.015rem;

  }

  .input-group.search .form-control {

    font-size: 13px;

    padding: 0 5px 0 12px;

  }

  .input-group.search .btn {

    min-height: 25px;

    font-size: 14px;

    padding-right: 28px;

  }

  .input-group.search .btn i {

    right: 9px;

  }

  /*---------- FOOTER -----------*/

  footer {

    padding: 40px 0;

  }

  footer .mainlogo {

    margin: 10px 0 20px 0;

  }

  footer .mainlogo img {

    height: 76px;

  }

  footer h6 {

    padding-bottom: 6px;

    margin-bottom: 18px;

  }

  .copyright {

    font-size: 13px;

    letter-spacing: 0.015rem;

    padding: 12px 0;

  }

  .footer-menu li a {

    letter-spacing: 0.01rem;

  }

  /*---------- BUTTON -----------*/

  .buttonPK {

    min-width: 110px;

    font-size: 14px;

    padding: 5px 14px 8px 14px;

  }

  .buttonM {

    min-width: 110px;

    font-size: 14px;

    padding: 5px 14px 8px 14px;

  }

  .buttonM i {

    padding-right: 7px;

  }

  .buttonBD {

    min-width: 110px;

    font-size: 14px;

    padding: 6px 14px 7px 14px;

  }

  .buttonBD i {

    padding-right: 7px;

  }

  .buttonBD i.fa-arrow-left {

    font-size: 12px;

  }

  .button-txt {

    font-size: 14px;

  }

  .button-txt i.fa-arrow-right {

    font-size: 11px;

    padding-left: 7px;

  }

  /*top-button*/

  .scroll {

    width: 42px;

    height: 42px;

    background-color: rgba(215, 93, 115, 0.7);

    right: 45px;

    bottom: 35px;

  }

  .scroll i {

    font-size: 16px;

  }

  /*---------- CONTENT ----------*/

  .content-padding {

    padding: 65px 0;

  }

  .content-padding.foot-pad {

    padding-bottom: 100px;

  }

  .txt-content {

    margin-bottom: 30px;

  }

  .txt-content p {

    line-height: 1.6rem;

    margin-bottom: 18px;

  }

  .txt-content ul {

    margin-bottom: 18px;

  }

  .txt-content ul li {

    line-height: 1.6rem;

  }

  .img-width.decor:before {

    width: calc(100% - 12px);

    height: calc(100% - 12px);

  }

  .top-banner {

    height: 210px;

  }

  .top-banner.w-filter .banner-txt {

    top: calc(50% - 10px);

  }

  .banner-txt {

    padding: 3px 25px;

  }

  .banner-txt p {

    font-size: 30px;

    letter-spacing: 0.12rem;

  }

  .header-wButton {

    margin-bottom: 30px;

  }

  .header-wButton .buttonBD {

    margin-top: 4px;

  }

  /*----------- FILTER -----------*/

  .filterBox {

    padding: 35px 35px 28px 35px;

    margin-top: -105px;

    margin-bottom: 65px;

  }

  .filterBox .form-select {

    font-size: 16px;

    padding: 10px 12px;

    margin-bottom: 28px;

  }

  .filterBox .form-select option {

    font-size: 15px;

  }

  .filterBox .buttonM {

    min-width: 130px;

    padding: 8px 13px;

  }

  /* FORM */

  .input-form .form-control {

    font-size: 15px;

    padding: 7px 12px;

    margin-bottom: 22px;

  }

  .input-form textarea.form-control {

    height: 100px;

    margin-bottom: 40px;

  }

  .input-form p {

    margin-bottom: 10px;

  }

  .form-select {

    font-size: 15px;

    padding: 8px 15px;

    margin-bottom: 20px;

  }

  /*------------ PAGE ------------*/

  .pagination {

    margin-top: 1.5rem;

  }

  .pagination li {

    margin: 0 2px !important;

  }

  .pagination .page-link {

    width: 40px;

    height: 40px;

    font-size: 18px;

    line-height: 38px;

    padding: 0;

  }

  .pagination .page-link i {

    font-size: 14px;

  }

  /*------------ OWL -------------*/

  .slide-navButton .owl-carousel .owl-nav .owl-prev, .slide-navButton .owl-carousel .owl-nav .owl-next {

    width: 36px;

    height: 36px;

  }

  .slide-navButton .owl-carousel .owl-nav i {

    font-size: 14px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot.active span {

    width: 13px;

    height: 13px;

    margin: 2px 6px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot span {

    width: 9px;

    height: 9px;

    margin: 4px 8px;

  }

  .slide-navButton .owl-carousel.nav-out .owl-nav .owl-prev {

    left: -12px;

  }

  .slide-navButton .owl-carousel.nav-out .owl-nav .owl-next {

    right: -12px;

  }

  /*------- INDEX -COVER --------*/

  body.cover-page {

    position: relative;

    padding-bottom: 44px;

  }

  body.cover-page .copyright {

    width: 100%;

    position: fixed;

    bottom: 0;

  }

  .index-pinkBG {

    height: calc(100vh - 44px);

    padding-top: 90px;

  }

  .index-coverBox {

    padding: 30px 35px 55px 35px;

  }

  .index-coverBox h1 {

    font-size: 36px;

    letter-spacing: 0.02rem;

  }

  .index-cover-info li {

    padding: 4px 45px 4px 22px;

    margin: 0 27px 0 12px;

  }

  .index-cover-info li p {

    letter-spacing: 0.012rem;

  }

  .academicBG {

    padding: 60px 35px 30px 35px;

  }

  .academicBG .academic-list li {

    width: calc(100% / 7);

  }
  .learner-type-button li {
    padding: 0 13px;
  }
  .learner-type-button li a {
    min-width: 245px;
    font-size: 24px;
    padding: 6px 24px;
  }
  .learner-type-button li a:before {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
  }

  /*----------- INDEX -----------*/

  .main-banner.owl-carousel .owl-dots .owl-dot.active span {

    width: 15px;

    height: 15px;

    margin: 6px 3px;

  }

  .main-banner.owl-carousel .owl-dots .owl-dot span {

    margin: 8px 6px;

  }

  .categoryBG {

    padding: 60px 0 85px 0;

    margin-bottom: 115px;

  }

  .categoryBG .row .col-lg-9 {

    padding: 0;

  }

  .course-category li {

    padding: 0 5px 12px 5px;

  }

  .course-category li a {

    padding: 9px 8px 13px 8px;

  }

  .course-category li a:hover {

    -webkit-transform: scale(1.04);

            transform: scale(1.04);

  }

  .category-icon {

    margin-bottom: 5px;

  }

  .category-icon img {

    height: 84px !important;

  }

  .category-topic {

    height: 44px;

  }

  .category-topic p {

    font-size: 17px;

    line-height: 1.35rem;

    letter-spacing: 0.015rem;

  }

  .pink-topBG {

    padding-top: 60px;

  }

  .pink-topBG:before, .pink-topBG:after {

    height: 46%;

  }

  .pink-topBG h1 {

    margin-bottom: 25px;

  }

  .newcourse-slide .items {

    padding: 8px 10px;

  }

  .newcourse-slide .courseBox {

    margin-bottom: 30px;

  }

  .newcourse-slide .courseBox-info {

    min-height: 118px;

  }

  .newcourse-slide .course-name {

    min-height: 55px;

    margin-bottom: 5px;

  }

  .newcourse-slide .course-name p {

    font-size: 17px;

    line-height: 1.7rem;

  }

  .newcourse-slide .courseID {

    font-size: 14px;

  }

  .newcourse-slide .cate-tag {

    font-size: 12px;

    padding: 0 10px;

  }

  .newcourse-slide .capacity {

    font-size: 12px;

    padding: 4px 10px 4px 10px;

  }

  .course-slide {

    margin-bottom: 70px;

  }

  .course-pad .items {

    padding: 7px;

  }

  .course-pad .courseBox {

    margin-bottom: 45px;

  }

  .news-section {

    padding: 65px 0 100px 0;

  }

  .news-section h1 {

    font-size: 36px;

    line-height: 2.3rem;

    letter-spacing: 0.12rem;

    top: 26%;

  }

  .news-section h1 span {

    font-size: 32px;

  }

  .news-slide.owl-carousel .owl-nav .owl-prev, .news-slide.owl-carousel .owl-nav .owl-next {

    width: 40px;

    height: 40px;

    top: 58%;

  }

  .news-slide.owl-carousel .owl-nav i {

    font-size: 16px;

  }

  .news-slide.owl-carousel .owl-nav .owl-prev {

    left: -34%;

  }

  .news-slide.owl-carousel .owl-nav .owl-next {

    left: calc(-34% + 54px);

  }

  .news-slide .items {

    padding: 10px;

  }

  .news-slide .newsBox {

    margin-bottom: 0;

  }

  .news-slide .newsBox:hover {

    -webkit-transform: scale(1.025);

            transform: scale(1.025);

  }

  /*----- COURSE - DETAIL -------*/

  .pinkBG {

    padding: 50px 0;

  }

  .pinkBG .row > .col-lg-6:first-child {

    padding-right: 12px;

  }

  .pinkBG .row > .col-lg-6:last-child {

    padding-left: 12px;

  }

  .pinkBG .row > .col-lg-6:last-child .img-width {

    border: 4px solid white;

  }

  .course-infoPKbox h4 {

    font-size: 21px;

    margin-bottom: 5px;

  }

  .course-infoPKbox h6 {

    font-size: 16px;

    margin-bottom: 15px;

  }

  .course-info {

    margin-bottom: 15px;

  }

  .course-info li {

    font-size: 15px;

    line-height: 1.6rem;

    margin-bottom: 2px;

  }

  .course-info li strong {

    padding-right: 10px;

  }

  .course-info li.category strong {

    padding-right: 12px;

  }

  .course-info li .cate-tag {

    min-width: 55px;

    font-size: 12px;

    line-height: 22px;

    letter-spacing: 0.015rem;

    padding: 0 11px;

    margin-top: 8px;

  }

  .noteBox {

    padding: 9px 15px;

    margin-bottom: 22px;

  }

  .noteBox p {

    font-size: 14px;

    font-weight: 400;

    line-height: 1.45rem;

    margin-bottom: 8px;

  }

  .register-button li {

    margin-right: 12px;

  }

  .register-button li .buttonM {

    min-width: 160px;

    font-size: 14px;

    padding: 6px 15px 9px 15px;

  }

  .imgBox {

    margin-bottom: 100px;

  }

  .imgBox-BD:before {

    width: calc(100% - 12px);

    height: calc(100% - 12px);

  }

  .imgBox-info {

    padding: 20px 35px;

    top: 48%;

  }

  .imgBox-info .row {

    padding: 8px 0;

  }

  .imgBox-info .row .col-lg-4 {

    font-size: 18px;

    line-height: 1.9rem;

    padding-right: 8px;

  }

  .imgBox-info .row .col-lg-8 {

    font-size: 15px;

    line-height: 1.75rem;

  }

  .topicPK {

    padding: 5px 22px 5px 48px;

    margin-bottom: 22px;

  }

  .topicPK p {

    font-size: 20px;

    line-height: 30px;

    letter-spacing: 0.025rem;

  }

  .icon-circle {

    width: 32px;

    height: 32px;

  }

  .icon-circle img {

    width: 19px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+1) {

    padding-right: 6px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+2) {

    padding: 0 9px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+0) {

    padding-left: 6px;

  }

  .genBox {

    min-height: 194px;

    padding: 20px 20px 25px 20px;

    margin: 10px 0;

  }

  .genBox:after {

    width: calc(100% - 8px);

    height: calc(100% - 8px);

  }

  .genBox h5 {

    font-size: 18px;

    margin-bottom: 15px;

  }

  .period {

    margin-bottom: 18px;

  }

  .period li {

    line-height: 1.7rem;

    letter-spacing: 0;

  }

  .button-list li {

    margin-right: 10px;

  }

  .button-list li .buttonPK {

    min-width: 95px;

    font-size: 13px;

    letter-spacing: 0.01rem;

    padding: 5px 12px 8px 12px;

  }

  .ribbon-tag {

    height: 22px;

    line-height: 22px;

    letter-spacing: 0.015rem;

    padding: 0 6px 0 7px;

    top: 9px;

  }

  .ribbon-tag:after {

    width: 8px;

    height: 22px;

    right: -8px;

  }

  .coming-soon-tag {

    min-width: 110px;

    font-size: 13px;

    letter-spacing: 0.01rem;

    padding: 6px 15px 7px 15px;

  }

  .doubleBD {

    margin: 40px 0 60px 0;

  }

  .course-detail > .row > .col-lg-6:first-child {

    padding-right: 20px;

  }

  .course-detail > .row > .col-lg-6:last-child {

    padding-left: 20px;

  }

  .list-decimal, .list-check, .list-decor {

    margin-bottom: 35px;

  }

  .list-decimal li, .list-check li, .list-decor li {

    line-height: 1.6rem;

    margin-bottom: 4px;

  }

  .list-check li:before {

    width: 12px;

    height: 12px;

  }

  .teacher-list {

    margin-top: 12px;

  }

  .teacher-list > li {

    padding: 0 10px;

    margin-bottom: 35px;

  }

  .teacher-info .img-width img {

    height: 140px;

  }

  .teacher-info ul li {

    font-size: 14px;

    line-height: 1.45rem;

  }

  .teacher-info ul li:first-child {

    font-size: 15px;

    line-height: 1.7rem;

    padding-bottom: 9px;

    margin-bottom: 12px;

  }

  .teacher-info ul li:first-child:after {

    width: 40px;

  }

  .gray-topBG {

    padding: 60px 0 90px 0;

  }

  .gray-topBG:before, .gray-topBG:after {

    height: 38%;

  }

  .gray-topBG h1 {

    margin-bottom: 25px;

  }

  .gray-topBG .slide-navButton .course-slide {

    padding: 0 5px;

    margin-bottom: 0;

  }

  .gray-topBG .slide-navButton .owl-nav .owl-prev, .gray-topBG .slide-navButton .owl-nav .owl-next {

    top: 30% !important;

  }

  .gray-topBG .course-pad .items {

    padding: 9px;

  }

  /*---------- COURSE -----------*/

  .courseBox {

    border-width: 2px;

    padding-bottom: 15px;

    margin-bottom: 45px;

  }

  .courseBox-info {

    min-height: 104px;

  }

  .courseBox-info .row .col-lg-8 {

    padding-right: 6px;

  }

  .courseBox-info .row .col-lg-4 {

    padding-left: 0;

  }

  .course-name {

    min-height: 50px;

  }

  .course-name p {

    font-size: 16px;

    line-height: 1.55rem;

  }

  .courseID {

    font-size: 13px;

  }

  .cate-tag {

    font-size: 11px;

    line-height: 18px;

    padding: 0 8px;

  }

  .capacity {

    font-size: 11px;

    padding: 2px 7px 3px 7px;

  }

  .course-colPad.all-year .courseBox-info {

    min-height: 102px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+1) {

    padding-right: 4px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+2), .course-colPad .row .col-lg-3:nth-child(4n+3) {

    padding: 0 8px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+0) {

    padding-left: 4px;

  }

  /*-------- CURRICULUM ---------*/

  .curriculum-info {

    margin: 75px 0 100px 0;

  }

  .curriculum-info:before, .curriculum-info:after {

    height: 65%;

  }

  .curriculum-info .wrap-pad {

    width: 100%;

  }

  .curriculum-info .row .col-lg-6:last-child {

    padding-left: 25px;

  }

  .curriculum-info .img-width:before {

    width: calc(100% - 12px);

    height: calc(100% - 12px);

  }

  .curriculum-info h2 {

    padding-bottom: 3px;

    top: calc(22% - 22px);

  }

  .curriculum-info h2:after {

    width: 65px;

  }

  .curriculum-info h5 {

    font-size: 23px;

    top: calc(16% - 34px);

  }

  .curriculum-info .txt-content {

    width: 42%;

    top: calc(50% + 16%);

  }

  .curriculum-info .txt-content p {

    -webkit-line-clamp: 6;

  }

  .academic-list li {

    width: 25%;

    padding: 0 12px;

    margin-bottom: 30px;

  }

  .academic-list li .img-width {

    padding: 0 12%;

    margin-bottom: 10px;

  }

  .academic-name p {

    font-size: 16px;

    line-height: 1.55rem;

  }

  /*--------- KNOWLEDGE ---------*/

  .type-slide {

    margin-bottom: 70px;

  }

  .type-slide .items {

    padding: 0 5px;

  }

  .type-slide .items.active .topic-type {

    letter-spacing: 0.02rem;

  }

  .topic-type {

    font-size: 19px;

    letter-spacing: 0.01rem;

    padding: 6px 13px;

  }

  .knowledgeBox {

    border-top-width: 2px;

    padding-top: 12px;

    margin-bottom: 55px;

  }

  .knowledgeBox .img-width {

    padding-top: 75%;

  }

  .knowledgeBox .news-img {

    margin-bottom: 18px;

  }

  .knowledgeBox .txt-content p {

    line-height: 1.55rem;

    -webkit-line-clamp: 2;

  }

  .knowledge-topic {

    margin-bottom: 7px;

  }

  .knowledge-topic p {

    font-size: 17px;

    line-height: 1.7rem;

    letter-spacing: 0;

  }

  .knowledge-tag {

    font-size: 11px;

    line-height: 19px;

    margin-bottom: 13px;

  }

  .container-vdo.cover {

    margin-bottom: 35px;

  }

  /*----------- NEWS ------------*/

  .newsBox {

    margin-bottom: 55px;

  }

  .newsBox .txt-content p {

    line-height: 1.55rem;

  }

  .date {

    font-size: 14px;

  }

  .news-topic {

    margin-bottom: 7px;

  }

  .news-topic p {

    font-size: 17px;

    letter-spacing: 0;

  }

  /* DETAIL */

  .detail-page .row .col-lg-3 {

    padding-left: 0;

  }

  .detail-page .img-width.cover {

    margin-bottom: 35px;

  }

  .detail-page .txt-content {

    margin-bottom: 50px;

  }

  .detail-page .knowledge-tag {

    margin-bottom: 8px;

  }

  .news-gallery li {

    width: 25%;

  }

  /* SIDE NEWS */

  .lastest-newsBox {

    padding: 22px 15px;

    margin-bottom: 50px;

  }

  .lastest-newsBox .row .col-lg-12:last-child .newsBox {

    margin-bottom: 10px;

  }

  .lastest-newsBox .newsBox {

    margin-bottom: 32px;

  }

  .lastest-newsBox h5 {

    font-size: 19px;

    border-bottom-width: 2px;

    padding-bottom: 5px;

    margin-bottom: 30px;

  }

  .lastest-newsBox .news-topic p {

    font-size: 14px;

    line-height: 1.45rem;

    -webkit-line-clamp: 2;

  }

  /*------------ FAQ ------------*/

  .faq-slide {

    padding: 0 25px;

    margin-bottom: 70px;

  }

  .faq-slide .items {

    padding: 0 6px;

  }

  .faqBox {

    padding: 18px 12px 15px 12px;

  }

  .faqBox.active .faq-topic p {

    letter-spacing: 0.005rem;

  }

  .faq-icon {

    margin-bottom: 15px;

  }

  .faq-icon img {

    height: 75px !important;

  }

  .faq-topic {

    height: 56px;

  }

  .faq-topic p {

    font-size: 19px;

  }

  .FAQ-acc {

    border-bottom-width: 2px;

    margin-bottom: 55px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading {

    font-size: 17px;

    line-height: 28px;

    letter-spacing: 0.01rem;

    padding: 15px 20px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a {

    width: 28px;

    height: 28px;

    right: 20px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a:before {

    font-size: 13px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse {

    margin-top: 6px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body {

    padding: 13px 35px 23px 35px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body:before {

    width: calc(100% - 10px);

    height: calc(100% - 10px);

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .img-width, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .container-vdo {

    margin: 15px 0;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content p {

    margin-bottom: 12px;

  }

  /*---------- CONTACT ----------*/

  .contact-page h3 {

    margin-bottom: 6px;

  }

  .sub-topic {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 45px;

  }

  .contact-info > li {

    padding: 0 15px;

  }

  .contact-info > li > div {

    padding-left: 50px;

  }

  .contact-info > li p {

    font-size: 17px;

    line-height: 38px;

  }

  .contact-icon {

    width: 38px;

    height: 38px;

  }

  .contact-icon i {

    font-size: 16px;

  }

  .contact-social {

    margin-bottom: 85px;

  }

  .contact-social li {

    width: 360px;

    padding: 0 15px;

  }

  .contact-social li:first-child a p {

    font-size: 19px;

  }

  .contact-social li a {

    padding: 18px 15px 18px 68px;

  }

  .contact-social li a p {

    font-size: 22px;

    font-weight: 400;

    line-height: 28px;

  }

  .circle-icon {

    width: 52px;

    height: 52px;

    left: 5px;

  }

  .circle-icon i {

    font-size: 23px;

  }

  /*----------- ABOUT -----------*/

  .about-img-section {

    padding: 80px 0 55px 0;

    margin-bottom: 15px;

  }

  .about-img-section:before, .about-img-section:after {

    width: 100%;

    height: 55%;

  }

  .about-header-txt {

    left: 10px;

    bottom: 11%;

  }

  .about-header-txt li {

    font-size: 40px;

    line-height: 2.8rem;

    letter-spacing: 0.037rem;

  }

  .about-header-txt li:last-child {

    font-size: 34px;

    padding-left: 50px;

  }

  .about-page .txt-content p {

    font-size: 16px;

    line-height: 1.75rem;

    margin-bottom: 20px;

  }

  .about-page .txt-content.indent {

    text-indent: 40px;

  }

  .about-page h4 {

    margin-bottom: 20px;

  }

  .category-group {

    padding: 0 1%;

    margin: 15px 0 50px 0;

  }

  .category-group li {

    margin: 13px 0;

  }

  .category-group li p {

    font-size: 18px;

    line-height: 1.5rem;

    letter-spacing: 0.005rem;

  }

  .category-icon-circle {

    width: 120px;

    /*

        img{

            width: 82px;

        }*/

  }

  .partner-slide {

    padding: 0 25px;

  }

  .partner-slide .course-pad .items {

    padding: 6px;

  }

  .partner-slide .items:hover {

    -webkit-transform: scale(1.1);

            transform: scale(1.1);

  }

  /*----- PRIVACY - POLICY ------*/

  .content-page h4 {

    font-size: 23px;

  }

  .content-page h4.decor {

    margin-bottom: 22px;

  }

  .content-page h5 {

    padding-right: 57px;

    margin-bottom: 15px;

  }

  .content-page h5:after {

    width: 40px;

  }

  .content-page .txt-content {

    margin-bottom: 40px;

  }

  .content-page .list-decor li {

    margin-bottom: 18px;

  }

  .content-head {

    margin-bottom: 45px;

  }

  .content-head p {

    font-size: 14px;

    margin-top: 7px;

  }

  .content-leftTB {

    margin: 10px 0 75px 0;

  }

  .content-leftTB table thead tr th {

    font-size: 18px;

    letter-spacing: 0.01rem;

    padding: 7px 12px;

  }

  .content-leftTB table thead tr th:first-child {

    width: 34%;

  }

  .content-leftTB table tbody tr th, .content-leftTB table tbody tr td {

    font-size: 14px;

    line-height: 1.55rem;

    padding: 12px 12px 17px 12px;

  }

  .content-leftTB table tbody tr td ul li {

    line-height: 1.55rem;

  }

  .content-leftTB.wBD {

    padding-bottom: 3px;

  }

  .qrcode-section {

    padding-left: 20%;

    margin-top: 15px;

  }

  .anchor-list {

    max-width: 100%;

    margin: 10px auto 75px auto;

  }

  .anchor-list li {

    margin: 5px;

  }

  .anchor-list li a {

    font-size: 14px;

    letter-spacing: 0;

    padding: 7px 15px 8px 15px;

  }

  .section-padding {

    padding-bottom: 30px;

  }

  .box-list {

    margin-bottom: 45px;

  }

  .box-list > li {

    width: 47%;

    padding: 22px 25px;

  }

  .box-list > li h6 {

    margin-bottom: 8px;

  }

  .box-list > li ul li {

    line-height: 1.6rem;

  }

  /*----- COOKIES - POLICY ------*/

  .contentTB {

    margin-bottom: 50px;

  }

  .contentTB table thead tr th {

    min-width: 100px;

    font-size: 15px;

    letter-spacing: 0.015rem;

    padding: 10px 12px;

  }

  .contentTB table tbody tr td, .contentTB table tbody tr th {

    font-size: 14px;

    line-height: 1.55rem;

    padding: 12px 12px 17px 12px;

  }

}



@media (max-width: 991px) {

  .wrap-pad {

    padding: 0;

  }

  html {

    scroll-padding-top: 2.4rem;

  }

  h1 {

    font-size: 27px;

    margin-bottom: 28px;

  }

  h2 {

    font-size: 25px;

    margin-bottom: 28px;

  }

  h2.decor {

    margin-bottom: 32px;

  }

  h2.decor:after {

    width: 75px;

  }

  h3 {

    font-size: 24px;

    margin-bottom: 25px;

  }

  h4 {

    font-size: 22px;

    letter-spacing: 0.01rem;

    margin-bottom: 20px;

  }

  h5 {

    font-size: 20px;

    letter-spacing: 0.01rem;

    margin-bottom: 20px;

  }

  h6 {

    font-size: 19px;

    letter-spacing: 0.01rem;

    margin-bottom: 12px;

  }

  /*---------- HEADER -----------*/

  header {

    padding-top: 0;

  }

  header .row .col-md-8 {

    padding: 15px 12px;

  }

  header .mainlogo {

    padding: 12px 0 16px 5px;

    margin-bottom: 0;

  }

  .mainlogo img {

    height: 30px;

  }

  .social li {

    margin-right: 12px;

  }

  .social li a {

    width: 32px;

    height: 32px;

  }

  .social li a i {

    font-size: 13px;

  }

  .top-menu > li:first-child {

    margin-right: 18px;

  }

  .top-menu .input-group.search .form-control {

    min-width: 170px;

  }

  .lang li {

    margin-right: 0;

  }

  .lang li button {

    width: 26px;

    height: 26px;

    font-size: 10px;

    line-height: 26px;

    letter-spacing: 0.015rem;

  }

  .input-group.search {

    background: #FCE2E6;

  }

  .input-group.search .form-control {

    background: none;

    line-height: 24px;

    padding: 2px 5px 2px 14px;

  }

  .input-group.search .btn {

    min-height: 28px;

    background: none;

    font-size: 14px;

  }

  /*---------- FOOTER -----------*/

  footer {

    padding: 35px 0;

  }

  footer .mainlogo {

    margin: 7px 0 18px 0;

  }

  footer .mainlogo img {

    height: 60px;

  }

  footer h6 {

    letter-spacing: 0.015rem;

    padding-bottom: 5px;

    margin-bottom: 15px;

  }

  footer h6:after {

    width: 30px;

  }

  .footer-menu li {

    margin-bottom: 2px;

  }

  .footer-menu li a {

    font-size: 13px;

    line-height: 1.5rem;

  }

  /*---------- BUTTON -----------*/

  .buttonPK {

    min-width: 100px;

    font-size: 13px;

    padding: 5px 13px 8px 13px;

  }

  .buttonM {

    min-width: 100px;

    font-size: 13px;

    padding: 5px 13px 8px 13px;

  }

  .buttonM i {

    padding-right: 7px;

  }

  .buttonBD {

    min-width: 100px;

    font-size: 13px;

    padding: 6px 12px 7px 12px;

  }

  .button-txt {

    font-size: 13px;

    letter-spacing: 0.015rem;

  }

  /*top-button*/

  .scroll {

    width: 36px;

    height: 36px;

    right: 25px;

    bottom: 30px;

  }

  .scroll i {

    font-size: 13px;

  }

  /*---------- CONTENT ----------*/

  .content-padding {

    padding: 55px 0;

  }

  .content-padding.foot-pad {

    padding-bottom: 80px;

  }

  .txt-content p {

    line-height: 1.6rem;

    margin-bottom: 15px;

  }

  .txt-content.indent {

    text-indent: 35px;

  }

  .top-banner {

    height: 175px;

  }

  .banner-txt {

    padding: 2px 18px;

  }

  .banner-txt p {

    font-size: 25px;

    letter-spacing: 0.08rem;

  }

  .header-wButton {

    margin-bottom: 22px;

  }

  .header-wButton .buttonBD {

    margin-top: 2px;

  }

  /*----------- FILTER -----------*/

  .filterBox {

    padding: 30px 25px 25px 25px;

    margin-top: -85px;

    margin-bottom: 55px;

  }

  .filterBox .form-select {

    font-size: 14px;

    padding: 9px 12px;

    margin-bottom: 25px;

  }

  .filterBox .form-select option {

    font-size: 14px;

  }

  .filterBox .buttonM {

    min-width: 115px;

    font-size: 14px;

    padding: 7px 12px;

  }

  .filterBox .buttonM i {

    font-size: 13px;

    padding-right: 7px;

  }

  .filterBox .row .col-md-4:nth-child(3n+1) {

    padding-right: 6px;

  }

  .filterBox .row .col-md-4:nth-child(3n+2) {

    padding: 0 9px;

  }

  .filterBox .row .col-md-4:nth-child(3n+0) {

    padding-left: 6px;

  }

  /*------------ PAGE ------------*/

  .pagination {

    margin-top: 1rem;

  }

  .pagination li {

    margin: 0 1px !important;

  }

  .pagination .page-link {

    width: 32px;

    height: 32px;

    font-size: 15px;

    line-height: 30px;

  }

  .pagination .page-link i {

    font-size: 12px;

  }

  /*------------ OWL -------------*/

  .slide-navButton .owl-carousel .owl-nav .owl-prev, .slide-navButton .owl-carousel .owl-nav .owl-next {

    width: 30px;

    height: 30px;

  }

  .slide-navButton .owl-carousel .owl-nav i {

    font-size: 12px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot.active span {

    width: 12px;

    height: 12px;

    margin: 2px 4px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot span {

    width: 8px;

    height: 8px;

    margin: 4px 6px;

  }

  .slide-navButton .owl-carousel.nav-out .owl-nav .owl-prev {

    left: 0;

  }

  .slide-navButton .owl-carousel.nav-out .owl-nav .owl-next {

    right: 0;

  }

  /*------- INDEX -COVER --------*/

  body.cover-page {

    padding-bottom: 0;

  }

  body.cover-page .copyright {

    position: relative;

    bottom: auto;

  }

  .index-pinkBG {

    height: 100vh;

    padding: 80px 0 60px 0;

  }

  .index-img-cover .img-width.first-page {

    border-radius: 15px 15px 0 0;

  }

  .logo-cover {

    padding: 16px 30px 18px 30px;

    top: -50px;

  }

  .logo-cover img {

    height: 50px;

  }

  .index-coverBox {

    border-radius: 0 0 15px 15px;

    padding: 25px 20px 45px 20px;

    margin-bottom: 45px;

  }

  .index-coverBox h1 {

    font-size: 30px;

    letter-spacing: 0.015rem;

    margin-bottom: 25px;

  }

  .index-cover-info li {

    border-width: 2px;

    padding: 3px 40px 3px 18px;

    margin: 0 15px 0 12px;

  }

  .index-cover-info li p {

    font-size: 22px;

    letter-spacing: 0.01rem;

  }

  .index-cover-info li img {

    width: 42px;

    right: -12px;

  }

  .learner-type-button li {
    padding: 0 10px;
  }
  .learner-type-button li a {
    min-width: 210px;
    font-size: 21px;
    letter-spacing: 0.015rem;
    padding: 5px 20px;
    margin-bottom: 30px;
  }

  .academicBG {

    border-radius: 15px;

    padding: 58px 25px 25px 25px;

    margin-top: -23px;

  }

  .academicBG .academic-list li {

    padding: 0 4px;

    margin-bottom: 10px;

  }

  /*----------- INDEX -----------*/

  .main-banner.owl-carousel .owl-dots .owl-dot.active span {

    width: 15px;

    height: 15px;

    margin: 6px 3px;

  }

  .main-banner.owl-carousel .owl-dots .owl-dot span {

    margin: 8px 6px;

  }

  .categoryBG {

    padding: 55px 0 70px 0;

    margin-bottom: 90px;

  }

  .categoryBG .row .col-lg-9 {

    padding: 0;

  }

  .course-category li a {

    padding: 8px 7px 11px 7px;

  }

  .category-icon img {

    height: 76px !important;

  }

  .category-topic {

    height: 40px;

  }

  .category-topic p {

    font-size: 15px;

    line-height: 1.2rem;

    letter-spacing: 0.012rem;

  }

  .pink-topBG {

    padding-top: 50px;

  }

  .pink-topBG:before, .pink-topBG:after {

    height: 42%;

  }

  .pink-topBG h1 {

    margin-bottom: 15px;

  }

  .newcourse-slide {

    padding: 0 10px;

  }

  .newcourse-slide.owl-carousel .owl-nav .owl-prev, .newcourse-slide.owl-carousel .owl-nav .owl-next {

    top: 30%;

  }

  .newcourse-slide .items {

    padding: 6px 7px;

  }

  .newcourse-slide .courseBox {

    margin-bottom: 25px;

  }

  .newcourse-slide .courseBox-info {

    min-height: 131px;

  }

  .newcourse-slide .course-name {

    min-height: 48px;

  }

  .newcourse-slide .course-name p {

    font-size: 15px;

    line-height: 1.5rem;

  }

  .newcourse-slide .courseID {

    font-size: 13px;

    margin-bottom: 12px;

  }

  .newcourse-slide .cate-tag {

    font-size: 11px;

    line-height: 19px;

    padding: 0 10px;

  }

  .newcourse-slide .capacity {

    padding: 2px 10px 3px 10px;

  }

  .course-slide {

    margin-bottom: 55px;

  }

  .course-slide#all-year .courseBox-info {

    min-height: 93px;

  }

  .course-slide .courseBox-info {

    min-height: 118px;

  }

  .course-slide .course-name {

    margin-bottom: 3px;

  }

  .course-slide .course-name p {

    font-size: 14px;

    line-height: 1.4rem;

  }

  .course-slide .courseID {

    font-size: 12px;

  }

  .course-pad .items {

    padding: 5px;

  }

  .course-pad .courseBox {

    margin-bottom: 35px;

  }

  .news-section {

    padding: 50px 0 80px 0;

  }

  .news-section h1 {

    font-size: 30px;

    line-height: 1.9rem;

    letter-spacing: 0.08rem;

    top: 26%;

  }

  .news-section h1 span {

    font-size: 24px;

  }

  .news-slide.owl-carousel .owl-nav .owl-prev, .news-slide.owl-carousel .owl-nav .owl-next {

    width: 32px;

    height: 32px;

    top: 60%;

  }

  .news-slide.owl-carousel .owl-nav i {

    font-size: 13px;

  }

  .news-slide.owl-carousel .owl-nav .owl-prev {

    left: -35%;

  }

  .news-slide.owl-carousel .owl-nav .owl-next {

    left: calc(-35% + 42px);

  }

  .news-slide .items {

    padding: 8px;

  }

  /*----- COURSE - DETAIL -------*/

  .pinkBG {

    padding: 45px 0 50px 0;

  }

  .pinkBG .row > .col-lg-6:last-child .img-width {

    border-width: 3px;

  }

  .course-infoPKbox h4 {

    margin-bottom: 4px;

  }

  .course-info {

    margin-bottom: 18px;

  }

  .course-info li .cate-tag {

    float: left;

  }

  .register-button {

    float: left;

    margin-bottom: 50px;

  }

  .imgBox {

    margin-bottom: 75px;

  }

  .imgBox .row > .col-lg-6:first-child {

    padding-right: 12px;

  }

  .imgBox .row > .col-lg-6:last-child {

    padding-left: 12px;

  }

  .imgBox-BD:before {

    width: calc(100% - 10px);

    height: calc(100% - 10px);

  }

  .imgBox-info {

    width: 100%;

    letter-spacing: 0;

    padding: 28px 40px 35px 40px;

    position: relative;

    top: auto;

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

  .imgBox-info .row {

    padding: 4px 0;

  }

  .imgBox-info .row .col-lg-4 {

    font-size: 17px;

    padding-right: 12px;

  }

  .topicPK {

    padding: 4px 18px 4px 44px;

    margin-bottom: 18px;

  }

  .topicPK p {

    font-size: 19px;

  }

  .icon-circle {

    width: 30px;

    height: 30px;

  }

  .icon-circle img {

    width: 18px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+1) {

    padding-right: 12px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+2) {

    padding: 0 12px;

  }

  .gen-section .row .col-lg-4:nth-child(3n+0) {

    padding-left: 12px;

  }

  .gen-section .row .col-md-6:nth-child(odd) {

    padding-right: 10px;

  }

  .gen-section .row .col-md-6:nth-child(even) {

    padding-left: 10px;

  }

  .genBox {

    min-height: 182px;

    padding: 18px 15px 22px 15px;

  }

  .genBox h5 {

    padding: 0 4px 2px 4px;

    margin-bottom: 12px;

  }

  .period {

    margin-bottom: 16px;

  }

  .button-list li .buttonPK {

    min-width: 85px;

    font-size: 12px;

  }

  .ribbon-tag {

    height: 21px;

    line-height: 21px;

    font-size: 11px;

    letter-spacing: 0.01rem;

    padding: 0 6px 0 8px;

    top: 10px;

  }

  .ribbon-tag:after {

    width: 7px;

    height: 21px;

    right: -7px;

  }

  .coming-soon-tag {

    min-width: 110px;

    font-size: 13px;

    letter-spacing: 0.01rem;

    padding: 6px 15px 7px 15px;

  }

  .doubleBD {

    margin: 35px 0 55px 0;

  }

  .course-detail > .row.half-content {

    margin-bottom: 45px;

  }

  .course-detail > .row > .col-lg-6:first-child {

    padding-right: 12px;

  }

  .course-detail > .row > .col-lg-6:last-child {

    padding-left: 12px;

  }

  .course-detail .txt-content {

    margin-bottom: 35px;

  }

  .list-decimal {

    padding-left: 16px;

  }

  .list-check li {

    padding-left: 18px;

  }

  .list-check li:before {

    width: 11px;

    height: 11px;

  }

  .list-decor {

    padding-left: 18px;

  }

  .teacher-list {

    padding: 0 15px;

  }

  .teacher-list > li {

    width: calc(100% / 3);

    padding: 0 8px;

    margin-bottom: 30px;

  }

  .teacher-info .img-width {

    margin-bottom: 12px;

  }

  .teacher-info .img-width img {

    height: 125px;

  }

  .teacher-info ul li {

    line-height: 1.4rem;

  }

  .teacher-info ul li:first-child {

    font-size: 14px;

    line-height: 1.65rem;

    padding-bottom: 7px;

    margin-bottom: 10px;

  }

  .teacher-info ul li:first-child:after {

    width: 35px;

  }

  .gray-topBG {

    padding: 50px 0 80px 0;

  }

  .gray-topBG:before, .gray-topBG:after {

    height: 38%;

  }

  .gray-topBG h1 {

    margin-bottom: 15px;

  }

  .gray-topBG .slide-navButton .course-slide {

    padding: 0 10px;

    margin-bottom: 0;

  }

  .gray-topBG .slide-navButton .owl-nav .owl-prev, .gray-topBG .slide-navButton .owl-nav .owl-next {

    top: 30% !important;

  }

  .gray-topBG .course-pad .items {

    padding: 9px;

  }

  /*---------- COURSE -----------*/

  .courseBox {

    padding-bottom: 14px;

    margin-bottom: 40px;

  }

  .courseBox .img-width {

    border-radius: 10px;

    margin-bottom: 10px;

  }

  .courseBox-info {

    min-height: 122px;

  }

  .courseBox-info .row .col-lg-8 {

    padding-right: 12px;

  }

  .courseBox-info .row .col-lg-4 {

    padding-left: 12px;

  }

  .course-name {

    min-height: 47px;

  }

  .course-name p {

    font-size: 15px;

    line-height: 1.45rem;

  }

  .cate-tag {

    float: none;

    min-width: 50px;

    font-size: 11px;

    line-height: 17px;

    padding: 0 8px;

    margin: 0 auto;

    display: table;

  }

  .capacity {

    float: none;

    font-size: 11px;

    padding: 1px 8px 2px 8px;

    margin: 7px auto 0 auto;

    display: table;

  }

  .course-colPad.all-year .courseBox-info {

    min-height: 97px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+1) {

    padding-right: 12px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+2), .course-colPad .row .col-lg-3:nth-child(4n+3) {

    padding: 0 12px;

  }

  .course-colPad .row .col-lg-3:nth-child(4n+0) {

    padding-left: 12px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+1) {

    padding-right: 6px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+2) {

    padding: 0 9px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+0) {

    padding-left: 6px;

  }

  /*-------- CURRICULUM ---------*/

  .curriculum-info {

    margin: 55px 0 75px 0;

  }

  .curriculum-info:before, .curriculum-info:after {

    display: none;

  }

  .curriculum-info .row .col-lg-6:last-child {

    padding: 30px 47px 40px 47px;

    position: relative;

  }

  .curriculum-info .row .col-lg-6:last-child:before, .curriculum-info .row .col-lg-6:last-child:after {

    content: '';

    width: calc(100% - 24px);

    height: 100%;

    position: absolute;

    top: 0;

    left: 12px;

  }

  .curriculum-info .row .col-lg-6:last-child:before {

    background-color: #F5F5F5;

    z-index: -2;

  }

  .curriculum-info .row .col-lg-6:last-child:after {

    background-image: url(../images/bg/bg-01.jpg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    mix-blend-mode: luminosity;

    opacity: 0.65;

    z-index: -1;

  }

  .curriculum-info .img-width:before {

    width: calc(100% - 12px);

    height: calc(100% - 12px);

  }

  .curriculum-info h2 {

    font-size: 23px;

    padding-bottom: 3px;

    margin-bottom: 18px;

    position: relative;

    top: auto;

  }

  .curriculum-info h2:after {

    width: 55px;

    height: 2px;

  }

  .curriculum-info h5 {

    font-size: 19px;

    position: relative;

    top: auto;

  }

  .curriculum-info .txt-content {

    width: 100%;

    position: relative;

    top: auto;

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

  .curriculum-info .txt-content p {

    -webkit-line-clamp: unset;

  }

  .academic-list li {

    padding: 0 9px;

    margin-bottom: 25px;

  }

  .academic-list li .img-width {

    padding: 0 10%;

    margin-bottom: 8px;

  }

  .academic-name p {

    font-size: 14px;

    font-weight: 500;

    line-height: 1.3rem;

  }

  /*--------- KNOWLEDGE ---------*/

  .type-slide {

    margin-bottom: 55px;

  }

  .type-slide.owl-carousel .owl-nav .owl-prev, .type-slide.owl-carousel .owl-nav .owl-next {

    width: 30px;

    height: 30px;

  }

  .type-slide.owl-carousel .owl-nav i {

    font-size: 12px;

  }

  .type-slide.owl-carousel .owl-nav .owl-prev {

    left: -40px;

  }

  .type-slide.owl-carousel .owl-nav .owl-next {

    right: -40px;

  }

  .type-slide .items {

    padding: 0 4px;

  }

  .type-slide .items.active .topic-type {

    letter-spacing: 0.015rem;

  }

  .topic-type {

    font-size: 17px;

    letter-spacing: 0;

    padding: 5px 12px;

  }

  .knowledgeBox {

    padding-top: 10px;

    margin-bottom: 40px;

  }

  .knowledgeBox .news-img {

    margin-bottom: 15px;

  }

  .knowledgeBox .txt-content p {

    font-size: 14px;

    line-height: 1.45rem;

  }

  .knowledge-topic {

    margin-bottom: 8px;

  }

  .knowledge-topic p {

    font-size: 15px;

    line-height: 1.5rem;

    letter-spacing: 0;

  }

  .knowledge-tag {

    letter-spacing: 0.01rem;

    padding: 0 8px 1px 8px;

    margin-bottom: 13px;

  }

  /*----------- NEWS ------------*/

  .newsBox {

    margin-bottom: 40px;

  }

  .newsBox .img-width {

    border-radius: 10px;

  }

  .newsBox .txt-content p {

    font-size: 14px;

    line-height: 1.4rem;

  }

  .news-img {

    margin-bottom: 12px;

  }

  .date {

    font-size: 12px;

    margin-bottom: 5px;

  }

  .news-topic {

    margin-bottom: 5px;

  }

  .news-topic p {

    font-size: 15px;

  }

  /* DETAIL */

  .detail-page .row .col-lg-9 {

    padding-right: 12px;

  }

  .detail-page .row .col-lg-9 .date {

    margin-bottom: 7px;

  }

  .detail-page .row .col-lg-3 {

    padding-left: 12px;

  }

  .detail-page .txt-content {

    margin-bottom: 45px;

  }

  .detail-page .knowledge-tag {

    font-size: 12px;

    line-height: 22px;

    padding: 0 10px;

    margin-bottom: 7px;

  }

  .news-gallery li {

    width: 20%;

    padding: 3px;

  }

  /* SIDE NEWS */

  .lastest-newsBox {

    padding: 25px 32px 35px 32px;

    margin-bottom: 35px;

  }

  .lastest-newsBox .row .col-lg-12:last-child .newsBox {

    margin-bottom: 0;

  }

  .lastest-newsBox .newsBox {

    margin-bottom: 0;

  }

  .lastest-newsBox h5 {

    float: none;

    font-size: 20px;

    padding-bottom: 3px;

    margin: 0 auto 28px auto;

    display: table;

  }

  .lastest-newsBox .news-img {

    margin-bottom: 10px;

  }

  .lastest-newsBox .date {

    margin-bottom: 4px;

  }

  .lastest-newsBox .news-topic p {

    line-height: 1.35rem;

  }

  .lastest-newsBox .course-slide {

    display: -webkit-box !important;

    display: -ms-flexbox !important;

    display: flex !important;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

        -ms-flex-flow: row wrap;

            flex-flow: row wrap;

    margin-bottom: 0;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-prev, .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-next {

    top: 38%;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-prev {

    left: -20px;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-next {

    right: -20px;

  }

  /*------------ FAQ ------------*/

  .faq-slide {

    padding: 0 17px;

    margin-bottom: 55px;

  }

  .faq-slide .items {

    padding: 0 5px;

  }

  .faqBox {

    padding: 15px 10px 11px 10px;

  }

  .faqBox.active .faq-topic p {

    letter-spacing: 0;

  }

  .faq-icon {

    margin-bottom: 14px;

  }

  .faq-icon img {

    height: 62px !important;

  }

  .faq-topic {

    height: 44px;

  }

  .faq-topic p {

    font-size: 16px;

    line-height: 1.35rem;

  }

  .FAQ-acc {

    padding-bottom: 3px;

    margin-bottom: 45px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading {

    font-size: 16px;

    line-height: 25px;

    letter-spacing: 0.01rem;

    padding: 12px 15px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a {

    width: 25px;

    height: 25px;

    right: 15px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a:before {

    font-size: 12px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse {

    padding: 0 15px 15px 15px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body {

    padding: 12px 30px 20px 30px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body:before {

    width: calc(100% - 8px);

    height: calc(100% - 8px);

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content p {

    margin-bottom: 12px;

  }

  /*---------- CONTACT ----------*/

  .contact-page h3 {

    margin-bottom: 6px;

  }

  .sub-topic {

    font-size: 18px;

    margin-bottom: 40px;

  }

  .contact-info {

    margin-bottom: 25px;

  }

  .contact-info > li {

    width: 100%;

    padding: 0;

  }

  .contact-info > li > div {

    padding-left: 46px;

    float: none;

    margin: 0 auto 10px auto;

    display: table;

  }

  .contact-info > li p {

    font-size: 16px;

    line-height: 34px;

  }

  .contact-icon {

    width: 34px;

    height: 34px;

  }

  .contact-icon i {

    font-size: 14px;

  }

  .contact-social {

    margin-bottom: 65px;

  }

  .contact-social li {

    width: auto;

    min-width: 250px;

    padding: 0 10px;

  }

  .contact-social li:first-child a p {

    font-size: 16px;

  }

  .contact-social li a {

    padding: 13px 22px 13px 58px;

  }

  .contact-social li a p {

    font-size: 18px;

    line-height: 24px;

  }

  .circle-icon {

    width: 42px;

    height: 42px;

    left: 4px;

  }

  .circle-icon i {

    font-size: 18px;

  }

  /*----------- ABOUT -----------*/

  .about-img-section {

    padding: 65px 0 45px 0;

    margin-bottom: 0;

  }

  .about-img-section:before, .about-img-section:after {

    width: 100%;

    height: 55%;

  }

  .about-header-txt {

    left: 12px;

    bottom: 12%;

  }

  .about-header-txt li {

    font-size: 32px;

    line-height: 2.2rem;

    letter-spacing: 0.02rem;

  }

  .about-header-txt li:last-child {

    font-size: 26px;

    padding-left: 35px;

  }

  .about-page .txt-content p {

    font-size: 15px;

    line-height: 1.55rem;

    margin-bottom: 18px;

  }

  .about-page .txt-content.indent {

    text-indent: 35px;

  }

  .about-page h4 {

    margin-bottom: 18px;

    border-bottom-width: 2px;

  }

  .category-group {

    padding: 0;

    margin: 10px 0 40px 0;

  }

  .category-group li p {

    font-size: 17px;

    line-height: 1.4rem;

    letter-spacing: 0;

  }

  .category-icon-circle {

    width: 104px;

    margin-bottom: 12px;

    /*&:before{

            width: calc(100% - 8px);

            height: calc(100% - 8px);

            border-width: 1px;

        }

        img{

            width: 72px;

        }*/

  }

  .partner-slide .course-pad .items {

    padding: 4px;

  }

  .partner-slide .items:hover {

    -webkit-transform: scale(1.08);

            transform: scale(1.08);

  }

  /*----- PRIVACY - POLICY ------*/

  .content-page h4 {

    font-size: 21px;

  }

  .content-page h4.decor {

    border-bottom-width: 2px;

    margin-bottom: 20px;

  }

  .content-page h5 {

    font-size: 19px;

    padding-right: 50px;

    margin-bottom: 12px;

  }

  .content-page h5:after {

    width: 35px;

  }

  .content-page .txt-content p {

    margin-bottom: 12px;

  }

  .content-page .txt-content p.mb-3 {

    margin-bottom: 10px !important;

  }

  .content-page .txt-content .list-decor {

    margin-bottom: 12px;

  }

  .content-page .txt-content .list-decor li {

    margin-bottom: 5px;

  }

  .content-page .txt-content .list-decor li ol {

    margin: 6px 0 10px 0;

  }

  .content-page .txt-content .list-decor li ol li {

    margin-bottom: 3px;

    text-indent: 30px;

  }

  .content-page .list-decor li {

    margin-bottom: 15px;

  }

  .content-head {

    margin-bottom: 30px;

  }

  .content-head p {

    font-size: 13px;

    margin-top: 5px;

  }

  .content-leftTB {

    margin: 5px 0 55px 0;

  }

  .content-leftTB table thead tr th {

    font-size: 17px;

    letter-spacing: 0;

    padding: 6px 12px;

  }

  .content-leftTB table tbody tr th, .content-leftTB table tbody tr td {

    line-height: 1.45rem;

  }

  .content-leftTB table tbody tr td ul li {

    line-height: 1.45rem;

  }

  .qrcode-section {

    padding-left: 15%;

  }

  .qrcode {

    padding: 15px;

  }

  .anchor-list {

    width: 88%;

    margin: 5px auto 65px auto;

  }

  .anchor-list li {

    width: 50%;

    padding: 0 5px;

    margin: 5px 0;

    display: block;

  }

  .anchor-list li a {

    font-size: 13px;

    text-align: center;

    padding: 6px 13px 7px 13px;

  }

  .section-padding {

    padding-bottom: 25px;

  }

  .box-list {

    margin-bottom: 35px;

  }

  .box-list > li {

    width: 50%;

    padding: 18px 20px;

  }

  .box-list > li h6 {

    font-size: 18px;

    margin-bottom: 8px;

  }

  .box-list > li ul li {

    line-height: 1.55rem;

  }

  /*----- COOKIES - POLICY ------*/

  .contentTB {

    margin-bottom: 45px;

  }

  .contentTB table thead tr th {

    min-width: 90px;

    letter-spacing: 0.01rem;

  }

}



@media (max-width: 767px) {

  html {

    scroll-padding-top: 2.2rem;

  }

  ol {

    padding-left: 1.5rem;

  }

  h1 {

    font-size: 24px;

    letter-spacing: 0.01rem;

    margin-bottom: 25px;

  }

  h2 {

    font-size: 23px;

    letter-spacing: 0;

    margin-bottom: 25px;

  }

  h2.decor {

    margin-bottom: 32px;

  }

  h2.decor:after {

    width: 65px;

  }

  h3 {

    font-size: 22px;

    margin-bottom: 25px;

  }

  h4 {

    font-size: 20px;

    margin-bottom: 20px;

  }

  h5 {

    font-size: 19px;

    letter-spacing: 0;

    margin-bottom: 18px;

  }

  h6 {

    font-size: 18px;

    letter-spacing: 0;

    margin-bottom: 12px;

  }

  /*---------- HEADER -----------*/

  header .row .col-md-8 {

    padding: 14px 12px;

  }

  header .mainlogo {

    padding: 12px 0 16px 0;

  }

  .mainlogo img {

    height: 30px;

  }

  .nav-menu.btn {

    line-height: 30px !important;

    padding-right: 2px;

  }

  /*---------- FOOTER -----------*/

  footer {

    padding: 30px 0 25px 0;

  }

  footer .mainlogo {

    margin: 0 0 15px 0;

  }

  footer .mainlogo img {

    height: 62px;

  }

  .copyright {

    letter-spacing: 0.01rem;

  }

  .footer-menu li {

    margin-bottom: 3px;

  }

  .footer-menu li a {

    font-size: 14px;

    line-height: 1.55rem;

  }

  /*---------- BUTTON -----------*/

  .buttonPK {

    min-width: 95px;

    padding: 5px 13px 8px 13px;

  }

  .buttonM {

    min-width: 95px;

    padding: 5px 13px 8px 13px;

  }

  .buttonM i {

    padding-right: 6px;

  }

  .buttonBD {

    min-width: 95px;

    padding: 5px 12px 6px 12px;

  }

  .buttonBD i {

    padding-right: 6px;

  }

  .buttonBD i.fa-arrow-left {

    font-size: 11px;

  }

  /*top-button*/

  .scroll {

    border-width: 1px;

    right: 15px;

    bottom: 25px;

  }

  /*---------- CONTENT ----------*/

  .content-padding {

    padding: 50px 0;

  }

  .content-padding.foot-pad {

    padding-bottom: 65px;

  }

  .txt-content p {

    line-height: 1.55rem;

  }

  .txt-content ul {

    margin-bottom: 15px;

  }

  .txt-content ul li {

    line-height: 1.55rem;

  }

  .txt-content.indent {

    text-indent: 30px;

  }

  .img-width.decor:before {

    width: calc(100% - 10px);

    height: calc(100% - 10px);

    border-width: 1px;

  }

  .top-banner {

    height: 130px;

  }

  .banner-txt {

    padding: 4px 15px;

  }

  .banner-txt p {

    font-size: 21px;

    letter-spacing: 0.03rem;

  }

  .header-wButton {

    margin-bottom: 20px;

  }

  .header-wButton h2 {

    text-align: center;

    margin-bottom: 7px;

  }

  .header-wButton .buttonBD {

    float: none;

    margin: 0 auto;

    display: table;

  }

  /*------------ PAGE ------------*/

  .pagination li {

    margin: 0 !important;

  }

  .pagination .page-link {

    width: 30px;

    height: 30px;

    font-size: 13px;

    line-height: 28px;

  }

  .pagination .page-link i {

    font-size: 11px;

  }

  /*------------ OWL -------------*/

  .slide-navButton .owl-carousel .owl-nav .owl-prev, .slide-navButton .owl-carousel .owl-nav .owl-next {

    width: 26px;

    height: 26px;

  }

  .slide-navButton .owl-carousel .owl-nav i {

    font-size: 10px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot.active span {

    width: 9px;

    height: 9px;

    margin: 3px 4px;

  }

  .slide-navButton .owl-carousel .owl-dots .owl-dot span {

    width: 7px;

    height: 7px;

    margin: 4px 5px;

  }

  /*----------- FILTER -----------*/

  .filterBox {

    padding: 25px 22px 20px 22px;

    margin-top: -75px;

  }

  .filterBox .form-select {

    margin-bottom: 16px;

  }

  .filterBox .buttonM {

    min-width: 110px;

    padding: 7px 12px;

    margin-top: 5px;

  }

  .filterBox .buttonM i {

    padding-right: 6px;

  }

  .filterBox .row .col-md-4:nth-child(3n+1) {

    padding-right: 12px;

  }

  .filterBox .row .col-md-4:nth-child(3n+2) {

    padding: 0 12px;

  }

  .filterBox .row .col-md-4:nth-child(3n+0) {

    padding-left: 12px;

  }

  /*------- INDEX -COVER --------*/

  .index-pinkBG {

    height: 100%;

    padding: 70px 0 35px 0;

  }

  .index-img-cover .img-width.first-page {

    border-radius: 12px 12px 0 0;

  }

  .logo-cover {

    padding: 12px 25px 14px 25px;

    top: -50px;

  }

  .logo-cover img {

    height: 38px;

  }

  .index-coverBox {

    border-radius: 0 0 12px 12px;

    padding: 18px 15px 20px 15px;

    margin-bottom: 30px;

  }

  .index-coverBox h1 {

    font-size: 24px;

    line-height: 2rem;

    letter-spacing: 0.01rem;

    margin-bottom: 20px;

  }

  .index-coverBox h1 span {

    display: block;

  }

  .index-cover-info li {

    padding: 2px 36px 2px 16px;

    margin: 0 12px 14px 0;

  }

  .index-cover-info li p {

    font-size: 19px;

  }

  .index-cover-info li img {

    width: 36px;

    right: -12px;

  }

  .learner-type-button li {
    width: 100%;
    padding: 0 15px;
  }
  .learner-type-button li a {
    float: none !important;
    min-width: 200px;
    font-size: 19px;
    letter-spacing: 0.01rem;
    padding: 5px 20px;
    margin: 0 auto 18px auto;
    display: table;
  }
  .learner-type-button li a:before {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
  }

  .academicBG {

    border-radius: 12px;

    padding: 42px 12px 15px 12px;

    margin-top: -20px;

  }

  .academicBG .academic-list li {

    width: calc(100% / 5);

    padding: 0 3px !important;

    margin-bottom: 6px;

  }

  /*----------- INDEX -----------*/

  .main-banner.owl-carousel .owl-dots .owl-dot.active span {

    width: 11px;

    height: 11px;

    border-width: 1px;

    margin: 4px;

  }

  .main-banner.owl-carousel .owl-dots .owl-dot span {

    margin: 6px;

  }

  .categoryBG {

    background-position: center left;

    padding: 45px 0 65px 0;

    margin-bottom: 0;

  }

  .categoryBG .row .col-lg-9 {

    padding: 0 12px;

  }

  .course-category li {

    width: 50%;

    padding: 0 7px;

    margin-bottom: 15px;

  }

  .course-category li:nth-child(odd) a {

    float: right;

  }

  .course-category li:nth-child(even) a {

    float: left;

  }

  .course-category li:last-child {

    margin-bottom: 0;

  }

  .course-category li:last-child a {

    float: none;

    margin: 0 auto;

    display: table;

  }

  .course-category li a {

    width: 100%;

    max-width: 136px;

    padding: 8px 6px 12px 6px;

  }

  .category-icon {

    margin-bottom: 2px;

  }

  .pink-topBG {

    padding-top: 45px;

  }

  .pink-topBG:before, .pink-topBG:after {

    height: 45%;

  }

  .pink-topBG .buttonBD {

    margin-bottom: 20px;

  }

  .newcourse-slide {

    padding: 0 5px;

  }

  .newcourse-slide.owl-carousel .owl-nav .owl-prev, .newcourse-slide.owl-carousel .owl-nav .owl-next {

    top: 25%;

  }

  .newcourse-slide .items {

    padding: 5px;

  }

  .newcourse-slide .courseBox {

    margin-bottom: 20px;

  }

  .newcourse-slide .courseBox-info {

    min-height: 129px;

  }

  .newcourse-slide .course-name {

    min-height: 47px;

    margin-bottom: 4px;

  }

  .newcourse-slide .course-name p {

    line-height: 1.45rem;

  }

  .newcourse-slide .courseID {

    font-size: 12px;

    margin-bottom: 10px;

  }

  .newcourse-slide .cate-tag {

    padding: 0 9px;

  }

  .newcourse-slide .capacity {

    padding: 2px 9px 3px 9px;

  }

  .course-slide#all-year {

    margin-bottom: 30px;

  }

  .course-pad .courseBox {

    margin-bottom: 35px;

  }

  .news-section {

    padding: 45px 0 60px 0;

  }

  .news-section:before, .news-section:after {

    width: 100%;

    height: 45%;

  }

  .news-section h1 {

    font-size: 26px;

    font-weight: 500 !important;

    line-height: normal;

    letter-spacing: 0.03rem;

    text-align: center;

    margin-bottom: 15px;

    position: relative;

    top: auto;

  }

  .news-section h1 span {

    font-family: 'Chulalongkorn-B';

    font-size: 26px;

    display: inline-block;

  }

  .news-slide .items {

    padding: 6px;

  }

  .news-slide .items .newsBox {

    margin-bottom: 35px;

  }

  /*----- COURSE - DETAIL -------*/

  .pinkBG {

    padding: 35px 0;

  }

  .course-infoPKbox h4 {

    font-size: 20px;

  }

  .course-infoPKbox h6 {

    font-size: 15px;

  }

  .course-info {

    margin-bottom: 18px;

  }

  .course-info li {

    letter-spacing: 0;

  }

  .course-info li strong {

    padding-right: 8px;

  }

  .course-info li.category strong {

    padding-right: 10px;

  }

  .course-info li .cate-tag {

    line-height: 21px;

  }

  .noteBox {

    padding: 9px 12px;

  }

  .noteBox p {

    line-height: 1.4rem;

    letter-spacing: 0;

  }

  .register-button {

    margin-bottom: 40px;

  }

  .register-button li {

    margin-right: 10px;

  }

  .register-button li .buttonM {

    min-width: 140px;

    font-size: 13px;

    letter-spacing: 0.005rem;

    padding: 6px 13px 8px 13px;

  }

  .imgBox {

    margin-bottom: 65px;

  }

  .imgBox-BD:before {

    border-width: 1px;

  }

  .imgBox-info {

    padding: 28px 22px 20px 22px;

  }

  .imgBox-info .row {

    padding: 0 0 10px 0;

  }

  .imgBox-info .row .col-lg-4 {

    line-height: 1.75rem;

  }

  .imgBox-info .row .col-lg-8 {

    line-height: 1.55rem;

    padding-left: 12px;

  }

  .topicPK {

    padding: 3px 16px 3px 40px;

    margin-bottom: 18px;

  }

  .topicPK p {

    font-size: 18px;

  }

  .icon-circle {

    left: 3px;

  }

  .gen-section .row .col-md-6:nth-child(odd) {

    padding-right: 12px;

  }

  .gen-section .row .col-md-6:nth-child(even) {

    padding-left: 12px;

  }

  .genBox {

    min-height: 0;

    margin: 9px 0;

  }

  .genBox h5 {

    padding: 0 5px 2px 5px;

  }

  .period {

    margin-bottom: 16px;

  }

  .button-list li .buttonPK {

    min-width: 90px;

    letter-spacing: 0.005rem;

  }

  .ribbon-tag {

    top: 12px;

  }

  .doubleBD {

    margin: 30px 0 50px 0;

  }

  .course-detail > .row.half-content {

    margin-bottom: 45px;

  }

  .course-detail .txt-content {

    margin-bottom: 35px;

  }

  .list-decimal {

    padding-left: 16px;

  }

  .list-check li {

    padding-left: 18px;

  }

  .list-check li:before {

    width: 11px;

    height: 11px;

  }

  .list-decor {

    padding-left: 18px;

  }

  .teacher-list {

    padding: 0;

  }

  .teacher-list > li {

    width: 50%;

    margin-bottom: 25px;

  }

  .teacher-list > li:nth-child(odd) {

    padding: 0 5px 0 0;

  }

  .teacher-list > li:nth-child(even) {

    padding: 0 0 0 5px;

  }

  .teacher-info .img-width {

    margin-bottom: 10px;

  }

  .teacher-info .img-width img {

    height: 120px;

  }

  .teacher-info ul li {

    font-size: 13px;

    line-height: 1.35rem;

  }

  .teacher-info ul li:first-child {

    font-size: 13px;

    line-height: 1.55rem;

    padding-bottom: 5px;

    margin-bottom: 9px;

  }

  .teacher-info ul li:first-child:after {

    width: 30px;

  }

  .gray-topBG {

    padding: 45px 0 60px 0;

  }

  .gray-topBG .slide-navButton .course-slide {

    padding: 0 5px;

  }

  .gray-topBG .slide-navButton .owl-nav .owl-prev, .gray-topBG .slide-navButton .owl-nav .owl-next {

    top: 25% !important;

  }

  .gray-topBG .course-pad .items {

    padding: 5px;

  }

  /*---------- COURSE -----------*/

  .courseBox {

    padding-bottom: 12px;

    margin-bottom: 30px;

  }

  .courseBox .img-width {

    border-radius: 10px;

    margin-bottom: 10px;

  }

  .courseBox-info {

    min-height: 119px;

  }

  .course-name {

    min-height: 45px;

    margin-bottom: 4px;

  }

  .course-name p {

    font-size: 14px;

    line-height: 1.4rem;

  }

  .courseID {

    font-size: 12px;

    letter-spacing: 0.005rem;

  }

  .cate-tag {

    float: none;

    min-width: 50px;

    font-size: 11px;

    line-height: 17px;

    padding: 0 8px;

    margin: 0 auto;

    display: table;

  }

  .capacity {

    float: none;

    font-size: 11px;

    padding: 1px 8px 2px 8px;

    margin: 7px auto 0 auto;

    display: table;

  }

  .course-colPad.all-year .courseBox-info {

    min-height: 94px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+1) {

    padding-right: 12px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+2) {

    padding: 0 12px;

  }

  .course-colPad .row .col-md-4:nth-child(3n+0) {

    padding-left: 12px;

  }

  .course-colPad .row .col-6:nth-child(odd) {

    padding-right: 6px;

  }

  .course-colPad .row .col-6:nth-child(even) {

    padding-left: 6px;

  }

  /*-------- CURRICULUM ---------*/

  .curriculum-info {

    margin-bottom: 65px;

  }

  .curriculum-info .row .col-lg-6:last-child {

    padding: 25px 12px 35px 12px;

  }

  .curriculum-info .row .col-lg-6:last-child:before, .curriculum-info .row .col-lg-6:last-child:after {

    width: 100%;

    height: 120%;

    top: auto;

    bottom: 0;

    left: 0;

  }

  .curriculum-info .img-width:before {

    width: calc(100% - 10px);

    height: calc(100% - 10px);

  }

  .curriculum-info h2 {

    float: none;

    font-size: 22px;

    padding-bottom: 2px;

    margin-bottom: 16px;

  }

  .curriculum-info h2:after {

    width: 45px;

  }

  .academic-list li {

    width: 50%;

  }

  .academic-list li:nth-child(odd) {

    padding: 0 5px 0 0;

  }

  .academic-list li:nth-child(even) {

    padding: 0 0 0 5px;

  }

  .academic-list li .img-width {

    float: none;

    max-width: 135px;

    padding: 0;

    margin: 0 auto 8px auto;

    display: table;

  }

  /*--------- KNOWLEDGE ---------*/

  .type-slide {

    padding: 0 5px;

    margin-bottom: 50px;

  }

  .type-slide.owl-carousel .owl-nav .owl-prev, .type-slide.owl-carousel .owl-nav .owl-next {

    width: 24px;

    height: 24px;

  }

  .type-slide.owl-carousel .owl-nav i {

    font-size: 10px;

  }

  .type-slide.owl-carousel .owl-nav .owl-prev {

    left: -22px;

  }

  .type-slide.owl-carousel .owl-nav .owl-next {

    right: -22px;

  }

  .type-slide .items {

    padding: 0 3px;

  }

  .type-slide .items.active .topic-type {

    letter-spacing: 0;

  }

  .topic-type {

    font-size: 15px;

    padding: 4px 10px;

  }

  .knowledgeBox {

    padding-top: 8px;

    margin-bottom: 30px;

  }

  .knowledgeBox .news-img {

    margin-bottom: 12px;

  }

  .knowledgeBox .txt-content p {

    font-size: 13px;

    line-height: 1.35rem;

  }

  .knowledge-topic p {

    font-size: 14px;

    line-height: 1.4rem;

  }

  .knowledge-tag {

    line-height: 18px;

  }

  .container-vdo.cover {

    margin-bottom: 30px;

  }

  /*----------- NEWS ------------*/

  .newsBox {

    margin-bottom: 30px;

  }

  .newsBox .txt-content p {

    font-size: 13px;

    line-height: 1.35rem;

  }

  .news-img {

    margin-bottom: 10px;

  }

  .date {

    font-size: 11px;

    margin-bottom: 4px;

  }

  .news-topic p {

    font-size: 14px;

    line-height: 1.4rem;

    -webkit-line-clamp: 2;

  }

  /* DETAIL */

  .detail-page .row .col-lg-9 .date {

    margin-bottom: 8px;

  }

  .detail-page .img-width.cover {

    margin-bottom: 30px;

  }

  .detail-page .txt-content {

    margin-bottom: 40px;

  }

  .detail-page .knowledge-tag {

    line-height: 21px;

    margin-bottom: 8px;

  }

  .news-gallery li {

    width: calc(100% / 3);

  }

  .fancybox__thumbs .carousel__slide .fancybox__thumb::after {

    border-width: 3px !important;

  }

  /* SIDE NEWS */

  .lastest-newsBox {

    padding: 22px 25px 30px 25px;

    margin-bottom: 30px;

  }

  .lastest-newsBox h5 {

    font-size: 19px;

    padding-bottom: 0;

    margin-bottom: 25px;

  }

  .lastest-newsBox .news-img {

    margin-bottom: 10px;

  }

  .lastest-newsBox .date {

    font-size: 11px;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-prev, .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-next {

    top: 35%;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-prev {

    left: -16px;

  }

  .lastest-newsBox .course-slide.owl-carousel .owl-nav .owl-next {

    right: -16px;

  }

  /*------------ FAQ ------------*/

  .faq-slide {

    padding: 0 27px;

    margin-bottom: 50px;

  }

  .faq-slide .items {

    padding: 0 3px;

  }

  .faqBox {

    padding: 12px 8px 10px 8px;

  }

  .faq-icon {

    margin-bottom: 12px;

  }

  .faq-icon img {

    height: 55px !important;

  }

  .faq-topic {

    height: 42px;

  }

  .faq-topic p {

    font-size: 15px;

    line-height: 1.3rem;

  }

  .FAQ-acc {

    margin-bottom: 40px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading {

    font-size: 15px;

    line-height: 24px;

    letter-spacing: 0;

    padding: 11px 12px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a {

    width: 24px;

    height: 24px;

    right: 15px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-heading a:before {

    font-size: 11px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse {

    padding: 0 12px 12px 12px;

    margin-top: 5px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body {

    padding: 10px 22px 18px 22px;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body:before {

    width: calc(100% - 7px);

    height: calc(100% - 7px);

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .img-width, .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .container-vdo {

    margin: 13px 0;

  }

  .FAQ-acc .panel-group .panel.panel-default .panel-collapse .panel-body .txt-content p {

    margin-bottom: 10px;

  }

  /*---------- CONTACT ----------*/

  .contact-page h3 {

    margin-bottom: 4px;

  }

  .sub-topic {

    font-size: 16px;

    margin-bottom: 28px;

  }

  .contact-info {

    margin-bottom: 20px;

  }

  .contact-info > li:first-child > div p {

    line-height: 1.6rem;

    padding-top: 3px;

  }

  .contact-info > li > div {

    float: left;

    padding-left: 40px;

    margin-bottom: 10px;

  }

  .contact-info > li p {

    font-size: 15px;

    line-height: 32px;

  }

  .contact-icon {

    width: 32px;

    height: 32px;

  }

  .contact-icon i {

    font-size: 13px;

  }

  .contact-social {

    margin-bottom: 50px;

  }

  .contact-social li {

    min-width: 0;

    padding: 0;

    margin-bottom: 12px;

  }

  .contact-social li:first-child a p {

    font-size: 17px;

  }

  .contact-social li:last-child {

    margin-bottom: 0 !important;

  }

  .contact-social li a {

    padding: 12px 22px 12px 54px;

  }

  .contact-social li a p {

    font-size: 17px;

  }

  .circle-icon {

    width: 40px;

    height: 40px;

  }

  /*----------- ABOUT -----------*/

  .about-img-section {

    padding: 60px 0 30px 0;

  }

  .about-img-section:before, .about-img-section:after {

    height: 40%;

  }

  .about-header-txt {

    position: relative;

    left: auto;

    bottom: auto;

    margin-bottom: 27px;

  }

  .about-header-txt li {

    font-size: 34px;

    line-height: 2.3rem;

  }

  .about-header-txt li:last-child {

    font-size: 28px;

    padding-left: 40px;

  }

  .about-page .txt-content p {

    margin-bottom: 15px;

  }

  .about-page .txt-content.indent {

    text-indent: 30px;

  }

  .category-group {

    margin: 5px 0 30px 0;

  }

  .category-group li {

    width: calc(100% / 3);

    padding: 0 3px;

    margin: 10px 0;

  }

  .category-group li p {

    font-size: 16px;

    line-height: 1.35rem;

  }

  .category-icon-circle {

    width: 92px;

    /*:before{

            width: calc(100% - 7px);

            height: calc(100% - 7px);

        }

        img{

            width: 65px;

        }*/

  }

  .partner-slide {

    padding: 0 18px;

  }

  .partner-slide .course-pad .items {

    padding: 2px;

  }

  .partner-slide .items:hover {

    -webkit-transform: scale(1.06);

            transform: scale(1.06);

  }

  /*----- PRIVACY - POLICY ------*/

  .content-page h4 {

    font-size: 20px;

  }

  .content-page h4.decor {

    margin-bottom: 18px;

  }

  .content-page h5 {

    float: none;

    font-size: 18px;

    padding-right: 0;

    padding-bottom: 7px;

    margin: 0 auto 18px auto;

    display: table;

  }

  .content-page h5:after {

    width: 55px;

    top: auto;

    bottom: 0;

    right: auto;

    left: 50%;

    -webkit-transform: translateX(-50%);

            transform: translateX(-50%);

  }

  .content-page .txt-content p {

    font-size: 14px;

    line-height: 1.45rem;

  }

  .content-page .txt-content .list-decor {

    margin-bottom: 12px;

  }

  .content-page .txt-content .list-decor li {

    font-size: 14px;

    line-height: 1.45rem;

    margin-bottom: 5px;

  }

  .content-page .txt-content .list-decor li ol {

    margin: 6px 0 10px 0;

  }

  .content-page .txt-content .list-decor li ol li {

    margin-bottom: 3px;

    text-indent: 30px;

  }

  .content-page .list-decor li {

    margin-bottom: 15px;

  }

  .content-head h3 {

    font-size: 21px;

  }

  .content-head h4 {

    font-size: 19px;

  }

  .content-head p {

    margin-top: 6px;

  }

  .content-leftTB {

    margin: 0 0 50px 0;

    overflow-y: scroll;

  }

  .content-leftTB table thead tr th {

    padding: 6px 10px;

  }

  .content-leftTB table thead tr th:first-child {

    width: auto;

    min-width: 110px;

  }

  .content-leftTB table tbody tr th, .content-leftTB table tbody tr td {

    padding: 12px 10px 15px 10px;

  }

  .content-leftTB table tbody tr td ul li {

    line-height: 1.4rem;

  }

  .content-leftTB.wBD {

    padding-bottom: 5px;

  }

  .content-leftTB.wBD table thead tr th:first-child {

    min-width: 160px;

  }

  .content-leftTB.wBD table thead tr th:nth-child(2) {

    min-width: 190px;

  }

  .content-leftTB.wBD table thead tr th:last-child {

    min-width: 140px;

  }

  .content-leftTB.wBD.mb-5 {

    margin-bottom: 40px !important;

  }

  .qrcode-section {

    padding-left: 0;

    margin: -15px 0 45px 0;

  }

  .qrcode {

    padding: 22px;

  }

  .anchor-list {

    width: 100%;

    margin-bottom: 55px;

  }

  .anchor-list li {

    width: 50%;

    margin: 5px 0;

  }

  .anchor-list li:nth-child(odd) {

    padding: 0 4px 0 0;

  }

  .anchor-list li:nth-child(even) {

    padding: 0 0 0 4px;

  }

  .anchor-list li a {

    border-radius: 7px;

    padding: 6px 8px 7px 8px;

  }

  .section-padding {

    padding-bottom: 15px;

  }

  .box-list {

    margin-bottom: 35px;

  }

  .box-list > li {

    width: 100%;

    padding: 16px 18px;

  }

  .box-list > li:first-child {

    border-bottom: none;

  }

  .box-list > li h6 {

    font-size: 17px;

    margin-bottom: 6px;

  }

  .box-list > li ul li {

    font-size: 14px;

    line-height: 1.45rem;

  }

  /*----- COOKIES - POLICY ------*/

  .contentTB {

    margin-bottom: 45px;

    overflow: visible;

    overflow-y: scroll;

  }

  .contentTB table thead tr th {

    min-width: 80px;

    padding: 10px 10px;

  }

  .contentTB table thead tr th:last-child {

    min-width: 250px;

  }

  .contentTB table tbody tr td, .contentTB table tbody tr th {

    line-height: 1.45rem;

    padding: 12px 10px 15px 10px;

  }

  .contentTB table tbody tr:last-child td, .contentTB table tbody tr:last-child th {

    padding-bottom: 18px;

  }

}

/*# sourceMappingURL=layout.css.map */