/* ---------------------------------------------------------
    * Name: Onsus - Multipurpose eCommerce
    * Version: 1.0.0
    * Author: Themesflat
    * Author URI: http://themesflat.com 

	* Abstracts variable

    * Reset css styles

    * Components

        * header
        * footer
        * tabs
        * button
        * form
        * drop down
        * carousel
        * box icon
        * hover
        * product
        * blog
        * accordion
        * zoom
        * shop
        * nice select

    * section

    * Responsive
 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.cdnfonts.com/css/helvetica-neue-55");
@import url(bootstrap-select.min.css);

:root {
	--white: #ffffff;
	--black: #000000;
	--text: #909090;
	--text-2: #505050;
	--text-3: #333333;
	--text-4: #40484E;
	--text-5: #2C3135;
	--text-7: #FDFEFE;
	--gray: #333e48;
	--gray-2: #73787d;
	--gray-4: #e1e1e1;
	--gray-5: #ebebeb;
	--gray-6: #f5f5f5;
	--primary: #0683bb;
	--primary-2: #D80027;
	--secondary: #004ec3;
	--third: #FCB500;
	--third-2: #FFE604;
	--third-3: #FFDC00;
	--third-4: #FFDF8B;
	--line: #e1e1e1;
	--line-2: #ececec;
	--line-3: #4f4f4f;
	--line-4: #BFC6CC;
	--bg: #fafafa;
	--bg-2: #F8F8F8;
	--bg-3: #F6F6F6;
	--price: #FFEAB6;
}

/*---------- Reset css styles ----------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

/* Elements
-------------------------------------------------------------- */
html {
	margin-right: 0 !important;
	scroll-behavior: smooth;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", serif;
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	background-color: var(--white);
	font-style: normal;
	color: var(--gray);
	overflow-x: hidden;
}

	body::-webkit-scrollbar {
		width: 3px;
	}

	body::-webkit-scrollbar-thumb {
		background-color: var(--primary);
		border-radius: 5px;
		cursor: grab;
	}

	body.no-scroll {
		overflow: hidden;
	}

img {
	max-width: 100%;
	height: auto;
	transform: scale(1);
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
}

.row {
	margin-right: -15px;
	margin-left: -15px;
}

	.row > * {
		padding-left: 15px;
		padding-right: 15px;
	}

