/* LHS Category Icons – menu "Sản Phẩm" + cột danh mục [lhs_danh_muc]. */
:root {
	--lhs-cat-color: #1b2a5e;
	--lhs-cat-accent: var(--ast-global-color-0, #0274be);
	--lhs-cat-border: #e6e6e6;
	--lhs-cat-hover: #f3f6fb;

	/* Khoảng cách chung (khớp với các section Elementor: 80/64/48px, lề mobile 20px). */
	--lhs-gutter: 20px;          /* lề 2 bên trên màn nhỏ */
	--lhs-space-top: 40px;       /* header/banner -> nội dung */
	--lhs-space-block: 64px;     /* giữa các khối trong cùng 1 trang */
	--lhs-space-section: 80px;   /* nội dung -> khối tư vấn / footer */
}

@media (max-width: 1024px) {
	:root {
		--lhs-space-block: 48px;
		--lhs-space-section: 64px;
	}
}

@media (max-width: 767px) {
	:root {
		--lhs-space-top: 24px;
		--lhs-space-block: 40px;
		--lhs-space-section: 48px;
	}
}

.lhs-cat-icon {
	display: block;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	color: var(--lhs-cat-color);
}

/* ---------- Menu dropdown (Astra) ---------- */
.main-header-menu .sub-menu:has(> .lhs-cat-menu-item) {
	width: 270px;
	padding: 0;
}

.main-header-menu .lhs-cat-menu-item > .menu-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px;
	transition: background-color 0.15s ease;
}

/* Astra ép border-bottom-width:0 cho .sub-menu .menu-link nên cần !important. */
.main-header-menu .lhs-cat-menu-item:not(:last-child) > .menu-link {
	border-bottom: 1px solid var(--lhs-cat-border) !important;
}

.main-header-menu .lhs-cat-menu-item > .menu-link:hover,
.main-header-menu .lhs-cat-menu-item.current-menu-item > .menu-link {
	background-color: var(--lhs-cat-hover);
}

/* Mũi tên trang trí của Astra trước tên mục con – đã có icon thay thế. */
.main-header-menu .lhs-cat-menu-item > .menu-link > .ast-icon.icon-arrow {
	display: none;
}

/* Menu mobile: icon nhỏ hơn. */
.ast-header-break-point .main-header-menu .lhs-cat-menu-item > .menu-link,
#ast-mobile-header .main-header-menu .lhs-cat-menu-item > .menu-link {
	gap: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.ast-header-break-point .main-header-menu .lhs-cat-menu-item .lhs-cat-icon,
#ast-mobile-header .main-header-menu .lhs-cat-menu-item .lhs-cat-icon {
	width: 26px;
	height: 26px;
}

.ast-header-break-point .main-header-menu .sub-menu:has(> .lhs-cat-menu-item),
#ast-mobile-header .main-header-menu .sub-menu:has(> .lhs-cat-menu-item) {
	width: auto;
}

/* ---------- Cột danh mục [lhs_danh_muc] ---------- */
.lhs-cat-nav {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--lhs-cat-border);
	border-radius: 10px;
}

.lhs-cat-nav__title {
	margin: 0;
	padding: 14px 18px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lhs-cat-color);
	border-bottom: 1px solid var(--lhs-cat-border);
}

.lhs-cat-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lhs-cat-nav__item {
	margin: 0;
}

.lhs-cat-nav__item + .lhs-cat-nav__item {
	border-top: 1px solid var(--lhs-cat-border);
}

.lhs-cat-nav__item > a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px;
	font-size: 15px;
	line-height: 1.4;
	color: #2b2f38;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lhs-cat-nav__item > a:hover,
.lhs-cat-nav__item > a:focus-visible {
	color: var(--lhs-cat-color);
	background-color: var(--lhs-cat-hover);
}

.lhs-cat-nav__item.is-current > a {
	font-weight: 600;
	color: var(--lhs-cat-color);
	background-color: var(--lhs-cat-hover);
	box-shadow: inset 3px 0 0 var(--lhs-cat-accent);
}

.lhs-cat-nav__count {
	min-width: 26px;
	margin-left: auto;
	padding: 1px 8px;
	font-size: 12px;
	line-height: 1.6;
	color: #6b7280;
	text-align: center;
	background: #f2f3f5;
	border-radius: 999px;
}

/* ---------- Lưới danh mục [lhs_danh_muc layout="grid"] ---------- */
.lhs-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lhs-cat-grid__item {
	margin: 0;
}

.lhs-cat-grid__item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 24px 16px 20px;
	text-align: center;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lhs-cat-grid__item > a:hover,
.lhs-cat-grid__item > a:focus-visible {
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	transform: translateY(-4px);
}

.lhs-cat-grid__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 8px;
	background: linear-gradient(145deg, #f3f6ff 0%, #dce6fb 100%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.08);
}

/* Lớp nền xanh đậm hiện dần khi hover (gradient không transition được nên dùng opacity). */
.lhs-cat-grid__icon::before {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(145deg, #2a4fb0 0%, #1b2a5e 100%);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lhs-cat-grid__icon .lhs-cat-icon {
	position: relative;
	width: 44px;
	height: 44px;
	transition: color 0.2s ease, transform 0.25s ease;
}

.lhs-cat-grid__item > a:hover .lhs-cat-grid__icon::before,
.lhs-cat-grid__item > a:focus-visible .lhs-cat-grid__icon::before {
	opacity: 1;
}

.lhs-cat-grid__item > a:hover .lhs-cat-icon,
.lhs-cat-grid__item > a:focus-visible .lhs-cat-icon {
	color: #fff;
	transform: scale(1.08) rotate(-6deg);
}

.lhs-cat-grid__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #2b2f38;
}

.lhs-cat-grid__count {
	font-size: 13px;
	color: #6b7280;
}

/* Mobile: slider 2 hàng x 2 cột, vuốt/tự trượt từng cột (lhs-slider.js). */
@media (max-width: 767px) {
	.lhs-cat-grid {
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 12px) / 2);
		gap: 12px;
		overflow-x: auto !important;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lhs-cat-grid::-webkit-scrollbar {
		display: none;
	}

	.lhs-cat-grid__item {
		scroll-snap-align: start;
	}

	.lhs-cat-grid__item > a {
		padding: 18px 10px 16px;
	}

	.lhs-cat-grid__item > a:hover,
	.lhs-cat-grid__item > a:focus-visible {
		box-shadow: none;
		transform: none;
	}

	.lhs-cat-grid__icon {
		width: 60px;
		height: 60px;
	}

	.lhs-cat-grid__icon .lhs-cat-icon {
		width: 36px;
		height: 36px;
	}

	.lhs-cat-grid__name {
		font-size: 14px;
	}
}

/* ---------- Thẻ bộ sưu tập trang chủ (container Elementor có class lhs-collection) ---------- */
.lhs-collection {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lhs-collection:hover {
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
	transform: translateY(-4px);
}

/*
 * Lớp phủ của thẻ (Elementor: gradient mờ 50%) không đủ tối trên ảnh sáng -> phủ đậm dần xuống đáy, nơi đặt chữ.
 * !important vì Elementor đặt background-image / opacity của ::before theo từng phần tử (post-8908.css).
 */
.lhs-collections > .lhs-collection::before {
	background-image: linear-gradient(180deg, rgba(8, 14, 32, 0) 25%, rgba(8, 14, 32, 0.6) 58%, rgba(8, 14, 32, 0.92) 100%) !important;
	opacity: 1 !important;
}

.lhs-collection .elementor-heading-title,
.lhs-collection .elementor-widget-text-editor p {
	text-shadow: 0 1px 8px rgba(8, 14, 32, 0.45);
}

/*
 * Elementor đặt mỗi thẻ rộng 33.333% và không cho co, cộng 2 khoảng cách 20px nên cả hàng tràn 40px khỏi khung
 * (thẻ thứ 3 lệch / bị cắt ở mép phải) -> cho thẻ co lại vừa khung. Mobile là slider, có rule riêng ở dưới.
 */
@media (min-width: 768px) {
	.lhs-collections > .lhs-collection {
		flex-shrink: 1 !important; /* Elementor: flex lấy từ biến riêng của từng thẻ. */
		min-width: 0;
	}
}

/* Mô tả luôn chiếm đúng 2 dòng (dư thì "…") để tiêu đề, mô tả và "Xem ngay" của các thẻ thẳng hàng nhau. */
.lhs-collection .elementor-widget-text-editor p {
	display: -webkit-box;
	min-height: 2lh;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Cột trái trang /store/ (Elementor) bám theo khi cuộn. */
@media (min-width: 1025px) {
	.lhs-cat-col .lhs-cat-nav {
		position: sticky;
		top: 24px;
	}
}

/* Trong sidebar Astra (khung boxed sẵn) – bỏ khung kép. */
#secondary .widget .lhs-cat-nav {
	border-radius: 8px;
}

/*
 * Màn hình nhỏ: hàng chip cuộn ngang, đặt trên danh sách sản phẩm.
 * - Sidebar Astra xếp dọc từ 921px trở xuống (và dùng column-reverse đẩy sidebar xuống cuối).
 * - Cột trong trang Elementor /store/ xếp dọc từ 767px trở xuống.
 */
@media (max-width: 921px) {
	.ast-left-sidebar #content > .ast-container:has(.lhs-cat-nav) {
		flex-direction: column;
	}

	#secondary:has(.lhs-cat-nav) {
		margin: var(--lhs-space-top) 0 0;
	}

	/* Bỏ khung trắng/padding widget của Astra quanh hàng chip; ẩn bộ lọc giá trên màn nhỏ. */
	#secondary .widget:has(.lhs-cat-nav) {
		padding: 0 !important;
		margin-bottom: 0 !important;
		background: none !important;
	}

	#secondary .widget:has(.wp-block-woocommerce-price-filter) {
		display: none;
	}
}

