/* ============================================================================
   NHÀ NGHỈ HÀ NỘI SAO — lớp giao diện riêng
   ----------------------------------------------------------------------------
   Thứ tự nạp CSS:  style.css (template gốc)  ->  themes.css (bảng màu)
                    ->  site.css (file này)

   File này chứa phần tuỳ biến của Hà Nội Sao: hệ typography, slider, thẻ phòng,
   bảng giá, form, thanh CTA mobile... và KHÔNG chứa màu cứng — mọi màu đều lấy
   từ biến trong themes.css. Đổi theme = đổi 'theme' trong app/config/site.php.

   Sửa giao diện thì sửa ở đây, KHÔNG sửa style.css.

   ---------------------------------------------------------------------------
   UI REFRESH 2026-08 — mục tiêu
   ---------------------------------------------------------------------------
   Giữ nguyên tinh thần Hills (sidebar kem trái + nội dung tối phải, khung
   viền đôi, typography Bitter cho tiêu đề) nhưng:
     · chữ TO hơn rõ rệt — người lớn tuổi và khách dùng điện thoại đọc được;
     · bố cục rộng hơn (1180–1280px trên màn hình lớn);
     · card bo góc nhẹ + bóng rất mờ thay cho viền 4px double dày đặc;
     · nhiều khoảng thở hơn giữa các khối;
     · nút cao tối thiểu 48px, ô nhập 50–54px.
   Không thêm thư viện, không thêm request, không đổi một dòng business logic.

   MỤC LỤC
    1. Design tokens (không phải màu): typography, spacing, bo góc
    2. Typography tiếng Việt
    3. Tiện ích chung (sr-only, skip-link, icon)
    4. Bố cục & chiều rộng trang
    5. Logo & sidebar
    6. Menu + nút CTA "Đặt phòng"
    7. Hệ thống nút (button system)
    8. Slider / hero ảnh
    9. Khối tiện ích (feature grid)
   10. Bảng giá
   11. Thẻ phòng
   12. Thư viện ảnh + bộ lọc + lightbox
   13. Form đặt phòng
   14. Bản đồ & liên hệ
   15. Footer
   16. Thanh CTA cố định trên mobile
   17. Accessibility & chuyển động
   18. Áp dụng biến theme lên CSS gốc của template
   19. Bảng chọn theme (chỉ dùng khi thử màu)
   20. Khối thông tin nhận diện ở trang Liên hệ
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (không phải màu)
   -----------------------------------------------------------------------
   Toàn bộ MÀU nằm ở themes.css. Ở đây là thang chữ, khoảng cách và bo góc.

   Thang chữ dùng clamp(min, ưu tiên, max) nên co giãn mượt theo bề rộng màn
   hình — không cần media query cho từng cỡ chữ, và không bao giờ nhỏ hơn mức
   đọc được. Mốc tham chiếu: vw tính trên bề rộng viewport.
   ----------------------------------------------------------------------- */
:root {
	/* --- Cỡ chữ ------------------------------------------------------- */
	/* Thân bài: 16,7px ở 360px  ->  18px từ ~745px trở lên. */
	--fs-body:     clamp(16.5px, 0.35vw + 15.4px, 18px);
	--fs-lead:     clamp(17.5px, 0.55vw + 15.5px, 20px);
	--fs-nav:      clamp(16px,   0.25vw + 15.1px, 17px);
	--fs-small:    clamp(15px,   0.2vw  + 14.3px, 16px);
	--fs-label:    clamp(14.5px, 0.15vw + 14px,   15.5px);
	--fs-h1:       clamp(34px, 3vw,   48px);
	--fs-h2:       clamp(28px, 2.4vw, 38px);
	--fs-h3:       clamp(22px, 1.7vw, 28px);
	--fs-h4:       clamp(18px, 1vw + 14.5px, 21px);
	--fs-price:    clamp(24px, 1.6vw + 17px, 30px);
	--fs-price-sm: clamp(21px, 1.2vw + 16px, 26px);
	--fs-btn:      clamp(16px, 0.25vw + 15.1px, 17px);
	--fs-input:    clamp(16px, 0.2vw + 15.3px, 17px);
	--fs-footer:   clamp(15px, 0.2vw + 14.3px, 16px);
	--fs-logo:     clamp(28px, 1.6vw + 22px, 34px);
	--fs-phone:    clamp(23px, 1.2vw + 18px, 27px);

	/* --- Chiều cao dòng ------------------------------------------------ */
	--lh-body:    1.7;
	--lh-tight:   1.5;
	--lh-heading: 1.28;

	/* --- Khoảng cách ---------------------------------------------------- */
	/* Giữa hai section lớn. Bố cục đổi hẳn ở 46.25em (sidebar chuyển sang cột
	   trái), nên nhịp khoảng cách cũng đổi ở đúng mốc đó — clamp() một mình
	   không tạo được bước nhảy 52px -> 56px này.
	   Điện thoại: 36–52px. */
	--space-section: clamp(36px, 3vw + 24px, 52px);
	/* Tiêu đề -> mô tả */
	--space-title:   clamp(14px, 0.5vw + 12px, 20px);
	/* Mô tả -> nội dung */
	--space-desc:    clamp(24px, 0.6vw + 20px, 32px);
	--space-card:    clamp(20px, 1vw + 16px, 28px);
	--gap-grid:      clamp(14px, 1vw + 10px, 24px);

	/* --- Bo góc --------------------------------------------------------- */
	--radius:      14px;   /* card lớn (bảng giá, form, thẻ phòng) */
	--radius-sm:   10px;   /* nút, ô nhập */
	--radius-xs:   8px;    /* khối nhỏ, ô icon */
	--radius-img:  12px;   /* ảnh trong lưới */
	--radius-pill: 999px;  /* chip lọc thư viện */

	/* --- Chuyển động ----------------------------------------------------- */
	--t:      170ms ease;
	--t-slow: 220ms ease;

	/* --- Chiều rộng bố cục ------------------------------------------------
	   Ghi đè chiều rộng tính bằng em của template gốc. Dùng px để bề rộng
	   trang KHÔNG phình theo cỡ chữ khi ta tăng font — hai thứ tách bạch. */
	--layout-w:  100%;
	--footer-w:  100%;
	/* Tablet (740–880px): cả khung trang mới rộng 672–784px, nếu ép sidebar
	   280px thì cột nội dung còn chưa tới 400px — hại nhiều hơn lợi. Ở dải
	   này giữ tỉ lệ như template; từ 880px trở lên mới chốt 280–320px. */
	--sidebar-w: 34%;
	/* Bề rộng đọc thoải mái cho đoạn văn dài (~700–780px). */
	--measure:   760px;
}

/* Template gốc chèn clearfix bằng ::before/::after (display:table) vào
   .container, .row và .gallery. Khi ta chuyển các khối đó sang CSS grid, hai
   pseudo-element ấy biến thành Ô LƯỚI TRỐNG và đẩy lệch cả hàng.
   Vô hiệu hoá chúng đúng ở những khối đã thành grid. */
.amenities .row::before,
.amenities .row::after,
.contact-info::before,
.contact-info::after,
.gallery::before,
.gallery::after,
.room-list::before,
.room-list::after {
	display: none;
	content: none;
}

/* Từ tablet trở lên (bố cục hai cột): khoảng cách section 56–80px. */
@media screen and (min-width: 46.25em) {       /* 740px  */
	:root { --space-section: clamp(56px, 2.2vw + 39px, 80px); }
}

/* Mốc chiều rộng — trùng breakpoint của template Hills để không lệch nhịp. */
@media screen and (min-width: 55em) {          /* 880px  */
	:root { --layout-w: 830px;  --footer-w: 900px;  --sidebar-w: 280px; }
}

