/*
 * MAREA engine CSS: reset + hành vi. KHÔNG chứa màu, font, kích thước nhìn thấy được:
 * những thứ đó nằm trong Elementor (Global Classes, Variables, style từng element).
 * Móc hành vi bằng thuộc tính data-marea="…" (gắn qua Attributes của element atomic).
 */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: #fff;
	color: #162b66;
	font-family: "Public Sans", system-ui, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

[hidden] {
	display: none !important;
}

.marea-main {
	display: block;
}

/*
 * Div block atomic vẫn mang class .e-con của container V3 → bị ép width:100% (biến --width).
 * Trả về auto như CSS thường: trong cột flex vẫn giãn hết bề ngang, trong hàng thì ôm nội dung.
 * Element nào cần bề rộng cụ thể thì đặt width trong style của nó (ưu tiên cao hơn).
 */
.e-con.e-div-block-base {
	--width: auto;
}

/* SVG atomic in nội tuyến: để block cho khỏi dính khoảng chân chữ (cao dư ~4px). */
.e-svg-base > svg {
	display: block;
}

/* Header dính trên cùng: phải là wrapper của theme (template Elementor nằm trong khối thấp). */
.marea-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .marea-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .marea-site-header {
		top: 46px;
	}
}

.marea-skip {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	padding: 8px 12px;
	background: #fff;
	color: #162b66;
}

.marea-skip:focus {
	top: 8px;
}

.marea-fallback-brand {
	display: block;
	padding: 18px 20px;
	font: 28px/36px Prata, serif;
	color: inherit;
	text-decoration: none;
}

/* Hàng cuộn ngang (tablet/mobile): ẩn thanh cuộn, bắt điểm dừng theo từng ô. */
[data-marea~="scroll"] {
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

[data-marea~="scroll"]::-webkit-scrollbar {
	display: none;
}

[data-marea~="scroll"] > * {
	scroll-snap-align: start;
}

/* Ảnh atomic: luôn lấp khung (khung do class/style của element quyết định). */
img[data-marea~="cover"] {
	display: block;
}

/*
 * Ẩn/hiện do hành vi quyết định (menu, FAQ) dùng !important: CSS atomic của Elementor
 * (.elementor .e-div-block-base{display:block}, độ ưu tiên cao hơn, nạp sau) không được đè trạng thái đóng.
 */

/* FAQ: câu trả lời đóng mặc định; trong Elementor editor mở hết để sửa chữ. */
[data-marea~="faq"]:not(.is-open) [data-marea~="faq-a"] {
	display: none !important;
}

[data-marea~="faq-q"] {
	cursor: pointer;
}

body.elementor-editor-active [data-marea~="faq"] [data-marea~="faq-a"] {
	display: block !important;
}

/* Menu mobile: panel phủ dưới thanh điều hướng, chỉ mở được ở mobile. */
[data-marea~="menu-panel"] {
	display: none !important;
}

@media (max-width: 743px) {
	.marea-menu-open [data-marea~="menu-panel"] {
		display: flex !important;
	}

	.marea-menu-open body {
		overflow: hidden;
	}
}

/* Chỉ bung panel menu khi đang sửa chính template header trong Elementor. */
body.elementor-editor-active .elementor-edit-area-active [data-marea~="menu-panel"] {
	display: flex !important;
	position: static !important;
	height: auto !important;
}

/* Tiêu đề có <br> cho desktop/mobile nhưng tablet đủ chỗ 1 dòng (Figma frame 834). */
@media (min-width: 744px) and (max-width: 1023px) {
	[data-marea~="nobr-tablet"] br {
		display: none;
	}
}

/* Thanh đặt phòng cố định đáy (mobile): chừa chỗ để không che footer. */
@media (max-width: 743px) {
	body:has([data-marea~="mobile-bar"]) {
		padding-bottom: 82px;
	}
}

/*
 * Form (Plan your stay, newsletter): theme.js chèn <input class="marea-input"> vào paragraph "Placeholder"/"Value",
 * ô nhập kế thừa chữ + màu của paragraph đó (sửa trong Elementor). Viền/màu lỗi lấy từ biến Elementor.
 */
.marea-input {
	display: block;
	width: 100%;
	min-width: 0;
	height: 1lh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.marea-input::placeholder {
	color: inherit;
	opacity: 1;
}

[data-marea~="field-control"],
[data-marea~="newsletter-field"] {
	cursor: text;
}

[data-marea~="field-control"]:focus-within,
[data-marea~="newsletter-field"]:focus-within {
	outline: 2px solid var(--marea-brand, #2448c8);
	outline-offset: 2px;
}

/* Đã bấm Continue mà thiếu: mọi ô viền 1.5px, ô sai viền đỏ (Figma "… / error"). */
[data-marea~="enquiry"].is-checked [data-marea~="field-control"] {
	border-width: 1.5px !important;
}

[data-marea~="field"].is-invalid [data-marea~="field-control"] {
	border-color: var(--marea-error, #a6322c) !important;
}

/* Khối báo lỗi, câu lỗi từng ô, phần "Your enquiry is ready": ẩn tới khi theme.js bật; trong editor hiện hết để sửa. */
body:not(.elementor-editor-active) [data-marea~="form-error"]:not(.is-shown),
body:not(.elementor-editor-active) [data-marea~="field-error"]:not(.is-shown),
body:not(.elementor-editor-active) [data-marea~="enquiry"]:not(.is-sent) [data-marea~="enquiry-done"],
body:not(.elementor-editor-active) [data-marea~="enquiry"].is-sent [data-marea~="enquiry-main"] {
	display: none !important;
}

[data-marea~="enquiry-done-heading"]:focus {
	outline: none;
}

/*
 * Hiệu ứng theo cuộn của mgk-motion (scroll.parallax, reveal.mask) chạy bằng view(): khung cha overflow:hidden
 * biến thành vùng cuộn, view() bám vào khung đó nên ảnh đứng yên. overflow:clip cắt y hệt mà không tạo vùng cuộn
 * (Elementor 4.1.4 chỉ cho chọn visible / hidden / auto).
 */
:is(section, div):has(> [data-mgk*="scroll.parallax"]),
.marea-photo-frame {
	overflow: clip !important;
}

/* hidden cho khung min-size tự động = 0 (vùng cuộn); clip thì không → khung flex / aspect-ratio bị ảnh kéo cao
   theo tỉ lệ gốc (ảnh dọc 768×1152 kéo khung 280 thành 864px). Trả về 0 như cũ. Phải thắng .e-con của Elementor
   (min-width 30px, min-height auto, nạp sau theme.css); style riêng của element vẫn đè được vì in sau. */
.e-con.marea-photo-frame {
	min-width: 0;
	min-height: 0;
}

/* Cuộn mượt (Lenis) tự nội suy vị trí: tắt smooth gốc của trình duyệt kẻo 2 lớp làm mượt giật nhau. */
html.lenis {
	scroll-behavior: auto;
}