html, body{
	margin: 0;
	padding: 0;
}
.main{
	width: 100%;
	height: 100%;
}
/*menu ----------------------------------------------*/
.menu-slide{
	float: left;
	width: 100%;
	height: 316px;
	background: #FBF8F1;
	border-bottom: 1px solid #B67153;
}
.fm{
	padding-right: 0px;
	z-index: 2;
	height: 315px;
}
.frm-menu{
	padding-top: 5px;
	height: 315px;
	background: white;
	width: 100%;
}
.frm-menu a{
	text-decoration: none;
	color: #222222;
}
.frm-menu a:hover{
	color: #C9302C;
}
.frm-menu li:hover{
	color: #C9302C;
}
.frm-menu li{
	cursor: pointer;
	width: 100%;
	border: 0px;
}
/*menu thoi trang nam*/
.li-ttnam:hover .frm-ttnam{
	display: block;
	animation: a2 0.4s forwards;
}
@keyframes a2{
	0%{
		-webkit-transform: translateX(-40px);
		-moz-transform: translateX(-40px);
		-ms-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px);
	}
	100%{
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px);
	}
}
.frm-ttnam{
	display: none;
	position: absolute;
	margin-left: 165px;
	margin-top: -74px;
	box-shadow: 0 0 9px 3px #00000096;
	width: 200px;
	z-index: 3;
	height: 316px;
	background: white;
}
.frm-ttnam a{
	text-decoration: none;
	color: #222222;
}
.frm-ttnam a:hover{
	color: #C9302C;
}
/*menu thời trang nữ*/
.li-ttnu:hover .frm-ttnu{
	display: block;
	animation: a2 0.4s forwards;
}
.frm-ttnu{
	display: none;
	position: absolute;
	margin-left: 165px;
	margin-top: -113px;
	box-shadow: 0 0 9px 3px #00000096;
	width: 200px;
	z-index: 3;
	height: 316px;
	background: white;
}
.frm-ttnu a{
	text-decoration: none;
	color: #222222;
}
.frm-ttnu a:hover{
	color: #C9302C;
}
/*menu thời trang đông */
.li-ttdong:hover .frm-ttdong{
	display: block;
	animation: a2 0.4s forwards;
}
.frm-ttdong{
	display: none;
	position: absolute;
	margin-left: 165px;
	margin-top: -152px;
	box-shadow: 0 0 9px 3px #00000096;
	width: 200px;
	z-index: 3;
	height: 316px;
	background: white;
}
.frm-ttdong a{
	text-decoration: none;
	color: #222222;
}
.frm-ttdong a:hover{
	color: #C9302C;
}
/*menu phụ kiện nam*/
.li-pknam:hover .frm-pknam{
	display: block;
	animation: a2 0.4s forwards;
}
.frm-pknam{
	display: none;
	position: absolute;
	margin-left: 165px;
	margin-top: -191px;
	box-shadow: 0 0 9px 3px #00000096;
	width: 200px;
	z-index: 3;
	height: 316px;
	background: white;
}
.frm-pknam a{
	text-decoration: none;
	color: #222222;
}
.frm-pknam a:hover{
	color: #C9302C;
}
/*menu phụ kiện nữ*/
.li-pknu:hover .frm-pknu{
	display: block;
	animation: a2 0.4s forwards;
}
.frm-pknu{
	display: none;
	position: absolute;
	margin-left: 165px;
	margin-top: -230px;
	box-shadow: 0 0 9px 3px #00000096;
	width: 200px;
	z-index: 3;
	height: 316px;
	background: white;
}
.frm-pknu a{
	text-decoration: none;
	color: #222222;
}
.frm-pknu a:hover{
	color: #C9302C;
}
/*slide -----------------------------------------------*/
.fm-slide{
	padding-left: 0px;
}
/*responsive cho menu và slide ---------------------------------*/
@media screen and (max-width: 1198.5px) {
	.menu-slide{
		height: 261px;
	}
	.fm{
		height: 261px;
	}
	.frm-menu {
		height: 260px;
	}
	.frm-menu li{
		font-size: 11px;
	}
	.frm-ttnam{
		height: 260px;
		width: 170px;
		margin-left: 131px;
		margin-top: -64px;
	}
	.frm-ttnu{
		height: 260px;
		width: 170px;
		margin-left: 131px;
		margin-top: -98px;
	}
	.frm-ttdong{
		height: 260px;
		width: 170px;
		margin-left: 131px;
		margin-top: -133px;
	}
	.frm-pknam{
		height: 260px;
		width: 170px;
		margin-left: 131px;
		margin-top: -167px;
	}
	.frm-pknu{
		height: 260px;
		width: 170px;
		margin-left: 131px;
		margin-top: -201px;
	}
}
@media screen and (max-width: 990px){
	.menu-slide{
		height: 201px;
	}
	.fm{
		height: 200px;
	}
	.frm-menu{
		height: 200px;
	}
	.frm-menu li{
		font-size: 10px;
		padding-top: 5px;
	}
	.frm-ttnam{
		height: 200px;
		width: 120px;
		margin-left: 94px;
		margin-top: -51px;
	}
	.frm-ttnu{
		height: 200px;
		width: 120px;
		margin-left: 94px;
		margin-top: -79px;
	}
	.frm-ttdong{
		height: 200px;
		width: 120px;
		margin-left: 94px;
		margin-top: -106px;
	}
	.frm-pknam{
		height: 200px;
		width: 120px;
		margin-left: 94px;
		margin-top: -134px;
	}
	.frm-pknu{
		height: 200px;
		width: 120px;
		margin-left: 94px;
		margin-top: -161px;
	}
}
/*màn hình nhỏ hơn-----------------------------------*/
@media screen and (max-width: 1198.5px) {
	.timkiem{
		width: 500px;
	}
	.hv{
		width: 120px;
	}
	.search button[type=button]{
		margin-left: 430px;
	}
}
@media screen and (max-width: 990px){
	.timkiem{
		width: 330px;
		margin-left: -20px;
	}
	.timkiem input[type=text]{
		height: 35px;
		margin-top: 6px;
	}
	.timkiem button[type=button]{
		height: 30px;
		margin-top: -32px;
	}
	.hv{
		width: 100px;
		margin-top: 7px;
	}
	.cart_bt, .taikhoan{
		width: 125px;
	}
	.search button[type=button]{
		margin-left: 260px;
	}
}
/*----------------------------------------------*/
.hien{
	display: block;
	animation: a1 0.4s forwards;
}
@keyframes a1{
	0%{
		-webkit-transform: scale(0.85);
		-moz-transform: scale(0.85);
		-ms-transform: scale(0.85);
		-o-transform: scale(0.85);
		transform: scale(0.85);
	}
	100%{
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}
/*----------------------------------------------------*/
/*banner-image----------------------------------------*/
.banner-im{
	float: left;
	width: 100%;
	height: 140px;
	background: white;
	padding-top: 15px;
}
@media screen and (max-width: 1198.5px) {
	.banner-im{
		height: 110px;
	}
}
@media screen and (max-width: 990px){
	.banner-im{
		height: 90px;
	}
}
/*hot deal*/
.spnoibat{
	float: left;
	width: 100%;
	height: 420px;
	background: white;
	padding-top: 10px;
}
.spnoibat_main{
	width: 100%;
	height: 400px;
	border: 1px solid #794A35;
	padding-top: 40px;
	background: white;
}
.snb .col-xs-3{
	height: 360px;
}
.sp-img{
	width: 100%;
	height: 260px;
}
.sp-tensp{
	width: 100%;
	font-family: 'Courier New';
}
.sp-gh{
	width: 100%;
	margin-top: 10px;
	display: none;
}
.snb .col-xs-3:hover .sp-gh{
	display: block;
	animation: aa 0.4s forwards;
}
@keyframes aa{
	0%{
		transform: translateY(10px);
	}
	100%{
		transform: translateY(0px;);
	}
}
.sp-logo{
	position: absolute;
	margin-top: -62px;
	margin-left: -8px;
}
/*------------------*/
@media screen and (max-width: 1198.5px) {
	.spnoibat{
		height: 360px;
	}
	.sp-tensp{
		font-size: 12px;
	}
	.sp-img{
		height: 210px;
	}
	.sp-gh span{
		font-size: 11px;
	}
	.sp-gh i{
		font-size: 11px;
	}
	.spnoibat_main{
		height: 340px;
	}
	.snb .col-xs-3{
		height: 300px;
	}
	.sp-logo img{
		width: 100px;
		margin-left: 1.5px;
		margin-top: 4px;
	}
}
@media screen and (max-width: 990px){
	.spnoibat{
		height: 290px;
	}
	.sp-tensp{
		font-size: 9px;
	}
	.sp-img{
		height: 157px;
	}
	.sp-gh span{
		font-size: 8px;
	}
	.sp-gh i{
		font-size: 8px;
	}
	.sp-gh .btn{
		width: 100px;
		height: 23px;
		padding-top: 0px;
	}
	.spnoibat_main{
		height: 270px;
	}
	.snb .col-xs-3{
		height: 230px;
	}
	.sp-logo img{
		width: 80px;
		margin-left: 2.5px;
		margin-top: 8px;
	}
}
/*thời trang nam nổi bật-----------------------------*/
.ttnam{
	padding-top: 30px;
	width: 100%;
	height: 660px;
	background: white;
	float: left;
}
.ttnam-head{
	width: 100%;
	height: 300px;
}
.ttnam-sp{
	float: left;
	width: 600px;
	height: 300px;
	box-sizing: border-box;
	overflow: hidden;
}
.ttnam-sp img{
	transition: 0.5s;
}
.ttnam-sp:hover .tren{
	transform: rotate(40deg);
}
.ttnam-sp:hover .duoi{
	transform: rotate(-40deg);
}
.ttnam-sp:hover img{
	transform: scale(1.3) translateX(-50px);
}
.ttnam-sp a{
	text-decoration: none;
	color: white;
}
.nen{
	position: absolute;
	height: 300px;
	width: 600px;
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
	opacity: 0.7;
	margin-top: -300px;
}
.text{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 160px;
}
.tren{
	position: absolute;
	width: 400px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 90px;
	transition: 0.5s;
}
.duoi{
	position: absolute;
	width: 400px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 90px;
	transition: 0.5s;
}
.ttnam-sp1 img{
	transition: 0.5s;
}
.ttnam-sp1:hover .tren1{
	transform: rotate(40deg);
}
.ttnam-sp1:hover .duoi1{
	transform: rotate(-40deg);
}
.ttnam-sp1:hover img{
	transform: scale(1.3) translateX(-50px);
}
.ttnam-sp1{
	float: left;
	width: 540px;
	height: 300px;
	background: yellow;
	box-sizing: border-box;
	overflow: hidden;
}
.ttnam-sp1 a{
	text-decoration: none;
	color: white;
}
.nen1{
	position: absolute;
	height: 300px;
	width: 540px;
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
	opacity: 0.7;
	margin-top: -300px;
}
.text1{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 130px;
}
.tren1{
	position: absolute;
	width: 400px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 60px;
	transition: 0.5s;
}
.duoi1{
	position: absolute;
	width: 400px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 60px;
	transition: 0.5s;
}
.ttnam-bottom{
	width: 100%;
	height: 300px;
}
.text2{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 135px;
}
.ttnam-sp2{
	float: left;
	height: 300px;
	width: 270px;
	box-sizing: border-box;
	overflow: hidden;
}
.ttnam-sp2 a{
	text-decoration: none;
	color: white;
}
.ttnam-sp2 img{
	transition: 0.5s;
}
.ttnam-sp2 img{
	transition: 0.5s;
}
.ttnam-sp2:hover .tren3{
	transform: rotate(40deg);
}
.ttnam-sp2:hover .duoi3{
	transform: rotate(-40deg);
}
.ttnam-sp2:hover img{
	transform: scale(1.3) translateX(-20px);
}
.nen2{
	position: absolute;
	height: 300px;
	width: 270px;
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
	opacity: 0.7;
	margin-top: -300px;
}
.text3{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 30px;
}
.tren3{
	position: absolute;
	width: 240px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 15px;
	transition: 0.5s;
}
.duoi3{
	position: absolute;
	width: 240px;
	height: 0.7px;
	background: white;
	margin-top: -135px;
	margin-left: 15px;
	transition: 0.5s;
}
/*------------------*/
@media screen and (max-width: 1198.5px) {
	.ttnam-head{
		height: 260px;
	}
	.ttnam-sp{
		width: 520px;
		height: 260px;
	}
	.ttnam-sp img{
		width: 520px;
	}
	.ttnam-sp1{
		width: 420px;
		height: 260px;
	}
	.nen{
		height: 260px;
		width: 520px;
		margin-top: -260px;
	}
	.text{
		font-size: 35px;
		margin-top: -180px;
		margin-left: 160px;
	}
	.tren{
		width: 340px;
	}
	.duoi{
		width: 340px;
	}
	.nen1{
		height: 260px;
		width: 420px;
		margin-top: -300px;
	}
	.text1{
		font-size: 35px;
		margin-top: -222px;
		margin-left: 110px;
	}
	.text2{
		font-size: 35px;
		margin-top: -180px;
		margin-left: 126px;
	}
	.tren1{
		width: 340px;
		margin-top: -175px;
		margin-left: 40px;
	}
	.duoi1{
		width: 340px;
		margin-top: -175px;
		margin-left: 40px;
	}
	.ttnam-sp2{
		width: 210px;
		height: 260px;
	}
	.nen2{
		height: 260px;
		width: 210px;
		margin-top: -300px;
	}
	.text3{
		font-size: 32px;
		margin-top: -217px;
		margin-left: 20px;
	}
	.tren3{
		width: 180px;
		margin-top: -175px;
	}
	.duoi3{
		width: 180px;
		margin-top: -175px;
	}
}
@media screen and (max-width: 990px){
	.ttnam-head{
		height: 190px;
	}
	.ttnam-sp{
		width: 380px;
		height: 190px;
	}
	.ttnam-sp img{
		width: 430px;
	}
	.ttnam-sp1{
		width: 340px;
		height: 190px;
	}
	.nen{
		height: 190px;
		width: 380px;
		margin-top: -215px;
	}
	.text{
		font-size: 30px;
		margin-top: -160px;
		margin-left: 95px;
	}
	.tren{
		width: 280px;
		margin-left: 50px;
		margin-top: -120px;
	}
	.duoi{
		width: 280px;
		margin-left: 50px;
		margin-top: -120px;
	}
	.nen1{
		height: 190px;
		width: 340px;
		margin-top: -300px;
	}
	.text1{
		font-size: 30px;
		margin-top: -245px;
		margin-left: 80px;
	}
	.text2{
		font-size: 30px;
		margin-top: -160px;
		margin-left: 75px;
	}
	.tren1{
		width: 280px;
		margin-top: -205px;
		margin-left: 30px;
	}
	.duoi1{
		width: 280px;
		margin-top: -205px;
		margin-left: 30px;
	}
	.ttnam-sp2{
		width: 170px;
		height: 190px;
	}
	.nen2{
		height: 190px;
		width: 170px;
		margin-top: -300px;
	}
	.text3{
		font-size: 27px;
		margin-top: -242px;
		margin-left: 15px;
	}
	.tren3{
		width: 145px;
		margin-top: -205px;
	}
	.duoi3{
		width: 145px;
		margin-top: -205px;
	}
}
/*sản phẩm nổi bật thời trang nam*/
.spnoibat-ttnam{
	float: left;
	width: 100%;
	height: 60px;
	background: white;
}
.spnoibat-tittle{
	font-family:  'Courier New';
	font-size: 40px;
	width: 100%;
	float: left;
}
.gachchan{
	position: absolute;
	width: 200px;
	height: 1px;
	background: red;
	margin-left: 465px;
}
.sp-hang1{
	width: 100%;
	height: 350px;
	float: left;
	background: white;
}
.sp-hang2{
	width: 100%;
	height: 390px;
	float: left;
	background: white;
}
.card{
	float: left;
	width: 215px;
	height: 334px;
	margin-right: 16px;
	margin-top: 10px;
}
.card1{
	float: left;
	width: 215px;
	height: 334px;
	margin-top: 10px;
}
.card-img{
	float: left;
	width: 100%;
	height: 284px;
}
.card-info{
	float: left;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	overflow: hidden;
}
.card:hover .card-tt{
	transform: translateY(100px);
}
.card:hover .card-mh{
	transform: translateY(65px);
}
.card1:hover .card-tt{
	transform: translateY(100px);
}
.card1:hover .card-mh{
	transform: translateY(65px);
}
.card-tt{
	font-family: 'Courier New';
	padding-top: 5px;
	transition: 0.5s;
}
.card-mh{
	height: 50px;
	width: 100%;
	margin-top: -100px;
	transition: 0.5s;
}
.all{
	float: left;
	width: 100%;
	height: 50px;
	font-family: 'Courier New';
	padding-top: 10px;
}
.all a{
	text-decoration: underline;
	color: #222222;
	font-size: 20px;
}
.all a:hover{
	color: #0FCEE0;
}
@media screen and (max-width: 1198.5px) {
	.ttnam{
		height: 570px;
	}
	.spnoibat-ttnam{
		height: 60px;
	}
	.gachchan{
		margin-left: 368px;
	}
	.sp-hang1{
		height: 300px;
	}
	.sp-hang2{
		height: 350px;
	}
	.card{
		width: 177px;
		margin-right: 13.5px;
		height: 290px;
	}
	.card img{
		width: 177px;
	}
	.card1{
		width: 177px;
	}
	.card1 img{
		width: 177px;
	}
	.card-img{
		height: 233px;
	}
	.card-tt{
		font-size: 13px;
	}
	.all{
		margin-top: -40px;
	}
}
@media screen and (max-width: 990px){
	.ttnam{
		height: 430px;
	}
	.spnoibat-ttnam{
		height: 60px;
	}
	.spnoibat-ttnam span{
		font-size: 27px;
	}
	.gachchan{
		margin-left: 258px;
	}
	.sp-hang1{
		height: 240px;
	}
	.sp-hang2{
		height: 280px;
	}
	.card{
		width: 136px;
		margin-right: 10px;
		height: 240px;
	}
	.card img{
		width: 136px;
	}
	.card1{
		width: 136px;
	}
	.card1 img{
		width: 136px;
	}
	.card-img{
		height: 179px;
	}
	.card-tt{
		font-size: 10px;
	}
	.all{
		margin-top: -100px;
	}
	.all a{
		font-size: 15px;
	}
	.card-mh{
		margin-top: -90px;
	}
	.card-mh .btn{
		width: 100px;
		font-size: 10px;
	}
}
.text01{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 40px;
}
.text02{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 52px;
}
.text03{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -200px;
	margin-left: 257px;
}
@media screen and (max-width: 1198.5px) {
	.text01{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -225px;
		margin-left: 25px;
	}
	.text02{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -225px;
		margin-left: 33px;
	}
	.text03{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -185px;
		margin-left: 227px;
	}
	.text1-0{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -185px;
		margin-left: 177px;
	}
	.text1-1{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -185px;
		margin-left: 207px;
	}
}
@media screen and (max-width: 990px){
	.text01{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -245px;
		margin-left: 15px;
	}
	.text02{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -245px;
		margin-left: 24px;
	}
	.text03{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -160px;
		margin-left: 167px;
	}
}
.pkn{
	padding-top: 30px;
	width: 100%;
	height: 340px;
	background: #FBF8F1;
	float: left;
}
.text1-0{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -185px;
	margin-left: 217px;
}
.text1-1{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -185px;
	margin-left: 197px;
}
.text1-2{
	position: absolute;
	font-size: 40px;
	font-family: 'Courier New';
	margin-top: -185px;
	margin-left: 157px;
}
@media screen and (max-width: 1198.5px) {
	.pkn{
		height: 305px;
	}
	.text1-0{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -185px;
		margin-left: 187px;
	}
	.text1-1{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -220px;
		margin-left: 157px;
	}
	.text1-2{
		position: absolute;
		font-size: 35px;
		font-family: 'Courier New';
		margin-top: -225px;
		margin-left: 107px;
	}
}
@media screen and (max-width: 990px){
	.pkn{
		height: 230px;
	}
	.text1-0{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -160px;
		margin-left: 137px;
	}
	.text1-1{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -245px;
		margin-left: 120px;
	}
	.text1-2{
		position: absolute;
		font-size: 30px;
		font-family: 'Courier New';
		margin-top: -245px;
		margin-left: 87px;
	}
}