/* ============================================================
   TẦNG 4 — RIÊNG TRANG LANDING
   Chỉ chứa những gì KHÔNG dùng lại ở trang khác.
   Nút, ảnh, lưới, thanh Zalo... đã nằm ở components.css.
   ============================================================ */

/* HEADER đã chuyển lên components.css (trang thứ hai cũng dùng — quy tắc vàng). */

/* ---------- HERO ---------- */
.bmh .hero{position:relative;min-height:88vh;display:flex;
  align-items:flex-end;overflow:hidden}
/* 2 dòng: máy cũ không hiểu `svh` sẽ dùng `vh`.
   Chỉ viết svh thì máy cũ bỏ qua cả dòng → hero cao 88vh trên điện thoại. */
@media(max-width:768px){.bmh .hero{min-height:70vh;min-height:70svh}}

.bmh .hero .bg{position:absolute;inset:0}
.bmh .hero .bg img{width:100%;height:100%;object-fit:cover}

/* Lớp phủ đã ĐO bằng WCAG, không áng chừng.
   Ảnh render rất sáng (điểm sáng nhất sau chữ là rgb(240,237,226)).
   Cần alpha >= 0.55 tại vùng đặt chữ thì chữ 12px mới đạt 4.5:1.
   14/08: ĐỈNH nâng .30 -> .62 cho chữ HEADER TRONG SUỐT (bone, nhỏ)
   đạt 4.5 trên nền đen alpha .62 với điểm sáng tuyệt đối 255. */
.bmh .hero .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.16) 22%,
    rgba(0,0,0,.60) 46%,
    rgba(0,0,0,.74) 70%,
    rgba(0,0,0,.86) 100%)}

.bmh .hero .in{position:relative;z-index:2;width:100%;
  padding-top:clamp(90px,14vw,150px);padding-bottom:clamp(44px,7vw,96px)}

/* MÀN HÌNH THẤP (iPhone SE 320x568 va cac may cu tuong tu).
   Đệm 90px + chữ đẩy hero cao 590px > màn hình 568px
   -> nút "Nhắn Zalo / Gọi ngay" bị rơi khỏi màn hình, khách phải cuộn mới thấy.
   Đây là trang quảng cáo nên nút phải nhìn thấy ngay.
   Bắt theo CHIỀU CAO màn hình, không theo chiều rộng — máy rộng mà lùn cũng dính. */
@media(max-height:640px){
  .bmh .hero .in{padding-top:36px;padding-bottom:20px}
  .bmh .hero .sub{margin-top:12px}
  .bmh .hero .btn-row{margin-top:20px}
  .bmh .hero-h1{line-height:1.22}
}
.bmh .hero-h1{font-family:var(--font-head);font-size:var(--fs-hero);font-weight:300;
  letter-spacing:.10em;line-height:var(--lh-hero);color:#fff;text-transform:uppercase}

/* ---------- DAN CANH HERO LUC MO TRANG ----------
   CSS THUAN, khong can JS: nhan -> tieu de -> mo ta -> nut hien dan theo tang,
   anh nen phong cham gan nhu vo hinh (1.0 -> 1.045 trong 9s).
   Giay dau tien cua trang quang cao khong duoc "chet dung".
   JS hong van chay; tat het khi nguoi dung bat giam chuyen dong. */
@keyframes bmh-hero-len{from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}}
@keyframes bmh-hero-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}

.bmh .hero .eyebrow{animation:bmh-hero-len 1.1s var(--ease) .15s both}
.bmh .hero-h1     {animation:bmh-hero-len 1.25s var(--ease) .30s both}
.bmh .hero .sub   {animation:bmh-hero-len 1.25s var(--ease) .48s both}
.bmh .hero .btn-row{animation:bmh-hero-len 1.25s var(--ease) .66s both}
.bmh .hero .bg img{animation:bmh-hero-zoom 9s var(--ease) both}

