@charset "utf-8";
@import url('./fonts/phuong-phap-hoc-tieng-anh-elc-font.css');

a {
    color: unset;
    text-decoration: none;
}

p {
    font-size: 18px;
    font-family: "SVN-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.3;
    margin-bottom: 5px;
}

h2.title {
    font-size: 45px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(209, 33, 40);
    font-weight: bold;
    line-height: 1.2;
}

.review_top h2 {
    padding: 0 !important;
}

h2.title-yellow {
    font-size: 45px;
    font-family: "SVN-Gilroy-Bold";
    color: #f2901f;
    font-weight: bold;
    line-height: 1.2;
}

span.title-second {
    font-size: 30px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(209, 33, 40);
    font-weight: bold;
    line-height: 1.2;
}

a:hover {
    text-decoration: none;
}

.text-justify {
    text-align: justify !important;
}

#nlp-1 {
    background-image: url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_1_2.webp'), url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_1_back.webp');
    background-size: 30%, cover;
    background-repeat: no-repeat;
    background-position: bottom 6.5rem right 20%, center center;
    padding: 5rem 0 4rem;
}

#nlp-1 .text {
    font-size: 42px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
}

#nlp-1 .text-2 {
    font-size: 38px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
}

#nlp-1 .text-3 {
    width: max-content;
    margin: auto;
}

#nlp-1 .text-3 p {
    font-size: 19px;
    font-family: "SVN-Gilroy-SemiBold";
    color: rgb(214, 34, 41);
    font-weight: bold;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

#nlp-1 .text-3 p::before {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    background: url('../../images/landing-pages//hoc-tieng-anh-bang-nlp/section_1_bullet.webp') no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 2px;
}

#nlp-1 .button-regis button {
    background-image: url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/register-button.webp');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    padding: 1rem 2rem;
}

#nlp-1 .button-regis > button > p > span {
    font-size: 24px;
    font-family: "SVN-Gilroy-XBold";
    color: rgb(255, 255, 255);
    font-weight: bold;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    border-right: 0.188rem solid #fff;
    margin-bottom: 0;
    line-height: 1.3;
    animation: widthText 2s ease-out infinite forwards;
}

#nlp-2 .title {
    width: max-content;
    margin: auto;
}

#nlp-2 .text > p > span {
    font-size: 18px;
    font-family: "SVN-Gilroy-Bold", sans-serif;
    color: #d12027;
}

@media screen and (max-width: 575px) {
    #nlp-2 .text > p > span {
        font-size: 16px;
    }
}

#nlp-2 .video iframe {
    position: absolute;
    width: 92%;
    height: 70%;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
}

#nlp-2 .text img {
    width: 75%;
}

#nlp-3 {
    background-image: url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_3_head.webp'), url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_3_head_two.webp');
    background-position: left bottom 40%, right bottom 40%;
    background-repeat: no-repeat, no-repeat;
    background-size: 18%, 18%;
}

#nlp-3 h2.title > span {
    color: #f3911f;
}

#nlp-3 .box-main {
    width: 80%;
    margin: auto;
}

#nlp-3 .box-content {
    flex-basis: 30%;
}

#nlp-3 .box-content .box-text {
    top: 0;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-family: "SVN-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.333;
}

#nlp-3 .box-content .box-text .icon {
    width: 25%;
    margin: auto;
    margin-top: 3.5rem;
}

#nlp-3 .box-content .box-text .text {
    width: 80%;
    margin: auto;
    margin-top: 1rem;
    transform: translateX(2%);
    text-align: justify;
    font-family: 'SVN-Regular';
}

#nlp-4 {
    background-image: url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_4_4.webp'), url('../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_4_3.webp');
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, 73% 100%;
    background-position: bottom center, bottom center;
    padding: 6rem 0 8rem
}

#nlp-4 .box-title .img {
    flex-basis: 10%;
}

#nlp-4 .alias {
    width: 70%;
    margin: auto;
    margin-top: 2rem;
    text-align: center;
    font-size: 18px;
    font-family: "SVN-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.333;
}

#nlp-4 .box-main {
    margin-top: 5rem;
    padding: 0 3rem;
}

#nlp-4 .box-content {
    flex-basis: 30%;
    border: 1px solid #d52f35;
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    box-shadow: 0px 0px 5px 3px #00000038;
}

#nlp-4 .box-content .box-name {
    font-size: 24px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    background-color: red;
    border-radius: 30px;
    position: absolute;
    top: -1.7rem;
    left: 50%;
    width: 45%;
    padding: 0.5rem 0;
    text-align: center;
    transform: translateX(-50%);
}

#nlp-4 .box-content .box-text p {
    font-size: 18px;
    font-family: "SVN-Regular";
    color: rgb(0, 0, 0);
    line-height: 1.333;
    text-align: justify;
}

#nlp-4 .box-content .box-text p > span {
    color: #d22027;
    text-transform: uppercase;
    font-family: 'SVN-Gilroy-Bold';
}

.button-regis.anchor {
    margin-top: 3rem;
    border-radius: 30px;
}

