/* ======================================================== */
/* ========================INDEX=========================== */
/* ======================================================== */

@media (max-width: 1250px) {
    .containerBanner {
        grid-template-columns: 2fr 1fr;
    }

    .contentSectionBottomLeftBanner {
        gap: 4rem;
        padding: 2rem;
    }

    .inputSearchBanner {
        width: 33rem;
    }
}

@media (max-width: 1100px) {
    .footer-content {
        width: 90%;
        margin: 2rem auto 5rem;
        position: relative;
    }
}

@media (max-width: 950px) {
    .containerBanner {
        display: none;
    }

    .containerBannerMobile {
        display: block;
    }

    .paragraphBannerWeb {
        margin: 0rem;
    }

    .contentSectionBottomLeftBanner {
        gap: 14rem;
        padding: 2rem 2rem 0rem;
        border-radius: 1rem;
        background-color: var(--Main_color);
    }

    .numberInfoWebBanner {
        color: var(--White_color);
        font-size: 2rem;
        margin: 1rem 0rem 0rem;
        font-weight: 400;
    }

    .textInfoBannerWeb {
        color: var(--White_color);
        font-size: 2rem;
        font-weight: 400;
    }

    .containerBannerMobile {
        min-height: 51rem;
    }

    .contentBannerMobile {
        min-height: 50rem;
    }

    .containerSearchBoxBanner {
        height: 3.5rem;
        margin: 1rem;
    }

    .inputSearchBanner {
        width: 38rem;
        height: 3.5rem;
    }

    .btnSearchBanner {
        height: 3.5rem;
        width: 3.5rem;
        font-size: 1.5rem;
    }

    .titleWeb {
        font-size: 2.7rem;
        font-weight: 600;
    }

    .containerNewCourse,
    .containerSiteFeature,
    .containerArticle,
    .popularCourse {
        width: 90%;
        margin: 6rem auto;
    }

    .contentSiteFeature {
        grid-template-columns: repeat(1, 1fr);
        margin: 3rem 0rem 0rem;
        gap: 2rem;
    }

    .section-one-footer {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
        row-gap: 3rem;
    }
}

