:root {

  --color-main: #363534;

  --color-v1: #d29e31;

  --color-v2: #3261c8;

  --color-v3: #000;

  --color-v4: #000;

  --color-scrollbar: #d29e31;

  --font-main: "Manrope", sans-serif;

}



html {

  font-size: 14px;

  scroll-behavior: smooth;

}



@media (max-width: 576px) {

  .container {

    max-width: 576px;

  }

}



@media (min-width: 1024px) {

  html {

    font-size: 16px;

  }

}



body {

  margin-left: auto;

  margin-right: auto;

  overflow-x: hidden;

  font-family: var(--font-main);

  color: var(--color-main);

  scroll-behavior: smooth;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

}



input,

button,

select,

textarea {

  font-family: var(--font-main);

  outline: none;

}



body::-webkit-scrollbar-track {

  background-color: #fff;

}



body::-webkit-scrollbar {

  width: 0.5rem;

  background-color: #f5f5f5;

}



body::-webkit-scrollbar-thumb {

  background: var(--color-scrollbar);

}



a,

i,

input[type="submit"],

button {

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

}



.s-content ol {

  list-style: decimal;

  margin-left: 15px;

  margin-bottom: 10px;

}



.s-content ul {

  list-style: initial;

  margin-left: 15px;

  margin-bottom: 10px;

}



.s-content li {

  list-style: inherit;

  margin-bottom: 5px;

}



.s-content p {

  margin-bottom: 10px;

}



.s-content img {

  display: block;

  max-width: 100%;

  margin: 10px auto;

  width: auto !important;

  -o-object-fit: contain;

  object-fit: contain;

  height: auto !important;

}



.s-content table,

.s-content iframe {

  max-width: 100%;

  width: 100%;

}



.s-content table {

  border-collapse: collapse;

  width: 100%;

  border: solid 1px rgba(0, 0, 0, 0.431372549);

}



.s-content table td {

  border-collapse: collapse;

  border: solid 1px rgba(0, 0, 0, 0.431372549);

  padding: 3px;

}



.s-content h1,

.s-content h2,

.s-content h3,

.s-content h4,

.s-content h5,

.s-content h6 {

  display: block;

  margin-left: 0;

  margin-right: 0;

  font-weight: bold;

}



.s-content h1 {

  font-size: 2em;

  margin-top: 0.67em;

  margin-bottom: 0.67em;

}



.s-content h2 {

  font-size: 1.5em;

  margin-top: 0.3em;

  margin-bottom: 0.3em;

}



.s-content h3 {

  font-size: 1.17em;

  margin-top: 0.5em;

  margin-bottom: 0.5em;

}



.s-content h4 {

  font-size: 1em;

  margin-top: 0.6em;

  margin-bottom: 0.6em;

}



.s-content h5 {

  font-size: 0.83em;

  margin-top: 0.8em;

  margin-bottom: 0.8em;

}



.s-content h6 {

  font-size: 0.67em;

  margin-top: 0.8em;

  margin-bottom: 0.8em;

}



.s-content-table table,

.s-content-table table td {

  border: none;

  background: #f9f7f4;

  border-radius: 0.625rem;

  overflow: hidden;

}



.s-content-table thead th {

  background-color: var(--color-v1);

  color: #fff;

  font-weight: 800;

  text-transform: capitalize;

  padding: 10px;

}



.s-content-table tbody td {

  padding: 10px;

  font-size: 1rem;

  text-align: center;

}



.c-img {

  position: relative;

  display: block;

}



.c-img img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

  object-fit: cover;

}



.scale-img {

  transition: all 0.5s;

  overflow: hidden;

}



.scale-img img {

  scale: 1.1;

  transition: all 0.5s;

}



.img__ {

  position: relative;

  overflow: hidden;

}



.img__:hover::after {

  -webkit-animation: shine 0.75s;

  animation: shine 0.75s;

}



.img__::after {

  position: absolute;

  top: 0;

  left: -75%;

  z-index: 2;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

  background: linear-gradient(

    to right,

    rgba(255, 255, 255, 0) 0%,

    rgba(255, 255, 255, 0.3) 100%

  );

  transform: skewX(-25deg);

}



