.order_course.active,
.order_course:hover {
    color: #698af1;
    cursor: pointer;
    float: left;
}

.order_course {
    color: #ccc;
    float: left;
}

.keyword {
    background-color: #f9f9f9;
    padding: 10px 15px;
    /* line-height: 3; */
    margin: 5px;
    border-radius: 20px;
    background-clip: border-box;
    text-decoration: none;
    color: #969696;
    display: inline-block;
    cursor: pointer;
}

    .keyword.active,
    .keyword:hover {
        background-color: #e0e5f7 !important;
        text-decoration: none;
        color: #3762f0 !important;
        padding: 10px 15px;
        /* line-height: 3; */
        margin: 5px;
        border-radius: 20px;
        background-clip: border-box;
        display: inline-block;
        cursor: pointer;
    }

.cnt_course_profile .img_course_avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 5px;
    object-fit: cover;
}

.cnt_course_profile .full_course_name {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

    .cnt_course_profile .full_course_name:hover {
        text-decoration: none;
    }

.cnt-banner-course img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.cnt-banner-course .name-table {
    display: table;
    height: 240px;
    width: 100%;
    position: absolute;
}

.cnt-banner-course .name-table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 32px;
    padding-top: 30px;
    padding-bottom: 30px
}

    .cnt-banner-course .name-table-cell .name-table-cell {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .cnt-banner-course .name-table-cell i {
        display: inline-block;
        margin-right: 20px;
    }

.cnt-courses-infor .require-0 {
}

.cnt-courses-infor .require-0 {
}

    .cnt-courses-infor .require-0 .card {
        /*background-color: #eee;*/
        color: #555;
    }
.cnt-courses-infor a{
    text-decoration:none;
    color: inherit;
}
.cnt-courses-infor .card-body {
    /*height: 200px;*/
    height: auto;
    overflow: hidden;
}

    .cnt-courses-infor .card-body .card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 50px;
        font-size: 20px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        overflow: hidden;
    }

.cnt-courses-infor .card-img-top {
    /*height: 200px;*/
    height: 150px;
    object-fit: cover;
}

.col-9.cnt-courses-infor .card-img-top {
    height: 165px;
}

/*icon*/
/*.cnt-courses-infor .require-box {
    position: absolute;
    border-radius: 5px;
    right: 0px;
    object-fit: cover;
    padding: 3px;
    margin: 7px;
    background-color: rgba(8, 8, 8, 0.53);
}

.cnt-courses-infor .ispass-box {
    position: absolute;
    border-radius: 5px;
    right: 0px;
    top: 39px;
    object-fit: cover;
    padding: 3px;
    margin: 7px;
    background-color: rgba(8, 8, 8, 0.53);
}

.cnt-courses-infor .img-container{
    overflow:hidden;
}

.list-unstyled .img-container {
    position: relative;
    object-fit: cover;
}

.list-unstyled img.ispass-box {
    position: absolute;
    right: 0px;
    object-fit: cover;
    padding: 3px;
    margin: 7px;
    background-color: rgba(8, 8, 8, 0.53);
    width: 16px !important;
    height: 16px !important;
}

[data-c-tooltip]:before,
[data-c-tooltip]:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}
 
[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

[data-c-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

[data-c-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 160px;
   
    background-color: #E0E0E0;
    background-color: rgb(224,224,224);
    border: inherit 1px;
    border-radius: 3px;
    text-align:center;
    content: attr(data-c-tooltip);
    font-size: 14px;
    line-height: 1.2;
}

[data-c-tooltip]:before,
[data-c-tooltip]:after {
    bottom: 100%;
    left: 50%;
}

[data-c-tooltip]:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: rgba(51, 51, 51, 0.9);
}

[data-c-tooltip]:after {
    margin-left: -80px;
}

[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    transform: translateY(-12px);
}*/

.cnt-courses-infor .img-container .item-img {
    position: absolute;
    object-fit: cover;
    top: 15px;
    left: -45px;
    width: 185px !important;
    padding: 10px;
    background-color: rgb(51, 204, 204);
    transform: rotate(-35deg);
    text-align: center;
}

.cnt-courses-infor .img-container {
    position: relative;
    overflow:hidden;
}
/*end*/
/*Shape*/
.rebbon-item {
    font-size: 16px;
   
    color: #fff;
}