@media screen and (min-width: 59.6875em) {     /* 955px  */
	:root { --layout-w: 920px;  --footer-w: 990px;  --sidebar-w: 290px; }
}

@media screen and (min-width: 68.75em) {       /* 1100px */
	:root { --layout-w: 1060px; --footer-w: 1130px; --sidebar-w: 300px; }
}

@media screen and (min-width: 77.5em) {        /* 1240px */
	:root { --layout-w: 1180px; --footer-w: 1250px; --sidebar-w: 310px; }
}

@media screen and (min-width: 90em) {          /* 1440px */
	:root { --layout-w: 1280px; --footer-w: 1350px; --sidebar-w: 320px; }
}

html {
	background-color: var(--bg-page);
}

.sidebar {
	background-color: var(--bg-sidebar);
}

.content {
	background-color: var(--bg-content);
}

/* --------------------------------------------------------------------------
   2. Typography tiếng Việt
   -----------------------------------------------------------------------
   Hai font, không hơn:
     · Be Vietnam Pro — thân bài. Dựng riêng cho tiếng Việt, dấu rõ, chữ mở,
       đọc tốt ở cỡ nhỏ trên điện thoại.
     · Bitter — tiêu đề. Giữ nét slab-serif đặc trưng của template Hills.
   ----------------------------------------------------------------------- */
body {
	font-family: 'Be Vietnam Pro', 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
	/* Template gốc để 87.52% (~14px) — quá nhỏ. Đây là thay đổi quan trọng nhất. */
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Bitter', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	/* Tiếng Việt nhiều dấu -> nới dòng để không bị chạm dấu. */
	line-height: var(--lh-heading);
	letter-spacing: -0.005em;
	hyphens: manual;
}

/* Không tự ngắt từ tiếng Việt giữa chừng. */
p, li, h1, h2, h3, h4, h5, h6 {
	hyphens: manual;
	overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); margin-bottom: 0.45em; }
h2 { font-size: var(--fs-h2); margin-bottom: 0.4em;  letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); margin-bottom: 0.5em;  letter-spacing: -0.005em; }
h4 { font-size: var(--fs-h4); margin-bottom: 0.55em; letter-spacing: 0; }
h5 { font-size: var(--fs-h4); margin-bottom: 0.75em; }
h6 { font-size: var(--fs-label); margin-bottom: 1em; letter-spacing: 0.1em; }

.page-title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-title);
}

/* Tiêu đề của một section trong trang. */
.content h3 {
	margin-top: 0;
	margin-bottom: var(--space-title);
	font-size: var(--fs-h3);
}

.content p,
.content ul,
.content ol {
	margin-bottom: 1.15em;
}

.lead {
	max-width: var(--measure);
	margin-bottom: var(--space-desc);
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--text-main);
}

/* Đoạn văn dài không nên kéo hết bề rộng — mắt khó bắt dòng kế tiếp. */
.content-inner > p,
.content-inner > ul,
.content-inner > ol,
.price-subtitle {
	max-width: var(--measure);
}

/* Hàng nút thì được phép rộng hết. */
.content-inner > p.home-quick-actions,
.content-inner > p.contact-actions,
.content-inner > p.map-directions-bar {
	max-width: none;
}

.content ul.disc li,
.content ol li {
	margin-bottom: 0.45em;
}

/* Đường phân cách: thay 4px double bằng một nét mảnh + nhiều khoảng thở hơn.
   Phần lớn "khoảng cách giữa các section" nay do margin đảm nhiệm, đường kẻ
   chỉ còn là gợi ý rất nhẹ. */
.content hr {
	height: 1px;
	border: 0;
	background-color: var(--border-soft);
	margin: var(--space-section) 0;
	opacity: 0.9;
}

.small-text {
	font-size: var(--fs-small);
}

.content a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--t);
}

.content a:hover,
.content a:focus {
	color: var(--accent-hover);
}

strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   3. Tiện ích chung
   ----------------------------------------------------------------------- */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.85em 1.35em;
	background: var(--primary);
	border-radius: 0 0 var(--radius-sm) 0;
	color: var(--text-on-primary);
	font-size: var(--fs-btn);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

.ico {
	width: 1.3em;
	height: 1.3em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.26em;
}

.ico-sm { width: 1.05em; height: 1.05em; vertical-align: -0.17em; }
.ico-lg { width: 1.9em;  height: 1.9em;  stroke-width: 1.35; vertical-align: middle; }

/* --------------------------------------------------------------------------
   4. Bố cục & chiều rộng trang
   -----------------------------------------------------------------------
   Template gốc đặt .page-wrapper { width: 62em } — bề rộng buộc vào cỡ chữ.
   Khi tăng font, trang sẽ tự phình theo và vỡ nhịp. Ở đây ta tách hai thứ:
   chữ dùng clamp(), bề rộng dùng px qua biến --layout-w.
   ----------------------------------------------------------------------- */
.page-wrapper {
	width: var(--layout-w);
	max-width: 100%;
}

#footer {
	width: var(--footer-w);
	max-width: 100%;
}

@media screen and (min-width: 46.25em) {
	.sidebar {
		width: var(--sidebar-w);
	}
}

/* Vùng nội dung: nới padding cho thoáng hơn khi chữ đã to. */
@media screen and (min-width: 46.25em) {
	.content-inner {
		padding: clamp(24px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px) clamp(32px, 3vw, 52px);
	}
}

/* Khối cuối cùng trong trang không cần lề dưới thừa. */
.content-inner > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Logo & sidebar
   -----------------------------------------------------------------------
   Giữ đúng chất Hills: cột kem, logo chữ căn giữa, menu dọc. Chỉ nới rộng
   và làm chữ to hơn — KHÔNG biến thành menu dashboard.
   ----------------------------------------------------------------------- */
.site-branding.text h1.site-logo {
	font-size: 1em;
	text-align: center;
}

.site-logo a {
	display: inline-block;
	color: var(--text-on-sidebar);
	text-decoration: none;
	line-height: 1.15;
	transition: opacity var(--t);
}

.site-logo a:hover {
	opacity: 0.82;
}

.logo-star {
	display: block;
	width: 2.15em;
	height: 2.15em;
	margin: 0 auto 0.45em;
	fill: var(--primary-strong);
	stroke: var(--text-on-sidebar);
	stroke-width: 1.2;
}

.logo-line1 {
	display: block;
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-logo);
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1.15;
}

.logo-line2 {
	display: block;
	margin-top: 0.45em;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--text-muted-sidebar);
}

.sidebar-inner {
	padding-left: clamp(18px, 2vw, 30px);
	padding-right: clamp(18px, 2vw, 30px);
}

@media screen and (min-width: 55em) {
	.sidebar-inner {
		padding-left: clamp(24px, 2.2vw, 34px);
		padding-right: clamp(24px, 2.2vw, 34px);
	}
}

/* Khối "GỌI ĐẶT PHÒNG" — CTA quan trọng nhất của sidebar.
   Làm thành một thẻ nhỏ có nền riêng để số điện thoại nổi bật, thay cho
   đường 4px double của template cũ. */
.sidebar-contact {
	padding: clamp(18px, 1.6vw, 24px) clamp(14px, 1.4vw, 20px);
	margin-top: clamp(22px, 2vw, 30px);
	border: 1px solid var(--border-sidebar-soft);
	border-radius: var(--radius);
	background-color: var(--surface-sidebar);
	text-align: center;
}

.sidebar-contact-label {
	margin-bottom: 0.35em;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted-sidebar);
}

.sidebar-phone {
	margin-bottom: 0.25em;
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-phone);
	font-weight: 700;
	line-height: 1.25;
}

.sidebar-phone a {
	display: inline-block;
	color: var(--text-on-sidebar);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--t);
}

