body {
    background: #eefffc;
    color: #000000;
    overflow-x: hidden;
}

.bold {
    font-weight: bold;
}

.base-exam {
    background: #fff;
}

.slick-dots li.slick-active button {
    background: #066754;
    border-color: #066754;
}

.slick-dots li button {
    width: 8px;
    height: 8px;
    background: #d9d9d9;
}

/* BANNER AREA */
.banner-area {
    padding-top: 126px;
    padding-left: 109px;
    padding-right: 82px;
    background: linear-gradient(180deg, #f6fff5 0%, #f6fff5 35.6%, #ebfffb 77.1%);
}

.banner-area .banner-wrapper {
    justify-content: flex-end;
}

.banner-wrapper .banner-introduce {
    background-color: white;
    border: 2px solid #4ba9b1;
    display: flex;
    position: relative;
    border-radius: 30px;

    @media (min-width: 1250px) {
        margin: auto;
        padding: 65px;
        margin-top: 30px;
        width: 1160px;
        height: 315px;
        display: flex;
        align-items: center;
        padding: 0 65px !important;
    }

    @media (max-width: 1249px) {
        padding: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

.banner-introduce .banner-introduce-content {
    @media (min-width: 1250px) {
        width: 600px;
    }

    @media (max-width: 1249px) {
        width: 100%;
        text-align: center;
    }
}

.banner-introduce .banner-introduce-content .title,
.banner-introduce .banner-introduce-content .sub-title {
    font-family: "Paytone One";
    font-weight: bold;
    margin-bottom: 0;
    line-height: 1.3;
}

.banner-introduce .banner-introduce-content .title {
    @media (min-width: 1250px) {
        font-size: 45px;
    }

    @media (max-width: 1249px) {
        font-size: 30px;
    }
}

.banner-introduce .banner-introduce-content .sub-title {
    color: #066754;
    @media (min-width: 1250px) {
        font-size: 35px;
    }

    @media (max-width: 1249px) {
        font-size: 25px;
    }
}

.banner-introduce .banner-introduce-content .description {
    font-family: "Lexend";
    font-weight: 300;

    @media (min-width: 1250px) {
        font-size: 16px;
        margin-top: 30px;
        margin-bottom: 0;
    }

    @media (max-width: 1249px) {
        margin-top: 16px;
    }
}

.banner-introduce .banner-introduce-image {
    @media (min-width: 1250px) {
        position: absolute;
        flex: 1;
        flex-shrink: 0;
        bottom: 0;
        right: 16px;
        height: 330px;
    }

    @media (max-width: 1249px) {
        position: relative;
    }
}

.banner-area .banner-image {
    max-width: 532px;
    height: 488px;
}

.banner-area .banner-content {
    left: 15px;
    top: 24px;
    transform: none;
    max-width: 556px;
}

.banner-area .banner-content .sub-title {
    font-family: "Paytone One";
    font-size: 30px;
    font-weight: 400;
    line-height: 41.88px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    text-transform: none;
}

.banner-area .banner-content .title {
    font-family: "Paytone One";
    font-size: 55px;
    font-weight: 400;
    line-height: 76.78px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    white-space: nowrap;
}

.banner-area .banner-content .title span {
    display: block;
}

.banner-area .banner-content .title span.primary {
    color: #4ba9b1;
}

.banner-area .hero-wave-1 {
    bottom: -37px;
}

.banner-area .hero-wave-2 {
    bottom: -40px;
}

/* END BANNER AREA */

/* UNIVERSITY AREA */
.university-area {
    position: relative;
    /* padding-top: 100px; */
    padding-top: 60px;
    padding-bottom: 60px;
    z-index: 1;
}

.university-area .university-inner {
    max-width: 921px;
    margin: 0 auto;
    text-align: center;
}

.university-area .title {
    font-size: 18px;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 37px;
}

.university-area .slider-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.university-area .slider-item .img {
    width: 160px;
    height: 70px;
}

.university-area .slider-item .img img {
    border-radius: 20px;
    width: 100%;
}

/* END UNIVERSITY AREA */

/* THREE HIGHLIGHT */
.three-highlight {
    padding-top: 30px;
    padding-bottom: 60px;
}

.three-highlight .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 40px;
}

.three-highlight .content-body .image,
.intro-exam-mark-area .image {
    width: 100%;
    height: 381px;
    background-color: #d9d9d9;
    border-radius: 19px;
    overflow: hidden;
}

.intro-exam-mark-area .image {
    @media (max-width: 767px) {
        display: none;
    }
}

.three-highlight .content-body .image iframe,
.intro-exam-mark-area .image iframe {
    width: 100%;
    height: 100%;
}

.three-highlight .content-body .info .item:not(:last-child) {
    padding: 14px 0;
    border-bottom: 1px solid #d9d9d9;
}

.three-highlight .content-body .info .item:first-child {
    padding-top: 0;
}

.three-highlight .content-body .info .item:last-child {
    padding-top: 14px;
}

.three-highlight .content-body .info .item .info-title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 4px;
}

/* END THREE HIGHLIGHT */

.package-group-area {
    position: relative;
    background: linear-gradient(180deg, #eefffc 0%, #f8fcff 8.1%, #f8fcff 71.5%, #eefffc 90.5%);
    overflow: hidden;
}

.package-group-area::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #eefffc 0%, #f8fcff 8.1%, #f8fcff 71.5%, #eefffc 90.5%);
    z-index: 0;
}

/* PACKAGE AREA */
.package-area {
    padding-top: 30px;
    padding-bottom: 60px;
}

.package-area.test-package-area {
    padding-top: 0;
    padding-bottom: 85px;
}

.package-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    text-align: center;
    margin-bottom: 56px;
}

.package-area .package-card {
    box-shadow: 2px 2px 10px 2px #979ea380;
    background: #ffffff;
    border-radius: 20px;
}

.package-area .package-list {
    display: flex;
}

.package-area .package-list .package-item {
    position: relative;
    width: calc(100% / 3);
    padding: 50.69px 60px 68.83px 60px;
    color: #001b42;
    background: #fff;
}

.package-area .package-list .package-item:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 50px 54px 36px 74px;
}

.package-area .package-list .package-item:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 50px 37px 36px 59px;
}

.package-area .package-list .package-item-center {
    padding: 56px 39px 36px 59px;
    background: #066754;
    top: -27px;
    border-radius: 20px;
    color: #fff;
}

.package-area .package-list .package-head {
    text-align: center;
}

.package-area .package-list .package-head .package-title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 17px;
}

.package-area .package-list .package-head .package-des {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 0;
}

.package-des.test-package-des {
    font-family: "Paytone One";
    font-weight: 700 !important;
}

.package-price {
    font-size: 36px;
    font-weight: 700;
    color: #007aff;
    margin: 26px 0;
    text-align: center;
}

.package-price.package-price-center {
    color: #ffcc00;
}

.package-area .package-list .package-content {
    margin-top: 51px;
}

.package-area .package-type-list .package-content {
    margin-top: 36px;
}

.package-area .package-type-list .package-item-center .package-content {
    margin-top: 42px;
}

.package-area .package-list .package-content ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.package-area .package-list .package-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.package-area .package-list .package-content ul li .icon {
    display: inline-flex;
}

