/*
Theme Name: Melon Theme
Theme URI: https://example.test/melon-theme
Author: Melon Hotel
Description: Melon staging block theme — room archive and room detail templates for the MVP slice.
Version: 0.3.0
Update URI: false
Text Domain: melon-theme
Requires at least: 6.6
Requires PHP: 8.1
*/

/* ==========================================================================
   Melon Theme — bam mockup Stitch L'Amour Noire (DESIGN.md):
   nen Midnight Sapphire #080812, CTA Electric Blush #FF4D94, body Lavender
   Grey #B4B4D8, heading EB Garamond (khop mockup Libre Caslon — Caslon khong co tieng Viet). Breakpoint 375 / 1440.
   ========================================================================== */

:root {
	--melon-margin: 1.5rem;
	--melon-gutter: 2.5rem;
	--melon-section-gap: 4rem;
	--melon-radius: 0.5rem;
	--melon-radius-lg: 1.5rem;
	--melon-electric-blush: #ff4d94;
	--melon-lavender-grey: #b4b4d8;
	--melon-deep-navy: #16162d;
	--melon-midnight-sapphire: #080812;
	--melon-surface: #12121d;
	--melon-on-surface: #e4e1f0;
	--melon-serif: var(--wp--preset--font-family--eb-garamond, "EB Garamond", Georgia, serif);
	--melon-sans: var(--wp--preset--font-family--plus-jakarta-sans, "Plus Jakarta Sans", system-ui, sans-serif);
	--melon-glass-bg: rgba(22, 22, 45, 0.8);
	--melon-glass-border: rgba(180, 180, 216, 0.15);
	--melon-glow: 0 0 30px rgba(255, 77, 148, 0.25);
}

@media (min-width: 1024px) {
	:root {
		--melon-margin: 6rem;
		--melon-section-gap: 8rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	background: var(--melon-midnight-sapphire);
	color: var(--melon-lavender-grey);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--melon-electric-blush);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Header -------------------------------------------------------------------- */

.melon-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 1.25rem var(--melon-margin);
	background: rgba(8, 8, 18, 0.8);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(180, 180, 216, 0.1);
}

.melon-header__brand {
	margin: 0;
	font-family: var(--melon-serif);
	font-size: 1.6rem;
	letter-spacing: -0.02em;
}

.melon-header__brand a {
	color: var(--melon-electric-blush);
	text-decoration: none;
}

.melon-header__nav {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.melon-header__nav p {
	margin: 0;
}

.melon-header__nav a {
	font-family: var(--melon-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
	text-decoration: none;
	transition: color 0.3s ease;
}

.melon-header__nav a:hover,
.melon-header__nav a:focus-visible {
	color: var(--melon-electric-blush);
}

.melon-header__cta a {
	display: inline-block;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	padding: 0.7rem 1.4rem;
	border-radius: var(--melon-radius);
	transition: box-shadow 0.3s ease;
}

.melon-header__cta a:hover,
.melon-header__cta a:focus-visible {
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 30px rgba(255, 77, 148, 0.4);
}

@media (max-width: 640px) {
	.melon-header {
		flex-wrap: wrap !important;
		gap: 0.75rem;
	}
	.melon-header__nav {
		gap: 1.1rem;
	}
}

/* Footer --------------------------------------------------------------------- */

.melon-footer {
	padding: var(--melon-section-gap) var(--melon-margin) 4rem;
	text-align: center;
	border-top: 1px solid rgba(180, 180, 216, 0.1);
	background: var(--melon-midnight-sapphire);
}

.melon-footer__brand {
	font-family: var(--melon-serif);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: var(--melon-electric-blush);
	margin: 0 0 1.5rem;
}

.melon-footer__branches {
	margin: 0 0 1.25rem;
	color: var(--melon-lavender-grey);
	font-size: 0.9rem;
	line-height: 1.9;
}

.melon-footer__links {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.melon-footer__links a {
	color: var(--melon-lavender-grey);
	text-decoration: none;
}

.melon-footer__links a:hover,
.melon-footer__links a:focus-visible {
	color: var(--melon-electric-blush);
}

/* Room archive ---------------------------------------------------------------- */

.melon-room-archive {
	padding: 3.5rem var(--melon-margin) var(--melon-section-gap);
}

.melon-room-archive__hero {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	border-bottom: 1px solid rgba(255, 77, 148, 0.2);
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.melon-room-archive__title {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.melon-room-archive__intro {
	color: rgba(180, 180, 216, 0.75);
	margin: 0;
	max-width: 40rem;
}

.melon-room-archive__collection {
	margin: 0;
	color: rgba(180, 180, 216, 0.5);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.melon-room-archive__collection {
		display: none;
	}
}

.melon-room-archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 3rem;
	padding: 0;
}

.melon-room-archive__filters p {
	margin: 0;
}

.melon-room-archive__filters a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
	color: var(--melon-lavender-grey);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.melon-room-archive__filters a:hover,
.melon-room-archive__filters a:focus-visible,
.melon-room-archive__filters a[aria-current="page"] {
	border-color: rgba(255, 77, 148, 0.4);
	color: var(--melon-electric-blush);
}

.melon-room-archive__grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--melon-gutter);
	row-gap: 4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.melon-room-archive__grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Room card — anh tran mep, khong khung (mockup list) ------------------------- */

.melon-room-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.melon-room-card__media {
	position: relative;
	display: block;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
}

.melon-room-card__image {
	width: 100%;
	height: 320px;
	object-fit: cover;
	transition: transform 0.7s ease;
}

@media (min-width: 1024px) {
	.melon-room-card__image {
		height: 450px;
	}
}

.melon-room-card__media:hover .melon-room-card__image,
.melon-room-card__media:focus-visible .melon-room-card__image {
	transform: scale(1.05);
}

.melon-room-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(8, 8, 18, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(180, 180, 216, 0.25);
	border-radius: 999px;
	color: var(--melon-lavender-grey);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
}

.melon-room-card__body {
	display: flex;
	flex-direction: column;
	padding: 0 0.25rem;
}

.melon-room-card__title {
	font-family: var(--melon-serif);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: var(--melon-electric-blush);
	margin: 0 0 0.75rem;
}

.melon-room-card__title a {
	color: inherit;
	text-decoration: none;
}

.melon-room-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 1.25rem;
	color: rgba(180, 180, 216, 0.85);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.melon-room-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.melon-room-card__prices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1.1rem 0;
	border-top: 1px solid rgba(180, 180, 216, 0.1);
	border-bottom: 1px solid rgba(180, 180, 216, 0.1);
	text-align: center;
}

.melon-room-card__price {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.melon-room-card__price + .melon-room-card__price {
	border-left: 1px solid rgba(180, 180, 216, 0.1);
}

.melon-room-card__price-mode {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(180, 180, 216, 0.85);
}

.melon-room-card__price-amount {
	color: var(--melon-on-surface);
	font-weight: 600;
}

.melon-room-card__cta,
.melon-room-detail__cta {
	display: block;
	text-align: center;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	font-family: var(--melon-sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--melon-radius);
	padding: 1.1rem;
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.2);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.melon-room-card__cta:hover,
.melon-room-card__cta:focus-visible,
.melon-room-detail__cta:hover,
.melon-room-detail__cta:focus-visible {
	box-shadow: 0 0 30px rgba(255, 77, 148, 0.4);
	transform: translateY(-2px);
}

/* Room detail — hero full-bleed immersive (mockup chi tiet phong) ------------- */

.melon-single-room {
	padding: 0 0 var(--melon-section-gap);
}

.melon-room-detail__hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	margin: 0 0 var(--melon-section-gap);
}

.melon-room-detail__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.melon-room-detail__hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--melon-midnight-sapphire) 2%, rgba(8, 8, 18, 0.55) 55%, rgba(8, 8, 18, 0.1) 100%);
	z-index: 1;
}

.melon-room-detail__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 3rem var(--melon-margin) 4rem;
}

.melon-room-detail__badge {
	display: inline-block;
	background: rgba(22, 22, 45, 0.85);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	padding: 0.45rem 1rem;
	margin-bottom: 1.25rem;
}

.melon-room-detail__title {
	font-family: var(--melon-serif);
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--melon-on-surface);
	margin: 0 0 1rem;
}

.melon-room-detail__lead {
	color: var(--melon-lavender-grey);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 42rem;
	margin: 0 0 0.75rem;
}

.melon-room-detail__meta {
	color: rgba(180, 180, 216, 0.85);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.75rem;
	font-weight: 600;
}

.melon-room-detail__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--melon-section-gap);
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--melon-margin);
}

@media (min-width: 1024px) {
	.melon-room-detail__body {
		grid-template-columns: 7fr 5fr;
		column-gap: var(--melon-gutter);
		align-items: start;
	}
}

.melon-room-detail__main {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	min-width: 0;
}

.melon-room-detail__amenities h2,
.melon-room-detail__gallery h2 {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 1.5rem;
}

.melon-room-detail__amenity-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.melon-room-detail__amenity {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	backdrop-filter: blur(10px);
	border-radius: var(--melon-radius);
	padding: 1.5rem;
	transition: border-color 0.5s ease;
}

.melon-room-detail__amenity:hover {
	border-color: rgba(255, 77, 148, 0.5);
}

.melon-room-detail__amenity-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background: var(--melon-deep-navy);
	color: var(--melon-electric-blush);
}

.melon-room-detail__amenity h3 {
	font-family: var(--melon-sans);
	color: var(--melon-on-surface);
	font-size: 1rem;
	font-weight: 600;
	margin: 0.6rem 0 0;
}

.melon-room-detail__description {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
}

.melon-room-detail__gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.melon-room-detail__gallery-image {
	width: 100%;
	height: 16rem;
	object-fit: cover;
	border-radius: var(--melon-radius);
	opacity: 0.92;
	transition: opacity 0.5s ease;
}

.melon-room-detail__gallery-image:hover {
	opacity: 1;
}

.melon-room-detail__gallery-image--wide {
	grid-column: 1 / -1;
	height: 20rem;
}

/* Panel dat phong sticky (mockup reserve module) */

.melon-room-detail__booking {
	min-width: 0;
}

.melon-room-detail__booking-panel {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	backdrop-filter: blur(10px);
	border-radius: var(--melon-radius-lg);
	padding: 2rem;
	position: sticky;
	top: 6.5rem;
}

.melon-room-detail__booking-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 2.5vw, 1.9rem);
	line-height: 1.2;
	margin: 0 0 0.4rem;
}

.melon-room-detail__booking-sub {
	color: rgba(180, 180, 216, 0.85);
	font-size: 0.9rem;
	margin: 0 0 1.5rem;
}

.melon-room-detail__prices {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.melon-room-detail__price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	padding: 1.1rem 1.35rem;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.melon-room-detail__price:hover {
	border-color: rgba(255, 77, 148, 0.5);
	background: rgba(22, 22, 45, 0.5);
}

.melon-room-detail__price-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.melon-room-detail__price-mode {
	color: var(--melon-on-surface);
	font-weight: 600;
}

.melon-room-detail__price-label {
	color: rgba(180, 180, 216, 0.92);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.melon-room-detail__price-amount {
	color: var(--melon-electric-blush);
	font-family: var(--melon-serif);
	font-size: 1.6rem;
	white-space: nowrap;
}

.melon-room-detail__extra-hour {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	color: rgba(180, 180, 216, 0.92);
	font-size: 0.85rem;
	margin: 0 0 1.5rem;
	padding: 0 0.25rem;
}

.melon-room-detail__extra-hour-amount {
	color: var(--melon-on-surface);
	font-weight: 600;
}

/* Booking page (/dat-phong/) — 2 cot theo mockup Dat_phong_thanh_toan --------- */

.melon-booking {
	padding: 3rem var(--melon-margin) var(--melon-section-gap);
	max-width: 1440px;
	margin: 0 auto;
}

.melon-booking__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.melon-booking__layout {
		grid-template-columns: 5fr 7fr;
		align-items: stretch;
	}
}

.melon-booking__room-panel {
	position: relative;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	min-height: 320px;
	background: var(--melon-deep-navy);
}

@media (min-width: 1024px) {
	.melon-booking__room-panel {
		min-height: 560px;
	}
}

.melon-booking__room-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.melon-booking__room-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem 1.75rem;
	background: linear-gradient(to top, rgba(8, 8, 18, 0.95) 20%, rgba(8, 8, 18, 0.5) 70%, transparent 100%);
}

.melon-booking__room-badge {
	display: inline-block;
	background: rgba(22, 22, 45, 0.85);
	border: 1px solid rgba(180, 180, 216, 0.25);
	border-radius: 999px;
	color: var(--melon-lavender-grey);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	margin-bottom: 0.9rem;
}

.melon-booking__room-name {
	font-family: var(--melon-serif);
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.05;
	color: var(--melon-on-surface);
	margin: 0 0 0.6rem;
}

.melon-booking__room-desc {
	color: var(--melon-lavender-grey);
	font-size: 0.9rem;
	line-height: 1.7;
	margin: 0;
}

.melon-booking__form-wrap {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	backdrop-filter: blur(10px);
	border-radius: var(--melon-radius-lg);
	padding: 2.25rem;
}

@media (max-width: 640px) {
	.melon-booking__form-wrap {
		padding: 1.4rem;
	}
}

.melon-booking__title {
	font-family: var(--melon-serif);
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	color: var(--melon-on-surface);
	margin: 0 0 0.4rem;
}

.melon-booking__lead {
	color: rgba(180, 180, 216, 0.85);
	margin: 0 0 1.75rem;
}

.melon-booking__error {
	background: rgba(147, 0, 10, 0.35);
	border: 1px solid #ffb4ab;
	color: #ffdad6;
	border-radius: var(--melon-radius);
	padding: 0.9rem 1.2rem;
	margin: 0 0 1.5rem;
}

.melon-booking__form {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.melon-booking__hp {
	position: absolute !important;
	left: -9999px;
}

/* Mode = tab underline nhu mockup */

.melon-booking__modes {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 1.75rem;
	border-bottom: 1px solid rgba(180, 180, 216, 0.15);
}

.melon-booking__mode {
	cursor: pointer;
	padding-bottom: 0.8rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
}

.melon-booking__mode span {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(180, 180, 216, 0.85);
	transition: color 0.3s ease;
}

.melon-booking__mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.melon-booking__mode.is-selected {
	border-bottom-color: var(--melon-electric-blush);
}

.melon-booking__mode.is-selected span {
	color: var(--melon-electric-blush);
}

.melon-booking__mode:has(input:focus-visible) span {
	outline: 2px solid var(--melon-electric-blush);
	outline-offset: 3px;
}

.melon-booking__mode-note {
	margin: -0.5rem 0 0;
	color: rgba(180, 180, 216, 0.7);
	font-size: 0.8rem;
}

.melon-booking__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}

@media (max-width: 640px) {
	.melon-booking__grid {
		grid-template-columns: 1fr;
	}
}

.melon-booking__field--wide {
	grid-column: 1 / -1;
}

.melon-booking__field label {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
	margin-bottom: 0.45rem;
}

.melon-booking__field input,
.melon-booking__field select {
	width: 100%;
	background: rgba(8, 8, 18, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	color: var(--melon-on-surface);
	padding: 0.85rem 1rem;
	font: inherit;
	color-scheme: dark;
}

.melon-booking__field input::placeholder {
	color: rgba(180, 180, 216, 0.45);
}

.melon-booking__field input:focus-visible,
.melon-booking__field select:focus-visible {
	outline: none;
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 12px rgba(255, 77, 148, 0.25);
}

.melon-booking__discount {
	display: flex;
	gap: 0.6rem;
}

/* 04/09: nut "Áp dụng" + note cu da bo — ma tu kiem tra khi nhap (melon-khach.js). */

.melon-booking__total {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid rgba(180, 180, 216, 0.15);
	padding-top: 1.5rem;
}

.melon-booking__total-info {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.melon-booking__total-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
}

.melon-booking__total-amount {
	font-family: var(--melon-serif);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--melon-on-surface);
}

.melon-booking__total-note {
	margin: -0.5rem 0 0;
	font-size: 0.8rem;
	color: rgba(180, 180, 216, 0.7);
}

.melon-booking__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	border: 0;
	border-radius: var(--melon-radius);
	padding: 1.05rem 1.6rem;
	font-family: var(--melon-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.2);
	transition: box-shadow 0.3s ease;
}

.melon-booking__submit:hover,
.melon-booking__submit:focus-visible {
	box-shadow: 0 0 30px rgba(255, 77, 148, 0.45);
}

.melon-booking__branches-note {
	margin: 0.25rem 0 0;
	text-align: right;
	color: rgba(180, 180, 216, 0.78);
	font-size: 0.8rem;
	line-height: 1.8;
}

@media (max-width: 640px) {
	.melon-booking__branches-note {
		text-align: left;
	}
}

/* Xac nhan dat phong + QR */

.melon-booking__confirm {
	max-width: 720px;
	margin: 0 auto;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 2.25rem;
}

.melon-booking__confirm .melon-booking__title {
	color: var(--melon-electric-blush);
}

.melon-booking__confirm-lead {
	color: var(--melon-lavender-grey);
	margin: 0 0 1.5rem;
	line-height: 1.7;
}

.melon-booking__payment h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.4rem;
	margin: 1.5rem 0 0.75rem;
}

.melon-booking__payment p {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
}

.melon-booking__qr {
	display: block;
	margin: 1.25rem 0;
	border-radius: var(--melon-radius);
	max-width: 100%;
	height: auto;
	background: #fff;
}

.melon-booking__bank {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	color: var(--melon-lavender-grey);
}

.melon-booking__back {
	display: inline-block;
	margin-top: 1.5rem;
	color: var(--melon-electric-blush);
}

/* Static content pages (FAQ, Chinh sach) -------------------------------------- */

.melon-page {
	padding: 3rem var(--melon-margin) var(--melon-section-gap);
}

.melon-page__title,
.melon-page:not(.melon-page--wide) h1 {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1.5rem;
}

.melon-page h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.6rem;
	margin: 2.5rem 0 1rem;
}

.melon-page h3 {
	color: var(--melon-electric-blush);
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	margin: 1.5rem 0 0.5rem;
}

.melon-page p {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	margin-bottom: 0.8rem;
}

.melon-page details {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	color: var(--melon-lavender-grey);
}

.melon-page details summary {
	cursor: pointer;
	color: var(--melon-on-surface);
	font-weight: 600;
}

.melon-page details[open] summary {
	color: var(--melon-electric-blush);
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   Visual QA vong 1 (docs/audit/visual-qa-01.md) — cac finding da accept.
   ========================================================================== */

/* V-03/V-04: list typography + hover */
.melon-room-archive__intro {
	color: rgba(180, 180, 216, 0.65);
}
.melon-room-card__title a:hover,
.melon-room-card__title a:focus-visible {
	text-shadow: 0 0 16px rgba(255, 77, 148, 0.35);
}

/* V-09: detail desktop ty le cot theo mockup */
@media (min-width: 1024px) {
	.melon-room-detail__body {
		grid-template-columns: 7fr 4.8fr;
	}
}

/* V-10: gallery ro net, thumbnail thap hon o desktop */
.melon-room-detail__gallery-image {
	opacity: 1;
}
@media (min-width: 1024px) {
	.melon-room-detail__gallery-image {
		height: 11rem;
	}
	.melon-room-detail__gallery-image--wide {
		height: 20rem;
	}
}

/* V-13: gradient hero manh hon o mobile cho chu de doc duoc tren anh sang */
@media (max-width: 640px) {
	.melon-room-detail__hero-gradient {
		background: linear-gradient(to top, var(--melon-midnight-sapphire) 0%, rgba(8, 8, 18, 0.72) 55%, rgba(8, 8, 18, 0.2) 100%);
	}
}

/* V-05/V-06: mobile card dang khoi glass lien */
@media (max-width: 640px) {
	.melon-room-card {
		background: var(--melon-glass-bg);
		border: 1px solid var(--melon-glass-border);
		border-radius: 0.75rem;
		overflow: hidden;
		gap: 0;
	}
	.melon-room-card__media {
		border-radius: 0;
	}
	.melon-room-card__image {
		height: 240px;
	}
	.melon-room-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}
	.melon-room-card__title {
		margin-top: 0.25rem;
	}
}

/* V-07: header mobile 1 hang gon — an link phu (co bottom-nav thay the) */
@media (max-width: 640px) {
	.melon-header {
		padding-block: 0.9rem;
	}
	.melon-header__nav p:not(.melon-header__cta) {
		display: none;
	}
	.melon-header__cta a {
		padding: 0.55rem 1rem;
	}
}

/* V-05: bottom navigation mobile.
   !important vi WP in layout CSS (.wp-container-N display:flex) SAU theme css. */
.melon-mobile-nav {
	display: none !important;
}
.melon-mobile-nav a {
	color: var(--melon-lavender-grey);
	text-decoration: none;
}
@media (max-width: 640px) {
	.melon-mobile-nav {
		display: flex !important;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		background: rgba(8, 8, 18, 0.92);
		backdrop-filter: blur(16px);
		border-top: 1px solid rgba(180, 180, 216, 0.15);
		padding: 0.8rem var(--melon-margin);
		justify-content: space-between;
	}
	.melon-mobile-nav p {
		margin: 0;
	}
	.melon-mobile-nav a {
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--melon-lavender-grey);
		text-decoration: none;
	}
	.melon-mobile-nav a:hover,
	.melon-mobile-nav a:focus-visible {
		color: var(--melon-electric-blush);
	}
	/* chua cho de khong bi bottom-nav che noi dung/footer */
	.melon-footer {
		padding-bottom: 6.5rem;
	}
}

/* V-11: mobile detail — panel gia len ngay sau hero + thanh CTA co dinh */
@media (max-width: 640px) {
	.melon-room-detail__body {
		display: flex;
		flex-direction: column;
	}
	.melon-room-detail__booking {
		order: -1;
	}
	.melon-room-detail__booking-panel {
		position: static;
	}
}
.melon-room-detail__mobile-bar {
	display: none;
}
@media (max-width: 640px) {
	.melon-room-detail__mobile-bar {
		display: flex;
		transform: translateY(150%);
		pointer-events: none;
		transition: transform 0.3s ease;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 3.4rem; /* nam tren bottom-nav */
		z-index: 55;
		background: rgba(8, 8, 18, 0.95);
		backdrop-filter: blur(16px);
		border-top: 1px solid rgba(180, 180, 216, 0.15);
		padding: 0.7rem var(--melon-margin);
	}
	.melon-room-detail__mobile-bar-label {
		display: block;
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: rgba(180, 180, 216, 0.8);
	}
	.melon-room-detail__mobile-bar-amount {
		font-family: var(--melon-serif);
		font-size: 1.25rem;
		color: var(--melon-electric-blush);
	}
	.melon-room-detail__cta--bar {
		padding: 0.85rem 1.6rem;
		transform: none !important;
	}
	.melon-single-room {
		padding-bottom: 9rem;
	}
}

/* V-14/V-16: booking desktop hep lai, panel dam hon */
.melon-booking {
	max-width: 1120px;
}
@media (min-width: 1024px) {
	/* V-14 (QA vong 2): max-width 1120 + padding 96px lam content chi ~928px;
	   giam padding de content ~1088px nhu mockup. */
	.melon-booking {
		padding-inline: 1rem;
	}
}
@media (min-width: 1024px) {
	.melon-booking__layout {
		gap: 3.5rem;
	}
}
.melon-booking__form-wrap {
	background: rgba(22, 22, 45, 0.88);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.melon-booking__title {
	font-size: clamp(1.8rem, 4vw, 2.25rem);
}

/* V-15: input cao hon, nhip field thoang hon; an selector phong khi da chon */
.melon-booking__grid {
	gap: 1.4rem 1.25rem;
}
.melon-booking__field input,
.melon-booking__field select {
	padding: 1rem 1.1rem;
}
.melon-booking__field--room-hidden {
	display: none;
}
.melon-booking__room-change {
	display: inline-block;
	margin-top: 0.8rem;
	background: transparent;
	border: 1px solid rgba(180, 180, 216, 0.4);
	border-radius: 999px;
	color: var(--melon-lavender-grey);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.45rem 1rem;
	cursor: pointer;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-booking__room-change:hover,
.melon-booking__room-change:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}

/* V-19: tab khong xuong dong, gian deu */
.melon-booking__modes {
	gap: 0;
	justify-content: space-between;
}
.melon-booking__mode span {
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	white-space: nowrap;
}
@media (min-width: 1024px) {
	.melon-booking__modes {
		justify-content: flex-start;
		gap: 1.75rem;
	}
	.melon-booking__mode span {
		font-size: 0.75rem;
		letter-spacing: 0.18em;
	}
}

/* V-20: hover/pressed feedback */
.melon-booking__mode:hover span {
	color: var(--melon-electric-blush);
}
.melon-booking__submit:active,
.melon-booking__apply:active,
.melon-room-card__cta:active,
.melon-room-detail__cta:active {
	transform: scale(0.98);
}

/* V-17/V-18: booking mobile — panel phong nong, field 2 cot chuan mockup,
   thanh tong dinh day panel */
@media (max-width: 640px) {
	.melon-booking {
		padding-top: 1.5rem;
	}
	.melon-booking__room-panel {
		min-height: 200px;
	}
	.melon-booking__room-overlay {
		padding: 1.1rem 1.25rem;
	}
	.melon-booking__room-name {
		font-size: 1.6rem;
		margin-bottom: 0.25rem;
	}
	.melon-booking__room-desc {
		display: none;
	}
	.melon-booking__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.1rem 0.9rem;
	}
	.melon-booking__grid .melon-booking__field:nth-child(1),
	.melon-booking__grid .melon-booking__field:nth-child(2) {
		grid-column: 1 / -1;
	}
	.melon-booking__total-amount {
		font-size: 1.7rem;
	}
}

/* V2-01/V2-02 (QA vong 2): trang thai hien cua bar detail + thanh noi booking */
.melon-room-detail__mobile-bar.is-visible {
	transform: none;
	pointer-events: auto;
}
.melon-booking__float-bar {
	display: none;
}
@media (max-width: 640px) {
	.melon-booking__float-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 3.4rem; /* tren bottom-nav */
		z-index: 55;
		background: rgba(8, 8, 18, 0.95);
		backdrop-filter: blur(16px);
		border-top: 1px solid rgba(180, 180, 216, 0.2);
		padding: 0.7rem var(--melon-margin);
		transform: translateY(150%);
		pointer-events: none;
		transition: transform 0.3s ease;
	}
	.melon-booking__float-bar.is-visible {
		transform: none;
		pointer-events: auto;
	}
	.melon-booking__float-total {
		font-family: var(--melon-serif);
		font-size: 1.3rem;
		color: var(--melon-electric-blush);
		white-space: nowrap;
	}
	.melon-booking__submit--float {
		padding: 0.8rem 1.4rem;
	}
	/* dem de bar khong che noi dung cuoi khi dang hien */
	body.has-melon-float-bar .melon-booking {
		padding-bottom: 8.5rem;
	}
}

/* ==========================================================================
   CR-05: chips loc tien nghi, rating + yeu thich, carousel, dat phong truc tiep
   ========================================================================== */