@keyframes shine {

  100% {

    left: 125%;

  }

}



.hv_img {

  display: block;

  position: relative;

  overflow: hidden;

}



.hv_img::before {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2;

  display: block;

  content: "";

  width: 0;

  height: 0;

  background: rgba(255, 255, 255, 0.2);

  border-radius: 100%;

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

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

  opacity: 0;

}



.hv_img:hover::before {

  -webkit-animation: circle 0.75s;

  animation: circle 0.75s;

}



@keyframes circle {

  0% {

    opacity: 1;

  }



  40% {

    opacity: 1;

  }



  100% {

    width: 200%;

    height: 200%;

    opacity: 0;

  }

}



.video {

  position: relative;

  padding-bottom: 56.25%;

  /* 16:9 */

  height: 0;

}



.video iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.img__contain img {

  width: 100%;

  height: auto;

  object-fit: contain;

  -o-object-fit: contain;

}



.img__h-full img {

  height: 100%;

}



.img__w-full img {

  width: 100%;

}



.img__center img {

  display: block;

  margin: 0 auto;

}



.hamburger {

  overflow: visible;

  cursor: pointer;

  transition-timing-function: linear;

  transition-duration: 0.15s;

  transition-property: opacity, filter;

  border: 0;

  width: 2.5rem;

  height: 2.5rem;

  padding: 0.625rem;

}



.hamburger-box {

  position: relative;

  display: inline-block;

  width: 100%;

  height: 100%;

}



.hamburger--squeeze .hamburger-inner {

  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

  transition-duration: 75ms;

}



.hamburger-inner,

.hamburger-inner:after,

.hamburger-inner:before {

  position: absolute;

  width: 1.25rem; /* giảm còn 20px */

  height: 0.1875rem; /* giảm từ 4px xuống 3px cho cân đối */

  transition-timing-function: ease;

  transition-duration: 0.15s;

  transition-property: transform;

  border-radius: 3px;

  background-color: #fff;

}



.hamburger-inner {

  top: 50%;

  display: block;

  margin-top: -0.0938rem; /* nửa chiều cao của thanh 3px */

}



.hamburger--squeeze .hamburger-inner:before {

  transition: top 75ms ease 0.12s, opacity 75ms ease;

}



.hamburger-inner:before {

  top: -0.4375rem; /* điều chỉnh theo kích thước mới */

}



.hamburger-inner:after,

.hamburger-inner:before {

  display: block;

  content: "";

}



.hamburger--squeeze .hamburger-inner:after {

  transition: bottom 75ms ease 0.12s,

    transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}



.hamburger-inner:after {

  bottom: -0.4375rem;

}



.hamburger--squeeze.is-active .hamburger-inner {

  transition-delay: 0.12s;

  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  transform: rotate(45deg);

}



.hamburger.is-active .hamburger-inner,

.hamburger.is-active .hamburger-inner:after,

.hamburger.is-active .hamburger-inner:before {

  background-color: #fff;

}



.hamburger--squeeze.is-active .hamburger-inner:before {

  top: 0;

  transition: top 75ms ease, opacity 75ms ease 0.12s;

  opacity: 0;

}



.hamburger--squeeze.is-active .hamburger-inner:after {

  bottom: 0;

  transition: bottom 75ms ease,

    transform 75ms cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;

  transform: rotate(-90deg);

}



.menu__footer a {

  display: block;

  margin-bottom: 0.75rem;

}



.menu__footer a:hover {

  color: var(--color-v1);

}



.breadcrumbs p a {

  width: 18px;

  height: 18px;

  color: transparent;

  background-image: url("../images/home.png");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  display: inline-flex;

}



.breadcrumbs p .separator {

  display: inline-flex;

  margin: 0 0.25rem;

}



.title__all {

  font-size: 2rem;

  font-weight: 800;

  text-transform: capitalize;

}



