@import url("../assets/fontawesome-free-6.4.2-web/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* TH Sarabun PSK */
@font-face {
  font-family: 'TH Sarabun PSK';
  src: url(/fonts/THSarabunPSK/THSarabunPSK.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun PSK';
  src: url(/fonts/THSarabunPSK/THSarabunPSK-BoldItalic.woff2) format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun PSK';
  src: url(/fonts/THSarabunPSK/THSarabunPSK-Bold.woff2) format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TH Sarabun PSK';
  src: url(/fonts/THSarabunPSK/THSarabunPSK-Italic.woff2) format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
/* TH Sarabun PSK */

/* TH Sarabun New */
@font-face {
  font-family: 'TH Sarabun New';
  src: url(../fonts/THSarabunNew/thsarabunnew_bold-webfont.woff2) format('woff2'),
       url(../fonts/THSarabunNew/thsarabunnew_bold-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url(../fonts/THSarabunNew/thsarabunnew_bolditalic-webfont.woff2) format('woff2'),
       url(../fonts/THSarabunNew/thsarabunnew_bolditalic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url(../fonts/THSarabunNew/thsarabunnew_italic-webfont.woff2) format('woff2'),
       url(../fonts/THSarabunNew/thsarabunnew_italic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TH Sarabun New';
  src: url(../fonts/THSarabunNew/thsarabunnew-webfont.woff2) format('woff2'),
       url(../fonts/THSarabunNew/thsarabunnew-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
/* TH Sarabun New */
/* FONT FACE */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 7, 2024 */



@font-face {
  font-family: 'kanitblack';
  src: url('../fonts/Kanit/kanit-black-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-black-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitblack_italic';
  src: url('../fonts/Kanit/kanit-blackitalic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-blackitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitbold';
  src: url('../fonts/Kanit/kanit-bold-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitbold_italic';
  src: url('../fonts/Kanit/kanit-bolditalic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-bolditalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kanitextrabold';
  src: url('../fonts/Kanit/kanit-extrabold-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-extrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitextrabold_italic';
  src: url('../fonts/Kanit/kanit-extrabolditalic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-extrabolditalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitextralight';
  src: url('../fonts/Kanit/kanit-extralight-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-extralight-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitextralight_italic';
  src: url('../fonts/Kanit/kanit-extralightitalic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-extralightitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanititalic';
  src: url('../fonts/Kanit/kanit-italic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitlight';
  src: url('../fonts/Kanit/kanit-light-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'kanitlight_italic';
  src: url('../fonts/Kanit/kanit-lightitalic-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-lightitalic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kanitmedium';
  src: url('../fonts/Kanit/kanit-medium-webfont.woff2') format('woff2'),
       url('../fonts/Kanit/kanit-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
/* FONTFACE */

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1300px; } }
.breadcrumb-item + .breadcrumb-item::before {
  content: var(--bs-breadcrumb-divider, "/"); }

.breadcrumb {
  --bs-breadcrumb-item-active-color: #0ba277; }
  .breadcrumb a {
    color: #1E1E1E; }

.navbar {
  --bs-navbar-nav-link-padding-x: 12px; }

.form-select {
  border: 1px solid #0ba277;
  color: #d9d9d9;
  border-radius: 0;
  background-color: transparent;
  background-image: url("../images/icons/icon-select.png");
  background-size: auto; }

.btn {
  border: 1px solid #0ba277;
  border-radius: 0;
  --bs-btn-padding-x: 25px; }
  .btn.btn-submit {
    color: #fff;
    background: #0ba277; }
  .btn.btn-reset {
    color: #0ba277; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0ba277;
  --bs-btn-border-color: #0ba277;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #146b42;
  --bs-btn-hover-border-color: #146b42;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146b42;
  --bs-btn-active-border-color: #146b42;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0ba277;
  --bs-btn-disabled-border-color: #0ba277; }

.form-check {
  display: block;
  min-height: 27px;
  padding-left: 35px;
  margin-bottom: 5px; }

.form-check .form-check-input {
  float: left;
  margin-left: -30px; }

.form-check-input {
  width: 20px;
  height: 20px;
  border: var(--bs-border-width) solid #0ba277; }

.form-check-input:checked {
  background-color: #0ba277;
  border-color: #0ba277; }

.kanit-thin {
  font-family: "kanit", sans-serif;
  font-weight: 100;
  font-style: normal; }

.kanit-extralight {
  font-family: "kanit", sans-serif;
  font-weight: 200;
  font-style: normal; }

.kanit-light {
  font-family: "kanit", sans-serif;
  font-weight: 300;
  font-style: normal; }

.kanit-regular {
  font-family: "kanit", sans-serif;
  font-weight: 400;
  font-style: normal; }

.kanit-medium {
  font-family: "kanit", sans-serif;
  font-weight: 500;
  font-style: normal; }

.kanit-semibold {
  font-family: "kanit", sans-serif;
  font-weight: 600;
  font-style: normal; }

.kanit-bold {
  font-family: "kanit", sans-serif;
  font-weight: 700;
  font-style: normal; }

.kanit-extrabold {
  font-family: "kanit", sans-serif;
  font-weight: 800;
  font-style: normal; }

.kanit-black {
  font-family: "kanit", sans-serif;
  font-weight: 900;
  font-style: normal; }

.kanit-thin-italic {
  font-family: "kanit", sans-serif;
  font-weight: 100;
  font-style: italic; }

.kanit-extralight-italic {
  font-family: "kanit", sans-serif;
  font-weight: 200;
  font-style: italic; }

.kanit-light-italic {
  font-family: "kanit", sans-serif;
  font-weight: 300;
  font-style: italic; }

.kanit-regular-italic {
  font-family: "kanit", sans-serif;
  font-weight: 400;
  font-style: italic; }

.kanit-medium-italic {
  font-family: "kanit", sans-serif;
  font-weight: 500;
  font-style: italic; }

.kanit-semibold-italic {
  font-family: "kanit", sans-serif;
  font-weight: 600;
  font-style: italic; }

.kanit-bold-italic {
  font-family: "kanit", sans-serif;
  font-weight: 700;
  font-style: italic; }

.kanit-extrabold-italic {
  font-family: "kanit", sans-serif;
  font-weight: 800;
  font-style: italic; }

.kanit-black-italic {
  font-family: "kanit", sans-serif;
  font-weight: 900;
  font-style: italic; }

* {
  /* font-family: "kanitmedium", sans-serif; } */
  font-family: "kanit", sans-serif; }

a {
  text-decoration: none; }

.font-14 {
  font-size: 14px !important; }

.font-16 {
  font-size: 16px !important;}

.font-18 {
  font-size: 18px !important; }

.font-20 {
  font-size: 20px !important; }

.font-24 {
  font-size: 24px !important; }

.font-32 {
  font-size: 32px !important; }

.text-green {
  color: #0ba277; }

.text-black-green {
  color: #005b41; }

.text-gray {
  color: #707070; }

.h-box {
  border-top: 5px solid #0ba277;
  padding: 10px 15px; }

.btn-custom {
  color: #0ba277;
  border: 1px solid #0ba277;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 16px; }

.header-top {
  background: linear-gradient(90deg, #005b41 0%, #0ba277 100%);
  text-align: right;
  color: #fff; }
  .header-top .lang-menu .nav-link {
    color: #fff; }
    .header-top .lang-menu .nav-link.active, .header-top .lang-menu .nav-link:hover {
      color: #8bffde; }
  .header-top .scale-menu {
    height: 40px; }
    .header-top .scale-menu .nav-link {
      padding: 0;
      padding-left: 15px;
      padding-right: 15px;
      height: 40px;
      display: flex;
      align-items: center;
      color: #fff; }
      .header-top .scale-menu .nav-link.active, .header-top .scale-menu .nav-link:hover {
        background: rgba(139, 255, 222, 0.1);
        color: #8bffde; }

.block-nav {
  background-color: #fff; }

.navbar-nav {
  --bs-nav-link-color: #1E1E1E;
  --bs-nav-link-hover-color: #1E1E1E; }

.navbar {
  --bs-navbar-active-color: #1E1E1E;
  --bs-navbar-toggler-border-color: 0;
  margin: 0;
  padding: 0; }
  .navbar .navbar-toggler {
    background-color: #fff; }
  @media (min-width: 992px) {
    .navbar .main-menu .nav-link {
      height: 90px;
      display: flex;
      align-items: center; } }
  .navbar .main-menu .nav-link.active, .navbar .main-menu .nav-link:hover {
    background: #0ba277;
    color: #fff; }

.search-link {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 30px;
  margin: 5px;
  background: rgba(139, 255, 222, 0.1);
  border-radius: 50%;
  font-size: 14px; }

footer {
  background: url("../images/web/bg-footer.png") no-repeat;
  background-size: cover;
  background-position: bottom;
  color: #fff;
  padding-top: 80px;
  padding-bottom: 30px; }

.block-banner {
  background: url("../images/web/banner.png") no-repeat top center;
  background-size: 100%;
  background-size: cover; }
  .block-banner .box-detail {
    background: linear-gradient(90deg, #c8ffee -17.18%, rgba(255, 255, 255, 0) 100%);
    width: 613px;
    max-width: 100%;
    margin: 100px 0;
    padding: 30px;
    text-align: center; }
    .block-banner .box-detail h3 {
      font-size: 38px;
      font-weight: 400; }

.box-category {
  padding-top: 30px; }
  @media (min-width: 992px) {
    .box-category div:nth-child(3n - 1) {
      margin-left: auto !important;
      margin-right: auto !important;
      display: flex;
      justify-content: center; }
    .box-category div:nth-child(3n) {
      display: flex;
      justify-content: end; } }
  .box-category a {
    display: block;
    padding: 30px;
    width: 390px;
    min-height: 206px;
    max-width: 100%;
    align-items: center;
    gap: 31px;
    border-radius: 5px;
    color: #1E1E1E;
    box-shadow: 0px 4px 10px 0px rgba(231, 231, 231, 0.6);
    background: linear-gradient(113.83deg, #f4fefb 0%, #eff8f3 100%);
    text-align: center;
    margin-bottom: 30px;
    color: #005b41;
    font-size: 24px; }
    .box-category a img {
      margin-bottom: 10px; }
    .box-category a:hover {
      background: rgba(53, 162, 11, 0.1); }

.box-one-hilight {
  width: 569px;
  max-width: 100%;
  background: #f4fefb;
  border-bottom: 4px solid #0ba277; }
  .box-one-hilight h3 {
    font-size: 18px;
    margin: 10px 0; }
  .box-one-hilight p {
    color: #707070;
    font-size: 14px; }

.block-hilight {
  padding: 50px 0;
  background: url("../images/web/bg-hilight.png") no-repeat;
  background-size: contain;
  background-position: left top; }
  @media (max-width: 991.98px) {
    .block-hilight {
      background: #005b41; } }

.box-hilight {
  width: 569px;
  max-width: 100%;
  background: #fff;
  border-bottom: 4px solid #0ba277;
  min-height: 310px;
  background: #f4fefb; }
  .box-hilight h3 {
    font-size: 16px;
    margin: 10px 0; }

.owl-dots {
  text-align: center;
  margin-top: 30px; }
  .owl-dots .owl-dot {
    height: 7px;
    margin: 0 10px; }
    .owl-dots .owl-dot span {
      background: #d9d9d9;
      display: block;
      width: 42px;
      height: 7px; }
    .owl-dots .owl-dot.active span {
      background: #0ba277; }

.block-public-relations .link-all {
  margin-top: -40px; }

.wrap-box-one-public {
  background: url("../images/web/bg-green.png") repeat-x;
  background-position: bottom;
  margin-top: 20px;
  padding-bottom: 30px; }

.box-one-public {
  width: 466px;
  max-width: 100%;
  background: #fff;
  border-bottom: 4px solid #0ba277;
  height: 370px;
  margin-top: -20px; }
  .box-one-public h3 {
    font-size: 18px;
    margin: 10px 0; }

.box-public {
  margin-bottom: 30px; }
  .box-public .box-img {
    flex-basis: 310px; }
  .box-public .box-public-content {
    background: #f4fefb;
    border-right: 4px solid #0ba277; }
    .box-public .box-public-content .box-content {
      width: 396px;
      max-width: 100%;
      height: 100%; }

.block-search ::placeholder {
  color: #d9d9d9;
  opacity: 1;
  /* Firefox */ }
.block-search ::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #d9d9d9; }
.block-search .text-input {
  border: 0;
  background: transparent;
  width: 100%;
  max-width: 100%; }
.block-search .search-top {
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; }
.block-search .search-tag-result {
  margin-top: 20px; }
  .block-search .search-tag-result ul {
    display: flex;
    flex-wrap: wrap; }
    .block-search .search-tag-result ul li a {
      border: 1px solid #9d9d9d;
      color: #707070;
      font-size: 14px;
      padding: 7px 10px;
      margin-right: 10px;
      display: block;
      margin-bottom: 10px; }

.page-banner .box-banner-title {
  height: 248px;
  display: flex;
  align-items: center; }
.page-banner .page-banner-title {
  background: linear-gradient(90deg, #c8ffee -17.18%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.17);
  color: #005b41;
  width: 398px;
  max-width: 100%;
  height: 79px;
  padding: 0 0 0 30px;
  font-size: 38px;
  font-weight: 400;
  display: flex;
  align-items: center; }
.page-banner.search-page {
  background: url("../images/web/p1.png") no-repeat center;
  background-size: cover; }
.page-banner.detail-page {
  background: url("../images/web/p2.png") no-repeat center;
  background-size: cover; }

.block-breadcrumb {
  background: #f4fefb;
  padding: 10px 0; }
  .block-breadcrumb .breadcrumb {
    margin: 0; }

.input-page {
  border: 0;
  background: whitesmoke;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center; }

span.page-link {
  border: 0;
  background: #cccccc;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; }

.btn-page {
  background: #0ba277;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px; }
  .btn-page:hover {
    color: #fff;
    background: #0ba277; }

.box-filter-result {
  margin-bottom: 30px; }
  .box-filter-result .box-image {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center; }
  .box-filter-result .box-date {
    color: #707070; }
  .box-filter-result .box-right {
    border-right: 4px solid #0ba277;
    background: #f4fefb; }
    @media (min-width: 991.98px) {
      .box-filter-result .box-right {
        width: calc(100% - 310px); } }
  .box-filter-result .box-content {
    max-width: 100%;
    padding: 10px 15px; }
    .box-filter-result .box-content p {
      font-size: 12px;
      color: #707070; }

.block-filter {
  background: #f4fefb; }
  .block-filter .head-filter {
    border-bottom: 0.5px solid #707070;
    padding: 10px 20px; }
  .block-filter .body-filter {
    padding: 10px 20px; }
  .block-filter .box-filter {
    margin-bottom: 25px; }
    .block-filter .box-filter h3 {
      color: #005b41;
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 10px; }
    .block-filter .box-filter .filter-list li {
      margin-bottom: 15px; }
      .block-filter .box-filter .filter-list li a {
        color: black;
        border: 1px solid #0ba277;
        padding: 10px 15px;
        display: flex;
        font-size: 14px;
        font-weight: 400;
        transition: 300ms; }
        .block-filter .box-filter .filter-list li a:hover, .block-filter .box-filter .filter-list li a.active {
          background: #0ba277;
          color: white;
          transition: 300ms; }
    .block-filter .box-filter .filter-col {
      display: flex;
      flex-wrap: wrap;
      gap: 10px; }
      .block-filter .box-filter .filter-col li a {
        color: #707070;
        border: 1px solid #707070;
        padding: 2px 6px;
        display: flex;
        font-size: 14px;
        font-weight: 400;
        transition: 300ms; }
        .block-filter .box-filter .filter-col li a:hover, .block-filter .box-filter .filter-col li a.active {
          background: #0ba277;
          border-color: #0ba277;
          color: white;
          transition: 300ms; }

.block-detail p {
  font-size: 16px;
  color: #707070;
  margin: 0; }

.title-detail {
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  border-left: 13px solid #0ba277;
  padding-left: 5px; }

.detail-top {
  background: #f4fefb;
  padding: 15px; }

.detail-date {
  color: #0ba277;
  background: rgba(11, 162, 119, 0.15);
  padding: 10px 15px; }

.table-detail {
  background: #f4fefb;
  padding: 20px;
  margin-bottom: 30px; }
  .table-detail .tbl-detail tr td {
    font-size: 16px;
    vertical-align: top;
    padding: 5px 0;
    color: #707070; }
    .table-detail .tbl-detail tr td:first-child {
      color: #0ba277;
      white-space: nowrap;
      padding-right: 15px; }
    @media (max-width: 767.98px) {
      .table-detail .tbl-detail tr td {
        display: block; } }
  .table-detail .tbl-detail .link-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; }
    .table-detail .tbl-detail .link-tag li a {
      background: rgba(11, 162, 119, 0.15);
      color: #0ba277;
      padding: 0 15px;
      border-radius: 50px;
      font-size: 14px; }

.mini-box {
  background: #f4fefb;
  padding: 15px;
  margin-bottom: 30px; }
  .mini-box h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #005b41;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #0ba277; }
  .mini-box .box-list .list {
    padding: 10px 15px;
    background: white;
    margin-bottom: 15px; }
  .mini-box .nav-pills {
    border-bottom: 1px solid #d9d9d9; }
    .mini-box .nav-pills .nav-link {
      color: #9d9d9d;
      font-size: 16px;
      background: transparent;
      border-radius: 0;
      margin-bottom: -4px; }
      .mini-box .nav-pills .nav-link.active {
        color: #005b41;
        font-weight: 400;
        border-bottom: 4px solid #0ba277; }

.download-list a {
  background: rgba(11, 162, 119, 0.15);
  padding: 10px 15px;
  color: #0ba277;
  display: block;
  margin-bottom: 10px; }

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