html,body{
	height: 100%;
	overflow: hidden;
}

/*add font*/
@font-face {
    font-family: UTM_Cookies;
    src: url(../fonts/UTM_Cookies.ttf);
}
@font-face {
    font-family: UVNBAISAU_R;
    src: url(../fonts/UVNBAISAU_R.ttf);
}
@font-face {
    font-family: UTM_Duepuntozero;
    src: url(../fonts/UTM_Duepuntozero.ttf);
}
@font-face {
    font-family: UTM_DuepuntozeroBold;
    src: url(../fonts/UTM_DuepuntozeroBold.ttf);
}
@font-face {
    font-family: Unicode_Arialr;
    src: url(fonts/Unicode_Arialr.ttf);
}
@font-face {
    font-family: Nunito_Regular;
    src: url(fonts/Nunito_Regular.ttf);
}

.a-color-white{
	color: #FFF;
}
/*main css*/
.full-container{
	max-width: 100%;
	height: 100%;

}
.full-container-login,.full-container{
	max-width: 100%;
	height: 100%;
	background: url('../images/bg_home_new.png') no-repeat;
	background-size: 100% 100%;

}
.content{
/*	width: 100%;
    display: inline-block;*/

}
/*login css*/
.header{
	min-height: 35px;
}

.login-container{
	/*background: #c8edf1;*/
	
	min-height: 500px;
	position: relative;
	height: 100%;
	max-width: 1366px;
	margin: auto;

}
.fix-main{
	max-width: 1366px;
	margin: auto;
	/*position: relative;*/
}
.fix-main-2{
	max-width: 1366px;
	margin: auto;
	/*position: relative;*/
}
.main-content{
	
	width: 50%;
	/*margin-left: 30%;*/
	position: absolute;
    left: 50%; 
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 555;
}
.main-content-login{
	background: url('../images/bg-login2.png') no-repeat;
	background-size: 100% 100%;
	left: 50%;
	top: 48%;
	width: 60%;
	transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 555;
    position: absolute;
    min-height: 515px;
	/*width: 60%;
	margin-left: 20%;
	position: relative;
*/
}
.title-content-login{
	/*min-height: 70px;
	width: 100%;
	display: inline-block;
	position: relative;*/
	margin-top: 145px;
	width: 44%;
	margin-left: 28%;
}
.in-title-content-login{
	/*width: 44%;
	left: 28%;
	position: absolute;
	top: 118px;
	height: 43px;*/

}
.school-year{
	color: #3c7a29;
	float: right;
	margin-right: 5%;
	margin-top: 10px;
	position: relative; 
}