/* Trang lưu trữ sản phẩm (shop/danh mục) trên màn nhỏ: thu gọn khoảng cách của Astra. */
@media (max-width: 921px) {
	/* Hàng chip danh mục -> breadcrumb. */
	.ast-woo-shop-archive.ast-separate-container #content #primary {
		margin-top: 16px;
	}

	.woocommerce.ast-woo-shop-archive .woocommerce-breadcrumb {
		margin-bottom: 8px;
	}

	.ast-woo-shop-archive .woocommerce-products-header__title {
		margin-bottom: 12px;
	}

	.ast-woo-shop-archive .woocommerce-result-count {
		margin-top: 0;
		margin-bottom: 8px;
	}

	.ast-woo-shop-archive .woocommerce-ordering {
		margin-bottom: 16px;
	}
}

/* Widget chứa cột danh mục: bỏ khung boxed của Astra (cột đã có khung riêng). */
#secondary .widget:has(.lhs-cat-nav) {
	padding: 0 !important;
	background: none !important;
}

/* Trang lưu trữ sản phẩm trên desktop: thu gọn khoảng cách của Astra (separate container). */
@media (min-width: 922px) {
	.ast-woo-shop-archive #content > .ast-container:has(.lhs-cat-nav) > #secondary {
		margin-top: var(--lhs-space-top);
	}

	.ast-woo-shop-archive #content > .ast-container:has(.lhs-cat-nav) > #secondary {
		width: 26%;
		padding-right: 0;
	}

	.ast-woo-shop-archive #content > .ast-container:has(.lhs-cat-nav) > #primary {
		width: 74%;
	}

	.ast-woo-shop-archive.ast-separate-container #content .ast-woocommerce-container {
		padding-left: 40px;
	}

	/* Khối tư vấn rộng bằng lưới sản phẩm phía trên (container trang shop rộng 1300px). */
	.ast-woo-shop-archive .lhs-consult {
		max-width: 1340px;
		padding-right: 20px;
		padding-left: 20px;
	}

	.ast-woo-shop-archive .woocommerce-products-header__title {
		margin-bottom: 20px;
		font-size: 40px;
		line-height: 1.2;
	}

	.ast-woo-shop-archive .woocommerce-ordering {
		margin-bottom: 24px;
	}
}

/* Trang chi tiết sản phẩm. */
.single-product div.product .product_title {
	margin-bottom: 12px;
	font-size: 32px;
	line-height: 1.3;
}

/* Astra/WooCommerce: .woocommerce-js div.product .woocommerce-tabs (0,3,1) -> cần selector mạnh hơn. */
.woocommerce.single-product div.product .woocommerce-tabs {
	margin-bottom: var(--lhs-space-block);
}

/* Không có sản phẩm liên quan: tab là khối cuối, #primary đã có khoảng cách tới footer. */
.woocommerce.single-product div.product .woocommerce-tabs:last-child {
	margin-bottom: 0;
}

/*
 * Dãy ảnh nhỏ dưới ảnh sản phẩm: 1 hàng trượt ngang, 4 ảnh/khung (lhs-gallery-thumbs.js thêm khung .lhs-thumbs + mũi tên).
 * Astra xếp lưới bằng float + ".woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n)" (0,5,3)
 * -> cần selector mạnh hơn.
 */
.lhs-thumbs {
	position: relative;
}

.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - 36px) / 4);
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	scroll-snap-align: start;
}

.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
}

/* Mũi tên: !important để style nút chung của theme (padding, nền, hover) không ghi đè. */
.lhs-thumbs > .lhs-thumbs__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	min-width: 0 !important;
	height: 32px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: -16px 0 0 !important;
	line-height: 0 !important;
	color: var(--lhs-cat-color) !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.22) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lhs-thumbs > .lhs-thumbs__nav:hover,
.lhs-thumbs > .lhs-thumbs__nav:focus-visible {
	color: #fff !important;
	background: var(--lhs-cat-color) !important;
}

.lhs-thumbs > .lhs-thumbs__nav[hidden] {
	display: none;
}

.lhs-thumbs > .lhs-thumbs__nav--prev {
	left: 6px;
	transform: scaleX(-1);
}

.lhs-thumbs > .lhs-thumbs__nav--next {
	right: 6px;
}

.lhs-thumbs__nav svg {
	width: 16px;
	height: 16px;
}

/*
 * Desktop (ảnh | thông tin nằm cạnh nhau, Astra xếp bằng float): 2 cột cao bằng nhau.
 * - Ảnh lớn nằm trong khung cố định (tối thiểu vuông, object-fit: cover) thay vì cao theo từng ảnh
 *   -> đổi ảnh không làm trang nhảy; cột phải cao hơn thì khung ảnh cao theo (tối đa 3:4).
 * - Cột phải thấp hơn thì kéo cao bằng cột ảnh, nhóm cuối (SKU/danh mục + thanh toán) nằm sát đáy,
 *   thẳng hàng với dãy ảnh nhỏ.
 * Chiều rộng 2 cột vẫn do Astra đặt (50% / 46%).
 */
@media (min-width: 922px) {
	.woocommerce.single-product div.product {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
	}

	.woocommerce.single-product div.product > :not(.woocommerce-product-gallery):not(.summary) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.woocommerce.single-product div.product > div.woocommerce-product-gallery {
		display: flex;
		flex-direction: column;
		container-type: inline-size;
	}

	/* Khung ảnh lớn: .flex-viewport (nhiều ảnh, flexslider) hoặc chính wrapper (1 ảnh). */
	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .flex-viewport,
	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		position: relative;
		flex: 1 1 auto;
		max-height: 133.33cqw;
		overflow: hidden;
		border-radius: 8px;
	}

	/* flexslider (smoothHeight) + WooCommerce gán height inline theo ảnh đang xem. */
	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .flex-viewport {
		height: auto !important;
	}

	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .flex-viewport::before,
	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper::before {
		display: block;
		padding-top: 100%;
		content: "";
	}

	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .flex-viewport > .woocommerce-product-gallery__wrapper,
	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}

	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		width: 100%;
	}

	.woocommerce.single-product div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image {
		height: 100%;
	}

	.woocommerce.single-product div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
		display: block;
		height: 100%;
	}

	/* Chỉ ảnh gốc (a > img); ảnh phóng to khi rê chuột (.zoomImg) nằm ngoài thẻ a. */
	.woocommerce.single-product div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
		height: 100%;
		object-fit: cover;
	}

	.woocommerce.single-product div.product > div.woocommerce-product-gallery > .lhs-thumbs {
		flex: 0 0 auto;
	}

	.woocommerce.single-product div.product > div.summary {
		display: flex;
		flex-direction: column;
		margin-left: auto;
	}

	/* Trong flex margin không gộp: margin dưới của đoạn mô tả ngắn đã đủ, bỏ margin trên của khối kế tiếp. */
	.woocommerce.single-product div.product > div.summary > .woocommerce-product-details__short-description + * {
		margin-top: 0;
	}

	.woocommerce.single-product div.product > div.summary > .product_meta,
	.woocommerce.single-product div.product > div.summary:not(:has(> .product_meta)) > .ast-single-product-payments {
		margin-top: auto;
	}

	/* Phần tử cuối cột: bỏ margin dưới để đáy khung thanh toán thẳng với đáy dãy ảnh nhỏ. */
	.woocommerce.single-product div.product > div.summary > .ast-single-product-payments {
		margin-bottom: 0;
	}

	/* Khung reCAPTCHA của PayPal Payments (margin inline 20px) khi chưa có nội dung. */
	.woocommerce.single-product div.product > div.summary > #ppcp-recaptcha-v2-container:empty {
		display: none;
	}
}

