/*
 * Trang nội dung Real Steel: bố cục cho block/pattern của lô M1 (trang
 * chủ, Cửa Hàng, Hội Viên,
 * Huấn Luyện Cá Nhân, Dịch Vụ Phục Hồi, Chính Sách Đổi Trả) và pattern
 * realsteel/*.
 *
 * Chỉ dựng CẤU TRÚC + CSS cơ bản giống site cũ. Lớp ngữ nghĩa (rs-hero,
 * rs-split, rs-split--reverse,
 * rs-banner, rs-card, rs-feature, rs-intro, rs-cta, rs-form, rs-social,
 * rs-slider, rs-popup...) để lô redesign
 * (Q21) chỉ cần sửa CSS này, không đụng nội dung. Màu/font lấy từ
 * theme.json (--wp--preset--*).
 * Điểm ngắt giống site cũ: 849px (tablet) và 549px (điện thoại).
 */

.rs-page {
	overflow-x: clip;
}

.rs-upper {
	text-transform: uppercase;
}

.rs-justify {
	text-align: justify;
}

.rs-page figure {
	margin: 0;
}

.rs-page img {
	max-width: 100%;
	height: auto;
}

/*
 * ---- Section + đệm theo biến (class rs-pad-*, rs-pad-md-*, rs-pad-
 * sm-*) ----
 */

.rs-page .rs-section {
	box-sizing: border-box;
	padding-block: var(--rs-pad, 30px);
	padding-inline: 0;
	margin: 0;
}

@media (max-width: 849px) {

	.rs-page .rs-section {
		padding-block: var(--rs-pad-md, var(--rs-pad, 30px));
	}
}

@media (max-width: 549px) {

	.rs-page .rs-section {
		padding-block: var(--rs-pad-sm, var(--rs-pad-md, var(--rs-pad, 30px)));
	}
}

.rs-pad-0 {
	--rs-pad: 0px;
}

.rs-pad-md-0 {
	--rs-pad-md: 0px;
}

.rs-pad-sm-0 {
	--rs-pad-sm: 0px;
}

.rs-pad-10 {
	--rs-pad: 10px;
}

.rs-pad-md-10 {
	--rs-pad-md: 10px;
}

.rs-pad-sm-10 {
	--rs-pad-sm: 10px;
}

.rs-pad-20 {
	--rs-pad: 20px;
}

.rs-pad-md-20 {
	--rs-pad-md: 20px;
}

.rs-pad-sm-20 {
	--rs-pad-sm: 20px;
}

.rs-pad-30 {
	--rs-pad: 30px;
}

.rs-pad-md-30 {
	--rs-pad-md: 30px;
}

.rs-pad-sm-30 {
	--rs-pad-sm: 30px;
}

.rs-pad-40 {
	--rs-pad: 40px;
}

.rs-pad-md-40 {
	--rs-pad-md: 40px;
}

.rs-pad-sm-40 {
	--rs-pad-sm: 40px;
}

.rs-pad-50 {
	--rs-pad: 50px;
}

.rs-pad-md-50 {
	--rs-pad-md: 50px;
}

.rs-pad-sm-50 {
	--rs-pad-sm: 50px;
}

.rs-pad-60 {
	--rs-pad: 60px;
}

.rs-pad-md-60 {
	--rs-pad-md: 60px;
}

.rs-pad-sm-60 {
	--rs-pad-sm: 60px;
}

.rs-pad-65 {
	--rs-pad: 65px;
}

.rs-pad-md-65 {
	--rs-pad-md: 65px;
}

.rs-pad-sm-65 {
	--rs-pad-sm: 65px;
}

.rs-pad-80 {
	--rs-pad: 80px;
}

.rs-pad-md-80 {
	--rs-pad-md: 80px;
}

.rs-pad-sm-80 {
	--rs-pad-sm: 80px;
}

.rs-pad-100 {
	--rs-pad: 100px;
}

.rs-pad-md-100 {
	--rs-pad-md: 100px;
}

.rs-pad-sm-100 {
	--rs-pad-sm: 100px;
}

/* Cover trong section: bỏ đệm mặc định của core, nội dung full bề rộng. */
.rs-page .wp-block-cover {
	padding: 0;
}

.rs-page .wp-block-cover.rs-section {
	padding-block: var(--rs-pad, 30px);
}

/*
 * Khi nhân viên lưu trang trong trình soạn, banner không có chữ nhận thêm
 * một đoạn văn trống: không để nó chiếm chỗ.
 */
.rs-page .wp-block-cover__inner-container > p:empty {
	display: none;
}

.rs-page .wp-block-cover__inner-container,
.rs-page .wp-block-cover.has-custom-content-position.rs-section > .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
}

/* Chiều cao cover theo khổ (đè style min-height viết sẵn trong block). */
.rs-h-700 {
	min-height: 700px;
}

.rs-h-300 {
	min-height: 300px;
}

@media (max-width: 849px) {

	.rs-page .rs-h-md-450 {
		min-height: 450px !important;
	}

	.rs-page .rs-h-md-500 {
		min-height: 500px !important;
	}
}

@media (max-width: 549px) {

	.rs-page .rs-h-sm-200 {
		min-height: 200px !important;
	}

	.rs-page .rs-h-sm-300 {
		min-height: 300px !important;
	}
}

/*
 * ---- Hàng/cột (core/columns không xếp chồng sẵn; cột tự chia theo
 * class rs-col-*) ----
 */

/*
 * Độ rộng hàng theo site cũ: `.row` max-width 1250px (CSS tuỳ chỉnh
 * Flatsome), row small 1242px, row collapse 1220px, row custom_width
 * 1300px, row full-width tràn hết. Selector đủ nặng để thắng quy tắc nền;
 * `flex-wrap: wrap !important` vì lõi ép `nowrap !important` cho cột không
 * xếp chồng, làm 7 ô danh mục dồn một hàng thay vì 4 + 3.
 */
