* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {background:#e2e6f1}

.icon-menu{display:none;width:30px}
.tieude-banner {font-size: 32px;font-weight: bold;margin: 0;padding: 0; text-align: left;}
.user-dangnhap{font-size:14px;color:#000;display:flex;align-items:Center}
.content-warpper{width:100%;display:inline-block;margin-top:70px}
.col-menu-left{width:240px;float:left;/*background:#ecf0fb;*/padding:20px;border-right:1px solid #e3e3e3}
.col-content{width:calc(100% - 240px);float:left;padding:20px}
.ul-menu{list-style:none}
.ul-menu li {border-bottom:1px solid #dde2ef;padding:5px 0}
.ul-menu li:hover {background:#eff3f7;}
.ul-menu li a {font-size:13px;color:#37374e;line-height:24px;font-weight:bold}
.tieude-danhmuc{font-size:18px;color:#242f48;font-weight:bold}
.fotter {text-align:Center;font-size:13px;border-top:1px solid #d3dfef;line-height:24px;background:#fff}
table{margin:10px 0 0}
table .rowheader td {white-space:nowrap;font-weight:bold}
table td {font-size:14px}
table tr:hover {background:#ecf0fa}
.div-nd{background: #fff;
border: 1px solid #d0d7e9;
box-shadow: -8px 12px 18px 0 #dadee8;width:100%;padding: 5px 20px;margin-top:10px;display:inline-block}
.btnUpdate {
	height: 30px; 
	width: 30px;   
	background-image:url("../images/update.jpg");
	background-repeat:no-repeat;
	border: none;
}

.btnExportExcel {
	height: 30px; 
	width: 64px;   
	background-image:url("../images/exportexcel.jpg");
	background-repeat:no-repeat;
	border: none;
}
.btnGrant {
	height: 30px; 
	width: 30px;   
	background-image:url("../images/grant.jpg");
	background-repeat:no-repeat;
	border: none;
}

.btnDelete {
	height: 30px; 
	width: 30px;   
	background-image:url("../images/delete.png");
	background-repeat:no-repeat;
	border: none;
}

.btnDownload{
	height: 30px; 
	width: 30px;   
	background-image:url("../images/download.png");
	background-repeat:no-repeat;
	border: none;
}

.btnControl{
	height: 30px; 
	width: 30px;   
	background-image:url("../images/control.png");
	background-repeat:no-repeat;
	border: none;
}

.btnOn{
	height: 30px; 
	width: 67px;   
	background-image:url("../images/on.png");
	background-repeat:no-repeat;
	border: none;
	background-color: Transparent;
    cursor:pointer;
    overflow: hidden;  	
}
.btnOff{
	height: 30px; 
	width: 67px;   
	background-image:url("../images/off.png");
	background-repeat:no-repeat;
	border: none;
	background-color: Transparent;
    cursor:pointer;
    overflow: hidden;  
}

.btnRemote{
	height: 30px; 
	width: 67px;   
	background-image:url("../images/remote.png");
	background-repeat:no-repeat;
	border: none;
	background-color: Transparent;
    cursor:pointer;
    overflow: hidden;  
}
.rowheader{
	background: #ecf0fa;
	height:35px;
}
.rowcontent1{
	background: #fff;
	height:30px;
}
.rowcontent2{
	background: #eff3f7;
	height:30px;
}
.rowcontent3{
	font-weight: bold;
	height:30px;
	font:bold;
}
.horizontal-overlapbg{right: 0;
width: calc(100% - 240px);
height: 100vh;
min-height: 100%;
position: fixed;
top: 0;
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.45);
cursor: pointer;}
.face {width:30px;height:30px;background:#3498DB;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:5px;cursor:pointer}
.face:hover, .dangnhap-ip:hover {opacity:0.8;color:#fff;text-decoration:none}
.bg-1 {background:#FF1D4D}
.bg-2 {background:#27AE60}
.bg-3 {background:#f76c2e}
.bg-4 {background:#667291}
.bg-5 {background:#22c03c}
.bg-6 {background:#0162e8}

.dangnhap-ip {width:auto;padding:0 10px;height:30px;background:#343a40;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:5px;cursor:pointer}
.notify_ {width:auto;padding:0 10px;height:30px;background:#bfbfbf;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#ff0000;margin-right:5px;cursor:pointer}
@media (max-width: 1200px) {
table .rowheader td{white-space:normal}
.div-nd{overflow:scroll;padding:0}
table{margin:0}
}
@media (max-width: 991px){
	.icon-menu{display:block}
	.logo{display:none}
	.col-menu-left{left: -240px;
overflow-y: hidden;
padding: 0 10px;
top: 0;
position: fixed;
visibility: hidden;
margin: 0px;height:100vh;overflow:scroll; webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}
	.col-content{width:100%;}
	.div-nd{overflow:scroll;padding:0}
	table .rowheader td{white-space:normal}
	table{margin:0}
	.show-menu .col-menu-left { overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    visibility: visible;
    z-index: 1000;
    left: 0;}
	.show-menu .horizontal-overlapbg {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 3.5s ease-in-out;
    -moz-transition: opacity 3.5s ease-in-out;
    -ms-transition: opacity 3.5s ease-in-out;
    -o-transition: opacity 3.5s ease-in-out;
}
.horizontal-overlapbg {
    right: 0;
    width: calc(100% - 240px);
    height: 100vh;
    min-height: 100%;
    position: fixed;
    top: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
}
@media (max-width: 480px){
	.tieude-banner{font-size:16px}
}
/****/
.menus {
  width: 100%;
 margin:0;padding:0;
 list-style: none;
}
.menus a {
  display: block;
  padding: 10px;
  position: relative;
  color: white;
}
.menus .item {
  border-top: 1px solid #2980b9;
}
.menus .item > a {
  background: #3498db;
}
.menus .item > a i {
  margin-right: 10px;
}

.menus .item > a:before {
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  left: 20px;
  bottom: -7px;
  background: #3498db;
  transform: rotate(45deg);
  visibility: hidden;
}
.menus .item:target > a:before {
  visibility: visible;
}
.menus .item:target .sub-menus {
  max-height: 100%;
}

.menus .itemx {
  border-top: 1px solid #2980b9;
}
.menus .itemx > a {
}
.menus .itemx > a i {
  margin-right: 10px;
}

.menus .itemy {
  border-top: 1px solid #000;
}
.menus .itemy > a {
}
.menus .itemy > a i {
  margin-right: 10px;
}

.menus .itemz {
  border-top: 1px solid #2980b9;
}
.menus .itemz > a {
  background: #AABBCC;
}
.menus .itemz > a i {
  margin-right: 10px;
}

.sub-menus {
  background: #333;
  overflow: hidden;
  transition: max-height .3s;
  max-height: 0;
}
.sub-menus a {
  font-size: 14px;
  padding: 10px;
  margin-top: 4px;
  position: relative;
}
.sub-menus a:before {
  content: '';
  width: 6px;
  height: 100%;
  background: #3498db;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s;
  opacity: 0;
}
.sub-menus a:hover:before {
  opacity: 1;
}