.title__sub {

  font-size: 1.5rem;

  font-weight: 800;

  text-transform: capitalize;

}



.section__form {

  background-image: url("../images/bg-form.png");

  background-size: auto calc(100% - 270px);

  background-position: bottom;

  background-repeat: repeat-x;

}



.section__form-image .section__form-icon {

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

  position: absolute;

  z-index: -1;

  pointer-events: none;

}



.section__form-image .section__form-icon:nth-of-type(1) {

  background-image: url("../images/icons/icon1.svg");

  aspect-ratio: 120/132;

  width: 23.5%;

  top: 31%;

  right: -20%;

  animation: icon-fadein 2s linear infinite;

}



.section__form-image .section__form-icon:nth-of-type(2) {

  background-image: url(../images/icons/icon2.svg);

  aspect-ratio: 122 / 168;

  width: 24%;

  top: 11%;

  left: 19%;

  animation: icon-fadein 4s linear infinite;

}



.section__form-image .section__form-icon:nth-of-type(3) {

  background-image: url(../images/icons/icon3.svg);

  aspect-ratio: 130 / 130;

  width: 25%;

  bottom: 15%;

  right: 0;

  animation: icon-rotate 2s linear infinite;

}



.section__form-image .section__form-icon:nth-of-type(4) {

  background-image: url(../images/icons/icon4.svg);

  aspect-ratio: 133 / 133;

  width: 26%;

  top: 13%;

  right: 0;

  animation: icon-rotate 2s linear infinite;

}



.section__form-image .section__form-icon:nth-of-type(5) {

  background-image: url(../images/icons/icon5.svg);

  aspect-ratio: 194 / 162;

  width: 38%;

  bottom: 32%;

  left: -7%;

  animation: icon-fadein 3s linear infinite;

}



@keyframes icon-fadein {

  0%,

  100% {

    transform: translateY(10px);

  }

  50% {

    transform: translateY(-10px);

  }

}



