/* ============================================================
   TẦNG 4 — KHUÔN BÀI VIẾT DÙNG CHUNG (19 blog + 28 dự án cũ)
   Ruột bài giữ nguyên văn — file này chỉ "khoác áo" typography.
   ============================================================ */

/* ---------- ĐẦU BÀI ---------- */
.bmh .bv-dau{padding-bottom:var(--sp-l)}
/* tiêu đề bài dài (có bài >100 ký tự) — nhỏ hơn h1 trang một bậc */
.bmh .bv-dau h1{font-size:clamp(20px,2.6vw,32px);max-width:26em}
.bmh .bv-ngay{margin-top:14px;font-size:var(--fs-caption);color:var(--muted)}

/* ---------- RUỘT BÀI ----------
   Ruột là HTML phẳng Elementor lưu sẵn: p, ul/ol, strong, img, đôi khi h2/h3.
   Mọi thứ gom về cột đọc 66ch căn giữa; ảnh trong bài nở rộng hơn cột chữ. */
.bmh .prose{max-width:66ch;margin:0 auto}
.bmh .prose p{margin-top:1.4em}
.bmh .prose p:first-child{margin-top:0}
.bmh .prose ul,.bmh .prose ol{margin-top:1.2em;padding-left:1.4em}
.bmh .prose li{margin-top:.5em}
.bmh .prose li::marker{color:var(--muted)}
.bmh .prose strong,.bmh .prose b{font-weight:600;color:var(--ink)}
.bmh .prose h2,.bmh .prose h3,.bmh .prose h4{margin-top:2em;color:var(--ink)}
.bmh .prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* ảnh trong ruột: vuông góc, tràn hơn cột chữ một chút trên desktop */
.bmh .prose img{display:block;width:calc(100% + 120px);max-width:calc(100% + 120px);
  margin:2.2em -60px 0;height:auto;border-radius:0}
@media(max-width:860px){.bmh .prose img{width:100%;max-width:100%;margin-left:0;margin-right:0}}
/* iframe/video cũ nếu có — không tràn ngang */
.bmh .prose iframe,.bmh .prose video{max-width:100%}

/* ---------- KHUÔN CASE (bài công trình — kiểu case fredsted) ----------
   Hero .dv-hero + band .dv-full + .ct-vua dùng chung ở components.css. */
/* tiêu đề bài dài trên hero: hạ cỡ + lh 1.5 (nhiều dòng, dấu không được đè) */
.bmh .bv-case-h1{font-size:clamp(20px,2.6vw,34px) !important;
  line-height:var(--lh-head) !important;max-width:30em}
/* ảnh 64% giữ tỉ lệ tự nhiên (ảnh ruột bài đủ kiểu ngang/dọc) */
.bmh .bv-case-vua{display:block}
.bmh .bv-case-vua img{width:100%;height:auto;display:block}
/* ảnh trong CẶP ĐÔI: cao cố định theo --h của ct-caplech, cắt cover */
.bmh .bv-case-cap{display:block;height:var(--h)}
.bmh .bv-case-cap img{width:100%;height:100%;object-fit:cover;display:block}
/* zoom-settle: ảnh case vào ở 1.05 rồi "lắng" về 1.0 (hoà cùng fade .rev) */
.js .bmh .bv-case .rev .img img{transform:scale(1.05);
  transition:transform var(--t-reveal) var(--ease)}
.js .bmh .bv-case .rev.in .img img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .js .bmh .bv-case .rev .img img{transform:none;transition:none}}
/* (17/08 sếp) band hiện GẦN NGUYÊN TỈ LỆ — không ép cắt ngang 62vh nữa;
   chỉ chặn trần 115vh cho ảnh ngang rất cao */
.bmh .bv-case-anh .img{height:auto;max-height:100vh;overflow:hidden}
.bmh .bv-case-anh .img img{width:100%;height:auto;max-height:100vh;object-fit:cover}

/* (17/08 sếp) CHÚ THÍCH ĐÈ GÓC dưới-trái ảnh — hết hàng riêng để lại mảng trống */
.bmh .bv-ct{position:absolute;left:0;bottom:0;z-index:2;max-width:78%;
  padding:8px 14px;font-family:var(--font-head);font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.6;
  color:var(--bone);background:rgba(38,38,38,.55)}

/* khoảng thở dưới band có chú thích */
.bmh .bv-case-anh{padding-bottom:var(--sp-s)}
.bmh .bv-case-anh + .wrap,.bmh .bv-case .pad-l + .dv-full{margin-top:var(--sp-l)}
.bmh .bv-case > .wrap:last-child{padding-bottom:var(--sp-xl)}
/* tên bài dài ở "Công trình tiếp theo" — hạ cỡ so với tên dịch vụ ngắn */
.bmh .bv-next-link{font-size:clamp(16px,2.4vw,30px);line-height:var(--lh-head)}

/* ---------- DẢI THÔNG SỐ NGANG (Thông tin dự án / Vị trí / Phạm vi...) ----------
   Đồng bộ ngôn ngữ dải thông số trang chi tiết đá: cột nhãn + giá trị,
   kẻ chỉ trên, tự co giãn theo số nhóm. */