/* D8: day chip loc cuon ngang */
.melon-filters {
	margin: 0 0 3rem;
}
.melon-filters__track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(180, 180, 216, 0.3) transparent;
}
.melon-filters__chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	color: var(--melon-lavender-grey);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.melon-filters__chip:hover,
.melon-filters__chip:focus-visible {
	border-color: rgba(255, 77, 148, 0.4);
	color: var(--melon-electric-blush);
}
.melon-filters__chip.is-active {
	border-color: rgba(255, 77, 148, 0.55);
	color: var(--melon-electric-blush);
	background: rgba(255, 77, 148, 0.08);
}

/* D9: badges + nut yeu thich tren card */
.melon-room-card {
	position: relative;
}
.melon-room-card__badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	gap: 0.5rem;
}
.melon-room-card__badges .melon-room-card__badge {
	position: static;
}
.melon-room-card__badge--rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.melon-room-card__badge--rating svg {
	color: var(--melon-electric-blush);
}
.melon-room-card__fav {
	position: absolute;
	top: calc(1rem - 2px);
	right: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(8, 8, 18, 0.55);
	backdrop-filter: blur(8px);
	color: var(--melon-lavender-grey);
	cursor: pointer;
	transition: color 0.3s ease, transform 0.2s ease;
}
.melon-room-card__fav:hover,
.melon-room-card__fav:focus-visible {
	color: var(--melon-electric-blush);
}
.melon-room-card__fav:active {
	transform: scale(0.9);
}
.melon-room-card__fav.is-active {
	color: var(--melon-electric-blush);
}
.melon-room-card__fav.is-active svg path {
	fill: currentColor;
}
.melon-room-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 0.9rem;
	color: rgba(180, 180, 216, 0.9);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Dem 03/09: nhan trang thai thay badge hang phong; 04/09 (Codex): NEN DAC gradient
   hong dam + chu trang de khong chim vao anh hong/tim — 5 nhan chung 1 he mau. */
.melon-room-card__badge--flag {
	background: linear-gradient(135deg, #c91f62, #9e164a);
	backdrop-filter: none;
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Pill tien nghi: nen dac + chu sang + shadow de khong lan vao anh (gop y 04/09 lan 2) */
.melon-room-card__badge--amenity {
	background: rgba(8, 8, 18, 0.92);
	border-color: rgba(255, 255, 255, 0.22);
	color: #e9e9f7;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.melon-room-card__badge--rating {
	background: rgba(8, 8, 18, 0.92);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Gop y 04/09: nhan tren anh card "Ban muon phong co" (trang chu) — tai dung pill room-card */
.melon-home__preview-badges {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	right: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	z-index: 2;
	pointer-events: none;
}
.melon-home__preview-badges .melon-room-card__badge {
	position: static;
	font-size: 0.6rem;
	padding: 0.32rem 0.7rem;
}
.melon-home__preview-badges .melon-room-card__badge--rating {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.melon-home__preview-badges .melon-room-card__badge--rating svg { color: var(--melon-electric-blush); }

/* Gop y 04/09: pill tien nghi noi bat nam canh sao ngay tren anh (2-3 pill) */
.melon-room-card__badges {
	flex-wrap: wrap;
	max-width: calc(100% - 4.5rem); /* chua dung nut yeu thich ben phai */
}
.melon-room-card__badge--amenity {
	letter-spacing: 0.08em;
}

/* Mobile: toi da 2 pill tren anh + 2 tag tien nghi body de khong che gia/CTA */
@media (max-width: 767px) {
	.melon-room-card__badges .melon-room-card__badge:nth-child(n+4) {
		display: none;
	}
	.melon-room-card__amenities .melon-room-card__meta-item:nth-child(3) {
		display: none;
	}
}

/* D10: hero carousel */
.melon-room-detail__carousel {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	z-index: 0;
}
.melon-room-detail__carousel::-webkit-scrollbar {
	display: none;
}
.melon-room-detail__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.melon-room-detail__slide .melon-room-detail__hero-image {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-room-detail__hero-gradient {
	pointer-events: none;
}
.melon-room-detail__hero-inner {
	pointer-events: none;
}
.melon-room-detail__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(180, 180, 216, 0.25);
	border-radius: 999px;
	background: rgba(22, 22, 45, 0.7);
	backdrop-filter: blur(10px);
	color: var(--melon-on-surface);
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}
.melon-room-detail__nav:hover,
.melon-room-detail__nav:focus-visible {
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
}
.melon-room-detail__nav--prev { left: 1.25rem; }
.melon-room-detail__nav--next { right: 1.25rem; }
@media (max-width: 640px) {
	.melon-room-detail__nav { width: 2.4rem; height: 2.4rem; }
	.melon-room-detail__nav--prev { left: 0.75rem; }
	.melon-room-detail__nav--next { right: 0.75rem; }
}
.melon-room-detail__dots {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 0.5rem;
}
.melon-room-detail__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: rgba(228, 225, 240, 0.3);
	transition: background 0.3s ease;
}
.melon-room-detail__dot.is-active {
	background: var(--melon-electric-blush);
}
.melon-room-detail__counter {
	position: absolute;
	bottom: 1.1rem;
	right: 1.25rem;
	z-index: 3;
	background: rgba(8, 8, 18, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: 999px;
	color: var(--melon-on-surface);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.35rem 0.8rem;
}
.melon-room-detail__badge-rating {
	margin-left: 0.5rem;
	color: var(--melon-on-surface);
}

/* D11: form dat phong truc tiep trong panel */
.melon-room-detail__tiers {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.melon-room-detail__tier {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	padding: 1rem 1.25rem;
	cursor: pointer;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.melon-room-detail__tier:hover {
	border-color: rgba(255, 77, 148, 0.5);
}
.melon-room-detail__tier.is-selected {
	border-color: var(--melon-electric-blush);
	background: rgba(22, 22, 45, 0.5);
}
.melon-room-detail__tier input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.melon-room-detail__tier:has(input:focus-visible) {
	outline: 2px solid var(--melon-electric-blush);
	outline-offset: 2px;
}
.melon-room-detail__tier-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.melon-room-detail__tier-mode {
	color: var(--melon-on-surface);
	font-weight: 600;
}
.melon-room-detail__tier-label {
	color: rgba(180, 180, 216, 0.92);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.melon-room-detail__tier-amount {
	color: var(--melon-electric-blush);
	font-family: var(--melon-serif);
	font-size: 1.45rem;
	white-space: nowrap;
}
.melon-room-detail__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.melon-room-detail__fields .melon-booking__field--wide {
	grid-column: 1 / -1;
}
.melon-room-detail__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-top: 1px solid rgba(180, 180, 216, 0.15);
	padding-top: 1.1rem;
	margin-bottom: 1.1rem;
}
.melon-room-detail__total-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
}
.melon-room-detail__total-amount {
	font-family: var(--melon-serif);
	font-size: 1.7rem;
	color: var(--melon-on-surface);
}
.melon-room-detail__cta {
	width: 100%;
	border: 0;
	cursor: pointer;
	font-family: var(--melon-sans);
}
.melon-room-detail__booking-note {
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	color: rgba(180, 180, 216, 0.75);
}

/* Fix "hang 1 khong thang hang" (phan hoi UAT 22/08): WP tu chen margin-top
   cho li ke tiep trong post-template; trong grid lam item dau thap/cao lech. */
.melon-room-archive__grid .wp-block-post-template > li {
	margin: 0 !important;
}

/* ==========================================================================
   Phan hoi UAT 22/08 (dot 2): tien nghi dang card grid, form theo mode,
   icon trong field, ma giam gia o form chi tiet.
   ========================================================================== */

/* 1) Tien nghi: heading nho co duong ke, luoi 2 cot, item dau noi bat */
.melon-room-detail__amenities h2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--melon-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
	margin: 0 0 1.25rem;
}
.melon-room-detail__amenities h2::before {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(180, 180, 216, 0.25);
}
.melon-room-detail__amenities h2::after {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: rgba(180, 180, 216, 0.25);
}
.melon-room-detail__amenity-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.melon-room-detail__amenity {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	border-radius: 0.9rem;
	padding: 1.25rem;
}
.melon-room-detail__amenity--featured {
	grid-column: 1 / -1;
	padding: 1.5rem;
}
.melon-room-detail__amenity-icon {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.65rem;
	background: rgba(255, 77, 148, 0.12);
}
.melon-room-detail__amenity--featured .melon-room-detail__amenity-icon {
	width: 3rem;
	height: 3rem;
}
.melon-room-detail__amenity h3 {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.35;
}
.melon-room-detail__amenity--featured h3 {
	font-size: 1.15rem;
}

/* 2) Icon trong field */
.melon-field--icon-left,
.melon-field--icon-right {
	position: relative;
}
.melon-field__icon {
	position: absolute;
	bottom: 0.95rem;
	color: rgba(180, 180, 216, 0.8);
	pointer-events: none;
	display: inline-flex;
}
.melon-field--icon-left .melon-field__icon {
	left: 1rem;
}
.melon-field--icon-right .melon-field__icon {
	right: 1rem;
}
.melon-field__icon--accent {
	color: var(--melon-electric-blush);
}
.melon-field--icon-left input,
.melon-field--icon-left select {
	padding-left: 2.6rem;
}
.melon-field--icon-right input,
.melon-field--icon-right select {
	padding-right: 2.6rem;
}

/* 3) Bo cuc field theo mode (UAT dot 3): he luoi 6 cot.
   Moi mode: Ho ten (full) -> SDT (4/6) + So khach (2/6) -> ngay/gio -> ma giam gia (full). */
.melon-room-detail__fields {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.melon-room-detail__fields > .melon-booking__field {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* label wrap 2 dong van giu input thang hang */
}
.melon-room-detail__fields .melon-f-phone { order: 2; grid-column: span 4; }
.melon-room-detail__fields .melon-f-guests { order: 3; grid-column: span 2; }
.melon-room-detail__fields .melon-f-name { order: 1; }
.melon-room-detail__fields .melon-f-date { order: 4; }
.melon-room-detail__fields .melon-f-dateout { order: 5; }
.melon-room-detail__fields .melon-f-time { order: 6; grid-column: span 3; }
.melon-room-detail__fields .melon-f-hours { order: 7; grid-column: span 3; }
.melon-room-detail__fields .melon-f-discount { order: 8; }
#melon-d-fields[data-mode="daily"] .melon-f-date { grid-column: span 3; }
#melon-d-fields[data-mode="daily"] .melon-f-dateout { grid-column: span 3; }

.melon-room-detail__mode-note {
	margin: 0 0 0.9rem;
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.8rem;
	font-weight: 600;
}

/* 4) Nut AP DUNG dang chu trong o (mockup 2) */
.melon-booking__apply--bare {
	border: 0;
	background: transparent;
	padding: 0 0.4rem;
}
.melon-booking__apply--bare:hover,
.melon-booking__apply--bare:focus-visible {
	background: transparent;
	color: var(--melon-electric-blush);
	text-shadow: 0 0 14px rgba(255, 77, 148, 0.45);
}

/* UAT dot 3: tong tien 1 dong */
.melon-room-detail__total-amount {
	white-space: nowrap;
	font-size: 1.5rem;
}
.melon-room-detail__total-label {
	white-space: nowrap;
}

/* UAT dot 3 - fix: */
/* a) display:flex cua field de mat [hidden] -> ep an */
.melon-room-detail__fields > .melon-booking__field[hidden] {
	display: none !important;
}
/* b) o So khach hep: thu gon padding de thay gia tri */
.melon-f-guests select {
	padding-left: 0.9rem;
	padding-right: 2rem;
}
.melon-f-guests .melon-field__icon {
	right: 0.65rem;
}
/* c) chu thich mode nam trong grid, duoi hang ngay/gio, truoc ma giam gia */
.melon-room-detail__fields .melon-room-detail__mode-note {
	order: 7;
	grid-column: span 6;
	margin: 0;
	align-self: center;
}
.melon-room-detail__mode-note:empty {
	display: none;
}

/* UAT dot 4 (trang chi tiet): */
/* 1) o SDT (4/6) va input ma giam gia bang nhau: discount chia 2fr/1fr theo luoi */
.melon-room-detail__fields .melon-booking__discount {
	/* 04/09: het nut Ap dung — input ma chiem full hang */
	display: block;
}
.melon-room-detail__fields .melon-booking__apply {
	padding: 0;
	width: 100%;
}
/* 3) gia o thanh mobile 1 dong */
.melon-room-detail__mobile-bar-price {
	flex-shrink: 0;
}
.melon-room-detail__mobile-bar-amount {
	white-space: nowrap;
	font-size: 1.1rem;
}

/* ==========================================================================
   CR-06: luong thanh toan & xac nhan (mockup thanh toan - xac nhan)
   ========================================================================== */

.melon-pay__topbar {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 2rem;
}
.melon-pay__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 999px;
	border: 1px solid rgba(180, 180, 216, 0.2);
	color: var(--melon-on-surface);
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-pay__back:hover,
.melon-pay__back:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}
.melon-pay__topbar-title {
	flex: 1;
	text-align: center;
	margin-right: 2.6rem;
	color: var(--melon-electric-blush);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.melon-pay__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
@media (min-width: 1024px) {
	.melon-pay__layout {
		grid-template-columns: 7fr 5fr;
		gap: 3rem;
	}
}
.melon-pay__label {
	font-family: var(--melon-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
	margin: 0 0 1.1rem;
}
.melon-pay__option {
	display: block;
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: 1rem;
	padding: 1.4rem;
	margin-bottom: 1.1rem;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.melon-pay__option.is-selected {
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 24px rgba(255, 77, 148, 0.18);
}
.melon-pay__option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.melon-pay__option-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.melon-pay__option-name {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--melon-on-surface);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.melon-pay__option-name svg {
	color: var(--melon-electric-blush);
}
.melon-pay__badge {
	border: 1px solid rgba(255, 77, 148, 0.5);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
}
.melon-pay__option-sub {
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.melon-pay__qr-body,
.melon-pay__hold-note {
	display: none;
}
.melon-pay__option--qr.is-selected .melon-pay__qr-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
	margin-top: 1.4rem;
}
@media (min-width: 640px) {
	.melon-pay__option--qr.is-selected .melon-pay__qr-body {
		grid-template-columns: auto 1fr;
	}
}
.melon-pay__option--qr.is-selected .melon-pay__hold-note {
	display: block;
	margin-top: 1.3rem;
	background: rgba(18, 18, 29, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.12);
	border-radius: var(--melon-radius);
	padding: 1rem 1.2rem;
	color: var(--melon-lavender-grey);
	font-size: 0.9rem;
	line-height: 1.6;
}
.melon-pay__hold-strong {
	color: var(--melon-electric-blush);
	font-weight: 600;
}
.melon-pay__qr-frame {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	background: #fff;
	border-radius: 0.75rem;
	padding: 0.9rem;
	max-width: 240px;
}
.melon-pay__qr-frame img {
	width: 200px;
	height: auto;
}
.melon-pay__qr-caption {
	color: #16162d;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.melon-pay__bank {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}
.melon-pay__bank-label {
	display: block;
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}
.melon-pay__bank-value {
	color: var(--melon-on-surface);
	font-weight: 700;
	font-size: 1.05rem;
}
.melon-pay__copy-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: rgba(8, 8, 18, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	padding: 0.7rem 0.9rem;
}
.melon-pay__copy-value {
	color: var(--melon-electric-blush);
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: 1.05rem;
}
.melon-pay__copy {
	border: 0;
	background: transparent;
	color: var(--melon-lavender-grey);
	cursor: pointer;
	display: inline-flex;
	transition: color 0.2s ease;
}
.melon-pay__copy:hover,
.melon-pay__copy:focus-visible,
.melon-pay__copy.is-copied {
	color: var(--melon-electric-blush);
}
.melon-pay__summary {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.75rem;
}
.melon-pay__summary .melon-pay__label {
	border-bottom: 1px solid rgba(180, 180, 216, 0.15);
	padding-bottom: 1rem;
}
.melon-pay__room {
	color: var(--melon-on-surface);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}
.melon-pay__meta {
	color: var(--melon-lavender-grey);
	margin: 0 0 1.4rem;
}
.melon-pay__meta-sep {
	margin: 0 0.5rem;
	color: rgba(180, 180, 216, 0.4);
}
.melon-pay__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid rgba(180, 180, 216, 0.15);
	padding-top: 1.3rem;
	margin-bottom: 1.4rem;
}
.melon-pay__total-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--melon-lavender-grey);
}
.melon-pay__total-amount {
	font-family: var(--melon-serif);
	font-size: 1.9rem;
	color: var(--melon-electric-blush);
	white-space: nowrap;
}
.melon-pay__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	border: 0;
	border-radius: 999px;
	padding: 1.05rem 1.5rem;
	font-family: var(--melon-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.25);
	transition: box-shadow 0.3s ease;
}
.melon-pay__cta:hover,
.melon-pay__cta:focus-visible {
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 32px rgba(255, 77, 148, 0.45);
}
.melon-pay__secondary {
	display: block;
	margin-top: 0.9rem;
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 999px;
	padding: 0.9rem 1.5rem;
	text-align: center;
	color: var(--melon-lavender-grey);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-pay__secondary:hover,
.melon-pay__secondary:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}

.melon-sent,
.melon-done {
	text-align: center;
}
.melon-sent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 77, 148, 0.5);
	color: var(--melon-electric-blush);
	box-shadow: 0 0 30px rgba(255, 77, 148, 0.25);
	margin-bottom: 1.4rem;
}
.melon-sent__eyebrow {
	color: var(--melon-electric-blush);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
}
.melon-sent__title {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	line-height: 1.1;
	max-width: 46rem;
	margin: 0 auto 2.5rem;
}
.melon-sent__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	text-align: left;
	max-width: 960px;
	margin: 0 auto;
}
@media (min-width: 900px) {
	.melon-sent__layout {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}
.melon-sent__card {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	overflow: hidden;
}
.melon-sent__image {
	width: 100%;
	height: 240px;
	object-fit: cover;
}
.melon-sent__card-body {
	padding: 1.4rem;
}
.melon-sent__card-label {
	display: block;
	color: var(--melon-electric-blush);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.melon-sent__card-branch {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.5rem;
	margin: 0 0 1.1rem;
}
.melon-sent__card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	color: var(--melon-lavender-grey);
	border-top: 1px solid rgba(180, 180, 216, 0.12);
	padding-top: 1rem;
}
.melon-sent__card-grid .melon-sent__card-label {
	color: rgba(180, 180, 216, 0.7);
}
.melon-sent__upsell {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.melon-sent__upsell-title {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.6rem;
	margin: 0 0 0.9rem;
}
.melon-sent__upsell-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.7rem;
	height: 2.7rem;
	border-radius: 0.7rem;
	background: rgba(255, 77, 148, 0.12);
	color: var(--melon-electric-blush);
	flex-shrink: 0;
}
.melon-sent__upsell-copy {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	margin: 0 0 1.4rem;
}

.melon-done__title {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.5rem;
}
.melon-done__sub {
	color: var(--melon-lavender-grey);
	margin: 0 0 2.5rem;
}
.melon-done__card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	overflow: hidden;
	text-align: left;
	max-width: 1080px;
	margin: 0 auto 1.5rem;
}
@media (min-width: 900px) {
	.melon-done__card {
		grid-template-columns: 6fr 5fr;
	}
}
.melon-done__media {
	position: relative;
	min-height: 260px;
}
.melon-done__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-done__media-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.4rem;
	background: linear-gradient(to top, rgba(8, 8, 18, 0.92) 15%, transparent 100%);
}
.melon-done__media-eyebrow {
	color: var(--melon-electric-blush);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}
.melon-done__media-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0;
}
.melon-done__details {
	padding: 1.6rem;
}
.melon-done__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1rem;
	color: var(--melon-on-surface);
	font-weight: 600;
	border-bottom: 1px solid rgba(180, 180, 216, 0.15);
	padding-bottom: 1.2rem;
	margin-bottom: 1.2rem;
}
.melon-done__label {
	display: block;
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}
.melon-done__code {
	color: var(--melon-electric-blush);
	font-weight: 700;
	letter-spacing: 0.08em;
}
.melon-done__status-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.2rem;
}
.melon-done__status {
	color: var(--melon-electric-blush);
	font-weight: 700;
}
.melon-done__amount {
	font-family: var(--melon-serif);
	font-size: 1.6rem;
	color: var(--melon-on-surface);
	white-space: nowrap;
}
.melon-done__hold {
	border: 1px solid rgba(255, 77, 148, 0.35);
	background: rgba(255, 77, 148, 0.06);
	border-radius: var(--melon-radius);
	padding: 1rem 1.2rem;
}
.melon-done__hold-title {
	color: var(--melon-on-surface);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.melon-done__hold-sub {
	color: var(--melon-lavender-grey);
	font-size: 0.88rem;
	margin: 0;
}
.melon-done__arrive {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.5rem 1.6rem;
	text-align: left;
	max-width: 1080px;
	margin: 0 auto 1.75rem;
}
.melon-done__arrive-title {
	color: var(--melon-electric-blush);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.melon-done__arrive-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 1rem;
}
.melon-done__address {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	color: var(--melon-on-surface);
}
.melon-done__address svg {
	color: var(--melon-lavender-grey);
}
.melon-done__direction {
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-done__contacts {
	display: inline-flex;
	gap: 1.75rem;
}
.melon-done__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--melon-on-surface);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-done__contacts a:hover,
.melon-done__contacts a:focus-visible {
	color: var(--melon-electric-blush);
}
.melon-done__cccd {
	color: var(--melon-lavender-grey);
	font-size: 0.9rem;
	margin: 0;
}
.melon-done__policy {
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.9rem;
}
.melon-done__policy a {
	color: var(--melon-electric-blush);
	/* axe link-in-text-block: link trong doan van can dau hieu ngoai mau */
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===== Visual QA pay vong 1 (docs/audit/visual-qa-pay-01.md) ===== */

/* P1-01: mobile — tom tat len truoc, phuong thuc sau; CTA noi co dinh */
@media (max-width: 640px) {
	.melon-pay__layout {
		display: flex;
		flex-direction: column;
	}
	.melon-pay__summary {
		order: -1;
	}
	.melon-pay__cta--float {
		/* P2-01: display:none tuyet doi o trang thai an — khong paint trong
		   fullPage screenshot va khong che QR o bat ky vi tri nao. */
		display: none;
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		width: auto;
		z-index: 60;
	}
	.melon-pay__cta--float.is-visible {
		display: inline-flex;
	}
	body.melon-funnel .melon-booking {
		padding-bottom: 6rem;
	}
}

/* P1-03: desktop QR to hon, hai cot can dinh */
.melon-pay__qr-frame img {
	width: 230px;
}
@media (min-width: 1024px) {
	.melon-pay__layout {
		align-items: start;
	}
	.melon-pay__summary {
		margin-top: 2.4rem; /* thang dinh voi card QR (duoi nhan Phuong thuc) */
	}
}

/* P1-04: typography QR nhe hon, thoang hon */
.melon-pay__bank-value {
	font-weight: 600;
}
.melon-pay__hold-note {
	line-height: 1.5;
}
.melon-pay__option--qr.is-selected .melon-pay__hold-note {
	font-weight: 400;
}

/* P1-05/P1-07: hero "yeu cau da gui" display uppercase lon nhieu dong */
.melon-sent__title {
	text-transform: uppercase;
	font-size: clamp(2.4rem, 7vw, 4rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	max-width: 34rem;
}

/* P1-06/P1-08: panel nang cap can xung voi card phong */
@media (min-width: 900px) {
	.melon-sent__card,
	.melon-sent__upsell {
		min-height: 430px;
	}
}
.melon-sent__upsell .melon-pay__cta {
	margin-top: auto;
}
@media (max-width: 640px) {
	.melon-sent__upsell {
		padding: 1.9rem 1.5rem;
	}
	.melon-sent__upsell-icon {
		width: 3rem;
		height: 3rem;
	}
	.melon-sent__upsell-title {
		font-size: 1.75rem;
	}
	.melon-sent__upsell-copy {
		margin-bottom: 1.75rem;
	}
}

/* P1-09: hero man xac nhan CK lon hon, tach xa card */
.melon-done__title {
	text-transform: uppercase;
	font-size: clamp(2.2rem, 5.5vw, 3.4rem);
	letter-spacing: 0.01em;
}
.melon-done__sub {
	font-size: 1.05rem;
	margin-bottom: 3.25rem;
}
.melon-done .melon-sent__icon {
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1.75rem;
}

/* P1-10/P1-13: khoi Khi den Melon day dan */
.melon-done__arrive {
	padding: 1.75rem 1.9rem;
}
.melon-done__branch-name {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.45rem;
	margin: 0 0 0.5rem;
}
.melon-done__address {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--melon-lavender-grey);
	margin: 0 0 0.8rem;
}
.melon-done__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 1.1rem;
}
.melon-done__cccd {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	border-top: 1px solid rgba(180, 180, 216, 0.12);
	padding-top: 1rem;
	margin-bottom: 1.1rem;
}
.melon-done__cccd svg {
	color: var(--melon-electric-blush);
	flex-shrink: 0;
	margin-top: 0.15rem;
}
.melon-done__contacts {
	display: flex;
	gap: 1rem;
}
.melon-done__contacts a {
	flex: 1;
	justify-content: center;
	border: 1px solid rgba(180, 180, 216, 0.25);
	border-radius: 999px;
	padding: 0.85rem 1rem;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-done__contacts a:hover,
.melon-done__contacts a:focus-visible {
	border-color: rgba(255, 77, 148, 0.5);
}
@media (min-width: 900px) {
	.melon-done__arrive {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.4rem 2.5rem;
		align-items: center;
	}
	.melon-done__arrive-title {
		grid-column: 1 / -1;
	}
	.melon-done__contacts {
		grid-row: 3 / 5;
		grid-column: 2;
		align-self: center;
		min-width: 320px;
	}
	.melon-done__cccd {
		border-top: 0;
		padding-top: 0;
		margin-bottom: 0;
	}
}

/* P1-12: mobile tach cac khoi ket qua thanh card rieng */
@media (max-width: 640px) {
	.melon-done__details {
		padding: 1.1rem;
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}
	.melon-done__grid,
	.melon-done__status-row {
		background: rgba(8, 8, 18, 0.55);
		border: 1px solid rgba(180, 180, 216, 0.15);
		border-radius: var(--melon-radius);
		padding: 1rem 1.1rem;
		margin: 0;
	}
	.melon-done__grid {
		border-bottom-width: 1px;
	}
}

/* P1-14: hold notice glow ro hon */
.melon-done__hold {
	border-color: rgba(255, 77, 148, 0.5);
	background: rgba(255, 77, 148, 0.08);
	box-shadow: 0 0 24px rgba(255, 77, 148, 0.14);
}

/* Vong 2 pay: P1-05/P1-07 — hero 'yeu cau da gui' nhip 4 dong nhu mockup */
.melon-sent__title {
	max-width: 13ch;
	font-size: clamp(2.6rem, 8vw, 4.4rem);
}
/* Vong 2 pay: P1-10/P1-13 — dia chi luon o cot trai, du cho */
@media (min-width: 900px) {
	.melon-done__branch-name,
	.melon-done__address,
	.melon-done__direction,
	.melon-done__cccd {
		grid-column: 1;
	}
	.melon-done__contacts {
		grid-column: 2;
		grid-row: 2 / 6;
	}
}

/* UAT pay mobile (22/08): CTA theo mockup — trong summary chi desktop,
   mobile CTA nam cuoi phan phuong thuc; ghi chu tien mat khi chon */
.melon-pay__cta--mobile {
	display: none;
	margin-top: 0.5rem;
}
@media (max-width: 640px) {
	.melon-pay__cta--mobile {
		display: inline-flex;
	}
	.melon-pay__summary .melon-pay__cta {
		display: none;
	}
	/* Tong: nhan + so cung dong, serif hong nhu mockup */
	.melon-pay__total-row {
		display: block;
		border-top: 1px solid rgba(180, 180, 216, 0.15);
	}
	.melon-pay__total-label {
		font-family: var(--melon-serif);
		font-size: 1.6rem;
		letter-spacing: 0;
		text-transform: none;
		color: var(--melon-electric-blush);
	}
	.melon-pay__total-label::after {
		content: ":";
	}
	.melon-pay__total-amount {
		display: block;
		font-size: 2rem;
	}
	.melon-pay__secondary {
		margin-top: 0;
	}
}
.melon-pay__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}
.melon-pay__cash-note {
	display: none;
}
.melon-pay__option--cash.is-selected .melon-pay__cash-note {
	display: block;
	margin-top: 1.1rem;
	background: rgba(18, 18, 29, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.12);
	border-radius: var(--melon-radius);
	padding: 1rem 1.2rem;
	color: var(--melon-lavender-grey);
	font-size: 0.9rem;
	line-height: 1.6;
}
.melon-pay__option--cash.is-selected {
	border-color: var(--melon-electric-blush);
}

/* CR-07 home --------------------------------------------------------------- */
.melon-home { overflow: clip; background: var(--melon-midnight-sapphire); color: var(--melon-on-surface); }
.melon-home a { color: inherit; }
.melon-home__hero { position: relative; min-height: min(760px, calc(100vh - 70px)); display: grid; align-items: end; isolation: isolate; }
.melon-home__hero-image, .melon-home__final-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.melon-home__hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,18,.9) 0%, rgba(8,8,18,.42) 65%, rgba(8,8,18,.7)), linear-gradient(0deg, rgba(8,8,18,.82), transparent 55%); }
.melon-home__hero-content {
	max-width: 600px;
	padding: 2rem var(--melon-margin) 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.melon-home__hero-content > p:not(.melon-home__hero-title) { display: none !important; }
.melon-home__hero-content > p:not(.melon-home__hero-title), .melon-home__section-head > p, .melon-home__editorial > div > p, .melon-home__final-cta p, .melon-home__branches article > p { margin: 0 0 1rem; color: var(--melon-electric-blush); font: 700 .66rem/1.3 var(--melon-sans); letter-spacing: .22em; text-transform: uppercase; }
.melon-home h1, .melon-home h2, .melon-home h3 { color: var(--melon-on-surface); font-family: var(--melon-serif); }
.melon-home h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .96; letter-spacing: -.045em; }
.melon-home h1 em, .melon-home h2 em { font-weight: 400; font-style: italic; color: var(--melon-electric-blush); }
.melon-home__hero-text-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.melon-home__hero-text-group .melon-home__hero-title {
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.1;
	margin: 0;
}

