@media only screen and (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
}

@media screen and (min-width: 360px) and (max-width: 668px) {
    .cc_intro_course_details_btn_add_cart .btn:nth-child(2) {
        width: 100%;
    }

    .cc_login_regis_layout {
        width: 98% !important;
        overflow: scroll;
        height: 600px;
    }
}

@media screen and (max-width: 768px) {
    footer#footer .footer-logo img {
        width: 100px;
    }

    .teacher-item .teacher-content {
        width: 100%;
        padding: 10px 0;
    }

    .box-video {
        padding-right: 0px;
        margin: 20px 0 0 0;
    }

    .teacher-item {
        display: block;
    }

    .teacher-item .teacher-thumbnail img {
        width: 100% !important;
        object-fit: contain;
        border-radius: 10px;
    }
    .tiktok-item {
        height: auto;
    }
    .teacher-item .teacher-thumbnail {
        height: 300px;
        overflow: hidden;
        transition: 0.3s ease-in-out;
        border-radius: 10px;
        width: 100% !important;
    }

    .teacher-item .teacher-button a {
        margin: 15px 0 0 0 !important;
        font-size: 18px;
    }

    .teacher-item .teacher-content h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .header-ri {
        text-align: right;
    }

    .header-ri a {
        font-size: 20px;
        color: var(--main-color) !important;
    }

    .question-pdf {
        width: 100%;
        text-align: center;
        height: 400px !important;
    }

    .question-list {
        height: unset !important;
        margin-top: 20px;
        width: 100%;
        overflow-y: scroll;
    }

    .bang-vang {
        width: 50px;
        height: 50px;
    }

    div#showBoard .modal-content {
        max-height: 670px;
        overflow: auto !important;
    }

    div#showBoard .modal-footer {
        border: 0px !important;
        padding: 0px !important;
    }

    div#showBoard .modal-body {
        overflow: auto;

        height: 400px;
    }

    .big-block {
        display: none !important;
    }

    .cc_block_hero_bg .cc_hero_bg_hook.text-white {
        background: transparent !important;
    }

    .slide-banner button.owl-prev, .slide-banner button.owl-next {
        display: none !important;
    }

    div#showBoard .modal-content {
        padding: 10px;
    }

    div#showBoard {
        padding: 0px !important;
    }

    .footer-top {
        margin-bottom: 15px;
    }

    section#bk-new .bk-post-grid {
        margin-bottom: 20px;
    }

    .cc_hero_bg_hook h1 {
        font-weight: 700;
        font-family: "Roboto-Regular" !important;
        font-size: 30px;
    }

    .slide-notifications .cc_comp_notification img {
        height: 228px;
    }

    .cc_intro_course_details_title h1 {
        font-size: 20px !important;
    }

    .cc_login_regis_layout {
        width: 98% !important;
        overflow: scroll;
        height: 600px;
    }

    .post-entry iframe {
        width: 100%;
        height: 200px;
    }

    .post-entry img {
        width: 100% !important;
        height: auto !important;
    }

    .cc_description_layout img, .cc_description_layout table {
        width: 100%;
        max-width: 100% !IMPORTANT;
    }

    .cc_block_hero_bg {
        padding: 80px 0;
    }

    .post .cc_list_content {
        display: none !important;
    }

    .cc_user_dropdown.cc_display {
        display: block;
        box-shadow: unset;
        top: 0px !important;
    }

    .cc_item_course_cart_mobi {
        margin-left: 100px;
    }

    .cc_list_shop_cart_img {
        float: left;
        width: 100px;
        height: 60px;
    }

    .cc_added_course_layout {
        width: 90%;
    }

    .cc_intro_course_details_img img {
        width: 100%;
    }

    .cc_student_feedback_col_star i {
        font-size: 10px;
    }

    .cc_payment_item_child {
        display: block !important;
        text-align: center !important;
    }

    button.btn.cc_navbar_mobi_humbuger.js_navbar_mobi_humbuger {
        padding: 0px !important;
    }

    section#student-page .admin-widget {
        display: none !important;
    }

    .sub-container.col-description {
        display: none !important;
    }

    .js_shop_cart_add_remove {
        margin: 0px !important;
    }

    .js_shop_cart_add_remove a {
        padding: 0px !important;
        margin: 0px !important;
    }

    button.btn.cc_navbar_mobi_search.js_navbar_mobi_search {
        padding: 0px !important;
    }

    button#prev, button#next {
        padding: 6px 10px !important;
        font-size: 12px;
    }

    .question-list h3 {
        margin-bottom: 10px !important;
        font-size: 20px;
    }

    .cc_navbar_logo {
        margin: auto;
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
    }

    .cc_comp_icon_noty_num {
        top: -5px;
        right: 0px;
    }

    .question-list.mt-5 .col-md-6.text-right {
        text-align: left !important;
    }
}

