﻿.content-courses-list{margin-bottom: 40px;}
.main-student h1 {
    margin-top: 20px;
    margin-bottom: 20px;
}
figure {
    margin: 0 0 1rem;
}

.igi_cat__item {
    margin-bottom: 30px;
}

.igi_cat__inner {
    position: relative;
}

.igi_cat__image, .igi_pj__image {
    overflow: hidden;
    margin-bottom: 0px;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.igi_cat__image .sale {
    background: red;
    font-size: 12px;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: 5px;
}

.igi_cat__image img, .igi_pj__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 300ms ease-in-out 0ms;
}

.igi_cat__image:hover img, .igi_pj__image:hover img {
    transform: scale(1.1);
}

.igi_cat__image, .igi_pj__image {
    overflow: hidden;
    margin-bottom: 0px;
    position: relative;
    border-radius: 5px 5px 0 0;
    aspect-ratio: 1.5/1;
}

.igi_cat__image .sale {
    background: red;
    font-size: 12px;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    position: absolute;
    top: 5px;
    left: 5px;
}
.igi_cat__content {
    background: #eee;
    padding: 14px;
    border-radius: 0 0 5px 5px;
    margin-bottom: 25px;
}

.igi_cat__except {
    display: flex;
}
.igi_cat__except .igi_text {
    margin-bottom: 0;
    display: -webkit-box !important;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222222;
    text-decoration: none;
    font-size: 15px;
    min-height: 44px;
}
.author.flex {
    padding: 7px 0;
}
.author_name {
    color: #666;
    font-size: 12px;
}
.prices {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prices {
    text-align: left;
}
.prices del {
    font-size: 12px;
    color: #666;
    font-weight:400;
}
.prices .price_new {
    color: red;
    font-weight:600;
}
.home-courses .list-cat,
.home-product .list-cat{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}
.home-courses .list-cat li,
.home-product .list-cat li{

}
.home-courses .list-cat li a,
.home-product .list-cat li a{
    padding: 8px 10px;
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-radius: 15px;
}
.home-courses .list-cat li a{background: #81cf01;}
.home-product .list-cat li a{background: #ff9600;}
.home-product{
    padding: 20px;
    background: #eeeeee82;
    border-radius: 10px;
    margin-top: 30px;
}

.home-courses{
    padding: 20px;
    background: #eeeeee82;
    border-radius: 10px;
    margin-top: 30px;
}

.home-courses .captionkh, .home-product .captionkh{
    margin-top: 0 !important;
    font-size: 16px;
    margin-bottom: 15px !important;
}

.product-item .igi_pj__inner {
    padding: 10px;
    background: #f6f6f6;
    position: relative;
    border-radius: 5px;
}
.product-item .igi_pj__image {
    overflow: hidden;
    margin-bottom: 0px;
    position: relative;
    border-radius: 0;
    aspect-ratio: 1/1;
    background: #fff;
}
.product-item .igi_pj__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 300ms ease-in-out 0ms;
}
.product-item .igi_pj__title {
    display: -webkit-box !important;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 12px;
    margin-bottom: 6px;
    line-height: 18px;
    min-height: 38px;
    font-size: 14px;
}
.product-item .prices {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-item .sale {
    background: red;
    font-size: 10px;
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
}
.product-item .price_new {
    color: red;
    font-weight:600;
    font-size: 13px;
}
.product-item del {
    font-size: 12px;
    color: #666;
    margin-right: 5px;
}
.product-item .order_produts a {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 0px;
    color: #fff;
    transition: all .5s ease;
}

.product-item .igi_pj__inner:hover .readmove,
.product-item .igi_pj__inner:hover .add_to_cart {
    transform: translateY(0px);
    opacity: 1;
}
.product-list-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}

.W3NPager {
    margin: 20px 0;
    text-align: center
}

.W3NPager:after {
    content: "";
    clear: both;
    display: block;
    overflow: hidden
}

.W3NPager li {
    list-style: none;
    display: inline-block
}

.W3NPager li a {
    background-color: #eee;
    border: none;
    padding: 7px 14px;
    text-align: center;
    display: block;
    margin-right: 5px;
    border-radius: 5px;
    font-size: 14px;
    color: #333
}

.W3NPager li:last-of-type a {
    margin-right: 0;
    border-radius: 0
}

.W3NPager li:first-of-type a {
    border-radius: 0;
    margin-left: 0
}

.W3NPager li.active a,
.W3NPager li:hover a {
    background: #81cf01;
    color: #fff
}

.W3NPager li.hidden {
    opacity: .5
}

.W3NPager li.hidden a {
    cursor: not-allowed;
    background: #eee!important
}

.W3NPager li.hidden a:hover {
    background-color: #fff;
    color: #e9ab3f
}

.product-item .readmove {
    background: #00BFA5;
    border-radius: 5px;
}

.product-item .order_produts .add_to_cart {
    margin-right: 0;
}
.product-item .order_produts .add_to_cart {
    background: #F15C22;
    border-radius: 5px;
}

.count_cart{
    color: #fff;
    background: #e59b2c;
    padding: 1px 4px;
    border-radius: 5px;
    font-size: 13px;
}

@media screen and (min-width: 768px){
    .count_cart{
        color: #fff;
        background: #e59b2c;
        padding: 1px 4px;
        border-radius: 5px;
        font-size: 13px;
        position: absolute;
        right: 7px;
        font-weight: 400;
        display: block;
        top: 5px;
    }

    .product-item .order_produts {
        width: 100%;
        text-align: center;
        padding: 0;
        margin-top: 20px;
    }
    .product-item .readmove {
        background: #00BFA5;
        border-radius: 5px;
    }
    .product-item .order_produts .add_to_cart {
        margin-top: 5px;
    }

    .mobile_header {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        border-bottom: 2px solid #81cf0159;
        background: #81cf01;
    }
    #mySidenav{}

    .sidenav a.menu-toggle {
        line-height: 19px;
        cursor: pointer;
        height: auto;
        display: block;
        background: none;
        color: #333 !important;
        margin-bottom: 0;
        padding: 0;
    }

    #mySidenav .menu-toggle .span_menu{font-weight: 600;color: #fff;font-size: 11px;}
    #mySidenav .menu-toggle .ba_gach{}
    #mySidenav .menu-toggle .ba_gach span{
        width: 30px;
        height: 3px;
        display: block;
        background: #fff;
        margin-bottom: 4px;
    }
    .mobile_header .logo_mobile{display: none !important;}
}

@media screen and (max-width: 767px){
    .home-courses .list-cat, .home-product .list-cat{
        grid-template-columns: 1fr 1fr;
    }
    .product-list-row{
        grid-template-columns: 1fr 1fr;
    }
    .product-item .prices{
        height: 38px;
        margin-bottom: 10px;
    }
    .product-item .order_produts a {
        display: block;
        text-align: center;
        width: 100%;
        opacity: 1 !important;
        margin-top: 5px;
        font-size: 11px;
    }

    .sidenav .avatar{display: none !important;}
    .mobile_users {display: flex !important;justify-content: space-between;padding: 15px 0;}
    .mobile_users a{padding:0;display: block;color: #81cf01 !important;font-weight: 600;font-size: 15px;cursor: pointer;background: none !important;}
    .mobile_users a:hover{
        color: #81cf01 !important;
    }
    .mobile_users a i{
        margin-right: 5px;
        display: inline-block;
        padding: 5px;
        text-align: center;
        border-radius: 50%;
        border: 2px solid #81cf01 !important;
        width: 27px;
        height: 27px;
        color: #81cf01 !important;
        font-size: 13px;
    }
    
    .div-baihoc{
        background: #f7f7f7 !important;
        padding: 5px;
    }
    .sidenav ul li a{background: #fff;}

    .mobile_header .logo_mobile{display: block !important;}
    .mobile_header .logo_mobile{margin: 0;padding: 0;}
    .mobile_header .logo_mobile img{
        width: 230px;
        height: auto;
    }

    .mobile_header {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 2px solid #95959559;
    }

    #mySidenav{background: #fff;}

    .sidenav a.menu-toggle {
        line-height: 26px;
        cursor: pointer;
        height: auto;
        display: block;
        background: none;
        color: #333 !important;
        margin-bottom: 0;
        padding: 0;
    }

    #mySidenav .menu-toggle .span_menu{font-weight: 600;color: #333333f0;font-size: 14px;}
    #mySidenav .menu-toggle .ba_gach{}
    #mySidenav .menu-toggle .ba_gach span{
        width: 40px;
        height: 3px;
        display: block;
        background: #333;
        margin-bottom: 5px;
    }
    /*.mobile_header .logo_mobile{display: none !important;}*/
    .icon_lacay{display: none !important;}

    .sub-detail-content table{width: 100% !important; max-width: 100% !important;}
}