.button-regis.anchor:hover {
    box-shadow: 0px 10px 5px -5px #3333334d;
    transform: translateY(-3px);
    transition: all 0.2s ease-in-out;
}

/* #nlp-4 .box-title .text-title{
    flex-basis: 80%;
} */
#elc-5 {
    background-image: url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/section_5_1.webp'), url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/section_5_2.webp');
    background-repeat: no-repeat, no-repeat;
    background-size: 13%, 8%;
    background-position: left center, right center;
}

#elc-5 .special-title > div {
    font-size: 80px;
    font-family: "SVN-Gilroy-XBold";
    color: rgb(243, 144, 31);
    font-weight: bold;
    line-height: 1;
}

#elc-5 .special-title > h2 {
    font-size: 30px;
    font-family: "SVN-Gilroy-Bold";
    color: rgb(209, 33, 40);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0;
}

#elc-5 .student-slide .owl-prev {
    position: absolute;
    top: 50%;
    left: -2.5rem;
    transform: translateY(-50%);
}

#elc-5 .student-slide .owl-next {
    position: absolute;
    top: 50%;
    right: -2.5rem;
    transform: translateY(-50%);
}

#elc-6 {
    background: url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/text-messages-bg.webp') no-repeat center;
    background-size: 100% 100%;
}

#elc-6 .owl-carousel .owl-nav {
    display: flex;
    justify-content: space-between;
}

#elc-6 .message-pictures .owl-prev {
    position: absolute;
    top: 50%;
    left: -2.5rem;
    transform: translateY(-50%);
}

#elc-6 .message-pictures .owl-next {
    position: absolute;
    top: 50%;
    right: -2.5rem;
    transform: translateY(-50%);
}

.faq {
    background-image: url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/faq-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 15% center;
    padding: 10rem 0;
}

#elc-7 h3 > span {
    font-size: 70px;
    font-family: "SVN-Gilroy-XBold";
    color: rgb(243, 144, 31);
    font-weight: bold;
    line-height: 1;
}

#elc-7 .accordion {
    max-width: 600px;
    margin: 0 auto;
}

#elc-7 .accordion-item {
    margin-bottom: 10px;
    background: white;
    border-radius: 20px !important;
    overflow: hidden;
}

#elc-7 .accordion-button {
    background: white;
    box-shadow: none !important;
    font-weight: bold;
}

#elc-7 .accordion-collapse.show, #elc-7 .accordion-button:not(.collapsed) {
    background: #FCD29F !important;
    color: black;
}

#elc-7 .accordion-button.collapsed {
    background: white;
}

#elc-7 .accordion-button::after {
    background: url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/arrow-down.png') top center / cover no-repeat;
    transform: rotate(-90deg);
}

#elc-7 .accordion-button:not(.collapsed)::after {
    background: url('../../images/landing-pages/phuong-phap-hoc-tieng-anh-elc/arrow-down.png') top center / cover no-repeat;
    transform: unset;
}

#elc-7 button.collapsed {
    background: white !important;
}

#elc-7 .accordion-item .accordion-body a {
    color: #0d6efd;
    font-family: "SVN-Gilroy-Bold";
}

#elc-7 .accordion-item .accordion-body a:hover {
    text-decoration: underline;
}

#elc-8 h2 {
    color: #f2901f;
}

#elc-8 .box-content {
    width: 30%;
}

#elc-8 .box-content .text {
    text-indent: 1.5rem;
    text-align: justify;
    font-family: "SVNGilroyMedium";

}

#elc-8 .box-content a {
    width: max-content;
    background-color: #f2901f;
    color: #fff;
    font-size: 18px;
    font-family: "SVN-Regular";
    padding: 0.3rem 1.5rem;
    border-radius: 30px;
}

/* animation */
@keyframes widthText {
    0% {
        width: 100%;
        color: #fff;
    }

    50% {
        width: 0;
        color: #fff;
    }

    65% {
        width: 100%;
        color: #fff;
    }

    100% {
        width: 100%;
        color: #fff;
    }
}


/* responsive */
@media screen and (max-width: 1750px) {
    #nlp-3 {
        background-image: url(../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_3_head.webp), url(../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_3_head_two.webp);
        background-position: left bottom 30%, right bottom 30%;
        background-repeat: no-repeat, no-repeat;
        background-size: 15%, 15%;
    }

    #nlp-4 {
        background-size: 100% 22%, 90% 100%;
    }
}

@media screen and (max-width: 1399px) {
    #nlp-1 {
        background-position: bottom 6.5rem right 10%, center center;
    }

    #nlp-3 .box-main {
        width: 90%;
    }

    #nlp-4 {
        background-size: 100% 20%, 100% 100%;
    }

    #elc-6 {
        background-size: cover;
    }

    #elc-7 h3 > span {
        font-size: 50px;
    }
}

@media screen and (max-width: 1024px) {

    #nlp-1 {
        background-position: bottom 9rem right 5%, center center;
    }

    h2.title-yellow, h2.title {
        font-size: 35px;
    }

    span.title-second {
        font-size: 27px;
    }

    #nlp-3 .box-main {
        width: 100%;
    }

    #nlp-4 .box-main {
        padding: 0;
    }

    #nlp-4 .box-content .box-name {
        width: 55%;
    }

    #nlp-4 .box-content .box-text p {
        font-size: 16px;
    }
}