.rs-page .wp-block-columns.rs-row {
	box-sizing: border-box;
	flex-wrap: wrap !important;
	gap: 0;
	max-width: 1250px;
	margin: 0 auto;
	padding-inline: 0;
}

.rs-page .wp-block-columns.rs-row.rs-row--small {
	max-width: 1242px;
}

.rs-page .wp-block-columns.rs-row.rs-row--collapse {
	max-width: 1220px;
}

.rs-page .wp-block-columns.rs-row.rs-row--w1300 {
	max-width: 1300px;
}

.rs-page .wp-block-columns.rs-row.rs-row--full {
	max-width: none;
}

.rs-page .rs-row > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
	padding: 0 15px 15px;
}

.rs-page .rs-row--collapse > .wp-block-column {
	padding: 0;
}

.rs-page .rs-row--small > .wp-block-column {
	padding: 0 7px 14px;
}

.rs-page .rs-row--h-center {
	justify-content: center;
}

.rs-page .rs-row--h-right {
	justify-content: flex-end;
}

.rs-page .rs-row--wrap {
	flex-wrap: wrap;
}

@media (max-width: 849px) {

	.rs-page .rs-col-md-12 {
		flex: 0 0 100% !important;
	}

	.rs-page .rs-col-md-10 {
		flex: 0 0 83.333% !important;
	}

	.rs-page .rs-col-md-9 {
		flex: 0 0 75% !important;
	}

	.rs-page .rs-col-md-8 {
		flex: 0 0 66.667% !important;
	}

	.rs-page .rs-col-md-6 {
		flex: 0 0 50% !important;
	}

	.rs-page .rs-col-md-4 {
		flex: 0 0 33.333% !important;
	}

	.rs-page .rs-first-medium {
		order: -1;
	}
}

@media (max-width: 549px) {

	.rs-page .rs-col-sm-12 {
		flex: 0 0 100% !important;
	}

	.rs-page .rs-col-sm-10 {
		flex: 0 0 83.333% !important;
	}

	.rs-page .rs-col-sm-6 {
		flex: 0 0 50% !important;
	}

	.rs-page .rs-first-small {
		order: -1;
	}

	.rs-page .rs-gap-sm-0 {
		display: none;
	}
}

/* ---- Tiêu đề giữa trang có vạch hai bên (title cũ) ---- */

.rs-page .rs-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin: 1.5rem 0 1.25rem;
	font-size: 1.15rem;
	letter-spacing: 0.04em;
	text-align: center;
}

.rs-page .rs-title::before,
.rs-page .rs-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--primary);
}

.rs-page .rs-sep--center {
	margin-inline: auto;
}

.rs-page .rs-sep--small {
	width: 48px;
	height: var(--wp--custom--rule);
	margin-inline: auto;
	background: var(--wp--preset--color--primary);
}

/* ---- Hero trang chủ ---- */

.rs-page .rs-section--hero {
	min-height: 80vh;
}

.rs-page .rs-section--hero .rs-row {
	padding-bottom: 40px;
}

.rs-page .rs-section--hero .wp-block-column,
.rs-page .rs-section--banner .wp-block-column {
	container-type: inline-size;
}

.rs-page .rs-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: clamp(1.25rem, 6.3cqi, var(--wp--preset--font-size--poster));
	text-wrap: balance;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.05;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/* Dòng đầu của khẩu hiệu màu teal (nhấn), dòng sau trắng. */
.rs-page .rs-hero__title::first-line {
	color: var(--wp--preset--color--primary);
}

/* Hero: phủ đen (trái, chữ nằm ở đây) chuyển sang teal (phải). */
.rs-page .rs-section--hero > .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(100deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 55%) 50%, rgb(39 188 186 / 45%) 100%);
	opacity: 1;
}

@media (max-width: 849px) {

	.rs-page .rs-section--hero > .wp-block-cover__background {
		background-image: linear-gradient(180deg, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 80%) 100%);
	}
}

@media (max-width: 549px) {

	.rs-page .rs-section--hero {
		min-height: 330px;
	}

	.rs-page .rs-section--hero .rs-row {
		padding-top: 40vw;
		padding-bottom: 15px;
		padding-inline: 4px;
	}
}

/*
 * ---- Nửa ảnh nửa chữ (rs-split; rs-split--reverse = ảnh bên phải, rs-
 * split--media-left = ảnh bên trái) ----
 */

.rs-page .rs-split {
	align-items: center;
}

.rs-page .rs-split__media .wp-block-cover {
	width: 100%;
}

.rs-page .rs-split__body > .wp-block-columns {
	padding: 60px 0 40px;
}

.rs-page .rs-split__body > .wp-block-columns > .wp-block-column {
	container-type: inline-size;
}

.rs-page .rs-split__title {
	margin: 1.25rem 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: var(--wp--custom--tracking-title);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	text-wrap: balance;
}

/* Poster mạnh nhưng theo bề rộng cột chữ: từ dài nhất luôn vừa một dòng. */
@supports (width: 1cqi) {

	.rs-page .rs-split__title {
		font-size: clamp(1.25rem, 9.5cqi, var(--wp--preset--font-size--poster));
	}
}

@media (min-width: 850px) {

	/* Nới cột chữ: 78% của nửa trang thay vì 50%. */
	.rs-page .rs-split__body > .wp-block-columns > .wp-block-column {
		flex: 0 0 78% !important;
	}
}

.rs-page .rs-split__text {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
}

@media (max-width: 849px) {

	.rs-page .rs-split__media {
		order: -1;
	}

	.rs-page .rs-split__body > .wp-block-columns {
		padding: 60px 0;
	}
}

@media (max-width: 549px) {

	.rs-page .rs-section--split {
		padding-bottom: 50px;
	}

	.rs-page .rs-split__body > .wp-block-columns {
		padding: 20px 0;
	}

	.rs-page .rs-split__title {
		font-size: 1.5rem;
	}
}

/* ---- Banner trang (ảnh nền + hộp chữ nửa trang) ---- */

.rs-page .rs-section--banner {
	min-height: 600px;
}

