.classUpcoming{
    background: #FFFFFF;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 16px 24px 24px;
    margin-top: 24px;
}
.classUpcoming__title{
    font-weight: 700;
    font-size: 24px;
    color: #000000;
    margin-bottom: 16px;
}
.content__right .lesson__infor {
    display: flex;
    align-items: center;
}
.content__right .lesson__infor .img__teacher{
    width: 56px;
    height: 75px;
    border-radius: 8px;
    margin-right: 12px;
}
.lesson__infor .lesson__infor__text .duration{
    font-weight: 500;
    font-size: 14px;
    color: #250A03;
}
.lesson__infor__text .duration span{
    font-weight: 700;
    font-size: 16px;
    color: #250A03;
}
.lesson__infor__text .teacher__name{
    font-weight: 300;
    font-size: 14px;
    color: #250A03;
    margin-top: 4px;
}
.lesson__infor__text .teacher__name span{
    font-weight: 600;
    font-size: 14px;
    color: #250A03;
}
.content__right .progress__slot{
    margin-top: 14px;
    width: 211px;
    height: 8px;
    position: relative;
    border-radius: 4px;
    background: #ff660936;
    margin-bottom: 6px;
}
.content__right .progress__slot span{
    position: absolute;
    left: 0;
    top: 0;
    background: #FF6609;
    border-radius: 4px;
    height: 8px;
    width: 30%;
}
.subject--math .content__right .progress__slot{
    background: #ff660936;
    overflow: hidden;
}
.subject--math .content__right .progress__slot span{
    background: #FF6609;
}
.subject--english .content__right .progress__slot{
    background: #0276e963;
    overflow: hidden;
}
.subject--english .content__right .progress__slot span{
    background: #0276E9;
}
.subject--literature .content__right .progress__slot{
    background: #ffa8044d;
    overflow: hidden;
}
.subject--literature .content__right .progress__slot span{
    background: #FFA804;
}

.subject--physics .content__right .progress__slot{
    background: #bab1f7;
    overflow: hidden;
}
.subject--physics .content__right .progress__slot span{
    background: #8E7CFF;
}

.subject--chemistry .content__right .progress__slot{
    background: #f7d49c;
    overflow: hidden;
}
.subject--chemistry .content__right .progress__slot span{
    background: #EFA024;
}

.subject--biology .content__right .progress__slot{
    background: #9dd397;
    overflow: hidden;
}
.subject--biology .content__right .progress__slot span{
    background: #3CA031;
}

.subject--khtn .content__right .progress__slot{
    background: #9badda;
    overflow: hidden;
}
.subject--khtn .content__right .progress__slot span{
    background: #7594E2;
}

.subject--dgnl_dhhn .content__right .progress__slot{
    background: #d9ece3;
    overflow: hidden;
}
.subject--dgnl_dhhn .content__right .progress__slot span{
    background: #008141;
}

.subject--dgnl_dhhcm .content__right .progress__slot{
    background: #dfe0e9;
    overflow: hidden;
}
.subject--dgnl_dhhcm .content__right .progress__slot span{
    background: #28306A;
}

.subject--dgtd_bkhn .content__right .progress__slot{
    background: #dee6f1;
    overflow: hidden;
}
.subject--dgtd_bkhn .content__right .progress__slot span{
    background: #23549D;
}

.content__right .class__slots{
    font-weight: 400;
    font-size: 12px;
    color: #250A03;
    position: relative;
}
.subject--math{
    background: rgba(255, 102, 9, 0.06);
}
.subject--english{
    background: #F6F9FD;
}
.subject--literature{
    background: #F6F9FD;
}
.subject--math .content__right .class__slots .number__{
    color: #FF6609;
    font-weight: 700;
}
.subject--english .content__right .class__slots .number__{
    color: #0276E9;
    font-weight: 700;
}
.subject--literature .content__right .class__slots .number__{
    color: #FFA804;
    font-weight: 700;
}
.subject--physics .content__right .class__slots .number__{
    color: #8E7CFF;
    font-weight: 700;
}
.subject--chemistry .content__right .class__slots .number__{
    color: #EFA024;
    font-weight: 700;
}
.subject--biology .content__right .class__slots .number__{
    color: #3CA031;
    font-weight: 700;
}

