/*
 * Khung Real Steel: đầu trang, ngăn kéo menu, chân trang, hiệu ứng vào.
 * Màu/chữ lấy từ theme.json (biến --wp--preset--*).
 * Điểm ngắt header 1024px (dưới đó menu + nút không còn vừa một dòng),
 * chân trang 850px.
 * Lớp xếp chồng: header 50, nút lên đầu trang 40, lớp phủ 1000,
 * ngăn kéo 1001.
 */

/* Header, nội dung, footer sát nhau (không có khoảng blockGap). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Không bao giờ cuộn ngang (clip không phá position: sticky của header). */
.wp-site-blocks {
	overflow-x: clip;
}

/* Điểm focus rõ trên nền tối cho mọi liên kết/nút/ô nhập. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.rs-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	height: var(--wp--custom--header-height);
	margin: 0;
	padding: 0;

	/* Phần trống dưới thanh khi thu nhỏ không bắt chuột. */
	pointer-events: none;
}

.rs-site-header .rs-header,
.rs-site-header .rs-header__bar {
	pointer-events: auto;
}

/* Header đen tuyền; khi dính có viền teal mảnh phía dưới. */
.rs-header__bar {
	box-sizing: border-box;
	height: var(--wp--custom--header-height);
	border-bottom: 1px solid transparent;
	background: var(--wp--preset--color--black);
	transition: border-color 0.25s ease;
}

.rs-header.is-stuck .rs-header__bar {
	border-bottom-color: var(--wp--preset--color--primary);
}

.rs-header.is-stuck .rs-header__bar {
	height: var(--wp--custom--header-height-stuck);
}

.rs-header__inner {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 100%;
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 15px 0 0;
}

.rs-logo {
	display: block;
	flex: none;
	padding: 15px;
	line-height: 0;
}

.rs-logo__img {
	display: block;
	width: auto;
	height: 50px;
}

.rs-header.is-stuck .rs-logo__img {
	height: 40px;
}

.rs-menu-toggle {
	display: none;
}

