﻿/* ==== HEADER AND MENU ==== */
.containMenuHeader,
.containMenuFooter {
    width: 1000px;
    margin: 0 auto;
    height: 100%;
}

.hnx-icon {
    width: 160px;
    background: url('/Content/images/logo.png') no-repeat;
    height: 100%;
    float: left;
    cursor: pointer;
    margin-top:5px;
}

    .hnx-icon > * {
        vertical-align: bottom;
    }

.menuright {
    width: 840px;
    float: right;
    height: 80px;
}

.lang_contain {
    height: 35px;
    padding-top: 5px;
    text-align: right;
}

    .lang_contain .lang-vn, .lang_contain .lang-en {
        padding: 3px 12px;
        margin-left: 5px;
    }

    .lang_contain .lang-vn {
        background: url('../Content/CountryFlags/Vietnam-24.png') no-repeat;
    }

    .lang_contain .lang-en {
        background: url('../Content/CountryFlags/United-Kingdom-24.png') no-repeat;
    }

#cssmenu {
    width: auto;
    zoom: 1;
    margin-top: 0;
}

    #cssmenu > ul {
        margin: 0;
        padding: 0;
        position: relative;
    
    }

        #cssmenu > ul > img {
            float: right;
            margin-top: 5px;
        }

        #cssmenu > ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
        }
        #cssmenu li a.active{
            border-bottom: 2px solid #c70b00;
            color:#0b9800;
        }
        #cssmenu > ul > li {
            height: 38px;
            border-top: 2px solid #f5f5f5;
            margin: 0 15px 0 15px;
        }

            #cssmenu > ul > li:hover {
                border-top: 2px solid #c70b00;
                border-bottom: 1px solid #ffffff;
            }

            #cssmenu > ul > li > a {
                color: #292929;
                padding: 10px 10px 0px 10px;
                width: calc(100% - 20px);
                width: -moz-calc(100% - 20px);
                width: -webkit-calc(100% - 20px);
                height: calc(100% - 11px);
                height: -moz-calc(100% - 11px);
                height: -webkit-calc(100% - 11px);
                display: block;
                text-decoration: none;
                text-align: center;
                font-size: 16px;
                font-family: MyriadPro-boldCond !important;
            }

                #cssmenu > ul > li > a > ul {
                    text-align: center;
                }

            #cssmenu > ul > li:hover > a {
                color: #3e9802;
                -webkit-box-shadow: -3px 0px 5px -3px #000000, 3px 0px 5px -3px #000000;
                -moz-box-shadow: -3px 0px 5px -3px #000000, 3px 0px 5px -3px #000000;
                -ms-box-shadow: -3px 0px 5px -3px #000000, 3px 0px 5px -3px #000000;
                box-shadow: -3px 0px 5px -3px #000000, 3px 0px 5px -3px #000000;
            }

#cssmenu > ul > li.menu_active > a {
                color: #3e9802;
            }

            #cssmenu > ul > li > a > span {
                display: block;
            }

            #cssmenu > ul > li.li_home {
                background-image: url('../Content/Icon/home-gray-24.png');
                background-repeat: no-repeat;
                background-position: center center;
         
            }
            #cssmenu > ul > li.li_home>a{
                width: 20px;
            }
                #cssmenu > ul > li.li_home:hover {
                    background-image: url('../Content/Icon/home-green-24.png');
                }

                #cssmenu > ul > li.li_home.menu_active {
                    background-image: url('../Content/Icon/home-green-24.png');
                }


    /* Childs */
    #cssmenu ul li > ul {
        -ms-opacity: 0;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        background: #FFF;
        margin: 0;
        z-index: 2;
        -webkit-transition: all 0.15s 0s ease-in-out;
        -moz-transition: all 0.15s 0s ease-in-out;
        -ms-transition: all 0.15s 0s ease-in-out;
        -o-transition: all 0.15s 0s ease-in-out;
        transition: all 0.15s 0s ease-in-out;
        left: -160px;
        width: 1000px;
        top: 35px;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    }

#cssmenu ul li:hover > ul {
    -ms-opacity: 1;
    opacity: 1;
        visibility: visible;
        top: 41px;
}

#cssmenu ul ul li:hover > ul {
        top: 52px;
    }

    #cssmenu > ul ul li {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 25%;
    }

    #cssmenu ul ul.ul-6-li li {
        width: 155px;
        padding: 0 5px;
    }

    #cssmenu ul ul.ul-5-li li {
        width: 180px;
        padding: 0 10px;
    }

.ul-level1 {
    width: 180px;
    padding: 0 10px;
}

#cssmenu ul ul li a {
    padding: 5px 0px;
    display: block;
    text-decoration: none;
    width: auto;
    -webkit-transition: all 0.02s ease-in-out;
    -moz-transition: all 0.02s ease-in-out;
    -ms-transition: all 0.02s ease-in-out;
    -o-transition: all 0.02s ease-in-out;
    transition: all 0.02s ease-in-out;
    text-align: left;
}

#cssmenu > ul ul li a.a-title {
    margin: 10px 0px;
    border-bottom: 1px solid #666666;
}

#cssmenu > ul ul li:hover > a {
    color: #c70b00;
}

#cssmenu > ul ul li a.a-content {
    -moz-min-width: 145px;
    -ms-min-width: 145px;
    -o-min-width: 145px;
    -webkit-min-width: 145px;
    min-width: 145px;
    margin-left: 5px;
    padding: 5px 0px 2px 0px;
    margin-bottom: 3px;
}
#cssmenu > ul ul li a.a-title span{
    font-family: MyriadPro-SemiBoldCond;
}
#cssmenu > ul ul li a.a-content span {
        padding: 0px 0px 0px 10px !important;
        background: url('../Content/TTTT/li_menu_image.png') no-repeat;
        background-position: left center;
    }

#cssmenu ul ul ul {
    width: auto !important;
    left: 10px !important;
    top:53px!important;
}
#cssmenu ul ul li:first-child ul {

    left: 0px !important;

}
#cssmenu ul ul li {
    margin: 0;
    padding: 0;
    position: relative;
}

/* ==== END HEADER AND MENU ==== */