/*
 * Danh mục phía trên tên sản phẩm: dạng chip (ẩn dấu phẩy ngăn cách bằng font-size:0).
 * Astra đặt display:block + margin-bottom:1em bằng ".woocommerce-js div.product div.summary …" (0,4,2)
 * nên cần selector mạnh hơn, nếu không các chip dính nhau và dính vào tên sản phẩm (1em của font-size 0 = 0).
 */
.woocommerce.single-product div.product div.summary .single-product-category {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 0;
}

.single-product .summary .single-product-category a[hidden] {
	display: none;
}

/* Chip thương hiệu: tông đỏ thương hiệu để phân biệt với danh mục. */
.single-product .summary .single-product-category a.is-brand {
	color: #c82830;
	background: #fdecee;
}

.single-product .summary .single-product-category a.is-brand:hover,
.single-product .summary .single-product-category a.is-brand:focus-visible {
	color: #fff;
	background: #c82830;
}

/* Chip "+N" gom phần danh mục tràn dòng (lhs-chips.js). */
.single-product .summary .lhs-chip-more {
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--lhs-cat-color);
	background: #fff;
	border: 1px dashed #b9c6e6;
	border-radius: 999px;
	cursor: pointer;
}

.single-product .summary .lhs-chip-more:hover,
.single-product .summary .lhs-chip-more:focus-visible {
	background: #e8eefb;
	border-style: solid;
}

.single-product .summary .single-product-category a {
	display: inline-block;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lhs-cat-color);
	text-decoration: none;
	background: #e8eefb;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.single-product .summary .single-product-category a:hover,
.single-product .summary .single-product-category a:focus-visible {
	color: #fff;
	background: var(--lhs-cat-color);
}

/* Danh mục / Thương hiệu trong product meta: màu link rõ ràng, gạch chân khi hover. */
.single-product .product_meta .posted_in a,
.single-product .product_meta .tagged_as a {
	font-weight: 500;
	color: var(--lhs-cat-accent);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.single-product .product_meta .posted_in a:hover,
.single-product .product_meta .tagged_as a:hover,
.single-product .product_meta .posted_in a:focus-visible {
	color: var(--lhs-cat-color);
	text-decoration-color: currentColor;
}

@media (max-width: 921px) {
	.single-product div.product .product_title {
		font-size: 24px;
	}
}

/* Hàng chip: ẩn thanh cuộn (chip bị cắt ở mép đã gợi ý vuốt ngang). */
.lhs-cat-nav__list {
	scrollbar-width: none;
}

.lhs-cat-nav__list::-webkit-scrollbar {
	display: none;
}

/* Shortcode trong block widget bị wpautop bọc <p>. */
.widget p:has(> .lhs-cat-nav) {
	margin: 0;
}

@media (max-width: 921px) {

	#secondary .lhs-cat-nav {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
	}

	#secondary .lhs-cat-nav__title {
		padding: 0 0 10px;
		font-size: 15px;
		border-bottom: 0;
	}

	/* Hàng chip tràn sát mép màn hình khi cuộn, chip đầu vẫn thẳng lề nội dung. */
	#secondary .lhs-cat-nav__list {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		margin: 0 calc(-1 * var(--lhs-gutter));
		padding: 0 var(--lhs-gutter) 6px;
		scroll-padding-left: var(--lhs-gutter);
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	#secondary .lhs-cat-nav__item + .lhs-cat-nav__item {
		border-top: 0;
	}

	#secondary .lhs-cat-nav__item {
		flex: 0 0 auto;
		margin-bottom: 0;
		scroll-snap-align: start;
	}

	#secondary .lhs-cat-nav__item > a {
		gap: 8px;
		padding: 6px 14px 6px 8px;
		font-size: 14px;
		white-space: nowrap;
		background: #fff;
		border: 1px solid var(--lhs-cat-border);
		border-radius: 999px;
	}

	#secondary .lhs-cat-nav__item.is-current > a {
		border-color: var(--lhs-cat-accent);
		box-shadow: none;
	}

	#secondary .lhs-cat-nav .lhs-cat-icon {
		width: 24px;
		height: 24px;
	}

	#secondary .lhs-cat-nav__count {
		display: none;
	}
}

@media (max-width: 767px) {
	.lhs-cat-nav {
		overflow: visible;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.lhs-cat-nav__title {
		padding: 0 0 10px;
		font-size: 15px;
		border-bottom: 0;
	}

	.lhs-cat-nav__list {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.lhs-cat-nav__item + .lhs-cat-nav__item {
		border-top: 0;
	}

	.lhs-cat-nav__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.lhs-cat-nav__item > a {
		gap: 8px;
		padding: 6px 14px 6px 8px;
		font-size: 14px;
		white-space: nowrap;
		background: #fff;
		border: 1px solid var(--lhs-cat-border);
		border-radius: 999px;
	}

	.lhs-cat-nav__item.is-current > a {
		border-color: var(--lhs-cat-accent);
		box-shadow: none;
	}

	.lhs-cat-nav .lhs-cat-icon {
		width: 24px;
		height: 24px;
	}

	.lhs-cat-nav__count {
		display: none;
	}
}

/* ---------- Hero trang chủ (container Elementor có class lhs-hero) ---------- */
@media (max-width: 767px) {
	/* Elementor không đổi hướng gradient overlay theo breakpoint: trên mobile phủ trắng từ trên xuống, ảnh nằm dưới. */
	.lhs-hero {
		background-position: center bottom !important;
		justify-content: flex-start !important;
	}

	.lhs-hero::before {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%, rgba(255, 255, 255, 0.15) 100%) !important;
		opacity: 1 !important;
	}
}

/* Ngắt dòng chủ động chỉ dùng trên desktop. */
@media (max-width: 1024px) {
	.lhs-br-desktop {
		display: none;
	}
}

/* ---------- Banner đầu trang lưu trữ sản phẩm (lhs-shop-layout.php) ---------- */
.lhs-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 64px 24px;
	overflow: hidden;
	text-align: center;
	background: #0b1736 var(--lhs-hero-image) center / cover no-repeat;
	border-radius: 0 0 40px 40px;
}

.lhs-page-hero::before {
	position: absolute;
	inset: 0;
	content: "";
	background: rgba(11, 23, 54, 0.55);
}

.lhs-page-hero__inner {
	position: relative;
	max-width: 760px;
}

/* Dòng nhỏ phía trên tiêu đề: icon danh mục + "Long Hải Seafood", 2 vạch mảnh hai bên. */
.lhs-page-hero__eyebrow {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 3px;
	color: #bcd4ff;
	text-transform: uppercase;
}

.lhs-page-hero__eyebrow::before,
.lhs-page-hero__eyebrow::after {
	flex: 0 0 32px;
	height: 1px;
	content: "";
	background: rgba(188, 212, 255, 0.6);
}

.lhs-page-hero__eyebrow .lhs-cat-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	color: inherit;
}

/*
 * Cùng dòng nhỏ đó cho banner của các trang dựng bằng Elementor (Giới thiệu, Liên hệ, ...): khối đầu trang có
 * widget tiêu đề H1. Chữ đặt bằng CSS nên không phải sửa từng trang; 2 vạch hai bên vẽ bằng background.
 * Trang chủ có dòng nhỏ riêng trong nội dung nên bỏ qua.
 */
