/*
 * Khối giao diện và trang chủ (docs/BLOCKS-CONTRACT.md), lô R2 (D-18,
 * docs/DESIGN-DIRECTION.md).
 * Theme tối, một màu nhấn vàng, bo 14/10/pill. Chỉ transform/opacity khi
 * chuyển động.
 * Icon: Phosphor (bold) từ @phosphor-icons/core 2.1.1, nhúng dạng mặt nạ CSS
 * (không tự vẽ path).
 */

/*
 * Tạm, xoá khi gộp R1: R1 định nghĩa các token này (cùng giá trị) trong
 * theme.json/layout.css.
 */
:root {
	--hpt-bg: #0b0b0d;
	--hpt-surface: #141418;
	--hpt-surface-2: #1c1c22;
	--hpt-line: #2a2a32;
	--hpt-text: #f2f1ee;
	--hpt-muted: #a3a3ad;
	--hpt-accent: #ffd600;
	--hpt-on-accent: #0b0b0d;
	--hpt-paper: #f6f6f4;
	--hpt-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 12px 32px rgb(0 0 0 / 45%);
}

/* Icon Phosphor bold (mặt nạ). */
:root {
	--hpt-i-truck: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M255.14%2C115.54l-14-35A19.89%2C19.89%2C0%2C0%2C0%2C222.58%2C68H196V64a12%2C12%2C0%2C0%2C0-12-12H32A20%2C20%2C0%2C0%2C0%2C12%2C72V184a20%2C20%2C0%2C0%2C0%2C20%2C20H46.06a36%2C36%2C0%2C0%2C0%2C67.88%2C0h44.12a36%2C36%2C0%2C0%2C0%2C67.88%2C0H236a20%2C20%2C0%2C0%2C0%2C20-20V120A21.7%2C21.7%2C0%2C0%2C0%2C255.14%2C115.54ZM196%2C92h23.88l6.4%2C16H196ZM80%2C204a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C80%2C204Zm92-41.92A36.32%2C36.32%2C0%2C0%2C0%2C158.06%2C180H113.94a36%2C36%2C0%2C0%2C0-67.88%2C0H36V140H172ZM172%2C116H36V76H172Zm20%2C88a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C192%2C204Zm40-24h-6.06A36.09%2C36.09%2C0%2C0%2C0%2C196%2C156.23V132h36Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-arrows-clockwise: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M228%2C48V96a12%2C12%2C0%2C0%2C1-12%2C12H168a12%2C12%2C0%2C0%2C1%2C0-24h19l-7.8-7.8a75.55%2C75.55%2C0%2C0%2C0-53.32-22.26h-.43A75.49%2C75.49%2C0%2C0%2C0%2C72.39%2C75.57%2C12%2C12%2C0%2C1%2C1%2C55.61%2C58.41a99.38%2C99.38%2C0%2C0%2C1%2C69.87-28.47H126A99.42%2C99.42%2C0%2C0%2C1%2C196.2%2C59.23L204%2C67V48a12%2C12%2C0%2C0%2C1%2C24%2C0ZM183.61%2C180.43a75.49%2C75.49%2C0%2C0%2C1-53.09%2C21.63h-.43A75.55%2C75.55%2C0%2C0%2C1%2C76.77%2C179.8L69%2C172H88a12%2C12%2C0%2C0%2C0%2C0-24H40a12%2C12%2C0%2C0%2C0-12%2C12v48a12%2C12%2C0%2C0%2C0%2C24%2C0V189l7.8%2C7.8A99.42%2C99.42%2C0%2C0%2C0%2C130%2C226.06h.56a99.38%2C99.38%2C0%2C0%2C0%2C69.87-28.47%2C12%2C12%2C0%2C0%2C0-16.78-17.16Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-tag: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M246.15%2C133.18%2C146.83%2C33.86A19.85%2C19.85%2C0%2C0%2C0%2C132.69%2C28H40A12%2C12%2C0%2C0%2C0%2C28%2C40v92.69a19.85%2C19.85%2C0%2C0%2C0%2C5.86%2C14.14l99.32%2C99.32a20%2C20%2C0%2C0%2C0%2C28.28%2C0l84.69-84.69A20%2C20%2C0%2C0%2C0%2C246.15%2C133.18Zm-98.83%2C93.17L52%2C131V52h79l95.32%2C95.32ZM104%2C88A16%2C16%2C0%2C1%2C1%2C88%2C72%2C16%2C16%2C0%2C0%2C1%2C104%2C88Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-headset: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M204.73%2C51.85A108.07%2C108.07%2C0%2C0%2C0%2C20%2C128v56a28%2C28%2C0%2C0%2C0%2C28%2C28H64a28%2C28%2C0%2C0%2C0%2C28-28V144a28%2C28%2C0%2C0%2C0-28-28H44.84A84.05%2C84.05%2C0%2C0%2C1%2C128%2C44h.64a83.7%2C83.7%2C0%2C0%2C1%2C82.52%2C72H192a28%2C28%2C0%2C0%2C0-28%2C28v40a28%2C28%2C0%2C0%2C0%2C28%2C28h19.6A20%2C20%2C0%2C0%2C1%2C192%2C228H136a12%2C12%2C0%2C0%2C0%2C0%2C24h56a44.05%2C44.05%2C0%2C0%2C0%2C44-44V128A107.34%2C107.34%2C0%2C0%2C0%2C204.73%2C51.85ZM64%2C140a4%2C4%2C0%2C0%2C1%2C4%2C4v40a4%2C4%2C0%2C0%2C1-4%2C4H48a4%2C4%2C0%2C0%2C1-4-4V140Zm124%2C44V144a4%2C4%2C0%2C0%2C1%2C4-4h20v48H192A4%2C4%2C0%2C0%2C1%2C188%2C184Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-wrench: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M230.47%2C67.5a12%2C12%2C0%2C0%2C0-19.26-4.32L172.43%2C99l-12.68-2.72L157%2C83.57l35.79-38.78a12%2C12%2C0%2C0%2C0-4.32-19.26A76.07%2C76.07%2C0%2C0%2C0%2C88.41%2C121.64L30.92%2C174.18a4.68%2C4.68%2C0%2C0%2C0-.39.38%2C36%2C36%2C0%2C0%2C0%2C50.91%2C50.91l.38-.39%2C52.54-57.49A76.05%2C76.05%2C0%2C0%2C0%2C230.47%2C67.5ZM160%2C148a51.5%2C51.5%2C0%2C0%2C1-23.35-5.52%2C12%2C12%2C0%2C0%2C0-14.26%2C2.62L64.31%2C208.66a12%2C12%2C0%2C0%2C1-17-17l63.55-58.07a12%2C12%2C0%2C0%2C0%2C2.62-14.26A51.5%2C51.5%2C0%2C0%2C1%2C108%2C96a52.06%2C52.06%2C0%2C0%2C1%2C52-52h.89L135.17%2C71.87a12%2C12%2C0%2C0%2C0-2.91%2C10.65l5.66%2C26.35a12%2C12%2C0%2C0%2C0%2C9.21%2C9.21l26.35%2C5.66a12%2C12%2C0%2C0%2C0%2C10.65-2.91L212%2C95.12c0%2C.3%2C0%2C.59%2C0%2C.89A52.06%2C52.06%2C0%2C0%2C1%2C160%2C148Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-map-pin: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M128%2C60a44%2C44%2C0%2C1%2C0%2C44%2C44A44.05%2C44.05%2C0%2C0%2C0%2C128%2C60Zm0%2C64a20%2C20%2C0%2C1%2C1%2C20-20A20%2C20%2C0%2C0%2C1%2C128%2C124Zm0-112a92.1%2C92.1%2C0%2C0%2C0-92%2C92c0%2C77.36%2C81.64%2C135.4%2C85.12%2C137.83a12%2C12%2C0%2C0%2C0%2C13.76%2C0%2C259%2C259%2C0%2C0%2C0%2C42.18-39C205.15%2C170.57%2C220%2C136.37%2C220%2C104A92.1%2C92.1%2C0%2C0%2C0%2C128%2C12Zm31.3%2C174.71A249.35%2C249.35%2C0%2C0%2C1%2C128%2C216.89a249.35%2C249.35%2C0%2C0%2C1-31.3-30.18C80%2C167.37%2C60%2C137.31%2C60%2C104a68%2C68%2C0%2C0%2C1%2C136%2C0C196%2C137.31%2C176%2C167.37%2C159.3%2C186.71Z%22%2F%3E%3C%2Fsvg%3E);
	--hpt-i-phone-call: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M140.41%2C44.9a12%2C12%2C0%2C0%2C1%2C14.69-8.49%2C90.12%2C90.12%2C0%2C0%2C1%2C64.49%2C64.49%2C12%2C12%2C0%2C1%2C1-23.18%2C6.2A66.42%2C66.42%2C0%2C0%2C0%2C148.9%2C59.59%2C12%2C12%2C0%2C0%2C1%2C140.41%2C44.9Zm87.44%2C138.68A60.27%2C60.27%2C0%2C0%2C1%2C168%2C236C86.39%2C236%2C20%2C169.61%2C20%2C88A60.27%2C60.27%2C0%2C0%2C1%2C72.42%2C28.15%2C20.05%2C20.05%2C0%2C0%2C1%2C93.2%2C40l21.11%2C47.13a1.42%2C1.42%2C0%2C0%2C0%2C.08.18%2C20%2C20%2C0%2C0%2C1-1.66%2C18.83%2C10.67%2C10.67%2C0%2C0%2C1-.85%2C1.15L92.82%2C130c7.06%2C12.84%2C20.5%2C26.16%2C33.49%2C33.21l22.31-19a13.08%2C13.08%2C0%2C0%2C1%2C1.12-.84%2C19.91%2C19.91%2C0%2C0%2C1%2C19-1.74l.18.08L216%2C162.8A20.06%2C20.06%2C0%2C0%2C1%2C227.85%2C183.58Zm-24.31-.06-42-18.81-22.43%2C19.07a11.63%2C11.63%2C0%2C0%2C1-1.11.85A20%2C20%2C0%2C0%2C1%2C118.31%2C186c-19.48-9.4-38.89-28.68-48.31-48a20%2C20%2C0%2C0%2C1%2C1.28-19.64%2C10.75%2C10.75%2C0%2C0%2C1%2C.86-1.15L91.3%2C94.49l-18.82-42A36.29%2C36.29%2C0%2C0%2C0%2C44%2C88%2C124.15%2C124.15%2C0%2C0%2C0%2C168%2C212%2C36.29%2C36.29%2C0%2C0%2C0%2C203.54%2C183.52ZM137.63%2C97.47a32%2C32%2C0%2C0%2C1%2C20.9%2C20.9%2C12%2C12%2C0%2C0%2C0%2C11.44%2C8.4%2C12.22%2C12.22%2C0%2C0%2C0%2C3.61-.55%2C12%2C12%2C0%2C0%2C0%2C7.84-15%2C56%2C56%2C0%2C0%2C0-36.59-36.59%2C12%2C12%2C0%2C1%2C0-7.2%2C22.89Z%22%2F%3E%3C%2Fsvg%3E);
}

.hpt-page {
	--hpt-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--r-card: 14px;
	--r-img: 10px;
	--gutter: clamp(16px, 4vw, 32px);
	--sec: clamp(48px, 7vw, 96px);
	--wrap: var(--hpt-container, 1400px);
	background: var(--hpt-bg);
	color: var(--hpt-text);
	font-family: var(--hpt-font-body, inherit);
	font-size: 15px;
	padding-bottom: var(--sec);
	overflow-x: clip;
}

.hpt-page :focus-visible {
	outline: 2px solid var(--hpt-focus);
	outline-offset: 3px;
}

/* Hàng: container 1400 (--hpt-container), lề theo gutter */
.hpt-row {
	box-sizing: border-box;
	max-width: var(--wrap);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--gutter);
	padding-left: var(--gutter);
}

.hpt-row--collapse {
	max-width: var(--wrap);
}

.wp-block-group.hpt-row--h-center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wp-block-columns.hpt-row {
	flex-wrap: wrap;
	gap: 0;
}

.wp-block-columns.hpt-row > .wp-block-column {
	box-sizing: border-box;
	flex-grow: 0;
	min-width: 0;
}

.hpt-section {
	margin: 0;
}

.hpt-page > .hpt-section {
	margin-top: var(--sec);
}

@media (max-width: 549px) {

	.wp-block-columns.hpt-cols--sm-1 > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Tiêu đề section: chữ sáng IN HOA, gạch vàng ngắn bên trái */
.hpt-page .hpt-section-title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 14px;
	color: var(--hpt-text) !important;
	font-family: var(--hpt-font-display, inherit);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
}

.hpt-page .hpt-section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 3px;
	border-radius: 3px;
	background: var(--hpt-accent);
	transform-origin: left;
}

/* ------------------------------------------------------------------ */

/* Nút: chính = pill vàng chữ tối                                      */

/* ------------------------------------------------------------------ */
.hpt-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--hpt-accent);
	color: var(--hpt-on-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform 0.2s var(--hpt-ease), filter 0.2s;
}

.hpt-btn .wp-block-button__link:hover,
.hpt-btn .wp-block-button__link:focus-visible {
	background: var(--hpt-accent);
	color: var(--hpt-on-accent);
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.hpt-btn .wp-block-button__link:active {
	transform: scale(0.98);
}

.hpt-btn--small .wp-block-button__link {
	min-height: 44px;
	padding: 0.5em 1.3em;
	font-size: 12px;
}

.hpt-btn--pill .wp-block-button__link {
	border-radius: 999px;
}

/* ------------------------------------------------------------------ */

/* Slider (một bộ CSS/JS cho slider trang, dải danh mục, hàng sản phẩm) */

/* ------------------------------------------------------------------ */
.hpt-slider-shell {
	position: relative;
	--gap: 0px;
	--cols: var(--c-lg, 1);
}

@media (max-width: 849px) {

	.hpt-slider-shell {
		--cols: var(--c-md, var(--c-lg, 1));
	}
}

@media (max-width: 549px) {

	.hpt-slider-shell {
		--cols: var(--c-sm, var(--c-md, var(--c-lg, 1)));
	}
}

.hpt-slider {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overflow-y: hidden; /* overflow-x:auto tự bật cuộn dọc khi thẻ nhô vài px (gạch vàng hover) → khoá */
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hpt-slider::-webkit-scrollbar {
	display: none;
}

.hpt-slider__slide {
	box-sizing: border-box;
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
	min-width: 0;
	scroll-snap-align: start;
}

.hpt-slider__slide figure {
	margin: 0;
}

.hpt-slider__slide picture {
	display: block;
}

/*
 * Slider banner đầu trang: toàn khổ, hiện trọn ảnh (ảnh có chữ in sẵn),
 * chuyển mờ chậm
 */
.hpt-slider-shell--hero {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--hpt-bg);
}

.hpt-slider-shell--hero .hpt-slider__slide {
	aspect-ratio: var(--hpt-ar, 16 / 9);
}

.hpt-slider-shell--hero .hpt-slider__slide figure,
.hpt-slider-shell--hero .hpt-slider__slide a,
.hpt-slider-shell--hero .hpt-slider__slide picture {
	display: block;
	height: 100%;
}

.hpt-slider-shell--hero .hpt-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * JS bật chế độ mờ (data-fade): các slide xếp chồng một ô lưới, slide hiện
 * tại hiện dần.
 */
.hpt-slider[data-fade] {
	display: grid;
	overflow: hidden;
	scroll-snap-type: none;
}

.hpt-slider[data-fade] > .hpt-slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.hpt-slider[data-fade] > .hpt-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s ease, visibility 0s;
}

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

	.hpt-slider[data-fade] > .hpt-slider__slide,
	.hpt-slider[data-fade] > .hpt-slider__slide.is-active {
		transition: none;
	}
}

/* Mũi tên: pill tối viền mảnh, hover viền vàng */
.hpt-slider-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hpt-line);
	border-radius: 999px;
	background: var(--hpt-overlay-btn);
	color: var(--hpt-text);
	cursor: pointer;
	transform: translateY(-50%);
	transition: border-color 0.2s, color 0.2s, transform 0.2s var(--hpt-ease);
}

.hpt-slider-nav--prev {
	left: 14px;
}

.hpt-slider-nav--next {
	right: 14px;
}

.hpt-slider-nav:hover,
.hpt-slider-nav:focus-visible {
	border-color: var(--hpt-accent);
	color: var(--hpt-accent-ink);
}

.hpt-slider-nav:active {
	transform: translateY(-50%) scale(0.96);
}

/*
 * Hàng cuộn nhiều thẻ: mũi tên nằm hàng dưới bên phải (chấm bên trái),
 * không đè thẻ
 */
.hpt-slider-shell--cats,
.hpt-slider-shell--products {
	padding-bottom: 52px;
}

.hpt-slider-shell--cats .hpt-slider-nav,
.hpt-slider-shell--products .hpt-slider-nav {
	top: auto;
	bottom: 4px;
	width: 48px;
	height: 40px;
	transform: none;
}

.hpt-slider-shell--cats .hpt-slider-nav--prev,
.hpt-slider-shell--products .hpt-slider-nav--prev {
	right: 56px;
	left: auto;
}

.hpt-slider-shell--cats .hpt-slider-nav--next,
.hpt-slider-shell--products .hpt-slider-nav--next {
	right: 0;
}

.hpt-slider-shell--cats .hpt-slider-nav:active,
.hpt-slider-shell--products .hpt-slider-nav:active {
	transform: scale(0.96);
}

.hpt-slider-nav[hidden],
.hpt-slider-dots[hidden] {
	display: none;
}

.hpt-slider-nav svg {
	display: block;
}

/* Chấm: chấm nhỏ, chấm hiện tại giãn thành viên thuốc vàng */
.hpt-slider-dots {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.hpt-slider-dot {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.hpt-slider-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgb(242 241 238 / 70%);
	box-shadow: 0 0 0 1px rgb(11 11 13 / 45%);
	transform: translate(-50%, -50%);
	transition: width 0.25s var(--hpt-ease), background 0.2s;
}

.hpt-slider-dot[aria-current="true"]::before {
	width: 22px;
	background: var(--hpt-accent);
}

.hpt-slider-shell--cats .hpt-slider-dots,
.hpt-slider-shell--products .hpt-slider-dots {
	right: auto;
	bottom: 0;
	left: 0;
	justify-content: flex-start;
}

/* Màn nhỏ: dải danh mục chỉ dùng vuốt + mũi tên (chấm 44px sẽ đè mũi tên) */
@media (max-width: 549px) {

	.hpt-slider-shell--cats .hpt-slider-dots {
		display: none;
	}
}

/* ------------------------------------------------------------------ */

/* Dải danh mục: cuộn ngang snap, thẻ ảnh phủ gradient                */

/* ------------------------------------------------------------------ */
.hpt-page > .hpt-section--category-slider {
	margin-top: 40px;
}

.hpt-page > .hpt-section--brands {
	margin-top: clamp(32px, 4vw, 56px);
}

.hpt-section--category-slider > .hpt-row {
	padding-right: var(--gutter);
	padding-left: var(--gutter);
}

.hpt-section--category-slider .hpt-slider-shell {
	--cols: 4.4;
	--gap: 12px;
}

@media (max-width: 849px) {

	.hpt-section--category-slider .hpt-slider-shell {
		--cols: 2.6;
	}
}

@media (max-width: 549px) {

	.hpt-section--category-slider .hpt-slider-shell {
		--cols: 1.6;
	}
}

.hpt-cat {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background: var(--hpt-surface);
	color: var(--hpt-text);
	text-decoration: none;
	transition: transform 0.2s var(--hpt-ease), border-color 0.2s, box-shadow 0.2s;
}

.hpt-cat__media {
	position: relative;
	display: block;
	padding-top: var(--ratio, 75%);
	background: var(--hpt-surface-2);
}

.hpt-cat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hpt-ease);
}

/* Tên danh mục nằm dưới ảnh (ảnh có chữ in sẵn nên không đè chữ lên ảnh) */
.hpt-cat__label {
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px 14px;
	border-top: 1px solid var(--hpt-line);
	background: var(--hpt-surface);
	color: var(--hpt-text);
	font-family: var(--hpt-font-body, inherit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */

/* Thẻ sản phẩm (catalog: không giá, không nút)                       */

/* ------------------------------------------------------------------ */
.hpt-slider-shell--products {
	--gap: 16px;
}

.hpt-slider-shell--products .hpt-slider {
	padding: 6px 2px 18px;
}

.hpt-slider-shell--grid .hpt-slider {
	flex-wrap: wrap;
	overflow: visible;
}

.hpt-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background: var(--hpt-surface);
	transition: transform 0.2s var(--hpt-ease), border-color 0.2s, box-shadow 0.2s;
}

.hpt-product__media {
	display: block;
	margin: 8px 8px 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--hpt-paper);
}

.hpt-product__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s var(--hpt-ease);
}

.hpt-product__name {
	margin: 0;
	padding: 14px 16px 18px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.hpt-product__name a {
	color: var(--hpt-text);
	text-decoration: none;
}


/*
 * Hai hàng sản phẩm thu gọn thành một dải nền surface tràn mép, cuộn
 * ngang, lộ nửa thẻ kế để mời cuộn
 */
.hpt-page > .hpt-section--new-arrivals,
.hpt-page > .hpt-section--popular-products {
	padding-top: 40px !important;
	padding-bottom: 8px !important;
	background: var(--hpt-surface);
	box-shadow: 0 0 0 100vmax var(--hpt-surface);
	clip-path: inset(0 -100vmax);
}

.hpt-page > .hpt-section--new-arrivals {
	margin-top: var(--sec);
	padding-top: clamp(40px, 5vw, 64px) !important;
}

.hpt-page > .hpt-section--popular-products {
	margin-top: 0;
	padding-bottom: clamp(40px, 5vw, 64px) !important;
}

.hpt-section--new-arrivals .hpt-slider-shell--products {
	--cols: 5;
}

.hpt-section--popular-products .hpt-slider-shell--products {
	--cols: 5.2;
}

@media (max-width: 849px) {

	.hpt-section--new-arrivals .hpt-slider-shell--products,
	.hpt-section--popular-products .hpt-slider-shell--products {
		--cols: 2.6;
	}
}

@media (max-width: 549px) {

	.hpt-section--new-arrivals .hpt-slider-shell--products,
	.hpt-section--popular-products .hpt-slider-shell--products {
		--cols: 1.6;
	}
}

.hpt-section--new-arrivals .hpt-product,
.hpt-section--popular-products .hpt-product {
	background: var(--hpt-surface-2);
}

/* ------------------------------------------------------------------ */

/* Ba banner: lưới bất đối xứng, 1 lớn + 2 nhỏ                         */

/* ------------------------------------------------------------------ */
.hpt-page .hpt-section--banners > .wp-block-columns {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	margin-right: auto;
	margin-left: auto;
}

.hpt-page .hpt-section--banners > .wp-block-columns > .wp-block-column {
	display: flex;
	flex: none !important;
	min-width: 0;
	padding: 0;
}

.hpt-page .hpt-section--banners > .wp-block-columns > .wp-block-column:first-child {
	grid-row: 1 / 3;
}

.hpt-section--banners .hpt-promo {
	flex: 1;
	min-height: 280px;
}

.hpt-section--banners .wp-block-column:first-child .hpt-promo {
	min-height: 456px;
}

/*
 * Ảnh RTX 610x250 nền đen thuần (tỉ lệ 2,44). Khung hẹp (dưới 1200px):
 * hiện trọn card trên nền đen cùng màu ảnh. Khung lớn từ 1200px (tỉ lệ
 * ~1,5): phủ kín nhưng dồn về phải để cả 3 quạt + đầu card còn nguyên,
 * chỉ mất rìa đen.
 */
.hpt-section--banners .wp-block-column:first-child .hpt-promo__media {
	background: #000;
}

.hpt-section--banners .wp-block-column:first-child .hpt-promo__img {
	object-fit: contain;
}

@media (min-width: 1200px) {

	.hpt-section--banners .wp-block-column:first-child .hpt-promo__img {
		object-fit: cover;
		object-position: 85% 50%;
	}
}

.hpt-section--banners .wp-block-column:first-child .hpt-promo__title {
	font-size: 22px;
}

@media (max-width: 849px) {

	.hpt-page .hpt-section--banners > .wp-block-columns {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.hpt-page .hpt-section--banners > .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.hpt-section--banners .wp-block-column:first-child .hpt-promo {
		min-height: 300px;
	}
}

@media (max-width: 549px) {

	.hpt-page .hpt-section--banners > .wp-block-columns {
		grid-template-columns: 1fr;
	}

	.hpt-page .hpt-section--banners > .wp-block-columns > .wp-block-column:first-child {
		grid-column: auto;
	}
}

.hpt-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: auto;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background: var(--hpt-surface);
	color: var(--hpt-text);
	transition: transform 0.2s var(--hpt-ease), border-color 0.2s, box-shadow 0.2s;
}

/*
 * Ảnh trên, chữ và nút dưới: chữ không bao giờ chồng lên chữ in sẵn trong
 * ảnh
 */
.hpt-promo__media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 150px;
	margin: 8px 8px 0;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--hpt-surface-2);
}

.hpt-promo__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hpt-ease);
}

.hpt-promo__shade {
	display: none;
}

.hpt-promo__inner {
	box-sizing: border-box;
	flex: none;
	width: 100%;
	padding: 16px 20px 20px;
}

.hpt-promo__title,
.hpt-promo__text {
	margin: 0 0 6px;
	color: var(--hpt-text);
}

.hpt-promo__title {
	font-family: var(--hpt-font-display, inherit);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.hpt-promo__text {
	color: var(--hpt-muted);
	font-size: 15px;
	line-height: 1.5;
}

.hpt-promo .wp-block-buttons {
	margin-top: 12px;
}

/* ------------------------------------------------------------------ */

/* Phân loại theo danh mục: bento 4 ô có ảnh nền                       */

/* ------------------------------------------------------------------ */
.hpt-page .hpt-section--categories > .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
}

.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column {
	display: flex;
	flex: none !important;
	min-width: 0;
	padding: 0;
}

.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(1),
.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(4) {
	grid-column: span 7;
}

.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(2),
.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(3) {
	grid-column: span 5;
}

@media (max-width: 849px) {

	.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(n) {
		grid-column: span 6;
	}
}

@media (max-width: 549px) {

	.hpt-page .hpt-section--categories > .wp-block-columns > .wp-block-column:nth-child(n) {
		grid-column: span 12;
	}
}

.hpt-section--categories > .hpt-row--h-center + .wp-block-columns {
	margin-top: 0;
}

.hpt-catcard {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background: var(--hpt-surface);
	transition: transform 0.2s var(--hpt-ease), border-color 0.2s, box-shadow 0.2s;
}

/* Ảnh chiếm phần trên (co theo chiều cao ô), nội dung nằm panel đặc bên dưới */
.hpt-catcard__media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 190px;
	margin: 8px 8px 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--r-img);
	background: var(--hpt-surface-2);
}

.hpt-catcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hpt-ease);
}

.hpt-catcard__body {
	flex: none;
	padding: var(--hpt-pad, 20px);
}

.hpt-page .hpt-catcard__title {
	margin: 0 0 12px;
	color: var(--hpt-text) !important;
	font-family: var(--hpt-font-display, inherit);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.hpt-page .hpt-catcard__title:not(:first-child) {
	margin-top: 18px;
}

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

.hpt-catcard__body li {
	margin: 0;
	padding: 0;
}

.hpt-catcard__body li a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--hpt-line);
	border-radius: 999px;
	background: var(--hpt-surface-2);
	color: var(--hpt-text);
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.2s;
}

.hpt-catcard__body li a:hover,
.hpt-catcard__body li a:focus-visible {
	border-color: var(--hpt-accent);
}

@media (max-width: 849px) {

	.hpt-catcard__body li a {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------ */

/* Lưới logo hãng (M28): một dải 3 ô liền nhau, logo đơn sắc (tối: trắng  */

/* ngà, sáng: mực) mờ nhẹ; rê/focus: logo rõ hẳn + vạch vàng chân ô.     */

/* ------------------------------------------------------------------ */
.hpt-logo-grid {
	--lg-logo: 0.62;

	/* Đơn sắc + cắt khung alpha ~3% của logo EVGA (feFuncA) */
	--lg-ink-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#f");
	--lg-ink-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#f");
	display: flex;
	box-sizing: border-box;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.hpt-logo-grid > .wp-block-image {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: clamp(84px, 13vw, 132px);
	margin: 0;
	padding: 0 clamp(6px, 2vw, 28px);
	border-top: 1px solid var(--hpt-line);
	border-bottom: 1px solid var(--hpt-line);
	background: transparent;
	transition: background-color 0.25s, transform 0.2s var(--hpt-ease), border-color 0.2s;
}

.hpt-logo-grid > .wp-block-image + .wp-block-image {
	border-left: 1px solid var(--hpt-line);
}

/* Vạch vàng chân ô, mọc từ giữa khi rê/focus */
.hpt-logo-grid > .wp-block-image::after {
	content: "";
	position: absolute;
	right: 24%;
	bottom: -1px;
	left: 24%;
	height: 2px;
	border-radius: 2px;
	background: var(--hpt-accent);
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity 0.25s, transform 0.3s var(--hpt-ease);
}

/* Logo gốc là PNG đen nền trong: tối = đảo thành trắng; sáng = giữ đen */
.hpt-logo-grid > .wp-block-image img {
	display: block;
	width: min(100%, 220px);
	height: auto;
	max-height: 100%;
	margin: 0;
	padding: 0;
	filter: brightness(0) invert(1);
	filter: var(--lg-ink-on-dark);
	object-fit: contain;
	object-position: center;
	opacity: var(--lg-logo);
	transition: opacity 0.3s;
}

/* Infinity cao hơn (gần vuông): thu nhỏ để cân thị giác với 2 logo ngang */
.hpt-logo-grid > .wp-block-image .wp-image-265 {
	width: min(72%, 160px);
}

/* Sáng: logo gốc đã đen; cùng bộ lọc cắt nền mờ */
:root[data-theme="light"] .hpt-logo-grid > .wp-block-image img {
	filter: brightness(0);
	filter: var(--lg-ink-on-light);
}

.hpt-logo-grid > .wp-block-image:focus-within::after {
	opacity: 1;
	transform: scaleX(1);
}

.hpt-logo-grid > .wp-block-image:focus-within img {
	opacity: 1;
}

@media (max-width: 549px) {

	.hpt-logo-grid {
		padding: 0 14px;
	}

	.hpt-logo-grid > .wp-block-image {
		min-height: 76px;
		padding: 0 6px;
	}

	.hpt-logo-grid > .wp-block-image img {
		width: 100%;
	}

	.hpt-logo-grid > .wp-block-image .wp-image-265 {
		width: 82%;
	}
}

.hpt-section--brands .wp-block-spacer {
	display: none;
}

/* ------------------------------------------------------------------ */

/* Banner Anda Seat: thẻ trong container 14px, chữ trái, ghế nằm trọn   */

/* ------------------------------------------------------------------ */

/*
 * Ảnh nền 2560x418 (tỉ lệ 6,12): dãy 4 ghế chiếm 43,3% đến 86,5% bề ngang,
 * 43% bên trái là nền đen trống, 13,5% bên phải cũng đen. Nên ảnh luôn được
 * dựng theo CHIỀU CAO (--hpt-bg-h) và dịch bằng object-position tính từ
 * chiều cao đó, để ghế không bao giờ bị cắt, bất kể bề rộng khung:
 * - từ 1100px: ghế dồn phải, chữ trái (ảnh cao --hpt-bg-h, căn giữa dọc);
 * - dưới 1100px: chữ trên, ảnh dưới, ghế căn giữa khung.
 */
.hpt-row:has(> .hpt-bgsection) {
	margin-top: var(--sec);
}

.hpt-bgsection.wp-block-cover {
	--hpt-bg-h: clamp(200px, calc((100vw - 2 * var(--gutter) - 452px) / 2.647), 260px);
	box-sizing: border-box;
	width: 100%;
	min-height: 260px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background-color: var(--hpt-bg);
	color: var(--hpt-text);
}

.hpt-bgsection .wp-block-cover__background {
	background: linear-gradient(90deg, rgb(11 11 13 / 92%) 0%, rgb(11 11 13 / 72%) 30%, rgb(11 11 13 / 0%) 50%) !important;
	opacity: 1 !important;
}

.hpt-bgsection .wp-block-cover__image-background {
	inset: 0;
	height: var(--hpt-bg-h);
	margin-block: auto;
	object-fit: cover;
}

.hpt-bgsection.homebanner-andaseat .wp-block-cover__image-background {
	object-position: calc(100% + var(--hpt-bg-h) * 0.826 - 40px) 50% !important;
}

.hpt-bgsection.wp-block-cover.has-custom-content-position .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none;
	margin: 0;
	padding: 36px 40px;
}

.hpt-bgsection .hpt-cover__inner {
	width: 100%;
}

.hpt-bgsection .wp-block-columns.hpt-row {
	max-width: none;
	margin: 0;
	padding: 0;
}

.hpt-cover__title {
	margin: 0 0 14px;
	color: var(--hpt-text);
	font-family: var(--hpt-font-display, inherit);
	font-size: clamp(20px, 1.2vw + 12px, 28px);
	font-weight: 700;
	line-height: 1.2;
}

.hpt-cover__text {
	max-width: 24em;
	margin: 0 0 24px;
	color: var(--hpt-text);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 1099px) {

	.hpt-bgsection.wp-block-cover.has-custom-content-position {
		--hpt-bg-h: min(calc((100vw - 2 * var(--gutter)) / 2.95), 300px);
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.hpt-bgsection .wp-block-cover__background {
		display: none;
	}

	.hpt-bgsection .wp-block-cover__image-background {
		position: relative;
		order: 2;
		width: 100%;
		margin-block: 0;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%);
		mask-image: linear-gradient(180deg, transparent 0, #000 35%);
	}

	.hpt-bgsection.homebanner-andaseat .wp-block-cover__image-background {
		object-position: calc(50% - var(--hpt-bg-h) * 0.91) 50% !important;
	}

	.hpt-bgsection.wp-block-cover.has-custom-content-position .wp-block-cover__inner-container {
		order: 1;
		padding: 28px 24px 0;
	}

	.hpt-bgsection .wp-block-column {
		flex-basis: 100% !important;
	}

	.hpt-cover__text {
		max-width: 34em;
	}
}

/* ------------------------------------------------------------------ */

/* Dải thông tin tối: cam kết + bảo hành + hotline gộp một dải         */

/* ------------------------------------------------------------------ */
.hpt-page .hpt-section--info-band {
	padding: 0;
}

.hpt-info {
	box-sizing: border-box;
	display: grid;
	gap: 28px;
	width: calc(100% - 2 * var(--gutter));
	max-width: calc(var(--wrap) - 2 * var(--gutter));
	margin: 0 auto;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--hpt-line);
	border-radius: var(--r-card);
	background: var(--hpt-surface);
	box-shadow: var(--hpt-shadow);
}

.hpt-page .hpt-info__usp.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.hpt-info__usp > .wp-block-column {
	flex: none !important;
	min-width: 0;
}

.hpt-usp__item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.hpt-usp__item::before,
.hpt-strip__line::before {
	content: "";
	flex: none;
	background: var(--hpt-accent);
	-webkit-mask: var(--hpt-icon) center / contain no-repeat;
	mask: var(--hpt-icon) center / contain no-repeat;
}

.hpt-usp__item::before {
	width: 34px;
	height: 34px;
}

.hpt-usp__item--truck {
	--hpt-icon: var(--hpt-i-truck);
}

.hpt-usp__item--return {
	--hpt-icon: var(--hpt-i-arrows-clockwise);
}

.hpt-usp__item--price {
	--hpt-icon: var(--hpt-i-tag);
}

.hpt-usp__item--support {
	--hpt-icon: var(--hpt-i-headset);
}

.hpt-usp__title {
	margin: 0;
	color: var(--hpt-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-align: left;
}

.hpt-page .hpt-info__contact.wp-block-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--hpt-line);
}

.hpt-info__contact > .wp-block-column {
	display: flex;
	flex: none !important;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	justify-content: center;
}

.hpt-strip__line {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--hpt-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-align: left;
}

.hpt-strip__line::before {
	width: 28px;
	height: 28px;
}

.hpt-info__line--warranty {
	--hpt-icon: var(--hpt-i-wrench);
}

.hpt-info__line--address {
	--hpt-icon: var(--hpt-i-map-pin);
}

.hpt-info__contact > .wp-block-column:last-child {
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--hpt-accent);
}

