/* ============================================================
   TRANG 'BEP 3D + DU TOAN' — /bep-3d/ (20/08/2026)
   CSS chuyen tu ban demo cong-cu/demo-3d. Moi rule boc .bmh.
   Khong JS: khoi 3D an, khoi tinh hien. ============================ */
.bmh .b3-ui{ display:none; }
.js .bmh section.b3-ui{ display:block; }
.js .bmh div.pn.b3-ui{ display:flex; }
.js .bmh div.pn.b3-ui[hidden]{ display:none; }
.js .bmh .b3-tinh{ display:none; }


.bmh .tv{background:var(--ink);position:relative}
.bmh .tv-khung{position:relative;width:100%;height:74vh;min-height:420px;overflow:hidden}
.bmh #sk{position:absolute;inset:0}
.bmh #sk canvas{display:block;width:100%;height:100%}
.bmh .tv-ten{position:absolute;left:var(--gutter);top:22px;z-index:6;color:#F3EEE7;pointer-events:none}
.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,.8)}
.bmh .tv-ten span{display:block;margin-top:5px;font:13px/1.5 var(--font-body);
  color:rgba(243,238,231,.85);text-shadow:0 1px 12px rgba(38,38,38,.8)}
.bmh .d3-nhac{position:absolute;right:var(--gutter);bottom:16px;z-index:6;margin:0;
  font:10px/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,238,231,.62);pointer-events:none}
