/**
* Theme Name:     Hiroshi Lord
* Author:         Hiroshi Lord
* Template:       flatsome
* Description:    Theme Build by Hiroshi Lord
* Version:        2025
*/

:root {
	--font-heading: "SVN Futura", sans-serif;
	--font-body: "Inter", sans-serif;
	/* vàng gold */
	--color-gold-1: #000;
	--color-gold-2: #000;
	/* Vàng nhạt */
	--color-gold-3: #ffecce;
}

/* FONTS */
body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: .5em;
}

p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 1em;
}

button,
.button,
.ux-button {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.3px;
}

.absolute-footer {
	border-top: 1px solid #434343;

	&.text-center {
		margin-top: 0 !important;
	}
}

.text {

	h3,
	h4 {
		color: #888;
	}
}

.d-md-none {
	display: none !important;
}

.d-sm-none {
	@media screen and (max-width:768px) {
		display: none !important;
	}
}

.d-block {
	@media screen and (max-width:768px) {
		display: flex !important;
	}
}

/* END FONTS */
.marquee {
	width: 100%;
	overflow: hidden;
	background: #6b745f;
	/* màu nền giống hình */
	padding: 24px 0;
}

.marquee-track {
	display: flex;
	width: 350px;
	animation: marquee-left-to-right 18s linear infinite;
}

.marquee-track span.outline {
	color: transparent;
	-webkit-text-stroke: 2px #fff;
}

.marquee-track span {
	font-size: 64px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #fff;
	margin-right: 80px;
	white-space: nowrap;
	text-transform: uppercase;
}

/* Animation */
@keyframes marquee-left-to-right {
	from {
		transform: translateX(-100%);
	}

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

.banner-video-home {
	&.is-full-height {
		@media screen and (max-width:768px) {
			height: 32vh !important;
			min-height: 100% !important;
		}
	}
}

/* DEFAULT CSS */

/* Tắt tooltip */
.tooltipster-base,
.tooltipster-sidetip,
.tooltipster-content {
	display: none !important;
}

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

.post-item {
	.from_the_blog_excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* Giới hạn tối đa 2 dòng */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		/* Hiện dấu ... nếu vượt quá */
		white-space: normal;
		/* Cho phép xuống dòng */
	}
}


.row-stretch {
	align-items: stretch;

	.col {
		.col-inner {
			height: 100%;

			.row {
				height: 100%;
			}

			.custom-box-img {

				height: 100%;

				.img-inner {
					height: 100%;

					img {
						height: 100%;
						border-radius: 16px;
						overflow: hidden;
					}
				}
			}
		}

		&.custom-box-img {
			.img {
				height: 100%;

				.img-inner {
					height: 100%;
				}
			}
		}
	}
}

.section-title-center b {
	opacity: 0;
}

.section-title-normal {
	border-bottom: none;
}

.section-title-normal span {
	border-bottom: none;
}

.text-cap {
	span {
		text-transform: capitalize;
	}
}

.page-title-hiroshi {
	font-size: 40px;
	text-transform: unset;
	margin-bottom: 0;
}

body {
	&.category {
		#content {
			padding-top: 0;
		}
	}

	&.single-post {
		#content {
			padding-top: 0;
		}
	}
}

.sec-img-home {
	.row-background-new {
		align-items: stretch;

		.col {
			.col-inner {
				height: 100%;
			}
		}
	}
}

.border-radius {
	border-radius: 8px;
	overflow: hidden;

	img {
		border-radius: 8px;
	}
}

.sec-footer {
	.custom-menu-ft .ux-menu-link__text {
		color: #ffff !important;
		text-align: left !important;
	}
}

.text-overflow {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* Giới hạn tối đa 2 dòng */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Hiện dấu ... nếu vượt quá */
	white-space: normal;
	/* Cho phép xuống dòng */

	a {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* Giới hạn tối đa 2 dòng */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		/* Hiện dấu ... nếu vượt quá */
		white-space: normal;
		/* Cho phép xuống dòng */
	}
}

.d-none {
	display: none !important;
}

.wpcf7-spinner {
	display: none;
}

