@font-face {
    font-family: 'googlesans';
    src: url('../fonts/googlesans/GoogleSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'googlesans';
    font-weight: 600;
    src: url('../fonts/googlesans/GoogleSans-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'googlesans';
    font-weight: 700;
    src: url('../fonts/googlesans/GoogleSans-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'googlesans';
    font-weight: bold;
    src: url('../fonts/googlesans/GoogleSans-Bold.ttf') format('truetype');
    font-display: swap;
}

html, body {
    color: #222222;
    font-family: 'googlesans';
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}


a {
    color: #222222;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: none;
    color: red;
    outline: none;
    -webkit-transition: all 100ms ease 0s;
    -o-transition: all 100ms ease 0s;
    transition: all 100ms ease 0s;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.progress {
    background: linear-gradient(to right,rgba(213,181,120,0.5) var(--scroll),transparent 0);
    position: fixed;
    width: 100%;
    height: 4px;
    z-index: 101;
    display: none;
}


#ShowAlert {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999999999;
}

.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: #fff !important;
    opacity: 1;
}

.alert-danger {
    border-color: #e77755;
    color: #fff;
    font-size: 14px;
    background: red;
}

.alert-success {
    border-color: green;
    color: #fff;
    font-size: 14px;
    background: green;
}


#loader-giangtv {
    position: fixed;
    z-index: 9999999;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto auto;
    background: rgba(0,0,0,.4);
}

#loader-giangtv .loader-giangtv-relative {
    position: relative;
    width: 100%;
    height: 100%;
}

.bubblingG {
    text-align: center;
    width: 66px;
    height: 41px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto auto;
}

    .bubblingG span {
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 8px;
        margin: 21px auto;
        background: #02c5de;
        border-radius: 41px;
        -webkit-border-radius: 41px;
        -moz-border-radius: 41px;
        animation: bubblingG 1.035s infinite alternate;
        -o-animation: bubblingG 1.035s infinite alternate;
        -webkit-animation: bubblingG 1.035s infinite alternate;
        -moz-animation: bubblingG 1.035s infinite alternate;
    }

#bubblingG_1 {
    animation-delay: 0s;
    -o-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
}

#bubblingG_2 {
    animation-delay: .3095s;
    -o-animation-delay: .3095s;
    -webkit-animation-delay: .3095s;
    -moz-animation-delay: .3095s;
}

#bubblingG_3 {
    animation-delay: 619ms;
    -o-animation-delay: 619ms;
    -webkit-animation-delay: 619ms;
    -moz-animation-delay: 619ms;
}

