@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&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");
@import url("https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Gloria+Hallelujah&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&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=Pacifico&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-prompt: "IBM Plex Sans Thai", sans-serif;
  --color-text-default: #4c4c4c;
  --text-blue: #0D0D6F: 
}

main {
  min-height: calc(100vh - 31rem);
}

@layer base {
  .websites[lang="th"], .websites[lang="en"] { font-family: "IBM Plex Sans Thai", sans-serif; }
}

@layer utilities {
  .font-th { font-family: "IBM Plex Sans Thai", sans-serif; }
  .font-en { font-family: "IBM Plex Sans Thai", sans-serif; }
}

.field_with_errors {
  display: contents;
}

.font-prompt {
  font-family: var(--font-prompt);
}

.custom-swiper .swiper-slide {
  transition: transform 0.3s ease, filter 0.3s ease !important;
  transform: scale(0.8) !important;
}

.custom-swiper .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.8) !important;
  z-index: 10;
  filter: grayscale(0) brightness(100%) !important;
  height: auto;
}

.custom-swiper .swiper-slide.swiper-slide-active {
  transform: scale(1) !important;
  z-index: 10;
  filter: grayscale(0) brightness(100%) !important;
  height: auto;
}

.swiper-pagination-bullet-active {
  --swiper-pagination-color: #0056a9 !important;
}

.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
  color: #0056a9;
  font-size: 150%;
  font-weight: bold;
}

@media (max-width: 639px) {
  .swiper .swiper-button-next,
  .swiper .swiper-button-prev {
    display: none;
  }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.space-y-4 > :last-child {
  margin-block-end: calc(
    calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))
  );
}

.custom-swiper {
  transition: opacity 1s ease-in-out;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
  color: #fff;
  background: #0056a9 !important;
  box-shadow: none;
  border-radius: 3px;
}

.autocomplete {
  width: 100%;
  position: relative;
}

ul.list-group {
  position: absolute;
  width: 40%;
  background-color: white;
  z-index: 100;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.rounded-underline::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: #2c1aa1;
  border-radius: 9999px;
  margin-top: 4px;
}

.navbar-hidden {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.navbar-visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.menu {
  --menu-active-bg: none;
  --menu-active-fg: #2c1aa1;
}

.menu
  :where(
    li:not(.menu-title, .disabled)
      > :not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover,
    li:not(.menu-title, .disabled)
      > details
      > summary:not(.menu-title):not(.menu-active, :active, .btn):hover
  ) {
  background: none !important;
}

.tabs .tab:not(.tab-active) {
  color: black;
}

.tabs .tab:not(.tab-active):hover {
  color: #2c1aa1;
}

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to top right, rgb(123, 0, 206), rgb(39, 194, 255))
      border-box;
  border-radius: 50em;
  border: 2px solid transparent;
}

.btn-gradient-2:hover {
  background: linear-gradient(white, white) padding-box,
    linear-gradient(to top right, rgb(54, 148, 255), rgb(191, 251, 255))
      border-box;
  border-radius: 50em;
  border: 2px solid transparent;
}



.navbar-menu-item--active {
  background: white;
  color: #0f172a;
  font-weight: 700;
  border-radius: 30px;
  transition: all 0.2s ease-in-out;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* CSS แยก หรือใส่ <style> */
.invalid-wrapper:has(input:invalid:not(:placeholder-shown)) {
  border-color: #ef4444;
}

.hover-brighten:hover {
  filter: brightness(1.5);
}

#tab-ongoing:checked ~ .tab-contents #content-ongoing {
  display: block;
}

#tab-ongoing:checked ~ .tabs label[for="tab-ongoing"] {
  font-weight: bold;
  color: black;
  background-color: #fff;
  translate: 0 -4px;
}

#tab-ongoing:checked ~ label[for="tab-ongoing"] {
  font-weight: bold;
}

#tab-ongoing:checked ~ .tab-contents #content-upcoming,
#tab-ongoing:checked ~ .tab-contents #content-expired {
  display: none;
}

#tab-upcoming:checked ~ .tab-contents #content-upcoming {
  display: block;
}

#tab-upcoming:checked ~ .tabs label[for="tab-upcoming"] {
  font-weight: bold;
  color: black;
  background-color: #fff;
  translate: 0 -4px;
}