.rs-nav {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.rs-menu {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-menu li {
	margin: 0 13px;
}

.rs-menu a,
.rs-drawer__menu a {
	font-family: var(--wp--preset--font-family--gotham);
	font-weight: 500;
	text-transform: capitalize;
	text-decoration: none;
}

.rs-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
	font-weight: 300;
	font-size: 1.1rem;
	color: rgb(255 255 255 / 80%);
	transition: color 0.2s;
}

.rs-menu a {
	position: relative;
}

/* Gạch teal dày chạy ra khi rê chuột / mục hiện tại. */
.rs-menu a::after {
	position: absolute;
	right: 0;
	bottom: 6px;
	left: 0;
	height: 3px;
	background: var(--wp--preset--color--primary);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.rs-menu a:hover,
.rs-menu a:focus-visible {
	color: var(--wp--preset--color--white);
}

.rs-menu a:hover::after,
.rs-menu a:focus-visible::after,
.rs-menu .current-menu-item > a::after,
.rs-menu .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.rs-menu .current-menu-item > a,
.rs-menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.rs-login {
	display: inline-flex;
	position: relative;
	flex: none;
	align-items: center;
	box-sizing: border-box;
	min-height: 38px;
	margin-left: auto;
	padding: 0 16px;
	white-space: nowrap;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s;
}

/* Vùng chạm đủ 44px dù nút hiển thị thấp hơn. */
.rs-login::after {
	position: absolute;
	inset: -3px 0;
	content: "";
}

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

/* ---- Ngăn kéo menu (điện thoại, máy tính bảng) ---- */

.rs-drawer,
.rs-overlay {
	display: none;
}

@media (max-width: 1023.98px) {

	.rs-site-header,
	.rs-header__bar,
	.rs-header.is-stuck .rs-header__bar {
		height: 70px;
	}

	.rs-nav,
	.rs-login {
		display: none;
	}

	.rs-header__inner {
		position: relative;
		justify-content: center;
	}

	.rs-logo__img,
	.rs-header.is-stuck .rs-logo__img {
		height: 40px;
	}

	.rs-menu-toggle {
		display: flex;
		position: absolute;
		left: 4px;
		top: 50%;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-top: -24px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--white);
		cursor: pointer;
	}

	.rs-menu-toggle__bars,
	.rs-menu-toggle__bars::before,
	.rs-menu-toggle__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: currentcolor;
		content: "";
	}

	.rs-menu-toggle__bars {
		position: relative;
	}

	.rs-menu-toggle__bars::before,
	.rs-menu-toggle__bars::after {
		position: absolute;
		left: 0;
	}

	.rs-menu-toggle__bars::before {
		top: -7px;
	}

	.rs-menu-toggle__bars::after {
		top: 7px;
	}

	.rs-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgb(0 0 0 / 80%);
	}

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

	/*
	 * Ngăn kéo SÁNG như site cũ (đo trên prod: nền #f4f4f4 hơi trong mờ, chữ
	 * #4a4a4a, kẻ nhạt, nút đóng trắng nằm ngoài ngăn kéo trên lớp phủ tối).
	 * --rs-drawer-active là teal đậm hơn #28bcba để mục đang mở đạt AA (4,5:1)
	 * trên nền sáng. Đổi các biến --rs-drawer-* nếu cần.
	 */
	.rs-drawer {
		--rs-drawer-bg: rgb(245 245 245 / 96%);
		--rs-drawer-text: #4a4a4a;
		--rs-drawer-line: rgb(0 0 0 / 10%);
		--rs-drawer-active: #087472;

		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		width: min(300px, 85vw);
		overflow: visible; /* nút đóng nằm ngoài mép phải như prod */
		background: var(--rs-drawer-bg);
		color: var(--rs-drawer-text);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.rs-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease;
	}

	/*
	 * Nhãn ô tìm "Tìm kiếm:" vẫn được dựng (chỉ ẩn bằng clip) khi ngăn
	 * kéo đóng, như site cũ; nhãn không focus được nên không ảnh hưởng
	 * bàn phím.
	 */
	.rs-drawer .rs-search-form > .screen-reader-text {
		visibility: visible;
	}

	.admin-bar .rs-drawer {
		top: var(--wp-admin--admin-bar--height, 0);
	}

	.rs-drawer__close {
		display: flex;
		position: absolute;
		top: 4px;
		left: 100%;
		z-index: 2;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.rs-drawer__scroll {
		box-sizing: border-box;
		height: 100%;
		padding-top: 52px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Ô tìm trong ngăn kéo: PILL (như site cũ), nền tối mờ, kính lúp bên phải. */
	.rs-search-form {
		display: flex;
		align-items: center;
		margin: 0 15px 10px;
		overflow: hidden;
		border: 1px solid #c8c8c8;
		border-radius: 999px;
		background: #fff;
	}

	.rs-search-form:focus-within {
		border-color: var(--wp--preset--color--primary);
		box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
	}

	.rs-drawer .rs-search-form input:focus-visible {
		outline: 0;
	}

	.rs-search-form__field {
		flex: 1;
		min-width: 0;
		height: 44px;
		padding: 0 8px 0 18px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #222;
		font: inherit;
		font-size: 16px;
	}

	.rs-search-form__field::placeholder {
		color: #6b6b6b;
		opacity: 1;
	}

	.rs-search-form__submit {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: #0a0a0a;
		cursor: pointer;
	}

	.rs-drawer__menu,
	.rs-drawer__menu .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.rs-drawer__menu > li,
	.rs-drawer__menu .sub-menu > li {
		border-top: 1px solid var(--rs-drawer-line);
	}

	.rs-drawer__menu a,
	.rs-panel__back {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		padding: 10px 20px;
		color: var(--rs-drawer-text);
		font-size: 0.95rem;
	}

	.rs-drawer__menu a:hover,
	.rs-drawer__menu a:focus-visible {
		color: var(--rs-drawer-active);
	}

	.rs-drawer__menu .current-menu-item > a {
		border-left: 4px solid var(--rs-drawer-active);
		color: var(--rs-drawer-active);
		font-weight: 600;
	}

	.rs-drawer__menu a:focus-visible,
	.rs-panel__back:focus-visible,
	.rs-search-form button:focus-visible,
	.rs-search-form input:focus-visible {
		outline: 3px solid var(--rs-drawer-active);
		outline-offset: -3px;
	}

	/* Nút đóng nằm trên lớp phủ tối: vòng focus teal gốc + viền trắng mảnh. */
	.rs-drawer__close:focus-visible {
		outline: 3px solid var(--wp--preset--color--primary);
		outline-offset: -3px;
		background: rgb(255 255 255 / 12%);
	}

	/* Drill-down: mục có con mở một panel trượt ngang phủ kín ngăn kéo. */
	.rs-drawer__menu .menu-item-has-children > a::after {
		margin-left: auto;
		border: solid currentcolor;
		border-width: 0 2px 2px 0;
		padding: 3px;
		content: "";
		transform: rotate(-45deg);
	}

	.rs-drawer__menu .sub-menu {
		position: absolute;
		inset: 0;
		z-index: 3;
		overflow-y: auto;
		background: var(--rs-drawer-bg);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	.rs-drawer__menu li.is-open > .sub-menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.3s ease;
	}

	.rs-panel__back {
		justify-content: flex-start;
		gap: 8px;
		border: 0;
		background: transparent;
		font: inherit;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

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

/* Không JS: giữ menu ngang dùng được, ẩn nút Menu. */
html:not(.rs-js) .rs-menu-toggle {
	display: none;
}

@media (max-width: 1023.98px) {

	html:not(.rs-js) .rs-header__inner {
		flex-wrap: wrap;
		height: auto;
	}

	html:not(.rs-js) .rs-nav {
		display: block;
		margin: 0;
	}

	html:not(.rs-js) .rs-menu {
		flex-wrap: wrap;
	}
}

/* ---- Chân trang ---- */

.rs-site-footer {
	margin: 0;
	padding: 0;
}

.rs-footer {
	border-top: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.9rem;
}

.rs-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 15px 15px;
}

.rs-footer__copy {
	order: 1;
}

.rs-footer__pay {
	display: flex;
	flex-wrap: wrap;
	order: 2;
}

.rs-pay {
	display: inline-block;
	margin: 3px 3px 0;
	padding: 3px 5px 5px;
	border-radius: 0;
	background: rgb(255 255 255 / 10%);
	color: var(--wp--preset--color--white);
	opacity: 0.75;
	transition: opacity 0.3s;
}

.rs-pay:hover {
	opacity: 1;
}

.rs-pay svg {
	display: block;
	width: auto;
	height: 24px;
}

@media (max-width: 849.98px) {

	.rs-footer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Điện thoại: logo thanh toán trên, bản quyền dưới (như site cũ). */
	.rs-footer__pay {
		order: 0;
		justify-content: center;
	}

	.rs-footer__copy {
		order: 1;
		margin-top: 10px;
	}
}

/* Nút lên đầu trang: chỉ máy tính, hiện khi đã cuộn (như site cũ). */
.rs-totop {
	display: none;
}

@media (min-width: 850px) {

	.rs-totop {
		display: flex;
		position: fixed;
		right: 20px;
		bottom: 20px;
		z-index: 40;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 2px solid var(--wp--preset--color--primary);
		border-radius: 0;
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--primary);
		cursor: pointer;
		transition: background-color 0.2s, color 0.2s;
	}

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

	.rs-totop:hover {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--black);
	}
}