body.page:not(.home) .elementor > .e-parent:first-child .elementor-widget-heading:has(h1.elementor-heading-title)::before {
	display: table;
	padding: 0 42px;
	margin: 0 auto 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 3px;
	color: #bcd4ff;
	text-transform: uppercase;
	content: "Long Hải Seafood";
	background:
		linear-gradient(rgba(188, 212, 255, 0.6), rgba(188, 212, 255, 0.6)) left center / 32px 1px no-repeat,
		linear-gradient(rgba(188, 212, 255, 0.6), rgba(188, 212, 255, 0.6)) right center / 32px 1px no-repeat;
}

/* Trang Giới thiệu (ID 10): tiêu đề đã là "Về Long Hải Seafood" -> không lặp lại tên. */
body.page.page-id-10:not(.home) .elementor > .e-parent:first-child .elementor-widget-heading:has(h1.elementor-heading-title)::before {
	content: "Giới thiệu";
}

.lhs-page-hero__title {
	margin: 0 0 12px;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.lhs-page-hero__subtitle {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	text-wrap: balance;
}

@media (max-width: 767px) {
	.lhs-page-hero {
		min-height: 220px;
		padding: 48px 20px;
		border-radius: 0 0 24px 24px;
	}

	.lhs-page-hero__eyebrow,
	body.page:not(.home) .elementor > .e-parent:first-child .elementor-widget-heading:has(h1.elementor-heading-title)::before {
		margin-bottom: 8px;
		font-size: 12px;
		letter-spacing: 2px;
	}

	.lhs-page-hero__title {
		font-size: 32px;
	}

	.lhs-page-hero__subtitle {
		font-size: 15px;
	}
}

/* ---------- Khối tư vấn [lhs_tu_van] ---------- */
.lhs-consult {
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 24px var(--lhs-space-section);
}

.lhs-consult__card {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 56px;
	overflow: hidden;
	color: #fff;
	/* Ảnh nền tối + lớp phủ (đậm hơn ở bên trái, nơi chữ đè lên hình minh hoạ) để chữ trắng luôn rõ. */
	background:
		linear-gradient(90deg, rgba(12, 16, 28, 0.86) 0%, rgba(12, 16, 28, 0.62) 55%, rgba(12, 16, 28, 0.42) 100%),
		#16181d url("consult-bg.jpg") center / cover no-repeat;
	border-radius: 24px;
}

.lhs-consult__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #93c5fd;
	text-transform: uppercase;
}

/* .lhs-consult đứng trước để thắng ".woocommerce-js h2 { margin-bottom: .7em }" của Astra. */
.lhs-consult .lhs-consult__title {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.lhs-consult__text {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.85);
}

.lhs-consult__text strong {
	color: #fff;
}

.lhs-consult__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lhs-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lhs-btn svg {
	width: 16px;
	height: 16px;
}

.lhs-btn--white {
	color: #1e3a8a;
	background: #fff;
}

.lhs-btn--white:hover,
.lhs-btn--white:focus-visible {
	color: #1e3a8a;
	background: #e8eefb;
}

.lhs-btn--outline-white {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}

.lhs-btn--outline-white:hover,
.lhs-btn--outline-white:focus-visible {
	color: #1e3a8a;
	background: #fff;
	border-color: #fff;
}

.lhs-consult__list {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 28px;
	list-style: none;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
}

.lhs-consult__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-weight: 500;
	color: #fff;
}

.lhs-consult__check {
	display: flex;
	flex: 0 0 28px;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #1e3a8a;
	background: #93c5fd;
	border-radius: 50%;
}

.lhs-consult__check svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 921px) {
	.lhs-consult {
		padding-right: var(--lhs-gutter);
		padding-left: var(--lhs-gutter);
	}

	/* Thẻ dọc: giữa ảnh chỉ là nền bảng trống -> lấy phần bên phải (có hình minh hoạ), phủ tối đều vì chữ nằm kín thẻ. */
	.lhs-consult__card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 36px 24px;
		background:
			linear-gradient(rgba(12, 16, 28, 0.74), rgba(12, 16, 28, 0.74)),
			#16181d url("consult-bg.jpg") right center / cover no-repeat;
	}

	.lhs-consult .lhs-consult__title {
		font-size: 26px;
	}
}

/* Trang chủ – 3 cam kết: mô tả 2 dòng chia đều chữ, không để lẻ 1 từ ở dòng dưới. */
.lhs-features .elementor-icon-box-description {
	text-wrap: balance;
}

/* Trang chủ – 3 cam kết (container Elementor có class lhs-features): mobile 1 hàng 3 cột, ẩn mô tả. */
@media (max-width: 767px) {
	.lhs-features .elementor-icon-box-description {
		display: none;
	}

	.lhs-features .elementor-icon-box-title {
		margin-bottom: 0;
		line-height: 1.3;
	}
}

@media (max-width: 767px) {
	/* 3 ô chia đều phần còn lại sau khoảng cách (width 33.33% của Elementor chưa trừ gap). */
	.lhs-features > .elementor-element,
	.lhs-features > .e-con-inner > .elementor-element {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		--container-widget-width: auto;
	}
}

/* Hero trang chủ – mobile gọn: tiêu đề 2 dòng cân đối, 2 nút 1 hàng, chừa chỗ cho ảnh phía dưới. */
@media (max-width: 767px) {
	/* Elementor container dùng biến --padding-* / --min-height. */
	.lhs-hero {
		--min-height: 0px !important;
		--padding-top: 32px !important;
		--padding-bottom: 190px !important;
		background-size: 210% auto !important;
		background-position: 100% 100% !important;
	}

	.lhs-hero::before {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 52%, rgba(255, 255, 255, 0) 78%) !important;
	}

	.lhs-hero h1.elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.25 !important;
		text-wrap: balance;
	}

	.lhs-hero .elementor-widget-text-editor {
		font-size: 15px !important;
		line-height: 1.6 !important;
		text-wrap: pretty;
	}

	.lhs-hero .e-con.e-child:has(.elementor-widget-button) {
		flex-wrap: nowrap !important;
		gap: 10px !important;
	}

	.lhs-hero .elementor-button {
		padding: 12px 18px !important;
		font-size: 14px !important;
		white-space: nowrap;
	}
}

/* Tiêu đề section + nút "Xem tất cả" (class lhs-section-head): mobile cùng 1 hàng. */
@media (max-width: 767px) {
	.lhs-section-head > .e-con {
		width: auto !important;
		min-width: 0;
	}

	.lhs-section-head > .e-con:first-child {
		flex: 1 1 auto !important;
	}

	.lhs-section-head .elementor-button {
		padding: 9px 16px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}

	.lhs-section-head .e-con.e-child:has(.elementor-widget-button) {
		margin-top: 0 !important;
	}
}

@media (max-width: 767px) {
	.lhs-section-head h2.elementor-heading-title {
		margin-bottom: 0;
		font-size: 22px !important;
	}
}

/* ---------- Trang chủ: bộ sưu tập thành slider trên mobile (collections-slider.js) ---------- */
.lhs-slider-dots {
	display: none;
}

@media (max-width: 767px) {
	.lhs-collections {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 12px !important;
		--overflow: auto;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lhs-collections::-webkit-scrollbar {
		display: none;
	}

	.lhs-collections > .lhs-collection {
		flex: 0 0 85% !important;
		width: 85% !important;
		min-height: 300px !important;
		--min-height: 300px;
		scroll-snap-align: start;
	}

	.lhs-collection:hover {
		box-shadow: none;
		transform: none;
	}

	.lhs-slider-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
	}

	.lhs-slider-dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		background: #c7d2e8;
		border: 0;
		border-radius: 999px;
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.lhs-slider-dots button.is-active {
		width: 24px;
		background: var(--lhs-cat-color);
	}
}

.lhs-slider-dots[hidden] {
	display: none !important;
}

/* Chấm slider: tránh style nút chung của theme (padding, min-width, nền hover) ghi đè. */
.lhs-slider-dots > button {
	box-sizing: content-box;
	width: 8px !important;
	min-width: 0 !important;
	height: 8px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
	background: #c7d2e8 !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
}

.lhs-slider-dots > button.is-active {
	width: 24px !important;
	background: var(--lhs-cat-color) !important;
}

/* An toàn: không để phần tử nào kéo cả trang cuộn ngang (clip không tạo scroll container nên sticky vẫn chạy). */
html,
body {
	overflow-x: clip;
}