.melon-home__hero-text-group > span {
	display: block;
	color: var(--melon-lavender-grey);
	line-height: 1.5;
	margin: 0;
}

.melon-home__hero-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Hero button specific - based on previous shared button style */
.melon-home__hero-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	backdrop-filter: blur(16px);
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	color: var(--melon-on-surface);
	text-decoration: none;
	font-weight: 600;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.melon-home__hero-button:hover {
	border-color: rgba(255, 77, 148, 0.5);
	background: rgba(22, 22, 45, 0.7);
}
.melon-home__hero-button--highlight {
	border-color: rgba(255, 77, 148, 0.6) !important;
	box-shadow: 0 0 25px rgba(255, 77, 148, 0.35) !important;
}
.melon-home__hero-button--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff !important;
}
.melon-home__hero-button--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.melon-home__button { display: inline-flex; justify-content: center; padding: .95rem 1.3rem; border: 1px solid var(--melon-electric-blush); background: var(--melon-electric-blush); color: #fff !important; font: 700 .71rem var(--melon-sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.melon-home__button:hover { background: #d92d75; transform: translateY(-2px); }

.melon-home__text-link, .melon-home__more-link { font: 700 .7rem var(--melon-sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.melon-home__text-link span, .melon-home__more-link span { color: var(--melon-electric-blush); font-size: 1.1rem; }
.melon-home__discovery, .melon-home__experiences, .melon-home__faq, .melon-home__branches { padding: var(--melon-section-gap) var(--melon-margin); }
.melon-home__section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.melon-home__section-head h2 { margin: 0; font-size: clamp(2.25rem, 4vw, 4.2rem); line-height: .98; letter-spacing: -.035em; }
.melon-home__section-head > a { margin-left: auto; font: 700 .68rem var(--melon-sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.melon-home__chips { display: flex; gap: .65rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; }
.melon-home__chips a { flex: none; border: 1px solid var(--melon-glass-border); border-radius: 99px; padding: .65rem 1rem; color: var(--melon-lavender-grey); font-size: .79rem; text-decoration: none; }
.melon-home__chips a:hover { border-color: var(--melon-electric-blush); color: var(--melon-on-surface); }
.melon-home__preview { display: grid; grid-auto-columns: minmax(230px, 280px); grid-auto-flow: column; gap: 1rem; overflow-x: auto; padding: 1.2rem 0; scroll-snap-type: x mandatory; list-style: none; margin: 0; }
.melon-home__preview > li { min-width: 0; scroll-snap-align: start; }
.melon-home__preview { text-decoration: none; }
.melon-home__preview-image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.melon-home__preview-media a:hover img { transform: scale(1.04); }

.melon-home__more-link { display: inline-block; margin-top: 1.25rem; color: var(--melon-lavender-grey); }
.melon-home__experiences { background: var(--melon-surface); }
.melon-home__experience-grid { display: grid; gap: 1.5rem; }
.melon-home__experience-grid article { min-width: 0; }
.melon-home__experience-grid a { display: block; text-decoration: none; }
.melon-home__experience-image { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .5s ease; }
.melon-home__experience-grid a:hover img { transform: scale(1.05); }

.melon-home__experience-grid small, .melon-home__experience-grid i { color: var(--melon-electric-blush); font: 700 .63rem var(--melon-sans); letter-spacing: .16em; text-transform: uppercase; }

.melon-featured-rooms { padding: var(--melon-section-gap) var(--melon-margin); background: #06060d; }
.melon-featured-rooms__grid { display: grid; gap: 1rem; }
.melon-featured-rooms__card { position: relative; min-height: 280px; overflow: hidden; background: var(--melon-deep-navy); }
.melon-featured-rooms__image-link { position: absolute; inset: 0; }
.melon-featured-rooms__image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.melon-featured-rooms__card:hover img { transform: scale(1.04); }
.melon-featured-rooms__veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,18,.94), transparent 75%); }
.melon-featured-rooms__content { position: relative; z-index: 1; display: flex; height: 100%; min-height: 280px; flex-direction: column; align-items: flex-start; justify-content: end; padding: 1.5rem; }
.melon-featured-rooms__eyebrow, .melon-featured-rooms__price { margin: 0; color: var(--melon-electric-blush); font-size: .75rem; }
.melon-featured-rooms h3 { margin: .35rem 0 .65rem; font-size: 2rem; }
.melon-featured-rooms h3 a { text-decoration: none; }
.melon-featured-rooms__cta { margin-top: 1.1rem; border-bottom: 1px solid currentColor; color: #fff; font: 700 .67rem var(--melon-sans); letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.melon-home__editorial { display: grid; gap: 3rem; padding: var(--melon-section-gap) var(--melon-margin); background: var(--melon-surface); }
.melon-home__editorial h2 { margin: 0 0 1.2rem; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; }
.melon-home__editorial > div > span { color: var(--melon-lavender-grey); line-height: 1.7; }
.melon-home__editorial ul { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.melon-home__editorial li { display: grid; gap: .4rem; border-left: 2px solid var(--melon-electric-blush); padding-left: 1rem; }
.melon-home__editorial li strong { color: var(--melon-on-surface); font-family: var(--melon-serif); font-size: 1.25rem; }
.melon-home__editorial li span { color: var(--melon-lavender-grey); font-size: .87rem; line-height: 1.55; }
.melon-home__faq { max-width: 960px; margin: auto; }
.melon-home__faq details { border-top: 1px solid var(--melon-glass-border); padding: 1.2rem 0; }
.melon-home__faq details:last-child { border-bottom: 1px solid var(--melon-glass-border); }
.melon-home__faq summary { display: flex; justify-content: space-between; gap: 1rem; color: var(--melon-on-surface); cursor: pointer; font-weight: 700; }
.melon-home__faq summary span { color: var(--melon-electric-blush); font-size: 1.3rem; }
.melon-home__faq details p { max-width: 42rem; color: var(--melon-lavender-grey); font-size: .9rem; line-height: 1.65; }
.melon-home__branches { background: var(--melon-surface); }
.melon-home__branches > div:last-child { display: grid; gap: 1rem; }
.melon-home__branches article { display: grid; gap: .55rem; border: 1px solid var(--melon-glass-border); padding: 1.5rem; background: var(--melon-deep-navy); }
.melon-home__branches article > p { margin: 0; }
.melon-home__branches h3 { margin: 0; font-size: 1.8rem; }
.melon-home__branches article > span { color: var(--melon-lavender-grey); font-size: .9rem; }
.melon-home__branches a { margin-top: .6rem; color: var(--melon-on-surface); font: 700 .68rem var(--melon-sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.melon-home__final-cta { position: relative; min-height: 580px; display: grid; place-items: center; padding: 4rem var(--melon-margin); text-align: center; isolation: isolate; }
.melon-home__final-cta::after { position: absolute; z-index: -1; inset: 0; background: rgba(8,8,18,.75); content: ""; }
.melon-home__final-cta > div { max-width: 670px; }
.melon-home__final-cta h2 { margin: 0 0 1.25rem; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; }
.melon-home__final-cta span { display: block; margin-bottom: 2rem; color: var(--melon-lavender-grey); line-height: 1.65; }
@media (min-width: 760px) { .melon-home__experience-grid { grid-template-columns: repeat(3, 1fr); } .melon-home__editorial { grid-template-columns: 1.1fr 1fr; align-items: center; } .melon-home__branches > div:last-child { grid-template-columns: repeat(2, 1fr); } .melon-featured-rooms__grid { grid-template-columns: repeat(2, 1fr); } .melon-featured-rooms__card--1 { grid-row: span 2; min-height: 580px; } }
@media (min-width: 1024px) { .melon-home__preview { grid-auto-columns: minmax(260px, 1fr); grid-template-columns: repeat(4, 1fr); overflow: visible; } .melon-home__experience-grid { gap: 2rem; } .melon-featured-rooms__grid { grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(2, 280px); } .melon-featured-rooms__card--1 { grid-row: span 2; min-height: auto; } .melon-featured-rooms__card--4 { grid-column: span 2; } }

/* CR-08 navigation --------------------------------------------------------- */
.melon-nav { position: sticky; z-index: 50; min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.melon-nav__brand { flex: 1; }
.melon-nav__toggle { display: none; width: 2.75rem; height: 2.75rem; padding: .6rem; border: 0; background: transparent; color: var(--melon-lavender-grey); cursor: pointer; }
.melon-nav__icon--menu, .melon-nav__icon--menu::before, .melon-nav__icon--menu::after { display: block; width: 1.3rem; height: 1px; background: currentColor; content: ""; }
.melon-nav__icon--menu { position: relative; margin: auto; }
.melon-nav__icon--menu::before { position: absolute; top: -.38rem; }
.melon-nav__icon--menu::after { position: absolute; top: .38rem; }
.melon-nav__desktop { position: static; flex: 0 1 auto; }
.melon-nav__rooms { position: static; }
.melon-nav__rooms-toggle { display: inline-flex; align-items: center; gap: .42rem; border: 0; padding: .45rem 0; background: transparent; color: var(--melon-lavender-grey); font: 700 .72rem var(--melon-sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.melon-nav__rooms-toggle span { color: var(--melon-electric-blush); font-size: 1rem; transition: transform .2s ease; }
.melon-nav__rooms.is-open .melon-nav__rooms-toggle, .melon-nav__rooms-toggle:hover, .melon-nav__rooms-toggle:focus-visible { color: var(--melon-electric-blush); }
.melon-nav__rooms.is-open .melon-nav__rooms-toggle span { transform: rotate(45deg); }
.melon-nav__mega { position: absolute; z-index: 51; top: 100%; right: 0; left: 0; max-height: min(42rem, calc(100vh - 5rem)); overflow: auto; border-top: 1px solid var(--melon-glass-border); background: rgba(8, 8, 18, .97); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .32); backdrop-filter: blur(24px); animation: melon-nav-reveal .22s ease-out; }
.melon-nav__mega[hidden], .melon-nav__mobile-overlay[hidden] { display: none; }
.melon-nav__mega-inner { display: grid; grid-template-columns: minmax(13rem, .75fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 7rem); max-width: 90rem; margin: auto; padding: 3rem var(--melon-margin); }
.melon-nav__mega-links { display: flex; flex-direction: column; align-items: stretch; padding-top: 1rem; }
.melon-nav__mega-kicker, .melon-nav__eyebrow { margin: 0 0 1.25rem; color: var(--melon-electric-blush); font: 700 .66rem var(--melon-sans); letter-spacing: .2em; text-transform: uppercase; }
.melon-nav__mega-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--melon-glass-border); padding: 1rem 0; color: var(--melon-on-surface); font: 400 clamp(1.45rem, 2vw, 2.1rem)/1.1 var(--melon-serif); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.melon-nav__mega-links a span { color: var(--melon-electric-blush); opacity: 0; transform: translateX(-.4rem); transition: opacity .2s ease, transform .2s ease; }
.melon-nav__mega-links a:hover, .melon-nav__mega-links a:focus-visible { border-color: var(--melon-electric-blush); color: var(--melon-electric-blush); }
.melon-nav__mega-links a:hover span, .melon-nav__mega-links a:focus-visible span { opacity: 1; transform: translateX(0); }
.melon-nav__mega-links .melon-nav__mega-all { margin-top: .8rem; color: var(--melon-electric-blush); font: 700 .68rem var(--melon-sans); letter-spacing: .14em; text-transform: uppercase; }
.melon-nav__mega-all span { opacity: 1 !important; transform: none !important; }
.melon-nav__mega-rooms { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(9rem, 13rem)); gap: 1rem; }
.melon-nav__mega-card { position: relative; display: flex; min-width: 0; overflow: hidden; border-radius: var(--melon-radius); background: var(--melon-deep-navy); color: var(--melon-on-surface); isolation: isolate; text-decoration: none; }
.melon-nav__mega-card--1 { grid-row: span 2; }
.melon-nav__mega-image { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.melon-nav__mega-card-veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(8,8,18,.94), transparent 72%); }
.melon-nav__mega-card-copy { display: flex; width: 100%; flex-direction: column; justify-content: end; padding: 1.3rem; }
.melon-nav__mega-card-copy small, .melon-nav__mega-card-copy em { color: var(--melon-electric-blush); font: 700 .62rem var(--melon-sans); letter-spacing: .15em; text-transform: uppercase; }
.melon-nav__mega-card-copy strong { margin: .35rem 0 .7rem; color: #fff; font: 400 clamp(1.2rem, 1.8vw, 1.8rem)/1 var(--melon-serif); }
.melon-nav__mega-card-copy em { color: var(--melon-lavender-grey); font-style: normal; }
.melon-nav__mega-card:hover .melon-nav__mega-image, .melon-nav__mega-card:focus-visible .melon-nav__mega-image { transform: scale(1.05); }
.melon-nav__mega-card:hover em, .melon-nav__mega-card:focus-visible em { color: var(--melon-electric-blush); }
.melon-nav__mobile-overlay { position: fixed; z-index: 70; inset: 0; overflow-y: auto; background: rgba(8, 8, 18, .97); backdrop-filter: blur(20px); }
.melon-nav__mobile-panel { min-height: 100%; padding: 1.25rem var(--melon-margin) calc(2rem + env(safe-area-inset-bottom)); }
.melon-nav__mobile-head { display: flex; align-items: center; justify-content: space-between; }
.melon-nav__mobile-brand { margin: 0; color: var(--melon-electric-blush); font: 400 2rem var(--melon-serif); letter-spacing: -.04em; }
.melon-nav__close { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--melon-glass-border); border-radius: 50%; background: transparent; color: var(--melon-lavender-grey); font-size: 2rem; line-height: 1; cursor: pointer; }
.melon-nav__close:hover, .melon-nav__close:focus-visible { border-color: var(--melon-electric-blush); color: var(--melon-electric-blush); }
.melon-nav__mobile-links { display: grid; gap: .25rem; margin-top: 4rem; }
.melon-nav__mobile-links a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--melon-glass-border); padding: 1.15rem 0; color: var(--melon-on-surface); font: 400 clamp(1.7rem, 8vw, 2.4rem) var(--melon-serif); text-decoration: none; }
.melon-nav__mobile-links a span { color: var(--melon-electric-blush); }
.melon-nav__mobile-branches { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.melon-nav__mobile-branches a { border: 1px solid var(--melon-glass-border); border-radius: 99px; padding: .65rem .9rem; color: var(--melon-lavender-grey); font: 700 .68rem var(--melon-sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.melon-nav__mobile-branches a:hover, .melon-nav__mobile-branches a:focus-visible { border-color: var(--melon-electric-blush); color: var(--melon-electric-blush); }
.melon-nav-open { overflow: hidden; }
@keyframes melon-nav-reveal { from { opacity: 0; transform: translateY(-.6rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) { .melon-nav { min-height: 4.5rem; flex-wrap: nowrap !important; padding-top: .85rem; padding-bottom: .85rem; } .melon-nav__toggle { display: block; flex: 0 0 auto; } .melon-nav__brand { flex: 1; text-align: center; } .melon-nav__brand { font-size: 1.35rem; } .melon-nav__desktop { display: none; } .melon-nav__cta { flex: 0 0 auto; } .melon-nav__cta a { padding: .7rem .8rem; font-size: .58rem; } }
@media (min-width: 768px) { .melon-nav__mobile-overlay { display: none !important; } }

/* ==========================================================================
   CR-09: landing SEO tien nghi (mockup 'Khach san co bon tam tai Ha Noi')
   ========================================================================== */

.melon-landing__hero {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	margin: 0 0 var(--melon-section-gap);
}
.melon-landing__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-landing__hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--melon-midnight-sapphire) 0%, rgba(8, 8, 18, 0.55) 45%, rgba(8, 8, 18, 0.35) 100%);
}
.melon-landing__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 46rem;
	padding: 3rem var(--melon-margin);
}
.melon-landing__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2.2rem, 5.5vw, 3.6rem);
	line-height: 1.15;
	margin: 0 0 1.25rem;
}
.melon-landing__lead {
	color: var(--melon-lavender-grey);
	line-height: 1.75;
	margin: 0 0 1.75rem;
}
.melon-landing__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	border-radius: var(--melon-radius);
	padding: 0.95rem 1.6rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.25);
	transition: box-shadow 0.3s ease;
}
.melon-landing__cta:hover,
.melon-landing__cta:focus-visible {
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 32px rgba(255, 77, 148, 0.45);
}
.melon-landing__rooms {
	padding: 0 var(--melon-margin) var(--melon-section-gap);
}
.melon-landing__grid-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2.5rem;
}
.melon-landing__grid-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0 0 0.5rem;
}
.melon-landing__grid-sub {
	color: rgba(180, 180, 216, 0.8);
	max-width: 34rem;
	margin: 0;
}
.melon-landing__all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.melon-landing__art,
.melon-landing__exp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: var(--melon-section-gap);
}
@media (min-width: 900px) {
	.melon-landing__art {
		grid-template-columns: 1fr 1.1fr;
		gap: 4rem;
	}
	.melon-landing__exp {
		grid-template-columns: 1.1fr 1fr;
		gap: 4rem;
	}
}
.melon-landing__art h2,
.melon-landing__exp h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}
.melon-landing__art p,
.melon-landing__exp p {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	margin: 0 0 1.5rem;
}
.melon-landing__art-image,
.melon-landing__exp-image {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: var(--melon-radius-lg);
}
@media (max-width: 899px) {
	.melon-landing__exp-image {
		order: -1;
	}
}
.melon-landing__more {
	display: inline-block;
	border: 1px solid rgba(180, 180, 216, 0.35);
	border-radius: var(--melon-radius);
	color: var(--melon-lavender-grey);
	padding: 0.75rem 1.4rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-landing__more:hover,
.melon-landing__more:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}
.melon-landing__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.8rem;
}
.melon-landing__checks li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--melon-on-surface);
	font-weight: 600;
}
.melon-landing__checks svg {
	color: var(--melon-electric-blush);
	flex-shrink: 0;
}

/* ==========================================================================
   CR-10: trang Ve chung toi
   ========================================================================== */
.melon-about__hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 0 0 var(--melon-section-gap);
}
.melon-about__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-about__hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(8, 8, 18, 0.92) 25%, rgba(8, 8, 18, 0.45) 70%, rgba(8, 8, 18, 0.25) 100%);
}
.melon-about__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 3rem var(--melon-margin);
}
.melon-about__eyebrow {
	color: var(--melon-electric-blush);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.melon-about__eyebrow--center {
	text-align: center;
}
.melon-about__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1.1;
	max-width: 15ch;
	margin: 0 0 1.25rem;
}
.melon-about__lead {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	max-width: 34rem;
	margin: 0 0 1.75rem;
}
.melon-about__why {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	max-width: 1440px;
	margin: 0 auto var(--melon-section-gap);
	padding: 0 var(--melon-margin);
	align-items: center;
}
@media (min-width: 900px) {
	.melon-about__why {
		grid-template-columns: 1.2fr 1fr;
		gap: 4rem;
	}
}
.melon-about__why h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin: 0 0 1rem;
}
.melon-about__why p {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	margin: 0 0 1.5rem;
}
.melon-about__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.melon-about__stat {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.5rem 1rem;
	text-align: center;
}
.melon-about__stat-num {
	display: block;
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin-bottom: 0.4rem;
	white-space: nowrap;
}
.melon-about__stat-label {
	color: rgba(180, 180, 216, 0.85);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.melon-about__quote {
	max-width: 780px;
	margin: 0 auto var(--melon-section-gap);
	padding: 0 var(--melon-margin);
	text-align: center;
	color: var(--melon-electric-blush);
}
.melon-about__quote blockquote {
	margin: 0;
}
.melon-about__quote p {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.2rem, 2.6vw, 1.7rem);
	line-height: 1.5;
	margin: 0.75rem 0 1rem;
}
.melon-about__quote cite {
	color: var(--melon-lavender-grey);
	font-style: normal;
	font-size: 0.9rem;
}
.melon-about__worlds {
	max-width: 1440px;
	margin: 0 auto var(--melon-section-gap);
	padding: 0 var(--melon-margin);
}
.melon-about__world-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin-top: 1.5rem;
}
@media (min-width: 900px) {
	.melon-about__world-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.melon-about__world {
	position: relative;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
}
.melon-about__world-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.melon-about__world:hover .melon-about__world-image {
	transform: scale(1.05);
}
.melon-about__world-body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 1.75rem;
	background: linear-gradient(to top, rgba(8, 8, 18, 0.95) 20%, rgba(8, 8, 18, 0.4) 80%, transparent 100%);
}
.melon-about__world-body h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.7rem;
	margin: 0 0 0.5rem;
}
.melon-about__world-body p {
	color: var(--melon-lavender-grey);
	margin: 0 0 0.75rem;
	line-height: 1.7;
}
.melon-about__world-body a {
	color: var(--melon-electric-blush);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-about__cta {
	text-align: center;
	padding: 0 var(--melon-margin) var(--melon-section-gap);
}
.melon-about__cta h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	max-width: 24ch;
	margin: 0 auto 1.5rem;
}

/* ==========================================================================
   CR-11: trang Lien he
   ========================================================================== */
.melon-contact {
	padding: 3.5rem 0 var(--melon-section-gap);
}
.melon-contact__hero {
	text-align: center;
	margin-bottom: 3.5rem;
}
.melon-contact__title {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	margin: 0 0 0.75rem;
}
.melon-contact__lead {
	color: var(--melon-lavender-grey);
	max-width: 36rem;
	margin: 0 auto 1.75rem;
	line-height: 1.7;
}
.melon-contact__quick {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}
.melon-contact__quick-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 999px;
	color: var(--melon-on-surface);
	padding: 0.85rem 1.5rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.melon-contact__quick-item:hover,