.rs-page .rs-banner__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 8cqi, 4rem);
	text-wrap: balance;
	letter-spacing: var(--wp--custom--tracking-title);
	line-height: 1.05;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.rs-page .rs-banner__lead {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
}

@media (max-width: 549px) {

	.rs-page .rs-banner__lead {
		font-size: 1rem;
	}
}

/* ---- Thẻ ảnh + chữ (hộp ảnh cũ) ---- */

.rs-page .rs-card {
	overflow: hidden;
	border-radius: var(--wp--custom--radius);
	border-top: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
}

.rs-page .rs-card__media {
	overflow: hidden;
}

.rs-page .rs-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/*
 * Thẻ là khung chứa: cỡ chữ tiêu đề theo bề rộng thẻ, từ dài nhất
 * (MEMBERSHIP) luôn vừa một dòng.
 */
.rs-page .rs-card {
	container-type: inline-size;
}

.rs-page .rs-section--cards .rs-row > .wp-block-column,
.rs-page .rs-section--program .rs-row > .wp-block-column:has(> .rs-card) {
	display: flex;
	flex-direction: column;
}

.rs-page .rs-section--cards .rs-card,
.rs-page .rs-section--program .rs-card {
	flex: 1 1 auto;
}

.rs-page .rs-card__title {
	margin: 0.75rem 0 0.5rem;
	padding-inline: 0.5rem;
	font-size: clamp(0.8rem, 10cqi, 1.4rem);
	line-height: 1.2;
	text-wrap: balance;
	text-align: center;
}

.rs-page .rs-card__text {
	margin: 0;
	padding: 0 0.5rem 0.75rem;
	font-size: clamp(0.8125rem, 0.4rem + 4.2cqi, 1.15rem);
	text-align: center;
}

.rs-page .rs-section--program .rs-card__text {
	margin-top: 0.75rem;
	font-size: clamp(1rem, 9cqi, 1.75rem);
}

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

	.rs-page .rs-card__media img {
		transition: transform 0.5s ease;
	}

	.rs-page .rs-card:hover .rs-card__media img {
		transform: scale(1.05);
	}
}

/* ---- Khối chữ + ảnh xen kẽ (Huấn Luyện Cá Nhân) ---- */

/* Khối chữ + ảnh: chữ canh trái như site cũ (cột căn phải vẫn canh trái). */
.rs-page .rs-section--feature .rs-col.has-text-align-right {
	text-align: left;
}

.rs-page .rs-section--feature .wp-block-column,
.rs-page .rs-section--program .wp-block-column {
	container-type: inline-size;
}

.rs-page .rs-feature__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.25rem, 8.5cqi, 1.9rem);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
}

.rs-page .rs-feature__text {
	margin: 0;
	font-size: 1.3rem;
}

.rs-page .rs-section--feature .wp-block-image img,
.rs-page .rs-section--program .rs-col--4 {
	width: 100%;
}

@media (max-width: 849px) {

	.rs-page .rs-feature__text {
		font-size: 1.1rem;
	}
}

/* ---- Giới thiệu giữa trang, CTA, form ---- */

.rs-page .rs-intro__title,
.rs-page .rs-cta__title {
	margin: 1rem 0 0.75rem;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
}

.rs-page .rs-cta__text {
	margin: 0;
}

.rs-page .rs-section--cta .wp-block-buttons {
	margin-bottom: 0;
}

.rs-page .rs-form__title {
	margin: 0 0 1rem;
	font-size: 2rem;
	text-align: center;
}

.rs-page .rs-section--form-cover {
	min-height: 350px;
}

@media (max-width: 549px) {

	.rs-page .rs-form__title {
		font-size: 1.4rem;
	}
}

/* ---- Mạng xã hội ---- */

.rs-page .rs-social__title {
	margin: 0.5rem 0 0;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
}

.rs-page .rs-social__handle {
	margin: 0.25rem 0 1.5rem;
	font-size: 1.1rem;
}

.rs-page .rs-social__handle a {
	color: var(--wp--preset--color--white);
}

.rs-page .rs-tile img {
	display: block;
	width: 100%;
	transition: opacity 0.3s ease;
}

.rs-page .rs-tile a:hover img {
	opacity: 0.8;
}

.rs-page .rs-section--social .rs-row:last-child .wp-block-column:nth-child(1) img {
	object-position: 50% 100%;
}

.rs-page .rs-section--social .rs-row:last-child .wp-block-column:nth-child(3) img {
	object-position: 40% 40%;
}

.rs-page .rs-section--social .rs-row:last-child .wp-block-column:nth-child(4) img {
	object-position: 50% 10%;
}

/* ---- Cửa Hàng: lợi ích, ô tìm, ảnh danh mục ---- */

.rs-page .rs-perk {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Vòng tròn 42px, biểu tượng 23px bên trong: đúng cỡ site cũ ở mọi khổ. */
.rs-page .rs-perk__icon {
	display: grid;
	flex: none;
	box-sizing: border-box;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--primary-alt);
	border-radius: 50%;
}

.rs-page .rs-perk__icon img {
	display: block;
	width: 23px !important;
	height: 23px;
}

.rs-page .rs-shop-perk__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 849px) {

	.rs-page .rs-shop-perk__title {
		font-size: 0.75rem;
	}
}

/*
 * Ô tìm Cửa Hàng: PILL như site cũ (nút vẫn góc vuông theo D-23, nhưng ô
 * nhập/tìm kiếm bo tròn hoàn toàn, cùng kiểu ô form R7): nền tối trong mờ,
 * kính lúp nằm bên phải trong ô, cao >= 44px.
 */
.rs-page .rs-shop-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 4px 0 0;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: 999px;
	background: linear-gradient(rgb(255 255 255 / 0.14) 0 0), rgb(10 10 10 / 0.4);
	overflow: hidden;
}

.rs-page .rs-shop-search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 8px 0 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	font-size: 1rem;
}

.rs-page .rs-shop-search .wp-block-search__input::placeholder {
	color: rgb(255 255 255 / 0.78);
	opacity: 1;
}

