/* =========================================================================
   Mekong Housing — giao diện chính
   Màu thương hiệu lấy từ logo site cũ: #076D94
   ========================================================================= */

:root {
	--mkh-xanh: #076d94;
	--mkh-xanh-dam: #04516e;
	--mkh-xanh-nhat: #e8f3f8;
	--mkh-vang: #e0932a;
	--mkh-muc: #17222b;
	--mkh-muc-nhat: #5b6b77;
	--mkh-vien: #dfe5ea;
	--mkh-nen: #ffffff;
	--mkh-nen-xam: #f5f7f9;

	--mkh-rong: 1200px;
	--mkh-bo: 10px;
	--mkh-bong: 0 1px 2px rgba(23, 34, 43, .06), 0 8px 24px rgba(23, 34, 43, .07);

	--mkh-chu: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

body {
	margin: 0;
	font-family: var(--mkh-chu);
	font-size: 16px;
	line-height: 1.65;
	color: var(--mkh-muc);
	background: var(--mkh-nen);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--mkh-xanh); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }

.mkh-khung {
	width: 100%;
	max-width: var(--mkh-rong);
	margin-inline: auto;
	padding-inline: 20px;
}

.screen-reader-text,
.mkh-bo-qua:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mkh-bo-qua:focus {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--mkh-xanh);
	color: #fff;
	border-radius: var(--mkh-bo);
}

/* ------------------------------------------------------------------ nút */

.mkh-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--mkh-bo);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mkh-nut:hover { text-decoration: none; }

