/**
 * Giao diện mobile / tablet (dưới 1280px).
 *
 * Tải sau cùng nên ghi đè được các file khác. Bố cục desktop (dạng tranh, tọa độ theo thiết kế 1920)
 * được chuyển sang bố cục xếp chồng theo dòng chảy.
 */

/* Mặc định (desktop) ẩn các phần chỉ dùng cho mobile */
.project__stats-plain,
.products__select-wrap,
.news__nav {
	display: none;
}

.products__select {
	width: 100%;
	height: 3.25rem;
	padding: 0 3rem 0 1rem;
	border: 1px solid #edd3c3;
	border-radius: 2px;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee4623' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1.25rem no-repeat;
	color: var(--color-brown-dark);
	font-family: var(--font-title);
	font-size: 1.375rem;
	appearance: none;
	cursor: pointer;
}

.products__select:focus-visible {
	outline: 2px solid var(--color-gradient-end);
	outline-offset: 2px;
}

@media (max-width: 1279.98px) {
	/* ------------------------------------------------------------------
	 * Cỡ chữ tiêu đề nhỏ lại cho màn hẹp (28px ở 360 → 42px ở ~790)
	 * ---------------------------------------------------------------- */
	:root {
		/* tiêu đề: 30px ở 360 → 46px ở ~790 (vừa để không ngắt chữ lẻ) */
		--fs-h2: clamp(1.875rem, 1.0375rem + 3.72vw, 2.875rem);
		--fs-h2-sm: clamp(1.625rem, 0.945rem + 3.023vw, 2.4375rem);
		--header-height: 3.5rem; /* nút ☰ sát mép trên hơn */
	}

	/* ------------------------------------------------------------------
	 * (1) Header: nút ☰ bên trái, nút "Để lại thông tin tư vấn" bên phải (header.css);
	 *     khi cuộn chỉ 2 nút hiện (nút ☰ có nền trắng bo góc), không có thanh nền
	 * ---------------------------------------------------------------- */
	.site-header__toggle {
		border-radius: 8px;
		transition: background-color var(--duration) var(--ease);
	}
}