.rs-page .rs-shop-search .wp-block-search__input:focus-visible {
	outline: 0;
}

.rs-page .rs-shop-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.rs-page .rs-shop-search .wp-block-search__button {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--white);
}

.rs-page .rs-shop-search .wp-block-search__button svg {
	width: 28px;
	height: 28px;
	fill: currentcolor;
}

.rs-page .rs-shop-search .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.rs-page .rs-section--shop .rs-row--small .wp-block-image img {
	display: block;
	width: 100%;
}

/*
 * ---- Khối trượt nhẹ (cuộn ngang scroll-snap; nút Previous/Next do
 * pages.js thêm) ----
 */

.rs-page .rs-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.rs-page .rs-slider::-webkit-scrollbar {
	display: none;
}

.rs-page .rs-slider > * {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.rs-page .rs-slider img {
	display: block;
	width: 100%;
}

.rs-page .rs-slide--banner {
	min-height: 0;
	aspect-ratio: 5 / 2;
}

@media (max-width: 849px) {

	.rs-page .rs-slide--banner {
		aspect-ratio: 2 / 1;
	}
}

@media (max-width: 549px) {

	.rs-page .rs-slide--banner {
		aspect-ratio: 16 / 9;
	}
}

.rs-slider-host {
	position: relative;
}

.rs-slider-nav {
	opacity: 0;
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background: rgba(0, 0, 0, 0.7);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s, color 0.2s;
}

.rs-slider-nav[hidden] {
	display: none;
}

.rs-slider-nav svg {
	display: block;
	width: 20px;
	height: 20px;
}

.rs-slider-nav:hover,
.rs-slider-nav:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

/*
 * Nút ‹ › của slider ảnh trang chủ: như prod, chỉ máy có chuột mới có nút
 * (hiện khi rê chuột vào slider hoặc khi nút nhận tiêu điểm bàn phím);
 * máy cảm ứng ẩn hẳn, vẫn vuốt + chấm chuyển slide.
 */
.rs-slider-nav:not(.rs-slider-nav--round) {
	pointer-events: none;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 85%);
	color: #111;
	box-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}

.rs-slider-nav:not(.rs-slider-nav--round):hover,
.rs-slider-nav:not(.rs-slider-nav--round):focus-visible {
	background: #fff;
	color: #111;
}

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

	.rs-slider-host:hover .rs-slider-nav:not(.rs-slider-nav--round),
	.rs-slider-host:focus-within .rs-slider-nav:not(.rs-slider-nav--round) {
		opacity: 1;
		pointer-events: auto;
	}

	.rs-slider-host:hover .rs-slider-nav:not(.rs-slider-nav--round)[disabled],
	.rs-slider-host:focus-within .rs-slider-nav:not(.rs-slider-nav--round)[disabled] {
		opacity: 0.35;
	}
}

@media (hover: none) {

	.rs-slider-nav:not(.rs-slider-nav--round) {
		display: none;
	}
}

.rs-slider-nav--prev {
	left: 8px;
}

.rs-slider-nav--next {
	right: 8px;
}

.rs-slider-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

/*
 * Nút ‹ › của hàng sản phẩm như Flickity cũ: mũi tên chevron MẢNH trắng,
 * không nền, dải cao bằng cả hàng nằm ở mép. Máy tính chỉ hiện (mờ 70%)
 * khi rê chuột vào hàng; điện thoại và máy cảm ứng luôn hiện mờ 80%. Hộp
 * bấm rộng 44px (chevron vẫn 30px / 24px như prod); ẩn ở đầu/cuối hàng.
 */
.rs-slider-nav--round {
	top: 0;
	bottom: 0;
	width: 44px;
	height: auto;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	box-shadow: none;
	transform: none;
	transition: opacity 0.3s;
}

.rs-slider-nav--round:hover,
.rs-slider-nav--round:focus-visible {
	background: transparent;
	color: #fff;
	opacity: 1;
}

.rs-slider-nav--round:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.rs-slider-nav--round.rs-slider-nav--prev {
	left: 3px;
}

.rs-slider-nav--round.rs-slider-nav--next {
	right: 3px;
}

.rs-slider-nav--round.rs-slider-nav--prev svg {
	left: 0;
}

.rs-slider-nav--round.rs-slider-nav--next svg {
	right: 0;
}

/*
 * Chevron: hộp 30px (24px ở điện thoại) padding 6px (3px) quanh nét 18px,
 * nằm ở mép ngoài của nút, cao ngang giữa vùng ảnh (giữa dải trừ 40px).
 */
.rs-slider-nav--round svg {
	position: absolute;
	top: calc(50% - 40px);
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	padding: 6px;
	transform: translateY(-50%);
	fill: currentcolor;
	filter: drop-shadow(0 0 2px rgb(0 0 0 / 55%));
}

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

	.rs-slider-host:hover .rs-slider-nav--round,
	.rs-slider-host:focus-within .rs-slider-nav--round {
		opacity: 0.7;
	}

	.rs-slider-host .rs-slider-nav--round:hover,
	.rs-slider-host .rs-slider-nav--round:focus-visible {
		opacity: 1;
	}
}

@media (hover: none), (max-width: 849px) {

	.rs-slider-host .rs-slider-nav--round {
		opacity: 0.8;
	}

	.rs-slider-host .rs-slider-nav--round.rs-slider-nav--prev {
		left: 0;
	}

	.rs-slider-host .rs-slider-nav--round.rs-slider-nav--next {
		right: 0;
	}

	.rs-slider-nav--round svg {
		width: 24px;
		height: 24px;
		padding: 3px;
	}
}

/* ---- Hàng sản phẩm WooCommerce (tạm: T2 làm thẻ sản phẩm chính thức) ---- */

/* Hàng sản phẩm và tiêu đề trang Cửa Hàng nằm trong khung 1250px như cũ. */
.rs-page .rs-section--shop > .rs-product-row,
.rs-page .rs-section--shop > .rs-title {
	box-sizing: border-box;
	max-width: 1250px;
	margin-inline: auto;
	padding-inline: 15px;
}

