@font-face {
    font-family: UTM-EdwardianB;
    src: url(fonts/UTM-EdwardianB.ttf);
}
@font-face {
    font-family: UTM-Avo;
    src: url(fonts/UTM-Avo.ttf);
}
@font-face {
    font-family: UTM-AvoBold;
    src: url(fonts/UTM-AvoBold.ttf);
}
@font-face {
    font-family: Roboto-Bold;
    src: url(fonts/Roboto-Bold.ttf);
}
@font-face {
    font-family: Roboto-Regular;
    src: url(fonts/Roboto-Regular.ttf);
}
@font-face {
    font-family: Roboto-Light;
    src: url(fonts/Roboto-Light.ttf);
}

*{
    margin: 0px;
    padding:0px;
}

.img-full {
    width: 100%;
}

/* -------- Editor -------- */
.editor img, .editor frame {
    max-width: 100%;
}

/* -------- Global -------- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 21px;
    color: #777;
    font-family: Roboto-Regular !important;
    font-size: 13px;
}

a {
    color: #666;
    outline: none !important;
    text-decoration: none;
}

a:hover, a:active, a:focus {
    color: #e9373f;
    text-decoration: none;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: inside;
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

button {
    outline: none !important;
}

.row-product{
    margin-left: -7px;
    margin-right: -7px;
}
.col-product{
    padding-left: 7px;
    padding-right: 7px;
}
/*-----------------COL MD5------------*/
.col-md5{
    width: 20%;
    display: inline-block;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
    margin-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .col-md5{
        width: 33%
    }
}
@media only screen and (min-width: 400px) and (max-width: 767px){
    .col-md5{
        width: 50%
    }
}
@media only screen and (max-width: 399px){
    .col-md5{
        width: 100%
    }
}

/*------------------MAIN-------------------*/
/*------------------------Main Menu-------------------*/
#max-menu-page{

  margin-top: 20px;

}


{

  text-align: right;

}
#max-menu-page ul.lv1 > li.activemenu > a{
  color: #e9373f
}

#max-menu-page ul.lv1 > li{

  display: inline-block;

  position: relative;



}



#max-menu-page ul.lv1 > li > a{

   font-family: Roboto-Bold;

  text-transform: uppercase;

  color: #860000;

  font-size: 15px;

  padding: 10px 10px;

}

#max-menu-page ul.lv1 > li:last-child a{

  padding-right: 0px;

}



#max-menu-page ul.lv1 > li > a:hover{

  color: #e9373f;

}

#max-menu-page ul.lv1 > li:hover ul.lv2{

  visibility: visible;

}

#max-menu-page ul.lv1 > li > ul.lv2{

    visibility: hidden;

    position: absolute;

    background-color: #fff;

    padding: 5px 0px;

    border-radius: 5px;

     text-align: left;

     z-index: 99;

     -moz-box-shadow: 0 0 5px #888;

    -webkit-box-shadow: 0 0 5px#888;

    box-shadow: 0 0 5px #888;

    white-space: nowrap;

    min-width: 150px

}

#max-menu-page ul.lv1 li > ul.lv2 > li > a{

  display: block;

  padding: 7px 15px;

}

#max-menu-page ul.lv1 li > ul.lv2 > li > a:hover{

  color: #e9373f

}

#max-menu-page ul.lv2 > li{

    position: relative;

}

#max-menu-page ul.lv2 > li:hover ul.lv3{

  visibility: visible;

}

#max-menu-page ul.lv2 > li >ul.lv3{

    visibility: hidden;

    position: absolute;

    background-color: #fff;

    border-radius: 5px;

    padding: 5px 0px;

     text-align: left;

     z-index: 100;

     -moz-box-shadow: 0 0 5px #888;

    -webkit-box-shadow: 0 0 5px#888;

    box-shadow: 0 0 5px #888;

    padding: 10px;

    white-space: nowrap;

    left: 98%;

    top: 0px

}

#max-menu-page ul.lv3 > li > a{

  display: block;

  padding: 7px 10px;

}

#max-menu-page ul.lv3 > li > a:hover{

    color: #e9373f;

}

