/*----- reset -----*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, strong, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, thead, tbody, tfoot, tr, th, td{font-family:inherit;font-size:100%;outline:0;}
:focus{outline:0;}
/*----- common -----*/
html,body{height: 100%;}
body{color:#000;font:normal normal 100% Arial, Helvetica, sans-serif;font-size: 14px}
input,select,textarea{color:#38444f;font:normal normal 1em Arial, Helvetica, sans-serif;}
a:link, a:visited{color:#000;}
a:hover{color:#077bbe}
a:link,a:visited,a:hover,a:focus,button{
text-decoration:none;outline:0;
-webkit-transition:all 0.2s ease-in-out;
     -moz-transition:all 0.2s ease-in-out;
       -o-transition:all 0.2s ease-in-out;
          transition:all 0.2s ease-in-out;
}
img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;-ms-interpolation-mode:bicubic;}
a#logo-kl{width:132px;height:102px;float: left;text-indent: -1987em;font-size: 0;background: url(../icons/dashboard/sprite.png) no-repeat -258px -130px;margin:0 46px 0 56px;}
a#logo-vp{width:342px;height:110px;float: left;text-indent: -1987em;font-size: 0;background: url(../icons/dashboard/sprite.png) no-repeat -258px 0;margin-left: 9px}
.container-fix{max-width: 850px;padding-left:15px;padding-right:15px;margin-left: auto;margin-right: auto}
.container-fix:before,.container-fix:after{display: table;content:"";}
.container-fix:after{clear: both;}
/*wrapper*/
#wrapper,#wrapper-login{height:auto;margin:0 auto;min-height:100%;}
.bg-1{background: url(../icons/dashboard/bg-dien.png) no-repeat center center fixed;}
.bg-2{background: url(../icons/dashboard/bg-rung.png) no-repeat center center fixed;}
.bg-3{background: url(../icons/dashboard/bg-ql-dien.png) no-repeat center center fixed;}
.bg-4{background: url(../icons/dashboard/bg-ql-rung.png) no-repeat center center fixed;}
.bg-1,.bg-2,.bg-3,.bg-4{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.bgColorBlue{background-color:#289adc }
.bgColorGreen{background-color:#50b20f }
/*----- Login -----*/
.box-login{text-align: center;height: 100%;color:#fff;}
.box-login:before {content: '';display: inline-block;height: 100%; vertical-align: middle;margin-right: -0.25em;}
.middle-content{display: inline-block;vertical-align: middle;width: 860px}
.frm-login{border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;overflow: hidden;
	-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.45);
	-moz-box-shadow:0px 0px 4px 0px rgba(50, 50, 50, 0.45);
	box-shadow:0px 0px 4px 0px rgba(50, 50, 50, 0.45);
}
.frm-login h2{font-size: 18px;margin:0 0 20px;}
.frm-login .block-info{padding:30px;}
.frm-login .form-control{height:45px;border:0;-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;font-size: 15px;}
.frm-login .form-control:focus{box-shadow:none;-moz-box-shadow: none;-webkit-box-shadow: none;}
.frm-login .checkbox{margin:5px 0 0;text-align: left;font-size: 13px}
.frm-login .forgot-password{text-align: right;margin-top:5px}
.frm-login .forgot-password a{color: #fff;font-size: 13px}
.frm-login .forgot-password a:hover{text-decoration: underline;}
.btn-signin{position:relative;display: block;padding:15px 30px;width: 100%;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;background-color: #1b78ae;text-transform: uppercase;font-size: 20px}
.btn-signin:hover{background-color: #1a648f}
.btn-signin,.btn-signin:hover{color:#fff}
.btn-signin i{position: absolute;right:30px;top:21px}
.btn-green{background-color: #3b8e04}
.btn-green:hover{background-color: #3d7c13}
.heading-login{padding-top:120px;}
.heading-login h1{margin:0 0 12px;font-size: 25px;text-transform: uppercase;font-weight: bold;}
.heading-login h1 span{display: block;padding-top: 5px}
.heading-login p{font-size: 20px}
/*catagory*/
.grid-catagory .item{
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
}
.grid-catagory .thumbnail{text-align: center;border:0;padding:30px 3px 0;margin-bottom: 30px;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.grid-catagory .thumbnail > a{
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.grid-catagory .thumbnail > a:hover{zoom: 1;filter: alpha(opacity=50);opacity: 0.5;}
.grid-catagory .thumbnail .caption{padding:15px 0;}
.grid-catagory .thumbnail .caption h3{margin:0;}
.grid-catagory .thumbnail .caption h3 a{color:#000;font-weight: bold;}
.grid-catagory .thumbnail .caption h3 a:hover{color:#077bbe;}
.grid-catagory .thumbnail .caption h3 a span{display: block;}
/*----- Header -----*/
#head-container{padding:28px 0 23px;}
#head-container h1{margin:16px 0 10px;}
#head-container .mix-vp h1{margin-top:40px;}
#head-container h1 span{display: block;text-align: center;font-weight: bold;}
#head-container .depiction-kg,#head-container .place-kg{text-transform: uppercase;display: block;}
#head-container .depiction-kg{font-size: 22px;color:#68ad07;margin-bottom: 12px}
#head-container .place-kg{font-size: 30px;color:#eb3e01;}
#head-container .depiction-vp{font-size: 16px;color:#0a5e9e;margin-bottom: 12px;text-transform: uppercase;}
#head-container .place-kg-vp{font-size: 15px;color:#0b0b0b;}
/*----- Content -----*/
#main-container{min-height:100%;margin:0;color: #000}
.portlet-title{padding:25px 30px;background-color: #fff;border-radius: 6px 6px 0 0;-moz-border-radius: 6px 6px 0 0;-webkit-border-radius: 6px 6px 0 0}
.portlet-title h2{margin:0;}
.portlet-title h2 a{color:#000;font-weight: bold;}
.portlet-body{padding:15px 30px 5px;background: url(../icons/dashboard/bg-main.png) repeat scroll;}
.part-account{float: right;position: relative;}
.part-account .dropdown-menu{left:auto;right:0;top:38px;}
.part-account .icons-dropdown{margin-left: 10px}
.part-account .user{font-weight: bold;cursor: pointer;}
.part-account .user:hover{color:#077bbe}
/* ===========================================================
 * bootstrap-checkbox - v.1.0.1
 * =========================================================== */
.bootstrap-checkbox > button.btn{padding:0;width:22px;}
.bootstrap-checkbox > button.btn.displayAsButton{width:auto;}
.bootstrap-checkbox > button.btn.displayAsButton > span.label-checkbox{padding:0 8px 0 4px;}
.bootstrap-checkbox > button.btn.displayAsButton > span.icon{margin: 2px 4px;}
.bootstrap-checkbox > button.btn.displayAsButton > span.label-prepend-checkbox{padding:0 4px 0 8px;}
.bootstrap-checkbox > button.btn.btn-large{padding:10px 0 6px 2px;width:36px;}
.bootstrap-checkbox > button.btn.btn-small{padding:5px 0 3px 1px;width:24px;}
.bootstrap-checkbox > button.btn.btn-mini{padding:4px 0 1px 1px;width:20px;}
.bootstrap-checkbox > .btn.btn-link{text-decoration:none;}
label.bootstrap-checkbox.disabled{cursor:default;color:#666;}
.bootstrap-checkbox > .label-prepend-checkbox{padding-right:4px;}
.bootstrap-checkbox > .label-checkbox{padding-left:4px;}
.bootstrap-checkbox.disabled > [class^="label-"],.bootstrap-checkbox > .btn[disabled]{cursor:not-allowed;}

[class^="cb-icon-"],
[class*=" cb-icon-"] {
	display: inline-block;
	width: 18px;
	height: 18px;
	*margin-right: .3em;
	line-height: 18px;
	vertical-align: middle;
	background-image: url("../icons/dashboard/sprite.png");
	background-repeat: no-repeat;
}

.bootstrap-checkbox button.btn > span.cb-icon-check,
.bootstrap-checkbox.disabled button.btn:hover > span.cb-icon-check,
.bootstrap-checkbox.disabled button.btn:active > span.cb-icon-check{
	background-position: -510px -163px;
}
.bootstrap-checkbox button.btn:hover > span.cb-icon-check,
.bootstrap-checkbox button.btn:focus > span.cb-icon-check,
.bootstrap-checkbox button.btn:active > span.cb-icon-check{
	background-position:  -510px -163px;
}
.bootstrap-checkbox button.btn > span.cb-icon-check-empty,
.bootstrap-checkbox.disabled button.btn:hover > span.cb-icon-check-empty,
.bootstrap-checkbox.disabled button.btn:active > span.cb-icon-check-empty{
	background-position: -510px -130px;
}
.bootstrap-checkbox button.btn:hover > span.cb-icon-check-empty,
.bootstrap-checkbox button.btn:focus > span.cb-icon-check-empty,
.bootstrap-checkbox button.btn:active > span.cb-icon-check-empty{
	background-position: -510px -130px;
}


.checkbox-blue .bootstrap-checkbox button.btn > span.cb-icon-check,
.checkbox-blue .bootstrap-checkbox.disabled button.btn:hover > span.cb-icon-check,
.checkbox-blue .bootstrap-checkbox.disabled button.btn:active > span.cb-icon-check{
	background-position: -542px -163px;
}
.checkbox-blue .bootstrap-checkbox button.btn:hover > span.cb-icon-check,
.checkbox-blue .bootstrap-checkbox button.btn:focus > span.cb-icon-check,
.checkbox-blue .bootstrap-checkbox button.btn:active > span.cb-icon-check{
	background-position:  -542px -163px;
}
.checkbox-blue .bootstrap-checkbox button.btn > span.cb-icon-check-empty,
.checkbox-blue .bootstrap-checkbox.disabled button.btn:hover > span.cb-icon-check-empty,
.checkbox-blue .bootstrap-checkbox.disabled button.btn:active > span.cb-icon-check-empty{
	background-position: -542px -130px;
}
.checkbox-blue .bootstrap-checkbox button.btn:hover > span.cb-icon-check-empty,
.checkbox-blue .bootstrap-checkbox button.btn:focus > span.cb-icon-check-empty,
.checkbox-blue .bootstrap-checkbox button.btn:active > span.cb-icon-check-empty{
	background-position: -542px -130px;
}

.checkbox .btn:focus{outline:0;}
.checkbox .button-checkbox{margin-right: 5px}
.checkbox .button-checkbox .icon{vertical-align: middle;}
.checkbox label, .radio label{padding-left: 12px}
/*Media Query*/
@media (max-width: 1600px) {
    
}
@media (max-width: 1370px) {
    
}
@media (max-width: 1050px) {
    
}
@media (max-width: 980px) {

}
@media (max-width: 890px) {
	.box-login{height: auto;}
    .middle-content{width: 100%;padding:0 15px;}
    .heading-login{padding-top:50px;}
    .response h1,.response h1 span{color:#262626;}
    a#logo-kl{margin:0 16px 0 0;}
}
@media (max-width: 790px) {
    
}
@media (max-width: 750px) {
    .heading-login{padding-bottom: 20px}
    .frm-login{margin-bottom:100px;}
}
@media (max-width: 690px) {
	
    .portlet-body{padding:27px 30px 5px;}
    #head-container h1{margin:0;}
    .part-account{float: none;padding-top:10px;}
    .part-account .dropdown-menu {left: 60px;right: auto;}
    a#logo-vp{margin:0 auto;float: none;display: inline-block;}
    #head-container .mix-vp h1{margin-top: 30px}
    #head-container h1 span.place-vp,#head-container .depiction-vp{color: #fff}
    .grid-catagory .thumbnail .caption h3 a span{display: inline;}
    .grid-catagory .thumbnail .caption{padding:15px 0 25px;}
}
@media (max-width: 550px) {
    
}
@media (max-width: 450px) {
    a#logo-kl{margin:0 auto 25px;float: none;display: block;}
    a#logo-vp{width: 111px}

}