/*
 * Tiêu đề hàng như prod (Flatsome section-title): chữ trắng 25,6px đậm,
 * hai vạch XÁM MẢNH 2px (trắng 10%), cách hàng 24px phía dưới.
 */
.rs-page .rs-section--shop > .rs-title {
	gap: 15px;
	margin-top: 10px;
	margin-bottom: 36.8px;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
}

.rs-page .rs-section--shop > .rs-title::before,
.rs-page .rs-section--shop > .rs-title::after {
	background: rgb(255 255 255 / 10%);
}

/* Thẻ nằm sát lề hàng như prod: lề 13,55px, điện thoại 9,8px. */
.rs-page .rs-section--shop > .rs-product-row {
	margin-bottom: 0;
	padding-inline: 13.55px;
}

@media (max-width: 549px) {

	.rs-page .rs-section--shop > .rs-title {
		margin-bottom: 33px;
		font-size: 1.2rem;
	}

	.rs-page .rs-section--shop > .rs-product-row {
		padding-inline: 9.8px;
	}
}

.rs-page .rs-product-row .wc-block-product-template {
	display: flex !important;
	flex-wrap: wrap;
	gap: 19.6px;
	margin: 0;
	padding: 0 0 19.6px;
	list-style: none;
}

.rs-page .rs-product-row .wc-block-product {
	position: relative;
	container-type: inline-size;
	flex: 0 0 calc((100% - 78.4px) / 5);
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 5px;
	font-size: 0.9rem;
	background: #333;
	text-align: center;
}

.rs-page .rs-product-row--new .wc-block-product {
	flex-basis: calc((100% - 58.8px) / 4);
}

@media (max-width: 849px) {

	.rs-page .rs-product-row .wc-block-product {
		flex-basis: calc((100% - 58.8px) / 4);
	}
}

@media (max-width: 549px) {

	.rs-page .rs-product-row .wc-block-product {
		flex-basis: calc((100% - 19.6px) / 2);
		font-size: 0.85rem;
	}
}

.rs-page .rs-product-row .wc-block-components-product-stock-indicator--in-stock,
.rs-page .rs-product-row .wc-block-components-product-stock-indicator--available-on-backorder {
	display: none;
}

.rs-page .rs-product-row .wc-block-components-product-stock-indicator--out-of-stock {
	position: absolute;
	top: 40cqw;
	right: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 20px 0;
	background: rgb(255 255 255 / 90%);
	color: #333;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	opacity: 0.9;
	pointer-events: none;
}

.rs-page .rs-product-row .wc-block-components-product-image {
	margin: 0;
}

.rs-page .rs-card-cat {
	margin: 10.08px 10px 1.08px;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.rs-page .rs-card-title {
	margin: 1.44px 10px;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
}

.rs-page .rs-card-title a {
	color: var(--wp--preset--color--white);
}

.rs-page .rs-product-row .wp-block-woocommerce-product-price {
	margin: 1px 0 calc(1.4em / 1.2);
	color: var(--wp--preset--color--primary);
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1;
}

/*
 * ---- Popup (lightbox cũ): ẩn, mở bằng liên kết #id (pages.js; không JS
 * thì :target) ----
 */

body:not(.editor-styles-wrapper) .rs-popup {
	display: none;
}

body:not(.editor-styles-wrapper) .rs-popup.is-open,
html:not(.rs-js) body:not(.editor-styles-wrapper) .rs-popup:target {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 1100;
	box-sizing: border-box;
	overflow-y: auto;
	padding: 64px 20px 24px;
	background: rgba(0, 0, 0, 0.8);
}

/* Hộp canh giữa (margin:auto an toàn khi cao hơn màn hình), lề 20px hai bên. */
.rs-popup__body {
	position: relative;
	width: 100%;
	max-width: 660px;
	margin: auto;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--black);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 60px rgb(0 0 0 / 0.6);
}

/* Ảnh đầu hộp; tiêu đề đè giữa ảnh như site cũ. */
.rs-popup__body .wp-block-cover {
	align-items: center;
	min-height: 260px !important;
	padding: 0;
}

.rs-popup__body .wp-block-cover__inner-container {
	max-width: none;
	padding: 0 56px;
}

/* Tiêu đề: chữ mảnh (Gotham Light 300) hoa, kẹp giữa hai đường kẻ. */
.rs-page .rs-popup__body .rs-title {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.35em 0.5em;
	border-block: 1px solid rgb(255 255 255 / 0.75);
	color: var(--wp--preset--color--white);
	font-size: clamp(1.7rem, 7.4vw, 2.6rem);
	font-weight: 300;
	letter-spacing: 0.03em;
	line-height: 1.12;
	text-shadow: 0 2px 14px rgb(0 0 0 / 0.55);
	text-wrap: balance;
}

.rs-page .rs-popup__body .rs-title::before,
.rs-page .rs-popup__body .rs-title::after {
	content: none;
}

@media (max-width: 480px) {

	.rs-popup__body .wp-block-cover {
		min-height: 230px !important;
	}

	.rs-popup__body .wp-block-cover__inner-container {
		padding: 0 16px;
	}

	.rs-page .rs-popup__body .rs-title {
		max-width: 10em;
	}
}

/* Form trong hộp có đệm riêng, không dính mép. */
.rs-popup__body > :not(.wp-block-cover, .rs-popup__close) {
	box-sizing: border-box;
	padding: 24px 28px 32px;
}

@media (max-width: 480px) {

	.rs-popup__body > :not(.wp-block-cover, .rs-popup__close) {
		padding: 20px 16px 28px;
	}
}

/*
 * Nút đóng: NGOÀI hộp, góc trên phải lớp phủ như prod (.mfp-close).
 * position:fixed thoát overflow:hidden của hộp; hộp chừa 64px phía trên
 * nên không đè ảnh/tiêu đề.
 * Vùng chạm 44px, vòng focus teal.
 */