.sidebar-phone a:hover,
.sidebar-phone a:focus {
	color: var(--primary-strong);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sidebar-phone .ico {
	color: var(--primary-strong);
}

.sidebar-phone.secondary {
	font-size: var(--fs-nav);
	font-weight: 600;
}

.sidebar-hours {
	margin-bottom: 1.1em;
	font-size: var(--fs-small);
	color: var(--text-muted-sidebar);
}

.sidebar-actions {
	margin-bottom: 0;
}

.sidebar .button.sidebar-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	min-height: 48px;
	margin-bottom: 0;
	padding: 0.7em 1.2em;
	background-color: var(--bg-content);
	border: 1px solid var(--bg-content);
	border-radius: var(--radius-sm);
	color: var(--bg-sidebar);
	font-size: var(--fs-btn);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
}

.sidebar .button.sidebar-zalo:hover,
.sidebar .button.sidebar-zalo:focus {
	background-color: var(--primary-strong);
	border-color: var(--primary-strong);
	color: var(--text-on-primary);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   6. Menu + nút CTA "Đặt phòng"
   -----------------------------------------------------------------------
   Menu dọc kiểu Hills, nhưng chữ 16–17px, dòng thưa hơn, trạng thái đang xem
   rõ ràng (vạch màu bên trái + nền rất nhạt) thay vì chỉ in đậm.
   ----------------------------------------------------------------------- */
.main-navigation {
	border-top: 1px solid var(--border-sidebar-soft);
	font-size: var(--fs-nav);
}

.main-navigation ul li {
	border-top: 1px solid var(--border-sidebar-soft);
}

.main-navigation a {
	position: relative;
	padding: 0.8em 0.5em 0.8em 0.75em;
	border-radius: var(--radius-xs);
	font-weight: 500;
	line-height: 1.4;
	transition: color var(--t), background-color var(--t);
}

.main-navigation a:hover {
	background-color: var(--surface-sidebar);
	color: var(--text-on-sidebar);
}

/* Trạng thái đang xem: vạch màu bên trái, đậm hơn, nền nhạt. */
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a,
.main-navigation li.current-menu-parent > a {
	background-color: var(--surface-sidebar);
	color: var(--text-on-sidebar);
	font-weight: 700;
}

.main-navigation li.current-menu-item > a::before,
.main-navigation li.current-menu-ancestor > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	bottom: 0.6em;
	width: 3px;
	border-radius: var(--radius-pill);
	background-color: var(--primary-strong);
}

.main-navigation li li > a {
	padding-left: 1.6em;
	font-size: 0.95em;
	font-weight: 400;
}

/* Nút CTA cuối menu — nút hành động chính của cả sidebar. */
.main-navigation .menu-item-cta {
	border-top: 0;
}

.main-navigation .menu-item-cta > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 1.1em;
	padding: 0.7em 0.75em;
	background-color: var(--primary);
	border: 1px solid var(--primary-strong);
	border-radius: var(--radius-sm);
	color: var(--text-on-primary);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

.main-navigation .menu-item-cta > a::before {
	content: none;
}

.main-navigation .menu-item-cta > a:hover,
.main-navigation .menu-item-cta > a:focus {
	background-color: var(--bg-content);
	border-color: var(--bg-content);
	color: var(--bg-sidebar);
	transform: translateY(-1px);
}

.main-navigation .menu-item-cta.current-menu-item > a {
	background-color: var(--bg-content);
	border-color: var(--bg-content);
	color: var(--bg-sidebar);
}

/* Nút mở menu trên mobile luôn đủ lớn để bấm. */
.site-branding .menu-toggle {
	min-width: 3.6em;
	min-height: 3.6em;
	border-radius: var(--radius-sm);
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-sidebar);
	transition: background-color var(--t), border-color var(--t), color var(--t);
}

/* --------------------------------------------------------------------------
   6B. HEADER TRÊN ĐIỆN THOẠI — logo trái, nút menu phải, một hàng
   -----------------------------------------------------------------------
   Template Hills xếp header dọc: logo căn giữa, rồi nút menu đặt tuyệt đối ở
   đáy nên phải chừa `padding-bottom: 6em`. Kết quả là một mảng trống rất lớn
   trước nội dung — trên màn hình điện thoại đó là tài nguyên quý nhất.

   Ở đây ta bỏ hẳn cách đặt tuyệt đối đó (sửa đúng cấu trúc, không dùng margin
   âm để che) và chuyển header sang flex một hàng. Chiều cao còn ~80px.

   CHỈ áp dụng dưới 46.25em — đúng mốc mà template ẩn nút menu và chuyển
   sidebar sang cột trái. Từ 740px trở lên giao diện desktop KHÔNG đổi.
   ----------------------------------------------------------------------- */