.melon-contact__quick-item:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}
.melon-contact__quick-item--primary {
	background: var(--melon-electric-blush);
	border-color: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.25);
}
.melon-contact__quick-item--primary:hover,
.melon-contact__quick-item--primary:focus-visible {
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 32px rgba(255, 77, 148, 0.45);
}
.melon-contact__branches h2,
.melon-contact__form-wrap h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	margin: 0 0 1.5rem;
}
.melon-contact__branch-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
	.melon-contact__branch-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.melon-contact__branch {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.75rem;
}
.melon-contact__branch h3 {
	font-family: var(--melon-serif);
	color: var(--melon-electric-blush);
	font-size: 1.35rem;
	margin: 0 0 1rem;
}
.melon-contact__branch-line {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--melon-lavender-grey);
	margin: 0 0 0.7rem;
}
.melon-contact__branch-line svg {
	flex-shrink: 0;
	margin-top: 0.15rem;
}
.melon-contact__branch-line a {
	color: var(--melon-on-surface);
	text-decoration: none;
	font-weight: 600;
}
.melon-contact__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0.4rem 0 0.9rem;
}
.melon-contact__support {
	margin: 0;
	color: rgba(180, 180, 216, 0.7);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-top: 1px solid rgba(180, 180, 216, 0.12);
	padding-top: 0.9rem;
}
.melon-contact__form-wrap {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 2rem;
}
.melon-contact__form-sub {
	color: rgba(180, 180, 216, 0.8);
	margin: -0.75rem 0 1.5rem;
}
.melon-contact__form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin-bottom: 1.4rem;
}
@media (min-width: 640px) {
	.melon-contact__form-grid {
		grid-template-columns: 1fr 1fr;
	}
	.melon-contact__form-grid .melon-booking__field--wide {
		grid-column: 1 / -1;
	}
}
.melon-contact__form-grid textarea {
	width: 100%;
	background: rgba(8, 8, 18, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	color: var(--melon-on-surface);
	padding: 0.9rem 1rem;
	font: inherit;
	resize: vertical;
}
.melon-contact__form-grid textarea:focus-visible {
	outline: none;
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 12px rgba(255, 77, 148, 0.25);
}
.melon-contact__submit {
	max-width: 240px;
}
.melon-contact__notice {
	border-radius: var(--melon-radius);
	padding: 0.9rem 1.2rem;
	margin: 0 0 1.25rem;
}
.melon-contact__notice--ok {
	background: rgba(255, 77, 148, 0.1);
	border: 1px solid rgba(255, 77, 148, 0.45);
	color: var(--melon-on-surface);
}
.melon-contact__notice--err {
	background: rgba(147, 0, 10, 0.35);
	border: 1px solid #ffb4ab;
	color: #ffdad6;
}

/* CR-12: trang gioi thieu co so */
.melon-branch__hero {
	position: relative;
	min-height: 74vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.melon-branch__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-branch__hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--melon-midnight-sapphire) 4%, rgba(8, 8, 18, 0.5) 55%, rgba(8, 8, 18, 0.2) 100%);
}
.melon-branch__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 3rem var(--melon-margin) 4rem;
}
.melon-branch__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2.8rem, 8vw, 5rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}
.melon-branch__tagline {
	color: var(--melon-lavender-grey);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 34rem;
	margin: 0 0 1.75rem;
}
.melon-branch__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
}
.melon-branch__hero-actions .melon-landing__cta,
.melon-branch__book {
	width: auto;
	margin: 0;
}
.melon-branch__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(180, 180, 216, 0.12);
	border-block: 1px solid rgba(180, 180, 216, 0.12);
	margin-bottom: var(--melon-section-gap);
}
@media (min-width: 900px) {
	.melon-branch__stats {
		grid-template-columns: repeat(4, 1fr);
	}
}
.melon-branch__stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	background: var(--melon-midnight-sapphire);
	color: var(--melon-on-surface);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 1.4rem 1rem;
	text-align: center;
}
.melon-branch__stat svg {
	color: var(--melon-electric-blush);
	flex-shrink: 0;
}
.melon-branch__usp {
	margin-top: var(--melon-section-gap);
}
.melon-branch__usp h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
	margin: 0 0 2rem;
}
.melon-branch__usp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.melon-branch__usp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1200px) {
	.melon-branch__usp-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.melon-branch__usp-card {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.6rem;
}
.melon-branch__usp-card h3 {
	color: var(--melon-electric-blush);
	font-size: 1.02rem;
	margin: 0 0 0.6rem;
}
.melon-branch__usp-card p {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	margin: 0;
	font-size: 0.92rem;
}

/* CR-13: blog - danh muc */
.melon-blog-page {
	padding-top: 3rem;
}
.melon-blog__head {
	text-align: center;
	margin-bottom: 3.5rem;
}
.melon-blog__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2rem, 5vw, 3.2rem);
	max-width: 22ch;
	margin: 0 auto 1.75rem;
	line-height: 1.15;
}
.melon-blog__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
}
.melon-blog__chip {
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 999px;
	color: var(--melon-lavender-grey);
	padding: 0.55rem 1.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.melon-blog__chip:hover,
.melon-blog__chip:focus-visible {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}
.melon-blog__chip.is-active {
	background: var(--melon-electric-blush);
	border-color: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
}
.melon-blog__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.9rem;
}
.melon-blog__cat {
	color: var(--melon-electric-blush);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-blog__read {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: rgba(180, 180, 216, 0.7);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.melon-blog__featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	margin-bottom: var(--melon-section-gap);
	align-items: center;
}
@media (min-width: 900px) {
	.melon-blog__featured {
		grid-template-columns: 1.35fr 1fr;
		gap: 3rem;
	}
}
.melon-blog__featured-media {
	display: block;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.melon-blog__featured-image,
.melon-blog__card-image,
.melon-blog__topic-image,
.melon-article__related-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.melon-blog__featured-media:hover .melon-blog__featured-image,
.melon-blog__card:hover .melon-blog__card-image,
.melon-blog__topic:hover .melon-blog__topic-image,
.melon-article__related-card:hover .melon-article__related-image {
	transform: scale(1.05);
}
.melon-blog__featured-title {
	font-family: var(--melon-serif);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}
.melon-blog__featured-title a,
.melon-blog__card-title a,
.melon-article__related-card h3 a {
	color: var(--melon-on-surface);
	text-decoration: none;
	transition: color 0.3s ease;
}
.melon-blog__featured-title a:hover,
.melon-blog__card-title a:hover,
.melon-article__related-card h3 a:hover {
	color: var(--melon-electric-blush);
}
.melon-blog__excerpt {
	color: var(--melon-lavender-grey);
	line-height: 1.75;
	margin: 0 0 1.1rem;
}
.melon-blog__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--melon-electric-blush);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-blog__section-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1.75rem;
}
.melon-blog__latest,
.melon-blog__topics {
	margin-bottom: var(--melon-section-gap);
}
.melon-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 700px) {
	.melon-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1100px) {
	.melon-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.melon-blog__card {
	display: flex;
	flex-direction: column;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.melon-blog__card:hover {
	border-color: rgba(255, 77, 148, 0.4);
	box-shadow: 0 0 28px rgba(255, 77, 148, 0.12);
}
.melon-blog__card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.melon-blog__card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.4rem 1.5rem 1.5rem;
}
.melon-blog__card-body .melon-blog__cat {
	margin: 0 0 0.6rem;
}
.melon-blog__card-title {
	font-family: var(--melon-serif);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.7rem;
}
.melon-blog__card-body .melon-blog__excerpt {
	font-size: 0.92rem;
	margin-bottom: 1.1rem;
}
.melon-blog__meta--foot {
	margin: auto 0 0;
	color: rgba(180, 180, 216, 0.6);
}
.melon-blog__topic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 900px) {
	.melon-blog__topic-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.melon-blog__topic {
	position: relative;
	display: block;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	text-decoration: none;
}
.melon-blog__topic-panel {
	position: absolute;
	inset-inline: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: rgba(8, 8, 18, 0.65);
	backdrop-filter: blur(10px);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius);
	color: var(--melon-on-surface);
	font-family: var(--melon-serif);
	font-size: 1.15rem;
	padding: 1.1rem 1.3rem;
}
.melon-blog__topic-panel svg {
	color: var(--melon-electric-blush);
	flex-shrink: 0;
}
.melon-blog__cta {
	text-align: center;
	padding-bottom: var(--melon-section-gap);
}
.melon-blog__cta h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	margin: 0 0 1.5rem;
}
.melon-blog__cta .melon-landing__cta {
	width: auto;
	margin: 0 auto;
	display: inline-flex;
}
.melon-blog__empty {
	color: var(--melon-lavender-grey);
	text-align: center;
	padding: 4rem 0;
}

/* CR-13: blog - bai viet */
.melon-article {
	padding-top: 3rem;
}
.melon-article__hero {
	max-width: 800px;
	margin: 0 auto 2.5rem;
	text-align: center;
}
.melon-article__meta {
	justify-content: center;
	margin-bottom: 1.1rem;
}
.melon-article__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	line-height: 1.18;
	margin: 0 0 1.1rem;
}
.melon-article__lead {
	color: var(--melon-lavender-grey);
	font-size: 1.05rem;
	line-height: 1.8;
	margin: 0 0 1rem;
}
.melon-article__updated {
	color: rgba(180, 180, 216, 0.6);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0;
}
.melon-article__cover {
	margin: 0 0 var(--melon-section-gap);
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	aspect-ratio: 21 / 9;
}
.melon-article__cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.melon-article__body {
	max-width: 760px;
	margin: 0 auto var(--melon-section-gap);
}
.melon-article__body p {
	color: var(--melon-lavender-grey);
	font-size: 1.02rem;
	line-height: 1.9;
	margin: 0 0 1.4rem;
}
.melon-article__body h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	margin: 2.6rem 0 1rem;
}
.melon-article__body a {
	color: var(--melon-electric-blush);
}
.melon-article__body figure {
	margin: 2rem 0;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
}
.melon-article__body figure img {
	width: 100%;
	height: auto;
	display: block;
}
.melon-article__body .melon-article__tip {
	background: var(--melon-glass-bg);
	border: 1px solid rgba(255, 77, 148, 0.35);
	border-radius: var(--melon-radius-lg);
	padding: 1.6rem 1.75rem;
	margin: 2.2rem 0;
}
.melon-article__body .melon-article__tip p:first-child {
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.7rem;
}
.melon-article__body .melon-article__tip p:last-child {
	margin-bottom: 0;
}
.melon-article__body .melon-article__promo {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 1.75rem;
	margin: 2.2rem 0;
	text-align: center;
}
.melon-article__body .melon-article__promo h3 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.3rem;
	margin: 0 0 0.7rem;
}
.melon-article__body .melon-article__promo p {
	margin-bottom: 1rem;
}
.melon-article__body .melon-article__promo a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--melon-electric-blush);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: 0.95rem;
}
.melon-article__body th,
.melon-article__body td {
	border: 1px solid rgba(180, 180, 216, 0.15);
	padding: 0.85rem 1rem;
	text-align: left;
	color: var(--melon-lavender-grey);
	vertical-align: top;
}
.melon-article__body th {
	color: var(--melon-on-surface);
	background: rgba(180, 180, 216, 0.06);
	font-weight: 700;
}
.melon-article__body .wp-block-table {
	overflow-x: auto;
	margin: 2rem 0;
}
.melon-article__body .wp-block-table table {
	margin: 0;
}
.melon-article__related {
	max-width: 1440px;
	margin: 0 auto;
	padding-bottom: var(--melon-section-gap);
}
.melon-article__related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}
.melon-article__related-head h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
}
.melon-article__related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
}
@media (min-width: 900px) {
	.melon-article__related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.melon-article__related-media {
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.melon-article__related-card .melon-blog__cat {
	margin: 0 0 0.5rem;
	display: block;
}
.melon-article__related-card h3 {
	font-family: var(--melon-serif);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.6rem;
}
.melon-article__related-card .melon-blog__excerpt {
	font-size: 0.92rem;
	margin: 0;
}

/* CR-14: trang FAQ theo mockup */
.melon-page--wide {
	padding-top: 3rem;
}
.melon-faq,
.melon-policy {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: var(--melon-section-gap);
}
@media (min-width: 1000px) {
	.melon-faq,
	.melon-policy {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 4rem;
	}
}
.melon-faq__side nav,
.melon-policy__toc nav {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
@media (min-width: 1000px) {
	.melon-faq__side nav,
	.melon-policy__toc nav {
		position: sticky;
		top: 110px;
	}
}
.melon-faq__side-label,
.melon-policy__toc-label {
	color: rgba(180, 180, 216, 0.6);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.melon-faq__side a,
.melon-policy__toc a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--melon-lavender-grey);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 var(--melon-radius) var(--melon-radius) 0;
	padding: 0.7rem 0.9rem;
	transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.melon-faq__side a svg {
	flex-shrink: 0;
	color: rgba(180, 180, 216, 0.7);
	transition: color 0.3s ease;
}
.melon-faq__side a:hover,
.melon-faq__side a.is-active,
.melon-policy__toc a:hover,
.melon-policy__toc a.is-active {
	color: var(--melon-electric-blush);
	border-left-color: var(--melon-electric-blush);
	background: rgba(255, 77, 148, 0.06);
}
.melon-faq__side a:hover svg,
.melon-faq__side a.is-active svg {
	color: var(--melon-electric-blush);
}
.melon-faq__head {
	margin-bottom: 2.5rem;
}
.melon-faq__title,
.melon-policy__title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 0.9rem;
}
.melon-faq__lead,
.melon-policy__lead {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	max-width: 40rem;
	margin: 0 0 1.75rem;
}
.melon-faq__search {
	position: relative;
	max-width: 34rem;
}
.melon-faq__search svg {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(180, 180, 216, 0.7);
	pointer-events: none;
}
.melon-faq__search-input {
	width: 100%;
	background: rgba(8, 8, 18, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.25);
	border-radius: 999px;
	color: var(--melon-on-surface);
	font: inherit;
	padding: 0.95rem 1.4rem 0.95rem 2.9rem;
}
.melon-faq__search-input:focus-visible {
	outline: none;
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 14px rgba(255, 77, 148, 0.25);
}
.melon-faq__no-result {
	color: var(--melon-lavender-grey);
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius);
	padding: 1rem 1.25rem;
	margin: 1.25rem 0 0;
}
.melon-faq__group {
	margin-bottom: 2.75rem;
	scroll-margin-top: 110px;
}
.melon-faq__group h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.35rem, 3vw, 1.8rem);
	margin: 0 0 1.1rem;
}
.melon-faq__item {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	margin-bottom: 0.8rem;
	transition: border-color 0.3s ease;
}
.melon-faq__item[open] {
	border-color: rgba(255, 77, 148, 0.4);
}
.melon-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	color: var(--melon-on-surface);
	font-weight: 600;
	padding: 1.15rem 1.4rem;
}
.melon-faq__item summary::-webkit-details-marker {
	display: none;
}
.melon-faq__item summary:hover {
	color: var(--melon-electric-blush);
}
.melon-faq__chevron {
	flex-shrink: 0;
	color: var(--melon-electric-blush);
	transition: transform 0.3s ease;
}
.melon-faq__item[open] .melon-faq__chevron {
	transform: rotate(180deg);
}
.melon-faq__answer {
	padding: 0 1.4rem 1.25rem;
}
.melon-faq__answer p {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	margin: 0;
}
.melon-faq__cta {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	text-align: center;
	padding: 2.5rem 1.75rem;
}
.melon-faq__cta h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	margin: 0 0 0.7rem;
}
.melon-faq__cta p {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	max-width: 32rem;
	margin: 0 auto 1.5rem;
}
.melon-faq__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}
.melon-faq__cta-primary,
.melon-faq__cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9rem 1.8rem;
	transition: box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.melon-faq__cta-primary {
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	box-shadow: 0 0 20px rgba(255, 77, 148, 0.25);
}
.melon-faq__cta-primary:hover {
	box-shadow: 0 0 32px rgba(255, 77, 148, 0.45);
}
.melon-faq__cta-secondary {
	border: 1px solid rgba(180, 180, 216, 0.35);
	color: var(--melon-on-surface);
}
.melon-faq__cta-secondary:hover {
	color: var(--melon-electric-blush);
	border-color: rgba(255, 77, 148, 0.5);
}

/* CR-14: trang Chinh sach theo mockup */
.melon-policy__head {
	margin-bottom: 2.5rem;
}
.melon-policy__toc a {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.86rem;
}
.melon-policy__section {
	margin-bottom: 3rem;
	scroll-margin-top: 110px;
}
.melon-policy__section h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.4rem, 3.2vw, 1.9rem);
	border-bottom: 1px solid rgba(180, 180, 216, 0.15);
	padding-bottom: 0.8rem;
	margin: 0 0 1.25rem;
}
.melon-policy__section > p {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	margin: 0 0 1.1rem;
}
.melon-policy__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}
@media (min-width: 900px) {
	.melon-policy__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
.melon-policy__card {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 1.5rem 1.6rem;
}
.melon-policy__card h3 {
	color: var(--melon-electric-blush);
	font-size: 1rem;
	margin: 0 0 0.7rem;
}
.melon-policy__card p {
	color: var(--melon-lavender-grey);
	font-size: 0.94rem;
	line-height: 1.75;
	margin: 0 0 0.8rem;
}
.melon-policy__card p:last-child {
	margin-bottom: 0;
}
.melon-policy__card ul,
.melon-policy__section ul {
	color: var(--melon-lavender-grey);
	font-size: 0.94rem;
	line-height: 1.75;
	margin: 0 0 0.8rem;
	padding-left: 1.2rem;
}
.melon-policy__card li,
.melon-policy__section li {
	margin-bottom: 0.35rem;
}
.melon-policy__card li::marker,
.melon-policy__section li::marker {
	color: var(--melon-electric-blush);
}

/* CR-13 fix tu soat: blog + bai viet phai co le ngang nhu mockup */
.melon-blog-page,
.melon-article {
	padding-inline: var(--melon-margin);
}

.melon-home__button--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff !important;
}
.melon-home__button--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.melon-home__hero .melon-home__hero-overlay {
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.88), rgba(8, 8, 18, 0.35) 45%, rgba(8, 8, 18, 0.55));
}
.melon-home__discovery-label {
	margin: 0 0 1.2rem;
	color: var(--melon-lavender-grey);
	font: italic 500 1.05rem var(--melon-sans);
	letter-spacing: 0.01em;
}
.melon-home__chips a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(180, 180, 216, 0.06);
}
.melon-home__preview {
	grid-auto-flow: row;
	grid-auto-columns: unset;
	grid-template-columns: 1fr;
	overflow: visible;
	gap: 1.4rem;
}
@media (min-width: 700px) {
	.melon-home__preview { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.melon-home__preview { grid-template-columns: repeat(4, 1fr); }
}
.melon-home__preview > li {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1.1rem;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.melon-home__preview > li:hover {
	border-color: rgba(255, 77, 148, 0.4);
	box-shadow: 0 0 26px rgba(255, 77, 148, 0.12);
}
.melon-home__preview-media { position: relative; }
.melon-home__preview-media > a {
	position: relative;
	display: block;
	aspect-ratio: 0.92;
	overflow: hidden;
	background: var(--melon-deep-navy);
}
.melon-home__preview-strip {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 2rem 1rem 0.9rem;
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.85), transparent);
}
.melon-home__preview-price { display: grid; line-height: 1.1; }
.melon-home__preview-price small {
	color: rgba(255, 255, 255, 0.85);
	font: 700 0.6rem var(--melon-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.melon-home__preview-price strong {
	color: var(--melon-electric-blush);
	font: 700 1.5rem var(--melon-sans);
}
.melon-home__preview-cta {
	background: var(--melon-electric-blush);
	border-radius: 999px;
	color: #fff !important;
	font: 700 0.64rem var(--melon-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.6rem 1.1rem;
	white-space: nowrap;
}
.melon-home__preview-cta:hover { background: #d92d75; }
.melon-home__preview-body { display: grid; gap: 0.3rem; padding: 1.05rem 1.15rem 1.2rem; }
.melon-home__preview-body a {
	color: var(--melon-on-surface);
	font-family: var(--melon-serif);
	font-size: 1.25rem;
	text-decoration: none;
}
.melon-home__preview-body a:hover { color: var(--melon-electric-blush); }
.melon-home__preview-body em { color: var(--melon-lavender-grey); font-size: 0.85rem; }
.melon-home__all-rooms { margin: 1.6rem 0 0; text-align: center; }
.melon-home__all-rooms .melon-home__more-link {
	margin-top: 0;
	color: var(--melon-electric-blush);
	border-bottom: 1px solid rgba(255, 77, 148, 0.5);
	padding-bottom: 0.35rem;
}
.melon-home__section-head--split { align-items: start; }
.melon-home__section-head--split > span {
	max-width: 26rem;
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	padding-top: 0.6rem;
}
.melon-home__section-head--center { justify-content: center; text-align: center; }
.melon-home__experience-grid a {
	position: static;
	aspect-ratio: auto;
	background: none;
	display: block;
}
.melon-home__experience-media {
	position: relative;
	display: block;
	aspect-ratio: 0.8;
	overflow: hidden;
	background: var(--melon-deep-navy);
	border-radius: 0.4rem;
}
.melon-home__experience--2 .melon-home__experience-media { aspect-ratio: 0.72; }
@media (min-width: 900px) {
	.melon-home__experience--2 { margin-top: 2.5rem; }
}
.melon-home__experience-caption {
	position: static;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	background: none;
	padding: 1.1rem 0.2rem 0;
}
.melon-home__experience-caption strong {
	margin: 0;
	color: var(--melon-on-surface);
	font: 400 1.55rem/1.15 var(--melon-serif);
}
.melon-home__experience-caption i {
	color: var(--melon-electric-blush);
	font: 700 0.63rem var(--melon-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
@media (min-width: 900px) {
	.melon-home__experience-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.melon-home__editorial { gap: 4rem; }
@media (min-width: 1000px) {
	.melon-home__editorial { grid-template-columns: 1.05fr 1fr; align-items: center; }
}
.melon-home__editorial-lead h2 em {
	display: inline-block;
	color: var(--melon-electric-blush);
	font-style: italic;
}
.melon-home__editorial-lead > span {
	display: block;
	max-width: 30rem;
	color: var(--melon-lavender-grey);
	line-height: 1.75;
}
.melon-home__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2.4rem;
}
.melon-home__logos span {
	color: rgba(230, 230, 245, 0.85);
	font: 700 1.15rem var(--melon-serif);
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.melon-home__perks {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid rgba(180, 180, 216, 0.14);
}
.melon-home__perks li {
	display: grid;
	gap: 0.45rem;
	border-left: 0;
	border-bottom: 1px solid rgba(180, 180, 216, 0.14);
	padding: 1.9rem 0 1.9rem 2.2rem;
}
.melon-home__perks li:last-child { border-bottom: 0; }
.melon-home__perks svg { color: var(--melon-electric-blush); }
.melon-home__perks strong {
	color: var(--melon-on-surface);
	font: italic 400 1.35rem var(--melon-serif);
}
.melon-home__perks li > span {
	color: var(--melon-lavender-grey);
	font-size: 0.92rem;
	line-height: 1.7;
	max-width: 30rem;
}
.melon-home__branch-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
	.melon-home__branch-grid { grid-template-columns: 1fr 1fr; }
}
.melon-home__branch-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	border: 0;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	padding: 0;
	background: var(--melon-deep-navy);
}
.melon-home__branch-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.melon-home__branch-card:hover .melon-home__branch-image { transform: scale(1.05); }
.melon-home__branch-body {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.45rem;
	width: 100%;
	padding: 1.75rem;
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.92) 25%, rgba(8, 8, 18, 0.35) 80%, transparent);
}
.melon-home__branch-body p {
	margin: 0;
	color: var(--melon-electric-blush);
	font: 700 0.64rem var(--melon-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.melon-home__branch-body h3 { margin: 0; font-size: 2rem; }
.melon-home__branch-body > span { color: var(--melon-lavender-grey); font-size: 0.9rem; }
.melon-home__branch-body a {
	margin-top: 0.55rem;
	color: var(--melon-on-surface);
	font: 700 0.68rem var(--melon-sans);
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}
.melon-home__branch-body a:hover { color: var(--melon-electric-blush); }

/* CR-15: mega menu theo mockup Menu (MNU-01..03) */
.melon-nav__mega {
	min-height: calc(100vh - 72px);
	max-height: none;
	background: #080812;
	backdrop-filter: none;
}
.melon-nav__mega-links .melon-nav__mega-all {
	margin-top: 0;
	order: -1;
	border-bottom: 1px solid var(--melon-electric-blush);
	color: var(--melon-electric-blush);
	font: 400 clamp(1.6rem, 2.2vw, 2.3rem)/1.1 var(--melon-serif);
	letter-spacing: 0;
	text-transform: none;
	padding: 1rem 0;
}
.melon-nav__mega-inner { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.melon-nav__mega-rooms { grid-template-rows: repeat(2, minmax(11rem, 15rem)); }
.melon-nav__mega-card--2 { margin-bottom: 1.75rem; }
.melon-nav__mega-card--3 { margin-top: 1.75rem; }

/* CR-15: mobile menu overlay theo mockup Menu (MNU-02) */
.melon-nav__mobile-find {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid rgba(180, 180, 216, 0.18);
	color: var(--melon-electric-blush) !important;
	font: 400 clamp(2rem, 9vw, 2.6rem)/1.1 var(--melon-serif) !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.4rem 0 1.4rem !important;
}
.melon-nav__mobile-allrooms {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--melon-on-surface) !important;
	font: 700 1rem var(--melon-sans) !important;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 1.2rem 0 0.4rem !important;
}
.melon-nav__mobile-find span,
.melon-nav__mobile-allrooms span { color: var(--melon-electric-blush); }
.melon-nav__mobile-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	margin: 1rem 0 1.6rem;
}
.melon-nav__mobile-chips a {
	display: grid;
	gap: 0.7rem;
	background: rgba(180, 180, 216, 0.06);
	border: 1px solid rgba(180, 180, 216, 0.14);
	border-radius: 0.7rem;
	color: var(--melon-on-surface);
	font: 700 0.82rem var(--melon-sans);
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 1.1rem 1.1rem 1rem;
}
.melon-nav__mobile-chips svg { color: var(--melon-lavender-grey); }
.melon-nav__mobile-chips a:active,
.melon-nav__mobile-chips a:hover { border-color: rgba(255, 77, 148, 0.5); }
.melon-nav__mobile-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.5rem;
	margin-bottom: 1.4rem;
}
.melon-nav__mobile-cols > div { display: grid; gap: 0.55rem; align-content: start; }
.melon-nav__mobile-cols .melon-nav__eyebrow { margin: 0 0 0.35rem; }
.melon-nav__mobile-cols a {
	color: var(--melon-on-surface);
	font-size: 1.05rem;
	text-decoration: none;
	padding: 0.1rem 0;
}
.melon-nav__mobile-cols--minor {
	border-top: 1px solid rgba(180, 180, 216, 0.14);
	padding-top: 1.3rem;
}
.melon-nav__mobile-minor {
	color: var(--melon-lavender-grey) !important;
	font: 700 0.74rem var(--melon-sans) !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.melon-nav__mobile-actions {
	display: grid;
	gap: 0.8rem;
	margin-top: auto;
	border-top: 1px solid rgba(180, 180, 216, 0.14);
	padding-top: 1.2rem;
}
.melon-nav__mobile-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.melon-nav__mobile-contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 0.7rem;
	color: var(--melon-on-surface);
	font-size: 0.95rem;
	text-decoration: none;
	padding: 0.85rem;
}
.melon-nav__mobile-book {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--melon-electric-blush);
	border-radius: 0.7rem;
	color: var(--melon-midnight-sapphire);
	font: 700 0.85rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem;
}
.melon-nav__mobile-chips a span { color: var(--melon-on-surface); }
.melon-nav__mobile-cols a,
.melon-nav__mobile-chips a,
.melon-nav__mobile-minor { border-bottom: 0 !important; }
.melon-nav__mobile-cols .melon-nav__eyebrow { color: rgba(180, 180, 216, 0.75); }

/* CR-15: co so theo visual QA vong 1 (BR-*) */
.melon-branch__hero { min-height: 92vh; }
.melon-branch__title em {
	display: block;
	color: var(--melon-electric-blush);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
}
.melon-branch__stats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
	.melon-branch__stats { grid-template-columns: repeat(5, 1fr); }
}
.melon-branch__stat a { color: inherit; text-decoration: none; }
.melon-branch__title-em {
	color: var(--melon-electric-blush);
	font-style: italic;
}
.melon-branch__usp-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.melon-branch__usp-grid { grid-template-columns: repeat(3, 1fr); }
}
.melon-branch__usp h2 { margin-bottom: 2.6rem; }
.melon-branch__usp-card {
	background: none;
	border: 0;
	text-align: center;
	padding: 0 1rem;
}
.melon-branch__usp-avatar {
	display: block;
	width: 92px;
	height: 92px;
	margin: 0 auto 1.2rem;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid rgba(255, 77, 148, 0.45);
	box-shadow: 0 0 22px rgba(255, 77, 148, 0.18);
}
.melon-branch__usp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.melon-branch__usp-card h3 { color: var(--melon-on-surface); font-size: 1.05rem; }
.melon-branch__location {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 2.5rem;
	margin-top: var(--melon-section-gap);
}
@media (min-width: 900px) {
	.melon-branch__location { grid-template-columns: 1fr 1.1fr; }
}
.melon-branch__location-copy h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	margin: 0 0 0.9rem;
}
.melon-branch__location-copy > p {
	color: var(--melon-lavender-grey);
	line-height: 1.75;
	margin: 0 0 1.4rem;
}
.melon-branch__location-copy ul {
	display: grid;
	gap: 0.9rem;
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
}
.melon-branch__location-copy li { display: flex; gap: 0.7rem; align-items: flex-start; }
.melon-branch__location-copy li svg { color: var(--melon-electric-blush); margin-top: 0.2rem; flex-shrink: 0; }
.melon-branch__location-copy li strong { display: block; color: var(--melon-on-surface); font-size: 0.95rem; }
.melon-branch__location-copy li em {
	color: rgba(180, 180, 216, 0.75);
	font-style: normal;
	font-size: 0.82rem;
}
.melon-branch__direction {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(255, 77, 148, 0.5);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75rem 1.4rem;
}
.melon-branch__map {
	position: relative;
	min-height: 300px;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	background:
		radial-gradient(circle at 60% 40%, rgba(255, 77, 148, 0.14), transparent 55%),
		repeating-linear-gradient(0deg, rgba(180, 180, 216, 0.07) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(90deg, rgba(180, 180, 216, 0.07) 0 1px, transparent 1px 46px),
		var(--melon-deep-navy);
	display: grid;
	place-items: center;
}
.melon-branch__map-pin { color: var(--melon-electric-blush); }
.melon-branch__map-label {
	margin-top: 0.4rem;
	color: var(--melon-on-surface);
	font: 700 0.78rem var(--melon-sans);
	letter-spacing: 0.3em;
}
.melon-branch__reviews {
	text-align: center;
	margin-top: var(--melon-section-gap);
}
.melon-branch__stars {
	color: var(--melon-electric-blush);
	letter-spacing: 0.35em;
	margin: 0 0 0.7rem;
}
.melon-branch__reviews h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.7rem, 3.6vw, 2.4rem);
	margin: 0 0 0.5rem;
}
.melon-branch__reviews-sub {
	color: rgba(180, 180, 216, 0.8);
	font-size: 0.9rem;
	margin: 0 0 2rem;
}
.melon-branch__review-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	text-align: left;
}
@media (min-width: 800px) {
	.melon-branch__review-grid { grid-template-columns: 1fr 1fr; }
}
.melon-branch__review {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 1.7rem 1.8rem;
	margin: 0;
}
.melon-branch__review blockquote {
	color: var(--melon-lavender-grey);
	font-style: italic;
	line-height: 1.75;
	margin: 0 0 1.1rem;
}
.melon-branch__review figcaption strong { display: block; color: var(--melon-on-surface); font-size: 0.95rem; }
.melon-branch__review figcaption span { color: rgba(180, 180, 216, 0.7); font-size: 0.8rem; }
.melon-branch__cta {
	text-align: center;
	padding: var(--melon-section-gap) 0 1rem;
}
.melon-branch__cta h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin: 0 0 1.6rem;
}
.melon-branch__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}
.melon-branch__cta-actions .melon-landing__cta,
.melon-branch__cta-actions .melon-branch__book { width: auto; margin: 0; }

