/* ============================================================
   TRANG "THỬ ĐÁ VÀO KHÔNG GIAN" — /thu-da/   (bản 2, 20/08/2026)
   Ảnh là NHÂN VẬT CHÍNH: tràn khung, nền ink như phòng trưng bày.
   Vẫn đúng hệ: bo góc 0 · Montserrat IN HOA giãn chữ · nút chữ + gạch chân.

   ⚠️ ĐỪNG đặt tên lớp chung chung trong .bmh — '.ph' đã là ô giữ chỗ ảnh
   của hệ (components.css: position:absolute; inset:0). Mọi lớp ở đây bắt
   đầu bằng 'tv-' cho chắc.

   Mặc định KHÔNG có JavaScript: khối tĩnh hiện, trình xem ẩn.
   ============================================================ */
.bmh .tv,.bmh .tv-chon{ display:none; }
.js .bmh .tv{ display:block; }
.js .bmh .tv-chon{ display:block; }
.js .bmh .tv-tinh{ display:none; }

.bmh .tv{ background:var(--ink); position:relative; }

/* ---------- khung ảnh ---------- */
.bmh .tv-khung{
  position:relative; width:100%; height:74vh; min-height:400px; overflow:hidden;
  touch-action:pan-y;
}
.bmh .tv-lop{ position:absolute; inset:0; transform-origin:50% 50%; }
.bmh .tv-lop canvas{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:100%; max-height:100%; width:auto; height:auto;
}
.bmh #tv-b{ opacity:0; transition:opacity .5s var(--ease); }
.bmh #tv-b.hien{ opacity:1; }
.bmh .tv-goc{ position:absolute; inset:0; display:none; clip-path:inset(0 0 0 var(--vach,50%)); }
.bmh .tv.so-sanh .tv-goc{ display:block; }

/* màn che trên/dưới để chữ đọc được trên MỌI ảnh.
   ⚠️ ĐỪNG dùng chiều cao % : trên điện thoại khung cao 'auto' nên % không
   tính được -> màn che cao 0 -> chữ bone nằm trên bếp trắng, đo tương phản
   ra 1,15:1 (không đọc nổi). Dùng px, và có ĐOẠN ĐẬM ĐỀU đúng chỗ đặt chữ
   chứ không phải mờ dần ngay từ đỉnh. */
.bmh .tv-khung::before,.bmh .tv-khung::after{
  content:''; position:absolute; left:0; right:0; pointer-events:none; z-index:4;
}
.bmh .tv-khung::before{
  top:0; height:calc(var(--tv-dinh,0px) + 215px);
  background:linear-gradient(to bottom,
    rgba(38,38,38,.72) 0,
    rgba(38,38,38,.70) var(--tv-dinh,0px),
    rgba(38,38,38,.66) calc(var(--tv-dinh,0px) + 96px),
    rgba(38,38,38,.30) calc(var(--tv-dinh,0px) + 150px),
    rgba(38,38,38,0)   calc(var(--tv-dinh,0px) + 215px));
}
.bmh .tv-khung::after{
  bottom:0; height:250px;
  background:linear-gradient(to top,
    rgba(38,38,38,.80) 0,
    rgba(38,38,38,.76) 130px,
    rgba(38,38,38,.28) 175px,
    rgba(38,38,38,0)   250px);
}
.bmh .tv.can-canh .tv-khung::before,
.bmh .tv.can-canh .tv-khung::after{ opacity:0; }

/* ---------- thanh trượt so sánh trước / sau ---------- */
.bmh .tv-vach{
  position:absolute; top:0; bottom:0; left:var(--vach,50%); width:2px;
  background:rgba(243,238,231,.9); display:none; cursor:ew-resize; z-index:7;
  touch-action:none;
}
.bmh .tv.so-sanh .tv-vach{ display:block; }
.bmh .tv-vach::after{
  content:''; position:absolute; left:50%; top:50%; width:54px; height:54px;
  margin:-27px 0 0 -27px; border:2px solid rgba(243,238,231,.95);
  background:rgba(38,38,38,.30);
}
.bmh .tv-vach b{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font:400 15px/1 var(--font-head); color:#F3EEE7; z-index:2; pointer-events:none;
}
.bmh .tv-vach i{
  position:absolute; top:26px; width:max-content;
  font:10px/1 var(--font-head); font-style:normal; letter-spacing:.22em;
  text-transform:uppercase; color:#F3EEE7; background:rgba(38,38,38,.5);
  padding:7px 10px; pointer-events:none;
}
.bmh .tv-vach .tv-moi{ right:14px; }
.bmh .tv-vach .tv-cu{ left:14px; }

/* ---------- đang dựng: vệt sáng quét ngang ---------- */
.bmh .tv-quet{
  position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  background:linear-gradient(105deg,rgba(243,238,231,0) 42%,rgba(243,238,231,.15) 50%,rgba(243,238,231,0) 58%);
  background-size:260% 100%;
}
.bmh .tv-khung.dang .tv-quet{ opacity:1; animation:tv-quet 1.1s linear infinite; }
@keyframes tv-quet{ from{ background-position:130% 0 } to{ background-position:-130% 0 } }

/* ---------- tên mẫu đá ---------- */
.bmh .tv-ten{
  /* --tv-dinh = chiều cao thanh đầu trang (JS đo lúc chạy). Thanh đầu trang
     dính đỉnh nên không trừ ra là tên đá chui xuống dưới nó. */
  position:absolute; left:var(--gutter); top:calc(var(--tv-dinh,0px) + 24px);
  z-index:6; color:#F3EEE7;
  max-width:min(46ch,58%); transition:opacity var(--t-ui) var(--ease);
}
.bmh .tv-ten b{
  display:block; font:400 clamp(19px,2.2vw,32px)/1.45 var(--font-head);
  letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 16px rgba(38,38,38,.75);
}
.bmh .tv-ten span{
  display:block; margin-top:5px; font:13px/1.5 var(--font-body);
  color:rgba(243,238,231,.82); text-shadow:0 1px 12px rgba(38,38,38,.7);
}
.bmh .tv.can-canh .tv-ten{ opacity:0; pointer-events:none; }

