@charset "UTF-8";

#wrapper > .txt {text-align: center;}
#wrapper > .txt p {margin: 0 0 5px;}
#subNav {max-width:1040px; width:100%; margin:30px auto; padding: 0 20px;}
#subNav li {width: 48%; text-align: center; font-size:20px; line-height:1.5; border:2px solid #ae4983;}
#subNav li:nth-of-type(1) {float: left;}
#subNav li:nth-of-type(2) {float: right;}
#subNav li a {display: block; padding: 15px; color: #ae4983;}
#subNav li a:hover {background: #ae4983; color: #fff;}
#subNav li .active {background: #ae4983; color: #fff;}
#subNav li .active:hover {background: #ae4983;}
#subNav li span {display:block; font-size:14px;}


@media screen and (max-width: 480px){
	#subNav li{width:100%; float: none !important;}
	#subNav li a {padding: 10px;}
	#subNav li:nth-of-type(1) {margin: 0 auto 10px;}
	#subNav li span{font-size:12px;}
}


/* =======================================================
						San pham sim son
======================================================= */
.read-more-trigger.changed{
	background-image: url(../images/common/arr_up.png);
}
.read-more-trigger {
	text-align: center;
	text-indent: 0;
	cursor: pointer;
	display: inline-block;
	padding: 0;
	color: #FFF;
	font-size: 2em;
	line-height: 2;
	width: 40px;
	height: 25px;
	position: relative;
	background-image: url(../images/common/arr_down.png);
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: center;
}

.viewMore {margin: 20px auto 0; text-align: center;}
.viewMore label {line-height: 1;}
.read-more-target {display: none;}

.simson .item .fade {
	width: 100%;
	height: 100%;
	position: relative;
}
.simson .itemCont .txt {
	margin: 0 auto 10px;
	text-align: left;
}

.simson .item h3 {
	color: #FFF;
	padding: 0;
	margin: 0 auto 20px;
}
.simson .item h3::before {
	border: 0;
}

.simson .item .btnTransparent > a {
	color: #FFF;
	border-color: #FFF;
}

.simson .item h3::after {
	position: static;
	background: none;
}
.simson .item h3 span {
	color: #FFF;
}

.simson .item {
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	color: #FFF;
	margin: 0 auto;
	padding: 0;
}
.simson .item:nth-of-type(1){
	height: 120vh;
}
.simson .item .itemCont {
	-webkit-transform:translateY(-50%); 
	-moz-transform:translateY(-50%); 
	-ms-transform:translateY(-50%);
	background: rgba(0,0,0,0.65);
	padding: 20px 30px;
	position: absolute;
	right: 5%;
	top: 50%;	
	width: 45%;
}
.simson .item:nth-of-type(1) .itemCont{
	transform:translateY(0); 
	-webkit-transform:translateY(0); 
	-moz-transform:translateY(0); 
	-ms-transform:translateY(0);
	top: 10%;
	width: 55%;
}
.simson .item:nth-of-type(2n+1) .itemCont{
	left: 5%;
}

.productList #group1{padding:0 0 20px;}
.productList #group1 .box{margin:0 0 30px;}
.productList #group1 h3{margin:0 0 15px; font-size:20px; text-align:center; font-weight:bold;}
.productList #group1 .box .txt {text-align: justify;}

.productList #group2 .inner{max-width:1250px; width:100%; padding:0 10px; margin:0 auto;}

.productList #group2 .productByCate {padding: 74px 0 0;}
.productList #group2 .productByCate:nth-of-type(2n+1) {background: #ededed;}

.productList #group2 h3{font-size:20px; font-weight:bold; text-align:center; margin:0 0 40px; letter-spacing:0.1em;}
.productList #group2 li{float:left; width:30%; margin:0 5% 5% 0; text-align:center;}
.productList #group2 li:nth-of-type(3n){margin:0 0 100px 0;}
.productList #group2 li:nth-of-type(3n+1){clear:both;}
.productList #group2 li a:hover .boxImg .img{transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05);}
.productList #group2 li figure{margin:0 0 20px; overflow: hidden; box-shadow: 2px 2px 5px #ccc;}
.productList #group2 li figure img {width:100%; transition: transform 1s; transition: -webkit-transform 1s;}
.productList #group2 li a:hover figure img {transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1);}
.productList #group2 li a:hover .tit{color:#ae4983;}

.productList #group2 .boxImg{margin:0 auto 10px; position:relative; max-width:243px; width:100%;}
.productList #group2 .boxImg .bg{position:absolute; top: -15px; left:0; width:100%; height:0; padding:0 0 100%; z-index:1;}
.productList #group2 .boxImg .inner{width:100%; position:relative; overflow:hidden; padding:0 0 100% 0; height:0; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; opacity: 0.7;}
.productList #group2 .boxImg .img {position:relative; z-index:10; transition: transform .75s; transition: -webkit-transform .75s; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;}

.productList #group2 .tit{font-size:20px; line-height:1.5; font-style:italic; font-weight:bold; margin:0 0 10px; font-family: 'EB Garamond', serif;}
.productList #group2 .btn {padding: 8px 30px; display:inline-block; border:2px solid #af4983; font-size: 16px; cursor: pointer; margin: 20px auto 0;}

