/* ============================================================
   TẦNG 4 — TRANG "DỰ ÁN" (tổng kết + chi tiết, dùng chung 1 file)
   Bố cục học theo fredstedstudio.com/cases (đã được chủ site chỉ định).
   Chỉ chứa phần riêng; nút, ảnh, nhãn, dock... ở components.css.
   ============================================================ */

/* ---------- MỞ ĐẦU (dùng chung với trang cơ sở qua .mo-dau? KHÔNG —
   trang cơ sở giữ file riêng. Ở đây khai báo lại tối thiểu.) ---------- */
.bmh .da-dau{padding-top:var(--sp-xl);padding-bottom:var(--sp-l)}
.bmh .da-dau h1{font-family:var(--font-head);font-size:var(--fs-h1-phu);
  font-weight:400;letter-spacing:.14em;line-height:var(--lh-head);
  text-transform:uppercase;color:var(--ink)}

/* ---------- LƯỚI THẺ DỰ ÁN ----------
   13/08: chuyển lên components.css vì TRANG CHỦ mới cũng dùng (quy tắc vàng). */

/* ---------- TRANG CHI TIẾT ---------- */
/* dau trang: ten lon + dia diem can giua nhu casa-st */
.bmh .ct-dau{padding-top:var(--sp-xl);padding-bottom:var(--sp-l);text-align:center}
.bmh .ct-dau h1{font-family:var(--font-head);font-size:var(--fs-h1-phu);
  font-weight:400;letter-spacing:.14em;line-height:var(--lh-head);
  text-transform:uppercase;color:var(--ink)}
.bmh .ct-noi{margin-top:10px;font-family:var(--font-head);font-size:var(--fs-label);
  font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* mo ta: nhan trai, chu phai (nhu khoi Quan diem cua he) */
.bmh .ct-mota{padding-top:var(--sp-l);padding-bottom:var(--sp-l)}

/* chuoi anh nhip dieu (.ct-anh, .ct-caplech, .ct-hang2/3, .ct-nho/.ct-vua,
   zoom-settle, thi sai): 13/08 CHUYEN LEN components.css — trang chi tiet
   SAN PHAM cung dung (quy tac vang). O day chi con phan rieng cua du an. */

/* chan chi tiet: sang du an ke tiep */
.bmh .ct-chan{display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;margin-top:var(--sp-l);padding-top:26px;
  border-top:1px solid var(--hairline)}

/* (nhip "co to co nho" -> components.css 13/08) */

/* van ban xen ke — chu that tu trang web cu */
.bmh .ct-xen{max-width:56ch;padding-top:var(--sp-m);padding-bottom:var(--sp-m)}
.bmh .ct-xen--phai{margin-left:auto}
.bmh .ct-quote{font-family:var(--font-head);font-weight:300;
  font-size:clamp(21px,2.4vw,30px);letter-spacing:.12em;line-height:1.6;
  text-transform:uppercase;color:var(--ink)}

/* (hang doi lech 60/36 + hieu ung truot/tre dan -> components.css 13/08) */

/* ============================================================
   BO HIEU UNG "DAT TIEN" 2026 (sep duyet 12/08) — CSS thuan, khong JS.
   Nguyen tac: them CHIEU SAU va TRONG LUONG, khong them on ao.
   ============================================================ */

/* (B. zoom-settle + A. thi sai noi anh -> components.css 13/08) */

/* ---- C. HERO PHONG CHAM (Ken Burns) — cung nhip voi hero landing */
.bmh .ct-hero .img img{animation:bmh-ct-zoom 9s var(--ease) both}
@keyframes bmh-ct-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}

/* ---- D. VACH TIEN DO DOC: 2px sat mep tren, chay theo do cuon ---- */
@supports (animation-timeline: scroll()){
  .bmh ~ .doc-tien-do, .bmh .doc-tien-do{position:fixed;top:0;left:0;z-index:70;
    width:100%;height:2px;background:var(--ink);
    transform-origin:0 50%;transform:scaleX(0);
    animation:bmh-doc linear both;animation-timeline:scroll(root)}
  @keyframes bmh-doc{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Giam chuyen dong: phan chuoi anh da nam trong components.css */
@media (prefers-reduced-motion: reduce){
  .bmh .ct-hero .img img{animation:none}
}

/* ---------- (17/08 sếp) ẢNH DỌC full/vừa cao 3-4 màn cuộn → bóp còn ~1 màn (17/08 sếp: đồng bộ).
   Chỉ chạm ảnh KHÔNG có khung tỉ lệ (full/vua); ảnh ngang thấp hơn nên vô hại. */
.bmh .ct-anh > div > .img{overflow:hidden}
.bmh .ct-anh > div > .img img{max-height:100vh;object-fit:cover}

/* (18/08 — user chỉ khoảng trắng chữ↔ảnh trên mobile) SIẾT NHỊP MÀN NHỎ:
   đệm mô tả 48 + đệm đầu vùng ảnh 72 cộng dồn ~120px trắng. Desktop giữ. */
@media(max-width:700px){
  .bmh .ct-dau{padding-top:28px;padding-bottom:16px}
  .bmh .ct-mota{padding-top:22px;padding-bottom:22px}
  .bmh .ct-vung-boc{padding-top:8px;padding-bottom:28px}
  .bmh .ct-xen{padding-top:18px;padding-bottom:18px}
}

/* ---------- (17/08 sếp đợt 2, hình 4) HÀNG CHỮ + ẢNH CẠNH NHAU ----------
   Quote/đoạn xen nằm cột TRÁI lấp khoảng trống, ảnh dọc nhỏ cột PHẢI. */
.bmh .ct-xencanh{display:grid;grid-template-columns:1fr 36%;
  gap:clamp(24px,5vw,80px);align-items:center}
.bmh .ct-xencanh-chu{max-width:56ch}
.bmh .ct-xencanh-anh{min-width:0}
@media(max-width:760px){
  .bmh .ct-xencanh{grid-template-columns:1fr}
  .bmh .ct-xencanh-anh{width:72%;margin-left:auto}
}