@keyframes icon-rotate {

  0%,

  100% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



@keyframes fadeInUpCS {

  0% {

    opacity: 0;

    transform: translateY(10px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.swiper-pagination-bullet-active {

  background: var(--color-v1);

}



.item__teacher-image img {

  height: 100%;

  width: 80%;

  left: 50%;

  transform: translateX(-50%);

  object-fit: contain;

  z-index: 2;

}



.item__teacher-image::before {

  content: "";

  position: absolute;

  height: 80%;

  width: 80%;

  left: 50%;

  transform: translateX(-50%);

  bottom: 0;

  border-radius: 40px 40px 0 0;

  background: #eeeae1;

}



.item__teacher-image::after {

  content: "";

  width: 90%;

  left: 50%;

  transform: translateX(-50%);

  bottom: 10%;

  aspect-ratio: 1/1;

  background-image: url("../images/icons/icon6.svg");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  position: absolute;

  transform-origin: center;

  animation: teacher-image-animation 3s ease-in-out infinite;

}



@keyframes teacher-image-animation {

  0%,

  100% {

    transform: translateX(-50%) translateY(4px) skewX(3deg);

  }

  50% {

    transform: translateX(-50%) translateY(-4px) skewX(-3deg);

  }

}



.clip-path-v1 {

  -webkit-clip-path: url(#clip-path-v1);

  clip-path: url(#clip-path-v1);

}



.clip-path-v2 {

  -webkit-clip-path: url(#clip-path-v2);

  clip-path: url(#clip-path-v2);

}



/* Scroll Stack Effect */

.scroll-stack-container {

  position: relative;

}



.scroll-stack-item {

  position: sticky;

  top: calc(var(--header-height, 80px) + 20px);

  margin-bottom: 1rem;

  transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease;

  transform-origin: center top;

}



.scroll-stack-item.is-stacked {

  transform: scale(0.95);

  opacity: 0.8;

}



.scroll-stack-item.is-hidden {

  transform: scale(0.9);

  opacity: 0.5;

}



.icon-fixed {

  position: relative;

  z-index: 1;

}



.icon-fixed::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: url("../images/icons/icon7.svg");

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  animation: icon-fixed 2s linear infinite;

  z-index: -1;

}



@keyframes icon-fixed {

  0%,

  100% {

    transform: rotate(0deg);

  }

  50% {

    transform: rotate(60deg);

  }

}



.icon-fixed::after {

  content: "";

  position: absolute;

  top: 6px;

  left: 6px;

  width: calc(100% - 12px);

  height: calc(100% - 12px);

  background: var(--color-v1);

  z-index: -1;

  border-radius: 50%;

}



@media (max-width: 1023px) {

  .scroll-stack-item {

    position: relative;

    top: auto;

    margin-bottom: 1rem;

  }



  .scroll-stack-item.is-stacked,

  .scroll-stack-item.is-hidden {

    transform: none;

    opacity: 1;

  }

}



@media not all and (min-width: 1352px) {

}



@media not all and (min-width: 1152px) {

  .header__menu {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 100;

    background-color: #fff;

    width: min(80%, 320px);

    height: 100dvh;

    transform: translateX(-100%);

    transition: all 0.5s;

    font-weight: 600;

  }

  .header__menu.active {

    transform: translateX(0);

  }

  .header__menu > ul > li > a {

    display: block;

    padding: 0.5rem 1rem;

  }

  .header__menu > ul > li {

    border-bottom: 1px solid #e0e0e0;

  }

  .header__menu ul ul li a {

    display: block;

    padding: 0.5rem 1rem;

    padding-left: 1.5rem;

    border-top: 1px solid #e0e0e0;

  }

  .header__menu ul li {

    position: relative;

  }

  .header__menu .btn-toggle-menu-item {

    position: absolute;

    right: 0;

    top: 0;

    padding: 0.5rem 0.75rem;

    cursor: pointer;

    width: 2.25rem;

    z-index: 1;

  }

  .header__menu .btn-toggle-menu-item.active i {

    transform: rotate(180deg);

  }

  .header__menu ul li:has(.btn-toggle-menu-item) a {

    padding-right: 2.25rem;

  }

  .header__menu ul ul ul li a {

    padding-left: 2rem;

  }

  .header__menu ul ul {

    display: none;

  }

  .bg-layout-menu-moblie.active {

    opacity: 1;

    pointer-events: auto;

    visibility: visible;

  }

}



@media (min-width: 576px) {

  .s-content-table thead th {

    font-size: 1.125rem;

  }

}



@media (min-width: 768px) {

  .title__all {

    font-size: 2.5rem;

  }

  .title__sub {

    font-size: 2rem;

  }

}



@media (min-width: 1024px) {

  .s-content-table thead th {

    font-size: 1.25rem;

  }

}



@media (min-width: 1152px) {

  .header__menu > ul {

    display: flex;

    gap: 1.5rem;

  }

  .header__menu > ul > li {

    position: relative;

  }

  .header__menu > ul > li:has(ul) {

    padding-right: 1.5rem;

  }

  .header__menu ul li .btn-toggle-menu-item {

    position: absolute;

    right: 0;

    top: 0;

    pointer-events: none;

  }

  .header__menu ul ul {

    position: absolute;

    top: 100%;

    left: 0;

    width: fit-content;

    background-color: #fff;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    z-index: 1;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

    transform: translateY(10px);

    pointer-events: none;

  }

  .header__menu ul li:hover > ul {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

  }

  .header__menu ul ul li a {

    display: block;

    padding: 0.5rem 1rem;

    white-space: nowrap;

  }

  .header__menu ul ul li:not(:last-child) a {

    border-bottom: 1px solid #e0e0e0;

  }

  .header__menu > ul > li:hover > a,

  .header__menu > ul > li:hover > .btn-toggle-menu-item {

    color: var(--color-v1);

  }

  .header__menu ul ul li:hover > a {

    background-color: var(--color-v1);

    color: #fff;

  }

  .title__all {

    font-size: 3rem;

  }

  .title__sub {

    font-size: 2.5rem;

  }

}



@media (min-width: 1352px) {

}