/* CR-15: ve chung toi theo visual QA vong 1 (AU-*) */
.melon-about__hero--center { justify-content: center; text-align: center; }
.melon-about__hero--center .melon-about__hero-gradient {
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.9), rgba(8, 8, 18, 0.45) 50%, rgba(8, 8, 18, 0.6));
}
.melon-about__hero--center .melon-about__hero-inner { display: grid; justify-items: center; }
.melon-about__hero--center .melon-about__title { max-width: none; }
.melon-about__title em {
	color: var(--melon-electric-blush);
	font-style: italic;
}
.melon-about__hero--center .melon-about__lead { margin-inline: auto; max-width: 32rem; }
.melon-about__hero--center .melon-landing__cta { width: auto; }
.melon-about__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 190px;
	gap: 1rem;
}
.melon-about__collage-item {
	display: block;
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
}
.melon-about__collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.melon-about__collage-item--3 { grid-column: 1 / -1; }
.melon-about__band {
	background: linear-gradient(180deg, rgba(66, 42, 90, 0.35), rgba(28, 20, 46, 0.6));
	border-block: 1px solid rgba(180, 180, 216, 0.12);
	padding: 3.5rem var(--melon-margin) 4rem;
	margin-bottom: var(--melon-section-gap);
}
.melon-about__band .melon-about__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	max-width: 1100px;
	margin: 0 auto 3rem;
}
.melon-about__band .melon-about__stat {
	background: none;
	border: 0;
	border-radius: 0;
	border-right: 1px solid rgba(180, 180, 216, 0.18);
	padding: 0.6rem 1rem;
}
.melon-about__band .melon-about__stat:last-child { border-right: 0; }
.melon-about__band .melon-about__stat-num { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.melon-about__band .melon-about__quote {
	max-width: 900px;
	margin: 0 auto;
	padding: 2.2rem 2.5rem;
	background: rgba(8, 8, 18, 0.72);
	border: 1px solid rgba(180, 180, 216, 0.14);
	border-radius: var(--melon-radius-lg);
	text-align: left;
}
.melon-about__quote-stars {
	color: var(--melon-electric-blush);
	letter-spacing: 0.3em;
	margin: 0 0 0.8rem;
}
.melon-about__band .melon-about__quote p {
	font-style: italic;
	text-align: left;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.melon-about__worlds-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
	margin: 0 0 2.25rem;
}
.melon-about__world {
	display: block;
	min-height: 0;
	border-radius: 0;
	overflow: visible;
}
.melon-about__world-image {
	position: static;
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: var(--melon-radius-lg);
	display: block;
}
.melon-about__world-body {
	position: static;
	background: none;
	padding: 1.4rem 0.2rem 0;
}
.melon-about__world-body h2 { color: var(--melon-electric-blush); font-size: 1.5rem; }
@media (min-width: 900px) {
	.melon-about__world--offset { margin-top: 3.5rem; }
}
.melon-about__cta h2 em {
	display: block;
	color: var(--melon-electric-blush);
	font-style: italic;
}
.melon-about__cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}
.melon-about__cta-actions .melon-landing__cta,
.melon-about__cta-actions .melon-branch__book { width: auto; margin: 0; }

/* CR-15: lien he theo visual QA vong 1 (CT-*) */
.melon-contact { padding-top: 2.25rem; }
.melon-contact__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 1000px) {
	.melon-contact__columns { grid-template-columns: 1fr 1.25fr; gap: 3rem; }
	.melon-contact__columns .melon-contact__branch-grid { grid-template-columns: 1fr; }
}
.melon-contact__columns .melon-contact__branch-grid { margin-bottom: 0; }

/* CR-15: blog journal theo visual QA vong 1 (BL/BC) */
.melon-blog__title {
	color: var(--melon-electric-blush);
	font-size: clamp(2.6rem, 7vw, 4.2rem);
	max-width: none;
	margin-bottom: 0.6rem;
}
.melon-blog__sub {
	color: var(--melon-lavender-grey);
	margin: 0 0 1.6rem;
}
.melon-blog__featured {
	display: block;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	overflow: hidden;
	margin-bottom: var(--melon-section-gap);
}
.melon-blog__featured-media {
	border-radius: 0;
	aspect-ratio: 16 / 7;
}
.melon-blog__featured-body { padding: 1.5rem 1.75rem 1.75rem; }
.melon-blog__cat-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 77, 148, 0.14);
	border: 1px solid rgba(255, 77, 148, 0.5);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
}
.melon-blog__featured-title { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.melon-blog__section-label {
	color: rgba(180, 180, 216, 0.75);
	font: 700 0.72rem var(--melon-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(180, 180, 216, 0.14);
	padding-bottom: 0.9rem;
	margin: 0 0 1.5rem;
}
.melon-blog__card-body { padding: 1.15rem 1.25rem 1.2rem; }
.melon-blog__card-title { font-size: 1.12rem; margin-bottom: 0.55rem; }
.melon-blog__meta--foot { font-size: 0.68rem; }
.melon-blog__topic { aspect-ratio: 1 / 1.08; }
.melon-blog__topic-panel {
	inset-inline: 1.1rem auto;
	right: auto;
	max-width: calc(100% - 2.2rem);
	font-size: 1.05rem;
	padding: 0.85rem 1.1rem;
}
.melon-blog__cta {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	padding: 3.2rem 1.5rem;
	margin-bottom: var(--melon-section-gap);
}

/* CR-15: bai blog theo visual QA vong 1 (BA-*) */
.melon-article__title { font-size: clamp(2.1rem, 5.4vw, 3.2rem); }
.melon-article__cover {
	max-width: 1080px;
	margin-inline: auto;
	aspect-ratio: 16 / 8;
}
.melon-article__related-media { aspect-ratio: 3 / 2; }
.melon-article__related-card h3 { font-size: 1.12rem; }
.melon-article__related-card .melon-blog__excerpt { font-size: 0.86rem; }

/* CR-15: SEO landing tien nghi 3 cot desktop nhu mockup (LP-01) — khong ap
   dung cho archive /phong/ va trang co so (da duyet 2 cot). */
@media (min-width: 1200px) {
	.tax-melon_amenity .melon-room-archive__grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* CR-15: FAQ theo visual QA vong 1 (FAQ-*) */
.melon-faq__head--center { text-align: center; }
.melon-faq__title {
	color: var(--melon-on-surface);
	font-size: clamp(2.4rem, 6vw, 3.8rem);
}
.melon-faq__head--center .melon-faq__lead,
.melon-faq__head--center .melon-faq__search { margin-inline: auto; }
.melon-faq__search { max-width: 40rem; }
.melon-faq__search-input { box-shadow: 0 0 24px rgba(255, 77, 148, 0.12); }
.melon-faq__group h2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--melon-sans);
	color: var(--melon-electric-blush);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.melon-faq__group h2::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(180, 180, 216, 0.14);
}
.melon-faq__item { border-radius: 0.9rem; margin-bottom: 1rem; }
.melon-faq__item summary {
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
	padding: 1.35rem 1.5rem;
}
.melon-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--melon-serif);
	font-size: 1.2rem;
	font-weight: 400;
}
.melon-faq__preview {
	display: block;
	color: rgba(180, 180, 216, 0.65);
	font-size: 0.85rem;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.melon-faq__item[open] .melon-faq__preview { display: none; }
.melon-faq__answer { padding: 0 1.5rem 1.35rem; }

/* CR-15: chinh sach accordion + CTA ho tro (POL-*) */
details.melon-policy__section > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid rgba(180, 180, 216, 0.15);
	padding-bottom: 0.8rem;
	margin-bottom: 1.25rem;
}
details.melon-policy__section > summary::-webkit-details-marker { display: none; }
details.melon-policy__section > summary h2 {
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0;
}
.melon-policy__chevron {
	color: var(--melon-electric-blush);
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
details.melon-policy__section[open] > .melon-policy__chevron,
details.melon-policy__section[open] > summary .melon-policy__chevron { transform: rotate(180deg); }
@media (min-width: 768px) {
	details.melon-policy__section > summary { cursor: default; }
	details.melon-policy__section > summary .melon-policy__chevron { display: none; }
}
.melon-policy__card-icon { display: block; color: var(--melon-electric-blush); margin-bottom: 0.7rem; }
.melon-policy__help {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: var(--melon-radius-lg);
	text-align: center;
	padding: 2.4rem 1.6rem;
	margin-top: 1rem;
}
.melon-policy__help h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	margin: 0 0 0.7rem;
}
.melon-policy__help p {
	color: var(--melon-lavender-grey);
	line-height: 1.7;
	max-width: 32rem;
	margin: 0 auto 1.4rem;
}

/* ===== Visual QA vong 2 ===== */

/* HOME: mosaic Phong Noi Bat theo mockup — lon trai, 2 o doc phai, ngang duoi full */
@media (min-width: 1024px) {
	.melon-featured-rooms__grid {
		grid-template-columns: 1.6fr 1fr;
		grid-template-rows: repeat(2, 280px) 300px;
	}
	.melon-featured-rooms__card--1 { grid-column: 1; grid-row: 1 / 3; }
	.melon-featured-rooms__card--2 { grid-column: 2; grid-row: 1; }
	.melon-featured-rooms__card--3 { grid-column: 2; grid-row: 2; }
	.melon-featured-rooms__card--4 { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 759px) {
	.melon-featured-rooms__grid { grid-template-columns: 1fr 1fr; }
	.melon-featured-rooms__card--1 { grid-column: 1 / -1; min-height: 400px; }
	.melon-featured-rooms__card--2,
	.melon-featured-rooms__card--3 { min-height: 220px; }
	.melon-featured-rooms__card--2 .melon-featured-rooms__content,
	.melon-featured-rooms__card--3 .melon-featured-rooms__content { min-height: 220px; padding: 1rem; }
	.melon-featured-rooms__card--2 h3,
	.melon-featured-rooms__card--3 h3 { font-size: 1.25rem; }
	.melon-featured-rooms__card--4 { grid-column: 1 / -1; min-height: 240px; }
}

/* HOME mobile: trai nghiem — panel chu glass chong len anh */
@media (max-width: 759px) {
	.melon-home__experience-caption {
		margin: -2.4rem 1rem 0;
		position: relative;
		z-index: 2;
		background: rgba(8, 8, 18, 0.82);
		backdrop-filter: blur(10px);
		border: 1px solid var(--melon-glass-border);
		border-radius: var(--melon-radius);
		padding: 1rem 1.2rem;
	}
	.melon-home__experience-caption strong { font-size: 1.3rem; }
}

/* HOME mobile: the co so — anh tren, panel thong tin rieng duoi */
@media (max-width: 899px) {
	.melon-home__branch-card {
		display: block;
		min-height: 0;
		background: var(--melon-glass-bg);
		border: 1px solid var(--melon-glass-border);
	}
	.melon-home__branch-image {
		position: static;
		height: 220px;
		display: block;
	}
	.melon-home__branch-body { background: none; padding: 1.35rem 1.4rem 1.5rem; }
}

/* MEGA MENU: the chinh cao, 2 the phai hep lech doc; tieu de serif lon chu thuong */
.melon-nav__mega-rooms {
	grid-template-columns: 1.7fr 1fr;
	grid-template-rows: repeat(2, minmax(13rem, 17rem));
}
.melon-nav__mega-card-copy strong {
	font: 400 clamp(1.6rem, 2.4vw, 2.6rem)/1.05 var(--melon-serif);
	text-transform: none;
	letter-spacing: 0;
}
.melon-nav__mega-card--side .melon-nav__mega-card-copy strong {
	font-size: clamp(1.25rem, 1.7vw, 1.8rem);
}

/* MOBILE MENU: gon nhip doc de CTA khong bi cat + cot chu sans manh */
.melon-nav__mobile-links { margin-top: 1.5rem !important; gap: 0 !important; }
.melon-nav__mobile-find { padding: 0.2rem 0 1rem !important; font-size: clamp(1.7rem, 7.5vw, 2.2rem) !important; }
.melon-nav__mobile-find span { font-size: 1.6rem; }
.melon-nav__mobile-allrooms { padding: 0.9rem 0 0.3rem !important; }
.melon-nav__mobile-allrooms span { font-size: 1.35rem; }
.melon-nav__mobile-chips { margin: 0.8rem 0 1.1rem; gap: 0.65rem; }
.melon-nav__mobile-chips a { padding: 0.85rem 0.95rem 0.8rem; gap: 0.5rem; }
.melon-nav__mobile-cols { margin-bottom: 1rem; gap: 0.75rem 1.25rem; }
.melon-nav__mobile-cols a {
	font-family: var(--melon-sans) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	color: var(--melon-lavender-grey) !important;
	padding: 0.05rem 0 !important;
}
.melon-nav__mobile-cols--minor { padding-top: 1rem; }
.melon-nav__mobile-actions { padding-top: 1rem; gap: 0.65rem; }
.melon-nav__mobile-panel { display: flex; flex-direction: column; padding-top: 1rem !important; }

/* VE CHUNG TOI: hero cao hon; mobile stats doc + collage -> duong trang tri */
.melon-about__hero { min-height: 92vh; }
@media (max-width: 899px) {
	.melon-about__collage { display: none; }
	.melon-about__why { position: relative; padding-bottom: 3rem; }
	.melon-about__why::after {
		content: '';
		display: block;
		width: 1px;
		height: 110px;
		margin: 1.5rem auto 0;
		background: linear-gradient(180deg, var(--melon-electric-blush), transparent);
	}
	.melon-about__band .melon-about__stats { grid-template-columns: 1fr; gap: 0; }
	.melon-about__band .melon-about__stat {
		border-right: 0;
		border-bottom: 1px solid rgba(180, 180, 216, 0.18);
		padding: 1.4rem 0;
	}
	.melon-about__band .melon-about__stat:last-child { border-bottom: 0; }
}
.melon-about__quote-mark {
	display: block;
	color: var(--melon-electric-blush);
	margin-bottom: 0.7rem;
}
.melon-about__band .melon-about__quote { position: relative; }

/* CO SO: iframe ban do */
.melon-branch__map { min-height: 320px; display: block; }
.melon-branch__map iframe {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
	display: block;
	filter: invert(0.88) hue-rotate(200deg) saturate(0.7);
}

/* BLOG mobile: featured cao, Moi nhat compact hang ngang, topics carousel */
@media (max-width: 699px) {
	.melon-blog__featured-media { aspect-ratio: 4 / 3; }
	.melon-blog__featured-body { padding: 1.2rem 1.25rem 1.4rem; }
	.melon-blog__card { flex-direction: row; align-items: stretch; }
	.melon-blog__card-media {
		flex: 0 0 118px;
		aspect-ratio: auto;
		min-height: 100px;
	}
	.melon-blog__card-media img { height: 100%; }
	.melon-blog__card-body { padding: 0.85rem 1rem; }
	.melon-blog__card-title { font-size: 0.98rem; margin-bottom: 0.4rem; }
	.melon-blog__topic-grid {
		display: flex;
		overflow-x: auto;
		gap: 1rem;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75rem;
	}
	.melon-blog__topic {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}
/* BLOG desktop: topic panel dam + tieu de lon */
.melon-blog__topic-panel {
	background: rgba(8, 8, 18, 0.78);
	font-size: 1.25rem;
	padding: 1rem 1.25rem;
}
.melon-blog__topic-panel svg { width: 20px; height: 20px; }

/* BAI VIET mobile: hero can trai, title sans lon, lead co duong nhan hong */
@media (max-width: 699px) {
	.melon-article__hero { text-align: left; }
	.melon-article__meta { justify-content: flex-start; }
	.melon-article__title {
		font-family: var(--melon-sans);
		font-weight: 800;
		font-size: 2rem;
		line-height: 1.15;
		letter-spacing: -0.01em;
	}
	.melon-article__lead {
		border-left: 3px solid var(--melon-electric-blush);
		padding-left: 1rem;
	}
	.melon-article__updated { text-align: left; }
}

/* FAQ mobile: nhom thanh the accordion (JS toggle .is-collapsed) */
@media (max-width: 767px) {
	.melon-faq__side { display: none; }
	.melon-faq__group {
		background: var(--melon-glass-bg);
		border: 1px solid var(--melon-glass-border);
		border-radius: 0.9rem;
		padding: 0 1.1rem;
		margin-bottom: 0.9rem;
	}
	.melon-faq__group h2 {
		cursor: pointer;
		padding: 1.1rem 0;
		margin: 0;
	}
	.melon-faq__group h2::before {
		content: '';
	}
	.melon-faq__group h2::after {
		flex: none;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--melon-electric-blush);
		border-bottom: 2px solid var(--melon-electric-blush);
		background: none;
		transform: rotate(45deg);
		transition: transform 0.25s ease;
		margin-left: auto;
	}
	.melon-faq__group.is-collapsed h2::after { transform: rotate(-45deg); }
	.melon-faq__group.is-collapsed .melon-faq__item { display: none; }
	.melon-faq__group .melon-faq__item { background: rgba(8, 8, 18, 0.45); }
	.melon-faq__head--center { margin-bottom: 1.75rem; }
}

/* Visual QA vong 3: FAQ title trang lon, mega menu gian cach, overlay nhip doc */
.melon-faq__title {
	color: var(--melon-on-surface) !important;
	font-size: clamp(2.7rem, 6.5vw, 4.4rem);
	font-weight: 400;
}
.melon-nav__mega-inner {
	grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.55fr);
	gap: clamp(3rem, 8vw, 9.5rem);
}
.melon-nav__mobile-find { padding: 0.6rem 0 1.4rem !important; }
.melon-nav__mobile-allrooms { padding: 1.2rem 0 0.5rem !important; }
.melon-nav__mobile-chips { margin: 1.1rem 0 1.5rem; }
.melon-nav__mobile-cols { margin-bottom: 1.3rem; gap: 0.85rem 1.25rem; }
.melon-nav__mobile-cols--minor { padding-top: 1.25rem; }
.melon-nav__mobile-links { margin-top: 2.2rem !important; }

/* Vong xac nhan: mega card lech tang ro + overlay day Blog/Ve Melon xuong day */
.melon-nav__mega-rooms {
	grid-template-rows: none;
	grid-auto-rows: auto;
	gap: 1.25rem 2.25rem;
	align-items: start;
}
.melon-nav__mega-card--main { height: clamp(26rem, 56vh, 34rem); grid-row: 1 / 3; }
.melon-nav__mega-card--2 { height: clamp(11rem, 24vh, 14.5rem); margin: 3.5rem 0 0; }
.melon-nav__mega-card--3 { height: clamp(11rem, 24vh, 14.5rem); margin: 2rem 0 0; }
.melon-nav__mobile-links {
	display: flex !important;
	flex-direction: column;
	flex: 1;
}
.melon-nav__mobile-cols--minor {
	margin-top: auto;
	margin-bottom: 0.5rem;
}

/* ===== Visual QA dot 2 - vong 1/5 ===== */

/* MEGA: bo uppercase ro tu .melon-header__nav a; card chinh rong hon */
.melon-nav__mega-links a {
	text-transform: none;
	letter-spacing: 0;
	color: var(--melon-on-surface);
}
.melon-nav__mega-inner {
	grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.8fr);
	gap: clamp(2.5rem, 5vw, 6rem);
}
.melon-nav__mega-card--side .melon-nav__mega-card-copy strong {
	font-size: clamp(1.4rem, 1.9vw, 2rem);
	line-height: 1.1;
}
.melon-nav__mega-card-copy em { font-size: 0.66rem; }

/* MOBILE MENU: close tron -> icon tran, chips cao hon, cot deu, CTA cao */
.melon-nav__close {
	border: 0 !important;
	background: none !important;
	color: var(--melon-lavender-grey);
	font-size: 1.9rem;
}
.melon-nav__mobile-chips a { padding: 1.15rem 1.05rem 1.05rem; gap: 0.65rem; }
.melon-nav__mobile-chips svg { width: 24px; height: 24px; }
.melon-nav__mobile-cols { column-gap: 1.1rem; }
.melon-nav__mobile-cols a { font-size: 1.05rem !important; padding: 0.15rem 0 !important; }
.melon-nav__mobile-cols { margin-bottom: 1.5rem; }
.melon-nav__mobile-cols--minor { margin-bottom: 0.75rem; }
.melon-nav__mobile-book { padding: 1.15rem; }
.melon-nav__mobile-contact a { padding: 0.95rem; }

/* HOME: nen section gan den dong nhat, mosaic cao hon */
.melon-home__experiences,
.melon-home__branches,
.melon-home__editorial { background: #0a0a14; }
@media (min-width: 1024px) {
	.melon-featured-rooms__grid {
		grid-template-rows: repeat(2, 300px) 320px;
	}
}
.melon-home__final-cta .melon-home__final-image { filter: brightness(0.4) saturate(0.8); }

/* HOME mobile: hero nut doc full-width; discovery carousel 1 the */
@media (max-width: 699px) {
	.melon-home__hero-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.melon-home__hero-button { width: 100%; }
	.melon-home__preview {
		display: flex;
		overflow-x: auto;
		gap: 1rem;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75rem;
	}
	.melon-home__preview > li {
		flex: 0 0 85%;
		scroll-snap-align: start;
	}
}
/* HOME mobile: trai nghiem overlay chu de len anh, so le */
@media (max-width: 759px) {
	.melon-home__experience { position: relative; }
	.melon-home__experience:nth-child(odd) { margin-right: 2.2rem; }
	.melon-home__experience:nth-child(even) { margin-left: 2.2rem; }
	.melon-home__experience-caption {
		position: absolute;
		left: 1rem;
		right: auto;
		bottom: 1rem;
		z-index: 2;
		margin: 0;
		max-width: 78%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
	.melon-home__experience-media { aspect-ratio: 1.05; border-radius: 0.5rem; }
	.melon-home__experience-media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(8, 8, 18, 0.75), transparent 60%);
	}
	/* Room 502 (card 4): the noi dung CTA nhu mockup */
	.melon-featured-rooms__card--4 .melon-featured-rooms__veil {
		background: rgba(8, 8, 18, 0.78);
	}
	.melon-featured-rooms__card--4 .melon-featured-rooms__content {
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.melon-featured-rooms__card--4 .melon-featured-rooms__cta {
		border: 0;
		background: var(--melon-electric-blush);
		border-radius: 999px;
		padding: 0.8rem 1.6rem;
	}
}
/* HOME mobile: the co so anh nong + nut outline */
@media (max-width: 899px) {
	.melon-home__branch-image { height: 160px; }
	.melon-home__branch-body a {
		display: inline-flex;
		justify-content: center;
		border: 1px solid rgba(180, 180, 216, 0.4);
		border-radius: 999px;
		padding: 0.7rem 1.3rem;
		width: max-content;
	}
}

/* LIEN HE: action card vuong lon; form 1 cot; branch card gon */
.melon-contact__quick {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	max-width: 760px;
	margin-inline: auto;
}
@media (min-width: 700px) {
	.melon-contact__quick { grid-template-columns: repeat(3, 1fr); }
}
.melon-contact__quick-item {
	flex-direction: column;
	gap: 0.8rem;
	border-radius: 0.9rem;
	padding: 1.5rem 1rem 1.3rem;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
}
.melon-contact__quick-item svg { width: 26px; height: 26px; }
.melon-contact__title {
	color: var(--melon-on-surface);
	font-weight: 400;
}
.melon-contact__hero { padding-top: 2rem; }
.melon-contact__branches h2,
.melon-contact__form-wrap h2 { text-shadow: none; }
.melon-contact__form-grid { grid-template-columns: 1fr !important; }
.melon-contact__form-grid input,
.melon-contact__form-grid textarea { padding: 0.8rem 0.95rem; border-radius: 0.5rem; }
.melon-contact__submit {
	max-width: none;
	width: 100%;
	border-radius: 0.6rem;
}
.melon-contact__branch { padding: 1.5rem; }
.melon-contact__branch-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.melon-contact__branch-foot .melon-contact__direction { margin: 0; }
.melon-contact__branch-foot .melon-contact__support {
	border-top: 0;
	padding-top: 0;
	margin: 0;
}

/* VE CHUNG TOI: testimonial rong, worlds hep lech tang, eyebrow net hong */
.melon-about__band .melon-about__quote { max-width: 1100px; }
.melon-about__world-grid {
	max-width: 1000px;
	margin-inline: auto;
}
@media (min-width: 900px) {
	.melon-about__world--offset { margin-top: 4.5rem; }
	.melon-about__why { gap: 5rem; padding-block: 2rem; }
}
.melon-about__why .melon-about__eyebrow::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--melon-electric-blush);
	vertical-align: middle;
	margin-right: 0.6rem;
}
@media (max-width: 899px) {
	.melon-about__why .melon-landing__checks { display: none; }
	.melon-about__why::after {
		width: 46px;
		background: repeating-linear-gradient(90deg, rgba(255, 77, 148, 0.7) 0 1px, transparent 1px 15px);
	}
	.melon-about__cta-actions { flex-direction: column; align-items: stretch; }
	.melon-about__cta-actions .melon-landing__cta,
	.melon-about__cta-actions .melon-branch__book { width: 100%; }
}

