/*
 * SAHA Builder — CSS nền cho layout ở frontend.
 *
 * Chỉ nạp ở trang dùng builder. Style riêng của từng element nằm trong
 * uploads/saha/css/post-{id}-{hash}.css (.saha-e-{id}).
 * Mặc định bọc trong :where() (specificity 0) để CSS layout và theme đè dễ dàng.
 * Biến --saha-* lấy từ Theme Options, có giá trị dự phòng cho theme khác.
 */

:where(.saha-builder-content) {
	display: flow-root;
}

:where(.saha-builder-content) *,
:where(.saha-builder-content) *::before,
:where(.saha-builder-content) *::after {
	box-sizing: border-box;
}

/* Section */
:where(.saha-section) {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-block: var(--saha-space, 48px);
}

:where(.saha-section__inner) {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--saha-section-width, var(--saha-container, 1200px)) + 2 * var(--saha-gutter, 16px));
	margin-inline: auto;
	padding-inline: var(--saha-gutter, 16px);
}

:where(.saha-section--full) > :where(.saha-section__inner) {
	max-width: none;
}

:where(.saha-section--overlay, .saha-column--overlay)::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

:where(.saha-column--overlay) {
	position: relative;
}

:where(.saha-column--overlay) > * {
	position: relative;
}

/* Row + Column: cột = col × 100% − gap × (1 − col) → tổng đúng 100% (xem Builder\Elements\Row) */
:where(.saha-row) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--saha-gap, 24px);
	width: 100%;
}

:where(.saha-column) {
	display: flex;
	flex: 0 0 calc(var(--saha-col, 1) * 100% - var(--saha-gap, 24px) * (1 - var(--saha-col, 1)));
	flex-direction: column;
	min-width: 0;
}

/* Nội dung */
:where(.saha-heading) {
	margin-block: 0 0.5em;
}

/* Tiêu đề có link vẫn mang màu tiêu đề (class thắng `a { color }` của theme). */
.saha-heading a {
	color: inherit;
	text-decoration: none;
}

.saha-heading a:hover,
.saha-heading a:focus-visible {
	text-decoration: underline;
}

:where(.saha-text) > :first-child {
	margin-top: 0;
}

:where(.saha-text) > :last-child {
	margin-bottom: 0;
}

:where(.saha-image) {
	margin: 0;
}

:where(.saha-image) img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

:where(.saha-image__caption) {
	margin-top: 8px;
	font-size: 0.875em;
	opacity: 0.8;
}

:where(.saha-image--empty) {
	display: grid;
	place-items: center;
	min-height: 120px;
	border: 1px dashed currentcolor;
	opacity: 0.5;
}

/* Button
 * Màu của nút KHÔNG bọc :where(): theme thường có `a { color }` / `a:hover { color }`
 * (specificity 0,0,1–0,1,1) sẽ đè mất màu chữ. Style riêng từng nút (.saha-e-{id} .saha-btn)
 * vẫn thắng vì cụ thể hơn.
 */
