
.box-click-next {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-buy {cursor: pointer;border: 1px solid var(--main-color);color: var(--main-color);border-radius: 1000px;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 14px 16px;}
:not(.btn-check)+.btn-buy:active, .btn-buy:hover {border: 1px solid var(--main-color);color: var(--main-color);}

.card-title {
    height: 3.4rem;
    line-height: 1.7;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-break: break-word;
    color: black;
}
.box-list-tag .card-title {
    height: 3.3rem;
    line-height: 1.65;
}
.course-profile img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 20px;
    border-radius: 50% !important;
}
.images-course {height: 160px;position: relative;border-radius: 12px 12px 0 0;cursor: pointer;background-size: contain;background-repeat:no-repeat;background-position:center center;background-color: var(--main-color);}
.icon-share {
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    top: 15px;
    right: 10px;
    position: absolute;
    z-index: 5;
}
.icon-share img {   
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}
.course-view {color: var(--main-color);display: flex;align-items: center;justify-content: space-between;}
.course-profile .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.previous-price {text-decoration: line-through;color: #CCCCCC;}

.btn__box-buy .btn-buy {width: 100%;color: white;background: var(--main-color);box-shadow: 0px 4px 10px rgba(25, 1, 52, 0.16);border-radius: 13px;}
.btn__box-buy img {width: 18px;height: 18px;}
.price__box {height: 48px;}

#prevBtns {display: none;}
.next-slider {top: 0;
    right: 0;
    transform: translateY(65px)translateX(15px);
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: transparent;
    color: white;
    background: var(--main-color);
    padding: 0;
}
.live-start-text.txt-24 {font-size: 24px;}
.red-circle {font-size: 10px; color: #cccccc;}
.time-sub {color: #CCCCCC;font-size: 14px;}
.countdown-video {top: 0;text-align: center;align-content: center;}
.video-name {top: 0;}
.filter-countdown {top: 0;background-color: rgb(0 0 0 / 80%);padding: 1rem;}
.txt-54 {font-size: 54px;}
.time-live {font-size: 24px;}
.video-title {    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}
.time__box{
    height: 58px;
    align-content: center;
}
.live-show-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
}
.time__box .price__box ,.live-show .price__box ,.live-list .time__box {height: unset;}
.time-live{color: var(--main-color);}
.card-content-box .head-live ,.card-content-box .course-profile , .card-content-box .course-view ,.live-start-text {font-size: 14px;}
.head-live .red-circle {font-size: 8px;}



.live_list-box .course-view{flex-wrap: wrap;}
.live_list-box .total-date-box , .live_list-box .total-time-box , .live_list-box .date-time-box {flex: 1;}
.live_list-box .total-time-box {text-align: center;}
.live_list-box .date-time-box {text-align: end;}

.btn-check-course.active {
    background-color: #C3F3E2;
}
.btn-check-course {border: #75D8A9 solid;border-radius: 20px;background-color: #F0FBF8;padding: 10px 15px;color: black;}

@media (max-width: 1200px) {
    .live_list-box .course-view.mb-3 {margin-bottom: 0;}
    .live_list-box .date-time-box {flex-basis: 100%!important;text-align: center;}
    .live_list-box .total-time-box {text-align: end;}
}

@media (max-width: 768px) {
    .images-course {height: 120px;}
    .price__box .txt-32{font-size: 32px;}
    .user-view {display: block;}
    .content__course .lesson-view {margin-right: 10px;}
    .box-list-tag .card-title {height: 2.88rem;}
    .time-live {font-size: 24px;}
    .countdown-live.txt-24, .live-start-text.txt-24 ,.live-start.txt-24 {font-size: 20px;}
    .live-show-img {max-height: 320px;}
    .countdown-video .txt-24 {font-size: 20px;}
    .countdown-video .txt-54 {font-size: 32px;}
    .countdown-video .txt-12 {font-size: 9px;}
    .course_live-box .course-view ,.course-clone-box .course-view {font-size: 12px;}
    .time__box{
        height: 56px;
        margin-bottom: 0rem;
    }
}

@media (max-width: 575px) {
    .course_live-box .course-view {display: flex;justify-content: space-around;}
}

@media (max-width: 480px) {
    .price__box .txt-32 {font-size: 18px;}
    .price__box {height: 25px;}
    .content__course .lesson-view ,.content__course .course-profile .name ,.content__course .user-view ,.content__course .duration-view {font-size: 9px;}
    .content__course .course-profile img {width: 18px;}
    .content__course .images-course , .course_live-box .images-course{height: 100px;}
    .content__course .icon-share {width: 20px; height: 20px;}
    .content__course .icon-share img {width: 15px;height: 15px;}
    .content__course .card-content-box {padding: 10px;}
    .countdown-live.txt-24, .live-start-text.txt-24 , .time__box .price.txt-24 ,.live-start.txt-24 ,.time-live {font-size: 14px;}
    .time-sub ,.time__box .previous-price , .previous-price{font-size: 10px;}
    .live-list .course-view {display: grid;}
    .time__box {margin-bottom: 0;height: 48px;}
    .course_live-box .course-profile ,.live-start-text ,.course_live-box .course-view ,.head-live  {font-size: 10px;}
    .head-live .red-circle, .live-noti  .red-circle {font-size: 7px;}
    .course_live-box .card-title ,.course-clone-box .card-title ,.content__course .card-title {font-size: 14px;height: 3rem;}
    .course_live-box .course-profile img ,.course-clone-box .course-profile img {width: 12.5px;}
    .course_live-box .course-view ,.course-clone-box .course-view {font-size: 10px;}
    .course_live-box .card-content-box {padding: 10px;}
    .red-circle {font-size: 8px;}
    .user-view {display: block;}
    .btn__box-buy .btn-buy {font-size: 12px;}
    .live-show .images-course {height: 120px;}
    .live-show .live-noti ,.live-show .course-profile{font-size: 14px;}
    .live-show .course-profile img {width: 16px;}
    .live-show .course-view {font-size: 14px;}

    .live_list-box .price.txt-32 ,.box-list-tag .price.txt-32{font-size: 16px;}
    .live_list-box .red-circle {font-size: 6px;}
    .live_list-box .course-view  {display: flex; font-size: 8px;}
    .box-list-tag .live_list-box .card-title ,.box-list-tag .card-title.name  {font-size: 10px;height: 2rem;margin-bottom: .25rem !important;}
    .live_list-box .card .fa-clock  ,.live_list-box .card .total-time ,.live_list-box .card .previous-price , .live_list-box .check__live ,.box-list-tag .live_list-box .course-profile ,.box-list-tag .card-content-box .course-view ,.box-list-tag .card .previous-price ,.box-list-tag .card-content-box .course-profile{ font-size: 8px;}
    
}

@media (max-width: 420px) {
    .content__course .lesson-view ,.content__course .course-profile .name ,.content__course .user-view ,.content__course .duration-view {font-size: 8px;}
    .content__course .images-course ,.course_live-box .images-course{height: 90px;}
    .time-live ,.price__box .txt-32 {font-size: 16px;}
    .countdown-live.txt-24, .live-start-text.txt-24 , .time__box .price__box,.live-start.txt-24 {font-size: 16px;}
    .countdown-video .txt-24 {font-size: 16px;}
    .countdown-video .txt-54 {font-size: 25px;}
    .countdown-video .txt-12 {font-size: 8px;}

    .time-sub ,.time__box .previous-price {font-size: 8px;}
    .head-live ,.course_live-box .course-profile ,.live-start-text ,.course_live-box .course-view {font-size: 8px;}
    .head-live .red-circle {font-size: 7px;}
    .course_live-box .card-title ,.course-clone-box .card-title  ,.content__course .card-title{font-size: 10px;height: 2.1rem;}
    .course_live-box .course-profile img ,.course-clone-box .course-profile img {width: 14px;}
    .course_live-box .course-view ,.course-clone-box .course-view {font-size: 8px;}

}

@media (max-width: 360px) {
    .content__course .lesson-view ,.content__course .course-profile .name ,.content__course .user-view ,.content__course .duration-view {font-size: 10px;}
}