/*-----------------MIN menu--------------*/

#min-menu-page .title{

  font-size: 20px;

  text-transform: uppercase;

  padding: 5px 10px

}

#min-menu-page ul.lv1{

  background-color: #e9373f

}

#min-menu-page ul.lv1 > li > a{

  display: block;

  padding: 5px 5px;

  color: #fff;

  font-size: 15px;

  border-bottom: 1px solid #fff;

  padding-left: 10px;

  text-transform: uppercase;

}

#min-menu-page ul.lv1 > li > a:hover{

  background-color: yellow;

  color: #000

}

#min-menu-page .exit{

  width: 50px;

  height: 50px;

  display: block;

  margin: auto;

  border-radius: 50%;

  border: 1px solid rgb(24, 156, 64);

  padding: 5px;

  padding-top: 9px

}

#min-menu-page .exit i{

  font-size: 30px;

  color: rgb(24, 156, 64);

}

#min-menu-page ul.lv2{

  list-style: none;

  display: none;

}

#min-menu-page ul.lv2 > li > a{

  display: block;

  padding: 5px 5px;

  color: #fff;

  font-size: 13px;



  border-bottom: 1px dotted  #fff;

  padding-left: 25px

}

#min-menu-page ul.lv2 > li > a:hover{

  background-color: yellow;

  color: #000

}

#min-menu-page > .lv1 > li.have-child > a::after {

    content: "\f2f9";

    font-family: 'Material-Design-Iconic-Font';

    position: absolute;

    right: 5px;

    line-height: 16px;

    font-size: 16px;

    height: 16px;

    width: 16px;

    font-weight: bold

}

#min-menu-page > .lv1 > li.have-child.expand > a::after {

    content: "\f2fc";

    font-family: 'Material-Design-Iconic-Font';

    font-weight: bold

}

#min-menu-page ul.lv3 > li >a{

    color: #fff;

     padding: 5px;

    padding-left: 50px;

    display: block;



}

/*-------------INDEX Global---------------*/

#header{

  background:url(../img/bg-header.png);

  border-bottom: 10px solid #e9373f

}
#header .col-md-4 img{
  margin-left: 35px;
  /*max-width: 110px;
  height: auto;*/
}
#header .col-md-8{
  padding-top: 15px;
  padding-bottom: 15px;
}
#header #slogan{

  font-family: UTM-EdwardianB;

  color: #e9373f;

  font-size: 24px;

  display: block;

  /*padding-left: 10px*/

}

#header #top{

  text-align: right;

}

#header #top span#hotline{

  font-family: UTM-Avo;

  color: #000;

  font-size: 16px;

  margin-right: 15px;

}

#header #top span#hotline >span{

  color: #e9373f;

  font-size: 24px;

  font-family: UTM-AvoBold

}

#header #top .search{

  display: inline-block;

  position: relative;

}

#header #top img{

  height: 30px;

  margin-right: 10px

}

#header #top input{

  background-color: transparent;

  padding: 5px 10px;

  position: relative;

  border: 1px solid #a69d96

}

#header #top > .search button{

  padding: 5px 10px;

  background-color: transparent;

  border: none;

  position: absolute;

  right: 0;

  color: #e9373f;

  font-size: 22px;

  top: -2px;

}

#top .support{

    display: inline-block;

}

#footer{

  margin-top: 30px;
  margin-bottom: -30px;

}


#footer > #ft-main{

    background-image: url(../img/bg-producthome.png);

    background-color: #483b31;

    color: white;

    padding-bottom: 15px;

    padding-top: 35px;

}

#footer > #ft-main h3{

    display: block;

    font-size: 16px;

    font-family: Roboto-Bold;

    text-transform: uppercase;

    color: #e9373f;

    margin-bottom: 10px;

}

#footer > #ft-main p{

    font-family: Roboto-Light;

}

#bottom-footer{

    background-color: #3e3025;

    border-top: 1px solid white;

}

#bottom-footer{

    padding: 10px 0px;

    text-align: center;

    color: #fff

}

#bottom-footer img{

    display: block;

    margin:auto;

    width: 30px

}