/* Hero trang chủ – mobile tối giản: bỏ mô tả, tiêu đề không đậm. */
@media (max-width: 767px) {
	.lhs-hero .elementor-widget-text-editor {
		display: none !important;
	}

	.lhs-hero h1.elementor-heading-title {
		font-size: 26px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
	}

	.lhs-hero {
		--padding-bottom: 150px !important;
	}
}

/* 3 cam kết – mobile: chữ to hơn chút, không đậm. */
@media (max-width: 767px) {
	.lhs-features .elementor-icon-box-title,
	.lhs-features .elementor-icon-box-title a,
	.lhs-features .elementor-icon-box-title span {
		font-size: 14px !important;
		font-weight: 400 !important;
	}
}

/* Ảnh thẻ sản phẩm: luôn vuông, vừa khung (ảnh nguồn 600px không crop). */
ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

ul.products li.product {
	min-width: 0;
}

/* Thẻ sản phẩm trong lưới: danh mục 1 dòng (nhãn), tên tối đa 2 dòng (dư -> "…"). */
.astra-shop-summary-wrap .ast-woo-product-category {
	display: inline-block !important;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin: 4px 0 8px;
	padding: 3px 10px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #1e3a8a;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
	background: #e8eefb;
	border-radius: 999px;
}

.astra-shop-summary-wrap .woocommerce-loop-product__title {
	display: -webkit-box;
	min-height: 2.9em;
	overflow: hidden;
	line-height: 1.45 !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---------- Footer (HFE, các cột có class lhs-f-*) – mobile gọn ---------- */
@media (max-width: 767px) {
	.lhs-footer > .elementor-container {
		flex-wrap: wrap;
		row-gap: 28px;
	}

	.lhs-footer .elementor-column > .elementor-widget-wrap {
		padding: 0 !important;
	}

	/* Logo + mạng xã hội: lên đầu, logo ở giữa, hàng nút nằm dưới (giống desktop). */
	.lhs-f-brand {
		order: -1;
		padding-bottom: 20px;
		border-bottom: 1px solid #e6eaf2;
	}

	.lhs-f-brand > .elementor-widget-wrap {
		flex-direction: column;
		flex-wrap: nowrap !important;
		gap: 16px;
		align-items: center !important;
		justify-content: center;
	}

	.lhs-f-brand .elementor-widget {
		width: auto !important;
		margin: 0 !important;
	}

	.lhs-f-brand .elementor-widget-image img {
		width: 130px !important;
		max-width: 130px !important;
	}

	/* 2 cột link cạnh nhau. */
	.lhs-f-links {
		width: 50% !important;
	}

	.lhs-footer .elementor-heading-title {
		margin-bottom: 0;
		font-size: 16px !important;
		line-height: 1.4 !important;
	}

	.lhs-footer .elementor-widget-heading {
		margin-bottom: 10px !important;
	}

	.lhs-footer .elementor-widget-text-editor {
		margin-bottom: 8px !important;
		font-size: 14px;
	}

	.lhs-footer .elementor-icon-list-items .elementor-icon-list-item {
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}

	.lhs-footer .elementor-icon-list-text {
		font-size: 14px !important;
	}
}

@media (max-width: 767px) {
	.lhs-footer .lhs-f-brand {
		order: -1 !important;
		min-height: 0 !important;
	}

	.lhs-f-brand > .elementor-widget-wrap {
		min-height: 0 !important;
		height: auto !important;
		align-content: center !important;
	}
}

@media (max-width: 767px) {
	/* Margin riêng của các widget trong cột logo (đặt trong Elementor) – bỏ trên mobile. */
	.lhs-f-brand > .elementor-widget-wrap,
	.lhs-f-brand .elementor-widget-container {
		margin: 0 !important;
	}
}

@media (max-width: 767px) {
	/* Margin cột đặt trong Elementor (phải 40px, dưới 56px) – bỏ trên mobile, khoảng cách dùng row-gap. */
	.lhs-footer .elementor-column > .elementor-widget-wrap {
		margin: 0 !important;
	}
}

/* Footer: icon to hơn (mạng xã hội + danh sách liên hệ). */
.lhs-footer .elementor-social-icon {
	--icon-size: 20px;
	--icon-padding: 0.55em;
}

.lhs-footer .elementor-icon-list-icon {
	min-width: 22px;
}

.lhs-footer .elementor-icon-list-icon i {
	font-size: 18px !important;
}

.lhs-footer .elementor-icon-list-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.lhs-footer .elementor-icon-list-item {
	align-items: center !important;
}

/* Logo footer to hơn (mobile 130px ở rule trong media query phía trên). */
@media (min-width: 768px) {
	.lhs-f-brand .elementor-widget-image img {
		width: 180px !important;
		max-width: 100% !important;
	}
}

/* Section head: bỏ margin dưới của tiêu đề để nút "Xem tất cả" thẳng hàng với tiêu đề. */
.lhs-section-head {
	align-items: flex-end !important;
}

.lhs-section-head .elementor-widget-heading:last-child,
.lhs-section-head .elementor-widget-heading:last-child > .elementor-widget-container,
.lhs-section-head .elementor-widget-heading:last-child .elementor-heading-title {
	margin-bottom: 0 !important;
	--kit-widget-spacing: 0px;
}

.lhs-section-head .e-con.e-child:has(.elementor-widget-button) .elementor-widget-button {
	margin: 0 !important;
}

/* ---------- Menu mobile: danh mục dạng lưới 2 cột, icon cạnh chữ ---------- */
#ast-hf-menu-1-mobile .sub-menu:has(> .lhs-cat-menu-item) {
	display: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: auto !important;
	margin: 4px 0 8px;
	padding: 0 20px 4px !important;
	border: 0 !important;
	box-shadow: none !important;
}

#ast-hf-menu-1-mobile .menu-item.ast-submenu-expanded > .sub-menu:has(> .lhs-cat-menu-item),
#ast-hf-menu-1-mobile .menu-item.ast-submenu-expanded > .sub-menu:has(> .lhs-cat-menu-item)[style*="block"] {
	display: grid !important;
}

#ast-hf-menu-1-mobile .lhs-cat-menu-item {
	margin: 0;
	border: 0 !important;
}

#ast-hf-menu-1-mobile .lhs-cat-menu-item > .menu-link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 10px 12px !important;
	font-size: 14px;
	line-height: 1.3;
	color: #2b2f38;
	background: #f5f8fd;
	border: 1px solid #e6eaf2 !important;
	border-radius: 10px;
}

#ast-hf-menu-1-mobile .lhs-cat-menu-item > .menu-link:hover,
#ast-hf-menu-1-mobile .lhs-cat-menu-item.current-menu-item > .menu-link {
	color: #1e3a8a;
	background: #e8eefb;
	border-color: #c7d2e8 !important;
}

#ast-hf-menu-1-mobile .lhs-cat-menu-item .lhs-cat-icon {
	flex: 0 0 auto;
	width: 24px !important;
	height: 24px !important;
}

#ast-hf-menu-1-mobile .lhs-cat-menu-item > .menu-link > .ast-icon.icon-arrow {
	display: none !important;
}

/* Nút mở submenu: bỏ viền chấm khi focus bằng chạm. */
#ast-hf-menu-1-mobile .ast-menu-toggle {
	border: 0 !important;
	outline: none;
	box-shadow: none !important;
}

#ast-hf-menu-1-mobile .ast-menu-toggle:focus-visible {
	outline: 2px solid #1e3a8a;
	outline-offset: 2px;
}

/* ---------- Thanh "Hiển thị ... kết quả" + "Sắp xếp": 1 hàng, select gọn ---------- */
.ast-woo-shop-archive .woocommerce-result-count {
	float: left !important;
	width: auto !important;
	margin: 0 12px 20px 0 !important;
	padding: 0 !important;
	font-size: 14px;
	line-height: 40px !important;
	color: #6b7280;
}

.ast-woo-shop-archive .woocommerce-ordering {
	float: right !important;
	width: auto !important;
	margin: 0 0 20px !important;
}