.subject--khtn .content__right .class__slots .number__{
    color: #7594E2;
    font-weight: 700;
}
.classUpcoming .subject_icon {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.classUpcoming__item{
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
}
.classUpcoming__item:last-child{
    margin-bottom: 0;
}
.classUpcoming__item--living{
    border: 1px dashed #FF0000;
}
.classUpcoming__item .img__left{
    margin-right: 24px;
    position: relative;
    cursor: default;
}
.classUpcoming__item .img__left:before{
    content: "";
    background: #f000;
    width: 100%;
    height: 100%;
    position: absolute;
}
.classUpcoming__item .img__left .content__center{
    position: relative;
}
.classUpcoming__item .img__left .content__center .img__bg {
    height: 316px;
    width: 517px;
}
.classUpcoming__item .img__left .content__center .img__content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.classUpcoming__item .img__left .content__center .img__content div{
    color:#fff;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
}
.classUpcoming__item .img__left .content__center .img__content .content__countdown{
    font-size: 24px;
    margin-top: 0;
    min-height: 34px;

}
.classUpcoming__item .img__left iframe{
    border-radius: 8px;
}
.classUpcoming__item .content__right{
    width: 438px;
    position: relative;
}
.classUpcoming__item .content__right .content__right__top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.classUpcoming__item .content__right .content__right__top .class__name{
    color:#fff;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 12px;
    display: inline-flex;
    border-radius: 24px;
    position: relative;
    text-decoration: none;
    align-items: center;
}
.classUpcoming__item .content__right .content__right__top .class__name:hover{
    box-shadow: 2px 2px 4px #0000006b;
}
.classUpcoming__item .content__right .content__right__top .class__name svg{
    position: relative;
    top: 1px;
}
.subject--math .content__right .content__right__top .class__name{
    background-color: #FF6609;
}
.subject--literature .content__right .content__right__top .class__name{
    background-color: #FFA804;
}
.subject--english .content__right .content__right__top .class__name{
    background-color: #0276E9;
}

.subject--physics .content__right .content__right__top .class__name{
    background-color: #8E7CFF;
}
.subject--chemistry .content__right .content__right__top .class__name{
    background-color: #EFA024;
}
.subject--biology .content__right .content__right__top .class__name{
    background-color: #3CA031;
}
.subject--khtn .content__right .content__right__top .class__name{
    background-color: #7594E2;
}

.subject--dgnl_dhhn .content__right .content__right__top .class__name{
    background-color: #008141;
}
.subject--dgnl_dhhcm .content__right .content__right__top .class__name{
    background-color: #28306A;
}
.subject--dgtd_bkhn .content__right .content__right__top .class__name{
    background-color: #23549D;
}

.subject--math .content__right .lesson__increase .lesson__increase--position{
    color : #FF6609;
}
.subject--literature .content__right .lesson__increase .lesson__increase--position{
    color : #FFA804;
}
.subject--english .content__right .lesson__increase .lesson__increase--position{
    color : #0276E9;
}

.subject--physics .content__right .lesson__increase .lesson__increase--position{
    color : #8E7CFF;
}
.subject--chemistry .content__right .lesson__increase .lesson__increase--position{
    color : #EFA024;
}
.subject--biology .content__right .lesson__increase .lesson__increase--position{
    color : #3CA031;
}



.subject--math .content__right .lesson__increase .lesson__increase--increase{
    border-color : #FF6609;
    color : #FF6609;
}
.subject--literature .content__right .lesson__increase .lesson__increase--increase{
    border-color : #FFA804;
    color : #FFA804;
}
.subject--english .content__right .lesson__increase .lesson__increase--increase{
    border-color : #0276E9;
    color : #0276E9;
}
.subject--physics .content__right .lesson__increase .lesson__increase--increase{
    border-color : #8E7CFF;
    color : #8E7CFF;
}
.subject--chemistry .content__right .lesson__increase .lesson__increase--increase{
    border-color : #EFA024;
    color : #EFA024;
}
.subject--biology .content__right .lesson__increase .lesson__increase--increase{
    border-color : #3CA031;
    color : #3CA031;
}

.subject--khtn .content__right .lesson__increase .lesson__increase--increase{
    border-color : #7594E2;
    color : #7594E2;
}

.content__right__top .duration__top{
    font-weight: 600;
    font-size: 13px;
    color: #FF0000;
    background: #FFEBEB;
    border-radius: 16px;
    padding: 4px 12px;
}

.classUpcoming__item .content__right .lesson__position{
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 4px;
}
.subject--math .content__right .lesson__position{
    color: #FF6609;
}
.subject--english .content__right .lesson__position{
    color: #0276E9;
}
.subject--literature .content__right .lesson__position{
    color: #FFA804;
}
.subject--physics .content__right .lesson__position{
    color: #8E7CFF;
}
.subject--chemistry .content__right .lesson__position{
    color: #EFA024;
}
.subject--biology .content__right .lesson__position{
    color: #3CA031;
}
.subject--khtn .content__right .lesson__position{
    color: #7594E2;
}
.content__right .lesson__name{
    font-weight: 700;
    font-size: 20px;
    color: #000000;
}
.content__right .join__lesson{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color:#fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: block;
    margin-top: 12px;
    background: #FF6609;
    border-radius: 4px;
    position: relative;
    text-decoration: none;
}
.content__right .join__lesson svg{
    position: relative;
    top: 1px;
}
.content__right .choice__schedule{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color:#0276E9;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: block;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #0276E9;
    border-radius: 4px;
    position: relative;
}
.content__right .choice__schedule:hover{
    filter: drop-shadow(0px 4px 10px #0276e95e);
}
.content__right .choice__schedule svg{
    position: relative;
    top: 1px;
}
.content__right .join__lesson:hover{
    filter: drop-shadow(0px 4px 10px #ff6609b8);
}
.content__right .imgs__student{
    position: absolute;
    right: 0;
    bottom: 0;
}
.content__right .imgs__student img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: -12px;
}
.content__right .imgs__student span{
    background: #FF6609;
    color:#fff;
    display: inline-block;
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    line-height: 32px;
    margin-left: -12px;
}
.subject--math .content__right .imgs__student span{
    background: #FF6609;
}
.subject--literature .content__right .imgs__student span{
    background: #FFA804;
} 
.subject--english .content__right .imgs__student span{
    background: #0276E9;
}

.content__right .lesson__increase{
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 16px;
}
.content__right .lesson__increase .lesson__increase--position{
    font-weight: 500;
    font-size: 14px;
}

.content__right .lesson__increase .lesson__increase--increase{
    font-weight: 600;
    font-size: 14px;
    border-radius: 16px;
    border : 1px solid;
    width: 104px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    display: inline-block;
    /* margin-left: 16px; */
    width: fit-content;
    padding-left: 8px;
    padding-right: 5px;
}

/* Giáo viên */
.teachers {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
}
.teachers .teacher_item {
    border-radius: 12px;
    background: #FFE9DB;
    background-color: #FFE9DB;
    width: 194px;
    height: max-content;
    text-align: center;
    padding: 8px 12px;
}
.teachers .teacher_item .teacher_avatar{
    width: 54px;
    height: 60px;
    border-radius: 9px;
    object-fit: fill;
}
.teachers .teacher_item .teacher_name{
    color: #595959;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    margin-top: 8px;
}

.classUpcoming__item .img__left div .youtube__error {
    width: 517px;
    height: 316px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: black;
    border-radius: 8px;
    text-align: center;
    color: white;
}
.classUpcoming__item .img__left div .youtube__error .youtube__error__content img {
    margin-bottom: 8px;
}
.classUpcoming__item .img__left .player_video {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
}

.content__right__top .cap__test {
    padding: 4px 12px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    border-radius: 24px;
    color: #FFFFFF;
    background: #FF1111;
    line-height: 20px;
}
.content__right__top .lesson__status {
    font-size: 14px;
}

.margin-0 {
    margin: 0px;
}

.class_label, .class__name {
    height: 28px;
}


@media screen and  (max-width: 1660px) {
    .classUpcoming__item .img__left{
        width: 52%;
    }
    .classUpcoming__item .img__left iframe{
        width: 100%;
    }
    .classUpcoming__item .img__left .content__center,
    .classUpcoming__item .img__left .content__center .img__bg{
        width: 100%;
        height: 291px;
    }
    .classUpcoming__item .img__left div .youtube__error {
        width: 100%;
    }
}