/* BLOG: featured overlay tren anh; H1 uppercase manh; anh phu toi */
.melon-blog__title {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.04em;
	font-size: clamp(2.2rem, 5.5vw, 3.4rem);
}
.melon-blog__featured { position: relative; }
.melon-blog__featured-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.88) 8%, rgba(8, 8, 18, 0.25) 45%, rgba(8, 8, 18, 0.1));
}
.melon-blog__featured-media { position: relative; display: block; }
.melon-blog__featured-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	background: none;
	padding: 1.5rem 1.75rem;
	z-index: 2;
}
.melon-blog__card-image,
.melon-blog__topic-image { filter: brightness(0.82); }
.melon-blog__topic::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 18, 0.3);
	z-index: 1;
}
.melon-blog__topic-panel { z-index: 2; }
@media (max-width: 699px) {
	.melon-blog__featured {
		border: 0;
		border-radius: 0;
		background: none;
		margin-inline: calc(-1 * var(--melon-margin));
	}
	.melon-blog__featured-media { aspect-ratio: 3 / 3.4; }
	.melon-blog__featured-body { padding: 1.1rem var(--melon-margin) 1.3rem; }
	.melon-blog__card {
		background: none;
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid rgba(180, 180, 216, 0.1);
		padding-bottom: 0.9rem;
	}
	.melon-blog__card-media { flex: 0 0 96px; border-radius: 0.5rem; overflow: hidden; }
	.melon-blog__card-body { padding: 0.15rem 0 0.15rem 1rem; }
	.melon-blog__cta {
		background: none;
		border: 0;
		padding: 1.5rem 0 3rem;
	}
}

/* BAI VIET: hero co dong, bang gon */
.melon-article { padding-top: 2rem; }
.melon-article__hero { margin-bottom: 1.75rem; }
.melon-article__cover { max-width: 900px; aspect-ratio: 16 / 7.5; }
.melon-article__body h2 { margin: 2rem 0 0.9rem; }
.melon-article__body .melon-article__tip,
.melon-article__body .melon-article__promo { margin: 1.6rem 0; }
.melon-article__body table { font-size: 0.88rem; }
.melon-article__body th, .melon-article__body td { padding: 0.7rem 0.85rem; }
@media (max-width: 699px) {
	.melon-article__cover { aspect-ratio: 4 / 3.4; }
	.melon-article__title { font-size: 2.2rem; }
	.melon-article__body h2 { font-size: 1.5rem; }
}
.melon-article__gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
	margin: 1.8rem 0;
}
.melon-article__gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0.7rem;
	display: block;
}
.melon-article__body ul.melon-article__checks {
	list-style: none;
	padding: 0;
	margin: 0 0 1.4rem;
}
.melon-article__body ul.melon-article__checks li {
	position: relative;
	padding-left: 1.7rem;
	margin-bottom: 0.6rem;
	color: var(--melon-lavender-grey);
	line-height: 1.7;
}
.melon-article__body ul.melon-article__checks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--melon-electric-blush);
	font-weight: 700;
}
.melon-article__body .melon-article__room-card {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 0.9rem;
	overflow: hidden;
	margin: 1.8rem 0;
	text-align: left;
	padding: 0;
}
@media (min-width: 640px) {
	.melon-article__body .melon-article__room-card { grid-template-columns: 1fr 1.2fr; }
}
.melon-article__body .melon-article__room-card figure { margin: 0; border-radius: 0; }
.melon-article__body .melon-article__room-card img { height: 100%; object-fit: cover; }
.melon-article__body .melon-article__room-card > div { padding: 1.4rem 1.5rem; }
.melon-article__body .melon-article__room-card h3 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}
.melon-article__body .melon-article__room-card .melon-article__room-price {
	color: var(--melon-electric-blush);
	font-weight: 700;
	margin-bottom: 0.8rem;
}
.melon-article__body .melon-article__room-card a.melon-article__room-cta {
	display: inline-flex;
	border: 1px solid rgba(255, 77, 148, 0.55);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.7rem 1.3rem;
}
.melon-article__body .melon-article__cta-final {
	background:
		radial-gradient(circle at 30% 20%, rgba(255, 77, 148, 0.16), transparent 60%),
		var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	text-align: center;
	padding: 2.2rem 1.6rem;
	margin: 2.2rem 0 0;
}
.melon-article__body .melon-article__cta-final h3 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.5rem, 3.4vw, 2rem);
	margin: 0 0 0.6rem;
}
.melon-article__body .melon-article__cta-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin: 1.2rem 0 0;
}
.melon-article__body .melon-article__cta-chips a {
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 999px;
	color: var(--melon-on-surface);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75rem 1.4rem;
}
.melon-article__body .melon-article__cta-chips a.is-primary {
	background: rgba(255, 77, 148, 0.14);
	border-color: var(--melon-electric-blush);
	color: var(--melon-electric-blush);
}

/* CO SO: hero mood toi hon; reviews gon; nut xem tat ca giua */
.melon-branch__hero-image { filter: brightness(0.62) saturate(0.85); }
.melon-branch__review { padding: 1.35rem 1.5rem; border-radius: 0.9rem; }
.melon-branch__review blockquote { font-size: 0.95rem; }
.tax-melon_branch .melon-landing__all { display: none; }
.melon-branch__all-pill {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}
.melon-branch__all-pill a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(255, 77, 148, 0.55);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9rem 1.8rem;
}

/* LANDING: hero mobile cao, noi dung neo day */
@media (max-width: 699px) {
	.tax-melon_amenity .melon-landing__hero {
		min-height: 78vh;
		display: flex;
		align-items: flex-end;
	}
}

/* CHINH SACH: hero dai rong + duong chan hong; mobile khong TOC, accordion sans */
.melon-policy__head {
	grid-column: 1 / -1;
}
.melon-policy__title {
	color: var(--melon-on-surface);
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 400;
}
.melon-policy__head::after {
	content: '';
	display: block;
	width: 64px;
	height: 2px;
	background: var(--melon-electric-blush);
	margin-top: 1.4rem;
}
#cs-1 .melon-policy__section-body {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 1rem;
	padding: 1.5rem;
}
@media (max-width: 767px) {
	.melon-policy__toc { display: none; }
	details.melon-policy__section > summary {
		border: 1px solid rgba(180, 180, 216, 0.25);
		border-radius: 0.7rem;
		padding: 1rem 1.1rem;
		margin-bottom: 0.75rem;
	}
	details.melon-policy__section:first-of-type > summary { border-color: rgba(255, 77, 148, 0.55); }
	details.melon-policy__section > summary h2 {
		font-family: var(--melon-sans);
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.melon-policy__section-body { padding: 0 0.2rem; }
}

/* FAQ: accordion lon hon, sidebar active panel, search dai; mobile ho tro */
.melon-faq__search { max-width: 46rem; }
.melon-faq__q { font-size: 1.3rem; }
.melon-faq__answer p { font-size: 1rem; }
.melon-faq__item { border-radius: 1rem; }
.melon-faq__item summary { padding: 1.5rem 1.6rem; }
.melon-faq__answer { padding: 0 1.6rem 1.5rem; }
.melon-faq__side a.is-active,
.melon-faq__side a:hover {
	background: rgba(180, 180, 216, 0.08);
	border-left-color: var(--melon-electric-blush);
	border-radius: 0.5rem;
}
.melon-faq__side a svg { width: 20px; height: 20px; }
.melon-faq__group-icon { display: none; }
@media (max-width: 767px) {
	.melon-faq__title { font-size: 1.65rem !important; }
	.melon-faq__lead { display: none; }
	.melon-faq__head--center { margin-bottom: 1.25rem; text-align: left; }
	.melon-faq__head--center .melon-about__eyebrow { text-align: left; }
	.melon-faq__group h2 { gap: 0.8rem; }
	.melon-faq__group-icon {
		display: inline-flex;
		color: var(--melon-electric-blush);
	}
	.melon-faq__group { padding: 0.25rem 1.2rem; }
	.melon-faq__group h2 { padding: 1.2rem 0; font-size: 0.85rem; }
	.melon-faq__group h2::after {
		border-color: rgba(180, 180, 216, 0.7);
	}
	.melon-faq__banner { display: block; }
}
.melon-faq__banner {
	display: none;
	border-radius: 0.9rem;
	overflow: hidden;
	margin: 1.4rem 0;
}
.melon-faq__banner img { width: 100%; height: 170px; object-fit: cover; display: block; filter: brightness(0.7); }

/* ===== Visual QA dot 2 - vong 2/5 ===== */

/* CO SO: ban do SVG */
.melon-branch__map { min-height: 300px; position: relative; }
.melon-branch__map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.melon-branch__map-label {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	transform: translateX(-50%);
	color: rgba(230, 230, 245, 0.9);
	font: 700 0.72rem var(--melon-sans);
	letter-spacing: 0.3em;
}

/* HOME: nhip doc desktop thoang hon; mobile experiences head + carousel */
@media (min-width: 1024px) {
	.melon-featured-rooms,
	.melon-home__editorial,
	.melon-home__experiences,
	.melon-home__branches { padding-block: 7rem; }
}
@media (max-width: 699px) {
	.melon-home__preview > li { flex: 0 0 92%; }
	.melon-home__discovery-label {
		font: 700 0.68rem var(--melon-sans);
		letter-spacing: 0.22em;
		text-transform: uppercase;
		text-align: center;
		color: rgba(180, 180, 216, 0.75);
		font-style: normal;
	}
	.melon-home__all-rooms .melon-home__more-link {
		color: var(--melon-lavender-grey);
		border-bottom: 0;
	}
}
@media (max-width: 759px) {
	.melon-home__experiences .melon-home__section-head--split {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.melon-home__experiences .melon-home__section-head--split h2 { text-align: center; }
	.melon-home__experiences .melon-home__section-head--split > span {
		text-align: center;
		font-size: 0.9rem;
	}
	.melon-home__experience-caption strong { font-size: 1.45rem; }
}

/* MEGA: card chinh dang dung, panel chu thoang, veil dam, bo goc mem */
.melon-nav__mega-inner {
	grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.55fr);
}
.melon-nav__mega-rooms { grid-template-columns: 1.15fr 0.85fr; }
.melon-nav__mega-card--main { height: clamp(30rem, 64vh, 38rem); }
.melon-nav__mega-card--2 { height: clamp(12rem, 26vh, 16rem); }
.melon-nav__mega-card--3 { height: clamp(12rem, 26vh, 16rem); }
.melon-nav__mega-card { border-radius: 0.9rem; }
.melon-nav__mega-card-veil { background: linear-gradient(0deg, rgba(8, 8, 18, 0.95), rgba(8, 8, 18, 0.25) 60%, rgba(8, 8, 18, 0.15)); }
.melon-nav__mega-card--main .melon-nav__mega-card-copy { padding: 2rem; }
.melon-nav__mega-card--main .melon-nav__mega-card-copy strong { font-size: clamp(2rem, 3vw, 3rem); margin: 0.5rem 0 0.9rem; }
.melon-nav__mega-card--main .melon-nav__mega-card-copy small { font-size: 0.7rem; }
.melon-nav__mega-links a { padding: 1.15rem 0; }
.melon-nav__mega-links .melon-nav__mega-all { font-size: clamp(1.8rem, 2.4vw, 2.5rem); }

/* MOBILE MENU: chips gon lai, mui ten trung tinh, minor sat CTA */
.melon-nav__mobile-chips a { padding: 0.9rem 0.95rem 0.85rem; }
.melon-nav__mobile-chips svg { width: 20px; height: 20px; }
.melon-nav__mobile-allrooms span { color: rgba(180, 180, 216, 0.8); }
.melon-nav__mobile-cols--minor { margin-bottom: 0.2rem; padding-top: 1rem; }
.melon-nav__mobile-book { padding: 1rem; }
.melon-nav__mobile-contact a { padding: 0.85rem; }
.melon-nav__mobile-panel { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)) !important; }

/* VE CHUNG TOI */
.melon-about-page { padding-top: 0 !important; }
.melon-about-page > .melon-about,
.melon-about-page .melon-about__hero { margin-top: 0 !important; }
.melon-about h2,
.melon-about__worlds-title,
.melon-about__title { font-weight: 400; }
@media (min-width: 900px) {
	.melon-about__collage { grid-template-rows: 320px 230px; }
	.melon-about__collage-item--1 img,
	.melon-about__collage-item--2 img { object-fit: cover; }
}
@media (max-width: 899px) {
	.melon-about__hero--center { justify-content: flex-end; text-align: left; padding-bottom: 1.5rem; }
	.melon-about__hero--center .melon-about__hero-inner { justify-items: start; text-align: left; }
	.melon-about__hero--center .melon-about__hero-inner > .melon-about__eyebrow { display: none; }
	.melon-about__hero--center .melon-about__lead { margin-inline: 0; }
	.melon-about__why::after {
		width: 62px;
		height: 160px;
		background: repeating-linear-gradient(90deg, rgba(180, 180, 216, 0.55) 0 1px, transparent 1px 20px);
	}
	.melon-about__band .melon-about__stat { border-bottom: 0; padding: 0.9rem 0; }
	.melon-about__world-image { height: 200px; }
	.melon-about__cta h2 { font-size: 1.6rem; }
}
.melon-about__quote-stars { color: var(--melon-electric-blush) !important; }
.melon-about__band .melon-about__quote { border-radius: 0.8rem; }

/* LIEN HE: khung hep, action card ty le mockup, mobile compact */
.melon-contact {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--melon-margin);
	background: transparent;
}
.wp-block-group:has(> .wp-block-melon-contact-page) { background: #0e0c1a; }
.melon-contact__quick { max-width: 620px; margin-top: 2.2rem; }
.melon-contact__quick-item { padding: 1.7rem 1rem 1.4rem; }
.melon-contact__quick-item--primary {
	background: rgba(255, 77, 148, 0.12);
	border-color: var(--melon-electric-blush);
	color: var(--melon-electric-blush);
	box-shadow: none;
}
.melon-contact__quick-item--primary:hover,
.melon-contact__quick-item--primary:focus-visible { color: var(--melon-electric-blush); }
.melon-contact__branches h2,
.melon-contact__form-wrap h2 { font-size: 1.45rem; font-weight: 400; }
.melon-contact__form-wrap { padding: 1.6rem; }
.melon-contact__branch { padding: 1.35rem; }
@media (max-width: 699px) {
	.melon-contact { padding-top: 1rem; }
	.melon-contact__hero { margin-bottom: 2.2rem; }
	.melon-contact__quick { gap: 0.6rem; margin-top: 1.4rem; }
	.melon-contact__quick-item {
		flex-direction: row;
		justify-content: center;
		gap: 0.6rem;
		padding: 0.7rem 1rem;
		border-radius: 0.6rem;
	}
	.melon-contact__quick-item svg { width: 18px; height: 18px; }
	.melon-contact__form-wrap { padding: 1.25rem; }
}

/* BLOG: ty le hero/card cao hon, bo goc nho, chips mobile 1 hang */
.melon-blog__featured-media { aspect-ratio: 2 / 1; }
.melon-blog__featured,
.melon-blog__card,
.melon-blog__topic,
.melon-blog__cta { border-radius: 0.6rem; }
.melon-blog__card-media { aspect-ratio: 4 / 3; }
.melon-blog__topic { aspect-ratio: 1 / 1.25; }
@media (max-width: 699px) {
	.melon-blog__chip { font-size: 0.62rem; padding: 0.45rem 0.95rem; letter-spacing: 0.1em; }
	.melon-blog__chips { gap: 0.45rem; flex-wrap: nowrap; overflow-x: auto; }
	.melon-blog__featured-media { aspect-ratio: 1 / 1.25; }
	.melon-blog__topic { aspect-ratio: 1 / 1.25; }
}

/* BAI VIET: hero trong cot noi dung, title mobile lon */
.melon-article__cover { max-width: 800px; aspect-ratio: 4 / 3; }
@media (max-width: 699px) {
	.melon-article__title { font-size: 2.6rem; }
	.melon-article__body h2 { font-size: 1.7rem; }
}
.melon-article__cta-more { text-align: center; margin: 1.2rem 0 0; }

/* CHINH SACH: heading ngoai panel, card manh, callout canh bao */
#cs-1 .melon-policy__section-body {
	background: none;
	border: 0;
	padding: 0;
}
.melon-policy__card { padding: 1.2rem 1.3rem; border-radius: 0.6rem; }
.melon-policy__card h3 {
	font-family: var(--melon-sans);
	color: rgba(230, 230, 245, 0.95);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.melon-policy__card-icon svg { width: 24px; height: 24px; }
.melon-policy__card--warn {
	grid-column: 1 / -1;
	background: rgba(93, 20, 40, 0.35);
	border-color: rgba(255, 130, 160, 0.4);
}
.melon-policy__card--warn .melon-policy__card-icon { color: #ff9aa8; }
.melon-policy__head::after { width: 100%; height: 1px; background: rgba(180, 180, 216, 0.18); }
.melon-policy__head { border-bottom: 0; margin-bottom: 1rem; }
@media (max-width: 767px) {
	.melon-policy__head .melon-about__eyebrow { display: none; }
	.melon-policy__head { margin-bottom: 0.5rem; }
	.melon-policy__head::after { margin-top: 0.9rem; }
	.melon-policy { padding-top: 0.5rem; }
	details.melon-policy__section > summary {
		border-width: 1px;
		border-radius: 0.5rem;
		padding: 0.85rem 1rem;
		margin-bottom: 0.6rem;
		background: transparent;
	}
	details.melon-policy__section[open] > summary { border-color: rgba(255, 77, 148, 0.55); }
	.melon-policy__cards { gap: 0.7rem; }
	.melon-policy__card { padding: 1rem 1.1rem; border-radius: 0.5rem; }
	.melon-policy__section-body { padding: 0 0 0.7rem; }
}

/* FAQ: luoi hep hon, title lon, glow search; mobile "Ho tro" + back */
@media (min-width: 1000px) {
	.melon-faq { grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; }
}
.melon-faq__title { font-size: clamp(2.8rem, 6.5vw, 5rem); }
.melon-faq__search-input { box-shadow: 0 0 34px rgba(255, 77, 148, 0.26); }
.melon-faq__search-row { display: flex; align-items: center; gap: 0.7rem; justify-content: center; }
.melon-faq__search-row .melon-faq__search { flex: 1; }
.melon-faq__back {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 50%;
	color: var(--melon-on-surface);
}
.melon-faq__mobile-title { display: none; }
@media (max-width: 767px) {
	.melon-faq__eyebrow { display: none; }
	.melon-faq__title { display: none; }
	.melon-faq__mobile-title {
		display: block;
		text-align: center;
		color: var(--melon-on-surface);
		font: 400 1.5rem var(--melon-serif);
		margin: 0 0 1rem;
	}
	.melon-faq__back { display: inline-flex; }
	.melon-faq__group h2 { font-size: 0.72rem; }
}

/* LANDING: mobile bo media block trong content, CTA text-link */
@media (max-width: 699px) {
	.melon-landing__art img,
	.melon-landing__exp img { display: none; }
	.melon-landing__art,
	.melon-landing__exp { grid-template-columns: 1fr !important; }
	.melon-landing__art-text .melon-pay__secondary,
	.melon-landing__exp-text .melon-pay__secondary {
		border: 0;
		padding: 0;
		width: auto;
		color: var(--melon-electric-blush);
		text-decoration: none;
	}
}

/* ===== Visual QA dot 2 - vong 3/5 ===== */

/* NUT pill toan site home (mockup pill) */
.melon-home__button { border-radius: 999px; }
@media (min-width: 760px) {
	.melon-home__button { border-radius: 8px; }
}

/* HOME mobile: section head trai + recognition/FAQ giua + branch anh tran */
@media (max-width: 759px) {
	.melon-home__section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.melon-home__section-head h2 { text-align: left; }
	.melon-home__section-head > a { margin-left: 0; }
	.melon-home__experience:nth-child(odd) { margin-right: 3rem; }
	.melon-home__experience:nth-child(even) { margin-left: 3rem; }
	.melon-home__editorial-lead { text-align: center; }
	.melon-home__editorial-lead > span { margin-inline: auto; }
	.melon-home__logos { justify-content: center; }
	.melon-home__perks { border-left: 0; }
	.melon-home__perks li { border-bottom: 0; padding: 1.1rem 0; text-align: left; }
	.melon-home__faq .melon-home__section-head { align-items: center; text-align: center; }
	.melon-home__faq > .melon-home__more-link { display: none; }
	.melon-home__branch-card { background: none; border: 0; border-radius: 0.6rem; }
	.melon-home__branch-image { height: 190px; border-radius: 0.6rem 0.6rem 0 0; }
	.melon-home__branch-body { padding: 1rem 0.2rem 1.2rem; }
}

/* MEGA: danh muc chu lon thoang, card giua hep, card phai gian doc */
.melon-nav__mega-links a {
	font-size: clamp(1.7rem, 2.1vw, 2.3rem);
	padding: 1.4rem 0;
}
.melon-nav__mega-links .melon-nav__mega-all { font-size: clamp(1.9rem, 2.4vw, 2.6rem); padding: 1.4rem 0; }
.melon-nav__mega-inner { grid-template-columns: minmax(17rem, 0.95fr) minmax(0, 1.4fr); }
.melon-nav__mega-rooms { grid-template-columns: 1.05fr 0.95fr; gap: 1.25rem 2.5rem; }
.melon-nav__mega-card--2 { margin-top: 4.5rem; }
.melon-nav__mega-card--3 { margin-top: 3rem; }
.melon-nav__mega-card--side .melon-nav__mega-card-copy strong { font-size: clamp(1.6rem, 2vw, 2.1rem); }

/* MOBILE MENU: gian nhip sau chips + mui ten trung tinh */
.melon-nav__mobile-chips { margin-bottom: 1.9rem; }
.melon-nav__mobile-cols { margin-bottom: 1.8rem; row-gap: 1rem; }
.melon-nav__mobile-cols a { font-size: 1.08rem !important; padding: 0.2rem 0 !important; }
.melon-nav__mobile-allrooms span { color: rgba(180, 180, 216, 0.8) !important; }

/* VE CHUNG TOI: hero cao, why can doi, mobile vach dai trai, CTA gon */
.melon-about__hero { min-height: 96vh; }
@media (min-width: 900px) {
	.melon-about__why { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
	.melon-about__world-grid { max-width: none; }
}
@media (max-width: 899px) {
	.melon-about__hero { min-height: 88vh; }
	.melon-about__why::after {
		margin: 1.5rem 0 0;
		height: 220px;
	}
	.melon-about__cta h2 { font-size: 1.35rem; }
	.melon-about__cta h2 em { font-size: 1.35rem; }
}

/* LIEN HE: mobile gon dau trang, bo heading chi nhanh, primary = Goi */
.melon-contact__quick-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 77, 148, 0.16);
	color: var(--melon-electric-blush);
}
.melon-contact__support--pill {
	display: inline-flex;
	width: max-content;
	border: 1px solid rgba(180, 180, 216, 0.3);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.62rem;
}
@media (max-width: 699px) {
	.melon-contact { padding-top: 0.5rem; }
	.melon-contact__branches > h2 { display: none; }
	.melon-contact__quick-item--primary {
		background: none;
		border-color: rgba(180, 180, 216, 0.3);
		color: var(--melon-on-surface);
	}
	.melon-contact__quick-item:first-child {
		background: var(--melon-electric-blush);
		border-color: var(--melon-electric-blush);
		color: var(--melon-midnight-sapphire);
	}
	.melon-contact__form-wrap h2 { font-size: 1.7rem; max-width: 12ch; }
	.melon-contact__quick-badge { width: 28px; height: 28px; background: none; }
}
@media (min-width: 1000px) {
	.melon-contact__hero { padding-block: 3rem 1rem; }
	.melon-contact__quick { margin-top: 2.8rem; }
}

/* FAQ: cot noi dung can giua + gioi han rong, title lon, item 2 tang */
.melon-faq__main { max-width: 880px; margin-inline: auto; width: 100%; }
.melon-faq__title { font-size: clamp(3rem, 7vw, 5.4rem); }
.melon-faq__preview {
	border-top: 1px solid rgba(180, 180, 216, 0.1);
	padding-top: 0.55rem;
	margin-top: 0.15rem;
}
@media (max-width: 767px) {
	.melon-faq__head--center { display: flex; flex-direction: column; }
	.melon-faq__search-row { order: -1; margin-bottom: 1.1rem; }
	.melon-faq__mobile-title { text-align: left; margin: 0 0 0.35rem; font-size: 1.7rem; }
	.melon-faq__lead {
		display: block;
		font-size: 0.9rem;
		margin: 0 0 1.2rem;
		max-width: none;
	}
	.melon-faq__group { padding: 0.45rem 1.25rem; }
	.melon-faq__group h2 { padding: 1.35rem 0; font-size: 0.78rem; }
}

/* CHINH SACH: hero gon (khong lead desktop), title lon, em hong; mobile flat */
.melon-policy__title { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
.melon-policy__title em { color: var(--melon-electric-blush); font-style: normal; }
.melon-policy__lead { display: none; }
.melon-policy__section h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
#cs-1 .melon-policy__cards .melon-policy__card:nth-child(-n+2) {
	background: rgba(180, 180, 216, 0.07);
}
@media (max-width: 767px) {
	.melon-policy__card,
	.melon-policy__cards { display: block; }
	.melon-policy__card {
		background: none !important;
		border: 0;
		padding: 0.35rem 0 0.6rem;
	}
	.melon-policy__card--warn {
		background: rgba(93, 20, 40, 0.3) !important;
		border: 1px solid rgba(255, 130, 160, 0.35);
		border-radius: 0.5rem;
		padding: 0.8rem 0.9rem;
		margin: 0.4rem 0;
	}
	.melon-policy__card-icon { display: none; }
	.melon-policy__card--warn .melon-policy__card-icon { display: block; }
	.melon-policy__help {
		border-color: rgba(255, 77, 148, 0.5);
		border-radius: 0.7rem;
		padding: 1.6rem 1.2rem;
		background:
			radial-gradient(circle at 70% 20%, rgba(255, 77, 148, 0.14), transparent 60%),
			var(--melon-glass-bg);
	}
	.melon-policy__help .melon-faq__cta-secondary { display: none; }
}

/* LANDING + ABOUT mobile hero cao, noi dung neo day */
@media (max-width: 699px) {
	.tax-melon_amenity .melon-landing__hero { min-height: 92vh; }
}

/* ===== Visual QA dot 2 - vong 4/5 ===== */

/* CO SO: vi tri thanh dai full-bleed; CTA cuoi nen anh; review avatar/mark */
.melon-branch__location {
	margin-inline: calc(-1 * var(--melon-margin));
	border-radius: 0;
	border-inline: 0;
	background: #191627;
	padding: 3.5rem var(--melon-margin);
}
.melon-branch__cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-inline: calc(-1 * var(--melon-margin));
	padding: 5.5rem var(--melon-margin) 5rem;
}
.melon-branch__cta-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.melon-branch__cta-veil {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 18, 0.82);
	z-index: -1;
}
.melon-branch__review { position: relative; }
.melon-branch__review-mark {
	position: absolute;
	top: 0.6rem;
	right: 1.1rem;
	color: rgba(255, 77, 148, 0.5);
	font-family: var(--melon-serif);
	font-size: 3.2rem;
	line-height: 1;
}
.melon-branch__review figcaption { display: flex; align-items: center; gap: 0.75rem; }
.melon-branch__review-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: rgba(255, 77, 148, 0.18);
	color: var(--melon-electric-blush);
	font-weight: 700;
}
.melon-branch__review-meta { display: grid; }

