/* ============================================================
   TẦNG 4 — TRANG CHỦ (bố cục fredstedstudio.com, chủ site chỉ định 13/08)
   Chỉ phần riêng; nút, ảnh, thẻ đá, cases, footer... ở components.css.
   ============================================================ */

/* ---------- HERO TRÀN MÀN: desktop 88vh · mobile 70svh (luật hệ) ---------- */
.bmh .tc-hero{position:relative;height:88vh;min-height:480px;overflow:hidden}
@media(max-width:768px){.bmh .tc-hero{height:70svh;min-height:420px}}
.bmh .tc-hero .img{position:absolute;inset:0}
.bmh .tc-hero .img img{width:100%;height:100%;object-fit:cover;
  animation:bmh-tc-zoom 9s var(--ease) both}
@keyframes bmh-tc-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}

/* Man che dam dan ve phia chu. Do tuong phan theo DIEM SANG NHAT TUYET DOI
   (gia dinh anh trang 255): DINH .68 cho chu header trong suot (nho, can 4.5)
   -> nen sang nhat 107 -> ~4.7 OK; vung h1 (~70%) ~.65 -> chu lon OK;
   chu nho duoi (~85%) ~.71 -> ~5.0 OK. Doc lap voi anh nen. */
.bmh .tc-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(38,38,38,.68) 0%, rgba(38,38,38,.42) 22%,
    rgba(38,38,38,.55) 50%, rgba(38,38,38,.78) 100%)}

/* (header trong suot -> components.css 14/08: landing cung dung — quy tac vang) */

/* ---------- BANG-RON LANDING ECO/WTP — tran man, noi bat ----------
   KHOANG THO tren/duoi (chu site 14/08): khong dinh lien hero va cum anh ghep */
.bmh .tc-bang{position:relative;overflow:hidden;
  margin-top:var(--sp-xl);
  min-height:clamp(380px,52vh,560px);display:flex;align-items:center}
.bmh .tc-bang .img{position:absolute;inset:0}
.bmh .tc-bang .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh .tc-bang:hover .img img{transform:scale(1.04)}
/* scrim deu .60 + day .74: chu lon >=3.0, chu nho nam thap >=4.5 */
.bmh .tc-bang::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(38,38,38,.60) 0%, rgba(38,38,38,.60) 60%, rgba(38,38,38,.74) 100%)}
.bmh .tc-bang .tag-render{z-index:2}
.bmh .tc-bang-chu{position:relative;z-index:2;text-align:center;color:var(--bone);
  padding-top:var(--sp-l);padding-bottom:var(--sp-l)}
.bmh .tc-bang-chu .eyebrow{color:rgba(243,238,231,.85)}
.bmh .tc-bang-chu h2{color:var(--bone);max-width:34ch;margin-left:auto;margin-right:auto}

/* ---------- KHOI ANH GHEP TRAN MEP (fredsted tiles) ----------
   Khong khe ho, khong bo trong .wrap — "hop nhat thanh 1 khoi".
   Nhan giua tam: dai bang mo .70 o giua de chu bone luon >=4.5. */
.bmh .tc-kham{display:grid;gap:0}
.bmh .tc-tile{position:relative;display:block;overflow:hidden}
.bmh .tc-tile .img{height:clamp(300px,44vh,520px)}
.bmh .tc-tile .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh .tc-tile:hover .img img{transform:scale(1.05)}
.bmh .tc-tile::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(38,38,38,.10) 32%, rgba(38,38,38,.70) 50%, rgba(38,38,38,.10) 68%)}
.bmh .tc-tile-nhan{position:absolute;left:0;right:0;top:50%;z-index:2;
  transform:translateY(-50%);text-align:center;
  font-family:var(--font-head);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bone)}
.bmh .tc-tile .tag-render{z-index:2}
.bmh .tc-tile-doi{display:grid;grid-template-columns:1fr 1fr;gap:0}
.bmh .tc-tile-doi .tc-tile{min-width:0}
/* granite (xuong-07): cat cup vao tam da van song o goc duoi trai */
.bmh .tc-tile--granite .img img{object-position:20% 88%}
@media(max-width:640px){
  .bmh .tc-tile .img{height:clamp(220px,32vh,320px)}
  .bmh .tc-tile-doi{grid-template-columns:1fr}
}

/* ---------- "BAM DE XEM MAU DA" — xo ra / thu lai kieu fredsted ---------- */
.bmh .tc-goi{display:block;position:relative;width:100%;overflow:hidden;
  border:0;border-radius:0;padding:0;background:none;cursor:pointer;text-align:center}
.bmh .tc-goi .img{display:block;height:clamp(320px,52vh,600px)}
.bmh .tc-goi .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh .tc-goi:hover .img img{transform:scale(1.04)}
/* dai bang mo giua cho nhan (tuong phan >=4.5 tren moi anh) */
.bmh .tc-goi::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(38,38,38,.08) 34%, rgba(38,38,38,.70) 50%, rgba(38,38,38,.08) 66%)}
.bmh .tc-goi-nhan{position:absolute;left:0;right:0;top:50%;z-index:2;
  transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  gap:14px;font-family:var(--font-head);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bone)}
.bmh .tc-goi-ten{transition:transform var(--t-slow) var(--ease)}
.bmh .tc-goi.mo .tc-goi-ten{transform:rotate(180deg)}

