/* Rates (bang-gia): page title, 4 room-type rate cards (photo, size / guests / rooms, "On request",
 * Request a rate → enquiry with the room preselected), "Before you book" features, CTA.
 * No prices: the customer has not given them. */

.dp-rates > .section-content { padding: 90px 0 120px; }
.dp > .section-content > .row.dp-rates-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.dp-rate > .col-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--line);
	background: #fff;
}
.dp-rate .dp-rate-img { overflow: hidden; }
.dp-rate .dp-rate-img img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.dp-rate .dp-rate-img:hover img { transform: scale(1.04); }
.dp-rate-t { flex: 1; padding: 28px 26px 0; }
.dp-rate-t p.eyebrow { margin-bottom: 10px; font-size: 11px; }
.dp-rate-t h3 { min-height: 2.5em; margin: 0 0 18px; font-size: 23px; line-height: 1.25; }
.dp-rate-t ul.room-meta {
	display: flex;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.dp-rate-t .room-meta li {
	flex: 1;
	margin: 0;
	padding: 12px 0 10px 12px;
	border-left: 1px solid var(--line);
	font-size: 10px;
	line-height: 1.75;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 500;
}
.dp-rate-t .room-meta li:first-child { border-left: 0; padding-left: 0; }
.dp-rate-t .room-meta b {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--teal-d);
}
.dp-rate-t p.dp-rate-p { margin: 0 0 24px !important; font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--ink); }
.dp-rate-p span {
	display: block;
	margin-bottom: 4px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--muted);
}
.dp-rate .button { align-self: stretch; margin: 0 26px 26px !important; }

@media (max-width: 1024px) {
	.dp-rates > .section-content { padding: 70px 0 90px; }
	.dp > .section-content > .row.dp-rates-row { grid-template-columns: 1fr 1fr; gap: 24px; }
	.dp-rate-t h3 { min-height: 0; }
}

@media (max-width: 767px) {
	.dp-rates > .section-content { padding: 50px 0 72px; }
	.dp > .section-content > .row.dp-rates-row { grid-template-columns: 1fr; gap: 28px; }
	.dp-rate-t { padding: 24px 22px 0; }
	.dp-rate .button { margin: 0 22px 22px !important; }
}