.bmh .bv-specs{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,3vw,48px);padding-top:var(--sp-m)}
.bmh .bv-spec{border-top:1px solid var(--hairline);padding-top:18px}
.bmh .bv-spec ul{margin-top:12px;list-style:none;padding:0}
.bmh .bv-spec li{font-size:var(--fs-body);color:var(--body);line-height:var(--lh-body)}
.bmh .bv-spec li+li{margin-top:4px}

/* ---------- CỤM 4 ẢNH HỢP NHẤT liền mép (như khối ghép trang chủ) ---------- */
.bmh .bv-cum4-goi{margin-top:var(--sp-l)}
.bmh .bv-cum4{display:grid;grid-template-columns:1fr 1fr;gap:6px;
  --h:clamp(210px,32vw,400px)}
.bmh .bv-cum4 .dv-o .img{height:var(--h)}
/* hiện trễ dần từng ô — hoà cùng fade .rev của cả cụm */
.js .bmh .bv-cum4-goi.rev .dv-o{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.js .bmh .bv-cum4-goi.rev .dv-o:nth-child(2){transition-delay:.12s}
.js .bmh .bv-cum4-goi.rev .dv-o:nth-child(3){transition-delay:.24s}
.js .bmh .bv-cum4-goi.rev .dv-o:nth-child(4){transition-delay:.36s}
.js .bmh .bv-cum4-goi.rev.in .dv-o{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .bmh .bv-cum4-goi.rev .dv-o{opacity:1;transform:none;transition:none}}

/* ---------- BAND "CÔNG TRÌNH TIẾP THEO" CÓ ẢNH NỀN ---------- */
.bmh .bv-next{position:relative;height:clamp(300px,50vh,480px);overflow:hidden}
.bmh .bv-next a{display:block;height:100%}
.bmh .bv-next .img{position:absolute;inset:0}
.bmh .bv-next .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh .bv-next a:hover .img img{transform:scale(1.05)}
.bmh .bv-next a::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(38,38,38,.35) 0%, rgba(38,38,38,.55) 55%, rgba(38,38,38,.80) 100%)}
.bmh .bv-next-chu{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,56px);
  z-index:2;display:block}
.bmh .bv-next-chu .eyebrow{color:var(--bone)}
.bmh .bv-next-ten{display:block;margin-top:12px;font-family:var(--font-head);
  font-weight:300;font-size:clamp(18px,2.6vw,34px);letter-spacing:.14em;
  line-height:var(--lh-head);text-transform:uppercase;color:var(--bone)}
.bmh .bv-next-ten svg{vertical-align:middle;margin-left:14px;
  transition:transform var(--t-ui) var(--ease)}
.bmh .bv-next a:hover .bv-next-ten svg{transform:translateX(12px)}
@media(prefers-reduced-motion:reduce){
  .bmh .bv-next .img img,.bmh .bv-next-ten svg{transition:none}}

/* ---------- ẢNH ĐẠI DIỆN THIẾU FILE (local) — khung giữ chỗ màu nền ---------- */
.bmh .img img{background:#CFC7BB}

/* (17/08 sếp đợt 2) MỌI ảnh khuôn case vừa 1 màn hình — kể cả khối 64% dọc */
.bmh .bv-case .ct-vua .img img,.bmh .bv-case .ct-vua .img{max-height:100vh}
.bmh .bv-case .ct-vua .img{overflow:hidden}
.bmh .bv-case .ct-vua .img img{object-fit:cover}

/* ---------- (17/08 sếp — mobile) CHÚ THÍCH KHÔNG ĐÈ ẢNH NHỎ ----------
   Trên điện thoại ô ảnh bé, caption dài che hết hình (sếp bắt).
   Ảnh FULL MÀN (band) thì đè vẫn OK (sếp xác nhận) — giữ overlay cho band. */
@media(max-width:700px){
  .bmh .dv-o .bv-ct{position:static;display:block;max-width:100%;
    padding:8px 0 0;background:none;color:var(--muted);letter-spacing:.12em}
}

/* ---------- (18/08 sếp — "khoảng trắng lớn") SIẾT NHỊP MOBILE ----------
   Trên điện thoại, đệm 40-48px của TỪNG khối cộng dồn thành mảng trống dài.
   Màn nhỏ cần nhịp gọn hơn ~45%: chữ-ảnh nối nhau, vẫn có khoảng thở.
   Desktop GIỮ NGUYÊN nhịp editorial. */
@media(max-width:700px){
  .bmh .bv-case .pad-l{padding-top:22px;padding-bottom:22px}
  .bmh .bv-case .pad-l + .dv-full{margin-top:22px}
  .bmh .bv-case-anh + .wrap{margin-top:22px}
  .bmh .bv-case .ct-vua.mt-l,.bmh .bv-case .ct-caplech.mt-l{margin-top:22px}
  .bmh .bv-cum4-goi{margin-top:22px}
  .bmh .bv-case > .wrap:last-child{padding-bottom:var(--sp-l)}
}