@media (max-width: 759px) {
	.melon-home__experiences .melon-home__section-head--split > span { display: none; }
	.melon-home__experience { width: 86%; }
	.melon-home__experience:nth-child(odd) { margin-right: auto; margin-left: 0; }
	.melon-home__experience:nth-child(even) { margin-left: auto; margin-right: 0; }
	.melon-home__experience-caption { max-width: 88%; padding: 1.05rem 1.15rem; }
	.melon-home__faq .melon-home__section-head h2 { font-size: 1.5rem; text-align: center; width: 100%; }
}

/* MEGA: ty le mockup 32/57, card chinh lon, card 3 tach xa */
.melon-nav__mega-inner { grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.6fr); }
.melon-nav__mega-rooms { grid-template-columns: 1.5fr 1fr; }
.melon-nav__mega-links a { font-size: clamp(1.6rem, 2vw, 2.1rem); }
.melon-nav__mega-links .melon-nav__mega-all { font-size: clamp(1.8rem, 2.2vw, 2.3rem); }
.melon-nav__mega-card--3 { margin-top: 5rem; }
.melon-nav__mega-card--main .melon-nav__mega-card-copy { padding-bottom: 2.6rem; }
.melon-nav__mega-card--side .melon-nav__mega-card-copy strong { font-size: clamp(1.7rem, 2.1vw, 2.2rem); }

/* BLOG: H1 lon 2 dong mobile, CTA cao */
.melon-blog__title { font-size: clamp(2.8rem, 6.5vw, 4.6rem); }
@media (max-width: 699px) {
	.melon-blog__title { font-size: 2.7rem; line-height: 1.05; }
}
.melon-blog__cta { padding: 4.5rem 1.5rem; }
.melon-blog__cta h2 { font-size: clamp(2rem, 4.6vw, 2.9rem); }
.melon-blog__featured { margin-top: 0.75rem; }

/* BAI VIET: cover rong goc vuong; title mobile sans manh lon; sapo italic; tip tim */
.melon-article__cover {
	max-width: 1160px;
	aspect-ratio: 2.35 / 1;
	border-radius: 0;
}
.melon-article__lead { font-style: italic; }
@media (max-width: 699px) {
	.melon-article__title { font-weight: 500; font-size: 2.9rem; letter-spacing: -0.02em; }
	.melon-article__cover { aspect-ratio: 4 / 3.2; }
}
.melon-article__body .melon-article__tip {
	background: #1b1430;
	border: 0;
	border-left: 4px solid var(--melon-electric-blush);
	border-radius: 0.4rem;
}
.melon-article__body .melon-article__cta-final {
	background:
		linear-gradient(120deg, rgba(120, 40, 120, 0.35), rgba(255, 77, 148, 0.18)),
		var(--melon-glass-bg);
}
.melon-article__body .melon-article__cta-chips a.is-primary {
	background: var(--melon-electric-blush);
	color: #fff;
}

/* LIEN HE: 2 cot can bang + hero tho desktop */
@media (min-width: 1000px) {
	.melon-contact__columns { grid-template-columns: 1fr 1fr; }
	.melon-contact__quick { margin-top: 3.2rem; }
	.melon-contact__branches { margin-top: 0.5rem; }
}

/* FAQ: mobile label Ho tro hong + mo ta giua; desktop bot khoang trong day */
.melon-faq { padding-bottom: 1.5rem; }
@media (max-width: 767px) {
	.melon-faq__mobile-title {
		text-align: center;
		color: var(--melon-electric-blush);
		font: 700 0.8rem var(--melon-sans);
		letter-spacing: 0.24em;
		text-transform: uppercase;
		margin: 0 0 0.5rem;
	}
	.melon-faq__lead { text-align: center; margin-inline: auto; max-width: 30rem; }
}

/* CHINH SACH: mobile mo ta + accordion 1 lop */
@media (max-width: 767px) {
	.melon-policy__lead {
		display: block;
		color: var(--melon-lavender-grey);
		font-size: 0.92rem;
		margin: 0.4rem 0 0;
	}
	details.melon-policy__section {
		border: 1px solid rgba(180, 180, 216, 0.25);
		border-radius: 0.55rem;
		margin-bottom: 0.65rem;
		padding: 0 0.9rem;
	}
	details.melon-policy__section[open] { border-color: rgba(255, 77, 148, 0.55); }
	details.melon-policy__section > summary {
		border: 0;
		border-radius: 0;
		padding: 0.95rem 0;
		margin-bottom: 0;
		background: none;
	}
	details.melon-policy__section[open] > summary { border-bottom: 1px solid rgba(180, 180, 216, 0.14); margin-bottom: 0.7rem; }
	.melon-policy__section-body { padding: 0 0 0.9rem; }
}

/* VE CHUNG TOI: collage cao, worlds anh cao, mobile eyebrow an + vach dai */
@media (min-width: 900px) {
	.melon-about__collage { grid-template-rows: 380px 300px; }
	.melon-about__world-image { height: 430px; }
}
@media (max-width: 899px) {
	.melon-about__why > .melon-about__why-text > .melon-about__eyebrow { display: none; }
	.melon-about__why::after { height: 260px; }
	.melon-about__world-image { height: 260px; }
}

/* LANDING: hero desktop cao hon */
.tax-melon_amenity .melon-landing__hero { min-height: 82vh; }

/* ===== Vong 5/5 - 4 diem cuoi ===== */
/* FAQ mobile: dai anh + CTA thanh gon (khong card) */
@media (max-width: 767px) {
	.melon-faq__cta { background: none; border: 0; padding: 0.5rem 0 1rem; }
	.melon-faq__cta h2, .melon-faq__cta > p { display: none; }
	.melon-faq__cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
	.melon-faq__banner { margin: 1.2rem 0 1rem; }
	.melon-faq__banner img { height: 200px; }
}
/* HOME mobile: panel chu tach khoi anh, xen ke chong mep */
@media (max-width: 759px) {
	.melon-home__experience { width: 88%; }
	.melon-home__experience-grid { gap: 2.2rem; }
	.melon-home__experience:nth-child(odd) .melon-home__experience-caption {
		left: auto;
		right: -1.4rem;
	}
	.melon-home__experience:nth-child(even) .melon-home__experience-caption {
		left: -1.4rem;
		right: auto;
	}
	.melon-home__experience-caption {
		bottom: -1.2rem;
		background: #12101f;
		backdrop-filter: none;
		border: 1px solid rgba(180, 180, 216, 0.16);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
	}
	.melon-home__experience { margin-bottom: 1rem; }
}
/* MEGA: typography display lon, side cards doc cao so le vuot */
.melon-nav__mega-links a { font-size: 2.35rem; line-height: 1.12; }
.melon-nav__mega-links .melon-nav__mega-all { font-size: 2.55rem; }
.melon-nav__mega-card--main .melon-nav__mega-card-copy strong {
	font-size: clamp(2.6rem, 3.4vw, 3.4rem);
	max-width: 8ch;
}
.melon-nav__mega-card--side .melon-nav__mega-card-copy strong {
	font-size: clamp(2rem, 2.4vw, 2.5rem);
	max-width: 8ch;
}
.melon-nav__mega-card--2 { height: clamp(15rem, 33vh, 19rem); margin-top: 3rem; }
.melon-nav__mega-card--3 { height: clamp(15rem, 33vh, 19rem); margin-top: 6rem; }
.melon-nav__mega-rooms { grid-template-columns: 1.4fr 1fr; }
/* VE CHUNG TOI: hero mobile cao + title 1 dong, why can mep tren */
@media (min-width: 900px) {
	.melon-about__why { align-items: start; }
	.melon-about__why-text { padding-top: 0.5rem; }
}
@media (max-width: 899px) {
	.melon-about__hero { min-height: 94vh; }
	.melon-about__title { font-size: 1.95rem; }
}

/* Fix thu tu: banner FAQ phai hien tren mobile (rule global none dung sau) */
@media (max-width: 767px) {
	.melon-faq__banner { display: block; }
}

/* ===== 12 gop y nguoi dung 22/08 ===== */

/* 1. Header: "Phong" nhu nav item thuong; nut Dat phong pill dac chu trang dam */
.melon-nav__rooms-toggle {
	color: var(--melon-lavender-grey);
	letter-spacing: 0.2em;
}
.melon-nav__rooms-toggle:hover { color: var(--melon-electric-blush); }
.melon-header__cta a {
	background: var(--melon-electric-blush);
	/* Chu toi thay vi trang (mockup) de dat WCAG contrast 4.5:1 — axe gate. */
	color: var(--melon-midnight-sapphire) !important;
	border-radius: 999px;
	padding: 0.75rem 1.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	font-size: 0.68rem;
}
.melon-header__cta a:hover,
.melon-header__cta a:focus-visible { color: var(--melon-midnight-sapphire) !important; }

/* 2. Hero slider nhieu anh - vuot ngang */
.melon-home__hero-slides {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.melon-home__hero-slides::-webkit-scrollbar { display: none; }
.melon-home__hero-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
}
.melon-home__hero-slide .melon-home__hero-image {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: auto;
}
.melon-home__hero .melon-home__hero-overlay { pointer-events: none; z-index: -1; }
.melon-home__hero .melon-home__hero-content { pointer-events: none; position: relative; z-index: 2; }
.melon-home__hero .melon-home__hero-content a { pointer-events: auto; }
.melon-home__hero-dots {
	position: absolute;
	left: 50%;
	bottom: 1.4rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 0.55rem;
}
.melon-home__hero-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.3s ease, width 0.3s ease;
}
.melon-home__hero-dot.is-active {
	background: var(--melon-electric-blush);
	width: 22px;
	border-radius: 99px;
}

/* 3. Mobile: hero thap de "Ban muon phong co" lo o man dau */
@media (max-width: 699px) {
	.melon-home__hero { min-height: 62vh; }
	.melon-home__hero .melon-home__hero-content { padding: 3rem var(--melon-margin) 3.4rem; }
	.melon-home__discovery { padding-top: 1.6rem; }
}

/* 4. Experiences eyebrow (markup da them; rule pink co san qua section-head > p)
   — dam bao khi p nam trong div boc */
.melon-home__section-head > div > p {
	margin: 0 0 1rem;
	color: var(--melon-electric-blush);
	font: 700 0.66rem/1.3 var(--melon-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* 5. Phong Noi Bat theo mockup: badge, intro, CTA kham pha/chi tiet, khong gia */
.melon-featured-rooms__rule {
	flex: 0 0 90px;
	height: 1px;
	background: rgba(180, 180, 216, 0.35);
	margin-bottom: 1.2rem;
}
.melon-featured-rooms__card { border-radius: 0.75rem; }
.melon-featured-rooms__badge {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 2;
	margin: 0;
	background: rgba(8, 8, 18, 0.72);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	color: var(--melon-on-surface);
	font: 700 0.62rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.5rem 0.95rem;
}
.melon-featured-rooms__eyebrow {
	margin: 0 0 0.3rem;
	color: var(--melon-electric-blush);
	font: 700 0.62rem var(--melon-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.melon-featured-rooms h3 a { color: inherit; text-decoration: none; }
.melon-featured-rooms__intro {
	margin: 0.4rem 0 0;
	color: var(--melon-lavender-grey);
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 34rem;
}
.melon-featured-rooms__cta {
	margin-top: 0.9rem;
	border-bottom: 0;
	color: #fff;
	font: 700 0.66rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}
.melon-featured-rooms__cta--corner {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	color: var(--melon-electric-blush);
}
.melon-featured-rooms__card--1 .melon-featured-rooms__content { padding-right: 10rem; }
.melon-featured-rooms__cta--button {
	display: inline-flex;
	background: var(--melon-electric-blush);
	border-radius: 0.5rem;
	color: #fff;
	padding: 0.85rem 1.6rem;
	margin-top: 1.1rem;
}
.melon-featured-rooms__card--4 .melon-featured-rooms__content {
	justify-content: center;
	max-width: 46rem;
}
.melon-featured-rooms__card--4 .melon-featured-rooms__veil {
	background: linear-gradient(90deg, rgba(8, 8, 18, 0.92) 20%, rgba(8, 8, 18, 0.4) 65%, transparent);
}
@media (max-width: 759px) {
	.melon-featured-rooms__card--4 .melon-featured-rooms__content {
		align-items: flex-start;
		text-align: left;
	}
	.melon-featured-rooms__card--4 .melon-featured-rooms__cta {
		background: var(--melon-electric-blush);
		border-radius: 0.5rem;
		padding: 0.85rem 1.6rem;
	}
	.melon-featured-rooms__card--1 .melon-featured-rooms__content { padding-right: 1.5rem; }
	.melon-featured-rooms__cta--corner { position: static; margin-top: 0.9rem; display: inline-block; }
}

/* 6. Editorial: eyebrow hong, logos 1 hang, perks gach doc trai */
.melon-home__editorial-lead > p {
	color: var(--melon-electric-blush) !important;
}
.melon-home__logos {
	flex-wrap: nowrap;
	gap: clamp(1.2rem, 4vw, 2.5rem);
	white-space: nowrap;
}
.melon-home__logos span { font-size: clamp(0.95rem, 2.6vw, 1.15rem); }
.melon-home__perks { border-left: 0; }
.melon-home__perks li {
	border-bottom: 0 !important;
	border-left: 1px solid rgba(180, 180, 216, 0.25);
	padding: 0.4rem 0 0.4rem 2.1rem !important;
	margin-bottom: 2.1rem;
	text-align: left !important;
}
.melon-home__perks li:last-child { margin-bottom: 0; }
.melon-home__perks strong {
	font: italic 400 1.25rem var(--melon-serif);
	color: var(--melon-on-surface);
}
.melon-home__perks li > span {
	color: var(--melon-lavender-grey);
	font-size: 0.92rem;
	line-height: 1.7;
}

/* 7. FAQ: chu nho lai de khong xuong dong 1 chu */
.melon-faq__q { font-size: 1.05rem; }
.melon-faq__item summary { padding: 1.25rem 1.4rem; }
.melon-faq__answer { padding: 0 1.4rem 1.25rem; }
.melon-faq__answer p { font-size: 0.95rem; }

/* 8. Hai co so: nut Xem phong ngang rong hon */
.melon-home__branch-body a {
	padding: 0.75rem 2.8rem !important;
	min-width: 170px;
	justify-content: center;
	display: inline-flex !important;
	border: 1px solid rgba(180, 180, 216, 0.45);
	border-radius: 999px;
	width: max-content;
}

/* 9. Menu mobile: nhan lavender, item trang 1.15rem thoang */
.melon-nav__mobile-cols .melon-nav__eyebrow {
	color: rgba(196, 196, 226, 0.9) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.16em;
	margin-bottom: 0.6rem !important;
}
.melon-nav__mobile-cols a {
	color: #fff !important;
	font-size: 1.15rem !important;
	font-weight: 400 !important;
	padding: 0.4rem 0 !important;
}
.melon-nav__mobile-minor {
	color: rgba(196, 196, 226, 0.9) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.16em;
}

/* 10. Landing SEO: 3 tier card chan dung toi gian */
.melon-landing__tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: var(--melon-section-gap);
}
@media (min-width: 760px) {
	.melon-landing__tiers { grid-template-columns: repeat(3, 1fr); }
}
.melon-landing__tier {
	position: relative;
	display: block;
	aspect-ratio: 0.78;
	border-radius: 0.35rem;
	overflow: hidden;
	text-decoration: none;
}
.melon-landing__tier-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.melon-landing__tier:hover .melon-landing__tier-image { transform: scale(1.04); }
.melon-landing__tier-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.85), transparent 45%);
}
.melon-landing__tier-body {
	position: absolute;
	inset-inline: 1.2rem;
	bottom: 1.1rem;
}
.melon-landing__tier-body strong {
	display: block;
	color: var(--melon-on-surface);
	font: 400 1.6rem var(--melon-serif);
}
.melon-landing__tier-body em {
	color: var(--melon-electric-blush);
	font: 700 0.72rem var(--melon-sans);
	font-style: normal;
	letter-spacing: 0.1em;
}
.melon-landing__more {
	display: inline-flex;
	border: 1px solid rgba(255, 77, 148, 0.55);
	border-radius: 0.3rem;
	color: var(--melon-electric-blush);
	font: 700 0.66rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.7rem 1.3rem;
}

/* 11. Lightbox anh chi tiet phong */
.melon-lightbox {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: rgba(4, 4, 10, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
}
.melon-lightbox[hidden] { display: none; }
.melon-lightbox__image {
	max-width: min(94vw, 1400px);
	max-height: 88vh;
	object-fit: contain;
	border-radius: 0.4rem;
}
.melon-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.7rem;
	cursor: pointer;
}
.melon-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}
.melon-lightbox__nav--prev { left: 1rem; }
.melon-lightbox__nav--next { right: 1rem; }
.melon-lightbox__nav:hover,
.melon-lightbox__close:hover { background: rgba(255, 77, 148, 0.4); }
.melon-lightbox__counter {
	position: absolute;
	bottom: 1.1rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	font: 700 0.72rem var(--melon-sans);
	letter-spacing: 0.14em;
	margin: 0;
}

/* 12. Ve chung toi: can chinh font/mau theo mockup (serif nhe, size mockup) */
.melon-about__title { font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 400; }
.melon-about__lead { color: #b4b4d8; font-size: 0.98rem; }
.melon-about__why h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 400; }
.melon-about__why p { color: #b4b4d8; font-size: 0.98rem; }
.melon-about__band .melon-about__stat-num { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.melon-about__band .melon-about__quote p { font-size: clamp(1rem, 1.9vw, 1.2rem); }
.melon-about__worlds-title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.melon-about__world-body h2 { font-size: 1.35rem; font-weight: 400; }
.melon-about__world-body p { color: #b4b4d8; font-size: 0.94rem; }
.melon-about__cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 400; }
.melon-about__cta h2 em { font-size: inherit; }

/* ===== Dot 3 vong 1/3 fixes ===== */
/* Overlay: tiet kiem 15px de CTA lot viewport */
.melon-nav__mobile-actions { padding-top: 0.8rem; gap: 0.55rem; }
.melon-nav__mobile-book { padding: 0.9rem; }
.melon-nav__mobile-contact a { padding: 0.75rem; }
.melon-nav__mobile-cols { margin-bottom: 1.4rem; }
/* FAQ: an eyebrow mobile (class seed la melon-about__eyebrow) + card nhom thoang */
@media (max-width: 767px) {
	.melon-faq__head .melon-about__eyebrow { display: none; }
	.melon-faq__group { padding: 0.55rem 1.3rem; margin-bottom: 1rem; }
	.melon-faq__group h2 { padding: 1.5rem 0; }
}
/* HOME: featured cao hon, hero desktop cao, FAQ home can giua + serif, perks rail hong */
@media (min-width: 1024px) {
	.melon-featured-rooms__grid { grid-template-rows: repeat(2, 360px) 380px; }
	.melon-home__hero { min-height: 88vh; }
}
.melon-home__faq .melon-home__section-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
}
.melon-home__faq .melon-home__section-head > p { margin-bottom: 0.4rem; }
.melon-home__faq > .melon-home__more-link { display: none; }
.melon-home__faq summary {
	font-family: var(--melon-serif);
	font-weight: 400;
	font-size: 1.08rem;
}
.melon-home__perks {
	border-left: 1px solid rgba(255, 77, 148, 0.4) !important;
}
.melon-home__perks li {
	border-left: 0 !important;
	margin-bottom: 1.9rem;
}
/* ABOUT: overlay toi hon, why gap mockup, worlds 1088 */
.melon-about__hero-gradient {
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.94), rgba(8, 8, 18, 0.62) 50%, rgba(8, 8, 18, 0.72)) !important;
}
@media (min-width: 900px) {
	.melon-about__why { gap: 3rem; grid-template-columns: 1fr 1.05fr; }
	.melon-about__world-grid { max-width: 1088px; }
}

/* ===== Gop y lan 2 (22/08 toi) ===== */
/* 5a. Phong Noi Bat: head sat grid hon */
.melon-featured-rooms .melon-home__section-head { margin-bottom: 1.1rem; }
/* 8. Nut Xem phong 2 co so: ngang to hon nua theo mockup */
.melon-home__branch-body a {
	min-width: 230px;
	padding: 0.85rem 3.2rem !important;
}

/* 10. Landing SEO theo mockup nguoi dung chi dinh: grid 8/4/12, tags, gia, nut */
.melon-landing__tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: var(--melon-section-gap);
}
@media (min-width: 900px) {
	.melon-landing__tiers { grid-template-columns: repeat(12, 1fr); }
	.melon-landing__tier--1 { grid-column: span 8; aspect-ratio: auto; min-height: 460px; }
	.melon-landing__tier--2 { grid-column: span 4; aspect-ratio: auto; min-height: 460px; }
	.melon-landing__tier--3 { grid-column: 1 / -1; aspect-ratio: auto; min-height: 300px; }
}
.melon-landing__tier {
	aspect-ratio: 0.9;
	border-radius: 0.75rem;
}
@media (min-width: 900px) {
	.melon-landing__tier { aspect-ratio: auto; }
}

/* (04/09, Codex+Gemini phuong an A) Tu phong thu 4: luoi gon ngay duoi 3 tier,
   khong con "Xem tat ca" reload. Card anh aspect-ratio co dinh (tranh CLS). */
.melon-landing__more-title {
	margin: 2.2rem 0 1.1rem;
	font: 400 clamp(1.25rem, 2vw, 1.7rem)/1.2 var(--melon-serif);
	color: var(--melon-on-surface);
}
.melon-landing__more-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin-bottom: var(--melon-section-gap);
}
@media (min-width: 640px) { .melon-landing__more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .melon-landing__more-grid { grid-template-columns: repeat(3, 1fr); } }
.melon-landing__gcard {
	position: relative;
	display: flex;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 0.75rem;
	background: var(--melon-deep-navy);
	isolation: isolate;
	text-decoration: none;
	color: var(--melon-on-surface);
}
.melon-landing__gcard-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.melon-landing__gcard:hover .melon-landing__gcard-image { transform: scale(1.05); }
.melon-landing__gcard-body {
	display: grid;
	align-content: end;
	gap: .4rem;
	width: 100%;
	padding: 1.15rem 1.2rem;
	justify-items: start;
	/* Codex P2: nam TREN lop veil gradient (khong bi phu toi) */
	position: relative;
	z-index: 1;
}
.melon-landing__gcard-body strong {
	font: 400 clamp(1.15rem, 1.6vw, 1.45rem)/1.1 var(--melon-serif);
	color: #fff;
}
/* Gop y 04/09: sao rating goc tren anh gcard (nhu card list phong) */
.melon-landing__gcard-rating {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .32rem .7rem;
	background: rgba(8, 8, 18, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	font: 700 .66rem var(--melon-sans);
	letter-spacing: .1em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.melon-landing__gcard-rating svg { color: var(--melon-electric-blush); }
.melon-landing__tier-veil {
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.9), rgba(8, 8, 18, 0.25) 55%, transparent);
}
.melon-landing__tier-body {
	inset-inline: 1.6rem;
	bottom: 1.5rem;
	display: grid;
	gap: 0.45rem;
	justify-items: start;
}
.melon-landing__tier-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* Gop y 04/09 (lan 2): tag tren anh con mo/lan vao anh -> dong bo he pill voi
   card list phong: pill thuong nen den DAC + chu sang + shadow; pill quan trong
   (--pink: nhan trang thai + ten trai nghiem) nen gradient hong DAM dac, chu trang. */
/* Selector kem ".melon-landing__tier-tags" de THANG rule cu ".melon-landing__tier-body em"
   (1 class don thua em-selector ve specificity -> chu tung bi ep ve mau hong nhat). */
.melon-landing__tier-tags .melon-landing__tier-tag,
.melon-landing__tier-tag {
	display: inline-flex;
	border-radius: 999px;
	padding: 0.34rem 0.85rem;
	font: 700 0.64rem var(--melon-sans);
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: rgba(8, 8, 18, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #e9e9f7;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.melon-landing__tier-tags .melon-landing__tier-tag--pink,
.melon-landing__tier-tag--pink {
	background: linear-gradient(135deg, #c91f62, #9e164a);
	border-color: rgba(255, 255, 255, 0.32);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.melon-landing__tier-body strong { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.melon-landing__tier-price {
	color: var(--melon-electric-blush);
	font: 700 0.78rem var(--melon-sans);
	letter-spacing: 0.08em;
}
.melon-landing__tier-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.4rem;
	border: 1px solid rgba(255, 77, 148, 0.55);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font: 700 0.64rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.6rem 1.2rem;
}
.melon-landing__tier:hover .melon-landing__tier-cta {
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
}
/* Nghe thuat: panel glass trai + anh phai */
.melon-landing__art {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
	margin-bottom: var(--melon-section-gap);
}
@media (min-width: 900px) {
	.melon-landing__art { grid-template-columns: 1.6fr 1fr; }
}
.melon-landing__art-panel {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 0.75rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.melon-landing__art-panel h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	margin: 0 0 1rem;
}
.melon-landing__art-panel p {
	color: var(--melon-lavender-grey);
	line-height: 1.8;
	margin: 0 0 1.5rem;
	max-width: 36rem;
}
.melon-landing__art-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--melon-electric-blush);
	font: 700 0.72rem var(--melon-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}
.melon-landing__art-image {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
	border-radius: 0.75rem;
	display: block !important;
}
/* Trai nghiem: anh nen full + text day trai */
.melon-landing__exp {
	position: relative;
	display: block;
	min-height: 420px;
	border-radius: 0.75rem;
	overflow: hidden;
	margin-bottom: var(--melon-section-gap);
	isolation: isolate;
}
.melon-landing__exp-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	display: block !important;
}
.melon-landing__exp-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(8, 8, 18, 0.92) 15%, rgba(8, 8, 18, 0.35) 60%, rgba(8, 8, 18, 0.2));
	z-index: -1;
}
.melon-landing__exp-text {
	position: absolute;
	left: clamp(1.25rem, 4vw, 3rem);
	right: clamp(1.25rem, 4vw, 3rem);
	bottom: 2rem;
	max-width: 34rem;
}
.melon-landing__exp-text h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	margin: 0.8rem 0;
}
.melon-landing__exp-text p {
	color: var(--melon-lavender-grey);
	line-height: 1.75;
	margin: 0 0 1.2rem;
}
/* FAQ Thong tin can biet */
.melon-landing__faq {
	max-width: 860px;
	margin: 0 auto var(--melon-section-gap);
}
.melon-landing__faq h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.6rem, 3.2vw, 2.1rem);
	text-align: center;
	margin: 0 0 1.5rem;
}
.melon-landing__faq-item {
	background: var(--melon-glass-bg);
	border: 1px solid var(--melon-glass-border);
	border-radius: 0.7rem;
	margin-bottom: 0.7rem;
}
.melon-landing__faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	color: var(--melon-on-surface);
	font-weight: 600;
	padding: 1.1rem 1.3rem;
}
.melon-landing__faq-item summary::-webkit-details-marker { display: none; }
.melon-landing__faq-item summary svg { color: var(--melon-electric-blush); transition: transform 0.25s ease; flex-shrink: 0; }
.melon-landing__faq-item[open] summary svg { transform: rotate(180deg); }
.melon-landing__faq-item p {
	color: var(--melon-lavender-grey);
	line-height: 1.75;
	padding: 0 1.3rem 1.1rem;
	margin: 0;
}
/* Ghi de rule cu: mobile van hien anh (mockup ban nay CO anh o moi section) */
@media (max-width: 699px) {
	.melon-landing__art img,
	.melon-landing__exp img { display: block; }
	.melon-landing__art { grid-template-columns: 1fr !important; }
	.melon-landing__exp-text { bottom: 1.25rem; }
}

