:root {
  --green: #22c55f;
  --green-hover: #074b20;
  --green-light: #e8f9ee;
  --blue: #113e80;
  --blue-hover: #3b82f6;
  --blue-light: #ebf2fe;
  --navy: #1e3a8a;
  --navy-hover: #0d1e4e;
  --yellow: #facc15;
  --yellow-hover: #cca60f;

  --fc-default: #374151;

  --poppins: "Poppins";
  --prompt: "Prompt", sans-serif;
  --sarabun: "Sarabun", sans-serif;

  --f-default: var(--poppins), var(--sarabun);
  --f-title: var(--poppins), var(--prompt);

  --header-height: 66px;
  --header-height-mobile: 66px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-default);
  font-optical-sizing: auto;
  color: var(--fc-default);
  background-color: #fff;
  margin: 0;
}

a {
  transition: color 0.3s, background-color 0.3s;
  text-decoration: none;
  color: var(--blue);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--blue-hover);
}

button {
  border: 0;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

h1,
h2,
h3 {
  font-family: var(--poppins), var(--prompt);
}

h3 {
  line-height: 1.4em;
}

::placeholder {
  font-size: .9em;
  font-weight: 200;
  color: #999;
}

/** Footer Begin */
footer {
  background-color: var(--blue-light);
}

/** Footer End */


/** Header Begin */
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
}

header .navbar .navbar-toggler,
header .navbar .navbar-toggler:focus,
header .navbar-toggler:active {
  box-shadow: none;
  border: 0;
}

header .navbar .navbar-toggler:hover .navbar-toggler-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/** Header End */


/** Main Begin */
main {
  margin-top: var(--header-height-mobile);
}

main section {
  padding-top: 3em;
  padding-bottom: 3em;
}

@media screen and (min-width: 991.99px) {
  main {
    margin-top: var(--header-height);
  }

  main section {
    padding-top: 6em;
    padding-bottom: 1em;
  }
}

/** Main End */

/** Button Begin */
.btn-default {
  background: none;
  padding: 0.8em 1.6em;
  border-radius: 5em 8em 0 5em;
  min-width: 14em;
  display: inline-block;
  text-align: center;
  transition: color 0.3s, background 0.3s, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: color, background, box-shadow;
  font-family: var(--prompt);
}

.btn-default:hover {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

.btn-navy {
  background-color: var(--navy);
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.btn-navy:hover {
  color: #fff;
  background-color: var(--navy-hover);
}

.btn-blue {
  color: var(--blue);
  border: 1px solid var(--blue);
}

.btn-blue.active,
.btn-blue:focus,
.btn-blue:hover {
  background-color: var(--blue-hover);
  color: #fff;
}

.btn-yellow {
  background-color: var(--yellow);
  color: var(--fc-default);
}

.btn-yellow.active,
.btn-yellow:focus,
.btn-yellow:hover {
  color: var(--fc-default);
  background-color: var(--yellow-hover);
}

.btn-green {
  background-color: var(--green);
  color: #fff;
}

.btn-green.active,
.btn-green:focus,
.btn-green:hover {
  color: #fff;
  background-color: var(--green-hover);
}

/** Button End */


/** Standard Begin */
.x-small {
  font-size: .8125em;
}

.xx-small {
  font-size: .75em;
}

.xxx-small {
  font-size: .6em;
}

.ratio-6x5::before {
  --bs-aspect-ratio: 83.33%;
}

/* Font Begin */
.ff-title {
  font-family: var(--f-title);
}

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

.fc-default {
  color: var(--fc-default);
}

.fc-blue {
  color: var(--blue-hover);
}

.fc-navy {
  color: var(--navy);
}

/* Font End */

/* Background Begin */
.bg-gray-light {
  background-color: rgba(224, 227, 231, 0.6);
}

.bg-blue-light {
  background-color: var(--blue-light);
}

.bg-green-gradient {
  background: linear-gradient(to top, #fff 0%, var(--green-light) 100%);
}

/* Background End */


/** Text Begin */
.text-truncate-2 {
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.text-truncate-3 {
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

@media screen and (min-width: 1200px) {
  .text-truncate-2 {
    height: 42px;
  }

  .text-truncate-3 {
    height: 63px;
  }
}

/** Text End */

/** Highlight Begin */
@media (min-width: 992px) {
  #highlight {
    padding-bottom: 8em;
  }
}

/** Highlight End */

/** Benefit Begin */
#benefit-menu .nav-link.active {
  pointer-events: none;
  background-color: #f0f1f1;
  color: #000;
  border-radius: 16px;
}

#benefit-content .list li {
  background-color: var(--bg-benefit, #fff);
  padding: 1em 1em 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10em;
}

#benefit-content .list img {
  width: max(15%, 3em);
}

#benefit-school {
  --bg-benefit: var(--blue-light);
}

#benefit-teacher {
  --bg-benefit: var(--green-light);
}

#benefit-parent {
  --bg-benefit: #fef9e7;
}

