/*
 * Hoàng Sỹ Sáng — CSS bổ sung (ngoài theme.json).
 * Giữ tối giản. Màu lấy từ biến preset của theme.json để nhất quán.
 */

:root {
	--hss-navy: #0B1F33;
	--hss-champagne: #C8A45D;
	--hss-cream: #F7F5F0;
	--hss-ink: #1D2430;
	--hss-terra: #C96E3D;
	--hss-border: #E7E3DA;
	--hss-shadow: 0 6px 24px rgba(11, 31, 51, 0.08);
	--hss-radius: 12px;
}

/* ---------- Thẻ (block style hss-card) ---------- */
.wp-block-group.is-style-hss-card {
	background: #fff;
	border: 1px solid var(--hss-border);
	border-radius: var(--hss-radius);
	box-shadow: var(--hss-shadow);
	overflow: hidden;
}
.wp-block-group.is-style-hss-section-cream {
	background: var(--hss-cream);
}

/* ---------- Thẻ nhà đất / dự án ---------- */
.hss-card {
	background: #fff;
	border: 1px solid var(--hss-border);
	border-radius: var(--hss-radius);
	box-shadow: var(--hss-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.hss-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(11, 31, 51, 0.14); }
}
.hss-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.hss-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hss-card__badge {
	position: absolute; top: 0.75rem; left: 0.75rem;
	background: var(--hss-navy); color: var(--hss-cream);
	font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px;
}
.hss-card__badge--sold { background: var(--hss-terra); }
.hss-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.hss-card__title { font-family: "Lora", Georgia, serif; font-size: 1.15rem; line-height: 1.3; margin: 0; }
.hss-card__title a { color: var(--hss-ink); text-decoration: none; }
.hss-card__meta { font-size: 0.92rem; color: #3A424E; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.hss-card__price { color: var(--hss-terra); font-weight: 700; font-size: 1.05rem; }
.hss-card__actions { margin-top: auto; display: flex; gap: 0.6rem; padding-top: 0.5rem; }
.hss-card__actions .hss-btn { flex: 1; text-align: center; }

/* ---------- Nút ---------- */
.hss-btn {
	display: inline-block; padding: 0.7rem 1.2rem; border-radius: 8px;
	font-weight: 600; text-decoration: none; font-size: 0.95rem; cursor: pointer;
	border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease;
}
.hss-btn--primary { background: var(--hss-terra); color: #fff; }
.hss-btn--primary:hover { background: #B35F32; color: #fff; }
.hss-btn--ghost { background: transparent; color: var(--hss-navy); border-color: var(--hss-navy); }
.hss-btn--ghost:hover { background: var(--hss-navy); color: var(--hss-cream); }

/* ---------- Lưới ---------- */
.hss-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- Thanh hành động cố định (mobile) ---------- */
.hss-action-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	display: none;
	background: var(--hss-navy);
	padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}
.hss-action-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; max-width: 640px; margin: 0 auto; }
.hss-action-bar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; color: var(--hss-cream); text-decoration: none; font-size: 0.72rem;
	padding: 0.35rem 0.2rem; border-radius: 8px; min-height: 48px;
}
.hss-action-bar a:hover, .hss-action-bar a:focus { background: rgba(255, 255, 255, 0.08); }
.hss-action-bar svg { width: 22px; height: 22px; fill: var(--hss-champagne); }
@media (max-width: 782px) {
	.hss-action-bar { display: block; }
	body { padding-bottom: 68px; } /* chừa chỗ cho thanh */
}

/* ---------- Hero ---------- */
.hss-hero { position: relative; }
.hss-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,51,0.85), rgba(11,31,51,0.35)); }

/* ---------- Menu neo nhanh (trang dự án) ---------- */
.hss-anchor-nav {
	position: sticky; top: 0; z-index: 50; background: #fff;
	border-bottom: 1px solid var(--hss-border); overflow-x: auto;
	display: flex; gap: 0.25rem; padding: 0.5rem;
}
.hss-anchor-nav a { white-space: nowrap; padding: 0.4rem 0.8rem; border-radius: 999px; text-decoration: none; color: var(--hss-navy); font-size: 0.9rem; }
.hss-anchor-nav a:hover { background: var(--hss-cream); }

/* ---------- Số liệu ---------- */
.hss-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.hss-stat__num { font-family: "Lora", Georgia, serif; color: var(--hss-champagne); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; line-height: 1; }
.hss-stat__label { color: #3A424E; font-size: 0.95rem; margin-top: 0.35rem; }

/* ---------- Bộ lọc nhà đất ---------- */
.hss-filter { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hss-filter select, .hss-filter input {
	width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--hss-border);
	border-radius: 8px; font: inherit; background: #fff;
}

/* ---------- Form thu lead ---------- */
.hss-form { display: grid; gap: 0.85rem; }
.hss-form label { font-weight: 600; font-size: 0.92rem; display: block; margin-bottom: 0.3rem; }
.hss-form input, .hss-form select, .hss-form textarea {
	width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--hss-border);
	border-radius: 8px; font: inherit;
}
.hss-form .hss-hp { position: absolute; left: -9999px; } /* honeypot ẩn */
.hss-form__consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.hss-form__msg { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.95rem; }
.hss-form__msg--ok { background: #E8F5EE; color: #1E5E43; }
.hss-form__msg--err { background: #FBEAE8; color: #A5342B; }

/* video 16:9 */
.hss-embed { position: relative; aspect-ratio: 16 / 9; }
.hss-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }