/* Trang giới thiệu showroom / xưởng dịch vụ (/showroom/{slug}); dùng chung lớp vd-* của vehicle-detail.css */
.sr-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
@media (max-width: 991px) { .sr-hero { grid-template-columns: 1fr; gap: 20px; } }
.sr-kind { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #004bb5; background: #eef4ff; padding: 4px 10px; border-radius: 999px; }
.sr-info h1 { font-size: 2rem; line-height: 1.3; font-weight: 800; margin: 12px 0 10px; }
@media (max-width: 600px) { .sr-info h1 { font-size: 1.55rem; } }
.sr-summary { color: #444; line-height: 1.7; margin: 0 0 18px; }
.sr-facts { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 14px; }
.sr-facts li { display: flex; gap: 12px; align-items: flex-start; }
.sr-facts i { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #eef4ff; color: #004bb5; display: inline-flex; align-items: center; justify-content: center; }
.sr-facts div { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.sr-facts strong { font-size: .82rem; color: #666; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sr-facts a { color: #004bb5; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.sr-open { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.sr-open.is-open { background: #ecfdf3; color: #166534; } .sr-open.is-closed { background: #fef2f2; color: #991b1b; }
.sr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-actions .vd-btn-primary { grid-column: 1 / -1; }
.sr-map { min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid #e6ebf2; background: #f4f6f9; }
.sr-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.sr-photo { margin: 32px 0 0; } .sr-photo img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.sr-content h2 { font-size: 1.35rem; font-weight: 800; margin: 28px 0 12px; }
.sr-content h3 { font-size: 1.1rem; font-weight: 700; margin: 20px 0 8px; }
.sr-content img { max-width: 100%; height: auto; border-radius: 10px; }
.sr-content ul, .sr-content ol { padding-left: 22px; margin: 0 0 12px; } .sr-content li { margin: 4px 0; }
.sr-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; } .sr-content td, .sr-content th { border: 1px solid #e6ebf2; padding: 8px 10px; }
.sr-content a { color: #004bb5; }
.sr-updated { font-size: .82rem; color: #888; margin: 16px 0 0; }
.sr-branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sr-branch { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #e6ebf2; border-radius: 12px; text-decoration: none !important; color: #333 !important; background: #fff; transition: border-color .2s, box-shadow .2s; }
.sr-branch:hover { border-color: #004bb5; box-shadow: 0 4px 14px rgba(0, 75, 181, .1); }
.sr-branch strong { color: #111; font-size: .98rem; } .sr-branch span { font-size: .85rem; line-height: 1.5; } .sr-branch i { color: #004bb5; width: 14px; }