/* First-party styles extracted after the Bootstrap block; original font URLs retained. */
@font-face {
  font-family: Kanit;
  src: url("Kanit-Bold.f3a72c3b.woff2") format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: Kanit;
  src: url("Kanit-Regular.9c45e25c.woff2") format("woff2");
  font-weight: normal;
}

body {
  box-sizing: border-box;
  background-color: #eef0f4;
  font-family: Kanit, sans-serif;
  font-size: 1rem;
  font-weight: normal;
}

.search-input {
  position: relative;
}

.search-input input {
  text-indent: 30px;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  width: 260px;
  height: 32px;
  padding: 10px;
}

.search-input .bi-search {
  position: absolute;
  top: 3px;
  left: 16px;
}

.list-group-item {
  color: #586a84;
}

.list-group-item-action:hover, .list-group-item-action:focus, .list-group-item-action:active {
  z-index: 1;
  color: rgba(var(--bs-primary-rgb));
  background-color: #eeeaf7;
  text-decoration: none;
}

.text-title-menu {
  color: rgba(var(--bs-primary-rgb));
  border-bottom: 3px solid rgba(var(--bs-warning-rgb));
  font-size: 20px;
  font-weight: bold;
}

.card-link {
  text-decoration: none;
}

.card-link:hover {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.badge {
  background-color: #eeeaf7;
}

.nav.nav-menu-items button.active {
  border-bottom: 3px solid rgba(var(--bs-warning-rgb));
}

.min-vh-80 {
  min-height: 80vh;
}

/* First-party rules compiled into the former Bootstrap bundle. */
:root, [data-bs-theme="light"] {
  --bs-primary:#6d3076;
  --bs-secondary:#586a84;
  --bs-warning:#fcb124;
  --bs-danger:#e85b5b;
  --bs-primary-rgb:109, 48, 118;
  --bs-secondary-rgb:88, 106, 132;
  --bs-warning-rgb:252, 177, 36;
  --bs-danger-rgb:232, 91, 91;
  --bs-primary-text-emphasis:#2c132f;
  --bs-secondary-text-emphasis:#232a35;
  --bs-warning-text-emphasis:#65470e;
  --bs-danger-text-emphasis:#5d2424;
  --bs-primary-bg-subtle:#e2d6e4;
  --bs-secondary-bg-subtle:#dee1e6;
  --bs-warning-bg-subtle:#feefd3;
  --bs-danger-bg-subtle:#fadede;
  --bs-primary-border-subtle:#c5acc8;
  --bs-secondary-border-subtle:#bcc3ce;
  --bs-warning-border-subtle:#fee0a7;
  --bs-danger-border-subtle:#f6bdbd;
  --bs-link-color:#6d3076;
  --bs-link-color-rgb:109, 48, 118;
  --bs-link-hover-color:#57265e;
  --bs-link-hover-color-rgb:87, 38, 94;
  --bs-focus-ring-color:#6d307640;
  --bs-form-invalid-color:#e85b5b;
  --bs-form-invalid-border-color:#e85b5b;
}
.btn-primary {
  --bs-btn-bg:#6d3076; --bs-btn-border-color:#6d3076;
  --bs-btn-hover-bg:#5d2964; --bs-btn-hover-border-color:#57265e;
  --bs-btn-focus-shadow-rgb:131, 79, 139;
  --bs-btn-active-bg:#57265e; --bs-btn-active-border-color:#522459;
  --bs-btn-disabled-bg:#6d3076; --bs-btn-disabled-border-color:#6d3076;
}
.btn-outline-primary {
  --bs-btn-color:#6d3076; --bs-btn-border-color:#6d3076;
  --bs-btn-hover-bg:#6d3076; --bs-btn-hover-border-color:#6d3076;
  --bs-btn-focus-shadow-rgb:109, 48, 118;
  --bs-btn-active-bg:#6d3076; --bs-btn-active-border-color:#6d3076;
  --bs-btn-disabled-color:#6d3076; --bs-btn-disabled-border-color:#6d3076;
}
.btn-warning { --bs-btn-bg:#fcb124; --bs-btn-border-color:#fcb124; --bs-btn-hover-bg:#fcbd45; --bs-btn-hover-border-color:#fcb93a; --bs-btn-active-bg:#fdc150; --bs-btn-active-border-color:#fcb93a; --bs-btn-disabled-bg:#fcb124; --bs-btn-disabled-border-color:#fcb124; }
.btn-danger { --bs-btn-color:#000; --bs-btn-bg:#e85b5b; --bs-btn-border-color:#e85b5b; --bs-btn-hover-color:#000; --bs-btn-hover-bg:#eb7474; --bs-btn-hover-border-color:#ea6b6b; --bs-btn-active-color:#000; --bs-btn-active-bg:#ed7c7c; --bs-btn-active-border-color:#ea6b6b; --bs-btn-disabled-bg:#e85b5b; --bs-btn-disabled-border-color:#e85b5b; }
.form-control, .form-select { background-color:#eeeaf7; border-color:#6d3076; }
.form-control:focus, .form-select:focus { background-color:#eeeaf7; border-color:#b698bb; box-shadow:0 0 0 .25rem #6d307640; }
.input-group-text { border-color:#6d3076; }
.form-check-input:checked { background-color:#6d3076; border-color:#6d3076; }
.nav-pills { --bs-nav-pills-link-active-bg:#6d3076; }
.pagination { --bs-pagination-active-bg:#6d3076; --bs-pagination-active-border-color:#6d3076; --bs-pagination-focus-box-shadow:0 0 0 .25rem #6d307640; }
.dropdown-menu { --bs-dropdown-link-active-bg:#6d3076; }
.list-group { --bs-list-group-active-bg:#6d3076; --bs-list-group-active-border-color:#6d3076; }
.list-group-item.active { color:#483164; background-color:#e5daf1; border-color:#c7b3e5; }
.badge { color:#6d3076; background-color:#eeeaf7; }
.text-title-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: .25rem;
}
.text-title-breadcrumb-item + .text-title-breadcrumb-item { padding-left: .5rem; }
.text-title-breadcrumb-item + .text-title-breadcrumb-item::before {
  display: inline-block;
  padding-right: .5rem;
  color: rgba(var(--bs-secondary-bg-subtle));
  content: "/";
}
.text-title-breadcrumb-item + .text-title-breadcrumb-item:hover::before { text-decoration: none; }
.text-title-breadcrumb-item.active { color: rgba(var(--bs-primary-rgb)); }
/* Bootstrap 4 exposed font-weight-normal; these legacy breadcrumb views still use it. */
.box-breadcrumb .font-weight-normal { font-weight: 400 !important; }
.p-3-video { padding: .25rem 1rem !important; }
.p-3-sidebar { padding: .8rem 1rem !important; }
.bg-search-icon { --bs-bg-opacity: 1; background-color: #0000000a !important; }

/* Match the original compiled p-lg-5 values on this migrated about page only. */
@media (min-width: 992px) {
  .about-us-page > .about-us-intro {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Keep the about page contact form aligned with its pre-migration Bootstrap layout. */
.about-us-contact-form-wrap { margin-top: 3rem !important; }
.about-us-contact-form .form-label { display:block; margin-bottom:.5rem !important; }
.about-us-contact-form .mb-3 { margin-bottom:1rem !important; }
.about-us-contact-form .row.g-3 { --bs-gutter-x:1rem; --bs-gutter-y:1rem; }
.about-us-contact-form textarea.form-control { min-height:calc(1.5em + .75rem + 2px); }
.about-us-contact-form #captcha_img_contact2 { display:inline-flex; align-items:center; }
.about-us-contact-form .col-auto.d-flex { gap:.5rem; }
.about-us-contact-form .row.justify-content-end { --bs-gutter-x:1rem; align-items:center; }
.about-us-contact-form #submitContactFormBtn,
.about-us-contact-form #cancelBtn { white-space:nowrap; }

/* @media only screen and (width >= 768px) {
  .video-js {
    height: 720px;
  }

  .tab-right-option {
    transform: translateY(-40px);
  }

  .carousel-inner--programe {
    width: 60%;
    margin: auto;
  }
} */

@media only screen and (min-height: 600px) and (min-width: 768px) and (max-height: 799px) {
  .video-js {
    height: 70vh;
    /* background: lightblue; */
  }

  .tab-right-option {
    transform: translateY(-40px);
  }

  .carousel-inner--programe {
    width: 60%;
    margin: auto;
  }
}

@media only screen and (min-height: 800px) and (min-width: 768px) and (max-height: 899px) {
  .video-js {
    height: 72vh;
    /* background: lightpink; */
  }

  .tab-right-option {
    transform: translateY(-40px);
  }

  .carousel-inner--programe {
    width: 60%;
    margin: auto;
  }
}

@media only screen and (min-height: 900px) and (min-width: 768px) {
  .video-js {
    height: 77vh;
    /* background: lightgreen; */
  }

  .tab-right-option {
    transform: translateY(-40px);
  }

  .carousel-inner--programe {
    width: 60%;
    margin: auto;
  }
}

.social_icon ul {
  list-style: none;
}

.social_icon ul li:first-child {
  margin-left: 0;
}

.facebook {
  background: #2a66b3;
  border: 1px solid #2a66b3;
  text-decoration: none;
}

/* .social_icon ul li a i {
  margin-right: 10px;
} */

.twitter {
  background: #000000;
  border: 1px solid #000000;
  text-decoration: none;
}

.social_icon ul li a {
  float: left;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.facebook:hover {
  background: #082b58;
  border: 1px solid #082b58;
}

.twitter:hover {
  background: #000000be;
  border: 1px solid #000000be;
}