.rs-popup__close {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--white);
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

.rs-popup__close:hover {
	color: var(--wp--preset--color--primary);
}

.rs-popup__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	color: var(--wp--preset--color--primary);
}

html.rs-popup-open {
	overflow: hidden;
}

/* ---- Trang chính sách (HTML thường) ---- */

.rs-page--chinh-sach-doi-tra {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 15px;
}

.rs-page--chinh-sach-doi-tra ul {
	padding-left: 1.5rem;
}

/*
 * ===== Redesign mức B (D-23): áp phích thể thao, teal + đen =====
 * Chỉ CSS/JS trang trí; chữ nguồn không đổi (in hoa bằng text-transform).
 * Token: --wp--custom--cut (đường chéo), --rule (gạch teal 6px),
 * --tracking-title.
 */

/*
 * Tiêu đề: Gotham Bold, in hoa, giãn chữ. Trừ trang chính sách (HTML
 * thường) và hàng sản phẩm.
 */
.rs-page :is(h1, h2, h3):not(.rs-shop-perk__title, .rs-card-title) {
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking-title);
	text-transform: uppercase;
}

.rs-page--chinh-sach-doi-tra :is(h1, h2, h3, h4, h5, h6) {
	letter-spacing: normal;
	text-transform: none;
}

.rs-page .rs-intro__title,
.rs-page .rs-cta__title,
.rs-page .rs-social__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.rs-page .rs-feature__title {
	line-height: 1.1;
}

.rs-page .rs-form__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

/* Chữ nhấn teal cho tiêu đề phụ. */
.rs-page .rs-split__title,
.rs-page .rs-feature__title,
.rs-page .rs-intro__title,
.rs-page .rs-card__title {
	color: var(--wp--preset--color--white);
}

.rs-page .rs-card__title {
	color: var(--wp--preset--color--primary);
}

/* Dịch vụ phục hồi: bản vàng giữ tên gói chữ thường (khác Hội Viên). */
.page-id-608 .rs-page .rs-card__title {
	text-transform: none;
}

/* Ảnh tương phản cao (nhẹ). */
.rs-page .wp-block-cover__image-background,
.rs-page .rs-card__media img,
.rs-page .rs-tile img,
.rs-page .rs-slider img {
	filter: contrast(1.1) saturate(1.05);
}

/* CTA: phủ đen đậm ở giữa (chữ), lên teal nhẹ ở đáy. */
.rs-page .rs-section--cta > .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 60%) 60%, rgb(39 188 186 / 35%) 100%);
	opacity: 1;
}

/*
 * Đường chéo cắt đáy khối ảnh nền (hero, banner, CTA). Chỉ cắt góc phải-
 * dưới nên chữ không mất.
 */
.rs-page .rs-section--hero,
.rs-page .rs-section--banner,
.rs-page .rs-section--cta {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--cut)), 0 100%);
}

/* Cột ảnh của khối nửa ảnh nửa chữ: cạnh trong cắt chéo. */
.rs-page .rs-split--media-left .rs-split__media .wp-block-cover {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--wp--custom--cut)) 100%, 0 100%);
}

.rs-page .rs-split--reverse .rs-split__media .wp-block-cover {
	clip-path: polygon(var(--wp--custom--cut) 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 849px) {

	/* Xếp chồng: ảnh nằm trên chữ, cắt chéo đáy ảnh. */
	.rs-page .rs-split--media-left .rs-split__media .wp-block-cover,
	.rs-page .rs-split--reverse .rs-split__media .wp-block-cover {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--cut)), 0 100%);
	}
}

/* Hover nút trên nền ảnh giữ tương phản: teal nền + chữ đen. */
.rs-page .wp-block-button__link:hover,
.rs-page .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

/* Thẻ nổi lên khi rê chuột (tiết chế). */
@media (prefers-reduced-motion: no-preference) {

	.rs-page .rs-card {
		transition: transform 0.3s ease, border-color 0.3s ease;
	}

	.rs-page .rs-card:hover {
		transform: translateY(-4px);
	}
}

/* Số đếm: giữ chỗ để không nhảy bố cục. */
.rs-count {
	font-variant-numeric: tabular-nums;
}

/*
 * Nhãn ẩn của nút tìm giữ chữ gốc "Tìm kiếm" trong DOM (textContent) nhưng
 * không vào innerText (bản vàng không có dòng này); tên nút cho trình đọc
 * vẫn lấy từ aria-label="Tìm kiếm".
 */
.rs-search-label {
	display: none;
	text-transform: none;
}

/*
 * ===== Giỏ hàng / Thanh toán / Tài khoản (khung sáng như site cũ) =====
 * Thanh bước (khối realsteel/checkout-steps), nội dung Woo (shortcode)
 * trong khung 1250px nền trắng chữ tối.
 */
.rs-shopflow {
	background: #fff;
	color: #4a4a4a;
}

.rs-shopflow__title {
	padding: 1rem 15px;
	border-bottom: 1px solid #ececec;
	background: #f7f7f7;
}

.rs-shopflow__title .wp-block-post-title {
	margin: 0;
	color: #555;
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rs-steps {
	padding: 1.4rem 15px 0;
}

.rs-steps__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.6rem;
	font-family: var(--wp--preset--font-family--gotham), sans-serif;
	font-size: clamp(1rem, 0.7rem + 1.4vw, 1.6rem);
	text-transform: uppercase;
}

.rs-steps__item {
	color: #ccc;
	text-decoration: none;
}

.rs-steps__item.is-current {
	color: #111;
}

.rs-steps__sep {
	display: inline-flex;
	color: #aaa;
}

@media (max-width: 549px) {

	.rs-steps__item:not(.is-current),
	.rs-steps__sep {
		display: none;
	}
}

.rs-shopflow__body {
	box-sizing: border-box;
	max-width: 1250px;
	min-height: 260px;
	margin: 0 auto;
	padding: 1.5rem 15px 3rem;
}

.rs-shopflow--cart .woocommerce,
.rs-shopflow--checkout .woocommerce {
	text-align: center;
}

.rs-shopflow .wc-empty-cart-message {
	margin: 1rem 0;
}

.rs-shopflow .wc-block-components-notice-banner svg {
	display: none;
}

.rs-shopflow .wc-block-components-notice-banner {
	padding: 0;
	background: none;
	color: #4a4a4a;
}

.rs-shopflow .return-to-shop {
	margin: 0;
}

.rs-shopflow .button,
.rs-shopflow .woocommerce-button {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.rs-shopflow .button:hover,
.rs-shopflow .woocommerce-button:hover {
	background: #1f9a98;
	color: #fff;
}

/* Tài khoản: form đăng nhập Woo, nhãn đậm, ô nhập đủ rộng. */
.rs-shopflow--account .woocommerce h2 {
	margin: 0.5rem 0 1rem;
	color: #555;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rs-shopflow--account .woocommerce label {
	color: #222;
	font-weight: 700;
}

.rs-shopflow--account .woocommerce .input-text {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
}

.rs-shopflow--account .woocommerce .form-row {
	margin: 0 0 1.2rem;
}

.rs-shopflow--account .woocommerce .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.rs-shopflow--account .woocommerce a {
	color: #334862;
}

/* ---- Chấm chuyển slide (pages.js thêm) ---- */
.rs-slider-dots {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

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

.rs-slider-dot::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: rgb(0 0 0 / 35%);
	content: "";
	transform: translate(-50%, -50%);
	transition: background-color 0.2s, transform 0.2s;
}

.rs-slider-dot[aria-current="true"]::before {
	background: var(--wp--preset--color--white);
	transform: translate(-50%, -50%) scale(1.15);
}

.rs-slider-dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -4px;
}

