:root {
  --cl-main: #000;
  --cl-primary: #662872;
  --cl-secondary: #00adee;
  --cl-tertiary: #00a14b;
  --cl-quaternary: #ffca05;
  --cl-scrollbar: #662872;
  --font-main: "VL AmpleSoft";
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoftThin-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoft-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoft.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoft-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoft-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL AmpleSoft";
  src: url("../fonts/VLAmpleSoftBold-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL Ample";
  src: url("../fonts/VLAmple-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VL Ample 4";
  src: url("../fonts/VLAmple.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iCiel Pony";
  src: url("../fonts/iCielPony.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Constructio Grotesk";
  src: url("../fonts/ConstructioGrotesk-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html {
  font-size: 12px;
  scroll-behavior: smooth;
}
@media (min-width: 576px) {
  html {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}
body {
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  font-family: var(--font-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(--cl-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;
}
.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;
  }
}
.img-contain img {
  width: 100%;
  height: auto;
  object-fit: contain;
  -o-object-fit: contain;
}
.img-h-full img {
  height: 100%;
}
.video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  background: #c4a4c5;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: linear-gradient(90deg, #662872 0%, #d449cb 100%);
  filter: drop-shadow(0px 2px 4px #daacd8);
}
.btn-custom span {
  background-image: url("../images/navigation.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s ease;
}
.btn-custom:hover span {
  filter: drop-shadow(0px 2px 4px #ec09e1);
}
.heading-linear {
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head-mail span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-mail.png");
}
.head-phone span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-phone.png");
}
.head-clock span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-clock.png");
}
.head-fb span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-fb.png");
}
.head-ins span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-insta.png");
}
.head-zalo span {
  margin-right: 0.5rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/icon-zalo.png");
}
.bg-linear_yellow,
.bg-linear_yellow-circle {
  background: linear-gradient(90deg, #f7d300 0%, #ff9626 100%);
  position: relative;
  z-index: 1;
}
.bg-linear_yellow::before {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  height: 100%;
  width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(247 211 0 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
  --tw-content: "";
  content: var(--tw-content);
}
.bg-linear_yellow:hover::before {
  width: 100%;
}
.bg-linear_yellow-circle::before {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform-origin: center;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(247 211 0 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: linear;
  --tw-content: "";
  content: var(--tw-content);
}
.bg-linear_yellow-circle:hover::before {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.swiper-container {
  position: relative;
}
.btn-course::before {
  position: absolute;
  inset: 0px;
  z-index: 1;
  display: block;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 108 34 / var(--tw-border-opacity));
  --tw-content: "";
  content: var(--tw-content);
}
.btn-course::after {
  position: absolute;
  inset: 0px;
  z-index: 2;
  display: block;
  width: 0px;
  background-image: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  --tw-content: "";
  content: var(--tw-content);
}
.btn-course:hover::after {
  width: 100%;
}
.custom-ul li {
  list-style: none;
  margin-bottom: 0.5rem;
}
.custom-ul li::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/check-mark.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: inline-block;
  margin-right: 0.5rem;
}
.btn-linear_orange {
  background: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
}
.btn-linear_orange::before {
  content: "";
  background: #ff6c22;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  transition: all 0.3s;
}
.btn-linear_orange:hover::before {
  width: 100%;
}
.play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 21%;
  height: 4.25rem;
  background-image: url("../images/play-btn.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.star-ratting::after {
  content: "";
  width: 1.625rem;
  height: 1.625rem;
  background-image: url("../images/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-left: 0.25rem;
  transform: translateY(0.25rem);
}
.text-linear_orange {
  background: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-course:hover .text-linear_orange {
  -webkit-text-fill-color: #fff;
}
.text-linear_yellow {
  background: linear-gradient(90deg, #f7d300 0%, #ffd735 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.layout_arena {
  color: white;
  -webkit-text-stroke: 0.1875rem var(--cl-primary);
  text-stroke: 0.1875rem var(--cl-primary);
}
.layout_arena::before {
  content: "";
  background-image: url("../images/image5.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.icon-clock::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/icon-aram-clock.png");
  background-size: 100% auto;
  margin-right: 0.5rem;
  display: inline-block;
  transform: translateY(0.5rem);
}
.pagination-custom .swiper-pagination-progressbar-fill::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  height: 0.5rem;
  border: 1px solid #eb85ff;
  background: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
  border-radius: 38px;
  width: 100%;
}
.pagination-custom {
  height: 2px !important;
}
.clock {
  width: 2rem;
  height: 2rem;
  background-image: url("../images/clock.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.status::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/icon-run.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  margin-left: 0.5rem;
  transform: translateY(4px);
}
.swiper-partner .item img {
  padding: 1rem;
  object-fit: contain;
  max-height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.swiper-partner .swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-feedback .item {
  background-image: url("../images/item-feedback.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
body.no-scroll {
  overflow: hidden;
}
.icon-login::before {
  content: "";
  width: 20%;
  height: 0.5rem;
  display: inline-block;
  background-image: url("../images/icon.png");
  background-repeat: no-repeat;
  transform: translateY(0.5rem);
  margin-right: 1rem;
}
.icon-login::after {
  content: "";
  width: 20%;
  height: 0.5rem;
  display: inline-block;
  background-image: url("../images/icon.png");
  background-repeat: no-repeat;
  transform: rotate(180deg) translateY(-0.5rem);
  margin-left: 1rem;
}
.btn-linear_purple {
  background: linear-gradient(90deg, #662872 0%, #d449cb 100%);
}
.btn-linear_purple-hv::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #662872;
  transition: all 0.3s;
  z-index: -1;
}
.btn-linear_purple:hover::before {
  width: 100%;
}
.text-linear_purple {
  background: linear-gradient(90deg, #662872 0%, #d449cb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-linear_purple_hv::before {
  content: "";
  background: linear-gradient(90deg, #662872 0%, #d449cb 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  transition: all 0.3s;
}
.text-linear_purple_hv:hover::before {
  width: 100%;
}
.btn-linear_purple::before {
  content: "";
  background: #662872;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  transition: all 0.4s;
}
.btn-linear_purple:hover::before {
  width: 100%;
}
.icon-gg::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/icon-gg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
}
.module-modal {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.module-modal.active {
  visibility: visible;
  opacity: 1;
  align-items: center;
}
.module-modal .modal-content {
  transform: translateY(-5rem);
  transition: all 0.3s;
}
.module-modal.active .modal-content {
  transform: translateY(0);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Hide the spinner controls for number input on Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.breakcumbs ul,
.breakcumbs ul li {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.breakcumbs li:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin: 0 0.5rem;
}
.breakcumbs ul {
  flex-wrap: wrap;
}
.cs-scale {
  animation: zoomInSm 2s infinite alternate;
}
@keyframes zoomInSm {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.teaching-team .item {
  background-image: url("../images/image18.png");
  background-repeat: no-repeat;
  background-position: bottom;
}
.teaching-team .img_teach {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.pagination-news .swiper-pagination-bullet {
  background: #3e4349;
  width: 0.5rem;
  height: 0.5rem;
}
.pagination-news .swiper-pagination-bullet-active {
  background: #5e2165;
  width: 1.5rem;
  border-radius: 0.5rem;
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0.5;
}
#map iframe {
  width: 100%;
  min-height: 312px;
  outline: none;
  height: 100%;
}
.star-yellow {
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-block;
  background-image: url("../images/star_yellow.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.star-purple {
  width: 1.625rem;
  min-width: 1.625rem;
  height: 1.625rem;
  display: inline-block;
  background-image: url("../images/star.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.rankings li:nth-child(1) span:nth-child(1) {
  background-image: url("../images/top1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
}
.rankings li:nth-child(2) span:nth-child(1) {
  background-image: url("../images/top2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
}
.rankings li:nth-child(3) span:nth-child(1) {
  background-image: url("../images/top3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
}
.icon-crown {
  width: 1.25rem;
  min-width: 1.6875rem;
  height: 1.5rem;
  display: inline-block;
  background-image: url("../images/icon-crown.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.icon-time-end {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url("../images/icon-time-end.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.border-linear-yel-ora {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(0deg, #f7d300 0%, #ff9626 100%) border-box;
  border-style: solid;
  border-color: transparent;
}
.border-linear-purple {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(0deg, #662872 0%, #d449cb 100%) border-box;
  border-style: solid;
  border-color: transparent;
}
.border-linear-purple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(0deg, #662872 0%, #d449cb 100%);
  transition: all 0.3s;
}
.border-linear-purple_hv:hover::before {
  width: 100%;
}
.border-linear-purple_hv:hover .text-linear_purple {
  -webkit-text-fill-color: #fff;
}
.step::before {
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: 125%;
  border: 2px dashed #662872;
  border-radius: 50%;
  background: conic-gradient(
    from 0 at 0 0,
    #662872 0deg 10deg,
    transparent 10deg 20deg
  );
  animation: step-rotate 3s infinite linear;
}
.all-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(1.25rem, -50%);
  height: calc(100% - 4rem);
  border-left: 2px dashed #662872;
  background: conic-gradient(
    from 0 at 0 0,
    #662872 0deg 10deg,
    transparent 10deg 20deg
  );
}
@keyframes draw-line {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes step-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.menu-info li {
  overflow-x: hidden;
}
.menu-info a {
  display: flex;
  align-items: center;
  transform: translateX(-1.5rem);
}
.menu-info a::before {
  content: "";
  width: 1rem;
  height: 2px;
  display: block;
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
  margin-right: 0.5rem;
}
label[for="male-gender"] span::before {
  content: "";
  width: 1.6875rem;
  height: 2.1875rem;
  background-image: url("../images/male_gender.png");
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  display: inline-block;
  transform: translateY(0.5rem);
  margin: 0 0.25rem;
}
label[for="female-gender"] span::before {
  content: "";
  width: 1.6875rem;
  height: 2.1875rem;
  background-image: url("../images/female_gender.png");
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  display: inline-block;
  transform: translateY(0.5rem);
  margin: 0 0.25rem;
}
.unread-news.active {
  opacity: 1;
}
.cs-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}
.cs-scroll::-webkit-scrollbar {
  width: 4px;
  height: 15px;
  background-color: #f5f5f5;
}
@media (max-width: 1023px) {
  .cs-scroll::-webkit-scrollbar {
    width: 4px;
    height: 5px;
  }
}
.cs-scroll::-webkit-scrollbar-thumb {
  background: var(--cl-scrollbar);
  border-radius: 4px;
}
.icon-xu {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-image: url("../images/icon-xu.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.text-linear_yellow {
  background: var(--line-2, linear-gradient(90deg, #f7d300 0%, #ff9626 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.crossbar::before {
  content: "";
  display: block;
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--ratio);
}
.crossbar-orange::before {
  content: "";
  display: block;
  background: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--ratio);
}
label.cart[for^="cart-"]:has(input:checked) {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #a900ca 0%, #d449cb 100%) border-box;
  border: 1.5px solid transparent;
}
label.cart[for^="cart-"]:has(input:checked) .cart-check {
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
}
.btn-voucher::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 4px;
  bottom: 0;
  z-index: 1;
  display: block;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 108 34 / var(--tw-border-opacity));
  --tw-content: "";
  content: var(--tw-content);
}
.btn-voucher::after {
  position: absolute;
  inset: 0px;
  z-index: 2;
  display: block;
  width: 0px;
  background-image: linear-gradient(90deg, #662872 0%, #d449cb 100%);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 400ms;
  content: "";
}
.btn-voucher:hover::after {
  width: 100%;
}
.btn-voucher:hover .text-linear_purple {
  -webkit-text-fill-color: #fff;
}
.icon-bank {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-image: url("../images/icon-bank.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.icon-mastercard {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-image: url("../images/icon-mastercard.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.icon-direct-pay {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-image: url("../images/icon-direct-pay.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.list-bank-pay {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}
label[for="pay-bank"]:has(input:checked) + .list-bank-pay {
  max-height: 37.5rem;
}
.category-course .item.active,
.category-course .item:hover {
  border-color: #ff6c22;
  background: linear-gradient(90deg, #f7d300 0%, #ffd735 100%);
}
.category-course .item.active a,
.category-course .item:hover a {
  background: linear-gradient(90deg, #a900ca 0%, #d449cb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-line-ora::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/line-top.png");
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.bg-line-ora::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/line-bottom.png");
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.bg-line-purple::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/line-top-purple.png");
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.bg-line-purple::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/line-bottom-purple.png");
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.icon-message {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-image: url("../images/icon-message.png");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
}
.course-content ul {
  max-height: 0;
  transition: all 1s;
  overflow: hidden;
}
.course-content label:has(input:checked) + ul {
  max-height: 1000px;
}
.kk-star-full {
  background-image: url("../images/kk-rating-whie.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.course-content li.viewed {
  color: #30a30e;
}
.course-content li.unfinished {
  color: #f18c19;
}
.relative-img img {
  position: relative;
}
.nav-course .item.active,
.nav-course .item:hover {
  border-color: #ff6c22;
  background: linear-gradient(90deg, #ff6c22 0%, #ff9010 57.28%, #ffaa02 100%);
}
.nav-course .item.active a,
.nav-course .item:hover a {
  color: #fff;
}
label.answer:has(input:checked) {
  background-color: #1e7719;
  color: #fff;
}
label.answer-img:has(input:checked) {
  border-color: #1e7719;
}
label.answer-img:has(input:checked) .pos {
  background: #1e7719;
  color: #fff;
}
.ly_diamond {
  clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0% 0%);
}
.text-stroke-white {
  -webkit-text-stroke-width: 5;
  -webkit-text-stroke-color: var(--white, #fff);
}
.menu-footer ul {
  display: flex;
  flex-wrap: wrap;
}
.pagination a,
.pagination strong {
  display: inline-block;
  min-width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 6.1875rem;
  text-align: center;
  background: #ebebeb;
  margin-right: 0.3125rem;
  margin-bottom: 0.3125rem;
}
.pagination a:hover,
.pagination strong {
  background: #662872;
  color: white;
}
.pro-list-option_course label:has(input:checked) {
  border: 1px solid var(--cl-secondary);
  opacity: 1;
  background: #fce1cc;
  color: #fff;
}
@media not all and (min-width: 576px) {
  .menu-footer ul {
    font-size: 1.28rem;
  }
}
@media (min-width: 1680px) {
  .menu-footer ul {
    flex-direction: column;
  }
}
.menu-footer ul li {
  margin-bottom: 2rem;
  width: 50%;
}
.menu-footer ul li:last-child {
  margin-bottom: 0px;
}
@media (min-width: 1024px) {
  .menu-footer ul li {
    width: 33.333333%;
  }
}
@media (min-width: 1680px) {
  .menu-footer ul li {
    width: 100%;
  }
}
div.in-loading {
  text-align: center;
}
.loader-dot {
  --animation-duration: 1500ms;
}
.loader-dot .loader-item {
  --item-size: 10px;
  width: var(--item-size);
  height: var(--item-size);
  display: inline-block;
  margin: 0 3px;
  border-radius: 50%;
  background: #c4c4c4;
  -webkit-animation: loadDot 1500ms ease-in-out infinite;
  animation: loadDot 1500ms ease-in-out infinite;
}
@-webkit-keyframes loadDot {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
@keyframes loadDot {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
.loader-dot .loader-item:nth-child(1) {
  -webkit-animation-delay: calc(var(--animation-duration) / 5 * -4);
  animation-delay: calc(var(--animation-duration) / 5 * -4);
}
.loader-dot .loader-item:nth-child(2) {
  -webkit-animation-delay: calc(var(--animation-duration) / 5 * -3);
  animation-delay: calc(var(--animation-duration) / 5 * -3);
}
.loader-dot .loader-item:nth-child(3) {
  -webkit-animation-delay: calc(var(--animation-duration) / 5 * -2);
  animation-delay: calc(var(--animation-duration) / 5 * -2);
}
.loader-dot .loader-item:nth-child(4) {
  -webkit-animation-delay: calc(var(--animation-duration) / 5 * -1);
  animation-delay: calc(var(--animation-duration) / 5 * -1);
}
.list-of-lessons .item.active ul {
  display: block;
}
.list-of-lessons .item.active button i {
  transform: rotate(180deg);
}
.video-lesson {
  border-radius: 20px;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
      border-box;
  border-style: solid;
  border-color: transparent;
  box-shadow: -3px -3px 4px 0px rgba(0, 0, 0, 0.4) inset;
}
.c-img iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.video_add::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 21%;
  height: 4.25rem;
  background-image: url("../images/play-btn.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.video_add::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.list-course li.viewed *,
.list-course li.viewed {
  color: #30a30e;
}
.list-course li.unfinished *,
.list-course li.unfinished {
  color: #f18c19;
}
.module-tabs .tab-content.active {
  display: block;
}
.list-course .tab-link.active {
  border: 1px solid #ff6c22;
  background: linear-gradient(90deg, #ff6c22 0%, #ffaa02 100%);
  color: #fff;
}
.language_mobile {
  font-size: 18px;
  border: 1px solid #662872;
  margin-right: 10px;
}
.modal-search {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.modal-search.active {
  visibility: visible;
  opacity: 1;
}
.modal-search form {
  transform: translateY(-3rem);
  transition: all 0.3s;
}
.modal-search.active form {
  transform: translateY(0);
}
.bg-animation {
  animation: expandWidth 5s ease-in-out infinite;
}
@keyframes expandWidth {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.btn-dk:hover {
  background: linear-gradient(90deg, #662872 100%, #d449cb 0%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.close-modal {
  background: linear-gradient(90deg, #a900ca 0%, #d549cb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.close-modal:hover {
  -webkit-text-fill-color: #fff;
  background: none;
}
.text-linear_certificate:hover {
  background: linear-gradient(90deg, #a900ca 100%, #d549cb 0%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-linear_purple {
  background: linear-gradient(90deg, #662872 0%, #d449cb 100%);
}
.close-modal {
  position: relative;
}
.close-modal:hover::before {
  width: 100%;
}
.close-modal::before {
  content: "";
  background: #662872;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: -1;
  transition: all 0.4s;
}
.payment-input input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  background-color: white;
  border: 1px solid #888888;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.payment-input input[type="radio"]:checked {
  background-color: #a900ca;
  border-color: #d549cb;
}
.payment-input input[type="radio"]:focus {
  outline: none;
}
body {
  top: 0 !important;
}
.skiptranslate {
  display: none !important;
}
#google_translate_element {
  display: none !important;
}
.icon_submenu_destop {
  font-size: 80%;
  margin-left: 5px;
  display: none;
}
.min-height-55 {
  min-height: 55px;
}
label[for^="color"]:has(input:checked) {
  border-color: var(--cl-main);
}
label[for^="type"]:has(input:checked),
label[for^="designs"]:has(input:checked),
label[for^="scents"]:has(input:checked) {
  opacity: 1;
  border-color: var(--cl-secondary);
}
.item_option_course{
	border:1px solid #ccc !important;
}
.question-content p img{
  margin-left: auto;
  margin-right: auto;
}
.list-of-lessons p{
  text-align: left !important;
}
.tab-sidebar__lesson .tab-link.active{
      background: #662872;
      color: #fff;
}
.heading-linear{
  padding-left: 10px;
}
@media (min-width: 1280px) {
  .icon_submenu_destop {
    display: inline-block;
  }
}
.button_logout_mobile {
  display: none;
}
.popup-certificate{
  max-width: 777px;
  width: 100%;
  aspect-ratio: 777/557;
  position: relative;
  font-size: 1rem;
}
.popup-certificate .popup-certificate-content{
  position: absolute;
  bottom: 1.65em;
  right: 2%;
  width: 58%;
  height: 60%;
  display: flex;
  flex-direction: column;
}
.popup-certificate .popup-certificate-content .content__title{
  display: block;
  margin-bottom: 0.25em;
  font-size: 1.125em;
}
.popup-certificate .popup-certificate-content .content__title strong{
  font-size: 1.25em;
}
.popup-certificate .popup-certificate-content .signature{
  width: fit-content;
  text-align: center;
  font-size: 1em;
  margin: auto 1em 0 auto;
}
.popup-certificate .popup-certificate-content .signature .img__contain{
  width: 9.375em;
  padding-bottom: 0.5em;
  border-bottom: 1.5px solid #000;
  margin-bottom: 0.5em;
}
.popup-certificate .popup-certificate-content .signature .signature__name{
  margin-bottom: 0.5em;
}
.popup-certificate .popup-certificate-content .signature .signature__position{
  display: block;
  font-size: 0.75em;
}
.popup-certificate .popup-certificate-content .signature__code{
  position: absolute;
  background-color: #fff;
  padding: 0 0.75em;
  border-radius: 1em;
  bottom: 5%;
  left: -59%;
  font-size: 0.875em;
}
.custom_title_iphone{
    padding-top: 10px;
}
div#toc_container {
  border: 1px solid rgba(161, 158, 150, 0.4);
  background: rgba(255, 251, 232, 0.8);
  padding: 5px 15px;
  margin-bottom: 10px !important;
}
.show_or_hidden_toc {
  cursor: pointer;
}
.toc_heading {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc_list {
  margin-left: 0;
  padding-top: 10px;
}
.toc_list li {
  position: relative;
  margin-bottom: 7px !important;
  padding-left: 0;
  list-style: none;
  font-weight: 400;
  font-size: 14px;
}
div#toc_container ul {
  padding-left: 15px !important;
  margin-bottom: 0 !important;
}
.heading-linear{
  padding-top: 10px;
}
.comment-item__content{
  word-break: break-word !important;
}
@media (min-width: 991px){
  .menu_mobile_accout{
    display: none !important;
  }
}
@media (max-width: 768px) {
  .popup-certificate{
    font-size: 0.875rem;
  }
}
@media (max-width: 550px) {
  .popup-certificate{
    font-size: 0.65rem;
  }
}
@media (max-width: 576px) {
  .button_logout_mobile {
    display: block;
  }
}