#bottom-footer #analytic{

    margin-top: 7px;

    margin-bottom: 10px

}

#bottom-footer #analytic p{

    color: #fff;

    margin:0px;

}

#bottom-footer #analytic p > span{

    color:#e9373f;

    font-weight: bold;

}

#bottom-footer a{

    color: #fff

}
#bottom-footer{position: relative;}
#bottom-footer #hotline-footer{
position: fixed;
bottom: 0px;
left: 0;
text-align: left;
width:100%;
/*height:90px;*/
font-weight:bold;
z-index: 999999;

background-image: url(../img/hotline12.png);
background-repeat: no-repeat;
}
#bottom-footer #hotline-footer p{
    margin-left: 75px;
    font-size: 17px;
    margin-top: 17px;
    color: #e9373f;
    padding:0;
}



/*------------------HOME---------------------*/

#special{

     padding-top: 38px;

     padding-bottom: 38px;

     background-image: url(../img/bg-header.png);

}

#special h2{

    font-family: UTM-Avo;

    font-size: 22px;

    text-transform: uppercase;

    display: block;

    text-align: center;

    background-image: url(images/bg_h2.png);

    background-position: center bottom;

    background-repeat: no-repeat;

    padding-bottom: 15px;

    margin-bottom: 30px

}

#special .col-md5 h3{

    font-family: 'UTM-Avo';

    font-size: 15px;

    font-weight: bold;

    text-transform: uppercase;

    color: #FFF;

    margin-top: -34px;

    text-align: center;

    height: 34px;

    display: block;

    text-decoration: none;

    background-image: url(images/bg_apro.png);

    position: relative;

    line-height: 30px;

}

#special #more{

    background-color: #e9373f;

    display: block;

    width: 210px;

    height: 47px;

    font-family: Roboto-Bold;

    font-size: 16px;

    color: white;

    text-decoration: none;

    text-align: center;

    line-height: 47px;

    margin: auto;

    position: relative;

    border-radius: 5px;

    border-bottom: 1px solid #b38640;

}

#partner{

     padding-top: 38px;

     padding-bottom: 38px;

}

#partner h2{

    font-family: UTM-Avo;

    font-size: 22px;

    text-transform: uppercase;

    display: block;

    text-align: center;

    background-image: url(../img/bg_h2.png);

    background-position: center bottom;

    background-repeat: no-repeat;

    padding-bottom: 15px;

    margin-bottom: 30px

}



/*----------------------ABOUT-------------------*/

#title-bread {

    position: relative;

    background: #3e3025;

    height: 45px;

}

#title-bread #title{

    position: absolute;

    top: 10px;

}

#title-bread #title > h2{

    color: #fff;

    font-size: 20px;

    text-transform: uppercase;

    height: 32px;

}

#breadcrum{

    background-color: #eaeaea

}

#breadcrum ul li{

    display: inline-block;

}

#breadcrum ul li a{

    padding: 5px 0px;

    display: block;

}

#breadcrum ul li.line{

    padding: 0px 10px

}

#breadcrum ul li.line:last-child{

    display: none

}

#main-page{

    margin-top: 15px;

}

/*---------------Product--------------*/

#cate-left ul.lv1 > li{

    background: #860000;

    margin-bottom: 5px;

    border-radius: 5px;

}

#cate-left ul.lv1 > li > a > img{

    margin-right: 5px;

}

#cate-left ul.lv1 > li >a{

    color: #fff;

    padding: 7px;

    display: block;

    font-size: 15px;

}

#cate-left ul.lv2{

    background: #e9373f

}

#cate-left ul.lv2 li a{

    font-size: 15px;

    color: #fff;

    padding: 7px;

    display: block;

}

#cate-left ul.lv2 li a img{

    margin-right: 10px

}

#special-left{

    padding:15px 0px;

}

#special-left > h3{

    color: #860000;

    font-family: Roboto-Bold;

    font-size: 16px;

    text-align: center;

    display: block;

    text-transform: uppercase;

}

#special-left img{

    margin-top: 15px

}