.popNone{display:none;}
.productPop{padding:60px 120px 120px; line-height:1.5;}
.productPop .tit{margin:0 0 20px; font-size:30px; line-height:1.5; font-style:italic; font-weight:bold; font-family: 'EB Garamond', serif;}
.productPop .img{margin:0 0 30px;}
.productPop .txt{margin:0 0 30px;}
.productPop ul.list{margin:0 0 30px;}
.productPop ul.list li{margin:0 0 20px;}
.productPop .tit2{font-size:18px; text-transform:uppercase;}
.productPop .ingredient{position:relative; height:400px; background:url(../images/sanpham/pop1_img2.jpg) no-repeat center right; background-size:cover;}
.productPop .ingredient ul{max-width:405px; position:absolute; top:50%; right:20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.productPop .ingredient li{color:#fff; padding:7px 0; border-bottom:1px dotted #fff;}

.slick-prev,
.slick-prev:focus,
.slick-prev:hover {background: url(../images/common/btn_prev.png) no-repeat top left; width: 20px; height: 36px; background-size: 100% 100%; z-index: 999999; left: 10px;}

.slick-next,
.slick-next:focus,
.slick-next:hover {background: url(../images/common/btn_next.png) no-repeat top left; width: 20px; height: 36px; background-size: 100% 100%; z-index: 999999; right: 10px;}



@media screen and (max-width: 1500px){
	
	.simson .item:nth-of-type(1){
		height: 150vh;
		background-position: left 50%;	
	}
	.simson .item .itemCont {
		width: 50%;
		right: 2%;
	}
	.simson .item:nth-of-type(1) .itemCont{
		top: 5%;
		left: 5%;
		width: 60%;
	}
	
}

@media screen and (max-width: 1100px){
	.productPop{padding:30px 40px;}
}

@media screen and (max-width: 1024px){
	.simson .item {
		height: auto !important;
		padding: 50px 100px;
	}
	.simson #item01 {
		background-image: url(../images/sanpham/simson_img1_1024.jpg);
	}
	.simson .item .itemCont {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 auto;
		position: static;
		-webkit-transform:translateY(0) !important; -moz-transform:translateY(0) !important; -ms-transform:translateY(0) !important;
	}
}

@media screen and (max-width: 768px){
	.simson .item {
		padding: 50px 50px;
	}
}

@media screen and (max-width: 736px){
	.productList #group2 li{width:48%; margin:0 4% 70px 0;}
	.productList #group2 li:nth-of-type(3n){margin:0 4% 70px 0;}
	.productList #group2 li:nth-of-type(2n){margin:0 0 70px 0;}
	.productList #group2 li:nth-of-type(3n+1){clear:none;}
	.productList #group2 li:nth-of-type(2n+1){clear:both;}
	.productPop{padding:20px;}	

	.simson .item {
		height: auto !important;
		background: none !important;
		position: static !important;
		color: #000;
		padding: 0 !important;
	}
	
	.simson .item:nth-of-type(2n+1){
		background: #ededed !important;
	}

	.simson .item .fade {
		width: auto;
		height: auto;
		position: static;
	}
	.simson .item h3 {
		color: #000;
	}
	.simson .item h3 span {
		color: #ae4983;
	}
	.simson .item .btnTransparent > a {
		color: #000;
		border-color: #ae4983;
	}
	.simson .item .btnTransparent > a:hover {
		color: #fff;
	}
	.simson .itemCont {
		padding: 20px 10px !important;
		background: none !important;

	}
	.simson .itemCont .txt {
		margin: 10px auto;
	}
	.read-more-trigger {
		color: #000;
	}	
}

@media screen and (max-width: 480px){
	.productList #group2 li{max-width:360px; width:90% !important; margin:0 auto 70px !important; float:none;}
	.productList #group2 .boxImg{max-width:200px;}
	.productList #group2 .tit{font-size:20px;}

	.productPop{padding:10px;}
	.productPop .tit{font-size:20px;}
	.productPop .tit2{font-size:16px;}
	.productPop .ingredient{height:auto; padding:20px;}
	.productPop .ingredient ul{position:static; width:100%;
	transform: translateY(0%); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -moz-transform: translateY(0%);}
}
@media screen and (max-width: 480px){
	.productList #group2 .btn {font-size: 14px;}
}








/* =======================================================
				Dac san dao ngoc
======================================================= */
.specialties .specList{margin:0 0 100px;} 
.specialties .specList li{width: 30%; margin:0 5% 50px 0; float:left; line-height:1.5; text-align: center;}
.specialties .specList li:nth-of-type(3n){margin:0 0 50px;}

.specialties .specList figure{margin:0 0 20px; overflow: hidden; box-shadow: 2px 2px 5px #ccc;}
.specialties .specList figure img {width:100%; transition: transform 1s; transition: -webkit-transform 1s;}
.specialties .specList .tit{font-size:16px; font-weight:bold; text-align:center; margin:0 0 10px; text-transform:uppercase;}
.specialties .specList .btn {padding: 8px 30px; display:inline-block; border:2px solid #af4983; font-size: 16px; cursor: pointer; margin: 20px auto 0;}
.specialties .specList li a:hover figure img {transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1);}
.specialties .specList li a:hover .tit{color:#ae4983;}

@media screen and (max-width: 480px){
	.specialties .specList{margin:0 0 50px;}
	.specialties .specList li {max-width: 220px; width: 100%; float: none; margin: 0 auto 40px !important;}
	.specialties .specList figure{margin:0 auto 10px; width:100%;}
	.specialties .specList .btn {font-size: 14px;}
}