#tab-upcoming:checked ~ .tab-contents #content-ongoing,
#tab-upcoming:checked ~ .tab-contents #content-expired {
  display: none;
}

#tab-expired:checked ~ .tab-contents #content-expired {
  display: block;
}

#tab-expired:checked ~ .tab-contents #content-ongoing,
#tab-expired:checked ~ .tab-contents #content-upcoming {
  display: none;
}

#tab-expired:checked ~ .tabs label[for="tab-expired"] {
  font-weight: bold;
  color: black;
  background-color: #fff;
  translate: 0 -4px;
}

.logo-row {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.logo-track {
  display: flex;
  gap: 0rem;
}

.logo-track img {
  height: 51px; /* ปรับขนาดโลโก้ตามต้องการ */
  object-fit: contain;
}

/* Animation แถวบน → ขวา */
.row-right .logo-track {
  animation: slideRight 20s linear infinite;
}

@keyframes slideRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Animation แถวล่าง → ซ้าย */
.row-left .logo-track {
  animation: slideLeft 20s linear infinite;
}

@keyframes slideLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.partners-section {
  overflow: hidden;
}

.partners-title {
  /* ใช้ tailwind class ที่มีอยู่แล้วก็ได้ */
}

.partners-marquee {
  --gap: 40px;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
}

.profile-marquee {
  --gap: 16px;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
}

.partners-track {
  list-style: none;
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
}

.partners-item {
  flex: 0 0 auto;
}

.partners-logo {
  max-height: 48px;
  margin-inline: 0.5rem;
}

/* animation */
.partners-track--right {
  animation: marquee-right 200s linear infinite;
}

.partners-track--left {
  animation: marquee-left 200s linear infinite;
}

.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

@keyframes marquee-right {
  from {
    transform: translateX(calc(-50% - var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-48% - var(--gap)));
  }
}

/* font */
.font-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

.course_related_course_field input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #0056A9;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.course_related_course_field input[type="checkbox"]:checked {
    background-color: #0056A9;
    border-color: #0056A9;
}