.block >h2{

    display: block;

    background: #860000;

    padding: 10px;

    color: #fff;

    font-size: 15px;

    text-transform: uppercase;

    border-radius: 5px;

    margin-bottom: 20px

}

.block .item{

    margin-bottom: 30px

}

.block .item h3{

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

    box-shadow: -1px 1px 2px #888;

    padding: 10px;

    font-weight: bold;



}

.block .editor{

    height: 100px;

    overflow: hidden;

}

.block .morebt{

    text-align: center;

    margin: 20px 0px;

}

.block #viewmore{

    display: inline-block;

    background: #860000;

    color: #fff;

    border-radius: 5px;

    padding: 5px 10px;

    cursor: pointer;

    /*margin: auto;*/

}

.block #viewmore i{

    margin: 6px

}

/*----------------------PRODUCT detail----------------*/

#intro-product .wrapper-img{

    padding: 15px;

    background-image: url(../img/bg-producthome.png);

}

#intro-product .table-product{

    width: 100%;

    color: #860000 !important;

    font-weight: bold;

}

#intro-product .table-product td{

    padding: 10px;

    border: 1px solid #ddd

}

#intro-product .table-product td >span{

    font-size: 18px;

    text-transform: uppercase;

}

#intro-product .table-product tr td:first-child{

    width: 150px

}

#intro-product .table-product tr td:last-child{

    font-weight: 500

}

#intro-product .table-contact{

    width: 100%

}

#intro-product .table-contact td{

    padding: 10px;

    border: 1px solid #ddd;

    color: #860000 !important;

    font-weight: bold;

}

#intro-product .table-contact tr td:first-child{

    width: 100px

}

#intro-product .table-contact tr td:last-child{

    text-align: center;

}

#intro-product .table-contact tr td span{

    display: block;

    color: #e9373f;

    font-size: 16px

}

#h4info{

    padding: 20px 0px 10px 0px;

    text-transform: uppercase;

    font-size: 20px;

    color: #860000;

    font-weight:bold;

}



.thank {

    width: 100%;

    margin-top:15px;

}

#intro-product .thank td{

    padding: 10px;

    border: 1px solid #ddd;

    color: rgb(217, 164, 81);

    font-weight: bold;

    font-size: 18px;

    text-align: center;

}

#intro-product .thank tr:last-child td{

    color: #e9373f

}



#content-product{

    border: 1px solid #000;

    padding: 20px;

    margin-top: 20px

}

#content-product >h3{

    color: #e9373f;

    font-size: 18px;

    text-transform: uppercase;

    font-weight: bold;

    margin-bottom: 15px;

    cursor: pointer;

}

#content-product .editor{

    display: block;

}

#policy{

    border: 1px solid #000;

    padding: 20px;

    margin-top: 20px

}

#policy >h3{

    color: #e9373f;

    font-size: 18px;

    text-transform: uppercase;

    font-weight: bold;

    margin-bottom: 15px;

    cursor: pointer;

}

#policy .editor{

    display: block;

}



#relate-product .relate-title{

    margin-bottom: 40px

}

#relate-product .relate-title > h3{

    display: inline-block;

    float: left;

    font-weight: bold;

    text-transform: uppercase;

    font-size: 16px;

    color: #e9373f;

    padding-right: 10px

}

#relate-product .relate-title > hr{

    display: block;

    position: relative;

    top: 10px;

    border-top: 1px solid #000

}



/*---------------Construction------------*/



.wraper-construc .item{

  background: #fafafa;

  padding-bottom: 5px;

  margin-bottom: 30px

}

.wraper-construc .item >.intro h3{

  font-size: 15px;

  color: #000;

  text-transform: uppercase;

  text-align: center;

  font-weight: bold;

  padding: 7px 0px;

  margin-top: 5px;

  height: 50px;

  overflow: hidden;

}

.wraper-construc .item >.intro h3 i{

  font-size: 18px;

}

.wraper-construc .item >.intro h3:hover{

  color: #e9373f

}

.wraper-construc .item >.intro >p{

  text-align: center;
  padding: 5px 10px;
  height: 60px;
  overflow: hidden;

}