/*
 * ===== R14 motion (D-33): hiệu ứng xuất hiện theo loại khối =====
 * Mục đích: dẫn mắt theo thứ tự đọc (tiêu đề, nội dung, nút).
 * Chỉ transform, opacity, clip-path. Tắt hoàn toàn khi prefers-reduced-motion.
 * Phần chạy khi tải (hero, banner) là CSS thuần, loại trừ trình soạn;
 * phần chạy khi cuộn chỉ áp dụng khi <html> có lớp rs-motion-ready (header.js
 * chỉ thêm sau khi observer + lưới an toàn cài xong; JS lỗi thì không thêm
 * và mọi khối hiện sẵn) cùng lớp is-in do IntersectionObserver gắn một lần.
 * Trình soạn không nạp header.js nên mọi thứ hiện sẵn.
 * Điện thoại: quãng trượt ngắn hơn, không parallax.
 */

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

	html.rs-motion-ready {
		--rs-m-d: 36px;
		--rs-m-t: 0.8s;
		--rs-m-ease: cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes rs-m-rise {

		from {
			opacity: 0;
			transform: translateY(var(--rs-m-d, 36px));
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes rs-m-zoom {

		from {
			transform: scale(1.08);
		}

		to {
			transform: scale(1);
		}
	}

	@keyframes rs-m-zoom-in {

		from {
			transform: scale(1.2);
		}

		to {
			transform: scale(1);
		}
	}

	/* Chữ hero/banner: quét lộ từng dòng, dòng teal trước, trượt lên nhẹ. */
	@keyframes rs-m-lines {

		0% {
			clip-path: inset(0 0 100% 0);
			transform: translateY(0.35em);
		}

		45% {
			clip-path: inset(0 0 52% 0);
			transform: translateY(0.18em);
		}

		100% {
			clip-path: inset(-0.2em -0.2em -0.2em -0.2em);
			transform: none;
		}
	}

	/* Ảnh nửa ảnh nửa chữ: lộ ra theo đường chéo từ phía ảnh. */
	@keyframes rs-m-wipe-l {

		0% {
			clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
			animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		}

		45% {
			clip-path: polygon(0 0, 62% 0, 30% 100%, 0 100%);
			animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
		}

		100% {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}

	@keyframes rs-m-wipe-r {

		0% {
			clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
			animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
		}

		45% {
			clip-path: polygon(38% 0, 100% 0, 100% 100%, 70% 100%);
			animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
		}

		100% {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		}
	}

	@keyframes rs-m-draw {

		from {
			transform: scaleX(0);
		}

		to {
			transform: none;
		}
	}

	@keyframes rs-m-fade {

		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes rs-m-card {

		from {
			opacity: 0;
			transform: translateY(var(--rs-m-d, 36px)) scale(0.96);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes rs-m-tile {

		from {
			opacity: 0;
			clip-path: inset(100% 0 0 0);
		}

		to {
			opacity: 1;
			clip-path: inset(0 0 0 0);
		}
	}

	@keyframes rs-m-pop {

		from {
			opacity: 0;
			transform: rotate(-120deg) scale(0.3);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes rs-m-slide-x {

		from {
			opacity: 0;
			transform: translateX(calc(var(--rs-m-d, 36px) * -0.5));
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes rs-m-shine {

		from {
			transform: translateX(-120%);
		}

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

	@keyframes rs-m-parallax {

		from {
			transform: translateY(-5%) scale(1.12);
		}

		to {
			transform: translateY(5%) scale(1.12);
		}
	}

	/* ---- Hero và banner đầu trang: chạy ngay khi tải (CSS thuần) ---- */

	body:not(.editor-styles-wrapper) .rs-page .rs-section--hero > .wp-block-cover__image-background,
	body:not(.editor-styles-wrapper) .rs-page .rs-section--banner > .wp-block-cover__image-background {
		animation: rs-m-zoom 1.6s var(--rs-m-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
	}

	body:not(.editor-styles-wrapper) .rs-page .rs-hero__title,
	body:not(.editor-styles-wrapper) .rs-page .rs-banner__title {
		animation: rs-m-lines 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
	}

	body:not(.editor-styles-wrapper) .rs-page .rs-banner__lead {
		animation: rs-m-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
		--rs-m-d: 20px;
	}

	/* ---- Nửa ảnh nửa chữ ---- */

	html.rs-motion-ready .rs-split--media-left .rs-split__media.is-in:not(.rs-in-view) {
		animation: rs-m-wipe-l 1.1s linear backwards;
	}

	html.rs-motion-ready .rs-split--reverse .rs-split__media.is-in:not(.rs-in-view) {
		animation: rs-m-wipe-r 1.1s linear backwards;
	}

	html.rs-motion-ready .rs-split__media.is-in:not(.rs-in-view) .wp-block-cover__image-background {
		animation: rs-m-zoom-in 1.5s var(--rs-m-ease) backwards;
	}

	/* Gạch teal vẽ ra, rồi tiêu đề, chữ, nút lần lượt. */
	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) > .wp-block-separator {
		transform-origin: 0 50%;
		animation: rs-m-draw 0.8s var(--rs-m-ease) 0.1s backwards;
	}

	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) > .rs-split__title {
		animation: rs-m-rise 0.8s var(--rs-m-ease) 0.2s backwards;
		--rs-m-d: 22px;
	}

	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) > .rs-split__text {
		animation: rs-m-rise 0.8s var(--rs-m-ease) 0.32s backwards;
		--rs-m-d: 22px;
	}

	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) > .wp-block-buttons {
		animation: rs-m-rise 0.8s var(--rs-m-ease) 0.44s backwards;
		--rs-m-d: 22px;
	}

	/* ---- Tiêu đề hàng (vạch hai bên): hai vạch chạy ra từ giữa ---- */

	html.rs-motion-ready .rs-reveal.rs-m-title.is-in:not(.rs-in-view) {
		animation: rs-m-fade 0.6s ease 0.15s backwards;
	}

	html.rs-motion-ready .rs-m-title.is-in:not(.rs-in-view)::before,
	html.rs-motion-ready .rs-m-title.is-in:not(.rs-in-view)::after {
		animation: rs-m-draw 1s var(--rs-m-ease) backwards;
	}

	html.rs-motion-ready .rs-m-title.is-in:not(.rs-in-view)::before {
		transform-origin: 100% 50%;
	}

	html.rs-motion-ready .rs-m-title.is-in:not(.rs-in-view)::after {
		transform-origin: 0 50%;
	}

	/* ---- Thẻ, ô danh mục, ô cam kết, hàng sản phẩm, ô form: hiện so le ---- */

	html.rs-motion-ready .rs-reveal.rs-m-card.is-in:not(.rs-in-view) {
		animation: rs-m-card var(--rs-m-t) var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
	}

	html.rs-motion-ready .rs-reveal.rs-m-tile.is-in:not(.rs-in-view) {
		animation: rs-m-tile 0.9s var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
	}

	html.rs-motion-ready .rs-m-tile.is-in:not(.rs-in-view) img {
		animation: rs-m-zoom-in 1.2s var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
	}

	html.rs-motion-ready .rs-reveal.rs-m-perk.is-in:not(.rs-in-view) {
		animation: rs-m-rise 0.7s var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
		--rs-m-d: 18px;
	}

	html.rs-motion-ready .rs-m-perk.is-in:not(.rs-in-view) .rs-perk__icon {
		animation: rs-m-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
		animation-delay: calc(var(--rs-delay, 0ms) + 150ms);
	}

	html.rs-motion-ready .rs-reveal.rs-m-prod.is-in:not(.rs-in-view) {
		animation: rs-m-rise 0.7s var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
		--rs-m-d: 16px;
	}

	html.rs-motion-ready .rs-reveal.rs-m-field.is-in:not(.rs-in-view) {
		animation: rs-m-slide-x 0.7s var(--rs-m-ease) backwards;
		animation-delay: var(--rs-delay, 0ms);
	}

	/* ---- Nút: ánh sáng quét một lần sau khi nút hiện ---- */

	html.rs-motion-ready .rs-section--cta .wp-block-buttons.is-in:not(.rs-in-view) .wp-block-button__link,
	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) .wp-block-button__link {
		position: relative;
		overflow: hidden;
	}

	html.rs-motion-ready .rs-section--cta .wp-block-buttons.is-in:not(.rs-in-view) .wp-block-button__link::after,
	html.rs-motion-ready .rs-split__body .wp-block-column.is-in:not(.rs-in-view) .wp-block-button__link::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 45%) 50%, transparent 65%);
		content: "";
		pointer-events: none;
		transform: translateX(-120%);
		animation: rs-m-shine 1.1s ease 0.9s 1 backwards;
	}

	/* Thẻ: viền teal hiện khi rê chuột (cùng lúc với nâng nhẹ có sẵn). */
	.rs-page .rs-card {
		outline: 2px solid transparent;
		outline-offset: -2px;
		transition: transform 0.3s ease, border-color 0.3s ease, outline-color 0.3s ease;
	}

	.rs-page .rs-card:hover {
		outline-color: var(--wp--preset--color--primary);
	}
}

/* Điện thoại: quãng trượt ngắn, nhịp nhanh hơn, không parallax. */
@media (prefers-reduced-motion: no-preference) and (max-width: 849px) {

	html.rs-motion-ready {
		--rs-m-d: 16px;
		--rs-m-t: 0.55s;
	}

	body:not(.editor-styles-wrapper) .rs-page .rs-hero__title,
	body:not(.editor-styles-wrapper) .rs-page .rs-banner__title {
		animation-duration: 0.9s;
	}
}

/* Parallax nhẹ ảnh nền CTA và form: CSS scroll-driven, khổ rộng. */
@media (prefers-reduced-motion: no-preference) and (min-width: 850px) {

	@supports (animation-timeline: view()) {

		body:not(.editor-styles-wrapper) .rs-page .rs-section--cta > .wp-block-cover__image-background,
		body:not(.editor-styles-wrapper) .rs-page .rs-section--form-cover > .wp-block-cover__image-background {
			animation: rs-m-parallax linear both;
			animation-timeline: view();
		}
	}
}