ul,
li {
	list-style-type: none;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

.container {
	max-width: 1520px;
	padding-right: 15px;
	padding-left: 15px;
}

.container-full {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0px 15px;
}

svg path {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

textarea {
	resize: none;
}

select {
	outline: 0;
}

/* Placeholder color */
::-webkit-input-placeholder {
	color: var(--text-3);
}

:-moz-placeholder {
	color: var(--text-3);
}

::-moz-placeholder {
	color: var(--text-3);
	opacity: 1;
}

button:focus-within,
button:focus-visible,
button:focus {
	outline: none;
}

/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder {
	color: var(--secondary-2);
}

/* Typography
-------------------------------------------------------------- */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Inter", serif;
	text-rendering: optimizeLegibility;
	color: var(--grey-1);
	font-weight: 500;
	margin-bottom: 0;
}

h1,
.h1 {
	font-size: 60px;
	line-height: 80px;
}

h2,
.h2 {
	font-size: 50px;
	line-height: 61px;
}

h3,
.h3 {
	font-size: 40px;
	line-height: 60px;
}

h4,
.h4 {
	font-size: 30px;
	line-height: 36px;
}

h5,
.main-title,
.title-normal {
	font-size: 22px;
	line-height: 25px;
}

h6,
.product-title {
	font-size: 18px;
	line-height: 24px;
}

.text-xl {
	font-size: 48px;
	line-height: 50px;
}

.main-title-2 {
	font-size: 25px;
	line-height: 38px;
}

.main-title-3 {
	font-size: 24px;
	line-height: 33px;
}

.product-title-2 {
	font-size: 18px;
	line-height: 27px;
}

.price-text {
	font-size: 20px;
	line-height: 22px;
}

.price-text-2 {
	font-size: 19px;
	line-height: 29px;
}

.title-sidebar {
	font-size: 16px;
	line-height: 18px;
}

.title-sidebar-2 {
	font-size: 16px;
	line-height: 24px;
}

.body-md-2 {
	font-size: 14px;
	line-height: 22px;
}

.body-text-3 {
	font-size: 14px;
	line-height: 20px;
}

.body-small {
	font-size: 13px;
	line-height: 25px;
}

.caption {
	font-size: 12px;
	line-height: 22px;
}

.small-text {
	font-size: 10px;
	line-height: 15px;
}

.font-main {
	font-family: "Inter", serif;
}

.font-2 {
	font-family: "Poppins", serif;
}

.font-3 {
	font-family: "MADE Outer";
}

.font-4 {
	font-family: "UTM Banque";
}

.font-5 {
	font-family: "Helvetica Neue", sans-serif;
}

b,
strong {
	font-weight: bolder;
}

video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.text-main {
	color: var(--gray) !important;
}

.text-main-2 {
	color: var(--gray-2);
}

.text-main-4 {
	color: var(--gray-4) !important;
}

.text-cl-1 {
	color: var(--text);
}

.text-cl-2 {
	color: var(--text-2);
}

.text-cl-3 {
	color: var(--text-3);
}

.text-cl-4 {
	color: var(--text-4);
}

.text-cl-5 {
	color: var(--text-5);
}

.text-cl-7 {
	color: var(--text-7);
}

.text-primary {
	color: var(--primary) !important;
}

.text-primary-2 {
	color: var(--primary-2) !important;
}

.text-secondary {
	color: var(--secondary) !important;
}

.text-third {
	color: var(--third) !important;
}

.text-third-2 {
	color: var(--third-2) !important;
}

.text-third-3 {
	color: var(--third-3) !important;
}

.text-third-4 {
	color: var(--third-4) !important;
}

.text-price {
	color: var(--price) !important;
}

a {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	color: var(--gray);
}

	a:focus, a:hover {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		text-decoration: none;
		outline: 0;
	}

.link {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.link:hover {
		color: var(--primary) !important;
	}

.link-svg svg,
.link-svg path {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.link-svg:hover svg,
.link-svg:hover path {
	stroke: var(--primary);
}

.link-fill svg,
.link-fill path {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	stroke: unset !important;
}

.link-fill:hover path {
	fill: var(--primary);
}

.link-svg-fill svg,
.link-svg-fill path {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.link-svg-fill:hover path {
	stroke: var(--primary);
	fill: var(--primary);
}

.link-secondary {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.link-secondary:hover {
		color: var(--secondary) !important;
	}

.link-main {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.link-main:hover {
		color: var(--gray) !important;
	}

.line {
	border: 1px solid var(--line);
}

.line-2 {
	border: 1px solid var(--line-2);
}

.line-bt {
	border-bottom: 1px solid var(--gray-5) !important;
}

.line-bt-2 {
	border-bottom: 1px solid rgba(255, 255, 255, 0.0588235294) !important;
}

.line-tp {
	border-top: 1px solid var(--gray-5) !important;
}

.gap-36 {
	gap: 36px;
}

.gap-12 {
	gap: 12px !important;
}

.gap-30 {
	gap: 30px;
}

.gap-10 {
	gap: 10px !important;
}

.gap-8 {
	gap: 8px !important;
}

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

.py-4 {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.pt-24 {
	padding-top: 24px;
}

.box-center {
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
}

[data-grid=grid-1] {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
}

[data-grid=grid-2] {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr 1fr;
}

[data-grid=grid-3] {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, 1fr);
}

[data-grid=grid-4] {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(4, 1fr);
}

[data-grid=grid-5] {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(5, 1fr);
}

[data-grid=grid-6] {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(6, 1fr);
}

[data-grid=grid-7] {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(7, 1fr);
}

.tf-row-flex {
	display: flex;
	flex-direction: row;
	column-gap: 30px;
	row-gap: 30px;
}

.tf-grid-layout {
	display: grid;
	column-gap: 30px;
	row-gap: 30px;
}

	.tf-grid-layout.tf-col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.tf-grid-layout.tf-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tf-grid-layout.tf-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tf-grid-layout.tf-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tf-grid-layout.tf-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.tf-grid-layout.tf-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.tf-grid-layout .wg-pagination {
		grid-column: 1/-1;
		width: 100%;
	}

	.tf-grid-layout .wd-load {
		grid-column: 1/-1;
	}

.cursor-not-allowed {
	cursor: not-allowed;
}

.cursor-auto {
	cursor: auto;
}

.text-highlight {
	-webkit-text-stroke: 1px #000;
	color: transparent !important;
	flex-direction: row-reverse;
}

.text-line-clamp-1 {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
}

.text-line-clamp-2 {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
}

.text-line-clamp-3 {
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
}

.text-line-clamp-4 {
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
}

.aspect-ratio-1 {
	aspect-ratio: 1/1;
}

.aspect-ratio-0 {
	aspect-ratio: 0 !important;
}

.initial-child-container {
	flex: 0 0 auto;
	display: flex;
	min-width: auto;
	flex-direction: row;
	align-items: center;
}

.line-top-container {
	position: relative;
}

	.line-top-container::before {
		position: absolute;
		content: "";
		top: 0;
		left: 50%;
		background-color: var(--line);
		height: 1px;
		width: 100%;
		max-width: 1320px;
		transform: translateX(-50%);
	}

.line-bottom-container {
	position: relative;
}

	.line-bottom-container::after {
		position: absolute;
		content: "";
		bottom: 0;
		left: 50%;
		background-color: var(--line);
		height: 1px;
		width: 100%;
		max-width: 1320px;
		transform: translateX(-50%);
	}

#scroll-top {
	position: fixed;
	display: block;
	width: 48px;
	height: 48px;
	line-height: 50px;
	border-radius: 4px;
	z-index: 1;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	overflow: hidden;
	z-index: 100;
	background-color: var(--dark);
	border: 0;
	bottom: 92px;
	right: 20px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	#scroll-top.show {
		opacity: 1;
		visibility: visible;
	}

	#scroll-top.type-1 {
		bottom: 140px;
	}

	#scroll-top:hover {
		transform: translateY(-5px);
		background-color: var(--primary);
	}

/* Preload 
------------------------------------------- */
.preload-container {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	background: #ffffff;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 99999999999;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.spinner {
	width: 60px;
	height: 60px;
	border: 3px solid transparent;
	border-top: 3px solid var(--gray);
	border-radius: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	animation: spin 1s infinite linear;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.tf-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.fs-8 {
	font-size: 8px !important;
}

.fs-10 {
	font-size: 10px !important;
}

.fs-12 {
	font-size: 12px !important;
}

.fs-14 {
	font-size: 14px !important;
}

.fs-16 {
	font-size: 16px !important;
}

.fs-20 {
	font-size: 20px !important;
}

.fs-24 {
	font-size: 24px !important;
}

.fs-26 {
	font-size: 26px !important;
}

.fs-28 {
	font-size: 28px !important;
}

.fs-42 {
	font-size: 42px !important;
}

.lh-19 {
	line-height: 19px !important;
}

.lh-20 {
	line-height: 20px !important;
}

.lh-24 {
	line-height: 24px !important;
}

.lh-26 {
	line-height: 26px !important;
}

.lh-12 {
	line-height: 12px !important;
}

.lh-14 {
	line-height: 14px !important;
}

.lh-15 {
	line-height: 15px !important;
}

.lh-16 {
	line-height: 16px !important;
}

.radius-16 {
	border-radius: 16px !important;
}

.radius-8 {
	border-radius: 8px !important;
}

.relative {
	position: relative !important;
}

.absolute {
	position: absolute;
}

#goTop {
	position: fixed;
	padding: 0;
	bottom: 90px;
	right: 40px;
	width: 38px;
	height: 38px;
	background: var(--white);
	color: black;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1019607843);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

	#goTop .border-progress {
		position: absolute;
		top: -1px;
		left: -1px;
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		border-radius: 3px;
		border: 1px solid #000000;
		mask-image: conic-gradient(#000000 var(--progress-angle, 0deg), transparent 0);
		-webkit-mask-image: conic-gradient(#000000 var(--progress-angle, 0deg), transparent 0);
		content: "";
		z-index: 1;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	#goTop.show {
		opacity: 1;
		visibility: visible;
	}

	#goTop .icon {
		font-size: 12px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	#goTop .icon-arrow-right {
		transform: rotate(-90deg);
	}

.simpleParallax {
	height: 100%;
	width: 100%;
}

	.simpleParallax img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

.bg-3 {
	background-color: var(--bg-3) !important;
}

.bg-line {
	background-color: var(--line);
}

.bg-line-3 {
	background-color: var(--line-3);
}

.bg-gray {
	background-color: var(--gray) !important;
}

.bg-gray-2 {
	background-color: var(--gray-2) !important;
}

.bg-gray-5 {
	background-color: var(--gray-5) !important;
}

.bg-primary {
	background-color: var(--primary) !important;
}

.br-line {
	display: inline-flex;
	width: 100%;
	height: 1px;
}

	.br-line.type-vertical {
		height: 16px;
		width: 1px;
	}

		.br-line.type-vertical.h23 {
			height: 23px;
		}

.tf-sp-1 {
	padding-top: 20px;
	padding-bottom: 50px;
}

.tf-sp-2 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.tf-sp-3 {
	padding-top: 20px;
	padding-bottom: 20px;
}

.tf-sp-4 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.tf-sp-5 {
	padding-top: 30px;
	padding-bottom: 30px;
}

.tf-sp-6 {
	padding-top: 100px;
	padding-bottom: 100px;
}

.tf-sp-7 {
	padding-top: 30px;
	padding-bottom: 50px;
}

.progress {
	height: 6px;
	border-radius: 999px;
}

	.progress .progress-bar {
		border-radius: 999px;
		background-color: var(--primary);
	}

	.progress.style-2 {
		height: 9px;
		border-radius: 50px;
	}

		.progress.style-2 .progress-bar {
			border-radius: 50px;
		}

	.progress.style-3 {
		height: 12px;
		border-radius: 8px;
	}

		.progress.style-3 .progress-bar {
			border-radius: 8px;
		}

.sticky-top {
	z-index: 50;
	top: 15px;
}

.cs-pointer {
	cursor: pointer;
}

.z-4 {
	z-index: 4;
}

.z-5 {
	z-index: 5;
}

.z-6 {
	z-index: 6;
}

.aspect-unset {
	aspect-ratio: unset !important;
}

.w-max-content {
	width: max-content !important;
}

.fw-1 {
	font-weight: 100;
}

.fw-2 {
	font-weight: 200;
}

.fw-3 {
	font-weight: 300 !important;
}

.fw-8 {
	font-weight: 800;
}

.fw-9 {
	font-weight: 900;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-14 {
	margin-bottom: 14px !important;
}

.mb-6 {
	margin-bottom: 6px !important;
}

.mw-unset {
	max-width: unset !important;
}

.flat-container {
	max-width: 1490px;
	width: 100%;
	margin: auto;
	padding: 15px;
	border-radius: 8px;
}

.m-h-300 {
	min-height: 300px;
}

.letter-sp-s1 {
	letter-spacing: 10.8px;
}

.pb-8 {
	padding-bottom: 8px !important;
}

.pst-unset {
	position: unset !important;
}

.text-delivered {
	color: #008a00;
}

.text-on-the-way {
	color: #ff4848;
}

/*------------ Components ---------------- */
/*------------ header ---------------- */
.tf-topbar {
	padding: 5px 0px;
}

.topbar-left {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0px 40px;
	flex-wrap: wrap;
}

.topbar-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
}

	.topbar-right > li:not(:last-child) {
		padding-right: 28px;
		position: relative;
	}

		.topbar-right > li:not(:last-child)::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 16px;
			background-color: var(--gray-2);
		}

header {
	position: sticky;
	position: -webkit-sticky;
	left: 0;
	right: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 888;
	background-color: var(--white);
}

	header:not(.style-2, .style-3, .style-4, .style-5) {
		border-bottom: 1px solid var(--gray-5);
	}

	header.header-type-stc {
		box-shadow: 0px 4px 10px #ececec;
	}

.tf-header .logo-site {
	max-width: 185px;
	width: 100%;
}

.tf-header .nav-icon {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

	.tf-header .nav-icon.style-2 {
		gap: 17px;
		align-items: center;
	}

		.tf-header .nav-icon.style-2 li .infor {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}

		.tf-header .nav-icon.style-2 li > a {
			position: relative;
		}

			.tf-header .nav-icon.style-2 li > a i,
			.tf-header .nav-icon.style-2 li > a svg {
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
			}

			.tf-header .nav-icon.style-2 li > a:hover path {
				stroke: var(--primary);
			}

			.tf-header .nav-icon.style-2 li > a:hover i {
				color: var(--primary);
			}

			.tf-header .nav-icon.style-2 li > a .count-box {
				top: -8px;
				right: -6px;
			}

	.tf-header .nav-icon.style-3 {
		gap: 20px;
	}

		.tf-header .nav-icon.style-3 li:not(:last-child) {
			padding-right: 20px;
			border-right: 1px solid var(--gray-5);
		}

		.tf-header .nav-icon.style-3 .nav-icon-item {
			display: flex;
			align-items: center;
			flex-direction: row;
			gap: 14px;
		}

			.tf-header .nav-icon.style-3 .nav-icon-item .infor {
				display: flex;
				flex-direction: column;
				gap: 3px;
			}

			.tf-header .nav-icon.style-3 .nav-icon-item .icon {
				padding-top: 6px;
				padding-right: 17px;
			}

			.tf-header .nav-icon.style-3 .nav-icon-item .count-box {
				width: 26px;
				height: 26px;
				font-size: 14px;
				line-height: 22px;
			}

			.tf-header .nav-icon.style-3 .nav-icon-item i {
				font-size: 34px;
			}

			.tf-header .nav-icon.style-3 .nav-icon-item i,
			.tf-header .nav-icon.style-3 .nav-icon-item svg,
			.tf-header .nav-icon.style-3 .nav-icon-item .number-item {
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
			}

			.tf-header .nav-icon.style-3 .nav-icon-item:hover .number-item {
				color: var(--primary);
			}

			.tf-header .nav-icon.style-3 .nav-icon-item:hover svg path {
				stroke: var(--primary);
			}

			.tf-header .nav-icon.style-3 .nav-icon-item:hover i {
				color: var(--primary);
			}

	.tf-header .nav-icon.style-4 a {
		position: relative;
		color: var(--white);
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.tf-header .nav-icon.style-4 .count-box {
		position: unset;
		background-color: var(--white);
		color: var(--gray);
		width: 20px;
		height: 20px;
		font-weight: 400;
		font-size: 13px;
		line-height: 25px;
	}

	.tf-header .nav-icon .count-box {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--primary);
		border-radius: 50%;
		color: var(--white);
		font-weight: 600;
		font-size: 10px;
		line-height: 15px;
		width: 18px;
		height: 18px;
		top: 0;
		right: 0;
	}

		.tf-header .nav-icon .count-box.style-default {
			background-color: unset;
			border-radius: 0;
			display: unset;
			color: var(--white);
			width: unset;
			height: unset;
		}

		.tf-header .nav-icon .count-box.style-pst-2 {
			top: -4px;
			right: 5px;
		}

.tf-header .nav-icon-item {
	display: flex;
	text-align: center;
	flex-direction: column;
}

	.tf-header .nav-icon-item .icon {
		font-size: 26px;
	}

		.tf-header .nav-icon-item .icon.icon-user {
			font-size: 28px;
		}

.tf-header .hover-shopcart {
	position: relative;
}

	.tf-header .hover-shopcart:hover .dropdown-shopcart {
		opacity: 1;
		visibility: visible;
		transform: translateY(0px);
		pointer-events: all;
	}

	.tf-header .hover-shopcart:hover .progress-bar {
		width: 70%;
	}

	.tf-header .hover-shopcart .dropdown-shopcart {
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		position: absolute;
		min-width: 414px;
		right: 0;
		top: 100%;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
		padding: 30px;
		border-radius: 8px;
		background-color: var(--white);
		display: flex;
		flex-direction: column;
		gap: 20px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.tf-header .hover-shopcart .subtotal {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tf-header .hover-shopcart .box-btn {
		display: flex;
		gap: 10px;
	}

		.tf-header .hover-shopcart .box-btn > * {
			width: 100%;
		}

.tf-header .inner-header {
	padding: 15px 0px;
}

.tf-header.style-2 .header-center {
	display: flex;
	gap: 20px;
}

.tf-header.style-2 .btn-open-nav {
	font-size: 20px;
}

.tf-header.style-3 .header-center {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}

.tf-header.style-3 .inner-header {
	padding: 19px 0px;
	position: relative;
	z-index: 2;
}

.tf-header.style-3 .header-bottom {
	position: relative;
}

	.tf-header.style-3 .header-bottom::before {
		content: "";
		position: absolute;
		height: 100%;
		width: 40%;
		background-color: var(--gray);
		z-index: 0;
	}

	.tf-header.style-3 .header-bottom.bg-gray::before {
		background-color: var(--primary);
	}

	.tf-header.style-3 .header-bottom.bg-gray .nav-category-wrap {
		background-color: var(--primary);
	}

		.tf-header.style-3 .header-bottom.bg-gray .nav-category-wrap::after {
			border-left: 10px solid var(--primary);
			background-color: var(--gray);
		}

	.tf-header.style-3 .header-bottom.bg-gray .nav-title:hover i,
	.tf-header.style-3 .header-bottom.bg-gray .nav-title:hover .title {
		color: var(--secondary);
	}

	.tf-header.style-3 .header-bottom.bg-gray .nav-title.active i,
	.tf-header.style-3 .header-bottom.bg-gray .nav-title.active .title {
		color: var(--secondary) !important;
	}

	.tf-header.style-3 .header-bottom.bg-gray .box-navigation .item-link:hover {
		color: var(--primary);
	}

	.tf-header.style-3 .header-bottom.type-bg-gray {
		background-color: var(--gray);
	}

.tf-header.style-4 .inner-header {
	position: relative;
	z-index: 2;
}

.tf-header.style-4 .header-bottom {
	position: relative;
	z-index: 1;
}

.tf-header.style-4 .header-left {
	display: flex;
	align-items: center;
	gap: 0px 40px;
	flex-wrap: wrap;
}

.tf-header.style-5 .inner-header {
	padding: 12px 0px;
}

.tf-header.style-5 .header-center {
	position: relative;
	z-index: 1;
}

.tf-header.style-5 .header-right {
	position: relative;
	z-index: 2;
}

.header-center {
	display: flex;
	align-items: center;
	height: 100%;
}

.header-bt-left {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-bt-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-inner-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}

.nav-category-wrap {
	position: relative;
}

	.nav-category-wrap.style-white .nav-title i {
		color: var(--white);
	}

	.nav-category-wrap.style-white h6 {
		color: var(--white);
	}

	.nav-category-wrap .nav-title {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}

		.nav-category-wrap .nav-title.hover-gray.active i,
		.nav-category-wrap .nav-title.hover-gray.active .title {
			color: var(--gray) !important;
		}

		.nav-category-wrap .nav-title.hover-gray:hover i,
		.nav-category-wrap .nav-title.hover-gray:hover .title {
			color: var(--gray);
		}

		.nav-category-wrap .nav-title i {
			position: relative;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			top: -1px;
		}

		.nav-category-wrap .nav-title.active i {
			color: var(--primary) !important;
		}

		.nav-category-wrap .nav-title.active .title {
			color: var(--primary) !important;
		}

		.nav-category-wrap .nav-title .title {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			line-height: 50px;
		}

		.nav-category-wrap .nav-title:hover i {
			color: var(--primary);
		}

		.nav-category-wrap .nav-title:hover .title {
			color: var(--primary);
		}

	.nav-category-wrap.style-2 {
		background-color: var(--gray);
	}

		.nav-category-wrap.style-2::after {
			content: "";
			width: 0;
			height: 0;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			border-left: 10px solid var(--gray);
			right: -9px;
			top: 0;
			position: absolute;
		}

		.nav-category-wrap.style-2 .nav-title {
			padding-right: 48px;
		}

			.nav-category-wrap.style-2 .nav-title i,
			.nav-category-wrap.style-2 .nav-title .title {
				color: var(--white);
			}

			.nav-category-wrap.style-2 .nav-title:hover i,
			.nav-category-wrap.style-2 .nav-title:hover .title {
				color: var(--primary);
			}

.category-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	min-width: 285px;
	z-index: 99;
	background: #fff;
	border: 1px solid #ebebeb;
	width: calc(100% - 35px);
	transform: translateY(10px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

	.category-menu.active {
		opacity: 1;
		visibility: visible;
		transform: translateX(0px);
	}

	.category-menu ul {
		margin: 0;
		padding: 0 15px;
	}

		.category-menu ul li {
			box-shadow: inset 0px -1px 0px #ececec;
		}

		.category-menu ul a {
			height: 100%;
			display: flex;
			align-items: center;
			text-decoration: none;
			width: 100%;
			gap: 6px;
			font-size: 14px;
			line-height: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
		}

			.category-menu ul a svg path {
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
			}

			.category-menu ul a:hover {
				padding-left: 10px;
				color: var(--primary);
			}

				.category-menu ul a:hover svg path {
					stroke: var(--primary);
				}

.box-navigation.style-white .item-link {
	color: var(--white);
}

	.box-navigation.style-white .item-link:hover {
		color: var(--gray);
	}

	.box-navigation.style-white .item-link.has-icon .icon {
		background-color: var(--white);
	}

		.box-navigation.style-white .item-link.has-icon .icon i {
			color: var(--primary);
		}

	.box-navigation.style-white .item-link.has-icon:hover .icon {
		background-color: var(--gray);
	}

.box-navigation .box-nav-menu {
	display: flex;
	align-items: center;
	gap: 20px;
}

.box-navigation .item-link {
	line-height: 50px;
}

	.box-navigation .item-link.has-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

		.box-navigation .item-link.has-icon .icon {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: var(--primary);
			color: var(--white);
		}

			.box-navigation .item-link.has-icon .icon i {
				font-size: 12px;
			}

.box-navigation.style-2 .menu-item:not(:last-child) .item-link {
	position: relative;
	padding-right: 20px;
}

	.box-navigation.style-2 .menu-item:not(:last-child) .item-link::after {
		content: "";
		position: absolute;
		right: 0px;
		top: 50%;
		width: 1px;
		height: 16px;
		transform: translateY(-50%);
		background-color: var(--gray-2);
	}

.mobile-button {
	position: relative;
	width: 26px;
	height: 26px;
	background-color: transparent;
	cursor: pointer;
	display: block;
}

	.mobile-button span {
		position: absolute;
		width: 100%;
		height: 2px;
		left: 0;
		top: 12px;
		background-color: var(--primary);
		border-radius: 10px;
	}

	.mobile-button::before {
		content: "";
		position: absolute;
		top: 5px;
		height: 2px;
		width: 100%;
		left: 0;
		background-color: var(--primary);
		border-radius: 10px;
	}

	.mobile-button::after {
		content: "";
		position: absolute;
		bottom: 5px;
		height: 2px;
		width: 100%;
		left: 0;
		background-color: var(--primary);
		border-radius: 10px;
	}

.support-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.delivery-progress {
	display: grid;
	gap: 10px;
}

	.delivery-progress .progress-bar {
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		width: 0%;
		transition-delay: 0.1s;
	}

	.delivery-progress p {
		display: flex;
		align-items: center;
		gap: 8px;
	}

/* Start Open Nav Mobile */
.canvas-mb {
	border: unset !important;
}

	.canvas-mb .tab-pane:not(.active) .collapse {
		display: none;
	}

	.canvas-mb .logo-site {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 100;
		max-width: 130px;
	}

	.canvas-mb .mb-body {
		padding-right: 20px;
		padding-left: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--line);
		overscroll-behavior-y: contain;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

		.canvas-mb .mb-body::-webkit-scrollbar-thumb {
			background-color: var(--primary);
			border-radius: 5px;
		}

		.canvas-mb .mb-body::-webkit-scrollbar {
			width: 3px;
		}

	.canvas-mb .mb-bottom {
		padding-right: 15px;
		padding-left: 15px;
	}

		.canvas-mb .mb-bottom .btn-select {
			padding: 10px 0px;
		}

	.canvas-mb .btn-close-mb {
		position: absolute;
		right: 20px;
		top: 20px;
		cursor: pointer;
		color: var(--black);
		z-index: 100;
	}

	.canvas-mb .mb-canvas-content {
		padding-top: 70px;
		min-width: 100%;
		max-width: min(90%, 320px);
		grid-auto-rows: minmax(0, 1fr) auto;
		isolation: isolate;
		height: 100%;
		width: 100%;
		display: grid;
		align-content: start;
	}

.nav-ul-mb {
	margin-bottom: 30px;
}

	.nav-ul-mb .sub-nav-menu {
		padding-left: 10px;
		margin-bottom: 15px;
	}

		.nav-ul-mb .sub-nav-menu.sub-menu-level-2 {
			margin-bottom: 5px;
		}

	.nav-ul-mb .btn-open-sub {
		position: relative;
		width: 20px;
		height: 30px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

		.nav-ul-mb .btn-open-sub:after, .nav-ul-mb .btn-open-sub::before {
			content: "";
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: var(--black);
			transition: 0.4s ease 0.1s;
			margin: auto;
		}

		.nav-ul-mb .btn-open-sub::before {
			width: 2px;
			height: 12px;
		}

		.nav-ul-mb .btn-open-sub::after {
			width: 12px;
			height: 2px;
		}

	.nav-ul-mb .nav-mb-item {
		padding: 2px 0px;
	}

		.nav-ul-mb .nav-mb-item:not(:last-child) {
			border-bottom: 1px solid var(--line);
		}

		.nav-ul-mb .nav-mb-item .mb-menu-link {
			min-height: 40px;
			font-weight: 600;
			font-size: 14px;
			line-height: 40px;
			color: var(--black);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

			.nav-ul-mb .nav-mb-item .mb-menu-link:not(.collapsed) .btn-open-sub::before {
				transform: rotate(90deg);
			}

		.nav-ul-mb .nav-mb-item.active .mb-menu-link {
			color: var(--primary);
		}

			.nav-ul-mb .nav-mb-item.active .mb-menu-link .btn-open-sub::after, .nav-ul-mb .nav-mb-item.active .mb-menu-link .btn-open-sub::before {
				background-color: var(--primary);
			}

		.nav-ul-mb .nav-mb-item.active .sub-nav-link.active {
			color: var(--primary);
		}

			.nav-ul-mb .nav-mb-item.active .sub-nav-link.active .btn-open-sub::after, .nav-ul-mb .nav-mb-item.active .sub-nav-link.active .btn-open-sub::before {
				background-color: var(--primary);
			}

	.nav-ul-mb .sub-nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-weight: 500;
		color: var(--dark);
	}

		.nav-ul-mb .sub-nav-link:not(.collapsed) .btn-open-sub::before {
			transform: rotate(90deg);
		}

		.nav-ul-mb .sub-nav-link .btn-open-sub::after, .nav-ul-mb .sub-nav-link .btn-open-sub::before {
			background-color: var(--black);
		}

/* -- End Open Nav Mobile -- */
.tf-nav-menu .title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 18px;
	background-color: var(--primary);
	color: var(--white);
	border-radius: 10px 10px 0px 0px;
	overflow: hidden;
}

.tf-nav-menu .menu-category-list {
	border: 1px solid var(--gray-5);
	border-top: unset;
	border-radius: 0px 0px 10px 10px;
	position: relative;
}

.tf-nav-menu .menu-item {
	position: relative;
}

.tf-nav-menu .sub-menu-container {
	position: absolute;
	top: 0;
	left: 100%;
	width: max-content;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
	border: 1px solid var(--gray-5);
	border-radius: 10px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	transform: translateY(10px);
	z-index: 1;
	background-color: var(--white);
}

.tf-nav-menu .sub-menu-list {
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.tf-nav-menu .sub-menu-list .sub-menu-item {
		display: inline-flex;
	}

.tf-nav-menu .item-link {
	padding: 0px 18px;
	position: relative;
	display: flex;
}

	.tf-nav-menu .item-link > span {
		padding: 15px 0px 14px;
		display: flex;
		gap: 6px;
		align-items: center;
		width: 100%;
		position: relative;
	}

		.tf-nav-menu .item-link > span::after {
			content: none;
			position: absolute;
			width: 0%;
			height: 1px;
			bottom: 0;
			left: auto;
			right: 0;
			background-color: var(--primary);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

	.tf-nav-menu .item-link::after {
		content: "\e919";
		position: absolute;
		font-family: "icomoon";
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
	}

.tf-nav-menu .menu-item .icon {
	font-size: 20px;
}

.tf-nav-menu .menu-item:not(:last-child) .item-link > span {
	border-bottom: 1px solid var(--line-2);
}

.tf-nav-menu .menu-item:hover .item-link {
	color: var(--primary);
}

	.tf-nav-menu .menu-item:hover .item-link svg path {
		stroke: var(--primary);
	}

	.tf-nav-menu .menu-item:hover .item-link > span::after {
		width: 100%;
		left: 0;
		right: auto;
	}

.tf-nav-menu .menu-item:hover .sub-menu-container {
	transform: translateY(0px);
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.main-nav-menu .nav-list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.main-nav-menu .item-link {
	display: flex;
	align-items: center;
	gap: 3px;
	line-height: 50px;
	color: var(--text-2);
	position: relative;
}

	.main-nav-menu .item-link i {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: var(--text-2);
	}

	.main-nav-menu .item-link::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: var(--primary);
		transform: scale(0);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.main-nav-menu .item-link::before {
		content: "";
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: calc(100% + 0px);
		width: calc(100% + 60px);
		display: none;
	}

.main-nav-menu .sub-menu-container {
	position: absolute;
	background-color: var(--white);
	z-index: 999;
	top: 100%;
	left: 0;
	border-radius: 5px;
	box-shadow: 0px 4px 9px 0px rgba(0, 64, 193, 0.2);
	transform: translateY(10px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	padding: 5px 0px;
}

	.main-nav-menu .sub-menu-container.mega-menu {
		padding: 30px;
	}

		.main-nav-menu .sub-menu-container.mega-menu.mega-home {
			padding-top: 32px;
			padding-bottom: 36px;
		}

.main-nav-menu .sub-menu-list {
	min-width: 200px;
}

	.main-nav-menu .sub-menu-list li:not(:last-child) a span {
		border-bottom: 1px solid var(--gray-5);
	}

	.main-nav-menu .sub-menu-list li a {
		padding: 0px 20px;
		display: block;
	}

		.main-nav-menu .sub-menu-list li a span {
			padding: 10px 0px;
			display: block;
			position: relative;
		}

	.main-nav-menu .sub-menu-list li.active a {
		color: var(--primary);
	}

.main-nav-menu .nav-item {
	position: relative;
}

	.main-nav-menu .nav-item:hover .item-link {
		color: var(--primary);
	}

		.main-nav-menu .nav-item:hover .item-link .icon {
			transform: rotate(180deg);
			color: var(--primary);
		}

		.main-nav-menu .nav-item:hover .item-link::after {
			transform: scale(1);
		}

		.main-nav-menu .nav-item:hover .item-link::before {
			display: block;
		}

	.main-nav-menu .nav-item:hover .sub-menu-container {
		transform: translateY(0px);
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}

	.main-nav-menu .nav-item.active .item-link {
		color: var(--primary);
	}

		.main-nav-menu .nav-item.active .item-link .icon {
			color: var(--primary);
		}

.main-nav-menu.style-white .item-link {
	color: var(--white);
}

	.main-nav-menu.style-white .item-link .icon {
		color: var(--white);
	}

	.main-nav-menu.style-white .item-link::after {
		background-color: var(--black);
	}

.main-nav-menu.style-white .nav-item:hover .item-link, .main-nav-menu.style-white .nav-item.active .item-link {
	color: var(--black);
}

	.main-nav-menu.style-white .nav-item:hover .item-link .icon, .main-nav-menu.style-white .nav-item.active .item-link .icon {
		color: var(--black);
	}

.main-nav-menu.style-white-2 .item-link {
	color: var(--white);
}

	.main-nav-menu.style-white-2 .item-link .icon {
		color: var(--white);
	}

	.main-nav-menu.style-white-2 .item-link::after {
		background-color: var(--primary);
	}

.mega-menu {
	width: auto;
	overflow: auto;
}

	.mega-menu .view-all-demo {
		margin-top: 28px;
	}

	.mega-menu.mega-home {
		max-width: unset;
		width: 100%;
	}

	.mega-menu.here {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: all !important;
	}

	.mega-menu .wrapper-sub-menu {
		max-width: 1490px;
		margin: auto;
	}

.row-demo {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	overflow-y: auto;
	padding-right: 15px;
	margin-right: -15px;
}

	.row-demo::-webkit-scrollbar {
		width: 5px;
	}

	.row-demo::-webkit-scrollbar-thumb {
		background-color: var(--primary);
		border-radius: 5px;
	}

	.row-demo .demo-item {
		border-radius: 8px;
		background-color: #f7f7f7;
		padding: 8px 8px 0px;
		border: solid 1px var(--gray-4);
		transition: border 0.4s;
		margin-bottom: 1px;
		display: inline-flex;
		position: relative;
	}

		.row-demo .demo-item > a {
			display: flex;
			flex-direction: column;
		}

		.row-demo .demo-item .demo-name {
			font-size: 14px;
			line-height: 42px;
			display: block;
			text-wrap: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: center;
			font-weight: 600;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			color: var(--text-main);
		}

		.row-demo .demo-item:hover, .row-demo .demo-item.active {
			border-color: var(--primary);
		}

			.row-demo .demo-item:hover .demo-name, .row-demo .demo-item.active .demo-name {
				color: var(--primary);
			}

.demo-label {
	position: absolute;
	top: 9px;
	right: 7px;
	gap: 5px;
	display: flex;
}

	.demo-label span {
		font-size: 10px;
		line-height: 19px;
		padding: 0 8px;
		background-color: rgb(131, 183, 53);
		color: var(--white);
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.demo-label .demo-new {
		background-color: rgb(72, 212, 187);
	}

	.demo-label .demo-hot {
		background-color: rgb(252, 87, 50);
	}

.wrapper-sub-menu {
	display: flex;
	gap: 30px;
}

.mega-menu-item {
	min-width: 140px;
}

	.mega-menu-item .menu-heading {
		font-weight: 600;
		padding-bottom: 10px;
		margin-bottom: 15px;
		border-bottom: 1px solid var(--gray-4);
	}

	.mega-menu-item .menu-list li:not(:last-child) {
		margin-bottom: 10px;
	}

	.mega-menu-item .menu-list li.active a {
		color: var(--primary);
	}

.bottom-bar-language {
	display: flex;
	align-items: center;
}

	.bottom-bar-language > * {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.bottom-bar-language .tf-curs {
		border-right: 1px solid var(--gray-4);
	}

	.bottom-bar-language .tf-lans .filter-option-inner-inner {
		padding: 8px 20px;
	}

	.bottom-bar-language .tf-lans .dropdown-menu {
		padding: 7px 5px !important;
	}

	.bottom-bar-language .image-select .filter-option-inner-inner {
		padding: 10px 10px !important;
	}

.bar-lang .image-select .dropdown-toggle .filter-option-inner {
	padding-right: 10px;
}

.bar-lang .image-select .dropdown-toggle::after {
	content: "\e918";
	margin: 0;
}

.bar-lang .image-select .filter-option-inner-inner {
	padding: 4px 10px;
}

.bar-lang .image-select > .dropdown-menu {
	min-width: 90px;
	padding: 15px 20px !important;
}

	.bar-lang .image-select > .dropdown-menu > .inner {
		overflow-y: hidden !important;
	}

	.bar-lang .image-select > .dropdown-menu ul > li {
		width: 100%;
	}

	.bar-lang .image-select > .dropdown-menu .dropdown-item {
		width: 100%;
	}

		.bar-lang .image-select > .dropdown-menu .dropdown-item .text {
			justify-content: start;
		}

.bar-lang .tf-curs .image-select > .dropdown-menu {
	margin-left: -60px !important;
	width: 200px;
}

.bar-lang .tf-curs .filter-option-inner {
	padding-right: 17px !important;
}

.bar-lang .tf-curs .filter-option-inner-inner {
	width: 40px;
}

.tf-lans .dropdown-menu {
	padding: 10px 5px;
}

.tf-curs .inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.tf-curs .dropdown-menu {
	border-radius: 8px;
}

	.tf-curs .dropdown-menu a .text img {
		border-radius: 50%;
		width: 20px !important;
	}

	.tf-curs .dropdown-menu li:not(:last-child) {
		margin-bottom: 5px;
	}

/*------------ footer ---------------- */
.tf-footer .ft-body-inner {
	background-color: var(--bg);
	padding: 50px 0px;
}

.ft-inner {
	display: flex;
	gap: 30px;
}

	.ft-inner .ft-logo {
		display: flex;
		flex-direction: column;
		gap: 15px;
		flex-shrink: 0;
	}

.method-list {
	display: flex;
	gap: 20px;
}

.ft-link-wrap {
	gap: 30px;
}

	.ft-link-wrap .footer-col-block {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.ft-link-wrap .ft-menu-list {
		display: grid;
		gap: 12px;
	}

	.ft-link-wrap .ft-contact-list li {
		display: flex;
		gap: 15px;
		align-items: start;
	}

	.ft-link-wrap .ft-contact-list .icon {
		display: block;
		position: relative;
		padding-right: 8px;
	}

		.ft-link-wrap .ft-contact-list .icon::after {
			content: "";
			position: absolute;
			right: 0;
			height: 16px;
			width: 1px;
			background-color: var(--line-3);
			top: 50%;
			transform: translateY(-50%);
			opacity: 0.2;
		}

.ft-body-center .ft-center {
	padding: 18px 0px;
	gap: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

	.ft-body-center .ft-center .form-newsletter {
		max-width: 566px;
		width: 100%;
	}

		.ft-body-center .ft-center .form-newsletter fieldset {
			width: 100%;
		}

		.ft-body-center .ft-center .form-newsletter input {
			width: 100%;
		}

.ft-body-center .notice {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px 30px;
	flex-wrap: wrap;
}

	.ft-body-center .notice span {
		display: flex;
		align-items: center;
		gap: 10px;
	}

.ft-bottom {
	padding: 50px 0px;
	display: grid;
	gap: 12px;
}

	.ft-bottom .ft-menu-list-2 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px 30px;
	}

.social-list {
	display: flex;
	justify-content: center;
	gap: 10px;
}

	.social-list a {
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid var(--gray-5);
		background-color: var(--white);
	}

		.social-list a:hover {
			background-color: var(--primary);
			border-color: var(--primary);
			color: var(--white);
		}

	.social-list.style-2 {
		gap: 10px;
	}

		.social-list.style-2 a {
			width: 36px;
			height: 36px;
		}

/*------------ tabs ---------------- */
.flat-animate-tab .tab-content {
	position: relative;
}

.flat-animate-tab .tab-pane {
	display: block;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	-webkit-transform: translateY(30px);
	-ms-transform: translateY(30px);
	transform: translateY(30px);
	transition-timing-function: ease-in;
	transition-duration: 0.2s;
}

	.flat-animate-tab .tab-pane.active {
		pointer-events: auto;
		opacity: 1;
		visibility: visible;
		position: relative;
		z-index: 2;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		transition-timing-function: ease-out;
		transition-duration: 0.3s;
		transition-delay: 0.3s;
	}

.flat-animate-tab .flat-title-tab-default .menu-tab-line {
	display: flex;
	align-items: center;
	gap: 30px;
}

.flat-animate-tab .flat-title-tab-default .tab-link.active {
	color: var(--primary);
}

.flat-title-tab-nav-mobile {
	margin-bottom: 20px;
}

	.flat-title-tab-nav-mobile .menu-tab-line {
		display: flex;
		align-items: center;
		gap: 5px;
		border-radius: 999px;
		border: 1px solid var(--line);
		padding: 7px 10px;
	}

	.flat-title-tab-nav-mobile .nav-tab-item {
		text-align: center;
		width: 100%;
	}

		.flat-title-tab-nav-mobile .nav-tab-item a.active {
			color: var(--primary);
		}

.flat-title-tab-product-des {
	border-radius: 6px;
	border: 1px solid var(--gray-5);
}

	.flat-title-tab-product-des .flat-title-tab {
		background-color: var(--gray-6);
	}

	.flat-title-tab-product-des .menu-tab-line {
		padding: 13px 18px;
		display: flex;
		gap: 30px;
		align-items: center;
		white-space: nowrap;
		overflow: auto;
	}

		.flat-title-tab-product-des .menu-tab-line .tab-link:hover {
			color: var(--secondary);
		}

		.flat-title-tab-product-des .menu-tab-line .tab-link.active {
			color: var(--secondary);
		}

	.flat-title-tab-product-des .tab-main {
		padding: 30px;
	}

	.flat-title-tab-product-des .box-total-btn {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-width: 200px;
		width: 100%;
	}

	.flat-title-tab-product-des .card-usually {
		max-width: 251px;
		width: 100%;
	}

.list-feature > li {
	display: flex;
	align-items: center;
	gap: 20px;
}

	.list-feature > li:not(:last-child) {
		padding-bottom: 4px;
		border-bottom: 1px solid var(--gray-5);
		margin-bottom: 4px;
	}

.list-feature .name-feature {
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
	max-width: 236px;
	width: 100%;
	flex-grow: 2;
}

.list-feature .property {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	width: 100%;
	flex-grow: 1;
}

.tab-usually {
	display: flex;
	gap: 20px 30px;
	align-items: center;
	flex-wrap: wrap;
}

.tab-des {
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: center;
}

.tab-review {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

	.tab-review .tab-rating-wrap {
		width: 100%;
	}

	.tab-review .tab-review-wrap {
		width: 100%;
	}

	.tab-review .add-comment-wrap h5 {
		margin-bottom: 30px;
	}

	.tab-review.style-2 {
		gap: 30px;
	}

		.tab-review.style-2 .tab-rating-wrap {
			flex-wrap: wrap;
			padding-bottom: 30px;
			border-radius: unset;
			border-bottom: 1px solid var(--gray-5);
		}

		.tab-review.style-2 .tab-review-wrap {
			display: flex;
			flex-direction: column;
			align-items: start;
			gap: 30px 40px;
		}

.tab-rating-wrap {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.rating-progress-list {
	display: grid;
	gap: 10px;
}

	.rating-progress-list p {
		flex-grow: 1;
	}

	.rating-progress-list li {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.rating-progress-list .rating-progress {
		width: 100%;
	}

.rating-filter-wrap .title-sidebar {
	margin-bottom: 12px;
}

.rating-filter-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

	.rating-filter-list a {
		padding: 5px 20px;
		border-radius: 18px;
		background-color: var(--gray-6);
	}

		.rating-filter-list a:hover, .rating-filter-list a.active {
			background-color: var(--primary);
			color: var(--white);
		}

.flat-title-tab-faq .tf-title {
	position: relative;
	padding-bottom: 28px;
	margin-bottom: 30px;
}

	.flat-title-tab-faq .tf-title::after {
		content: "";
		bottom: 0;
		left: 0;
		position: absolute;
		max-width: 123px;
		width: 100%;
		height: 2px;
		background-color: var(--primary);
	}

.flat-title-tab-faq .menu-tab-line {
	display: grid;
	gap: 16px;
}

.flat-title-tab-faq .tab-link.active, .flat-title-tab-faq .tab-link:hover {
	font-weight: 600;
	color: var(--primary);
}

/*------------ button ---------------- */
.tf-btn {
	font-weight: 600;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	padding: 10px 16px;
	border-radius: 8px;
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.tf-btn:hover {
		background-color: var(--gray);
	}

	.tf-btn.hover-2:hover {
		background-color: var(--secondary) !important;
	}

	.tf-btn.btn-line {
		background-color: unset;
		border: 1px solid var(--gray-4);
		padding-top: 9px;
		padding-bottom: 9px;
	}

		.tf-btn.btn-line:hover {
			background-color: var(--gray);
			color: var(--white);
		}

	.tf-btn.btn-line-white {
		background-color: unset;
		border: 2px solid var(--white);
		color: var(--white);
		padding-top: 8px;
		padding-bottom: 8px;
	}

		.tf-btn.btn-line-white:hover {
			background-color: var(--primary);
			color: var(--white) !important;
			border-color: var(--primary);
		}

	.tf-btn.btn-gray {
		background-color: var(--gray);
	}

		.tf-btn.btn-gray:hover {
			background-color: var(--primary);
		}

	.tf-btn.btn-gray-2 {
		background-color: var(--gray-4);
		color: var(--gray-2);
	}

		.tf-btn.btn-gray-2:hover {
			background-color: var(--primary);
			color: var(--white);
		}

	.tf-btn.style-2 {
		gap: 6px;
		padding: 6px 12px;
		border: 1px solid rgba(255, 255, 255, 0.1019607843);
		background: rgba(255, 255, 255, 0.1019607843);
		border-radius: 100px;
	}

		.tf-btn.style-2:hover {
			background-color: var(--primary);
			color: var(--white);
		}

	.tf-btn.style-3 {
		display: inline-flex;
		border-radius: 100px;
		background-color: var(--secondary);
		color: var(--white);
		padding: 7px 15px 7px;
	}

	.tf-btn.btn-large {
		padding: 12px 32px 11px;
	}

	.tf-btn.btn-large-2 {
		padding: 10px 83.5px;
	}

	.tf-btn.btn-large-3 {
		padding: 14px 30px;
	}

	.tf-btn.btn-large-4 {
		padding: 14px 20px;
	}

	.tf-btn.btn-small {
		padding: 5px 19px;
	}

.hover-shine {
	position: relative;
	overflow: hidden;
}

	.hover-shine::after {
		content: "";
		position: absolute;
		width: 200%;
		height: 0%;
		left: 50%;
		top: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		transform: translate(-50%, -50%) rotate(-45deg);
		z-index: 1;
		transition: all 0.6s ease;
	}

	.hover-shine:hover {
		background-color: var(--primary);
	}

		.hover-shine:hover::after {
			height: 350%;
			background-color: transparent;
		}

	.hover-shine:not(:hover)::after {
		transition: none;
	}

.btn-direc {
	display: flex;
	gap: 20px;
}

	.btn-direc .icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		border: 1px solid var(--gray-5);
		color: var(--gray);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.btn-direc:hover {
		color: var(--primary);
	}

		.btn-direc:hover .icon {
			border-color: var(--primary);
			color: var(--primary);
		}

.tf-btn-icon {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	color: var(--black);
}

	.tf-btn-icon i {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: var(--black);
	}

	.tf-btn-icon svg path {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.tf-btn-icon.style-white {
		color: var(--white);
	}

		.tf-btn-icon.style-white i {
			color: var(--white);
		}

	.tf-btn-icon:hover {
		color: var(--primary);
	}

		.tf-btn-icon:hover i {
			animation: link-icon 0.3s linear;
			color: var(--primary);
		}

	.tf-btn-icon.type-2 {
		font-weight: 600;
		font-size: 20px;
		line-height: 25px;
	}

		.tf-btn-icon.type-2 i {
			font-size: 16px;
		}

	.tf-btn-icon.style-2 {
		gap: 4px;
		color: var(--secondary);
	}

		.tf-btn-icon.style-2 i {
			color: var(--primary);
		}

		.tf-btn-icon.style-2:hover {
			color: var(--primary);
		}

			.tf-btn-icon.style-2:hover svg path {
				stroke: var(--primary);
			}

		.tf-btn-icon.style-2.type-black {
			color: var(--black);
		}

			.tf-btn-icon.style-2.type-black:hover {
				color: var(--primary);
			}

.hover-link-icon:hover .link-icon {
	animation: link-icon 0.3s linear;
}

@keyframes link-icon {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	49% {
		transform: translateX(10px);
		opacity: 0;
	}

	50% {
		transform: translateX(-10px);
		opacity: 0;
	}

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

.tf-btn-filter {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--gray-5);
	border-radius: 1000px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.tf-btn-filter svg path {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.tf-btn-filter:hover {
		background-color: var(--primary);
		color: var(--white);
	}

		.tf-btn-filter:hover svg {
			fill: var(--white);
		}

			.tf-btn-filter:hover svg path {
				stroke: var(--white);
			}

/*------------ form ---------------- */
form {
	position: relative;
	z-index: 30;
}

	form textarea,
	form input[type=text],
	form input[type=password],
	form input[type=datetime],
	form input[type=datetime-local],
	form input[type=date],
	form input[type=month],
	form input[type=time],
	form input[type=week],
	form input[type=number],
	form input[type=email],
	form input[type=url],
	form input[type=search],
	form input[type=tel],
	form input[type=color] {
		outline: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		width: 100%;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		border-radius: 10px;
		color: var(--black);
		overflow: hidden;
		border: 1px solid var(--gray-4);
		padding: 12px 10px 12px 14px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		form textarea::placeholder,
		form input[type=text]::placeholder,
		form input[type=password]::placeholder,
		form input[type=datetime]::placeholder,
		form input[type=datetime-local]::placeholder,
		form input[type=date]::placeholder,
		form input[type=month]::placeholder,
		form input[type=time]::placeholder,
		form input[type=week]::placeholder,
		form input[type=number]::placeholder,
		form input[type=email]::placeholder,
		form input[type=url]::placeholder,
		form input[type=search]::placeholder,
		form input[type=tel]::placeholder,
		form input[type=color]::placeholder {
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			color: var(--gray-2);
		}

		form textarea:focus,
		form input[type=text]:focus,
		form input[type=password]:focus,
		form input[type=datetime]:focus,
		form input[type=datetime-local]:focus,
		form input[type=date]:focus,
		form input[type=month]:focus,
		form input[type=time]:focus,
		form input[type=week]:focus,
		form input[type=number]:focus,
		form input[type=email]:focus,
		form input[type=url]:focus,
		form input[type=search]:focus,
		form input[type=tel]:focus,
		form input[type=color]:focus {
			border-color: var(--primary);
		}

		form textarea:hover,
		form input[type=text]:hover,
		form input[type=password]:hover,
		form input[type=datetime]:hover,
		form input[type=datetime-local]:hover,
		form input[type=date]:hover,
		form input[type=month]:hover,
		form input[type=time]:hover,
		form input[type=week]:hover,
		form input[type=number]:hover,
		form input[type=email]:hover,
		form input[type=url]:hover,
		form input[type=search]:hover,
		form input[type=tel]:hover,
		form input[type=color]:hover {
			border-color: var(--primary);
		}

		form textarea.type-fs-2,
		form input[type=text].type-fs-2,
		form input[type=password].type-fs-2,
		form input[type=datetime].type-fs-2,
		form input[type=datetime-local].type-fs-2,
		form input[type=date].type-fs-2,
		form input[type=month].type-fs-2,
		form input[type=time].type-fs-2,
		form input[type=week].type-fs-2,
		form input[type=number].type-fs-2,
		form input[type=email].type-fs-2,
		form input[type=url].type-fs-2,
		form input[type=search].type-fs-2,
		form input[type=tel].type-fs-2,
		form input[type=color].type-fs-2 {
			font-size: 13px;
			line-height: 25px;
		}

			form textarea.type-fs-2::placeholder,
			form input[type=text].type-fs-2::placeholder,
			form input[type=password].type-fs-2::placeholder,
			form input[type=datetime].type-fs-2::placeholder,
			form input[type=datetime-local].type-fs-2::placeholder,
			form input[type=date].type-fs-2::placeholder,
			form input[type=month].type-fs-2::placeholder,
			form input[type=time].type-fs-2::placeholder,
			form input[type=week].type-fs-2::placeholder,
			form input[type=number].type-fs-2::placeholder,
			form input[type=email].type-fs-2::placeholder,
			form input[type=url].type-fs-2::placeholder,
			form input[type=search].type-fs-2::placeholder,
			form input[type=tel].type-fs-2::placeholder,
			form input[type=color].type-fs-2::placeholder {
				font-size: 13px;
				line-height: 25px;
			}

		form textarea.def,
		form input[type=text].def,
		form input[type=password].def,
		form input[type=datetime].def,
		form input[type=datetime-local].def,
		form input[type=date].def,
		form input[type=month].def,
		form input[type=time].def,
		form input[type=week].def,
		form input[type=number].def,
		form input[type=email].def,
		form input[type=url].def,
		form input[type=search].def,
		form input[type=tel].def,
		form input[type=color].def {
			padding: 11px 10px 11px 14px;
		}

	form button,
	form input[type=button],
	form input[type=reset],
	form input[type=submit] {
		background-color: transparent;
		overflow: hidden;
		padding: 0;
	}

	form textarea {
		height: 124px;
	}

	form .cols {
		display: flex;
		gap: 20px;
	}

		form .cols > * {
			width: 100%;
		}

		form .cols.gap-17 {
			gap: 17px;
		}

	form .tf-select {
		position: relative;
	}

		form .tf-select select {
			appearance: unset;
			border: unset;
			width: 100%;
			padding: 11px 24px;
			border-radius: 8px;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			border: 1px solid var(--gray-4);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			cursor: pointer;
		}

			form .tf-select select:hover, form .tf-select select:focus {
				border-color: var(--primary);
			}

		form .tf-select::after {
			position: absolute;
			content: "\e918";
			font-family: "icomoon";
			font-size: 14px;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--gray-2);
		}

	form.def {
		display: grid;
		gap: 20px;
	}

		form.def fieldset label {
			font-weight: 600;
			font-size: 14px;
			line-height: 22px;
			margin-bottom: 6px;
		}

		form.def textarea {
			height: 130px;
		}

button {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border: unset;
}

.form-search-product {
	border: 2px solid var(--primary);
	border-radius: 100px;
	display: flex;
	gap: 15px;
	align-items: center;
	max-width: 760px;
	width: 100%;
	padding: 0px 22px;
	position: relative;
}

	.form-search-product fieldset {
		max-width: 500px;
		width: 100%;
	}

		.form-search-product fieldset input {
			border: unset;
			border-radius: unset;
			padding: 8px 0px;
			font-size: 13px;
			line-height: 25px;
		}

			.form-search-product fieldset input::placeholder {
				font-size: 13px;
				line-height: 25px;
			}

	.form-search-product .btn-submit-form {
		position: absolute;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		background-color: var(--primary);
		border: unset;
		color: var(--white);
		right: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.form-search-product .btn-submit-form:hover {
			background-color: var(--gray);
		}

	.form-search-product.style-2 {
		border: 1px solid var(--gray-4);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		max-width: 716px;
	}

		.form-search-product.style-2:hover {
			border-color: var(--primary);
		}

		.form-search-product.style-2 input {
			padding: 9px 0px;
		}

	.form-search-product.style-3 {
		border: 1px solid var(--gray-4);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		max-width: 760px;
		width: 100%;
	}

		.form-search-product.style-3:hover {
			border-color: var(--primary);
		}

		.form-search-product.style-3 input {
			padding: 9px 0px;
		}

.form-log {
	display: grid;
	gap: 18px;
}

	.form-log .form-content {
		display: grid;
		gap: 16px;
	}

	.form-log fieldset label {
		margin-bottom: 6px;
	}

.form-search {
	position: relative;
}

	.form-search .button-submit {
		display: flex;
		align-items: center;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
	}

		.form-search .button-submit i {
			color: var(--black);
			font-size: 20px;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.form-search .button-submit:hover i {
			color: var(--primary);
		}

.form-search-2 {
	position: relative;
	max-width: 331px;
	width: 100%;
}

	.form-search-2 fieldset input {
		border-radius: unset;
		border-color: transparent;
		background-color: transparent;
		color: var(--white);
		padding-right: 80px;
	}

		.form-search-2 fieldset input::placeholder {
			color: var(--white);
		}

		.form-search-2 fieldset input:focus {
			border-color: var(--white);
		}

		.form-search-2 fieldset input:hover {
			border-color: var(--white);
		}

	.form-search-2 .box-btn {
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
	}

		.form-search-2 .box-btn button {
			display: flex;
			align-items: center;
			gap: 6px;
			color: var(--white);
		}

			.form-search-2 .box-btn button:hover {
				color: var(--gray);
			}

.form-search-3 fieldset input {
	padding: 13px 40px 13px 14px;
}

.form-search-3 .button-submit {
	display: flex;
	align-items: center;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

	.form-search-3 .button-submit i {
		color: var(--black);
		font-size: 20px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.form-search-3 .button-submit:hover i {
		color: var(--primary);
	}

.form-newsletter .subscribe-content {
	display: flex;
	gap: 12px;
	align-items: center;
}

	.form-newsletter .subscribe-content input {
		border-radius: 1000px;
		padding: 10px 22px;
		border: unset;
	}

.form-newsletter .subscribe-button {
	border-radius: 1000px;
}

.form-add-comment {
	display: grid;
	gap: 16px;
}

	.form-add-comment fieldset {
		display: flex;
		flex-direction: column;
		gap: 10px 20px;
	}

	.form-add-comment label {
		font-size: 14px;
		line-height: 20px;
	}

	.form-add-comment .btn-submit {
		margin: auto;
	}

.checkbox-item-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

	.checkbox-item-wrap label {
		cursor: pointer;
		position: relative;
		height: 24px;
		width: 24px;
	}

		.checkbox-item-wrap label .checkbox-item {
			position: absolute;
			opacity: 0;
			left: 0;
			top: 50%;
			border-radius: 50%;
			transform: translate(0, -50%);
		}

			.checkbox-item-wrap label .checkbox-item:checked ~ .btn-checkbox:after {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.checkbox-item-wrap label .checkbox-item:checked ~ .btn-radio:after {
				display: block;
			}

	.checkbox-item-wrap .btn-checkbox {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 4px;
		width: 100%;
		height: 100%;
		background-color: var(--white);
		border: 1px solid var(--gray-4);
	}

		.checkbox-item-wrap .btn-checkbox:after {
			font-family: "icomoon";
			position: absolute;
			content: "\e934";
			color: var(--gray);
			border-radius: 4px;
			font-size: 20px;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			background-color: var(--white);
			display: none;
		}

.form-checkout-contact {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.radio-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

	.radio-item .tf-check-rounded {
		width: 20px;
		height: 20px;
		border-radius: 6px;
		border: 1px solid var(--gray-4);
		appearance: unset;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.radio-item .tf-check-rounded::after {
			content: "\e934";
			font-family: "icomoon";
			position: absolute;
			display: none;
		}

		.radio-item .tf-check-rounded:checked::after {
			display: block;
		}

.tf-check {
	position: relative;
	background: transparent;
	cursor: pointer;
	outline: 0;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	min-width: 16px;
	border: 1px solid var(--gray-4);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 2px;
}

	.tf-check:checked {
		border-color: var(--primary);
	}

		.tf-check:checked::before {
			opacity: 1;
			transform: scale(1);
		}

	.tf-check::before {
		width: 10px;
		height: 10px;
		font-weight: 500;
		content: "";
		position: absolute;
		background-color: var(--primary);
		border-radius: 1px;
		opacity: 0;
		transform: scale(0);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.form-filter-price {
	display: flex;
	gap: 12px;
	align-items: center;
}

	.form-filter-price fieldset input {
		box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1019607843) inset;
		border: 1px solid #E1E1E1;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		padding: 9px;
		border-radius: 3px;
	}

	.form-filter-price .cols {
		gap: 12px;
		align-items: center;
	}

	.form-filter-price .br-line {
		width: 6px;
		height: 2px;
		background-color: var(--gray-4);
	}

	.form-filter-price .btn-filter-price {
		border: 1px solid var(--gray-4);
		border-radius: 3px;
		padding: 6px 18px;
	}

.tf-dropdown-sort .icon {
	font-size: 14px;
}

.tf-dropdown-sort .btn-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.tf-dropdown-sort .btn-select {
	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tf-dropdown-sort .dropdown-menu {
	border: 1px solid var(--gray-5);
	min-width: 204px;
	padding: 15px 5px;
	border-radius: 0;
	max-height: 68vh;
	isolation: isolate;
	overscroll-behavior-y: contain;
	overflow-y: auto;
}

	.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar {
		width: 5px;
	}

	.tf-dropdown-sort .dropdown-menu::-webkit-scrollbar-thumb {
		border-radius: 4px;
	}

.tf-dropdown-sort .select-item {
	position: relative;
	font-size: 14px;
	font-weight: 500;
	color: var(--secondary);
	padding: 0 15px;
	line-height: 30px;
	width: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.tf-dropdown-sort .select-item.active {
		background-color: var(--gray-4);
		color: var(--black);
		padding: 0 15px !important;
		border: 0 !important;
	}

	.tf-dropdown-sort .select-item:hover {
		background-color: var(--gray-4);
		color: var(--black);
	}

.tf-dropdown-sort:hover {
	border-color: var(--black);
}

.wd-form-address {
	padding: 32px;
	border: 1px solid var(--gray-4);
	border-radius: 16px;
}

	.wd-form-address .form-content {
		display: grid;
		gap: 15px;
		margin-bottom: 20px;
	}

		.wd-form-address .form-content fieldset label {
			margin-bottom: 6px;
		}

	.wd-form-address .box-btn {
		display: flex;
		gap: 15px;
	}

.tf-cart-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
}

.show-form-address,
.edit-form-address {
	display: none;
}

.edit-form-address {
	margin-top: 24px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

.form-account-details .form-content {
	display: grid;
	gap: 20px;
}

/*------------ drop down ---------------- */
.select-category .dropdown_product_cat {
	display: none;
}

.select-category .close-option {
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.select-category .close-option:hover {
		color: var(--primary);
	}

.select-category .select-options {
	overflow-y: auto;
	display: none;
	position: absolute;
	top: -3px;
	right: -3px;
	left: -3px;
	z-index: 999;
	margin: 0;
	padding: 20px;
	list-style: none;
	border-radius: 8px;
	background: #FFF;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
	min-width: 200px;
}

	.select-category .select-options li {
		display: inline-block;
		width: 32.88%;
		color: var(--gray);
		margin: 0;
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		padding: 8px 10px;
		position: relative;
		cursor: pointer;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		.select-category .select-options li:hover {
			color: var(--primary);
		}

.select-category .header-select-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 500;
	padding-bottom: 20px;
	border-bottom: 1px solid #ededed;
	margin-bottom: 8px;
}

.tf-select-custom {
	display: block;
	cursor: pointer;
	width: 108px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 15px;
	font-size: 13px;
	line-height: 25px;
	color: var(--text-2);
	position: relative;
	font-weight: 600;
}

	.tf-select-custom::after {
		content: "\e918";
		position: absolute;
		font-family: "icomoon";
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

.select-color {
	border: 1px solid var(--gray-4);
	padding: 11px 10px;
	border-radius: 8px;
	min-width: 216px;
	appearance: none;
	position: relative;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

/*------------ carousel ---------------- */
.container-swiper {
	max-width: 542px;
	width: 100%;
	margin: auto;
}

.sw-dot-default {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

	.sw-dot-default .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		background-color: var(--gray-4);
		position: relative;
		border-radius: 100px;
		opacity: 1;
		margin: 0 !important;
	}

	.sw-dot-default .swiper-pagination-bullet-active {
		width: 24px;
		background-color: var(--primary);
	}

.swiper-pagination-lock {
	margin-top: 0px;
}

.box-btn-slide {
	display: flex;
	align-items: center;
	gap: 7px;
}

.nav-swiper {
	position: relative;
	color: var(--gray);
	width: unset;
	height: unset;
	top: unset;
	right: unset;
	bottom: unset;
	left: unset;
	margin-top: unset;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.nav-swiper:hover {
		color: var(--primary);
	}

	.nav-swiper.swiper-button-disabled {
		color: var(--gray-2);
	}

	.nav-swiper::after {
		font-size: 12px;
		content: none;
	}

.box-btn-slide-item.hover-sw {
	position: relative;
}

	.box-btn-slide-item.hover-sw svg {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.box-btn-slide-item.hover-sw svg rect {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

	.box-btn-slide-item.hover-sw .nav-swiper {
		max-width: 50px;
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: none;
	}

		.box-btn-slide-item.hover-sw .nav-swiper:hover svg rect {
			fill: var(--primary);
		}

	.box-btn-slide-item.hover-sw .swiper-button-prev {
		right: 100%;
	}

	.box-btn-slide-item.hover-sw .swiper-button-next {
		left: 100%;
	}

.box-btn-slide-2 {
	position: relative;
}

	.box-btn-slide-2.type-pst-2 .swiper {
		cursor: grab;
	}

	.box-btn-slide-2.sw-nav-effect .nav-swiper {
		width: 45px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);
		background-color: var(--white);
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

		.box-btn-slide-2.sw-nav-effect .nav-swiper i {
			font-size: 18px;
		}

		.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-prev-products-2 {
			left: 15px;
		}

		.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-next-products-2 {
			right: 15px;
		}

.nav-swiper-2 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--white);
	color: var(--black);
	position: absolute;
	top: 50%;
	border: 1px solid var(--gray-4);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.nav-swiper-2::after {
		font-size: 15px;
	}

	.nav-swiper-2.swiper-button-prev {
		left: 5px;
	}

	.nav-swiper-2.swiper-button-next {
		right: 5px;
	}

	.nav-swiper-2:hover {
		background-color: var(--primary);
		border-color: var(--primary);
		color: var(--white);
	}

/*------------ pop up ---------------- */
.modal::-webkit-scrollbar {
	width: 3px;
}

.modal::-webkit-scrollbar-thumb {
	background-color: var(--secondary);
	border-radius: 5px;
}

.offcanvas-backdrop {
	z-index: 2000;
	background-color: rgba(0, 0, 0, 0.6);
}

.offcanvas {
	z-index: 2001;
}

.modal-log .modal-log-wrap {
	padding: 30px;
	display: grid;
	gap: 30px;
}

.modal-log .modal-content .icon-close {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.modal-log .modal-content .icon-close:hover {
		color: var(--primary);
	}

.modal-log .orther-log {
	position: relative;
}

	.modal-log .orther-log .br-line {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.modal-log .orther-log p {
		display: inline-block;
		padding: 0px 10px;
		background-color: var(--white);
		position: relative;
		z-index: 5;
	}

.modal-log .list-log {
	display: flex;
	gap: 10px;
}

	.modal-log .list-log > * {
		width: 100%;
	}

.canvas-sidebar .canvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	padding-bottom: 10px;
	position: relative;
	text-transform: capitalize;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	color: var(--dark);
}

	.canvas-sidebar .canvas-header .icon-close-popup {
		font-size: 12px;
		height: 32px;
		width: 32px;
		display: flex;
		justify-content: end;
		align-items: center;
		cursor: pointer;
	}

	.canvas-sidebar .canvas-header::after {
		position: absolute;
		content: "";
		bottom: 0;
		left: 15px;
		right: 15px;
		height: 1px;
		background-color: var(--line);
	}

.canvas-sidebar .canvas-body {
	overscroll-behavior-y: contain;
	overflow-y: auto;
	height: 100vh;
	padding: 15px 20px;
	background-color: var(--white);
	max-width: unset;
}

	.canvas-sidebar .canvas-body::-webkit-scrollbar {
		width: 3px;
	}

	.canvas-sidebar .canvas-body::-webkit-scrollbar-thumb {
		background-color: var(--primary);
		border-radius: 5px;
		cursor: grab;
	}

.gridLayout-wrapper {
	position: relative;
	min-height: 300px;
}

	.gridLayout-wrapper.loading::after {
		content: "";
		position: absolute;
		top: 10%;
		left: 50%;
		width: 40px;
		height: 40px;
		border: 3px solid rgba(0, 0, 0, 0.2);
		border-top-color: #000;
		border-radius: 50%;
		animation: spin 0.3s linear infinite;
		transform: translate(-50%, -50%);
		z-index: 10000;
	}

.canvas-filter-product {
	background-color: var(--white);
}

	.canvas-filter-product .canvas-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		padding-bottom: 10px;
		position: relative;
		text-transform: capitalize;
		font-size: 20px;
		line-height: 30px;
		font-weight: 500;
		box-shadow: 0px -5px 18px 5px rgba(64, 72, 87, 0.1490196078);
	}

	.canvas-filter-product .canvas-wrapper {
		padding: 0;
		isolation: isolate;
		height: 100%;
		width: 100%;
		max-height: none;
		display: grid;
		grid-auto-rows: auto minmax(0, 1fr) auto;
		align-content: start;
	}

	.canvas-filter-product .canvas-body {
		height: unset;
	}

	.canvas-filter-product .canvas-bottom {
		box-shadow: 0px 5px 18px 5px rgba(64, 72, 87, 0.1490196078);
		padding: 15px;
		background-color: var(--white);
	}

.popup-style {
	z-index: 3000;
	border: 0;
}

	.popup-style .popup-wrapper {
		padding: 0;
		isolation: isolate;
		height: 100%;
		width: 100%;
		max-height: none;
		display: grid;
		grid-auto-rows: auto minmax(0, 1fr) auto;
		align-content: start;
	}

	.popup-style .icon-close-popup {
		cursor: pointer;
	}

	.popup-style .popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30px;
		padding-bottom: 20px;
		margin: 0px 20px;
		border-bottom: 1px solid var(--gray-4);
	}

	.popup-style .popup-body {
		overscroll-behavior-y: contain;
		overflow-y: auto;
		padding: 20px;
	}

		.popup-style .popup-body::-webkit-scrollbar {
			width: 3px;
		}

		.popup-style .popup-body::-webkit-scrollbar-thumb {
			background-color: var(--primary);
			border-radius: 5px;
			cursor: grab;
		}

	.popup-style .popup-footer {
		padding: 20px 20px 30px 20px;
	}

.popup-shopping-cart .popup-footer {
	box-shadow: 0px 5px 13px 5px rgba(64, 72, 87, 0.1490196078);
	display: grid;
	gap: 15px;
}

.popup-shopping-cart .cart-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.popup-shopping-cart .box-btn {
	display: flex;
	gap: 10px;
	width: 100%;
}

	.popup-shopping-cart .box-btn > * {
		width: 100%;
	}

.popup-shopping-cart .card-product {
	flex-direction: row !important;
}

	.popup-shopping-cart .card-product .card-product-wrapper {
		max-width: 122px !important;
		flex-shrink: 0;
	}

.minicart-empty {
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.modal-def .icon-close-popup {
	position: absolute;
	right: 0px;
	top: 0px;
	cursor: pointer;
	z-index: 5;
	padding: 10px;
}

.modal-def .modal-content {
	border-radius: 8px;
	overflow: hidden;
}

.modal-quick-view .modal-dialog {
	max-width: 1200px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

.modal-quick-view .modal-content {
	display: flex;
}

.modal-quick-view .quickview-image {
	padding: 15px;
}

	.modal-quick-view .quickview-image .tf-image-view {
		aspect-ratio: 450/500;
	}

		.modal-quick-view .quickview-image .tf-image-view img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

.modal-quick-view .quickview-info-wrap {
	flex: 0 0 auto;
	max-width: 100%;
	flex-grow: 1;
	position: relative;
	margin: 0;
}

.modal-quick-view .quickview-info-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 15px;
}

	.modal-quick-view .quickview-info-inner::-webkit-scrollbar {
		width: 3px;
	}

	.modal-quick-view .quickview-info-inner::-webkit-scrollbar-thumb {
		background-color: var(--primary);
		border-radius: 5px;
	}

.modal-quick-view .box-quantity-wrap {
	display: flex;
	gap: 20px;
	align-items: center;
}

.modal-quick-view .info-short-decs .title-decs {
	margin-bottom: 10px;
}

.modal-quick-view .info-short-decs > ul li {
	position: relative;
	padding-left: 13px;
}

	.modal-quick-view .info-short-decs > ul li::after {
		content: "";
		left: 0;
		top: 9px;
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: var(--black);
	}

	.modal-quick-view .info-short-decs > ul li:not(:last-child) {
		margin-bottom: 5px;
	}

.modal-quick-view .quickview-heading {
	display: grid;
	gap: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-5);
}

.tf-single-slide .item {
	aspect-ratio: 540/650;
}

	.tf-single-slide .item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.offcanvas-compare {
	z-index: 2001;
	height: auto !important;
	overflow: auto;
}

	.offcanvas-compare .icon-close-popup {
		position: absolute;
		top: 24px;
		right: 24px;
		font-size: 16px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f7f7f7;
		border-radius: 50%;
		cursor: pointer;
	}

	.offcanvas-compare .tf-compare-list {
		display: flex;
		align-items: center;
		gap: 40px;
		padding: 24px 0px;
	}

	.offcanvas-compare .tf-compare-wrap {
		display: flex;
		align-items: center;
		flex-grow: 1;
		overflow: auto hidden;
		gap: 48px;
		padding: 24px 0;
		margin: -24px 0;
		padding-right: 20px;
		margin-right: -20px;
		scroll-behavior: smooth;
	}

		.offcanvas-compare .tf-compare-wrap::-webkit-scrollbar {
			height: 3px;
		}

		.offcanvas-compare .tf-compare-wrap::-webkit-scrollbar-thumb {
			background-color: var(--primary);
			border-radius: 3px;
		}

	.offcanvas-compare .tf-compare-buttons {
		display: flex;
		align-items: center;
		justify-content: end;
		width: 220px;
		flex-shrink: 0;
	}

	.offcanvas-compare .tf-compare-item {
		width: 263px;
		flex-shrink: 0;
		position: relative;
		padding: 11px;
		border-radius: 12px;
		border: 1px solid var(--gray-4);
		display: flex;
		align-items: center;
		gap: 16px;
	}

		.offcanvas-compare .tf-compare-item .image {
			aspect-ratio: 92/123;
			flex-shrink: 0;
			border-radius: 8px;
			overflow: hidden;
			max-width: 92px;
			width: 100%;
		}

			.offcanvas-compare .tf-compare-item .image img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}

		.offcanvas-compare .tf-compare-item .icon-close {
			position: absolute;
			top: 0;
			right: 0;
			transform: translate(50%, -50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background-color: var(--primary);
			border-radius: 50%;
			font-size: 12px;
			color: var(--white);
			z-index: 5;
			cursor: pointer;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

			.offcanvas-compare .tf-compare-item .icon-close:hover {
				background-color: var(--gray-2);
			}

		.offcanvas-compare .tf-compare-item > .btns-repeat {
			position: absolute;
			top: 50%;
			right: -32px;
			transform: translateY(-50%);
			display: flex;
			cursor: pointer;
		}

		.offcanvas-compare .tf-compare-item .content {
			display: grid;
			gap: 15px;
		}

		.offcanvas-compare .tf-compare-item:last-child > .btns-repeat {
			display: none;
		}

	.offcanvas-compare .tf-compare-btn {
		display: grid;
		gap: 15px;
	}

	.offcanvas-compare .tf-compapre-button-clear-all {
		cursor: pointer;
	}

.modal-newleter .modal-dialog {
	transform: unset !important;
}

.modal-newleter .modal-content {
	padding: 20px;
	display: grid;
	gap: 20px;
}

.modal-newleter .heading {
	display: grid;
	gap: 15px;
}

.modal-newleter .form-sub {
	display: grid;
	gap: 15px;
}

.modalDemo .modal-dialog {
	max-width: 1540px;
	margin-top: 8px;
	margin-bottom: 8px;
	height: calc(100vh - 16px);
}

.modalDemo .modal-content {
	padding: 0 50px 40px;
	background-color: var(--white);
	width: 100%;
	border-radius: 20px;
	margin: 0 15px;
	max-height: calc(100vh - 60px);
	border: 0;
	cursor: default;
	overflow: hidden;
}

.modalDemo .demo-title {
	margin-top: 50px;
	margin-bottom: 44px;
}

.modalDemo .icon-close-popup {
	position: absolute;
	top: 18px;
	right: 18px;
}

.modalDemo .demo-menu-list {
	padding: 0 32px;
	overscroll-behavior-y: contain;
	overflow-y: auto;
	height: max-content;
}

.modalDemo .row-demo {
	grid-template-columns: repeat(5, 1fr);
}

.tf-toolbar-bottom {
	display: flex;
	padding: 11px 15px 12px;
	position: fixed;
	z-index: 200;
	bottom: 0;
	right: 0;
	left: 0;
	border-top: 1px solid #eeeeee;
	background-color: var(--white);
	box-shadow: 0px 4px 20px 0px rgba(163, 163, 163, 0.2784313725);
}

	.tf-toolbar-bottom .toolbar-item {
		width: 100%;
		position: relative;
	}

		.tf-toolbar-bottom .toolbar-item a {
			width: 100%;
			padding-right: 10px;
			padding-left: 10px;
			gap: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

			.tf-toolbar-bottom .toolbar-item a .toolbar-icon {
				width: 20px;
				height: 20px;
				position: relative;
			}

			.tf-toolbar-bottom .toolbar-item a .toolbar-count {
				position: absolute;
				top: -4px;
				right: -8px;
				width: 16px;
				height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--primary);
				border-radius: 50%;
				font-size: 8px;
				font-weight: 500;
				line-height: 15px;
				color: var(--white);
			}

			.tf-toolbar-bottom .toolbar-item a .toolbar-label {
				font-size: 13px;
				line-height: 18px;
			}

.offcanvas-search {
	height: 100vh !important;
}

	.offcanvas-search .icon-close-popup {
		padding: 10px;
		background-color: white;
	}

	.offcanvas-search .offcanvas-content {
		overflow-y: auto;
		padding: 50px 0;
	}

		.offcanvas-search .offcanvas-content::-webkit-scrollbar {
			width: 5px;
		}

		.offcanvas-search .offcanvas-content::-webkit-scrollbar-thumb {
			background-color: var(--primary);
			border-radius: 5px;
			cursor: grab;
		}

	.offcanvas-search .popup-header {
		position: fixed;
		padding: 8px 15px;
		display: flex;
		justify-content: flex-end;
		z-index: 50;
		top: 0;
		left: 0;
		right: 0;
		background-color: var(--white);
	}

	.offcanvas-search .popular-searches {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px 20px;
	}

		.offcanvas-search .popular-searches ul {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
		}

			.offcanvas-search .popular-searches ul a {
				padding: 9px 19px;
				border-radius: 10px;
				background-color: #f9f9f9;
				border: 1px solid rgba(161, 161, 161, 0.2);
			}

.looking-for-wrap {
	display: grid;
	gap: 24px;
	margin-bottom: 30px;
}

/*------------ box icon ---------------- */
.box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.tf-icon-box {
	border-radius: 8px;
	border: 1px solid var(--gray-5);
	padding: 19px 20px;
	display: flex;
	gap: 20px;
}

	.tf-icon-box .icon-box {
		transition-duration: 0.5s;
	}

		.tf-icon-box .icon-box i {
			font-size: 30px;
		}

	.tf-icon-box .content {
		display: grid;
		gap: 3px;
	}

	.tf-icon-box:hover .icon-box {
		transform: scale(1.2);
		transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}

/*------------ hover ---------------- */
.hover-img .img-style {
	overflow: hidden;
}

	.hover-img .img-style > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		-webkit-transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
		transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
	}

.hover-img .img-style-2 {
	overflow: hidden;
}

	.hover-img .img-style-2 > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
	}

.hover-img:hover .img-style > img {
	-webkit-transform: scale(1.06);
	transform: scale(1.06);
}

.hover-img:hover .img-style-2 > img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.hover-img .img-style2 {
	overflow: hidden;
	border-radius: 10px;
}

	.hover-img .img-style2 .img-hv {
		width: 100%;
		object-fit: cover;
		-webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
		transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
		transition: transform 500ms ease;
	}

.shine-item {
	position: relative;
	overflow: hidden;
}

	.shine-item.hv-shine-2::after {
		transform: translate(-50%, -50%);
		transition: all 1s ease;
	}

	.shine-item::after {
		content: "";
		position: absolute;
		width: 200%;
		height: 0%;
		left: 50%;
		top: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		transform: translate(-50%, -50%) rotate(-45deg);
		z-index: 1;
		transition: all 0.6s ease;
	}

	.shine-item:hover::after {
		height: 350%;
		background-color: transparent;
	}

	.shine-item:not(:hover)::after {
		transition: none;
	}

.hover-tooltip {
	position: relative;
}

	.hover-tooltip .tooltip {
		pointer-events: none;
		position: absolute;
		white-space: nowrap;
		padding: 0px 8.5px;
		height: 25px;
		border-radius: 2px;
		bottom: calc(100% + 8px);
		transform: translateY(8px);
		opacity: 0;
		visibility: hidden;
		color: var(--white);
		max-width: 250px;
		width: max-content;
		background-color: var(--black);
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
		z-index: 100;
		font-size: 12px;
		line-height: 22px;
	}

		.hover-tooltip .tooltip::before {
			content: "";
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			top: 20px;
			position: absolute;
			background: var(--black);
			width: 8px;
			height: 8px;
			z-index: -1;
		}

	.hover-tooltip:hover .tooltip {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0.1s;
	}

	.hover-tooltip.tooltip-bot .tooltip {
		top: calc(100% + 8px);
		bottom: auto;
	}

		.hover-tooltip.tooltip-bot .tooltip::before {
			top: -2px;
		}

	.hover-tooltip.tooltip-left .tooltip {
		right: 100%;
		bottom: auto;
		transform: translateX(0px);
	}

		.hover-tooltip.tooltip-left .tooltip::before {
			top: 50%;
			left: auto;
			transform: translateY(-50%) rotate(45deg);
			right: -4px;
		}

	.hover-tooltip.tooltip-left:hover .tooltip {
		transform: translateX(-8px);
	}

	.hover-tooltip.tooltip-right .tooltip {
		left: 100%;
		bottom: auto;
		transform: translateX(0px);
	}

		.hover-tooltip.tooltip-right .tooltip::before {
			top: 50%;
			right: auto;
			transform: translateY(-50%) rotate(45deg);
			left: -4px;
		}

	.hover-tooltip.tooltip-right:hover .tooltip {
		transform: translateX(8px);
	}

.hover-overlay {
	position: relative;
}

	.hover-overlay::before {
		position: absolute;
		z-index: 2;
		content: "";
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.1);
		top: 0;
		left: 0;
		transition: 0.4s ease 0.1s;
		opacity: 0;
		visibility: hidden;
	}

	.hover-overlay:hover::before {
		opacity: 1;
		visibility: visible;
	}

.hover-overlay-2 .img-hv-overlay {
	position: relative;
}

	.hover-overlay-2 .img-hv-overlay::before {
		content: "";
		position: absolute;
		width: 50%;
		left: 0;
		top: 0;
		height: 0%;
		background-color: var(--black);
		opacity: 0.1;
		z-index: 2;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.hover-overlay-2 .img-hv-overlay::after {
		content: "";
		position: absolute;
		width: 50%;
		right: 0;
		bottom: 0;
		height: 0%;
		background-color: var(--black);
		opacity: 0.1;
		z-index: 2;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

.hover-overlay-2:hover .img-hv-overlay::before {
	height: 100%;
}

.hover-overlay-2:hover .img-hv-overlay::after {
	height: 100%;
	transition-delay: 0.2s;
}

/*------------ product ---------------- */
.card-product {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.card-product .card-product-wrapper {
		aspect-ratio: 1;
		position: relative;
		border-radius: 3px;
		overflow: hidden;
		z-index: 20;
	}

		.card-product .card-product-wrapper img {
			display: block;
			height: 100%;
			width: 100%;
			object-fit: cover;
			object-position: center;
			transition-duration: 700ms;
		}

		.card-product .card-product-wrapper:hover .product-img .img-product {
			opacity: 0;
		}

		.card-product .card-product-wrapper:hover .product-img .img-hover {
			display: block;
			z-index: 1;
			opacity: 1;
			-webkit-transform: scale(1.05);
			transform: scale(1.05);
		}

		.card-product .card-product-wrapper.img-small {
			max-width: 74px !important;
		}

	.card-product .product-img {
		display: flex;
		width: 100%;
		height: 100%;
		position: relative;
		align-items: stretch;
	}

		.card-product .product-img .img-hover {
			position: absolute;
			inset: 0;
			opacity: 0;
		}

	.card-product .list-product-btn {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 8px;
		top: 8px;
		right: 8px;
		z-index: 6;
	}

	.card-product .name-product {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}

	.card-product .box-icon {
		width: 30px;
		height: 30px;
		border-radius: 3px;
		background-color: var(--white);
		color: var(--black);
		position: relative;
		border-radius: 50%;
		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725);
	}

		.card-product .box-icon .icon {
			font-size: 12px;
		}

		.card-product .box-icon svg {
			width: 16px;
		}

			.card-product .box-icon svg path {
				-webkit-transition: all 0.4s ease-in-out;
				-moz-transition: all 0.4s ease-in-out;
				-ms-transition: all 0.4s ease-in-out;
				-o-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;
			}

		.card-product .box-icon:hover {
			background-color: var(--black) !important;
			color: var(--white);
			border-color: var(--black);
		}

	.card-product .card-product-info {
		display: grid;
		gap: 20px;
	}

		.card-product .card-product-info .box-title {
			display: grid;
			gap: 10px;
		}

		.card-product .card-product-info .box-infor-detail {
			display: grid;
			gap: 10px;
		}

		.card-product .card-product-info .star-review {
			align-items: center;
			gap: 10px;
		}

	.card-product .product-progress-sale {
		display: grid;
		gap: 4px;
	}

	.card-product .group-btn {
		position: relative;
		display: grid;
		gap: 10px;
	}

		.card-product .group-btn .price-wrap {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			opacity: 1;
			visibility: visible;
			transform: translateY(0%);
		}

		.card-product .group-btn .list-product-btn {
			position: relative;
			z-index: 21;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			justify-content: flex-start;
			gap: 10px;
			transform: unset;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

			.card-product .group-btn .list-product-btn li {
				transform: unset;
				opacity: 1;
				visibility: visible;
			}

	.card-product.style-small {
		gap: 14px;
	}

		.card-product.style-small .card-product-info .box-title {
			gap: 8px;
		}

	.card-product.style-img-border .card-product-wrapper {
		border: 1px solid var(--gray-5);
		padding: 15px;
	}

	.card-product.style-border {
		border-radius: 8px;
		border: 1px solid var(--gray-5);
		padding: 15px;
	}

	.card-product.style-row .card-product-info {
		max-width: 621px;
		width: 100%;
	}

	.card-product.style-row .card-product-btn {
		display: flex;
		justify-content: center;
		gap: 14px;
		flex-direction: column;
		width: 100%;
		position: relative;
	}

		.card-product.style-row .card-product-btn .box-btn {
			display: flex;
			gap: 20px;
			align-items: center;
		}

	.card-product.style-row.row-small {
		align-items: center;
	}

		.card-product.style-row.row-small .card-product-info {
			max-width: 735px;
		}

	.card-product.style-row.row-small-2 {
		gap: 12px;
		flex-direction: row;
	}

		.card-product.style-row.row-small-2 .card-product-wrapper {
			max-width: 122px;
		}

		.card-product.style-row.row-small-2 .price-wrap {
			flex-direction: column;
			gap: 2px 10px;
			margin-top: 0px;
			align-items: start;
			max-width: max-content;
		}

	.card-product.style-row.type-row-3 .card-product-wrapper {
		max-width: unset;
	}

	.card-product.style-3 {
		background-color: var(--white);
		padding: 10px;
		border-radius: 8px;
		gap: 16px !important;
	}

		.card-product.style-3 .price-wrap {
			flex-direction: column;
			gap: 2px 10px;
			margin-top: 0px;
			align-items: start;
			max-width: max-content;
		}

		.card-product.style-3 .card-product-wrapper {
			max-width: 208px;
		}

	.card-product.style-4 {
		background-color: var(--white);
		padding: 16px;
	}

.list-product-btn.style-2 {
	top: -10px !important;
}

	.list-product-btn.style-2 .box-icon {
		width: 30px;
		height: 30px;
	}

		.list-product-btn.style-2 .box-icon .icon {
			font-size: 11px;
		}

	.list-product-btn.style-2 .tooltip {
		padding: 0px 6px;
		height: 20px;
		bottom: calc(100% + 6px);
		font-size: 11px;
		line-height: 22px;
	}

		.list-product-btn.style-2 .tooltip::before {
			top: 16px;
		}

.countdown-box .countdown__timer {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.countdown-box .countdown__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.countdown-box .countdown__value {
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--gray-5);
	border-radius: 50%;
}

.countdown-box .countdown__label {
	font-weight: 400;
	font-size: 12px;
	line-height: 22px;
}

.countdown-box-2 {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.countdown-box-2 .js-countdown {
		background-color: var(--white);
		width: max-content;
		padding: 10px 15px;
		border-radius: 8px;
	}

	.countdown-box-2 .countdown__timer {
		display: flex;
		justify-content: center;
		gap: 21px;
	}

	.countdown-box-2 .countdown__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 50px;
	}

		.countdown-box-2 .countdown__item:not(:last-child) {
			position: relative;
		}

			.countdown-box-2 .countdown__item:not(:last-child)::after {
				content: "";
				position: absolute;
				height: 40px;
				width: 1px;
				background-color: var(--gray-5);
				right: -10px;
				top: 50%;
				transform: translateY(-50%);
			}

	.countdown-box-2 .countdown__value {
		font-size: 40px;
		line-height: 40px;
	}

	.countdown-box-2 .countdown__label {
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
	}

.box-sale-tag {
	font-weight: 600;
	font-size: 13px;
	line-height: 23px;
	padding: 0px 5.5px;
	color: var(--white);
	display: inline-flex;
	border-radius: 3px;
	background-color: var(--primary);
	margin-left: 5px;
	position: relative;
}

	.box-sale-tag::before {
		content: "";
		position: absolute;
		border-radius: 2px;
		left: -3px;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		width: 8px;
		height: 8px;
		background-color: var(--primary);
		z-index: 0;
	}

.list-color-product {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
}

	.list-color-product .list-color-item {
		width: 20px;
		height: 20px;
		border: 1px solid transparent;
		background-color: transparent;
		-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		-ms-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

		.list-color-product .list-color-item .swatch-value {
			width: 100%;
			height: 100%;
			border: 2px solid var(--white);
			display: inline-block;
			border-radius: 50%;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.list-color-product .list-color-item img {
			visibility: hidden;
			width: 18px;
			height: 18px;
			position: absolute;
		}

		.list-color-product .list-color-item.line {
			border: 1px solid transparent !important;
		}

			.list-color-product .list-color-item.line .swatch-value {
				position: relative;
			}

				.list-color-product .list-color-item.line .swatch-value::before {
					content: "";
					position: absolute;
					width: 100%;
					height: 100%;
					border: 1px solid var(--rgba-black-3);
					top: 0;
					left: 0;
					z-index: 1;
					border-radius: 50%;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
				}

		.list-color-product .list-color-item.active, .list-color-product .list-color-item:hover {
			border-color: var(--black) !important;
		}

			.list-color-product .list-color-item.active .swatch-value, .list-color-product .list-color-item:hover .swatch-value {
				border-color: var(--white);
			}

				.list-color-product .list-color-item.active .swatch-value::before, .list-color-product .list-color-item:hover .swatch-value::before {
					border-color: var(--line);
				}

.list-computer-memory {
	display: flex;
	gap: 6px;
}

	.list-computer-memory li {
		padding: 3px 7px 3px 8px;
		border-radius: 3px;
		border: 1px solid var(--gray-4);
	}

.list-infor-fearture {
	display: grid;
	gap: 2px;
}

	.list-infor-fearture li {
		display: flex;
		align-items: center;
	}

	.list-infor-fearture .name-feature {
		flex-grow: 2;
		max-width: 119px;
		width: 100%;
	}

	.list-infor-fearture .property {
		flex-grow: 1;
		width: 100%;
	}

.card-usually {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.card-usually .content {
		display: flex;
		align-items: start;
		gap: 12px;
	}

	.card-usually .box-name {
		display: grid;
		gap: 10px;
	}

	.card-usually .prd-name {
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}

.stagger-wrap .stagger-item {
	transition: 0.3s ease-in-out;
	transform: scale(0.5) rotate(90deg) skew(15deg);
	opacity: 0;
}

	.stagger-wrap .stagger-item.stagger-finished {
		transform: scale(1) rotate(0deg) skew(0deg);
		opacity: 1;
	}

.slider-scroll,
.thumbs-slider {
	display: flex;
	gap: 20px;
}

.tf-product-media-thumbs {
	width: 80px;
	flex-shrink: 0;
	max-height: 652;
}

	.tf-product-media-thumbs .swiper-slide {
		height: max-content;
		width: auto;
	}

		.tf-product-media-thumbs .swiper-slide .item {
			position: relative;
			height: 100%;
			max-height: 80px;
			max-width: 80px;
			cursor: pointer;
		}

			.tf-product-media-thumbs .swiper-slide .item img {
				border-radius: 4px;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.tf-product-media-thumbs .swiper-slide .item::after {
				position: absolute;
				content: "";
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				border: 1px solid var(--gray-5);
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
				border-radius: 4px;
			}

		.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {
			border-color: var(--main);
		}

.tf-product-media-main {
	width: calc(100% - 100px);
}

	.tf-product-media-main .item {
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 12px;
		overflow: hidden;
		max-height: 687px;
	}

		.tf-product-media-main .item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

.thumbs-default .thumbs-slider {
	flex-direction: column;
}

	.thumbs-default .thumbs-slider .tf-product-media-thumbs {
		order: 1;
		width: 100%;
	}

		.thumbs-default .thumbs-slider .tf-product-media-thumbs .swiper-slide {
			width: auto;
		}

	.thumbs-default .thumbs-slider .tf-product-media-main {
		width: 100%;
	}

.thumbs-left .thumbs-slider {
	flex-direction: column;
}

.thumbs-left .tf-product-media-main {
	width: 100%;
}

.thumbs-left .tf-product-media-thumbs {
	width: 100%;
}

.price-wrap {
	display: flex;
	align-items: center;
	gap: 5px 12px;
	flex-wrap: wrap;
}

.old-price {
	position: relative;
	display: inline-flex;
}

	.old-price::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		height: 1px;
		background-color: var(--gray-2);
	}

	.old-price.style-white {
		color: var(--white);
	}

		.old-price.style-white::before {
			background-color: var(--white);
		}

.tf-product-info-list {
	display: flex;
	gap: 30px;
	align-items: start;
	flex-wrap: wrap;
}

	.tf-product-info-list .product-box-btn {
		display: grid;
		gap: 10px;
	}

	.tf-product-info-list.style-2 .tf-product-info-choose-option {
		border: unset;
		padding: 0;
		max-width: unset;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px 15px;
	}

		.tf-product-info-list.style-2 .tf-product-info-choose-option .title {
			margin-bottom: 0px;
		}

		.tf-product-info-list.style-2 .tf-product-info-choose-option > * {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.tf-product-info-list.style-2 .tf-product-info-choose-option .select-color {
			min-width: 175px;
		}

	.tf-product-info-list.style-2 .infor-center {
		gap: 9px;
	}

	.tf-product-info-list.style-2 .product-delivery {
		align-items: center;
		display: flex;
		gap: 0px 14px;
		flex-wrap: wrap;
	}

	.tf-product-info-list.style-2 .shipping-to {
		display: flex;
		align-items: center;
		gap: 8px;
	}

.tf-product-info-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.tf-product-info-content > *:not(:last-child) {
		padding-bottom: 20px;
		border-bottom: 1px solid var(--gray-5);
	}

	.tf-product-info-content .infor-bottom {
		display: grid;
		gap: 10px;
	}

	.tf-product-info-content .product-fearture-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

		.tf-product-info-content .product-fearture-list li {
			display: flex;
			align-items: center;
			gap: 20px;
		}

			.tf-product-info-content .product-fearture-list li p {
				width: 72px;
			}

	.tf-product-info-content .product-about-list {
		display: grid;
		gap: 10px;
	}

		.tf-product-info-content .product-about-list p {
			padding-left: 16px;
			position: relative;
		}

			.tf-product-info-content .product-about-list p::before {
				content: "";
				position: absolute;
				left: 0;
				top: 8px;
				width: 4px;
				height: 4px;
				right: 4px;
				border-radius: 50%;
				background-color: var(--gray-2);
			}

	.tf-product-info-content .product-info-price {
		display: flex;
		gap: 10px;
		align-items: end;
	}

		.tf-product-info-content .product-info-price .old-price {
			padding-bottom: 4px;
		}

.product-info-rate-wrap {
	display: flex;
	align-items: center;
	gap: 0px 16px;
	flex-wrap: wrap;
}

	.product-info-rate-wrap > li:not(:last-child) {
		padding-right: 16px;
		position: relative;
	}

		.product-info-rate-wrap > li:not(:last-child)::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 14px;
			background-color: var(--gray-4);
		}

.star-review {
	display: flex;
	align-items: center;
	gap: 7px;
}

.list-star {
	display: flex;
	align-items: center;
	gap: 3px;
}

	.list-star > li {
		display: flex;
		align-items: center;
	}

	.list-star i {
		color: #FCB500;
	}

.wg-quantity {
	display: flex;
	align-items: center;
	overflow: hidden;
	gap: 2px;
	width: max-content;
}

	.wg-quantity .quantity-product {
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		text-align: center;
		font-weight: 700;
		font-size: 16px;
		line-height: 18px;
		color: var(--primary);
		pointer-events: none;
	}

	.wg-quantity .btn-quantity {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: var(--gray);
		cursor: pointer;
		border: 1px solid var(--line-4);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.wg-quantity .btn-quantity:hover {
			color: var(--primary);
		}

.tf-product-info-content .infor-heading,
.tf-product-info-content .infor-bottom,
.tf-product-info-content .infor-center {
	display: grid;
	gap: 10px;
}

.tf-product-info-choose-option {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-radius: 6px;
	border: 1px solid var(--gray-4);
	width: 100%;
}

	.tf-product-info-choose-option .product-delivery {
		display: grid;
		gap: 10px;
	}

	.tf-product-info-choose-option .title {
		margin-bottom: 12px;
	}

	.tf-product-info-choose-option .shipping-to {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.tf-product-info-choose-option .product-detail .caption {
		margin-bottom: 4px;
	}

	.tf-product-info-choose-option .product-detail .body-text-3 {
		display: grid;
		gap: 8px;
	}

.tf-select-color {
	position: relative;
	width: max-content;
}

	.tf-select-color::after {
		content: "\e918";
		position: absolute;
		font-family: "icomoon";
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--gray);
	}

.rating-percent {
	width: max-content;
}

	.rating-percent .rate-percent {
		font-weight: 700;
		font-size: 70px;
		line-height: 70px;
		color: var(--primary);
		margin-bottom: 9px;
	}

		.rating-percent .rate-percent span {
			font-weight: 400;
			font-size: 40px;
			line-height: 48px;
			color: var(--gray-4);
		}

	.rating-percent .list-star {
		margin-bottom: 3px;
	}

.review-list > li:not(:last-child) {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gray-5);
}

.box-review {
	display: flex;
	gap: 14px;
	align-items: start;
}

	.box-review .avt {
		max-width: 50px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}

	.box-review .author-wrap .name {
		margin-bottom: 2px;
	}

	.box-review .review-content {
		display: grid;
		gap: 18px;
	}

	.box-review .verified {
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		gap: 0px 10px;
		flex-wrap: wrap;
	}

		.box-review .verified > li:not(:last-child) {
			padding-right: 10px;
			position: relative;
		}

			.box-review .verified > li:not(:last-child)::after {
				content: "";
				position: absolute;
				width: 1px;
				height: 14px;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: var(--gray-4);
			}

.flat-product-des-list {
	display: grid;
	gap: 30px;
}

	.flat-product-des-list.style-2 .flat-title-tab-product-des {
		border: unset;
		display: grid;
		gap: 30px;
	}

		.flat-product-des-list.style-2 .flat-title-tab-product-des:not(:last-child) {
			padding-bottom: 30px;
			border-bottom: 1px solid var(--gray-5);
		}

	.flat-product-des-list.style-2 .tab-main {
		padding: 0;
	}

	.flat-product-des-list.bg-white {
		padding: 15px;
		border-radius: 8px;
	}

.tf-product-info-wrap.bg-white,
.tf-product-media-wrap.bg-white {
	border-radius: 8px;
	padding: 15px;
}

.product-thumb-slider {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

	.product-thumb-slider .tf-product-view-main {
		width: 100%;
	}

	.product-thumb-slider .tf-product-view-thumbs {
		order: 1;
		width: 100%;
	}

		.product-thumb-slider .tf-product-view-thumbs .swiper-slide {
			width: auto;
		}

	.product-thumb-slider.thumbs-right .tf-product-view-main .tf-image-view {
		aspect-ratio: 571/321;
		max-width: 571px;
	}

	.product-thumb-slider.thumbs-right .tf-product-view-thumbs .swiper-slide .item {
		max-width: 69px;
		max-height: 69px;
		overflow: hidden;
		aspect-ratio: 1;
	}

	.product-thumb-slider.thumbs-right.type-right-3 {
		gap: 20px;
	}

		.product-thumb-slider.thumbs-right.type-right-3 .tf-product-view-main .tf-image-view {
			aspect-ratio: 506/386;
			max-width: 506px;
		}

.product-thumb-image {
	display: grid;
	gap: 10px;
}

	.product-thumb-image .list-image-product {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-behavior: smooth;
	}

		.product-thumb-image .list-image-product .image-swap {
			width: 50px;
			height: 50px;
			border: 1px solid var(--gray-5);
			border-radius: 3px;
			cursor: pointer;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			flex-shrink: 0;
		}

			.product-thumb-image .list-image-product .image-swap img {
				object-fit: contain;
			}

			.product-thumb-image .list-image-product .image-swap.active {
				border-color: var(--black);
			}

		.product-thumb-image .list-image-product::-webkit-scrollbar {
			display: none;
		}

.tf-product-view-main .tf-image-view {
	aspect-ratio: 300/260;
	border-radius: 5px;
	overflow: hidden;
}

	.tf-product-view-main .tf-image-view img {
		width: auto;
		object-position: unset;
	}

.tf-product-view-thumbs .swiper-slide .item {
	position: relative;
	height: 100%;
	max-width: 52px;
	max-height: 50px;
	overflow: hidden;
	cursor: pointer;
}

	.tf-product-view-thumbs .swiper-slide .item img {
		border-radius: 3px;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.tf-product-view-thumbs .swiper-slide .item::after {
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		border: 1px solid var(--gray-5);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		border-radius: 3px;
	}

.tf-product-view-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {
	border-color: var(--black);
}

.product-list-wrap > li:not(:last-child) {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gray-5);
}

.tf-grid-product-item {
	width: 100%;
}

.sw-cls {
	margin-top: 10px;
}

	.sw-cls .swiper-slide {
		height: auto;
	}

		.sw-cls .swiper-slide > * {
			height: 100%;
			max-height: 250px;
		}

	.sw-cls .img-item {
		max-width: 200px;
	}

.tf-product-view-content {
	display: flex;
	gap: 20px;
}

	.tf-product-view-content .sidebar-filter {
		max-width: 284px;
		width: 100%;
	}

	.tf-product-view-content .content-area {
		width: 100%;
	}

.tf-control-view {
	display: flex;
	align-items: center;
	gap: 10px;
}

	.tf-control-view .tf-control-sort {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.tf-control-view .type-sort-quatity {
		min-width: 160px;
	}

	.tf-control-view .type-sort-by {
		min-width: 204px;
	}

	.tf-control-view .tf-sort {
		padding: 9px;
		border-radius: 3px;
		border: 1px solid var(--gray-5);
		display: flex;
		cursor: pointer;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: var(--black);
	}

		.tf-control-view .tf-sort .btn-select {
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.tf-control-view .tf-sort:hover {
			color: var(--primary);
			border-color: var(--primary);
		}

		.tf-control-view .tf-sort i {
			font-size: 24px;
		}

.tf-shop-control {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 21px;
	border-bottom: 1px solid var(--gray-5);
	margin-bottom: 30px;
}

.tf-control-layout {
	display: flex;
	align-items: center;
	gap: 10px;
}

	.tf-control-layout li a {
		padding: 9px;
		border-radius: 3px;
		border: 1px solid var(--gray-5);
		display: flex;
		cursor: pointer;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: var(--black);
	}

		.tf-control-layout li a:hover, .tf-control-layout li a.active {
			color: var(--primary);
			border-color: var(--primary);
		}

	.tf-control-layout li i {
		font-size: 24px;
	}

.tf-dropdown-sort .btn-select {
	display: flex;
	align-items: center;
	gap: 6px;
}

.flat-grid-product.layout-tabgrid-1 .card-product .card-product-btn, .flat-grid-product.layout-tabgrid-2 .card-product .card-product-btn {
	display: none;
}

.flat-grid-product.layout-tabgrid-2 .card-product .box-infor-detail {
	display: none;
}

.flat-grid-product.layout-tablist-1, .flat-grid-product.layout-tablist-2 {
	grid-template-columns: unset !important;
}

	.flat-grid-product.layout-tablist-1 .card-product .card-product-btn, .flat-grid-product.layout-tablist-2 .card-product .card-product-btn {
		display: flex;
	}

	.flat-grid-product.layout-tablist-1 .card-product .list-product-btn, .flat-grid-product.layout-tablist-2 .card-product .list-product-btn {
		display: none;
	}

	.flat-grid-product.layout-tablist-1 .box-infor-detail .tf-btn-icon {
		display: none;
	}

.flat-grid-product.layout-tablist-2 {
	grid-template-columns: unset !important;
}

	.flat-grid-product.layout-tablist-2 .card-product .card-product-btn {
		display: flex;
	}

	.flat-grid-product.layout-tablist-2 .card-product .box-infor-detail > *:not(.star-review) {
		display: none;
	}

	.flat-grid-product.layout-tablist-2 .card-product .card-product-info {
		gap: 10px;
	}

	.flat-grid-product.layout-tablist-2 .card-product .box-title {
		gap: 8px;
	}

.tf-order-detail {
	display: grid;
	gap: 30px;
}

	.tf-order-detail .order-notice {
		display: flex;
		align-items: center;
		box-shadow: 5px 6px 30px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

		.tf-order-detail .order-notice p {
			padding-left: 20px;
		}

		.tf-order-detail .order-notice .icon {
			height: 60px;
			width: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--primary);
		}

	.tf-order-detail .order-overview-list li:not(:last-child) {
		margin-bottom: 10px;
	}

	.tf-order-detail .order-detail-wrap {
		display: grid;
		gap: 15px;
	}

.tf-table-order-detail {
	border: 1px solid #e0e0e0;
	table-layout: fixed;
	width: 100%;
}

	.tf-table-order-detail td,
	.tf-table-order-detail th {
		border: 1px solid #e0e0e0;
		padding: 8px 12px;
		text-align: left;
		vertical-align: middle;
	}

.billing-info {
	padding: 8px 15px;
	border: 1px solid #e0e0e0;
}

.tf-table-wishlist {
	border: 1px solid #e0e0e0;
	width: 100%;
	overflow-x: auto;
}

	.tf-table-wishlist thead {
		white-space: nowrap;
	}

	.tf-table-wishlist td,
	.tf-table-wishlist th {
		border: 1px solid #e0e0e0;
		padding: 8px 12px;
		text-align: left;
		vertical-align: middle;
	}

	.tf-table-wishlist tfoot td {
		padding: 12px 12px;
	}

	.tf-table-wishlist .wishlist-item_remove {
		width: 20px;
		text-align: center;
	}

	.tf-table-wishlist .wishlist-item_image {
		width: 100px;
		min-width: 100px;
	}

	.tf-table-wishlist .wishlist-item_action {
		white-space: nowrap;
	}

.tf-table-compare {
	border-collapse: collapse;
	width: 100%;
}

	.tf-table-compare td,
	.tf-table-compare th {
		border: 1px solid #e0e0e0;
		padding: 8px 12px;
		text-align: left;
		vertical-align: middle;
	}

	.tf-table-compare tr:nth-child(odd) {
		background-color: #f7f7f7;
	}

	.tf-table-compare .compare-item_info {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: space-between;
	}

	.tf-table-compare .tf-compare-image .image {
		display: flex;
		justify-content: center;
	}

		.tf-table-compare .tf-compare-image .image img {
			max-width: 250px;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

.tf-compare {
	overflow-x: auto;
}

	.tf-compare::-webkit-scrollbar {
		height: 3px;
	}

	.tf-compare::-webkit-scrollbar-thumb {
		background-color: var(--gray-2);
		border-radius: 3px;
	}

.tf-compare-col {
	min-width: 220px;
	max-width: 350px;
}

	.tf-compare-col:first-child {
		min-width: 150px;
	}

.table_def {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

	.table_def thead {
		white-space: nowrap;
	}

	.table_def td,
	.table_def th {
		border: 1px solid #e0e0e0;
		padding: 8px 12px;
		vertical-align: middle;
	}

	.table_def tfoot td {
		padding: 12px 12px;
	}

.tf-order_history-table {
	text-align: center;
	overflow: auto;
}

	.tf-order_history-table table {
		min-width: 700px;
		width: 100%;
	}

	.tf-order_history-table tr {
		border: 1px solid #e0e0e0;
	}

		.tf-order_history-table tr > *:first-child {
			text-align: left;
		}

		.tf-order_history-table tr th,
		.tf-order_history-table tr td {
			border: unset;
		}

	.tf-order_history-table th,
	.tf-order_history-table td {
		padding: 10px 15px;
	}

.account-address .btn-add-address {
	margin-bottom: 42px;
}

.account-address-item {
	border-radius: 16px;
	border: 1px solid var(--gray-4);
}

	.account-address-item .title {
		padding: 15px;
		border-bottom: 1px solid var(--gray-4);
	}

	.account-address-item .info-detail {
		padding: 15px;
		display: grid;
		gap: 24px;
	}

	.account-address-item .box-infor {
		display: grid;
		gap: 12px;
	}

	.account-address-item .box-btn {
		display: flex;
		gap: 12px;
	}

	.account-address-item.editing {
		background-color: #fafafa;
	}

.account-details {
	display: grid;
	gap: 30px;
}

/*------------ blog ---------------- */
.news-item {
	display: grid;
	gap: 20px;
}

	.news-item .entry_meta {
		display: flex;
		align-items: center;
		gap: 14px;
	}

		.news-item .entry_meta > * {
			display: flex;
			align-items: center;
			gap: 4px;
		}

	.news-item .entry_tag {
		padding: 4px 10px;
		border-radius: 3px;
		background-color: var(--white);
		position: absolute;
		bottom: 4px;
		left: 6px;
	}

	.news-item .content {
		display: grid;
		gap: 10px;
	}

	.news-item .entry_infor_news {
		display: grid;
		gap: 14px;
	}

	.news-item.style-large {
		gap: 30px;
	}

	.news-item.style-row {
		display: flex;
		align-items: start;
	}

		.news-item.style-row .entry_image {
			width: 40%;
		}

		.news-item.style-row .content {
			width: 65%;
		}

.wg-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 15px;
	border-top: 1px solid var(--gray-5);
}

	.wg-pagination li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
	}

		.wg-pagination li i {
			font-size: 20px;
		}

		.wg-pagination li.active > * {
			color: var(--primary);
		}

.blog-sidebar {
	max-width: 284px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

	.blog-sidebar .sidebar-item {
		display: grid;
		gap: 16px;
	}

		.blog-sidebar .sidebar-item.style-2 {
			border-radius: 8px 8px 10px 10px;
			border: 1px solid var(--gray-5);
			gap: 0px;
		}

			.blog-sidebar .sidebar-item.style-2 .sb-title {
				padding: 13px 18px;
				background-color: var(--gray-6);
			}

			.blog-sidebar .sidebar-item.style-2 .sb-content {
				padding: 0px 18px;
			}

		.blog-sidebar .sidebar-item:not(.style-2) .sb-title {
			font-size: 16px;
			line-height: 18px;
		}

		.blog-sidebar .sidebar-item.has-line-bt {
			padding-bottom: 24px;
			border-bottom: 1px solid var(--gray-5);
		}

	.blog-sidebar .sb-category a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 0px;
	}

		.blog-sidebar .sb-category a i {
			font-size: 10px;
		}

	.blog-sidebar .sb-category li:not(:last-child) a {
		border-bottom: 1px solid var(--line-2);
		padding: 15px 0px 14px;
	}

	.blog-sidebar .sb-recent {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

		.blog-sidebar .sb-recent li {
			display: flex;
			gap: 10px;
			align-items: start;
		}

			.blog-sidebar .sb-recent li .image {
				max-width: 112px;
				width: 100%;
				flex-shrink: 0;
			}

			.blog-sidebar .sb-recent li:not(:last-child) {
				padding-bottom: 19px;
				border-bottom: 1px solid var(--gray-5);
			}

			.blog-sidebar .sb-recent li .date {
				display: flex;
				align-items: center;
				gap: 4px;
			}

	.blog-sidebar .sb-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

		.blog-sidebar .sb-tags a {
			padding: 9px 15px;
			border-radius: 999px;
			border: 1px solid var(--gray-5);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

			.blog-sidebar .sb-tags a:hover {
				background-color: var(--gray);
				border-color: var(--gray);
				color: var(--white);
			}

.btn-sidebar-mb {
	position: fixed;
	top: 30%;
	left: 0;
	z-index: 50;
}

	.btn-sidebar-mb button {
		width: 40px;
		height: 40px;
		border: 1px solid var(--black);
		background-color: var(--black);
		color: var(--white);
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.btn-sidebar-mb button i {
			font-size: 20px;
		}

		.btn-sidebar-mb button:hover {
			background-color: var(--white);
			color: var(--black);
		}

	.btn-sidebar-mb.right {
		left: unset;
		right: 0;
		transform: rotate(180deg);
	}

.s-blog-list .blog-list-content {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

	.s-blog-list .blog-list-content > .news-item:not(:first-of-type):not(:last-of-type) {
		padding-bottom: 30px;
		border-bottom: 1px solid var(--gray-5);
	}

.s-blog-list .blog-sidebar {
	flex-shrink: 0;
}

.s-blog-detail {
	display: flex;
	align-items: start;
	gap: 40px;
}

	.s-blog-detail .box-direction {
		display: flex;
		flex-direction: column;
		gap: 96px;
		max-width: 268px;
		width: 100%;
	}

		.s-blog-detail .box-direction.sticky {
			position: sticky;
			top: 25%;
		}

		.s-blog-detail .box-direction .bottom {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

	.s-blog-detail .content-blog {
		display: grid;
		gap: 30px;
	}

		.s-blog-detail .content-blog .main-content {
			display: grid;
			gap: 20px;
		}

		.s-blog-detail .content-blog .box-title {
			display: grid;
			gap: 12px;
		}

	.s-blog-detail .main-preview {
		padding-top: 50px;
		border-top: 1px solid var(--gray-5);
		display: grid;
		gap: 50px;
	}

		.s-blog-detail .main-preview > * {
			display: flex;
			flex-direction: column;
			gap: 30px;
		}

	.s-blog-detail .entry_meta {
		display: flex;
		align-items: center;
		gap: 14px;
	}

		.s-blog-detail .entry_meta > * {
			display: flex;
			align-items: center;
			gap: 4px;
		}

	.s-blog-detail .entry_image img {
		width: 100%;
		object-fit: cover;
	}

	.s-blog-detail .entry_image.has-sub {
		display: grid;
		gap: 8px;
		text-align: center;
	}

.comment-wrap .author-wrap {
	display: flex;
	align-items: start;
	gap: 14px;
}

	.comment-wrap .author-wrap .wrap {
		display: grid;
		gap: 20px;
	}

	.comment-wrap .author-wrap .rep-comment .author-wrap {
		padding-top: 20px;
		border-top: 1px solid var(--gray-5);
	}

.comment-wrap .entry_meta {
	display: grid;
	gap: 2px;
}

.comment-wrap .avt {
	max-width: 50px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.comment-wrap .box-comment {
	display: grid;
	gap: 10px;
}

.comment-wrap .comment-list {
	display: grid;
	gap: 40px;
}

	.comment-wrap .comment-list .author-wrap:not(:last-child) {
		padding-bottom: 40px;
		border-bottom: 1px solid var(--gray-5);
	}

/*------------ accordion ---------------- */
.widget-accordion .accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 6px 50px 6px 0px;
	font-weight: 600;
	cursor: pointer;
}

	.widget-accordion .accordion-title .icon {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.widget-accordion .accordion-title:not(.collapsed) .icon {
		background-color: var(--primary);
	}

		.widget-accordion .accordion-title:not(.collapsed) .icon::before {
			transform: rotate(90deg);
			opacity: 0;
		}

		.widget-accordion .accordion-title:not(.collapsed) .icon::after {
			background-color: var(--white);
		}

.widget-accordion .accordion-body {
	padding: 10px 0px 30px;
}

.faq-item {
	display: grid;
	gap: 30px;
}

.faq-wrap .widget-accordion:not(:last-child) .accordion-title.collapsed {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gray-5);
	margin-bottom: 10px;
}

.faq-wrap .accordion-title {
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-color: var(--white);
}

	.faq-wrap .accordion-title .title-sidebar {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.faq-wrap .accordion-title:not(.collapsed) .title-sidebar {
		color: var(--primary);
	}

	.faq-wrap .accordion-title .icon {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background-color: var(--gray-6);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: -2px;
		right: -2px;
	}

		.faq-wrap .accordion-title .icon::after {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			content: "";
			position: absolute;
			width: 11.25px;
			height: 2px;
			border-radius: 1px;
			background-color: var(--gray);
		}

		.faq-wrap .accordion-title .icon::before {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			content: "";
			position: absolute;
			height: 11.25px;
			width: 2px;
			border-radius: 1px;
			background-color: var(--gray);
		}

.faq-wrap .accordion-body {
	display: flex;
	gap: 10px;
	align-items: start;
}

	.faq-wrap .accordion-body i {
		font-size: 30px;
	}

/*------------ zoom ---------------- */
.tf-zoom-main {
	position: sticky;
	top: 30px;
	z-index: 50;
}

	.tf-zoom-main .drift-zoom-pane {
		top: 0;
		left: 0;
		height: 520px;
		max-width: 520px;
		width: 100%;
		background: #fff;
		-webkit-transform: translate3d(0, 0, 0);
		box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);
		z-index: 3;
		border-radius: 8px;
	}

.drift-bounding-box.drift-open {
	background: rgba(255, 255, 255, 0.2509803922);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
	z-index: 5000;
}

.drift-zoom-pane {
	z-index: 5000;
}

.section-image-zoom .other-image-zoom {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.section-image-zoom.zoom-active .other-image-zoom {
	opacity: 0.3;
}

.pswp__bg {
	background: var(--white);
}

.pswp__icn {
	fill: rgb(34, 34, 34);
	color: var(--white);
}

	.pswp__icn .pswp__icn-shadow {
		stroke: var(--white);
		stroke-width: 1px;
		fill: none;
	}

.pswp__counter {
	color: #222;
	text-shadow: 1px 1px 3px #ffffff;
}

.tf-model-viewer {
	width: 100%;
	height: 100%;
	position: relative;
}

	.tf-model-viewer model-viewer {
		display: block;
		position: relative;
		z-index: 5;
		width: 100%;
		height: 100%;
	}

		.tf-model-viewer model-viewer.disabled {
			pointer-events: none;
		}

	.tf-model-viewer.active model-viewer {
		pointer-events: all;
	}

	.tf-model-viewer.active .wrap-btn-viewer {
		display: none;
	}

/*------------ shop ---------------- */
.noUi-target,
.noUi-target * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.noUi-target {
	position: relative;
	direction: ltr;
}

.noUi-base,
.noUi-connects {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.noUi-connects {
	overflow: hidden;
	z-index: 0;
}

.noUi-connect,
.noUi-origin {
	will-change: transform;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
	left: auto;
	right: 0;
}

.noUi-vertical .noUi-origin {
	width: 0;
}

.noUi-horizontal .noUi-origin {
	height: 0;
}

.noUi-handle {
	position: absolute;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
	-webkit-transition: transform 0.3s;
	transition: transform 0.3s;
}

.noUi-state-drag * {
	cursor: inherit !important;
}

.noUi-horizontal {
	height: 18px;
}

	.noUi-horizontal .noUi-handle {
		width: 34px;
		height: 28px;
		left: -17px;
		top: -6px;
	}

.noUi-vertical {
	width: 18px;
}

	.noUi-vertical .noUi-handle {
		width: 28px;
		height: 34px;
		left: -6px;
		top: -17px;
	}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
	right: -17px;
	left: auto;
}

.noUi-draggable {
	cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
	cursor: ns-resize;
}

.noUi-handle:after {
	left: 17px;
}

.noUi-vertical .noUi-handle:after,
.noUi-vertical .noUi-handle:before {
	width: 14px;
	height: 1px;
	left: 6px;
	top: 14px;
}

.noUi-vertical .noUi-handle:after {
	top: 17px;
}

[disabled] .noUi-connect {
	background: #b8b8b8;
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
	cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.noUi-pips {
	position: absolute;
	color: #999;
}

.noUi-value {
	position: absolute;
	white-space: nowrap;
	text-align: center;
}

.noUi-value-sub {
	color: #ccc;
	font-size: 10px;
}

.noUi-marker {
	position: absolute;
	background: #ccc;
}

.noUi-marker-sub {
	background: #aaa;
}

.noUi-marker-large {
	background: #aaa;
}

.noUi-pips-horizontal {
	padding: 10px 0;
	height: 80px;
	top: 100%;
	left: 0;
	width: 100%;
}

.noUi-value-horizontal {
	-webkit-transform: translate(-50%, 50%);
	transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
	-webkit-transform: translate(50%, 50%);
	transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
	margin-left: -1px;
	width: 2px;
	height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
	height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
	height: 15px;
}

.noUi-pips-vertical {
	padding: 0 10px;
	height: 100%;
	top: 0;
	left: 100%;
}

.noUi-value-vertical {
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%, 0);
	padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
	-webkit-transform: translate(0, 50%);
	transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
	width: 5px;
	height: 2px;
	margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
	width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
	width: 15px;
}

.noUi-tooltip {
	display: block;
	position: absolute;
	border: 1px solid #d9d9d9;
	border-radius: 3px;
	background: #fff;
	color: #000;
	padding: 5px;
	text-align: center;
	white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	left: 50%;
	bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	top: 50%;
	right: 120%;
}

.noUi-horizontal {
	height: 4px;
}

.noUi-target {
	border: 0;
}

.noUi-base .noUi-connects {
	border-radius: 999px;
	background-color: var(--gray-5);
}

.noUi-connect {
	background-color: var(--black);
}

.noUi-horizontal .noUi-handle,
.noUi-vertical .noUi-handle {
	height: 16px;
	width: 16px;
	border-radius: 50px;
	border: 2px solid var(--black);
	background-color: var(--gray-4);
	box-shadow: unset;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after,
	.noUi-vertical .noUi-handle::before,
	.noUi-vertical .noUi-handle::after {
		content: none;
	}

	.noUi-horizontal .noUi-handle.noUi-active,
	.noUi-vertical .noUi-handle.noUi-active {
		height: 20px;
		width: 20px;
		top: -8px;
	}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
	right: -8px;
}

.tf-table-page-cart {
	border-spacing: 0;
	border-collapse: collapse;
	width: 1024px;
}

	.tf-table-page-cart thead {
		border-top: 1px solid var(--gray-5);
		border-bottom: 1px solid var(--gray-5);
	}

	.tf-table-page-cart th {
		font-weight: 600;
		font-size: 18px;
		line-height: 24px;
		padding: 20px 0px;
	}

		.tf-table-page-cart th:first-child {
			padding: 20px 0px 20px 25px;
		}

		.tf-table-page-cart th:last-child {
			padding: 20px 25px 20px 0px;
		}

	.tf-table-page-cart tr > * {
		width: 200px;
	}

		.tf-table-page-cart tr > *:first-child {
			width: 400px;
		}

		.tf-table-page-cart tr > *:last-child {
			width: 100px;
		}

	.tf-table-page-cart .tf-cart-item_product {
		display: flex;
		gap: 12px;
	}

	.tf-table-page-cart .img-box {
		max-width: 80px;
		height: 80px;
		width: 100%;
	}

	.tf-table-page-cart .cart-info {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.tf-table-page-cart .variant-box {
		display: flex;
		align-items: center;
	}

	.tf-table-page-cart .tf-select {
		position: relative;
	}

		.tf-table-page-cart .tf-select select {
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			color: var(--gray-2);
			border: unset;
			appearance: none;
			cursor: pointer;
			padding: 0px 4px 0px 2px;
		}

		.tf-table-page-cart .tf-select::after {
			position: absolute;
		}

	.tf-table-page-cart .remove {
		cursor: pointer;
	}

	.tf-table-page-cart .tf-cart-item {
		border-bottom: 1px solid var(--gray-5);
	}

		.tf-table-page-cart .tf-cart-item td {
			padding-right: 25px;
		}

			.tf-table-page-cart .tf-cart-item td:first-child, .tf-table-page-cart .tf-cart-item td:last-child {
				padding: 25px;
			}

.ip-discount-code {
	max-width: 466px;
	width: 100%;
	position: relative;
}

	.ip-discount-code input {
		border-radius: 8px !important;
	}

	.ip-discount-code .tf-btn {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 10px 31.5px;
		border-radius: 0px 8px 8px 0px;
	}

	.ip-discount-code.style-2 {
		display: flex;
		gap: 6px;
	}

		.ip-discount-code.style-2 .tf-btn {
			position: relative;
			border-radius: 8px;
			width: 100%;
			max-width: 122px;
		}

.tf-checkout-wrap {
	display: flex;
	align-items: start;
	gap: 30px;
	flex-wrap: wrap;
}

	.tf-checkout-wrap .page-checkout {
		width: 100%;
	}

.payment-box {
	display: grid;
	gap: 20px;
	margin-bottom: 40px;
}

.payment-choose-card .payment-header {
	width: 100%;
	cursor: pointer;
	margin-bottom: 10px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.payment-choose-card .payment-header.collapsed {
		margin-bottom: 0px;
	}

		.payment-choose-card .payment-header.collapsed .select-payment::after {
			transform: translateY(-50%) rotate(0deg);
		}

.payment-choose-card .title {
	margin-bottom: 6px;
	display: block;
}

.payment-choose-card .select-payment {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid var(--gray-4);
	width: 100%;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.payment-choose-card .select-payment::after {
		position: absolute;
		content: "\e918";
		font-family: "icomoon";
		color: var(--gray-2);
		font-size: 16px;
		right: 14px;
		top: 50%;
		transform: translateY(-50%) rotate(180deg);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.payment-choose-card .select-payment:hover {
		border-color: var(--primary);
	}

.payment-choose-card input[type=number]::-webkit-outer-spin-button,
.payment-choose-card input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

.payment-choose-card .payment-body {
	display: grid;
	gap: 20px;
	padding: 30px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
}

.flat-sidebar-checkout {
	width: 100%;
	position: sticky;
	top: 90px;
	padding: 15px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
	background-color: var(--white);
}

	.flat-sidebar-checkout .sub-type {
		margin-bottom: 6px;
	}

	.flat-sidebar-checkout .sidebar-checkout-content {
		display: grid;
		gap: 20px;
	}

	.flat-sidebar-checkout .list-product {
		display: grid;
		gap: 20px;
	}

	.flat-sidebar-checkout .item-product {
		display: flex;
		align-items: start;
		gap: 12px;
	}

		.flat-sidebar-checkout .item-product .img-product {
			max-width: 122px;
			width: 100%;
		}

		.flat-sidebar-checkout .item-product .content-box {
			display: grid;
			gap: 10px;
		}

	.flat-sidebar-checkout .sec-total-price li {
		border-top: 1px solid var(--gray-5);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0px;
	}

		.flat-sidebar-checkout .sec-total-price li:last-child {
			padding-bottom: 0px;
		}

.facet-categories {
	border-radius: 10px;
	border: 1px solid var(--gray-5);
	margin-bottom: 24px;
}

	.facet-categories .title {
		padding: 13px 18px;
		background-color: var(--gray-6);
	}

	.facet-categories ul {
		padding: 0px 18px;
	}

		.facet-categories ul a {
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 0px;
			position: relative;
		}

			.facet-categories ul a::after {
				content: none;
				position: absolute;
				bottom: 0;
				left: auto;
				right: 0;
				width: 0%;
				height: 1px;
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
				background-color: var(--primary);
			}

			.facet-categories ul a:hover, .facet-categories ul a.active {
				color: var(--primary);
			}

		.facet-categories ul li:not(:last-child) a {
			border-bottom: 1px solid var(--gray-5-2);
		}

			.facet-categories ul li:not(:last-child) a:hover::after, .facet-categories ul li:not(:last-child) a.active::after {
				width: 100%;
				left: 0;
				right: auto;
			}

.btn-loadmore {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--secondary);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	margin-top: 16px;
}

	.btn-loadmore:hover {
		color: var(--primary);
	}

.widget-facet .facet-title {
	margin-bottom: 16px;
}

.widget-facet .box-fieldset-item {
	display: grid;
	gap: 10px;
}

.widget-facet .fieldset-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.widget-facet:not(:last-child) {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--gray-5);
}

.facet-price .box-fieldset-item {
	margin-bottom: 10px;
}

.facet-price input[type=number]::-webkit-outer-spin-button,
.facet-price input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

.facet-vote .fieldset-item label {
	display: flex;
	gap: 8px;
	align-items: center;
}

.meta-filter-shop {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30px;
}

	.meta-filter-shop .count-text {
		font-size: 12px;
		line-height: 22px;
		color: var(--text);
		padding-right: 12px;
		position: relative;
	}

		.meta-filter-shop .count-text::after {
			position: absolute;
			top: 4px;
			bottom: 4px;
			right: 0;
			width: 1px;
			display: block;
			content: "";
			background-color: #d9d9d9;
		}

		.meta-filter-shop .count-text .count {
			color: var(--black);
			display: inline-block;
			margin-right: 2px;
		}

	.meta-filter-shop #applied-filters {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.meta-filter-shop .filter-tag {
		font-size: 14px;
		line-height: 22px;
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 4px 12px;
		border: 1px solid var(--gray-5);
		border-radius: 1000px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
	}

		.meta-filter-shop .filter-tag .remove-tag {
			font-size: 12px;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.meta-filter-shop .filter-tag:hover {
			border-color: var(--black);
		}

	.meta-filter-shop .color-tag {
		gap: 8px;
	}

		.meta-filter-shop .color-tag .color {
			width: 20px;
			height: 20px;
			display: block;
			border-radius: 1000px;
		}

	.meta-filter-shop .remove-all-filters {
		padding: 4px 12px;
		border: 1px solid var(--black);
		border-radius: 99px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		background-color: var(--black);
		color: var(--white);
	}

		.meta-filter-shop .remove-all-filters .icon {
			font-size: 12px;
		}

		.meta-filter-shop .remove-all-filters:hover {
			background-color: transparent;
			color: var(--black);
		}

.overlay-filter {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.overlay-filter.show {
		opacity: 1;
		visibility: visible;
	}

/*------------ nice select ---------------- */
.image-select > .dropdown-menu {
	width: auto !important;
}

.image-select.style-default {
	width: unset !important;
	display: flex;
}

	.image-select.style-default > select {
		display: none !important;
	}

	.image-select.style-default > .dropdown-toggle {
		padding: 0;
		background-color: transparent !important;
		border: 0 !important;
		outline: none !important;
		color: var(--main);
	}

		.image-select.style-default > .dropdown-toggle::after {
			border: 0;
			position: absolute;
			right: 0;
			font-family: "icomoon";
			font-size: 12px;
			color: var(--main);
		}

	.image-select.style-default .filter-option-inner-inner {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 8px;
		font-weight: 400;
		font-size: 13px;
		line-height: 25px;
	}

		.image-select.style-default .filter-option-inner-inner img {
			width: 34px;
			height: 34px;
			object-fit: cover;
			border-radius: 50%;
			padding: 3px;
			border: 1px solid var(--gray-4);
		}

	.image-select.style-default > .dropdown-menu {
		overflow: unset !important;
		margin-top: 5px !important;
		margin-bottom: 5px !important;
		padding: 5px;
		border-radius: 0;
		border: 0;
		background-color: var(--white);
		box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
	}

		.image-select.style-default > .dropdown-menu li:not(:last-child) {
			padding-bottom: 5px !important;
			margin-bottom: 5px;
		}

		.image-select.style-default > .dropdown-menu .inner {
			position: relative;
		}

		.image-select.style-default > .dropdown-menu a {
			padding: 0 !important;
		}

			.image-select.style-default > .dropdown-menu a .text {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
				font-weight: 400;
				font-size: 14px;
				line-height: 16px;
			}

				.image-select.style-default > .dropdown-menu a .text img {
					width: 30px;
				}

			.image-select.style-default > .dropdown-menu a:hover, .image-select.style-default > .dropdown-menu a:active, .image-select.style-default > .dropdown-menu a.active {
				color: var(--primary) !important;
				background-color: unset !important;
			}

		.image-select.style-default > .dropdown-menu::after {
			position: absolute;
			content: "";
			width: 16px;
			height: 16px;
			transform: translate(-50%, -50%) rotate(45deg);
			background-color: var(--white);
			top: 0;
			left: 50%;
			z-index: 2;
		}

		.image-select.style-default > .dropdown-menu[data-popper-placement=top-start]::after {
			display: none;
		}

		.image-select.style-default > .dropdown-menu[data-popper-placement=top-start]::before {
			position: absolute;
			content: "";
			width: 16px;
			height: 16px;
			transform: translate(-50%, 50%) rotate(45deg);
			background-color: var(--white);
			bottom: 0%;
			left: 50%;
			z-index: 2;
		}

.image-select.type-languages > .dropdown-menu {
	width: 96px !important;
}

.image-select.type-2 > .dropdown-menu {
	width: 120px !important;
	margin-left: calc(50% - 60px) !important;
	margin-top: 10px !important;
	padding: 10px 15px;
}

	.image-select.type-2 > .dropdown-menu li:not(:last-child) {
		padding-bottom: 10px !important;
	}

	.image-select.type-2 > .dropdown-menu li a .text {
		justify-content: start;
		gap: 8px;
	}

		.image-select.type-2 > .dropdown-menu li a .text img {
			width: 25px;
			height: 25px;
			border-radius: 50%;
		}

.image-select.type-2 .filter-option-inner-inner {
	gap: 0 !important;
	width: 34px;
}

.tf-cur {
	display: flex;
	align-items: center;
	gap: 28px;
}

	.tf-cur .tf-cur-item {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.tf-cur .select-default {
		border: unset;
	}

		.tf-cur .select-default option {
			font-weight: 600;
			font-size: 13px;
			line-height: 25px;
		}

.tf-my-dropdown {
	border-radius: 3px;
	border: 1px solid var(--gray-5);
	min-width: 160px;
	z-index: 100;
	padding: 9px;
}

	.tf-my-dropdown i {
		font-size: 20px;
	}

	.tf-my-dropdown .btn-select {
		display: flex;
		align-items: center;
		gap: 6px;
		height: 100%;
	}

	.tf-my-dropdown:hover {
		border-color: var(--primary);
		color: var(--primary);
	}

	.tf-my-dropdown::after {
		display: none;
	}

	.tf-my-dropdown .list {
		border: 1px solid var(--gray-5);
		min-width: 160px;
		padding: 15px 5px;
		border-radius: 0;
		max-height: 68vh;
		isolation: isolate;
		overscroll-behavior-y: contain;
		overflow-y: auto;
		transform: unset;
		transition: unset;
		box-shadow: unset;
	}

		.tf-my-dropdown .list .option {
			padding: 0 15px;
			line-height: 30px;
			min-height: unset;
			color: var(--secondary);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			font-weight: 500;
		}

			.tf-my-dropdown .list .option:hover, .tf-my-dropdown .list .option.selected {
				background-color: var(--gray-4);
				color: var(--black);
			}

	.tf-my-dropdown.tf-control-sort {
		min-width: 204px;
	}

		.tf-my-dropdown.tf-control-sort .list {
			min-width: 204px;
		}

/*------------ sections ---------------- */
.breakcrumbs {
	display: flex;
	align-items: center;
	gap: 0px 10px;
	flex-wrap: wrap;
}

	.breakcrumbs i {
		font-size: 10px;
	}

.s-breakcrumbs-page {
	padding-top: 20px;
	padding-bottom: 50px;
}

.flat-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--gray-5);
}

.flat-title-has-icon {
	display: flex;
	align-items: center;
	gap: 9px;
}

	.flat-title-has-icon .icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: var(--primary);
		color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.flat-title-has-icon .icon i {
			font-size: 20px;
		}

.flat-title-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	margin-bottom: 30px;
}

	.flat-title-2 .box-title {
		display: grid;
		gap: 10px;
	}

.parallax-image {
	height: 410px;
}

.s-search-faq {
	position: relative;
}

	.s-search-faq .parallax-image {
		height: 350px;
	}

	.s-search-faq .content {
		display: grid;
		gap: 10px;
	}

	.s-search-faq .box-title {
		display: grid;
		gap: 30px;
	}

	.s-search-faq .wrap {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		z-index: 2;
	}

	.s-search-faq .form-search-3 {
		max-width: 540px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

.s-faq {
	display: flex;
	align-items: start;
	gap: 30px;
	flex-wrap: wrap;
}

	.s-faq .flat-title-tab-faq {
		width: 100%;
	}

	.s-faq .wrap {
		width: 100%;
	}

.s-shoping-cart .cart-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--gray-5);
	gap: 15px;
}

.s-shoping-cart .box-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

	.s-shoping-cart .box-btn .tf-btn {
		width: 100%;
	}

.s-shoping-cart .form-discount {
	margin-bottom: 20px;
}

.tf-checkout-wrap .page-checkout {
	display: grid;
	gap: 40px;
}

.tf-checkout-wrap .title {
	margin-bottom: 20px;
}

	.tf-checkout-wrap .title.has-account {
		max-width: 702px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

.s-track-order .parallax-image {
	height: 585px;
	border-radius: 8px;
	overflow: hidden;
}

.s-track-order .content {
	position: relative;
}

.s-track-order .wrap {
	display: grid;
	gap: 20px;
	padding: 15px;
	border-radius: 8px;
	background-color: var(--white);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
	right: 15px;
}

.s-track-order .box-title {
	display: grid;
	gap: 10px;
}

.s-track-order .form-trackorder {
	gap: 18px;
}

	.s-track-order .form-trackorder fieldset label {
		margin-bottom: 5px;
	}

.box-sale-wrap {
	position: absolute;
	top: 15px;
	left: 15px;
	border-radius: 50%;
	background-color: var(--primary);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

	.box-sale-wrap p {
		color: var(--white);
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		font-family: "Poppins", serif;
	}

	.box-sale-wrap.pst-default {
		top: 15px;
		left: 15px;
	}

	.box-sale-wrap.type-2 {
		width: 56px;
		height: 56px;
	}

	.box-sale-wrap.type-3 {
		width: 100px;
		height: 100px;
	}

	.box-sale-wrap.relative {
		top: unset;
		left: unset;
		right: unset;
		bottom: unset;
	}

	.box-sale-wrap.style-2 {
		border-radius: 8px;
		top: unset;
		bottom: 0;
		left: 0;
		width: 100px;
	}

.cls-category .img-box {
	border-radius: 8px;
}

.cls-category.style-abs {
	position: relative;
}

	.cls-category.style-abs .content {
		position: absolute;
		left: 15px;
		bottom: 20px;
		display: grid;
		gap: 10px;
	}

	.cls-category.style-abs.abs-2 .content {
		left: 15px;
		right: 15px;
		bottom: 15px;
	}

	.cls-category.style-abs.abs-2 .box-btn .tf-btn {
		max-width: 148px;
		width: 100%;
	}

.has-bg-img {
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-image-product {
	padding: 60px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

	.banner-image-product .img-2 {
		max-width: 497px;
	}

	.banner-image-product .content {
		display: grid;
		gap: 10px;
	}

		.banner-image-product .content .box-title {
			display: grid;
			gap: 15px;
		}

	.banner-image-product.style-abs {
		position: relative;
		border-radius: 8px;
		overflow: hidden;
	}

		.banner-image-product.style-abs > * {
			width: 100%;
		}

		.banner-image-product.style-abs .img-box {
			min-height: 300px;
		}

		.banner-image-product.style-abs .content {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 15px;
			right: 15px;
		}

		.banner-image-product.style-abs.type-abs-2 .content {
			gap: 15px;
		}

		.banner-image-product.style-abs.type-abs-2 .box-title {
			gap: 19px;
		}

		.banner-image-product.style-abs.type-abs-2 img {
			min-height: 300px;
		}

		.banner-image-product.style-abs.type-abs-2 .box-btn {
			display: flex;
			align-items: center;
			gap: 15px;
			flex-wrap: wrap;
		}

			.banner-image-product.style-abs.type-abs-2 .box-btn .price {
				display: flex;
				align-items: start;
			}

				.banner-image-product.style-abs.type-abs-2 .box-btn .price span {
					font-size: 15px;
					line-height: 30px;
				}

	.banner-image-product .img-item {
		position: absolute;
		top: 38px;
		bottom: 24px;
		right: 74px;
		left: 37%;
		display: flex;
	}

		.banner-image-product .img-item img {
			width: 100%;
			max-width: 671px;
		}

.banner-image-product-2 {
	padding: 20px 0px;
	position: relative;
}

	.banner-image-product-2 .inner {
		display: flex;
		align-items: center;
		gap: 30px;
		position: relative;
	}

	.banner-image-product-2 .item-banner {
		padding: 50px 30px;
		border-radius: 8px;
	}

	.banner-image-product-2 .item-image {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 2%;
	}

		.banner-image-product-2 .item-image.item-2 {
			right: 30%;
		}

	.banner-image-product-2.type-sp-2 {
		padding: 14px 0px;
	}

		.banner-image-product-2.type-sp-2 .inner {
			gap: 15px;
		}

		.banner-image-product-2.type-sp-2 .item-banner {
			padding: 51px 23px;
		}

.banner-image-product-3 {
	position: relative;
	width: 100%;
}

	.banner-image-product-3 .wrap {
		position: relative;
	}

	.banner-image-product-3 .image {
		display: inline-flex;
		border-radius: 8px;
		overflow: hidden;
	}

	.banner-image-product-3 .img-item {
		position: absolute;
		top: 0;
		right: 15px;
		bottom: 20%;
		left: 50%;
	}

	.banner-image-product-3 .box-title {
		display: grid;
		gap: 7px;
	}

	.banner-image-product-3 .content {
		position: absolute;
		bottom: 12px;
		left: 26px;
		right: 26px;
		display: grid;
		gap: 11px;
	}

	.banner-image-product-3.style-2 .content {
		gap: 24px;
		top: 50px;
		bottom: 80px;
	}

.wg-cls {
	position: relative;
}

	.wg-cls.type-abs .content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateY(-50%);
		right: 5px;
	}

.s-banner-wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

	.s-banner-wrapper .wrap-item-1 {
		width: 100%;
	}

	.s-banner-wrapper .wrap-item-2 {
		width: 100%;
	}

		.s-banner-wrapper .wrap-item-2 .img-box {
			height: 100%;
		}

	.s-banner-wrapper .wrap-item-3 {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

		.s-banner-wrapper .wrap-item-3 > * {
			width: 100%;
		}

.grid-cls {
	display: grid;
	gap: 30px;
}

	.grid-cls .grid-item1 {
		grid-area: aa;
	}

	.grid-cls .grid-item2 {
		grid-area: bb;
	}

	.grid-cls .grid-item3 {
		grid-area: cc;
	}

	.grid-cls .grid-item4 {
		grid-area: dd;
	}

	.grid-cls .grid-item5 {
		grid-area: ee;
	}

	.grid-cls .grid-item6 {
		grid-area: ff;
	}

	.grid-cls .grid-item7 {
		grid-area: gg;
	}

	.grid-cls.grid-cls-v2 {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.grid-cls.grid-cls-v3 {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.grid-cls.grid-cls-v4 {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.grid-cls.grid-cls-v5 {
		display: unset;
	}

.banner-product {
	display: flex;
	align-items: center;
	gap: 20px 50px;
	padding: 50px 0px;
	flex-wrap: wrap;
}

	.banner-product.style-2 {
		gap: 20px 30px;
	}

	.banner-product .product-wrap {
		display: flex;
		align-items: center;
		gap: 15px;
		width: 100%;
		flex-wrap: wrap-reverse;
	}

	.banner-product .box-title {
		display: grid;
		gap: 16px;
	}

	.banner-product .info-product {
		display: grid;
		gap: 8px;
	}

	.banner-product .other-item {
		display: flex;
		gap: 20px;
		flex-direction: column;
	}

		.banner-product .other-item .card-product {
			padding: 10px;
		}

			.banner-product .other-item .card-product .card-product-wrapper {
				max-width: 144px;
			}

	.banner-product.style-2 .product-wrap {
		gap: 15px 0px;
	}

		.banner-product.style-2 .product-wrap .item-product {
			margin-top: -74px;
			margin-bottom: -98px;
			pointer-events: none;
		}

	.banner-product.style-3 {
		justify-content: space-between;
		gap: 30px;
	}

		.banner-product.style-3 .other-item {
			gap: 10px;
		}

		.banner-product.style-3 .product-wrap {
			flex-direction: column;
			align-items: start;
			gap: 15px;
			width: auto;
		}

		.banner-product.style-3 .content {
			display: grid;
			gap: 15px;
		}

.banner-product-2 {
	position: relative;
}

	.banner-product-2 .image img {
		height: 100%;
		object-fit: cover;
	}

	.banner-product-2 .content {
		position: absolute;
		top: 15px;
		bottom: 15px;
		left: 15px;
		right: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.banner-product-2 .box-bottom {
		display: grid;
		gap: 9px;
	}

	.banner-product-2 .box-price {
		display: flex;
		gap: 2px;
	}

		.banner-product-2 .box-price .text {
			padding-top: 7px;
		}

	.banner-product-2 .content {
		top: 30px;
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

.slider-wrap {
	display: flex;
	gap: 30px;
	align-items: start;
	flex-wrap: wrap;
}

	.slider-wrap.style-2 {
		align-items: unset;
	}

.cls-product {
	border-radius: 8px;
}

.cls-product {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
}

	.cls-product .content {
		display: grid;
		gap: 15px;
	}

	.cls-product .box-title {
		display: grid;
		gap: 5px;
	}

	.cls-product.style-2 .content {
		gap: 12px;
	}

	.cls-product.style-2 .box-price > p {
		display: flex;
		align-items: start;
		gap: 6px;
	}

		.cls-product.style-2 .box-price > p .text {
			padding-top: 10px;
		}

.banner-slide-product {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 40px;
	border-radius: 8px;
	width: 100%;
}

	.banner-slide-product .image {
		display: inline-flex;
		max-width: 397px;
		width: 100%;
	}

	.banner-slide-product .content {
		display: grid;
		gap: 15px;
	}

		.banner-slide-product .content .br-line {
			max-width: 368px;
			width: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 53.13%, rgba(255, 255, 255, 0) 100%);
		}

	.banner-slide-product .property-list {
		display: flex;
		gap: 30px;
	}

		.banner-slide-product .property-list li {
			display: grid;
			position: relative;
			gap: 10px;
		}

			.banner-slide-product .property-list li:not(:last-child)::after {
				content: "";
				position: absolute;
				right: -14px;
				top: 0;
				bottom: 0;
				width: 1px;
				background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 53.13%, rgba(255, 255, 255, 0) 100%);
			}

		.banner-slide-product .property-list .box-infor {
			display: grid;
			gap: 6px;
		}

.slide-wrap-2 {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

	.slide-wrap-2 .wrap {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

		.slide-wrap-2 .wrap .cls-product {
			width: 100%;
		}

.wg-cls-2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 13px 10px;
	text-align: center;
}

	.wg-cls-2 .image {
		position: relative;
		max-width: 74px;
		width: 100%;
	}

	.wg-cls-2 .tf-overlay {
		border-radius: 50%;
		background-color: #F3F3F3;
	}

.slider-category .swiper-slide {
	height: auto;
}

	.slider-category .swiper-slide > * {
		height: 100%;
	}

	.slider-category .swiper-slide:first-child .wg-cls-2 {
		border-left: 1px solid var(--gray-5);
	}

	.slider-category .swiper-slide .wg-cls-2 {
		border: 1px solid var(--gray-5);
		border-left: unset;
	}

.tf-brand {
	padding: 25px 0px;
	gap: 30px;
}

	.tf-brand.type-sp-2 {
		padding: 38px 0px;
	}

.brand-item {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 1;
}

	.brand-item:hover {
		opacity: 0.5;
	}

.brand-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

	.brand-list li {
		aspect-ratio: 133/80;
		padding-top: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--gray-6);
	}

		.brand-list li:nth-child(1) {
			padding-top: 0;
			padding-left: 0px;
		}

		.brand-list li:nth-child(2) {
			padding-top: 0;
			padding-right: 0px;
		}

		.brand-list li:nth-child(odd) {
			padding-right: 10px;
			border-right: 1px solid var(--gray-6);
		}

		.brand-list li:nth-child(even) {
			padding-left: 8px;
		}

		.brand-list li:nth-last-child(1) {
			padding-right: 0;
			padding-bottom: 0px;
			border-bottom: unset;
		}

		.brand-list li:nth-last-child(2) {
			padding-left: 0;
			padding-bottom: 0px;
			border-bottom: unset;
		}

	.brand-list img {
		width: 100%;
		object-fit: cover;
	}

.s-banner .content-banner {
	display: grid;
	gap: 10px;
	padding: 50px 0px;
}

.s-banner.style-2 .content-banner {
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.s-banner:not(.style-2) .card-product {
	box-shadow: 0px 9px 30px 0px rgba(0, 0, 0, 0.0784313725);
}

.banner-countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px 0px;
	flex-wrap: wrap;
}

	.banner-countdown .content {
		display: grid;
		gap: 30px;
	}

	.banner-countdown .box-title {
		display: grid;
		gap: 12px;
	}

	.banner-countdown .bottom {
		display: grid;
		gap: 10px;
	}

.main-page {
	max-width: 1570px;
	margin: auto;
}

.tf-grid-product {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.wg-404 h1 {
	font-size: 100px;
	line-height: 100px;
	margin-bottom: 15px;
}

.wg-404 .notice {
	margin-bottom: 30px;
}

.wg-map {
	padding-bottom: 167px;
	position: relative;
}

	.wg-map .bottom {
		display: flex;
		align-items: end;
		position: absolute;
		bottom: 0;
		left: 15px;
		z-index: 5;
		pointer-events: none;
	}

	.wg-map .contact-wrap {
		padding: 30px;
		border-radius: 8px;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);
		background-color: var(--white);
		display: grid;
		gap: 30px;
		pointer-events: all;
	}

		.wg-map .contact-wrap .box-title {
			display: grid;
			gap: 10px;
		}

	.wg-map .contact-info {
		padding: 15px;
		display: grid;
		gap: 20px;
		pointer-events: all;
	}

	.wg-map .info-list {
		display: flex;
		align-items: start;
		gap: 5px 15px;
		flex-wrap: wrap;
	}

		.wg-map .info-list li {
			display: flex;
			align-items: start;
			gap: 15px;
		}

			.wg-map .info-list li .icon {
				font-size: 16px;
				margin-top: 4px;
				padding-right: 8px;
				border-right: 1px solid #4F4F4F;
				display: flex;
			}

	.wg-map .form-contact {
		flex-direction: column;
		display: flex;
		gap: 18px;
	}

		.wg-map .form-contact fieldset input {
			padding: 11px 10px 11px 14px;
		}

.checkout-status .checkout-wrap {
	display: flex;
	position: relative;
	max-width: 1200px;
	width: 100%;
	margin: 0px auto;
}

.checkout-status .checkout-bar {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background-color: var(--gray-5);
	position: absolute;
	top: 22px;
	left: 0;
	z-index: 0;
}

	.checkout-status .checkout-bar::after {
		content: "";
		position: absolute;
		height: 4px;
		left: 0;
		top: 0;
		background-color: var(--primary);
		border-radius: 999px;
	}

	.checkout-status .checkout-bar.first::after {
		width: 16.6666666667%;
	}

	.checkout-status .checkout-bar.next::after {
		width: 50%;
	}

	.checkout-status .checkout-bar.end::after {
		width: 100%;
	}

.checkout-status .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--primary);
	width: 48px;
	height: 48px;
	color: var(--white);
}

	.checkout-status .icon i {
		font-size: 24px;
	}

.checkout-status .step-payment {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	width: 33.3333333333%;
	position: relative;
	z-index: 2;
	text-align: center;
}

	.checkout-status .step-payment .icon {
		position: relative;
		z-index: 2;
	}

.tf-cart-sold {
	margin-bottom: 16px;
}

.wg-testimonial {
	display: flex;
	align-items: start;
	gap: 20px;
	padding: 15px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
	background-color: var(--white);
	border-radius: 8px;
}

	.wg-testimonial .entry_image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}

	.wg-testimonial .entry_meta {
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.wg-testimonial .entry_meta .br-line {
			height: 14px;
			width: 1px;
			background-color: var(--gray-4);
		}

	.wg-testimonial .content {
		display: grid;
		gap: 18px;
	}

	.wg-testimonial .box-title .entry_name {
		margin-bottom: 2px;
	}

	.wg-testimonial .box-title .entry_meta {
		margin-bottom: 6px;
	}

	.wg-testimonial .list-star i {
		font-size: 14px;
	}

.wg-testimonial {
	padding: 30px;
}

.file-delete .remove {
	cursor: pointer;
}

.my-account-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	top: 0;
}

	.my-account-nav .my-account-nav-item {
		display: flex;
		width: 100%;
		border: 1px solid var(--gray-4);
		padding: 15px 20px;
		border-radius: 3px;
		font-size: 16px;
		font-weight: 500;
		line-height: 20px;
		position: relative;
	}

		.my-account-nav .my-account-nav-item:hover, .my-account-nav .my-account-nav-item.active {
			background-color: var(--gray-5);
			color: var(--primary);
			border-color: var(--gray-5);
		}

.parallax-style {
	border-radius: 8px;
	overflow: hidden;
	height: 300px;
}

.entry-privary {
	display: grid;
	gap: 30px;
}

	.entry-privary .wrap {
		display: grid;
		gap: 20px;
	}

		.entry-privary .wrap .text-list {
			display: grid;
			gap: 10px;
		}

.banner-image-product-4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px;
	height: 100%;
	border-radius: 8px;
	gap: 10px 0px;
}

	.banner-image-product-4 .img-item {
		width: 50%;
	}

	.banner-image-product-4 .content {
		display: grid;
		gap: 20px;
		width: 50%;
	}

	.banner-image-product-4 .box-title {
		display: grid;
		gap: 20px;
	}

.wg-product-view {
	position: relative;
	padding: 15px;
	border-radius: 8px;
	overflow: hidden;
}

	.wg-product-view .image {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 0;
	}

	.wg-product-view .content {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 12px;
		justify-content: center;
	}

	.wg-product-view .name {
		font-size: 24px;
		line-height: 28px;
	}

	.wg-product-view .sub {
		font-size: 12px;
		line-height: 14px;
	}

	.wg-product-view .box-title {
		display: grid;
		gap: 8px;
	}

	.wg-product-view .box-price {
		display: flex;
		gap: 6px;
	}

		.wg-product-view .box-price .text {
			padding-top: 7px;
			font-weight: 300;
			font-size: 10px;
			line-height: 13px;
		}

		.wg-product-view .box-price .price {
			font-weight: 700;
			font-size: 30px;
			line-height: 36px;
		}

	.wg-product-view.style-2 .box-title {
		gap: 5px;
	}

	.wg-product-view.style-2 .box-price {
		gap: 2px;
	}

		.wg-product-view.style-2 .box-price .text {
			font-weight: 500;
			font-size: 16px;
			line-height: 19px;
			padding-top: 5px;
		}

	.wg-product-view.style-2 .content {
		height: 100%;
		justify-content: center;
	}

.wg-product-view {
	padding: 16px 18px;
}

.tf-sw-categories .swiper-slide {
	height: auto;
}

	.tf-sw-categories .swiper-slide > * {
		height: 100%;
	}

.banner-product-3 {
	position: relative;
	max-width: 400px;
	width: 100%;
	height: 100%;
}

	.banner-product-3 .content {
		position: absolute;
		top: 20px;
		left: 15px;
		right: 15px;
	}

	.banner-product-3 .tag {
		padding-bottom: 5px;
		margin-bottom: 10px;
		border-bottom: 3px solid var(--third-2);
	}

		.banner-product-3 .tag.type-2 {
			border-bottom: 3px solid var(--primary);
		}

	.banner-product-3 .box-title {
		display: grid;
		gap: 8px;
	}

/*-------------- Responsive ----------------- */
/* Media Queries
-------------------------------------------------------------- */
@media (min-width: 426px) {
	.banner-product .info-product .tag-new {
		font-weight: 300;
		font-size: 16px;
		line-height: 19px;
		letter-spacing: 11.2px;
	}

	.banner-product .info-product .name {
		font-weight: 100;
		font-size: 58px;
		line-height: 71px;
	}

	.banner-product .box-price .start {
		font-weight: 300;
		font-size: 21px;
		line-height: 25px;
	}

	.banner-product .box-price .price {
		font-weight: 700;
		font-size: 73px;
		line-height: 88px;
	}

	.banner-product.style-2 .info-product .name {
		font-size: 47px;
		line-height: 48px;
	}
}

@media (min-width: 576px) {
	.modal-newleter .modal-content {
		padding: 40px;
	}

	.modal-newleter .icon-close-popup {
		right: 10px;
		top: 10px;
	}

	.w-sm-auto {
		width: auto !important;
	}

	.sw-banner .card-product .card-product-wrapper {
		max-width: 192px !important;
	}

	.product-thumb-slider.thumbs-right {
		flex-direction: unset;
		gap: 30px;
		align-items: start;
	}

		.product-thumb-slider.thumbs-right .tf-product-view-thumbs {
			width: 69px;
		}

		.product-thumb-slider.thumbs-right.type-right-2 {
			gap: 20px;
		}

			.product-thumb-slider.thumbs-right.type-right-2 .tf-product-view-main .tf-image-view {
				aspect-ratio: 471/337;
				max-width: 471px;
			}

	.card-product.style-thums-2 .card-product-info {
		display: flex;
		align-items: start;
	}

	.card-product.style-thums-2 .box-infor-detail {
		max-width: 268px;
		width: 100%;
	}

	.card-product.style-thums-2 .name-product {
		-webkit-line-clamp: 1;
	}

	.card-product.style-row.type-row-3 {
		gap: 12px !important;
		align-items: center;
	}

		.card-product.style-row.type-row-3 .card-product-wrapper {
			max-width: 144px;
		}

	.card-product.style-row.row-small .card-product-wrapper {
		max-width: 160px !important;
	}

	.s-shoping-cart .box-btn .tf-btn {
		max-width: 219px;
	}

	.form-add-comment {
		max-width: 384px;
		width: 100%;
	}

		.form-add-comment fieldset {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}

			.form-add-comment fieldset.align-items-sm-start label {
				padding-top: 10px;
			}

		.form-add-comment input,
		.form-add-comment textarea {
			padding: 9px 10px !important;
			max-width: 294px;
			width: 100%;
		}

		.form-add-comment .btn-submit {
			margin-left: 90px;
		}

	.tf-grid-layout.sm-col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.tf-grid-layout.sm-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tf-grid-layout.sm-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tf-grid-layout.sm-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tf-grid-layout.sm-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.tf-grid-layout.sm-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.news-item .entry_infor_news h6 a {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}

	.news-item .entry_infor_news .subs {
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}
}

@media (min-width: 768px) {
	.banner-product.style-2 .product-wrap > * {
		width: 50%;
	}

	.offcanvas-search .offcanvas-content {
		padding: 68px 0;
	}

	.looking-for-wrap {
		margin-bottom: 50px;
	}

		.looking-for-wrap .heading {
			margin-bottom: 16px;
		}

		.looking-for-wrap .form-search {
			margin-bottom: 8px;
		}

	.s-faq {
		gap: 60px;
		flex-wrap: nowrap;
	}

		.s-faq .wrap {
			padding-left: 38px;
			border-left: 1px solid var(--gray-5);
		}

		.s-faq .flat-title-tab-faq {
			max-width: 254px;
		}

	.tf-compare-col {
		min-width: 280px;
	}

		.tf-compare-col:first-child {
			min-width: 280px;
		}

	.modal-quick-view .quickview-image {
		padding: 20px 0px 20px 20px;
		width: 45%;
	}

	.modal-quick-view .quickview-info-wrap {
		width: 55%;
	}

	.modal-quick-view .quickview-info-inner {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		padding: 24px;
	}

	.countdown-box-2 .countdown__timer {
		gap: 41px;
	}

	.countdown-box-2 .countdown__item:not(:last-child)::after {
		right: -20px;
	}

	.banner-product.style-3 .product-wrap {
		gap: 40px;
	}

	.banner-product.style-3 .content {
		gap: 21px;
	}

	.grid-cls {
		display: grid;
		grid-template-areas: "bb bb" "bb bb" "aa cc";
		grid-template-columns: 1fr 1fr;
	}

		.grid-cls.grid-cls-v2 {
			display: grid;
			grid-template-columns: calc(50% - 5px) calc(50% - 5px);
			grid-template-areas: "aa bb" "cc bb" "dd ee";
		}

			.grid-cls.grid-cls-v2.type-2 {
				grid-template-areas: "aa bb" "cc bb" "dd ee" "ff gg";
			}

		.grid-cls.grid-cls-v3 {
			grid-template-columns: calc(67% - 15px) calc(33% - 15px);
			grid-template-areas: "bb cc";
		}

		.grid-cls.grid-cls-v4 {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-areas: "bb bb aa" "bb bb cc";
		}

	.slide-wrap-2 .wrap {
		flex-direction: row;
	}

	.s-banner-wrapper .wrap-item-3 {
		flex-direction: row;
	}

	.tf-grid-product-item {
		width: calc(50% - 15px);
	}

	.card-product.style-row {
		flex-direction: row;
		align-items: start;
	}

		.card-product.style-row .card-product-wrapper {
			height: 100%;
			max-width: 274px;
			width: 100%;
		}

		.card-product.style-row .card-product-btn {
			max-width: 200px;
			margin-left: 20px;
			height: 100%;
		}

			.card-product.style-row .card-product-btn::after {
				position: absolute;
				content: "";
				left: -20px;
				top: 0;
				bottom: 0;
				width: 1px;
				height: 100%;
				background-color: var(--gray-5);
			}

		.card-product.style-row.type-row-2 {
			gap: 20px;
			flex-direction: column;
		}

			.card-product.style-row.type-row-2 .box-infor-detail {
				gap: 30px;
			}

			.card-product.style-row.type-row-2 .card-product-wrapper {
				max-width: unset;
			}

			.card-product.style-row.type-row-2 .countdown-box {
				display: flex;
				gap: 5px 20px;
				justify-content: space-between;
				flex-wrap: wrap;
			}

				.card-product.style-row.type-row-2 .countdown-box .js-countdown {
					max-width: 268px;
					width: 100%;
				}

	.tf-product-info-wrap {
		height: 100%;
	}

		.tf-product-info-wrap .tf-product-info-list {
			height: 100%;
		}

	.thumbs-slider {
		max-width: 652px;
	}

	.canvas-sidebar .canvas-header {
		padding: 20px;
		padding-bottom: 10px;
	}

		.canvas-sidebar .canvas-header::after {
			left: 32px;
			right: 32px;
		}

	.canvas-sidebar .canvas-body {
		padding: 20px;
		padding-top: 20px;
	}

	.canvas-sidebar-account .canvas-header::after {
		left: 20px;
		right: 20px;
	}

	.tf-grid-layout.md-col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.tf-grid-layout.md-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tf-grid-layout.md-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tf-grid-layout.md-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tf-grid-layout.md-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.tf-grid-layout.md-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}
}

@media (min-width: 992px) {
	.card-product .box-icon {
		width: 35px;
		height: 35px;
	}

		.card-product .box-icon .icon {
			font-size: 14px;
		}

	.parallax-style {
		height: 500px;
	}

	.tf-lg-width {
		max-width: 720px;
	}

	.popup-style.popup-shopping-cart {
		width: 450px;
	}

	.ft-heading {
		line-height: 27px;
		font-family: "Poppins", serif;
	}

	.countdown-box-2 .countdown__timer {
		gap: 73px;
	}

	.countdown-box-2 .js-countdown {
		padding: 14px 26px;
	}

	.countdown-box-2 .countdown__item {
		min-width: 75px;
	}

		.countdown-box-2 .countdown__item:not(:last-child)::after {
			right: -36px;
		}

	.countdown-box-2 .countdown__value {
		font-weight: 400;
		font-size: 60px;
		line-height: 73px;
	}

	.countdown-box-2 .countdown__label {
		font-weight: 600;
		font-size: 15px;
		line-height: 24px;
	}

	.s-banner.style-2 .content-banner {
		gap: 15px;
		height: 100%;
	}

		.s-banner.style-2 .content-banner .title {
			margin-bottom: 25px;
		}

		.s-banner.style-2 .content-banner .price {
			font-size: 100px;
			line-height: 121px;
			display: flex;
			align-items: start;
			gap: 2px;
		}

			.s-banner.style-2 .content-banner .price span {
				padding-top: 19px;
				font-weight: 300;
				font-size: 50px;
				line-height: 61px;
			}

	.grid-cls.grid-cls-v3 {
		display: grid;
	}

	.card-product.style-row.type-row-2 .card-product-wrapper {
		max-width: 290px;
	}

	.s-banner-wrapper .wrap-item-1 {
		width: calc(30% - 10px);
	}

	.s-banner-wrapper .wrap-item-2 {
		width: calc(70% - 10px);
	}

		.s-banner-wrapper .wrap-item-2 .img-box {
			height: 100%;
		}

	.box-sale-wrap.position1 {
		top: 46px;
		right: -28px;
		left: unset;
		bottom: unset;
	}

	.s-track-order .wrap {
		gap: 30px;
		padding: 30px;
		left: 88px;
		max-width: 560px;
		width: 100%;
		right: unset;
	}

	.flat-sidebar-checkout {
		max-width: 450px;
		padding: 30px;
	}

	.s-search-faq .parallax-image {
		height: 490px;
	}

	.tab-review {
		width: 100%;
	}

		.tab-review .tab-rating-wrap {
			width: 50%;
			padding-right: 30px;
			border-right: 1px solid var(--gray-5);
		}

		.tab-review.style-2 {
			flex-direction: column;
		}

			.tab-review.style-2 .tab-rating-wrap {
				max-width: unset;
				width: 100%;
				padding-right: unset;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: nowrap;
				gap: 75px;
			}

				.tab-review.style-2 .tab-rating-wrap .br-line {
					height: 140px;
					background-color: var(--gray-4);
				}

			.tab-review.style-2 .rating-progress-list {
				max-width: 383px;
				width: 100%;
			}

			.tab-review.style-2 .tab-review-wrap {
				flex-direction: row;
			}

				.tab-review.style-2 .tab-review-wrap .review-list {
					padding-right: 40px;
					border-right: 1px solid var(--gray-5);
				}

				.tab-review.style-2 .tab-review-wrap .add-comment-wrap {
					max-width: 384px;
					width: 100%;
					flex-shrink: 0;
				}

	.tf-topbar {
		padding: 12px 0px;
	}

		.tf-topbar.style-2 {
			padding: 7.5px 0px;
		}

	.wg-pagination {
		padding-top: 30px;
	}

		.wg-pagination li {
			width: 56px;
			height: 56px;
		}

			.wg-pagination li i {
				font-size: 26px;
			}

	.tf-grid-layout.lg-col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.tf-grid-layout.lg-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tf-grid-layout.lg-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tf-grid-layout.lg-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tf-grid-layout.lg-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.tf-grid-layout.lg-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}
}

@media (min-width: 1025px) {
	.tf-table-page-cart {
		width: 100%;
	}

		.tf-table-page-cart tr > *:nth-child(1) {
			width: 676px;
		}

		.tf-table-page-cart tr > *:nth-child(2) {
			width: 256px;
		}

		.tf-table-page-cart tr > *:nth-child(3) {
			width: 284px;
		}

		.tf-table-page-cart tr > *:nth-child(4) {
			width: 197px;
		}
}

@media (min-width: 1200px) {
	.banner-product.style-2 .product-wrap > * {
		width: auto;
	}

	.banner-image-product-2.style-3 .inner {
		gap: 19px;
	}

	.banner-image-product-2.style-3 .box-price {
		font-weight: 700;
		font-size: 60px;
		line-height: 72px;
		display: flex;
		flex-direction: column;
	}

		.banner-image-product-2.style-3 .box-price .text {
			font-weight: 300;
			font-size: 20px;
			line-height: 24px;
		}

	.banner-image-product-2.style-3 .break {
		font-size: 99px;
		line-height: 99px;
		font-weight: 100;
	}

	.banner-image-product-2.style-3 .box-sale-wrap {
		margin-left: 40px;
		margin-top: -90px;
	}

	.banner-image-product-4 {
		align-items: start;
		padding: 92px 70px 24px 76px;
	}

		.banner-image-product-4 .content {
			gap: 30px;
		}

		.banner-image-product-4 .box-title {
			gap: 40px;
		}

		.banner-image-product-4 .img-item {
			max-width: 671px;
			width: 100%;
		}

		.banner-image-product-4 .content {
			width: auto;
		}

		.banner-image-product-4.style-2 {
			padding: 60px 28px 60px 60px;
			align-items: center;
			gap: 30px;
		}

			.banner-image-product-4.style-2 .img-item {
				max-width: 400px;
			}

			.banner-image-product-4.style-2 .box-title {
				gap: 20px;
			}

			.banner-image-product-4.style-2 .box-price {
				display: grid;
				gap: 5px;
			}

	.box-btn-slide-2.type-pst-2 .nav-swiper {
		top: calc(50% - 25px);
	}

	.s-banner:not(.style-2) .swiper {
		padding-bottom: 50px;
	}

	.modal-quick-view .icon-close-popup {
		right: 10px;
		top: 10px;
	}

	.modal-quick-view .entry_name {
		padding-right: 10px;
	}

	.gridLayout-fullWidth .flat-grid-product.layout-tablist-1 .card-product, .gridLayout-fullWidth .flat-grid-product.layout-tablist-2 .card-product {
		justify-content: space-between;
	}

	.gridLayout-fullWidth .flat-grid-product.layout-tablist-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.container-full {
		padding-left: 40px;
		padding-right: 40px;
	}

	.thumbs-left .thumbs-slider {
		flex-direction: row;
	}

	.thumbs-left .tf-product-media-thumbs {
		width: 80px;
		flex-shrink: 0;
	}

	.thumbs-left .container-swiper {
		max-width: unset;
		width: unset;
		margin: unset;
	}

	.grid-banner .grid-item2 .cls-product {
		gap: 6px;
		padding: 18px 0px 18px 19px;
	}

	.grid-banner .grid-item3 .cls-product {
		padding: 18px 0px 13px 16px;
		gap: 5px;
	}

	.checkout-status {
		padding-top: 5px !important;
	}

	.wg-map .contact-wrap {
		max-width: 414px;
		width: 100%;
	}

	.btn-direc {
		padding-top: 10px;
	}

	.mt-xl--10 {
		margin-top: -10px;
	}

	.wg-404 h1 {
		font-size: 200px;
		line-height: 200px;
		margin-bottom: 30px;
	}

	.wg-404 .notice {
		margin-bottom: 50px;
	}

	.main-page {
		margin-top: -65px;
		border-radius: 8px;
		background-color: var(--white);
	}

	.banner-countdown {
		padding: 80px 0px;
	}

		.banner-countdown .content {
			gap: 45px;
		}

		.banner-countdown .box-price .price-text {
			margin-bottom: 1px;
		}

		.banner-countdown .box-price .price {
			font-weight: 600;
			font-size: 80px;
			line-height: 94px;
		}

		.banner-countdown .image {
			max-width: 734px;
		}

	.s-banner .content-banner {
		gap: 4px;
		padding: 96px 0px 110px;
	}

		.s-banner .content-banner .title {
			margin-bottom: 18px;
		}

	.p-lg-30 {
		padding: 30px !important;
	}

		.p-lg-30.style-border {
			padding: 29px !important;
		}

	.line-clamp-xl-3 {
		-webkit-line-clamp: 3 !important;
	}

	.grid-cls {
		grid-template-areas: "aa bb bb cc" "aa bb bb cc" "aa bb bb cc";
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

		.grid-cls.grid-cls-v2 {
			grid-template-columns: 29.2% 40.2% 29.2%;
			grid-template-areas: "aa bb cc" "dd bb ee";
		}

			.grid-cls.grid-cls-v2.type-2 {
				grid-template-columns: calc(28% - 6.6667px) calc(44% - 6.6667px) calc(28% - 6.6667px);
				grid-template-areas: "aa bb cc" "dd bb ee" "ff bb gg";
			}

		.grid-cls.grid-cls-v5 {
			display: grid;
			gap: 10px;
			grid-template-columns: calc(78% - 5px) calc(22% - 5px);
			grid-template-areas: "aa bb" "aa cc" "aa dd";
		}

	.h-xl-100 {
		height: 100%;
	}

	.slide-wrap-2 {
		margin-bottom: 203px;
	}

	.section-wrap {
		padding: 30px;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0509803922);
		border-radius: 8px;
		background: #FFFFFF;
		margin-top: -203px;
	}

	.banner-slide-product {
		max-width: 1070px;
	}

	.slide-wrap-2 .wrap {
		width: unset;
	}

	.slide-wrap-2 .cls-product {
		max-width: 400px;
		height: 100%;
	}

	.cls-product {
		gap: 34px;
		padding: 20px 29px 20px 15px;
	}

		.cls-product .content {
			display: grid;
			gap: 22px;
		}

		.cls-product .box-title {
			display: grid;
			gap: 5px;
		}

		.cls-product.style-2 {
			padding: 5px 10px 6px 20px;
			gap: 6px;
		}

			.cls-product.style-2 .box-title {
				display: grid;
				gap: 6px;
			}

	.lh-xl-25 {
		line-height: 25px !important;
	}

	.lh-xl-24 {
		line-height: 24px !important;
	}

	.lh-xl-22 {
		line-height: 22px !important;
	}

	.lh-xl-15 {
		line-height: 15px !important;
	}

	.lh-xl-14 {
		line-height: 14px !important;
	}

	.lh-xl-17 {
		line-height: 17px !important;
	}

	.lh-xl-31 {
		line-height: 31px !important;
	}

	.lh-xl-33 {
		line-height: 33px !important;
	}

	.lh-xl-49 {
		line-height: 49px !important;
	}

	.lh-xl-71 {
		line-height: 71px !important;
	}

	.mb-xl--5 {
		margin-bottom: -5px;
	}

	.banner-image-product-3 .wrap {
		margin-right: 28px;
	}

	.slider-wrap .banner-image-product-3 {
		width: calc(40% - 15px);
	}

	.slider-wrap .tf-sw-products {
		width: calc(60% - 15px);
	}

	.slider-wrap.style-2 .width-item-1 {
		width: calc(28% - 15px);
	}

	.slider-wrap.style-2 .width-item-2 {
		width: calc(72% - 15px);
	}

	.slider-wrap.style-3 .width-item-1 {
		width: calc(40% - 15px);
	}

	.slider-wrap.style-3 .width-item-2 {
		width: calc(60% - 15px);
	}

	.banner-image-product-3 .name {
		font-size: 50px;
		line-height: 50px;
	}

	.banner-image-product-3 .sub-name {
		font-size: 100px;
		line-height: 97px;
	}

	.banner-product .other-item {
		max-width: 417px;
		width: 100%;
	}

	.s-banner-wrapper {
		flex-wrap: nowrap;
	}

		.s-banner-wrapper .wrap-item-1 {
			max-width: 285px;
		}

		.s-banner-wrapper .wrap-item-2 .img-box {
			height: 100%;
		}

		.s-banner-wrapper .wrap-item-3 {
			max-width: 360px;
			flex-direction: column;
		}

	.tf-grid-product-item {
		flex: 1;
		max-width: calc((100% - 90px) / 4);
	}

	.gap-xl-20 {
		gap: 20px !important;
	}

	.gap-xl-12 {
		gap: 12px !important;
	}

	.gap-xl-6 {
		gap: 6px !important;
	}

	.card-product.style-row {
		gap: 30px;
	}

		.card-product.style-row .card-product-info {
			gap: 14px;
		}

			.card-product.style-row .card-product-info .price-wrap {
				margin-top: -2px;
			}

		.card-product.style-row .card-product-btn {
			margin-left: 30px;
		}

			.card-product.style-row .card-product-btn::after {
				left: -30px;
			}

	.card-product .list-product-btn {
		top: 15px;
		right: 15px;
		gap: 15px;
	}

		.card-product .list-product-btn li {
			opacity: 0;
			visibility: hidden;
			transform: translateX(10px);
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

	.card-product .box-icon {
		width: 40px;
		height: 40px;
	}

	.card-product:hover .list-product-btn li {
		opacity: 1;
		visibility: visible;
	}

		.card-product:hover .list-product-btn li:nth-child(1) {
			transform: translateX(0px);
		}

		.card-product:hover .list-product-btn li:nth-child(2) {
			transform: translateX(0px);
			transition-delay: 0.05s;
		}

		.card-product:hover .list-product-btn li:nth-child(3) {
			transform: translateX(0px);
			transition-delay: 0.1s;
		}

		.card-product:hover .list-product-btn li:nth-child(4) {
			transform: translateX(0px);
			transition-delay: 0.15s;
		}

	.card-product.style-border {
		padding: 24px;
	}

		.card-product.style-border.type-bd-2 {
			padding: 20px;
			border: unset;
		}

	.card-product.style-4 .card-product-wrapper {
		max-width: 200px;
		width: 100%;
	}

	.wg-cls.type-abs .content {
		left: 162px;
	}

	.banner-image-product {
		gap: 64px;
	}

		.banner-image-product .content .box-title {
			gap: 23px;
		}

		.banner-image-product.style-abs .content {
			left: 50px;
		}

		.banner-image-product.style-abs.type-abs-2 .content {
			gap: 34px;
			left: 42px;
		}

		.banner-image-product.style-abs.type-abs-2 .box-btn .price span {
			font-size: 30px;
			line-height: 50px;
		}

	.banner-image-product-2 .item-image.position2 {
		left: 45px;
		right: unset;
	}

	.banner-image-product-2 .item-image.position3 {
		right: 36px;
	}

	.lh-lg-42 {
		line-height: 42px;
	}

	.lh-lg-50 {
		line-height: 50px;
	}

	.lh-lg-38 {
		line-height: 38px;
	}

	.cls-category.style-abs .content {
		bottom: 21px;
		left: 21px;
	}

	.box-sale-wrap {
		top: 30px;
		left: 21px;
	}

	.tab-review .tab-rating-wrap {
		max-width: 424px;
		width: 100%;
	}

	.tf-product-info-list {
		gap: 30px 40px;
	}

	.tf-product-info-content .product-info-name {
		margin-bottom: 4px;
	}

	.tf-product-info-content .infor-center {
		gap: 20px;
	}

	.news-item.style-row .entry_image {
		max-width: 370px;
		width: 100%;
	}

	.news-item.style-row .content {
		width: 100%;
	}

	.social-list {
		gap: 21px;
	}

		.social-list a {
			width: 46px;
			height: 46px;
		}

	.ft-bottom .social-list {
		margin-bottom: 10px;
	}

		.ft-bottom .social-list li {
			display: flex;
		}

	.flat-grid-product {
		gap: 30px;
	}

	.tf-grid-layout {
		column-gap: 30px;
		row-gap: 40px;
	}

		.tf-grid-layout.row-gap-xl-30 {
			row-gap: 30px;
		}

		.tf-grid-layout.xl-col-2 {
			grid-template-columns: 1fr 1fr;
		}

		.tf-grid-layout.xl-col-3 {
			grid-template-columns: repeat(3, 1fr);
		}

		.tf-grid-layout.xl-col-4 {
			grid-template-columns: repeat(4, 1fr);
		}

		.tf-grid-layout.xl-col-5 {
			grid-template-columns: repeat(5, 1fr);
		}

		.tf-grid-layout.xl-col-6 {
			grid-template-columns: repeat(6, 1fr);
		}

		.tf-grid-layout.xl-col-7 {
			grid-template-columns: repeat(7, 1fr);
		}
}

@media (min-width: 1440px) {
	.fw-xxl-bold {
		font-weight: bold !important;
	}

	.banner-product-3 .content {
		position: absolute;
		top: 40px;
		left: 30px;
		right: 30px;
	}

	.gap-xxl-51 {
		gap: 51px !important;
	}

	.gridLayout-fullWidth .flat-grid-product.layout-tablist-1 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.flat-container {
		padding: 40px;
	}

	.gap-xxl-0 {
		gap: 0 !important;
	}

	.wg-map .bottom {
		left: 88px;
	}

	.wg-map .contact-info {
		padding: 40px;
	}

	.wg-map .info-list {
		gap: 30px;
	}

	.fs-xxl-70 {
		font-size: 70px !important;
	}

	.banner-slide-product {
		gap: 20px;
		padding: 24px 88px 25px 45px;
	}

		.banner-slide-product .box-title {
			margin-bottom: 10px;
		}

		.banner-slide-product .br-line {
			margin-bottom: 19px;
		}

		.banner-slide-product .property-list {
			margin-bottom: 11px;
		}

	.lh-xxl-73 {
		line-height: 73px !important;
	}

	.banner-image-product-3 {
		max-width: 578px;
	}

		.banner-image-product-3 .img-item {
			bottom: unset;
			left: unset;
		}

		.banner-image-product-3.style-2 .img-item {
			top: unset;
			bottom: -60px;
			right: 0px;
			cursor: unset;
			max-width: 408px;
		}

	.banner-product {
		gap: 112px;
		padding: 21px 0px;
	}

		.banner-product .product-wrap {
			gap: 23px;
		}

		.banner-product.style-2 {
			gap: 30px;
		}

	.lh-xxl-71 {
		line-height: 71px !important;
	}

	.overflow-xxl-visible {
		overflow: visible !important;
	}

	.card-product .group-btn {
		position: relative;
		display: unset;
	}

		.card-product .group-btn .price-wrap {
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			overflow: hidden;
		}

		.card-product .group-btn .list-product-btn {
			position: absolute;
			z-index: 21;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			justify-content: flex-start;
			gap: 10px;
			opacity: 0;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
			transform: translateY(-20px);
		}

			.card-product .group-btn .list-product-btn li {
				transform: unset;
				transition-delay: unset;
				opacity: 0;
				visibility: hidden;
				opacity: 1;
				visibility: visible;
			}

	.card-product:hover .group-btn .price-wrap {
		transform: translateY(-20px);
		opacity: 0;
		visibility: hidden;
	}

	.card-product:hover .group-btn .list-product-btn {
		opacity: 1;
		transform: translateY(0px);
	}

	.tf-nav-menu .sub-menu-list {
		padding: 30px 34px 30px 30px;
	}

	.countdown-box .countdown__value {
		font-size: 20px;
		line-height: 22px;
		width: 46px;
		height: 46px;
	}

	.banner-image-product-2 .inner {
		gap: 45px;
	}

	.banner-image-product-2 .item-banner {
		padding: 51px 100px 51px 134px;
	}

	.banner-image-product-2 .item-image {
		right: 65px;
	}

		.banner-image-product-2 .item-image.item-2 {
			right: 410px;
		}

	.tf-checkout-wrap {
		gap: 50px;
	}

	.tf-product-info-list.style-2 .tf-product-info-choose-option {
		gap: 30px;
	}

		.tf-product-info-list.style-2 .tf-product-info-choose-option .product-box-btn {
			margin-left: 20px;
			width: 100%;
		}

			.tf-product-info-list.style-2 .tf-product-info-choose-option .product-box-btn .tf-btn {
				width: 100%;
			}

	.flat-product-des-list {
		gap: 40px;
	}

		.flat-product-des-list.style-2 .flat-title-tab-product-des:not(:last-child) {
			padding-bottom: 40px;
		}

		.flat-product-des-list.bg-white {
			padding: 40px;
		}

	.tab-review {
		gap: 40px;
	}

		.tab-review .tab-rating-wrap {
			padding-right: 40px;
		}

		.tab-review .rating-filter-wrap {
			margin-bottom: 10px;
		}

	.tf-product-info-wrap {
		margin-left: -52px;
	}

	.tf-product-info-choose-option {
		max-width: 259px;
	}

	.footer-col-block.type-sp-2 {
		gap: 24px;
	}

		.footer-col-block.type-sp-2 .ft-menu-list {
			gap: 20px;
		}

	.tf-grid-layout.xxl-col-2 {
		grid-template-columns: 1fr 1fr;
	}

	.tf-grid-layout.xxl-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tf-grid-layout.xxl-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tf-grid-layout.xxl-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tf-grid-layout.xxl-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.tf-grid-layout.xxl-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.tf-header .inner-header {
		padding: 30px 0px;
	}

	.tf-header .nav-icon {
		gap: 30px;
	}

	.tf-header.style-2 .inner-header {
		padding: 26px 0px;
	}

	.tf-header.style-2 .header-center {
		margin-right: -11px;
	}

	.tf-header.style-2 .header-right {
		margin-right: 55px;
	}

	.tf-header.style-4 .inner-header {
		padding: 26px 0px;
	}

	.tf-header.style-4 .nav-icon.style-2 {
		gap: 30px;
	}

	.header-bt-left {
		gap: 30px;
	}

	.box-navigation .box-nav-menu {
		gap: 30px;
	}

	.box-navigation.style-2 .item-link {
		padding-right: 30px !important;
	}
}

@media (min-width: 1600px) {
	.d-xxxl-none {
		display: none !important;
	}

	.gridLayout-fullWidth .flat-grid-product.layout-tabgrid-1, .gridLayout-fullWidth .flat-grid-product.layout-tabgrid-2 {
		grid-template-columns: repeat(6, 1fr);
	}

	.box-btn-slide-2.sw-nav-effect .nav-swiper {
		width: 60px;
		height: 60px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		visibility: hidden;
	}

		.box-btn-slide-2.sw-nav-effect .nav-swiper i {
			font-size: 24px;
		}

		.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-prev-products-2 {
			left: -15px;
		}

		.box-btn-slide-2.sw-nav-effect .nav-swiper.nav-next-products-2 {
			right: -15px;
		}

	.box-btn-slide-2.sw-nav-effect:hover .nav-swiper {
		visibility: visible;
	}

		.box-btn-slide-2.sw-nav-effect:hover .nav-swiper.nav-prev-products-2 {
			left: -30px;
		}

		.box-btn-slide-2.sw-nav-effect:hover .nav-swiper.nav-next-products-2 {
			right: -30px;
		}

	.box-btn-slide-item.hover-sw .nav-swiper {
		display: block;
		max-width: 72px;
	}

	.container-wrap {
		display: flex;
		gap: 30px;
	}

		.container-wrap .container-sidebar {
			max-width: 284px;
			width: 100%;
		}

			.container-wrap .container-sidebar .swiper {
				max-width: 284px;
			}

		.container-wrap .container-main {
			max-width: 1176px;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
		}

	.container-sidebar {
		display: flex !important;
		flex-direction: column;
		gap: 40px;
	}

	.countdown-box .countdown__timer {
		justify-content: space-between;
	}

	.countdown-box .countdown__item {
		position: relative;
		padding: 0px 4px;
	}

		.countdown-box .countdown__item:not(:last-child)::after {
			content: "";
			position: absolute;
			right: -13px;
			top: 15px;
			width: 4px;
			height: 4px;
			background-color: var(--gray-4);
			border-radius: 50%;
		}

		.countdown-box .countdown__item:not(:last-child)::before {
			content: "";
			position: absolute;
			right: -13px;
			top: 27px;
			width: 4px;
			height: 4px;
			background-color: var(--gray-4);
			border-radius: 50%;
		}

	.banner-image-product-2.type-sp-2 {
		padding: 14px 0px;
	}

		.banner-image-product-2.type-sp-2 .item-banner {
			padding: 51px 23px;
		}

	.banner-image-product-2.style-2 .inner {
		flex-direction: column;
		gap: 30px;
	}

	.banner-image-product-2.style-2 .item-banner {
		padding: 13px 285px 27px 78px;
	}

	.banner-image-product-2.style-2 .box-price {
		padding-left: 45px;
		background-color: unset;
		width: unset;
		height: unset;
	}

	.tf-product-media-wrap.bg-white {
		padding: 40px 0px 40px 40px;
	}

	.tf-product-info-wrap.bg-white {
		padding: 40px 40px 40px 0px;
	}

	.tf-main-product.style-2 .row {
		padding: 40px;
	}

	.ft-inner {
		display: flex;
		gap: 119px;
	}

	.sidebar-item.type-space-2 {
		gap: 30px;
	}

	.nav-category-wrap .nav-title {
		gap: 8px;
		padding-right: 5px;
	}
}

@media (max-width: 1599px) {
	.tab-review .form-add-comment {
		max-width: unset;
	}

		.tab-review .form-add-comment .btn-submit {
			margin-left: unset;
			margin-right: unset;
			width: 100%;
		}

			.tab-review .form-add-comment .btn-submit .tf-btn {
				padding: 10px;
				width: 100%;
			}

		.tab-review .form-add-comment input,
		.tab-review .form-add-comment textarea {
			max-width: unset;
		}

		.tab-review .form-add-comment fieldset {
			flex-direction: column;
			align-items: unset;
			justify-content: unset;
		}

			.tab-review .form-add-comment fieldset.rate {
				flex-direction: row;
			}
}

@media (max-width: 1439px) {
	.offcanvas-compare .tf-compare-wrap {
		padding-right: 0;
		margin-right: 0;
		gap: 25px;
	}

	.offcanvas-compare .tf-compare-item > .btns-repeat {
		right: -22px;
	}

	.offcanvas-compare .icon-close-popup {
		top: 10px;
		right: 10px;
		width: 25px;
		height: 25px;
		font-size: 10px;
	}

	.card-product .group-btn .tooltip {
		display: none;
	}

	.tf-header .nav-icon-item p {
		display: none;
	}

	h1,
	.h1 {
		font-size: 40px;
		line-height: 55px;
	}

	h2,
	.h2,
	.text-xl {
		font-size: 40px;
		line-height: 55px;
	}

	.s-blog-detail {
		gap: 30px;
	}

		.s-blog-detail .box-direction {
			gap: 50px;
		}

			.s-blog-detail .box-direction.content-right {
				position: sticky;
				top: 25%;
			}

	.ft-body-center .ft-center {
		padding: 50px 0px;
	}
}

@media (max-width: 1199px) {
	.tf-header .logo-site {
		max-width: 130px;
	}

	.banner-product.style-3 > * {
		width: 50% !important;
	}

	.tf-topbar {
		display: none;
	}

	.tf-table-wishlist .wishlist-item_price {
		width: 200px;
	}

	.tf-table-wishlist .wishlist-item_stock {
		width: 150px;
	}

	.tf-table-wishlist .wishlist-item_action {
		width: 200px;
	}

	.canvas-filter-product {
		background-color: var(--white);
	}

		.canvas-filter-product .canvas-body {
			padding: 15px 20px;
			overscroll-behavior-y: contain;
			overflow-y: auto;
		}

			.canvas-filter-product .canvas-body::-webkit-scrollbar {
				width: 3px;
			}

			.canvas-filter-product .canvas-body::-webkit-scrollbar-thumb {
				background-color: var(--primary);
				border-radius: 5px;
			}

	.canvas-filter-product {
		position: fixed;
		bottom: 0;
		z-index: 3000;
		display: flex;
		flex-direction: column;
		background-clip: padding-box;
		outline: 0;
		max-width: 320px !important;
	}

	.handle-canvas {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

		.handle-canvas.left {
			top: 0;
			left: 0;
			transform: translateX(-100%);
		}

		.handle-canvas.right {
			top: 0;
			right: 0;
			transform: translateX(100%);
		}

		.handle-canvas.show {
			transform: none;
		}

	.tf-sp-6 {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.banner-image-product > * {
		width: 50%;
	}

	.banner-image-product-2.type-sp-2 .inner {
		flex-wrap: wrap;
	}

		.banner-image-product-2.type-sp-2 .inner .name {
			width: 100%;
		}

	.tf-header .nav-icon.style-3 {
		gap: 10px;
	}

		.tf-header .nav-icon.style-3 li:not(:last-child) {
			padding-right: 10px;
		}

	.tf-header.style-2, .tf-header.style-4 {
		border-bottom: 1px solid var(--line);
	}

	.s-blog-detail .box-direction {
		max-width: 100px;
	}

	.btn-direc {
		gap: 10px;
	}

		.btn-direc p {
			display: none;
		}
}

@media (max-width: 1024px) {
	.tf-table-page-cart tr > *:first-child {
		padding-left: 0px !important;
	}

	.tf-table-page-cart th {
		padding: 10px 0px;
	}

		.tf-table-page-cart th:first-child {
			padding: 10px 0px 10px 25px;
		}

		.tf-table-page-cart th:last-child {
			padding: 10px 25px 10px 0px;
		}

	.tf-table-page-cart .tf-cart-item td {
		padding-right: 10px;
	}

		.tf-table-page-cart .tf-cart-item td:first-child {
			padding: 10px 25px 10px 0px;
		}

		.tf-table-page-cart .tf-cart-item td:last-child {
			padding: 10px;
		}

	.s-shoping-cart .cart-bottom {
		padding-left: 0px;
		padding-right: 0px;
	}
}

@media (max-width: 991px) {
	.banner-image-product-2 .position2,
	.banner-image-product-2 .position3 {
		width: 160px;
		top: 40%;
	}

	.cls-category.style-abs .box-sale-wrap {
		right: 15px;
		left: unset;
	}

	.canvas-mb {
		max-width: 320px;
	}

	.form-account-details .form-content,
	.wd-form-address .form-content {
		gap: 10px;
	}

	.form-reset-password.def {
		gap: 10px;
	}

	.tf-table-wishlist {
		display: block;
	}

	.wg-map {
		padding-bottom: 0;
	}

		.wg-map iframe {
			height: 300px;
		}

		.wg-map .bottom {
			margin-top: 30px;
			position: unset;
			gap: 30px;
			flex-wrap: wrap;
		}

		.wg-map .contact-wrap {
			width: 100%;
			padding: 15px;
		}

	form .cols {
		display: flex;
		gap: 10px;
	}

	h1,
	.h1 {
		font-size: 28px;
		line-height: 40px;
	}

	h4 {
		font-size: 24px;
		line-height: 30px;
	}

	.comment-wrap .author-wrap {
		gap: 10px;
	}

	.comment-wrap .comment-list {
		gap: 30px;
	}

		.comment-wrap .comment-list .author-wrap:not(:last-child) {
			padding-bottom: 30px;
		}

	.box-direction {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.form-newsletter .subscribe-content {
		gap: 5px;
	}

		.form-newsletter .subscribe-content .subscribe-button {
			padding: 12px 12px 11px;
		}

	.has-bg-img.style-2 {
		background-position: 30% center !important;
	}

	.banner-product.style-3 > * {
		width: auto !important;
	}

	.tf-header .nav-icon-item svg,
	.nav-icon svg {
		width: 20px;
		height: 20px;
	}

	.tf-header .nav-icon-item i,
	.nav-icon i {
		font-size: 20px !important;
	}

	#goTop {
		right: 20px;
	}

	.card-product.style-img-border .card-product-wrapper {
		padding: 5px;
	}

	.banner-slide-product {
		padding: 20px 15px;
	}

	.flat-title-tab-faq .tf-title {
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.flat-title-tab-faq .menu-tab-line {
		display: flex;
		overflow: auto;
		white-space: nowrap;
	}

	.faq-item {
		gap: 20px;
	}

	.sw-dot-default {
		margin-top: 15px;
	}

		.sw-dot-default .swiper-pagination-bullet {
			width: 8px;
			height: 8px;
		}

		.sw-dot-default .swiper-pagination-bullet-active {
			width: 20px;
		}

	.wd-form-address {
		padding: 20px 15px;
	}

	.offcanvas-compare .tf-compare-list {
		flex-direction: column;
		gap: 20px;
	}

	.offcanvas-compare .tf-compare-wrap {
		margin: 0;
		padding: 15px 0;
		width: 100%;
	}

	.offcanvas-compare .tf-compare-item {
		flex-direction: column;
		width: 150px;
		gap: 7px;
	}

	.offcanvas-compare .tf-compare-buttons {
		width: 100%;
	}

	.offcanvas-compare .tf-compare-btn {
		width: 100%;
	}

	.popup-style .popup-header {
		padding: 15px 0px 15px;
		margin: 0px 15px;
	}

	.popup-style .popup-body {
		padding: 20px 15px;
	}

	.popup-style .popup-footer {
		padding: 15px;
	}

	.tf-control-layout li a,
	.tf-control-view .tf-sort {
		padding: 7px;
	}

		.tf-control-layout li a i,
		.tf-control-view .tf-sort i {
			font-size: 18px;
		}

	.tf-grid-product-2 .banner-image-product img,
	.tf-grid-product-2 .cls-category img {
		min-height: 300px;
		max-height: 350px;
	}

	.grid-cls.grid-cls-v1 {
		display: flex;
		flex-direction: column;
	}

	.card-product .tooltip {
		display: none;
	}

	.banner-image-product {
		flex-wrap: wrap;
	}

		.banner-image-product .image {
			padding: 15px;
		}

		.banner-image-product > * {
			width: 100%;
		}

	.banner-image-product-2 .item-banner {
		padding: 30px;
	}

	.banner-image-product-2 .item-image {
		width: 250px;
	}

	.banner-image-product-2 .inner {
		position: relative;
		flex-wrap: wrap;
		gap: 15px 30px;
	}

	h2,
	.h2,
	.text-xl {
		font-size: 30px;
		line-height: 40px;
	}

	h3 {
		font-size: 25px;
		line-height: 1.24;
	}

	form .cols {
		flex-wrap: wrap;
	}

	.payment-choose-card .payment-body {
		padding: 15px;
	}

	.flat-title-tab-product-des .tab-main {
		padding: 15px;
	}

	.tf-product-info-wrap {
		margin-top: 40px;
	}

	.tf-product-info-choose-option {
		padding: 15px;
	}

	.news-item.style-row {
		flex-wrap: wrap;
	}

		.news-item.style-row .entry_image {
			width: 100%;
		}

		.news-item.style-row .content {
			width: 100%;
		}

	.footer-heading-mobile {
		display: block;
		position: relative;
		padding-right: 20px;
	}

		.footer-heading-mobile::after {
			position: absolute;
			content: "";
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 1px;
			background-color: var(--black);
			transition: 0.25s ease-in-out;
		}

		.footer-heading-mobile::before {
			position: absolute;
			content: "";
			right: 15px;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 1px;
			height: 12px;
			background-color: var(--black);
			transition: 0.25s ease-in-out;
		}

	.footer-col-block.open .footer-heading-mobile::before {
		opacity: 0;
	}

	.footer-col-block.open .footer-heading-mobile::after {
		transform: translate(0%, -50%) rotate(180deg);
	}

	.footer-col-block .tf-collapse-content {
		display: none;
	}
}

@media (max-width: 575px) {
	.main-title-3 {
		font-size: 16px;
		line-height: 24px;
	}

	.ft-bottom .ft-menu-list-2 {
		gap: 10px;
	}

		.ft-bottom .ft-menu-list-2 a {
			font-size: 14px;
			line-height: 16px;
		}

	.banner-product.style-2 .product-wrap .item-product {
		margin-top: -50px;
		margin-bottom: -50px;
	}

	.product-thumb-slider .tf-product-view-main .tf-image-view {
		max-width: 575px;
		width: 100%;
	}

	.canvas-sidebar {
		width: 320px !important;
	}

	.banner-image-product-4 {
		padding: 15px;
		position: relative;
	}

		.banner-image-product-4 .content {
			width: 100%;
			position: relative;
			z-index: 2;
		}

		.banner-image-product-4 .img-item {
			position: absolute;
			max-width: 250px;
			width: 100%;
			bottom: 15px;
			right: 15px;
			z-index: 0;
		}

	.popup-shopping-cart {
		width: 340px !important;
	}

	.grid-cls-v2:not(.type-2) .card-product .card-product-wrapper {
		max-width: unset;
	}

	.product-thumb-slider {
		overflow: hidden;
	}

	.product-thumb-slider,
	.slider-thumb-deal {
		max-width: 575px;
		width: 100%;
	}

	.box-sale-wrap.style-2 {
		top: 0;
		bottom: unset;
		height: 45px;
		width: 90px;
	}

	.flat-grid-product .card-product {
		align-items: center;
	}

		.flat-grid-product .card-product .card-product-info {
			width: 100%;
		}

	.flat-animate-tab .flat-title-tab-default {
		overflow: auto;
		white-space: nowrap;
	}

		.flat-animate-tab .flat-title-tab-default::-webkit-scrollbar {
			display: none;
		}

		.flat-animate-tab .flat-title-tab-default .menu-tab-line {
			gap: 15px;
		}

	.banner-image-product-2 .item-banner {
		padding: 30px 15px;
	}

		.banner-image-product-2 .item-banner .inner h3 {
			width: 100%;
		}

	.banner-image-product-2 .item-image {
		top: unset;
		bottom: 20px;
		right: 5px;
		transform: unset;
		width: 150px;
	}

	.banner-image-product-2.type-sp-2 .item-banner {
		padding: 30px 15px;
	}

	.banner-image-product-2.type-sp-2 .item-image {
		top: 10px;
		bottom: unset;
		right: 5px;
		transform: unset;
	}

	.flat-title-tab-product-des .card-usually {
		max-width: unset;
	}

	.tab-usually {
		justify-content: center;
	}
}

@media (max-width: 425px) {
	.banner-image-product-4 .img-item {
		max-width: 200px;
	}

	.card-product.style-row.row-small-2 {
		flex-direction: column;
	}

		.card-product.style-row.row-small-2 .card-product-wrapper {
			max-width: unset;
		}
}

/*# sourceMappingURL=styles.css.map */