ul.list-banner{width:100%; margin:-10px 0 0 0; padding:0 0 40px 0; list-style:none; float:left;}
ul.list-banner li{position:relative; padding: 0 15px; position:relative; float:left; margin-top: 30px; transition:.3s;}
ul.list-banner li .banner-view{float:left; position:relative; z-index:1; clear:both; margin-top:10px; border-radius:7px;}
ul.list-banner li .nav-info{position:relative; z-index:5; text-decoration:none; float:right; font-size:16px; width:32px; line-height:32px; text-align:center; height:32px; background:#ffebe9; border-radius:5px; color:#f44336; transition:.3s; }
ul.list-banner li .id-banner{position:relative; z-index:5; text-decoration:none; float:left; font-size:15px; line-height:33px; font-weight:500; text-align:center; height:32px; background:#fff; border-radius:5px; color:var(--color2); padding-left:40px; }
ul.list-banner li .id-banner:before{content:'ID:'; padding-right:5px; font-weight:normal; color:rgba(0,0,0,.5)}
ul.list-banner li .id-banner:after{font-family: "Font Awesome 5"; content: "\f029"; font-size:16px; font-weight:900; position:absolute; top:0; left:0; width:32px; height:32px; line-height:32px; text-align:center; background:#e6f1eb; border-radius:4px; color:#00A859}
ul.list-banner li .nav-demo{position:relative; z-index:5; text-decoration:none; float:right; font-size:16px; width:32px; line-height:32px; text-align:center; height:32px; background:#ffebe9; border-radius:5px; color:#f44336; transition:.3s; margin-right:10px; }
ul.list-banner>li.is-disable{opacity:.3; pointer-events:none; filter: blur(0px);}
ul.list-banner>li.is-disable .banner-view{overflow:hidden!important}


.popover{border:none; max-width:500px; border:none; border-radius:7px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 10px rgba(0,0,0,.07); padding:15px 15px; } 
.popover .popover-body{padding:0; font-family:Roboto}

ul.info-popover-banner{margin:0; padding:0; list-style:none;}


.panelRight-banner{position:fixed; top:0; right:-410px; opacity:0; visibility:hidden; pointer-events:none; background:#fff; width:410px; height:100%; box-shadow: 0 0 0 var(--line); z-index:10; transition:.3s;}
.panelRight-banner .head-panel{width:calc(100% - 40px); position:absolute; top:0; left:20px;}
.panelRight-banner .head-panel label{margin:0; padding:0; font-size:16px; line-height:50px; height:50px; text-transform:uppercase; font-weight:bold; color:var(--color2)}
.panelRight-banner .head-panel a{width:30px; height:30px;position:absolute; top:10px; right:0px; line-height:30px; background:#f7f2f1; text-align:center; text-decoration:none; border-radius:5px; color:#f44336;}
.panelRight-banner .body-panel{width:100%; height:calc(100% - 50px); position:absolute; left:0; bottom:0; padding:0 20px 20px 20px; overflow-y:auto}
.panelRight-banner .view-syntax{width:100%; float:left; position:relative; margin-top:40px;}
.panelRight-banner .view-syntax:before{content:'HTML'; padding: 0 0 5px 0; font-weight:bold; position:absolute; bottom:100%; left:0px; background:#fff;}
.panelRight-banner .view-syntax.assets div.enlighter{display:block; padding-left:25px;}
.panelRight-banner .view-syntax.assets div.enlighter>div{display:initial;}
.panelRight-banner .view-syntax.assets div.enlighter>div:before{display:none;}
.panelRight-banner .view-syntax.assets div.enlighter>div>div{display:initial; word-wrap: break-word; padding-left:0; }
.panelRight-banner .view-syntax.id-ads{margin-top:35px; width:calc(50% + 10px); float:left;}
.panelRight-banner .view-syntax.id-ads:before{content:'Mã banner'}
.panelRight-banner .view-syntax.id-kind{margin-top:35px; width:calc(50% - 30px); float:right;}
.panelRight-banner .view-syntax.id-kind:before{content:'Mã loại'}
.panelRight-banner .view-syntax.css:before{content:'CSS'}
.panelRight-banner .view-syntax.js:before{content:'JS'}
.panelRight-banner .view-syntax.html:before{content:'HTML'}

.open-panelRight-banner .panelRight-banner{right:0; opacity:1; visibility:initial; pointer-events:initial}
.open-panelRight-banner .wrapper-page .right-page{padding-right:420px;}


.popupDemoBanner{position:fixed; top:0; left:0; width:100%; height:100%; z-index:500; background:#fff;}
.popupDemoBanner .nav-close{width:30px; height:30px;position:absolute; top:10px; right:10px; line-height:30px; background:#f44336; text-align:center; text-decoration:none; border-radius:5px; color:#fff;}
.popupDemoBanner .headDemo{width:100%; position:absolute; top:0; left:0; padding: 20px 0; height:125px; z-index:2; }
.popupDemoBanner .headDemo .inner{display:block; position:relative; margin: 0 auto}
.popupDemoBanner .headDemo .inner .col-left{float:left; display:block;}
.popupDemoBanner .headDemo .inner .col-left span{text-transform:uppercase; font-weight:bold; color:#000; font-size:25px; display:block; padding-bottom:5px; letter-spacing:2px; }
.popupDemoBanner .headDemo .inner .col-left label{position:relative; z-index:5; text-decoration:none; clear:both;   font-size:15px; line-height:33px; font-weight:500; text-align:center; height:32px; background:#fff; border-radius:5px; color:var(--color2); padding-left:40px; }
.popupDemoBanner .headDemo .inner .col-left label:before{content:'ID:'; padding-right:5px; font-weight:normal; color:rgba(0,0,0,.5)}
.popupDemoBanner .headDemo .inner .col-left label:after{font-family: "Font Awesome 5"; content: "\f029"; font-size:16px; font-weight:900; position:absolute; top:0; left:0; width:32px; height:32px; line-height:32px; text-align:center; background:#e6f1eb; border-radius:4px; color:#00A859}
.popupDemoBanner .headDemo ul{margin:0; padding:0; list-style:none; float:right; display:flex;}
.popupDemoBanner .headDemo ul li{display:block; text-align:center; cursor:pointer; margin-left:20px; width:130px;}
.popupDemoBanner .headDemo ul li i{font-size:32px; opacity:.5}
.popupDemoBanner .headDemo ul li .device{display:block; font-size:14px; border-radius:5px; font-weight:500; color:#000; padding-top:5px; background:rgba(0,0,0,.05); line-height:23px; height:22px; margin:5px 0 2px 0; padding:0;}
.popupDemoBanner .headDemo ul li .size{display:block; color:rgba(0,0,0,.5); white-space:nowrap;}
.popupDemoBanner .headDemo ul li .size span{font-weight:bold; color:#f44336; font-size:13px;}
.popupDemoBanner .headDemo ul li .size b{color:#000; font-size:13px; }
.popupDemoBanner .headDemo ul li.active{pointer-events:none;}
.popupDemoBanner .headDemo ul li.active i{opacity:1;}
.popupDemoBanner .headDemo ul li.active i:before{font-weight:900; color:#3e4095}
.popupDemoBanner .headDemo ul li.active .device{background:#3e4095; color:#fff;}
.popupDemoBanner .bodyDemo{width:100%; height:calc(100% - 125px); float:left; position:absolute; left:0; bottom:0;  background:#f8f9f9; }
.popupDemoBanner .bodyDemo iframe{width:100%; height:100%; border:none; position:relative; display:block; margin: 0 auto}

@media (max-width: 767px) {
    .popupDemoBanner .headDemo .inner{max-width:690px;width:100%;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .popupDemoBanner .headDemo .inner{max-width:690px;width:100%;}
    .popupDemoBanner .headDemo ul li[data-screen="992"],
    .popupDemoBanner .headDemo ul li[data-screen="1200"],
    .popupDemoBanner .headDemo ul li[data-screen="1440"]{display:none;}
}

@media (min-width: 992px) and (max-width: 1199px) {
    .popupDemoBanner .headDemo .inner{width:930px;}
    .popupDemoBanner .headDemo ul li[data-screen="1200"],
    .popupDemoBanner .headDemo ul li[data-screen="1440"]{display:none;}
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .popupDemoBanner .headDemo .inner{width:1110px;}
    .popupDemoBanner .headDemo ul li[data-screen="1440"]{display:none;}
}

@media (min-width: 1440px) {
    .popupDemoBanner .headDemo .inner{width:1270px;}
}