/* ---------- nút & chip ---------- */
.bmh .tv-thanh{ position:relative; z-index:6; }
.bmh .tv-nut,.bmh .tv-phong,.bmh .tv-mat,.bmh .tv-chinh{ display:flex; flex-wrap:wrap; }
.bmh .tv-chinh{
  gap:22px; align-items:center; padding:var(--sp-s) var(--gutter) 0;
  overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap;
}
.bmh .tv-chinh::-webkit-scrollbar{ display:none; }
.bmh .tv-chinh > *{ flex:0 0 auto; }
.bmh .tv-nut{ gap:22px; }
.bmh .tv-phong,.bmh .tv-mat{ gap:24px; }
.bmh .tv-nut button,.bmh .tv-nut a,
.bmh .tv-phong button,.bmh .tv-mat button,.bmh .tv-chinh > button{ color:rgba(243,238,231,.74); appearance:none; background:none; border:0; padding:12px 0; cursor:pointer;
  color:rgba(243,238,231,.74); font:11px/1 var(--font-head); letter-spacing:.2em;
  text-transform:uppercase; position:relative; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; white-space:nowrap;
}
.bmh .tv-nut button,.bmh .tv-nut a{ color:#F3EEE7; text-shadow:0 1px 12px rgba(38,38,38,.7); }
/* display:inline-flex ở trên thắng thuộc tính hidden -> phải ép lại */
.bmh .tv-nut button[hidden],.bmh .tv-mat[hidden],.bmh .tv-chinh button[hidden]{ display:none; }
.bmh .tv-nut button::after,.bmh .tv-nut a::after,
.bmh .tv-phong button::after,.bmh .tv-mat button::after,.bmh .tv-chinh > button::after{
  content:''; position:absolute; left:0; right:100%; bottom:9px; height:1px;
  background:currentColor; transition:right var(--t-ui) var(--ease);
}
.bmh .tv-nut button:hover::after,.bmh .tv-nut a:hover::after,
.bmh .tv-nut button[aria-pressed="true"]::after,
.bmh .tv-phong button:hover::after,.bmh .tv-phong button[aria-pressed="true"]::after,
.bmh .tv-mat button:hover::after,.bmh .tv-mat button[aria-pressed="true"]::after,
.bmh .tv-chinh > button:hover::after,.bmh .tv-chinh > button[aria-pressed="true"]::after{ right:0; }
.bmh .tv-phong button[aria-pressed="true"],
.bmh .tv-mat button[aria-pressed="true"]{ color:#F3EEE7; }
@media(min-width:768px){
  .bmh .tv-phong button,.bmh .tv-mat button,.bmh .tv-nhan{ text-shadow:0 1px 12px rgba(38,38,38,.75); }
}
/* chấm màu nhỏ cho biết bề mặt đó đang ốp mẫu nào */
.bmh .tv-mat button em{
  font-style:normal; margin-left:9px; font-size:10px; letter-spacing:.04em;
  text-transform:none; color:rgba(243,238,231,.9);
}
.bmh .tv-tile-o{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; flex:0 0 auto;
  color:#F3EEE7; font:11px/1 var(--font-head); letter-spacing:.2em;
  text-transform:uppercase; text-shadow:0 1px 12px rgba(38,38,38,.7); white-space:nowrap;
}
.bmh .tv-tile-o input[type="range"]{ width:104px; accent-color:#F3EEE7; }
.bmh #tv-tile-so{ font-variant-numeric:tabular-nums; min-width:44px; }
.bmh .tv-co3d{
  align-self:center; padding:7px 12px; background:rgba(243,238,231,.92); color:var(--ink);
  font:10px/1 var(--font-head); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.bmh .tv-nhan{
  margin:0; font:11px/1.6 var(--font-body); color:#F3EEE7; max-width:38ch;
}

/* DESKTOP: thả chữ/nút lên ảnh
   ⚠️ .tv-thanh phải là static thì con mới neo theo .tv (cả khung ảnh);
   để relative là hàng nút rơi xuống dưới, lọt vào dải chọn đá. */
@media(min-width:768px){
  .bmh .tv-thanh{ position:static; }
  .bmh .tv-nut{ position:absolute; right:var(--gutter); top:calc(var(--tv-dinh,0px) + 24px); z-index:6; justify-content:flex-end; }
  .bmh .tv-nguon{ position:absolute; left:var(--gutter); bottom:18px; z-index:6; }
  /* nhiều bề mặt (bếp chữ U có 5) -> cho vuốt ngang 1 hàng, đừng xuống dòng
     đè lên hàng chọn phòng */
  .bmh .tv-mat{
    position:absolute; left:var(--gutter); right:calc(var(--gutter) + 104px); bottom:72px; z-index:6;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  }
  .bmh .tv-mat::-webkit-scrollbar{ display:none; }
  .bmh .tv-mat button{ flex:0 0 auto; }
  .bmh .tv-nhan{ position:absolute; right:var(--gutter); bottom:24px; z-index:6; text-align:right; max-width:30ch; }
  .bmh .tv.can-canh .tv-nguon{ opacity:0; pointer-events:none; }
  .bmh .tv.can-canh .tv-phong,
  .bmh .tv.can-canh .tv-mat,
  .bmh .tv.can-canh .tv-nhan{ opacity:0; pointer-events:none; }
}

/* ---------- cận cảnh: nút thu / phóng ---------- */
.bmh .tv-zoom{
  position:absolute; right:var(--gutter); bottom:76px; z-index:7;
  display:flex; gap:1px;
}
.bmh .tv-zoom button{
  appearance:none; width:44px; height:44px; flex:0 0 auto; border:1px solid rgba(243,238,231,.35);
  background:rgba(38,38,38,.42); color:#F3EEE7; cursor:pointer;
  font:400 17px/1 var(--font-head); display:flex; align-items:center; justify-content:center;
}
.bmh .tv-zoom button:hover{ background:rgba(38,38,38,.7); }
.bmh .tv-zoom button[disabled]{ opacity:.3; cursor:default; }

/* ---------- toàn màn hình ---------- */
.bmh .tv.toan-man{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  background:var(--ink);
}
.bmh .tv.toan-man .tv-khung{ flex:1 1 auto; height:auto; min-height:0; }
html.tv-khoa,html.tv-khoa body{ overflow:hidden; }

/* "Dùng ảnh nhà bạn" phải NGANG HÀNG với phòng mẫu chứ không phải cái chip
   cuối hàng ai cũng bỏ qua — nên cho nó cái viền, đứng riêng, có chữ "hoặc". */
.bmh .tv-nguon{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.bmh .tv-toi-nut{
  appearance:none; flex:0 0 auto; cursor:pointer; background:rgba(38,38,38,.42);
  border:1px solid rgba(243,238,231,.75); color:#F3EEE7; padding:0 18px;
  min-height:44px; display:inline-flex; align-items:center; gap:8px;
  font:11px/1 var(--font-head); letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap; transition:background var(--t-ui) var(--ease);
}
.bmh .tv-toi-nut:hover,.bmh .tv-toi-nut[aria-pressed="true"]{ background:#F3EEE7; color:var(--ink); }
.bmh .tv-toi-nut span{ font-size:15px; line-height:1; }
.bmh .tv-hoac{
  flex:0 0 auto; color:rgba(243,238,231,.7); font:10px/1 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(38,38,38,.75);
}

/* lời nhắc to giữa ảnh — khách phải thấy ngay là còn thiếu bước chấm góc */
.bmh .tv-nhac{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
  margin:0; padding:16px 26px; background:rgba(38,38,38,.86); color:#F3EEE7;
  font:12px/1.5 var(--font-head); letter-spacing:.2em; text-transform:uppercase;
  text-align:center; pointer-events:none; max-width:80%;
}
.bmh .tv-nhac[hidden]{ display:none; }

/* ---------- 4 tay nắm kéo góc (ảnh của khách) ---------- */
.bmh .tv-tay{
  position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:8;
  padding:0; border:0; background:none; cursor:grab; touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.bmh .tv-tay::before{
  content:''; position:absolute; left:50%; top:50%; width:16px; height:16px;
  margin:-8px 0 0 -8px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px var(--ink),0 1px 6px rgba(0,0,0,.5);
}
.bmh .tv-tay:active{ cursor:grabbing; }
.bmh .tv-tay:focus-visible::before{ box-shadow:0 0 0 3px var(--ink),0 0 0 6px #fff; }

/* ---------- XEM TRỌN ẢNH ----------
   Chữ và nút đè lên ảnh làm khách không xem được đá. Ngừng rê chuột /
   ngừng chạm vài giây là tất cả MỜ ĐI, kể cả màn che trên–dưới, để bức ảnh
   sạch hoàn toàn. Động vào là hiện lại ngay. Nút con mắt để giữ ẩn luôn. */
.bmh .tv-ten,.bmh .tv-nut,.bmh .tv-mat,.bmh .tv-nguon,.bmh .tv-nhan,
.bmh .tv-khung::before,.bmh .tv-khung::after{
  transition:opacity .45s var(--ease);
}
/* ⚠️ Trên ĐIỆN THOẠI mấy hàng nút nằm DƯỚI ảnh chứ không đè lên, ẩn chúng
   đi là làm mất công cụ chứ không phải làm sạch ảnh. Chỉ ẩn thứ THẬT SỰ đè
   lên ảnh: tên đá + màn che. */
.bmh .tv.tron .tv-ten{ opacity:0; pointer-events:none; }
.bmh .tv.tron .tv-khung::before,.bmh .tv.tron .tv-khung::after{ opacity:0; }
@media(min-width:768px){
  .bmh .tv.tron .tv-nut,.bmh .tv.tron .tv-mat,
  .bmh .tv.tron .tv-nguon,.bmh .tv.tron .tv-nhan{ opacity:0; pointer-events:none; }
}
.bmh .tv.tron .tv-zoom button:not(#tv-an){ opacity:0; pointer-events:none; }
.bmh #tv-an{ transition:opacity .45s var(--ease),background var(--t-ui) var(--ease); }
.bmh .tv.tron #tv-an{ opacity:.5; }
.bmh .tv.tron #tv-an:hover,.bmh .tv.tron #tv-an:focus-visible{ opacity:1; }
.bmh #tv-an[aria-pressed="true"]{ background:#F3EEE7; color:var(--ink); }

/* ---------- dải chọn đá ---------- */
.bmh .tv-chon{ background:var(--ink); padding-bottom:var(--sp-m); }
.bmh .tv-loc{
  display:flex; gap:22px; align-items:center; padding:var(--sp-s) var(--gutter) 12px;
  overflow-x:auto; scrollbar-width:none;
}
.bmh .tv-loc::-webkit-scrollbar{ display:none; }
.bmh .tv-loc button{
  appearance:none; background:none; border:0; padding:9px 0; cursor:pointer; flex:0 0 auto;
  color:rgba(243,238,231,.62); font:11px/1 var(--font-head); letter-spacing:.2em;
  text-transform:uppercase; position:relative; min-height:40px; white-space:nowrap;
}
.bmh .tv-loc button::after{
  content:''; position:absolute; left:0; right:100%; bottom:7px; height:1px;
  background:#F3EEE7; transition:right var(--t-ui) var(--ease);
}
.bmh .tv-loc button[aria-pressed="true"]{ color:#F3EEE7; }
.bmh .tv-loc button[aria-pressed="true"]::after,.bmh .tv-loc button:hover::after{ right:0; }
.bmh .tv-dem{
  margin-left:auto; padding-left:20px; flex:0 0 auto;
  font:11px/1 var(--font-body); color:rgba(243,238,231,.58); letter-spacing:.1em;
}
.bmh .tv-dai-o{ position:relative; }
.bmh .tv-dai-o::after{
  content:''; position:absolute; right:0; top:0; bottom:4px; width:64px;
  background:linear-gradient(to left,var(--ink),rgba(38,38,38,0)); pointer-events:none;
}
.bmh .tv-dai{
  display:flex; gap:2px; overflow-x:auto; padding:0 var(--gutter) 4px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.bmh .tv-dai::-webkit-scrollbar{ display:none; }
.bmh .tv-o{
  flex:0 0 auto; width:96px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; scroll-snap-align:center; -webkit-tap-highlight-color:transparent;
}
.bmh .tv-o img{
  width:96px; height:96px; object-fit:cover; display:block;
  opacity:.5; transition:opacity var(--t-ui) var(--ease);
}
.bmh .tv-o:hover img{ opacity:.85; }
.bmh .tv-o[aria-pressed="true"] img{ opacity:1; }
.bmh .tv-o[aria-pressed="true"]::after{ content:''; position:absolute; inset:0; border:2px solid #F3EEE7; }
.bmh .tv-o span{
  position:absolute; left:0; right:0; bottom:0; padding:6px;
  font:10px/1.25 var(--font-body); color:#F3EEE7; text-align:left;
  background:linear-gradient(to top,rgba(38,38,38,.88),rgba(38,38,38,0));
  opacity:0; transition:opacity var(--t-ui) var(--ease);
}
.bmh .tv-o:hover span,.bmh .tv-o[aria-pressed="true"] span{ opacity:1; }

/* ---------- ĐIỆN THOẠI ---------- */
@media(max-width:767.98px){
  .bmh .tv-khung{ height:auto; min-height:0; }
  .bmh .tv-lop{ position:relative; inset:auto; }
  /* lớp A nằm trong luồng -> khung cao đúng bằng ảnh, hết dải đen thừa */
  .bmh #tv-a{
    position:relative; left:auto; top:auto; transform:none;
    width:100%; height:auto; max-width:100%; max-height:none; display:block;
  }
  .bmh #tv-b,.bmh .tv-goc canvas{
    position:absolute; left:0; top:0; transform:none;
    width:100%; height:100%; max-width:none; max-height:none;
  }
  .bmh .tv-ten{ top:calc(var(--tv-dinh,0px) + 12px); max-width:78%; }
  .bmh .tv-khung::before{ height:calc(var(--tv-dinh,0px) + 150px);
    background:linear-gradient(to bottom,
      rgba(38,38,38,.74) 0,
      rgba(38,38,38,.72) var(--tv-dinh,0px),
      rgba(38,38,38,.66) calc(var(--tv-dinh,0px) + 74px),
      rgba(38,38,38,0)   calc(var(--tv-dinh,0px) + 150px)); }
  .bmh .tv-khung::after{ height:90px;
    background:linear-gradient(to top,rgba(38,38,38,.45),rgba(38,38,38,0)); }
  .bmh .tv-ten b{ font-size:19px; }
  .bmh .tv-ten span{ font-size:12px; }
  .bmh .tv-thanh{ padding:4px var(--gutter) 0; }
  .bmh .tv-nut,.bmh .tv-mat,.bmh .tv-nguon{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter);
  }
  .bmh .tv-nut::-webkit-scrollbar,.bmh .tv-nguon::-webkit-scrollbar,
  .bmh .tv-mat::-webkit-scrollbar,.bmh .tv-chinh::-webkit-scrollbar{ display:none; }
  .bmh .tv-nguon > *,.bmh .tv-chinh > *{ flex:0 0 auto; }
  .bmh .tv-phong{ flex-wrap:nowrap; }
  .bmh .tv-chinh{ border-top:1px solid rgba(243,238,231,.14); }
  .bmh .tv-nut button,.bmh .tv-nut a,
  .bmh .tv-phong button,.bmh .tv-mat button{ flex:0 0 auto; }
  .bmh .tv-phong,.bmh .tv-mat{ gap:20px; }
  .bmh .tv-mat{ border-bottom:1px solid rgba(243,238,231,.14); }
  .bmh .tv-nut{ gap:20px; border-top:1px solid rgba(243,238,231,.14); }
  .bmh .tv-nhan{ max-width:100%; padding:8px 0 4px; }
  .bmh .tv-vach::after{ width:44px; height:44px; margin:-22px 0 0 -22px; }
  .bmh .tv-vach i{ top:12px; font-size:9px; padding:6px 8px; }
  .bmh .tv-zoom{ right:12px; bottom:12px; }
  .bmh .tv-o,.bmh .tv-o img{ width:80px; }
  .bmh .tv-o img{ height:80px; }
  .bmh .tv-dai-o::after{ width:40px; }
  /* ⚠️ TOÀN MÀN HÌNH trên mobile (đường ?mau= tự bật): canvas neo absolute
     vào .tv-lop, mà .tv-lop mobile cao theo NỘI DUNG -> cả hai sụp về 0x0,
     màn hình đen (sếp gặp trên live 20/08). Phải trả .tv-lop về phủ kín khung. */
  .bmh .tv.toan-man .tv-khung{ display:flex; align-items:center; }
  .bmh .tv.toan-man .tv-lop{ position:absolute; inset:0; }
  .bmh .tv.toan-man #tv-a,
  .bmh .tv.toan-man #tv-b,
  .bmh .tv.toan-man .tv-goc canvas{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:auto; height:auto; max-width:100%; max-height:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .bmh .tv-khung.dang .tv-quet{ animation:none; }
  .bmh #tv-b{ transition:none; }
  .bmh .tv-o img,.bmh .tv-o span,.bmh .tv-ten{ transition:none; }
}

/* ===== HERO RÚT GỌN (feedback 21/08: chữ dư, focus vào hình) ===== */
.bmh .td-dau{ padding:18px 0 14px; }
.bmh .td-dau h1{
  font-size:clamp(20px,2.3vw,30px); line-height:1.5; margin-top:4px;
  letter-spacing:.16em;
}

/* ===== CHẠM VÀO ẢNH ĐỂ CHỌN BỀ MẶT (21/08) ===== */
.bmh .tv-lop{ cursor:pointer; }
/* (30/08) .tv-toi-nut cung can nhay khi den tu /bep-3d/?anh=1 — hieu ung von
   chi khai cho .tv-mat button (cung ho bay 47: selector qua hep) */
.bmh .tv-mat button.tv-nhay,
.bmh .tv-toi-nut.tv-nhay{ animation:tv-nhay .7s ease 6; }
@keyframes tv-nhay{ 0%,100%{ opacity:1 } 35%{ opacity:.35 } }
@media(prefers-reduced-motion:reduce){ .bmh .tv-mat button.tv-nhay,.bmh .tv-toi-nut.tv-nhay{ animation:none } }

/* ============================================================
   HỢP NHẤT GIAO DIỆN 2D ↔ 3D (24/08) — user: "2D menu vẫn không
   đồng nhất với 3D". Chip bề mặt nay là PILL có Ô MÀU ĐÁ, giống
   hệt trang /bep-3d/. Bỏ kiểu chữ + gạch chân cũ cho khối này.
   ============================================================ */
.bmh .tv-mat{
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  gap:8px; padding-top:4px; padding-bottom:6px;
}
.bmh .tv-mat::-webkit-scrollbar{ display:none; }
.bmh .tv-mat button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(243,238,231,.28); padding:9px 13px; min-height:40px;
  color:rgba(243,238,231,.8); letter-spacing:.12em; text-shadow:none;
}
.bmh .tv-mat button::after{ display:none; }
.bmh .tv-mat button:hover{ border-color:rgba(243,238,231,.7); color:#F3EEE7; }
.bmh .tv-mat button[aria-pressed="true"]{
  background:#F3EEE7; color:var(--ink); border-color:#F3EEE7;
}
.bmh .tv-mat button em{ display:none; }        /* tên đá nay nằm ở ô màu */
.bmh .tv-mat .tv-swatch{
  width:16px; height:16px; flex:0 0 auto; display:inline-block;
  background-size:cover; background-position:center;
  outline:1px solid rgba(38,38,38,.25);
}
.bmh .tv-mat .tv-trong{ background:none; outline:1px dashed rgba(243,238,231,.5); }
.bmh .tv-mat button[aria-pressed="true"] .tv-trong{ outline-color:rgba(38,38,38,.5); }



/* ===== NÚT "XEM TOÀN MÀN HÌNH" đè trên ảnh (25/08) =====
   User: gần 90% khách xem trên điện thoại; nút cũ nằm lẫn trong hàng chữ
   dưới ảnh nên khó nhận ra. Nút mới có nền + viền + chữ, đặt góc dưới-phải
   của chính tấm ảnh — chỗ ngón cái với tới. */
.bmh .tv-bung{
  position:absolute; right:10px; bottom:10px; z-index:7;
  display:inline-flex; align-items:center; gap:8px;
  appearance:none; cursor:pointer; min-height:44px; padding:0 14px;
  border:1px solid rgba(243,238,231,.55); background:rgba(38,38,38,.62);
  color:#F3EEE7; font:400 11px/1 var(--font-head); letter-spacing:.16em;
  text-transform:uppercase; backdrop-filter:blur(3px);
  transition:background .3s, border-color .3s;
}
.bmh .tv-bung:hover{ background:rgba(38,38,38,.86); border-color:#F3EEE7; }
.bmh .tv-bung[hidden]{ display:none; }
@media(max-width:767.98px){
  .bmh .tv-bung{ right:8px; bottom:8px; padding:0 12px; font-size:10px; }
}

/* Nút xem-trọn-ảnh (con mắt) + phóng to/nhỏ dời lên GÓC TRÊN-PHẢI của ảnh,
   nhường góc dưới-phải cho nút "Xem toàn màn hình" (25/08). */
.bmh .tv-zoom{ top:10px; bottom:auto; right:10px; }

/* ============================================================
   TOÀN MÀN HÌNH — ĐỒNG BỘ với /bep-3d/ (sếp chốt 25/08)
     · ảnh mô phỏng lấp TRỌN màn hình
     · cột TRÁI = mẫu đá xếp dọc · cột PHẢI = chọn bề mặt
     · hai cột NỔI ĐÈ lên ảnh -> ẩn đi là ảnh tràn kín ngay
     · đang kéo/phóng thì hai cột mờ đi, nhường chỗ cho khách xem
   ⚠️ Bung trên .td-san (bọc cả dải đá) chứ KHÔNG phải #tv — để ngoài là
      vào toàn màn hình mất sạch mẫu đá (lỗi user gặp trên live 24/08).
   ============================================================ */
/* ⚠️ Nút này dùng chung dáng với /bep-3d/, nhưng CSS bên đó KHÔNG nạp ở
   trang này (nạp có điều kiện theo template) -> phải khai lại đầy đủ,
   không thì nút ra kiểu mặc định của trình duyệt (nền xám, chữ đen). */
.bmh .td-thoat{
  position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:14;
  appearance:none; cursor:pointer; min-height:44px; padding:0 18px;
  border:1px solid rgba(243,238,231,.55); background:rgba(38,38,38,.62);
  color:#F3EEE7; font:400 11px/1 var(--font-head); letter-spacing:.16em;
  text-transform:uppercase; backdrop-filter:blur(3px);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}
.bmh .td-thoat[hidden]{ display:none; }
.bmh .td-thoat:hover{ background:rgba(38,38,38,.88); border-color:#F3EEE7; }
@media(max-width:767.98px){ .bmh .td-thoat{ padding:0 12px; font-size:10px; } }

.bmh .td-san.toan-man{ position:fixed; inset:0; z-index:9999; background:var(--ink); }
.bmh .td-san.toan-man .tv{
  /* ⚠️ #tv vẫn mang lớp .toan-man (luật cũ đặt z-index:9999) nên nó ĐÈ LÊN
     hai cột (z-index 12) -> cột có mặt, có nền, mà nội dung bị che.
     Đặt lại z-index:auto để cột nổi lên trên. */
  position:absolute; inset:0; z-index:auto;
}
.bmh .td-san.toan-man .tv-khung{
  position:absolute; inset:0; height:auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
.bmh .td-san.toan-man .tv-lop{
  /* PHẢI có height:100% — max-height theo % chỉ ăn khi cha có chiều cao
     xác định; thiếu dòng này ảnh cao vượt khung (đo được 1080 trong 900). */
  position:relative; inset:auto; height:100%; max-width:100%;
  display:flex; align-items:center; justify-content:center;
}
.bmh .td-san.toan-man #tv-a{
  position:relative; left:auto; top:auto; transform:none;
  width:auto; height:auto; max-width:100%; max-height:100%; display:block;
}
.bmh .td-san.toan-man #tv-b,
.bmh .td-san.toan-man .tv-goc canvas{
  position:absolute; left:0; top:0; transform:none;
  width:100%; height:100%; max-width:none; max-height:none;
}
.bmh .td-san.toan-man .tv-nut,
.bmh .td-san.toan-man .tv-nguon,
.bmh .td-san.toan-man .tv-chinh,
.bmh .td-san.toan-man .tv-loc,
.bmh .td-san.toan-man .tv-nhan{ display:none; }

/* cột TRÁI — mẫu đá */
.bmh .td-san.toan-man .tv-chon{
  position:fixed; left:0; top:0; bottom:0; width:104px; z-index:12;
  margin:0; padding:0; overflow-y:auto; overflow-x:hidden;
  background:rgba(38,38,38,.72); backdrop-filter:blur(6px);
  border-right:1px solid rgba(243,238,231,.16);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}
.bmh .td-san.toan-man .tv-dai-o{ overflow:visible; }
.bmh .td-san.toan-man .tv-dai{ display:block; padding:8px; overflow:visible; }
.bmh .td-san.toan-man .tv-dai .tv-o,
.bmh .td-san.toan-man .tv-dai .tv-o img{ width:88px; height:88px; }
.bmh .td-san.toan-man .tv-dai .tv-o{ margin:0 0 6px; }

/* cột PHẢI — chọn bề mặt */
.bmh .td-san.toan-man .tv-thanh{
  position:fixed; right:0; top:0; bottom:0; width:190px; z-index:12;
  margin:0; padding:0; overflow-y:auto;
  background:rgba(38,38,38,.72); backdrop-filter:blur(6px);
  border-left:1px solid rgba(243,238,231,.16);
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}
.bmh .td-san.toan-man .tv-mat{
  display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
  gap:6px; padding:12px; margin:0; overflow:visible;
}
.bmh .td-san.toan-man .tv-mat button{
  width:100%; justify-content:flex-start; white-space:normal;
  text-align:left; line-height:1.45; align-items:flex-start;
}
.bmh .td-san.toan-man .tv-mat .tv-swatch{ margin-top:1px; }

.bmh .td-san.toan-man .tv-ten{ left:120px; right:auto; max-width:44%; }
.bmh .td-san.toan-man .tv-zoom{ top:12px; right:206px; }

/* ĐANG KÉO/PHÓNG -> mọi thứ phụ mờ đi */
.bmh .td-san.td-tron .tv-chon,
.bmh .td-san.td-tron .tv-thanh,
.bmh .td-san.td-tron .tv-ten,
.bmh .td-san.td-tron .tv-zoom,
.bmh .td-san.td-tron .td-thoat{ opacity:0; pointer-events:none; }

@media(max-width:767.98px){
  .bmh .td-san.toan-man .tv-chon{ width:70px; }
  .bmh .td-san.toan-man .tv-dai .tv-o,
  .bmh .td-san.toan-man .tv-dai .tv-o img{ width:54px; height:54px; }
  .bmh .td-san.toan-man .tv-thanh{ width:124px; }
  .bmh .td-san.toan-man .tv-mat{ padding:8px; }
  .bmh .td-san.toan-man .tv-mat button{ padding:8px 9px; font-size:9px; min-height:38px; letter-spacing:.06em; }
  .bmh .td-san.toan-man .tv-ten{ left:80px; max-width:40%; }
  .bmh .td-san.toan-man .tv-zoom{ right:132px; }
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man .tv-chon{ width:78px; }
  .bmh .td-san.toan-man .tv-dai .tv-o,
  .bmh .td-san.toan-man .tv-dai .tv-o img{ width:62px; height:62px; }
  .bmh .td-san.toan-man .tv-thanh{ width:158px; }
  .bmh .td-san.toan-man .tv-zoom{ right:170px; }
}

/* ⚠️ Chế độ "xem trọn ảnh" (.tron — tự ẩn khi rảnh, có từ trước) làm mờ
   .tv-mat. Trong TOÀN MÀN HÌNH thì cột bề mặt là thành phần chính, không
   được để nó mờ theo -> trả lại rõ. Việc tạm ẩn khi thao tác đã do .td-tron lo. */
.bmh .td-san.toan-man .tv.tron .tv-mat{ opacity:1; pointer-events:auto; }
/* cột bề mặt phải trải hết bề ngang cột (đo được chỉ 24px vì co theo nội dung) */
.bmh .td-san.toan-man .tv-mat{ width:100%; box-sizing:border-box; gap:6px; }
.bmh .td-san.toan-man .tv-mat button{ width:100%; box-sizing:border-box; }
/* .tv-thanh bản thường có lề trong theo --gutter (61px ở 1440) + đệm trên,
   làm cột bề mặt thụt vào và tụt xuống giữa cột — bỏ hẳn trong toàn màn hình */
.bmh .td-san.toan-man .tv-thanh{ padding:0 !important; }
.bmh .td-san.toan-man .tv-mat{ margin:0; padding:12px; }
/* Ép cột bề mặt lấp ĐÚNG khung, khỏi phụ thuộc lề/đệm kế thừa của bản thường
   (đo mãi vẫn lệch 61px sang phải và tụt xuống giữa cột). */
.bmh .td-san.toan-man .tv-thanh{ position:fixed; }
.bmh .td-san.toan-man .tv-mat{
  position:absolute; left:0; right:0; top:0; bottom:0;
  margin:0 !important; padding:12px !important;
  overflow-y:auto; align-content:flex-start;
}

/* ============================================================
   BỐ CỤC MẶC ĐỊNH = HAI CỘT (sếp chốt 25/08)
   Trước đây bố cục này chỉ hiện khi bấm "Xem toàn màn hình";
   sếp muốn nó là mặc định. Header/chân trang GIỮ NGUYÊN — đây là
   bố cục trong trang, không phải phủ kín màn hình.
     cột TRÁI = mẫu đá dọc · GIỮA = ảnh · cột PHẢI = chọn bề mặt
     hàng dưới = xoay vân · tỉ lệ · bỏ ốp · bộ lọc bộ sưu tập
   ============================================================ */
@media(min-width:768px){
  .bmh .td-san{
    display:grid; grid-template-columns:104px 1fr;
    grid-template-areas:"da anh" "duoi duoi";
    background:var(--ink);
  }
  .bmh .td-san > .tv{
    grid-area:anh; min-width:0;
    display:grid; grid-template-columns:1fr 190px; grid-template-rows:1fr;
  }
  .bmh .td-san > .tv > .tv-khung{ grid-column:1; grid-row:1; }
  .bmh .td-san > .tv > .tv-thanh{
    grid-column:2; grid-row:1; position:relative; padding:0; margin:0;
    border-left:1px solid rgba(243,238,231,.14); overflow-y:auto;
  }
  .bmh .td-san > .tv > .tv-thanh > .tv-nguon{ display:none; }
  .bmh .td-san > .tv > .tv-thanh > .tv-nhan{ display:none; }
  .bmh .td-san > .tv > .tv-thanh > .tv-mat{
    position:absolute; inset:0; display:flex; flex-direction:column;
    flex-wrap:nowrap; align-items:stretch; align-content:flex-start; gap:6px;
    margin:0 !important; padding:12px !important; overflow-y:auto;
  }
  .bmh .td-san > .tv > .tv-thanh > .tv-mat button{
    width:100%; box-sizing:border-box; justify-content:flex-start;
    white-space:normal; text-align:left; line-height:1.45; align-items:flex-start;
  }

  /* cột trái: dải đá dựng đứng */
  .bmh .td-san > .tv-chon{
    grid-area:da; margin:0; padding:0; overflow-y:auto; overflow-x:hidden;
    border-right:1px solid rgba(243,238,231,.14);
  }
  .bmh .td-san > .tv-chon .tv-dai-o{ overflow:visible; }
  .bmh .td-san > .tv-chon .tv-dai{ display:block; padding:8px; overflow:visible; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o,
  .bmh .td-san > .tv-chon .tv-dai .tv-o img{ width:88px; height:88px; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o{ margin:0 0 6px; }

  /* hàng dưới: chỉnh chi tiết + bộ lọc */
  .bmh .td-duoi{
    grid-area:duoi; display:flex; flex-wrap:wrap; align-items:center;
    gap:8px 28px; padding:14px var(--gutter);
    border-top:1px solid rgba(243,238,231,.14);
  }
  .bmh .td-duoi .tv-chinh,
  .bmh .td-duoi .tv-loc{ margin:0; padding:0; }
}

/* ĐIỆN THOẠI giữ nguyên kiểu cũ (ảnh trên, dải đá ngang dưới) — màn hẹp
   không đủ chỗ cho hai cột; muốn xem lớn thì bấm "Xem toàn màn hình". */
@media(min-width:768px){
  /* KHOÁ chiều cao hàng ảnh = chiều cao khung ảnh; cột đá cuộn BÊN TRONG.
     Không khoá thì 55 ô đá kéo cả trang cao 5340px. */
  .bmh .td-san{ grid-template-rows:74vh auto; }
  .bmh .td-san > .tv-chon{ height:74vh; min-height:0; }
  .bmh .td-san > .tv{ height:74vh; min-height:0; }
  .bmh .td-san > .tv > .tv-khung{ height:100%; min-height:0; }
  /* chế độ tự-ẩn-khi-rảnh (.tron) làm mờ .tv-mat — ở bố cục cột thì cột bề
     mặt là thành phần chính, phải luôn rõ */
  .bmh .td-san > .tv > .tv-thanh > .tv-mat{ opacity:1 !important; pointer-events:auto !important; }
}

/* ============================================================
   TOÀN MÀN HÌNH phải THẮNG bố cục hai cột mặc định (25/08)
   Khối bố cục mặc định khai SAU nên đè mất luật toàn màn hình:
   khung ảnh kẹt ở 74vh (666px) và hàng nút dưới vẫn chiếm 234px.
   Khối này khai CUỐI FILE để chắc chắn thắng.
   ============================================================ */
.bmh .td-san.toan-man{
  grid-template-columns:196px 1fr !important;   /* cùng bề rộng cột với bản thường */
  grid-template-rows:1fr !important;
  height:100vh;
}
.bmh .td-san.toan-man > .tv-chon{ width:auto !important; }
.bmh .td-san.toan-man > .tv{ height:100% !important; min-height:0; }
.bmh .td-san.toan-man > .tv-chon{ height:100% !important; min-height:0; }
.bmh .td-san.toan-man > .tv > .tv-khung{ height:100% !important; min-height:0; }
.bmh .td-san.toan-man .td-duoi{ display:none !important; }

/* Nút "Thoát" và cụm phóng/xem-trọn-ảnh dính sát nhau -> tách ra, và trong
   toàn màn hình phải LUÔN BẤM ĐƯỢC (chế độ .tron tự ẩn khi rảnh làm chúng
   mờ + pointer-events:none, khách tưởng nút hỏng). */
.bmh .td-san.toan-man .td-thoat{ left:auto; right:auto; transform:none; }
.bmh .td-san.toan-man .tv.tron .tv-zoom button,
.bmh .td-san.toan-man .tv.tron #tv-an{ opacity:1 !important; pointer-events:auto !important; }
.bmh .td-san.toan-man .tv-zoom{ z-index:15; }
.bmh .td-san.toan-man .td-thoat{ z-index:15; }

/* ===== THÔNG SỐ TỪNG MẪU trong CỘT DỌC (kiểu Floor & Decor, 25/08) =====
   Chỉ hiện ở bố cục cột; dải ngang dưới đáy (mobile) vẫn chỉ có ảnh + tên. */
.bmh .tv-o-ts{ display:none; }
@media(min-width:768px){
  .bmh .td-san > .tv-chon{ width:196px; }
  .bmh .td-san{ grid-template-columns:196px 1fr; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o{
    display:flex; align-items:flex-start; gap:9px; width:100%; height:auto;
    padding:7px; margin:0 0 2px; text-align:left; border:1px solid transparent;
  }
  .bmh .td-san > .tv-chon .tv-dai .tv-o img{ width:52px; height:52px; flex:0 0 auto; opacity:1; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o > span{ display:none; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o::after{ display:none; }
  .bmh .td-san > .tv-chon .tv-dai .tv-o[aria-pressed="true"]{
    border-color:rgba(243,238,231,.75); background:rgba(243,238,231,.08);
  }
  .bmh .tv-o-ts{
    display:block; font-style:normal; min-width:0; flex:1 1 auto;
    color:rgba(243,238,231,.62);
  }
  .bmh .tv-o-ts b{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    font:400 10px/1.4 var(--font-head); letter-spacing:.08em;
    text-transform:uppercase; color:#F3EEE7; overflow:hidden;
  }
  .bmh .tv-o-ts i{ display:block; font-style:normal; font-size:10px; line-height:1.5; }
}

/* Trang công cụ: gọn trong một màn, ít cuộn (sếp chốt 25/08) */
@media(min-width:768px){
  .bmh .td-dau{ padding:12px 0 10px; }
  .bmh .td-san{ grid-template-rows:calc(100vh - 210px) auto; }
  .bmh .td-san > .tv-chon,
  .bmh .td-san > .tv,
  .bmh .td-san > .tv > .tv-khung{ height:calc(100vh - 210px); }
  .bmh .tv-tinh{ display:none; }        /* khối dự phòng: chỉ dành cho máy tắt JS */
  .js .bmh .tv-tinh{ display:none; }
}

/* ============================================================
   ĐIỆN THOẠI — TOÀN MÀN HÌNH cũng là HAI CỘT (sếp chốt 25/08)
   Bấm "Xem toàn màn hình" -> ảnh lấp trọn màn, mẫu đá thành cột dọc
   bên trái, cột phải là các vị trí ốp. Xoay ngang thì cột co lại,
   ảnh giãn ra tương ứng.
   ============================================================ */
@media(max-width:767.98px){
  .bmh .td-san.toan-man{
    position:fixed; inset:0; z-index:9999; height:100dvh;
    display:grid !important;
    grid-template-columns:96px 1fr !important;
    grid-template-rows:1fr !important;
    background:var(--ink);
  }
  .bmh .td-san.toan-man > .tv{
    grid-column:2; grid-row:1; height:100% !important;
    display:grid !important; grid-template-columns:1fr 118px; grid-template-rows:1fr;
    position:relative; inset:auto;
  }
  .bmh .td-san.toan-man > .tv > .tv-khung{
    grid-column:1; grid-row:1; position:relative; inset:auto;
    height:100% !important; min-height:0;
    display:flex; align-items:center; justify-content:center;
  }
  .bmh .td-san.toan-man > .tv > .tv-thanh{
    grid-column:2; grid-row:1; position:relative; inset:auto;
    width:auto; padding:0; margin:0; overflow-y:auto;
    border-left:1px solid rgba(243,238,231,.16); background:transparent;
  }
  .bmh .td-san.toan-man > .tv-chon{
    grid-column:1; grid-row:1; position:relative; inset:auto;
    width:auto; height:100% !important; overflow-y:auto;
    border-right:1px solid rgba(243,238,231,.16); background:transparent;
  }
  /* cột đá trên điện thoại: ảnh + tên gọn, bỏ bớt thông số cho đỡ chật */
  .bmh .td-san.toan-man > .tv-chon .tv-dai{ display:block; padding:6px; }
  .bmh .td-san.toan-man > .tv-chon .tv-dai .tv-o{
    display:block; width:100%; height:auto; padding:4px; margin:0 0 4px;
  }
  .bmh .td-san.toan-man > .tv-chon .tv-dai .tv-o img{ width:100%; height:auto; aspect-ratio:1; opacity:1; }
  .bmh .td-san.toan-man > .tv-chon .tv-dai .tv-o > span{ display:none; }
  .bmh .td-san.toan-man .tv-o-ts{ display:block; margin-top:3px; }
  .bmh .td-san.toan-man .tv-o-ts b{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font:400 8px/1.35 var(--font-head); letter-spacing:.05em;
    text-transform:uppercase; color:#F3EEE7;
  }
  .bmh .td-san.toan-man .tv-o-ts i{ display:none; }
  .bmh .td-san.toan-man .tv-mat button{ font-size:9px; padding:7px 8px; min-height:36px; }
  .bmh .td-san.toan-man .td-duoi{ display:none !important; }
  .bmh .td-san.toan-man .tv-ten{ display:none; }
}
/* XOAY NGANG điện thoại: cột hẹp lại, nhường tối đa cho ảnh */
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man{ grid-template-columns:80px 1fr !important; }
  .bmh .td-san.toan-man > .tv{ grid-template-columns:1fr 138px; }
  .bmh .td-san.toan-man .tv-o-ts b{ font-size:7.5px; }
}
@media(max-width:767.98px){
  /* ảnh phải LẤP khung giữa — thiếu chuỗi chiều cao này thì ảnh co còn ~180px */
  .bmh .td-san.toan-man .tv-lop{
    position:relative !important; inset:auto !important;
    height:100% !important; max-width:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .bmh .td-san.toan-man #tv-a{
    position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; width:auto !important; height:auto !important;
    max-width:100% !important; max-height:100% !important; display:block;
  }
  .bmh .td-san.toan-man #tv-b,
  .bmh .td-san.toan-man .tv-goc canvas{
    position:absolute !important; left:0 !important; top:0 !important;
    transform:none !important; width:100% !important; height:100% !important;
    max-width:none !important; max-height:none !important;
  }
  /* các hàng phụ nhường chỗ cho ảnh */
  .bmh .td-san.toan-man .tv-nguon,
  .bmh .td-san.toan-man .tv-chinh,
  .bmh .td-san.toan-man .tv-loc,
  .bmh .td-san.toan-man .tv-nhan,
  .bmh .td-san.toan-man .tv-nut{ display:none !important; }
  /* nút Thoát: về góc trái, không đè giữa */
  .bmh .td-san.toan-man .td-thoat{
    left:8px !important; right:auto !important; transform:none !important;
    top:8px; padding:0 10px; font-size:9px; min-height:36px; z-index:16;
  }
  .bmh .td-san.toan-man .tv-zoom{ top:8px; right:8px; z-index:16; }
}

/* ============================================================
   ĐIỆN THOẠI — cột NỔI ĐÈ thay vì chia ô lưới (25/08)
   Chia ô trên màn 390px thì ảnh chỉ còn 176px (đo được) — không xem
   được gì. Cho hai cột nổi đè lên ảnh, nền mờ: ảnh lấp TRỌN màn,
   vẫn đủ hai cột, và khi thao tác thì cột tự mờ đi nhường chỗ.
   ============================================================ */
@media(max-width:767.98px){
  .bmh .td-san.toan-man{
    display:block !important; grid-template-columns:none !important;
  }
  .bmh .td-san.toan-man > .tv{
    display:block !important; position:absolute !important; inset:0 !important;
    grid-template-columns:none !important;
  }
  .bmh .td-san.toan-man > .tv > .tv-khung{
    position:absolute !important; inset:0 !important;
  }
  .bmh .td-san.toan-man > .tv-chon{
    position:fixed !important; left:0; top:0; bottom:0; width:84px !important; z-index:12;
    background:rgba(38,38,38,.74); backdrop-filter:blur(6px);
    transition:opacity .35s cubic-bezier(.22,.61,.36,1);
  }
  .bmh .td-san.toan-man > .tv > .tv-thanh{
    position:fixed !important; right:0; top:0; bottom:0; width:126px !important; z-index:12;
    background:rgba(38,38,38,.74); backdrop-filter:blur(6px);
    border-left:1px solid rgba(243,238,231,.16);
    transition:opacity .35s cubic-bezier(.22,.61,.36,1);
  }
  .bmh .td-san.toan-man > .tv > .tv-thanh > .tv-mat{
    position:absolute; inset:0; padding:10px !important;
  }
  /* đang kéo/phóng -> hai cột mờ đi (lớp .td-tron đã có sẵn) */
  .bmh .td-san.td-tron > .tv-chon,
  .bmh .td-san.td-tron > .tv > .tv-thanh{ opacity:0; pointer-events:none; }
}
/* xoay ngang: cột hẹp hơn nữa */
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man > .tv-chon{ width:76px !important; }
  .bmh .td-san.toan-man > .tv > .tv-thanh{ width:132px !important; }
}
@media(max-width:767.98px){
  /* nút Thoát bị cắt mất nửa: luật gốc left:50%+translateX(-50%) vẫn thắng,
     phải ép lại đủ cả ba thuộc tính */
  .bmh .td-san.toan-man .td-thoat{
    left:92px !important; right:auto !important; transform:none !important;
    top:8px !important; padding:0 10px !important; font-size:9px !important;
    min-height:36px !important; z-index:16 !important;
  }
  .bmh .td-san.toan-man .tv-zoom{ right:134px !important; top:8px !important; z-index:16 !important; }
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man .td-thoat{ left:84px !important; }
  .bmh .td-san.toan-man .tv-zoom{ right:140px !important; }
}
.bmh .td-ngan-chu{ display:none; }
@media(max-width:767.98px){
  /* chữ dài đè lên cụm phóng -> dùng bản ngắn trên điện thoại */
  .bmh .td-dai-chu{ display:none; }
  .bmh .td-ngan-chu{ display:inline; }
  .bmh .td-san.toan-man .td-thoat{ left:92px !important; }
  .bmh .td-san.toan-man .tv-zoom{ right:134px !important; }
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man .td-thoat{ left:84px !important; }
  .bmh .td-san.toan-man .tv-zoom{ right:140px !important; }
}

/* ============================================================
   THANH DƯỚI = TOÀN BỘ NÚT (25/08) — sửa lỗi ẩn nhầm
   Trước đó ẩn cả .tv-nut nên MẤT: So sánh trước/sau · Tải ảnh · Chia sẻ ·
   link bếp 3D · link Zalo. Nay cả cụm nằm ở thanh dưới, và trong TOÀN MÀN
   HÌNH thanh này thành dải mờ nổi ở đáy (tự ẩn khi thao tác như hai cột).
   ============================================================ */
@media(min-width:768px){
  .bmh .td-duoi .tv-nut{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin:0; }
  .bmh .td-duoi #tv-man{ display:none; }   /* trùng vai nút trên ảnh */
  .bmh .td-san.toan-man .td-duoi{
    display:flex !important; position:fixed; left:196px; right:190px; bottom:0;
    z-index:13; background:rgba(38,38,38,.74); backdrop-filter:blur(6px);
    border-top:1px solid rgba(243,238,231,.16); padding:10px 18px;
    transition:opacity .35s cubic-bezier(.22,.61,.36,1);
  }
  .bmh .td-san.td-tron .td-duoi{ opacity:0; pointer-events:none; }
}
@media(max-width:767.98px){
  .bmh .td-san.toan-man .td-duoi{
    display:flex !important; position:fixed; left:84px; right:126px; bottom:0;
    z-index:13; background:rgba(38,38,38,.78); backdrop-filter:blur(6px);
    padding:8px 10px; gap:6px 14px; overflow-x:auto; flex-wrap:nowrap;
    transition:opacity .35s cubic-bezier(.22,.61,.36,1);
  }
  .bmh .td-san.toan-man .td-duoi .tv-loc,
  .bmh .td-san.toan-man .td-duoi .tv-chinh{ display:none; }
  .bmh .td-san.toan-man .td-duoi .tv-nut{ display:flex; flex-wrap:nowrap; gap:14px; }
  .bmh .td-san.toan-man .td-duoi button,
  .bmh .td-san.toan-man .td-duoi a{ white-space:nowrap; font-size:9px; }
}
/* ⚠️ .tv-nut vốn position:absolute (neo theo khung ảnh, bẫy 27 cũ). Nay nó
   nằm trong thanh dưới nên phải trả về dòng chảy, không thì nhảy lên đỉnh
   trang và bị header che (đo: y=24, bấm không trúng). */
.bmh .td-duoi .tv-nut{
  position:static !important; right:auto !important; top:auto !important;
  justify-content:flex-start !important;
}
@media(max-width:767.98px){
  /* hàng nút ở thanh dưới làm tràn ngang 20px (đo 375/390) -> cho vuốt ngang
     và khoá bề rộng theo khung, không để đẩy trang */
  .bmh .td-duoi{ max-width:100%; overflow-x:hidden; }
  .bmh .td-duoi .tv-nut{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    max-width:100%; gap:18px; padding:0 var(--gutter);
  }
  .bmh .td-duoi .tv-nut::-webkit-scrollbar{ display:none; }
  .bmh .td-duoi .tv-nut > *{ flex:0 0 auto; white-space:nowrap; }
}

/* ============================================================
   26/08 — SẾP DUYỆT: XOAY NGANG TRONG TOÀN MÀN HÌNH (ảnh 2 của sếp)
   (a) Cột phải 132px + chữ 11px giãn rộng → nhãn "Mặt bàn (chân phải)"
       VỠ 4 DÒNG (đo cao 84px, trong khi nhãn ngắn chỉ 52px).
   (b) ⚠️ BẪY MỚI: xoay ngang điện thoại đo được 851px > 768px nên ô đá
       vẫn ăn luật MÁY TÍNH (ảnh 52px + cột thông số bên phải), trong khi
       cột trái chỉ 76px → cột thông số bị bóp còn 0px bề rộng, ô cao
       157px, chữ đổ dọc thành vệt mờ ở mép trái. Khối thu gọn của
       điện thoại nằm trong @media(max-width:767.98px) nên KHÔNG với tới.
       → Xoay ngang phải dùng lại kiểu ô của điện thoại (ảnh vuông + tên).
   Khối này khai CUỐI FILE để thắng (bẫy 55).
   ============================================================ */
@media(max-width:900px) and (orientation:landscape){
  /* (a) nới cột phải + siết giãn chữ để nhãn dài xuống tối đa 2 dòng */
  .bmh .td-san.toan-man > .tv > .tv-thanh{ width:150px !important; }
  .bmh .td-san.toan-man .tv-mat button{ letter-spacing:.035em; }
  .bmh .td-san.toan-man .tv-zoom{ right:158px !important; }

  /* (b) ô đá trở về kiểu điện thoại: ảnh vuông, tên gọn 2 dòng, bỏ dòng thông số */
  .bmh .td-san.toan-man > .tv-chon .tv-dai{ display:block; padding:6px; }
  .bmh .td-san.toan-man > .tv-chon .tv-dai .tv-o{
    display:block !important; width:100% !important; height:auto !important;
    padding:4px !important; margin:0 0 4px !important; text-align:center;
  }
  .bmh .td-san.toan-man > .tv-chon .tv-dai .tv-o img{
    width:100% !important; height:auto !important; aspect-ratio:1; opacity:1;
  }
  .bmh .td-san.toan-man .tv-o-ts{
    display:block; margin-top:3px; flex:none; min-width:0; text-align:left;
  }
  .bmh .td-san.toan-man .tv-o-ts b{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font:400 7.5px/1.35 var(--font-head); letter-spacing:.05em;
    text-transform:uppercase; color:#F3EEE7;
  }
  .bmh .td-san.toan-man .tv-o-ts i{ display:none !important; }

  /* (c) CÙNG BẪY: tên đá cỡ lớn .tv-ten đã được ẩn trong toàn màn hình dọc
     (cột trái đã ghi tên rồi), nhưng luật ẩn nằm trong @media(max-width:767.98px)
     nên màn ngang 851px không với tới → chữ to đè giữa ảnh, che vân đá. */
  .bmh .td-san.toan-man .tv-ten{ display:none; }
}

/* ============================================================
   26/08 (sếp báo lần 2) — NÚT "THOÁT" ĐÈ LÊN CỤM PHÓNG TO
   Đo trên live, ở chế độ toàn màn hình (bấm nút THẬT, không phải thêm lớp):
     · dọc 390px : Thoát 92→152 · phóng to 122→256  ⇒ CHỒNG 30px
     · ngang 851 : Thoát 288→495 · phóng to 436→570 ⇒ CHỒNG 59px
   Cụm phóng to nằm TRÊN nên nửa phải nút Thoát bấm vào lại trúng nút con
   mắt — đúng lời sếp "2 nút bấm không ăn".
   Gốc rễ: khoảng giữa hai cột trên màn dọc chỉ 180px (84 + 126 = 210px đã
   là cột), mà cụm phóng to 134px + nút Thoát 60px + khe = 202px > 180px.
   KHÔNG thể xếp cùng hàng mà vẫn giữ vùng bấm 44px.
   ⚠️ Lại là bẫy 59: chữ ngắn "Thoát" chỉ được khai cho max-width:767.98px
   nên màn NGANG vẫn dùng chữ dài 207px — phải khai cho cả hai khổ.
   ⚠️ Đã THỬ đưa nút Thoát ra sát mép trái (left:8px) — HỎNG: nó nằm trong
   .tv nên z-index:18 không thắng nổi cột đá (bẫy 45), đo elementFromPoint
   tại tâm nút trả về BUTTON.tv-o ⇒ bấm Thoát lại trúng ô đá.
   ⇒ Cách dùng được: giữ CẢ HAI trong khoảng giữa nhưng KHÁC HÀNG —
     nút Thoát hàng trên, cụm phóng to lùi xuống dưới 52px.
   ============================================================ */
@media(max-width:767.98px){
  .bmh .td-san.toan-man .td-thoat{
    left:92px !important; right:auto !important; transform:none !important;
    top:8px !important; z-index:18 !important;
  }
  /* right phải giữ 134px: đặt 8px thì cụm chui xuống DƯỚI cột phải
     (đo x 248→382, cột phải bắt đầu 264) và cả 3 nút mất tác dụng. */
  .bmh .td-san.toan-man .tv-zoom{ top:60px !important; right:134px !important; }
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .td-san.toan-man .td-thoat{
    left:84px !important; right:auto !important; transform:none !important;
    top:8px !important; z-index:18 !important;
  }
  /* màn ngang cũng là điện thoại -> dùng bản chữ NGẮN (207px -> ~60px) */
  .bmh .td-san.toan-man .td-dai-chu{ display:none; }
  .bmh .td-san.toan-man .td-ngan-chu{ display:inline; }
  .bmh .td-san.toan-man .tv-zoom{ top:8px !important; right:158px !important; }
}

/* ============================================================
   26/08 — NÚT "THOÁT" BẤM KHÔNG ĂN TRÊN MÁY THẬT (sếp báo)
   Chế độ tự-ẩn-khi-thao-tác (.td-tron) tắt `pointer-events` của nút Thoát
   (dòng ~556), mà JS bật lớp đó NGAY TỪ `pointerdown` trên khung ảnh —
   và nút Thoát nằm TRONG khung ảnh. Nên chạm vào chính nút Thoát cũng bật
   .td-tron, nút mất pointer-events giữa chừng ⇒ `click` không bao giờ sinh ra.
   Đo được (bấm nút thật rồi phát pointerdown vào giữa ảnh):
     trước khi chạm: pointer-events auto  → bấm được
     sau khi chạm  : pointer-events NONE  → cú bấm rơi vào CANVAS
   ⚠️ Nút vẫn HIỆN RÕ (opacity 1) nên khách thấy nút mà bấm mãi không được —
   đúng lời sếp "phải vuốt xuống bấm back mới thoát".
   ⇒ Trong toàn màn hình, nút Thoát là LỐI RA DUY NHẤT: luôn bấm được.
     (Cùng cách đã xử lý cho cụm phóng to ở khối "TOÀN MÀN HÌNH phải THẮNG".)
   ============================================================ */
.bmh .td-san.toan-man.td-tron .td-thoat,
.bmh .td-san.toan-man .td-thoat{
  opacity:1 !important; pointer-events:auto !important;
}

/* ============================================================
   26/08 — DỌN GỌN GIAO DIỆN ĐIỆN THOẠI (sếp chốt)
   Đo trước khi dọn (live, 390px): ảnh 293px = 35% màn, còn 7 HÀNG ĐIỀU
   KHIỂN chiếm 418px = 50% màn, và 6/7 hàng phải vuốt ngang (nội dung rộng
   477→4548px trong khung 390px) nên khách không biết hàng nào vuốt được.
   Ba hàng cuối (chỉnh vân · tỉ lệ vân · lọc bộ sưu tập) thuộc loại DÙNG MỘT
   LẦN RỒI THÔI nhưng chiếm 129px thường trực.
   ⇒ Gom chúng vào ngăn kéo "Tuỳ chỉnh" trượt lên từ đáy · bỏ nút "Toàn màn
     hình" trùng nghĩa với nút trên ảnh · thu đoạn chữ nhãn.
   ⚠️ Bẫy 52 (ẩn nút là MẤT tính năng) KHÔNG dính ở đây: không ẩn cái nào,
   chỉ đổi chỗ đặt — mọi nút vẫn còn trong ngăn kéo.
   ⚠️ Máy tính giữ nguyên bố cục cũ nhờ .td-tc-bang{display:contents}: hai
   hàng bên trong vẫn là con trực tiếp của .td-duoi (flex) như trước.
   ============================================================ */
.bmh .td-tc-o{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.bmh .td-tc-nut,.bmh .td-tc-dong{ display:none; }
.bmh .td-tc-bang{ display:contents; }

@media(max-width:767.98px){
  /* nút mở ngăn kéo — cùng kiểu chữ + gạch chân như các nút cạnh nó */
  .bmh .tv-nut label.td-tc-nut{
    display:inline-flex; align-items:center; min-height:44px; padding:12px 0;
    color:#F3EEE7; text-shadow:0 1px 12px rgba(38,38,38,.7);
    font:11px/1 var(--font-head); letter-spacing:.2em; text-transform:uppercase;
    position:relative; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  }
  .bmh .tv-nut label.td-tc-nut::after{
    content:''; position:absolute; left:0; right:0; bottom:9px; height:1px;
    background:currentColor;
  }
  /* ngăn kéo trượt lên từ đáy */
  .bmh .td-tc-bang{
    /* ⚠️ thanh Gọi/Zalo (.dock) cũng z-index:60 và đứng SAU trong trang nên
       đè lên ngăn kéo — đo được 2 nút cuối (Gamilla, Vein Body) bấm không ăn.
       Ngăn kéo là lớp tạm, phải nằm trên; khách bấm "Xong" là trả lại CTA. */
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--ink); border-top:1px solid rgba(243,238,231,.18);
    padding:8px var(--gutter) 18px; max-height:72vh; overflow-y:auto;
    transform:translateY(101%);
    transition:transform 1.25s cubic-bezier(.22,.61,.36,1);
    box-shadow:0 -18px 40px rgba(0,0,0,.4);
  }
  .bmh .td-tc-o:checked ~ .td-tc-bang{ transform:translateY(0); }
  .bmh .td-tc-dong{
    display:flex; align-items:center; justify-content:flex-end; min-height:44px;
    color:#F3EEE7; font:11px/1 var(--font-head); letter-spacing:.2em;
    text-transform:uppercase; cursor:pointer; padding:6px 0;
  }
  /* trong ngăn kéo thì hai hàng này có chỗ rộng -> cho xuống dòng, hết vuốt ngang */
  .bmh .td-tc-bang .tv-chinh,
  .bmh .td-tc-bang .tv-loc{
    flex-wrap:wrap; overflow:visible; margin:0; padding:0; border-top:0;
    gap:4px 20px;
  }
  /* nút "Toàn màn hình" trùng nghĩa với nút "Xem toàn màn hình" đè trên ảnh */
  .bmh .td-duoi #tv-man{ display:none; }
  /* đoạn chữ nhãn: 3 dòng 65px -> 2 dòng, giữ NGUYÊN VĂN chữ */
  .bmh .tv-nhan{ font-size:12px; line-height:1.45; }
}
@media(prefers-reduced-motion:reduce){
  .bmh .td-tc-bang{ transition:none; }
}

/* ===== (02/09) TIM + LOC MAU trong dai chon — chuan Roomvo/MSI =====
   Bay 47: khoi nay khai o CA page-thu-da.css VA page-bep-3d.css. */
.bmh .tv-tim{ padding:10px 12px 4px; display:flex; flex-direction:column; gap:8px; }
.bmh .tv-tim input{ width:100%; background:transparent; border:0;
  border-bottom:1px solid rgba(243,238,231,.35); color:var(--bone);
  font:inherit; font-size:13px; padding:6px 2px; letter-spacing:.02em; }
.bmh .tv-tim input::placeholder{ color:rgba(243,238,231,.55); }
.bmh .tv-tim input:focus{ outline:none; border-bottom-color:var(--bone); }
.bmh .tv-tim-loc{ display:flex; flex-wrap:wrap; gap:6px; }
.bmh .tv-tim-loc button{ background:none; border:1px solid rgba(243,238,231,.3);
  color:var(--bone); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 10px; cursor:pointer; border-radius:0; font-weight:500; }
.bmh .tv-tim-loc button[aria-pressed="true"]{ background:var(--bone); color:var(--ink);
  border-color:var(--bone); }
.bmh .tv-tim-rong{ color:rgba(243,238,231,.7); font-size:12px; margin:0; }
.bmh .tv-o[hidden]{ display:none !important; }
/* an trong toan man hinh / che do tron — cot 70px khong du cho */
.bmh .td-san.toan-man .tv-tim,
.bmh .td-san.td-tron .tv-tim{ display:none; }
/* [hidden] thua display:flex khai o tren -> phai ep (cung ho bay .cn-loc) */
.bmh .tv-tim-loc[hidden]{ display:none; }
.bmh .tv-tim-loc button[hidden]{ display:none; }
/* (04/09) chip mau trong dai chon */
.bmh .tv-tim-mau{ margin-top:2px; }
.bmh .tv-tim-loc .chip-mau i{ width:10px; height:10px; border-color:rgba(243,238,231,.5); }