.course_related_course_field input[type="checkbox"]:checked::after {
    content: "✓";
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.course_related_course_field input[type="checkbox"]:hover {
    border-color: #0056A9;
}

.counter-container {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.counter-container.animate {
  opacity: 1;
  transform: translateY(0);
}

.counter-number {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1ch;
}

.counter-animate {
  opacity: 1;
  transform: translateY(0);
}

.navbar-menu-item {
  position: relative;
  display: inline-flex;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  min-width: fit-content;
}

.navbar-menu-item:hover:not(.navbar-menu-item--active) {
  background: white;
  color: #0f172a;
}

/* Hero section clip-path styles */
.hero-video-clip-path {
  clip-path: polygon(100% 0%, 0% 0% , 0.00% 92.00%, 1.00% 92.25%, 2.00% 92.50%, 3.00% 92.75%, 4.00% 92.99%, 5.00% 93.24%, 6.00% 93.47%, 7.00% 93.70%, 8.00% 93.93%, 9.00% 94.14%, 10.00% 94.35%, 11.00% 94.55%, 12.00% 94.74%, 13.00% 94.92%, 14.00% 95.08%, 15.00% 95.24%, 16.00% 95.38%, 17.00% 95.51%, 18.00% 95.62%, 19.00% 95.72%, 20.00% 95.80%, 21.00% 95.87%, 22.00% 95.93%, 23.00% 95.97%, 24.00% 95.99%, 25.00% 96.00%, 26.00% 95.99%, 27.00% 95.97%, 28.00% 95.93%, 29.00% 95.87%, 30.00% 95.80%, 31.00% 95.72%, 32.00% 95.62%, 33.00% 95.51%, 34.00% 95.38%, 35.00% 95.24%, 36.00% 95.08%, 37.00% 94.92%, 38.00% 94.74%, 39.00% 94.55%, 40.00% 94.35%, 41.00% 94.14%, 42.00% 93.93%, 43.00% 93.70%, 44.00% 93.47%, 45.00% 93.24%, 46.00% 92.99%, 47.00% 92.75%, 48.00% 92.50%, 49.00% 92.25%, 50.00% 92.00%, 51.00% 91.75%, 52.00% 91.50%, 53.00% 91.25%, 54.00% 91.01%, 55.00% 90.76%, 56.00% 90.53%, 57.00% 90.30%, 58.00% 90.07%, 59.00% 89.86%, 60.00% 89.65%, 61.00% 89.45%, 62.00% 89.26%, 63.00% 89.08%, 64.00% 88.92%, 65.00% 88.76%, 66.00% 88.62%, 67.00% 88.49%, 68.00% 88.38%, 69.00% 88.28%, 70.00% 88.20%, 71.00% 88.13%, 72.00% 88.07%, 73.00% 88.03%, 74.00% 88.01%, 75.00% 88.00%, 76.00% 88.01%, 77.00% 88.03%, 78.00% 88.07%, 79.00% 88.13%, 80.00% 88.20%, 81.00% 88.28%, 82.00% 88.38%, 83.00% 88.49%, 84.00% 88.62%, 85.00% 88.76%, 86.00% 88.92%, 87.00% 89.08%, 88.00% 89.26%, 89.00% 89.45%, 90.00% 89.65%, 91.00% 89.86%, 92.00% 90.07%, 93.00% 90.30%, 94.00% 90.53%, 95.00% 90.76%, 96.00% 91.01%, 97.00% 91.25%, 98.00% 91.50%, 99.00% 91.75%, 100.00% 92.00%);
}

.hero-gradient-clip-path {
  clip-path: polygon(0% 0%, 100% 0%, 100.00% 92.00%, 99.00% 91.75%, 98.00% 91.50%, 97.00% 91.25%, 96.00% 91.01%, 95.00% 90.76%, 94.00% 90.53%, 93.00% 90.30%, 92.00% 90.07%, 91.00% 89.86%, 90.00% 89.65%, 89.00% 89.45%, 88.00% 89.26%, 87.00% 89.08%, 86.00% 88.92%, 85.00% 88.76%, 84.00% 88.62%, 83.00% 88.49%, 82.00% 88.38%, 81.00% 88.28%, 80.00% 88.20%, 79.00% 88.13%, 78.00% 88.07%, 77.00% 88.03%, 76.00% 88.01%, 75.00% 88.00%, 74.00% 88.01%, 73.00% 88.03%, 72.00% 88.07%, 71.00% 88.13%, 70.00% 88.20%, 69.00% 88.28%, 68.00% 88.38%, 67.00% 88.49%, 66.00% 88.62%, 65.00% 88.76%, 64.00% 88.92%, 63.00% 89.08%, 62.00% 89.26%, 61.00% 89.45%, 60.00% 89.65%, 59.00% 89.86%, 58.00% 90.07%, 57.00% 90.30%, 56.00% 90.53%, 55.00% 90.76%, 54.00% 91.01%, 53.00% 91.25%, 52.00% 91.50%, 51.00% 91.75%, 50.00% 92.00%, 49.00% 92.25%, 48.00% 92.50%, 47.00% 92.75%, 46.00% 92.99%, 45.00% 93.24%, 44.00% 93.47%, 43.00% 93.70%, 42.00% 93.93%, 41.00% 94.14%, 40.00% 94.35%, 39.00% 94.55%, 38.00% 94.74%, 37.00% 94.92%, 36.00% 95.08%, 35.00% 95.24%, 34.00% 95.38%, 33.00% 95.51%, 32.00% 95.62%, 31.00% 95.72%, 30.00% 95.80%, 29.00% 95.87%, 28.00% 95.93%, 27.00% 95.97%, 26.00% 95.99%, 25.00% 96.00%, 24.00% 95.99%, 23.00% 95.97%, 22.00% 95.93%, 21.00% 95.87%, 20.00% 95.80%, 19.00% 95.72%, 18.00% 95.62%, 17.00% 95.51%, 16.00% 95.38%, 15.00% 95.24%, 14.00% 95.08%, 13.00% 94.92%, 12.00% 94.74%, 11.00% 94.55%, 10.00% 94.35%, 9.00% 94.14%, 8.00% 93.93%, 7.00% 93.70%, 6.00% 93.47%, 5.00% 93.24%, 4.00% 92.99%, 3.00% 92.75%, 2.00% 92.50%, 1.00% 92.25%, 0.00% 92.00%);
}