@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcjh33M2A-6X0bdu871ruAGs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fchHJTnCUrjaAm2S9z52xC3Y.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
#container {
   min-height:100%;
   position:relative;
}
.banner {
	margin: 0px auto;
    width: 1349px;
	}

.danhmucsp {
	margin: 0px auto;
    width: 1335px;
    position: relative;
	text-align: center;
    background: url(../images/bg_spnb.png) repeat-x;
    padding: 200px 0 10px;
	top:10px;
    
}
.sanpham {
	margin: 0px auto;
    width: 1348px;
    position: relative;
	text-align: center;
	z-index: 0;
    
}
.chitietsanpham {
	margin: 0px auto;
    width: 1348px;
    position: relative;
	text-align: center;
	z-index: 1;
    
}

.mainpage {
	margin: 0px auto;
    width: 1349px;
    position: relative;

  
}

.main {
	position: relative;
    margin: 0px auto;
    top: 130px;
	}
.main ul {
	-webkit-padding-start: 0px;
	}
ul.products li {
	 background-color: #eeeeee;
    padding: 2px;
    display: inline-block;
	vertical-align: top;
	margin-left:20px;
	margin-right:20px;
	margin-bottom: 10px;
	
	    
}
ul.products li img{
    box-shadow: 0 1px 0 rgba(120, 200, 230, 0.5) inset;
  
       
}
ul.products li h4{
	color: #91a63b;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;

	}
h3 {
	font-weight: normal;
	text-align:left;
	display:block;
	padding:8px 20px;
	font-family: Montserrat; 
	
	color: white;
	}
#wrapper {
				
				width: 100%;
				height: 55%;
				bottom: 0;
				left: 0;
			}
			#inner {
				width: 100%;		
				margin-top: -183px;
				overflow: hidden;
			}
			#carousel div{
				
				
			}
			.slide{
				width: 232px;
				height: 185px;
				float: left;
				margin-top: 5px;
				margin:5px;
			}
				
			
			#carousel div img{

				border: 2px solid #fcfdfd;
				border-radius: 10px;
			
			}
			#carousel div em{

				    color: #ffffff;
					font-size: 16px;
					font-family: 'fontB';
					font-weight: normal;
					text-transform: capitalize;
					line-height: 39px;
					
			
			}
			#pager {
				text-align: center;
				margin-top: 20px;
				color: #666;
			}
			#pager a {
				color: #666;
				text-decoration: none;
				display: inline-block;
				padding: 5px 10px;
			}
			#pager a:hover {
				color: #333;
			}
			#pager a.selected {
				background-color: #333;
				color: #ccc;
			}
			#prev, #next {
				display: block;
				width: 50px;
				height: 80px;
				margin-top: -40px;
				position: absolute;
				top: 50%;
				z-index: 2;
			}
			#prev {
				background: url( ../images/ui-prev.png ) no-repeat;
				left: 2%;
				
				

			}
			#next {
				background: url( ../images/ui-next.png ) no-repeat;
				right: 0%;
			

			}
.item_product {
    margin-top: 23px;
    width: 220px;
    height: 180px;
    float: left;
    margin-right: 10px;
    position: relative;
}
.name {
	float:left;
    width: 230px;
    height: 40px;
    background: rgba(0, 0, 0, 0.8);
    position: relative;
    top: -42px;
    left: 2px;
    text-align: center;
    border-radius: 0 0 5px 5px;
}
h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.name h3 a {
    color: #ffffff;
    font-size: 16px;
    font-family: 'fontB';
    font-weight: normal;
    text-transform: capitalize;
    line-height: 39px;
}
a {
    text-decoration: none;
}		



@import url(http://weloveiconfonts.com/api/?family=zocial);
*{
    margin:0;
    padding:0;
}

@font-face{
    font-family:'zocial', sans-serif;
}

[data-icon]:before{
    font-family:'zocial';
    content:attr(data-icon);
    -webkit-font-smoothing:antialiased;
}

body{
        font-family: Montserrat;
		background-color:#eee;
}

a{
    text-decoration:none;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -ms-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear;
}

.clear{ clear:both; }

#main{
    background-color: #FFFFFF;
    padding: 200px 0 500px;
    position: relative;
    text-align: center;
    
}
.footer{
        z-index: 3;
}

footer{
    background-color:#2E3639;
    position:relative;
    
	margin: 0px auto;
    width: 1335px;
}