.fotorama__wrap{

  margin:auto;

}

.title-construc{

  font-size: 18px;

  padding: 10px;

  display: block;

  text-align: center;

  margin-bottom: 5px;

  color: #860000;

  font-weight: bold;

}



/*-------------------NEWS------------------*/

#wraper-news .item{

  margin-bottom: 30px

}

#wraper-news .item .img-news{

  position: relative;

}

#wraper-news .item .date{

  position: absolute;

  top: 0px;

  background: #e9373f;

  text-align: center;

  padding: 5px;

  color: #fff;

}

#wraper-news .item .date p{

  margin: 0px;

  font-size: 12px;

}

#wraper-news .item .date span{

  border-top:1px solid #D7D7D7;

  border-bottom:1px solid #D7D7D7;

  font-size: 18px;

  margin: 4px 0px;

  padding: 4px 0px;

  display: inline-block;

  font-weight: bold;

}

#wraper-news .item > a > h3:hover{

  color: #e9373f;

}

#wraper-news .item > a > h3{
    font-size: 16px;
    font-weight: bold;
    color: #513936;
    margin-top: 10px;
    height: 35px;
    overflow: hidden;
}

#wraper-news .item > p{

  text-align: justify;

  margin-top: 7px;

  font-size: 12px;

  height: 65px;

  overflow: hidden;

}

#wraper-news .item >a {

  color: #513936;

}

#wraper-news .item >a:hover{

  color: #e9373f;

}

/*-------------CONTACT--------------------*/

.title-contact{

  font-size: 18px;

  text-transform: uppercase;

  color: #513936;

  font-family: Roboto-Bold;

  margin-bottom: 20px

}

.form-group input{

  display: block;

  width: 100%;

}

.form-group label{

  color: #000

}

.form-group button{

  padding: 5px 10px;

  color: #fff;

  background: #e9373f;

  border: none;

  text-transform: uppercase;

  font-size: 14px;

}

.form-group button:hover{

  background-color: #e9373f



}

.contact_info{

  border:3px solid #ff9900;

  padding: 10px;

}

#img_cap{

  display: inline-block;

}

#reload{

  cursor: pointer;

  font-size: 14px;

}

/*--------------------Cate home----------------*/

 #cate{

    margin-bottom: 30px;
    margin-top: 30px;

 }

    #cate .item{
    	margin:auto;
        width: 250px

    }

    .clip-wrap{

       position: relative;

    }

    .bg

    {

        background-image: url("http://vstatic.net/vinarem/img/bg_item.png");

        width: 240px;

        height: 240px

    }



    .bgorange {

        background-color: #e9373f;

        height: 230px;

        width: 230px;

       position: absolute;

       top: 5px;

       left: 5px

    }

    .clip-each.img {

        height: 220px;

        width: 220px;

        position: absolute;

        top: 10px;

        left: 10px

    }

    .clip-each.img img{

         height: 220px;

        width: 220px;

    }

    .clip-svg{

        position: absolute;

        width: 0px;

        height: 0px

    }

    .clip-wrap .add{

        position: absolute;

        display: none;

        top:40%;

        left:40%;

        z-index:10;

    }

     #cate .item .aitem{

        font-size: 16px;

        text-transform: uppercase;

        text-align: center;

        display: block;

        font-family: Roboto-Bold;

        color: #860000;

        margin-top: 10px

    }

#scrolltop{
  cursor: pointer;
}

.link_pr:hover .bgorange{
	opacity: 0.6;
	z-index: 9
}
.link_pr:hover .add{
	display: block;
}
#cate-left > ul.lv1 >li > ul.lv2{
  display: none;
}

#map_canvas{
  width: 100%;
  height: 400px
}

#map_cp_name{text-align:center; font-weight:bold; font-size:16px;}

@media (max-width: 414px) {
    #header .col-md-4 img{
	margin-left: 7%;
	}
}
@media (max-width: 320px) {
    #header .col-md-4 img{
	margin-left: -10px;
	}
}
#chinhsach {color:#e9373f;margin-bottom:20px;}
#chinhsach img{width:200px !important;}