/* ═══════════════════════════════════════════════════════════
   mau-nha.css — Style riêng cho Kho mẫu nhà (mau/*.html)
   Dùng chung token/nav/footer/breadcrumb/prose từ cam-nang.css,
   chỉ thêm phần riêng: gallery, bảng thông số, form nhận lead,
   khối trust, lưới "mẫu tương tự", trang danh mục.
   Import: <link rel="stylesheet" href="../cam-nang/cam-nang.css">
           <link rel="stylesheet" href="mau-nha.css">
═══════════════════════════════════════════════════════════ */

/* ── Gallery ảnh (placeholder khi chưa có ảnh thật) ── */
.mn-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:28px}
.mn-gallery .mn-shot{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;position:relative;background:repeating-linear-gradient(45deg,var(--bg3),var(--bg3) 12px,var(--bg) 12px,var(--bg) 24px);border:1px solid var(--border)}
.mn-gallery .mn-shot:first-child{grid-row:1/3;aspect-ratio:auto}
.mn-gallery .mn-shot img{width:100%;height:100%;object-fit:cover;display:block}
.mn-gallery .mn-shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);text-align:center;padding:10px}
.mn-gallery .mn-shot-ph i{font-size:26px;color:rgba(152,105,10,.5)}
.mn-gallery .mn-shot-ph span{font-family:var(--syne);font-size:10px;letter-spacing:.03em}
@media(max-width:640px){.mn-gallery{grid-template-columns:1fr 1fr}.mn-gallery .mn-shot:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:16/9}}

/* ── Bảng thông số ── */
.mn-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.mn-spec{background:var(--bg2);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.mn-spec .k{font-family:var(--syne);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mn-spec .v{font-family:var(--mono);font-size:var(--text-md);color:var(--text);font-weight:700}
.mn-spec-wide{grid-column:1/-1}
@media(max-width:640px){.mn-specs{grid-template-columns:1fr 1fr}}

.mn-disclaimer{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-xs);color:var(--muted);line-height:1.6;margin-bottom:32px}
.mn-disclaimer i{color:var(--gold);flex-shrink:0;margin-top:2px}

/* ── Form nhận lead (inline, không phải modal) ── */
.mn-lead{scroll-margin-top:90px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:30px 32px;margin:40px 0}
.mn-lead h2{font-family:var(--syne);font-weight:700;font-size:var(--text-lg);color:var(--text);margin-bottom:6px}
.mn-lead-sub{font-size:var(--text-sm);color:var(--sub);margin-bottom:18px}
.mn-lead-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.mn-lead-row{display:flex;gap:12px;flex-wrap:wrap}
.mn-lead-row input{flex:1;min-width:180px}
.mn-lead-form input{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px 14px;font-family:var(--sans);font-size:var(--text-base);color:var(--text);outline:none;transition:border-color .2s}
.mn-lead-form input:focus{border-color:var(--gold)}
.mn-lead-submit{align-self:flex-start}
.mn-lead-msg{font-size:var(--text-sm);min-height:1.4em}
.mn-lead-msg.ok{color:var(--green)}
.mn-lead-msg.err{color:var(--red)}

/* ── Khối trust (Quy trình 4 bước) ── */
.mn-trust{display:flex;align-items:flex-start;gap:14px;background:var(--gold-bg);border:1px solid var(--border2);border-radius:var(--r-sm);padding:20px 24px;margin-bottom:20px}
.mn-trust i{font-size:26px;color:var(--gold);flex-shrink:0;margin-top:2px}
.mn-trust p{font-size:var(--text-sm);color:var(--text2);line-height:1.65;margin:0}
.mn-trust a{color:var(--gold);font-weight:700;text-decoration:underline;text-decoration-color:rgba(152,105,10,.35)}

/* ═══ TRANG DANH MỤC (index.html / {loai}.html trong mau/) ═══ */
.mn-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:10px 0 60px}
@media(max-width:960px){.mn-cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mn-cat-grid{grid-template-columns:1fr}}
.mn-cat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;display:flex;flex-direction:column}
.mn-cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(152,105,10,.34)}
.mn-cat-thumb{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--bg3),var(--bg3) 12px,var(--bg) 12px,var(--bg) 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);overflow:hidden}
.mn-cat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mn-cat-thumb i{font-size:30px;color:rgba(152,105,10,.5)}
.mn-cat-thumb span{font-family:var(--syne);font-size:11px;letter-spacing:.04em}
.mn-cat-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mn-cat-code{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--gold);letter-spacing:.06em;margin-bottom:10px}
.mn-cat-body h3{font-family:var(--syne);font-weight:700;font-size:var(--text-md);color:var(--text);line-height:1.35;margin-bottom:10px}
.mn-cat-specs{display:flex;gap:16px;font-size:var(--text-xs);color:var(--sub);margin-bottom:14px;flex-wrap:wrap}
.mn-cat-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:baseline;justify-content:space-between}
.mn-cat-price .k{font-size:12px;color:var(--sub)}
.mn-cat-price .v{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--gold)}

.mn-cat-filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:30px 0 6px}
.mn-cat-filter{padding:9px 18px;border-radius:99px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:var(--syne);font-weight:700;font-size:12px;letter-spacing:.03em;transition:all .2s;box-shadow:var(--shadow-sm)}
.mn-cat-filter:hover{border-color:var(--gold);color:var(--text)}
.mn-cat-filter.active{background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:transparent;color:#1a1400}

/* ── "Mẫu tương tự" — dùng lại .cn-related-card, chỉ thêm giá + thông số ── */
.mn-related-grid .cn-related-card{display:block}
.mn-related-meta{font-size:var(--text-xs);color:var(--sub);margin-top:6px}