@import url('center.css');

.tab01, .tab02, .tab03, .tab04, .tab05, .tab06, .tab07, .tab08 {float:left; position:relative}
/* tab01 >>> */
.tab01 {
	width:100%;
	height:425px;
	}
	
/* tab02 >>> */
.tab02, .tab05, .tab08 {
	width:100%;
	min-height:242px;
	background-color:#fff;
	border-left:1px solid #d3d3d3;
	position:relative;
	margin-top:15px;
	}
.tab-title {
	width:100%;
	height:30px;
	background-color:#e6e6e6;
	border-top:1px solid #d3d3d3;
	border-right:1px solid #d3d3d3;
	border-bottom:1px solid #d3d3d3;
	font:tahoma;
	font-size:16px;
	padding-top:9px;
	}
.tab-title-text01 { color:#4D4D4D; margin-left:10px; text-transform: capitalize;}
.tab-title-text02 {color:#0C68C4; text-transform: capitalize; margin-left:10px;}
.maker:hover {color:#333;}
.tab-produce {
	float:left;
	width:20%;
	height:310px;
	}
.tab-produce:hover { background-color:#F0F0F0; }
.tab-produce-bor {
	width:100%; 
	height:100%; 
	border-right:1px solid #d3d3d3;
	border-bottom:1px solid #d3d3d3;
	}

.tab-produce-img {
	width:100%;
	height:150px;
	text-align:center;
	padding-top:10px;
	}

.tab-produce-name, .tab-produce-price, .tab-produce-info {width:97%; margin-left:3%}
.tab-produce-name {
	height:30px;	
	font-size:13px;
	color:#1a1a1a;
	text-transform:capitalize;
	font-weight:600;
	}
.tab-produce-price {
	height:30px;
	font-size:20px;
	color:#dc0000;
	font-weight:600;
	}
.tab-produce-price-vnd {font-size:14px; margin-left:2px;}
.tab-produce-info {
	height:80px;
	font-size:12px;
	line-height:20px;
	color:#333;
	}
.tab-produce-buy { position:relative; float:right; margin-top:-30px; margin-right:5px;}
.tab-produce-input { 
	width:70px; 
	height:35px;
	color:#FFFFFF;
	font-weight:300;
	border:1px solid #ff6600;
	border-radius:6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
	 background-color: #F25900;
        background: -moz-linear-gradient(bottom, #F25900 30%, #ff8800 70%);
        background: -o-linear-gradient(bottom, #F25900 30%, #ff8800 70%);
        background: -ms-linear-gradient(bottom, #F25900 30%, #ff8800 70%);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #F25900),color-stop(0.7, #ff8800));
	}
	
/* tab03 >>> */
.tab03, .tab04, .tab06, .tab07 {
	width:50%;
	margin-top:15px;
	}
.banner-small {width:99%; float:left;}

/* ==================== 4 ô ========================== */
@media all and (max-width:1280px) and (min-width:920px){	
	.tab-produce { width:25%;}
	.hi01, .hi02 {visibility: hidden; position:absolute}
}

/* ===================== 3 ô ========================= */
@media all and (max-width:919px) and (min-width:681px){	
	.tab-produce { width:33.33%;}
	.hi02 {visibility: hidden; position:absolute}
	.tab03, .tab04, .tab06, .tab07 {width:100%}
	.banner-small {width:100%;}
}


/* ====================== 2 ô ======================== */
@media all and (max-width:680px) and (min-width:400px){	
	.tab03, .tab04, .tab06,.tab07 {width:100%;}
	.tab-produce {width:50%;}	
	.banner-small {width:100%;}	
}

/* ======================= 1 ô ======================= */
@media all and (max-width:400px){	
	.tab03, .tab04, .tab06,.tab07 {width:100%;}
	.tab-produce {width:100%;}	
	.banner-small {width:100%;}	
	.tab-title-text02 {visibility: hidden; position:absolute}
}