.breadcrumb-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 16px;
	color: #000;
	margin: 20px 0;
	white-space: nowrap;
	overflow-x: auto;
	gap: 6px;

	a {
		color: #000;
		text-decoration: none;

		&:hover {
			color: var(--color-gold-2);
		}
	}

	.breadcrumb-current {
		border: 1px solid var(--color-gold-2);
		color: var(--color-gold-2);
		padding: 4px 20px;
		border-radius: 30px;
		white-space: nowrap;

	}

	.breadcrumb-sep {
		display: inline-block;
	}

	@media screen and (max-width:768px) {
		display: block;
		white-space: wrap;

		.breadcrumb-current {
			white-space: wrap;
			border: none;
			padding: 0;
		}
	}
}

.category-custom-hiroshi {
	.breadcrumb-wrapper {
		justify-content: center;
		text-align: center;
	}

	/* Banner lớn */
	.ux-category-hero {
		width: 100%;
		height: 450px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		align-items: end;
		justify-content: center;

		/* Tiêu đề trên banner */
		.ux-category-hero-inner {
			position: relative;
			z-index: 2;

			.ux-category-title {
				font-size: 46px;
				font-weight: 600;
				color: #fff;
				text-align: center;
				padding: 0 20px;
			}
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
		}

		@media screen and (max-width:768px) {
			height: 250px;

			.ux-category-title {
				font-size: 36px;
			}

		}
	}





	/* Mô tả */
	.ux-category-desc-container {
		text-align: center;
		padding: 35px 0;

		.ux-category-desc {
			width: 80%;
			margin: 0 auto;
			font-size: 18px;
			line-height: 1.6;
			color: #000;
		}

		@media screen and (max-width:768px) {
			.ux-category-desc {
				width: 90%;
			}
		}
	}

	.stack {
		.box {
			.box-text {
				bottom: 0 !important;
				height: 100%;
				display: flex;
				align-items: center;
				background-color: transparent;
			}
		}

		@media screen and (max-width:768px) {
			display: block !important;
			overflow-x: auto !important;
			overflow-y: hidden;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin !important;
			/* Firefox */
			scrollbar-color: #aaa #eee;
			/* Thumb + Track */
			/* tăng độ mượt */

			.box {
				width: 230px;
				flex: none;
				display: inline-block;
			}

			/* Chrome + Edge */
			&::-webkit-scrollbar {
				height: 6px;
			}

			&::-webkit-scrollbar-track {
				background: #eee;
				border-radius: 10px;
			}

			&::-webkit-scrollbar-thumb {
				background: #aaa;
				border-radius: 10px;
			}

			&::-webkit-scrollbar-button {
				display: none !important;
				width: 0;
				height: 0;
			}
		}
	}
}

#masthead {
	.header-nav-main {
		&.nav-left {
			justify-content: end !important;
		}

		&.nav-right {
			justify-content: start !important;
		}
	}
}

.custom-text-new {
	font-size: 36px;
	line-height: 1.25px;
	padding-bottom: 30px;

	.text-italic {
		color: var(--color-gold-2);
		font-style: italic;
	}

	@media screen and (max-width:768px) {
		font-size: 28px;
		padding-bottom: 15px;
	}
}

/* END */

/* BASE LAYOUT */
.contact__fields {
	.field {
		position: relative;
		margin-bottom: 18px;

		.cf-input,
		.cf-textarea {
			width: 100%;
			box-sizing: border-box;
			padding: 20px 20px 8px 20px !important;
			/* top/right/bottom/left */
			border: 1px solid #e6e6e6;
			border-radius: 8px;
			background: transparent;
			font-size: 14px;
			outline: none;
			transition: border-color .15s, box-shadow .15s;
			color: #222;
			height: 48px !important;
			box-shadow: none !important;
		}

		.cf-textarea {
			resize: vertical;
			min-height: 120px;
		}

		label {
			position: absolute;
			left: 18px;
			top: 38%;
			transform: translateY(-50%);
			transition: all .18s ease;
			pointer-events: none;
			background: transparent;
			padding: 0 6px;
			color: #777;
			font-size: 14px;
		}

	}

	/* When input focused or has value -> shrink & move up */
	.cf-input:focus+label,
	.cf-input:not(:placeholder-shown)+label,
	.cf-textarea:focus+label,
	.cf-textarea:not(:placeholder-shown)+label,
	.field.has-value label {
		top: 10px;
		transform: translateY(-10px);
		font-size: 12px;
		color: #333;
	}
}


/* Required star style */
.required {
	color: #c0392b;
	margin-left: 4px;
	font-size: 12px;
}