/* ---- Khối chung ---- */

.rs-main {
	min-height: 40vh;
}

/* Trang 404: số 404 cỡ áp phích màu teal, chữ trắng, hai nút. */
.rs-404 {
	padding: clamp(48px, 10vw, 120px) 15px;
	text-align: center;
}

.rs-404__code {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: clamp(5.5rem, 2rem + 22vw, 14rem);
	line-height: 0.9;
	letter-spacing: 0.04em;
}

.rs-404__text {
	margin: 1rem 0 2rem;
	font-size: var(--wp--preset--font-size--large);
}

.rs-404 .wp-block-buttons {
	justify-content: center;
}

/* Trang kết quả tìm kiếm / danh sách: tiêu đề áp phích, gạch teal dày. */
.rs-main--list {
	padding: clamp(32px, 6vw, 72px) 15px;
}

.rs-main--list .wp-block-query-title,
.rs-main--list .wp-block-heading {
	margin-block: 0 1rem;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking-title);
}

.rs-main--list .wp-block-query-title::after {
	display: block;
	width: 100px;
	height: var(--wp--custom--rule);
	margin-top: 0.75rem;
	background: var(--wp--preset--color--primary);
	content: "";
}

.rs-main--list .wp-block-query-no-results {
	max-width: 65ch;
}

/* Vạch ngăn teal 100x6 (khối Separator). */
.wp-block-separator {
	width: 100px;
	max-width: 100%;
	height: var(--wp--custom--rule);
	margin-left: 0;
	margin-right: 0;
	border: 0;
	background: var(--wp--preset--color--primary);
}

.wp-block-separator.has-text-align-center,
.has-text-align-center > .wp-block-separator {
	margin-left: auto;
	margin-right: auto;
}

/* Nút vuông, viền 2px; hover nền teal + chữ đen (tương phản 9:1). */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius-button);
	text-align: center;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Kiểu nút đặc (nền teal): hover đảo màu. */
.wp-block-button.is-style-rs-solid .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-rs-solid .wp-block-button__link:hover,
.wp-block-button.is-style-rs-solid .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--primary);
}

/* ---- Hiệu ứng vào (tiết chế) ---- */

/*
 * Chỉ bật khi JS chạy và khách không tắt chuyển động. Khối ở màn hình
 * đầu không bao giờ bị ẩn.
 */

@keyframes rs-fade-left {

	from {
		opacity: 0;
		transform: translateX(-40px);
	}

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

@keyframes rs-fade-right {

	from {
		opacity: 0;
		transform: translateX(40px);
	}

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

@keyframes rs-rise {

	from {
		opacity: 0;
		transform: translateY(28px);
	}

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

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

	html.rs-motion-ready .rs-fade-left:not(.is-in),
	html.rs-motion-ready .rs-fade-right:not(.is-in),
	html.rs-motion-ready .rs-reveal:not(.is-in) {
		opacity: 0;
	}

	html.rs-motion-ready .rs-fade-left.is-in {
		animation: rs-fade-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	html.rs-motion-ready .rs-fade-right.is-in {
		animation: rs-fade-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	html.rs-motion-ready .rs-reveal.is-in {
		animation: rs-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
		animation-delay: var(--rs-delay, 0ms);
	}

	/* Khối đã ở màn hình đầu thì hiện luôn, không chạy hiệu ứng. */
	html.rs-motion-ready .is-in.rs-in-view {
		animation: none;
	}
}

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

	.rs-drawer,
	.rs-drawer.is-open,
	.rs-drawer__menu .sub-menu {
		transition: none;
	}
}