@media screen and (max-width: 737px) {
    .cc_added_course_layout {
        width: 80%;
        padding: 15px;
    }

    .cc_added_course_content {
        display: block;
        padding: 10px;
    }

    .cc_added_course_header .btn {
        top: 0px;
        right: 0px;
    }

    .cc_added_course_content .cc_comp_btn_second_color {
        margin-top: 17px;
        margin-right: calc(50% - 70px);
    }
}

@media screen and (max-width: 668px) {
    .cc_intro_course_details_rate_star {
        margin-left: 0px;
    }

    .cc_teacher_info_layout .cc_teacher_info_left img {
        width: 60px;
        height: 60px;
    }

    .cc_student_feedback_col_per {
        width: 46% !important;
    }
}

@media only screen and (min-width: 768px) {
    .cc_intro_course_details_preview {
        position: absolute;
        margin-top: 15px;
    }
}

@media only screen and (max-width: 768px) {
    .cc_tabs_content {
        padding-top: 20px !important;
        text-align: left;
    }

    #desktop {
        display: none !important;
    }

    #mobile {
        display: block;
    }

    .owl-nav button {
        top: 35.5%;
    }

    .owl-nav button i {
        color: var(--main-color);
    }

    button.owl-next {
        right: 10px;
    }

    button.owl-prev {
        left: 10px
    }

    #cc_block_teacher_hot .cc_comp_item_content a {
        font-size: 14px;
    }

    .cc_register_gift h3 {
        font-size: 20px;
    }

    form.form-inline .form-group {
        width: 100%;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .cc_comp_item {
        width: 100%;
    }

    .card-header {
        background-color: var(--white) !important;
        border: none;
        cursor: pointer;
    }

    .card-header .fa-plus, .card-header.collapsed .fa-minus {
        display: none;
    }

    .card-header .fa-minus, .card-header.collapsed .fa-plus {
        display: block;
    }
}


@media (min-width: 1025px) {
    .cc_list_shop_cart_child {
        display: flex;
    }

    .cc_list_shop_cart_money {
        text-align: right;
    }

    .cc_item_course_cart_mobi {
        display: flex;
        width: 80%;
    }
}


@media only screen and (max-width: 1024px) {
    .cc_block_payment_nav .cc_payment_item {
        height: 75px;
    }

    .cc_list_shop_cart_remove {
        right: 0px;
        position: absolute;
        top: 0px;
    }
}

@media only  screen and (min-width: 576px) {
    .cc_payment_1_form_child {
        width: 350px;
    }
}


@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
    .cc_main_menu ul li a {
        color: var(--gray);
        padding: 0px 3px;
        font-size: 14px;
        text-transform: uppercase;
    }
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
    .cc_main_menu ul li a {
        color: var(--gray);
        padding: 0px 3px;
        font-size: 14px;
        text-transform: uppercase;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .cc_intro_course_details_social_icon .btn {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .cc_navbar_log.d-none.d-md-flex.d-lg-flex.d-xl-flex {
        display: none !important;
    }

    .cc_navbar_mobile.d-flex.d-md-none {
        display: block !important;
        margin-right: 10px !important;
    }

    .cc_intro_course_details_fee, .cc_intro_course_details_btn_add_cart, .cc_intro_course_details_include {
        padding: 0 10px;
    }

    .cc_comp_title h3 {
        font-size: 20px !important;
    }

    .item-price {
        text-align: left;
        margin-right: 10px;
        float: left !important;
    }

    .cc_navbar_mobi_search {
        display: block !important;
        margin: 0px 0 0 10px !important;
        padding-left: 10px !important;
        padding-right: 0px !important;
    }

    .cc_navbar_mobile_search.active {
        display: block !important;
    }

    .cc_comp_search {
        display: none;
    }

    .cc_navbar_mobile_search.js_navbar_mobile_search.active .cc_comp_search {
        display: block !important;
    }

    section#student-page .admin-widget {
        display: block !important;
    }

    .course-item .course-thumbnail {
        width: 100%;
        height: 100px;
    }

    .cc_navbar_cat.js_navbar_cat {
        display: none !important;
    }
}