.mkh-nut--chinh { background: var(--mkh-xanh); color: #fff; }
.mkh-nut--chinh:hover { background: var(--mkh-xanh-dam); color: #fff; }

.mkh-nut--vien { border-color: var(--mkh-vien); color: var(--mkh-muc); background: #fff; }
.mkh-nut--vien:hover { border-color: var(--mkh-xanh); color: var(--mkh-xanh); }

.mkh-nut--rong { width: 100%; }
.mkh-nut--to { padding: 15px 32px; font-size: 1.05rem; }

/* ------------------------------------------------------- thanh trên đầu */

.mkh-thanh-tren {
	background: var(--mkh-muc);
	color: #c8d3db;
	font-size: .85rem;
}
.mkh-thanh-tren__trong {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}
.mkh-thanh-tren a { color: #c8d3db; }
.mkh-thanh-tren a:hover { color: #fff; }
.mkh-thanh-tren__lh { display: flex; gap: 20px; align-items: center; }
.mkh-thanh-tren__hotline { font-weight: 700; color: #fff !important; }

/* ------------------------------------------------------------ đầu trang */

.mkh-dau {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--mkh-vien);
}
.mkh-dau__trong {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
}

.mkh-logo img { max-height: 52px; width: auto; }
.mkh-logo__chu {
	display: flex;
	flex-direction: column;
	line-height: 1;
	color: var(--mkh-xanh);
	font-weight: 800;
	letter-spacing: .02em;
}
.mkh-logo__chu strong { font-size: 1.5rem; }
.mkh-logo__chu span {
	font-size: .7rem;
	letter-spacing: .42em;
	color: var(--mkh-muc-nhat);
	font-weight: 600;
}

.mkh-menu { margin-inline-start: auto; }
.mkh-menu__ds {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mkh-menu__ds a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--mkh-bo);
	color: var(--mkh-muc);
	font-weight: 600;
	font-size: .95rem;
}
.mkh-menu__ds a:hover,
.mkh-menu__ds .current-menu-item > a {
	background: var(--mkh-xanh-nhat);
	color: var(--mkh-xanh);
	text-decoration: none;
}

.mkh-nut-menu { display: none; }

/* ---------------------------------------------------------------- hero */

.mkh-hero {
	background:
		linear-gradient(160deg, rgba(4, 81, 110, .93), rgba(7, 109, 148, .88)),
		var(--mkh-xanh);
	color: #fff;
	padding-block: 64px 72px;
	text-align: center;
}
.mkh-hero__tieu-de {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	margin-bottom: 16px;
}
.mkh-hero__mo-ta {
	max-width: 640px;
	margin: 0 auto 28px;
	font-size: 1.05rem;
	color: #d9eaf3;
}

.mkh-tim {
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	padding: 8px;
	border-radius: 14px;
	box-shadow: var(--mkh-bong);
}
.mkh-tim input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	color: var(--mkh-muc);
	background: transparent;
}
.mkh-tim input[type="search"]:focus { outline: 2px solid var(--mkh-xanh-nhat); border-radius: 8px; }

.mkh-hero__nhanh {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}
.mkh-hero__nhanh a {
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
}
.mkh-hero__nhanh a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }

/* --------------------------------------------------------- đường dẫn */

.mkh-duong-dan {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-block: 18px 4px;
	font-size: .875rem;
	color: var(--mkh-muc-nhat);
}
.mkh-duong-dan span[aria-hidden] { color: #b5c0c9; }

/* ----------------------------------------------------- tiêu đề trang */

.mkh-dau-trang { padding-block: 10px 22px; }
.mkh-dau-trang__tieu-de { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 6px; }
.mkh-dau-trang__mo-ta { margin: 10px 0 0; color: var(--mkh-muc-nhat); max-width: 70ch; }

/* ------------------------------------------------------------ bộ lọc */

.mkh-loc {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	padding: 18px;
	background: var(--mkh-nen-xam);
	border: 1px solid var(--mkh-vien);
	border-radius: 14px;
	margin-bottom: 26px;
}
.mkh-loc__o { display: flex; flex-direction: column; gap: 5px; margin: 0; flex: 1 1 165px; }
/* Ô "Dự án" rộng hơn vì tên dự án dài nhất trong kho tới 21 ký tự. */
.mkh-loc__o--rong { flex-basis: 210px; }
.mkh-loc__o label { font-size: .8rem; font-weight: 600; color: var(--mkh-muc-nhat); }
/* Ô chọn: bỏ mũi tên mặc định (mỗi hệ điều hành vẽ một kiểu, lại sát mép),
   thay bằng mũi tên riêng lùi vào 14px và chừa chỗ cho chữ khỏi chạm vào. */
.mkh-loc select,
.mkh-chon__nut {
	width: 100%;
	padding: 10px 38px 10px 12px;
	border: 1px solid var(--mkh-vien);
	border-radius: var(--mkh-bo);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2l4.6-4.6' fill='none' stroke='%235b6b77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font: inherit;
	font-size: .92rem;
	color: var(--mkh-muc);
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.mkh-loc select:hover,
.mkh-chon__nut:hover { border-color: #c3ced6; }
.mkh-loc__o--nut { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 14px; }
.mkh-loc__xoa { font-size: .88rem; color: var(--mkh-muc-nhat); }

/* ------------------------------------------------- ô chọn tự vẽ (JS) */

/* Danh sách xổ xuống của <select> do hệ điều hành vẽ, CSS không với tới được.
   Nên với máy có chuột, JS dựng một danh sách riêng bằng HTML để còn bo góc,
   đổ bóng và làm hiệu ứng di chuột. Máy cảm ứng giữ nguyên <select> gốc vì
   bánh xe chọn của điện thoại dùng sướng hơn mọi thứ tự vẽ. */

.mkh-chon { position: relative; }

/* <select> gốc vẫn nằm trong form để gửi đi, chỉ giấu khỏi mắt và khỏi phím Tab. */
.mkh-chon__that {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mkh-chon__nut {
	display: block;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Tên dự án dài hơn bề ngang ô ("Sunshine Golden River", "Khu đô thị Vườn
   Đào"). Ở NÚT thì cắt bằng ba chấm chứ không cho xuống dòng: xuống dòng là ô
   cao lên, cả hàng lọc so le nhau. Chữ bị cắt thì JS gắn tooltip tên đầy đủ. */
.mkh-chon__nut,
.mkh-loc select {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mkh-chon__nut[aria-expanded="true"] {
	border-color: var(--mkh-xanh);
	box-shadow: 0 0 0 3px var(--mkh-xanh-nhat);
}
.mkh-chon__nut:focus-visible {
	outline: none;
	border-color: var(--mkh-xanh);
	box-shadow: 0 0 0 3px var(--mkh-xanh-nhat);
}

/* Còn DANH SÁCH thì không cắt chữ — phải đọc đủ tên mới chọn đúng được. Cho nó
   tự nở theo tên dài nhất, rộng tối thiểu bằng nút, chặn trên 300px. */
.mkh-chon__ds {
	position: absolute;
	z-index: 40;
	inset-inline-start: 0;
	inset-inline-end: auto;
	min-width: 100%;
	width: max-content;
	max-width: min(300px, 86vw);
	top: calc(100% + 6px);
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mkh-vien);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(23, 34, 43, .13);
	font-size: .92rem;

	/* Trạng thái đóng: vẫn ở trong luồng để còn chạy hiệu ứng khi mở. */
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, .7, .3, 1), visibility .16s;
}
.mkh-chon__ds.la-mo {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* Ô lọc ngoài cùng bên phải: danh sách nở rộng ra sẽ tràn mép màn hình, nên
   JS đo rồi neo ngược sang phải. */
.mkh-chon__ds--phai {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.mkh-chon__muc {
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--mkh-muc);
	cursor: pointer;
	transition: background-color .13s ease, color .13s ease;
}
/* Di chuột hay di phím đều dùng chung một kiểu nổi bật, để dùng phím không bị
   lạc mất đang ở dòng nào. */
.mkh-chon__muc:hover,
.mkh-chon__muc.la-ro {
	background: var(--mkh-xanh-nhat);
	color: var(--mkh-xanh-dam);
}
.mkh-chon__muc[aria-selected="true"] {
	font-weight: 600;
	color: var(--mkh-xanh);
}
/* Dấu tích của mục đang chọn, chừa chỗ sẵn để chữ các dòng thẳng hàng. */
.mkh-chon__muc::before {
	content: "";
	display: inline-block;
	width: 16px;
	margin-inline-end: 2px;
	color: var(--mkh-xanh);
}
.mkh-chon__muc[aria-selected="true"]::before { content: "✓"; }

/* Phường là mục con của vùng, thụt vào cho thấy thứ bậc. */
.mkh-chon__muc--con { padding-inline-start: 30px; }

@media (prefers-reduced-motion: reduce) {
	.mkh-chon__ds,
	.mkh-chon__muc,
	.mkh-chon__nut { transition: none; }
}

/* -------------------------------------------------------- sắp xếp */

.mkh-thanh-sap-xep {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
	margin-bottom: 20px;
	font-size: .9rem;
}
.mkh-thanh-sap-xep__nhan { color: var(--mkh-muc-nhat); }
.mkh-thanh-sap-xep__muc {
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--mkh-muc-nhat);
	border: 1px solid transparent;
}
.mkh-thanh-sap-xep__muc:hover { background: var(--mkh-nen-xam); text-decoration: none; }
.mkh-thanh-sap-xep__muc.la-dang-chon {
	background: var(--mkh-xanh-nhat);
	border-color: #bcdcea;
	color: var(--mkh-xanh-dam);
	font-weight: 600;
}

/* ----------------------------------------------------------- lưới tin */

/* 3 tin mỗi hàng trên máy tính, 2 trên tablet, 1 trên điện thoại.
   Dùng số cột cố định thay vì auto-fill để hàng luôn đủ 3, không đổi theo bề rộng. */
.mkh-luoi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.mkh-the {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mkh-vien);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
.mkh-the:hover { box-shadow: var(--mkh-bong); transform: translateY(-2px); }

.mkh-the__anh {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--mkh-nen-xam);
	overflow: hidden;
}
.mkh-the__anh img { width: 100%; height: 100%; object-fit: cover; }

.mkh-anh-trong {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg, #eef2f5 0 12px, #e7edf1 12px 24px);
}

.mkh-the__than { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }

.mkh-the__tieu-de {
	font-size: 1rem;
	line-height: 1.4;
	margin: 0 0 8px;
	/* Giữ thẻ đều nhau: tiêu đề tin cũ rất dài */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mkh-the__tieu-de a { color: var(--mkh-muc); }
.mkh-the__tieu-de a:hover { color: var(--mkh-xanh); text-decoration: none; }

.mkh-the__vi-tri { margin: 0 0 10px; font-size: .85rem; color: var(--mkh-muc-nhat); }

.mkh-the__gia { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mkh-the__gia strong { font-size: 1.2rem; color: var(--mkh-vang); font-weight: 800; }
.mkh-the__don-gia { font-size: .82rem; color: var(--mkh-muc-nhat); }

/* --------------------------------------------------------- thông số */

.mkh-thong-so {
	list-style: none;
	margin: auto 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--mkh-vien);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: .85rem;
}
.mkh-thong-so__nhan { display: block; color: var(--mkh-muc-nhat); font-size: .75rem; }

.mkh-thong-so--to {
	margin: 0 0 26px;
	padding: 20px;
	border: 1px solid var(--mkh-vien);
	border-radius: 14px;
	gap: 18px 34px;
	font-size: 1rem;
}
.mkh-thong-so--to strong { font-size: 1.05rem; }
.mkh-thong-so__gia { color: var(--mkh-vang); font-size: 1.5rem !important; }
.mkh-thong-so--to small { display: block; color: var(--mkh-muc-nhat); font-size: .8rem; }

/* ----------------------------------------------------- trang chi tiết */

.mkh-chi-tiet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
	padding-block: 10px 40px;
}
.mkh-chi-tiet__tieu-de { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.mkh-chi-tiet__vi-tri { margin: 0 0 20px; color: var(--mkh-muc-nhat); }
.mkh-chi-tiet__anh { margin: 0 0 26px; border-radius: 14px; overflow: hidden; }

.mkh-chi-tiet__noi-dung { font-size: 1.02rem; }
.mkh-chi-tiet__noi-dung p { margin: 0 0 1em; }
.mkh-chi-tiet__noi-dung img { border-radius: var(--mkh-bo); margin-block: 1em; }

.mkh-the-lien-quan { margin-top: 24px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px; }
.mkh-the-lien-quan span { color: var(--mkh-muc-nhat); }
.mkh-the-lien-quan a {
	padding: 4px 12px;
	background: var(--mkh-xanh-nhat);
	border-radius: 999px;
	font-weight: 600;
}

.mkh-chi-tiet__ben { position: sticky; top: 96px; }
.mkh-hop-lh {
	padding: 22px;
	border: 1px solid var(--mkh-vien);
	border-radius: 14px;
	box-shadow: var(--mkh-bong);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mkh-hop-lh__nhan { margin: 0; font-weight: 600; }
.mkh-hop-lh__gia { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--mkh-vang); }
.mkh-hop-lh__dc { margin: 4px 0 0; font-size: .82rem; color: var(--mkh-muc-nhat); }

/* -------------------------------------------------------- khối mục */

.mkh-muc { padding-block: 44px 0; }
.mkh-muc__dau {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 22px;
}
.mkh-muc__tieu-de { font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin: 0; }
.mkh-muc__xem-them { font-weight: 600; font-size: .92rem; }

.mkh-lien-quan { padding-block: 20px 40px; border-top: 1px solid var(--mkh-vien); }

.mkh-o-khu-vuc {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

/* Ô khu vực: ảnh nền, tên và số tin nằm đè lên ảnh. */
.mkh-o-khu-vuc__muc {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	background: var(--mkh-nen-xam);
	color: #fff;
}
.mkh-o-khu-vuc__muc:hover { text-decoration: none; color: #fff; }

.mkh-o-khu-vuc__muc img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.mkh-o-khu-vuc__muc:hover img { transform: scale(1.05); }

/* Ảnh nhà cửa chỗ sáng chỗ tối, chữ trắng đặt thẳng lên là có chỗ đọc không
   ra. Phủ một lớp tối dần từ đáy lên để chữ luôn đủ tương phản. */
.mkh-o-khu-vuc__muc::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(8, 26, 36, .85) 0%,
		rgba(8, 26, 36, .45) 42%,
		rgba(8, 26, 36, .04) 100%
	);
}

/* Khu vực chưa có tin nào kèm ảnh: nền màu thương hiệu thay cho ảnh. */
.mkh-o-khu-vuc__muc--khong-anh {
	background: linear-gradient(160deg, var(--mkh-xanh-dam), var(--mkh-xanh));
}

.mkh-o-khu-vuc__chu {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
}
.mkh-o-khu-vuc__chu strong {
	font-size: 1.15rem;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.mkh-o-khu-vuc__chu span {
	font-size: .85rem;
	color: #d9e8f0;
}

.mkh-o-khu-vuc__muc:focus-visible {
	outline: 3px solid var(--mkh-xanh);
	outline-offset: 2px;
}

.mkh-cta {
	margin-block: 56px 20px;
	padding: 44px 24px;
	text-align: center;
	background: var(--mkh-xanh-nhat);
	border-radius: 18px;
}
.mkh-cta h2 { margin-bottom: 8px; }
.mkh-cta p { margin: 0 0 22px; color: var(--mkh-muc-nhat); }

/* ------------------------------------------------------- trang tĩnh */

.mkh-trang { padding-block: 10px 50px; max-width: 75ch; }
.mkh-trang__tieu-de { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ------------------------------------------------------------ trống */

.mkh-trong {
	padding: 60px 20px;
	text-align: center;
	color: var(--mkh-muc-nhat);
}
.mkh-trong--404 { padding-block: 80px; }
.mkh-trong__ma { font-size: 4rem; font-weight: 800; color: var(--mkh-vien); margin: 0; line-height: 1; }
.mkh-trong h1 { color: var(--mkh-muc); }
.mkh-trong .mkh-tim { margin-block: 26px; }

/* -------------------------------------------------------- phân trang */

.page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 40px 0;
	padding: 0;
}
.page-numbers li a,
.page-numbers li span {
	display: block;
	min-width: 40px;
	padding: 9px 12px;
	text-align: center;
	border: 1px solid var(--mkh-vien);
	border-radius: var(--mkh-bo);
	color: var(--mkh-muc);
	font-size: .92rem;
}
.page-numbers li a:hover { border-color: var(--mkh-xanh); color: var(--mkh-xanh); text-decoration: none; }
.page-numbers li .current {
	background: var(--mkh-xanh);
	border-color: var(--mkh-xanh);
	color: #fff;
	font-weight: 700;
}

/* ------------------------------------------------------------- chân */

.mkh-chan { margin-top: 60px; background: var(--mkh-muc); color: #b9c6d0; }
.mkh-chan a { color: #b9c6d0; }
.mkh-chan a:hover { color: #fff; }

.mkh-chan__cot {
	display: grid;
	/* 5 khối: logo · Danh mục · Thông tin · Tìm theo · Liên hệ.
	   Cột logo và cột liên hệ rộng hơn vì chứa nhiều chữ. */
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1.6fr;
	gap: 34px;
	padding-block: 48px 40px;
}
.mkh-chan__tieu-de { font-size: 1rem; color: #fff; margin-bottom: 14px; }
.mkh-chan__ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.mkh-chan__mo-ta { font-size: .92rem; margin-top: 14px; }
.mkh-chan__dc { font-style: normal; font-size: .92rem; line-height: 1.8; }
/* Logo nền trong suốt: tô trắng cho hợp nền tối. */
.mkh-logo--chan:not(.mkh-logo--tam) img { filter: brightness(0) invert(1); opacity: .92; }

/* Logo có nền đặc thì tô trắng sẽ ra một mảng trắng trơn — đặt lên tấm nền
   trắng bo góc thay vì tô. PHP quyết định dùng cách nào (mkh_logo_can_tam()). */
.mkh-logo--tam {
	display: inline-block;
	padding: 8px 12px;
	background: #fff;
	border-radius: 10px;
}
.mkh-logo--chan .mkh-logo__chu { color: #fff; }
.mkh-logo--chan .mkh-logo__chu span { color: #8fa3b1; }

.mkh-chan__cuoi {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 18px;
	font-size: .85rem;
}

/* --------------------------------------------------------- gọi nhanh */

.mkh-goi-nhanh {
	position: fixed;
	inset-block-end: 18px;
	inset-inline-end: 18px;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	background: var(--mkh-vang);
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(23, 34, 43, .28);
}
.mkh-goi-nhanh:hover { text-decoration: none; color: #fff; }

/* ------------------------------------------------------ form liên hệ */

/* Ô bẫy máy gửi tự động: giấu khỏi mắt người nhưng bot vẫn thấy và điền vào. */
.mkh-an-di {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mkh-form-lh {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--mkh-vien);
	border-radius: 14px;
	background: var(--mkh-nen-xam);
}
.mkh-form-lh__tieu-de { margin: 0; font-size: 1.15rem; }
.mkh-form-lh__mo-ta { margin: -6px 0 0; font-size: .9rem; color: var(--mkh-muc-nhat); }

.mkh-form-lh__o { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.mkh-form-lh__o label { font-size: .85rem; font-weight: 600; color: var(--mkh-muc-nhat); }
.mkh-form-lh__sao { color: #b32d2e; }

.mkh-form-lh input,
.mkh-form-lh textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--mkh-vien);
	border-radius: var(--mkh-bo);
	background: #fff;
	font: inherit;
	font-size: .95rem;
	color: var(--mkh-muc);
}
.mkh-form-lh textarea { min-height: 96px; resize: vertical; }
.mkh-form-lh input:focus,
.mkh-form-lh textarea:focus { outline: 2px solid var(--mkh-xanh-nhat); border-color: var(--mkh-xanh); }
.mkh-form-lh [aria-invalid="true"] { border-color: #b32d2e; }

.mkh-form-lh__loi { font-size: .82rem; color: #b32d2e; }
.mkh-form-lh__gui { margin: 4px 0 0; }
.mkh-form-lh__hotline { margin: 0; text-align: center; font-size: .88rem; color: var(--mkh-muc-nhat); }

/* Bản gọn nằm trong cột phải trang chi tiết tin. */
.mkh-form-lh--gon {
	margin-top: 18px;
	padding: 20px;
	gap: 12px;
	background: #fff;
	box-shadow: var(--mkh-bong);
}
.mkh-form-lh--gon .mkh-form-lh__tieu-de { font-size: 1rem; }
.mkh-form-lh--gon textarea { min-height: 72px; }

/* Thông báo sau khi gửi. */
.mkh-tb {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: var(--mkh-bo);
	font-size: .92rem;
}
.mkh-tb--ok { background: #e7f5ec; border-color: #b6e0c4; color: #1d6b39; }
.mkh-tb--loi { background: #fdecec; border-color: #f3c2c2; color: #9d2727; }

.mkh-cta__nut {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

/* -------------------------------------------------------- chuyển động */

/* Tất cả hiệu ứng dưới đây đều nhẹ và ngắn (dưới 0,6 giây). Nhà đất mà trang
   nhún nhảy thì trông như trang câu view, mất tin cậy. */

/* Hiện dần khi cuộn tới. Lớp .mkh-hien-dan do JS gắn, chỉ gắn cho phần nằm
   dưới màn hình — xem assets/js/main.js. */
.mkh-hien-dan {
	opacity: 0;
	transform: translateY(14px);
}
.mkh-hien-dan.la-hien {
	opacity: 1;
	transform: none;
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* Thanh đầu trang dính ở đỉnh: rời khỏi đỉnh mới đổ bóng, để biết trang đang
   cuộn ở dưới. */
.mkh-dau { transition: box-shadow .2s ease; }
.mkh-dau.la-cuon { box-shadow: 0 2px 12px rgba(23, 34, 43, .09); }

/* Thẻ tin: ảnh phóng rất nhẹ khi rê chuột (khung đã overflow:hidden sẵn). */
.mkh-the__anh img { transition: transform .35s ease; }
.mkh-the:hover .mkh-the__anh img { transform: scale(1.04); }

/* Hero trang chủ: bốn khối trôi lên so le lúc vào trang. Thuần CSS nên chạy
   ngay từ khung hình đầu, không chờ JS. */
@keyframes mkh-troi-len {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
.mkh-hero__tieu-de,
.mkh-hero__mo-ta,
.mkh-hero .mkh-tim,
.mkh-hero__nhanh {
	animation: mkh-troi-len .55s cubic-bezier(.2, .7, .3, 1) both;
}
.mkh-hero__mo-ta { animation-delay: .08s; }
.mkh-hero .mkh-tim { animation-delay: .16s; }
.mkh-hero__nhanh { animation-delay: .24s; }

/* Máy nào cài "giảm chuyển động" thì tắt sạch. */
@media (prefers-reduced-motion: reduce) {
	.mkh-hien-dan,
	.mkh-hien-dan.la-hien {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mkh-hero__tieu-de,
	.mkh-hero__mo-ta,
	.mkh-hero .mkh-tim,
	.mkh-hero__nhanh { animation: none; }

	.mkh-the,
	.mkh-the__anh img,
	.mkh-dau { transition: none; }

	.mkh-the:hover { transform: none; }
	.mkh-the:hover .mkh-the__anh img { transform: none; }
}

/* ----------------------------------------------------------- màn nhỏ */

@media (max-width: 980px) {
	.mkh-chi-tiet { grid-template-columns: 1fr; }
	.mkh-chi-tiet__ben { position: static; }
	.mkh-chan__cot { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.mkh-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 560px) {
	.mkh-luoi { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.mkh-thanh-tren__gio { display: none; }

	.mkh-dau__goi { display: none; }

	.mkh-nut-menu {
		display: block;
		margin-inline-start: auto;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 1px solid var(--mkh-vien);
		border-radius: var(--mkh-bo);
		position: relative;
		cursor: pointer;
	}
	.mkh-nut-menu__vach,
	.mkh-nut-menu__vach::before,
	.mkh-nut-menu__vach::after {
		position: absolute;
		left: 12px;
		width: 20px;
		height: 2px;
		background: var(--mkh-muc);
		content: "";
	}
	.mkh-nut-menu__vach { top: 21px; }
	.mkh-nut-menu__vach::before { top: -6px; left: 0; }
	.mkh-nut-menu__vach::after { top: 6px; left: 0; }

	.mkh-menu {
		display: none;
		order: 10;
		flex-basis: 100%;
		margin: 0 0 14px;
	}
	.mkh-menu.la-mo { display: block; }
	.mkh-dau__trong { flex-wrap: wrap; }
	.mkh-menu__ds { flex-direction: column; gap: 2px; }

	.mkh-goi-nhanh { display: inline-flex; }
	.mkh-chan__cot { grid-template-columns: 1fr; gap: 28px; }
	.mkh-tim { flex-wrap: wrap; }
	.mkh-tim input[type="search"] { flex-basis: 100%; }
	.mkh-tim .mkh-nut { width: 100%; }

	body { padding-bottom: 70px; }
}