/* ---------- DAI ANH SHOWROOM lien mep (khoi Instagram cua fredsted) ---------- */
.bmh .tc-insta{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.bmh .tc-insta-o{display:block;min-width:0;overflow:hidden}
.bmh .tc-insta-o .img{display:block;height:clamp(180px,16vw,290px)}
.bmh .tc-insta-o .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh .tc-insta-o:hover .img img{transform:scale(1.06)}
@media(max-width:900px){.bmh .tc-insta{grid-template-columns:repeat(3,1fr)}
  .bmh .tc-insta-o .img{height:clamp(160px,30vw,240px)}}
@media(max-width:560px){.bmh .tc-insta{grid-template-columns:1fr 1fr}
  .bmh .tc-insta-o .img{height:clamp(150px,44vw,220px)}}

/* khoi xo/thu: luoi grid-rows 1fr <-> 0fr cho muot; KHONG JS = luon mo (.mo san) */
.bmh .tc-xo{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--t-slow) var(--ease)}
.bmh .tc-xo-trong{overflow:hidden;min-height:0}
.js .bmh .tc-xo:not(.mo){grid-template-rows:0fr}
@media(prefers-reduced-motion:reduce){
  .bmh .tc-bang .img img,.bmh .tc-tile .img img,.bmh .tc-goi .img img{transition:none}
  .bmh .tc-xo,.bmh .tc-goi-ten{transition:none}
}

.bmh .tc-hero-chu{position:absolute;left:0;right:0;bottom:clamp(48px,9vh,110px);
  z-index:2;color:var(--bone)}
.bmh .tc-hero-chu h1{font-family:var(--font-head);font-weight:300;
  font-size:var(--fs-hero);letter-spacing:.12em;line-height:var(--lh-hero);
  text-transform:uppercase;color:var(--bone);max-width:18ch;text-wrap:balance}
.bmh .tc-hero-chu p{max-width:52ch;color:rgba(243,238,231,.92);
  font-size:var(--fs-body-l)}

/* (o danh muc 4 cot cu -> thay bang .tc-kham tran mep, 14/08) */

/* ---------- QUAN ĐIỂM: 2 cột NGANG HÀNG ----------
   (17/08 sếp: bố cục so le cũ để lại 2 mảng trống chéo — kéo chữ lên) */
.bmh .tc-quandiem{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-m) clamp(24px,5vw,80px)}
.bmh .tc-quandiem-phai{margin-left:0}
@media(max-width:860px){.bmh .tc-quandiem{grid-template-columns:1fr}}

/* ---------- 3 thẻ dự án một hàng trên desktop ---------- */
.bmh .cases--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bmh .cases--3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.bmh .cases--3{grid-template-columns:1fr}}

/* ---------- (16/08 sếp duyệt) TÊN CÔNG TRÌNH THÀNH CHỮ DỌC góc trên-trái
   bên mép ảnh — theo khuôn thẻ fredsted ---------- */
.bmh .ct-doc{display:grid;grid-template-columns:auto 1fr;gap:0 10px;
  align-items:start}
.bmh .ct-doc-ten{writing-mode:vertical-rl;font-family:var(--font-head);
  font-size:var(--fs-label);font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);line-height:1.4;
  max-height:340px;overflow:hidden}
.bmh .ct-doc-anh{display:block;min-width:0}
.bmh .ct-doc .case-noi{display:block;text-align:left;margin-top:10px}

/* ===== BA CÔNG CỤ (26/08) — sếp chốt đặt link 3 công cụ ở trang chủ =====
   ⚠️ Khai ở đây chứ không mượn .cn-cc của trang công năng: trang chủ không
   nạp page-cong-nang.css (bẫy 47 — CSS nạp có điều kiện theo template). */
.bmh .tc-cc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(38,38,38,.16); }
.bmh .tc-cc-o{
  display:block; background:var(--bone); padding:26px 24px 28px;
  text-decoration:none; color:inherit;
  transition:background .5s var(--ease);
}
.bmh .tc-cc-o:hover{ background:#fff; }
.bmh .tc-cc-o b{
  display:block; font:400 13px/1.5 var(--font-head); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
.bmh .tc-cc-o span{ display:block; margin-top:10px; color:var(--muted); font-size:15px; line-height:1.6; }
.bmh .tc-cc-o::after{
  content:''; display:block; width:26px; height:1px; margin-top:16px;
  background:var(--ink); transition:width .5s var(--ease);
}
.bmh .tc-cc-o:hover::after{ width:52px; }
@media(max-width:900px){ .bmh .tc-cc{ grid-template-columns:1fr; } }

/* ===== (04/09 lo trinh 3.2) HANH TRINH MOT TAM DA — scrollytelling ===== */
.bmh .tch-luoi{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.bmh .tch-anh{ position:sticky; top:96px; }
.bmh .tch-khung{ position:relative; }
.bmh .tch-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1.25s cubic-bezier(.22,.61,.36,1), transform 1.5s cubic-bezier(.22,.61,.36,1); transform:scale(1.04); }
.bmh .tch-img.dang{ opacity:1; transform:scale(1); }
.bmh .tch-buoc{ list-style:none; margin:0; padding:0; }
.bmh .tch-b{ padding:12vh 0; border-top:1px solid rgba(38,38,38,.12); opacity:.45; transition:opacity .6s; }
.bmh .tch-b:first-child{ border-top:0; padding-top:2vh; }
.bmh .tch-b.dang{ opacity:1; }
.bmh .tch-so{ display:block; font:400 12px/1 var(--font-head); letter-spacing:.2em; color:var(--muted); margin-bottom:12px; }
.bmh .tch-b p{ margin-top:10px; max-width:42ch; }
@media(max-width:900px){
  .bmh .tch-luoi{ grid-template-columns:1fr; gap:20px; }
  .bmh .tch-anh{ position:relative; top:auto; }
  .bmh .tch-b{ padding:28px 0; opacity:1; }
}
@media(prefers-reduced-motion:reduce){ .bmh .tch-img{ transition:none; transform:none; } }