.a-home-user{
	color: #00416a;
}
.a-home-user:hover{
	color: #FFF;
	text-decoration: none;
}
.a-home-user:hover span{
	color: #FFF !important;
}
.logo-content{
	width: 26%;
	margin-left: 37%;
	/*transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	z-index: 555;*/

}
.img-tree{
	width: 55%;
	margin-left: 2%;
	float: left;
}
.img-tree img{
	position: absolute;
	z-index: 555;
	width: 50%;
    max-height: 95px;
    max-width: 570px;
}
.top-title-content{
	font-weight: bold;
	color: #00a3e2;
	font-family: Unicode_Arialr;
	text-transform: uppercase;
	font-size: 22px;
	text-shadow: -1px 0 #FFF, 0 2px #FFF,2px 0 #FFF, 0 -1px #FFF;
	padding:0px 10px 10px 0px;
	text-align: center;
}
.bottom-title-content{
	font-size: 30px;
	text-transform: uppercase;
	color: #FFF;
	font-family: UTM_Cookies;
	text-shadow: -1px 0 #009bd7, 0 4px #009bd7, 3px 0 #009bd7, 0 -1px #009bd7;
	text-align: center;
}
.thumb-title{
	/*width: 30%;*/
	/*float: left;*/
}
.main-content-login .thumb-title{
	width: 100%;
}
.main-content-login .top-title-content{
	padding-bottom: 0px;
}
.main-content-login .bottom-title-content p{
	margin-bottom: 0px;
	font-size: 16px;
	margin-top: 0px;
	text-align: left;
}
.content img{
	width: 100%;
}
.text-title{
	/*width: 60%;*/
	/*float: left;*/
}
.title-content{
	width: 100%;
	display: inline-block;
	position: relative;
	/*margin-top: 20px;*/
	/*z-index: 555;
	position: absolute;
	left: 50%;
	top: 15%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);*/
}
.login-content{
	width: 50%;
	/*min-height: 420px;*/
	/*padding: 12%;*/
	margin-left: 25%;
	margin-top: 30px;
}
.input-login{
	/*background: #e4e4e4;*/
	border-radius: 8px;
	margin-top: 25px;
	height: 26px;
}
.captcha-container{
	width: 150px;
	display: inline-block;
	margin-top: 28px;
}
.captcha-login{
	width: 140px;
	float: left;
}
#img-captcha{
	clear: both;
	position: relative;
	width: 80px;
    float: left;
    height: 36px;
    /* margin-top: 7%; */
    margin-left: 5%;
    border-radius: 5px;
}
#img-reload-captcha{
	width: 30px;
    height: 30px;
    float: left;
    margin-top: 4px;
    margin-left: 5px;
}
.input-login input{
	border-radius: 20px;
    border: 0px solid #76b9e2;
    background: #FFF;
    margin: 3px 0px 0px 0px;
    width: 100%;
    height: 35px;
    padding: 0px 15px 0px 15px;
    outline: none;
    box-shadow: inset 1px 2px 0px 0px rgba(62, 87, 101,0.5);
    -webkit-box-shadow: inset 1px 2px 0px 0px rgba(62, 87, 101,0.5);
	-moz-box-shadow: inset 1px 2px 0px 0px rgba(62, 87, 101,0.5);
}
.radio-login{
	width: 60%;
	margin: 6% 0px 6% 20%;
}
.button-login{
	width: 100%;
	/*margin-left: 15%;*/
	margin-top: 10px;
}
.button-login button{
	background: #3a99e9;
	width: 47%;
	border: 0px;
	/*background: url(../images/khgd/bg_button_login.png) no-repeat;*/
	    /*background-size: auto auto;*/
	/*background-size: 100% 100%;*/
	color: #FFF;
	margin-bottom: 10px;
	height: 35px;
	outline: none;
	border-radius: 20px;
	float: left;
	padding-top: 3px;
}

.button-login button:hover{
	background: #2381e2;
	/*box-shadow: 2px 3px 3px 0px rgb(109, 109, 109);*/
}
.button-login button p{
	padding: 2%;
	font-weight: bold;
}
.button-login a{
	padding: 10px 0px 0px 0%;
	color: #005a7a;
	text-decoration: none;
	font-size: 14px;
}
.footer{
	/*width: 100%;*/
	/*background: url('../images/khgd/bg_footer.png') no-repeat;*/
	/*background-size: 100% 100%;
	min-height: 55px;
	position: relative;
	position: fixed;
    bottom: 0;*/
}
.img-cloud{
	background:url('../images/khgd/may.png') no-repeat;
	background-size: 100%;
	position: absolute;
}
.cloud-top{
	width: 90px;
	height: 70px;
	left: 66%;
	top: -20px;
	transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}
