﻿/**
 * @Project VIDEO CLIPS AJAX 3.x
 * @Author PHAN TAN DUNG (phantandung92@gmail.com)
 * @Copyright (C) 2013 PHAN TAN DUNG. All rights reserved
 * @Createdate Dec 08, 2013, 09:57:59 PM
 */
 ul.video_other {
    height: 770px;
    overflow-y: scroll;
}

.video_other::-webkit-scrollbar {
    width: 10px;
}

.video_other::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #0B8E44; 
    border-radius: 10px;
}

.video_other::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #0B8E44; 
}

.register_detail_video a{
    color: #fff;
    background-color: red;
    border-color: red;
}
.nop_file_baitap {
    color: white;
}
.nop_file_baitap legend {color:white}
li.title_topic_item {
    margin-bottom: 10px;
}
ul.topic_all {
    padding-left: 0px;
    background: black;
    color: white;
    padding: 20px;
}
ul.topic_all a {
    color: white;
}
li.title_topic_item {
    margin-bottom: 10px;
    border: 1px solid white;
    padding: 10px;
}
li.title_topic_item:hover{
    border: 1px solid #ffb606 ;
}
li.item_videoother.daxem a {
    color: #6dbf13;
}
li.item_videoother.daxem {
    color: #6dbf13;
}
.course-single-item {
    width: 100%;
    min-height: 340px;
    position: relative;
    background: #fff;
    border: 1px solid #d8e9ff;
    box-sizing: border-box;
    box-shadow: 0 4px 12px #dde1ee;
    border-radius: 5px;
    margin: 15px auto;
    padding-bottom:10px;
    height: 400px;
    overflow: hidden;
}
.course-single-item2 {
    width: 100%;
    position: relative;
    background: #fff;
    border: 1px solid #d8e9ff;
    box-sizing: border-box;
    box-shadow: 0 4px 12px #dde1ee;
    border-radius: 5px;
    margin: 15px auto;
    padding-bottom:20px;
    overflow: hidden;
}
.info_detail ul, .info_detail ol {
    list-style: initial;
    padding-left: 15px;
}
.course-single-item .course-badge {
    display: inline;
}
.course-single-item .course-badge .badge {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    box-shadow: 0 0 1px 1px rgb(20 23 28 / 10%), 0 3px 1px 0 rgb(20 23 28 / 10%);
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
}
.badge.badge-red {
    background: red;
    color: #fff;
}
.course-box-wrapper {
    background: #fff;
    color: #29303b;
    display: block;
    font-size: small;
    position: relative;
    margin-bottom:10px;
}
.title_catalogy_listvideo {
    text-transform: uppercase;
    font-weight: 700;
    color: #5cb85c;
    font-size: 20px;
}
ul.video_other li {
    margin-top: 20px;
    border-bottom: 1px solid white;
    padding-bottom: 20px;
}
ul.video_other li a {
    color: white;
}
.row.content_video_detail {
    background: black;
    color: #000;
    margin-bottom: 20px;
}
ul.video_other {
    padding-left: 0px;
}
a.btn.btn-primary {
    background: #10c407;
    color: white;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #10c407;
}
.course-box-wrapper .img-wrapper {
    display: block;
    position: relative;
    width: 100%;
}
.course-box-wrapper .img-wrapper img {
    width: 100%;
    height: auto;
    overflow: hidden;
    opacity: 1;
    -webkit-filter: sepia(.1) grayscale(.1) saturate(.8);
    filter: sepia(.1) grayscale(.1) saturate(.8);
    display: block;
}
.course-box {
    display: block;
    padding: 15px 10px;
}
.course-box .course-box-author, .course-box .course-box-title {
    text-overflow: ellipsis;
    font-size: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}

.course-box .course-box-info {
    display: flex;
    justify-content: space-between;
}
.course-box .course-box-info .info-item {
    font-weight: 600;
    color: #7b7878;
    font-size: 14px!important;
}
.course-box .btn.product-type {
    outline: none;
}
.btn-group-sm>.btn, .btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
.btn-outline-success {
    color: #28a745;
    border-color: #28a745;
}
.author-box {
    padding: 15px 10px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}