@media(prefers-reduced-motion:reduce){
  /* Giam chuyen dong: giu MO DAN thuan (khong truot len, khong zoom nen).
     Tat sach thi giay dau cua trang quang cao "chet dung" — ly do o
     components.css, khoi giam chuyen dong. */
  .bmh .hero .eyebrow,.bmh .hero-h1,.bmh .hero .sub,
  .bmh .hero .btn-row{animation:bmh-hero-diu 1s ease both}
  @keyframes bmh-hero-diu{from{opacity:0}to{opacity:1}}
  .bmh .hero .bg img{animation:none}
}
/* màu ĐẶC, không làm mờ — chữ 12px trên ảnh cần mọi chút tương phản */
.bmh .hero .eyebrow{color:#F3EEE7}
.bmh .hero .sub{color:rgba(243,238,231,.92);font-size:var(--fs-body-l);
  max-width:48ch;margin-top:22px}
.bmh .hero .btn-row{margin-top:38px}
.bmh .hero .btn{color:var(--bone)}

/* ---------- KHỐI "NHẬN NHÀ THÔ" — bố cục editorial ----------
   Cột chữ CAO BẰNG ảnh: nội dung neo mép trên, hành động neo mép dưới.
   Nhờ vậy chữ và ảnh thẳng hàng ở CẢ hai mép — hết khoảng chết. */
.bmh .split-nha{display:grid;grid-template-columns:48fr 52fr;
  gap:clamp(24px,5vw,80px);align-items:stretch}
.bmh .cot-chu{display:flex;flex-direction:column;justify-content:space-between;
  gap:44px;padding-top:4px;padding-bottom:4px}

/* qr-mini + btn-maps-mb da chuyen len components.css (trang thu 2 dung chung) */

@media(max-width:900px){
  .bmh .split-nha{grid-template-columns:1fr}
  .bmh .cot-chu{gap:28px}
}

/* ---------- NỖI ĐAU -> GIẢI PHÁP ----------
   Moi hang la mot cap: TRAI = noi dau (loi khach tu hoi, so + cau hoi in hoa),
   PHAI = giai phap. Hien SAN, khong dong/mo — trang quang cao khong duoc
   giau phan thuyet phuc sau mot cu bam. */
.bmh .noidau .hang{display:grid;grid-template-columns:48fr 52fr;
  gap:clamp(20px,4vw,72px);border-top:1px solid var(--hairline);
  padding-top:38px;padding-bottom:38px}
.bmh .noidau .hang:last-child{border-bottom:1px solid var(--hairline)}

.bmh .noidau .n{font-family:var(--font-head);font-size:clamp(26px,3vw,38px);
  font-weight:300;letter-spacing:.06em;color:var(--muted);line-height:1.3;display:block}
.bmh .noidau .hoi{font-family:var(--font-head);font-size:var(--fs-h3);
  font-weight:400;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink);line-height:var(--lh-head);margin-top:14px}

.bmh .noidau .nhan{display:block;font-family:var(--font-head);
  font-size:var(--fs-label);font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted)}
.bmh .noidau .giai p{margin-top:14px;max-width:56ch;
  font-size:var(--fs-body);color:var(--body);line-height:var(--lh-body)}
.bmh .noidau .giai .btn{margin-top:20px}

/* hien dan SO LE: hang sau tre hon hang truoc mot nhip ngan */
.js .bmh .noidau .hang:nth-child(2){transition-delay:.15s}
.js .bmh .noidau .hang:nth-child(3){transition-delay:.30s}

@media(max-width:900px){
  .bmh .noidau .hang{grid-template-columns:1fr;gap:18px;
    padding-top:30px;padding-bottom:30px}
}

/* ---------- QUY TRÌNH 4 BƯỚC ---------- */
.bmh .steps>div{border-top:1px solid var(--hairline);padding-top:26px}
/* font-weight 400: xem QUY TAC DO DAM o dau components.css */
.bmh .steps .s{font-family:var(--font-head);font-size:var(--fs-label);
  letter-spacing:.26em;font-weight:400;text-transform:uppercase;color:var(--muted)}
.bmh .steps .t{font-family:var(--font-head);font-size:var(--fs-h3);
  letter-spacing:.16em;font-weight:400;text-transform:uppercase;color:var(--ink);
  margin-top:14px;line-height:var(--lh-head)}
.bmh .steps .d{margin-top:12px;font-size:var(--fs-caption);
  color:var(--muted);line-height:1.9}