.hpt-info__line--hotline {
	--hpt-icon: var(--hpt-i-phone-call);
	color: var(--hpt-on-accent);
	font-size: 16px;
	font-weight: 700;
}

.hpt-info__line--hotline::before {
	background: var(--hpt-on-accent);
}

@media (max-width: 549px) {

	.hpt-page .hpt-info__contact.wp-block-columns {
		padding-top: 0;
		border-top: 0;
	}

	.hpt-info__contact > .wp-block-column:last-child {
		padding: 16px 18px;
	}

	.hpt-info__line--hotline {
		font-size: 14px;
	}
}

/*
 * M17: cụm liên hệ cuối trang chủ gọn 2 tầng. Dòng bảo hành/địa chỉ: nhãn nhỏ
 * muted, giá trị thường. Ô hotline: câu dẫn nhỏ + số lớn là link tel:, cả ô bấm
 * được. Chữ DOM không đổi (chỉ thêm span.hpt-info__label / a.hpt-info__tel).
 */
.hpt-info__contact .hpt-info__line {
	position: relative;
	display: block;
	padding-left: 44px;
	color: var(--hpt-text);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

.hpt-info__contact .hpt-info__line::before {
	position: absolute;
	top: 1px;
	left: 0;
	width: 28px;
	height: 28px;
}

.hpt-info__label {
	display: inline-block;
	width: 100%;
	color: var(--hpt-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
}

.hpt-info__contact > .wp-block-column:last-child {
	display: flex;
	padding: 0;
	border-radius: var(--hpt-r-card);
}

.hpt-info__contact .hpt-info__line--hotline {
	flex: 1;
	align-content: center;
	box-sizing: border-box;
	padding: 20px 24px 20px 78px;
	color: color-mix(in srgb, var(--hpt-on-accent) 82%, transparent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	transition: background-color 0.2s var(--hpt-ease);
}

.hpt-info__contact .hpt-info__line--hotline:hover {
	background: color-mix(in srgb, var(--hpt-on-accent) 6%, transparent);
	border-radius: var(--hpt-r-card);
}

.hpt-info__line--hotline::first-letter {
	text-transform: uppercase;
}

.hpt-info__contact .hpt-info__line--hotline::before {
	top: 50%;
	left: 24px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hpt-on-accent);
	-webkit-mask: none;
	mask: none;
	transform: translateY(-50%);
}

.hpt-info__contact .hpt-info__line--hotline::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 33px;
	width: 22px;
	height: 22px;
	background: var(--hpt-accent);
	-webkit-mask: var(--hpt-icon) center / contain no-repeat;
	mask: var(--hpt-icon) center / contain no-repeat;
	transform: translateY(-50%);
}

.hpt-info__tel {
	display: inline-block;
	width: 100%;
	margin-top: 2px;
	color: var(--hpt-on-accent);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-decoration: none;
}

.hpt-info__tel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--hpt-r-card);
}

.hpt-info__tel:focus-visible {
	outline: 2px solid var(--hpt-on-accent);
	outline-offset: -4px;
}

@media (max-width: 549px) {

	.hpt-info__contact .hpt-info__line--hotline {
		padding: 16px 16px 16px 68px;
	}

	.hpt-info__contact .hpt-info__line--hotline::before {
		left: 16px;
	}

	.hpt-info__contact .hpt-info__line--hotline::after {
		left: 25px;
	}

	.hpt-info__tel {
		font-size: 22px;
	}
}