@media screen and (max-width: 991px) {
    h2.title-yellow, h2.title {
        font-size: 28px;
    }

    span.title-second {
        font-size: 25px;
    }

    #nlp-1 {
        background-image: url(../../images/landing-pages/hoc-tieng-anh-bang-nlp/section_1_back.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 5rem 0 4rem;
    }

    #nlp-1 .image img {
        width: 80%;
    }

    #nlp-2 .text p {
        text-align: justify;
    }

    #nlp-3 .box-content {
        flex-basis: 45%;
    }

    #nlp-4 {
        background-size: 100% 13%, cover;
    }

    #nlp-4 .box-main {
        flex-wrap: wrap;
    }

    #nlp-4 .box-content {
        flex-basis: 45%;
    }

    #nlp-4 .box-content:last-child {
        margin-top: 4rem;
    }

    #elc-5 .special-title > div {
        font-size: 50px;
        text-align: center;
    }

    #elc-5 .special-title > h2 {
        font-size: 22px;
    }

    span.title-second {
        font-size: 18px;
    }

    .faq {
        padding: 2rem 0;
    }
}

@media screen and (max-width: 767px) {
    h2.title-yellow, h2.title {
        font-size: 22px;
    }

    span.title-second {
        font-size: 21px;
    }

    #nlp-1 .text-3 {
        width: 100%;
    }

    #nlp-3 .box-content {
        flex-basis: 48%;
    }

    #nlp-3 .box-content .box-text .text {
        font-size: 16px;
    }

    #nlp-3 .box-content .box-text .icon {
        margin-top: 2.5rem;
    }

    #nlp-4 .alias {
        width: 100%;
    }

    #nlp-4 .box-content:last-child {
        margin-top: 0;
    }

    #nlp-4 .box-content {
        flex-basis: 90%;
        height: 100%;
    }

    #nlp-4 .box-main .owl-item {
        padding: 4rem 2rem 0;
    }

    #nlp-4 .owl-carousel .owl-stage {
        display: flex;
        align-items: stretch;
    }

    #nlp-4 .owl-carousel .owl-nav {
        display: flex;
        justify-content: space-between;
        top: 60%;
    }

    #elc-6 .owl-nav, #elc-5 .owl-nav {
        display: none;
    }

    #elc-7 h3 > span {
        font-size: 30px;
    }

    #elc-6 .owl-carousel.owl-drag .owl-item img {
        width: 80%;
        margin: auto;
    }

    #elc-6 .owl-nav {
        display: flex;
        justify-content: space-between;
        top: 45%;
    }

    #elc-6 .message-pictures .owl-prev {
        left: 0;
    }

    #elc-6 .message-pictures .owl-next {
        right: 0;
    }

    #elc-8 .box-content {
        width: 80%;
        margin: auto;
    }

    #elc-8 .owl-nav {
        display: flex;
        justify-content: space-between;
        top: 25%;
        transform: translateY(-50%);
    }

    #elc-8 .owl-carousel .owl-item img {
        width: auto;
    }
}

@media screen and (max-width: 575px) {
    #nlp-1 .text {
        font-size: 25px;
    }

    #nlp-1 .text-2 {
        font-size: 23px;
    }

    #nlp-1 .text-3 p {
        font-size: 17px;
    }

    p {
        font-size: 16px;
    }

    #nlp-2 .text > p > span {
        font-size: 16px;
    }

    h2.title-yellow, h2.title {
        font-size: 22px;
    }

    #nlp-3 .box-content {
        flex-basis: 100%;
        background-color: #fff;
        padding: 2rem;
    }

    #nlp-3 .box-content .box-text {
        height: 100%;
    }

    #nlp-3 .box-content .box-text .icon {
        margin: unset;
        width: 20%;
        margin-bottom: 1rem
    }

    #nlp-3 .box-content .box-text .text {
        width: 65%;
        margin: unset;
    }

    #nlp-3 .owl-carousel .owl-nav {
        display: flex;
        justify-content: space-between;
    }

    #nlp-4 {
        background-size: 100% 8%, cover;
    }

    #nlp-4 .box-main {
        margin-top: 0;
    }

    #nlp-4 .alias {
        font-size: 16px;
    }

    #elc-5 .special-title > h2 {
        font-size: 18px;
        text-align: center;
    }
}

@media screen and (max-width: 375px) {
    #nlp-1 .text {
        font-size: 23px;
    }

    #nlp-1 .text-2 {
        font-size: 20px;
    }

    #nlp-4 {
        background-size: 100% 6%, cover;
    }

    #nlp-4 .box-content .box-text p {
        font-size: 14px;
    }

    #nlp-3 .box-content .box-text .icon {
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 350px) {
    #nlp-1 .text {
        font-size: 18px;
    }

    #nlp-1 .text-2 {
        font-size: 16px;
    }

    #nlp-1 .text-3 p {
        font-size: 13px;
    }
}

@media screen and (max-width: 320px) {

}