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

/* DEFAULT NO BORDER AND LINE-THROUGH */
/* Post sidebar */
.row-divided>.col+.col:not(.large-12) {
	border-left: none !important;
}
.mobile-nav {
	.icon-menu {
		color:#000;
	}
}
.wpcf7-spinner {
	display: none !important;
}
.woocommerce {
	.woocommerce-order {
		padding-top:30px;
	}
}
.section-title-center b {
	opacity: 0;
}

.pt-15 {
	padding-top: 15px !important;
}

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

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

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

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

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

	img {
		border-radius: 8px;
	}
}

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

#wrapper {
	#main {
		background-color: #f2f4f8;
	}
}

#menu-vertical-menu {
	max-height: 350px;
	overflow-y: auto;
	/* 	overflow-x: hidden; */

	/*   // Scrollbar */
	scrollbar-width: thin;
	scrollbar-color: #bbb transparent;

	&::-webkit-scrollbar {
		width: 6px;
	}
	&::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 6px;
	}
	&:hover::-webkit-scrollbar-thumb {
		background: #999;
	}

	/*   // Submenu */
	.sub-menu {
		max-height: 350px;
		/* 		overflow-y: auto; */
		/* 		overflow-x: hidden; */

		scrollbar-width: thin;
		scrollbar-color: #bbb transparent;

		&::-webkit-scrollbar {
			width: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background: #ccc;
			border-radius: 6px;
		}
		&:hover::-webkit-scrollbar-thumb {
			background: #999;
		}
	}
}


.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;
}

.product-small {
	.loop-size {
		font-size: 14px;
		font-weight: 550;
	}

	.price-wrapper {
		.no-price-text {
			font-weight: 600;
			font-size: 16px;
			color: var(--fs-color-secondary);
		}

		.price {

			.price-new {
				font-weight: bold;
				font-size: 16px;
				display: block;
				padding-bottom: 4px;

				span {
					color: #cd0000
				}
			}

			.price-old {
				color: #999;
				text-decoration: line-through;
				font-size: 12px;

				span {
					color: #999
				}
			}

			.price-percent {
				color: #cd0000;
				font-size: 12px;
				font-weight: 600;
			}
		}
	}

}

