/* ============================================================
   TRANG THEO CÔNG NĂNG — /da-op-bep/ · /da-op-cau-thang/ (25/08)
   Dùng lại .luoi-da, .cases, .dv-khoi-ten từ components.css.
   ============================================================ */
/* (02/09) khoi chu + anh xen ke trai/phai — sep che ban cu "toan chu, empty" */
.bmh .cn-khoi{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:28px 56px;
  align-items:center;
}
.bmh .cn-khoi--dao .cn-khoi-chu{ order:2; }
.bmh .cn-khoi--dao .cn-khoi-anh{ order:1; }
.bmh .cn-khoi-anh{ margin:0; }
.bmh .cn-khoi-anh .img{ display:block; overflow:hidden; }
.bmh .cn-khoi-anh img{ display:block; width:100%; height:auto; }
.bmh .cn-khoi-anh figcaption{
  margin-top:10px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
}
.bmh .cn-khoi + .cn-khoi{ margin-top:64px; }

.bmh .cn-congcu{ background:var(--bone); }
.bmh .cn-cc{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.bmh .cn-cc-o{
  display:block; padding:26px 24px; background:var(--ink); color:var(--bone);
  text-decoration:none; transition:background .4s cubic-bezier(.22,.61,.36,1);
}
.bmh .cn-cc-o:hover{ background:#1b1b1b; }
.bmh .cn-cc-o b{
  display:block; font:400 13px/1.5 var(--font-head); letter-spacing:.16em;
  text-transform:uppercase;
}
.bmh .cn-cc-o span{
  display:block; margin-top:8px; font-size:14px; line-height:1.7;
  color:rgba(243,238,231,.78);
}
.bmh .cn-chot{ background:var(--bone); }

@media(max-width:767.98px){
  .bmh .cn-cc{ grid-template-columns:1fr; }
  .bmh .cn-cc-o{ padding:20px 18px; }
  .bmh .cn-khoi + .cn-khoi{ margin-top:40px; }
  .bmh .cn-khoi{ grid-template-columns:1fr; gap:16px; }
  .bmh .cn-khoi--dao .cn-khoi-chu{ order:1; }
  .bmh .cn-khoi--dao .cn-khoi-anh{ order:2; }
}

/* nhịp: khối chữ cuối phải thở ra trước tiêu đề khối sau */
.bmh .cn-khoi:last-child{ margin-bottom:18px; }
.bmh .cn-congcu{ margin-top:14px; }

/* trang cầu thang chỉ có MỘT công cụ -> trải hết khung, không hụt nửa bên */
.bmh .cn-cc:has(> .cn-cc-o:only-child){ grid-template-columns:1fr; }
.bmh .cn-cc-o:only-child{ padding:30px 28px; }

/* ===== 02/09 — LỌC NHANH + XEM THÊM (sếp duyệt, theo Caesarstone/MSI) ===== */
.bmh .cn-loc{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.bmh .cn-loc[hidden]{ display:none; }
.bmh .cn-loc button{
  appearance:none; cursor:pointer; padding:10px 15px; min-height:42px;
  background:none; border:1px solid rgba(38,38,38,.28); color:var(--muted);
  font:400 11px/1 var(--font-head); letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.bmh .cn-loc button:hover{ border-color:var(--ink); color:var(--ink); }
.bmh .cn-loc button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bone); }
.bmh .the-da.the-an{ display:none; }
.bmh .cn-them-o{ margin-top:34px; margin-bottom:26px; }
.bmh .cn-them-o[hidden]{ display:none; }
.bmh .cn-them-o.tc{ text-align:center; }
@media(max-width:700px){
  .bmh .cn-loc{ gap:6px 8px; }
  .bmh .cn-loc button{ padding:9px 12px; font-size:10px; }
}

/* (02/09) the cong trinh: anh doc (Waterpoint 759x1024) lam 3 the cao lech
   nhau — khoa ti le 3:2, object-fit cover. Chi trang cong nang nap file nay
   nen khong dung .dv-cases cua trang dich vu (bay 15/47). */
.bmh .cases.dv-cases .case .img{ aspect-ratio:3/2; overflow:hidden; }
.bmh .cases.dv-cases .case .img img{ width:100%; height:100%; object-fit:cover; }

/* (02/09 sep: "hieu ung hinh anh chua giong cac trang khac")
   Nhan ban dung 3 hieu ung chuan cua he (components.css):
   1) zoom-settle: anh vao o 1.05 roi "lang" ve 1.0 khi .rev.in (nhu .ct-anh)
   2) man che veil tan khi re chuot (img--veil da co san — chi can hover truc tiep)
   3) zoom cham 1.06 khi re chuot (nhu a:hover .img img) */
.js .bmh .cn-khoi.rev .cn-khoi-anh .img img{transform:scale(1.05);
  transition:transform var(--t-reveal) var(--ease)}
.js .bmh .cn-khoi.rev.in .cn-khoi-anh .img img{transform:scale(1)}
.bmh .cn-khoi-anh:hover .img img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .js .bmh .cn-khoi.rev .cn-khoi-anh .img img{transform:none;transition:none}
}

/* the cong trinh + o cong cu: cung nhip reveal-settle */
.js .bmh .rev .cases.dv-cases .case .img img{transform:scale(1.05);
  transition:transform var(--t-reveal) var(--ease)}
.js .bmh .rev.in .cases.dv-cases .case .img img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .js .bmh .rev .cases.dv-cases .case .img img{transform:none;transition:none}
}

/* (02/09 quet mobile) nut Xem them cao 15px — qua mong cho ngon tay.
   Noi padding doc rieng nut nay (khong dung .btn--bare toan he). */
.bmh .cn-them-o .btn{ padding-top:14px; padding-bottom:14px; }
/* (04/09) hang chip mau + link trac nghiem */
.bmh .cn-loc-mau{ margin-top:8px; }
.bmh .cn-loc[hidden]{ display:none; }
.bmh .cn-tn-link{ display:block; margin-top:10px; color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(38,38,38,.35); width:max-content; max-width:100%; }