#benefit-student {
  --bg-benefit: #fef4eb;
}

@media (min-width: 576px) {
  #benefit-content .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  #benefit-content .list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #benefit-content .list li {
    padding-top: 1.5em;
    padding-bottom: .5em;
  }
}

/** Benefit End */

/** Feature Begin */
#feature .swiper-slide:not(.swiper-slide-active) .card {
  background-color: #f3f7fe;
}

#feature .swiper-slide p {
  height: 0;
  overflow: hidden;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity .5s .2s;
  will-change: opacity;
}

#feature .swiper-slide .number {
  background-color: var(--yellow);
  max-width: 1.9em;
  line-height: 1.9em;
}

#feature .swiper-slide-active {
  transition: .3s .3s ease-in-out;
  will-change: transform;
}

#feature .swiper-slide-active p {
  height: auto;
  margin-bottom: 1rem;
  opacity: 1;
}

#feature .swiper-slide-active .number {
  background-color: var(--navy);
}

#feature .swiper-button-next,
#feature .swiper-button-prev {
  --swiper-navigation-size: 1em;
  --swiper-navigation-color: #fff;
  background-color: var(--blue-hover);
  width: 2.5em;
  height: 2.5em;
  margin-top: 0;
  top: 0;
  flex-shrink: 0;
  transition: .3s;
  cursor: pointer;
}

#feature .swiper-button-next:hover,
#feature .swiper-button-prev:hover {
  background-color: var(--navy);
}

#feature .swiper-scrollbar {
  --swiper-scrollbar-size: 0.5em;
  --swiper-scrollbar-sides-offset: 0em;
  --swiper-scrollbar-drag-bg-color: var(--green);
  flex-shrink: 1;
  top: 0;
}

/** Feature End */

/** Free-sample Begin */
#free-sample {
  padding-top: 8em;
  padding-bottom: 8em;
}

/** Free-sample End */

/** FAQ Begin */
#faq .accordion {
  --bs-accordion-active-bg: #ebeff3;
  --bs-accordion-bg: #ebeff3;
  --bs-accordion-active-color: var(--fc-default);
}

#faq .accordion-button::after {
  background-color: var(--green);
  background-image: none;
  mask-image: var(--bs-accordion-btn-active-icon);
  padding-left: .5em;
}

#faq .accordion-button::before {
  content: 'Q:';
  font-weight: 600;
  color: var(--navy);
  position: absolute;
  left: 1.3em;
}

#faq .accordion-body::before {
  content: 'A:';
  font-weight: 600;
  color: var(--navy);
  position: absolute;
  left: 1.3em;
}

/** FAQ End */

/** Deco Begin */
.deco-capsule .deco {
  opacity: 0;
  position: absolute;
  z-index: -1;
  user-select: none;
  transition: opacity .5s;
  will-change: transform, opacity;
}

.deco-capsule .deco i {
  display: block;
  position: relative;
  width: 10.31cqw;
  aspect-ratio: 181 / 419;
  border-radius: 30em;
  background-color: var(--blue-light);
  transform: rotate(-59deg);
}

.deco-capsule .deco i::before {
  content: '';
  position: absolute;
  aspect-ratio: 60 / 195;
  width: 3.5cqw;
  border-radius: 20em;
  background-color: rgba(34, 197, 95, .5);
  top: 5.8%;
  right: -18%;
}

.deco-capsule .deco i::after {
  content: '';
  position: absolute;
  aspect-ratio: 49 / 179;
  width: 3cqw;
  border-radius: 20em;
  background-color: rgba(59, 130, 246, .5);
  bottom: 20%;
  left: -14%;
}

.deco-capsule .deco-left {
  top: max(-18%, -4.5cqw);
  left: 3%;
}

.deco-capsule .deco-right {
  top: 34%;
  right: 0;
}

@media (min-width: 992px) {
  .deco-capsule .deco {
    opacity: 1;
  }
}

.deco-circle .deco {
  position: absolute;
  z-index: -1;
  user-select: none;
  border-radius: 100%;
  aspect-ratio: 1 / 1;
  will-change: transform;
}

.deco-circle .deco-left {
  width: 33%;
  background-color: #fb923c19;
  left: -7cqw;
  top: -41cqw;
}

.deco-circle .deco-right {
  width: 35%;
  background-color: #facc1519;
  right: -7cqw;
  top: -40cqw;
}

/** Deco End */

/** Animation */
.action-title {
  overflow: hidden;
}

.action-title>span {
  display: block;
  opacity: 0;
  transform: translateY(250px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.action-box-up {
  opacity: 0;
  transform: translateY(150px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.action-fadein {
  opacity: 0;
  transition: opacity 0.5s .3s ease-out;
}

.action-title.fin span,
.action-box-up.fin,
.action-fadein.fin {
  opacity: 1;
  transform: translateY(0);
}

.action-up.fin {
  animation: action-up .3s .8s forwards;
  animation-iteration-count: 1;
}

@keyframes action-up {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}