.ast-woo-shop-archive .woocommerce-ordering select.orderby {
	width: auto;
	min-width: 140px;
	max-width: 190px;
	height: 40px;
	padding: 0 34px 0 14px;
	font-size: 14px;
	line-height: 38px;
	color: #2b2f38;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231e3a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
	border: 1px solid #e6eaf2;
	border-radius: 999px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.ast-woo-shop-archive .woocommerce-ordering select.orderby:focus {
	border-color: #1e3a8a;
	outline: none;
}

.ast-woo-shop-archive ul.products {
	clear: both;
}

@media (max-width: 767px) {
	.ast-woo-shop-archive .woocommerce-result-count {
		margin-bottom: 16px !important;
		font-size: 13px;
		line-height: 34px !important;
	}

	.ast-woo-shop-archive .woocommerce-ordering {
		margin-bottom: 16px !important;
	}

	.ast-woo-shop-archive .woocommerce-ordering select.orderby {
		min-width: 0;
		max-width: 160px;
		height: 34px;
		padding: 0 28px 0 12px;
		font-size: 13px;
		line-height: 32px;
		background-position: right 10px center;
		background-size: 12px;
	}
}

/* =====================================================================
   Tin tức (lhs-blog.php): lọc chuyên mục, thẻ bài viết, chi tiết bài viết
   ===================================================================== */
.blog .ast-archive-description,
.category .ast-archive-description,
.tag .ast-archive-description {
	display: none;
}

.lhs-blog-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 1248px;
	margin: var(--lhs-space-top) auto 0;
	padding: 0 24px;
}

.lhs-blog-filter a {
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #2b2f38;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lhs-blog-filter a:hover {
	color: #1e3a8a;
	border-color: #1e3a8a;
}

.lhs-blog-filter a.is-current {
	color: #fff;
	background: #1e3a8a;
	border-color: #1e3a8a;
}

/*
 * Danh sách bài viết: lưới thẻ. #primary trong selector để thắng margin âm (-1em) của Astra
 * (.ast-separate-container.ast-desktop .ast-blog-layout-4-grid .ast-row) – lưới thẳng lề với banner/khối tư vấn.
 */
.blog.ast-separate-container #primary .ast-row,
.category.ast-separate-container #primary .ast-row,
.tag.ast-separate-container #primary .ast-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.blog .ast-row > article.ast-article-post,
.category .ast-row > article.ast-article-post,
.tag .ast-row > article.ast-article-post {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.blog .ast-article-post .ast-article-inner,
.category .ast-article-post .ast-article-inner,
.tag .ast-article-post .ast-article-inner {
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 16px;
	box-shadow: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog .ast-article-post .ast-article-inner:hover,
.category .ast-article-post .ast-article-inner:hover,
.tag .ast-article-post .ast-article-inner:hover {
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	transform: translateY(-4px);
}

.blog .ast-article-post .post-content,
.category .ast-article-post .post-content,
.tag .ast-article-post .post-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0 0 20px !important;
}

.blog .ast-article-post .ast-blog-featured-section,
.category .ast-article-post .ast-blog-featured-section,
.tag .ast-article-post .ast-blog-featured-section {
	margin: 0 0 16px !important;
}

.blog .ast-article-post .post-thumb img,
.category .ast-article-post .post-thumb img,
.tag .ast-article-post .post-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

.blog .ast-article-post .entry-header,
.blog .ast-article-post .entry-title,
.blog .ast-article-post .ast-excerpt-container,
.blog .ast-article-post .read-more,
.category .ast-article-post .entry-header,
.category .ast-article-post .entry-title,
.category .ast-article-post .ast-excerpt-container,
.category .ast-article-post .read-more,
.tag .ast-article-post .entry-header,
.tag .ast-article-post .entry-title,
.tag .ast-article-post .ast-excerpt-container,
.tag .ast-article-post .read-more {
	margin: 0 0 10px !important;
	padding: 0 20px !important;
}

.blog .ast-article-post .entry-meta,
.category .ast-article-post .entry-meta,
.tag .ast-article-post .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0;
	color: #6b7280;
}

.blog .ast-article-post .entry-meta > *,
.category .ast-article-post .entry-meta > *,
.tag .ast-article-post .entry-meta > * {
	font-size: 13px;
}

.blog .ast-article-post .cat-links a,
.category .ast-article-post .cat-links a,
.tag .ast-article-post .cat-links a {
	display: inline-block;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #1e3a8a;
	text-decoration: none;
	background: #e8eefb;
	border-radius: 999px;
}

.blog .ast-article-post .entry-title,
.category .ast-article-post .entry-title,
.tag .ast-article-post .entry-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 19px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.blog .ast-article-post .entry-title a,
.category .ast-article-post .entry-title a,
.tag .ast-article-post .entry-title a {
	color: #2b2f38;
	text-decoration: none;
}

.blog .ast-article-post .entry-title a:hover,
.category .ast-article-post .entry-title a:hover,
.tag .ast-article-post .entry-title a:hover {
	color: #1e3a8a;
}

.blog .ast-article-post .ast-excerpt-container,
.category .ast-article-post .ast-excerpt-container,
.tag .ast-article-post .ast-excerpt-container {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	color: #4b4f58;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.blog .ast-article-post .ast-excerpt-container p,
.category .ast-article-post .ast-excerpt-container p,
.tag .ast-article-post .ast-excerpt-container p {
	margin: 0;
}

.blog .ast-article-post .read-more,
.category .ast-article-post .read-more,
.tag .ast-article-post .read-more {
	margin-top: auto !important;
	margin-bottom: 0 !important; /* đáy thẻ = padding-bottom 20px của .post-content, bằng lề 2 bên */
}

.blog .ast-article-post .read-more a,
.category .ast-article-post .read-more a,
.tag .ast-article-post .read-more a {
	padding: 0 !important;
	font-size: 14px;
	font-weight: 600;
	color: #1e3a8a !important;
	text-decoration: none;
	background: none !important;
	border: 0 !important;
}

.ast-pagination {
	grid-column: 1 / -1;
	margin-top: 16px;
	text-align: center;
}

@media (max-width: 921px) {
	.blog.ast-separate-container #primary .ast-row,
	.category.ast-separate-container #primary .ast-row,
	.tag.ast-separate-container #primary .ast-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.lhs-blog-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 0 var(--lhs-gutter);
		scroll-padding-left: var(--lhs-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.lhs-blog-filter::-webkit-scrollbar {
		display: none;
	}

	.lhs-blog-filter a {
		flex: 0 0 auto;
		padding: 6px 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	.blog.ast-separate-container #primary .ast-row,
	.category.ast-separate-container #primary .ast-row,
	.tag.ast-separate-container #primary .ast-row {
		grid-template-columns: 1fr;
	}

	.blog .ast-article-post .entry-title,
	.category .ast-article-post .entry-title,
	.tag .ast-article-post .entry-title {
		font-size: 17px !important;
	}
}

/* ---------- Chi tiết bài viết ---------- */
/* Bài viết -> đường kẻ -> "Bài viết liên quan": cách đều 2 phía đường kẻ. */
.single-post.ast-separate-container #content #primary {
	margin-bottom: var(--lhs-space-block);
}

.single-post.ast-separate-container .ast-article-single {
	padding: 0 !important;
	background: none !important;
}

.single-post .entry-header .post-thumb img,
.single-post .ast-single-post-featured-section img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px;
}

.single-post .entry-title {
	font-size: 36px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	color: #2b2f38;
}

.single-post .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0;
	color: #6b7280;
}

.single-post .entry-meta > * {
	font-size: 14px;
}

.single-post .entry-meta .cat-links a,
.single-post .entry-meta .ast-terms-link a {
	display: inline-block;
	padding: 3px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #1e3a8a;
	text-decoration: none;
	background: #e8eefb;
	border-radius: 999px;
}

.single-post .entry-content {
	font-size: 17px;
	line-height: 1.8;
	color: #3a3f4a;
}

.single-post .entry-content h2 {
	margin: 1.6em 0 0.6em;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.35;
	color: #1e3a8a;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
	margin: 0 0 1.2em 1.4em;
}

.single-post .entry-content li {
	margin-bottom: 0.4em;
}

/* Ẩn khối tác giả / điều hướng bài trước-sau mặc định cho gọn. */
.single-post .post-navigation,
.single-post .ast-single-author-box {
	display: none;
}

/* Rộng bằng cột bài viết (container 820px, lề 20px). */
.lhs-related {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px var(--lhs-space-section);
}

/* .lhs-related đứng trước để thắng ".woocommerce-js h2 { margin-bottom: .7em }" của Astra. */
.lhs-related .lhs-related__title {
	margin: 0 0 20px;
	padding-top: var(--lhs-space-block);
	border-top: 1px solid #e6eaf2;
	font-size: 26px;
	font-weight: 600;
	color: #2b2f38;
}