.author-box .course-box-author {
    width: 55%;
    text-overflow: ellipsis;
    white-space: normal;
    min-height: 42px;
    font-size: 14px;
    color: var(--color-2nd);
    overflow: hidden;
    display: -webkit-box!important;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -ms-line-clamp: 2;
    -o-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    box-orient: vertical;
}
.author-box .course-box-users {
    display: flex;
}
.register_detail_video a {
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    padding: 5px 20px;
    margin-bottom: 20px;
}
.readvideo a {
    background: #5cb85c;
    color: white;
    padding: 5px 20px;
    margin-bottom: 20px;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.readvideo a:hover {
    background: #ffb606;
}

.readvideo {
    text-align: center;
}
span.img-wrapper {
    height: 165px;
    overflow: hidden;
}
.course-box .course-box-title {
    white-space: normal;
    font-weight: 400;
    min-height: 40px;
    color: var(--color-2nd);
    display: -webkit-box!important;
    -webkit-line-clamp: 3;
    -moz-line-clamp: 3;
    -ms-line-clamp: 3;
    -o-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    box-orient: vertical;
}

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.img_catalogy_video img {
    height: 100%;
    width: auto;
}
.img_catalogy_video {
    height: 200px;
    overflow:hidden;
}
.img_detail img {
    width: 90%;
}
.title_detail_video {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.price_detail_video {
    color: red;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}


.clipBreakLine{clear: both;}
#mesHide{position:absolute;left:50%;top:50%;display:none;z-index:-1;width:150px;border:1px #51A8FF solid;background:#C4E1FF;padding:6px;margin-left: -75px;margin-top: -30px;}
.marginbottom10{margin-bottom:10px}
.marginbottom15{margin-bottom:15px}

/* List video */
.otherClips{margin-left: -5px;margin-right: -5px;}
.otherClips .otherClipsContent{width:25%;float:left;margin-bottom:15px;padding-left: 5px;padding-right: 5px;}
.otherClips.cThree .otherClipsContent{width:33.3333333333333%;}
.otherClips.cTwo .otherClipsContent{width:50%;}
.otherClips.cOne .otherClipsContent{width:100%;}
.otherClips .ctn1{}
.otherClips .ctn2{}
.otherClips .ctn3{font-size: 0.85em;}
.otherClips .ctn3 img{width: 100%;}
.otherClips .vImg{position: relative;display: block;}
.otherClips .play{position:absolute;left:50%;top:50%;height:32px;width: 32px;background:transparent url(../images/video-clip/play.png) no-repeat center center;text-align:center;margin-left: -16px;margin-top: -16px;}
.otherClips .vtitle{font-weight: 700;line-height: 16px;margin-top: 5px;max-height: 32px;overflow: hidden;}
.otherClips .vtitle a{text-decoration:none}
.otherClips .viewHits{color:#666}
.otherClips .viewHits span{font-weight:700}
.otherClips .generate_page{text-align:center;border:1px #d6d6d6 solid;padding:1px;background:#fff;margin-top:15px}
.otherClips .generate_page .ctn3{background:#f1f1f1;padding:4px;}
.detailContent{position:relative}
.detailContent .videoplayer{background:#3f3f3f;position:relative}
.detailContent .videoplayer .cont{background:#000 url(../images/video-clip/wait.gif) no-repeat center center;position:absolute;left: 0;top: 0;width: 100%;height: 100%;}
.detailContent .videoTitle{margin-bottom:10px}

/* Detail video */
.videoInfo{background:#fff;position:relative;border:1px #d6d6d6 solid;padding:1px}
.videoInfo .cont{background:#f1f1f1;position:relative;padding:2px}
.videoInfo .cont .cont2{height:56px;font-size: 0.75em;}
.videoInfo .cont .fCont{position:relative}
.videoInfo .cont .fl{position:absolute;top:4px;left:4px}
.videoInfo .cont .fr{position:absolute;top:4px;right:4px;text-align:right}
.videoInfo .shareFeelings{margin-bottom:8px;height:12px}
.videoInfo a.likeButton{display:inline-block;background:#E1E1E1;border:1px #d6d6d6 solid;padding:5px 10px;text-decoration:none;color:#5B5B5B;margin-right:2px;}
.videoInfo a.likeButton img.likehit{background:transparent url(../images/video-clip/like.png) no-repeat left top;width:15px;height:14px;margin-right:4px}
.videoInfo a.likeButton img.unlikehit{background:transparent url(../images/video-clip/like.png) no-repeat left -14px;width:15px;height:14px;margin-right:4px;vertical-align:middle}
.videoInfo a.likeButton img.broken{background:transparent url(../images/video-clip/like.png) no-repeat left -28px;width:15px;height:14px;margin-right:4px;vertical-align:middle}
.videoInfo a.likeButton:hover{background:#f3f3f3;text-decoration:none}
.videoInfo div.viewcount{position:relative;color:#5B5B5B;text-align:right;margin-bottom:8px}
.videoInfo div.viewcount span{font-weight:700}
.videoInfo div.image{width:220px;position:relative;text-align:left;margin-bottom:2px;height:3px;line-height:3px}
.videoInfo div.image0{background:#ccc}
.videoInfo div.imageunlike{background:#4491b2}
.videoInfo div.image img.like{height:3px;background:#ed3056;position: relative;top:-1px}
.videoInfo div.likeDetail{width:220px;color:#5B5B5B;position:relative}
.videoInfo .likeLeft{float:left}
.videoInfo .likeRight{float:right}
.videoInfo .strong{font-weight:700}
.videoInfo .hometext{position:relative;padding:6px;color:black}
.videoInfo .bodytext{position:relative;margin-top:10px;color:black}
.videoInfo div.bodybutton{position:relative;margin-top:10px;text-align:center;font-size: 0.75em;}
.videoInfo a.bodybutton{display:inline-block;background:#E1E1E1;border:1px #d6d6d6 solid;padding:3px;text-decoration:none;color:#5B5B5B}
.videoInfo .hide{display:none}
#videoCont_wrapper{margin: 0 auto;}

@media (max-width: 569px){
    #likeDetailWrap{display:none;}
    .videoInfo div.viewcount{padding-top: 30px;}
}
@media (max-width: 400px){
    #likeDetailWrap{display:none;}
    .videoInfo div.viewcount{padding-top: 0;}
}
@media (max-width: 350px){
    .videoInfo a.likeButton span{display:none}
}

/* Main */
.videoMain{position: relative;}
.videoMain .toggleNav{display: none;background: #E1E1E1;border: 1px #d6d6d6 solid;padding: 5px 10px;text-decoration: none;color: #5B5B5B;margin-bottom: 10px;}
.videoMain .col1{width:170px;float:left}
.videoMain .col2{padding-left:180px;}
.videoMain.mobile .toggleNav{display: block;}
.videoMain.mobile .col1{width:100%;display: none;position: absolute;z-index: 10;top: 30px;left: 0;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0, 0.175);}
.videoMain.mobile .col1.open{display: block;}
.videoMain.mobile .col2{padding-left:0;}
.videoMain .col1 .topicList{display:block;padding:5px 0;border-bottom:1px #dadada dotted;text-indent:10px}
.videoMain .col1 .topicList.current{background:url('../images/video-clip/current.png') no-repeat right center;color:#fff}
.videoMain.mobile .col1 .topicList.current{background-image:none;color:inherit;font-weight: 700;}
.videoMain .col1 .topicList.sub{padding-left:10px}
.videoMain .col1 .topicList.sub.current{background-image:none;color:inherit;font-weight:bold}
.videoMain .col1 .col1-sub{display:none}

/* Block, list video */
.video-clip-block{border-bottom:1px #dadada dashed;padding-bottom:10px;margin-bottom:10px}
.video-clip-block img{float:left;margin-right:10px}
.video-clip-block a{font-weight:bold}

/* Block zing style */
.zing-clip-big{position:relative}
.zing-clip-big a.img{width: 100%;display: block;}
.zing-clip-big a.img img{width:100%;}
.zing-clip-big p.icon{margin-bottom: 0;;position:absolute;bottom:10px;left:10px;display:block;background: rgba(0, 0, 0, 0.4) url(../images/video-clip/Zicons.png) 10px -1409px !important;border: 1px solid rgba(247, 247, 247, 0.41);border-radius: 3px;width: 35px;height: 35px;}
.zing-clip-big-h1{font-size:12px;line-height:18px;padding:5px;margin:0 0 10px 0;background:#0098D3}
.zing-clip-big-h1 a{display:block;color:#fff;font-weight:bold}
.zing-clip-big-h1 a:hover{text-decoration:underline}
.zing-clip-small{margin-bottom:10px;position:relative}
.zing-clip-small .img{display:block;width:100%;height:80px;overflow:hidden}
.zing-clip-small .img img{width:100%;min-height:80px}
.zing-clip-small p.icon{display: block;position: absolute;top: 28px;left: 50%;background: rgba(0, 0, 0, 0.4) url(../images/video-clip/Zicons.png) 10px -1409px !important;border: 1px solid rgba(247, 247, 247, 0.41);border-radius: 3px;width: 35px;height: 35px;margin: 0 0 0 -18px;}
.zing-clip-small h1{font-size:12px;line-height:18px;padding:5px;margin:0;background:#0098D3;height:43px;overflow:hidden}
.zing-clip-small h1 a{display:block;color:#fff;font-weight:bold}
.zing-clip-small h1 a:hover{text-decoration:underline}

/* Block video box */
.vd-blbox{margin-bottom: 10px;border: 1px #dadada solid;border-radius: 5px;}
.vd-blbox .vheader{border-bottom: 1px #dadada solid;background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );}
.vd-blbox .vheader .pri{display: inline-block;padding: 10px;border-radius: 5px 5px 0 0;border: 1px #dadada solid;background: #fff;margin: 5px 10px -1px 5px;border-bottom-color: #fff;}
.vd-blbox .vheader .oth{margin-right: 10px;}
.vd-blbox .vcontent{padding: 10px;}
.vd-blbox .vcontent .img{position: relative;}
.vd-blbox .vcontent .fvd{margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px #dadada solid;}
.vd-blbox .vcontent .fvd .img{width: 230px;margin-right: 10px;float: left;height: 150px;overflow: hidden;}
.vd-blbox .vcontent .fvd .img a{position: absolute;width: 230px;height: 150px;top: 0;left: 0;background: url(../images/video-clip/play.png) no-repeat 10px 10px;}
.vd-blbox .vcontent .fvd .img img{min-height: 150px;}
.vd-blbox .vcontent .fvd h3{margin: 0;margin-bottom: 5px;}
.vd-blbox .vcontent .lvd{margin-left: -5px;margin-right: -5px;}
.vd-blbox .vcontent .lvd .it{float: left;width: 20%;padding-left: 5px;padding-right: 5px;}
.vd-blbox .vcontent .lvd .it .ct h3{font: inherit;width: 100%;}
.vd-blbox .vcontent .lvd .img{width: 100%;height: 90px;overflow: hidden;margin-bottom: 7px;}
.vd-blbox .vcontent .lvd .img a{position: absolute;width: 100%;height: 90px;top: 0;left: 0;background: url(../images/video-clip/play-small.png) no-repeat 10px 10px;}
.vd-blbox .vcontent .lvd .img img{min-height: 90px;width: 100%;}
.img_detail img {
    width: 100%;
    height: auto;
}
ul.loopvideo li {
    background: #398439;
    color: white;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
}
ul.loopvideo {
    padding-left: 0px;
}
li.item_videoother i {
    background: #ccc;
    padding: 10px;
    color: white;
    border-radius: 5px;
}

li.item_videoother.daxem i {
    background: #6dbf13;
}
li.loopvideo_item a {
    color: white;
}
li.loopvideo_item ul {
    display: none;
}
.thanhhoanthanh {
    background: #5cb85c;
    height: 20px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    color: white;
}
.thanhhoanthanh_full {
    height: 20px;
    background: #ccc;
}
.hoanthanhvideo {
    position: relative;
    margin-bottom: 20px;
}
.thongtinthanhtoan {
    color: red;
    font-size: 20px;
}
.bold_thanhtoan{font-weight:bold;}

span.price_goc {
    color: #716F6F;
    text-decoration: line-through;
    font-weight: 500;
}
.price_detail_video > .gia_goc_detail{
    font-size: 22px;
}

.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{

    background-color: #5cb85c;
    border-color: #5cb85c;
}
.btn-primary {
    color: #fff;
    background-color: red;
    border-color: red;
}
.btn-primary:hover {
    color: #fff;
    background-color: #e11515;
    border-color: #e11515;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: #e11515;
    border-color: #e11515;
}

.panel-body.register {
    color: #fff;
}