/* Submit button */
.cf-submit {
	display: inline-block;
	background: #000 !important;
	color: #fff;
	padding: 4px 34px !important;
	border-radius: 40px !important;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	transition: transform .08s ease, opacity .12s;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);

	&:hover {
		transform: translateY(-1px);
	}

	&:active {
		transform: translateY(0);
	}
}

/* Centering */
.text-center {
	text-align: center;
	margin-top: 18px;
}

/* Small helpers for mobile */
@media (max-width: 640px) {

	.cf-input,
	.cf-textarea {
		padding-left: 16px;
		padding-right: 16px;
	}

	.cf-submit {
		width: 80%;
		max-width: 360px;
	}
}

.obelix-blog-list--nine {
	.box-image {
		img {
			object-position: 0;
		}
	}
}

.sec-faq-hiroshi {
	.row {
		.col {
			.col-inner {
				.accordion_title {
					font-size: 36px;
					text-align: center;
				}

				.custom-faq-hiroshi {
					.accordion-item {
						.accordion-title {

							.toggle {
								left: unset;
								right: 0;
							}

							span {
								display: block;
								position: relative;

								&::before {
									position: absolute;
									top: 0;
									left: -30px;
									content: '\f059';
									height: 100%;
									display: flex;
									align-items: center;
									font-family: 'Font Awesome 7 Free';
									font-weight: 900;
								}
							}

							&.active {
								background-color: transparent;
							}
						}
					}
				}
			}
		}
	}
}

.sec-contact-hiroshi {
	.row {
		&.row-stretch {
			align-items: stretch !important;

			.col {
				.col-inner {
					height: 100%;
				}
			}
		}
	}
}

.sec-contact-box-hiroshi {
	.row {
		.col {
			.col-inner {
				.icon-box {
					padding: 28px;
					border-radius: 4px;
					overflow: hidden;
					border: 1px solid rgb(225, 227, 225);
					min-height: 280px;

					@media screen and (max-width:768px) {
						min-height: 100%;
					}
				}
			}
		}
	}
}

.sec-contact-map-hiroshi {
	.row {
		.col {
			.col-inner {
				.html-map {
					overflow: hidden;
					padding: 15px;

					p {
						margin-bottom: 0 !important;

						iframe {
							border-radius: 12px;
						}
					}

					@media screen and (max-width:768px) {
						height: 500px;
						border-radius: 12px;

						p {
							border-radius: 12px;
							overflow: hidden;
							height: 100%;
						}
					}
				}

				.box {
					min-width: 250px;
					margin: auto;
					width: 300px;
					box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
					position: absolute;
					top: 25%;
					right: 30px;
					background: #fff;
					padding: 10px;
					border-radius: 4px;
					overflow: hidden;

					.box-image {
						display: none;
					}

					.box-text {
						.button {
							background-color: #000 !important;
						}
					}

					@media screen and (max-width:768px) {
						position: relative;
						top: 100%;
						right: unset;
						width: 95%;
						min-width: 100%;
					}
				}
			}
		}
	}
}