@media screen and (max-width: 46.24em) {
	.site-branding {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		/* Thay cho 3em 2em 6em của template. */
		padding: 16px;
		border-bottom: 1px solid var(--border-sidebar-soft);
	}

	.site-branding.text h1.site-logo {
		flex: 0 1 auto;
		min-width: 0;
		margin: 0;
		text-align: left;
	}

	/* ★ bên trái, hai dòng chữ xếp chồng bên phải ngôi sao.
	   Dùng grid vì cả ba đều là con trực tiếp của thẻ <a>.
	   Selector phải đủ mạnh: style.css có `.site-branding h1 a { display:
	   inline-block }` với độ ưu tiên (0,1,2), cao hơn `.site-logo a` (0,1,1)
	   nên rule ngắn hơn sẽ bị thua bất kể thứ tự file. */
	.site-branding h1.site-logo a {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"star name"
			"star sub";
		align-items: center;
		column-gap: 10px;
	}

	.logo-star {
		grid-area: star;
		width: 34px;
		height: 34px;
		margin: 0;
		align-self: center;
	}

	.logo-line1 {
		grid-area: name;
		/* 24–27px: vẫn đọc rõ nhưng không chiếm hết hàng. */
		font-size: clamp(24px, 1.2vw + 19.7px, 27px);
		line-height: 1.15;
		white-space: nowrap;
	}

	.logo-line2 {
		grid-area: sub;
		margin-top: 2px;
		/* Chữ nhận diện thương hiệu, không phải nội dung cần đọc -> được phép
		   nhỏ hơn ngưỡng 14px của phần thân bài. */
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: 0.22em;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* Nút menu: thôi neo vào đáy header, đứng ngay bên phải cùng hàng với logo.
	   Vẫn phải là `relative` (KHÔNG phải `static`): icon ☰ được vẽ bằng
	   ::before đặt position:absolute, nếu nút mất position thì icon sẽ neo vào
	   .site-branding (đang position:relative) và rơi đè lên logo. */
	.site-branding .menu-toggle {
		position: relative;
		bottom: auto;
		left: auto;
		flex: 0 0 auto;
		width: 46px;
		height: 46px;
		min-width: 46px;
		min-height: 46px;
		margin: 0;
		font-size: 1em;
		border-radius: var(--radius-sm);
	}

	/* Vẽ lại icon ☰ cho khớp khung mới (template căn theo viền 4px double cũ). */
	.site-branding .menu-toggle::before {
		top: 0;
		left: 0;
		width: 100%;
		line-height: 44px;
		font-size: 26px;
	}

	.main-navigation {
		border-top: 0;
	}
}

/* --------------------------------------------------------------------------
   6C. MENU TRƯỢT (OFF-CANVAS) TRÊN ĐIỆN THOẠI
   -----------------------------------------------------------------------
   Trước đây menu xổ thẳng xuống dưới header, chiếm hết bề ngang và đẩy nội
   dung xuống. Nay nó là một panel trượt từ mép phải vào, rộng tối đa 320px,
   phía sau có nền mờ.

   Không thêm thư viện: chỉ `transform` + `transition`, JS chỉ bật/tắt class.

   CHỈ áp dụng dưới 46.25em. Từ 740px trở lên `.sidebar-inner` quay về đúng
   cột trái của template Hills — desktop KHÔNG đổi gì.
   ----------------------------------------------------------------------- */

/* Thanh "Menu ×" và nền mờ chỉ tồn tại trên điện thoại. */
.menu-backdrop,
.menu-panel-head {
	display: none;
}

@media screen and (max-width: 46.24em) {
	.menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 110;
		background: rgba(0, 0, 0, 0.42);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--t-slow), visibility 0s linear 240ms;
	}

	.menu-backdrop.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--t-slow), visibility 0s;
	}

	/* Panel. Luôn nằm trong DOM (không dùng display:none) để transform chạy
	   được; khi đóng thì visibility:hidden nên không bấm và không tab vào được. */
	.sidebar .sidebar-inner,
	.sidebar .sidebar-inner.toggled-on {
		display: block;
	}

	.sidebar .sidebar-inner {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 120;
		width: min(82vw, 320px);
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom));
		background-color: var(--bg-sidebar);
		box-shadow: -8px 0 28px rgba(0, 0, 0, 0.22);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--t-slow), visibility 0s linear 240ms;
	}

	.sidebar .sidebar-inner.toggled-on {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--t-slow), visibility 0s;
	}

	/* Khoá cuộn trang nền khi panel mở (JS thêm class này vào <body>). */
	body.menu-open {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	/* --- Đầu panel: "Menu" + nút đóng --- */
	.menu-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 4px 12px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--border-sidebar-soft);
	}

	.menu-panel-title {
		margin: 0;
		font-size: var(--fs-label);
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--text-muted-sidebar);
	}

	.menu-close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: 1px solid var(--border-sidebar-soft);
		border-radius: var(--radius-sm);
		background: transparent;
		color: var(--text-on-sidebar);
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		transition: background-color var(--t), border-color var(--t);
	}

	.menu-close:hover,
	.menu-close:focus {
		background-color: var(--surface-sidebar);
		border-color: var(--border-sidebar);
	}

	/* --- Danh sách menu: gọn, ít đường kẻ, dễ bấm --- */
	.main-navigation ul li {
		border-top: 0;
	}

	.main-navigation a {
		display: flex;
		align-items: center;
		min-height: 50px;
		padding: 12px 18px;
		border-left: 3px solid transparent;
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		font-weight: 500;
	}

	/* Trang đang xem: vạch accent bên trái + nền rất nhẹ, không phải khối lớn.
	   Mục cha (vd "Phòng & Bảng giá" khi đang xem một phòng con) chỉ nhận vạch
	   accent, KHÔNG tô nền — nếu không sẽ có hai hàng cùng sáng, rối mắt.
	   Thứ tự hai luật này quan trọng: khi đang ở đúng trang /phong thì thẻ đó
	   mang cả hai class, và luật `current-menu-item` đứng sau sẽ thắng. */
	.main-navigation li.current-menu-ancestor > a {
		border-left-color: var(--primary-strong);
		background-color: transparent;
	}

	.main-navigation li.current-menu-item > a {
		border-left-color: var(--primary-strong);
		background-color: var(--surface-sidebar);
	}

	/* Vạch cũ vẽ bằng ::before không còn cần — nay dùng border-left. */
	.main-navigation li.current-menu-item > a::before,
	.main-navigation li.current-menu-ancestor > a::before {
		content: none;
	}

	/* Danh sách phòng con: thụt vào, chữ nhỏ hơn một chút. */
	.main-navigation li li > a {
		min-height: 44px;
		padding-left: 36px;
		font-size: 0.95em;
		font-weight: 400;
	}

	.main-navigation ul.sub-menu.toggled-on {
		animation: hs-submenu var(--t-slow) both;
	}

	/* Nút mở/đóng danh sách phòng con — canh lại theo hàng menu mới. */
	.main-navigation li.menu-item-has-children .dropdown-toggle {
		top: 3px;
		right: 4px;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-sm);
	}

	.main-navigation li.menu-item-has-children .dropdown-toggle::after {
		width: 100%;
		line-height: 44px;
		font-size: 22px;
		top: 0;
		left: 0;
	}

	/* CTA "Đặt phòng" nổi bật hẳn so với mục menu thường. */
	.main-navigation .menu-item-cta > a {
		min-height: 52px;
		margin: 16px 0 0;
		border-left-width: 1px;
		border-radius: var(--radius-sm);
	}

	.main-navigation .menu-item-cta.current-menu-item > a {
		border-left-color: var(--bg-content);
	}

	/* Khối hotline cuối panel — gọn hơn bản desktop. */
	.sidebar-contact {
		margin-top: 18px;
		padding: 16px 14px;
	}

	.sidebar-hours {
		margin-bottom: 0.9em;
	}
}

@keyframes hs-submenu {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/*
 | Không có JavaScript thì không có gì bật/tắt được panel. Khi đó bỏ hẳn cơ chế
 | trượt và cho menu hiện thẳng dưới header — thà dài một chút còn hơn khách
 | không mở được menu.
 */
@media screen and (max-width: 46.24em) {
	.no-js .sidebar .sidebar-inner {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		visibility: visible;
		box-shadow: none;
		padding: 8px 16px 20px;
	}

	.no-js .menu-panel-head,
	.no-js .site-branding .menu-toggle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   7. HỆ THỐNG NÚT
   -----------------------------------------------------------------------
   Ba cấp, dùng thống nhất toàn website:
     .button.filled   — hành động chính  (Đặt phòng)
     .button          — hành động phụ    (Gọi ngay, Nhắn Zalo)
     .button.ghost    — hành động phụ mờ hơn (chưa dùng, để sẵn)
   Mọi nút cao tối thiểu 48px, bo góc 10px, chữ 16–17px, đậm 600.
   ----------------------------------------------------------------------- */
.content .button,
.content button,
.content input[type=submit] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px;
	padding: 0.6em 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--text-main);
	font-family: inherit;
	font-size: var(--fs-btn);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t), color var(--t),
	            transform var(--t), box-shadow var(--t);
}

.content .button:hover,
.content .button:focus,
.content button:hover,
.content button:focus,
.content input[type=submit]:hover {
	background-color: var(--surface-elevated);
	border-color: var(--text-light);
	color: var(--text-on-dark);
	transform: translateY(-1px);
}

.content .button:active,
.content button:active {
	transform: translateY(0);
}

/* Nút nhấn chính — màu primary của theme. */
.content .button.filled,
.content button.filled,
.content input[type=submit].filled {
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--text-on-primary);
	font-weight: 700;
	box-shadow: var(--shadow-soft);
}

.content .button.filled:hover,
.content .button.filled:focus,
.content button.filled:hover,
.content button.filled:focus,
.content input[type=submit].filled:hover {
	background-color: var(--primary-strong);
	border-color: var(--primary-strong);
	color: var(--text-on-primary);
	box-shadow: var(--shadow-lift);
}

.content .button .ico,
.content button .ico {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* Hàng nút dùng lại ở nhiều trang. */
.home-quick-actions,
.contact-actions,
.room-card-actions,
.price-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.home-quick-actions,
.contact-actions {
	margin-bottom: var(--space-desc);
}

.home-quick-actions .button,
.contact-actions .button {
	margin: 0;
}

/* Khối kêu gọi hành động cuối trang. */
.call-to-action {
	padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px);
	margin: var(--space-section) 0 0;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
	text-align: center;
}

.call-to-action .big {
	margin-bottom: 1.1em;
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.35;
	color: var(--text-main);
}

.call-to-action > :last-child {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 0;
}

.call-to-action > :last-child .button {
	margin: 0;
}

