/* ============================================================
   TẦNG 3 — COMPONENTS
   Khối dùng lại được ở MỌI trang: nút, ảnh, nhãn, thanh liên hệ, hiệu ứng.

   QUY TẮC VÀNG: sắp chép một đoạn CSS sang file trang thứ hai
   → DỪNG, đưa nó vào đây.
   ============================================================ */

/* ---------- HEADER ----------
   Chuyển lên đây từ page-landing.css khi làm trang thứ hai (quy tắc vàng:
   sắp chép CSS sang file thứ hai thì dừng, đưa lên components). */
.bmh .top{position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--hairline)}
/* padding-top/bottom RIÊNG LẺ — viết gộp sẽ xoá lề trái/phải của .wrap */
.bmh .top .in{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:18px;padding-bottom:18px}
.bmh .brand{font-family:var(--font-head);font-size:15px;letter-spacing:.22em;
  font-weight:400;text-transform:uppercase;color:var(--ink)}
.bmh .top .tel{font-family:var(--font-head);font-size:var(--fs-label);
  letter-spacing:.20em;font-weight:400;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;position:relative}
.bmh .top .tel::after{content:'';position:absolute;left:0;bottom:-6px;width:0;
  height:1px;background:currentColor;transition:width var(--t-slow) var(--ease)}
.bmh .top .tel:hover::after{width:100%}

/* Điện thoại: bỏ chữ "Hotline & Zalo", chỉ giữ số.
   Để nguyên cả cụm thì header rộng 407px trên màn 390px → trang trượt ngang. */
@media(max-width:640px){
  .bmh .top .tel .tel-nhan{display:none}
  .bmh .top .tel{font-size:11px;letter-spacing:.14em}
  .bmh .brand{font-size:13px;letter-spacing:.18em}
}

/* ---------- THANH MENU (ban 3 — 13/08) ----------
   Desktop: 3 muc HE MOI nam ngang + nut 3 gach mo panel DU MUC (nhu site that).
   Dien thoai: chi con nut 3 gach. Panel mo bang CHECKBOX thuan CSS (bay so 5). */
.bmh .menu-cb{position:absolute;opacity:0;pointer-events:none}
.bmh .menu{display:flex;gap:36px;align-items:center;margin-left:auto;
  margin-right:clamp(20px,3vw,44px)}
.bmh .menu a{font-family:var(--font-head);font-size:var(--fs-label);
  font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  position:relative;white-space:nowrap}
.bmh .menu a::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-slow) var(--ease)}
.bmh .menu a:hover::after,.bmh .menu a:focus-visible::after{transform:scaleX(1)}
/* 16/08: menu ngang len 5 muc (sep chot thu tu) -> can ~1150px moi du cho;
   duoi nguong nay an di, khach dung nut 3 gach (menu day du van con) */
@media(max-width:1199.98px){.bmh .menu{display:none}}

/* nut 3 gach — hien o MOI kho (site that cung dung hamburger ca desktop) */
.bmh .menu-nut{display:flex;flex-direction:column;gap:5px;order:9;
  padding:10px 0 10px 16px;cursor:pointer}
.bmh .menu-nut span{display:block;width:22px;height:1px;background:var(--ink);
  transition:transform var(--t-ui) var(--ease),opacity var(--t-ui) var(--ease)}
/* checkbox mo -> 3 gach thanh dau X */
.bmh .menu-cb:checked ~ .menu-nut span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bmh .menu-cb:checked ~ .menu-nut span:nth-child(2){opacity:0}
.bmh .menu-cb:checked ~ .menu-nut span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- HEADER TRONG SUOT tren trang co hero tran man ----------
   Ap cho body.bmh-hero-tren (trang chu + landing — functions.php gan class).
   Khong JS: absolute, trong suot, chu bone, cuon troi theo (khong che noi dung).
   Co JS (parts/js-chung): qua 40px them .top--dac -> ghim + nen trang. */
.bmh.bmh-hero-tren .top{position:absolute;top:0;left:0;right:0;
  background:transparent;border-bottom:1px solid rgba(243,238,231,.22)}
.bmh.bmh-hero-tren .top .brand,.bmh.bmh-hero-tren .top .tel,
.bmh.bmh-hero-tren .top .menu a{color:var(--bone)}
.bmh.bmh-hero-tren .top .menu-nut span{background:var(--bone)}
.bmh.bmh-hero-tren .top--dac{position:fixed;background:var(--white);
  border-bottom:1px solid var(--hairline);
  animation:bmh-top-xuong var(--t-ui) var(--ease)}
@keyframes bmh-top-xuong{from{transform:translateY(-100%)}to{transform:none}}
.bmh.bmh-hero-tren .top--dac .brand,.bmh.bmh-hero-tren .top--dac .tel,
.bmh.bmh-hero-tren .top--dac .menu a{color:var(--ink)}
.bmh.bmh-hero-tren .top--dac .menu-nut span{background:var(--ink)}
@media(prefers-reduced-motion:reduce){.bmh.bmh-hero-tren .top--dac{animation:none}}

/* ---------- PANEL TOAN MAN HINH nen toi (ban 4 — kieu fredsted) ----------
   Checkbox thuan CSS. Mo: hien + mo dan (opacity/visibility);
   dong: X goc phai hoac chinh nut 3 gach (da bien thanh X duoi lop phu? —
   panel phu len het nen dung nut X rieng ben trong). */
.bmh .menu-full{position:fixed;inset:0;z-index:80;
  background:var(--ink);color:rgba(243,238,231,.8);
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-ui) var(--ease),visibility 0s linear var(--t-ui)}
.bmh .menu-cb:checked ~ .menu-full{opacity:1;visibility:visible;
  transition:opacity var(--t-ui) var(--ease)}
/* khoa cuon nen khi menu mo (trinh duyet cu khong ho tro :has thi bo qua,
   panel van dung — chi la nen cuon duoc phia sau) */
html:has(.bmh .menu-cb:checked){overflow:hidden}

.bmh .mf-trong{display:flex;flex-direction:column;min-height:100%;
  padding-top:22px;padding-bottom:34px}
.bmh .mf-dau{display:flex;justify-content:space-between;align-items:center}
.bmh .brand--sang{color:var(--bone)}
.bmh .mf-dong{display:flex;padding:12px;margin-right:-12px;cursor:pointer;
  color:var(--bone);transition:opacity var(--t-ui) var(--ease)}
.bmh .mf-dong:hover{opacity:.6}

.bmh .mf-cot{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,4vw,64px);margin-top:clamp(48px,10vh,120px)}
.bmh .mf-nhom{min-width:0}
.bmh .mf-tieu-de{font-family:var(--font-head);font-size:var(--fs-h3);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);line-height:var(--lh-head);margin-bottom:22px}
.bmh .mf-nhom a{display:block;padding:9px 0;
  font-family:var(--font-head);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,238,231,.62);transition:color var(--t-ui) var(--ease)}
.bmh .mf-nhom a:hover,.bmh .mf-nhom a:focus-visible{color:#fff}

/* hang tien ich duoi cung, can giua nhu fredsted */
.bmh .mf-duoi{display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px 44px;margin-top:auto;padding-top:clamp(40px,8vh,90px)}
.bmh .mf-duoi a{font-family:var(--font-head);font-size:var(--fs-label);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,238,231,.62);transition:color var(--t-ui) var(--ease)}
.bmh .mf-duoi a:hover{color:#fff}

@media(max-width:900px){
  .bmh .mf-cot{grid-template-columns:1fr 1fr;margin-top:48px;row-gap:40px}
}
@media(max-width:560px){
  .bmh .mf-cot{grid-template-columns:1fr;row-gap:36px}
  .bmh .mf-duoi{flex-direction:column;align-items:center;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  .bmh .menu a::after,.bmh .menu-nut span{transition:none}
  .bmh .menu-full{transition:none}
}
@media(hover:none){
  .bmh .top .tel::before,.bmh .brand::before{content:'';position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .bmh .brand{position:relative}
}

/* ---------- QUY TẮC ĐỘ ĐẬM — chống "chỗ ốm chỗ béo" ----------
   Thân trang đặt font-weight 300. Thẻ tiêu đề thật (h1 h2 h3 h4) được nâng lên 400.
   NHƯNG nhiều khối NHÌN như tiêu đề lại là div/span (tên công trình, "Bước 01",
   nhãn ảnh…) nên chúng rơi về 300 -> nằm cạnh nhau thấy chỗ mỏng chỗ dày.

   QUY TẮC: mọi thứ dùng font tiêu đề (Montserrat) đều đậm 400.
   Ngoại lệ CÓ CHỦ Ý ở cuối khối này: cỡ chữ lớn mới để 300 cho thanh thoát. */
.bmh .caption .name,
.bmh .num-list .t,
.bmh .tag-render,
.bmh .ph{font-weight:400}

/* ---------- NÚT: chữ + gạch chân nở rộng ---------- */
.bmh .btn{display:inline-flex;align-items:center;gap:16px;
  font-family:var(--font-head);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
  background:none;border:0;border-radius:0;padding:0;cursor:pointer;
  transition:color var(--t-slow) var(--ease)}
.bmh .btn::after{content:'';display:block;width:52px;height:1px;
  background:currentColor;transition:width var(--t-slow) var(--ease)}
.bmh .btn:hover::after,.bmh .btn:focus-visible::after{width:92px}

/* Bien the GACH CHAN — cho link GOI DIEN dung canh nut khung.
   Vach ngang mac dinh nam SAU chu, canh so dien thoai trong nhu chuoi "-----".
   Thay bang gach chan MANH duoi chu: nghi mo 35%, hover dam len
   — cung ngon ngu voi so hotline tren header. */
.bmh .btn--bare{position:relative}
.bmh .btn--bare::after{position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:currentColor;opacity:.35;
  transition:opacity var(--t-slow) var(--ease)}
.bmh .btn--bare:hover::after,.bmh .btn--bare:focus-visible::after{opacity:1}

/* Bien the DAN HUONG: chu + mui ten, danh cho link SANG TRANG KHAC.
   Khac voi vach ngang mac dinh (trong nhu gach dau dong lac giua dong),
   mui ten noi ro "bam vao la di" — cung ngon ngu voi nhan tren the anh.
   Hover: mui ten truot toi truoc. */
.bmh .btn--dir::after{display:none}
.bmh .btn--dir svg{transition:transform var(--t-slow) var(--ease)}
.bmh .btn--dir:hover svg,.bmh .btn--dir:focus-visible svg{transform:translateX(10px)}

.bmh .btn--light{color:var(--bone)}
.bmh .btn--box{padding:15px 30px;border:1px solid currentColor;letter-spacing:.22em;
  transition:background var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}
.bmh .btn--box::after{display:none}
.bmh .btn--box:hover{background:var(--ink);color:var(--bone)}
.bmh .bg-dark .btn--box:hover,.bmh .hero .btn--box:hover{background:var(--bone);color:var(--ink)}
.bmh .btn-row{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center}

/* ---------- HERO TRÀN MÀN TRANG CON ----------
   (tên .dv-hero mang tính lịch sử — sinh ra ở trang dịch vụ, 15/08 chiều
   dời lên đây khi trang Cơ sở dùng lại.) Cùng thông số hero trang chủ:
   88vh/70svh, zoom 9s, MÀN CHE TÍNH SẴN (đỉnh .68 cho header trong suốt,
   đáy .78 cho chữ — đạt AA với mọi ảnh). Nhớ gắn body .bmh-hero-tren. */
.bmh .dv-hero{position:relative;height:88vh;min-height:480px;overflow:hidden}
@media(max-width:768px){.bmh .dv-hero{height:70svh;min-height:420px}}
.bmh .dv-hero .img{position:absolute;inset:0}
.bmh .dv-hero .img img{width:100%;height:100%;object-fit:cover;
  animation:bmh-dv-zoom 9s var(--ease) both}
@keyframes bmh-dv-zoom{from{transform:scale(1)}to{transform:scale(1.045)}}
.bmh .dv-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%)}
.bmh .dv-hero-chu{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,88px);
  z-index:2;margin:0 auto}
.bmh .dv-hero-chu .eyebrow{color:var(--bone)}
.bmh .dv-hero-chu h1{margin-top:14px;font-family:var(--font-head);
  font-size:var(--fs-hero);font-weight:300;letter-spacing:.14em;
  line-height:var(--lh-hero);text-transform:uppercase;color:var(--bone)}
.bmh .dv-hero .tag-render{z-index:2}
/* nút chữ màu bone khi nằm trong hero (neo cuộn kiểu fredsted) */
.bmh .dv-hero .btn--bare{color:var(--bone)}
.bmh .dv-hero .btn--bare::after{background:var(--bone)}
@media(prefers-reduced-motion:reduce){.bmh .dv-hero .img img{animation:none}}

/* ---------- BAND FULL-BLEED — ảnh tràn hết chiều ngang màn hình ---------- */
.bmh .dv-full{width:100%}
.bmh .dv-full .img{display:block;height:clamp(340px,62vh,660px)}
.bmh .dv-full .img img{width:100%;height:100%;object-fit:cover}

/* ---------- Ô ẢNH TRONG LƯỚI ct-* (figure .dv-o — dịch vụ + bài case) ---------- */
.bmh .dv-o{margin:0;min-width:0}
.bmh a.img{display:block}
/* 17/08 dot 2 — BUG H8: span.img la INLINE nen khong nhan chieu cao ->
   anh tran ra ngoai the, hang duoi DE len chu ten cong trinh. */
.bmh span.img{display:block}
.bmh a.img:hover img{transform:scale(1.06)}
/* trượt cặp: .ct-caplech nhắm .img:first-child — trong figure ảnh nào cũng
   first-child, chỉnh lại hướng cho ô thứ hai */
.js .bmh .ct-caplech.rev .dv-o:last-child .img{transform:translateX(26px);
  transition-delay:.14s}
.js .bmh .ct-caplech.rev.in .dv-o .img{transform:none}
.bmh .ct-vua--phai{margin-left:auto}
@media(max-width:700px){.bmh .ct-vua,.bmh .ct-vua--phai{width:100%}}

/* ---------- LƯỚI CASE 3 CỘT (fredsted /cases/) — dịch vụ + về chúng tôi + bài viết ----------
   selector kép .cases.dv-cases để THẮNG khai báo .cases (2 cột) nằm phía dưới */
.bmh .cases.dv-cases{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bmh .cases.dv-cases{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bmh .cases.dv-cases{grid-template-columns:1fr}}
/* tiêu đề bài dài trong thẻ — hạ cỡ, canh trái cho dễ quét */
.bmh .dv-cases .dv-case-ten{font-size:var(--fs-caption);letter-spacing:.14em;
  text-align:left;margin-top:16px}
.bmh .dv-cases .case-noi{text-align:left;margin-top:4px}

/* ---------- DANH SÁCH BÀI VIẾT KIỂU JOURNAL (fredsted) ----------
   Dùng ở: 3 trang dịch vụ + khuôn bài viết ("Bài viết khác").
   Hàng = chuyên mục | tiêu đề | mũi tên; kẻ chỉ mảnh giữa các hàng. */
.bmh .dv-bai a{display:grid;grid-template-columns:200px 1fr auto;
  gap:14px clamp(18px,3vw,48px);align-items:baseline;
  padding:22px 0;border-top:1px solid var(--hairline)}
.bmh .dv-bai a:last-child{border-bottom:1px solid var(--hairline)}
.bmh .dv-bai-cat{font-family:var(--font-head);font-size:var(--fs-label);
  font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.bmh .dv-bai-ten{font-family:var(--font-head);font-size:var(--fs-body);
  font-weight:400;letter-spacing:.14em;line-height:var(--lh-head);
  text-transform:uppercase;color:var(--ink)}
.bmh .dv-bai svg{color:var(--muted);transition:transform var(--t-ui) var(--ease)}
.bmh .dv-bai a:hover svg{transform:translateX(8px);color:var(--ink)}
@media(max-width:700px){
  .bmh .dv-bai a{grid-template-columns:1fr auto;gap:8px 16px}
  .bmh .dv-bai-cat{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){.bmh .dv-bai svg{transition:none}}

/* ---------- (17/08 sếp) TÊN KHỐI NĂNG LỰC NỔI BẬT ----------
   "Đa dạng / Quy mô / Nhân sự..." nhận diện năng lực bmh — trước là eyebrow
   12px mờ, giờ thành tiêu đề lớn đứng được trước đoạn nội dung. */
.bmh .dv-khoi-ten{font-family:var(--font-head);font-size:var(--fs-h2);
  font-weight:400;letter-spacing:.16em;line-height:var(--lh-head);
  text-transform:uppercase;color:var(--ink)}

/* ---------- MỞ ĐẦU TRANG CON ----------
   Trang con không dùng hero ảnh full màn: khách cần thấy nội dung ngay.
   Dời từ page-coso.css lên đây khi trang Về chúng tôi dùng lại (15/08 —
   quy tắc vàng: dùng ở trang thứ 2 là lên components). */
.bmh .mo-dau{padding-top:var(--sp-xl);padding-bottom:var(--sp-xl)}
.bmh .mo-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)}

/* ---------- ẢNH: vuông góc tuyệt đối, zoom chậm ---------- */
.bmh .img{position:relative;overflow:hidden;border-radius:0;background:#CFC7BB}
.bmh .img img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease)}
.bmh a:hover .img img,.bmh .tile:hover .img img{transform:scale(1.06)}

.bmh .r-1x1{aspect-ratio:1/1}
.bmh .r-3x4{aspect-ratio:3/4}
.bmh .r-4x3{aspect-ratio:4/3}   /* anh chup ngang tai xuong (1800x1350) */
.bmh .r-16x9{aspect-ratio:16/9} /* anh mat tien showroom (1800x1013) */
.bmh .r-4x5{aspect-ratio:4/5}
.bmh .r-16x7{aspect-ratio:16/7}
@media(max-width:768px){.bmh .r-16x7{aspect-ratio:4/3}}

/* Dự phòng Safari < 15 chưa hiểu aspect-ratio.
   Thiếu đoạn này thì khung ảnh cao 0px và TOÀN BỘ ẢNH BIẾN MẤT. */
@supports not (aspect-ratio: 1 / 1){
  .bmh .r-1x1,.bmh .r-3x4,.bmh .r-4x3,.bmh .r-16x9,.bmh .r-4x5,.bmh .r-16x7{height:0;overflow:hidden}
  .bmh .r-1x1{padding-top:100%}
  .bmh .r-3x4{padding-top:133.333%}
  .bmh .r-4x3{padding-top:75%}
  .bmh .r-16x9{padding-top:56.25%}
  .bmh .r-4x5{padding-top:125%}
  .bmh .r-16x7{padding-top:43.75%}
  @media(max-width:768px){.bmh .r-16x7{padding-top:75%}}
  .bmh .img img{position:absolute;top:0;left:0;width:100%;height:100%}
  .bmh .img .ph{position:absolute;top:0;left:0;right:0;bottom:0}
}

/* ---------- MÀN CHE TAN DẦN khi rê chuột ----------
   Thay cho hiệu ứng đen trắng của các trang portfolio kiến trúc.
   LÝ DO KHÔNG DÙNG ĐEN TRẮNG: mình bán ĐÁ, khách mua chính là vân và màu.
   Lớp phủ mỏng cho ảnh "trầm" lúc nghỉ rồi bừng lên khi rê chuột,
   giữ đúng khoảnh khắc đó mà KHÔNG giết màu.
   z-index 1 = nằm trên ảnh nhưng DƯỚI nhãn "phối cảnh" (z-index 2). */
.bmh .img--veil::after{content:'';position:absolute;inset:0;z-index:1;
  background:var(--ink);opacity:.18;pointer-events:none;
  transition:opacity var(--t-slow) var(--ease)}
.bmh .img--veil:hover::after,
.bmh a:hover .img--veil::after,
.bmh .tile:hover .img--veil::after{opacity:0}

/* Điện thoại/máy tính bảng KHÔNG rê chuột được → bỏ hẳn lớp phủ,
   nếu không khách mobile sẽ thấy ảnh trầm vĩnh viễn. */
@media(hover:none){.bmh .img--veil::after{opacity:0}}

/* ---------- DẢI ẢNH TRƯỢT NGANG ----------
   AN TOÀN: đây là danh sách flex cuộn ngang được bằng ngón tay/bàn di.
   JS chỉ THÊM nút mũi tên. JS hỏng = vẫn vuốt xem được bình thường. */
.bmh .rail{position:relative}
.bmh .rail-track{display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.bmh .rail-track::-webkit-scrollbar{display:none}
.bmh .rail-item{flex:0 0 clamp(230px,25vw,360px);scroll-snap-align:start}

/* THE CUOI phai hit theo MEP PHAI.
   Neu de 'start' nhu cac the khac: vi tri hit cua no nam NGOAI tam keo duoc
   (vd dien thoai can keo toi 2728px nhung toi da chi keo duoc 2608px),
   ma 'mandatory' bat buoc phai dung o mot diem hit -> trinh duyet BAT NGUOC lai
   -> khach khong bao gio xem duoc anh cuoi. Man hinh cang rong mat cang nhieu anh
   (do duoc: dien thoai mat 1 anh, iPad mat 2, laptop mat 3). */
.bmh .rail-item:last-child{scroll-snap-align:end}

/* Mũi tên CHỈ hiện khi JS chạy được — không thì bấm vào không có gì xảy ra */
.bmh .rail-nav{display:none}
.js .bmh .rail-nav{display:flex;gap:26px;align-items:center;margin-bottom:30px}
.bmh .rail-nav button{background:none;border:0;border-radius:0;padding:6px 0;
  color:var(--ink);cursor:pointer;line-height:0;
  transition:opacity var(--t-ui) var(--ease)}
.bmh .rail-nav button[disabled]{opacity:.25;cursor:default}
.bmh .rail-nav button:not([disabled]):hover{opacity:.55}
/* Điện thoại: vuốt ngón tay là đủ, mũi tên chỉ tổ chật chỗ */
@media(max-width:768px){.js .bmh .rail-nav{display:none}}

/* ---------- NHÃN "PHỐI CẢNH" — BẮT BUỘC trên mọi ảnh render ---------- */
/* ⚠️ 17/08: SẾP QUYẾT ĐỊNH BỎ nhãn "Phối cảnh..." trên mọi ảnh render
   (kể cả Eco chưa thi công — đã cảnh báo rủi ro, sếp vẫn chốt bỏ).
   TẮT bằng display:none để đổi ý là bật lại 1 dòng. */
.bmh .tag-render{display:none !important}
.bmh .tag-render{position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--font-head);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.6;
  color:var(--bone);background:rgba(38,38,38,.82);padding:8px 14px}
/* Tren anh NHO (cap 43% o di dong) nhan 2 dong che mat 1/4 tam anh
   -> thu gon nhung VAN GIU du chu (nhan su that, khong duoc bo). */
@media(max-width:640px){
  .bmh .tag-render{font-size:8px;letter-spacing:.12em;padding:5px 9px;line-height:1.5}
}

/* ---------- Ô GIỮ CHỖ khi chưa có ảnh thật ---------- */
.bmh .ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
  font-family:var(--font-head);font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;line-height:2;color:#6d6255;background:#DED6C9}
.bmh .ph b{font-weight:400;font-size:13px;letter-spacing:.24em;color:#4a4136}

/* ---------- CHÚ THÍCH DƯỚI ẢNH ---------- */
.bmh .caption .name{font-family:var(--font-head);font-size:var(--fs-label);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);line-height:1.6}
.bmh .caption .meta{font-size:var(--fs-caption);color:var(--muted);
  margin-top:6px;line-height:1.7}

/* ---------- DANH SÁCH ĐÁNH SỐ (01 02 03 04) ---------- */
.bmh .num-list>div{border-top:1px solid var(--hairline);padding-top:26px}
.bmh .num-list .n{font-family:var(--font-head);font-size:clamp(26px,3vw,38px);
  font-weight:300;letter-spacing:.06em;color:var(--ink);line-height:1.3}
.bmh .num-list .t{font-family:var(--font-head);font-size:var(--fs-h3);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  margin-top:14px;line-height:var(--lh-head)}
.bmh .num-list .d{margin-top:12px;font-size:var(--fs-caption);
  color:var(--muted);line-height:1.9}
.bmh .bg-dark .num-list>div{border-top-color:rgba(243,238,231,.22)}
.bmh .bg-dark .num-list .n,.bmh .bg-dark .num-list .t{color:var(--bone)}
.bmh .bg-dark .num-list .d{color:rgba(243,238,231,.72)}

/* ---------- THANH HOTLINE / ZALO CỐ ĐỊNH ---------- */
/* ---------- THANH GOI/ZALO — CHI DIEN THOAI ----------
   Sep chot 12/08: desktop BO (header ghim hotline du roi),
   dien thoai GIU thanh ngang duoi day vi dep + vung bam chuan 56px. */
.bmh .dock{display:none}
@media(max-width:768px){
  .bmh .dock{display:flex;position:fixed;right:0;left:0;bottom:0;z-index:60;
    flex-direction:row}
  .bmh .dock a{flex:1;height:56px;display:flex;align-items:center;
    justify-content:center;gap:10px;font-family:var(--font-head);font-size:11px;
    font-weight:400;letter-spacing:.18em;text-transform:uppercase;
    background:var(--ink);color:var(--bone);border-radius:0;
    transition:background var(--t-ui) var(--ease)}
  .bmh .dock a:active{background:var(--clay)}
  .bmh .dock a+a{border-left:1px solid rgba(243,238,231,.22)}
  body.bmh{padding-bottom:56px}
}

/* ---------- Ô MÃ QR ----------
   Chuyển lên đây từ page-coso.css khi trang landing cũng cần (quy tắc vàng). */
.bmh .qr{display:flex;align-items:center;gap:20px;margin-top:var(--sp-m);
  border:1px solid var(--hairline);padding:18px}
.bmh .qr img,.bmh .qr .khung{width:104px;height:104px;flex:0 0 104px}
/* Ma QR phai nam tren NEN TRANG. De nen mau thi may quet van doc duoc
   nhung kho hon han khi anh sang yeu hoac cam nghieng. */
.bmh .qr img{background:#fff}
.bmh .qr .khung{background:#DED6C9;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:8px;
  font-family:var(--font-head);font-size:10px;font-weight:400;letter-spacing:.14em;
  line-height:1.6;text-transform:uppercase;color:#6d6255}
.bmh .qr .chu{font-size:var(--fs-caption);color:var(--body);line-height:1.7}
@media(max-width:480px){
  .bmh .qr{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- THẺ ẢNH DẪN SANG TRANG KHÁC ----------
   Ảnh nền + dòng nhãn, cả thẻ là MỘT liên kết. Dùng ở khối "Nhận nhà thô?". */
.bmh .card-link{display:block;position:relative}
.bmh .card-link .card-nhan{position:absolute;left:0;bottom:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(38,38,38,.82);color:var(--bone);padding:14px 18px;
  font-family:var(--font-head);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.6}
.bmh .card-link .card-nhan svg{flex:0 0 auto}

/* ---------- MÃ QR — dòng phụ trợ ----------
   Nhỏ, không đóng khung to, ngăn bằng vạch mảnh. Nền QR PHẢI trắng.
   DIEN THOAI (<=640px): an han — khong ai quet duoc ma tren chinh may
   minh dang cam; thay bang nut "Mo ban do" (them class btn-maps-mb vao link). */
.bmh .qr-mini{display:flex;align-items:center;gap:18px;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--hairline)}
.bmh .qr-mini img{width:80px;height:80px;flex:0 0 80px;background:#fff}
.bmh .qr-mini span{font-size:var(--fs-caption);color:var(--muted);
  line-height:1.7;max-width:34ch}
.bmh .btn-maps-mb{display:none}
@media(max-width:640px){
  .bmh .qr-mini{display:none}
  .bmh .btn-maps-mb{display:inline-flex;margin-top:26px}
}

/* ---------- NÚT NỔI "VỀ ĐẦU TRANG" ----------
   Đi theo suốt trang, đậu NGAY TRÊN cột Gọi/Zalo — cùng ô vuông mono
   để ba nút thành một cột điều khiển thống nhất.
   Mặc định ẨN (đầu trang thì nút này vô nghĩa); JS thêm class .hien
   sau khi cuộn qua ~1.2 màn hình. Không có JS: ẩn luôn — đã có link
   "Về đầu trang" ở chân trang làm đường dự phòng. */
/* KHONG dong hop (feedback sep 11/08): chi mot mui ten dai, tran troi.
   Mau BONE + mix-blend difference => tren nen sang tu thanh sam, nen toi
   tu thanh sang — mui ten khong bao gio chim. Trinh duyet khong ho tro
   blend thi giu mau muc trong khoi @supports ben duoi. */
.bmh .noi-len{position:fixed;right:34px;bottom:32px;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:8px;color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease),
    visibility 0s linear var(--t-ui)}
.bmh .noi-len.hien{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.bmh .noi-len:hover svg{transform:translateY(-6px)}
.bmh .noi-len svg{transition:transform var(--t-slow) var(--ease)}
@supports(mix-blend-mode:difference){
  .bmh .noi-len{color:var(--bone);mix-blend-mode:difference}
}
@media(max-width:768px){
  .bmh .noi-len{right:18px;bottom:76px}
}

/* ---------- CHÂN TRANG (ban 2) ----------
   Hang tren: 4 cot ro rang (thuong hieu rong hon | tru so | showroom | lien he)
   Thanh duoi: © ben trai · "Ve dau trang" ben phai, ngan bang vach manh. */
.bmh .ft{background:var(--ink);color:rgba(243,238,231,.72);
  padding-top:var(--sp-xl);padding-bottom:34px}
.bmh .ft .brand,.bmh .ft h4{color:var(--bone)}
.bmh .ft h4{font-family:var(--font-head);font-size:11px;letter-spacing:.24em;
  font-weight:400;margin-bottom:16px;opacity:.65}
.bmh .ft li{list-style:none;font-size:var(--fs-caption);line-height:2.1}
.bmh .ft a{transition:color var(--t-ui) var(--ease)}
.bmh .ft a:hover{color:#fff}

.bmh .ft-tren{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.bmh .ft-tren{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:560px){.bmh .ft-tren{grid-template-columns:1fr;row-gap:32px}}

.bmh .ft-duoi{display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:22px;
  border-top:1px solid rgba(243,238,231,.16);
  font-size:12px;color:rgba(243,238,231,.5)}
/* Chua loi cho cot Zalo/Goi co dinh goc phai — khong chua thi mui ten
   "Ve dau trang" bi nut Zalo de len ~16px khi chan trang cham day. */
@media(min-width:769px){.bmh .ft-duoi{padding-right:56px}}

/* Link mang xa hoi trong chan trang */
.bmh .ft-social{display:flex;gap:22px;margin-top:24px;flex-wrap:wrap}
.bmh .ft-social a{font-family:var(--font-head);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,231,.75)}
.bmh .ft-social a:hover{color:#fff}

/* Nut "Ve dau trang": chu + mui ten len, hover mui ten nhich len */
.bmh .len-dau{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-head);font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(243,238,231,.75)}
.bmh .len-dau svg{transition:transform var(--t-slow) var(--ease)}
.bmh .len-dau:hover,.bmh .len-dau:focus-visible{color:#fff}
.bmh .len-dau:hover svg,.bmh .len-dau:focus-visible svg{transform:translateY(-6px)}

/* ---------- LƯỚI THẺ DỰ ÁN (dời từ page-duan.css 13/08 — trang chủ cũng dùng) ----------
   2 cột như fredsted /cases/: ảnh đứng 3:4, tên + địa điểm CĂN GIỮA bên dưới.
   Trang chủ đặt 3 thẻ -> .cases--3 chia 3 cột trên desktop. */
.bmh .cases{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);row-gap:clamp(40px,5vw,72px)}
@media(max-width:700px){.bmh .cases{grid-template-columns:1fr}}

.bmh .case-the{display:block;min-width:0}
.bmh .case-ten{margin-top:22px;text-align:center;
  font-family:var(--font-head);font-size:var(--fs-h3);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  line-height:var(--lh-head)}
.bmh .case-noi{margin-top:6px;text-align:center;
  font-family:var(--font-head);font-size:var(--fs-label);font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- THẺ MẪU ĐÁ + LƯỚI TRƯNG BÀY ----------
   Dùng ở trang danh sách đá VÀ khối "đá cùng bộ sưu tập" của trang chi tiết
   (2 trang dùng chung -> nằm ở components theo quy tắc vàng).
   The "cam" kieu fredsted: anh 4:5 + ten IN HOA duoi anh, khong gia,
   khong badge, khong vien. Hover: zoom 1.25s + man che tan (co san o .img). */
.bmh .luoi-da{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,48px);row-gap:clamp(32px,4vw,64px)}
@media(max-width:900px){.bmh .luoi-da{grid-template-columns:repeat(2,1fr)}}
/* Dien thoai GIU 2 cot (fredsted giu vay): the ~167px van ro voi anh be mat da */
.bmh .the-da{display:block;min-width:0}
.bmh .the-da .caption{margin-top:16px;text-align:center}
/* ten da co the dai (TRAVERTINO SABBIA...) -> cho xuong dong, khong tran o */
.bmh .the-da .caption .name{overflow-wrap:break-word}

/* ---------- HIỆN DẦN KHI CUỘN ----------
   AN TOÀN: nội dung LUÔN HIỆN mặc định. Chỉ khi JS chạy được
   (thẻ <html> có class .js) mới ẩn đi để làm hiệu ứng.
   => JS lỗi hoặc bị chặn thì trang vẫn đọc được, không trắng trơn. */
.js .bmh .rev{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-reveal) ease,transform var(--t-reveal) ease}
.js .bmh .rev.in{opacity:1;transform:none}
/* 18/08 — Giam chuyen dong: KHONG an gi ca (tang CSS, song ca khi JS chet).
   Thieu rule nay thi may bat Reduce Motion nhin thay "phong trang" vi khoi
   bi an cho hieu ung ma hieu ung lai bi tat. */
@media(prefers-reduced-motion:reduce){
  .js .bmh .rev{opacity:1;transform:none;transition:none}
  .js .bmh .ct-caplech.rev .img{transform:none;transition:none}
}

/* ---------- VÙNG BẤM TRÊN MÁY CẢM ỨNG ----------
   Chuẩn WCAG 2.5.8 mức AA: tối thiểu 24×24px. Apple khuyên 44×44px.
   Chữ hệ này nhỏ và thanh (12–14px) nên vùng bấm thật chỉ ~18–22px.

   CÁCH LÀM: phủ một lớp VÔ HÌNH lên trên. Chữ KHÔNG to lên,
   bố cục KHÔNG xê dịch, chỉ vùng ngón tay chạm được rộng ra.
   Chỉ cho máy cảm ứng — dùng chuột thì 22px đã bấm thừa chính xác.

   ⚠️ KHỐI NÀY PHẢI NẰM SAU phần CHÂN TRANG ở trên.
   Đặt trước thì dòng `.ft li{line-height:2.1}` sẽ đè ngược lại 2.6
   -> các vùng bấm chồng lên nhau, bấm dòng này trúng dòng kia. */
@media(hover:none){
  .bmh .btn,.bmh .ft a{position:relative}
  .bmh .btn::before{content:'';position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}

  /* Chân trang: các dòng nằm sát nhau. Để 44px là vùng bấm đè nhau.
     Nới khoảng cách dòng ra trước, rồi dùng 36px — vẫn vượt ngưỡng AA 24px. */
  .bmh .ft li{line-height:2.6}
  .bmh .ft a::before{content:'';position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:36px}
}

/* ============================================================
   CHUOI ANH NHIP DIEU "CO TO CO NHO" — doi tu page-duan.css 13/08
   (trang du an + trang chi tiet SAN PHAM cung dung — quy tac vang).
   Gom: .ct-anh · .ct-caplech (hang doi lech 60/36 + truot 2 phia) ·
   .ct-hang2/.ct-hang3 (tre dan) · .ct-nho/.ct-vua · zoom-settle · thi sai.
   ============================================================ */
.bmh .ct-anh{display:grid;gap:clamp(18px,2.6vw,48px)}
.bmh .ct-hang2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.6vw,48px)}

.bmh .ct-nho{width:36%}
.bmh .ct-nho--phai{margin-left:auto}
.bmh .ct-vua{width:64%}
.bmh .ct-hang3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,40px)}
@media(max-width:700px){
  .bmh .ct-nho{width:52%}
  .bmh .ct-vua{width:84%}
  .bmh .ct-hang3{grid-template-columns:1fr 1fr}
  .bmh .ct-hang3 .img:nth-child(3){grid-column:1/-1}
}

