/* ============================================================
   project-detail.css — CSS dùng chung cho tất cả trang dự án
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#F8FAFC;color:#0F172A;padding:32px 16px;min-height:100vh}
.wrap{max-width:860px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08)}

/* Image / Icon header */
.md-img{width:100%;overflow:hidden;background:#F1F0FF;max-height:340px;display:flex;align-items:center;justify-content:center}
.md-img img{width:100%;height:100%;object-fit:cover;display:block}
.md-icon-wrap{width:100%;display:flex;align-items:center;justify-content:center;padding:44px 0}

/* Body */
.md-body{padding:32px 36px 40px}
@media(max-width:640px){.md-body{padding:20px 18px 28px}}

/* Meta & Title */
.md-meta{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2563EB;margin:0 0 8px}
.md-title{font-size:1.5rem;font-weight:700;color:#0F172A;margin:0 0 10px;font-family:'Space Grotesk',sans-serif;line-height:1.3}
.md-desc{color:#64748B;line-height:1.75;margin:0 0 18px;font-size:.95rem}

/* Tags */
.md-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.md-tag{font-size:.68rem;padding:4px 12px;border-radius:999px;font-weight:600}
.md-tag-blue{background:#EFF6FF;color:#2563EB}
.md-tag-gray{background:#F1F5F9;color:#475569}
.md-tag-amber{background:#FFFBEB;color:#92400E}
.md-tag-green{background:#ECFDF5;color:#065F46}
.md-tag-purple{background:#F5F3FF;color:#5B21B6}

/* Stats grid */
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:22px}
.md-stat{background:#F8FAFC;border-radius:12px;padding:14px 16px;border:1px solid #F1F5F9}
.md-stat-val{font-size:1.3rem;font-weight:700;color:#0F172A;font-family:'Space Grotesk',sans-serif}
.md-stat-label{font-size:.72rem;color:#94A3B8;margin-top:2px}

/* Section headings */
.md-sh{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;margin:0 0 10px}

/* Bullet list */
.md-points{list-style:none;padding:0;margin:0 0 20px}
.md-points li{padding:7px 0 7px 20px;position:relative;color:#475569;font-size:.9rem;border-bottom:1px solid #F8FAFC}
.md-points li:last-child{border-bottom:none}
.md-points li::before{content:'→';position:absolute;left:0;color:#2563EB;font-weight:700}

/* Divider */
.md-hr{height:1px;background:#F1F5F9;margin:20px 0}

/* Action buttons */
.md-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}
.md-btn-p{background:#2563EB;color:#fff;padding:10px 22px;border-radius:10px;font-size:.85rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.md-btn-p:hover{background:#1D4ED8}
.md-btn-g{border:1px solid #E2E8F0;color:#475569;padding:10px 20px;border-radius:10px;font-size:.85rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.md-btn-g:hover{border-color:#2563EB;color:#2563EB}

/* Back link */
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;font-size:.85rem;font-weight:600;color:#2563EB;text-decoration:none;opacity:.8}
.back-link:hover{opacity:1}

/* Extended — architectural detail sections */
.md-section{margin-top:28px}
.md-sub-sh{font-size:.82rem;font-weight:700;color:#1E293B;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.md-code-box{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:12px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.8rem;line-height:1.5;color:#334155;overflow-x:auto;margin:8px 0 16px}