/* --------------------------------------------------------------------------
   8. Slider / hero ảnh — cuộn ngang bằng CSS scroll-snap, không cần thư viện
   -----------------------------------------------------------------------
   Hero cao hơn hẳn so với trước: 300px trên điện thoại, 440–500px trên
   desktop. Dùng chiều cao cố định + object-fit: cover nên ảnh thật của chủ
   nhà nghỉ luôn lấp đầy khung dù tỉ lệ gốc là gì.
   ----------------------------------------------------------------------- */
.hs-slider {
	display: block;          /* ghi đè display:none của owl gốc */
	position: relative;
	overflow: hidden;
	background-color: var(--bg-content-dark);
}

.hs-slider .owl-stage-outer {
	overflow: hidden;
}

.hs-slider .owl-stage {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hs-slider .owl-stage::-webkit-scrollbar {
	display: none;
}

.hs-slider .owl-item {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
	scroll-snap-align: start;
	float: none;
}

.hs-slider .owl-item img {
	display: block;
	width: 100%;
	height: var(--slide-h, 300px);
	object-fit: cover;
	background-color: var(--bg-content-dark);
}

/* Slider phụ (2 ảnh/khung ở trang danh sách phòng) thì thấp hơn. */
.hs-slider[style*="--slides-per-view: 2"] .owl-item img {
	--slide-h: 240px;
}

@media screen and (min-width: 46.25em) {
	.hs-slider .owl-item img { --slide-h: 440px; }
	.hs-slider[style*="--slides-per-view: 2"] .owl-item img { --slide-h: 300px; }
}

@media screen and (min-width: 68.75em) {
	.hs-slider .owl-item img { --slide-h: 500px; }
	.hs-slider[style*="--slides-per-view: 2"] .owl-item img { --slide-h: 330px; }
}

/* Chấm chỉ vị trí: vùng bấm 48px cho ngón tay, vạch màu bo tròn. */
.hs-slider .owl-dots {
	bottom: 0;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.hs-slider .owl-dots .owl-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 48px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	line-height: 0;
	cursor: pointer;
}

.hs-slider .owl-dots .owl-dot span {
	display: block;
	width: 24px;
	height: 4px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.5);
	transition: background-color var(--t), width var(--t);
}

.hs-slider .owl-dots .owl-dot:hover span {
	background-color: rgba(255, 255, 255, 0.8);
}

.hs-slider .owl-dots .owl-dot.active span {
	width: 34px;
	background-color: var(--accent);
	opacity: 1;
}

.hs-slider .owl-nav {
	display: none;
}

/* Không có JS thì ẩn chấm điều hướng (vuốt tay vẫn dùng được). */
.no-js .hs-slider .owl-dots {
	display: none;
}

@media screen and (min-width: 46.25em) {
	.hs-slider[style*="--slides-per-view: 2"] .owl-item {
		flex-basis: 50%;
	}
}

@media screen and (min-width: 59.6875em) {
	.hs-slider .owl-nav {
		display: block;
	}

	.hs-slider .owl-prev,
	.hs-slider .owl-next {
		width: 48px;
		height: 48px;
		padding: 0;
		margin-left: 0.5em;
		border: 0;
		border-radius: var(--radius-sm);
		background-color: rgba(0, 0, 0, 0.55);
		color: var(--text-on-dark);
		cursor: pointer;
		transition: background-color var(--t), color var(--t), transform var(--t);
	}

	.hs-slider .owl-prev:hover,
	.hs-slider .owl-next:hover,
	.hs-slider .owl-prev:focus,
	.hs-slider .owl-next:focus {
		background-color: var(--accent);
		color: var(--bg-content);
		transform: translateY(-1px);
	}

	.hs-slider .owl-prev[disabled],
	.hs-slider .owl-next[disabled] {
		opacity: 0.3;
		cursor: default;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   9. Khối tiện ích — lưới icon
   -----------------------------------------------------------------------
   Lưới thật (CSS grid) thay cho float của template: mobile 2 cột, tablet trở
   lên 3 cột × 2 hàng. Mỗi icon nằm trong một ô tròn nhạt cho gọn mắt.
   ----------------------------------------------------------------------- */
.amenities {
	margin-bottom: 0;
}

.amenities .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-grid);
	margin-left: 0;
	margin-right: 0;
}

.amenities .row > [class*="col-"] {
	width: auto;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

.amenities .feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	padding: clamp(16px, 1.6vw, 22px) 10px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	text-align: center;
	transition: background-color var(--t), border-color var(--t), transform var(--t);
}

.amenities .feature:hover {
	background-color: var(--surface-elevated);
	border-color: var(--border);
	transform: translateY(-2px);
}

.amenities .feature .ico-lg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 0.7em;
	padding: 12px;
	border-radius: var(--radius-pill);
	background-color: var(--accent-soft);
	color: var(--accent);
	box-sizing: border-box;
}

.amenities .feature p {
	margin-bottom: 0;
	font-size: var(--fs-nav);
	line-height: 1.35;
}

.amenities .feature strong {
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 34em) {
	.amenities .row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Cột nội dung hẹp lại ở tablet -> quay về 2 cột cho khỏi chật. */
@media screen and (min-width: 46.25em) and (max-width: 59.68em) {
	.amenities .row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (min-width: 59.6875em) {
	.amenities .row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   10. Bảng giá — dạng thẻ (pricing cards)
   -----------------------------------------------------------------------
   Mobile: các thẻ xếp dọc, KHÔNG phải kéo ngang.
   Desktop (>= 46.25em): hai thẻ nằm cạnh nhau và cao bằng nhau nhờ grid.
   Giá là thông tin khách cần nhất -> 24–30px, đậm 700, màu nhấn.
   ----------------------------------------------------------------------- */
.price-subtitle {
	margin-top: 0;
	margin-bottom: var(--space-desc);
	font-size: var(--fs-body);
	color: var(--text-light);
}

.price-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-grid);
	margin-bottom: var(--space-desc);
}

.price-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
	transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.price-card:hover {
	border-color: var(--border);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.price-card-head {
	padding: clamp(18px, 1.8vw, 24px) clamp(16px, 1.6vw, 22px);
	border-bottom: 1px solid var(--border-soft);
	background-color: var(--surface-elevated);
	text-align: center;
}

.price-card-name {
	margin: 0 0 0.35em;
	font-size: var(--fs-h4);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.015em;
}

.price-card-name a {
	color: var(--text-main);
	text-decoration: none;
	transition: color var(--t);
}

.price-card-name a:hover,
.price-card-name a:focus {
	color: var(--accent);
}

.price-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.3em;
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-light);
}

.price-card-meta .ico {
	color: var(--accent);
}

.price-card-meta span[aria-hidden] {
	margin: 0 0.3em;
	opacity: 0.5;
}

.price-row {
	padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.6vw, 22px);
	border-bottom: 1px solid var(--border-soft);
	text-align: center;
}

.price-row:last-of-type {
	border-bottom: 0;
}

.price-row-label {
	margin: 0 0 0.3em;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--text-light);
}

.price-row-value {
	margin: 0;
	line-height: 1.2;
}

.price-row-value strong {
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-price);
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.price-row-unit {
	display: inline-block;
	margin-left: 0.4em;
	font-size: var(--fs-small);
	color: var(--text-light);
	white-space: nowrap;
}

.price-row-sub {
	margin: 0.35em 0 0;
	font-size: var(--fs-small);
	color: var(--text-light);
}

/* Đẩy hàng nút xuống đáy để hai thẻ cân nhau trên desktop. */
.price-card-actions {
	justify-content: center;
	margin-top: auto;
	padding: clamp(16px, 1.6vw, 22px);
	border-top: 1px solid var(--border-soft);
	background-color: var(--surface-elevated);
}