/* hang doi lech: 1 tam TO + 1 tam NHO cung hang, cao bang nhau.
   overflow:hidden BAT BUOC — trang thai cho cua hieu ung truot (±26px)
   tho ra 2 mep -> tran ngang 6px o dien thoai. */
.bmh .ct-caplech{display:grid;grid-template-columns:1.65fr 1fr;
  gap:clamp(14px,2.2vw,40px);--h:clamp(300px,34vw,520px);overflow:hidden}
.bmh .ct-caplech--dao{grid-template-columns:1fr 1.65fr}
.bmh .ct-caplech .img{height:var(--h)}
/* min-width:0 chong o luoi no rong hon man (anh goc lon chong cho o) */
.bmh .ct-caplech .img,.bmh .ct-hang2 .img,.bmh .ct-hang3 .img{min-width:0}
@media(max-width:700px){.bmh .ct-caplech{--h:clamp(180px,46vw,280px)}}

/* truot vao tu 2 phia (hoa cung fade .rev) */
.js .bmh .ct-caplech.rev .img{transition:transform var(--t-reveal) ease}
.js .bmh .ct-caplech.rev .img:first-child{transform:translateX(-26px)}
.js .bmh .ct-caplech.rev .img:last-child{transform:translateX(26px);
  transition-delay:.14s}
.js .bmh .ct-caplech.rev.in .img{transform:none}

/* cap/hang 3: tam sau hien tre dan */
.js .bmh .ct-hang2.rev .img:nth-child(2),
.js .bmh .ct-hang3.rev .img:nth-child(2){transition:opacity var(--t-reveal) ease .16s,
  transform var(--t-reveal) ease .16s}
.js .bmh .ct-hang3.rev .img:nth-child(3){transition:opacity var(--t-reveal) ease .32s,
  transform var(--t-reveal) ease .32s}

/* zoom-settle: anh vao o 1.05 roi "lang" ve 1.0 */
.js .bmh .ct-anh .rev .img img{transform:scale(1.05);
  transition:transform var(--t-reveal) var(--ease)}
.js .bmh .ct-anh .rev.in .img img{transform:scale(1)}