@media (max-width: 849px) {

	.hpt-page .hpt-info__usp.wp-block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hpt-page .hpt-info__contact.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------
 * Hiệu ứng xuất hiện (port từ theme casa; animate.js thêm .is-visible).
 * Chỉ opacity/translate/scale. Không JS, giảm chuyển động hoặc
 * .hpt-anim-off: mọi thứ hiện sẵn. Dùng thuộc tính `translate` riêng
 * để không đụng transform của hover.
 * ---------------------------------------------------------------- */
.hpt-js:not(.hpt-anim-off) :is(
	.hpt-anim,
	.hpt-product,
	.hpt-cat,
	.hpt-promo,
	.hpt-catcard,
	.hpt-bgsection,
	.hpt-logo-grid > .wp-block-image
) {
	opacity: 0;
	translate: 0 16px;
	transition:
		opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		translate 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.2s var(--hpt-ease),
		border-color 0.2s,
		box-shadow 0.2s;
}

/* Thẻ trong dải trượt ngang: chỉ hiện dần bằng độ mờ, không trượt dọc 16px
 * (thẻ ngoài khung ngang chưa hiện sẽ giữ translate → dải cuộn dọc được). */
html.hpt-js:not(.hpt-anim-off) .hpt-slider .hpt-slider__slide :is(.hpt-product, .hpt-cat, .hpt-promo, .hpt-catcard, .hpt-anim) {
	translate: none;
}

.hpt-js:not(.hpt-anim-off) .hpt-anim--fade-left {
	translate: -16px 0;
}

.hpt-js:not(.hpt-anim-off) .hpt-anim--fade-right {
	translate: 16px 0;
}

.hpt-js:not(.hpt-anim-off) .hpt-anim--zoom-in {
	translate: none;
	scale: 0.95;
}

.hpt-js:not(.hpt-anim-off) :is(
	.hpt-anim,
	.hpt-product,
	.hpt-cat,
	.hpt-promo,
	.hpt-catcard,
	.hpt-bgsection,
	.hpt-logo-grid > .wp-block-image
).is-visible {
	opacity: 1;
	translate: none;
	scale: none;
}

/*
 * Gạch nhấn dưới tiêu đề section chạy ra từ trái khi tiêu đề hiện (thứ tự
 * đọc).
 */
.hpt-js:not(.hpt-anim-off) .hpt-section-title::after {
	transform: scaleX(0);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.hpt-js:not(.hpt-anim-off) .hpt-section-title.is-visible::after {
	transform: scaleX(1);
}

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

	.hpt-promo,
	.hpt-catcard,
	.hpt-product,
	.hpt-cat,
	.hpt-btn .wp-block-button__link,
	.hpt-slider-nav,
	.hpt-slider-dot::before,
	.hpt-logo-grid > .wp-block-image,
	.hpt-logo-grid > .wp-block-image::after,
	.hpt-logo-grid > .wp-block-image img,
	.hpt-promo__img,
	.hpt-catcard__img,
	.hpt-cat__img,
	.hpt-product__img {
		transition: none;
	}

}

/* ------------------------------------------------------------------ */

/* M6b: khung ảnh theo tỉ lệ ảnh gốc, vật thể không bị cắt              */

/* ------------------------------------------------------------------ */

/*
 * Thẻ "Phân loại theo danh mục": ảnh 2,0-2,74 nằm trong khung dẹt ~3,6
 * (đầu/bánh ghế bị cắt). Khung giữ tỉ lệ tối thiểu 2,2:1 theo bề rộng thẻ;
 * thẻ cùng hàng cao hơn thì khung nở thêm tới tỉ lệ 1,9:1 (chỉ cắt rìa
 * rỗng hai bên của ảnh), phần dư còn lại nằm dưới danh sách link.
 */
.hpt-catcard {
	container-type: inline-size;
}

.hpt-catcard__media {
	flex: 1 0 auto;
	min-height: 0;
	max-height: calc(100cqw / 1.9);
	aspect-ratio: 2.2 / 1;
}

/*
 * Ô nhỏ XR1 / Infinity (ảnh 610x250 = 2,44): khung theo đúng tỉ lệ ảnh nên
 * không cắt hai bên khi hẹp, không cắt trên dưới khi rộng.
 */
.hpt-section--banners .wp-block-column:not(:first-child) .hpt-promo__media {
	flex: 0 0 auto;
	min-height: 0;
	aspect-ratio: 610 / 250;
}

/*
 * Slider hero khổ điện thoại/máy tính bảng (dưới 850px): ảnh 2,74:1 bị khung
 * 16:9 phóng to và cắt mất ~40% hai bên. Khung theo tỉ lệ ảnh (cùng file,
 * cùng kích thước tải, khung vẫn có tỉ lệ cố định từ CSS nên không CLS).
 */
@media (max-width: 849px) {

	.hpt-slider-shell--hero.hpt-show-md:not(.has-caps) .hpt-slider__slide {
		aspect-ratio: 1024 / 373;
	}
}

/*
 * ===== M15 (lô sửa bố cục QA Q5): BẮT ĐẦU khối riêng, chỉ bố cục/kích thước,
 * không đổi màu =====
 */

/*
 * V-13: số điện thoại không bị ngắt giữa số (span do inc/blocks.php
 * nowrap_phones thêm).
 */
.hpt-nowrap {
	white-space: nowrap;
}

/*
 * V-02: hàng 4 ưu điểm hiện ở mobile dạng 2x2 gọn (bản vàng ẩn ở <550px; anh
 * yêu cầu hiện, chữ nguyên văn).
 */
@media (max-width: 549px) {

	.hpt-page .hpt-info__usp.wp-block-columns.hpt-hide-sm {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}

	.hpt-info__usp .hpt-usp__item {
		gap: 10px;
	}

	.hpt-info__usp .hpt-usp__item::before {
		width: 26px;
		height: 26px;
	}

	.hpt-info__usp .hpt-usp__title {
		font-size: 12px;
		letter-spacing: 0.02em;
		overflow-wrap: normal;
	}
}

/* V-14: nút prev/next hàng cuộn cao 44px (hàng chứa 52px). */
.hpt-slider-shell--cats .hpt-slider-nav,
.hpt-slider-shell--products .hpt-slider-nav {
	height: 44px;
}

/* V-20: nhãn dải danh mục luôn đủ chỗ 2 dòng để thẻ cao đều. */
.hpt-cat__label {
	min-height: calc(2.8em + 26px);
}

/*
 * V-17: phần dư dưới danh sách link của thẻ phân loại chia đều quanh nội dung
 * thay vì dồn một đáy.
 */
.hpt-catcard__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: center;
}

/* ===== M15: KẾT THÚC ===== */

/* ------------------------------------------------------------------ */

/* Chế độ sáng (lô M14, docs/LIGHT-MODE.md)                           */

/* ------------------------------------------------------------------ */

/*
 * Vùng chữ đè lên ảnh nền tối (banner Anda Seat, banner danh mục + breadcrumb phủ trên đó) giữ NGUYÊN bảng
 * màu tối như "một tấm ảnh": đặt lại token trong phạm vi vùng này để chữ trắng đọc được trên ảnh.
 */
:root[data-theme="light"] :is(.hpt-bgsection, .hpt-cathero--img) {
	--hpt-bg: #0b0b0d;
	--hpt-surface: #141418;
	--hpt-surface-2: #1c1c22;
	--hpt-line: #2a2a32;
	--hpt-text: #f2f1ee;
	--hpt-muted: #a3a3ad;
	--hpt-accent-ink: #ffd600;
	--hpt-focus: #ffd600;
	--w-bg: #0b0b0d;
	--w-surface: #141418;
	--w-surface-2: #1c1c22;
	--w-line: #2a2a32;
	--w-text: #f2f1ee;
	--w-muted: #a3a3ad;
	--w-accent: #ffd600;
	--wp--preset--color--bg: #0b0b0d;
	--wp--preset--color--surface: #141418;
	--wp--preset--color--surface-2: #1c1c22;
	--wp--preset--color--line: #2a2a32;
	--wp--preset--color--text: #f2f1ee;
	--wp--preset--color--muted: #a3a3ad;

	color: #f2f1ee;
	color-scheme: dark;
}

/* Breadcrumb phủ trên banner danh mục (chỉ từ 550px, xem woo.css); dưới 550px nó nằm trên nền trang nên theo chế độ. */
@media (min-width: 550px) {

	:root[data-theme="light"] .hpt-woo__crumb:has(+ .hpt-cathero--img) {
		--hpt-text: #f2f1ee;
		--hpt-muted: #a3a3ad;
		--hpt-accent-ink: #ffd600;
		--w-text: #f2f1ee;
		--w-muted: #a3a3ad;
		--w-accent: #ffd600;
		--wp--preset--color--text: #f2f1ee;
		--wp--preset--color--muted: #a3a3ad;

		color: #f2f1ee;
	}
}

