@charset "utf-8";
@font-face {
  font-family: 'HelveBold_Italic';
  src: url("../fonts/HelveBold_Italic.ttf");
  src: url("../fonts/HelveBold_Italic.ttf") format("embedded-opentype"), url("../fonts/HelveBold_Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.header{
	height:auto;
	background-color:#e1e1e1;	
}
.header .center{
	text-align:right;
	margin-top:8px;
}
.header .right{
	margin-bottom:4px;
	margin-top:4px;
}
.header .right .search-box{
	height:32px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	border:1px solid #c2c2c2;
	background:transparent ;
	border-right:none;
}
.menu-logo{
	height:auto;
	background-color:#ebebeb;	
}
.menu-logo .center{
	text-align:center;
	position: absolute;
    top: -4px;
}
.box{
	float:left;
	width:100%;
	height:auto;
	background-color:#ebebeb;
	padding: 10px;	
}
.content-product{
	height:auto;
	background-image:url(../images/bg_content.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	margin-top:-15px;	
}
.content-tab{
	width:100%;
	height:auto;	
}
.features{
	height:446px;
	background-image:url(../images/features.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	margin-top: -115px;
}
.footer{
	height:auto;
	background-color:#0c0b1a;
}
.social{
	float:right;	
}
/* BLK_Design - Mẫu Đá */
.blk_design { padding-bottom: 35px}
.blk_design .vf_tit{ font-size: 18px; font-weight: bold; color: #F77105; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_design ul li { width: 250px; height: 233px; float: left; position: relative; overflow: hidden; margin-right: 17px}
.blk_design ul li .img img { width: 100%; height: 100%;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.blk_design ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_design ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../images/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#cccccc; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.blk_design ul li:hover .preview { bottom: 0}
.blk_design ul li .preview .desc a {color: #ff9900}
.blk_design ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px; text-transform:uppercase;}
.blk_design .jcarousel { width: 100%;}
.blk_design .jcarousel-control-prev { background: url(../images/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_design .jcarousel-control-next { background: url(../images/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_design.fix { margin-bottom: 0}
.blk_design.fix ul li { width: 295px; height: 358px}
.blk_design.fix .jcarousel { width: 100%;}
/* BLK_Design - Sản Phẩm */
.blk_designpro { padding-bottom: 35px}
.blk_designpro .vf_tit{ font-size: 18px; font-weight: bold; color: #F77105; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_designpro ul li { width: 265px; height: 233px; float: left; position: relative; overflow: hidden; margin-right: 17px}
.blk_designpro ul li .img img { width: 100%; height: 100%;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.blk_designpro ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_designpro ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../images/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#cccccc; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.blk_designpro ul li:hover .preview { bottom: 0}
.blk_designpro ul li .preview .desc a {color: #ff9900}
.blk_designpro ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px; text-transform:uppercase;}
.blk_designpro .jcarousel { width: 100%;}
.blk_designpro .jcarousel-control-prev { background: url(../images/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_designpro .jcarousel-control-next { background: url(../images/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_designpro.fix { margin-bottom: 0}
.blk_designpro.fix ul li { width: 295px; height: 358px}
.blk_designpro.fix .jcarousel { width: 100%;}
/* BLK_Design - Công Trình Tiêu Biểu */
.blk_designt { padding-bottom: 35px}
.blk_designt .vf_tit{ font-size: 18px; font-weight: bold; color: #F77105; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_designt ul li { width: 339px; height: 265px; float: left; position: relative; overflow: hidden; margin-right: 17px}
.blk_designt ul li .img img { width: 100%; height: 100%;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.blk_designt ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_designt ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../images/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#cccccc; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.blk_designt ul li:hover .preview { bottom: 0}
.blk_designt ul li .preview .desc a {color: #ff9900}
.blk_designt ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px; text-transform:uppercase;}
.blk_designt .jcarousel { width: 100%;}
.blk_designt .jcarousel-control-prev { background: url(../images/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_designt .jcarousel-control-next { background: url(../images/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_designt.fix { margin-bottom: 0}
.blk_designt.fix ul li { width: 295px; height: 358px}
.blk_designt.fix .jcarousel { width: 100%;}

/* BLK_Design - Tin Tức */
.blk_designee { padding-bottom: 35px}
.blk_designee .vf_tit{ font-size: 18px; font-weight: bold; color: #F77105; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_designee ul li { width: 332px; height: 512px; float: left; position: relative; overflow: hidden; margin-right: 17px; margin-top:15px;}
.blk_designee ul li .img img { width: 100%; height: 238px;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.blk_designee ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_designee ul li .preview { position: absolute; width: 36%; bottom: -100%; left: 28px; background: url(../images/border.png) repeat 0 0; padding: 6px 15px;  color:#e1e1e1; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}

.blk_designee ul li .news { position:relative;color:#000000;}
.blk_designee ul li:hover .preview { bottom: 258px;}
.blk_designee ul li .preview .desc a {color: #ff9900}
.blk_designee ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px; text-transform:uppercase;}
.blk_designee .jcarousel { width: 100%;}
.blk_designee .jcarousel-control-prev { background: url(../images/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_designee .jcarousel-control-next { background: url(../images/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_designee.fix { margin-bottom: 0}
.blk_designee.fix ul li { width: 295px; height: 358px}
.blk_designee.fix .jcarousel { width: 100%;}
/* BLK_Design - Tin Tức - Trang chủ */
.blk_designe { padding-bottom: 35px}
.blk_designe .vf_tit{ font-size: 18px; font-weight: bold; color: #F77105; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #dcdbdb; margin-bottom: 15px}
.blk_designe ul li { width: 338px; height: 512px; float: left; position: relative; overflow: hidden; margin-right: 17px}
.blk_designe ul li .img img { width: 100%; height: 238px;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.blk_designe ul li:hover .img img {filter:none;-webkit-filter: grayscale(0);}
.blk_designe ul li .preview { position: absolute; width: 34%; bottom: -100%; left: 28px; background: url(../images/border.png) repeat 0 0; padding: 6px 15px;  color:#e1e1e1; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}

.blk_designe ul li .news { position:relative;color:#000000;}
.blk_designe ul li:hover .preview { bottom: 258px;}
.blk_designe ul li .preview .desc a {color: #ff9900}
.blk_designe ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px; text-transform:uppercase;}
.blk_designe .jcarousel { width: 100%;}
.blk_designe .jcarousel-control-prev { background: url(../images/owl_prev.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 17px; top: 0}
.blk_designe .jcarousel-control-next { background: url(../images/owl_next.png) no-repeat; width: 16px; height: 22px; position: absolute; right: 0; top: 0}
.blk_designe.fix { margin-bottom: 0}
.blk_designe.fix ul li { width: 295px; height: 358px}
.blk_designe.fix .jcarousel { width: 100%;}
/********************************* jcarousel - Mẫu Đá *****************************/
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
Position must be relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
You must ensure that the position is relative or absolute and
that the width is big enough to contain all items.
*/
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
These are the item elements. jCarousel works best, if the items
have a fixed width and height (but it's not required).
*/
.jcarousel li {
    /* Required only for block elements like <li>'s */
    float: left;
}

/* List  */
.vf_article, .vf_article .vf_list, .vf_building, .vf_building .vf_list, .vf_partner, .vf_search  { float: left; width: 100%}
.vf_article .vf_list .vf_tit, .vf_article .vf_view .vf_tit , .vf_building .vf_list .vf_tit, .vf_building .vf_view .vf_tit , .vf_guestbook .vf_list .vf_tit, .vf_partner .vf_tit, .vf_search .vf_tit{ color: #F77105; font-size: 24px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 3px solid #F77105; position: absolute; top: -58px} 
.vf_article .vf_list ul li { float: left; width: 260px; height: 247px; overflow: hidden; position: relative;}
.vf_article .vf_list ul li .img img {
	width:260px%;
	height:247px%;
}	
.vf_article .vf_list ul li .img img, .vf_article .vf_next ul li .img img, .vf_building .vf_list ul li .img img, .vf_building .vf_next ul li .img img, .vf_partner ul li img { width: 100%; height: 100%;
/*filter: url(../filters.svg#grayscale);
filter: gray; 
-webkit-filter: grayscale(1);*/
}
.vf_article .vf_list ul li:hover .img img, .vf_article .vf_next ul li:hover .img img, .vf_building .vf_list ul li:hover .img img, .vf_building .vf_next ul li:hover .img img, .vf_partner ul li img {filter:none;-webkit-filter: grayscale(0);}
.vf_article .vf_list ul li .preview, .vf_article .vf_next ul li .preview, .vf_building .vf_list ul li .preview, .vf_building .vf_next ul li .preview { position: absolute; width: 100%; bottom: -100%; left: 0; background: url(../images/bgopacity.png) repeat 0 0; padding: 10px 15px;  color:#fff; line-height: 18px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.vf_article .vf_list ul li:hover .preview, .vf_article .vf_next ul li:hover .preview, .vf_building .vf_list ul li:hover .preview, .vf_building .vf_next ul li:hover .preview { bottom: 0}
.vf_article .vf_list ul li .preview .desc a, .vf_building .vf_list ul li .preview .desc a {color: #13103f}
.vf_article .vf_list ul li .tit, .vf_building .vf_list ul li .tit {  font-weight: bold; color: #13103f; display: block; margin-bottom: 5px}

.vf_article .vf_next, .vf_building .vf_next { position: relative;}
.vf_article .vf_next .vf_tit, .vf_building .vf_next .vf_tit { font-size: 18px; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #e5e5e5}
.vf_article .vf_next ul li {width: 200px; height: 153px; overflow: hidden; position: relative;}
.vf_article .vf_next ul li .tit, .vf_building .vf_next ul li .tit { font-size: 12px;  color: #ff9900; display: block; margin-bottom: 5px}
.vf_article .vf_next .jcarousel { width: 800px; margin:0 auto;}
.vf_article .vf_next .jcarousel-control-prev { background: url(../images/prev_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; left: 40px; top: 105px}
.vf_article .vf_next .jcarousel-control-next { background: url(../images/next_xemtiep.png) no-repeat; width: 38px; height: 30px; position: absolute; right: 40px; top: 105px}
.vietdaica5{
	  height: 227px;
}