.lhs-related__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 32px) / 3);
	gap: 16px;
	padding-bottom: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.lhs-related__grid::-webkit-scrollbar {
	display: none;
}

.lhs-related__grid > .lhs-post-card {
	scroll-snap-align: start;
}

.lhs-related__grid > .lhs-post-card:hover {
	transform: none;
}

/* Chấm điều hướng slider bài liên quan (hiện ở mọi kích thước). */
.lhs-related .lhs-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.lhs-related .lhs-slider-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	background: #c7d2e8;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.lhs-related .lhs-slider-dots button.is-active {
	width: 24px;
	background: #1e3a8a;
}

@media (max-width: 921px) {
	.lhs-related__grid {
		grid-auto-columns: calc((100% - 16px) / 2);
	}
}

.lhs-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lhs-post-card:hover {
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	transform: translateY(-4px);
}

.lhs-post-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.lhs-post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 20px 20px;
}

.lhs-post-card__cat {
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #1e3a8a;
	background: #e8eefb;
	border-radius: 999px;
}

.lhs-post-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #2b2f38;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.lhs-post-card__date {
	font-size: 13px;
	color: #6b7280;
}

@media (max-width: 767px) {
	.single-post .entry-title {
		font-size: 26px !important;
	}

	.single-post .entry-content {
		font-size: 16px;
	}

	.single-post .entry-content h2 {
		font-size: 20px;
	}

	.single-post .entry-header .post-thumb img,
	.single-post .ast-single-post-featured-section img {
		border-radius: 14px;
	}

	.lhs-related .lhs-related__title {
		font-size: 22px;
	}

	.lhs-related__grid {
		grid-auto-columns: 80%;
		gap: 12px;
	}
}

.blog .ast-article-post .ast-article-inner,
.category .ast-article-post .ast-article-inner,
.tag .ast-article-post .ast-article-inner {
	padding: 0 !important;
}

/* =====================================================================
   Khoảng cách chung cho các trang dùng layout "separate container" của Astra
   (shop, danh mục, sản phẩm, tin tức, bài viết, giỏ hàng, tài khoản, tìm kiếm, 404).
   Nền trang và nền khối đều trắng nên padding khung của Astra (tới 5.34em × 6.67em)
   chỉ tạo khoảng trống thừa và làm nội dung lệch lề so với header / banner / footer.
   ===================================================================== */
.ast-separate-container #content #primary {
	margin-top: var(--lhs-space-top);
	margin-bottom: var(--lhs-space-section);
	padding: 0;
}

.ast-separate-container #content .ast-article-single,
.ast-separate-container #content .ast-woocommerce-container,
.ast-separate-container #content .ast-404-layout-1 {
	padding: 0;
}

/* Màn nhỏ: lề 2 bên 20px, thẳng với logo / nút menu ở header và các section Elementor. */
@media (max-width: 921px) {
	.ast-separate-container #content > .ast-container {
		padding-right: var(--lhs-gutter);
		padding-left: var(--lhs-gutter);
	}

	/* Kết quả tìm kiếm (thẻ bài của Astra): bỏ lề lồng nhau. */
	.search .ast-row > .ast-article-post {
		padding-right: 0;
		padding-left: 0;
	}

	.search .ast-article-post .ast-article-inner {
		padding: 0;
	}
}

/*
 * Lưới sản phẩm (shop, sản phẩm liên quan, shortcode trang chủ): cách hàng bằng row-gap thay cho
 * margin-bottom của từng thẻ, để hàng cuối không dư ~56px bên dưới (làm lệch khoảng cách tới khối kế tiếp).
 */
body.woocommerce-js ul.products {
	row-gap: 40px;
	margin-bottom: 0;
}

body.woocommerce-js ul.products li.product {
	margin-bottom: 0;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 48px;
}

@media (max-width: 544px) {
	body.woocommerce-js ul.products {
		gap: 28px 16px;
	}

	.woocommerce nav.woocommerce-pagination {
		margin-top: 40px;
	}
}

/* Cột danh mục: Astra thêm margin-bottom .25em cho mọi <li> trong sidebar -> hở giữa nền hover và đường kẻ. */
#secondary .lhs-cat-nav__item {
	margin-bottom: 0;
}

/* ---------- Footer ---------- */
/* 1025–1247px: section footer không có lề ngang nên nội dung chạm mép màn hình. */
@media (min-width: 1025px) {
	#colophon .elementor-top-section {
		padding-right: 24px !important;
		padding-left: 24px !important;
	}
}

/* Thanh bản quyền: Elementor đặt 40px mọi phía trên tablet/mobile (to hơn cả desktop 30px). */
@media (max-width: 1024px) {
	#colophon .elementor-top-section:not(.lhs-footer) {
		padding: 24px 32px !important;
	}
}

@media (max-width: 767px) {
	#colophon .elementor-top-section:not(.lhs-footer) {
		padding: 20px var(--lhs-gutter) !important;
	}
}

/* =====================================================================
   Thẻ sản phẩm trong lưới (shop, danh mục, sản phẩm tương tự, trang chủ): khung bo góc
   giống thẻ bài viết / ô danh mục, phần chữ có lề bên trong.
   ===================================================================== */
body.woocommerce-js ul.products li.product {
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6eaf2;
	border-radius: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.woocommerce-js ul.products li.product:hover {
	border-color: transparent;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	transform: translateY(-4px);
}

/* Ảnh sát mép khung; khoảng cách ảnh -> chữ do padding của phần chữ đảm nhận. */
body.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap,
body.woocommerce-js ul.products li.product .astra-shop-thumbnail-wrap img {
	margin-bottom: 0;
}

/* Trên 12 + 4 (margin nhãn danh mục) = dưới 8 + 8 (margin tên/giá) = lề 2 bên 16px. */
body.woocommerce-js ul.products li.product .astra-shop-summary-wrap {
	padding: 12px 16px 8px;
}

@media (max-width: 767px) {
	body.woocommerce-js ul.products li.product {
		border-radius: 12px;
	}

	body.woocommerce-js ul.products li.product:hover {
		border-color: #e6eaf2;
		box-shadow: none;
		transform: none;
	}

	body.woocommerce-js ul.products li.product .astra-shop-summary-wrap {
		padding: 8px 12px 4px;
	}
}

/* =====================================================================
   Nhãn sản phẩm (lhs-product-badges.php): Hot / Giảm giá / Best Seller / Mới
   ===================================================================== */
.lhs-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.lhs-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px 5px 8px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
	color: #fff;
	white-space: nowrap;
	border-radius: 999px;
}

.lhs-badge__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transform-origin: 50% 80%;
}

/* Vệt sáng lướt qua nhãn. */
.lhs-badge::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	content: "";
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: lhs-badge-shine 3.6s ease-in-out infinite;
}