.custom-products-hiroshi {
	.product {
		.col-inner {

			min-height: 380px;
			background: linear-gradient(144deg, #f4f4f4 24.99%, #fff 33.17%, #eaeaea 46.65%, #fff 70.96%, #e5e5e5 102.74%);
			border-radius: 4px;
			overflow: hidden;
			border: 1px solid rgba(223 223 223);

			&:hover {
				box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
			}

			.badge-container {
				left: unset;
				right: 8px;
				top: 8px;
				margin-top: 0;

				.products-status {
					background-color: #f46248;
					color: #fff;
					align-items: center;
					display: flex;
					font-size: 13px;
					font-weight: 600;
					height: 19.2px;
					line-height: 1.25;
					margin-left: .375rem;
					margin-right: .375rem;
					padding-left: 5px;
					padding-right: 5px;
					position: relative;
					text-transform: uppercase;
					white-space: nowrap;
					width: fit-content;

					&::before {
						height: 100%;
						position: absolute;
						top: 0;
						width: .5rem;
						z-index: 0;
						content: '';
						background-color: #f46248;
						left: -6px;
						-webkit-mask-image: url('../../uploads/2025/11/red-left.svg');
						mask-image: url('../../uploads/2025/11/red-left.svg');
					}

					&::after {
						height: 100%;
						position: absolute;
						top: 0;
						width: .5rem;
						z-index: 0;
						content: '';
						background-color: #f46248;
						right: -6px;
						-webkit-mask-image: url('../../uploads/2025/11/red-right.svg');
						mask-image: url('../../uploads/2025/11/red-right.svg');
					}

				}
			}

			.product-small {
				background-color: transparent;
				padding: 8px;

				.box-text {
					padding: 12px;

					.woocommerce-LoopProduct-link {
						font-size: 16px;
						color: #000;
						font-weight: 600;
						height: 40px;
					}
				}
			}

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

.thl-random-products-box {
	background: #fff;
	padding: 24px 16px;
	margin-bottom: 25px;

	.thl-random-title {
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 20px;
		color: #111;
	}

	.thl-product-item {
		display: flex;
		gap: 16px;
		border: 1px solid #e5e7eb;
		padding: 14px;
		border-radius: 10px;
		margin-bottom: 16px;
		background: #fff;
		transition: 0.2s;

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		}

		.thl-thumb {
			img {
				width: 120px;
				height: 80px;
				object-fit: contain;
				object-position: center;
			}

		}

		.thl-info {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.promotion-badge span {
				background-color: #f46248;
				color: #fff;
				align-items: center;
				display: flex;
				font-size: 13px;
				font-weight: 600;
				height: 19.2px;
				line-height: 1.25;
				margin-left: .375rem;
				margin-right: .375rem;
				padding-left: 5px;
				padding-right: 5px;
				position: relative;
				text-transform: uppercase;
				white-space: nowrap;
				width: fit-content;

				&::before {
					height: 100%;
					position: absolute;
					top: 0;
					width: .5rem;
					z-index: 0;
					content: '';
					background-color: #f46248;
					left: -6px;
					-webkit-mask-image: url('../../uploads/2025/11/red-left.svg');
					mask-image: url('../../uploads/2025/11/red-left.svg');
				}

				&::after {
					height: 100%;
					position: absolute;
					top: 0;
					width: .5rem;
					z-index: 0;
					content: '';
					background-color: #f46248;
					right: -6px;
					-webkit-mask-image: url('../../uploads/2025/11/red-right.svg');
					mask-image: url('../../uploads/2025/11/red-right.svg');
				}
			}

			.thl-name {
				font-size: 15px;
				font-weight: 600;
				color: #111;
				text-decoration: none;
				display: block;
				margin-bottom: 6px;

				&:hover {
					color: var(--fs-color-secondary);
				}
			}

			.thl-prices {
				font-size: 14px;
				line-height: 1.4;

				.price-regular {
					text-decoration: line-through;
					color: #000;
					margin-right: 6px;
				}

				.price-percent {
					color: #000;
					margin-right: 6px;
					font-weight: 600;
				}

				.price-sale {

					font-weight: 700;
					font-size: 14px;
					display: block;

					span {
						color: #d60000;
					}
				}
			}
		}
	}
}

/* END */

.header-wrapper {

	#masthead {
		border-bottom: 1px solid var(--fs-color-primary);
		.hide-for-medium.flex-left {
			/* width: 80% !important; */

			.header-nav-main.nav-left {
				/* width: max-content !important; */
			}
		}

		.header-nav-main {
			.html_topbar_left {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.hide-for-medium.flex-right {
			.nav {
				flex-wrap: nowrap !important;

				.header-block-block-1 {
					.icon-box {
						display: flex;
						align-items: center;

						h3 {
							font-size: 12px;
						}

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

	}

	#wide-nav {
		.flex-row {
			.flex-left {
				width: 100%;
				flex: 0;
				margin-right: 0;

				/* .header-vertical-menu {
				#menu-vertical-menu {
				& li {
				& .sub-menu {
				background-color: red;

				li:has(.menu-item-has-children) {
				a {
				color: red;
			}
			}
			}
			}
			}
			} */
			}

			.flex-right.flex-grow {
				display: none;
			}

			.header-bottom-nav.nav-center {
				li {
					a {
						font-size: 14px;
						text-transform:unset;
						border-bottom:none;
					}

					&:hover {
						/* a {
						background-color: var(--fs-color-secondary);
						color: #fff;
						padding: 5px 8px;
						border-radius: 6px;
					} */
					}

					&.menu-promotion-hiroshi {
						a {
							color: #cd0000!important;

							&:hover {
								background-color: #c5d2f3;
							}
						}

					}
				}

				&.nav-pills>li>a {
					/* background-color: var(--fs-color-secondary);
					color: #fff; */
					padding: 5px 8px;
					border-radius: 6px !important;
				}


				&.nav-pills>li.active>a {

					background-color: var(--fs-color-secondary);
					color: #fff;

				}

				&.nav-pills>li.menu-promotion-hiroshi.active>a {
					background-color: #c5d2f3;
					color: #cd0000;
				}

				.menu-item-design-default:hover>a {
					background-color: var(--fs-color-secondary);
					color: #fff;
					padding: 5px 8px;
					border-radius: 6px;
				}
			}
		}
	}
}

.sec-two-home {
	.row {
		background-color: #F4F4F4;

		.col {
			.box-flash-sale-home {
				margin-top: -86px;
				margin-bottom: 26px;
				height: 156px;

				.box-text {
					transform: translateY(-136px);
				}

				@media screen and (max-width:768px) {
					margin: -70px 0 0 0;
					height: 118px;

					.box-image {
						width: 90% !important;
					}

					.box-text {
						transform: translateY(-104px);
					}
				}
			}

			.custom-product {

				.badge-container {
					left: unset;
					right: 8px;
					top: 8px;
					margin-top: 0;

					.products-status {
						background-color: #f46248;
						color: #fff;
						align-items: center;
						display: flex;
						font-size: 13px;
						font-weight: 600;
						height: 19.2px;
						line-height: 1.25;
						margin-left: .375rem;
						margin-right: .375rem;
						padding-left: 5px;
						padding-right: 5px;
						position: relative;
						text-transform: uppercase;
						white-space: nowrap;
						width: fit-content;

						&::before {
							height: 100%;
							position: absolute;
							top: 0;
							width: .5rem;
							z-index: 0;
							content: '';
							background-color: #f46248;
							left: -6px;
							-webkit-mask-image: url('../../uploads/2025/11/red-left.svg');
							mask-image: url('../../uploads/2025/11/red-left.svg');
						}

						&::after {
							height: 100%;
							position: absolute;
							top: 0;
							width: .5rem;
							z-index: 0;
							content: '';
							background-color: #f46248;
							right: -6px;
							-webkit-mask-image: url('../../uploads/2025/11/red-right.svg');
							mask-image: url('../../uploads/2025/11/red-right.svg');
						}

					}
				}

				/* align-items: stretch;
				.col {
				height: 100%;
			} */
				.col-inner {
					min-height: 380px;
					background: linear-gradient(144deg, #f4f4f4 24.99%, #fff 33.17%, #eaeaea 46.65%, #fff 70.96%, #e5e5e5 102.74%);
					border-radius: 4px;
					overflow: hidden;
					border: 1px solid rgba(223 223 223);

					.product-small {
						background-color: transparent;

						.box-text {
							.woocommerce-LoopProduct-link {
								font-size: 16px;
								color: #000;
								font-weight: 600;
								height: 40px;
							}
						}

						.box-image {
							padding: 8px;
						}
					}

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

				}
			}
		}
	}
}

.sec-three-home {
	.row {
		.col {
			.box {
				.box-image {
					border-radius: 6px;
					overflow: hidden;
				}

				.box-text {
					font-size: 20px;
					margin-top: -85px;
					color: #fff;
				}
			}
		}
	}
}

.sec-commit-home {
	.row {
		.col {
			&.large-3 {
				.col-inner {
					background: linear-gradient(144deg, rgb(255, 255, 255) 24.96%,
						rgb(234, 234, 234) 46.65%,
						rgb(255, 255, 255) 70.96%,
						rgb(229, 229, 229) 102.74%);
					border: 1px solid #dfdfdf;
					padding: 20px;

					.icon-box {
						.icon-box-text {
							h3 {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
}

.sec-video-home {
	.row {
		align-items: stretch;

		.col {
			.custom-box-video {
				height: 100%;

				.box-image {
					height: 100%;
				}

				.box-text {
					position: absolute;
					bottom: 0;

					.video-button-wrapper {
						display: flex;
						position: absolute;
						top: -70%;
						margin: auto;
						left: 0;
						width: 100%;
						align-items: center;
						justify-content: center;
					}
				}
			}

			&.large-9 {
				.col-inner {
					height: 100%;

					.custom-box-video {
						height: 100%;

						.box-image {
							height: 100%;

							div {
								height: 100%;

								@media screen and (max-width:768px) {
									padding-top: 75%;
								}

								img {
									height: 100%;
								}
							}
						}

						.box-text {
							padding: 40px;


							.video-button-wrapper {
								top: -100%;
							}

							h3 {
								font-size: 32px;
							}

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

								h3 {
									font-size: 15px;
								}
							}
						}
					}

				}


			}

			&.large-3 {
				.box-text {
					padding: 15px;

					h3 {
						font-size: 14px;
						text-transform: unset;
					}
				}
			}
		}
	}
}



.cat-landing-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 20px;
}

.cat-landing-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cat-landing-title img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
}

.cat-landing-title h2 {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
}

.cat-landing-filters {
	display: flex;
	gap: 12px;
	flex-wrap: nowrap;
}

.cat-landing-filters select {
	min-width: 150px;
	width: 100%;
	padding: 6px 10px;
	font-size: 14px;
}

.cat-landing-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width:1024px) {
	.cat-landing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width:640px) {
	.cat-landing-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.cat-landing-view-all {
	text-align: center;
	margin-top: 30px;
}

.cat-landing-view-all a {
	padding: 10px 22px;
	border: 1px solid #000;
	font-size: 14px;
	text-transform: uppercase;
	display: inline-block;
}

#footer {
	.sec-footer {
		border-top: 1px solid #ebebeb;

		.custom-stack-footer {
			justify-content: center !important;
			gap: 5px;
			padding: 25px 0;

			.img {
				width: 40px !important;
				height: 40px;

				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					background: #23e0cd36;
					border-radius: 50%;

					img:first-child {
						transform: translateY(-1px);
					}
				}
			}
		}

		.ux-menu {
			.ux-menu-link__link {
				&:hover {
					color: var(--fs-color-secondary);
					text-decoration: underline;
				}
			}
		}

		.name-com-footer {
			p {
				margin-bottom: 0 !important;
			}
		}
	}

	.absolute-footer {
		display: none !important;
	}
}

.sec-policy {
	.tabbed-content {
		.nav-line.nav-vertical {
			position: sticky;
			top: 110px;
			align-self: flex-start;
			max-height: calc(100vh - 100px);

			li {
				a {
					font-size: .85rem;
				}
			}
		}

	}
}


.top-views-wrapper {
	.top-views-title {
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 20px;
		color: #111;
	}

	.top-view-item {
		background: #ffffff;
		display: flex;
		gap: 15px;
		border-radius: 10px;
		padding: 8px;
		margin-bottom: 15px;
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
		transition: 0.3s;
		align-items: center;

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

		.top-view-thumb img {
			width: 300px;
			height: 80px;
			object-fit: cover;
			border-radius: 8px;
		}

		.top-view-content {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.post-meta {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-bottom: 6px;

				.post-tag {
					background: var(--fs-color-secondary);
					color: #fff;
					padding: 2px 8px;
					font-size: 11px;
					border-radius: 4px;
					font-weight: bold;
					text-transform: uppercase;
				}

				.post-date {
					font-size: 12px;
					color: #000;
				}
			}

			.post-title {
				font-size: 14px;
				color: #111;
				font-weight: 500;
				line-height: 1.3;
				text-decoration: none;
				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 */
			}

			.post-title:hover {
				color: var(--fs-color-secondary);
			}
		}
	}
}

.sec-single-blog-custom {
	.row {
		.col {
			.col-inner {

				.single-meta {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25px 0;

					.single-date,
					single-views {
						font-size: 14px;
					}
				}

				/* Khung form */
				.cf7-consult-box {
					background: #e2f0ff;
					padding: 24px 20px 28px;
					border-radius: 12px;
				}

				/* Tiêu đề */
				.cf7-consult-title {
					font-size: 24px;
					font-weight: 700;
					margin: 0 0 18px;
					color: #111827;
				}

				/* Nhóm field */
				.cf7-form-group {
					margin-bottom: 14px;
				}

				.cf7-form-group label {
					display: block;
					font-size: 14px;
					font-weight: 600;
					margin-bottom: 6px;
					color: #111827;
				}

				/* Dấu * đỏ */
				.cf7-form-group .required {
					color: #e02424;
				}

				/* Input + textarea */
				.cf7-input,
				.cf7-textarea {
					width: 100%;
					padding: 10px 12px;
					border-radius: 10px;
					border: 1px solid #d1d5db;
					font-size: 14px;
					background: #ffffff;
					box-sizing: border-box;
					height: 48px;
				}

				.cf7-textarea {
					min-height: 110px;
					resize: vertical;
				}

				/* Focus */
				.cf7-input:focus,
				.cf7-textarea:focus {
					outline: none;
					border-color: #3b82f6;
					box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
				}

				/* Nút gửi */
				.cf7-form-submit {
					margin-top: 10px;
				}

				.cf7-btn-submit {
					display: inline-block;
					width: 100%;
					text-align: center;
					padding: 8px 18px;
					border-radius: 8px;
					border: none;
					font-size: 15px;
					text-transform: unset;
					font-weight: 600;
					background: var(--fs-color-secondary);
					color: #fff;
					cursor: pointer;
					transition: background 0.2s ease, transform 0.1s ease;
				}



				/* Fix style mặc định CF7 (nếu có) */
				.cf7-consult-box .wpcf7-not-valid-tip {
					font-size: 12px;
					color: #e02424;
				}

				.cf7-consult-box .wpcf7-response-output {
					margin-top: 10px;
					font-size: 13px;
				}

				.top-views-wrapper {
					padding: 24px 16px;
					background: #fff;

					.top-view-item {
						border: 1px solid #ebebeb;
						box-shadow: none;
					}
				}


			}
		}
	}
}

.obelix-contact--five {
	.gg-map-custom {
		a {
			background: #fff;
			padding: 5px 10px;
			color: #000;
			border-radius: 4px;
			font-weight: 500;
			border: 1px solid #ebebeb;
			position: relative;
		}
	}
}

.sec-single-product-one {
	.row {
		.col {
			.col-inner {

				.posted_in {
					display: none;
				}

				.sku_wrapper {
					font-weight: 600;
					font-size: 12px;

					.sku {
						color: #cd0000;
						text-transform: uppercase;
					}
				}

				.price-wrapper {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 12px;
					margin-bottom: 15px;
					.custom-contact-price {
						.contact-now-btn {
							border-radius: 4px;
							text-transform: capitalize;
							font-size: 16px;
						}
					}
					@media screen and (max-width:768px) {
						flex-direction: column;
						align-items: start;

						/* & > span {
						display: inline-block;

						&:nth-child(2),
						&:nth-child(3) {
						order: 1;
					}
					} */
					}

					p {
						margin-bottom: 0 !important;

						&.price-new {
							padding-right: 15px;

							span {
								color: #cd0000;
							}
						}

					}

					span {
						color: #000;

						&.price-old {
							text-decoration: line-through;

							span {
								color: rgb(108, 108, 108) !important;
								;
							}
						}

						&.price-percent {
							color: #cd0000;
							font-weight: 600;
						}
					}
				}

				.product-short-description {
					margin: 0px 0 20px;
					/* border-top: 1px solid #ebebeb; */
					border-bottom: 1px solid #ebebeb;
					padding: 0 0 10px;

					p {
						margin-bottom: 5px !important;
					}
				}

				.form-flat {
					input:not([type=submit]) {
						border-radius: 4px;
					}

					button {
						border-radius: 4px;
						text-transform: capitalize;

						&.single_add_to_cart_button{
							background:var(--fs-color-alert);
						}
						&.ux-buy-now-button{
							background:var(--fs-color-secondary);
						}
					}

				}

				.custom-row-icon-box {
					.icon-box {
						padding: 4px 8px;
						background: #23e0cd78;
						border-radius: 4px;
						color: #000;
						cursor: pointer;
						font-size: 12px;
						display: flex;
						align-items: center;
						font-weight: 600;
						min-height: 43px;
					}
				}

				.thl-product-qr-and-views {
					display: flex;
					align-items: center;
					margin-top: 20px;
					border-top: 1px solid #ebebeb;
					padding-top: 20px;
					border-bottom: 1px solid #ebebeb;
					padding-bottom: 20px;
					margin-bottom: 20px;

					.thl-product-qr-code {
						position: relative;

						.box-qr-code {
							background: #fff;
							padding: 5px;
							box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
							width: 200px;
							position: absolute;
							top: 120%;
							z-index: 2;
							display: none;

							&.active {
								display: block;
							}
						}

						.btn-qr-code {
							border: 1px solid #074eb4;
							border-radius: 99px;
							background: #074eb46e;
							color: #000;
							overflow: hidden;
							font-size: 14px;
							margin-bottom: 0;
							text-transform: unset;
							font-weight: 500;

							span {
								padding-left: 5px;
							}
						}
					}


					p {
						margin-bottom: 0 !important;
						font-size: 14px;

						strong {
							color: #074eb4;
						}
					}
				}

			}
		}
	}
}

.sec-single-product-two {
	.row {
		.col {
			.col-inner {
				.product-tabs {
					display: none;
				}

				.custom-col-promotion {
					.col-inner {
						padding-bottom: 0;
						border: 1px solid #F2DEDE;
						border-radius: 4px;
						overflow: hidden;

						.icon-box {
							display: flex;
							align-items: center;
							padding: 16px 20px;

							h3 {
								margin-bottom: 0 !important;
							}

							&:first-child {
								background-color: #F2DEDE;
							}
						}
					}
				}
			}
		}
	}
}

.header-category-hiroshi {
	display: flex;
	justify-content: space-between;
	align-items: center;

	@media screen and (max-width:768px) {
		flex-direction: column;
		align-items: start;
	}

	.title-category-hiroshi {
		display: flex;
		align-items: center;
		gap: 10px;

		img {
			width: 60px;
			height: 60px;
		}

		h1 {
			font-size: 40px;
			font-weight: 700;
			color: #000;
			margin: 0;
		}

		@media screen and (max-width:768px) {
			margin-bottom: 10px;

			img {
				height: 28px;
				width: 28px;
			}
			h1 {
				font-size:28px;
			}
		}
	}

	.filter-product-hiroshi {
		display: flex;
		gap: 5px;

		@media screen and (max-width:768px) {
			flex-direction: row;
			align-items: start;
			width: 100%;
			margin-top: 5px;
		}

		#brand-filter,
		#sort-filter {
			margin-bottom: 0 !important;
			/* padding: 10px 14px; */
			border-radius: 8px;
			width: 200px;
		}
	}


}

.child-category-child {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 20px;

	a {
		padding: 4px 12px;
		border: 2px solid var(--fs-color-secondary);
		border-radius: 10px;
		color: var(--fs-color-secondary);
		text-decoration: none;

		&:hover {
			background-color: var(--fs-color-secondary);
			color: #fff;
		}
	}
}

.pagination-product-hiroshi {
	margin-top: 20px;

	.custom-pagination,
	.page-numbers {
		display: flex;
		gap: 10px;
		list-style: none;
		justify-content: center;
		padding: 20px 0;

		li {

			a,
			span {
				display: inline-block;
				padding: 8px 12px;
				border-radius: 6px;
				text-decoration: none;
				color: #333;
				min-width: 44px;
				display: flex;
				justify-content: center;
				font-size: 16px;
			}

			a {
				&:hover {
					background: #eee;
				}
			}

			span {
				&.current {
					background-color: #f9fafb;
					color: #1a73e8;
					font-weight: bold;
				}
			}
		}


	}

}

.sec-video-two {
	.row {
		.col {
			.col-inner {
				.custom-box-video {

					.box-text {
						height: 100%;
						position: absolute;
						bottom: 0;
						padding: 40px;

						.video-button-wrapper {
							display: flex;
							position: absolute;
							top: 40%;
							margin: auto;
							left: 0;
							width: 100%;
							align-items: center;
							justify-content: center;
						}

						.box-text-inner {
							height: 100%;
							position: relative;
							display: flex;
							align-items: end;
							justify-content: start;

							.text {
								width: 100%;
							}
						}

						h4 {
							font-size: 32px;
						}
					}

					@media screen and (max-width:768px) {
						.box-image {
							.image-cover {
								padding-top: 75% !important;
							}
						}

						.box-text {
							padding: 15px;

							.video-button-wrapper {
								top: 30%;
							}

							h4 {
								font-size: 14px;
							}
						}
					}
				}
			}

			&.large-4 {
				.col-inner {
					.box-text {
						height: 100%;
						position: absolute;
						bottom: 0;
						padding: 15px;

						.video-button-wrapper {
							display: flex;
							position: absolute;
							top: 30%;
							margin: auto;
							left: 0;
							width: 100%;
							align-items: center;
							justify-content: center;
						}

						.box-text-inner {
							height: 100%;
							position: relative;
							display: flex;
							align-items: end;
							justify-content: start;

							.text {
								width: 100%;
							}
						}

						h4 {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}


.sec-promotion-two {
	.row {
		.col {
			.col-inner {
				.custom-product {

					.badge-container {
						left: unset;
						right: 8px;
						top: 8px;
						margin-top: 0;

						.products-status {
							background-color: #f46248;
							color: #fff;
							align-items: center;
							display: flex;
							font-size: 13px;
							font-weight: 600;
							height: 19.2px;
							line-height: 1.25;
							margin-left: .375rem;
							margin-right: .375rem;
							padding-left: 5px;
							padding-right: 5px;
							position: relative;
							text-transform: uppercase;
							white-space: nowrap;
							width: fit-content;

							&::before {
								height: 100%;
								position: absolute;
								top: 0;
								width: .5rem;
								z-index: 0;
								content: '';
								background-color: #f46248;
								left: -6px;
								-webkit-mask-image: url('../../uploads/2025/11/red-left.svg');
								mask-image: url('../../uploads/2025/11/red-left.svg');
							}

							&::after {
								height: 100%;
								position: absolute;
								top: 0;
								width: .5rem;
								z-index: 0;
								content: '';
								background-color: #f46248;
								right: -6px;
								-webkit-mask-image: url('../../uploads/2025/11/red-right.svg');
								mask-image: url('../../uploads/2025/11/red-right.svg');
							}

						}
					}

					/* align-items: stretch;
					.col {
					height: 100%;
				} */
					.col-inner {
						min-height: 380px;
						background: linear-gradient(144deg, #f4f4f4 24.99%, #fff 33.17%, #eaeaea 46.65%, #fff 70.96%, #e5e5e5 102.74%);
						border-radius: 4px;
						overflow: hidden;
						border: 1px solid rgba(223 223 223);

						.product-small {
							background-color: transparent;

							.box-text {
								.woocommerce-LoopProduct-link {
									font-size: 16px;
									color: #000;
									font-weight: 600;
									height: 40px;
								}
							}

							.box-image {
								padding: 8px;
							}
						}

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

					}
				}

				.custom-tab-promotion {
					ul.nav-simple {
						li {
							a {
								padding: 5px 10px;
								border-radius: 4px;
								overflow: hidden;
								background-color: #fff;
								color: #000;
							}

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

.thl-breadcrumb ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;

	li {
		margin-bottom: 0;
		margin-left: 0 !important;

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

		&.active {
			font-weight: 600;
		}
	}

	.sep {
		margin: 0 5px;
		color: #999;
	}
}