:root {
    --color1: #3e4095;
    --color2: #00af58;
    --color3: #cd0000;
    --colorLive: #e57400;
    --colorClip: #29b474;
    --colorShort: #0061d9;
    --colorBg: #f7f7f7
}

a{color:#000; text-decoration:none!important;}
a:hover{color:#000; text-decoration:none;}

html{}
body{ float:left; color:#666;font-family: 'Roboto', sans-serif; font-weight:normal; font-size:15px; color:#111; margin:initial!important; overflow-x:hidden; overflow-y:auto; width:100%; }

.page-container{width:100%; float:left; position:relative; padding: 0px; padding-top:75px; overflow:hidden}
.page-head{width:100%; height:75px; position:fixed; top:0; left:0; z-index:50; box-shadow: 0 1px 2px rgba(0,0,0,.0); padding: 0 15px; background:rgba(255,255,255,.85); -webkit-backdrop-filter: blur(0.625em); backdrop-filter: blur(0.625em);}
.page-content{width:100%; float:left; position:relative;}
.page-footer{width:100%; float:left; position:relative; }

/********************************************************************************/
/* Header  */
/********************************************************************************/
.page-head .inner{width:100%; float:left; position:relative;}
.page-head .inner .nav-logo{float:left; position:absolute; left:0; top:10px; height:36px; display:block;}
.page-head .inner .nav-logo img{height:100%; float:left;}
.page-head .inner .nav-logo:after{content:"Video"; position:absolute; bottom:-5px; left:100%; text-transform:uppercase; font-weight:500; padding-left:5px; color:var(--color3); font-size:14px; letter-spacing:1px;}

@media (max-width:1749px) {
    .page-head{padding-left:0; padding-right:0;}
}

@media (min-width: 768px) and (max-width:1199px) {
    .page-head .inner .nav-logo{left:50px;}
}
@media (max-width: 767px){
    .page-container{padding-bottom:60px; padding-top:60px;}
    .page-head{height:60px; box-shadow: 0 0 15px rgba(0,0,0,.07), 0 1px rgba(0,0,0,.02); transition:.3s;}
    .page-head .inner .nav-logo{ }
    .page-head .inner .nav-logo:after{left:initial; right:0; top:3px; font-size:10px; font-weight:bold; letter-spacing:2px;}
    .page-footer{display:none;}
    .page-head.fixed{top:-60px}
}

.wrap-mainMenu{float:left; margin: 25px 0 0 200px; }
.wrap-mainMenu>ul{float:left;text-decoration:none; list-style:none; margin:0; padding:0; height:25px;}
.wrap-mainMenu>ul>li{float:left; position:relative; margin-left:30px;}
.wrap-mainMenu>ul>li>a{text-decoration:none; color:#000; text-transform:uppercase; font-weight:500; font-size:15px; position:relative; transition:.3s;}
.wrap-mainMenu>ul>li:hover>a{color:var(--color1)}
.wrap-mainMenu>ul>li>a.sub{padding-right:0px;}
.wrap-mainMenu>ul>li>a.sub:after{ position:absolute; right:0; top:0px; opacity:.5; text-align:center; font-family: "Font Awesome 5";font-weight: 900; content:"\f0d7"; border:none; font-size:12px;  box-shadow: 0 0 0 1px rgba(0,0,0,.0); border-radius:50%; display:none; float:right; margin:0; padding:0 1px 0 0px; background:rgba(0,0,0,.0)}
.wrap-mainMenu>ul>li>a.active{color:var(--color1); font-weight:bold}
.wrap-mainMenu>ul>li>a.active:before{content:''; width:100%; height:4px; position:absolute; top:-27px; left:0;background:var(--color1)}


.wrap-mainMenu .subMainmenu{}
.wrap-mainMenu .subMainmenu ul{opacity:0; visibility:hidden; transition:.1s; position:absolute; min-width:225px; top:20px; left:0; list-style:none; margin:0; padding:15px 0; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.0), 0 5px 20px rgba(0,0,0,.1); border-radius:7px;}
.wrap-mainMenu .subMainmenu ul li{width:100%; float:left; position:relative;}
.wrap-mainMenu .subMainmenu ul li a{text-decoration:none; color:#000; line-height:36px; padding: 0 25px; white-space:nowrap; transition:.3s; width:100%; float:left; display:block;}
.wrap-mainMenu .subMainmenu ul li a img{display:none;}
.wrap-mainMenu .subMainmenu ul li a:before{font-family: "Font Awesome 5"; font-weight: 900; content:"\f105"; font-size:16px; position:absolute; left:10px; transition:.5s; opacity:0}
.wrap-mainMenu .subMainmenu ul li a:hover{font-weight:500; color:var(--color1); padding-left:40px;}
.wrap-mainMenu .subMainmenu ul li a:hover:before{opacity:1; left:25px;}
.wrap-mainMenu .subMainmenu:hover{height:45px;}
.wrap-mainMenu .subMainmenu:hover ul{opacity:1; visibility:initial; margin-top:15px;}

.wrap-mainMenu .megaSubMainmenu{position:initial!important}
.wrap-mainMenu .megaSubMainmenu ul{opacity:0; visibility:hidden; transition:.1s; position:absolute; width:calc(100% - 230px); top:45px; left:230px; list-style:none; margin:0; padding:15px 0; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,.0), 0 5px 20px rgba(0,0,0,.1); border-radius:7px;}
.wrap-mainMenu .megaSubMainmenu ul li{width:20%; float:left; position:relative;}
.wrap-mainMenu .megaSubMainmenu ul li a{text-decoration:none; color:#000; line-height:36px; padding: 0 25px; white-space:nowrap; transition:.3s; width:100%; float:left; display:block; overflow:hidden; text-overflow:ellipsis}
.wrap-mainMenu .megaSubMainmenu ul li a:before{font-family: "Font Awesome 5"; font-weight: 900; content:"\f105"; font-size:16px; position:absolute; left:10px; transition:.5s; opacity:0}
.wrap-mainMenu .megaSubMainmenu ul li a:hover{font-weight:500; color:var(--color1); padding-left:40px;}
.wrap-mainMenu .megaSubMainmenu ul li a:hover:before{opacity:1; left:25px;}
.wrap-mainMenu .megaSubMainmenu ul li svg{display:none;}
.wrap-mainMenu .megaSubMainmenu:hover{height:45px;}
.wrap-mainMenu .megaSubMainmenu:hover ul{opacity:1; visibility:initial; margin-top:15px;}

@media (min-width:1200px) and (max-width:1439px){
    .wrap-mainMenu .megaSubMainmenu ul li{width:25%;}
}


@media (min-width: 768px) and (max-width:1199px){

    .wrap-mainMenu{display:none;}
    .nav-mainMenuTable{font-size:16px; position:absolute; top:12px; left:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:8px; border-radius:5px; transition:.3s;}
    .nav-mainMenuTable span{display:block; width:100%; position:relative; height:2px; background:#000; opacity:1}
    .nav-mainMenuTable span:before{content:''; width:100%; height:2px; background:#000; left:0; top:-7px; display:block; position:absolute}
    .nav-mainMenuTable span:after{content:''; width:100%; height:2px; background:#000; left:0; bottom:-7px; display:block; position:absolute}
    .nav-mainMenuTable:hover{background:rgba(0,0,0,.07)}

    .wrap-mainMenuTable{position:fixed; width:280px; height:100%; background:#fff; z-index:100; float:left; top:0; left:-280px; padding-top:70px; transition:.3s;}
    .wrap-mainMenuTable .headMenu{width:100%; position:absolute; top:0; left:0; height:70px;}
    .wrap-mainMenuTable .headMenu .nav-mainMenuTable{left:15px;}
    .wrap-mainMenuTable .headMenu .nav-logo{float: left; position: absolute; left: 65px; top: 10px; height: 36px; display: block;}
    .wrap-mainMenuTable .headMenu .nav-logo img{float:left; height:100%;}
    .wrap-mainMenuTable .headMenu .nav-logo:after{content: "Video"; position: absolute; bottom: -5px; left: 100%; text-transform: uppercase; font-weight: 500; padding-left: 5px; color: var(--color3);  font-size: 14px;   letter-spacing: 1px;}
    .wrap-mainMenuTable .bodyMenu{width:100%; height:100%; position:relative; padding: 0 15px; overflow-y:auto; overflow-x:hidden }

    ul.mainMenuTable{margin:0; padding:0; width:100%; float:left; list-style:none; }
    ul.mainMenuTable>li{width:100%; float:left; position:relative; margin-top:2px;}
    ul.mainMenuTable>li>a{text-transform:uppercase; font-size:14px; font-weight:500; line-height:43px; height:42px; padding: 0 10px 0 50px; width:100%; display:block; border-radius:7px;}
    ul.mainMenuTable>li>a:hover{ background:rgba(0,0,0,.05);}
    ul.mainMenuTable>li>a.active{ background:var(--color1); color:#fff;}
    ul.mainMenuTable>li>a:before{font-family: "Font Awesome 5"; font-weight: 300; font-size:20px; position:absolute; left:10px; top:0; line-height:41px;}
    ul.mainMenuTable>li:first-child>a:before{content:"\f80a";}
    ul.mainMenuTable>li:nth-child(2)>a:before{content:"\f3a0";}
    ul.mainMenuTable>li:nth-child(3)>a:before{content:"\f03d";}
    ul.mainMenuTable>li:nth-child(4)>a:before{content:"\f8dd";}
    ul.mainMenuTable>li:nth-child(5)>a:before{content:"\f0fa";}

    ul.mainMenuTable>li>ul{width:100%; margin:0; padding:10px 0; list-style:none; float:left;}
    ul.mainMenuTable>li>ul>li{width:100%; float:left; position:relative;}
    ul.mainMenuTable>li>ul>li>a{line-height:40px; padding-left:25px; transition:.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; float:left; position:relative;}
    ul.mainMenuTable>li>ul>li>a>img,
    ul.mainMenuTable>li>ul>li>a>svg{display:none;}
    ul.mainMenuTable>li>ul>li>a:before{font-family: "Font Awesome 5"; content:"\f105"; font-weight: 400; font-size:20px; position:absolute; left:10px; top:0; transition:.5s; opacity:0;}
    ul.mainMenuTable>li>ul>li>a:hover{font-weight:500; color:var(--color1); padding-left:40px;}
    ul.mainMenuTable>li>ul>li>a:hover:before{left:25px; opacity:1;}

    body.is-viewMainMenu .wrap-mainMenuTable{left:0;}
    body.is-viewMainMenu .bg-overlay{opacity:.4; visibility:initial;}
}
@media (max-width:767px){
    .wrap-mainMenu{display:none;}
    .tabbar{width:100%; height:60px; position:fixed; background:#fff; left:0; bottom:0; z-index:100; box-shadow: 0 0 20px rgba(0,0,0,.1),0 -1px rgba(0,0,0,.05); display:table; transition:.3s; opacity:1; visibility:initial;}
    .tabbar a{width:20%; display:table-cell; position:relative; text-align:center; padding-top:30px;}
    .tabbar a i{width:24px; height:24px; display:block; line-height:24px; text-align:center; font-size:16px; margin: 0 0 0 -8px; position:absolute; top:7px; left:50%;}
    .tabbar a span{font-size:14px; width:100%; float:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .tabbar a.active{color:var(--color1)}
    .tabbar a.active i:before{font-weight:900; }

    .panelRight{width:100%; height:100%; max-width:320px; width:100%; position:fixed; top:0; right:-320px; background:#fff; z-index:101; padding-top:60px; transition:.3s; }
    .panelRight .headPanel{width:100%; height:50px; line-height:50px; position:absolute; left:0; top:0; padding-left:65px;}
    .panelRight .headPanel span{line-height:60px; display:block;text-transform:uppercase; font-weight:bold; color:var(--color1) }
    .panelRight .headPanel .nav-closePanel{font-size:16px; position:absolute; left:20px; top:14px; width:30px; height:30px; line-height:30px; background:rgba(0,0,0,.04); text-align:center; border-radius:7px; color:#000; transition:.3s;}
    .panelRight .headPanel .nav-closePanel:hover{background:var(--color3); color:#fff;}
    .panelRight .bodyPanel{width:100%; float:left; position:relative; height:100%; overflow-y:auto; overflow-x:hidden; padding: 0 20px}
    .panelRight ul.listAuthor{width:100%; margin:0; padding:0; float:left; list-style:none;}
    .panelRight ul.listAuthor li{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.05)}
    .panelRight ul.listAuthor li:first-child{border:none;}
    .panelRight ul.listAuthor li a{width:100%; float:left; position:relative; padding: 12px 0}
    .panelRight ul.listAuthor li a img{width:32px; border-radius:50%; margin-right:15px;}
    .panelRight ul.listAuthor li a span{font-weight:500;}

    .panelRight ul.listTopic{width:100%; margin:0; padding:0; float:left; list-style:none;}
    .panelRight ul.listTopic li{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.05)}
    .panelRight ul.listTopic li:first-child{border:none;}
    .panelRight ul.listTopic li a{width:100%; float:left; position:relative; padding: 10px 0}
    .panelRight ul.listTopic li a svg{width:24px; border-radius:50%; margin-right:15px;  opacity:.5}


    body.is-viewPanelLivestream,body.is-viewPanelTopic{overflow:hidden}
    body.is-viewPanelLivestream .tabbar,
    body.is-viewPanelTopic .tabbar{bottom:-60px; opacity:0; visibility:hidden}
    body.is-viewPanelLivestream .bg-overlay,
    body.is-viewPanelTopic .bg-overlay{opacity:.4; visibility:initial;}
    body.is-viewPanelLivestream .panelRight-livestream,
    body.is-viewPanelTopic .panelRight-topic{right:0;}

    
}


/* Main Search */
.wrap-mainSearch{width:500px; display:block; margin: 14px 0 0 0; position:relative; float:right }
.wrap-mainSearch:after{font-family: "Font Awesome 5"; font-weight:900; font-size:16px; line-height:35px; height:35px; width:35px; position:absolute; top:5px; right:5px; z-index:2; content: "\f002"; background:var(--color3); text-align:center;  border-radius:5px; color:#fff;} 
.wrap-mainSearch input[type='text']{width:100%; height:45px; border-radius:5px; outline:none; border:none; box-shadow: 0 0 0 1px rgba(0,0,0,.0); padding: 0 45px 0 15px; background:#f9f9f9; transition:.3s; font-size:15px; font-weight:normal;}
.wrap-mainSearch input[type='text']:focus{box-shadow: 0 0 0 1px rgba(0,0,0,.1); background:#fff;}
.result-mainSearch{position:absolute; top:100%; right:0; max-width:100%; background:#fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .0), 0 5px 20px rgba(0, 0, 0, .1);  border-radius: 7px; padding:25px 0; display:flex; opacity: 0; visibility:hidden; margin:0; transition:.3s;}
.result-mainSearch.is-open{opacity:1; visibility:initial; margin-top:15px;}
.result-mainSearch .col-result{ position:relative; flex: 1 1 auto; width:350px; padding: 0 20px; border-left:1px solid rgba(0,0,0,.07)}
.result-mainSearch .col-result:first-of-type{border:none;}
.result-mainSearch .col-result.col-more{padding-bottom:60px;}
.result-mainSearch .col-result .title-group{width:100%; font-weight:bold;}
.result-mainSearch .col-result ul{margin:0; padding:0; list-style:none; width:100%; list-style:none;}
.result-mainSearch .col-result ul li{width:100%; float:left; position:relative; display:flex; align-items:center; margin: 15px 0 0 0; max-height:60px;}
.result-mainSearch .col-result ul li:first-child{margin-top:15px;}
.result-mainSearch .col-result ul li .navVideo{width:100%; height:100%; display:block; position:absolute; top:0; left:0; z-index:2;}
.result-mainSearch .col-result ul li img{width:105px; float:left; border-radius:5px; }
.result-mainSearch .col-result ul li h4{font-size:14px; font-weight:normal; padding-left:15px; -webkit-line-clamp: 3; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow:hidden; margin:0; line-height:20px;}
.result-mainSearch .col-result .navAll{width:calc(100% - 50px); position:absolute; left:25px; bottom:0; line-height:40px; border-radius:7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); font-size:14px; padding: 0 15px; transition:.3s;}
.result-mainSearch .col-result .navAll:hover{background:rgba(0,0,0,.03)}
.result-mainSearch .col-result .navAll span{color:var(--color1); float:left;}
.result-mainSearch .col-result .navAll span:after{content:':'}
.result-mainSearch .col-result .navAll b{font-size:13px; color:#000; margin-left:5px; float:left;}
.result-mainSearch .col-result .navAll:after{font-family: "Font Awesome 5"; font-weight:900; content: "\f105"; position:absolute; top:0; right:15px; font-size:16px; opacity:.7}
.result-mainSearch .emptySearch{max-width:500px; width:100%; text-align:center; padding: 0 25px;}

 @media (min-width: 1200px) and (max-width:1439px){
    .wrap-mainSearch{width:450px;}
 }

@media (max-width: 767px) {
    .wrap-mainSearch{position:relative; margin:0; top:7px; right:0; width:calc(100% - 120px)}
    .wrap-mainSearch input[type='text']{ border-radius:7px; transition:.3s;}
    .wrap-mainSearch input[type='text']:first-child{box-shadow:none;}
    
}

/********************************************************************************/
/* Footer  */
/********************************************************************************/
.wrap-ffoter{width:100%; float:left; position:relative; margin-top:50px;}
.wrap-ffoter .row-warning{display:block; float:left; width:100%; box-shadow: 0 2px 50px rgba(0, 0, 0, .07), 0 0 0 1px rgba(0, 0, 0, .02); display:flex; align-items:center; padding: 30px 30px 30px 50px; border-radius:14px; position:relative}
.wrap-ffoter .row-warning .wrap-label{width:30px; height:calc(100% - 10px); position:absolute; left:5px; top:5px; background:var(--color3); border-radius: 7px 0 0 7px; overflow:hidden;}
.wrap-ffoter .row-warning .wrap-label span{line-height:32px; font-size:12px; font-weight:500; height:30px; text-transform:uppercase; color:#fff; text-align:center; width:400px; margin: -15px 0 0 -200px; transform:rotate(-90deg); display:block; transform-origin: 50% 50%; position:absolute; top:50%; left:50%; }
.wrap-ffoter .row-warning .info{font-size:14px; opacity:.75}
.wrap-ffoter .row-warning .wrap-link{ padding-left:30px;}
.wrap-ffoter .row-warning .wrap-link a{white-space:nowrap; line-height:42px; height:42px; background:var(--color1); padding: 0 20px; border-radius:7px; display:block; font-weight:500; color:#fff;}
.wrap-ffoter .row-copy{width:100%; float:left; position:relative; padding: 30px 0}
.wrap-ffoter .row-copy .col-left{float:left; position:relative; font-size:14px;}
.wrap-ffoter .row-copy .col-left span{opacity:.75}
.wrap-ffoter .row-copy .col-left label{margin:0; display:block; clear:both; padding-top:3px;}
.wrap-ffoter .row-copy .col-right{float:right; position:relative;}
.wrap-ffoter .row-copy .col-right ul{margin:0; padding:0; list-style:none;}
.wrap-ffoter .row-copy .col-right ul li{float:left; position:relative; margin-left:10px;}
.wrap-ffoter .row-copy .col-right ul li a{width:40px; height:40px; line-height:38px; display:block; text-align:center; font-size:14px; border: 1px solid rgba(0,0,0,.07); border-radius:6px; color:rgba(0,0,0,.7); transition:.3s; }
.wrap-ffoter .row-copy .col-right ul li a:hover{background:var(--color1); color:#fff;}


/* Bootrap */
.bg-overlay{width:100%; height:100%; background:#000; position:fixed; top:0; left:0; transition:.3s; z-index:90; opacity:0; visibility:hidden;}

@media (max-width:1199px) {
    .container{ max-width: 100%;}
}

@media (min-width: 1200px) and (max-width:1439px) {
    .container{ max-width: 1180px;}
}
@media (min-width: 1440px) and (max-width:1749px) {
    .container{ max-width: 1400px;}
}
@media (min-width:1750px) {
    .container{ max-width: 1700px;}
}

/* plyr */
.plyr__video-wrapper{background:none}
.plyr__poster{width:100%; background-size:cover}


ul.listVideo{width:calc(100% + 20px); margin:0; padding:0; list-style:none; margin: 20px 0 0 -10px; clear:both;}
ul.listVideo li{width:calc(25% - 20px); margin:25px 10px 0 10px; float:left; position:relative;}
ul.listVideo li .wrap-img{width:100%; float:left; position:relative; overflow:hidden; border-radius:10px; margin-bottom:15px;}
ul.listVideo li .wrap-img img{width:100%; float:left;}
ul.listVideo li .nameVideo{width:100%; float:left; position:relative; display:flex;align-items:center; }
ul.listVideo li .nameVideo h3{font-size:16px; font-weight:normal; overflow:hidden; line-height:24px; -webkit-line-clamp: 2; display: box;  display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin:0;}
ul.listVideo li .wrap-info{width:100%; float:left; position:relative; display:block; padding-left:48px; margin-top:5px;}
ul.listVideo li .wrap-info img{width:36px; height:36px; border-radius:50%; position:absolute; top:5px; left:0; }
ul.listVideo li .wrap-info .col-ele{display:block; position:relative;  float:left; padding-left:20px; margin-right:15px;}
ul.listVideo li .wrap-info .col-ele i{font-size:16px; position:relative;  opacity:.4; padding-right:5px; float:left; position:absolute; left:0; top:3px; }
ul.listVideo li .wrap-info .col-ele span{font-size:13px; font-weight:normal; opacity:.75}
ul.listVideo li .wrap-info .col-ele b{font-size:13px;}
ul.listVideo li .wrap-info .col-ele a{display:block; margin: 0 0 2px 0; width:100%; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color1); transition:.3s; }
ul.listVideo li .wrap-info .col-ele a:hover{font-weight:500;}
ul.listVideo li .wrap-info .col-ele:first-of-type{padding-left:0px; width:100%; margin-right:0;}
ul.listVideo li .wrap-info .col-ele:last-of-type{margin-right:0;}


ul.listVideo li.empty{width:calc(100% - 20px); text-align:center; font-size:17px;}


/* Phân trang */
.wrap-moreVideo{width:100%; float:left; text-align:center; display:none; margin-top:30px;}
.wrap-moreVideo.is-show{display:block;}
.wrap-moreVideo #nav-moreVideo{max-width:400px; margin: 0 auto; position:relative; display:block; line-height:40px; padding: 0 20px; height:40px; box-shadow: 0 0 0 1px rgba(0,0,0,.07); border-radius:20px; background:var(--colorBg); transition:.3s;}
.wrap-moreVideo #nav-moreVideo:hover{background:var(--color1); box-shadow: 0 0 0 1px var(--color1); color:#fff;}
.wrap-moreVideo #nav-moreVideo .col-left{float:left; position:relative; font-size:14px; opacity:.8}
.wrap-moreVideo #nav-moreVideo .col-left .nto{padding-left:5px;}
.wrap-moreVideo #nav-moreVideo .col-left .ntt{padding-right:5px;}
.wrap-moreVideo #nav-moreVideo .col-right{float:right; font-weight:500;}
.wrap-moreVideo #nav-moreVideo .col-right:after{font-family: "Font Awesome 5"; font-weight:400; content: "\f105"; font-size:16px; padding-left:10px;}

@media (max-width:767px){
    .wrap-moreVideo{margin-bottom:20px;}
}

.typeVideo{position:absolute; top:15px; right:15px; width:34px; height:34px; line-height:34px; background:#fff; border-radius:50%; text-align:center; color:#fff; z-index:5; font-style:normal;  font-size:16px; }
.typeVideo:before{font-family: "Font Awesome 5"; font-weight:400;}
.typeVideo.live{box-shadow:0 0 0 2px #e57400 ; color:#e57400; }
.typeVideo.live:before{content:"\f8dd"}
.typeVideo.clip{box-shadow:0 0 0 2px #29b474 ; color:#29b474; }
.typeVideo.clip:before{content:"\f03d"}
.typeVideo.short{box-shadow:0 0 0 2px #0061d9 ; color:#0061d9; }
.typeVideo.short:before{content:"\f3a0"}

a.hoverPlay{overflow:hidden;}
a.hoverPlay:before{content:''; width:100%; height:100%; position:absolute; top:0; left:0;background:#000; opacity:0; transition:.3s; z-index:2;}
a.hoverPlay:after{font-family: "Font Awesome 5"; content: "\f04b"; font-weight: 900; font-size:18px; padding-left:2px; display:flex; align-items:center; justify-content:center; width:50px; height:50px; line-height:50px; opacity:0; box-shadow: 0 0 0 6px rgba(255,255,255,.5); margin: -25px 0 0 -25px; border-radius:50%; z-index:4; position:absolute; top:50%; left:50%; background:#fff; color:var(--color3); transition:.3s; transform:scale(0.7) }
a.hoverPlay:hover:before{opacity:.3}
a.hoverPlay:hover:after{opacity:1; transform:scale(1);}

.controlVideo{position:absolute; right:0px; bottom:20px;}
.IsAutoPlay{ width:50px; height:20px; background:rgba(0,0,0,.07); border-radius:10px; box-shadow: inset 0 0 3px 1px rgba(0,0,0,.05); transition:.3s; display:block; float:left; margin-right:20px; position:relative;}
.IsAutoPlay:before{content:"\f04c"; font-size:12px; font-weight: 900; width:36px; height:36px; background:#fff; position:absolute; left:-8px; top:-8px; box-shadow: 0 0 20px rgba(0,0,0,0), 0 0 0 1px rgba(0,0,0,.075); border-radius:50%; transition:.3s; font-family: "Font Awesome 5"; display:flex; align-items:center; justify-content:center; }
.IsAutoPlay.active{}
.IsAutoPlay.active:before{left:100%; margin-left:-28px; content:"\f04b"; padding-left:2px; color:var(--color1); padding-top:1px; font-size:11px;}
.IsVolume{float:right; width:36px; height:36px; margin-top:-8px; box-shadow: 0 0 20px rgba(0,0,0,0), 0 0 0 1px rgba(0,0,0,.075); font-size:20px; border-radius:50%; transition:.3s; display:flex; align-items:center; justify-content:center; background:#fff; }
.IsVolume.muted{color:var(--color1);}
.IsVolume.muted:before{content: "\f6a9"; }