/* thi sai noi anh theo do cuon — chi khung co ti le */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bmh .ct-anh .ct-caplech .img img,
    .bmh .ct-anh .ct-hang2 .img img,
    .bmh .ct-anh .ct-hang3 .img img,
    .bmh .ct-anh .ct-nho .img img{
      height:114%;
      animation:bmh-troi linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes bmh-troi{from{translate:0 0}to{translate:0 -12.3%}}
  }
}
@media (prefers-reduced-motion: reduce){
  .js .bmh .ct-caplech.rev .img{transform:none;transition:none}
  .js .bmh .ct-anh .rev .img img{transform:none;transition:none}
}

@media(prefers-reduced-motion:reduce){
  /* GIAM ≠ TAT SACH (12/08): may bat "giam chuyen dong" (Windows hay tat
     Animation effects cho nhe may) truoc day bi cat het hieu ung -> anh
     hien PHUT ra, nhin nhu trang hong ("cung do"). Chuan hien hanh:
     bo DI CHUYEN / PHONG TO (thu gay kho chiu tien dinh),
     GIU mo dan thuan opacity — khong gay chong mat, khong con do. */
  .bmh .rev{opacity:1;transform:none;transition:none}
  .js .bmh .rev{opacity:0;transform:none;transition:opacity .9s ease}
  .js .bmh .rev.in{opacity:1;transform:none}
  .bmh .img img,.bmh .dock a,.bmh .btn,.bmh .btn::after{transition:none}
  .bmh .img--veil::after,.bmh .rail-nav button,.bmh .btn--dir svg{transition:none}
  .bmh .btn--bare::after,.bmh .len-dau svg{transition:none}
  .bmh .rail-track{scroll-behavior:auto}
  html:has(.bmh){scroll-behavior:auto}
}

/* (17/08 sếp — mobile, "hình dồn 1 chỗ") Ô 64%/84% quá bé trên điện thoại,
   ảnh ghép của bài cũ nhìn dồn cục → mobile cho chiếm trọn chiều ngang.
   Đặt CUỐI FILE để thắng luật 84% (max-width:991) phía trên. */
@media(max-width:700px){
  .bmh .ct-vua,.bmh .ct-vua--phai{width:100%;margin-left:0}
}

/* ============================================================
   26/08 — SẾP DUYỆT TRÊN ĐIỆN THOẠI: THANH DƯỚI BỊ TÀNG HÌNH
   Hôm 25/08 hàng nút được tách khỏi section .tv (nền ink) xuống khối
   .td-duoi, nhưng nền tối CHỈ khai cho ≥768px. Trên điện thoại khối này
   rơi xuống nền kem của trang, mà chữ nút vốn màu kem #F3EEE7
   → đo được TƯƠNG PHẢN 1.00:1 (đúng nghĩa vô hình):
     /thu-da/  15 nút · /bep-3d/ 3 nút (nút .b3-day có nền riêng nên còn thấy)
   ⚠️ Đặt ở components (không phải page-thu-da.css) vì .td-duoi dùng ở CẢ
   HAI trang công cụ, mà /bep-3d/ KHÔNG nạp page-thu-da.css (bẫy 47).
   ============================================================ */
@media(max-width:767.98px){
  .bmh .td-duoi{
    background:var(--ink);
    padding:14px 0 20px;
    border-top:1px solid rgba(243,238,231,.14);
  }
  /* .tv-nut mang margin ngang ÂM (kéo ra sát mép để cuộn tràn viền) — đúng khi
     cha có lề trong như .tv-thanh, nhưng .td-duoi không có → nút đầu dính mép
     trái, lệch so với hàng "Xoay vân"/"Tất cả" bên dưới (đo x=0 so với x=20). */
  .bmh .td-duoi .tv-nut{ margin:0; }
}

/* ===== 26/08 — DẢI NHẮC "XOAY NGANG MÁY" (xem js-chung) =====
   Chỉ hiện khi khách đã bung toàn màn hình mà máy vẫn đứng dọc — nghĩa là
   máy không tự xoay được (iPhone). Android khoá xoay thành công thì dải này
   không bao giờ xuất hiện. z-index trên cả lớp toàn màn hình (9999). */
