@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Currency
	3.2 Language
	3.3 Account
	3.4 Main Navigation
	3.5 Hamburger Menu
	3.6 Logo
	3.7 Main Slider
4. Banner
5. New Arrivals
	5.1 New Arrivals Sorting
	5.2 New Arrivals Products Grid
6. Deal of the week
7. Best Sellers
	7.1 Slider Nav
8. Benefit
9. Blogs
10. Newsletter
11. Footer



******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900');

/*********************************
2. Body and some general stuff
*********************************/

* {
	margin: 0;
	padding: 0;
}


div {
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ul {
	list-style: none;
	margin-bottom: 0px;
}

p {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	line-height: 1.7;
	font-weight: 500;
	color: #989898;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

	p a {
		display: inline;
		position: relative;
		color: inherit;
		border-bottom: solid 2px #fde0db;
		-webkit-transition: all 200ms ease;
		-moz-transition: all 200ms ease;
		-ms-transition: all 200ms ease;
		-o-transition: all 200ms ease;
		transition: all 200ms ease;
	}

a, a:hover, a:visited, a:active, a:link {
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

p a:active {
	position: relative;
	color: #FF6347;
}

p a:hover {
	color: #FF6347;
	background: #fde0db;
}

	p a:hover::after {
		opacity: 0.2;
	}

::selection {
	background: #fde0db;
	color: #FF6347;
}

p::selection {
	background: #fde0db;
}

h1 {
	font-size: 72px;
}

h2 {
	font-size: 40px;
}

h3 {
	font-size: 28px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
	color: #282828;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

	h1::selection,
	h2::selection,
	h3::selection,
	h4::selection,
	h5::selection,
	h6::selection {
	}

::-webkit-input-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}

:-moz-placeholder /* older Firefox*/ {
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}

::-moz-placeholder /* Firefox 19+ */ {
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}

:-ms-input-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}

::input-placeholder {
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}

.form-control {
	color: #db5246;
}

section {
	display: block;
	position: relative;
	box-sizing: border-box;
}

.clear {
	clear: both;
}

.clearfix::before, .clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}

.clearfix {
	zoom: 1;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.trans_200 {
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.trans_300 {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.trans_400 {
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}

.trans_500 {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.fill_height {
	height: 100%;
}

.super_container {
	width: 100%;
	overflow: hidden;
}

/*********************************
3. Home
*********************************/

/*.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 10;
}

.top_nav {
	width: 100%;
	height: 50px;
	background: #1e1e27;
}

.top_nav_left {
	height: 50px;
	line-height: 50px;
	font-size: 13px;
	color: #b5aec4;
	text-transform: uppercase;
}
*/



/*********************************
3.3 rung rinh
*********************************/

@keyframes shake {
	0% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	50% {
		transform: translateX(0);
	}

	75% {
		transform: translateX(5px);
	}

	100% {
		transform: translateX(0);
	}
}

.voucher {

	animation: shake 2.5s ease-in-out infinite; 
}



/*********************************
3.3 Account
*********************************/

.account {
	display: inline-block;
	position: relative;
	min-width: 50px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}

	.account > a {
		display: block;
		color: #b5aec4;
		font-weight: 400;
		height: 50px;
		line-height: 50px;
		font-size: 13px;
	}

		.account > a > i {
			margin-left: 8px;
		}

	.account:hover .account_selection {
		visibility: visible;
		opacity: 1;
		top: 100%;
	}

.account_selection {
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}

	.account_selection li {
		padding-left: 10px;
		padding-right: 10px;
		line-height: 50px;
	}

		.account_selection li a {
			display: block;
			color: #232530;
			border-bottom: solid 1px #dddddd;
			font-size: 14px;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

			.account_selection li a:hover {
				color: #b5aec4;
			}

		.account_selection li:last-child a {
			border-bottom: none;
		}

		.account_selection li a i {
			margin-right: 10px;
		}

/*********************************
3.4 Main Navigation
*********************************/

/* Container chính chứa navbar */
/*.main_nav_container {
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
	display: flex;
	justify-content: center;
	align-items: center; 
}*/

/* Navbar */
/*.navbar {
	width: auto;*/ /* Chiều rộng của navbar được điều chỉnh tự động */
	/*height: 80px;*/ /* Chiều cao của navbar */
	/*display: flex;
	justify-content: center;*/ /* Căn giữa các mục trong navbar theo chiều ngang */
	/*align-items: center;
}*/
.navbar-brand a {
	font-size: 30px;
	color: red;
	font-weight: 700;
	text-transform: uppercase;
}
	.navbar-brand a span {
		color: black;
	}
.navbar-nav-ul .nav-item {
	font-size: 15px;
	text-transform: uppercase;
}
/* Danh sách menu trong navbar */
/*.navbar_menu {
	display: flex;
	justify-content: center;*/ /* Căn giữa các mục trong navbar theo chiều ngang */
	/*align-items: center;
	list-style: none;
	margin-left: 100px;
}*/

	/* Các mục trong danh sách menu */
	/*.navbar_menu li {
		display: inline-block;
		margin: 0;
	}

		.navbar_menu li a {
			display: block;
			color: #1e1e27;
			font-size: 13px;
			font-weight: 500;
			text-transform: uppercase;
			padding: 20px;
			transition: color 0.3s ease;
		}

			.navbar_menu li a:hover {
				color: #b5aec4;
			}*/

/* Danh sách các mục người dùng */
.navbar_user {
	/*display: flex;*/
	margin-left: 0px; /* Khoảng cách giữa menu và các mục người dùng */
}

	/* Các mục người dùng */
	.navbar_user li {
		display: inline-block;
		text-align: center;
	}

		.navbar_user li a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 40px;
			height: 40px;
			color: #1e1e27;
			transition: color 0.3s ease;
		}

			.navbar_user li a:hover {
				color: #b5aec4;
			}

/* Checkout */
.checkout a {
	background: #eceff6;
	border-radius: 50%;
}

/* Số lượng trong checkout */
.checkout_items {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -9px;
	left: 22px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fe4c50;
	font-size: 12px;
	color: #FFFFFF;
}
/*********************************
company-services
	*********************************/

.icon-box {
	display: flex;
	flex-direction: column; 
	align-items: center;
	justify-content: center; 
	text-align: center; 
	padding: 20px;
}
	.icon-box img {
		flex-direction: column; 
	}
	.icon-box b p {
		text-transform: uppercase;
	}
.icon-box-content img {
	max-width: 50px;
	max-height: 50px;
	transition: transform 0.3s ease, padding-bottom 0.3s ease;
}
.icon-box p {
	color:black
}

.icon-box-content:hover img {
	transform: translateY(-10px); 
	padding-bottom: 0;
}
.icon-box-content:hover b {
	color: red
}
.icon-box-content:hover p {
	color: red;
}
.navbar-nav li {
	color: black;
}
/*********************************
3.5 Hamburger Menu
*********************************/
.hamburger_container {
	display: none;
	margin-left: 40px;
}

	.hamburger_container i {
		font-size: 24px;
		color: #1e1e27;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

	.hamburger_container:hover i {
		color: #b5aec4;
	}

.hamburger_menu {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: rgba(255,255,255,0.95);
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

	.hamburger_menu.active {
		right: 0;
	}

.fs_menu_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9;
	background: rgba(255,255,255,0);
	pointer-events: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.hamburger_close {
	position: absolute;
	top: 26px;
	right: 10px;
	padding: 10px;
	z-index: 1;
}

	.hamburger_close i {
		font-size: 24px;
		color: #1e1e27;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

	.hamburger_close:hover i {
		color: #b5aec4;
	}

.hamburger_menu_content {
	padding-top: 100px;
	width: 100%;
	height: 100%;
	padding-right: 20px;
}

.menu_item {
	display: block;
	position: relative;
	border-bottom: solid 1px #b5aec4;
	vertical-align: middle;
}

	.menu_item > a {
		display: block;
		color: #1e1e27;
		font-weight: 500;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		text-transform: uppercase;
	}

		.menu_item > a:hover {
			color: #b5aec4;
		}

		.menu_item > a > i {
			margin-left: 8px;
		}

	.menu_item.active .menu_selection {
		display: block;
		visibility: visible;
		opacity: 1;
	}

.menu_selection {
	margin: 0;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

	.menu_selection li {
		padding-left: 10px;
		padding-right: 10px;
		line-height: 50px;
	}

		.menu_selection li a {
			display: block;
			color: #232530;
			border-bottom: solid 1px #dddddd;
			font-size: 13px;
			text-transform: uppercase;
			-webkit-transition: opacity 0.3s ease;
			-moz-transition: opacity 0.3s ease;
			-ms-transition: opacity 0.3s ease;
			-o-transition: opacity 0.3s ease;
			transition: all 0.3s ease;
		}

			.menu_selection li a:hover {
				color: #b5aec4;
			}

		.menu_selection li:last-child a {
			border-bottom: none;
		}

/*********************************
3.6 Logo
*********************************/

.logo_container {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 15px;
}

	.logo_container a {
		font-size: 30px;
		color: #1e1e27;
		font-weight: 700;
		text-transform: uppercase;
	}

		.logo_container a span {
			color: #fe4c50;
		}
.bg-text-left {
	top: 10px;
	left: 10px;
	font-size: 100px; /* Adjust as needed */
	color: rgba(255, 255, 255, 0.8);
	mix-blend-mode: overlay;
	text-transform: uppercase;
	font-weight: 700;
	font-family: "Teko", sans-serif;
	letter-spacing: 0;
	line-height: 1em;
	font-style: italic;
	opacity: 0.3;
}
/*********************************
3.7 Main Slider
*********************************/
.nameproduct_Banner {
	text-transform: uppercase;
	color: white;
}
.Best {
	font-size: 40px;
	line-height: .85em;
	color: #f57212;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
}
.model_Banner {
	font-size: 20px;
	line-height: .85em;
	color: #23c050;
	font-family: "Teko", sans-serif;
	text-transform: uppercase;
}
.main_slider {
	width: 100%;
	height: 700px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-top: 150px;
}

.main_slider_content {
	width: 60%;
}

	.main_slider_content h6 {
		font-weight: 500;
		text-transform: uppercase;
		margin-bottom: 29px;
	}

	.main_slider_content h1 {
		font-weight: 400;
		line-height: 1;
	}

.red_button {
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 40px;
	background: #fe4c50;
	border-radius: 3px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

	.red_button:hover {
		background: #FE7C7F !important;
	}

	.red_button a {
		display: block;
		color: #FFFFFF;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		line-height: 40px;
		width: 100%;
	}

.shop_now_button {
	width: 140px;
	margin-top: 32px;
}

/*********************************
4. Banner
*********************************/

.banner {
	width: 100%;
	margin-top: 30px;
}

.banner_item {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 265px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.banner_category {
	height: 50px;
	background: #FFFFFF;
	min-width: 180px;
	padding-left: 25px;
	padding-right: 25px;
}

	.banner_category a {
		display: block;
		color: #1e1e27;
		text-transform: uppercase;
		font-size: 22px;
		font-weight: 600;
		text-align: center;
		line-height: 50px;
		width: 100%;
		-webkit-transition: color 0.3s ease;
		-moz-transition: color 0.3s ease;
		-ms-transition: color 0.3s ease;
		-o-transition: color 0.3s ease;
		transition: color 0.3s ease;
	}

		.banner_category a:hover {
			color: #b5aec4;
		}
/* Default styles for all screen sizes */
.banner-content {
	position: relative;
	padding: 20px;
	color: #333;
}

.bg-text-left, .bg-text-right {
	position: absolute;
	font-weight: bold;
	z-index: 1;
	white-space: nowrap;
}

.bg-text-left {
	top: 10px;
	left: 10px;
	font-size: 100px; /* Adjust as needed */
	color: rgba(255, 255, 255, 0.8);
	mix-blend-mode: overlay;
	text-transform: uppercase;
	font-weight: 700;
	font-family: "Teko", sans-serif;
	letter-spacing: 0;
	line-height: 1em;
	font-style: italic;
	opacity: 0.3;
	z-index: 1;
}

.bg-text-right {
	top: 80%;
	transform: translateY(-50%);
	left: -60px;
	font-size: 50px; /* Adjust as needed */
	color: rgba(255, 255, 255, 0.8);
	mix-blend-mode: overlay;
	text-transform: uppercase;
	font-weight: 700;
	font-family: "Teko", sans-serif;
	letter-spacing: 0;
	line-height: 1em;
	font-style: italic;
	opacity: 0.3;
	z-index: 1; /* Ensure it is below the image */
}

.imageBanner {
	position: relative;
	z-index: 2; /* Ensure it is above the span */
	max-width: 100%;
	height: auto;
}

.nameproduct_Banner {
	position: relative;
	z-index: 2;
	font-size: 48px; /* Adjust as needed */
}

/* Hide .bg-text-left and .bg-text-right on small screens */
@media (max-width: 767px) {
	.bg-text-left, .bg-text-right {
		display: none;
	}
}

@media (min-width: 768px) {
	.bg-text-left, .bg-text-right {
		font-size: 150px;
	}
}

@media (min-width: 992px) {
	.bg-text-left {
		font-size: 200px; /* Adjust as needed */
	}

	.bg-text-right {
		font-size: 150px;
	}

	.nameproduct_Banner {
		font-size: 80px; /* Adjust as needed */
	}
}

/*#billboard {*/
/*	background-image: url('/images/background/bg-slider-2.jpg');*/
	/*background-image: none;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;*/
	/*height: auto;
}*/

.swiper-slide {
	background-color: transparent;

}

.image-holder img {
	max-width: 100%;
	height: auto;
}

.banner-content {
	position: relative;
	padding: 20px;
	color: #fff;
}

/* Đảm bảo big-banner có vị trí tương đối để các phần tử con sử dụng position:absolute dựa trên nó */

@media only screen and (max-width: 1800px) {
}




.nameproduct_Bannerleft {
	color: white;
	z-index: 2;
	position: relative;
}


.imageBanner {
	position: relative;
	z-index: 2; /* Ensure it is above the span */
	max-width: 100%;
	height: auto;
}
.image-holder img {
	max-width: 100%;
	height: auto;
	z-index: 4; /* Ensure it is above the span */
}

/*********************************
5. search
*********************************/
@media (max-width: 480px) {
	/*.bg-sg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		opacity: 0.8;
		z-index: 70;
		display: none;
		margin-top:-80px;
	}*/
}


@media (min-width: 768px) {
	
}

@media (min-width: 992px) {
	
}
       /* .bg-sg {
            position: fixed;
            top: 15%;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: 0.8;
            z-index: 70;
            display: none;
        }*/
.hide {
	display: none;
}


.inner-form {
	width: 100%;
	margin-bottom: 17px;
}

 .inner-form .input-field {
	width: 100%;
	position: relative;
}

	.navSearch .inner-form .input-field .choices {
		margin-bottom: 0;
	}

		.navSearch .inner-form .input-field .choices .choices__inner {
			min-height: 70px;
			width: 100%;
			background: transparent;
			border: 0;
			background: #fff;
			display: block;
			width: 100%;
			padding: 10px 70px 10px 32px;
			font-size: 18px;
			color: #666;
			border-radius: 34px;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-ms-flex-align: center;
			align-items: center;
		}

			.navSearch .inner-form .input-field .choices .choices__inner .choices__list .choices__item {
				background: #e7e7e7;
				color: #333;
				line-height: 33px;
				border: 0;
				padding: 0 20px;
				font-size: 16px;
			}

				.navSearch .inner-form .input-field .choices .choices__inner .choices__list .choices__item .choices__button {
					border-left: 0;
					color: #b2b2b2;
					background-image: url(../images/icons/close.svg);
					background-size: 14px auto;
					padding-left: 0;
					opacity: .3;
					transition: all .2s ease-out, color .2s ease-out;
				}

					.navSearch .inner-form .input-field .choices .choices__inner .choices__list .choices__item .choices__button:hover {
						opacity: 1;
					}

			.navSearch .inner-form .input-field .choices .choices__inner .choices__input {
				font-size: 16px;
				color: #333;
				background-color: transparent;
				margin-bottom: 0;
			}

		.navSearch .inner-form .input-field .choices .choices__list--dropdown {
			background: transparent;
			font-size: 16px;
			color: #fff;
			border: 0;
			padding: 0 32px;
		}

			.navSearch .inner-form .input-field .choices .choices__list--dropdown .choices__item {
				font-size: 13px;
				height: 25px;
				line-height: 1.3;
				padding: 0;
				padding-top: 5px;
				opacity: .7;
			}

	.navSearch .inner-form .input-field .btn-search {
		width: 50px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		align-items: center;
	}

		.navSearch .inner-form .input-field .btn-search svg {
			fill: #333;
			width: 20px;
			height: 20px;
			transition: all .2s ease-out, color .2s ease-out;
		}

		.navSearch .inner-form .input-field .btn-search:hover, .navSearch .inner-form .input-field .btn-search:focus {
			outline: 0;
			box-shadow: none;
		}

			.navSearch .inner-form .input-field .btn-search:hover svg, .navSearch .inner-form .input-field .btn-search:focus svg {
				fill: #000;
			}

.search-suggestion {
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	background-color: white;
	color: #000;
	z-index: 1000;
	/*display: block;*/
	/* border: 1px solid #ccc; */
	padding: 10px;
	border-bottom-left-radius: 15px; 
	border-bottom-right-radius: 15px; 
}
.search-suggestion-product:hover img {
	transform: translateY(-10px); /* Di chuyển ảnh lên trên */
	padding-bottom: 0; /* Loại bỏ padding-bottom khi hover */
}

	.search-suggestion .row {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.search-suggestion img {
		max-width: 70px;
		margin-right: 10px;
	}

	.search-suggestion p {
		margin: 0;
		padding-left: 10px;
		
		color:black;
	}
	.search-suggestion .productPrice {
		font-weight: bold;
		color: red
	}
	.search-suggestion .productSale {
		text-decoration: line-through;
		color:grey ;font-weight: bold; /* Chữ đậm */
	}
	/*.search-suggestion p:hover {
			background-color: #0056b3;
		}*/
	/*.navSearch {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}*/
	.navSearch_input {
		border: none;
		background-color: transparent;
		padding: 0;
	}

.navSearch button {
	border: none;
	background-color: transparent;
}


.nav-search {
	z-index: 90;
	margin-top: 30px;
	 
	display: flex;
	justify-content: center; /* Căn giữa theo chiều ngang */
	align-items: center; /* Căn giữa theo chiều dọc */
}

	.nav-search .nav-search-row {
		
		width: 100%; /* Đảm bảo hàng chiếm toàn bộ chiều rộng của nav-search */
		display: flex;
		justify-content: center; /* Căn giữa phần tử con bên trong row */
	}
	.nav-search .search_input{
		border:none;
	}
	.nav-search .nav-search-group {
		border: none;
	}
	.nav-search .nav-search-col {
		display: flex;
		justify-content: center; /* Căn giữa phần tử con bên trong col-md-8 */
		flex-direction: column; /* Căn giữa theo chiều dọc */
	}

.s130 {
	width: 100%;
}

.input-group {
	width: 100%;
}

.form-control {
	width: 100%;
}



.nav-main {
	z-index: 999;
}

.swal2-container-custom {
	z-index: 999999 !important;
}

.swal2-container {
	z-index: 999999 !important;
}

/* Thiết lập phần tử Swal ở giữa trang */
.swal2-popup {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
}
.inner-form .input-field .choices {
	margin-bottom: 0;
}

	 .inner-form .input-field .choices .choices__inner {
		min-height: 70px;
		width: 100%;
		background: transparent;
		border: 0;
		background: #fff;
		display: block;
		width: 100%;
		padding: 10px 70px 10px 32px;
		font-size: 18px;
		color: #666;
		border-radius: 34px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: center;
		align-items: center;
	}

		 .inner-form .input-field .choices .choices__inner .choices__list .choices__item {
			background: #e7e7e7;
			color: #333;
			line-height: 33px;
			border: 0;
			padding: 0 20px;
			font-size: 16px;
		}

			 .inner-form .input-field .choices .choices__inner .choices__list .choices__item .choices__button {
				border-left: 0;
				color: #b2b2b2;
				background-image: url(../images/icons/close.svg);
				background-size: 14px auto;
				padding-left: 0;
				opacity: .3;
				transition: all .2s ease-out, color .2s ease-out;
			}

				 .inner-form .input-field .choices .choices__inner .choices__list .choices__item .choices__button:hover {
					opacity: 1;
				}

		 .inner-form .input-field .choices .choices__inner .choices__input {
			font-size: 16px;
			color: #333;
			background-color: transparent;
			margin-bottom: 0;
		}

	 .inner-form .input-field .choices .choices__list--dropdown {
		background: transparent;
		font-size: 16px;
		color: #fff;
		border: 0;
		padding: 0 32px;
	}
.inner-form .input-field .choices .choices__list--dropdown .choices__item {
			font-size: 13px;
			height: 25px;
			line-height: 1.3;
			padding: 0;
			padding-top: 5px;
			opacity: .7;
		}

 .inner-form .input-field .btn-search {
	width: 70px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	align-items: center;
}

	 .inner-form .input-field .btn-search svg {
		fill: #333;
		width: 40px;
		height: 40px;
		transition: all .2s ease-out, color .2s ease-out;
	}

	 .inner-form .input-field .btn-search:hover, .s004 form .inner-form .input-field .btn-search:focus {
		outline: 0;
		box-shadow: none;
	}

		.inner-form .input-field .btn-search:hover svg, .s004 form .inner-form .input-field .btn-search:focus svg {
			fill: #000;
		}

/*********************************
5. New Arrivals
*********************************/

.new_arrivals {
	width: 100%;
}

.new_arrivals_title {
	margin-top: 74px;
}

/*********************************
5.1 New Arrivals Sorting
*********************************/

.new_arrivals_sorting {
	display: inline-block;
	border-radius: 3px;
	margin-top: 59px;
	overflow: visible;
}

.grid_sorting_button {
	height: 40px;
	min-width: 102px;
	padding-left: 25px;
	padding-right: 25px;
	cursor: pointer;
	border: solid 1px #ebebeb;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	background: #FFFFFF;
	border-radius: 3px;
	margin: 0;
	float: left;
	margin-left: -1px;
}

	.grid_sorting_button:first-child {
		margin-left: 0px;
	}

	.grid_sorting_button:last-child {
	}

	.grid_sorting_button.active:hover {
		background: #FE7C7F !important;
	}

	.grid_sorting_button.active {
		color: #FFFFFF;
		background: #fe4c50;
	}

/*********************************
5.2 New Arrivals Products Grid
*********************************/

.product-grid {
	width: 100%;
	margin-top: 57px;
}

.product-item {
	
	height: 390px;
	cursor: pointer;
}

	.product-item::after {
		display: block;
		position: absolute;
		top: 0;
		left: -1px;
		width: calc(100% + 1px);
		height: 100%;
		pointer-events: none;
		content: '';
		/*border: solid 2px rgba(235,235,235,0);
		border-radius: 3px;*/
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.product-item:hover::after {
		box-shadow: 0 25px 29px rgba(63, 78, 100, 0.15);
		border: solid 2px rgba(235,235,235,1);
	}

.product {
	width: 100%;
	height: 340px;
	border-right: solid 1px #e9e9e9;
}

.product_image {
	width: 100%;
}

	.product_image img {
		width: 100%;
	}

.product_info {
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

.product_name {
	margin-top: 27px;
}

	.product_name a {
		color: #1e1e27;
		line-height: 20px;
	}

	.product_name:hover a {
		color: #b5aec4;
	}

.discount .product_info .product_price {
	font-size: 14px;
}


.product-card {
	position: relative; /* Để các phần tử con có thể định vị tuyệt đối hoặc tương đối với nó */
}

.pin {
	position: absolute;
	bottom: 40%;
	left: 2%;
	z-index: 100;
	background-color: #5dad3c;
	display: inline-block;
	white-space: nowrap;
	width: auto;
}
	.pin p {
		color: white;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}

	.image-holder {
		position: relative; /* Để hình ảnh trong có thể định vị tuyệt đối hoặc tương đối */
	}

	.image-holder img {
		display: block;
		width: 100%;
		height: auto;
	}


.product_price {
	font-size: 16px;
	color: #fe4c50;
	font-weight: 600;
}

	.product_price span {
		font-size: 12px;
		margin-left: 10px;
		color: #b5aec4;
		text-decoration: line-through;
	}
	 .product_price_cost {
		font-size: 12px;
		margin-left: 10px;
		color: #b5aec4;
		text-decoration: line-through;
	}

.product_bubble {
	position: absolute;
	top: 15px;
	width: 50px;
	height: 22px;
	border-radius: 3px;
	text-transform: uppercase;
}

	.product_bubble span {
		font-size: 12px;
		font-weight: 600;
		color: #FFFFFF;
	}

.product_bubble_right::after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 6px;
	right: auto;
	top: auto;
	bottom: -6px;
	border: 6px solid;
}

.product_bubble_left::after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: auto;
	right: 6px;
	bottom: -6px;
	border: 6px solid;
}

.product_bubble_red::after {
	border-color: transparent transparent transparent #fe4c50;
}

.product_bubble_left::after {
	border-color: transparent transparent transparent #000;
}


.product_bubble_red {
	background: #fe4c50;
}

.product_bubble_green {
	background-color: black;
}

.product_bubble_left {
	left: 15px;
}

.product_bubble_right {
	right: 15px;
}

.add_to_cart_button {
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

	.add_to_cart_button a {
		font-size: 12px;
		font-weight: 600;
	}

.product-item:hover .add_to_cart_button {
	visibility: visible;
	opacity: 1;
}

.favorite {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #b9b4c7;
	width: 17px;
	height: 17px;
	visibility: hidden;
	opacity: 0;
}

.favorite_left {
	left: 15px;
}

.favorite.active {
	visibility: visible;
	opacity: 1;
}

.product-item:hover .favorite {
	visibility: visible;
	opacity: 1;
}

.favorite.active::after {
	font-family: 'FontAwesome';
	content: '\f004';
	color: #fe4c50;
}

.favorite::after {
	font-family: 'FontAwesome';
	content: '\f08a';
}

.favorite:hover::after {
	color: #fe4c50;
}

/*********************************
6. Deal of the week
*********************************/

.deal_ofthe_week {
	width: 100%;
	margin-top: 41px;
	background: #f2f2f2;
}

.deal_ofthe_week_img {
	height: 540px;
}

	.deal_ofthe_week_img img {
		height: 100%;
	}

.deal_ofthe_week_content {
	height: 100%;
}

.section_title {
	display: inline-block;
	text-align: center;
}

	.section_title h2 {
		display: inline-block;
	}

	.section_title::after {
		display: block;
		position: absolute;
		top: calc(100% + 13px);
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 60px;
		height: 5px;
		background: #fe4c50;
		content: '';
	}

.timer {
	margin-top: 66px;
}

	.timer li {
		display: inline-block;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		background: #FFFFFF;
		margin-right: 10px;
	}

		.timer li:last-child {
			margin-right: 0px;
		}

.timer_num {
	font-size: 48px;
	font-weight: 600;
	color: #fe4c50;
	margin-top: 10px;
}

.timer_unit {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	color: #51545f;
}

.deal_ofthe_week_button {
	width: 140px;
	background: #1e1e27;
	margin-top: 52px;
}

	.deal_ofthe_week_button:hover {
		background: #2b2b34 !important;
	}

/*********************************
7. Best Sellers
*********************************/

.product_slider_container {
	width: 100%;
	height: 340px;
	margin-top: 73px;
}

	.product_slider_container::after {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #FFFFFF;
		content: '';
		z-index: 1;
	}

.product_slider {
	overflow: visible !important;
}

.product_slider_item .product-item {
	height: 340px;
}

.product_slider_item {
	width: 20%;
}

	.product_slider_item .product-item {
		width: 100% !important;
	}

/*********************************
7.1 Slider Nav
*********************************/

.product_slider_nav {
	position: absolute;
	width: 30px;
	height: 70px;
	background: #d3d3d6;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.product_slider_container:hover .product_slider_nav {
	visibility: visible;
	opacity: 1;
}

.product_slider_nav i {
	color: #FFFFFF;
	font-size: 12px;
}

.product_slider_nav_left {
	top: 50%;
	left: 0;
}

.product_slider_nav_right {
	top: 50%;
	right: 0;
}

/*********************************
8. Benefit
*********************************/

.benefit {
	margin-top: 74px;
}

.benefit_row {
	padding-left: 15px;
	padding-right: 15px;
}

.benefit_col {
	padding-left: 0px;
	padding-right: 0px;
}

.benefit_item {
	height: 100px;
	background: #f3f3f3;
	border-right: solid 1px #FFFFFF;
	padding-left: 25px;
}

.benefit_col:last-child .benefit_item {
	border-right: none;
}

.benefit_icon i {
	font-size: 30px;
	color: #fe4c50;
}

.benefit_content {
	padding-left: 22px;
}

	.benefit_content h6 {
		text-transform: uppercase;
		line-height: 18px;
		font-weight: 500;
		margin-bottom: 0px;
	}

	.benefit_content p {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 0px;
		color: #51545f;
	}

/*********************************
9. Blogs
*********************************/

.blogs {
	margin-top: 72px;
}

.blogs_container {
	margin-top: 53px;
}

.blog_item {
	height: 255px;
	width: 100%;
}

.blog_background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius:5%;
}

.blog_content {
	position: absolute;
	top: 30px;
	left: 30px;
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	background: rgba(255,255,255,0.9);
	padding-left: 10px;
	padding-right: 10px;
	visibility: hidden;
	opacity: 0;
	transform-origin: center center;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.blog_item:hover .blog_content {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.blog_title {
	font-weight: 500;
	line-height: 1.25;
	margin-bottom: 0px;
}

.blog_meta {
	font-size: 12px;
	line-height: 30px;
	font-weight: 400;
	text-transform: uppercase;
	color: #51545f;
	margin-bottom: 0px;
	margin-top: 3px;
	letter-spacing: 1px;
}

.blog_more {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	color: #fe4c50;
	border-bottom: solid 1px #fe4c50;
	margin-top: 12px;
}

	.blog_more:hover {
		color: #FE7C7F;
	}

/*********************************
10. Newsletter
*********************************/

.newsletter {
	width: 100%;
	background: #f2f2f2;
	margin-top: 81px;
}

.newsletter_text {
	height: 120px;
}

	.newsletter_text h4 {
		margin-bottom: 0px;
		line-height: 24px;
	}

	.newsletter_text p {
		margin-bottom: 0px;
		line-height: 1.7;
		color: #51545f;
	}

.newsletter_form {
	height: 120px;
}

#newsletter_email {
	width: 300px;
	height: 46px;
	background: #FFFFFF;
	border: none;
	padding-left: 20px;
}

	#newsletter_email:focus {
		border: solid 1px #7f7f7f !important;
		box-shadow: none !important;
	}

:focus {
	outline: none !important;
}

#newsletter_email::-webkit-input-placeholder {
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}

#newsletter_email:-moz-placeholder /* older Firefox*/ {
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}

#newsletter_email::-moz-placeholder /* Firefox 19+ */ {
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}

#newsletter_email:-ms-input-placeholder {
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}

#newsletter_email::input-placeholder {
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}

.newsletter_submit_btn {
	width: 160px;
	height: 46px;
	border: none;
	background: #fe4c50;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}

	.newsletter_submit_btn:hover {
		background: #FE7C7F;
	}

/*********************************
11. Footer
*********************************/

.footer_nav_container {
	height: 130px;
}

.cr {
	margin-right: 48px;
}

.footer_nav li {
	display: inline-block;
	margin-right: 45px;
}

	.footer_nav li:last-child {
		margin-right: 0px;
	}

	.footer_nav li a, .cr {
		font-size: 14px;
		color: #51545f;
		line-height: 30px;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-ms-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

		.footer_nav li a:hover, .cr a, .cr i {
			color: #fe4c50;
		}

.footer_social {
	height: 130px;
}

	.footer_social ul li {
		display: inline-block;
		margin-right: 10px;
	}

		.footer_social ul li:last-child {
			margin-right: 0px;
		}

		.footer_social ul li a {
			color: #51545f;
			-webkit-transition: all 300ms ease;
			-moz-transition: all 300ms ease;
			-ms-transition: all 300ms ease;
			-o-transition: all 300ms ease;
			transition: all 300ms ease;
			padding: 10px;
		}

		.footer_social ul li:last-child a {
			padding-right: 0px;
		}

		.footer_social ul li a:hover {
			color: #fe4c50;
		}
/*********************************
12. Shipping
*********************************/
.Shipping_img  {
	max-width: 50px;
	max-height: 50px;
}