.bmh .tv-thanh{padding:var(--sp-s) var(--gutter) 0}
.bmh .tv-nut,.bmh .tv-mat{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.bmh .tv-nut{margin-bottom:6px}
/* ⚠️ 26/08: khai CA the <a> — truoc chi co button nen link 'Xem bep 360'
   ra chu thuong, lech han hang nut IN HOA ben canh (bay 47 cung ho). */
.bmh .tv-nut button,.bmh .tv-nut a,.bmh .tv-mat button{appearance:none;text-decoration: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;min-height:44px;white-space:nowrap}
.bmh .tv-nut button,.bmh .tv-nut a{color:#F3EEE7}
.bmh .tv-nut button::after,.bmh .tv-nut a::after,.bmh .tv-mat 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-mat button:hover::after,
.bmh .tv-mat button[aria-pressed="true"]::after{right:0}
.bmh .tv-mat button[aria-pressed="true"]{color:#F3EEE7}
.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,.72)}
.bmh .d3-thu{margin-left:auto;font:10px/1.4 var(--font-body);color:rgba(243,238,231,.55);
  letter-spacing:.06em;text-align:right;max-width:38ch}
.bmh .tv-nhan{margin:8px 0 0;font:11px/1.6 var(--font-body);color:rgba(243,238,231,.72)}
.bmh .tv-chon{background:var(--ink);padding-bottom:var(--sp-m)}
.bmh .tv-dai-o{position:relative;padding-top:var(--sp-s)}
.bmh .tv-dai{display:flex;gap:2px;overflow-x:auto;padding:0 var(--gutter) 4px;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}
.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 .ten{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 .ten,.bmh .tv-o[aria-pressed="true"] .ten{opacity:1}
.bmh .pn{position:fixed;inset:0;z-index:20;background:rgba(20,20,20,.55);display:flex;
  align-items:center;justify-content:center;padding:18px}
.bmh .pn[hidden]{display:none}
.bmh .pn-hop{background:var(--ink);border:1px solid rgba(243,238,231,.22);padding:26px 28px;
  width:min(430px,94vw);max-height:88vh;overflow:auto}
.bmh .pn-rong{width:min(680px,96vw)}
.bmh .pn-hop h2{font:400 15px/1.5 var(--font-head);letter-spacing:.18em;text-transform:uppercase;
  color:#F3EEE7;margin:0 0 6px}
.bmh .pn-mo{font:12px/1.6 var(--font-body);color:rgba(243,238,231,.7);margin:0 0 14px}
.bmh .pn-luoi{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.bmh .pn-luoi label{display:flex;flex-direction:column;gap:5px;
  font:10px/1.4 var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,231,.75)}
.bmh .pn-luoi input,.bmh .pn-luoi select{background:none;border:1px solid rgba(243,238,231,.35);
  color:#F3EEE7;padding:9px 10px;font:14px var(--font-body);border-radius:0}
.bmh .pn-check{flex-direction:row!important;align-items:center;gap:9px!important;grid-column:1/-1}
.bmh .pn-check input{width:16px;height:16px;accent-color:#F3EEE7}
.bmh .pn-nut{display:flex;gap:20px;margin-top:18px;align-items:center}
.bmh .pn-nut button{appearance:none;background:none;border:0;padding:11px 0;cursor:pointer;
  color:rgba(243,238,231,.75);font:11px/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;
  position:relative}
.bmh .pn-nut button::after{content:'';position:absolute;left:0;right:100%;bottom:7px;height:1px;
  background:currentColor;transition:right .4s}
.bmh .pn-nut button:hover::after{right:0}
.bmh .pn-chinh{color:var(--ink)!important;background:#F3EEE7!important;padding:12px 18px!important}
.bmh .pn-chinh::after{display:none}
.bmh #pkl-bang table{width:100%;border-collapse:collapse;font:13px/1.5 var(--font-body);color:#F3EEE7}
.bmh #pkl-bang th{font:10px/1.4 var(--font-head);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,238,231,.6);text-align:left;padding:7px 8px;border-bottom:1px solid rgba(243,238,231,.25)}
.bmh #pkl-bang td{padding:8px;border-bottom:1px solid rgba(243,238,231,.12);vertical-align:top}
.bmh #pkl-bang td i{font-style:normal;color:rgba(243,238,231,.5);font-size:11px}
.bmh #pkl-bang tfoot td{font-weight:500;border-bottom:0;border-top:1px solid rgba(243,238,231,.4)}
.bmh #pkl-bang .pkl-chu,.bmh #pkl-bang .pkl-trong{font:11px/1.6 var(--font-body);
  color:rgba(243,238,231,.55);margin:10px 0 0}
@media(max-width:767.98px){
  .bmh .pn-luoi{grid-template-columns:1fr 1fr}
  .bmh #pkl-bang{overflow-x:auto}

  .bmh .tv-khung{height:56svh;min-height:300px}
  .bmh .tv-nut,.bmh .tv-mat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .bmh .d3-thu{display:none}
  .bmh .tv-o,.bmh .tv-o img{width:80px}.bmh .tv-o img{height:80px}
}

/* góc nhìn cài sẵn — một chạm tới nơi (feedback 21/08: xoay khó) */
.bmh .b3-goc{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
  display:flex;gap:18px;max-width:94%;overflow-x:auto;scrollbar-width:none}
.bmh .b3-goc::-webkit-scrollbar{display:none}
.bmh .b3-goc button{appearance:none;background:rgba(38,38,38,.42);border:1px solid rgba(243,238,231,.3);
  color:rgba(243,238,231,.85);padding:9px 14px;cursor:pointer;flex:0 0 auto;
  font:10px/1 var(--font-head);letter-spacing:.18em;text-transform:uppercase;min-height:38px}
.bmh .b3-goc button[aria-pressed="true"],.bmh .b3-goc button:hover{background:#F3EEE7;color:var(--ink);border-color:#F3EEE7}
@media(max-width:767.98px){.bmh .b3-goc{bottom:10px;gap:10px}.bmh .b3-goc button{padding:8px 11px}}

@media(max-width:767.98px){.bmh .d3-nhac{display:none}}

/* ===== THỨ BẬC HÀNG NÚT (feedback UX 21/08) ===== */
.bmh .b3-hang{ align-items:center; }
.bmh .b3-cach{ flex:1 1 auto; }
.bmh .tv-nut .b3-day{
  background:#F3EEE7; color:var(--ink); padding:13px 20px;
}
.bmh .tv-nut .b3-day::after{ display:none; }
.bmh .tv-nut .b3-day:hover{ background:#fff; }
.bmh .tv-nut .b3-vien{
  border:1px solid rgba(243,238,231,.55); padding:12px 18px;
}
.bmh .tv-nut .b3-vien::after{ display:none; }
.bmh .tv-nut .b3-vien:hover{ border-color:#F3EEE7; }
.bmh .tv-nut .b3-nhat{ color:rgba(243,238,231,.55); }
.bmh .tv-nut .b3-nhat:hover{ color:#F3EEE7; }

/* ===== CHIP BỀ MẶT = PILL MỘT DÒNG + Ô MÀU ĐÁ ===== */
.bmh #bm{
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px;
  padding-top:4px; padding-bottom:6px;
}
.bmh #bm::-webkit-scrollbar{ display:none; }
.bmh #bm 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;
}
.bmh #bm button::after{ display:none; }
.bmh #bm button:hover{ border-color:rgba(243,238,231,.7); color:#F3EEE7; }
.bmh #bm button[aria-pressed="true"]{
  background:#F3EEE7; color:var(--ink); border-color:#F3EEE7;
}
.bmh #bm .b3-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 #bm .b3-trong{ background:none; outline:1px dashed rgba(243,238,231,.5); }
.bmh #bm button[aria-pressed="true"] .b3-trong{ outline-color:rgba(38,38,38,.5); }
.bmh .b3-nhan{ padding:10px var(--gutter) 0; font-size:11px; color:rgba(243,238,231,.55); }
@media(max-width:767.98px){
  .bmh .b3-cach{ display:none; }
  .bmh .tv-nut .b3-day,.bmh .tv-nut .b3-vien{ padding:11px 14px; }
}

.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 mặt đá để chọn (21/08) */
.bmh #bm button.b3-nhay{ animation:b3-nhay .7s ease; }
@keyframes b3-nhay{ 0%,100%{ opacity:1 } 35%{ opacity:.35 } }
@media(prefers-reduced-motion:reduce){ .bmh #bm button.b3-nhay{ animation:none } }

/* ============================================================
   TOÀN MÀN HÌNH kiểu Roomvo (sếp chốt 25/08)
     · bếp 3D 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 cảnh (không chia ô lưới) — nên khi ẩn đi là bếp
       tràn kín ngay, không phải vẽ lại khung 3D (vẽ lại vừa giật vừa tốn)
     · đang xoay/phóng thì hai cột mờ đi, nhường hết chỗ cho khách "chơi"
   ============================================================ */
/* ⚠️ 26/08 — BẪY 47: nút này mang lớp .tv-bung, mà .tv-bung CHỈ được khai
   trong page-thu-da.css — trang này KHÔNG nạp file đó. Hậu quả: nút rơi về
   nút trần của trình duyệt (đo được 120×35px, display:inline-block, không
   viền không nền), lọt thỏm trên cảnh 3D tối màu nên sếp không thấy
   (feedback 26/08 "cần thêm nút full màn hình" — thật ra đã có, chỉ vô hình).
   Vùng bấm 35px cũng dưới ngưỡng 44px của dự án. Phải KHAI LẠI đầy đủ. */
.bmh .b3-bung{
  position:absolute; top:10px; right:10px; bottom:auto; 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 .b3-bung:hover{ background:rgba(38,38,38,.86); border-color:#F3EEE7; }
.bmh .b3-bung[hidden]{ display:none; }

.bmh .b3-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 .b3-thoat[hidden]{ display:none; }
.bmh .b3-thoat:hover{ background:rgba(38,38,38,.88); border-color:#F3EEE7; }

.bmh .b3-san.b3-toan-man{ position:fixed; inset:0; z-index:9999; background:var(--ink); }

/* khung 3D: lấp trọn */
.bmh .b3-san.b3-toan-man .tv{ position:absolute; inset:0; }
.bmh .b3-san.b3-toan-man .tv-khung{
  position:absolute; inset:0; height:auto; min-height:0;
}
.bmh .b3-san.b3-toan-man #sk{ position:absolute; inset:0; }
.bmh .b3-san.b3-toan-man .tv-nut,
.bmh .b3-san.b3-toan-man .tv-nhan,
.bmh .b3-san.b3-toan-man .b3-nhan,
.bmh .b3-san.b3-toan-man .d3-nhac,
.bmh .b3-san.b3-toan-man .d3-thu{ display:none; }

/* cột TRÁI — mẫu đá, nổi đè */
.bmh .b3-san.b3-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 .b3-san.b3-toan-man .tv-dai-o{ overflow:visible; }
.bmh .b3-san.b3-toan-man .tv-dai{ display:block; padding:8px; overflow:visible; }
.bmh .b3-san.b3-toan-man .tv-dai .tv-o,
.bmh .b3-san.b3-toan-man .tv-dai .tv-o img{ width:88px; height:88px; }
.bmh .b3-san.b3-toan-man .tv-dai .tv-o{ margin:0 0 6px; }

/* cột PHẢI — chọn bề mặt, nổi đè */
.bmh .b3-san.b3-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 .b3-san.b3-toan-man #bm{
  display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
  gap:6px; padding:12px; margin:0; overflow:visible;
}
.bmh .b3-san.b3-toan-man #bm button{ width:100%; justify-content:flex-start; }

/* tên đá: dưới-trái, tránh cột đá */
.bmh .b3-san.b3-toan-man .tv-ten{
  top:auto; bottom:66px; left:120px; right:auto; max-width:44%;
  transition:opacity .35s cubic-bezier(.22,.61,.36,1);
}
.bmh .b3-san.b3-toan-man .b3-goc{ bottom:16px; z-index:13; }

/* ĐANG XOAY/PHÓNG -> mọi thứ phụ mờ đi, chỉ còn không gian bếp */
.bmh .b3-san.b3-tron .tv-chon,
.bmh .b3-san.b3-tron .tv-thanh,
.bmh .b3-san.b3-tron .tv-ten,
.bmh .b3-san.b3-tron .b3-goc,
.bmh .b3-san.b3-tron .b3-thoat{ opacity:0; pointer-events:none; }

/* ---- ĐIỆN THOẠI ---- */
@media(max-width:767.98px){
  .bmh .b3-bung{ top:8px; right:8px; }
  .bmh .b3-san.b3-toan-man .tv-chon{ width:70px; }
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o,
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o img{ width:54px; height:54px; }
  .bmh .b3-san.b3-toan-man .tv-thanh{ width:124px; }
  .bmh .b3-san.b3-toan-man #bm{ padding:8px; }
  .bmh .b3-san.b3-toan-man #bm button{ padding:8px 9px; font-size:9px; min-height:38px; letter-spacing:.06em; }
  .bmh .b3-san.b3-toan-man .tv-ten{ left:80px; bottom:60px; max-width:40%; }
  .bmh .b3-thoat{ padding:0 12px; font-size:10px; }
}
/* màn NGANG điện thoại: cột gọn hơn nữa, chừa tối đa khoảng nhìn */
@media(max-width:900px) and (orientation:landscape){
  .bmh .b3-san.b3-toan-man .tv-chon{ width:78px; }
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o,
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o img{ width:62px; height:62px; }
  .bmh .b3-san.b3-toan-man .tv-thanh{ width:142px; }
}

/* cột bề mặt: tên dài (VÁCH ĐẢO (TRƯỚC)) bị cắt trên màn hẹp -> cho xuống dòng */
.bmh .b3-san.b3-toan-man #bm button{
  white-space:normal; text-align:left; line-height:1.45; align-items:flex-start;
}
.bmh .b3-san.b3-toan-man #bm .b3-swatch{ margin-top:1px; }
@media(max-width:900px) and (orientation:landscape){
  .bmh .b3-san.b3-toan-man .tv-thanh{ width:158px; }
}

/* ============================================================
   ĐỒNG BỘ VỚI /thu-da/ (25/08): bố cục hai cột MẶC ĐỊNH trên máy
   tính · thông số từng mẫu ở cột trái · hàng nút xuống thanh dưới ·
   không chân trang. Toàn màn hình vẫn là cột NỔI ĐÈ như cũ.
   ============================================================ */
.bmh .tv-o-ts{ display:none; }

@media(min-width:768px){
  .bmh .b3-san{
    display:grid; grid-template-columns:196px 1fr;
    grid-template-areas:"da canh" "duoi duoi";
    grid-template-rows:calc(100vh - 250px) auto;
    background:var(--ink);
  }
  .bmh .b3-san > section.tv{
    grid-area:canh; min-width:0; height:calc(100vh - 250px);
    display:grid; grid-template-columns:1fr 190px; grid-template-rows:1fr;
  }
  .bmh .b3-san > section.tv > .tv-khung{
    grid-column:1; grid-row:1; height:100%; min-height:0;
  }
  .bmh .b3-san > section.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 .b3-san > section.tv > .tv-thanh > #bm{
    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 .b3-san > section.tv > .tv-thanh > #bm 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;
  }
  .bmh .b3-san > section.tv > .tv-thanh > .tv-nhan{ display:none; }

  /* cột trái: mẫu đá + thông số */
  .bmh .b3-san > section.tv-chon{
    grid-area:da; margin:0; padding:0; height:calc(100vh - 250px);
    overflow-y:auto; overflow-x:hidden;
    border-right:1px solid rgba(243,238,231,.14);
  }
  .bmh .b3-san > section.tv-chon .tv-dai-o{ overflow:visible; }
  .bmh .b3-san > section.tv-chon .tv-dai{ display:block; padding:8px; overflow:visible; }
  .bmh .b3-san > section.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 .b3-san > section.tv-chon .tv-dai .tv-o img{ width:52px; height:52px; flex:0 0 auto; opacity:1; }
  .bmh .b3-san > section.tv-chon .tv-dai .tv-o > .ten{ display:none; }
  .bmh .b3-san > section.tv-chon .tv-dai .tv-o[aria-pressed="true"]{
    border-color:rgba(243,238,231,.75); background:rgba(243,238,231,.08);
  }
  .bmh .b3-san .tv-o-ts{ display:block; font-style:normal; min-width:0; flex:1 1 auto; color:rgba(243,238,231,.62); }
  .bmh .b3-san .tv-o-ts b{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; font:400 10px/1.4 var(--font-head); letter-spacing:.08em;
    text-transform:uppercase; color:#F3EEE7;
  }
  .bmh .b3-san .tv-o-ts i{ display:block; font-style:normal; font-size:10px; line-height:1.5; }

  /* thanh dưới */
  .bmh .b3-duoi{
    grid-area:duoi; display:flex; flex-wrap:wrap; align-items:center;
    gap:8px 24px; padding:14px var(--gutter);
    border-top:1px solid rgba(243,238,231,.14);
  }
  .bmh .b3-duoi .tv-nut{ position:static !important; margin:0; }
  .bmh .b3-san .b3-nhan{ display:none; }
  .bmh .b3-tinh{ display:none; }
}
@media(max-width:767.98px){
  /* hàng nút ở thanh dưới làm tràn 20px (đo 375/390) — cùng lỗi và cùng cách
     chữa như /thu-da/: cho vuốt ngang, khoá bề rộng */
  .bmh .b3-duoi{ max-width:100%; overflow-x:hidden; }
  .bmh .b3-duoi .tv-nut{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    max-width:100%; gap:16px; padding:0 var(--gutter);
  }
  .bmh .b3-duoi .tv-nut::-webkit-scrollbar{ display:none; }
  .bmh .b3-duoi .tv-nut > *{ flex:0 0 auto; white-space:nowrap; }
}

/* ============================================================
   TOÀN MÀN HÌNH phải THẮNG bố cục hai cột mặc định — khối này khai
   CUỐI FILE (cùng lỗi đã gặp ở /thu-da/: canvas kẹt 1244x650).
   ============================================================ */
.bmh .b3-san.b3-toan-man{
  display:block !important; grid-template-columns:none !important;
  grid-template-rows:none !important; height:100vh !important;
}
.bmh .b3-san.b3-toan-man > section.tv{
  display:block !important; position:absolute !important; inset:0 !important;
  height:auto !important; grid-template-columns:none !important;
}
.bmh .b3-san.b3-toan-man > section.tv > .tv-khung{
  position:absolute !important; inset:0 !important; height:auto !important;
}
.bmh .b3-san.b3-toan-man > section.tv-chon{
  position:fixed !important; left:0; top:0; bottom:0; width:196px !important;
  height:auto !important; z-index:12;
  background:rgba(38,38,38,.74); backdrop-filter:blur(6px);
}
.bmh .b3-san.b3-toan-man > section.tv > .tv-thanh{
  position:fixed !important; right:0; top:0; bottom:0; width:190px !important;
  z-index:12; background:rgba(38,38,38,.74); backdrop-filter:blur(6px);
}
/* thanh dưới thành dải mờ nổi ở đáy, giữa hai cột */
.bmh .b3-san.b3-toan-man .b3-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 .b3-san.b3-tron .b3-duoi{ opacity:0; pointer-events:none; }
@media(max-width:767.98px){
  .bmh .b3-san.b3-toan-man > section.tv-chon{ width:84px !important; }
  .bmh .b3-san.b3-toan-man > section.tv > .tv-thanh{ width:126px !important; }
  .bmh .b3-san.b3-toan-man .b3-duoi{ left:84px; right:126px; padding:8px 10px; }
  /* 26/08 — hàng nút góc nhìn neo GIỮA MÀN (left:50% + translateX) nên hai
     cột nổi đè cắt mất nút hai đầu (đo: "Trên cao" và "Góc phải" chỉ còn
     một nửa). Nút góc nhìn phải LUÔN bấm được nên không thể để bị che. */
  .bmh .b3-san.b3-toan-man .b3-goc{
    left:84px !important; right:126px !important; transform:none !important;
    max-width:none !important; justify-content:flex-start; gap:10px;
  }
  /* tên đá neo left:80px, lọt DƯỚI cột trái 84px -> chữ bị gặm mất mép */
  .bmh .b3-san.b3-toan-man .tv-ten{ left:92px; max-width:164px; }
  /* khoảng giữa hai cột chỉ còn 180px -> thu nút cho lộ được ~2,5 nút,
     đủ để khách hiểu là vuốt ngang được (hàng này vẫn overflow-x:auto) */
  .bmh .b3-san.b3-toan-man .b3-goc button{
    padding:8px 9px; font-size:9px; letter-spacing:.1em; min-height:36px;
  }
}

/* ============================================================
   26/08 — XOAY NGANG ĐIỆN THOẠI trong toàn màn hình (CÙNG BẪY /thu-da/)
   Khối "toàn màn hình thắng bố cục hai cột" ở trên dùng !important nhưng
   CHỈ có bản thu gọn cho @media(max-width:767.98px). Xoay ngang điện thoại
   đo được 851px > 768px nên KHÔNG với tới → hai cột giữ bề rộng máy tính
   196px + 190px = 386px, ăn 45% màn ngang (đo 851×393), chỗ nhìn bếp chỉ
   còn 465px. Ô đá cũng giữ kiểu máy tính (ảnh 52px + cột thông số bên
   cạnh) nên trong cột hẹp thì chữ bị bóp — đúng lỗi vừa sửa bên /thu-da/.
   ============================================================ */
@media(max-width:900px) and (orientation:landscape){
  .bmh .b3-san.b3-toan-man > section.tv-chon{ width:84px !important; }
  .bmh .b3-san.b3-toan-man > section.tv > .tv-thanh{ width:150px !important; }
  .bmh .b3-san.b3-toan-man .b3-duoi{ left:84px; right:150px; padding:8px 10px; }

  /* ô đá về kiểu điện thoại: ảnh vuông + tên gọn, bỏ dòng thông số phụ */
  .bmh .b3-san.b3-toan-man .tv-dai{ display:block; padding:6px; }
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o{
    display:block !important; width:100% !important; height:auto !important;
    padding:4px !important; margin:0 0 4px !important;
  }
  .bmh .b3-san.b3-toan-man .tv-dai .tv-o img{
    width:100% !important; height:auto !important; aspect-ratio:1; opacity:1;
  }
  .bmh .b3-san.b3-toan-man .tv-o-ts{
    display:block; flex:none; min-width:0; margin-top:3px; text-align:left;
  }
  .bmh .b3-san.b3-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 .b3-san.b3-toan-man .tv-o-ts i{ display:none !important; }
  .bmh .b3-san.b3-toan-man #bm button{ font-size:10px; letter-spacing:.035em; }

  /* hàng nút góc nhìn neo GIỮA MÀN (left:50% + translateX) nên bị cột phải
     che mất nút cuối — đo: nút "Trên cao" cụt còn "TRÊN CA". Cho nó nằm
     đúng khoảng giữa hai cột. */
  .bmh .b3-san.b3-toan-man .b3-goc{
    left:84px !important; right:150px !important; transform:none !important;
    max-width:none !important; justify-content:flex-start; gap:10px; bottom:10px;
  }
  /* tên đá cỡ lớn đè lên bếp trên màn ngang thấp (393px) — cột trái đã ghi
     tên mẫu đang chọn rồi. Cùng cách xử lý như /thu-da/. */
  .bmh .b3-san.b3-toan-man .tv-ten{ display:none; }
}

/* ============================================================
   26/08 (sếp báo lần 2, cùng họ với lỗi bên /thu-da/) — NÚT "THOÁT"
   TRÀN SANG CỘT PHẢI. Đo ở toàn màn hình dọc 390px (bấm nút THẬT):
   nút Thoát 105→285 trong khi khoảng giữa hai cột chỉ tới 264
   ⇒ 21px cuối nằm DƯỚI cột phải, chữ bị che và bấm vào đó không ăn.
   Nút này chỉ có một bản chữ dài "Thoát toàn màn hình" (khác /thu-da/
   vốn có sẵn bản ngắn), nên thu bằng CSS chứ KHÔNG đổi chữ.
   ============================================================ */
@media(max-width:767.98px){
  .bmh .b3-san.b3-toan-man .b3-thoat{
    left:92px !important; right:auto !important; transform:none !important;
    top:8px !important; font-size:9px; letter-spacing:.08em; padding:0 10px;
  }
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .b3-san.b3-toan-man .b3-thoat{
    left:92px !important; right:auto !important; transform:none !important;
    top:8px !important; font-size:9px; letter-spacing:.08em; padding:0 10px;
  }
}

/* ============================================================
   26/08 — NÚT "THOÁT" BẤM KHÔNG ĂN (cùng lỗi với /thu-da/)
   `.b3-san.b3-tron .b3-thoat` tắt pointer-events, mà lớp .b3-tron bật ngay
   khi ngón tay chạm xuống cảnh 3D — nút Thoát nằm trong chính vùng đó.
   Trong toàn màn hình nút Thoát là lối ra duy nhất ⇒ luôn bấm được.
   ============================================================ */
.bmh .b3-san.b3-toan-man.b3-tron .b3-thoat,
.bmh .b3-san.b3-toan-man .b3-thoat{
  opacity:1 !important; pointer-events:auto !important;
}

/* ===== (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 .b3-san.b3-toan-man .tv-tim,
.bmh .b3-san.b3-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); }