.package-area .package-list .package-button {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.package-area .package-type-list .package-button {
    margin-top: 13px;
}

.package-area .package-type-list .package-item-center .package-button {
    margin-top: 24px;
}

.package-area .package-list .package-item .price {
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #007aff;
    margin-bottom: 26px;
}

.package-area .package-list .package-item-center .price {
    color: #ffcc00;
    margin-bottom: 36px;
}

.package-area .package-list .package-button .btn-register-package,
.combo-item .package-button .btn-register-package {
    width: 177px;
    height: 41.37px;
    background-color: #066754;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    gap: 8px;
}

.package-area .package-list .package-button .btn-register-package .icon {
    display: none;
}

.package-area .package-list .package-button .btn-register-package.active {
    background-color: #fed64f;
    color: #2f5aa3;
}

.package-area .package-list .package-button .btn-register-package.active .icon {
    display: flex;
}

.package-area .package-list .package-item-center .package-popular {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    padding: 6px 0;
    background-color: #ff9e01;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.package-area .package-list .package-item:last-child .package-save-text,
.combo-item .package-save-text {
    position: absolute;
    top: -41px;
    right: -60px;
    width: 130px;
    padding: 6px 0;
    background-color: #007aff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transform: rotate(14.51deg);
    text-align: center;
}

.package-area .package-list .package-item:last-child .package-save-icon,
.combo-item .package-save-icon {
    position: absolute;
    top: -12px;
    right: 18px;
}

/* END PACKAGE AREA */

/* MARK DETAIL AREA */
.mark-detail-area {
    padding-top: 35px;
    padding-bottom: 65px;
}

.mark-detail-area .mark-detail-list {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.mark-detail-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 48px;
}

.mark-detail-area .mark-detail-wrapper {
    background-color: #ffffff;
    box-shadow: 2px 2px 10px 2px #979ea380;
    border-radius: 20px;
}

.mark-detail-area .mark-detail {
    display: flex;
    align-items: center;
    gap: 73px;
}

.mark-detail-area .mark-detail .item-1 {
    width: 498px;
}

.mark-detail-area .mark-detail .item-2 {
    position: relative;
    flex: 1;
    width: 100%;
}

.mark-detail-area .mark-detail .item .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.mark-detail-area .mark-detail .item .wrapper .head-title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

.mark-detail-area .mark-detail .item .wrapper .icon {
    display: flex;
    width: 13px;
    height: 28px;
    transform: rotate(90deg);
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-head {
    background-color: #007aff;
    color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 17px 53px 17px 73px;
}

.mark-detail-area .mark-detail .item-2 .exam-marking-content {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 16px;
    box-shadow: 2px 2px 10px 2px #979ea380;
    z-index: 10;
}

.mark-detail-area .mark-detail .item-2 .exam-marking-content ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mark-detail-area .mark-detail .item-2 .exam-marking-content ul li {
    font-family: "Paytone One";
    font-size: 18px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1a479a;
    cursor: pointer;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body {
    padding: 33px 53px 42px 73px;
    align-items: flex-start;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .image {
    width: 100%;
    height: 281px;
    border-radius: 20px;
    background: #d9d9d9;
    overflow: hidden;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .image img {
    width: 100%;
    height: 100%;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 32px;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-info li {
    display: flex;
    gap: 8px;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-info .icon {
    display: inline-flex;
    align-items: center;
    width: 27px;
    height: 27px;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-info .icon img {
    width: 100%;
    height: 100%;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-info .text {
    font-weight: 400;
    font-size: 16px;
    text-align: justify;
    flex: 1;
}

.mark-detail-area .mark-detail-wrapper .mark-detail-body .content-link {
    display: inline-block;
    margin-top: 21px;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #57c5f0;
}

/* END MARK DETAIL AREA */

/* INTRODUCE ECO */
.introduce-eco-area {
    padding-top: 20px;
    padding-bottom: 35px;
}

.introduce-eco-area .introduce-content .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #166251;
    margin-bottom: 40px;
}

.introduce-eco-area .introduce-content .title .primary {
    color: #000;
    display: block;
}

.introduce-eco-area .introduce-content .content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-bottom: 24px;
}

.introduce-eco-area .introduce-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 15px;
}

.introduce-eco-area .introduce-grid .introduce-item {
    background-color: #ffffff;
    box-shadow: 0px 2px 5px 0px #979ea380;
    padding: 38px 30px 33px;
    text-align: center;
}

.introduce-eco-area .introduce-grid .introduce-item .item-title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #166251;
    margin-bottom: 14px;
}

.introduce-eco-area .introduce-grid .introduce-item .des {
    margin-bottom: 0;
}

/* END INTRODUCE ECO */

/* SLIDER VSTEP */
.slider-vstep-area {
    padding-top: 35px;
    padding-bottom: 45px;
}

.slider-vstep-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 32px;
}

.swiper-slide {
    position: relative;
    aspect-ratio: 700 / 394;
    width: 700px !important;
}

.slider-vstep-area .swiper-slide .slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 100%;
}

.slider-vstep-area .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0px 4px 15px 0px #00000040;
}

.swiper-slide a {
    pointer-events: none;
}

.swiper-slide-active a {
    pointer-events: all;
}

.swiper-wrapper {
    padding: 40px 0;
}

/* END SLIDER VSTEP */

/* ACADEMY TEAM */
.academy-team-area {
    padding-top: 40px;
    padding-bottom: 30px;
}

.academy-team-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 34px;
}

.academy-team-area .description {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
    margin-bottom: 64px;
}

.academy-team-list .academy-team-item {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 3px solid #4ba9b1;
    border-radius: 24px;
    padding: 36px 30px;
    cursor: pointer;
}

.academy-team-list .academy-team-item .box-thumbnail {
    height: 275px;
    background-color: #eff8ff;
    border: 1px solid #4646461a;
    position: relative;
    border-radius: 24px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.academy-team-list .academy-team-item .box-thumbnail::before {
    content: "";
    display: block;
    background-image: url("/assets/frontend/img/img-logo-aptis-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 246px;
    height: 253px;
    opacity: 0.3;
    z-index: 0;
}

.academy-team-list .academy-team-item .box-thumbnail .certificate {
    position: absolute;
    top: -13.45px;
    right: -9px;
    background-color: #4ba9b1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-decoration-skip-ink: none;
    color: #fff;
    z-index: 1;
}

.academy-team-list .academy-team-item .box-thumbnail img {
    width: auto;
    /* height: auto; */
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.academy-team-list .academy-team-item .info {
    margin-top: 48px;
}

.academy-team-list .academy-team-item .info .name {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 8px;
}

.academy-team-list .academy-team-item .info .bio {
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: justify;
    color: #272b2e;
}

.academy-team-list .academy-team-item .info .content {
    margin-top: 20px;
}

.academy-team-list .academy-team-item .info .content ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.academy-team-list .academy-team-item .info .content ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.academy-team-area .academy-team-item .content ul li .icon {
    width: 21px;
    height: 21px;
    display: flex;
}

.academy-team-area .academy-team-item .content ul li .text {
    flex: 1;
    font-size: 16px;
    /* font-weight: bold; */
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
}

.academy-team-slider .slick-track {
    height: 100%;
}

.academy-team-slider .slick-prev {
    left: -20px;
}

.academy-team-slider .slick-next {
    right: -20;
}

.academy-team-slider .slick-prev,
.academy-team-slider .slick-next {
    width: 25px;
    height: 25px;
    z-index: 10;
}

.academy-team-slider .slick-prev::before,
.academy-team-slider .slick-next::before {
    content: "";
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    width: 25px;
    height: 25px;
}

.academy-team-slider .slick-prev::before {
    background-image: url("/assets/frontend/icon/arrow-left.svg");
}

.academy-team-slider .slick-next::before {
    background-image: url("/assets/frontend/icon/arrow-right.svg");
}
/* END ACADEMY TEAM */

/* BLOG AREA */
.blog-area {
    padding-bottom: 45px;
}

.blog-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 46px;
}

.blog-area .blog-item .blog-thumbnail .img-wrap {
    padding-top: 66.25%;
}

.blog-area .blog-item .post-title {
    margin-top: 20px;
}

.blog-area .blog-item .post-title a {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
}

.blog-area .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.blog-area .btn-all-blog {
    width: 335px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #066754;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

/* END BLOG AREA */

/* STUDY VSTEP */
.study-vstep-area {
    padding-top: 45px;
    padding-bottom: 128px;
}

.study-vstep-area h2.title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
    margin-bottom: 8px;
}

.study-vstep-area .description {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
    margin-bottom: 37px;
}

.study-vstep-area .study-vstep-wrapper {
    display: flex;
    gap: 137px;
}

.study-vstep-area .study-vstep-wrapper .content {
    max-width: 470px;
    width: 100%;
}

.study-vstep-area .study-vstep-wrapper .content .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #bdc3c7cc;
    gap: 36px;
}

.study-vstep-area .study-vstep-wrapper .content .item:last-child {
    border-bottom: 0;
}

.study-vstep-area .study-vstep-wrapper .content .item .content-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.study-vstep-area .study-vstep-wrapper .content .item .number {
    display: inline-block;
    width: 42px;
    font-size: 28px;
    font-weight: 300;
    line-height: 37.8px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.study-vstep-area .study-vstep-wrapper .content .item .content-title {
    display: flex;
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.study-vstep-area .study-vstep-wrapper .content .item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.study-vstep-area .study-vstep-wrapper .image {
    max-width: 554px;
    width: 100%;
}

.study-vstep-area .study-vstep-wrapper .image .img-wrap {
    padding-top: 61.25%;
}

.study-vstep-area .study-vstep-wrapper .image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* END STUDY VSTEP */

.package-group-vip-area {
    margin-top: 127px;
}

/* FAQ AREA */
.section-faq-area {
    padding-top: 35px;
    padding-bottom: 40px;
}

.section-faq-area h2.title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 42px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 38px;
}

.process-grid .item {
    background-color: #d9d9d9;
    width: 100%;
    height: 358px;
}

/* END FAQ AREA */

/* BANNER ADS */
.banner-ads-area {
    position: relative;
    margin-top: 43px;
    margin-bottom: 73px;
    background: linear-gradient(90deg, #009275 0%, #036955 30%, #009275 100%);
    min-height: 371px;
}

.banner-ads-area.test-package-banner-ads {
    margin-top: 0;
    margin-bottom: 20px;
}

.banner-ads-large {
    margin-top: 55px;
    margin-bottom: 45px;
    min-height: 457px;
}

.banner-ads-area .image-desktop {
    display: none;
}

.banner-ads-area .image {
    position: absolute;
    bottom: 0;
    right: 242px;
}

.banner-ads-area .image img {
    width: 307px;
    height: 338px;
    object-fit: cover;
}

.banner-ads-large .image img {
    width: 370px;
    height: 370px;
}

.banner-ads-area .image.image-1 {
    right: 76px;
    z-index: 1;
}

.banner-ads-large .image {
    right: 249px;
}

.banner-ads-large .image.image-1 {
    right: 50px;
}

.banner-ads-area .content {
    padding-top: 25px;
    padding-bottom: 44px;
}

.banner-ads-area .content .title {
    font-family: "Paytone One";
    font-size: 120px;
    font-weight: 400;
    line-height: 167.52px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    margin-bottom: 16px;
}

.banner-ads-large .content .title {
    margin-bottom: 0;
}

.banner-ads-area .content .description {
    max-width: 500px;
    width: 100%;
    font-family: "Paytone One";
    font-size: 28px;
    font-weight: 400;
    line-height: 39.09px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

.banner-ads-area .content .btn-wrapper {
    margin-top: 30px;
}

.banner-ads-area .content .btn-wrapper .action-title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    margin-bottom: 32px;
}

.banner-ads-area .content .btn-wrapper .btn-action-banner {
    width: 261px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fed64f;
    border-radius: 37px;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #2f5aa3;
}

/* END BANNER ADS */

/* DISCOUNT AREA */
.discount-area .title {
    text-align: left;
    color: #007aff;
}

.discount-area .title .primary {
    color: #000;
}

.discount-area .discount-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.discount-area .discount-info .price {
    font-size: 40px;
    font-weight: 700;
    line-height: 60px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.discount-area .discount-info .discount-title {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ff2929;
}

.discount-area .discount-info .btn-choose-exam {
    width: 177px;
    height: 41.37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #2f5aa3;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    gap: 8px;
}

.discount-area .discount-info .btn-choose-exam .icon {
    display: none;
}

.discount-area .discount-info .btn-choose-exam.active {
    background-color: #fed64f;
    color: #2f5aa3;
}

.discount-area .discount-info .btn-choose-exam.active .icon {
    display: flex;
}

/* END DISCOUNT AREA */

/* TOTAL ORDER AREA */
.total-order-area {
    padding: 35px 0;
}

.total-order-area .order-info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.total-order-area .order-info-item .txt-label,
.total-order-area .order-info-item .txt-value .price {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.total-order-area .order-info-item .txt-value .price del {
    text-decoration-color: #ff2929;
}

.total-order-area .order-info-item.order-total .txt-label {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.total-order-area .order-info-item .txt-value .price-total {
    font-size: 40px;
    font-weight: 700;
    line-height: 60px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ff2929;
}

.total-order-area .order-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 32px;
}

.total-order-area .order-btn .btn-register-order {
    width: 177px;
    height: 41.37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #2f5aa3;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    gap: 8px;
}

/* INTRO EXAM MARK */
.intro-exam-mark-area {
    padding-bottom: 35px;
}

.intro-exam-mark-area h2.title {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 68px;
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.intro-exam-mark-area .intro-exam-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 75px;
    padding-left: 65px;
}

.intro-exam-mark-area .intro-exam-wrapper .image {
    max-width: 452px;
    width: 100%;
}

.intro-exam-mark-area .intro-exam-wrapper .image .img-wrap {
    padding-top: 86.25%;
}

.intro-exam-mark-area .intro-exam-wrapper .intro-content,
.intro-exam-mark-area .intro-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intro-exam-mark-area .intro-exam-wrapper .intro-content .item,
.intro-exam-mark-area .intro-content .item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.intro-exam-mark-area .intro-content .item .icon {
    width: 40px;
    height: 40px;
    display: flex;
}

.intro-exam-mark-area .intro-content .item .content {
    flex: 1;
}

.intro-exam-mark-area .intro-content .item .content .title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 8px;
}

.intro-exam-mark-area .intro-content .item .content .des {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* END INTRO EXAM MARK */

/* PROCESS EXAM */
.section-process-exam-area .title {
    text-align: center;
}

.section-process-exam-area .item iframe {
    width: 100%;
    height: 100%;
}

/* END PROCESS EXAM */

/* REVIEW */
.review-area {
    padding-top: 46px;
    padding-bottom: 100px;
}

.review-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.review-area .review-wrapper {
    position: relative;
}

.review-area .review-wrapper .review-item {
    position: absolute;
}

.review-area .review-wrapper .review-item .review-transition {
    transition: transform 0.25s;
}

.review-area iframe,
.review-area img {
    border-radius: 20px;
}

/* END REVIEW */

/* FAQ */
.faq-area {
    padding-top: 35px;
    padding-bottom: 45px;
}

.faq-area.test-package-faq {
    padding-top: 0;
}

.faq-area .faq-title .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 54px;
}

.faq-area .faq-list {
    max-width: 100%;
    gap: 32px;
}

.faq-area .faq-list .faq-item {
    border-radius: 20px;
    padding: 28px 47px 28px 42px;
    box-shadow: 0px 4px 10px 0px #00000040;
}

.faq-area .faq-list .faq-item .title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1a479a;
}

/* END FAQ */

/* BOOK BANNER */
.book-banner {
    position: relative;
    padding-top: 143px;
    padding-bottom: 43px;
    background: linear-gradient(180deg, #e1f8fe 0%, #edfbff 35.6%, #f8fcff 77.1%);
}

.book-banner .book-banner-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.book-banner .book-content {
    max-width: 392px;
    width: 100%;
    margin-top: 58px;
    margin-left: 35px;
}

.book-banner .book-content h2.title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 56px;
}

.book-banner .book-content h2.title .secondary {
    color: #007aff;
}

.book-banner .book-content .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.book-banner .image {
    width: 548px;
    height: 548px;
}

.book-banner .book-banner-wave {
    position: absolute;
    bottom: 0;
}

.book-banner .book-banner-wave-1 {
    left: 0;
}

.book-banner .book-banner-wave-2 {
    right: 0;
}

/* END BOOK BANNER */

/* STEP SKILL */
.step-skill {
    padding-top: 78px;
    padding-bottom: 50px;
    background: linear-gradient(180deg, #effcff 0%, #f8fcff 21.6%, #e1f8fe 90.5%);
}

.step-skill .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 102px;
}

.step-skill .step-skill-wrapper {
    display: flex;
    gap: 108px;
}

.step-skill .step-skill-wrapper .list-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.step-skill .list-content .content-item {
    display: flex;
    gap: 23px;
}

.step-skill .list-content .content-item .icon {
    display: flex;
    width: 50px;
    height: 50px;
}

.step-skill .list-content .content-item .content {
    flex: 1;
    width: 100%;
}

.step-skill .list-content .content-item .content-title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 13px;
}

.step-skill .list-content .content-item p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    margin-bottom: 0;
}

.step-skill .image {
    width: 581px;
    height: 324px;
    border-radius: 20px;
    background-color: #d9d9d9;
    overflow: hidden;
}

.step-skill .image iframe {
    width: 100%;
    height: 100%;
}

/* END STEP SKILL */

/* BOOK ARCHIVE */
.book-archive {
    padding-top: 50px;
    padding-bottom: 40px;
}

.book-archive .book-archive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.book-archive .book-archive-item .icon {
    display: inline-flex;
    width: 55px;
    height: 55px;
}

.book-archive .book-archive-item .icon-star {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
}

.book-archive .book-archive-item .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.book-archive .book-archive-item .des {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
}

/* END BOOK ARCHIVE */

/* BOOK AREA */
.book-area {
    padding-top: 40px;
    padding-bottom: 60px;
}

.book-area .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
    margin-bottom: 70px;
}

.book-area .book-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.book-area .book-item {
    border-radius: 20px;
    overflow: hidden;
}

.book-area .book-item-soon {
    width: 156px;
    height: 193px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.book-area .book-item-soon .content {
    font-family: "Paytone One";
    font-size: 24px;
    font-weight: 400;
    line-height: 33.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

.book-area .book-item-center {
    width: 253px;
    height: 352px;
    background-color: #cddcf5;
    display: flex;
    flex-direction: column;
}

.book-area .book-item-center .item-thumbnail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.book-area .book-item-center .item-thumbnail .img-book {
    width: 213px;
    height: 213px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.book-area .book-item-center .item-thumbnail .img-absolute {
    position: absolute;
    top: 90px;
    z-index: 0;
}

.book-area .book-item-center .item-content {
    height: 77px;
    background-color: #2f5aa3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.book-area .book-item-center .item-content .icon {
    cursor: pointer;
}

.book-area .book-item-center .item-content .icon img {
    width: 49.54px;
    height: 49.54px;
}

.book-area .book-item-center .item-content .read-try {
    width: 113px;
    height: 41px;
    border-radius: 20px;
    background-color: #edf8e7;
    color: #000;
}

/* END BOOK AREA */

/* MODAL READ BOOK */
.modal-read-book .modal-dialog {
    max-width: 900px;
}

.modal-read-book .modal-content {
    background: linear-gradient(270deg, #f5fdff 0%, #f8fcff 18.6%, #f8fcff 33.6%, #e1f8fe 100%);
}

.modal-read-book .modal-body {
    padding: 43px 45px 55px 60px;
}

.modal-read-book .read-book-container {
    display: flex;
    gap: 64px;
}

.modal-read-book .slider-book-wrapper {
    width: 309px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-read-book .slider-book-page {
    width: 100%;
    position: relative;
}

.modal-read-book .slider-book-page .slick-prev:before,
.modal-read-book .slider-book-page .slick-next:before {
    content: "";
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 36px;
    display: block;
}

.modal-read-book .slider-book-page .slick-prev,
.modal-read-book .slider-book-page .slick-next {
    width: 24px;
    height: 36px;
}

.modal-read-book .slider-book-page .slick-prev:before {
    background-image: url("/assets/frontend/icon/grommet-icons-prev.svg");
}

.modal-read-book .slider-book-page .slick-next:before {
    background-image: url("/assets/frontend/icon/grommet-icons-next.svg");
}

.modal-read-book .content-title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.modal-read-book .des {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #2f5aa3;
    margin-bottom: 14px;
}

.modal-read-book .image {
    margin-left: 18px;
}

/* END MODAL READ BOOK */

.book-university-area .university-area {
    padding-top: 40px;
}

.book-university-area .university-area::before {
    content: none;
}

/* BOOK REVIEW */
.book-review {
    padding-top: 60px;
    padding-bottom: 35px;
    min-height: 1974px;
}

.book-review .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #000;
}

.book-review .book-review-wrapper {
    position: relative;
}

.book-review .book-review-wrapper .review-item .review-transition {
    transition: transform 0.25s;
}

.book-review .book-review-wrapper .review-item img,
.book-review .book-review-wrapper .review-item iframe {
    border-radius: 20px;
}

/* END BOOK REVIEW */

/* BOOK FAQ */
.book-faq {
    padding-bottom: 80px;
}

/* END BOOK FAQ */

.prevstep-package-inner {
    background: linear-gradient(180deg, #e1f8fe 0%, #edfbff 35.6%, #f8fcff 77.1%);
}

/* PREVSTEP PACKAGE INFO */
.pre-vstep-package-info {
    padding-top: 144px;
    padding-bottom: 30px;
}

.pre-vstep-package-info .package-info-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.pre-vstep-package-info .info-content {
    max-width: 489px;
    width: 100%;
}

.pre-vstep-package-info .info-content-head {
    display: flex;
    gap: 21px;
    margin-bottom: 12px;
}

.pre-vstep-package-info .info-content-head .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    color: #000;
}

.pre-vstep-package-info .info-content-head .icon {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.pre-vstep-package-info .info-content-statis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
}

.pre-vstep-package-info .info-content-statis .statis-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pre-vstep-package-info .info-content-statis .statis-item .icon {
    display: flex;
    width: 17px;
    height: 17px;
    align-items: center;
}

.pre-vstep-package-info .info-content-statis .statis-item .txt-label {
    display: flex;
    flex: 1;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: justify;
    color: #007aff;
}

.pre-vstep-package-info .regular-price {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #ff0000;
    margin-top: 17px;
}

.pre-vstep-package-info .info-content-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pre-vstep-package-info .info-content-bottom .price {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    color: #007aff;
}

.pre-vstep-package-info .info-content-bottom .btn-buy {
    width: 177px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #2f5aa3;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #ffffff;
}

.pre-vstep-package-info .info-video {
    width: 430px;
    height: 242px;
}

.pre-vstep-package-info .info-video iframe {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* END PREVSTEP PACKAGE INFO */

/* PREVSTEP PACKAGE SLIDER */
.pre-vstep-package-slider {
    padding-top: 30px;
    padding-bottom: 35px;
}

.pre-vstep-package-slider.test-package-slider {
    padding-bottom: 0;
}

.pre-vstep-package-slider .slider-prev-step {
    display: flex;
    gap: 36px;
    margin-left: -18px;
    margin-right: -18px;
}

.pre-vstep-package-slider .slider-prev-step .slick-track {
    padding-bottom: 8px;
    padding-top: 8px;
}

.pre-vstep-package-slider .slider-prev-step .slider-item {
    padding-left: 18px;
    padding-right: 18px;
}

.pre-vstep-package-slider .slider-prev-step .slider-item img {
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #00000080;
}

.pre-vstep-package-slider .slider-prev-step .slick-prev:before,
.pre-vstep-package-slider .slider-prev-step .slick-next:before {
    content: "";
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 36px;
    display: block;
}

.pre-vstep-package-slider .slider-prev-step .slick-prev,
.pre-vstep-package-slider .slider-prev-step .slick-next {
    width: 24px;
    height: 36px;
}

.pre-vstep-package-slider .slider-prev-step .slick-prev:before {
    background-image: url("/assets/frontend/icon/grommet-icons-prev.svg");
}

.pre-vstep-package-slider .slider-prev-step .slick-next:before {
    background-image: url("/assets/frontend/icon/grommet-icons-next.svg");
}

/* END PREVSTEP PACKAGE SLIDER */

/* PREVSTEP PACKAGE CONTENT */
.pre-vstep-package-content {
    padding-top: 35px;
    padding-bottom: 25px;
    background: linear-gradient(180deg, #f2fbff 0%, #f8fcff 46.6%, #e1f8fe 100%);
}

.pre-vstep-package-content h2.title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    color: #000;
    margin-bottom: 40px;
}

.pre-vstep-package-content .content-course-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pre-vstep-package-content .content-course-list-item .course-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pre-vstep-package-content .content-course-list-item .course-head .course-name {
    font-family: "Lexend";
    font-size: 20px;
    font-weight: 700;
    line-height: 27.92px;
    color: #007aff;
}

.pre-vstep-package-content .content-course-list-item .course-head .icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    transform: rotate(-90deg);
    user-select: none;
}

.pre-vstep-package-content .content-course-list-item .course-head .icon.active {
    transform: rotate(0deg);
}

.pre-vstep-package-content .content-course-list-item .course-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.pre-vstep-package-content .content-course-list-item .course-list .item {
    border-top: 1px solid #bcbcbcb2;
    padding-top: 16px;
    padding-left: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pre-vstep-package-content .content-course-list-item .course-list .item .title {
    font-family: "Lexend";
    font-weight: 300;
    color: #274162;
}

.pre-vstep-package-content .content-course-list-item .course-list .course-video {
    position: relative;
    width: 80px;
    height: 50px;
    object-fit: contain;
    border: 1px solid #bcbcbcb2;
    cursor: pointer;
}

.pre-vstep-package-content .content-course-list-item .course-list .course-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: background-color 0.2s linear;
}

.pre-vstep-package-content .content-course-list-item .course-list .course-play-button {
    opacity: 0;
    width: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s linear;
}

.pre-vstep-package-content .content-course-list-item .course-list .course-video:hover .course-play-button {
    opacity: 1;
}

.pre-vstep-package-content .content-course-list-item .course-list .course-video:hover .course-thumbnail {
    background-color: #95959533;
}

.pre-vstep-package-content .content-course-list-empty {
    color: #2f5aa3;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.anytime-package-info .btn-wrapper .btn-watch-video-anytime {
    width: 177px;
    height: 41.37px;
    background-color: #066754;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
    gap: 8px;
}

.course-modal {
    max-width: 80vw;
    width: 80vw;
    margin: 1.5rem auto;
}

.course-modal .modal-header {
    padding: 0;
    height: 60px;
    justify-content: flex-start;
    align-items: center;
}

.course-modal .modal-header .close {
    font-size: 36px;
    font-weight: 300;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.course-modal .modal-header h5 {
    font-family: "Lexend";
    font-weight: 400;
    padding: 0 20px;
}

.course-modal .modal-body {
    border-top: 1px solid #bcbcbcb2;
    padding: 0;
}

.course-modal .modal-body video {
    display: block;
}

.course-modal .quality-toggle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 8px;
}

.course-modal .quality-toggle .label {
    font-family: "Lexend";
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 0;
    line-height: 18px;
    color: black;
    padding: 0;
}

.course-modal .quality-toggle button {
    font-family: "Lexend";
    font-weight: 300;
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid #bcbcbcb2;
    border-radius: 4px;
}

.course-modal .quality-toggle button.active {
    background-color: #007aff;
    border: 1px solid #007aff;
    color: #fff;
}

/* END PREVSTEP PACKAGE CONTENT */

/* PREVSTEP PACKAGE FOR */
.pre-vstep-package-for {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pre-vstep-package-for h2.title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    color: #000;
    margin-bottom: 24px;
}

.pre-vstep-package-for .for-content {
    list-style: disc;
    padding-left: 70px;
}

.pre-vstep-package-for .for-content li {
    color: #274162;
}

/* END PREVSTEP PACKAGE FOR */

/* PREVSTEP PACKAGE TEACHER */
.pre-vstep-package-teacher {
    padding-top: 30px;
    padding-bottom: 70px;
}

.pre-vstep-package-teacher .title {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 400;
    line-height: 55.84px;
    color: #272b2e;
    margin-bottom: 32px;
}

.pre-vstep-package-teacher .teacher-wrapper {
    display: flex;
    justify-content: space-between;
}

.pre-vstep-package-teacher .teacher-about ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pre-vstep-package-teacher .teacher-about ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pre-vstep-package-teacher .teacher-about ul li .icon {
    width: 21px;
    height: 21px;
    display: flex;
}

.pre-vstep-package-teacher .teacher-about ul li .text {
    flex: 1;
    width: 464px;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272b2e;
}

.pre-vstep-package-teacher .teacher-thumbnail {
    width: 400.98px;
    height: 246.8px;
    border-radius: 10px;
    border: 1px solid #d2e6ec;
    background-color: #f6fafd;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.pre-vstep-package-teacher .teacher-thumbnail::before {
    content: "";
    display: block;
    background-image: url("/assets/frontend/img/img-academy-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: -6px;
    left: -7px;
    right: -7px;
    width: 415px;
    height: 294px;
    z-index: 0;
}

.pre-vstep-package-teacher .teacher-thumbnail img {
    position: relative;
    width: 245.14px;
    height: 236.62px;
    z-index: 1;
}

.pre-vstep-package-teacher .teacher-name {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 400;
    line-height: 27.92px;
    text-align: center;
    color: #2773df;
    margin-top: 8px;
}

.teacher-thumbnail-wrapper .teacher-image {
    position: relative;
    width: 400px;
    height: 250px;
    background: #f6fafd;
    border: 1px solid #d2e6ec;
    border-radius: 10px;
    overflow: hidden;
}

.teacher-thumbnail-wrapper .teacher-image .teacher-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    opacity: 30%;
}

.teacher-thumbnail-wrapper .teacher-image .teacher-avatar {
    position: absolute;
    top: -40px;
    left: 50%;
    height: 350px;
    transform: translateX(-50%);
}

/* END PREVSTEP PACKAGE TEACHER */

/* ANYTIME PACKAGE HEADER */
.anytime-package-header {
    padding-top: 144px;
    padding-bottom: 30px;
}

.anytime-package-header h3 {
    font-size: 36px;
    line-height: 135%;
    font-weight: 800;
}

.anytime-package-header .for-content {
    padding-top: 10px;
    list-style: disc;
    padding-left: 30px;
    font-weight: 300;
    font-size: 16px;
    line-height: 135%;
}

.anytime-package-header {
    background-color: #e2f8fe;
}

.anytime-tab-section .anytime-tab-buttons {
    display: flex;
    padding-top: 40px;
    padding-left: 15px;
}

.anytime-tab-section .anytime-tab-button {
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    padding-bottom: 10px;
    line-height: 17px;
    border-bottom: solid 2px rgba(70, 70, 70, 0.3);
    min-width: 250px;
}

.anytime-tab-section .anytime-tab-button.active {
    font-size: 26px;
    border-bottom: solid 4px rgba(0, 122, 255, 1);
}

.anytime-tab-section .anytime-tab-button:hover {
    font-size: 26px;
}

.anytime-package-info .info-content {
    max-width: 500px;
}

.anytime-tab-section .anytime-tab-button:nth-child(2) {
    padding-left: 40px;
    text-align: right;
}

.anytime-tab-button a {
    color: rgba(0, 27, 66, 1);
}

.anytime-tab-button.active a {
    color: rgba(0, 122, 255, 1);
}

.pre-vstep-package-info.anytime-package-info {
    padding-top: 30px;
    padding-bottom: 30px;
}

.anytime-content {
    background: linear-gradient(180deg, #fbfeff 0%, rgba(225, 248, 254, 0.5) 33.1%, #f8fcff 57.6%, #e1f8fe 84.6%);
}

.anytime-package-header * {
    font-family: var(--font-family), serif !important;
}

.anytime-package-feedback .feedback-wrapper {
    display: flex;
    justify-content: space-between;
    min-height: 400px;
    padding-right: 20px;
    gap: 100px;
}

.anytime-package-teacher.pre-vstep-package-teacher .teacher-thumbnail {
    width: 281px;
    gap: 20px;
}

.anytime-package-teacher.pre-vstep-package-teacher .teacher-about ul {
    gap: 26px;
}

.anytime-package-teacher .teacher-thumbnail-group {
    display: flex;
    gap: 20px;
}

.anytime-package-feedback .student-feedback {
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.anytime-package-feedback .slider-item {
    padding-left: 84px;
    /*padding-right: 30px;*/
}

.anytime-package-info .info-video {
    width: 560px;
    height: 315px;
}

.anytime-slider .slider-item {
    width: 560px;
    height: 315px;
}

.anytime-slider .slider-item .image,
.anytime-slider .slider-item .image iframe {
    width: 100%;
    height: 100%;
}

.anytime-slider .slider-item .image iframe {
    border-radius: 20px;
}

.anytime-package-feedback .slider-item:nth-child(odd) {
    margin-top: 20px;
}

.anytime-package-feedback .student-wrapper {
    display: flex;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    align-items: flex-start;
    height: auto;
    padding-right: 50px;
    width: auto;
    min-height: 160px;
}

.anytime-package-feedback .student-wrapper img {
    width: 153px !important;
    height: 153px !important;
    border-radius: 50%;
    object-fit: cover;
    transform: translateX(-50%);
}

.anytime-package-feedback .student-feedback-content {
    margin-left: -40px;
    padding-top: 10px;
}

.anytime-package-feedback.student-feedback-avatar {
    min-width: 162px;
}

.anytime-package-feedback .student-wrapper .name {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    text-align: justify;
    color: rgba(39, 115, 223, 1);
    font-family: var(--font-family);
}

.anytime-package-feedback .student-wrapper .message {
    padding-top: 5px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /*text-align: justify;*/
    font-family: var(--font-family);
}

.slider-anytime-package {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.anytime-slider .slider-anytime-package .image iframe {
    width: 100% !important;
    border-radius: 20px;
}

.anytime-slider .slider-anytime-package .image {
    width: 48%;
}

.anytime-package-feedback .feedback-form {
    background-color: white;
    padding: 15px 10px;
    border-radius: 20px;
    width: 337px;
    height: 371px;
    font-family: var(--font-family);
}

.anytime-package-feedback .feedback-form .form-title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.anytime-package-feedback .feedback-form .form-input-text {
    border-radius: 30px;
    border: 1px solid rgba(0, 122, 255, 1);
    margin: 8px 20px;
    padding: 5px 10px;
    height: 37px !important;
}

.anytime-package-feedback .feedback-form .form-input-text.is-invalid,
.anytime-package-feedback .feedback-form .form-input-select.is-invalid {
    border-color: red;
}

.anytime-package-feedback .feedback-form .form-input-select {
    border-radius: 30px;
    border: 1px solid rgba(0, 122, 255, 1);
    margin: 8px 20px;
    padding: 5px 10px;
    background-color: white;
}

.anytime-package-feedback .feedback-form .form-input-select option[value=""],
.anytime-package-feedback .feedback-form .form-input-select.placeholder {
    color: gray;
}

.anytime-package-feedback .feedback-form .form-input-button {
    background: rgba(47, 90, 163, 1);
    color: white;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    padding: 10px 15px;
    border-radius: 30px;
}

/*END ANYTIME*/

/*TRUST*/
.heading-label {
    font-family: "Paytone One";
    font-size: 40px;
    font-weight: 700;
}

.trust-container {
    padding-bottom: 85px;
}

.trust-container .trust-image {
    background-color: #d9d9d9;
    border-radius: 20px;
}

.trust-container .trust-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 40px;
}

.trust-content .trust-item {
    padding: 18px 0;
}

.trust-content .trust-item:not(:last-child) {
    border-bottom: 2px solid #d9d9d9;
}

.trust-content .trust-item .title {
    font-family: "Paytone One";
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.trust-content .trust-item .description {
    font-family: "Lexend";
    margin-bottom: 0;
    font-weight: 300;
}

.review-container {
    padding-bottom: 55px;
}

.review-container .description,
.lineup-container .description {
    font-family: "Lexend";
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 16px;
    text-align: justify;
}

.feedback-student-slider .slick-track {
    height: 100%;
}

.card-wrapper {
    padding: 16px;
    box-shadow: 2px 2px 10px 0 #979ea380;
    border-radius: 10px;
}

.feedback-student-slider .card-wrapper {
    width: 100%;
    height: 100%;
}

.card-wrapper img {
    border-radius: 10px !important;
    box-shadow: unset !important;
}

.card-wrapper .card-info {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 18px 6px;
}

.card-wrapper .card-info .card-avatar {
    font-family: "Lexend";
    width: 40px;
    height: 40px;
    background-color: #55c8d1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 700;
    color: white;
    font-size: 20px;
    margin-bottom: 0;
}

.card-wrapper .card-info-content p {
    font-family: "Lexend";
    margin-bottom: 0;
}

.card-wrapper .card-info-content .card-info-content-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
}

.card-wrapper .card-info-content .card-info-content-position,
.card-wrapper .card-description {
    font-family: "Lexend";
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
}

.card-wrapper .card-description {
    text-align: justify;
    margin-bottom: 0;
}

.card-wrapper .card-description strong {
    font-weight: 700;
}

.combo-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 60px 15px 10px 15px;
    overflow-x: auto;
}

.combo-list .package-save-text {
    top: -50px;
    right: 0;
    transform: rotate(12deg);
}

.combo-list .package-save-icon {
    top: -20px;
    right: 75px;
}

.combo-package {
    font-family: "Lexend";
    margin-bottom: 75px;
}

.combo-package .heading-label {
    text-align: center;
}

.combo-item {
    padding: 40px;
    box-shadow: 2px 2px 10px 0 #979ea380;
    border-radius: 20px;
    background-color: white;
    min-width: 330px;
    position: relative;

    @media (max-width: 767px) {
        padding: 20px;
    }
}

.combo-item .package-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.combo-item .package-content ul {
    font-weight: 300;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.combo-item .package-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.combo-item .package-content ul li .icon {
    display: inline-flex;
}

.combo-item .package-content ul li .content {
    font-size: 16px;
}

.combo-item .package-button {
    display: flex;
    justify-content: center;
}

.combo-item .package-save-text {
    background-color: #ff9e01;
}

.course-container {
    padding-bottom: 85px;
}

.course-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.course-tabs .tab-button {
    font-size: 20px;
    font-weight: 700;
    padding: 5px 20px;
    background-color: #06675457;
    white-space: nowrap;
}

.course-tabs .tab-button.active {
    background-color: #066754;
}

.course-tabs .tab-button a {
    color: black;
}

.course-tabs .tab-button.active a {
    color: white;
}

.course-info-wrapper {
    font-family: "Lexend" !important;
}

.course-info-wrapper .package-info-wrapper {
    font-weight: 300;
}

.course-info-wrapper .package-info-wrapper .info-content {
    width: 100%;
    max-width: unset !important;
}

.course-info-wrapper .info-video {
    width: 100%;
}

.course-info-wrapper .pre-vstep-package-content {
    background: none;
}

.course-info-wrapper .pre-vstep-package-content {
    padding: 0;
}

.trend-container {
    padding-bottom: 60px;
    position: relative;
}

.trend-wrapper {
    padding: 0 60px;
    box-shadow: 2px 2px 10px 0 #979ea380;
    border-radius: 20px;
    background-color: white;
    font-family: "Lexend";
    position: relative;
    z-index: 2;
}

.trend-container .wave {
    position: absolute;
    bottom: 0;
}

.trend-container .wave-1 {
    left: 0;
}

.trend-container .wave-2 {
    right: 0;
}

.trend-title {
    margin-bottom: 60px;
}

.trend-list {
    transform: translateY(-20px);
}

.trend-wrapper .trend-badge {
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    background-color: #066754;
    width: fit-content;
    color: white;
    border-radius: 20px;
    font-family: "Montserrat";
}

.trend-wrapper .trend-content li {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend-wrapper .trend-content li:not(:last-child) {
    margin-bottom: 8px;
}

.trend-wrapper .trend-content {
    margin: 12px 0 24px 80px;
    font-weight: 300;
}

.trend-wrapper .trend-content li .icon {
    width: 24px;
    height: 24px;
}

.trend-wrapper .trend-btn {
    text-align: center;
    margin: 16px 0;
}

.trend-wrapper .trend-btn .register-btn {
    font-family: "Montserrat";
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    background-color: #fed64f;
    color: #2f5aa3;
    padding: 0 50px;
    border-radius: 20px;
    position: relative;
    z-index: 2;

    @media (max-width: 767px) {
        margin-bottom: 20px;
    }
}

.trend-wrapper .trend-img {
    @media (max-width: 767px) {
        display: none;
    }
}

.trend-wrapper .trend-img .img-1 {
    position: absolute;
    bottom: 0;
    height: 240px;
    left: 40%;
    transform: translateX(-50%);
    z-index: 2;
}

.trend-wrapper .trend-img .img-2 {
    position: absolute;
    bottom: -20px;
    height: 140px;
    left: 60%;
    transform: translateX(-50%);
    z-index: 1;
}

.trend-wrapper .trend-img .img-3 {
    position: absolute;
    bottom: 65px;
    width: 80px;
    left: 47%;
}

.trend-info {
    padding-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;

    @media (max-width: 767px) {
        justify-content: center;
        padding: 0;
    }
}

.trend-info p {
    margin-bottom: 0;
}

.trend-info .trend-info-number {
    font-size: 80px;
    line-height: 80px;
    font-weight: bold;
    font-family: "Paytone One";
    color: #066754;
}

.trend-info .trend-info-content {
    font-size: 18px;
    font-family: "Paytone One";
    color: #066754;
}

.trend-info .trend-info-content p:nth-child(odd) {
    color: #68a396;
}

.one-on-one-ads {
    overflow: hidden;
}

.one-on-one-ads .image-desktop,
.banner-ads-area .image-desktop {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.banner-ads-area .image-desktop img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 450px;
}

.one-on-one-ads .image-desktop img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 550px;
}
/* FOOTER */
.footer {
    padding-top: 18px;
    padding-bottom: 36px;
    background: #001b42;
}

.footer .footer-wrapper {
    max-width: 1083px;
    width: 100%;
    margin: 0 auto;
}

.footer .footer-widget .footer-widget-title {
    font-family: "Paytone One";
    font-size: 16px;
    font-weight: 400;
    line-height: 22.34px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #bcbcbc;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #bcbcbc;
}

.footer .footer-widget .footer-widget-content {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

.footer .footer-widget .footer-info .txt-label {
    font-weight: 700;
}

.footer .footer-widget .footer-widget-content ul li {
    margin-bottom: 10px;
}

.footer .footer-widget .footer-widget-content ul li a {
    color: #fff;
}

.footer .footer-social {
    margin-top: 18px;
}

.footer .footer-social .title {
    font-family: "Paytone One";
    font-size: 16px;
    font-weight: 400;
    line-height: 22.34px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #bcbcbc;
    margin-bottom: 8px;
}

.footer .footer-social ul {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* END FOOTER */

/******** RESPONSIVE *********/
@media screen and (min-width: 1800px) {
    .banner-area {
        padding-bottom: 10px;
    }

    .banner-area.test-package-banner {
        padding-bottom: 85px;
    }
}

@media screen and (min-width: 1440px) {
    .banner-area {
        padding-left: 0;
        padding-right: 0;
    }

    .banner-area .banner-wrapper,
    .trust-container,
    .review-container {
        max-width: 1250px;
        width: 100%;
        margin: 0 auto;
    }

    .university-area::before {
        top: 25px;
    }
}

@media screen and (min-width: 992px) {
    .review-area {
        height: 4000px;
    }

    .review-area .review-item:hover .review-transition {
        transform: scale(1.1);
        opacity: 1;
    }

    .review-area .review-item .review-image {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .review-area #IMAGE1 {
        top: 44.56px;
        left: 0;
        width: 612px;
        height: 165px;
    }

    .review-area #IMAGE2 {
        top: 38.56px;
        left: 630px;
        width: 531px;
        height: 162px;
    }

    .review-area #IMAGE3 {
        top: 228.56px;
        left: 0;
        width: 706px;
        height: 276px;
    }

    .review-area #IMAGE4 {
        top: 228.56px;
        left: 735px;
        width: 396px;
        height: 157px;
    }

    .review-area #IMAGE5 {
        top: 435.56px;
        left: 721px;
        width: 440px;
        height: 157px;
    }

    .review-area #IMAGE6 {
        top: 529.56px;
        left: 47px;
        width: 651px;
        height: 515px;
    }

    .review-area #IMAGE7 {
        top: 1063.56px;
        left: 44px;
        width: 614px;
        height: 145px;
    }

    .review-area #IMAGE8 {
        top: 1241.56px;
        left: 47px;
        width: 607px;
        height: 139px;
    }

    .review-area #IFRAME1 {
        top: 608.56px;
        left: 735px;
        width: 426px;
        height: 787px;
    }

    .review-area #IMAGE9 {
        top: 1395.56px;
        left: 47px;
        width: 607px;
        height: 168px;
    }

    .review-area #IMAGE10 {
        top: 1416.56px;
        left: 698px;
        width: 458px;
        height: 163px;
    }

    .review-area #IMAGE11 {
        top: 1579.56px;
        left: 14px;
        width: 491.36px;
        height: 320.84px;
    }

    .review-area #IFRAME2 {
        top: 1600.56px;
        left: 552px;
        width: 609px;
        height: 335px;
    }

    .review-area #IMAGE12 {
        top: 1920.56px;
        left: 7px;
        width: 479px;
        height: 148.98px;
    }

    .review-area #IMAGE13 {
        top: 1960.56px;
        left: 514px;
        width: 647px;
        height: 121px;
    }

    .review-area #IFRAME3 {
        top: 2102.56px;
        left: 7px;
        width: 603px;
        height: 333px;
    }

    .review-area #IMAGE14 {
        top: 2102.56px;
        left: 658px;
        width: 503px;
        height: 393px;
    }

    .review-area #IMAGE15 {
        top: 2466.56px;
        left: 19px;
        width: 533px;
        height: 418px;
    }

    .review-area #IFRAME4 {
        top: 2911.56px;
        left: 19px;
        width: 552px;
        height: 307px;
    }

    .review-area #IMAGE16 {
        top: 3232.56px;
        left: 19px;
        width: 552px;
        height: 142px;
    }

    .review-area #IFRAME5 {
        top: 2516.56px;
        left: 610px;
        width: 434px;
        height: 757px;
    }

    .review-area #IMAGE17 {
        top: 3388.56px;
        left: 19px;
        width: 546px;
        height: 172px;
    }

    .review-area #IMAGE18 {
        top: 3293.56px;
        left: 610px;
        width: 467px;
        height: 233px;
    }

    .review-area #IMAGE19 {
        top: 3591.56px;
        left: 19px;
        width: 546px;
        height: 211px;
    }

    .review-area #IMAGE20 {
        top: 3548.56px;
        left: 610px;
        width: 508px;
        height: 254px;
    }

    /* BOOK REVIEW */
    .book-review .book-review-wrapper .review-item {
        position: absolute;
    }

    .book-review .book-review-wrapper .review-item:hover .review-transition {
        transform: scale(1.1);
        opacity: 1;
    }

    .book-review .book-review-wrapper .review-item .review-image {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .book-review .book-review-wrapper .review-item .review-image img {
        width: 100%;
        height: 100%;
    }

    .book-review #IMAGE21 {
        width: 621px;
        height: 148px;
        top: 68px;
        left: 0;
    }

    .book-review #IMAGE22 {
        width: 609px;
        height: 138px;
        top: 74px;
        left: 664px;
    }

    .book-review #IMAGE23 {
        width: 494px;
        height: 410px;
        top: 246px;
        left: 0;
    }

    .book-review #IMAGE24 {
        width: 495px;
        height: 135px;
        top: 676px;
        left: 2px;
    }

    .book-review #IFRAME6 {
        width: 334px;
        height: 593px;
        top: 237px;
        left: 514px;
    }

    .book-review #IMAGE25 {
        width: 394px;
        height: 83px;
        top: 244px;
        left: 877px;
    }

    .book-review #IMAGE26 {
        width: 400px;
        height: 169px;
        top: 345px;
        left: 877px;
    }

    .book-review #IMAGE27 {
        width: 429px;
        height: 114px;
        top: 531px;
        left: 877px;
    }

    .book-review #IMAGE28 {
        width: 449px;
        height: 129px;
        top: 662px;
        left: 868px;
    }

    .book-review #IMAGE29 {
        width: 490px;
        height: 187px;
        top: 842px;
        left: 0;
    }

    .book-review #IMAGE30 {
        width: 491px;
        height: 242px;
        top: 1056px;
        left: 0;
    }

    .book-review #IMAGE31 {
        width: 760px;
        height: 311px;
        top: 847px;
        left: 511px;
    }

    .book-review #IMAGE32 {
        width: 760px;
        height: 119px;
        top: 1191px;
        left: 511px;
    }

    .book-review #IMAGE33 {
        width: 702px;
        height: 274px;
        top: 1327px;
        left: 0;
    }

    .book-review #IMAGE34 {
        width: 719px;
        height: 133px;
        top: 1630px;
        left: 0;
    }

    .book-review #IMAGE35 {
        width: 522px;
        height: 470px;
        top: 1335px;
        left: 737px;
    }
}