.rebbon-item .ribbon {
    --s: 2em; /* the ribbon size */
    --d: .8em; /* the depth */
    --c: .8em; /* the cutout part */

    padding: 0 calc(var(--s) + .5em) var(--d);
    line-height: 1.8; /*1.8;*/
    background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%,#0008 0 37.5%,#0004 0) 0 /50% 100% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
    clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
    background-color: #007bffc7; /* the main color */
    width: fit-content;
}


.grid-container {
    display: grid;
    grid-template-columns: 35% 65%;
}

/*@media only screen and (max-width: 412px) {
    .grid-container {
        display: grid;
        grid-template-columns: 100%;
    }*/
@media only screen and (max-width: 566px) {
    .grid-container {
        display: grid;
        grid-template-columns: 100%;
    }
    .rebbon-item{
        font-size:13px;
    }
        .rebbon-item .ribbon {
            --s: 1.8em; /* the ribbon size */
            --d: .8em; /* the depth */
            --c: .8em; /* the cutout part */

            padding: 0 calc(var(--s) + .5em) var(--d);
            line-height: 1.8; /*1.8;*/
            background: conic-gradient(at left var(--s) bottom var(--d), #0000 25%,#0008 0 37.5%,#0004 0) 0 /50% 100% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
            clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
            background-color: #007bffc7; /* the main color */
            width: fit-content;
        }
}
    /*end Shape*/

    .cnt-courses-infor .card-text {
        font-size: 14px;
        height: 45px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cnt-courses-infor .card a.cnt-img-course {
        position: relative;
        overflow: hidden;
    }

    .cnt-courses-infor .card-div-top {
        position: absolute;
        bottom: 0px;
        color: #ffff;
        background-color: #a54455;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        opacity: 0.8;
        width: 100%;
        height: 30px;
        font-size: 14px;
        text-align: right;
        vertical-align: middle;
        z-index: 1;
    }

    .cnt-courses-footer {
        height: 50px;
        text-align: center;
        /*background: linear-gradient(#ffffff, #b12841);*/
        background-color: #3db3b5;
        color: #ffffff;
        padding-top: 15px;
        font-weight: 400;
        font-size: 14px
    }

    .home-page .cnt-courses-infor .card-text {
        font-size: 16px;
        height: 50px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cnt-courses-infor .card-author,
    .cnt-courses-infor .card-author a {
        color: #949494;
        font-size: 13px;
        text-decoration: none;
    }

        .cnt-courses-infor .card-author .cnt-circle {
            /*display: inline-block;*/
            margin-left: 5px;
            position: relative;
        }

            .cnt-courses-infor .card-author .cnt-circle i {
                position: absolute;
                font-size: 6px;
                top: 7px;
                left: 0px;
            }

            .cnt-courses-infor .card-author .cnt-circle span {
                padding-left: 10px;
            }

    .cnt-courses-infor .card-footer {
        padding: 0px;
        border-top: none;
        position: relative;
        background-color: transparent;
    }

        .cnt-courses-infor .card-footer .bnt-custom-infor {
            color: #B1B1B3;
            font-size: 13px;
            /*padding: 0px 10px;*/
            /*border-right: 1px solid #EBEBEB;*/
            line-height: 45px;
            display: inline-block;
            text-decoration: none;
            padding-left: 20px;
        }

        .cnt-courses-infor .card-footer a.btn {
            float: right;
            border-radius: 0;
            border-bottom-right-radius: 0.25rem;
            color: #fff;
            position: absolute;
            right: 0px;
            bottom: 0px;
            height: 100%;
            line-height: 32px;
        }

            .cnt-courses-infor .card-footer a.btn.btn-fee-course {
                background-color: #F7B229;
            }

    .cnt-courses-infor .btn.btn-more {
        background-color: transparent;
        border: 1px solid #E1E1E1;
    }

    .cnt-banner-course .cnt-detail-course {
        background-color: #fff;
        color: #333333;
        width: 38%;
        margin: 0 auto;
        height: 80%;
        font-size: 15px;
        border-radius: 4px;
        padding: 10px;
    }

        .cnt-banner-course .cnt-detail-course i {
            font-size: 8px;
            margin-left: 20px;
            margin-right: 10px;
        }

        .cnt-banner-course .cnt-detail-course .name-table {
            height: 100%;
            position: relative;
        }

            .cnt-banner-course .cnt-detail-course .name-table .mb-2 {
                font-size: 14px;
                color: #959595;
            }

            .cnt-banner-course .cnt-detail-course .name-table .text-uppercase.mb-2 {
                font-size: 20px;
                font-weight: 500;
                color: #333;
                line-height: 22px;
                margin-bottom: 5px !important;
            }

            .cnt-banner-course .cnt-detail-course .name-table button {
                background-color: #F6B229;
                color: #fff;
            }

            .cnt-banner-course .cnt-detail-course .name-table .btn.btn-primary {
                background-color: var(--main-color6);
                color: #fff;
                border-color: var(--main-color6);
            }

        .cnt-banner-course .cnt-detail-course .cnt-circle {
            margin-left: 5px;
            position: relative;
        }

            .cnt-banner-course .cnt-detail-course .cnt-circle i {
                position: absolute;
                font-size: 6px;
                top: 7px;
                left: 0px;
                margin-left: 0px;
            }

            .cnt-banner-course .cnt-detail-course .cnt-circle span {
                padding-left: 10px;
            }

    .cnt-banner-course .cnt-rating {
        margin-top: -12px;
    }

    .cnt-banner-course .cnt-detail-course .starrating > input {
        display: none;
    }

    .cnt-banner-course .cnt-detail-course .starrating > label:before {
        content: "\f005"; /* Star */
        margin: 2px;
        font-size: 20px;
        font-family: FontAwesome;
        display: inline-block;
    }

    .cnt-banner-course .cnt-detail-course .starrating > label {
        color: rgba(181, 155, 60, 0.5);
    }

    .cnt-banner-course .cnt-detail-course .starrating > input:checked ~ label {
        color: #ffca08;
    }

    .cnt-banner-course .cnt-detail-course .starrating > input:hover ~ label {
        color: #ffca08;
    }

    .content-detail-course .nav-pills .nav-link {
        background-color: transparent;
        border: 1px solid #E1E1E1;
        color: #959595;
    }

    .content-detail-course .nav-pills .nav-item {
        margin-right: 30px;
    }

    .content-detail-course .nav-pills .nav-link.active {
        background-color: #F8B32A;
        color: #fff;
    }

    .content-detail-course #left-introduction .cnt-teacher-infor {
        position: relative;
    }

        .content-detail-course #left-introduction .cnt-teacher-infor .carousel-control-next {
            right: 0;
            height: 50px;
            top: 135px;
        }

        .content-detail-course #left-introduction .cnt-teacher-infor .carousel-control-prev {
            left: 0;
            height: 50px;
            top: 138px;
        }

        .content-detail-course #left-introduction .cnt-teacher-infor .cnt-avatar {
            width: 180px;
            height: 180px;
            margin: 0 auto;
        }

            .content-detail-course #left-introduction .cnt-teacher-infor .cnt-avatar img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .content-detail-course #left-introduction .cnt-teacher-infor .card,
        .content-detail-course #left-introduction .cnt-student-infor .card {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .content-detail-course #left-introduction .cnt-teacher-infor .card-footer {
            margin: 5px;
            border-top: none;
        }

            .content-detail-course #left-introduction .cnt-teacher-infor .card-footer .card-author {
                color: #959595;
            }

    .content-detail-course #left-introduction .cnt-student-infor .card,
    .content-detail-course #left-introduction .cnt-video-introduction .card {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .content-detail-course #pills-introduction .cnt-student-infor .card ul,
    .content-detail-course #pills-introduction .cnt-student-infor .card ul li {
        list-style-type: square;
    }

    .content-detail-course #pills-introduction .list-group-item .name-lesson {
        text-decoration: none;
        color: #333;
    }

    .content-detail-course #pills-introduction .list-group-item .introduction-lesson {
        background-color: #F7F7F7;
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 10px;
        border-top: 1px solid #ccc;
        margin-bottom: -12px;
        border-top: 1px solid rgba(0, 0, 0, 0.125);
        padding: 12px 5px;
        display: none;
    }

    .value-progress {
        width: 40px;
    }

    .progress {
        height: 6px;
        width: calc(100% - 80px);
        margin: 9px;
    }

    .content-detail-course #pills-introduction .list-group-item .infor-progress {
        width: 20px;
        text-align: center;
        cursor: pointer;
        color: #6a6a6a;
    }

    .progress {
        background-color: #CCCCCC;
    }

    .progress-bar {
        background-color: #00CD83;
    }

        .progress-bar[aria-valuenow="100"] {
            background-color: #00CD83;
        }

    .cnt-progressbar {
        width: 75%;
        color: #333;
        font-size: 13px;
        margin: 0 auto;
        line-height: 22px;
    }

        .cnt-progressbar .progress {
            width: calc(100% - 58px);
        }

    .icon-prev-video {
        position: absolute;
        top: 0px;
        right: 44px;
        background-color: #A3B4C4;
        color: #fff;
        width: 43px;
        height: 43px;
        line-height: 43px;
        text-align: center;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .icon-next-video {
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: #A3B4C4;
        color: #fff;
        width: 43px;
        height: 43px;
        line-height: 43px;
        text-align: center;
        cursor: pointer;
    }

    .cnt-playlist-course .item-lesson-course {
        cursor: pointer;
    }

        .cnt-playlist-course .item-lesson-course.active {
            background-color: #F7F7F7;
            color: #3663F0;
            border-color: rgba(0, 0, 0, 0.125);
        }

            .cnt-playlist-course .item-lesson-course.active .cnt-progressbar-video-list {
                color: #333;
            }

    /*.border-top {
    border-color: #363636 !important;
}*/

    .cnt-custom-search-left {
        width: 90%;
        font-size: 15px;
    }

    .cnt-content-course .icon-search {
        position: absolute;
        left: 0px;
        top: 10px;
        color: #959595;
    }

    .cnt-content-course .input-search {
        width: 100%;
        border: none;
        padding: 10px;
        outline: none;
        box-shadow: none;
        padding-left: 20px;
    }

    .cnt-content-course .item-search {
        margin-bottom: 1px;
    }

    .cnt-custom-search-left .item-search:hover,
    .cnt-custom-search-left .item-search.active {
        background-color: var(--main-color6);
        color: #fff;
    }

    .cnt-courses-infor .item-filter {
        background-color: #E1E1E1;
        margin-right: 5px;
        font-size: 14px;
        padding: 5px 10px;
        float: left;
        margin-bottom: 5px;
    }

        .cnt-courses-infor .item-filter .iconmoon-Close {
            font-size: 12px;
            margin-left: 5px;
            cursor: pointer
        }

    .cnt-programs .media img {
        width: 180px;
        height: 120px;
        object-fit: cover;
    }

    .cnt-programs .media .num-courses {
        color: #ff6600;
        font-weight: 600;
    }

    .cnt-programs .media .cnt-author {
        color: #959595;
        font-size: 13px;
        margin-top: 5px;
    }

        .cnt-programs .media .cnt-author .cnt-circle {
            position: relative;
            margin-left: 10px;
        }

            .cnt-programs .media .cnt-author .cnt-circle i.fa-circle {
                font-size: 8px;
                position: absolute;
                top: 6px;
                left: 0px;
            }

            .cnt-programs .media .cnt-author .cnt-circle span {
                padding-left: 15px;
            }

    .cnt-programs .media .cnt-date {
        width: 80px;
        height: 80px;
        display: table;
        background-color: #FF6600;
        margin-right: 15px;
        color: #fff;
    }

    .cnt-programs .media .item-date {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 100%;
    }

        .cnt-programs .media .item-date .main-value {
            font-size: 18px;
            font-weight: 600;
        }

        .cnt-programs .media .item-date .sub-value {
            font-size: 13px;
        }

    .cnt-programs .media .media-body {
        height: 80px;
        display: table;
    }

        .cnt-programs .media .media-body .cnt-content {
            height: 100%;
            vertical-align: top;
            display: table-cell;
            line-height: 26px;
        }

    .cnt-programs .cnt-icon {
        color: #FFB607;
        font-size: 38px;
    }

    .cnt-programs .title-programs {
        font-weight: 600
    }

    .cnt-programs .number-lesson {
        font-size: 14px;
    }

    .cnt-programs .cnt-times {
        font-size: 14px;
        color: #959595
    }

    .btn-details {
        position: absolute;
        left: -30px;
        width: 20px;
        height: 20px;
        text-align: center;
        cursor: pointer;
        animation: mymove 5s infinite;
    }

    .icon-view-details {
        background-color: #E6EBFE;
        padding: 5px 10px;
        color: #7588CA;
        float: left;
        margin-right: 10px;
        font-size: 18px;
        text-decoration: none;
    }

        .icon-view-details:hover {
            text-decoration: none;
        }

    .content-detail-course #pills-introduction .list-group-item .btn-details.active + .name-lesson {
        color: #3861ED;
    }

    .content-detail-course #pills-introduction .list-group-item.has-seen .name-lesson, .list-group-item.has-seen,
    .list-group-item.has-seen a.cnt-name-lesson {
        color: #959595;
    }

    .list-group-item a.cnt-name-lesson {
        text-decoration: none;
        color: #333;
    }

    .icon-has-seen {
        position: absolute;
        right: 0px;
        top: 0px;
        color: #3762f0;
        display: none;
    }

    .list-group-item.has-seen .icon-has-seen {
        display: block;
    }

    #pills-result img.avatar {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
    }

    #pills-result .item-name {
        height: 80px;
        display: table;
        padding: 0 20px;
        width: 35%
    }

    #pills-result .item-score {
        height: 80px;
        display: table;
        padding: 0 20px;
        width: 22%
    }

    #pills-result .item-result {
        height: 80px;
        display: table;
        padding: 0 20px;
        width: 30%
    }

    #pills-result .item-rank {
        height: 80px;
        display: table;
        padding: 0 20px;
        width: 30%
    }

    #pills-result .detail-item {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

    #pills-result .card-item {
        min-width: 120px;
    }

        #pills-result .detail-item .label,
        #pills-result .card-item .label {
            color: #959595;
        }

        #pills-result .item-name .detail-item .name,
        #pills-result .card-name .name {
            font-size: 18px;
            font-weight: 600;
        }

        #pills-result .item-score .detail-item .name,
        #pills-result .card-score .name {
            color: #F6B326;
            font-size: 18px;
            font-weight: 600;
        }

        #pills-result .item-result .detail-item .name-pass,
        #pills-result .card-result .name-pass {
            font-size: 18px;
            font-weight: 600;
            color: var(--main-color6);
        }

        #pills-result .item-result .detail-item .name-fail,
        #pills-result .card-result .name-fail {
            font-size: 18px;
            font-weight: 600;
            color: red;
        }

        #pills-result .item-rank .detail-item .rank,
        #pills-result .card-rank .rank {
            font-size: 18px;
            font-weight: 600;
            color: black;
        }

    #pills-result .cnt-icon {
        font-size: 18px;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    #left-introduction i.iconmoon {
        font-size: 22px;
        position: absolute;
        line-height: 22px;
    }

    #left-introduction .pl-30 {
        padding-left: 30px;
    }

    #left-introduction .pl-40 {
        padding-left: 40px;
    }

    #left-introduction span.pl-40 {
        font-size: 16px;
    }

    #left-introduction .my-20 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .course-name-title {
        font-size: 22px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .cnt-sub-info {
        color: #959595;
    }

    .btn_learning,
    .btn_learning:hover {
        background-color: #00CD83;
        border-color: #fff;
        opacity: 0.8;
        border-radius: 20px;
        color: #fff;
    }

        .btn_learning .iconmoon {
            color: #4DFFA9;
        }

    .btn_upcoming,
    .btn_upcoming:hover {
        background-color: #f50f39;
        border-color: #fff;
        opacity: 0.8;
        border-radius: 20px;
        color: #fff;
    }

    .btn_expried,
    .btn_expried:hover {
        background-color: #959595;
        border-color: #fff;
        opacity: 0.8;
        border-radius: 20px;
        color: #fff;
    }

    .btn_upcoming .iconmoon {
        background-color: #fff;
        padding: 3px;
        border-radius: 50%;
        font-size: 13px;
        color: #7C75DC;
    }

    .btn_expried .iconmoon {
        background-color: #D7E6E9;
        border-radius: 50%;
        font-size: 13px;
        color: #FD3F5B;
    }

    .rateit .rateit-selected {
        background-position: left -32px;
    }

    .btn-learning-now {
        background-color: var(--main-color6);
        padding-left: 20px;
        padding-right: 20px;
    }

    .btn_add_notes_learning {
        width: 130px;
        position: absolute;
        right: 15px;
        top: -40px;
        text-align: right;
        cursor: pointer;
        user-select: none;
    }

        .btn_add_notes_learning img {
            width: 24px;
            margin-left: 5px;
        }

    .content_notes .item_notes {
        background-color: #FFF5D1;
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 20px;
        position: relative;
    }

        .content_notes .item_notes .date_notes {
            font-size: 14px;
            color: #959595;
        }

        .content_notes .item_notes .content_notes {
            margin-top: 5px;
        }

        .content_notes .item_notes .delete_notes {
            position: absolute;
            right: 5px;
            top: 0px;
            color: red;
            cursor: pointer;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

    .btn_download_notes {
        position: absolute;
        right: 0px;
        top: 0px;
        color: #476ED0;
        text-decoration: underline;
        cursor: pointer;
    }

    .btn_save_notes {
        text-align: right;
        margin-top: 10px;
    }

    #cnt_notes_course {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    #cnt_course_ref .carousel-control-prev,
    #cnt_course_ref .carousel-control-next {
        display: none;
    }
    /*.cnt-courses-infor .card-img-top {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

    .cnt-courses-infor .card-img-top:hover {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }*/
    #carouselCourses .cnt-courses-infor .col-lg-3.col-md-6 .card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
        transition: all .3s cubic-bezier(.25,.8,.25,1);
    }

    #carouselCourses .cnt-courses-infor .col-lg-3.col-md-6 .card img.card-img-top {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #carouselCourses .cnt-courses-infor .col-lg-3.col-md-6 .card:hover img.card-img-top {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    #cnt_lst_course .card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
        transition: all .3s cubic-bezier(.25,.8,.25,1);
    }

    #cnt_lst_course .card img.card-img-top {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #cnt_lst_course .card:hover img.card-img-top {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    #carouselCourses .cnt-courses-infor .col-xl-3.col-lg-4.col-md-6 .card:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);
        transition: all .3s cubic-bezier(.25,.8,.25,1);
    }

    #carouselCourses .cnt-courses-infor .col-xl-3.col-lg-4.col-md-6 .card img.card-img-top {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    #carouselCourses .cnt-courses-infor .col-xl-3.col-lg-4.col-md-6 .card:hover img.card-img-top {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    @media (max-width:372px) {
        .view_sobai {
            display: none;
        }
    }

    @media (min-width:1200px) and (max-width:1400px) {
        .view_sobai {
            display: none;
        }
    }

    @media (min-width:992px) and (max-width:1016px) {
        .view_sobai {
            display: none;
        }
    }

    @media (min-width: 1680px) {
        .cnt-courses-infor .card-img-top {
            height: 200px;
        }

        .col-9.cnt-courses-infor .card-img-top {
            height: 220px;
        }

        .cnt-banner-course img {
            height: 274px;
        }
    }

    @media (max-width: 566.98px) {
        .content-detail-course .nav-pills .nav-item {
            margin-right: 5px;
            margin-bottom: 5px;
        }

        /*.content-detail-course .nav-pills .nav-link {
        padding: 0.5rem 0.5rem;
    }*/

        .cnt-banner-course .name-table-cell {
            font-size: 20px;
        }

        .cnt-banner-course img,
        .cnt-banner-course .name-table {
            height: 140px;
        }

        .course-name-title {
            font-size: 18px;
        }

        .cnt-action-button {
            padding-bottom: 20px;
            text-align: right;
        }

            .cnt-action-button .position-absolute {
                position: relative !important;
                top: unset !important;
                right: unset !important;
            }

        #pills-result .item-name {
            width: calc(100% - 80px);
        }

        #pills-result .item-score {
            width: 50%;
        }

        #pills-result .item-result {
            width: 50%;
        }

            #pills-result .item-result .detail-item .label:last-of-type {
                display: none;
            }

        .container-deatil-lesson {
            padding: 0px;
        }

        #cnt-view-document {
            min-height: unset !important;
        }
    }