@media (max-width: 1279.98px) {

	.site-header.is-scrolled:not(.is-open) {
		background-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.site-header.is-scrolled .site-header__toggle,
	.site-header.is-open .site-header__toggle {
		background-color: var(--color-white);
	}

	.floating-contact {
		--fc-size: 2.5rem;

		top: auto;
		right: var(--page-gutter);
		bottom: 1.5rem;
		left: auto;
	}

	/* ------------------------------------------------------------------
	 * (5) Tâm điểm giao thương: tiêu đề phía trên, bản đồ bên dưới (không đè)
	 * ---------------------------------------------------------------- */
	.location__stage {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
	}

	.location__title {
		position: static;
		order: -1;
		width: auto;
		min-width: 0;
		padding: var(--section-space) var(--page-gutter) var(--space-md);
	}

	.location__map {
		position: relative;
		width: 100%;
		height: auto;
	}

	/* các mốc khoảng cách: ngay dưới tiêu đề, trên bản đồ */
	.location__groups {
		order: -1;
	}

	.location__button {
		align-self: center;
	}

	/* ------------------------------------------------------------------
	 * (6) Sản phẩm: chọn tòa bằng danh sách thả xuống
	 * ---------------------------------------------------------------- */
	.products__tabs {
		display: none;
	}

	.products__select-wrap {
		display: block;
		margin-top: var(--space-md);
	}

	/* ------------------------------------------------------------------
	 * Sản phẩm: cỡ chữ thẻ căn hộ theo cỡ chung của trang
	 * ---------------------------------------------------------------- */
	.pcard__name {
		font-size: var(--fs-lg);
	}

	.pcard__area {
		font-size: var(--fs-xs);
	}

	.pcard__text {
		font-size: var(--fs-base);
		line-height: var(--lh-body);
	}

	.pcard__button {
		height: 2.75rem;
		font-size: var(--fs-title-xs);
	}

	/* ------------------------------------------------------------------
	 * Hồ sơ bớt khó: 5 ô có lề trong rộng hơn
	 * ---------------------------------------------------------------- */
	.mcard {
		min-height: 0; /* xếp 1 cột: ô cao theo nội dung, không thừa khoảng trống */
		padding-inline: 1.5rem;
	}

	/* ------------------------------------------------------------------
	 * Ảnh nền các khối neo ở đáy thay vì đầu
	 * ---------------------------------------------------------------- */
	.home-body::before,
	.home-lower::before {
		background-position: center bottom;
	}

	/* Nền phần Hồ sơ + Tin tức có màu nền đặc bên dưới ảnh: che vùng trắng của ảnh nền chung
	   (khi bố cục xếp chồng, vùng trắng của bản đồ trong ảnh ghép rơi đúng vào khu vực này) */
	.home-lower::before {
		background-color: var(--color-bg);
	}

	.contact::before {
		background-position: center bottom;
	}

	.site-footer {
		background-position: center bottom, 0 0;
	}

	/* ------------------------------------------------------------------
	 * Liên hệ: tiêu đề → form → thông tin chủ đầu tư, trụ sở...
	 * ---------------------------------------------------------------- */
	.contact__info {
		display: contents;
	}

	.contact__title {
		order: 1;
	}

	/* bỏ ngắt dòng cứng, để chữ tự chia dòng cân đối */
	.contact__title br {
		display: none;
	}

	.cform-wrap {
		order: 2;
	}

	.contact__list {
		order: 3;
		margin-top: 0;
	}

	/* Tiêu đề: tránh để một chữ lẻ ở dòng cuối */
	h2,
	.foundations__title-text,
	.project__title-text,
	.location__title-text,
	.products__title-text,
	.amenities__line,
	.apply__line,
	.news__line,
	.contact__title {
		text-wrap: balance;
	}

	/* ------------------------------------------------------------------
	 * Tin tức – Liên hệ – Footer: khoảng cách giữa các khối gọn hơn
	 * ---------------------------------------------------------------- */
	.news {
		padding-bottom: 2rem;
	}

	.contact {
		padding-top: 3rem;
		padding-bottom: 2.5rem;
	}

	.site-footer {
		padding-top: 3rem;
	}

	/* Footer: logo + tagline căn giữa */
	.site-footer__logo {
		display: flex;
		width: fit-content;
		margin-inline: auto;
	}
}

/* ======================================================================
 * Tablet (600 – 1279px)
 * ==================================================================== */
/* Hero trên điện thoại (tablet / PC dùng bố cục gốc trong home-hero.css) */
@media (max-width: 599.98px) {
	/* ------------------------------------------------------------------
	 * (2) Hero: cao 1 màn hình; tòa nhà + phượng hoàng ở đáy; thông tin ở giữa
	 * ---------------------------------------------------------------- */
	.hero__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: clamp(0.75rem, 2.5dvh, 1.25rem);
		width: 100%;
		height: 100dvh;
		min-height: 36rem;
		aspect-ratio: auto;
		padding: calc(var(--header-height) + 0.25rem) var(--page-gutter) 42dvh; /* khối thông tin nằm trên phần tòa nhà */
	}

	/* Ảnh nền: neo đáy, lấy phần tòa nhà + phượng hoàng (bên phải ảnh gốc) */
	.hero__stage::before {
		background: var(--hero-bg) 82% bottom / auto 62% no-repeat;
		/* ảnh bắt đầu ở 38% chiều cao: che mép trên ảnh, hiện dần từ 40% → 58% */
		-webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 58%);
		mask-image: linear-gradient(to bottom, transparent 40%, #000 58%);
	}

	.hero__logo,
	.hero__title,
	.hero__stat,
	.hero__buttons {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
	}

	.hero__logo {
		width: clamp(4.75rem, 13dvh, 7.5rem);
	}

	.hero__title {
		width: min(82vw, 26rem);
	}

	.hero__stats {
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
		gap: clamp(0.5rem, 1.8dvh, 1rem) clamp(1.25rem, 7vw, 3rem);
	}

	.hero__stat {
		--stat-num: clamp(2.375rem, min(11vw, 6.5dvh), 4.25rem);
		--stat-unit: calc(var(--stat-num) * 0.31);
	}

	.hero__stat-caption,
	.hero__stat:nth-child(4) .hero__stat-caption {
		margin-top: 0.3rem;
		padding-left: 0;
		font-size: 0.625rem;
	}

	.hero__buttons {
		align-items: center;
		gap: 0.625rem;
	}

	.hero__button {
		height: 2.5rem;
		padding: 0 1rem;
		font-size: 0.9375rem;
	}
}

@media (min-width: 600px) and (max-width: 1279.98px) {
	/* Tin tức: "LICOGI13FC đồng hành cùng" trên 1 dòng; chữ viết tay "Bạn về nhà" nhỏ lại cho vừa bên cạnh */
	.news__line {
		white-space: nowrap;
		text-wrap: nowrap;
	}

	.news__hand {
		width: clamp(11rem, 26vw, 15rem);
	}

	/* Tiêu đề: giữ bố cục như PC (chữ viết tay cạnh chữ) */
	.foundations__head {
		justify-items: start;
	}

	/* 1 Điểm tựa: ảnh → tiêu đề → bảng thông tin 1 cột, "Quy mô" dùng số Big Shoulders như PC */
	.project__facts {
		margin-left: 0;
	}

	.project__row {
		grid-template-columns: 11rem minmax(0, 1fr);
	}

	.project__stats {
		grid-template-columns: 13rem auto;
		gap: 1.25rem 1.5rem;
	}

	.project__figure {
		--stat-num: 3.5rem;
		--stat-unit: 1.0625rem;
	}

	.project__figure--small {
		--stat-num: 1.875rem;
	}

	.project__stat:nth-child(n) {
		margin-left: 0;
	}

	.project__stat-badge {
		margin-bottom: 0.25rem;
	}

	.project__stat-caption {
		margin-top: 0.25rem;
	}

	.project__button {
		margin-left: 0;
	}

	/* Hồ sơ bớt khó: ô QR bên phải đoạn mô tả + nút + ghi chú; 4 ô còn lại 1 hàng */
	.apply__stage > .container {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 1rem;
		align-items: start;
		padding-top: var(--space-xl);
	}

	.apply__intro,
	.apply__cards {
		display: contents;
	}

	.apply__title {
		grid-column: 1 / -1;
		margin-bottom: var(--space-sm);
	}

	.apply__text,
	.apply__buttons,
	.apply__note {
		grid-column: 1 / 4;
		margin-left: 0;
	}

	.apply__text {
		grid-row: 2;
		margin-top: 0;
	}

	.apply__buttons {
		grid-row: 3;
	}

	.apply__note {
		grid-row: 4;
	}

	.mcard--qr {
		grid-column: 4;
		grid-row: 2 / span 3;
		align-self: stretch;
		min-height: 0;
		padding: 0.75rem;
	}

	.mcard {
		grid-row: 5;
		align-self: stretch; /* 4 ô cao bằng nhau */
		margin-top: var(--space-md);
		padding-inline: 1rem;
	}

	.mcard__title {
		font-size: var(--fs-title-xs);
	}

	.mcard__text {
		font-size: var(--fs-sm);
		overflow-wrap: anywhere; /* email dài không tràn khỏi ô */
	}

	/* ô QR: cụ thể hơn quy tắc .mcard ở trên để giữ vị trí cạnh đoạn mô tả */
	.mcard.mcard--qr {
		grid-column: 4;
		grid-row: 2 / span 3;
		margin-top: 0;
	}

	.mcard__qr {
		width: 80%;
	}
}

/* ======================================================================
 * Chỉ điện thoại (dưới 600px): tiêu đề xếp dọc, "Quy mô" dạng chữ thường
 * ==================================================================== */
@media (max-width: 599.98px) {
	/* ------------------------------------------------------------------
	 * Tiêu đề section: phần chữ xuống dưới chữ viết tay (SVG), căn giữa
	 * ---------------------------------------------------------------- */
	.foundations__title,
	.project__title {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.foundations__title-text,
	.project__title-text,
	.location__title-text,
	.products__title-text,
	.amenities__line,
	.apply__line,
	.news__line {
		white-space: normal;
	}

	.foundations__hand { width: clamp(9.75rem, 49vw, 14.25rem); }
	.project__hand { width: clamp(11.75rem, 62vw, 18.25rem); }
	.location__hand { width: clamp(11.75rem, 65vw, 19.5rem); }
	.products__hand { width: clamp(14.25rem, 78vw, 23.5rem); }
	.amenities__hand { width: clamp(11.75rem, 58vw, 18.25rem); }
	.apply__hand { width: clamp(14.25rem, 75vw, 23.5rem); }
	.news__hand { width: clamp(15.5rem, 80vw, 24.75rem); }

	.foundations__title,
	.project__title,
	.location__title,
	.products__title,
	.apply__title,
	.contact__title {
		align-items: center;
		text-align: center;
	}

	.location__title {
		display: flex;
	}

	.products__head,
	.foundations__head {
		justify-items: center;
	}

	/* "Được Kiến Tạo Bài Bản" chạy liền, không ngắt dòng cứng */
	.project__title-text br {
		display: none;
	}

	/* Tiêu đề có chữ viết tay nằm cuối câu: chữ viết tay xuống dòng riêng */
	.amenities__line {
		flex-direction: column;
		align-items: center;
	}

	.amenities__hand {
		transform: none;
	}

	.apply__title {
		padding-left: 0;
	}

	.apply__line:first-child {
		margin-left: 0;
	}

	.apply__line--hand {
		flex-direction: column;
		align-items: center;
	}

	.products__head {
		padding-left: 0;
	}

	.products__title-text {
		margin: 0;
	}

	/* ------------------------------------------------------------------
	 * 1 Điểm tựa: dòng "Quy mô" thành chữ thường, mỗi số liệu 1 dòng
	 * ---------------------------------------------------------------- */
	.project__stats {
		display: none;
	}

	.project__stats-plain {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.project__row {
		grid-template-columns: 7.5rem minmax(0, 1fr);
	}
}

/* ======================================================================
 * Tin tức dạng carousel (dưới 1280px): tablet 2 tin / màn, điện thoại 1 tin / màn
 * ==================================================================== */
@media (max-width: 1279.98px) {
	.news__grid {
		--news-per-view: 2;
		--news-gap: 1.25rem;

		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--news-per-view) - 1) * var(--news-gap)) / var(--news-per-view));
		grid-template-columns: none;
		gap: var(--news-gap);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}

	.news__grid::-webkit-scrollbar {
		display: none;
	}

	.ncard {
		scroll-snap-align: start;
	}

	.news__nav:not([hidden]) {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		margin-top: var(--space-md);
	}

	.news__arrow {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 1px solid #ecd2c2;
		border-radius: 50%;
		background: var(--color-white);
		color: var(--color-gradient-end);
		cursor: pointer;
	}

	.news__arrow:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.news__arrow .icon {
		width: 1.25rem;
		height: 1.25rem;
		stroke-width: 2.4;
	}

	.news__arrow--prev .icon {
		transform: rotate(180deg);
	}

	.news__dots {
		display: flex;
		gap: 0.5rem;
	}

	.news__dot {
		width: 0.5rem;
		height: 0.5rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #ecd2c2;
		cursor: pointer;
		transition: width var(--duration) var(--ease), background-color var(--duration) var(--ease);
	}

	.news__dot.is-active {
		width: 1.5rem;
		background: var(--color-gradient-end);
	}
}

@media (max-width: 599.98px) {
	.news__grid {
		--news-per-view: 1;
	}
}

/* ========================================================================
 * Điện thoại: khung bản đồ vị trí cố định 100vw × 80dvh, mở sẵn cận cảnh quanh marker dự án;
 * chụm / mở 2 ngón hoặc nút −/+ để thu nhỏ (tới khi ảnh cao vừa khung) / phóng to, ↺ về như ban đầu;
 * vuốt để xem vùng khác (site.js, data-map-zoom).
 * ====================================================================== */
@media (max-width: 599.98px) {
	.location__map {
		width: 100vw;
		max-width: none;
		height: 80dvh;
		aspect-ratio: auto;
		overflow: hidden;
		background: var(--color-bg);
	}

	.location__map-scroll {
		display: flex; /* margin: auto của khung vẽ: căn giữa khi nhỏ hơn khung, vẫn cuộn được khi lớn hơn */
		overflow: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		touch-action: pan-x pan-y; /* trình duyệt lo kéo 1 ngón; chụm 2 ngón do site.js xử lý (không phóng to cả trang) */
	}

	.location__map-scroll::-webkit-scrollbar {
		display: none;
	}

	.location__map-canvas {
		position: relative;
		inset: auto;
		flex: none;
		width: var(--map-w, 100%);
		aspect-ratio: 3840 / 2358;
		margin: auto;
	}

	.location__hint {
		position: absolute;
		bottom: 0.75rem;
		left: 50%;
		z-index: 2;
		margin: 0;
		padding: 0.45em 0.9em;
		border-radius: var(--radius-pill);
		background: rgb(40 25 15 / 0.65);
		color: var(--color-white);
		font-size: var(--fs-xs);
		white-space: nowrap;
		pointer-events: none;
		translate: -50% 0;
		transition: opacity 400ms var(--ease);
	}

	.location__map.is-touched .location__hint {
		opacity: 0;
	}

	.location__zoom:not([hidden]) {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 2;
		display: flex; /* 3 nút xếp ngang */
		overflow: hidden;
		border-radius: 10px;
		background: var(--color-white);
		box-shadow: 0 4px 14px rgb(116 65 27 / 0.2);
	}

	.location__zoom-btn {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-gradient-end);
		font: 600 1.5rem/1 var(--font-body);
		cursor: pointer;
	}

	.location__zoom-btn + .location__zoom-btn {
		border-left: 1px solid #f0e2d8;
	}

	.location__zoom-btn .icon {
		width: 1.25rem;
		height: 1.25rem;
		stroke-width: 2.4;
	}

	.location__zoom-btn:disabled {
		color: #d9c6b9;
		cursor: default;
	}
}

@media (min-width: 600px) {
	.location__hint {
		display: none;
	}
}

/* ========================================================================
 * Điện thoại + tablet – khối "1 Điểm tựa": ảnh phối cảnh xuống dưới khối thông tin.
 * Điện thoại: phóng cận cụm tòa nhà có màu (tâm cụm ≈ 61% ngang, 50% dọc trên ảnh) vào giữa khung.
 * ====================================================================== */
@media (max-width: 1279.98px) {
	.project__stage {
		display: flex;
		flex-direction: column;
	}

	.project__media {
		display: block;
		order: 2;
	}
}

@media (max-width: 599.98px) {
	.project__media {
		overflow: hidden;
		aspect-ratio: 1 / 0.9;
	}

	.project__image {
		height: 100%;
		object-fit: cover;
		object-position: 61% 50%;
		transform: scale(1.65);
		transform-origin: 61% 50%;
	}
}

/* ========================================================================
 * Tablet – khối Sản phẩm: chọn tòa bằng hàng tab như PC; 3 thẻ căn hộ thành 1 hàng trượt ngang
 * (thấy 2 thẻ + một phần thẻ thứ 3, vuốt / cuộn ngang để xem hết).
 * ====================================================================== */
@media (min-width: 600px) and (max-width: 1279.98px) {
	.products__select-wrap {
		display: none;
	}

	.products__tabs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0.5rem;
		padding-left: 0;
	}

	.products__tab {
		flex: 1 1 0;
		min-width: 0;
		height: 3rem;
		font-size: clamp(1rem, 0.55rem + 1.2vw, 1.5rem);
	}

	.products__tab[aria-selected="true"] {
		flex: 1.8 1 0;
	}

	.products__panel {
		display: grid;
		grid-auto-columns: calc((100% - 2 * 1.25rem) / 2.3); /* 2 thẻ + ~30% thẻ thứ 3 */
		grid-auto-flow: column;
		grid-template-columns: none;
		justify-content: start;
		align-items: stretch;
		gap: 1.25rem;
		min-height: 0;
		margin-top: var(--space-md);
		padding-block: 0.25rem 0.75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none; /* ẩn thanh cuộn ngang, vẫn vuốt / cuộn được */
	}

	.products__panel::-webkit-scrollbar {
		display: none;
	}

	.products__panel[hidden] {
		display: none;
	}

	.pcard {
		scroll-snap-align: start;
	}

	/* trong khung trượt: không phóng to khi hover (tránh bị cắt mép) */
	.pcard:hover,
	.pcard:has(:focus-visible) {
		transform: none;
	}
}