/* Chấm dải danh mục/sản phẩm nằm trên nền sáng: chấm xám đậm, chấm hiện tại vàng đậm. */
:root[data-theme="light"] :is(.hpt-slider-shell--cats, .hpt-slider-shell--products) .hpt-slider-dot::before {
	background: rgb(20 20 24 / 32%);
	box-shadow: none;
}

:root[data-theme="light"] :is(.hpt-slider-shell--cats, .hpt-slider-shell--products) .hpt-slider-dot[aria-current="true"]::before {
	background: var(--hpt-accent-ink);
}

/* Tờ nội dung sáng trên nền sáng: viền mảnh + bóng ấm để tách khỏi nền. */
:root[data-theme="light"] :is(.hpt-paper, .hpt-sheet, .hpt-main--single .wp-block-post-content, .hpt-main--page > .wp-block-post-content:not(:has([class*="hpt-"], .woocommerce))) {
	border: 1px solid var(--hpt-line);
	box-shadow: var(--hpt-shadow);
}

/* Khung ảnh sản phẩm trắng trên nền sáng (chế độ tối giữ ngà #e4e3de). */
:root[data-theme="light"] .hpt-woo {
	--w-paper-soft: #fff;
}

/*
 * ===== M23: banner đầu trang kiểu trang hãng =====
 * Chuyển mờ + ảnh mới phóng nhẹ (Ken Burns), chữ HTML so le (chỉ slide có
 * chú thích), thanh tiến trình theo thời gian tự chạy, nút kính mờ, quầng
 * sáng theo màu ảnh, viền vàng mảnh. Slide đầu vẫn là <img> thật (LCP).
 */
.hpt-slider-shell--hero {
	--hpt-hero-x: max(var(--hpt-gutter), calc((100% - var(--hpt-container)) / 2 + var(--hpt-gutter)));

	position: relative;
}

.hpt-slider-shell--hero .hpt-slider__slide {
	position: relative;
	overflow: hidden;
}

.hpt-slider-shell--hero .hpt-slider__slide figure,
.hpt-slider-shell--hero .hpt-slider__slide a {
	position: relative;
}

/* Viền vàng mảnh ở đáy + quầng sáng màu ảnh tràn nhẹ xuống phần dưới. */
.hpt-slider-shell--hero::before,
.hpt-slider-shell--hero::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	pointer-events: none;
}

.hpt-slider-shell--hero::before {
	bottom: 0;
	z-index: 4;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hpt-accent) 25%, var(--hpt-accent) 75%, transparent);
	opacity: 0.7;
}

.hpt-slider-shell--hero::after {
	top: 100%;
	z-index: 1;
	height: clamp(64px, 9vw, 130px);
	background-color: var(--glow, var(--hpt-accent));
	opacity: 0.2;
	mask-image: linear-gradient(#000, transparent);
	transition: background-color 1.2s;
}

:root[data-theme="light"] .hpt-slider-shell--hero::after {
	opacity: 0.12;
}

/* Dải điều khiển đè đáy ảnh: vạch tiến trình bên trái, nút bên phải. */
.hpt-ctrl {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 56px var(--hpt-hero-x) 14px;
	background: linear-gradient(to top, rgb(8 8 10 / 62%), transparent);
	pointer-events: none;
}

.hpt-ctrl > * {
	pointer-events: auto;
}

.hpt-prog {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.hpt-bar {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	justify-content: flex-end;
	min-width: 0;
	max-width: 160px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: rgb(242 241 238 / 62%);
	font: 600 11.5px/1.2 var(--hpt-font-body);
	letter-spacing: 0.03em;
	text-align: left;
	cursor: pointer;
	transition: color 0.2s;
}

.hpt-bar:hover,
.hpt-bar[aria-current] {
	color: #f2f1ee;
}

.hpt-bar i {
	position: relative;
	display: block;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: rgb(255 255 255 / 30%);
	transition: height 0.2s var(--hpt-ease);
}

.hpt-bar:hover i {
	height: 5px;
}

.hpt-bar i::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hpt-accent);
	transform: scaleX(0);
	transform-origin: left;
}

.hpt-bar.is-done i::before,
.hpt-bar[aria-current] i::before {
	transform: scaleX(1);
}

[data-play] > .hpt-ctrl .hpt-bar[aria-current] i::before {
	animation: hpt-fill var(--dur) linear both;
}

.hpt-slider-shell--hero.is-paused[data-play] .hpt-bar[aria-current] i::before,
.hpt-slider-shell--hero.is-paused[data-play] .is-active.has-cap img {
	animation-play-state: paused;
}

.hpt-bar span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes hpt-fill {

	from {
		transform: scaleX(0);
	}
}

/* Nút kính trắng mờ, cùng kiểu M20. */
.hpt-tools {
	display: flex;
	gap: 8px;
}

.hpt-ctrl .hpt-slider-nav {
	position: relative;
	inset: auto;
	width: 36px;
	height: 36px;
	border-color: rgb(20 20 24 / 16%);
	background: rgb(255 255 255 / 82%);
	color: #141418;
	transform: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.hpt-ctrl .hpt-slider-nav::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.hpt-ctrl .hpt-slider-nav:hover,
.hpt-ctrl .hpt-slider-nav:focus-visible {
	border-color: var(--hpt-accent);
	background: var(--hpt-accent);
	color: var(--hpt-on-accent);
}

.hpt-slider-shell--hero:not([data-play]) .hpt-pp {
	display: none;
}

.hpt-pp i {
	width: 10px;
	height: 12px;
	border-right: 3px solid currentcolor;
	border-left: 3px solid currentcolor;
}

.hpt-pp[aria-label="Play"] i {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-right: 0;
	border-left: 10px solid currentcolor;
}

/* Chữ HTML đè nửa trái (slide có chú thích). */
.hpt-cap {
	position: absolute;
	top: 46%;
	left: var(--hpt-hero-x);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	max-width: min(48%, 640px);
	color: #f2f1ee;
	text-shadow: 0 2px 24px rgb(0 0 0 / 55%);
	transform: translateY(-50%);
	pointer-events: none;
}

.hpt-cap__eyebrow {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--hpt-accent);
	font: 600 13px/1.2 var(--hpt-font-body);
	letter-spacing: 0.14em;
}

.hpt-cap__eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentcolor;
}

.hpt-cap__title {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--hpt-font-display);
	font-size: clamp(22px, 2.4vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.hpt-cap__cta {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--hpt-accent);
	color: var(--hpt-on-accent);
	font: 700 13px/1 var(--hpt-font-body);
	letter-spacing: 0.08em;
	text-shadow: none;
	transition: gap 0.25s var(--hpt-ease);
}

.hpt-cap__cta::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentcolor;
	border-right: 2px solid currentcolor;
	transform: rotate(45deg);
}

a:hover > .hpt-cap .hpt-cap__cta {
	gap: 16px;
}

@keyframes hpt-cap-in {

	from {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(12px);
	}
}

@keyframes hpt-kb {

	from {
		transform: scale(1.07);
	}
}

@media (prefers-reduced-motion: no-preference) {

	html.hpt-js:not(.hpt-anim-off) .hpt-slider:not([data-fade]) .hpt-cap > * {
		opacity: 0;
	}

	.hpt-slider[data-fade] .is-active .hpt-cap > * {
		animation: hpt-cap-in 0.9s var(--hpt-ease) calc(var(--n) * 120ms + 350ms) both;
	}

	.hpt-slider-shell--hero[data-play] .is-active.has-cap img {
		animation: hpt-kb var(--dur) cubic-bezier(0.2, 0.6, 0.3, 1) both;
	}
}

/*
 * Điện thoại/máy tính bảng: banner vuông, chữ ở đáy ảnh, dải điều khiển
 * riêng dưới ảnh, vuốt để chuyển.
 */