.price-card-actions .button {
	flex: 1 1 auto;
	margin: 0;
}

.price-note {
	max-width: var(--measure);
	margin-bottom: 0;
	color: var(--text-light);
}

/* Ba khối giá ở trang chi tiết phòng — cùng dữ liệu, xếp ngang trên desktop. */
.price-blocks {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-grid);
	margin-bottom: var(--space-desc);
}

.price-block {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2vw, 26px) clamp(16px, 1.6vw, 22px);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
	text-align: center;
	transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.price-block:hover {
	border-color: var(--border);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.price-block-label {
	margin: 0 0 0.4em;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--text-light);
}

.price-block-value {
	margin: 0;
	line-height: 1.2;
}

.price-block-value strong {
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-price);
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	letter-spacing: -0.01em;
}

/* margin-top:auto đẩy nút xuống đáy -> ba khối cao bằng nhau mà phần giá vẫn
   thẳng hàng ở trên cùng (justify-content:space-between sẽ làm lệch giá khi
   số dòng ghi chú của mỗi khối khác nhau). Khoảng hở tối thiểu dùng padding
   để không bị margin:auto ghi đè. */
.price-block-cta {
	margin: auto 0 0;
	padding-top: 1.2em;
}

.price-block-cta .button {
	width: 100%;
	margin: 0;
}

@media screen and (min-width: 46.25em) {
	.price-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.price-blocks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Màn hình rất hẹp (360px): giá vẫn giữ nguyên cỡ 24px — đây là thông tin
   khách cần nhất. Thay vì thu nhỏ chữ, ta cho đơn vị xuống dòng riêng và cho
   nút chiếm hết bề ngang. */
@media screen and (max-width: 26em) {
	.price-row-unit {
		display: block;
		margin-left: 0;
	}

	.price-card-actions .button,
	.room-card-actions .button,
	.home-quick-actions .button,
	.contact-actions .button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   11. Thẻ phòng
   -----------------------------------------------------------------------
   Thẻ thật (nền + viền + bo góc) thay cho khối ngăn bằng đường 4px double.
   Ảnh lớn hơn, tiêu đề 23–28px, giá "từ" nổi bật.
   ----------------------------------------------------------------------- */
.room-list {
	display: grid;
	gap: var(--gap-grid);
	margin-bottom: 0;
}

.room-card {
	overflow: hidden;
	margin-bottom: 0;
	padding-bottom: 0;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
	transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.room-card:hover {
	border-color: var(--border);
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.room-list > .room-card:last-child {
	border-bottom: 1px solid var(--border-soft);
	padding-bottom: 0;
	margin-bottom: 0;
}

.room-card-media {
	display: block;
	margin-bottom: 0;
	overflow: hidden;
	background-color: var(--bg-content-dark);
}

.room-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 210px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--bg-content-dark);
	transition: transform var(--t-slow);
}

.room-card:hover .room-card-media img {
	transform: scale(1.025);
}

.room-card-body {
	padding: clamp(20px, 2vw, 28px);
}

.room-card-title {
	margin-bottom: 0.3em;
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.room-card-title a {
	text-decoration: none;
	color: var(--text-main);
	transition: color var(--t);
}

.room-card-title a:hover,
.room-card-title a:focus {
	color: var(--accent);
}

.room-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45em;
	margin-bottom: 0.9em;
	color: var(--accent);
}

.room-card-price strong {
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-price-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.room-card-price .from {
	font-size: var(--fs-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--text-light);
}

.room-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.15em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	color: var(--text-light);
}

.room-specs li {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.room-specs .ico {
	color: var(--accent);
	flex: 0 0 auto;
}

.room-specs-lg {
	font-size: var(--fs-nav);
	margin-bottom: var(--space-title);
}

.room-card-desc {
	max-width: var(--measure);
	margin-bottom: 1.2em;
	color: var(--text-light);
}

.room-card-actions {
	margin-bottom: 0;
}

.room-card-actions .button {
	margin: 0;
}

@media screen and (min-width: 46.25em) {
	.room-card {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		gap: 0;
		align-items: stretch;
	}

	/* Ảnh lấp đầy đúng chiều cao cột chữ bên cạnh: dùng position tuyệt đối
	   thay cho height:100% — cách này chắc chắn ở mọi trình duyệt vì chiều
	   cao hàng lưới do cột chữ quyết định. */
	.room-card-media {
		position: relative;
		min-height: 250px;
	}

	.room-card-media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
	}
}

/* Ở trang chủ hiển thị gọn hơn. */
.room-list-compact .room-card-desc {
	display: none;
}

.breadcrumb {
	margin-bottom: var(--space-title);
	font-size: var(--fs-small);
	color: var(--text-light);
}

.breadcrumb span[aria-hidden] {
	margin: 0 0.35em;
	opacity: 0.5;
}

.back-link {
	margin-top: var(--space-section);
	margin-bottom: 0;
}

.pricing-table .price-item .price-tag {
	color: var(--accent);
}

.pricing-table .price-item .price-title {
	font-size: var(--fs-h4);
}

/* --------------------------------------------------------------------------
   12. Thư viện ảnh + bộ lọc + lightbox
   -----------------------------------------------------------------------
   Bộ lọc: chip bo tròn hiện đại. Lưới: CSS grid có khoảng cách và ảnh bo góc,
   thay cho float sát nhau của template gốc.
   ----------------------------------------------------------------------- */
.gallery-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--space-desc);
}

.content .gallery-filter .button {
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--text-light);
	font-size: var(--fs-small);
	font-weight: 600;
	box-shadow: none;
}

.content .gallery-filter .button:hover,
.content .gallery-filter .button:focus {
	background-color: var(--surface-elevated);
	border-color: var(--border);
	color: var(--text-on-dark);
	transform: none;
}

.content .gallery-filter .button.active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--bg-content);
	box-shadow: var(--shadow-soft);
}

.content .gallery-filter .button.active:hover,
.content .gallery-filter .button.active:focus {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--bg-content);
}

/* Lưới ảnh. Khối .gallery nằm ngoài .content-inner nên tự chèn lề ngang. */
.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0 auto var(--space-section);
	padding: 0 clamp(16px, 2vw, 24px);
}

.gallery.no-bottom {
	margin-bottom: var(--space-section);
}

/* Lưới ảnh nằm bên trong .content-inner (trang chi tiết phòng) thì không
   cần lề ngang riêng nữa. */
.content-inner .gallery {
	padding: 0;
	margin-bottom: 0;
}

.gallery .gallery-item {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.gallery .gallery-item a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-img);
	background-color: var(--bg-content-dark);
}

.gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--bg-content-dark);
	transition: transform var(--t-slow), opacity var(--t);
}

.gallery .gallery-item a:hover img,
.gallery .gallery-item a:focus img {
	opacity: 0.9;
	transform: scale(1.03);
}

@media screen and (min-width: 46.25em) {
	.gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
		padding-left: clamp(24px, 2.6vw, 44px);
		padding-right: clamp(24px, 2.6vw, 44px);
	}
}

.gallery-empty {
	margin-top: 1em;
	color: var(--text-light);
}

/* Lightbox tự viết — nhẹ, có phím tắt và vuốt trên mobile. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 15, 15, 0.94);
	padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.lightbox[hidden] {
	display: none;
}

.lightbox-figure {
	max-width: 92vw;
	max-height: 84vh;
	margin: 0;
	text-align: center;
}

.lightbox-figure img {
	max-width: 92vw;
	max-height: 74vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-img);
	object-fit: contain;
}

.lightbox-caption {
	margin-top: 0.85em;
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.85);
}

.lightbox button {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.45);
	color: var(--text-on-dark);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t), color var(--t);
}

.lightbox button:hover,
.lightbox button:focus {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg-content);
}

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev  { left: 0.5rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-count {
	position: absolute;
	left: 0;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	width: 100%;
	text-align: center;
	font-size: var(--fs-small);
	color: rgba(255, 255, 255, 0.7);
}

body.lightbox-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. Form đặt phòng
   -----------------------------------------------------------------------
   Ưu tiên số một là dễ dùng: form nằm trong một thẻ rõ ràng, nhãn 16px đậm,
   ô nhập cao 52px có viền và nền riêng (không còn kiểu gạch chân mảnh), chữ
   trong ô ≥16px để iPhone không tự phóng to trang khi bấm vào ô.
   ----------------------------------------------------------------------- */