@media screen and (max-width: 1285px) {
    .banner-area .banner-content .title {
        white-space: normal;
    }
}

@media screen and (max-width: 1100px) {
    .banner-area {
        padding-top: 80px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .banner-area.test-package-banner {
        padding-top: 120px;
    }

    .banner-area .banner-wrapper {
        flex-direction: column;
    }

    .banner-area .banner-content {
        position: relative;
        left: 0;
        max-width: 100%;
        text-align: center;
    }

    .banner-area .banner-content .title {
        max-width: 100%;
        text-align: center;
    }

    .banner-area .banner-image {
        text-align: center;
    }
}

@media screen and (max-width: 991px) {
    .university-area .slider-item .img {
        width: 100%;
        height: 100px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .university-area .slider-item .img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .package-area .title {
        margin-bottom: 28px;
    }

    .package-area .package-card {
        box-shadow: none;
        border-radius: 0;
        background: transparent;
    }

    .package-area .package-list {
        max-width: 100%;
        display: -webkit-box;
        overflow-x: auto;
        padding: 12px 8px;
        padding-top: 56px;
        gap: 32px;
    }

    .package-area .package-list .package-item {
        width: auto;
        box-shadow: 2px 2px 10px 2px #979ea380;
        border-radius: 20px;
    }

    .package-area .package-list .package-item-center {
        top: 0;
        padding: 50.69px 60px 68.83px 68px;
    }

    .mark-detail-area .mark-detail {
        flex-direction: column;
        align-items: flex-start;
    }

    .mark-detail-area .mark-detail-wrapper .mark-detail-head {
        gap: 8px;
    }

    .mark-detail-area .mark-detail-wrapper .mark-detail-body {
        gap: 24px;
    }

    .academy-team-area .academy-team-wrapper {
        flex-direction: column-reverse;
        align-items: center;
        gap: 32px;
    }

    .academy-team-area .academy-team-wrapper .academy-team-info {
        padding-right: 0;
        border: 0;
    }

    .academy-team-area .academy-team-wrapper .academy-team-info {
        max-width: 50%;
    }

    .academy-team-area .academy-team-info .box-thumbnail {
        width: 100%;
        height: 300px;
        justify-content: center;
    }

    .academy-team-area .academy-team-info .box-thumbnail::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .academy-team-area .academy-team-wrapper .academy-team-list {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 12px;
        gap: 16px;
    }

    .study-vstep-area .study-vstep-wrapper .content {
        max-width: 100%;
    }

    .study-vstep-area .study-vstep-wrapper .image {
        display: none;
    }

    .banner-ads-area .image-desktop {
        display: flex;
        position: relative;
        height: 338px;
        margin-top: 32px;
    }

    .banner-ads-large .image-desktop {
        height: 370px;
    }

    .banner-ads-area .image-mobile {
        display: none;
    }

    .blog-area .row {
        row-gap: 16px;
    }

    .review-area .review-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
    }

    .review-area .review-wrapper .review-item {
        position: relative;
    }

    .intro-exam-mark-area .intro-exam-wrapper .image {
        display: none;
    }

    .intro-exam-mark-area .intro-exam-wrapper {
        padding-left: 0;
    }

    .intro-exam-mark-area h2.title {
        max-width: 100%;
        margin-bottom: 32px;
    }

    .process-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .book-banner {
        padding-top: 75px;
    }

    .book-banner .book-banner-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .book-banner .book-content {
        margin-left: 0;
    }

    .step-skill .step-skill-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .book-area .book-list {
        display: -webkit-box;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .book-area .book-item-soon {
        margin-top: 80px;
    }

    .book-review .title {
        margin-bottom: 32px;
    }

    .book-review .book-review-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .pre-vstep-package-info .package-info-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .pre-vstep-package-teacher .teacher-about ul li .text {
        width: auto;
    }

    .pre-vstep-package-teacher .teacher-wrapper {
        flex-direction: column-reverse;
        align-items: center;
        gap: 32px;
    }
}

@media screen and (max-width: 768px) {
    .three-highlight .content-body .info {
        margin-top: 24px;
    }

    .mark-detail-area .mark-detail .item-1 {
        width: 100%;
    }

    .mark-detail-area .mark-detail-wrapper .mark-detail-head {
        padding: 16px 32px;
    }

    .mark-detail-area .mark-detail-wrapper .mark-detail-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .slider-vstep-area .title {
        margin-bottom: 32px;
    }

    .slider-vstep-area .slider-vstep-wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }

    .swiper-slide {
        width: 80vw !important;
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #d9d9d9;
        opacity: 1;
    }

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #2f5aa3;
    }

    .total-order-area .order-info-item.order-total .txt-label,
    .total-order-area .order-info-item .txt-value .price-total {
        font-size: 22px;
        line-height: 28px;
    }

    .total-order-area .order-info-item .txt-label,
    .total-order-area .order-info-item .txt-value .price {
        font-size: 16px;
        line-height: 24px;
    }

    .faq-area .faq-list {
        gap: 32px;
    }

    .faq-area .faq-list .faq-item {
        padding-left: 16px;
        padding-right: 16px;
    }

    .faq-area .faq-list .faq-item .title {
        font-size: 16px;
        line-height: 24px;
    }

    .faq-list .faq-item .title p {
        padding-right: 48px;
    }

    .banner-ads-area {
        min-height: auto;
        margin-bottom: 32px;
    }

    .banner-ads-area .content {
        text-align: center;
    }

    .banner-ads-area .content .title {
        font-size: 50px;
        line-height: 68px;
    }

    .banner-ads-area .content .description {
        max-width: 100%;
    }

    .banner-ads-area .content .btn-wrapper {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .banner-ads-area .image-desktop {
        display: none;
        flex-direction: row-reverse;
    }

    .banner-ads-area .image {
        position: unset;
    }

    .banner-ads-large .image img {
        width: 100%;
    }

    .banner-ads-area .content .btn-wrapper .action-title {
        font-size: 24px;
        line-height: 28px;
    }

    .discount-area .discount-info {
        flex-direction: column;
    }

    .academy-team-area {
        padding-bottom: 0;
    }

    .mark-detail-area {
        padding-top: 0;
        padding-bottom: 32px;
    }

    .process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .banner-area .banner-image {
        height: auto;
    }

    .book-archive .list-book-archive {
        row-gap: 16px;
    }

    .pre-vstep-package-info .info-content {
        max-width: 100%;
    }
}

@media screen and (max-width: 650px) {
    .three-highlight .title,
    .package-area .title,
    .mark-detail-area .title,
    .introduce-eco-area .introduce-content .title,
    .slider-vstep-area .title,
    .academy-team-area .title,
    .blog-area .title,
    .study-vstep-area h2.title,
    .faq-area .faq-title .title,
    .review-area .title,
    .intro-exam-mark-area h2.title,
    .section-faq-area h2.title,
    .step-skill .title,
    .book-area .title,
    .book-review .title,
    .pre-vstep-package-for h2.title,
    .pre-vstep-package-teacher .title,
    .pre-vstep-package-content h2.title {
        font-size: 28px;
        line-height: 36px;
    }

    .mark-detail-area .mark-detail-wrapper .mark-detail-head {
        padding: 16px;
    }

    .academy-team-area .academy-team-wrapper .academy-team-info {
        max-width: 100%;
    }

    .study-vstep-area h2.title {
        text-align: left;
    }

    .study-vstep-area .study-vstep-wrapper .content .item .number {
        width: 20px;
        font-size: 20px;
        line-height: 24px;
    }

    .study-vstep-area .study-vstep-wrapper .content .item .content-title {
        font-size: 14px;
    }

    .study-vstep-area .study-vstep-wrapper .content .item {
        gap: 24px;
    }

    .total-order-area .order-info-item {
        flex-direction: column;
        align-items: flex-end;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro-exam-mark-area .intro-content .item .icon {
        width: 24px;
        height: 24px;
    }

    .book-banner .image {
        width: 100%;
        height: auto;
    }

    .step-skill .title {
        margin-bottom: 32px;
    }

    .pre-vstep-package-for .for-content {
        padding-left: 24px;
    }

    .pre-vstep-package-content .content-course-list-item .course-head .course-name {
        font-size: 16px;
        line-height: 24px;
    }

    .pre-vstep-package-content .content-course-list-item .course-list .item .title {
        font-size: 14px;
    }
}

@media screen and (max-width: 575px) {
    .package-area .package-list {
        gap: 24px;
    }

    .package-area .package-list .package-item,
    .package-area .package-list .package-item-center {
        padding-left: 24px;
        padding-right: 24px;
        white-space: nowrap;
    }

    .introduce-eco-area .introduce-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .step-skill .image {
        width: 100%;
    }

    .pre-vstep-package-info .info-content-head {
        flex-direction: column;
        gap: 8px;
    }

    .pre-vstep-package-info .info-content-head .icon {
        margin-top: 0;
    }

    .pre-vstep-package-info .info-content-statis {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pre-vstep-package-info .info-video {
        width: 100%;
        height: 292px;
    }

    .pre-vstep-package-content .content-course-list-item .course-list .item {
        padding-left: 16px;
    }

    .pre-vstep-package-teacher .teacher-thumbnail,
    .pre-vstep-package-teacher .teacher-thumbnail-wrapper {
        width: 100%;
    }

    .process-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}