@media (max-width: 849px) {

	.hpt-slider-shell--hero {
		padding-bottom: 44px;
	}

	.hpt-ctrl {
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background: none;
	}

	.hpt-prog {
		max-width: none;
	}

	.hpt-bar {
		justify-content: center;
		max-width: none;
	}

	.hpt-bar span,
	.hpt-ctrl .hpt-slider-nav--prev,
	.hpt-ctrl .hpt-slider-nav--next {
		display: none;
	}

	.hpt-cap {
		top: auto;
		right: 16px;
		bottom: 16px;
		left: 16px;
		gap: 10px;
		max-width: none;
		transform: none;
	}

	.hpt-cap__eyebrow {
		font-size: 12px;
	}

	.hpt-cap__title {
		font-size: clamp(20px, 6vw, 30px);
		-webkit-line-clamp: 2;
	}

	.hpt-cap__cta {
		height: 40px;
		padding: 0 20px;
	}
}

/* ------------------------------------------------------------------ */

/* M25: ngôn ngữ hover chung cho thẻ trang chủ                          */

/* ------------------------------------------------------------------ */

/*
 * Banner (.hpt-promo), dải danh mục (.hpt-cat), Phân loại theo danh mục
 * (.hpt-catcard), thẻ sản phẩm (.hpt-product), ô logo hãng: thẻ đứng yên,
 * không nhảy, không viền vàng đậm. Chỉ ảnh phóng rất chậm + sáng lên, một dải
 * sáng chéo lướt qua ảnh một lần, viền thẻ sáng nhẹ, gạch vàng mảnh quét dưới
 * tiêu đề. Chỉ transform/opacity/filter. Chuột thật mới có hiệu ứng (cảm ứng
 * không bị hover dính); giảm chuyển động chỉ đổi viền. Focus giữ viền vàng đậm.
 */
:is(.hpt-promo, .hpt-cat, .hpt-catcard, .hpt-product) {
	--hpt-hv-edge: color-mix(in srgb, var(--hpt-accent-ink) 38%, var(--hpt-line));
}

:is(.hpt-promo__media, .hpt-cat__media, .hpt-catcard__media, .hpt-product__media) {
	isolation: isolate;
}

:is(.hpt-promo__img, .hpt-cat__img, .hpt-catcard__img, .hpt-product__img) {
	transition: transform 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 700ms ease-out;
	will-change: auto;
}

/* Gạch vàng mảnh dưới tiêu đề (quét từ trái) */
:is(.hpt-promo__title, .hpt-catcard__title:first-child, .hpt-cat__label, .hpt-product__name) {
	position: relative;
}

:is(.hpt-promo__title, .hpt-catcard__title:first-child, .hpt-cat__label, .hpt-product__name)::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 40px;
	height: 2px;
	border-radius: 2px;
	background: var(--hpt-accent-ink);
	opacity: 0;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--hpt-ease), opacity 200ms;
}

.hpt-cat .hpt-cat__label::after {
	top: 36px;
	bottom: auto;
	left: 14px;
}

.hpt-product .hpt-product__name::after {
	bottom: 10px;
	left: 16px;
}

.hpt-promo .hpt-promo__title::after {
	bottom: -4px;
}

/* Focus bằng bàn phím: viền vàng đậm như cũ, mọi thiết bị */
.hpt-cat:focus-visible,
:is(.hpt-promo, .hpt-catcard, .hpt-product):has(:focus-visible) {
	border-color: var(--hpt-accent);
}

@media (hover: hover) and (pointer: fine) {

	:is(.hpt-promo, .hpt-cat, .hpt-catcard, .hpt-product):hover {
		border-color: var(--hpt-hv-edge);
	}

	.hpt-logo-grid > .wp-block-image:hover {
		background: color-mix(in srgb, var(--hpt-surface-2) 70%, transparent);
	}

	.hpt-logo-grid > .wp-block-image:hover::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.hpt-logo-grid > .wp-block-image:hover img {
		opacity: 1;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	:is(.hpt-promo, .hpt-cat, .hpt-catcard, .hpt-product):hover :is(.hpt-promo__img, .hpt-cat__img, .hpt-catcard__img, .hpt-product__img) {
		filter: brightness(var(--hv-bright, 1.06));
		transform: scale(var(--hv-zoom, 1.03));
	}

	:is(.hpt-promo, .hpt-cat, .hpt-catcard, .hpt-product):hover :is(.hpt-promo__title, .hpt-catcard__title:first-child, .hpt-cat__label, .hpt-product__name)::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.hpt-promo:hover .hpt-btn .wp-block-button__link {
		filter: brightness(1.1);
		transform: none;
	}

}

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

	:is(.hpt-promo__img, .hpt-cat__img, .hpt-catcard__img, .hpt-product__img),
	:is(.hpt-promo__title, .hpt-catcard__title, .hpt-cat__label, .hpt-product__name)::after {
		transition: none;
	}
}

/* stylelint-disable @stylistic/max-line-length, @stylistic/function-comma-space-after, @stylistic/function-parentheses-space-inside, @stylistic/declaration-colon-newline-after */

/* ------------------------------------------------------------------ */

/* M26: banner đầu trang hòa vào chế độ sáng                            */

/* ------------------------------------------------------------------ */

/*
 * Hero vẫn là "sân khấu tối" ở chế độ sáng (ảnh studio tối giữ nguyên, chữ trắng/vàng, nút kính trắng).
 * Mép dưới ảnh chuyển dần sang nền trang sáng (pseudo ::before, thay viền vàng mảnh vốn chỉ hợp nền tối),
 * dải điều khiển được nâng lên khỏi vùng chuyển để nằm trên ảnh tối, quầng sáng màu ảnh đổi sang nhân (multiply)
 * với màu nhạt để tràn xuống nền sáng không bẩn. Chế độ tối không đổi. Chỉ CSS, không đổi kích thước/bố cục.
 */
:root[data-theme="light"] .hpt-slider-shell--hero {
	--hpt-hero-fade: 0px;
	--hpt-focus: #ffd600;
	--hpt-accent-ink: #ffd600;
}

/* Anh bỏ vùng chuyển tối -> sáng + quầng sáng dưới hero (30/10: "gớm quá bỏ đi"): mép dưới cắt gọn. */
:root[data-theme="light"] .hpt-slider-shell--hero::before,
:root[data-theme="light"] .hpt-slider-shell--hero::after {
	display: none;
}

/* Màn hình rộng: dải điều khiển nâng lên trên vùng chuyển (vạch tiến trình + nhãn nằm trên ảnh tối, giữ màu sáng). */
@media (min-width: 850px) {

	:root[data-theme="light"] .hpt-ctrl {
		padding-bottom: calc(14px + var(--hpt-hero-fade));
		background: linear-gradient(to top, transparent, rgb(8 8 10 / 50%) 38%, transparent);
	}
}

/* Điện thoại/máy tính bảng: dải 44px nằm dưới ảnh, trên nền sáng -> màu tối theo token. */
@media (max-width: 849px) {

	/* Nâng chú thích khỏi vùng chuyển để nút TÌM HIỂU không bị phủ sáng. */
	:root[data-theme="light"] .hpt-slider-shell--hero .hpt-cap {
		bottom: calc(var(--hpt-hero-fade) * 0.75 + 8px);
	}

	:root[data-theme="light"] .hpt-ctrl {
		--hpt-focus: #826200;
	}

	:root[data-theme="light"] .hpt-bar {
		color: var(--hpt-muted);
	}

	:root[data-theme="light"] .hpt-bar:hover,
	:root[data-theme="light"] .hpt-bar[aria-current] {
		color: var(--hpt-text);
	}

	:root[data-theme="light"] .hpt-bar i {
		background: rgb(20 20 24 / 18%);
	}

	:root[data-theme="light"] .hpt-bar i::before {
		background: var(--hpt-accent-ink);
	}

	:root[data-theme="light"] .hpt-ctrl .hpt-slider-nav {
		border-color: rgb(20 20 24 / 38%);
		background: var(--hpt-surface);
		color: #141418;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	:root[data-theme="light"] .hpt-ctrl .hpt-slider-nav:hover,
	:root[data-theme="light"] .hpt-ctrl .hpt-slider-nav:focus-visible {
		border-color: var(--hpt-accent);
		background: var(--hpt-accent);
		color: var(--hpt-on-accent);
	}
}

/* stylelint-enable @stylistic/max-line-length, @stylistic/function-comma-space-after, @stylistic/function-parentheses-space-inside, @stylistic/declaration-colon-newline-after */