.video-page{display: block; width:100%; float:left; position:relative; padding-bottom:50px;}
.video-page .left-video{width:290px; float:left; position:relative;}
.video-page .right-video{width:calc(100% - 290px); float:right; position:relative; padding-left:30px;}

.video-page .left-video .wrap-author{width:290px;  position:relative; box-shadow:0 0 0 1px var(--color-border); float:left; border-radius:7px; padding-bottom:20px;}
.video-page .left-video .wrap-author .live-title{background:#ec1f26; border-radius:5px 5px 5px 0; position:absolute; top:20px; left:-10px; padding: 0 20px; line-height:39px; height:38px; z-index:5; color:#fff; text-transform:uppercase; font-weight:bold; letter-spacing:1px}
.video-page .left-video .wrap-author .live-title:before{content:''; border-top:10px solid #700008; border-left:10px solid transparent; position:absolute; left:0; top:100%;}
.video-page .left-video .wrap-author .avatar{width:100%; float:left; position:relative; overflow:hidden; }
.video-page .left-video .wrap-author .avatar img{width:100%; border-radius:7px 7px 0 0}
.video-page .left-video .wrap-author .avatar:before{width:100%; height:100px; background:#fff; content:''; position:absolute; right:50%; top:100%; transform: rotate(15deg); transform-origin: top right;} 
.video-page .left-video .wrap-author .avatar:after{width:100%; height:100px; background:#fff; content:''; position:absolute; left:50%; top:100%; transform: rotate(-15deg); transform-origin: top left;} 
.video-page .left-video .wrap-author ul.info{width:100%; margin:0; padding:20px 20px 20px 0; list-style:none; float:left;}
.video-page .left-video .wrap-author ul.info li{width:100%; float:left; position:relative; padding-left:45px; margin-bottom:15px;}
.video-page .left-video .wrap-author ul.info li:last-child{margin-bottom:0;}
.video-page .left-video .wrap-author ul.info li .icon{font-size:16px; border-radius: 5px 5px 5px 0; width:40px; height:40px; line-height:40px; background:var(--color2); text-align:center; display:block; position:absolute; top:0; left:-10px; color:#fff;}
.video-page .left-video .wrap-author ul.info li .icon:after{content:''; border-top:10px solid #074a29; border-left:10px solid transparent; position:absolute; left:0; top:100%;}
.video-page .left-video .wrap-author ul.info li span{display:block; opacity:.75}
.video-page .left-video .wrap-author ul.info li label{display:block; margin:0; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:#000; font-size:15px; }
.video-page .left-video .wrap-author ul.info li .link-youtube{ text-decoration:none; color:#000 ; padding-left:36px; background: url(../Default/Youtube-icon.svg) no-repeat 0 0; background-size:24px auto; height:40px; width:100%; float:left; margin-top:10px;}
.video-page .left-video .wrap-author ul.info li .link-youtube .title{font-weight:bold; font-size:16px;}
.video-page .left-video .wrap-author ul.info li .link-youtube .detail{width:100%; float:left; background:#f3f3f6; line-height:22px; font-size:13px; border-radius:2px; padding: 0 5px; position:relative; margin-top:3px;}
.video-page .left-video .wrap-author ul.info li .link-youtube .detail:after{font-family:"Font Awesome 5"; content: "\f002"; font-weight:900; font-size:12px; position:absolute; right:5px; top:0; }
.video-page .left-video .wrap-author ul.info li .link-zoom{text-decoration:none; color:#000 ; padding-left:36px; background: url(../Default/zoom-icon.svg) no-repeat 0 0; background-size:24px auto; height:40px; width:100%; float:left; margin-top:20px;}
.video-page .left-video .wrap-author ul.info li .link-zoom .title{font-weight:bold; font-size:16px;}
.video-page .left-video .wrap-author ul.info li .link-zoom .detail{width:100%; float:left; background:#f3f3f6; line-height:22px; font-size:13px; border-radius:2px; padding: 0 5px; position:relative; margin-top:3px; white-space:nowrap;}
.video-page .left-video ul.ads{margin-top:20px; float:left;}

.video-page .right-video{}
.video-page .right-video .head-list{width:100%; float:left; position:relative; margin-bottom:10px;}
.video-page .right-video .head-list .col-left{float:left;}
.video-page .right-video .head-list .col-left span{}
.video-page .right-video .head-list .col-left label{text-transform:uppercase; font-size:19px; font-weight:bold; margin:0; letter-spacing:1px; color:#000; clear:left; display:block;}
.video-page .right-video ul.list-video{margin:15px -10px 0 -10px; padding:0; list-style:none; clear:both; }
.video-page .right-video ul.list-video li{padding:0 10px; position:relative; margin-top:20px; }
.video-page .right-video ul.list-video li .inner{width:100%; float:left; position:relative; box-shadow: 0 0 0 1px var(--color-border); border-radius:7px; padding:15px; transition:.3s; }
.video-page .right-video ul.list-video li:hover .inner{box-shadow: 0 0 0 1px var(--color1), 0 0 20px rgba(0,0,0,.2); z-index:5; border-radius:7px;}
.video-page .right-video ul.list-video li .wrap-img{width:100%; float:left; position:relative; margin-bottom:15px;}
.video-page .right-video ul.list-video li .wrap-img:before{content:''; width:100%; display:block; padding-top:56.25%}
.video-page .right-video ul.list-video li .wrap-img:after{border-radius:50%; width:40px; height:40px; line-height:40px; margin:-20px 0 0 -20px; display:block; text-align:center; font-family:"Font Awesome 5"; content:"\f04b"; position:absolute; top:50%; left:50%; font-size:14px; padding-left:1px; z-index:3; background:#d91c2a; font-weight:900; color:#fff; box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 0 30px rgba(0,0,0,.7); transition:.3s; }
.video-page .right-video ul.list-video li:hover .wrap-img:before{opacity:0}
.video-page .right-video ul.list-video li:hover .wrap-img:after{transform:scale(1.2)}
.video-page .right-video ul.list-video li .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; border-radius:7px; overflow:hidden;}
.video-page .right-video ul.list-video li .wrap-img a img{width:inherit; height:inherit; object-fit:cover;}
.video-page .right-video ul.list-video li .lesson{background:var(--color2); position:absolute; top:-5px; right:25px; color:#fff; text-transform:uppercase; z-index:5; padding: 5px 0 0 0; width:48px; text-align:center; box-shadow: 0 10px 20px rgba(0,0,0,.5)}
.video-page .right-video ul.list-video li .lesson:before{content:''; border-bottom: 5px solid #074a29; border-left:5px solid transparent; position:absolute; top:0; right:100%;}
.video-page .right-video ul.list-video li .lesson:after{content:''; border-bottom: 5px solid #074a29; border-right:5px solid transparent; position:absolute; top:0; left:100%;}
.video-page .right-video ul.list-video li .lesson span{display:block; clear:both; font-size:9px; font-weight:bold;}
.video-page .right-video ul.list-video li .lesson b{margin:0; width:100%; float:left; position:relative;}
.video-page .right-video ul.list-video li .lesson b:before{content:''; border-top:7px solid var(--color2); border-left: 24px solid transparent; border-right: 24px solid transparent; position:absolute; top:100%; left:0;}
.video-page .right-video ul.list-video li .info{width:100%; float:left;}
.video-page .right-video ul.list-video li .info .date{float:left; position:relative; padding-left:18px; color:#9b9bb4; font-size:13px }
.video-page .right-video ul.list-video li .info .date:before{font-family:"Font Awesome 5"; content: "\f133"; font-weight:300; font-size:14px; position:absolute; left:0; top:-2px; color:var(--color1)}
.video-page .right-video ul.list-video li .info .time{float:left; position:relative; margin-left:30px; padding-left:18px; color:#9b9bb4; font-size:13px;}
.video-page .right-video ul.list-video li .info .time:before{font-family:"Font Awesome 5"; content: "\f017"; font-weight:300; font-size:14px; position:absolute; left:0; top:-2px; color:var(--color1)}
.video-page .right-video ul.list-video li .info .name{text-decoration:none; color:#000; display:block; clear:both;}
.video-page .right-video ul.list-video li .info .name h4{font-size:16px; font-weight:500; transition:.3s; line-height:23px; margin:7px 0 0 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; float:left; color:#000;}
.video-page .right-video ul.list-video li .info .name:hover h4{color:var(--color1)}
.video-page .right-video ul.list-video li .listSocial{ display:none;}

/* List view */
@media (min-width:768px) {
    .video-page .right-video ul.viewlist{clear:both; margin:0px 0 0 0; float:left; width:100%;}
    .video-page .right-video ul.viewlist>li{-ms-flex: 0 0 100%; flex: 0 0 100%;  max-width: 100%; margin:0; padding:20px 0; border-top:1px solid var(--color-border);}
    .video-page .right-video ul.viewlist>li:first-child{border:none;}
    .video-page .right-video ul.viewlist li .inner{height:initial!important; box-shadow:none!important; padding:0;}
    .video-page .right-video ul.viewlist li .wrap-img{width:290px; float:left; margin:0 20px 0 0;}
    .video-page .right-video ul.viewlist li .info{float:right; width:calc(100% - 310px)}
    .video-page .right-video ul.viewlist li .lesson{right:initial; left:25px;}
    .video-page .right-video ul.viewlist li ul.listSocial{display:block; width:initial; float:left; margin:15px 0 0 0; clear:both; width:100%;}
    .video-page .right-video ul.viewlist li ul.listSocial li{width:initial; height:initial; float:left;  margin:0 10px 0 0; padding:0;}
    .video-page .right-video ul.viewlist li ul.listSocial li .link-main{text-align:left; display:flex; width:initial; height:30px; padding: 0 10px;}
    .video-page .right-video ul.viewlist li ul.listSocial li .link-main i{line-height:30px;}
    .video-page .right-video ul.viewlist li ul.listSocial li .link-main span{line-height:30px; padding-left:10px;}
    
}

.put-questions{padding-bottom:50px; width:100%; display:table; box-shadow:0 0 0 1px var(--color-border); margin-top:20px; position:relative; border-radius:7px; float:left;}
.put-questions .head-questions{display:table-row; position:relative; }
.put-questions .head-questions .note{margin:0; text-align:left; font-weight:500; width:100%; float:left; padding: 0 20px 10px 20px ; color:#ec1f26; font-size:15px; }
.put-questions .head-questions .note:before{content:'Chủ đề:'; font-weight:normal; font-style:italic; padding-right:3px; color:#000; font-size:14px; }
.put-questions .head-questions .datetime-live{width:100%; float:left; position:relative; display:table; padding: 0 15px;  }
.put-questions .head-questions .datetime-live .daysOfWeek-live{display:table-cell; text-align:left; vertical-align:middle; text-transform:uppercase;}
.put-questions .head-questions .datetime-live .daysOfWeek-live svg{}
.put-questions .head-questions .datetime-live .timedate-live{display:table-cell; vertical-align:middle; text-align:right}
.put-questions .head-questions .datetime-live .timedate-live p{display:inline-block; margin:0; padding:0; text-transform:uppercase; padding-right:10px; font-weight:bold; letter-spacing:1px; font-size:15px;}
.put-questions .head-questions .datetime-live .timedate-live b{font-size:22px; color:var(--color2)}
.put-questions .head-questions .datetime-live .timedate-live b:before{content:'lúc'; font-size:13px; color:#000; padding-right:5px; font-style:italic;}
.put-questions .head-questions .datetime-live .timedate-live label{display:block; font-weight:bold; margin:0; font-size:16px; width:100%; float:left; margin-top:-2px;color:var(--color1)}
.put-questions .head-questions .datetime-live .timedate-live label:before{content:'ngày'; font-size:13px; color:#000; padding-right:5px; font-style:italic;}
.put-questions .body-questions{display:table-row; position:relative; height:100%;}
.put-questions .iconEmpty{width:200px; display:block; margin: 0 auto; display:none;}
.put-questions .infoEmpty{margin:-20px 0 20px 0; padding: 0 20px; display:block; font-weight:normal; font-size:16px; color:#000; text-align:center; width:100%; float:left; display:none;}
.put-questions.empty .iconEmpty,
.put-questions.empty .infoEmpty{display:block}
.put-questions.empty .wrap-faq{display:none}
.put-questions .nav-put{line-height:41px; height:40px; background:var(--color1); display:block; padding: 0 15px; margin:0; width: calc(100% - 10px); clear:both; text-align:center; color:#fff; font-weight:bold; text-decoration:none; border-radius:2px; position:absolute; left:5px; bottom:5px;}
.hide-putQuestions{padding-bottom:0px;}
.hide-putQuestions .nav-put{display:none;}
.put-questions .wrap-faq{width:100%; height:100%; float:left; position:relative; padding-top:36px;}
.put-questions .wrap-faq .title-faq{padding: 0 20px; background:#f3f3f6; width:calc(100% - 1px); float:right; text-transform:uppercase; font-weight:bold; letter-spacing:1px; line-height:36px; height:36px; position:absolute; top:0; left:1px; color:var(--color1); box-shadow: inset 0 1px rgba(0,0,0,.05)}
.put-questions .wrap-faq .nav-all{display:block; max-width:calc(100% - 40px); margin: 0 20px; line-height:32px; position:relative; padding-right:40px; clear:both; float:left;}
.put-questions .wrap-faq .nav-all:after { font-family: "Font Awesome 5"; content: "\f30b"; font-weight: 900; position: absolute; right: 15px; top: 0; font-size: 16px;}
    
ul.list-faq{width:100%; float:left; position:relative; margin:0; padding:0 20px; list-style:none; display:block;}
ul.list-faq li{width:100%; float:left; position:relative; padding: 10px 0px 13px 0; border-bottom:1px solid #e4e5ee}
ul.list-faq li:last-child{border:none;}
ul.list-faq li b{position:absolute; top:0px; left:0; width:20px; height:18px; line-height:21px; background:var(--color2); color:#fff; text-align:center; }
ul.list-faq li b:before{content:''; border-top:5px solid var(--color2); border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; top:100%; left:0;}
ul.list-faq li h4{display:block; font-size:15px; margin:0; padding-bottom:10px; color:#000; line-height:22px; width:100%; float:left; text-align:justify}
ul.list-faq li h4:before{width:35px; content:''; height:20px; display:inline-block;}
ul.list-faq li span{font-size:13px; font-weight:bold; color:rgba(0,0,0,.7) }
ul.list-faq li span:before{font-family: "Font Awesome 5"; content: "\f007"; font-weight: 900; font-size:10px; padding-right:5px; opacity:.3; color:#000;}
ul.list-faq li i{margin-left:3px; font-size:13px;}
ul.list-faq li i:before{content:"-"; padding-right:3px; opacity:.5} 



@media (max-width:767px) {
    .video-page{padding-bottom:0;}
    .video-page .left-video{float:right; width:100%; margin-top:20px;}
    .video-page .right-video{padding-left:0; width:100%; padding-top:0px;}

    .video-page .right-video ul.list-video{clear:both; margin:0; padding:0;}
    .video-page .right-video ul.list-video li{padding: 0px; box-shadow:none!important;  min-height:initial; margin-top:20px; }
    .video-page .right-video ul.list-video li .inner{box-shadow:none!important; padding:0;}
    .video-page .right-video ul.list-video li .wrap-img{width: 140px; margin:0;}
    .video-page .right-video ul.list-video li .wrap-img:after{width:32px; height:32px; margin: -16px 0 0 -16px; line-height:32px; font-size:12px;}
    .video-page .right-video ul.list-video li .wrap-img .avatar{overflow:hidden; border-radius:7px;}
    .video-page .right-video ul.list-video li .info{width:calc(100% - 155px); float:right;}
    .video-page .right-video ul.list-video li .info .date,
    .video-page .right-video ul.list-video li .info .time{display:none;}
    .video-page .right-video ul.list-video li .info h4{-webkit-line-clamp: 6; margin-top:-5px; line-height:22px; font-size:15px;}
    .video-page .right-video ul.list-video li .lesson{display:none;}

    .video-page .left-video .wrap-author{display:none;}
    .video-page .left-video ul.ads{display:none;}
}
    
@media (min-width: 768px) and (max-width:991px) {
    .video-page{padding-bottom:0;}
    .video-page .left-video{float:right; width:100%; margin-top:20px;}
    .video-page .right-video{padding-left:0; width:100%; padding-top:20px;}
    
    .video-page .left-video .wrap-author{width:calc(50% - 10px); height:675px}
    .put-questions{width:calc(50% - 10px); float:right; margin:0; height:675px}
    
    .video-page .left-video ul.ads{display:none;}
}

@media (min-width: 992px) and (max-width:1439px) {
    /*.put-questions{display:flex; width:100%; float:left; box-shadow: 0 -10px var(--color-bg); margin-top:10px; border-top:1px solid var(--color-border); padding:0; position:relative;}
    .put-questions:before{content:''; width:1px; height:calc(100% - 10px); position:absolute; left:290px; top:5px; background:var(--color-border) }
    .put-questions .head-questions{width:290px; vertical-align:top; padding: 10px 0px 60px 0; }
    .put-questions .body-questions{vertical-align:top; text-align:center; width:calc(100% - 290px);}
    .put-questions .wrap-faq{padding-top:45px;}
    .put-questions .wrap-faq .title-faq{background:none;  box-shadow:none; text-align:left; line-height:45px; letter-spacing:inherit;}
    .put-questions .wrap-faq .nav-all{position:absolute; top:7px; right:0; margin:0;}
    .put-questions .nav-put{width:280px;}
    .put-questionse.hide-putQuestions .head-questions{padding-bottom:20px;}
    ul.list-faq li{border:none; box-shadow: inset 0 1px var(--color-border); text-align:left; padding-left:32px;}
    ul.list-faq li h4{padding-bottom:5px;}
    ul.list-faq li h4:before{display:none;}*/
}



@media (min-width:1440px) {
  
}