:where(.saha-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid;
	border-radius: var(--saha-radius, 6px);
	font-family: var(--saha-type-button-font, inherit);
	font-weight: var(--saha-type-button-weight, 600);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.saha-btn,
.saha-btn:visited {
	border-color: var(--saha-primary, #0b5cab);
	background-color: var(--saha-primary, #0b5cab);
	color: #fff;
}

a.saha-btn:hover,
a.saha-btn:focus-visible {
	color: #fff;
	filter: brightness(0.92);
}

.saha-btn--secondary,
.saha-btn--secondary:visited {
	border-color: var(--saha-secondary, #1f2937);
	background-color: var(--saha-secondary, #1f2937);
}

.saha-btn--accent,
.saha-btn--accent:visited {
	border-color: var(--saha-accent, #f5a623);
	background-color: var(--saha-accent, #f5a623);
	color: var(--saha-on-accent, var(--saha-secondary, #1f2937));
}

a.saha-btn--accent:hover,
a.saha-btn--accent:focus-visible {
	color: var(--saha-on-accent, var(--saha-secondary, #1f2937));
}

/* Viền theo màu chữ: đổi màu chữ nút (ví dụ trắng trên nền tối) là viền đổi theo. */
.saha-btn--outline,
.saha-btn--outline:visited {
	border-color: currentcolor;
	background-color: transparent;
	color: var(--saha-primary, #0b5cab);
}

a.saha-btn--outline:hover,
a.saha-btn--outline:focus-visible {
	background-color: var(--saha-primary, #0b5cab);
	color: #fff;
	filter: none;
}

.saha-btn--link,
.saha-btn--link:visited {
	padding-inline: 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--saha-primary, #0b5cab);
	text-decoration: underline;
}

a.saha-btn--link:hover,
a.saha-btn--link:focus-visible {
	color: var(--saha-secondary, #1f2937);
	filter: none;
}

:where(.saha-btn--sm) {
	padding: 6px 14px;
	font-size: 0.875em;
}

:where(.saha-btn--lg) {
	padding: 14px 28px;
	font-size: 1.125em;
}

:where(.saha-button-wrap--full) :where(.saha-btn) {
	width: 100%;
}

/* Container */
:where(.saha-container-el) {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

:where(.saha-container-el--nowrap) {
	flex-wrap: nowrap;
}

/* Spacer, Divider */
:where(.saha-spacer) {
	height: 40px;
}

:where(.saha-divider) {
	width: 100%;
	height: 0;
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--saha-border, #e3e6ea);
}

/* Icon */
:where(.saha-icon-el) {
	line-height: 0;
}

:where(.saha-icon-el__shape) {
	display: inline-flex;
	font-size: 32px;
	color: var(--saha-primary, #0b5cab);
}

:where(.saha-icon-el__shape) .saha-icon,
:where(.saha-iconbox__icon) .saha-icon {
	width: 1em;
	height: 1em;
}

/* Icon Box */
:where(.saha-iconbox) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

:where(.saha-iconbox__icon) {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 40px;
	color: var(--saha-primary, #0b5cab);
}

:where(.saha-iconbox__title) {
	margin: 0 0 6px;
	font-size: 1.1rem;
}

:where(.saha-iconbox__title) a {
	color: inherit;
	text-decoration: none;
}

:where(.saha-iconbox__text) {
	margin: 0;
	opacity: 0.85;
}

/* Banner: ảnh là <img> phủ kín (srcset, fetchpriority) thay cho CSS background */
:where(.saha-banner) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 420px;
	overflow: hidden;
	padding: 48px var(--saha-gutter, 16px);
	background: var(--saha-secondary, #1f2937);
	color: #fff;
}

:where(.saha-banner__bg) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.saha-banner)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

:where(.saha-banner__content) {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

:where(.saha-banner__title) {
	margin: 0 0 12px;
	font-size: var(--saha-h1-size, 36px);
}

:where(.saha-banner__text) {
	margin: 0 0 20px;
	font-size: 1.1em;
}

/* CTA */
:where(.saha-cta) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding: 32px;
	border-radius: var(--saha-radius, 6px);
}

:where(.saha-cta__title) {
	margin: 0 0 6px;
}

:where(.saha-cta__text) {
	margin: 0;
	opacity: 0.9;
}

:where(.saha-cta__actions),
:where(.saha-banner__actions) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 767px) {
	:where(.saha-cta) {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}
}

/* Lưới: sản phẩm, danh mục, bài viết — số cột qua --saha-cols */
:where(.saha-terms__grid, .saha-posts-el__grid) {
	display: grid;
	grid-template-columns: repeat(var(--saha-cols, 4), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Thắng CSS float/width của WooCommerce (.woocommerce ul.products li.product). */
.saha-products.woocommerce ul.saha-products-grid {
	display: grid;
	grid-template-columns: repeat(var(--saha-cols, 4), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
}

.saha-products.woocommerce ul.saha-products-grid::before,
.saha-products.woocommerce ul.saha-products-grid::after {
	display: none;
}

.saha-products.woocommerce ul.saha-products-grid li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

:where(.saha-terms__link) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: var(--saha-radius, 6px);
	color: inherit;
	text-align: center;
	text-decoration: none;
}

:where(.saha-terms__link):hover {
	border-color: var(--saha-primary, #0b5cab);
}

:where(.saha-terms__media) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Logo thương hiệu: thẻ trắng cao đều, logo nhỏ giữa thẻ. */
:where(.saha-terms--logos .saha-terms__link) {
	justify-content: center;
	height: 100%;
	min-height: calc(var(--saha-logo-h, 40px) + 48px);
	padding: 16px 20px;
	border-color: var(--saha-border, #e6e8ee);
	border-radius: 12px;
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

:where(.saha-terms--logos .saha-terms__media) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Không dùng :where — rule `img { height: auto }` của theme nạp sau sẽ đè. */
.saha-terms--logos .saha-terms__media img {
	width: auto;
	max-width: 82%;
	height: var(--saha-logo-h, 40px);
	aspect-ratio: auto;
	object-fit: contain;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

:where(.saha-terms--fx-lift .saha-terms__link):hover,
:where(.saha-terms--fx-lift .saha-terms__link):focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -12px rgb(16 24 40 / 25%);
}

.saha-terms--fx-grayscale .saha-terms__media img {
	filter: grayscale(1);
	opacity: 0.7;
}

.saha-terms--fx-grayscale .saha-terms__link:hover img,
.saha-terms--fx-grayscale .saha-terms__link:focus-visible img {
	filter: none;
	opacity: 1;
}

@media (max-width: 767px) {
	:where(.saha-terms--logos .saha-terms__link) {
		min-height: calc(var(--saha-logo-h, 32px) + 32px);
		padding: 12px;
	}

	.saha-terms--logos .saha-terms__media img {
		height: var(--saha-logo-h, 32px);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.saha-terms--logos .saha-terms__link) {
		transition: none;
	}

	:where(.saha-terms--fx-lift .saha-terms__link):hover {
		transform: none;
	}
}

/* Thẻ ảnh phủ: ảnh 4:3 phủ kín, tên chữ trắng trên dải tối ở đáy. */
:where(.saha-terms--overlay .saha-terms__link) {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--saha-secondary, #1f2937);
}

:where(.saha-terms--overlay .saha-terms__media) {
	display: block;
}

.saha-terms--overlay .saha-terms__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.3s ease;
}

:where(.saha-terms--overlay .saha-terms__link):hover img {
	transform: scale(1.05);
}

:where(.saha-terms--overlay .saha-terms__name, .saha-terms--overlay .saha-terms__desc, .saha-terms--overlay .saha-terms__count) {
	position: relative;
	z-index: 1;
	display: block;
	padding: 0 14px;
	color: #fff;
	text-align: left;
}

:where(.saha-terms--overlay .saha-terms__media) + :where(.saha-terms__name) {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 40px 14px 14px;
	background: linear-gradient(to top, rgb(10 14 30 / 85%), rgb(10 14 30 / 0%));
}

:where(.saha-terms--overlay .saha-terms__media) ~ :where(.saha-terms__desc, .saha-terms__count) {
	display: none;
}

:where(.saha-terms__name) {
	font-weight: 600;
}

:where(.saha-terms__desc) {
	color: var(--saha-muted, #5f6b7a);
	font-size: 0.85em;
	line-height: 1.4;
}

:where(.saha-terms__count) {
	font-size: 0.85em;
	opacity: 0.7;
}

:where(.saha-post-card) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

:where(.saha-post-card__media) img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--saha-radius, 6px);
}

:where(.saha-post-card__title) {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

:where(.saha-post-card__title) a {
	color: inherit;
	text-decoration: none;
}

:where(.saha-post-card__date) {
	font-size: 0.85em;
	opacity: 0.7;
}

:where(.saha-post-card__excerpt) {
	margin: 6px 0 0;
}

@media (max-width: 1024px) {
	:where(.saha-terms__grid, .saha-posts-el__grid) {
		grid-template-columns: repeat(var(--saha-cols, 2), minmax(0, 1fr));
	}
}

/* Block dùng chung: section bên trong block nằm trong cột thì không cần lề ngoài riêng */
:where(.saha-column, .saha-container-el) > :where(.saha-block-ref) :where(.saha-section__inner) {
	padding-inline: 0;
}

/* ===== Header & footer (mốc 1.5) ===== */
:where(.saha-hb) {
	position: relative;
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:where(.saha-hb--sticky-always, .saha-hb--sticky-up) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}

:where(.saha-hb--shadow).is-stuck {
	box-shadow: 0 2px 12px rgb(15 23 42 / 8%);
}

:where(.saha-hb).is-hidden {
	transform: translateY(-110%);
}

:where(.saha-hb).is-stuck :where(.saha-hb-row--hide-sticky) {
	display: none;
}

:where(.saha-hb-row__inner) {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(var(--saha-container, 1200px) + 2 * var(--saha-gutter, 16px));
	min-height: 56px;
	margin-inline: auto;
	padding-inline: var(--saha-gutter, 16px);
}

:where(.saha-hb-row--full) > :where(.saha-hb-row__inner) {
	max-width: none;
}

/* Vùng trái / giữa / phải: hai bên rộng theo nội dung, vùng giữa lấy phần còn lại
 * và căn giữa trong phần đó (không bao giờ đè lên nhau khi menu dài). */
:where(.saha-hb-zone) {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

:where(.saha-hb-zone:nth-child(2)) {
	flex: 1 1 auto;
	justify-content: center;
}

:where(.saha-hb-zone:nth-child(3)) {
	justify-content: flex-end;
}

/* Vùng giữa trống: vùng phải dạt hết về bên phải. */
:where(.saha-hb-zone:nth-child(2):empty) {
	flex: 1 1 0;
}

:where(.saha-hb-zone--grow) {
	flex: 1 1 auto;
}

:where(.saha-hb) a,
:where(.saha-site-footer) a {
	text-decoration: none;
}

/* Logo */
:where(.saha-logo-el) {
	display: inline-flex;
	align-items: center;
	color: inherit;
}

/* Chiều cao theo Theme Options (Chung → Chiều cao logo). Không bọc :where(): rule `img { height: auto }`
 * của theme sẽ thắng. Cùng độ ưu tiên với CSS riêng của element (`.saha-e-ID img`) — CSS đó nạp sau
 * nên ô "Chiều cao" của element Logo vẫn ghi đè được. */
.saha-logo-el img {
	display: block;
	width: auto;
	height: var(--saha-logo-height, 48px);
}

:where(.saha-logo-el) {
	min-width: 0;
	max-width: 100%;
}

:where(.saha-logo-el__text) {
	font-family: var(--saha-type-heading-font, inherit);
	font-size: 1.25rem;
	font-weight: 700;
}

/* Trong header: một dòng, tên dài cắt "…" (không đẩy nút menu/giỏ ra ngoài). */
:where(.saha-hb) :where(.saha-logo-el__text) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	:where(.saha-logo-el__text) {
		font-size: 1.05rem;
	}
}

:where(.saha-logo-el.has-mobile) .saha-logo-el__img--mobile {
	display: none;
}

@media (max-width: 767px) {
	:where(.saha-logo-el.has-mobile) .saha-logo-el__img--desktop {
		display: none;
	}

	:where(.saha-logo-el.has-mobile) .saha-logo-el__img--mobile {
		display: block;
	}
}

/* Menu: ngang (menu con thả xuống khi rê chuột/focus) hoặc dọc */
:where(.saha-nav__list),
:where(.saha-nav) :where(.sub-menu) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.saha-nav .menu-item) {
	position: relative;
}

:where(.saha-nav .menu-item) > a {
	display: block;
	padding: 8px 0;
	color: inherit;
	font-family: var(--saha-type-menu-font, inherit);
	font-size: var(--saha-type-menu-size, 15px);
	font-weight: var(--saha-type-menu-weight, 600);
}

:where(.saha-nav--horizontal) :where(.saha-nav__list) {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
}

:where(.saha-nav--horizontal) :where(.sub-menu) {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 20;
	min-width: 220px;
	padding: 8px 16px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: var(--saha-radius, 6px);
	background: var(--saha-background, #fff);
	color: var(--saha-text, #1f2328);
	box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease;
}

:where(.saha-nav--horizontal) li:hover > :where(.sub-menu),
:where(.saha-nav--horizontal) li:focus-within > :where(.sub-menu) {
	visibility: visible;
	opacity: 1;
}

/* Cấp 3 trong menu thả xuống: danh sách thụt vào, không bật thêm hộp nổi. */
:where(.saha-nav--horizontal) :where(.sub-menu) :where(.sub-menu) {
	position: static;
	min-width: 0;
	padding: 0 0 0 12px;
	border: 0;
	box-shadow: none;
	visibility: inherit;
	opacity: 1;
}

:where(.saha-nav--vertical) :where(.saha-nav__list) > li {
	border-bottom: 1px solid var(--saha-border, #e3e6ea);
}

:where(.saha-nav--vertical) :where(.sub-menu) {
	padding: 0 0 8px 16px;
}

/* Icon trên header: tài khoản, giỏ hàng */
:where(.saha-hb-icon) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	font-size: 24px;
}

:where(.saha-hb-icon) .saha-icon,
:where(.saha-menu-toggle) .saha-icon,
:where(.saha-contact-el) .saha-icon {
	width: 1em;
	height: 1em;
}

:where(.saha-hb-icon__label) {
	font-size: 14px;
}

:where(.saha-cart-count) {
	position: absolute;
	top: -6px;
	left: 14px;
	min-width: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--saha-accent, #f5a623);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

:where(.saha-menu-toggle) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	cursor: pointer;
}

:where(.saha-menu-toggle__label) {
	font-size: 14px;
	font-weight: 600;
}

:where(.saha-contact-el) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	white-space: nowrap;
}

:where(.saha-search-el) form {
	display: flex;
	gap: 4px;
}

:where(.saha-search-el) input[type="search"] {
	flex: 1;
	min-width: 0;
}

:where(.saha-social) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 22px;
}

:where(.saha-social) a {
	display: inline-flex;
	color: inherit;
}

:where(.saha-social) .saha-icon {
	width: 1em;
	height: 1em;
}

:where(.saha-copyright) {
	margin: 0;
}

/* Link trong header/footer kế thừa màu chữ của hàng/section. KHÔNG bọc :where():
 * theme thường có `a { color }` (0,0,1) sẽ đè. Màu đặt riêng từng element
 * (.saha-e-{id} …) nằm trong file CSS của layout, nạp sau → vẫn thắng. */
.saha-logo-el,
.saha-contact-el,
.saha-hb-icon,
.saha-social a,
.saha-nav .menu-item > a {
	color: inherit;
}

.saha-contact-el.saha-btn {
	color: #fff;
}

.saha-nav .menu-item > a:hover,
.saha-nav .current-menu-item > a,
.saha-nav .current-menu-ancestor > a {
	color: var(--saha-primary, #0b5cab);
}

/* Menu di động */
:where(.saha-hb-offcanvas) {
	position: fixed;
	inset: 0;
	z-index: 100000; /* trên admin bar của WordPress (99999) */
}

:where(.saha-hb-offcanvas__backdrop) {
	position: absolute;
	inset: 0;
	background: rgb(15 23 42 / 50%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

:where(.saha-hb-offcanvas__panel) {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(320px, 85vw);
	overflow-y: auto;
	padding: 56px 20px 24px;
	background: var(--saha-background, #fff);
	color: var(--saha-text, #1f2328);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

:where(.saha-hb-offcanvas--right) :where(.saha-hb-offcanvas__panel) {
	right: 0;
	left: auto;
	transform: translateX(100%);
}

:where(.saha-hb-offcanvas).is-open :where(.saha-hb-offcanvas__backdrop) {
	opacity: 1;
}

:where(.saha-hb-offcanvas).is-open :where(.saha-hb-offcanvas__panel) {
	transform: none;
}

:where(.saha-hb-offcanvas__close) {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 8px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	cursor: pointer;
}

:where(.saha-hb-offcanvas__close) .saha-icon {
	width: 1em;
	height: 1em;
}

/* Trong editor: bảng hiện luôn bên dưới header để kéo thả vào */
:where(.saha-hb-offcanvas.is-editor) {
	position: static;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 360px;
	margin: 16px;
	padding: 16px;
	border: 2px dashed var(--saha-border, #c3c4c7);
	border-radius: 8px;
}

:where(.saha-hb-offcanvas__hint) {
	margin: 0;
	font-size: 12px;
	opacity: 0.7;
}

html.saha-hb-lock {
	overflow: hidden;
}

/* Ẩn theo thiết bị — cùng breakpoint với Theme Options */
@media (min-width: 1025px) {
	.saha-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.saha-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.saha-hide-mobile {
		display: none !important;
	}
}

/* ===== Template Builder (mốc 2.2) ===== */

/* Trang sản phẩm dựng bằng template: bố cục do Hàng/Cột của builder quyết định,
 * bỏ float/width 48% của woocommerce-layout.css (selector đủ cụ thể để thắng). */
.woocommerce div.product.saha-template-product div.images,
.woocommerce div.product.saha-template-product div.summary,
.woocommerce-page div.product.saha-template-product div.images,
.woocommerce-page div.product.saha-template-product div.summary {
	width: auto;
	margin-bottom: 0;
	float: none;
}

.saha-template-product .saha-product-after .woocommerce-tabs,
.saha-template-product .saha-product-after .related,
.saha-template-product .saha-product-after .upsells {
	clear: both;
}

:where(.saha-dynamic.saha-image--empty) {
	padding: 16px;
	border: 1px dashed var(--saha-border, #e3e6ea);
	border-radius: var(--saha-radius, 6px);
	color: var(--saha-muted, #5f6b7a);
	font-size: 14px;
	text-align: center;
}

:where(.saha-post-meta) {
	margin-bottom: 16px;
	color: var(--saha-muted, #5f6b7a);
	font-size: 14px;
}

:where(.saha-featured-image) {
	margin: 0 0 24px;
}

:where(.saha-featured-image) img {
	display: block;
	width: 100%;
	height: auto;
}

:where(.saha-archive-title) {
	margin-bottom: 24px;
}

:where(.saha-archive-title__desc) {
	color: var(--saha-muted, #5f6b7a);
}

/* Canvas: gallery WooCommerce chờ JS mới hiện (opacity 0 inline) — canvas không chạy JS đó. */
.saha-builder-canvas .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* ===== Element giao diện (D1) ===== */

/* Tiêu đề khối: gạch ngắn màu nhấn + link Xem tất cả */
:where(.saha-stitle) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
}

:where(.saha-stitle--center) {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

:where(.saha-stitle__title) {
	margin: 0;
	color: var(--saha-heading, #111827);
	font-size: var(--saha-h2-size, 28px);
}

:where(.saha-stitle--bar) :where(.saha-stitle__title)::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 10px;
	border-radius: 2px;
	background-color: var(--saha-accent, #f5a623);
}

:where(.saha-stitle--center.saha-stitle--bar) :where(.saha-stitle__title)::after {
	margin-inline: auto;
}

:where(.saha-stitle__sub) {
	margin: 8px 0 0;
	color: var(--saha-muted, #5f6b7a);
}

.saha-stitle .saha-stitle__more {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--saha-heading, #111827);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.saha-stitle .saha-stitle__more:hover {
	color: var(--saha-accent, #f5a623);
}

:where(.saha-stitle__arrow) {
	width: 1em;
	height: 1em;
}

/* Chữ chạy */
:where(.saha-marquee) {
	overflow: hidden;
	font-size: 14px;
	white-space: nowrap;
}

:where(.saha-marquee--upper) {
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

:where(.saha-marquee__track) {
	display: flex;
	width: max-content;
	animation: saha-marquee var(--saha-marquee-duration, 30s) linear infinite;
}

:where(.saha-marquee:hover, .saha-marquee:focus-within) :where(.saha-marquee__track) {
	animation-play-state: paused;
}

:where(.saha-marquee__list) {
	display: flex;
	flex-shrink: 0;
	gap: 24px;
	margin: 0;
	padding: 0 24px 0 0;
	list-style: none;
}

:where(.saha-marquee__sep) {
	color: var(--saha-accent, #f5a623);
}

@keyframes saha-marquee {

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {

	:where(.saha-marquee) {
		overflow-x: auto;
	}

	:where(.saha-marquee__track) {
		animation: none;
	}

	:where(.saha-marquee__list[aria-hidden="true"]) {
		display: none;
	}
}

/* Danh sách icon */
:where(.saha-icon-list) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.saha-icon-list--horizontal) {
	flex-flow: row wrap;
	gap: 10px 24px;
}

:where(.saha-icon-list__item) {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

:where(.saha-icon-list__mark) {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: 0.15em;
	color: var(--saha-icon-list-color, var(--saha-accent, #f5a623));
}

:where(.saha-icon-list__icon) {
	width: 1.1em;
	height: 1.1em;
}

:where(.saha-icon-list--circle) :where(.saha-icon-list__mark) {
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--saha-icon-list-color, var(--saha-accent, #f5a623));
	color: #fff;
}

:where(.saha-icon-list--circle) :where(.saha-icon-list__icon) {
	width: 0.85em;
	height: 0.85em;
}

/* Hộp icon dạng thẻ */
:where(.saha-iconbox--card, .saha-iconbox--shadow) {
	height: 100%;
	padding: 24px 16px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 8px;
	background: var(--saha-background, #fff);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

:where(.saha-iconbox--shadow) {
	border-color: transparent;
	box-shadow: 0 4px 16px rgb(15 23 42 / 8%);
}

:where(.saha-iconbox--card, .saha-iconbox--shadow):hover {
	border-color: var(--saha-accent, #f5a623);
	transform: translateY(-2px);
}

/* Slider */
:where(.saha-slider) {
	position: relative;
	--saha-slider-per-view: 1;
	--saha-slider-gap: 16px;
}

:where(.saha-slider__track) {
	display: grid;
	grid-auto-columns: calc((100% - (var(--saha-slider-per-view) - 1) * var(--saha-slider-gap)) / var(--saha-slider-per-view));
	grid-auto-flow: column;
	gap: var(--saha-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

:where(.saha-slider__track)::-webkit-scrollbar {
	display: none;
}

:where(.saha-slide) {
	position: relative;
	overflow: hidden;
	border-radius: var(--saha-slider-radius, 0);
	scroll-snap-align: start;
}

:where(.saha-slider--ratio) :where(.saha-slide) {
	aspect-ratio: var(--saha-slider-ratio, 4/3);
}

:where(.saha-slide__img) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

:where(.saha-slide__link) {
	display: block;
	height: 100%;
	color: inherit;
}

:where(.saha-slide__caption) {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 24px 16px 12px;
	background: linear-gradient(transparent, rgb(0 0 0 / 65%));
	color: #fff;
	font-weight: 600;
}

:where(.saha-slide__empty) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 160px;
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-muted, #5f6b7a);
}

.saha-slider .saha-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 90%);
	box-shadow: 0 2px 8px rgb(15 23 42 / 15%);
	color: var(--saha-heading, #111827);
	cursor: pointer;
	transform: translateY(-50%);
}

.saha-slider .saha-slider__arrow--prev {
	left: 12px;
}

.saha-slider .saha-slider__arrow--prev svg {
	transform: rotate(180deg);
}

.saha-slider .saha-slider__arrow--next {
	right: 12px;
}

.saha-slider .saha-slider__arrow svg {
	width: 18px;
	height: 18px;
}

:where(.saha-slider__dots) {
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.saha-slider .saha-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgb(255 255 255 / 60%);
	cursor: pointer;
	transition: width 0.2s ease;
}

.saha-slider .saha-slider__dot[aria-current="true"] {
	width: 22px;
	background: #fff;
}

/* Đánh giá khách hàng */
:where(.saha-testimonials) {
	display: grid;
	grid-template-columns: repeat(var(--saha-cols, 3), minmax(0, 1fr));
	gap: 16px;
}

:where(.saha-testimonial) {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-left: 3px solid var(--saha-testimonial-accent, var(--saha-accent, #f5a623));
	border-radius: 8px;
	background: var(--saha-testimonial-bg, var(--saha-background, #fff));
}

:where(.saha-testimonial__stars) {
	display: flex;
	gap: 2px;
	margin-bottom: 6px;
	color: var(--saha-testimonial-accent, var(--saha-accent, #f5a623));
}

:where(.saha-testimonial__stars) svg {
	width: 14px;
	height: 14px;
	fill: currentcolor;
}

:where(.saha-testimonial__quote) {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

:where(.saha-testimonial__quote) p {
	margin: 0;
}

:where(.saha-testimonial__by) {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
}

:where(.saha-testimonial__by) strong {
	color: var(--saha-accent, #f5a623);
}

:where(.saha-testimonial__meta) {
	color: var(--saha-muted, #5f6b7a);
}

:where(.saha-testimonial__avatar) {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

/* Accordion / hỏi đáp */
:where(.saha-acc) {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

:where(.saha-acc-item) {
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 8px;
	background: var(--saha-acc-bg, var(--saha-background, #fff));
}

:where(.saha-acc-item__title) {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	color: var(--saha-heading, #111827);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

:where(.saha-acc-item__title)::-webkit-details-marker {
	display: none;
}

:where(.saha-acc-item__icon) {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--saha-acc-accent, var(--saha-accent, #f5a623));
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

:where(.saha-acc-item[open]) :where(.saha-acc-item__icon) {
	transform: rotate(-90deg);
}

:where(.saha-acc-item[open]) {
	border-color: var(--saha-acc-accent, var(--saha-accent, #f5a623));
}

:where(.saha-acc-item__body) {
	padding: 0 18px 16px;
	color: var(--saha-text, #1f2328);
}

@media (max-width: 1024px) {

	:where(.saha-testimonials) {
		grid-template-columns: repeat(var(--saha-cols, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {

	:where(.saha-testimonials) {
		grid-template-columns: repeat(var(--saha-cols, 1), minmax(0, 1fr));
	}

	:where(.saha-stitle__title) {
		font-size: var(--saha-h3-size, 22px);
	}
}

/* ===== Header theo mẫu (D2) ===== */

:where(.screen-reader-text) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Tìm kiếm: ô liền nút */
:where(.saha-search-el--joined) :where(.saha-search-el__form) {
	display: flex;
	width: 100%;
}

.saha-search-el--joined .saha-search-el__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: var(--saha-background, #fff);
	color: var(--saha-text, #1f2328);
	font: inherit;
	font-size: 15px;
}

.saha-search-el--joined .saha-search-el__input:focus {
	border-color: var(--saha-accent, #f5a623);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--saha-accent, #f5a623);
}

.saha-search-el--joined .saha-search-el__button {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: var(--saha-accent, #f5a623);
	color: var(--saha-on-accent, var(--saha-secondary, #1f2937));
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.saha-search-el--joined .saha-search-el__button svg {
	width: 20px;
	height: 20px;
}

/* Liên hệ: xếp chồng */
.saha-contact-el.saha-contact-el--stacked {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
}

:where(.saha-contact-el__icon) {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-accent, #f5a623);
}

:where(.saha-contact-el__icon) svg {
	width: 20px;
	height: 20px;
}

:where(.saha-contact-el__text) {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

:where(.saha-contact-el--stacked) :where(.saha-contact-el__label) {
	font-size: 13px;
	opacity: 0.8;
}

:where(.saha-contact-el--stacked) :where(.saha-contact-el__value) {
	font-size: 18px;
	font-weight: 800;
}

/* Menu: chữ in hoa, mũi tên mục có menu con */
:where(.saha-nav--upper) :where(.saha-nav__list) > :where(.menu-item) > a {
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

:where(.saha-nav--caret) :where(.menu-item-has-children) > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.5em;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	vertical-align: 0.2em;
	transform: rotate(45deg);
}

:where(.saha-nav--caret.saha-nav--horizontal) :where(.sub-menu) :where(.menu-item-has-children) > a::after {
	transform: rotate(-45deg);
}

/* Nút danh mục sản phẩm */
:where(.saha-catmenu) {
	position: relative;
}

.saha-catmenu .saha-catmenu__toggle {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 4px;
	background: var(--saha-accent, #f5a623);
	color: var(--saha-on-accent, var(--saha-secondary, #1f2937));
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

:where(.saha-catmenu__icon, .saha-catmenu__arrow) {
	width: 18px;
	height: 18px;
}

:where(.saha-catmenu__arrow) {
	transition: transform 0.2s ease;
}

:where(.saha-catmenu.is-open) :where(.saha-catmenu__arrow) {
	transform: rotate(90deg);
}

:where(.saha-catmenu__panel) {
	position: absolute;
	color: var(--saha-text, #1f2328);
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	width: 280px;
	padding: 6px 0;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 8px;
	background: var(--saha-background, #fff);
	box-shadow: 0 10px 30px rgb(15 23 42 / 15%);
}

:where(.saha-catmenu__panel)[hidden] {
	display: none;
}

:where(.saha-catmenu__list, .saha-catmenu__sub) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.saha-catmenu__list) > li {
	position: relative;
}

.saha-catmenu .saha-catmenu__panel a {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding: 9px 16px;
	color: var(--saha-heading, #111827);
	font-weight: 500;
	text-decoration: none;
}

.saha-catmenu .saha-catmenu__panel a:hover,
.saha-catmenu .saha-catmenu__panel a:focus-visible {
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-accent, #f5a623);
}

:where(.saha-catmenu__caret) {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

:where(.saha-catmenu__sub) {
	position: absolute;
	top: -7px;
	left: 100%;
	min-width: 220px;
	padding: 6px 0;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 8px;
	background: var(--saha-background, #fff);
	box-shadow: 0 10px 30px rgb(15 23 42 / 15%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

:where(.saha-catmenu__list) > li:hover > :where(.saha-catmenu__sub),
:where(.saha-catmenu__list) > li:focus-within > :where(.saha-catmenu__sub) {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

@media (max-width: 1024px) {

	:where(.saha-catmenu__sub) {
		position: static;
		padding: 0 0 0 12px;
		border: 0;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
	}
}

/* ===== Tab lọc sản phẩm (D3) ===== */
:where(.saha-ptabs__list) {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.saha-ptabs .saha-ptabs__tab {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 999px;
	background: var(--saha-background, #fff);
	color: var(--saha-heading, #111827);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.saha-ptabs .saha-ptabs__tab:hover {
	border-color: var(--saha-accent, #f5a623);
}

.saha-ptabs .saha-ptabs__tab[aria-selected="true"] {
	border-color: var(--saha-secondary, #1f2937);
	background: var(--saha-secondary, #1f2937);
	color: #fff;
}

.saha-ptabs .saha-ptabs__tab:focus-visible {
	outline: 3px solid var(--saha-accent, #f5a623);
	outline-offset: 2px;
}

:where(.saha-ptabs__panel):focus-visible {
	outline: 2px dashed var(--saha-border, #e3e6ea);
	outline-offset: 4px;
}

/* ===== Trang danh mục kiểu cửa hàng (D5) ===== */

/* Tiêu đề danh sách kiểu Khung */
.saha-archive-title--card {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 16px;
	background: var(--saha-background, #fff);
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}

.saha-archive-title--card .saha-archive-title__main {
	flex: 1 1 360px;
	min-width: 0;
}

.saha-archive-title--card .saha-archive-title__text {
	margin: 0;
	color: var(--saha-heading, #111827);
	font-size: clamp(24px, 3.2vw, 40px);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.saha-archive-title--card .saha-archive-title__desc {
	margin-top: 8px;
	font-size: 15px;
}

.saha-archive-title--card .saha-archive-title__desc > :last-child {
	margin-bottom: 0;
}

.saha-archive-title__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.saha-archive-title__chip {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-heading, #111827);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.saha-archive-title__chip .saha-icon {
	width: 18px;
	height: 18px;
}

.saha-archive-title__chip--accent {
	background: color-mix(in srgb, var(--saha-accent, #f5a623) 16%, #fff);
	color: color-mix(in srgb, var(--saha-accent, #f5a623) 45%, #1f2937);
}

/* Bố cục: cột lọc trái + danh sách */
.saha-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (min-width: 1024px) {
	.saha-shop__layout {
		grid-template-columns: 280px minmax(0, 1fr);
	}
}

.saha-shop__panel-body {
	display: grid;
	gap: 16px;
}

.saha-shop__box,
.saha-shop .saha-filter--sidebar .saha-shop__box {
	min-width: 0;
	margin: 0;
	padding: 18px 16px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 16px;
	background: var(--saha-background, #fff);
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}

.saha-shop__box-title,
.saha-shop .saha-filter--sidebar .saha-shop__box-title {
	float: left;
	width: 100%;
	margin: 0 0 12px;
	padding: 0 4px;
	color: var(--saha-heading, #111827);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.saha-shop__box-title + * {
	clear: both;
}

/* Có cột lọc thì vùng danh sách hẹp hơn: lưới 4–6 cột tự xuống 3 cột khi vùng < 1000px
 * (chỉ desktop; tablet/mobile theo Theme Options như cũ). */
.saha-shop__main {
	container-type: inline-size;
}

@media (min-width: 1024px) {
	@container (max-width: 999px) {
		.saha-shop .saha-shop__main ul.products:is(.columns-4, .columns-5, .columns-6) {
			--saha-shop-cols: 3;
		}
	}
}

/* Danh mục */
.saha-shop-cats__list,
.saha-shop-cats__sub {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.saha-shop-cats__sub {
	margin: 4px 0 4px 18px;
}

.saha-shop-cats__item > a {
	display: flex;
	gap: 8px;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--saha-text, #1f2328);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.saha-shop-cats__item > a::before {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--saha-border, #e3e6ea);
	content: "";
}

.saha-shop-cats__item > a:hover {
	background: var(--saha-surface, #f6f7f9);
}

.saha-shop-cats__item.is-current > a {
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-heading, #111827);
	font-weight: 600;
}

.saha-shop-cats__item.is-current > a::before {
	background: var(--saha-heading, #111827);
}

.saha-shop-cats__item.is-open > a {
	color: var(--saha-heading, #111827);
	font-weight: 600;
}

.saha-shop-cats__name {
	flex: 1 1 auto;
	min-width: 0;
}

.saha-shop-cats__count {
	color: var(--saha-muted, #5f6b7a);
	font-size: 13px;
	font-weight: 400;
}

/* Thanh trên danh sách */
.saha-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 14px 20px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 16px;
	background: var(--saha-background, #fff);
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
}

.saha-shop__count {
	margin: 0;
	color: var(--saha-muted, #5f6b7a);
	font-size: 15px;
}

.saha-shop__count strong {
	color: var(--saha-heading, #111827);
}

.saha-shop__sort {
	display: flex;
	gap: 12px;
	align-items: center;
}

.saha-shop__sort-label {
	color: var(--saha-muted, #5f6b7a);
	font-size: 15px;
	white-space: nowrap;
}

.saha-shop .woocommerce-ordering {
	float: none;
	margin: 0;
}

.saha-shop .woocommerce-ordering select {
	min-width: 200px;
	min-height: 44px;
	padding: 8px 40px 8px 14px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 10px;
	background-color: var(--saha-background, #fff);
	color: var(--saha-heading, #111827);
	font: inherit;
	font-size: 15px;
}

/* Điều kiện đang lọc */
.saha-shop__active {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	margin: -4px 0 20px;
	font-size: 14px;
}

.saha-shop__active ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.saha-shop__active-label {
	color: var(--saha-muted, #5f6b7a);
}

.saha-shop__chip {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 32px;
	padding: 4px 10px 4px 14px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 999px;
	background: var(--saha-surface, #f6f7f9);
	color: var(--saha-heading, #111827);
	text-decoration: none;
}

.saha-shop__chip:hover {
	border-color: var(--saha-heading, #111827);
}

.saha-shop__chip .saha-icon {
	width: 14px;
	height: 14px;
}

.saha-shop__clear {
	color: var(--saha-muted, #5f6b7a);
	text-decoration: underline;
}

/* Nút mở bộ lọc (mobile/tablet) + ngăn trượt */
.saha-shop__toggle,
.saha-shop__panel-head,
.saha-shop__panel-foot {
	display: none;
}

@media (max-width: 1023px) {
	.saha-shop__toggle {
		display: inline-flex;
		gap: 8px;
		align-items: center;
		min-height: 44px;
		margin-bottom: 16px;
		padding: 8px 16px;
		border: 1px solid var(--saha-border, #e3e6ea);
		border-radius: 999px;
		background: var(--saha-background, #fff);
		color: var(--saha-heading, #111827);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.saha-shop__toggle-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--saha-primary, #0b5cab);
		color: #fff;
		font-size: 12px;
	}

	.saha-shop__toggle-count[hidden] {
		display: none;
	}

	.saha-shop__sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		width: min(360px, 88vw);
		background: var(--saha-surface, #f6f7f9);
		box-shadow: 0 0 40px rgb(15 23 42 / 25%);
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.saha-shop.is-open .saha-shop__sidebar {
		visibility: visible;
		transform: none;
		transition: transform 0.25s ease;
	}

	/* Khung section (z-index: 1) tạo stacking context → ngăn trượt nằm dưới header dính và thanh
	 * liên hệ của theme. Khi ngăn mở thì bỏ z-index đó để ngăn nổi lên trên cùng. */
	.saha-section__inner:has(.saha-shop.is-open),
	.saha-section:has(.saha-shop.is-open) {
		z-index: auto;
	}

	.saha-shop.is-open::before {
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgb(15 23 42 / 45%);
		content: "";
	}

	.saha-shop__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 12px 12px 20px;
		border-bottom: 1px solid var(--saha-border, #e3e6ea);
		background: var(--saha-background, #fff);
	}

	.saha-shop__panel-title {
		color: var(--saha-heading, #111827);
		font-weight: 700;
	}

	.saha-shop__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--saha-heading, #111827);
		cursor: pointer;
	}

	.saha-shop__panel-body {
		flex: 1 1 auto;
		padding: 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.saha-shop__panel-foot {
		display: block;
		padding: 12px 16px;
		border-top: 1px solid var(--saha-border, #e3e6ea);
		background: var(--saha-background, #fff);
	}

	.saha-shop__done {
		width: 100%;
		min-height: 48px;
		border: 0;
		border-radius: 10px;
		background: var(--saha-primary, #0b5cab);
		color: #fff;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
}

@media (max-width: 767px) {
	.saha-shop__toolbar {
		padding: 12px 14px;
	}

	.saha-archive-title__chips {
		gap: 8px;
	}

	.saha-archive-title__chip {
		padding: 8px 12px;
		font-size: 14px;
	}

	.saha-shop__sort {
		flex: 1 1 100%;
	}

	.saha-shop .woocommerce-ordering,
	.saha-shop .woocommerce-ordering select {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.saha-shop__sidebar,
	.saha-shop.is-open .saha-shop__sidebar {
		transition: none;
	}
}

html.saha-shop-locked {
	overflow: hidden;
}

/* ==========================================================================
   Element Phase 2 (mốc 2.7): Grid, Tabs, Gallery, Video, Logo, Countdown, Newsletter, băng chuyền
   ========================================================================== */

/* Grid */
:where(.saha-grid) {
	display: grid;
	grid-template-columns: repeat(var(--saha-grid-cols, 3), minmax(0, 1fr));
	gap: 24px;
}

/* Tabs */
:where(.saha-tabs) {
	--saha-tabs-accent: var(--saha-primary, #0b5cab);
}

:where(.saha-tabs__list) {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	overflow-x: auto;
	scrollbar-width: thin;
}

:where(.saha-tabs--align-center) :where(.saha-tabs__list) {
	justify-content: center;
}

.saha-tabs .saha-tabs__tab {
	flex: 0 0 auto;
	padding: 10px 16px;
	border: 0;
	background: none;
	color: var(--saha-muted, #5f6b7a);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.saha-tabs--align-stretch .saha-tabs__tab {
	flex: 1 1 0;
}

.saha-tabs--line .saha-tabs__list {
	border-bottom: 1px solid var(--saha-border, #e3e6ea);
}

.saha-tabs--line .saha-tabs__tab {
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
}

.saha-tabs--line .saha-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--saha-tabs-accent);
	color: var(--saha-heading, #111827);
}

.saha-tabs--pill .saha-tabs__tab {
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 999px;
}

.saha-tabs--pill .saha-tabs__tab[aria-selected="true"] {
	border-color: var(--saha-tabs-accent);
	background: var(--saha-tabs-accent);
	color: #fff;
}

.saha-tabs--box .saha-tabs__list {
	gap: 0;
	margin-bottom: 0;
}

.saha-tabs--box .saha-tabs__tab {
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

.saha-tabs--box .saha-tabs__tab[aria-selected="true"] {
	border-color: var(--saha-border, #e3e6ea);
	background: var(--saha-background, #fff);
	color: var(--saha-heading, #111827);
}

.saha-tabs--box .saha-tabs__panels {
	padding: 20px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 0 8px 8px;
}

.saha-tabs .saha-tabs__tab:focus-visible,
:where(.saha-tabs__panel):focus-visible {
	outline: 2px solid var(--saha-tabs-accent);
	outline-offset: 2px;
}

/* Gallery */
:where(.saha-gallery--grid) {
	display: grid;
	grid-template-columns: repeat(var(--saha-gallery-cols, 4), minmax(0, 1fr));
	gap: var(--saha-gallery-gap, 12px);
}

:where(.saha-gallery--masonry) {
	columns: var(--saha-gallery-cols, 4);
	column-gap: var(--saha-gallery-gap, 12px);
}

:where(.saha-gallery--masonry) > * {
	margin: 0 0 var(--saha-gallery-gap, 12px);
	break-inside: avoid;
}

.saha-gallery .saha-image {
	width: auto;
	max-width: none;
	margin: 0;
}

.saha-gallery .saha-image__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--saha-gallery-radius, 6px);
}

.saha-gallery--grid .saha-image__img {
	height: 100%;
	aspect-ratio: var(--saha-gallery-ratio, 1/1);
	object-fit: cover;
}

.saha-gallery .saha-gallery__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.saha-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(10 14 20 / 92%);
	color: #fff;
}

.saha-lightbox::backdrop {
	background: rgb(10 14 20 / 60%);
}

.saha-lightbox .saha-lightbox__img {
	position: absolute;
	top: 56px;
	left: 64px;
	width: calc(100% - 128px);
	height: calc(100% - 112px);
	object-fit: contain;
}

.saha-lightbox .saha-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.saha-lightbox .saha-lightbox__btn:hover,
.saha-lightbox .saha-lightbox__btn:focus-visible {
	background: rgb(255 255 255 / 25%);
}

.saha-lightbox .saha-lightbox__close {
	top: 8px;
	right: 8px;
}

.saha-lightbox .saha-lightbox__prev {
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
}

.saha-lightbox .saha-lightbox__next {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.saha-lightbox .saha-lightbox__count {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	font-size: 14px;
	text-align: center;
}

@media (max-width: 767px) {

	.saha-lightbox .saha-lightbox__img {
		left: 8px;
		width: calc(100% - 16px);
	}

	.saha-lightbox .saha-lightbox__prev,
	.saha-lightbox .saha-lightbox__next {
		top: auto;
		bottom: 8px;
		transform: none;
	}
}

/* Video */
:where(.saha-video) {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--saha-video-ratio, 16/9);
	border-radius: var(--saha-video-radius, 8px);
	background: #0b0f14;
}

.saha-video .saha-video__poster,
.saha-video .saha-video__media,
.saha-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.saha-video .saha-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgb(0 0 0 / 65%);
	color: #fff;
	transform: translate(-50%, -50%);
	transition: background 0.15s ease;
}

.saha-video .saha-video__play:hover,
.saha-video .saha-video__play:focus-visible {
	background: var(--saha-primary, #0b5cab);
}

.saha-video .saha-video__play svg {
	width: 32px;
	height: 32px;
	margin-left: 4px;
}

/* Logo thương hiệu */
:where(.saha-logos__list) {
	display: grid;
	grid-template-columns: repeat(var(--saha-logos-cols, 6), minmax(0, 1fr));
	gap: var(--saha-logos-gap, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.saha-logos__item, .saha-logos--manual .saha-image) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--saha-logos-h, 56px) + 24px);
	margin: 0;
	padding: 12px;
	border: 1px solid var(--saha-border, #e3e6ea);
	border-radius: 8px;
	background: var(--saha-background, #fff);
}

.saha-logos .saha-logos__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--saha-heading, #111827);
	text-decoration: none;
}

.saha-logos .saha-logos__img,
.saha-logos--manual .saha-image__img {
	width: auto;
	max-width: 100%;
	height: var(--saha-logos-h, 56px);
	object-fit: contain;
}

:where(.saha-logos__name) {
	font-weight: 700;
	text-align: center;
}

.saha-logos--gray .saha-logos__img,
.saha-logos--gray .saha-image__img {
	opacity: 0.7;
	filter: grayscale(1);
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.saha-logos--gray .saha-logos__item:hover .saha-logos__img,
.saha-logos--gray .saha-logos__link:focus-visible .saha-logos__img,
.saha-logos--gray .saha-image:hover .saha-image__img {
	opacity: 1;
	filter: none;
}

/* Băng chuyền: Logo / Sản phẩm / Bài viết (dùng track của Slider, mỗi lần thấy N mục) */
.saha-logos--carousel .saha-logos__list.saha-slider__track,
.saha-products.woocommerce.saha-pcarousel ul.saha-products-grid.saha-slider__track,
.saha-posts-el--carousel .saha-posts-el__grid.saha-slider__track {
	grid-template-columns: none;
	grid-auto-columns: calc((100% - (var(--saha-slider-per-view, 4) - 1) * var(--saha-slider-gap, 16px)) / var(--saha-slider-per-view, 4));
	grid-auto-flow: column;
	gap: var(--saha-slider-gap, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.saha-logos--carousel .saha-slider__track > *,
.saha-pcarousel .saha-slider__track > li,
.saha-posts-el--carousel .saha-slider__track > li {
	scroll-snap-align: start;
}

.saha-logos--carousel .saha-slider__arrow,
.saha-pcarousel .saha-slider__arrow,
.saha-posts-el--carousel .saha-slider__arrow {
	box-shadow: 0 2px 10px rgb(15 23 42 / 18%);
}

.saha-logos--carousel .saha-slider__arrow--prev,
.saha-pcarousel .saha-slider__arrow--prev,
.saha-posts-el--carousel .saha-slider__arrow--prev {
	left: -6px;
}

.saha-logos--carousel .saha-slider__arrow--next,
.saha-pcarousel .saha-slider__arrow--next,
.saha-posts-el--carousel .saha-slider__arrow--next {
	right: -6px;
}

/* Countdown */
:where(.saha-countdown__boxes) {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
}

:where(.saha-countdown__box) {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 72px;
	padding: 12px 10px;
	border-radius: 10px;
	background: var(--saha-countdown-bg, var(--saha-secondary, #1f2937));
	color: var(--saha-countdown-color, #fff);
}

:where(.saha-countdown__num) {
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

:where(.saha-countdown__label) {
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.85;
	text-transform: uppercase;
}

:where(.saha-countdown__done) {
	margin: 0;
	font-weight: 700;
}

@media (max-width: 767px) {

	:where(.saha-countdown__box) {
		min-width: 60px;
	}

	:where(.saha-countdown__num) {
		font-size: 24px;
	}
}

/* Newsletter */
:where(.saha-nl__form) {
	display: flex;
	gap: 8px;
}

:where(.saha-nl--stacked) :where(.saha-nl__form) {
	flex-direction: column;
}

.saha-nl .saha-nl__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--saha-border, #d1d5db);
	border-radius: 6px;
	background: var(--saha-background, #fff);
	color: var(--saha-text, #1f2328);
	font: inherit;
}

.saha-nl .saha-nl__input[aria-invalid="true"] {
	border-color: var(--saha-error, #c62828);
}

.saha-nl .saha-nl__button {
	flex: 0 0 auto;
	min-height: 46px;
}

:where(.saha-nl__trap) {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

:where(.saha-nl__note) {
	margin: 8px 0 0;
	font-size: 13px;
	opacity: 0.8;
}

:where(.saha-nl__status) {
	margin: 8px 0 0;
	font-weight: 600;
}

:where(.saha-nl__status):empty {
	display: none;
}

:where(.saha-nl__status.is-error) {
	color: var(--saha-error, #c62828);
}

@media (max-width: 767px) {

	:where(.saha-nl--inline) :where(.saha-nl__form) {
		flex-direction: column;
	}
}

/* Editor: mọi tab hiện xếp chồng, có nhãn */
.saha-tabs__edit-label {
	margin: 12px 0 6px;
	padding: 2px 8px;
	border-left: 3px solid var(--saha-tabs-accent, #0b5cab);
	background: rgb(11 92 171 / 6%);
	font-size: 12px;
	font-weight: 600;
}