footer .splitter{
    background-color:#ac0;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        transparent 75%, transparent);
    -webkit-background-size:50px 50px;
    -moz-background-size:50px 50px;
    background-size:50px 50px;
    
    -moz-box-shadow:1px 1px 8px gray;
    -webkit-box-shadow:1px 1px 8px gray;
    box-shadow:1px 1px 8px gray;
    height:20px;
}

/* Three columns */

footer > ul{
    list-style:none outside none;
    margin:0 auto;
    max-width:1200px;
    overflow:hidden;
 
    position:relative;
    width:95%;
}

footer > ul li{
    float:left;
    padding:20px 15px;
    width:33.3%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

footer > ul li:first-child{
    padding-left:0;
}

footer > ul li:nth-child(3){padding-right:0;}

footer > ul li .icon{
    color:#999999;
    float:left;
    font-size:80px;
    line-height:80px;
}

footer > ul li .text{
    color:#848889;
    font-size:13px;
    line-height:20px;
    margin-left:105px;
    position:relative;
    text-align:justify;
}

.text h4{
    color:#ffffff;
    font-size:24px;
    font-weight:bold;
    margin-bottom:10px;
}

.text a{
    border-bottom:1px dotted transparent;
    color:#FFDD00;
    font-weight:bold;
}

.text a:hover{
    border-color:#FFDD00;
}

/* bar section */

footer .bar{
    background-color:#1E2629;
    padding:20px 0;
}

footer .bar-wrap{
    font-size:12px;
    margin:0 auto;
    max-width:1200px;
    position:relative;
    width:95%;
}

.links{
    float:left;
    list-style:none outside none;
    position:relative;
}

.links li{
    float:left;
    margin-right:10px;
}

.links a{ color:#778888;}

.links a:hover{color:#FFFFFF;}

.social{
    position:absolute;
    right:0;
    top:0;
}

.social a{ color:#778888; margin-left:20px;}
.social a:hover{color:#ffffff;}
.social .icon{
    display:inline-block;
    font-size:36px;
    margin-right:5px;
    vertical-align:middle;
    -webkit-transition:-webkit-transform .3s linear;
    -moz-transition: -moz-transform .3s linear;
    -ms-transition:-ms-transform .3s linear;
    -o-transition:-ms-transform .3s linear;
    transition: transform .3s linear;
}

.social a:hover .icon{
   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

.social .info{
    display:inline-block;
    vertical-align:middle;
}

.social .info .num{display:block;}
.copyright{
    color:#778888;
    margin-top:5px;
}

/* Responsive */

@media screen and (max-width:1000px){
    .links, .social, .copyright{
        float:none;
        text-align:center;
    }
    
    .social{
        position:relative;
        margin:10px 0;
    }
    
    .links li{
        display:inline-block;
        float:none;
    }
    
    .bar{
        position:relative;
    }
    
    .bar-wrap{
        margin-bottom:0;
    }
}

@media screen and (max-width: 835px)  {
    footer > ul li {
        float:none;
        width:auto;
    }
}

@media screen and (max-width: 768px)  {
    .links li {
        margin-right:5px;
    }
}

/*sp*/
.product {
	width: 700px;
	margin: auto;
	padding: 25px 0px;
}

.clear:before,
.clear:after {
	content: "";
	display: table; 
}
 
.clear:after { clear: both; }
 
.clear { 
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

::-moz-selection {
 	color: inherit;
 	background-color: #eee;
}
::selection {
 	color: inherit;
 	background-color: #eee;
}

html {
	height: 100%;
	background: #f3f3f3;
	background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(50%,#ffffff));
	background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
	background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
	background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
	background: linear-gradient(top, #f3f3f3 0%,#ffffff 50%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); }

header {
	margin-bottom: 20px;
	background: url('../images/apple.png') no-repeat right center; }
 
h1 {
	font-family: Helvetica Neue, Arial, sans-serif;
	font-weight: normal;
	margin: 0; }
 
h1 { font-size: 24pt; }
 
h4 {
    font-size: 1em;
    margin-bottom: 10px;
    margin-top: 10px;
	text-transform: capitalize;
	font-weight: 500;
}




figure { float: left;

 }
 
	figure img { max-width: 350px;
	}

section {
	font-family: Tahoma, Arial, sans-serif;
	line-height: 150%;
	float: right;
	width: 320px;
	color: #333; }
 
button {
	background: #36a9ea;
	background: -moz-linear-gradient(top, #36a9ea 0%, #127fd2 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36a9ea), color-stop(100%,#127fd2));
	background: -webkit-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
	background: -o-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
	background: -ms-linear-gradient(top, #36a9ea 0%,#127fd2 100%);
	background: linear-gradient(top, #36a9ea 0%,#127fd2 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#36a9ea', endColorstr='#127fd2',GradientType=0 );
	border: 1px solid #00599d;
	color: #fff;
	padding: 8px 20px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1), inset 0px 1px 0px 0px rgba(250, 250, 250, .3);
	text-shadow: 0px 1px 1px #156cc4;
	filter: dropshadow(color=#156cc4, offx=0, offy=1);
	font-size: 10pt; }
 
	button:hover {
		background: #2f90d5;
		background: -moz-linear-gradient(top, #2f90d5 0%, #0351b7 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f90d5), color-stop(100%,#0351b7));
		background: -webkit-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
		background: -o-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
		background: -ms-linear-gradient(top, #2f90d5 0%,#0351b7 100%);
		background: linear-gradient(top, #2f90d5 0%,#0351b7 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2f90d5', endColorstr='#0351b7',GradientType=0 ); }
 
	button:active {
		background: #127fd2;
		-webkit-box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0);
		box-shadow: inset 0px 2px 1px 0px rgba(0, 47, 117, .5), 0px 1px 1px 0px rgba(0, 0, 0, 0); }

 
details { margin: 20px 0px; }
 
summary {
	cursor: pointer;
	font-size: 12pt;
	outline: 0; }
 
details > summary::-webkit-details-marker { display: none; }
 
details > summary:before {
	width: 16px;
	height: 16px;
	display: inline-block;
	content: '' !important;
	background: url('../images/plus-min.png') no-repeat center top;
	margin-right: 5px;
	position: relative;
	top: 2px; }
 
details[open] > summary:before,
details.open > summary:before { 
	background: url('../images/plus-min.png') no-repeat center bottom; 
}

figure img {
transition: all 0.2s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;

}

 
figure img:hover {
transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
position: relative;
z-index:1;
}

span.roll {
	
    opacity: 1;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    background:#000;
    cursor: pointer;
    height: 210px;
    width: 280px;
    position: absolute;
    z-index: 0;
    opacity: 0;
	
	
}
span.roll:hover {
	
    opacity: .7;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition: -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000;
	
	
}
.title {
	top: 16px;
	position: relative;
    width: 194px;
    padding: 2px;
    background: #ce4c4a;
    background: -moz-linear-gradient(bottom, #c43735, #d56462);
    background: -webkit-linear-gradient(bottom, #c43735, #d56462);
    background: -o-linear-gradient(bottom, #c43735, #d56462);
    background: -ms-linear-gradient(bottom, #c43735, #d56462);
    /* background: linear-gradient(to top, #c43735, #d56462); */
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); */
}
.title:before {
    position: absolute;
    right: -12px;
    top: 9px;
    z-index: 10;
    width: 28.52691193px;
    height: 28.52691193px;
    border-right: 1px dashed #e9afae;
    border-top: 1px dashed #e9afae;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}

.title:after {
    position: absolute;
    right: -16px;
    top: 7px;
    width: 31.52691193px;
    height: 31.52691193px;
    background: #ce4c4a;
    background: -moz-linear-gradient(-45deg, #c43735, #d56462);
    background: -webkit-linear-gradient(-45deg, #c43735, #d56462);
    background: -o-linear-gradient(-45deg, #c43735, #d56462);
    background: -ms-linear-gradient(-45deg, #c43735, #d56462);
    background: linear-gradient(-45deg, #c43735, #d56462);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}
.title a:after {
    position: absolute;
    bottom: -4px;
    left: -7px;
    z-index: -1;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid #982b29;
    content: "";
}
.title a {
	display: block;
	line-height: 1;
    padding: 12px 12px 12px 16px;
    border-left: 1px dashed #de8886;
    border-top: 1px dashed #de8886;
    border-bottom: 1px dashed #de8886;
    color: #ffffff;
    text-shadow: 0 1px 1px #8c2726;
}
.sanpham ul {
	z-index: -1;
    position: relative;
    top: -30px;
    
    padding-top: 50px;
	width: 1330px;
    margin: 0 auto;
    background: #ffffff;
    background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);
    background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);
    background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);
    background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);
    background: #ffffff;
	
}
.top-header2 {
	padding: 15px;
    height: 20px;
    width: 1300px;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
	top: -20px;
}