@media screen and (max-width: 1520px) {
    .available-course-items {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .available-course-items > .item {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 390px;
                flex: 1 1 390px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 30px 20px;
        padding-top: 10px;
    }
    .avatar-info {
        width: 100%;
        gap: 24px;
    }
    .course-detail-info {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 14px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .course-detail-info > p {
        max-width: 100%;
    }
    .course-action {
        width: 100%;
    }
    .course-action:not(.inline-action) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .course-action:not(.inline-action) > .default-button {
        width: 100%;
    }
}
@media screen and (max-width: 1440px) {
    .test-place {
        padding: 25px;
    }
    .go-back {
        width: 30px;
        height: 30px;
    }
    .det-info-r {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .details-char-pp {
        min-width: unset;
    }
    .statChartHolder {
        max-width: 100% !important;
        width: 100%;
    }
    .content-chart {
        max-width: 100%;
    }
    .content-chart::before {
        max-width: unset !important;
        background: #0583F2;
        border-radius: 16px;
        height: 100%;
        width: calc(100% + 12px);
        left: -6px;
        right: -6px;
    }
    .auth-content-info {
        display: none;
    }
    .auth-container {
        max-width: 425px;
        width: 100%;
    }
    .auth-main-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .head-auth {
        margin-bottom: 0;
    }
    .auth-content {
        padding: 36px 20px;
        background: #FFF;
        -webkit-box-shadow: 34px 0px 63px 0px rgba(157, 162, 180, 0.13);
                box-shadow: 34px 0px 63px 0px rgba(157, 162, 180, 0.13);
        margin-bottom: 0;
    }
    .auth-content > p {
        display: none;
    }
    .head-auth > p {
        display: none;
    }
    .auth-main {
        margin-top: 30px;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 20px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        max-width: 100%;
    }
    .nav-auth {
        display: none;
    }
    .auth-content {
        width: 100%;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        max-width: 100%;
    }
    .head-auth-fill {
        margin-bottom: 30px;
    }
    .head-auth-fill > h1 {
        font-size: 27px;
    }
    .auth {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .filter-lesson {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .links-lesson > .default-button {
        width: 100%;
    }
    .message-info {
        margin-top: 20px;
    }
    .head-course-content {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 20px;
    }
    .course-action-content {
        max-width: 484px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .course-action-content > * {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 234px;
                flex: 1 1 234px;
    }
    .lesson-navigate {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .lesson-navigate > * {
        max-width: 100%;
        width: 100%;
    }
    .group-schedule {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .group-schedule > .item {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 360px;
                flex: 1 1 360px;
        padding: 15px 19px;
        padding-bottom: 30px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .time-details {
        gap: 20px;
        width: 100%;
    }
    .time-subject-info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .more-time-info {
        gap: 14px;
    }
    .time-action {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
    }
    .time-action > .default-button {
        max-width: 100%;
        width: 100%;
    }
    .time-info {
        border-radius: 20px;
    }
}
@media screen and (max-width: 1398px) {
    .primary-navigation {
        padding: 10px 20px;
        gap: 20px;
    }
    .items-about-main {
        gap: 20px;
    }
}
@media screen and (max-width: 1224px) {
    .nav-res-test {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .buttons-actions-que {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        max-width: 100%;
        width: 100%;
    }
    .buttons-actions-que > * {
        width: 100%;
        max-width: 100%;
    }
    .live {
        gap: 10px;
    }
    .spec-container {
        height: 348px;
    }
    .item-wall {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    .item-teacher-avatar {
        height: 196px;
    }
    .primary-c {
        height: 40px;
        padding: 0px 20px;
    }
    .primary-c > p {
        font-size: 12px;
    }
    .action-details-teacher {
        margin-top: 10px;
    }
    .head-items-info {
        margin-bottom: 40px;
    }
    .process-items {
        margin-top: 40px;
    }
    .process-items > .item {
        padding: 30px;
    }
    .primary-process {
        padding: 70px 0;
    }
    .head-review-main > h1 {
        text-align: left;
        font-size: 27px;
    }
    .primary-course {
        padding: 70px 0;
    }
    .course-aval {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .content-item-aval {
        padding: 30px;
    }
    .course-discount {
        margin-top: 70px;
        padding: 30px;
    }
    .primary-faq {
        padding: 70px 0;
    }
    .menu-toggle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .primary-main {
        padding-top: 30px;
    }
    header > .item {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
    .primary-a {
        height: 46px;
        padding: 0px 22px;
    }
    .primary-a::before {
        content: none;
    }
    .primary-a > p {
        white-space: nowrap;
    }
    .head-faq {
        padding: 24px;
        padding-right: 16px;
    }
    .body-faq {
        padding: 24px;
    }
    .footer-contact {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 20px;
    }
    .bottom-footer > .primary-navigation {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .bottom-footer > .primary-navigation > span {
        display: none;
    }
    .faq > h1 {
        text-align: left;
        font-size: 27px;
        margin-bottom: 40px;
    }
    .data-discount > h1 {
        font-size: 20px;
    }
    .data-discount > p {
        font-size: 12px;
    }
    .course-main > .process > h1, .course-main > .process p {
        text-align: center;
    }
    .data-process {
        gap: 20px;
    }
    .data-process > h1 {
        font-size: 22px;
    }
    .data-process > p {
        font-size: 15px;
    }
    .ico-process {
        width: 55px;
        height: 55px;
    }
    .ico-process > img {
        width: 23px;
        height: 23px;
    }
    .process > h1 {
        text-align: left;
        font-size: 27px;
    }
    .process > p {
        text-align: left;
        font-size: 14px;
    }
    .process > p > br {
        display: none;
    }
    .primary-d {
        height: 40px;
        padding: 0px 20px;
    }
    .primary-d > p {
        font-size: 12px;
    }
    .control-items {
        margin-top: 36px;
    }
    .control-items > .item {
        width: 39px;
        height: 39px;
        background-size: 15px 15px;
    }
    .item-wall > img {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    .details-item-teacher {
        padding: 0px 24px;
        padding-bottom: 20px;
    }
    .details-item-teacher > ul {
        margin-top: 0;
    }
    .details-item-teacher > ul > li {
        font-size: 12px;
    }
    .details-item-teacher > h3 {
        margin-bottom: 0;
        font-size: 12px;
        padding: 8px 16px;
    }
    .details-item-teacher > .name-social {
        margin-bottom: 0;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .details-item-teacher > .name-social > h1 {
        font-size: 20px;
    }
    .welcome-main-info > h1 {
        font-size: 28px;
        line-height: 117%;
        letter-spacing: -1.68px;
    }
    .welcome-main-info > p {
        margin-top: 17px;
        font-size: 14px;
    }
    .teachers-items-info {
        position: relative;
    }
    .primary-about {
        padding: 70px 0;
    }
    .items-about-main > .item {
        padding: 45px 35px;
        border-radius: 40px;
    }
    .body-item-about > .item {
        gap: 15px;
    }
    .head-item-about > h1 {
        font-size: 25px;
    }
    .details-avg > h1 {
        font-size: 55px;
    }
    .count-per > h1 {
        font-size: 55px;
    }
    .head-items-info > h1 {
        font-size: 27px;
    }
    .control-items {
        top: 100%;
        position: absolute;
    }
    .primary-welcome {
        padding-top: 10px;
    }
    .head-about-main > .default-button {
        display: none;
    }
    .head-about-main > .welcome-head {
        gap: 20px;
    }
    .head-about-main > .welcome-head > h1 {
        font-size: 27px;
    }
    .head-about-main > .welcome-head > h1 > .media-people {
        display: none;
    }
    .head-about-main > .welcome-head > p {
        font-size: 14px;
    }
    .welcome-main-action {
        margin-top: 36px;
    }
    .primary-b {
        padding: 0px 32px;
        height: 55px;
    }
    .item-live {
        height: 44px;
    }
    .welcome-main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .bottom-footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .hide-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
    }
    .items-about-main {
        margin-top: 40px;
    }
    header > .primary-navigation {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        padding: 40px 20px;
        position: fixed;
        left: 0;
        right: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        top: 0;
        bottom: 0;
        z-index: 2;
        border-radius: 0;
        border: none;
        background: #FFF;
    }
    header > .primary-navigation > span {
        display: none;
    }
    header > .primary-navigation > .item > p {
        font-size: 20px;
    }
    header > .primary-navigation.active {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    .items-about-main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .content-item-process {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: flex-start !important;
    }
    .body-review-main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .course-aval {
        gap: 20px;
    }
    .course-discount {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .top-footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .footer-contact-social {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 30px;
    }
    .footer-logo-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .details-auth {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 15px;
    }
    .links-lesson {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .lesson {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .head-content {
        gap: 28px;
        padding: 28px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .head-content::before {
        content: none;
    }
    .details-head-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .details-head-content > p {
        line-height: 121.682%;
        font-size: 20px;
    }
    .back-arrow {
        display: none;
    }
    .lesson-explain {
        max-width: 100%;
    }
    .lesson-tests {
        max-width: 100%;
    }
    .test-items {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .test-items > .item {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 300px;
                flex: 1 1 300px;
        padding: 15px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 15px;
    }
    .test-sub-info {
        padding: 18px 20px;
        width: 100%;
        border-radius: 14px;
    }
    .sub-info-test {
        padding: 0px 20px;
        padding-bottom: 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: left;
    }
    .sub-info-test > .default-button {
        max-width: 100%;
        width: 100%;
    }
    .sub-info-test > p {
        max-width: 100%;
    }
    .primary-review {
        padding: 70px 0;
    }
    .course-aval {
        margin-top: 40px;
    }
}
@media screen and (max-width: 1180px) {
    .head-course-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .course-action-content {
        max-width: 100%;
    }
}
@media screen and (max-width: 1024px) {
    .course-action-content > * {
        -webkit-box-flex: unset;
            -ms-flex: unset;
                flex: unset;
    }
    .matching-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 50px;
    }
    .lesson-items {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .lesson-items > .item {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 340px;
                flex: 1 1 340px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding: 25px 20px;
        padding-bottom: 30px;
    }
    .lesson-items > .item > .default-button {
        width: 100%;
    }
    .lesson-info-details {
        width: 100%;
        min-height: unset;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 20px;
    }
    .current-complete {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .info-lesson {
        padding: 0;
    }
    .info-lesson > .current-complete {
        display: none;
    }
    .lesson-num {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        width: 100px;
        height: 100px;
        border-radius: 20px;
    }
    .lesson-num > p {
        font-size: 30px;
    }
    .course-action-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
    }
    .course-action-content > .default-button {
        width: 100%;
        max-width: 100%;
    }
    .message-info {
        padding: 20px;
    }
    .head-setting {
        margin-bottom: 40px;
    }
    .body-setting > .item {
        padding: 20px 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .setting-content {
        padding: 40px 20px;
    }
    .details-setting {
        gap: 10px;
    }
    .details-setting > .button-a {
        width: 50px;
        height: 50px;
        padding: 0;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.8' clip-path='url(%23clip0_832_5032)'%3E%3Cpath d='M3.05922 14.3143C3.22922 14.3143 3.26322 14.2973 3.41622 14.2633L6.47622 13.6513C6.79922 13.5663 7.12222 13.4133 7.37722 13.1583L14.7892 5.74634C15.9282 4.60734 15.9282 2.65234 14.7892 1.51334L14.1602 0.850344C13.0212 -0.288656 11.0492 -0.288656 9.91022 0.850344L2.49822 8.27934C2.26022 8.51734 2.09022 8.85734 2.00522 9.18034L1.35922 12.2743C1.27422 12.8523 1.44422 13.4133 1.85222 13.8213C2.17522 14.1443 2.65122 14.3143 3.05922 14.3143ZM3.63722 9.50334L11.0492 2.07434C11.5422 1.58134 12.4432 1.58134 12.9192 2.07434L13.5652 2.72034C14.1432 3.29834 14.1432 4.11434 13.5652 4.67534L6.17022 12.1043L3.02522 12.6313L3.63722 9.50334ZM14.7212 15.3683H2.17522C1.68222 15.3683 1.35922 15.6913 1.35922 16.1843C1.35922 16.6773 1.76722 17.0003 2.17522 17.0003H14.6532C15.1462 17.0003 15.5542 16.6773 15.5542 16.1843C15.5372 15.6913 15.1292 15.3683 14.7212 15.3683Z' fill='%230583F2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_832_5032'%3E%3Crect width='17' height='17' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 17px 17px;
    }
    .details-setting > .button-a > p {
        display: none;
    }
    .details-setting > .button-ico {
        width: 50px;
        height: 50px;
        padding: 0;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }
    .details-setting > .button-ico > p {
        display: none;
    }
    .details-setting > .button-ico.inline-ico {
        width: 100%;
        max-width: 100%;
        height: 48px;
    }
    .details-setting > .button-ico.inline-ico > p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
@media screen and (max-width: 768px) {
    body.light {
        background: #FCFCFF;
    }
    body.light > .responsive-wrapper {
        background: #FCFCFF;
    }
    .responsive-main {
        padding-bottom: 79px;
    }
    .responsive-navigate {
        position: fixed;
        z-index: 9;
        width: 0;
        height: 0;
        padding: 0;
    }
    .item-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .group-navigate.nv-n {
        left: 0;
        right: 0;
        padding: 8px 0;
        background: #FFF;
        -webkit-box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.12);
                box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.12);
        position: fixed;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 0;
        bottom: 66px;
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
    }
    .group-navigate.nv-n.active {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    .group-navigate.nv-n > .item-navigate {
        padding: 12px 16px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: 8px;
        border-radius: 0;
    }
    .group-navigate.nv-n > .item-navigate.active {
        background: rgba(5, 131, 242, 0.1) !important;
    }
    .group-navigate.nv-n > .item-navigate > .content-navigate > .ico-navigate {
        width: 22px;
        height: 22px;
    }
    .group-navigate.nv-n > .item-navigate > .content-navigate > p {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: -0.28px;
    }
    .group-navigate.nav-type-a {
        z-index: 1;
        background: #FFF;
        -webkit-box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.12);
                box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.12);
        gap: 0;
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .group-navigate.nav-type-a > * {
        width: 100%;
    }
    .group-navigate.nav-type-a > .item-navigate {
        gap: 8px;
        padding: 12px;
    }
    .group-navigate.nav-type-a > .item-navigate > .content-navigate > p {
        color: #7F87A3;
        text-align: center;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: -0.2px;
    }
    .group-navigate.nav-type-a > .item-navigate > .ico-navigate {
        width: 22px;
        height: 22px;
    }
    .group-navigate {
        gap: 19px;
    }
    .group-navigate.nav-type-a {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }
    .group-navigate {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .item-navigate {
        gap: 7px;
        padding: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        background: none !important;
    }
    .item-navigate.nav-logout {
        display: none;
    }
    .content-navigate > p {
        font-size: 10px;
    }
    .responsive-content {
        padding: 40px 20px;
    }
    .head-info > p {
        display: none;
    }
    .responsive-header {
        padding: 20px;
    }
    .head-profile-content {
        gap: 12px;
    }
    .head-profile-content::after {
        content: none;
    }
    .head-logout {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .image-teacher {
        width: 132px;
    }
    .name-social {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        gap: 9px;
    }
    .social-teacher {
        gap: 6px;
    }
    .social-teacher > .item {
        width: 22px;
        height: 22px;
    }
    .social-teacher > .item > img {
        width: 8px;
        height: 8px;
    }
    .head-step > h1 {
        font-size: 27px;
    }
    .head-step > h1 > img {
        width: 35px;
        height: 35px;
    }
    .head-step > p {
        font-size: 15px;
    }
    .head-step > p > br {
        display: none;
    }
    .body-step {
        margin: 40px 0;
        margin-bottom: 30px;
    }
    .action-step > .default-button {
        width: 100%;
    }
    .action-step > .default-button.button-d {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
    .course-info {
        margin: 40px 0;
    }
    .details-step {
        margin-top: 4px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .course-step.step-row > .item > .content-course-step {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .bottom-step {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        margin-top: 40px;
    }
    .bottom-step > p {
        font-size: 12px;
    }
    .action-step {
        width: 100%;
    }
    .group-fill {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .fill-items {
        gap: 10px;
    }
    .head-test {
        padding: 10px 35px;
        min-height: 96px;
        gap: 20px;
    }
    .head-test::before {
        width: 32px;
        height: 32px;
    }
    .info-test > h1 {
        font-size: 22px;
    }
    .test-info {
        margin-top: 0;
    }
    .result-items-test > .item {
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        width: 100%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .body-result-test {
        gap: 40px;
    }
    .info-test {
        gap: 5px;
    }
    .award-item {
        padding: 26px 30px;
        padding-top: 20px;
    }
    .award-progress {
        max-width: 100%;
    }
    .award-image {
        width: 67px;
        height: 67px;
    }
    .award-exer {
        margin-top: 38px;
    }
    .head-test::after {
        content: none;
    }
    .head-test.award-ico, .head-test.review-head {
        padding: 30px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .info-test > p {
        opacity: 1;
        line-height: 166%;
        letter-spacing: -0.56px;
        font-weight: 500;
    }
    .head-review {
        margin-bottom: 40px;
    }
    .an-ico {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding: 30px;
    }
    .lesson-media {
        height: 200px;
    }
    .lesson {
        padding: 30px;
    }
    .lesson-explain {
        gap: 40px;
    }
    .content-modal {
        padding: 45px 36px;
    }
}

@media screen and (max-width: 576px) {
    .avatar-setting {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .avatar-setting>.default-button {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .poll {
        width: 100%;
    }
    .poll > .item-lesson-type {
        min-width: 60px;
    }
    .poll > .item-lesson-type > .icon-lesson {
        width: 30px;
        height: 30px;
    }
    .poll > .info-lesson-content {
        padding: 16px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .poll > .info-lesson-content > .lesson-details {
        display: none;
    }
    .poll > .info-lesson-content > .default-button {
        width: 100%;
    }
    .poll > .info-lesson-content > .default-button > p {
        font-weight: 600;
    }
}

@media screen and (max-width: 1186px) {
    .pay-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .pay-content > .item {
        padding: 16px;
    }
    .row-info-text > span {
        font-size: 13px;
    }
    .row-info-text > p {
        font-size: 15px;
    }
    .row-info > p {
        font-size: 13px;
    }
    .card-place-field > .item {
        padding: 0px 10px;
    }
    .card-place-field > .item > p {
        font-size: 13px;
    }
    .card-place {
        background: none;
        border: none;
        padding: 0;
        gap: 8px;
    }
    .card-place > p {
        font-size: 14px;
    }
    .pay-mehods > .item {
        height: 48px;
    }
    .pay-button {
        height: 48px;
    }
    .pay-button > p {
        font-weight: 500;
    }
    .pay-or > p {
        font-size: 14px;
    }
}