@media (max-width: 850px) {
    .containerMenuDesktop {
        display: none;
    }

    .containerMenuMobile {
        display: block;
    }
}

    @media (max-width: 750px) {
        

        .contentSectionBottomLeftBanner {
            gap: 9rem;
        }

        .paragraphBannerWeb {
            font-size: 1.3rem;
        }

        .titleWeb {
            font-size: 2.2rem;
            font-weight: 600;
        }

        .section-one-footer {
            grid-template-columns: repeat(1, 1fr);
            column-gap: 3rem;
            row-gap: 3rem;
        }

        .section-description-footer {
            align-items: start;
        }

        .sectionLeftNewCourse {
            padding: 2rem 1rem;
        }


    }

    @media (max-width: 600px) {
        .contentSectionBottomLeftBanner {
            gap: 5rem;
        }

        .paragraphBannerWeb {
            max-width: 43rem;
            margin: 0rem 0rem 1rem;
            padding: 1rem;
        }

        .containerMenuMobile {
            width: 95%;
        }

        .containerBannerMobile {
            width: 95%;
        }

        .linkGoToPageCart {
            font-size: 1.4rem;
            width: 3.5rem;
            height: 3.5rem;
        }

        .logoWeb {
            width: 3.5rem;
            height: 3.5rem;
        }

        .titleWeb {
            margin-bottom: 2rem;
        }

        .contentSectionBottomLeftBanner {
            padding: 0rem;
        }

        .paragraphBannerWeb {
            display: none;
        }

        .paragraphBannerWebMobile {
            display: block;
            padding: 0rem 0rem 2rem;
        }

        .footer-content::after {
            width: 30rem;
        }
    }

    @media (max-width: 500px) {
        .titleWeb {
            font-size: 2rem;
            font-weight: 600;
        }

        .containerSearchBoxBanner {
            margin: 0rem;
        }

        .inputSearchBanner {
            width: 30rem;
            height: 3.5rem;
        }

        .iconBanner {
            width: 6rem;
        }

        .numberInfoWebBanner {
            font-size: 1.8rem;
            margin: 0rem 0rem 0rem;
        }

        .textInfoBannerWeb {
            font-size: 1.7rem;
            font-weight: 400;
        }

        .titleWeb {
            font-size: 1.8rem;
            font-weight: 900;
        }

        .paragraphBannerWebMobile {
            width: 29rem;
            text-align: center;
        }

        .contentBannerMobile {
            min-height: 40rem;
        }

        .containerBannerMobile {
            min-height: 41rem;
        }

        .containerNewCourse {
            width: 87%;
            margin: 4rem auto;
        }

        .contentSectionBottomLeftBanner {
            height: 26vh;
        }

        .footer-content::after {
            width: 22rem;
        }

        .copy-right-footer {
            font-size: 1.2rem;
        }

        .sectionFeature {
            height: 13rem;
        }

        .sectionLeftNewCourse {
            padding: 2rem 1rem;
        }
    }

    @media (max-width: 400px) {
        .iconBanner {
            width: 5rem;
        }

        .inputSearchBanner {
            width: 25rem;
            height: 3.5rem;
        }

        .titleWeb {
            font-size: 1.5rem;
            font-weight: 900;
        }

        .numberInfoWebBanner {
            font-size: 1.5rem;
        }

        .textInfoBannerWeb {
            font-size: 1.5rem;
        }

        .titleContainerHeader {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 350px) {
        .inputSearchBanner {
            width: 21rem;
            height: 3.5rem;
        }

        .contentSectionBottomLeftBanner {
            gap: 3.5rem;
        }

        .section-speed-description-footer {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }

        .footer-content::after {
            width: 17rem;
        }
    }


/* ======================================================== */
/* ====================LogIn&Register=======================*/
/* ======================================================== */
@media (max-width: 1100px) {
    .contentLogin {
        width: 80%;
    }
}

@media (max-width: 950px) {
    .contentLogin {
        width: 95%;
    }
}

@media (max-width: 850px) {
    .sectionLeftLogin {
        flex: 1.3;
    }

    .itemPointLogin {
        line-height: 1.6;
    }
}

@media (max-width: 700px) {
    .sectionRightLogin {
        display: none;
    }

    .contentLogin {
        width: 70%;
    }

    .sectionLeftLogin {
        border-radius: 0.8rem;
    }

    .headerFormLoginMobile {
        display: flex;
    }

    .containerNewUser {
        border-radius: 0.8rem;
        margin: 0rem auto 2rem;
    }

    .containerRegisterUser {
        height: 56rem;
    }

    .titleLogin {
        font-size: 1.9rem;
        font-weight: 400;
    }
}

@media (max-width: 550px) {
    .contentLogin {
        width: 80%;
    }
}

@media (max-width: 450px) {
    .contentLogin {
        width: 90%;
    }

    .containerInputLogin,
    .containerNewUser,
    .buttonLogin {
        width: 80%;
    }
}

@media (max-width: 350px) {
    .containerInputLogin,
    .containerNewUser,
    .buttonLogin {
        width: 90%;
    }

    .textNewUser,
    .linkRegisterPage {
        font-size: 1.3rem;
    }
    .ContainerCaptcha {
        padding-right: 0rem;
        width: 88%;
        margin: 0 auto;
        align-items: center;
        justify-content: start;
    }
}

/* ======================================================== */
/* ======================CoursePage=========================*/
/* ======================================================== */
@media (max-width: 1015px) {
    .container-bread-crumb,
    .container-course-info,
    .main-container {
        width: 90%;
    }
}

@media (max-width: 960px) {
    .boxes-info-course {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 850px) {
    .content-course-info {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .container-bread-crumb {
        margin: 2rem auto;
    }

    .section-left-main-content {
        display: none;
    }

    .BtnAddToCartResponsive {
        display: block;
    }

    .main-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .container-course-info {
        margin: 2rem auto 3rem;
    }
}

@media (max-width: 600px) {
    .container-bread-crumb,
    .container-course-info,
    .main-container {
        width: 95%;
    }

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

@media (max-width: 520px) {
    .introduction-container {
        padding: 1rem;
    }
}

@media (max-width: 460px) {
    .bread-crumb-address-link,
    .part-body-accordion a {
        font-size: 1.1rem;
    }

    .part-body-accordion a {
        font-size: 1.2rem;
    }

    .section-number-accordion {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: 0rem;
        padding-top: 0.2rem;
    }

    .section-minute-accordion {
        font-size: 1.1rem;
    }

    .body-accordion {
        padding: 0rem 0.4rem;
    }
}

@media (max-width: 390px) {
    .boxes-info-course {
        grid-template-columns: repeat(1, 1fr);
    }

    .section-right-body-accordion {
        gap: 0.2rem;
    }

    .part-body-accordion a {
        font-size: 1.1rem;
    }

    .bread-crumb-address-list,
    .bread-crumb-content {
        gap: 0.5rem;
    }

    .bread-crumb-content-icon-home {
        width: 2.5rem;
        height: 2.5rem;
    }

    .container-bread-crumb {
        padding: 1rem;
        border-radius: 0.5rem;
    }
}

/* ======================================================== */
/* ======================ArticlePage========================*/
/* ======================================================== */

@media (max-width: 1250px) {
    .containerSuggestArticleSlider {
        max-width: 55.8rem;
    }

    .section-title-blog {
        font-size: 1.8rem;
    }
}

@media (max-width: 1060px) {
    .containerSuggestArticleSlider {
        width: 45.8rem;
    }

    .section-title-blog {
        font-size: 1.6rem;
        font-weight: 800;
    }

    .link-suggest-blog {
        font-size: 1.3rem;
    }
}

@media (max-width: 950px) {
    .containerSuggestArticleSlider {
        width: 43.8rem;
    }

    .link-user-name,
    .log-out-site,
    .comment-user-info span {
        font-size: 1.3rem;
    }

    .section-title-blog {
        line-height: 1.8;
    }
}

@media (max-width: 850px) {
    .containerSuggestPageArticle {
        max-width: 100vw;
    }

    .contentSuggestPageArticle {
        max-width: 70rem;
    }

    .containerSuggestArticleSlider {
        max-width: 100%;
        width: 64rem;
    }
}

@media (max-width: 755px) {
    .containerSuggestArticleSlider {
        width: 50rem;
    }

    .section-title-blog {
        font-size: 1.5rem;
    }
}

@media (max-width: 590px) {
    .containerSuggestArticleSlider {
        width: 45rem;
    }

    .content-blog {
        padding: 1rem;
    }
}

@media (max-width: 520px) {
    .containerSuggestArticleSlider {
        width: 31rem;
    }

    .link-suggest-blog {
        gap: 0.5rem;
        font-size: 1.2rem;
    }

    .BodyTextComment {
        font-size: 1.3rem;
        margin: 2rem 0.5rem;
    }

    .profileUserComment {
        width: 5rem;
        height: 5rem;
    }

    .AnswerUserComment {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.4rem;
    }

    .item-auther-blog {
        font-size: 1rem;
        color: var(--Dark_color);
    }

    .section-title-blog {
        font-size: 1.3rem;
        padding-bottom: 1rem;
    }

    .link-suggest-blog {
        gap: 0.5rem;
        font-size: 1.1rem;
    }

    .comment-user-info {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 0.8rem;
        font-size: 1.3rem;
    }

    .contentTextComment {
        padding: 1rem 1rem;
    }
}

@media (max-width: 370px) {
    .slider-blog-content {
        padding: 1rem;
    }

    .containerSuggestArticleSlider {
        width: 25rem;
    }

    .bread-crumb-address-list {
        gap: 0rem;
    }
}

/* ======================================================== */
/* ======================CategoryPage=======================*/
/* ======================================================== */
@media (max-width: 1050px) {
    .link-image-row {
        width: 62%;
        position: relative;
    }
}

@media (max-width: 950px) {
    .courser-container {
        width: 90%;
    }

    .courser-search {
        padding: 1rem 1rem;
    }

    .content-column-course-cart {
        margin-top: 2rem;
        gap: 2rem;
    }
}

@media (max-width: 850px) {
    .content-column-course-cart {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .numberPercent {
        top: 0.7rem;
        font-size: 1.1rem;
        padding: 0.3rem 1rem 0rem;
    }

    .titleContainerHeader {
        font-size: 1.6rem;
    }

    .link-image-row {
        width: 54%;
        position: relative;
    }

    .section-right-container-course-row {
        gap: 1rem;
    }

    .linkSeeInformation-row {
        min-width: 12rem;
    }
}

@media (max-width: 650px) {
    .link-image-row-article {
        width: 40rem;
    }
}



@media (max-width: 650px) {
    .content-column-course-cart {
        gap: 1.5rem;
    }

    .courser-search {
        flex-direction: column;
        gap: 0.8rem;
    }

    .link-image-row {
        width: 90%;
    }

    .content-row-course-cart{
        display:none !important;
    }
    .content-column-course-cart{
        display:grid !important;
    }
    .section-sort-courser-search {
        display: none;
    }


}

@media (max-width: 560px) {
    .container-course-row {
        flex-direction: column;
        gap: 3rem;
    }

    .content-row-course-cart {
        /* display: none; */
        margin-top: 2rem;
    }
    .allInformationCorse-row-article {
        padding-right: 1rem;
    }
    .link-image-row-article {
        width: 38rem;
    }
}

@media (max-width: 540px) {
    .content-column-course-cart {
        grid-template-columns: repeat(1, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 440px) {
    .courser-container {
        width: 91%;
        margin: 1.5rem auto;
    }

    .courser-search__selection-title {
        font-size: 1.3rem;
    }

    .courser-search-selection-list {
        gap: 1.5rem;
        margin-top: 1rem;
        font-size: 1.3rem;
    }

    .titleContainerHeader-row {
        font-size: 1.2rem;
        font-weight: 600;
        transition: var(--main_transition);
    }
}

@media (max-width: 330px) {
    .link-image-row {
        width: 125%;
    }
}


/* ======================================================== */
/* ======================SearchPage=======================*/
/* ======================================================== */

@media (max-width: 950px) {
    .contentSearchPage {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

@media (max-width: 650px) {
    .contentSearchPage {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .containerSearch {
        width: 91%;
    }
}

@media (max-width: 540px) {
    .contentSearchPage {
        grid-template-columns: repeat(1, 1fr);
        gap: 3rem;
    }

    .errorBox {
        font-size: 1.3rem;
    }
}

/* ======================================================== */
/* ========================CartPage=========================*/
/* ======================================================== */

@media (max-width: 1015px) {
    .container-body-cart {
        width: 90%;
        gap: 2rem;
    }

    .item-cart-user {
        padding: 2rem 2rem;
    }

    .section-left-item-cart {
        gap: 2.5rem;
    }
}

@media (max-width: 850px) {
    .container-body-cart {
        flex-direction: column;
    }

    .section-left-body-cart,
    .section-right-body-cart {
        position: relative;
        top: 0rem;
    }
}

@media (max-width: 600px) {
    .section-right-item-cart {
        gap: 1rem;
    }

    .item-cart-user {
        padding: 2rem 1.5rem;
    }

    .title-item-cart-user {
        font-size: 1.4rem;
    }

    .price-item-cart {
        font-size: 1.3rem;
    }

    .img-poster-cart {
        width: 13rem;
        border-radius: 0.5rem;
    }

    .section-right-item-cart {
        flex-direction: column;
    }

    .teacher-item-cart-user {
        display: none;
    }
}

/* ======================================================== */
/* ========================VideoPage=========================*/
/* ======================================================== */

@media (max-width: 650px) {
    .accordionVideoPageContainer,
    .videoContent {
        width: 90%;
    }
}

@media (max-width: 450px) {
    .accordionVideoPageContainer,
    .videoContent {
        width: 94%;
    }
}