/*----------------------------------------------------------------*/
/*--------------Menu quay trái, chỉ sử dụng CSS ------------------*/
/*----------------------------------------------------------------*/

.holder { float:left; position:relative; z-index:100; width:206px;}

#menu {border:0px solid #222; font-family:arial, sans-serif;position:absolute;}
#menu, #menu ul {padding:0; margin:0; list-style:none; width:200px;}
#menu ul {position:relative; z-index:-1;}
#menu li {position:relative; position:relative; z-index:100;}
#menu ul li {margin-top:-22px;
-moz-transition:  0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;

}
#menu li a {display:block; width:195px; padding-left:5px; background:#fff; color:#000; text-decoration:none; font-size:12px; font-weight:bold; line-height:25px; outline:0;}
#menu li a img {border:0; float:left; padding-right:5px;}
#menu li a.sub {background: #fff url(../Images/MenuGioiThieuDonVi/down.gif) no-repeat 180px center;}
#menu li a + img {display:block; width:200px; height:25px; position:absolute; left:0; top:0; display:none; cursor:pointer; background:url(up.gif) no-repeat 180px center;}

#menu li a:hover {color: #999;}
#menu ul li a {background: #fff url(../Images/MenuGioiThieuDonVi/sub.png) no-repeat 10px center; color:#666; font-size:11px; line-height:22px; padding-left:35px; width:165px;}
#menu ul li a.lastLink {background: #fff url(sub-last.png) no-repeat 10px center;}
#menu ul li:hover a {background-color:#f0f0f0; color:#000;}

#menu a.sub:focus {outline:0;background:#ddd;}
#menu a:focus ~ ul li {margin-top:0;}
#menu a:focus + img {display:block;}

#menu a.sub:active {outline:0;background:#ddd;}
#menu a:active ~ ul li {margin-top:0;}
#menu a:active + img {display:block;}

#menu ul:hover li {margin-top:0;}

/* -------------------------------------------------------------------------------------*/
/* ---------- MENU MẪU SỐ 2: Jquery Darcon kiểu xổ xuống, có điều khiển ----------------*/
/* -------------------------------------------------------------------------------------*/
  
.glossymenu{
margin: 0px 0;
padding: 0;
width: 210px; /*width of menu*/
}

.glossymenu a.menuitem{
background: transparent;
font: bold 10pt Arial;
color: #000;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 7px 0; /* chỉnh chiều cao */
padding-left: 10px;
text-decoration: none;
border-bottom: 1px solid #e2e2e2;   
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{color: #000;}
.glossymenu a.menuitem:hover{ color:#999}
.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: none;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: transparent;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid #e2e2e2;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 10pt Arial;
color: #000;
font-style: italic;
text-decoration: none;
padding: 6px 0; /* Chỉnh chiều cao Menu cấp 2 */
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #f4f5f6;
color: Maroon;
}