.bmh .bmh-nhac-xoay{
  position:fixed; left:50%; z-index:10000;
  bottom:calc(env(safe-area-inset-bottom,0px) + 84px);
  transform:translateX(-50%) translateY(10px);
  display:flex; align-items:center; gap:11px;
  /* không khai width thì dải co theo khung cha -> chữ vỡ 3 dòng (đo rộng 196px) */
  width:max-content; max-width:86vw;
  background:rgba(38,38,38,.92); color:#F3EEE7;
  border:1px solid rgba(243,238,231,.22); padding:13px 17px;
  font:10.5px/1.3 var(--font-head); letter-spacing:.1em; text-transform:uppercase;
  opacity:0; pointer-events:none; backdrop-filter:blur(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.bmh .bmh-nhac-xoay.hien{
  opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
.bmh .bmh-nhac-xoay b{
  width:23px; height:15px; flex:0 0 auto;
  border:1.5px solid currentColor; border-radius:2px;
  animation:bmh-nhac-xoay 2.6s var(--ease) infinite;
}
@keyframes bmh-nhac-xoay{
  0%,50%{ transform:rotate(90deg) scale(.82) } 72%,100%{ transform:rotate(0) scale(1) }
}
@media(prefers-reduced-motion:reduce){
  .bmh .bmh-nhac-xoay{ transition:none }
  .bmh .bmh-nhac-xoay b{ animation:none }
}

/* ===== 30/08 (Figure 2 sếp) — MENU SẢN PHẨM PHÂN TẦNG CHA/CON =====
   Máy tính: mục con thu gọn, HỎ CHUỘT vào cha thì xoè ra (đúng lời sếp
   "hiệu ứng tiêu đề cha sẽ hiện ra các tiêu đề con").
   Điện thoại: không có hover → con LUÔN HIỆN, thụt vào — 90% khách dùng
   điện thoại, giấu sau chạm là mất khách. */
.bmh .mf-cha{ display:block; }
.bmh .mf-con{ padding-left:18px; }
.bmh .mf-con a{ font-size:.92em; opacity:.78; }
@media(hover:hover) and (min-width:769px){
  .bmh .mf-con{
    max-height:0; overflow:hidden;
    transition:max-height .6s var(--ease), opacity .5s var(--ease);
    opacity:0;
  }
  .bmh .mf-cha:hover .mf-con,
  .bmh .mf-cha:focus-within .mf-con{ max-height:200px; opacity:1; }
}
@media(prefers-reduced-motion:reduce){
  .bmh .mf-con{ transition:none; }
}

/* ===== (04/09) TU MAU YEU THICH + SO SANH + CHIP MAU — dung chung moi trang ===== */
.bmh .the-da{ position:relative; }
.bmh .tim{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  background:rgba(255,255,255,.85); cursor:pointer; transition:transform .3s var(--ease); }
.bmh .tim:hover{ transform:scale(1.08); }
.bmh .tim[aria-pressed="true"] svg{ fill:var(--ink); }
.bmh .sp-tim{ position:static; display:inline-flex; width:auto; height:auto; padding:10px 14px;
  gap:8px; background:none; border:1px solid var(--line, #d9d3ca); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; }
.bmh .tum-nut{ position:fixed; left:18px; bottom:18px; z-index:60; display:flex; align-items:center;
  gap:8px; padding:10px 14px; background:var(--ink); color:var(--bone); border:0;
  font:400 12px/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; border-radius:0; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.bmh .tum-nut b{ font-weight:500; background:var(--bone); color:var(--ink); padding:2px 7px; }
.bmh .tum-nut[hidden]{ display:none !important; }
@media(max-width:768px){ .bmh .tum-nut{ bottom:72px; left:12px; } }
.bmh .tum-nen,.bmh .ss-nen{ position:fixed; inset:0; z-index:95; background:rgba(38,38,38,.55);
  display:flex; align-items:flex-end; justify-content:flex-start; }
.bmh .tum-nen[hidden],.bmh .ss-nen[hidden]{ display:none !important; }
.bmh .tum-panel{ background:var(--bone); width:min(440px,100vw); max-height:86vh; overflow:auto;
  padding:22px 22px 26px; margin:0 0 0 0; }
@media(min-width:769px){ .bmh .tum-nen{ align-items:center; justify-content:center; }
  .bmh .tum-panel{ margin:0; } }
.bmh .tum-dau{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.bmh .tum-dong{ background:none; border:1px solid rgba(38,38,38,.35); color:var(--ink);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px; cursor:pointer; border-radius:0; }
.bmh .tum-trong{ color:var(--muted); font-size:14px; line-height:1.6; }
.bmh .tum-o{ display:grid; grid-template-columns:22px 56px 1fr 28px; gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px solid rgba(38,38,38,.1); }
.bmh .tum-o img{ width:56px; height:56px; object-fit:cover; display:block; }
.bmh .tum-ten{ color:var(--ink); text-decoration:none; font-size:14px; }
.bmh .tum-bo{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; }
.bmh .tum-hanh{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:16px; align-items:center; }
.bmh .tum-hanh .btn--box{ width:100%; text-align:center; justify-content:center; }
.bmh .tum-xoa{ margin-left:auto; color:var(--muted); }
.bmh .tum-baoloi{ font-size:13px; color:var(--ink); margin-top:10px; }
.bmh .ss-nen{ align-items:center; justify-content:center; }
.bmh .ss-hop{ background:var(--bone); width:min(960px,96vw); max-height:88vh; overflow:auto; padding:22px; }
.bmh .ss-cuon{ overflow-x:auto; }
.bmh .ss-bang{ border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
.bmh .ss-bang th,.bmh .ss-bang td{ padding:10px 12px; border-bottom:1px solid rgba(38,38,38,.12);
  text-align:left; vertical-align:top; }
.bmh .ss-bang td:first-child{ color:var(--muted); white-space:nowrap; }
.bmh .ss-bang th img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:8px; }
.bmh .ss-bang th a{ color:var(--ink); text-decoration:none; font-weight:500; }
/* chip mau (dung o bo loc 3 noi) */
.bmh .chip-mau{ display:inline-flex; align-items:center; gap:7px; }
.bmh .chip-mau i{ width:12px; height:12px; border:1px solid rgba(38,38,38,.35); display:inline-block; }
/* bang so sanh: cac cot mau deu nhau */
.bmh .ss-bang{ table-layout:fixed; }
.bmh .ss-bang td:first-child,.bmh .ss-bang th:first-child{ width:110px; }

/* ===== (04/09 lo trinh 2.2) DAT LICH — modal dung chung, muon khung .tum-* ===== */
.bmh .dl-nen{ position:fixed; inset:0; z-index:95; background:rgba(38,38,38,.55);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.bmh .dl-nen[hidden]{ display:none !important; }
.bmh .dl-hop{ background:var(--bone); width:min(560px,100%); max-height:92vh; overflow:auto; padding:22px 24px; }
.bmh .dl-form{ display:grid; gap:14px; margin-top:14px; }
.bmh .dl-hang{ display:block; font-size:13px; color:var(--muted); letter-spacing:.02em; }
.bmh .dl-hang input[type=text],.bmh .dl-hang input[type=date],.bmh .dl-hang select,.bmh .dl-hang textarea{
  display:block; width:100%; margin-top:6px; padding:11px 12px; font:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid rgba(38,38,38,.25); border-radius:0; }
.bmh .dl-2cot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bmh .dl-hang.dl-2cot > label{ font-size:13px; color:var(--muted); }
.bmh .dl-hang:first-child{ display:flex; flex-wrap:wrap; gap:8px; }
.bmh .dl-chon{ cursor:pointer; }
.bmh .dl-chon input{ position:absolute; opacity:0; }
.bmh .dl-chon span{ display:inline-block; padding:9px 12px; border:1px solid rgba(38,38,38,.3); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.bmh .dl-chon input:checked + span{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.bmh .dl-luuy{ font-size:12.5px; color:var(--muted); margin:0; }
@media(max-width:600px){ .bmh .dl-2cot{ grid-template-columns:1fr; } .bmh .dl-hop{ padding:18px 16px; } }
/* (04/09 lo trinh 3.4) tim "nay" + thanh nhac nhe */
@keyframes bmh-tim-nay{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
.bmh .tim.nay svg{ animation:bmh-tim-nay .5s cubic-bezier(.22,.61,.36,1); }
.bmh .tum-nhac{ position:fixed; left:50%; bottom:88px; transform:translateX(-50%); z-index:58;
  background:var(--ink); color:var(--bone); font-size:13px; padding:12px 40px 12px 16px; max-width:min(92vw,520px);
  display:flex; align-items:center; gap:10px; box-shadow:0 8px 30px rgba(0,0,0,.25); animation:bmh-nhac-len .6s cubic-bezier(.22,.61,.36,1); }
@keyframes bmh-nhac-len{ from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translate(-50%,0)} }
.bmh .tum-nhac-dong{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0;
  color:var(--bone); font-size:14px; cursor:pointer; padding:6px 8px; }
@media(prefers-reduced-motion:reduce){ .bmh .tim.nay svg,.bmh .tum-nhac{ animation:none; } }