.lhs-badge--hot {
	background: linear-gradient(135deg, #ff8a1f 0%, #f43f3f 55%, #d81b60 100%);
	box-shadow: 0 4px 12px rgba(244, 63, 63, 0.4);
}

.lhs-badge--hot .lhs-badge__icon {
	color: #ffe27a;
	animation: lhs-badge-flame 0.9s ease-in-out infinite alternate;
}

.lhs-badge--sale {
	color: #7a1d00;
	background: linear-gradient(135deg, #ffe45c 0%, #ffb02e 100%);
	box-shadow: 0 4px 12px rgba(255, 176, 46, 0.45);
}

.lhs-badge--sale .lhs-badge__icon {
	color: #d92d20;
	transform-origin: 20% 20%;
	animation: lhs-badge-swing 1.8s ease-in-out infinite;
}

.lhs-badge--best {
	color: #ffe9a8;
	background: linear-gradient(135deg, #24459c 0%, #1b2a5e 100%);
	box-shadow: 0 4px 12px rgba(27, 42, 94, 0.4);
}

.lhs-badge--best .lhs-badge__icon {
	color: #ffc93c;
	animation: lhs-badge-bounce 1.6s ease-in-out infinite;
}

.lhs-badge--new {
	background: linear-gradient(135deg, #34d399 0%, #059669 100%);
	box-shadow: 0 4px 12px rgba(5, 150, 105, 0.38);
}

.lhs-badge--new .lhs-badge__icon {
	color: #eafff5;
	transform-origin: 50% 50%;
	animation: lhs-badge-twinkle 1.8s ease-in-out infinite;
}

/* Nhãn 2, 3 lệch nhịp để không nháy cùng lúc. */
.lhs-badge:nth-child(2)::after {
	animation-delay: 0.6s;
}

.lhs-badge:nth-child(3)::after {
	animation-delay: 1.2s;
}

/* Trang chi tiết: góc trên trái ảnh, to hơn một chút. */
.lhs-badges--single {
	top: 16px;
	left: 16px;
	z-index: 9;
	gap: 8px;
}

.lhs-badges--single .lhs-badge {
	gap: 6px;
	padding: 7px 14px 7px 10px;
	font-size: 13px;
}

.lhs-badges--single .lhs-badge__icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 767px) {
	.lhs-badges--loop {
		top: 8px;
		left: 8px;
		gap: 4px;
	}

	.lhs-badges--loop .lhs-badge {
		gap: 4px;
		padding: 4px 9px 4px 6px;
		font-size: 11px;
	}

	.lhs-badges--loop .lhs-badge__icon {
		width: 12px;
		height: 12px;
	}

	.lhs-badges--single {
		top: 12px;
		left: 12px;
	}
}

@keyframes lhs-badge-shine {
	0%,
	55% {
		left: -60%;
	}

	85%,
	100% {
		left: 130%;
	}
}

@keyframes lhs-badge-flame {
	from {
		transform: scale(1) rotate(-4deg);
	}

	to {
		transform: scale(1.18) rotate(4deg);
	}
}

@keyframes lhs-badge-swing {
	0%,
	100% {
		transform: rotate(0);
	}

	25% {
		transform: rotate(-14deg);
	}

	75% {
		transform: rotate(10deg);
	}
}

@keyframes lhs-badge-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-2px);
	}
}

@keyframes lhs-badge-twinkle {
	0%,
	100% {
		opacity: 1;
		transform: scale(1) rotate(0);
	}

	50% {
		opacity: 0.7;
		transform: scale(0.78) rotate(45deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhs-badge::after,
	.lhs-badge__icon {
		animation: none;
	}
}

/* =====================================================================
   Cỡ chữ: tiêu đề / nhãn form mặc định của Astra + WooCommerce quá to so với tên sản phẩm (32px).
   ===================================================================== */
/* "Sản phẩm tương tự" (h2 mặc định 40px) – bằng "Bài viết liên quan". */
.single-product .related.products > h2,
.single-product .up-sells > h2 {
	margin-bottom: 20px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	color: #2b2f38;
}

/* Form đánh giá: tiêu đề 21px -> 17px, nhãn ô nhập 19px -> 15px. */
.single-product #reviews .comment-reply-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #2b2f38;
}

.single-product #reviews #review_form label {
	font-size: 15px;
	font-weight: 500;
	color: #2b2f38;
}

.single-product #reviews #review_form .comment-form-cookies-consent label {
	font-size: 14px;
	font-weight: 400;
	color: #5b6170;
}

/* Tiêu đề phụ trong trang giỏ hàng / tài khoản (h2 40px, to hơn cả tiêu đề trang 30px). */
.woocommerce-cart .entry-content h2,
.woocommerce-account .entry-content h2 {
	font-size: 24px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	.single-product .related.products > h2,
	.single-product .up-sells > h2 {
		margin-bottom: 16px;
		font-size: 22px;
	}

	.woocommerce-cart .entry-content h2,
	.woocommerce-account .entry-content h2 {
		font-size: 20px;
	}
}

/* =====================================================================
   Icon trong ô Icon Box của Elementor (3 cam kết trang chủ, Giới thiệu, Liên hệ) – cùng bộ với icon danh mục.
   Icon nét viền cần to hơn icon đặc cũ: 1.4em + margin âm để vòng tròn giữ nguyên kích thước.
   ===================================================================== */
.elementor-icon .lhs-feature-icon {
	width: 1.4em;
	height: 1.4em;
	margin: -0.2em;
	color: inherit;
}

.elementor-view-stacked .elementor-icon:has(> .lhs-feature-icon) {
	background-image: linear-gradient(145deg, #f3f6ff 0%, #dce6fb 100%);
	box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.08);
}

/* =====================================================================
   Banner đầu trang – một bộ kích thước cho mọi trang (trừ Trang chủ):
   .lhs-page-hero (Sản phẩm, Tin tức, Giỏ hàng, Tài khoản, tìm kiếm, 404 – lhs-page-hero.php) và banner
   Elementor của Giới thiệu / Liên hệ (kích thước đặt trong Elementor bằng migration 2026-10-10-04).
   Cao 320 / 220px, tiêu đề 48 / 40 / 32px, mô tả 18 / 15px, lề 64×24 / 48×20px.
   ===================================================================== */
@media (max-width: 1024px) {
	.lhs-page-hero__title {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.lhs-page-hero__title {
		font-size: 32px;
	}
}

/* Banner Elementor: mô tả gọn trong 760px và chia dòng đều như .lhs-page-hero__inner / __subtitle. */
body.page:not(.home) .elementor > .e-parent:first-child:has(h1.elementor-heading-title) .elementor-widget-text-editor {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.6;
	text-wrap: balance;
}

body.page:not(.home) .elementor > .e-parent:first-child h1.elementor-heading-title {
	line-height: 1.2;
}

/* =====================================================================
   Footer: icon mạng xã hội theo màu thương hiệu (Facebook, TikTok, YouTube, Zalo).
   #colophon trong selector để thắng cả khi widget đặt "màu tuỳ chỉnh" trong Elementor.
   Mục Zalo + icon SVG được thêm bằng migration 2026-10-10-05.
   ===================================================================== */
#colophon .lhs-footer .elementor-social-icon {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#colophon .lhs-footer .elementor-social-icon:hover,
#colophon .lhs-footer .elementor-social-icon:focus-visible {
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
	opacity: 1;
	transform: translateY(-2px);
}

#colophon .lhs-footer .elementor-social-icon i,
#colophon .lhs-footer .elementor-social-icon svg {
	color: #fff;
	fill: #fff;
}

#colophon .lhs-footer .elementor-social-icon-facebook-f {
	background-color: #1877f2;
}

#colophon .lhs-footer .elementor-social-icon-tiktok {
	background-color: #000;
}

/* Nốt nhạc TikTok có viền lệch 2 màu như logo gốc. */
#colophon .lhs-footer .elementor-social-icon-tiktok i {
	text-shadow: -1.2px -1.2px 0 #25f4ee, 1.2px 1.2px 0 #fe2c55;
}

#colophon .lhs-footer .elementor-social-icon-youtube {
	background-color: #f00;
}

#colophon .lhs-footer .elementor-social-icon-zalo {
	background-color: #0068ff;
}

/* Chữ "Zalo" cần to hơn ô icon 1em mới đọc được; margin âm giữ nguyên kích thước nút tròn. */
#colophon .lhs-footer .elementor-social-icon-zalo svg {
	width: 1.6em;
	height: 1.6em;
	margin: -0.3em;
}

/*
 * Hàng nút dùng flex: Elementor xếp các nút bằng inline-block nên nút có SVG (Zalo) bị lệch lên so với
 * nút dùng font icon (khác baseline). Khoảng cách lấy từ thiết lập "spacing" của widget.
 */
#colophon .lhs-footer .elementor-social-icons-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 12px var(--grid-column-gap, 16px);
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	word-spacing: 0;
}

#colophon .lhs-footer .elementor-social-icons-wrapper > .elementor-grid-item {
	display: flex;
	margin-bottom: 0;
}

/* Tablet: cột logo canh trái (thiết lập của widget trong Elementor). */
@media (min-width: 768px) and (max-width: 1024px) {
	#colophon .lhs-footer .elementor-social-icons-wrapper {
		justify-content: flex-start;
	}
}

/* Mobile: nút 44px (dễ bấm), cách nhau 14px – cả hàng 218px nằm giữa, dưới logo. */
@media (max-width: 767px) {
	#colophon .lhs-footer .elementor-widget-social-icons {
		--grid-column-gap: 14px;
	}

	#colophon .lhs-footer .elementor-social-icon {
		--icon-size: 20px;
		--icon-padding: 0.6em;
	}
}