/* ===== Gop y lan 3 (anh chup mobile nguoi dung) ===== */
/* 1. "PHONG" van hien mobile: WP layout CSS in sau de display:none -> can !important */
@media (max-width: 767px) {
	.melon-nav__desktop { display: none !important; }
}
/* 2. Thanh __rule flex-basis 90px thanh CHIEU CAO trong cot mobile -> khoang trong 135px */
@media (max-width: 759px) {
	.melon-featured-rooms__rule { display: none; }
	.melon-featured-rooms .melon-home__section-head { margin-bottom: 0.9rem; gap: 0.2rem; }
}
/* 4. Landing v3 theo anh mockup nguoi dung: hero trai khong nut, panel icon, exp head tren + overlay */
.melon-landing__hero-inner { text-align: left; }
.melon-landing__hero-inner .melon-landing__title,
.melon-landing__hero-inner .melon-landing__lead { margin-left: 0; text-align: left; }
.melon-landing__art-icon {
	display: inline-flex;
	color: var(--melon-electric-blush);
	margin-bottom: 1rem;
}
.melon-landing__art-panel h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.melon-landing__exp {
	min-height: 0;
	border-radius: 0;
	overflow: visible;
	isolation: auto;
}
.melon-landing__exp-head { max-width: 640px; margin: 0 auto 1.75rem; text-align: center; }
.melon-landing__exp-head h2 {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(1.8rem, 3.8vw, 2.6rem);
	margin: 0 0 0.9rem;
}
.melon-landing__exp-head p { color: var(--melon-lavender-grey); line-height: 1.8; margin: 0; }
.melon-landing__exp-media {
	position: relative;
	min-height: 420px;
	border-radius: 0.75rem;
	overflow: hidden;
	isolation: isolate;
}
.melon-landing__exp-media .melon-landing__exp-image { z-index: -2; }
.melon-landing__exp-media .melon-landing__exp-veil { z-index: -1; }
.melon-landing__exp-media .melon-landing__exp-text {
	position: absolute;
	left: clamp(1.25rem, 4vw, 2.5rem);
	right: auto;
	bottom: 1.75rem;
	max-width: 34rem;
}
.melon-landing__exp-label {
	color: var(--melon-electric-blush);
	font: 700 0.68rem var(--melon-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.3rem;
}
.melon-landing__exp-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0 0 1rem;
}
.melon-landing__exp-cta {
	display: inline-flex;
	background: var(--melon-electric-blush);
	color: var(--melon-midnight-sapphire);
	font: 700 0.68rem var(--melon-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9rem 1.7rem;
}

/* Gop y 23/08: art = panel don (khong anh); exp label hong + title trang lon
   (rule cu ".melon-landing__exp-text p" de mat -> specificity cao hon) */
.melon-landing__art { grid-template-columns: 1fr !important; }
.melon-landing__exp-text p.melon-landing__exp-label {
	color: var(--melon-electric-blush);
	font: 700 0.68rem var(--melon-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.melon-landing__exp-text p.melon-landing__exp-title {
	font-family: var(--melon-serif);
	color: var(--melon-on-surface);
	font-size: clamp(2.1rem, 5.5vw, 3.1rem);
	line-height: 1.1;
	margin: 0 0 1.1rem;
}

/* Gop y 23/08 (2): nen landing dong nhat tuyet doi + title exp lon nhu mockup */
.melon-landing,
.melon-landing__rooms,
.melon-landing__exp,
.melon-landing__exp-head { background: var(--melon-midnight-sapphire); }
.melon-landing__exp-head h2 { font-size: clamp(2.3rem, 6.5vw, 3.1rem); }
.melon-landing__exp-head p { font-size: 1.02rem; }

/* Gop y 23/08 (3): mockup di thang hero -> 3 card; tiers can cach tren */
.melon-landing__tiers { padding-top: 1.5rem; }

/* Gop y 23/08 (4): bottom nav mobile 4 muc + icon (app-style), dong see-all tiers */
.melon-mobile-nav {
	display: none;
}
@media (max-width: 767px) {
	.melon-mobile-nav {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 60;
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		background: rgba(8, 8, 18, 0.96);
		backdrop-filter: blur(14px);
		border-top: 1px solid rgba(180, 180, 216, 0.14);
		padding: 0.45rem 0 calc(0.5rem + env(safe-area-inset-bottom));
	}
	.melon-mobile-nav a {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		color: rgba(180, 180, 216, 0.85) !important;
		font: 700 0.58rem var(--melon-sans) !important;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 0.3rem 0 !important;
		border: 0 !important;
	}
	.melon-mobile-nav a svg { color: currentColor; }
	.melon-mobile-nav a:active,
	.melon-mobile-nav a:hover { color: var(--melon-electric-blush) !important; }
}
.melon-landing__see-all {
	text-align: center;
	margin: 1.6rem 0 0;
}
.melon-landing__see-all a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--melon-electric-blush);
	font: 700 0.72rem var(--melon-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 77, 148, 0.5);
	padding-bottom: 0.35rem;
}
/* Che do xem tat ca: luoi 3 cot deu */
@media (min-width: 900px) {
	.melon-landing__tier--all { grid-column: span 4; min-height: 380px; }
}
.melon-landing__tier--all { aspect-ratio: 0.9; }
@media (min-width: 900px) {
	.melon-landing__tier--all { aspect-ratio: auto; }
}

/* Logo header mobile: lockup 2 dong co chu dich "MELON"/"HOTEL" (Codex, thay vi wrap ngau nhien) */
@media (max-width: 767px) {
	.melon-header__brand {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		text-align: center;
		font-size: clamp(1.26rem, 5vw, 1.42rem);
		font-weight: 600;
		line-height: 0.86;
		letter-spacing: -0.035em;
		text-transform: uppercase;
	}
	.melon-header__brand > a {
		display: inline-block;
		inline-size: 5.75ch;
		max-inline-size: 100%;
		overflow-wrap: normal;
		word-break: normal;
	}
}

/* Header mobile: lưới 3 cột để logo can GIUA TUYET DOI header (hamburger trai, nut phai) */
@media (max-width: 767px) {
	.melon-nav {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: .5rem;
	}
	.melon-nav__toggle { justify-self: start; }
	.melon-header__brand { justify-self: center; flex: none; }
	.melon-nav__cta { justify-self: end; }
}

/* ===== HEADER 2026 (Codex): bo hamburger mobile, logo can giua absolute, trong suot tren hero -> blur khi cuon, nut Dat phong an khi thay CTA hero ===== */
/* Home: header nhe (scrim tren cung, luon doc duoc) khi o dinh trang; mo nen dac khi cuon.
   Dung scrim thay vi transparent hoan toan -> khong lo chu de len noi dung neu JS chua kip. */
body.home .melon-header:not(.is-scrolled) {
	background: linear-gradient(to bottom, rgba(8, 8, 18, 0.6), rgba(8, 8, 18, 0));
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.melon-header.is-scrolled {
	background: rgba(8, 8, 18, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom-color: rgba(180, 180, 216, 0.1);
}
.melon-header { transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease; }

@media (max-width: 767px) {
	.melon-nav {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		position: sticky; /* GIU sticky (base .melon-header), khong dung relative de header khong mat khi cuon */
		top: 0;
	}
	.melon-nav__toggle { display: none !important; } /* menu chuyen sang nut "Them" o bottom bar */
	.melon-header__brand {
		position: absolute; /* sticky header da tao containing block */
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		flex: none;
	}
	.melon-nav__cta { margin: 0; } /* nut Dat phong LUON hien o header (theo yeu cau user) */
	/* nut "Them" o bottom bar giong cac tab khac */
	.melon-mobile-nav button.melon-mobile-nav__more {
		display: flex; flex-direction: column; align-items: center; gap: .25rem;
		background: none; border: 0; cursor: pointer;
		color: rgba(180, 180, 216, .85);
		font: 700 .58rem var(--melon-sans);
		letter-spacing: .06em; text-transform: uppercase; padding: .3rem 0;
	}
	.melon-mobile-nav button.melon-mobile-nav__more[aria-expanded="true"],
	.melon-mobile-nav button.melon-mobile-nav__more:hover { color: var(--melon-electric-blush); }
}

/* FIX sticky thuc su: .melon-header bi boc trong <header class="wp-block-template-part"> cao 72px
   (containing block cua sticky), nen sticky chi dinh trong 72px roi troi mat. Cho chinh lop boc
   sticky (containing block = .wp-site-blocks cao ca trang) -> header dinh dung khi cuon. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* ===== Tra cuu don + "Don gan day" (phuong an khong tai khoan, Codex 25/08) ===== */
.melon-tracuu { background: var(--melon-midnight-sapphire); min-height: 70vh; }
.melon-tracuu__inner { max-width: 30rem; margin: 0 auto; padding: 4.5rem var(--melon-margin) 5rem; text-align: center; }
.melon-tracuu__title { font-family: var(--melon-serif); font-size: clamp(2rem, 5vw, 2.6rem); margin: .35rem 0 .6rem; }
.melon-tracuu__lead { color: var(--melon-lavender-grey); font-size: .95rem; line-height: 1.6; margin: 0 0 1.8rem; }
.melon-tracuu__form { display: grid; gap: 1rem; text-align: left; }
.melon-tracuu__form label span { display: block; font: 700 .62rem var(--melon-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--melon-lavender-grey); margin-bottom: .4rem; }
.melon-tracuu__form input { width: 100%; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid var(--melon-glass-border); background: rgba(255,255,255,.04); color: var(--melon-on-surface); font: 500 1rem var(--melon-sans); }
.melon-tracuu__form input:focus { outline: 2px solid var(--melon-electric-blush); outline-offset: 1px; }
.melon-tracuu__form button { margin-top: .35rem; padding: .95rem 1rem; border: 0; border-radius: 999px; background: var(--melon-electric-blush); color: var(--melon-midnight-sapphire); font: 700 .78rem var(--melon-sans); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.melon-tracuu__form button:disabled { opacity: .6; }
.melon-tracuu__result { margin-top: 1.6rem; padding: 1.2rem 1.3rem; border-radius: 1rem; border: 1px solid var(--melon-glass-border); background: rgba(255,255,255,.04); text-align: left; }
.melon-tracuu__result.is-error { border-color: rgba(255, 99, 99, .5); color: #ffb4b4; }
.melon-tracuu__result.is-ok .melon-tracuu__status strong { color: var(--melon-electric-blush); }
.melon-tracuu__status { margin: 0 0 .7rem; font-family: var(--melon-serif); font-size: 1.25rem; }
.melon-tracuu__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.melon-tracuu__meta li { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.melon-tracuu__meta li span { color: var(--melon-lavender-grey); }
.melon-tracuu__call { margin: .9rem 0 0; font-size: .9rem; color: var(--melon-lavender-grey); }
.melon-tracuu__call a { color: var(--melon-electric-blush); text-decoration: none; }
.melon-tracuu__help { margin-top: 2rem; font-size: .85rem; color: var(--melon-lavender-grey); line-height: 1.9; }
.melon-tracuu__help a { color: var(--melon-on-surface); text-decoration: none; border-bottom: 1px solid var(--melon-glass-border); }

.melon-recent { padding: .9rem var(--melon-margin) 0; }
.melon-recent__card { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; max-width: 40rem; margin: 0 auto; padding: .75rem 1.05rem; border-radius: 1rem; border: 1px solid var(--melon-glass-border); background: rgba(255,255,255,.045); }
.melon-recent__label { font: 700 .58rem var(--melon-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--melon-electric-blush); }
.melon-recent__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.melon-recent__info strong { font-size: .92rem; }
.melon-recent__info em { font-style: normal; font-size: .8rem; color: var(--melon-lavender-grey); }
.melon-recent__actions { display: flex; align-items: center; gap: .6rem; }
/* 04/09 fix vo giao dien mobile (user bao): 1 hang flex bop info con vai chuc px,
   chu xe doc + nut de len. Man hep -> xep DOC: label / info / actions. */
@media (max-width: 640px) {
	.melon-recent__card { flex-direction: column; align-items: stretch; gap: .45rem; }
	.melon-recent__info { flex: none; }
	.melon-recent__info strong { overflow-wrap: anywhere; }
	.melon-recent__actions { justify-content: flex-start; margin-top: .25rem; }
	.melon-recent__hide { margin-left: auto; }
}
.melon-recent__view { font: 700 .68rem var(--melon-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--melon-midnight-sapphire); background: var(--melon-electric-blush); padding: .5rem .9rem; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.melon-recent__hide { background: none; border: 0; color: var(--melon-lavender-grey); font-size: .78rem; cursor: pointer; }

/* ===== 25/08 dot chinh sua theo gop y ===== */
/* (2) Thu nho filter chips o /phong/ cho gon nhu chips trang chu */
.melon-filters__chip { padding: 0.45rem 0.9rem; gap: 0.4rem; font-size: 0.64rem; }
.melon-filters__chip svg { width: 13px; height: 13px; }

/* (3) Fix o Ngay nhan / Ngay tra chong nhau (input date co kich thuoc noi tai lon hon o cha) */
.melon-room-detail__fields input[type="date"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 480px) {
	/* man hep: 2 o ngay xep doc full-width, tuyet doi khong chong.
	   Codex P0 06/09: span 6 tren grid it cot hon sinh implicit column TRAN ngang
	   -> dung 1 / -1 de full hang voi MOI so cot. */
	#melon-d-fields[data-mode="daily"] .melon-f-date,
	#melon-d-fields[data-mode="daily"] .melon-f-dateout { grid-column: 1 / -1; }
}

/* (4) Trang /trai-nghiem/ — luoi card trai nghiem */
.melon-explist { background: var(--melon-midnight-sapphire); }
.melon-explist__head { max-width: 44rem; margin: 0 auto; padding: 4rem var(--melon-margin) 1.5rem; text-align: center; }
.melon-explist__title { font-family: var(--melon-serif); font-size: clamp(2.1rem, 5.5vw, 3rem); margin: .35rem 0 .6rem; }
.melon-explist__lead { color: var(--melon-lavender-grey); line-height: 1.7; margin: 0; }
.melon-explist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; max-width: 72rem; margin: 0 auto; padding: 1.5rem var(--melon-margin) 5rem; }
.melon-explist__card { position: relative; display: block; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; text-decoration: none; border: 1px solid var(--melon-glass-border); }
.melon-explist__image { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.melon-explist__card:hover .melon-explist__image { transform: scale(1.05); }
.melon-explist__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,18,.85), rgba(8,8,18,.05) 55%); }
.melon-explist__body { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.melon-explist__body strong { font-family: var(--melon-serif); font-size: 1.35rem; color: #fff; }
.melon-explist__body em { font-style: normal; font: 700 .66rem var(--melon-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--melon-electric-blush); }

/* (25/08 fix 2) input[type=date] tren iOS Safari: khi rong khong hien gi + chieu cao lech
   -> chuan hoa appearance, ep chieu cao khop cac o khac, can trai gia tri ngay. */
.melon-booking__field input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	min-height: 3.15rem;
	max-height: 3.4rem;
}
.melon-booking__field input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
	line-height: 1.4;
}

/* (04/09) O ngay kieu moi: span hien thi ("Chọn ngày" mo / "4 thg 9" khong nam)
   + icon lich; input date that opacity 0 phu len tren de van mo picker native. */
.melon-datebox { position: relative; display: block; }
.melon-datebox input[type="date"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}
.melon-datebox__display {
	display: flex;
	align-items: center;
	min-height: 3.15rem;
	box-sizing: border-box;
	width: 100%;
	background: rgba(8, 8, 18, 0.6);
	border: 1px solid rgba(180, 180, 216, 0.2);
	border-radius: var(--melon-radius);
	padding: 1rem 2.6rem 1rem 1.1rem;
	color: rgba(180, 180, 216, 0.45);
	white-space: nowrap;
	overflow: hidden;
}
.melon-datebox__display.has-value { color: var(--melon-on-surface); }
.melon-datebox input[type="date"]:focus-visible + .melon-datebox__display {
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 12px rgba(255, 77, 148, 0.25);
}
.melon-datebox__icon {
	position: absolute;
	right: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(180, 180, 216, 0.7);
	pointer-events: none;
	z-index: 1;
}

/* (25/08) Module ma giam gia: thong bao kiem tra ma + dong giam gia o man thanh toan */
.melon-km-msg { margin: .45rem 0 0; font-size: .8rem; line-height: 1.45; }
.melon-km-msg.is-ok { color: #7ee2a8; }
.melon-km-msg.is-err { color: #ffb4b4; }
.melon-km-remove {
	margin-left: .35rem;
	padding: .1rem .55rem;
	background: transparent;
	border: 1px solid rgba(180, 180, 216, 0.45);
	border-radius: 999px;
	color: var(--melon-lavender-grey);
	font: 600 .72rem var(--melon-sans);
	cursor: pointer;
}
.melon-km-remove:hover { border-color: var(--melon-electric-blush); color: var(--melon-electric-blush); }

/* (04/09 toi) Banner thu gon 1 dong (Codex+Gemini): tran an uu dai + link toi o ma */
.melon-booking__promo-line {
	margin: .9rem 0 1.2rem;
	padding: .55rem .9rem;
	border: 1px solid rgba(240, 90, 150, 0.3);
	border-radius: var(--melon-radius);
	background: rgba(201, 31, 98, 0.1);
	color: var(--melon-lavender-grey);
	font-size: .82rem;
	line-height: 1.55;
}
.melon-booking__promo-line-link {
	margin-left: .3rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--melon-electric-blush);
	font: 700 .8rem var(--melon-sans);
	text-decoration: underline;
	cursor: pointer;
}

/* (04/09) Banner uu dai (da thu gon — CSS giu cho kha nang dung lai) */
.melon-booking__promos {
	margin: 1.1rem 0 1.4rem;
	padding: .9rem 1.05rem;
	background: linear-gradient(135deg, rgba(201, 31, 98, 0.14), rgba(8, 8, 18, 0.5));
	border: 1px solid rgba(240, 90, 150, 0.35);
	border-radius: var(--melon-radius);
}
.melon-booking__promos-title {
	margin: 0 0 .55rem;
	font: 700 .72rem var(--melon-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--melon-electric-blush);
}
.melon-booking__promo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .45rem 0;
}
.melon-booking__promo + .melon-booking__promo { border-top: 1px dashed rgba(180, 180, 216, 0.2); }
.melon-booking__promo-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; min-width: 0; }
.melon-booking__promo-info strong {
	font: 700 .85rem/1 var(--melon-sans);
	letter-spacing: .08em;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: .45rem;
	padding: .3rem .55rem;
}
.melon-booking__promo-info em { font-style: normal; font-weight: 700; color: var(--melon-electric-blush); }
.melon-booking__promo-info small { flex-basis: 100%; color: var(--melon-lavender-grey); font-size: .74rem; }
.melon-booking__promo-apply {
	flex-shrink: 0;
	padding: .5rem 1.05rem;
	background: transparent;
	border: 1px solid var(--melon-electric-blush);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font: 700 .68rem var(--melon-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.melon-booking__promo-apply:hover { background: var(--melon-electric-blush); color: var(--melon-midnight-sapphire); }
.melon-booking__promos-note { margin: .6rem 0 0; color: var(--melon-lavender-grey); font-size: .74rem; line-height: 1.5; }
.melon-booking__discount-rule { margin: .4rem 0 0; color: rgba(180, 180, 216, 0.6); font-size: .72rem; }

/* (06/09) Gia sau giam toan web: goc gach nho + gia moi + pill % (chi dao chu) */
.melon-price-goc {
	color: var(--melon-lavender-grey);
	opacity: .75;
	font-size: .82em;
	font-weight: 400;
	margin-right: .1em;
}
.melon-price-pill {
	display: inline-block;
	vertical-align: middle;
	margin-left: .3em;
	padding: .14em .5em;
	border-radius: 999px;
	background: linear-gradient(135deg, #c91f62, #9e164a);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font: 700 .62rem var(--melon-sans);
	font-style: normal;
	letter-spacing: .05em;
}
.melon-price-note {
	margin: -.3rem 0 .8rem;
	color: rgba(180, 180, 216, 0.65);
	font-size: .7rem;
	line-height: 1.5;
}
.melon-price-note--page {
	margin: .8rem 0 0;
	font-size: .76rem;
	text-align: center;
}

/* (06/09 vong soat "ca 3") Fix lech/vo giao dien */
/* 0. Gemini: trang /tra-cuu/ co 2 tieu de chong nhau (post title WP + title cua
      block tra-cuu) -> an post title khi block da tu mang tieu de rieng. */
.melon-page:has(.melon-tracuu) .melon-page__title { display: none; }
/* 1. Msg kiem tra ma nam trong .melon-booking__discount (flex row) -> bop input
      con nua o (Claude tu soi anh dat-phong-m): msg phai xuong hang rieng. */
.melon-booking__discount { flex-wrap: wrap; }
.melon-booking__discount .melon-km-msg { flex-basis: 100%; margin-top: .45rem; }
/* 2. Codex P1: tier amount detail nowrap ep label bop/tran o mobile hep. */
@media (max-width: 480px) {
	.melon-room-detail__tier { flex-wrap: wrap; }
	.melon-room-detail__tier-amount { white-space: normal; margin-left: auto; text-align: right; font-size: 1.2rem; }
}
/* 3. Codex P2: man rat hep — grid form dat 1 cot de datebox/chon gio khong bi cat. */
@media (max-width: 380px) {
	.melon-booking__grid { grid-template-columns: 1fr; }
	.melon-datebox__display { padding-right: 2.2rem; }
}
/* 3b. Focus ring datebox: iOS tap khong phat :focus-visible -> them :focus. */
.melon-datebox input[type="date"]:focus + .melon-datebox__display {
	border-color: var(--melon-electric-blush);
	box-shadow: 0 0 12px rgba(255, 77, 148, 0.25);
}

/* (05/09) chong double-submit: nut khoa + notice don trung tren man thanh toan */
.melon-booking__submit:disabled, .melon-pay__cta:disabled, .melon-room-detail__cta:disabled {
	opacity: .65;
	cursor: not-allowed;
}
.melon-pay__dup-note {
	margin: 1rem var(--melon-margin) 0;
	padding: .7rem 1rem;
	border: 1px solid rgba(126, 226, 168, 0.4);
	border-radius: var(--melon-radius);
	background: rgba(126, 226, 168, 0.08);
	color: #7ee2a8;
	font-size: .85rem;
	line-height: 1.55;
}

/* (04/09) List ma cong khai canh o nhap — gap/mo, bam "Dùng mã" la ap */
.melon-km-list { margin: .45rem 0 0; }
.melon-km-list__toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--melon-electric-blush);
	font: 700 .74rem var(--melon-sans);
	letter-spacing: .06em;
	cursor: pointer;
}
.melon-km-list__toggle svg { transition: transform .25s ease; }
.melon-km-list__toggle.is-open svg { transform: rotate(180deg); }
.melon-km-list__panel {
	margin-top: .55rem;
	border: 1px solid rgba(240, 90, 150, 0.3);
	border-radius: var(--melon-radius);
	background: rgba(8, 8, 18, 0.75);
	padding: .3rem .85rem;
}
.melon-km-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .55rem 0;
}
.melon-km-list__item + .melon-km-list__item { border-top: 1px dashed rgba(180, 180, 216, 0.2); }
.melon-km-list__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .5rem; min-width: 0; }
.melon-km-list__info strong {
	font: 700 .8rem/1 var(--melon-sans);
	letter-spacing: .07em;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: .4rem;
	padding: .28rem .5rem;
}
.melon-km-list__info em { font-style: normal; font-weight: 700; color: var(--melon-electric-blush); font-size: .82rem; }
.melon-km-list__info small { flex-basis: 100%; color: var(--melon-lavender-grey); font-size: .72rem; }
.melon-km-list__use {
	flex-shrink: 0;
	padding: .42rem .9rem;
	background: transparent;
	border: 1px solid var(--melon-electric-blush);
	border-radius: 999px;
	color: var(--melon-electric-blush);
	font: 700 .64rem var(--melon-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.melon-km-list__use:hover { background: var(--melon-electric-blush); color: var(--melon-midnight-sapphire); }

/* (04/09) Tong tien co ma: gia goc gach + tong sau giam */
.melon-booking__total-strike {
	display: block;
	text-decoration: line-through;
	color: var(--melon-lavender-grey);
	font-size: .82rem;
	opacity: .85;
}
.melon-pay__total-row--sub { opacity: .92; }
.melon-pay__total-row--sub .melon-pay__total-label { font-size: .78rem; }
.melon-pay__total-strike { text-decoration: line-through; color: var(--melon-lavender-grey); font-size: .9rem; }
.melon-pay__total-discount { color: #7ee2a8; font-weight: 700; }

/* (03/09) Mo ta phong ban chinh thuc: USP dau bai + FAQ + links */
.melon-room-detail__description .melon-desc-usp { color: var(--melon-on-surface); font-size: 1.02rem; line-height: 1.6; padding: .8rem 1rem; border-left: 3px solid var(--melon-electric-blush); background: rgba(255,255,255,.04); border-radius: 0 .6rem .6rem 0; margin: 0 0 1.1rem; }
.melon-room-detail__description p { margin: 0 0 .9rem; }
.melon-room-detail__description h2 { font-family: var(--melon-serif); font-size: 1.3rem; color: var(--melon-on-surface); margin: 1.6rem 0 .7rem; }
.melon-room-detail__description .melon-desc-faq strong { color: var(--melon-on-surface); display: block; margin-bottom: .1rem; }
.melon-room-detail__description .melon-desc-links { margin-top: 1.2rem; font-size: .9rem; color: var(--melon-lavender-grey); }
.melon-room-detail__description .melon-desc-links a { color: var(--melon-electric-blush); text-decoration: none; }

/* (03/09) Hero da chuong trinh: nhieu content, doi theo slide */
/* 04/09: PC keo chuot de truot hero */
@media (hover: hover) and (pointer: fine) {
	.melon-home__hero { cursor: grab; }
	.melon-home__hero.is-dragging { cursor: grabbing; }
	.melon-home__hero.is-dragging .melon-home__hero-content a { pointer-events: none; }
}

.melon-home__hero-contents { display: grid; pointer-events: none; }
.melon-home__hero-contents > .melon-home__hero-content { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease; pointer-events: none; }
/* Fix 04/09: KHONG bat pointer-events cho ca khoi content — no phu gan het hero
   va nuot touch, lam mobile khong vuot ngang duoc slide. Chi nut/link nhan cham,
   phan con lai cho touch xuyen xuong dai anh scroll-snap ben duoi. */
.melon-home__hero-contents > .melon-home__hero-content.is-active { opacity: 1; visibility: visible; }
.melon-home__hero-contents > .melon-home__hero-content.is-active a { pointer-events: auto; }
.melon-home__hero-contents .melon-home__hero-title, .melon-home__hero-contents h1 { font-family: var(--melon-serif); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.08; margin: 0; color: #fff; }
.melon-home__hero-title em, .melon-home__hero-contents h1 em { font-style: italic; color: var(--melon-electric-blush); }
.melon-home__hero-slide--plain { background: linear-gradient(135deg, #14101f, #241a38); }