.booking-form {
	padding: clamp(20px, 2.6vw, 36px) clamp(16px, 2vw, 32px);
	margin-bottom: 0;
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
}

@media screen and (min-width: 46.25em) {
	.booking-form {
		padding: clamp(28px, 2.6vw, 36px);
	}
}

.booking-form .field {
	margin-bottom: 0;
	padding-bottom: 20px;
}

.booking-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--text-main);
	font-size: var(--fs-input);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.booking-form .req {
	color: var(--accent);
}

/* Ô nhập trong vùng nội dung tối. */
.content input[type=text],
.content input[type=password],
.content input[type=email],
.content input[type=search],
.content input[type=number],
.content input[type=tel],
.content input[type=url],
.content input[type=date],
.content input[type=time],
.content textarea,
.content select {
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--bg-content-dark);
	color: var(--text-main);
	font-family: inherit;
	/* >= 16px: iPhone không tự phóng to trang khi bấm vào ô. */
	font-size: var(--fs-input);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--t), background-color var(--t), box-shadow var(--t);
}

.content input[type=text]:hover,
.content input[type=email]:hover,
.content input[type=tel]:hover,
.content input[type=date]:hover,
.content input[type=time]:hover,
.content textarea:hover,
.content select:hover {
	border-color: var(--text-light);
}

.content input[type=text]:focus,
.content input[type=password]:focus,
.content input[type=email]:focus,
.content input[type=search]:focus,
.content input[type=number]:focus,
.content input[type=tel]:focus,
.content input[type=url]:focus,
.content input[type=date]:focus,
.content input[type=time]:focus,
.content textarea:focus,
.content select:focus {
	border-color: var(--accent);
	background-color: var(--bg-content-dark);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

.content textarea {
	min-height: 124px;
	padding-top: 12px;
	line-height: 1.6;
	resize: vertical;
}

.content ::placeholder {
	color: var(--text-light);
	opacity: 0.65;
}

/* Icon lịch/đồng hồ mặc định của Chrome rất tối trên nền đen. */
.content input[type=date]::-webkit-calendar-picker-indicator,
.content input[type=time]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.75;
	cursor: pointer;
}

.content select option {
	background-color: var(--bg-content-dark);
	color: var(--text-main);
}

/* Mũi tên cho <select> (appearance:none đã xoá mũi tên mặc định). */
.content select {
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 0.8em auto;
}

.field-hint {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: var(--fs-small);
	color: var(--text-light);
}

.field-error {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--danger);
}

.field-error[hidden] {
	display: none;
}

[aria-invalid="true"] {
	border-color: var(--danger) !important;
}

/* Trường bẫy bot — ẩn khỏi mắt người dùng nhưng vẫn tồn tại với bot. */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-alert {
	padding: 1em 1.15em;
	margin-bottom: var(--space-desc);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	line-height: 1.55;
}

.form-alert[hidden] {
	display: none;
}

.form-alert[data-type="success"] {
	border-color: var(--accent);
	background-color: var(--accent-soft);
	color: var(--text-main);
}

.form-alert[data-type="error"] {
	border-color: var(--danger);
	background-color: rgba(224, 120, 95, 0.14);
	color: var(--text-main);
}

.form-submit {
	margin-top: 8px;
	padding-bottom: 0;
}

.content .form-submit .button,
.content .form-submit button {
	min-height: 54px;
	margin-bottom: 14px;
	padding: 0.7em 28px;
	font-size: var(--fs-btn);
}

/* Trên điện thoại nút gửi chiếm hết bề ngang cho dễ bấm. */
@media screen and (max-width: 46.24em) {
	.content .form-submit .button,
	.content .form-submit button {
		width: 100%;
	}
}

button[data-submit-btn][disabled] {
	opacity: 0.6;
	cursor: progress;
}

.form-foot {
	margin-bottom: 0;
	font-size: var(--fs-small);
	color: var(--text-light);
}

/* --------------------------------------------------------------------------
   14. Bản đồ & liên hệ
   -----------------------------------------------------------------------
   Bản đồ dùng chiều cao cố định thay tỉ lệ khung: cần đủ cao để nhìn ra đường.
   ----------------------------------------------------------------------- */
.featured-map {
	position: relative;
	width: 100%;
	height: 320px;
	max-width: 100%;
	overflow: hidden;
	background-color: var(--bg-content-dark);
}

.featured-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border: 0;
}

@media screen and (min-width: 46.25em) {
	.featured-map {
		height: 420px;
	}
}

/* Dải nút "Mở chỉ đường" ngay dưới bản đồ. */
.map-directions-bar {
	margin: 0;
	padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 24px) 0;
	background-color: var(--bg-content);
}

.map-directions-bar .button {
	margin: 0;
}

@media screen and (min-width: 46.25em) {
	.map-directions-bar {
		padding-left: clamp(24px, 2.6vw, 44px);
		padding-right: clamp(24px, 2.6vw, 44px);
	}
}

.map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 1.5em;
	text-align: center;
	color: var(--text-light);
}

.map-placeholder .ico-lg {
	color: var(--accent);
	margin-bottom: 0.5em;
}

.map-placeholder p {
	margin-bottom: 0.4em;
}

.map-placeholder code {
	font-size: var(--fs-small);
	color: var(--accent);
}

/* Ba cột thông tin liên hệ. */
.contact-info {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-grid);
	margin-left: 0;
	margin-right: 0;
	margin-bottom: var(--space-desc);
}

.contact-info > [class*="col-"] {
	width: auto;
	float: none;
	padding: clamp(18px, 1.8vw, 24px);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
}

.contact-info h3 {
	margin-bottom: 0.4em;
	font-size: var(--fs-h4);
}

.contact-info .contact-address-info {
	padding: 0;
	margin-bottom: 0;
	font-size: var(--fs-small);
	color: var(--text-light);
}

.contact-address-info .ico {
	color: var(--accent);
}

@media screen and (min-width: 46.25em) {
	.contact-info {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   15. Footer
   -----------------------------------------------------------------------
   Trước đây chữ footer nhỏ và mờ. Nay 15–16px, tương phản cao, hotline nổi
   bật, và trên desktop ba mục xếp thành một hàng gọn.
   ----------------------------------------------------------------------- */
#footer {
	padding: clamp(24px, 2.4vw, 34px) clamp(16px, 2vw, 28px);
	font-size: var(--fs-footer);
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-light);
	text-align: center;
}

#footer,
#footer a {
	color: var(--text-light);
}

#footer a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--t);
}

#footer a:hover,
#footer a:focus {
	color: var(--accent-hover);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: var(--fs-footer);
	color: var(--text-on-dark);
}

.footer-contact span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.footer-contact .ico {
	color: var(--accent);
	flex: 0 0 auto;
}

.footer-contact a {
	color: var(--accent);
	font-weight: 700;
	white-space: nowrap;
}

#footer .copyright {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--fs-small);
	color: var(--text-light);
	opacity: 1;
}

@media screen and (min-width: 46.25em) {
	.footer-contact {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 28px;
		margin-bottom: 14px;
	}

	#footer .copyright {
		display: block;
		margin-left: 0;
		padding: 12px 0 0;
	}
}