.cloud-1{
	width: 60px;
	height: 50px;
	left: -10px;
	top: 150px;
}
.cloud-2{
	width: 80px;
	height: 65px;
	left: 20%;
	top: 150px;
}
.cloud-3{
	width: 80px;
	height: 65px;
	right:5%;
	top: 200px;
}
.in-footer{
	width: 60%;
	left: 50%;
	position: absolute;
	bottom: 0px;
	border-top: 2px dotted #DDD;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 555;
}
.thumb-logo-footer{
	width: 10%;
	float: left;
	margin-right: 20px;
}
.thumb-logo-footer img{
	width: 100%;
}
.text-footer-12{
	/*width: 85%;*/
	/*float: left;*/
}
.text-footer-12 p{

	font-size: 12px;

	color: #FFF;

	margin-top: 15px;

	float: left;

}
.text-footer-12 a{
	color: #FFF;
}
.text-footer-12 a:hover{
	color: #B66D00;
	text-decoration:none;
}
.icon-footer{
	/*float: left;*/
	font-size: 12px;
	color: #FFF;
}
.icon-footer img{
	width: 15px;
	margin: 13px 8px 0px 5px;
	float: left;
}
.icon-footer span{
	float: left;
	margin-top: 15px;
}
/*home css*/
.main-content-home{
	top: 17%;
}
.button-hl{
	margin-left: 10px;
	/*background: url('../images/bg_hl_home.png') no-repeat;*/
	/*background-size: 100% 100%;*/
	border: 0px;
	font-size: 13px;
	padding: 12px 25px 12px 25px;
	color: #343434;
	-webkit-box-shadow: inset 0px 5px 12px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 5px 12px -6px rgba(0,0,0,0.75);
	box-shadow: inset 0px 5px 12px -6px rgba(0,0,0,0.75);
	border-radius: 20px;
}
.button-hl a{
	color: #FFF;
}
.sy-home{
	color: #ff0000;
	font-size: 13px;
}
.content-home{
	width: 60%;
	position: absolute;
    left: 50%; 
    top: 54%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: 555;
}
.content-home ul{
	width: 100%;
	display: inline-block;
}
.item-home{
	/*margin-top: 30px;*/
    width: 20%;
    float: left;
    height: 145px;
    /*background: url(../images/bg_item_home.png);*/
    /*background-size: 100% 100%;*/
    /*margin-right: 5%;*/
}
.item-home:nth-child(5n){
	margin-right: 0%;
}
.in-item-home{
	/*margin-top: 10px !important;*/
    width: 68%;
    margin-left: 16%;
    /*background-size: 100%;*/
    /*max-width: 85px;*/
    /*margin: 10px auto;*/
}
.in-item-home img{
	width: 100%;
}
.text-item-home{
	font-family: Nunito_Regular;
	width: 68%;
	margin-left: 16%;
	margin-top: 5px;
	/*font-weight: bold;*/
	font-size: 17px;
	/*letter-spacing: 2px;*/
}
.item-home a p{
	color: #FFF;
	text-shadow: 2px 0 0 #2d7baa, -2px 0 0 #2d7baa, 0 2px 0 #2d7baa, 0 -2px 0 #2d7baa, 1px 1px #2d7baa, -1px -1px 0 #2d7baa, 1px -1px 0 #2d7baa, -1px 1px 0 #2d7baa;
	/*width: 81%;*/
	margin: auto;
}
.item-home a:hover{
	text-decoration: none;
	
}
.show-item-home:hover p{
	/*color: #ff7600;*/
}
.item-home p{
	text-align: center;
}
.info-user-home{
	position: absolute;
	bottom: 90px;
	width: 57%;
	left: 50%;
	/*margin-left: 22%;*/
	background: #FFF;
	border-radius: 15px;
	padding:8px 0px 8px 0px;
	font-family:  Unicode_Arialr;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	z-index: 555;


}
.unit-name-home{
	padding-left: 10%;
	width: 50%;
	float: left;
	border-right: 1px solid #DDD; 
}
.list-muster{
	padding-left: 5%;
	width: 50%;
	float: left;
}
.list-muster p{
	float: left;
	margin-right: 5px;
}
.list-muster label{
	float: left;
	color: red;
}
.unit-name-home img{
	width: 40px;
	height: 40px;
	float: left;
	margin-right: 10px;
}
.unit-name-home p, .unit-name-home label{
	float: left;
	color: #0074a1;
}
.unit-name-home label{
	/*font-weight: bold;*/
	margin-right: 5px;
}
/*khgd css*/
.khgd-container{
	height: 100%;
	background: -moz-radial-gradient(center center, circle farthest-side, #6fe0f3 0%, #006989 100%);
    background: -o-radial-gradient(center center, circle farthest-side, #6fe0f3 0%, #006989 100%);
    background: -ms-radial-gradient(center center, circle farthest-side, #6fe0f3 0%, #006989 100%);
    background: -webkit-radial-gradient(center center, circle farthest-side, #6fe0f3 0%, #006989 100%);
}
.button-khgd{
	width: 50%;
	float: left;
	margin-left: 2%;
	background: url('../images/bg_button_khgd.png') no-repeat;
	background-size: 100% 100%;
	border: 0px;
	font-size: 13px;
	padding: 11px 33px 8px 33px;
	color: #343434;
	position: relative;
}
.button-khgd img{
	position: absolute;
    z-index: 555;
    top: 3px;
    width: 15%;
    right: 2px;
}
.school-year-kh{
	width: 30%;
	margin-top: 30px; 
	z-index: 222;
	position: relative;
}
.school-year-kh .sy-home{
	line-height: 30px;
	color: #FFF;
	width: 37%;
	float: left;
	text-align: right;
}
.notification-khgd{
	width: 10%;
	float: left;
	margin-left: 1%;
	position: relative;
}
.notification-khgd img{
	width: 95%;
    height: 33px;
}
.notification-khgd .num-notification{
	position: absolute;
    top: -5px;
    right: -4px;
    width: 17px;
    height: 17px;
    background: red;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    --border-radius: 25px;
    border-radius: 25px;
    text-align: center;
    line-height: 17px;
    color: #FFF;
    font-size: 10px;
}
.thumb-top-right img{
	position: absolute;
	right: 0;
	top: 0;
	z-index: 123;
	width: 28%;
}
.logo-kh{
	position: absolute;
	top: 0;
	left: 150px;
	width: 25%;
}
.logo-kh img{
	width: 100%;
}
.content-kh{
	width: 60%;
	margin: auto;
}

.left-content-kh{
	margin-top: 150px;
	width: 40%;
	float: left;
	background: url(../images/bg_left_content.png) no-repeat;
    background-size: 15% 100%;
    background-position: right; 
}
.left-content-kh ul li{
	width: 90%;
	padding: 7px 0px 7px 0px;
	color: #1a4014;
	font-family:UTM_DuepuntozeroBold;
	list-style: url('../images/li_style.png');
	border-bottom: 1px dotted #04a9ca;

}
.left-content-kh ul li:last-child{
	border-bottom: 0px;
}
.left-content-kh ul li ul{
	padding-left: 10px;
}
.left-content-kh ul li ul li{
	font-family:UTM_Duepuntozero;
	list-style: url('../images/li_ul_style.png');
	border-bottom: 0px;
}
.right-content-kh{
	float: left;
	margin: 80px 0px 0px 5%; 
	position: relative;
	z-index: 1;
	width: 55%;
	background:url('../images/line.png') no-repeat;
	background-size: 100% 100%;
	min-height: 380px;
	margin-bottom: 80px;
}
.font-kh{
	font-family: UTM_Duepuntozero;
	color: #FFF;
	font-weight: bold;
}
.btn-r-kh{
	background: url('../images/btn_kh_1.png');
	top: -15px;
}
.btn-r-dg{
	background: url(../images/btn_kh_3.png);
    bottom: -11px;
}
.btn-r-bc{
	background: url('../images/btn_kh_4.png');
	bottom: -50px;
}
.pos-btn-r{
	background-size: 100% 100%;
	position: absolute;
	z-index: 555;
	left: 10%;
	padding: 6px 20px 6px 20px;
}
.pos-btn-r:hover{
	cursor: pointer;
}
.bg-btn-center{
	background:url('../images/btn_kh_2.png');
	background-size: 100% 100%;
	position: absolute;
	z-index: 555;
}
.btn-center-nh{
	width: 25%;
	left: 11%;
	top: 41px;
}
.btn-center-cd{
	width: 30%;
    left: 45%;
    top: 59px;
}
.style-font-btn-center{
	width: 65%;
	margin: auto;
}
.font-btn-center{
	font-weight: bold;
	font-family: UTM_Duepuntozero;
	text-transform: uppercase;
	font-size: 16px;
	text-shadow: -1px 0 #FFF, 0 2px #FFF,2px 0 #FFF, 0 -1px #FFF;
	text-align: center;
	padding: 20px 0px 36px 0px;
	line-height: 1.3;
}
.style-cd{
	width: 50%;
	margin: auto;
}
.btn-center-t{
	width: 25%;
	top: 150px;
    left: 85%;
}
.btn-center-n{
	width: 30%;
    left: 15%;
    top: 230px;
}
.footer-kh{
	background: url('../images/bg_footer_kh.png') no-repeat;
	min-height: 93px;
	position: fixed;
	bottom: 0;
}
.footer-kh .in-footer p{
	color: inherit;
}
.footer-kh .icon-footer{
	color: inherit;
}
.pos-img{
	position: absolute;
	z-index: 555;
}
.pos-img-left{
	left: 0px;
}
.pos-img-left-top{
	top: 85px;
}
.pos-img-left-top img{
	width: 80%;
}
.pos-img-left-bottom{
	bottom: 20px;
}
.pos-img-left-bottom img{
	width: 80%;
}
.pos-img-right{
	right: 0;
}
.pos-img-right-bottom{
	bottom: 20px;
}
.pos-img-right-bottom img{
	width: 75%;
	float: right;
}
.pos-img-right-td{
	right: 130px;
	bottom: 10px;
}
.pos-img-right-td img{
	width: 80%;
}
.swivel-img{
	-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
	-moz-transition-duration: 0.5s; /*Mozilla duration version*/
	-o-transition-duration: 0.5s; 
	/*-webkit-transition:all 0.5s ease-out;
	-moz-transition:all 0.5s ease-out;
	-ms-transition:all 0.5s ease-out;
	-o-transition:all 0.5s ease-out;
	transition:all 0.5s ease-out;*/
}
.show-item-home:hover .swivel-img {
	/*border-radius: 5px; */
	-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
	-moz-transform:scale(1.1); /*Mozilla scale version*/
	-o-transform:scale(1.1); /*Opera scale version*/
	/*-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);*/

}
.datagrid-htable {
    background-color: rgba(170, 209, 92, 1);
}
.glyphicon{
	cursor: pointer;
}
.glyphicon-warning-sign{
	color: #ffaf49;
}
.hidden-item-home{
	opacity: 0.4;
}
.hidden-item-home a:hover{
	cursor: default !important;
}
/* Clouds */
#clouds {
  top: 100px;
  position: relative;
  -webkit-animation: move 20s infinite linear;  
  -moz-animation: move 20s infinite linear;  
  -ms-animation: move 20s infinite linear;
  z-index: 1;
}

#clouds2 {
  position: relative;
  -webkit-animation: backup 14s infinite linear;
  -moz-animation: backup 14s infinite linear;
  -ms-animation: backup 14s infinite linear;
  z-index: 2;
}

.cloud1, .cloud2, .cloud3 { 
  opacity: 1;  
}





.cloud2 {
  width: 100px;
  height: 30px;
  background: #e9f8f9;
  position: absolute;
  top: 180px;
  left: 400px;
  z-index: 1;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud2:after {
  content: '';
  position: absolute;
  background: #e9f8f9;
  width: 40px;
  height: 40px;
  top: -20px;
  left: 10px;
  z-index: 1;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud2:before {
  content: '';
  position: absolute;
  background: #e9f8f9;
  width: 50px;
  height: 50px;
  top: -30px;
  right: 15px;
  z-index: 1;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;

}

.cloud3 {
  width: 200px;
  height: 60px;
  background: #e9f8f9;
  position: absolute;
  top: 100px;
  left: 740px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud3:after {
  content: '';
  position: absolute;
  background: #e9f8f9;
  width: 80px;
  height: 80px;
  top: -40px;
  left: 20px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

.cloud3:before {
  content: '';
  position: absolute;
  background: #e9f8f9;
  width: 100px;
  height: 100px;
  top: -60px;
  right: 30px;
  
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
}

@-webkit-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-webkit-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-moz-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-moz-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-ms-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;} 
  52% {left: -940px; opacity: 1;} 
  100% {left: 0px;} 
}

@-ms-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  
}  

#clouds .cloud1, #clouds .cloud2, #clouds .cloud2:after, #clouds .cloud2:before, #clouds .cloud3, #clouds .cloud1:after, #clouds .cloud1:before, #clouds .cloud3:before, #clouds .cloud3:after {
	background: #e9f8f9;
	box-shadow: 0px 0px 20px 5px #e9f8f9;	
	-moz-box-shadow: 0px 0px 20px 5px #e9f8f9;	
}
.logo-content-login{
	float: left;
	margin-right: 5%;
	width: 24%;
}
.border-logo{
	width: 1%;
	float: left;
	margin-right: 5%;
}
.text-title-login{
	width: 65%;
	float: left;
}
.text-title-login .top-title-content{
	/*margin-top: 20px;*/
	font-size: 14px;
	text-align: left;
}
.text-title-login .top-title-content p{
	margin-top: 0px;
	margin-bottom: 0px;
}
.logo-content-login img{
	height: 100%;
}
.border-logo{
	height: 100%;
}
.thumb-border-logo{
	height: 100%;
}
.border-logo img{
	height: 100%;
}
.a-not-login{
	width: 49%;
	float: left;
	margin-top: 10px;
	margin-left: 4%;
}
label.checkbox-inline > input[type="checkbox"] {
    margin-top: 3px;
}

.img-tb-login{
	/*width: 400px !important;*/
	position: absolute;
}
.dropdown-menu{
	min-width: 200px !important;
}
.support-video{
	width: 30px;
}
.textbox.combo.datebox {
	min-width: 70px !important;
}