.lds-dual-ring {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: auto auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bubblingG {
    0% {
        width: 8px;
        height: 8px;
        background-color: #02c5de;
        transform: translateY(0);
    }

    100% {
        width: 20px;
        height: 20px;
        background-color: #fff;
        transform: translateY(-17px);
    }
}

@-o-keyframes bubblingG {
    0% {
        width: 8px;
        height: 8px;
        background-color: #02c5de;
        -o-transform: translateY(0);
    }

    100% {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -o-transform: translateY(-17px);
    }
}

@-ms-keyframes bubblingG {
    0% {
        width: 8px;
        height: 8px;
        background-color: #02c5de;
        -ms-transform: translateY(0);
    }

    100% {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -ms-transform: translateY(-17px);
    }
}

@-webkit-keyframes bubblingG {
    0% {
        width: 8px;
        height: 8px;
        background-color: #02c5de;
        -webkit-transform: translateY(0);
    }

    100% {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -webkit-transform: translateY(-17px);
    }
}

@-moz-keyframes bubblingG {
    0% {
        width: 8px;
        height: 8px;
        background-color: #02c5de;
        -moz-transform: translateY(0);
    }

    100% {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -moz-transform: translateY(-17px);
    }
}

@keyframes cssload-fold-thecube {
    0%,10% {
        transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }

    25%,75% {
        transform: perspective(136px) rotateX(0);
        opacity: 1;
    }

    100%,90% {
        transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-o-keyframes cssload-fold-thecube {
    0%,10% {
        -o-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }

    25%,75% {
        -o-transform: perspective(136px) rotateX(0);
        opacity: 1;
    }

    100%,90% {
        -o-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-ms-keyframes cssload-fold-thecube {
    0%,10% {
        -ms-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }

    25%,75% {
        -ms-transform: perspective(136px) rotateX(0);
        opacity: 1;
    }

    100%,90% {
        -ms-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-fold-thecube {
    0%,10% {
        -webkit-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }

    25%,75% {
        -webkit-transform: perspective(136px) rotateX(0);
        opacity: 1;
    }

    100%,90% {
        -webkit-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

@-moz-keyframes cssload-fold-thecube {
    0%,10% {
        -moz-transform: perspective(136px) rotateX(-180deg);
        opacity: 0;
    }

    25%,75% {
        -moz-transform: perspective(136px) rotateX(0);
        opacity: 1;
    }

    100%,90% {
        -moz-transform: perspective(136px) rotateY(180deg);
        opacity: 0;
    }
}

.hidden{display: none;}
.container-full {
    max-width: 100%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

header.header {
    height: 30px;
    background: #ffe12b;
    display: none;
}

.sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #f7f7f7;
    overflow-x: hidden;
    padding-top: 0;
}

div#mySidenav-lesson a:not(.menu-toggle) i {
    margin-right: 10px;
    display: inline-block;
    margin-top: 5px;
}

/* Page content */
.main-student {
    margin-left: 250px;
    transition: margin-left .5s;
}

    .main-student h1 {
        font-size: 18px;
        text-transform: uppercase;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .main-student .content {
        font-size: 14px;
        line-height: 24px;
    }

        .main-student .content h2 {
            font-size: 17px;
        }

        .main-student .content h3 {
            font-size: 16px;
        }

        .main-student .content h4 {
            font-size: 15px;
        }

        .main-student .content h5 {
            font-size: 14px;
        }
/* The navigation menu links */
.sidenav a {
    padding: 6px 10px;
    text-decoration: none;
    font-size: 15px;
    color: #333 !important;
    display: block;
    transition: 0.3s;
    background: #fff9;
    margin-bottom: 6px;
    position: relative;
    display:block;
    text-transform: uppercase;
}

.div-baihoc > ul > li > ul > li > a{padding-left:20px;}
.div-baihoc > ul > li > ul > li > ul > li > a{padding-left:30px;}

span.name-lession {
    display: inline-block;
    height: 100%;
    width: 85%;
}

span.icon-play {
    display: inline-block;
    height: 100%;
    float: left;
}

.sidenav a i {
    width: 10px;
    margin-right: 9px;
}
.sidenav a .fa-angle-double-right{margin-right:0px;}
.fa-igi-right{position:absolute;right:0;font-weight: 400;width: 26px !important;display: block;text-align: center;top: 5px;height: 26px;line-height: 26px;margin: 0 !important;}

.sidenav a:hover, .sidenav a.active ,.sidenav li.active > a {
    background: #81cf01;
    color: #fff !important;
}
.sidenav .avatar:hover{
    background:#fff !important;
}

.sidenav a.menu-toggle {
    height: 50px;
    padding-bottom: 0;
    margin-bottom: 10px;
    padding-top: 0;
    line-height: 50px;
    background: #81cf01;
    color: #fff !important;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.menu-student {
    width: 100%;
    float: left;
    height: 50px;
    background: #00c4ff;
}

.navbar {
    background: #00adff;
    border-radius: 0;
    display: block;
    padding: 5px 1.5rem;
    min-height: 50px;
}

nav.navbar.navbar-light.bg-light .navbar-brand {
    margin-right: 0px;
    max-width: 20%;
    float: left;
}

nav.navbar.navbar-light.bg-light .logo-lesson-head img {
    height: 40px;
    /* width: 100%; */
    object-fit: contain;
}

.item-course {
    width: 100%;
    float: left;
    background: #f3f3f3;
    border-radius: 10px;
}

    .item-course .image img {
        width: 100%;
        float: left;
        background: #f3f3f3;
        border-radius: 10px;
    }

    .item-course .content {
        width: 100%;
        float: left;
        margin-top: 10px;
        padding: 10px;
    }

        .item-course .content .title {
            text-align: center;
            font-size: 14px;
            color: #0497ff;
        }

        .item-course .content .description {
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 16px;
            color: #333;
        }

        .item-course .content .teacher {
            margin-bottom: 10px;
            font-size: 12px;
            color: #9e9e9e;
        }

.detail-lesson-video-head {
    width: 80%;
    display: inline-block;
    padding: 0px 20px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
    -webkit-line-clamp: 1;
    height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding-left: 30px;
}

.detail-lesson-video-content {
    padding: 20px 0;
}

.detail-lesson-video-content-video {
    width: 100%;
}

.sidenav .avatar {
    text-align: center;
    background: none !important;
}

.sidenav .avatar img {
    width: auto;
    height: 50px;
    max-width: 100%;
    object-fit: cover;
}

.navbar-brand i.fa.fa-caret-right {
    color: #d53328;
    padding-right: 5px;
    font-size: 25px;
    position: absolute;
    margin-top: 7px;
    padding-left: 10px;
}



.list-lesson-content-tab .content {
    display: none;
    transition: 0.4s;
    margin-bottom: 30px;
}

    .list-lesson-content-tab .content.active {
        display: block;
        transition: 0.4s;
    }

.list-lesson-tab-head .tabs {
    list-style-type: none;
    padding: 15px 0px;
    overflow: hidden;
    margin: 0px;
    border-top: 0.5px solid #dad4d4;
    border-bottom: 0.5px solid #dad4d4;
    margin-top: 20px;
}

    .list-lesson-tab-head .tabs li {
        float: left;
        margin-right: 45px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.4s;
    }

        .list-lesson-tab-head .tabs li:after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #000;
            transition: width .3s;
        }

        .list-lesson-tab-head .tabs li.active:after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #000;
            transition: width .3s;
            width: 100%;
        }

        .list-lesson-tab-head .tabs li:hover:after {
            width: 100%;
        }


.list-lesson-content-tab .infomation-teacher-img img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.list-lesson-content-tab .infomation-teacher-name {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 1px;
}

.list-lesson-tab {
    padding: 0px 1.5rem;
}

.list-lesson-content-tab .infomation-teacher-img {
    margin-right: 20px;
}

.lession-detail-head {
    font-weight: 500;
    color: #d53328;
    font-size: 17px;
    margin-bottom: 10px;
}

.infomation-teacher {
    margin: 10px 0;
}

.yt-cover{
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left:0;
  z-index:1000;
}

.detail-lesson-video-content{position:relative;}
.detail-lesson-video-content .videocontent {
    width:100%;
    max-width: 1000px;
    margin: 0 auto;
    height:600px;
}

.shortcut-wrapper {
    width:33.33% !important;
    text-align: center;
    float: left;
    border-right: 1px solid #fff;
    height: 100%;
}
.shortcut-wrapper:last-child{border-right:0;}

.pdp-mod-cart-concern {
    left: 0px;
    bottom: 0;
    width: 100%;
    text-align: center;
    z-index: 999999999;
    background: red;
    position: fixed;
}

.shortcut-item {
    text-align: center;
    display: block;
    width: 100%;
    height: 57px;
    text-decoration: none !important;
}

.shortcut-item-icon { padding-top: 10px;}

.shortcut-item-text {
    width: 100%;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}
.shortcut-item-icon i{color:#fff;font-size:20px;}
.space-height-footer{width:100%;float:left;height: 58px !important;}
.sidenav .mobilehome {
    display: none;
    float: right;
    line-height: 35px;
}
.caption-title{
    text-align: center;
    font-size: 20px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    font-weight: 600;
}
.disabled{display: none;}
.captionkh{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}

.no-result{
    font-style: italic;
    font-size: 14px;
    text-align: left;
}

.icon_lacay{
    background: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    margin-top: 2px;
}
.icon_lacay img{height: 35px;width: auto;}
.default_desc{margin-top: 30px !important;margin-bottom: 0 !important;}

.news-list .item figure img{width: 100%;}
.news-list .item{display: flex;margin-bottom: 20px;padding: 10px;background: #eee;border-radius: 5px;}
.news-list .item figure{
    width: 200px;
    margin-right: 15px;
    margin-bottom: 0;
}
.news-list .item .content{
    width: calc(100% - 215px);
}
.news-list .item .title{
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 5px;
    display: block;
}
.news-list .item .short-desc{
    font-size:15px;
    line-height:25px;
    display: -webkit-box!important;
    max-width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-news.home-product .list-cat li a{
    background: #0095cd;
}

@media screen and (max-width:767px){
    .detail-lesson-video-content .videocontent {
        height: 400px !important;
    }
    .sidenav .mobilehome {
        display: block;
        line-height: 50px;
    }

    .news-list .item figure{
        width: 100%;
        margin-right: 10px;
        margin-bottom: 0;
    }
    .news-list .item .content{
        width: 100%;
    }

    .news-list .item .short-desc{display: none !important;}
}
@media screen and (max-width:500px){
    .detail-lesson-video-content .videocontent {
        height: 350px !important;
    }
    .sidenav .mobilehome {
        display: block;
    }
}
@media screen and (max-width:400px){
    .detail-lesson-video-content .videocontent {
        height:300px;
    }
    .sidenav .mobilehome {
        display: block;
    }
}
@media screen and (max-width:350px){
    .detail-lesson-video-content .videocontent {
        height:300px;
    }
    .sidenav .mobilehome {
        display: block;
    }
}