/* --------------------------------------------------------------------------
   16. Thanh CTA cố định trên mobile
   -----------------------------------------------------------------------
   GỌI · ZALO · CHỈ ĐƯỜNG · ĐẶT PHÒNG. Cao 60px, icon 22px, có safe-area cho
   iPhone. Body được chèn padding-bottom đúng bằng chiều cao thanh này.
   ----------------------------------------------------------------------- */
.mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background-color: var(--bg-content-dark);
	border-top: 1px solid var(--border-soft);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.38);
}

.mobile-cta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 60px;
	padding: 8px 4px;
	color: var(--text-on-dark);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--t);
}

.mobile-cta-item .ico {
	width: 22px;
	height: 22px;
	color: var(--accent);
	vertical-align: baseline;
}

.mobile-cta-item:active {
	background-color: rgba(255, 255, 255, 0.1);
}

.mobile-cta-item.primary {
	background-color: var(--accent);
	color: var(--bg-content);
	font-weight: 700;
}

.mobile-cta-item.primary .ico {
	color: var(--bg-content);
}

@media screen and (min-width: 25em) {
	.mobile-cta-item {
		font-size: 14.5px;
	}
}

/* Chừa chỗ để thanh CTA không che nội dung/footer. */
@media screen and (max-width: 46.24em) {
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}
}

/* Từ tablet trở lên: menu đã luôn hiện, không cần thanh CTA. */
@media screen and (min-width: 46.25em) {
	.mobile-cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   17. Accessibility & chuyển động
   ----------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.sidebar a:focus-visible,
.sidebar button:focus-visible {
	outline-color: var(--primary-strong);
}

/* Vùng bấm tối thiểu 44px trên thiết bị cảm ứng (chuẩn iOS/Android). */
@media (pointer: coarse) {
	.content .button,
	.content button,
	.content input[type=submit],
	.main-navigation a,
	.sidebar .button {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.main-navigation a {
		justify-content: flex-start;
	}

	/* Số điện thoại trong phần liên hệ là nút "gọi" thực sự -> cần bấm dễ. */
	.contact-address-info a,
	.footer-contact a,
	.form-foot a {
		display: inline-block;
		padding: 0.35em 0;
	}

	.content ul.disc li {
		margin-bottom: 0.6em;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.price-card:hover,
	.price-block:hover,
	.room-card:hover,
	.amenities .feature:hover,
	.content .button:hover,
	.room-card:hover .room-card-media img,
	.gallery .gallery-item a:hover img {
		transform: none;
	}

	.hs-slider .owl-stage {
		scroll-behavior: auto;
	}
}

/* In ấn: bỏ phần điều hướng, giữ nội dung. */
@media print {
	.sidebar,
	.mobile-cta,
	.owl-nav,
	.owl-dots,
	.skip-link {
		display: none !important;
	}

	.content {
		background: #fff !important;
		color: #000 !important;
	}
}

/* --------------------------------------------------------------------------
   18. Áp dụng biến theme lên phần CSS gốc của template Hills
   -----------------------------------------------------------------------
   style.css (template gốc) ghi màu cứng ở một số chỗ. Template gốc dùng cách
   nạp thêm file style-scheme1.css / style-scheme2.css bằng jQuery để đổi màu.
   Ở đây ta thay cơ chế đó bằng biến CSS: cùng một danh sách selector, nhưng
   không cần tải thêm file, không nhấp nháy màu và không cần JavaScript.
   ----------------------------------------------------------------------- */
.tab-container .tabs li.active:after {
	background-color: var(--bg-content);
}

.site-branding .menu-toggle.toggle-on {
	color: var(--bg-sidebar);
}

.pricing-table .special {
	border-color: var(--primary);
}

.pricing-table .special .price-title,
.pricing-table .special .price-tag {
	border-color: var(--primary);
}

.pricing-table .special .price-title {
	background-color: var(--primary);
	color: var(--text-on-primary);
}

a.social-link:focus,
a.social-link:hover {
	color: var(--text-on-primary);
	background-color: var(--primary);
	border-color: var(--primary);
}

/* Ô nhập liệu báo sai định dạng — dùng màu danger của theme. */
.content input:focus:invalid,
.content textarea:focus:invalid {
	border-color: var(--danger);
}

/* Nút mở menu trên mobile: viền/chữ ăn theo màu chữ sidebar. */
.site-branding .menu-toggle {
	color: var(--text-on-sidebar);
}

/* Khối nhấn nhẹ trong sidebar (dành sẵn cho các thành phần V2). */
.sidebar .box-soft {
	background-color: var(--bg-sidebar-soft);
}

/* Khối .alert / .box của template — bo góc theo hệ mới. */
.alert,
.box {
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   19. Bảng chọn theme (CHỈ hiện khi 'theme_switcher' => true)
   -----------------------------------------------------------------------
   Không bao giờ hiển thị trên production — xem app/views/partials/theme-switcher.php
   ----------------------------------------------------------------------- */
.theme-switcher {
	position: fixed;
	left: 0.75rem;
	bottom: 0.75rem;
	z-index: 95;
	padding: 0.8rem 0.9rem;
	background: var(--bg-content-dark);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-main);
	font-size: 0.85rem;
	max-width: 15rem;
}

.theme-switcher-title {
	margin: 0 0 0.5em;
	font-weight: 600;
	line-height: 1.3;
}

.theme-switcher-title span {
	display: block;
	font-weight: 400;
	color: var(--text-light);
}

.theme-switcher-item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0;
	color: var(--text-main);
	text-decoration: none;
}

.theme-switcher-item.is-active {
	color: var(--accent);
	font-weight: 600;
}

.theme-swatch {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	border: 1px solid var(--border);
	border-radius: 3px;
	background: linear-gradient(135deg, var(--bg-sidebar) 50%, var(--primary) 50%);
}

/* Ô màu hiển thị đúng bảng màu của theme mà nó đại diện. */
[data-theme-preview="hanoi-warm"] .theme-swatch { background: linear-gradient(135deg, #f5ecd8 50%, #d9bd80 50%); }
[data-theme-preview="emerald"]    .theme-swatch { background: linear-gradient(135deg, #eef4ee 50%, #6fcfa4 50%); }
[data-theme-preview="terracotta"] .theme-swatch { background: linear-gradient(135deg, #f8ece2 50%, #e79a72 50%); }
[data-theme-preview="ocean"]      .theme-swatch { background: linear-gradient(135deg, #ecf2f7 50%, #7fc8ea 50%); }

@media screen and (max-width: 46.24em) {
	.theme-switcher {
		bottom: calc(60px + env(safe-area-inset-bottom) + 0.5rem);
	}
}

/* --------------------------------------------------------------------------
   20. Khối thông tin nhận diện ở trang Liên hệ
   ----------------------------------------------------------------------- */
.contact-identity {
	padding: clamp(20px, 2.2vw, 28px);
	margin-bottom: var(--space-desc);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	background-color: var(--surface);
	box-shadow: var(--shadow-soft);
}

.contact-identity-name {
	margin-bottom: 0.4em;
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-main);
}

.contact-identity-address {
	margin-bottom: 0.6em;
	color: var(--text-main);
	/* Địa chỉ dài -> cho xuống dòng tự nhiên, không tràn ngang trên mobile. */
	overflow-wrap: break-word;
}

.contact-identity-phone {
	margin-bottom: 0;
	font-family: 'Bitter', Georgia, serif;
	font-size: var(--fs-phone);
	font-weight: 700;
	line-height: 1.25;
}

.contact-identity-phone a {
	display: inline-block;
	text-decoration: none;
	white-space: nowrap;
}

.contact-identity-phone a:hover,
.contact-identity-phone a:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.contact-identity .ico {
	color: var(--accent);
}