@media (min-width: 992px) {
    .modal-lg {
        max-width: 550px !important;
    }
}


@media only screen and (max-width: 768px) {
    #sec-banner .banner-item {
        height: 200px;
    }

    section#sec-form .formPanel .formAddress {
        display: none;
    }

    section#sec-form .formPanel {
        padding: 20px;
    }

    .home-title h3 {
        font-size: 25px;
    }

    .mt-footer {
        margin-bottom: 20px;
    }

    #header-main {
        display: none !important;
    }

    .col-cus-6 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    #header div#logo img {
        object-fit: contain;
    }

    section#sec-banner-sale .banner-sale {
        height: 100px;
    }

    section.sec-point .home-title {
        display: none;
    }

    .header-support {
        display: none;
    }

    a.hd-register.js_comp_btn_login_register {
        display: none;
    }

    a.hd-login.js_comp_btn_login_register {
        background: #fff !important;
        color: var(--main-color) !important;
    }

    span.cc_comp_icon_noty_num {
        background: #fff;
        color: var(--main-color) !important;
    }

    .js_shop_cart_add_remove i.fa.fa-shopping-cart {
        color: #fff;
    }

    #header .header-right {
        height: 50px;
    }

    .cc_comp_icon_noty i {
        color: #fff;
    }

    #header .header-account a h3 {
        display: none;
    }

    section.account-info .account-banner {
        height: 200px;
    }

    section.account-info .account-panel .account-action.text-right {
        text-align: center !important;
        display: none;
    }

    #header .header-account a {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

    .header-account {
        background: transparent;
    }

    .js-student-noty .student-noty-body {
        width: 300px;
        left: unset !important;
        right: -50px !important;
    }

    div#bkMenu {
        padding: 10px 0;
    }

    div#bkMenu span {
        display: block;
        height: 4px;
        background: var(--main-color) !important;
    }

    .exam-item .exam-thumbnail {
        height: 220px;
    }

    .course-item .course-thumbnail {
        height: 220px;
    }

    div#bkMenu span.line {
        width: 25px !important;
    }

    div#bkMenu span.line-2 {
        width: 30px !important;
    }

    div#bkMenu span.line-3 {
        width: 35px !important;
    }

    div#bkMenu span:not(:first-child) {
        margin: 7px 0 !important;
    }

    .cc_what_learn_content img {
        width: 100%;
    }

    .formSearch {
        width: 100%;
    }

    #header .header-login a {
        font-size: 15px;
        margin-left: 5px !important;
    }

    .account-header-menu {
        display: none;
    }

    .header-account-list ul li a {
        padding: 10px !important;
    }

    .page-entry img {
        width: 100%;
    }

    #header div#logo img {
        max-width: 50px;
    }

    #header {
        height: 60px;
    }

    .col-logo {
        -ms-flex: 0 0 66.666667% !important;
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }

    div#logo {
        text-align: center;
    }

    .col-menu {
        -ms-flex: 0 0 68%;
        flex: 0 0 68%;
        max-width: 68%;
    }

    .abouts {
        margin-top: 30px;
    }

    .account-info .account-panel .account-avatar {
        flex-flow: wrap;
    }

    section.account-info .account-panel .account-avatar .account-img {
        width: 100px;
        height: 100px;
    }

}


@media only screen and (min-width: 768px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1250px !important;
    }
}