.sec-blogs-hiroshi {
	.row {
		.col {
			.col-inner {
				.custom-tab-hiroshi {
					ul.nav-pills {
						gap: 15px;
						margin-bottom: 20px;

						li {
							a {
								padding: 5px 30px;
								background-color: var(--color-gold-3);
								line-height: unset;
								font-size: 18px;
								/* color: #fff; */
							}

							&.active {
								a {
									padding: 5px 30px;
									background-color: var(--color-gold-1);
									line-height: unset;

									span {
										font-weight: 700;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.sec-detail-post-hiroshi {
	padding-top: 0;

	.row {
		.col {
			.col-inner {
				.entry-header {
					.entry-header-text {
						margin-top: 0;
						padding: 0;

						.entry-title {
							margin-bottom: 0;
							text-align: left;
						}

						.is-divider {
							display: none;
						}
					}
				}

				.blog-share {
					text-align: left;

					.is-divider {
						display: none;
					}
				}

				.related-wrapper {
					margin-top: 30px;
				}

				.related-title {
					text-align: center;
					font-size: 28px;
					margin-bottom: 15px;
					font-weight: 500;
					border-bottom: 1px solid #ebebeb;
					padding-bottom: 15px;
				}

				.related-list {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 8px;
				}

				.related-item img {
					width: 100%;
					height: 200px;
					object-position: 0;
					object-fit: cover;
					border-radius: 15px;
				}

				.related-post-title {
					padding-top: 10px;

					a {
						color: #1a1a1a;
						font-weight: 700;
						font-size: 18px;
						line-height: 1.4;
					}
				}

				.related-date {
					margin: 6px 0;
					color: var(--color-gold-2);
					font-weight: 500;
				}

				.related-excerpt {
					color: #555;
					font-size: 14px;
					line-height: 1.5;
				}

				@media(max-width: 768px) {
					.related-list {
						grid-template-columns: 1fr;
					}
				}

				.category-widget {
					margin-bottom: 25px;
				}

				.category-title {
					font-size: 18px;
					font-weight: 500;
					margin-bottom: 15px;
					border-bottom: 1px solid #ddd;
					padding-bottom: 8px;
					font-size: 18px;
				}

				.custom-category-list {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						margin: 10px 0;
						position: relative;
						padding-left: 18px;
						font-size: 15px;
						font-weight: 400;

						&::before {
							content: "›";
							/* giống icon > */
							position: absolute;
							left: 0;
							top: -4px;
							color: #333;
							font-size: 18px;
						}

						a {
							text-decoration: none;
							color: #333;
							font-weight: 400;

							&:hover {
								color: var(--color-gold-2);
							}
						}
					}
				}

				.search-history-widget {
					margin-bottom: 30px;

					.search-title {
						font-size: 18px;
						font-weight: 500;
						margin-bottom: 12px;
						border-bottom: 1px solid #ddd;
						padding-bottom: 8px;
					}

					.search-tags {
						display: flex;
						flex-wrap: wrap;
						gap: 10px;

						.search-tag {
							background: #f2f2f2;
							padding: 7px 15px;
							border: none;
							border-radius: 0;
							font-size: 13px !important;
							position: relative;
							color: #333;
							opacity: 1;

							&::before {
								content: "";
								position: absolute;
								border-right: 10px solid #f2f2f2;
								border-top: 18px solid #fff;
								top: 0;
								left: 0;
							}

							&::after {
								content: "";
								position: absolute;
								border-right: 10px solid #f2f2f2;
								border-bottom: 18px solid #fff;
								bottom: 0;
								left: 0;
							}

							&:hover {
								background: var(--color-gold-2);
								color: #fff;

								&::before {
									border-right: 10px solid var(--color-gold-2);
									border-top: 18px solid #fff;
								}

								&::after {
									border-right: 10px solid var(--color-gold-2);
									border-bottom: 18px solid #fff;
								}
							}

						}
					}
				}

				.bestseller-wrapper {
					margin-bottom: 30px;

					.bestseller-title {
						font-size: 18px;
						font-weight: 500;
						margin-bottom: 20px;
						border-bottom: 1px solid #ddd;
						padding-bottom: 8px;
						letter-spacing: 1px;
					}

					.bestseller-item {
						display: flex;
						align-items: flex-start;
						margin-bottom: 25px;

						.bestseller-img {
							width: 70px;
							padding: 10px;
						}

						.product-name {
							display: block;
							font-size: 15px;
							line-height: 1.4;
							margin: 0 0 6px 0;
							font-weight: 500;
							color: #000;
							text-decoration: none;

							&:hover {
								opacity: 0.7;
							}
						}

						.product-price {
							.woocommerce-Price-amount {
								bdi {
									color: #e60000;
									font-size: 16px;
									font-weight: bold;
									margin: 0;
								}
							}

						}
					}
				}

			}
		}
	}
}

.yith-wcan-filters {
	.price-slider {

		.price-slider-min,
		.price-slider-max {
			display: none;
		}
	}

	.yith-wcan-filter {
		/* margin-bottom: 30px; */
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 8px;
		margin-bottom: 15px;
	}
}

.shop-container {
	.term-description {
		display: none;
	}
}

.out-of-stock-label {
	font-size: 0;
	padding: 10px 0 !important;

	&::after {
		content: "Liên hệ";
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
	}

}



/* ---- Quick View giống Shopify ---- */
.product-small .quick-view {
	position: absolute;
	right: 15px;
	bottom: 15px;
	width: 42px;
	height: 42px;
	background: #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0 !important;
	/* Ẩn chữ "Xem nhanh" */
	opacity: 0;
	transition: .25s;
	z-index: 20;
	transform: translateY(-212px);
}

/* Hiện icon khi hover */
.product-small:hover .quick-view {
	opacity: 1;
}

/* Icon kính lúp */
.product-small .quick-view::before {
	content: "\f002";
	/* unicode của icon-search (FontAwesome) */
	font-family: "FontAwesome";
	font-size: 16px;
	color: #fff;
}


/* Quick View icon */
.quick-view-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	font-size: 0 !important;
	z-index: 30;
	transition: .25s;
}

.quick-view-btn:before {
	content: "\e010";
	font-family: "fl-icons";
	font-size: 18px;
	color: #334;
}

.product-small:hover .quick-view-btn {
	opacity: 1;
}

.post-item {
	.post-title {
		a {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* Giới hạn tối đa 2 dòng */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			/* Hiện dấu ... nếu vượt quá */
			white-space: normal;
			/* Cho phép xuống dòng */
		}
	}
}

.wpr-advanced-text-preffix {
	font-weight: 300;
	font-size: 32px;

	@media screen and (max-width:768px) {
		font-size: 16px;
	}
}

.wpr-anim-text {
	display: inline-block;
}

.wpr-anim-text-inner {
	overflow: hidden;
	vertical-align: top;
	display: inline-block;
	padding: .2em 0;
	margin-top: -55px;
	;
	font-size: 32px;

	@media screen and (max-width:768px) {
		font-size: 16px;
		margin-top: -23px;
	}
}

.wpr-anim-text-inner b {
	display: none;
}

.wpr-anim-text-visible {
	display: inline-block;
}

.wpr-anim-text-inner b {
	opacity: 1;
	transform: translateY(100%);
	transition: all 0.5s ease;
}

.wpr-anim-text-visible {
	opacity: 1 !important;
	transform: translateY(0);
}

.wpr-anim-text-hidden {
	opacity: 0;
	transform: translateY(-100%);
	display: block !important;
}



/* Rounded image */
.box-image img {
	border-radius: 20px;
	object-position: top;
}

.custom-col-product-hiroshi {

	.image-tools {
		position: relative !important;
	}

	/* ---- Quick View giống Shopify ---- */
	.product-small .quick-view {
		position: absolute;
		right: 15px;
		top: 42px;
		width: 42px;
		height: 42px;
		background: var(--color-gold-2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0 !important;
		/* Ẩn chữ "Xem nhanh" */
		opacity: 0;
		transition: .25s;
		z-index: 20;
		transform: translateY(-212px);
	}

	/* Hiện icon khi hover */
	.product-small:hover .quick-view {
		opacity: 1;
	}

	/* Icon kính lúp */
	.product-small .quick-view::before {
		content: "\f002";
		/* unicode của icon-search (FontAwesome) */
		font-family: "FontAwesome";
		font-size: 16px;
		color: #fff;
	}

	&:hover {
		.shopify-add-btn-wrap {
			opacity: 1;
			transition: .25s;

			&:hover {
				.shopify-add-btn:hover:before {
					transform: rotate3d(0, 0, 1, 0) translateZ(0);
					opacity: 1;
				}
			}
		}
	}
}

.custom-box-products {
	.product-small .quick-view {
		bottom: -86px
	}
}

.cart-icon strong:after {
	display: none;
}

.image-tools .cart-icon {
	width: 94%;
	padding: 5px;
	margin: auto;
	left: 3%;
}

/* Ẩn dấu + khi hover */
.image-tools .cart-icon strong {
	font-size: 0;
}

/* Chèn text khi hover */
.image-tools .cart-icon::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: 10%;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #000;
	border: 1px solid #000;
	background: #fff;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	transition: .2s ease;
	pointer-events: none;
}

/* Hover hiện chữ */
.image-tools .cart-icon::after {
	opacity: 1;
}

.custom-box-products-2 {
	.product-small .quick-view {
		bottom: -40px
	}
}

.sec-header-single-hiroshi {
	.row {
		.col {
			.col-inner {
				.product-page-price {
					font-size: 1.4rem;
				}

				.ux-swatches-attribute-ux_label {
					.ux-swatch--label {
						border-radius: 4px;
						overflow: hidden;
						padding: 6px 20px;

						&.selected {
							background-color: #000;
							color: #fff;
						}
					}
				}

				.single_variation_wrap {
					.woocommerce-variation-price {
						font-size: 18px;
					}

					.woocommerce-variation-add-to-cart {

						.buttons_added {
							border: 1px solid #ebebeb;
							border-radius: 25px;
							overflow: hidden;

							.ux-quantity__button {
								border: none;
								background-color: transparent;
								padding: 4px 14px;
								box-shadow: none;

								&:hover {
									background-color: transparent;
								}
							}

							.input-text.qty {
								border: none;
								background-color: transparent;
								box-shadow: none;
								height: 100%;
							}
						}

						.single_add_to_cart_button {
							max-width: 100%;
							width: 458px;

							&.disabled {
								background: transparent;
								border: 1px solid #000 !important;
								border-radius: 25px;
								color: #000;
							}

							background: transparent;
							border: 1px solid #000 !important;
							border-radius: 25px;
							color: #000;

							&:hover {
								background-color: #000;
								color: #fff;
							}
						}

						.ux-buy-now-button {
							width: 100%;
							background: var(--color-gold-2);
							border: 1px solid var(--color-gold-1) !important;
							border-radius: 25px;
							color: #fff;
							padding: 4px 0;
						}
					}
				}

				.add-to-cart-container {
					.buttons_added {
						border: 1px solid #ebebeb;
						border-radius: 25px;
						overflow: hidden;

						.ux-quantity__button {
							border: none;
							background-color: transparent;
							padding: 4px 14px;
							box-shadow: none;

							&:hover {
								background-color: transparent;
							}
						}

						.input-text.qty {
							border: none;
							background-color: transparent;
							box-shadow: none;
							height: 100%;
						}
					}

					.single_add_to_cart_button {
						max-width: 100%;
						width: 458px;

						&.disabled {
							background: transparent;
							border: 1px solid #000 !important;
							border-radius: 25px;
							color: #000;
						}

						background: transparent;
						border: 1px solid #000 !important;
						border-radius: 25px;
						color: #000;

						&:hover {
							background-color: #000;
							color: #fff;
						}
					}

					.ux-buy-now-button {
						width: 100%;
						background: var(--color-gold-2);
						border: 1px solid var(--color-gold-1) !important;
						border-radius: 25px;
						color: #fff;
						padding: 4px 0;
					}
				}
			}
		}
	}
}

.sec-des-single-hiroshi {
	.row {
		.col {
			.col-inner {
				.product-tabs {
					li {
						a {
							font-size: 16px;
							text-transform: capitalize;
							padding: 4px 20px;

							&::before {
								top: unset;
								bottom: 0;
								opacity: .3;
								width: 100%;
							}

							@media screen and (max-width: 768px) {
								&::after {
									content: '';
									font-family: fl-icons !important;
								}
							}
						}

						&.active {
							a {
								&::before {
									top: unset;
									bottom: 0;
									opacity: 1;
								}
							}
						}

						&:hover {
							a {
								&::before {
									top: unset;
									bottom: 0;
									opacity: 1;
								}
							}
						}
					}
				}
			}
		}
	}
}

.highlight {
	font-family: var(--font-heading);
	background: linear-gradient(180deg, var(--color-gold-1) 41.53%, var(--color-gold-2) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.content-box-banner {
	.content-title-home {
		p {
			font-size: 50px;
			color: #fff;
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	a.button {
		margin-bottom: 50px;
	}

	@media screen and (max-width:768px) {
		.text-center {
			margin-top: 0;
		}

		p {
			font-size: 24px !important;
		}

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

.custom-text-box-h {
	@media screen and (max-width:768px) {
		.text-box-content {
			h3.h-large {
				span {
					font-size: 160% !important;
				}
			}
		}
	}
}

.sec-banner-home {
	@media screen and (max-width:768px) {
		.slider-wrapper {
			.slider {
				.flickity-page-dots {
					bottom: -25px !important;
				}
			}
		}
	}
}

.custom-tab-home {
	h4 {
		background: linear-gradient(180deg, var(--color-gold-1) 41.53%, var(--color-gold-2) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 36px;
		text-transform: capitalize;
		padding: 30px 0 15px;
	}

	ul {
		margin-top: -108px;

		li {
			gap: 8px;

			a {
				padding: 10px 14px;
				background: #f7f7f7;
				color: #000;
				border-radius: 99px;
				font-size: 12.6px;
			}

			&.active {
				a {
					background-color: #000;
					color: #fff;
				}
			}
		}
	}

	.tab-panels {
		.entry-content {


			&.active {

				a.button {
					display: flex;
					width: max-content;
					line-height: 1;
					min-height: auto;
					padding: 7px 20px;
					margin: 0 auto;
					justify-content: center;

					i {
						top: 3px;
					}
				}
			}
		}
	}
}

.cat-list-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;

	/* MOBILE: 1 CỘT */
	@media (max-width: 768px) {
		/* 		grid-template-columns: 1fr; */
		grid-template-columns: repeat(2, 1fr);
	}

	.cat-item {
		display: flex;
		flex-direction: column;
		background: #f3f3f3;
		border-radius: 12px;
		overflow: hidden;
		text-decoration: none;
		position: relative;
		transition: transform .3s ease, box-shadow .3s ease;

		/* 		&:nth-child(5) {
		order:-1;
	} */
		/* ITEM THỨ 4 – FULL WIDTH (DESKTOP) */

		&:nth-child(5) {

			grid-column: 1 / -1;
			order: -1;

			.cat-right {
				aspect-ratio: 16 / 4;
			}

			.cat-left {
				padding: 32px 40px;

				.cat-title {
					font-size: 32px;
				}

				.cat-count {
					font-size: 18px;
				}
			}

			/* RESET TRÊN MOBILE */
			@media screen and (max-width: 768px) {
				grid-column: 1 / -1;

				.cat-right {
					aspect-ratio: 16 / 8;
				}

				.cat-left {
					padding: 16px 18px;

					.cat-title {
						font-size: 24px;
					}

					.cat-count {
						font-size: 16px;
					}
				}
			}

		}

		/* HOVER */
		&:hover {
			transform: translateY(-4px);
			box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

			.cat-img {
				transform: scale(1.05);
			}
		}

		/* IMAGE / RIGHT */
		.cat-right {
			order: 1;
			aspect-ratio: 4 / 2;
			background: #eaeaea;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				/* 				background: rgba(80, 80, 80, .6); */
				z-index: 1;
			}

			.cat-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				transition: transform .3s ease;
			}
		}

		/* TEXT / LEFT */
		.cat-left {
			order: 1;
			padding: 16px 18px;
			position: absolute;
			z-index: 3;
			width: 100%;

			.cat-title {
				font-size: 24px;
				font-weight: 600;
				color: #000;
				margin-bottom: 15px;
				text-transform: uppercase;
			}

			.cat-count {
				font-size: 16px;
				color: #000;
			}
		}

		/* MOBILE TỐI ƯU UI */
		@media (max-width: 768px) {

			.cat-right {
				aspect-ratio: 4 / 3;
			}

			.cat-left {
				padding: 16px 18px;

				.cat-title {
					font-size: 15px;
					/* 					color:# */
				}

				.cat-count {
					font-size: 15px;
				}
			}
		}
	}
}


.ux-timer-text {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

/* Wrapper */
.cf7-inline-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	background: #f7faf3;
	/* màu nền giống hình */
	border: 2px solid #e7ebdf;
	border-radius: 40px;
	padding: 6px;

	p {
		display: flex;
	}

	button {
		margin-right: 0;
		margin-bottom: 0;
	}
}

/* Input */
.cf7-inline-wrap input[type="email"] {
	flex: 1;
	border: none;
	background: transparent;
	padding: 15px 20px;
	font-size: 16px;
	outline: none;
	border-radius: 40px;
	box-shadow: none;
	margin-bottom: 0;
}

/* Submit button */
.cf7-submit-btn {
	background: #222;
	color: #fff;
	border: none;
	padding: 0px 44px;
	font-size: 16px;
	border-radius: 40px;
	cursor: pointer;
	transition: 0.25s ease;
	text-transform: capitalize;

	@media screen and (max-width:768px) {
		padding: 0 44px 0 20px;
	}
}

.cf7-submit-btn:hover {
	opacity: 0.85;
}

/* Fix CF7 default style */
.wpcf7-form-control.wpcf7-submit {
	/*   display: none !important; */
}

.cart-item-new {
	display: grid;
	grid-template-columns: 1fr 150px 150px 150px 40px;
	align-items: center;
	padding: 30px 0;
	border-bottom: 1px solid #eee;
}

.ci-info {
	display: flex;
	gap: 25px;
}

.ci-thumb img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 10px;
}

.ci-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
}

.ci-note {
	margin: 0 0 10px;
	color: #666;
	font-size: 14px;
}

.ci-price,
.ci-total {
	font-weight: 600;
	font-size: 16px;
}

.ci-qty .quantity {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #ccc;
	padding: 8px 12px;
	border-radius: 40px;
	width: fit-content;
}

.ci-remove .remove-btn {
	font-size: 20px;
	color: #555;
	transition: 0.2s;
}

.ci-remove .remove-btn:hover {
	color: #000;
}

a.remove {
	border: none !important;
}

.shop_table thead th {
	border-width: 1px;
}

.product-quantity {
	.ux-quantity {
		border-radius: 99px;
		overflow: hidden;
		border: 1px solid;
	}
}

.continue-shopping {
	.button-continue-shopping {
		border-radius: 99px;
	}
}

.cart-collaterals {
	.checkout-button {
		border-radius: 99px;
	}

	.input-text {
		border-radius: 99px;
	}

	.is-form {
		border-radius: 99px;
	}
}

.woocommerce-billing-fields__field-wrapper {

	input,
	select,
	textarea {
		border-radius: 4px;
	}
}

.woocommerce-additional-fields__field-wrapper {
	textarea {
		border-radius: 4px;
	}
}

.woocommerce-checkout {
	.has-border {
		border-radius: 25px;
	}

	button.button {
		border-radius: 99px;
	}
}

.sec-tab-products-menu {
	.row {
		width: 100%;
		max-width: 100% !important;

		.custom-tab {
			ul {
				li {
					border-top: 0;
					padding: 5px 15px;

					a {
						span {
							font-size: 18px;
						}
					}

					&:hover {
						/* background: var(--fs-color-primary); */

						/* a {
							span {
								color: #fff;
							}
						} */
					}

					&.active {
						/* background: var(--fs-color-primary); */
						text-decoration: underline;

						/* span {
							color: #fff;
						} */
					}
				}
			}

			.tab-panels {
				border-left: none;

				.large-columns-4 {
					.col {
						padding-bottom: 0;

						.box-text {
							padding-bottom: 0 !important;
						}
					}

					.col:nth-child(n+5) {

						.col-inner {
							.box-image {
								display: none !important;
							}
						}
					}
				}

				.product-title {
					.woocommerce-LoopProduct-link {
						color: #000 !important;

						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}

.sec-blog-home {
	.row {
		.box {
			border-radius: 8px;
			overflow: hidden;

			.box-image {
				img {
					border-radius: 0 !important;
				}
			}

			.box-text {
				.post-title {
					a {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* Giới hạn tối đa 2 dòng */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						/* Hiện dấu ... nếu vượt quá */
						white-space: normal;
						/* Cho phép xuống dòng */
					}
				}

				.button {
					border-radius: 99px;
					overflow: hidden;
					text-transform: capitalize;
				}

				@media screen and (max-width:768px) {
					padding: 15px;

					.button {
						border-radius: 99px;
						overflow: hidden;
						text-transform: capitalize;
						font-size: 16px;
					}
				}
			}
		}
	}
}

.sec-three-img-home {
	.row {
		.col {
			.col-inner {
				.text-box-content {
					h4 {
						span {
							font-size: 30px !important;
						}
					}

					a {
						font-size: 16px !important;

						span {}
					}
				}
			}
		}
	}
}

.box-image {
	.out-of-stock-label {
		background: var(--fs-color-primary);
		color: #fff;
	}
}

.gallery-box {
	.box-image {
		img {
			aspect-ratio: 3 / 4;
			object-fit: cover;
		}
	}
}

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

@media screen and (max-width:768px) {
	.text-right {
		text-align: left !important;
	}

	.custom-text-gram {
		h3 {
			text-align: left !important;
			/* height:70px; */
			line-height: 1.2;
		}
	}

	.sec-center {
		.nav-right {
			margin-top: 0;
			justify-content: center !important;
		}
	}
}

.main {
	h1 {

		.roller {
			display: inline-block;
			height: 1.2em;
			/* cao đúng 1 dòng */
			overflow: hidden;
			vertical-align: bottom;

			.rolltext {
				display: inline-block;
				animation: marquee-vertical 20s linear infinite;
				will-change: transform;
			}
		}
		@media screen and (max-width:768px) {
			font-size: 14px;
			margin-top: 20px;
		}
	}
}



@keyframes marquee-vertical {
	0% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(-100%);
	}
}
.sec-cate-new {
	@media screen and (max-width:768px) {
		.col{
			padding-bottom: 15px;
			&:nth-child(even){
				/* padding-right: 0; */
			}
		}
	}
}
.no-pl {
	@media screen and (max-width:768px) {
		padding-left:8px;
	}
}
.no-pr {
	@media screen and (max-width:768px) {
		padding-right:8px;
	}
}