/* ============================================================
   BYMEHOME — TRANG BẾP 360 (26/08/2026)
   Ảnh render 360 của bên thiết kế (Eco Retreat, phối cảnh chưa thi công).
   Cùng hệ với 2 trang công cụ: nền ink, chữ bone, không bo góc.
   ============================================================ */
.bmh .p3-dau{ padding:18px 0 12px; }
.bmh .p3-dau h1{ font-size:clamp(20px,2.3vw,30px); line-height:1.5; margin-top:4px; letter-spacing:.16em; }
.bmh .p3-dan{ color:var(--muted); max-width:58ch; margin-top:8px; }

.bmh .p3-san{ background:var(--ink); }

/* ---------- khung xem ---------- */
.bmh .p3-khung{
  position:relative; width:100%; height:min(72vh, 620px); min-height:320px;
  overflow:hidden; background:#2f2f2f; touch-action:none; cursor:grab;
}
.bmh .p3-khung.dang-keo{ cursor:grabbing; }
.bmh .p3-khung canvas{ display:block; width:100%; height:100%; }

/* vệt sáng quét khi đang tải ảnh (cùng ngôn ngữ với .tv-quet của /thu-da/) */
.bmh .p3-tai{
  position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(243,238,231,.10) 50%,transparent 70%);
  background-size:220% 100%;
}
.bmh .p3-khung.dang-tai .p3-tai{ opacity:1; animation:p3-quet 1.3s linear infinite; }
@keyframes p3-quet{ from{background-position:120% 0} to{background-position:-120% 0} }

/* ---------- nhãn góc dưới ---------- */
.bmh .p3-goc{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:44px var(--gutter) 14px;
  background:linear-gradient(to top,rgba(38,38,38,.72),rgba(38,38,38,0));
  pointer-events:none;
}
.bmh .p3-ten{
  font:400 13px/1.4 var(--font-head); letter-spacing:.16em; text-transform:uppercase;
  color:#F3EEE7; text-shadow:0 1px 12px rgba(38,38,38,.8);
}
.bmh .p3-goc .tag-render{ color:rgba(243,238,231,.72); font-size:11px; letter-spacing:.06em; }

/* ---------- nút bung / thoát ----------
   ⚠️ BẪY 47: lớp .tv-bung và .b3-thoat chỉ được khai trong page-thu-da.css /
   page-bep-3d.css, mà trang này KHÔNG nạp hai file đó -> nút rơi về kiểu mặc
   định của trình duyệt (nền trắng, viền đen, chữ thường). Phải KHAI LẠI. */
.bmh .p3-bung{
  position:absolute; right:14px; bottom:56px; 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 .p3-bung:hover{ background:rgba(38,38,38,.86); border-color:#F3EEE7; }
.bmh .p3-bung[hidden]{ display:none; }
.bmh .p3-thoat{
  position:absolute; left:14px; top:14px; z-index:16;
  appearance:none; cursor:pointer; min-height:40px; padding:0 14px;
  display:inline-flex; align-items:center;
  border:1px solid rgba(243,238,231,.55); background:rgba(38,38,38,.72);
  color:#F3EEE7; font:400 10px/1 var(--font-head); letter-spacing:.16em;
  text-transform:uppercase; backdrop-filter:blur(3px);
}
.bmh .p3-thoat[hidden]{ display:none; }

/* ---------- thanh dưới ---------- */
.bmh .p3-thanh{ padding:14px var(--gutter) 20px; border-top:1px solid rgba(243,238,231,.14); }
.bmh .p3-diem,.bmh .p3-nut{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; }
.bmh .p3-diem{ margin-bottom:10px; }
.bmh .p3-diem button,.bmh .p3-nut button,.bmh .p3-nut a{
  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 .p3-nut button,.bmh .p3-nut a{ color:#F3EEE7; }
.bmh .p3-diem button::after,.bmh .p3-nut button::after,.bmh .p3-nut a::after{
  content:''; position:absolute; left:0; right:100%; bottom:9px; height:1px;
  background:currentColor; transition:right var(--t-ui) var(--ease);
}
.bmh .p3-diem button:hover::after,.bmh .p3-nut button:hover::after,.bmh .p3-nut a:hover::after,
.bmh .p3-diem button[aria-pressed="true"]::after,
.bmh .p3-nut button[aria-pressed="true"]::after{ right:0; }
.bmh .p3-diem button[aria-pressed="true"]{ color:#F3EEE7; }
.bmh .p3-nut button[hidden]{ display:none; }

/* ---------- toàn màn hình ---------- */
.bmh .p3-san.toan-man{ position:fixed; inset:0; z-index:9999; height:100dvh; background:var(--ink); }
.bmh .p3-san.toan-man .p3-khung{ position:absolute; inset:0; height:auto !important; }
.bmh .p3-san.toan-man .p3-thanh{
  position:fixed; left:0; right:0; bottom:0; z-index:13;
  background:rgba(38,38,38,.78); backdrop-filter:blur(6px);
  padding:8px var(--gutter) 12px; border-top:1px solid rgba(243,238,231,.16);
}
.bmh .p3-san.toan-man .p3-goc{ bottom:auto; top:0; padding:14px var(--gutter) 44px;
  background:linear-gradient(to bottom,rgba(38,38,38,.72),rgba(38,38,38,0)); }
.bmh .p3-san.toan-man .p3-ten{ margin-left:76px; }

/* ---------- điện thoại ---------- */
@media(max-width:767.98px){
  .bmh .p3-khung{ height:min(56vh, 420px); }
  .bmh .p3-diem,.bmh .p3-nut{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:18px;
  }
  .bmh .p3-diem::-webkit-scrollbar,.bmh .p3-nut::-webkit-scrollbar{ display:none; }
  .bmh .p3-diem > *,.bmh .p3-nut > *{ flex:0 0 auto; }
  .bmh .p3-bung{ right:10px; bottom:52px; }
  .bmh .p3-san.toan-man .p3-thanh{ padding:6px 12px 10px; }
  .bmh .p3-san.toan-man .p3-diem{ margin-bottom:2px; }
}
/* xoay ngang: màn thấp -> thu thanh dưới cho ảnh rộng nhất có thể (bẫy 59) */
@media(max-width:900px) and (orientation:landscape){
  .bmh .p3-khung{ height:100dvh; }
  .bmh .p3-san.toan-man .p3-diem{ display:none; }
  .bmh .p3-san.toan-man .p3-thanh{ padding:4px 12px 6px; }
  .bmh .p3-san.toan-man .p3-goc{ padding:8px 12px 30px; }
}
.bmh .p3-tinh{ display:none; }

/* ---------- ĐIỂM BẤM trên cảnh 360 (26/08) ----------
   Chấm tròn nhấp nháy nhẹ + nhãn chữ; bấm vào mở trang mẫu đá.
   Lớp phủ để pointer-events:none để KHÔNG chặn thao tác kéo nhìn quanh —
   chỉ riêng cái chấm mới nhận cú bấm. */
.bmh .p3-cham-lop{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.bmh .p3-cham{
  position:absolute; left:0; top:0; pointer-events:auto;
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:#F3EEE7; white-space:nowrap;
  font:400 10.5px/1 var(--font-head); letter-spacing:.14em; text-transform:uppercase;
  padding:9px 13px 9px 9px; min-height:40px;
  background:rgba(38,38,38,.6); border:1px solid rgba(243,238,231,.4);
  backdrop-filter:blur(4px);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.bmh .p3-cham:hover{ background:rgba(38,38,38,.9); border-color:#F3EEE7; }
.bmh .p3-cham i{
  width:11px; height:11px; flex:0 0 auto; border-radius:50%;
  background:#F3EEE7; box-shadow:0 0 0 0 rgba(243,238,231,.55);
  animation:p3-nhay 2.4s var(--ease) infinite;
}
@keyframes p3-nhay{
  0%{ box-shadow:0 0 0 0 rgba(243,238,231,.5) }
  70%{ box-shadow:0 0 0 13px rgba(243,238,231,0) }
  100%{ box-shadow:0 0 0 0 rgba(243,238,231,0) }
}
@media(prefers-reduced-motion:reduce){ .bmh .p3-cham i{ animation:none } }
@media(max-width:767.98px){
  .bmh .p3-cham{ font-size:9.5px; padding:8px 11px 8px 8px; min-height:38px; }
}

/* ===== 26/08 (sếp: phần đầu dư thừa, 2 nút dưới không nổi bật) ===== */

/* phần đầu gọn lại: bỏ eyebrow + đoạn dẫn, chỉ còn tên trang */
.bmh .p3-dau{ padding:14px 0 10px; }
.bmh .p3-dau h1{ margin-top:0; }

/* hướng dẫn thành dải nhỏ NỔI TRÊN CẢNH, tự tắt sau 4,5 giây hoặc khi
   khách vừa kéo lần đầu — không chiếm chỗ thường trực nữa */
.bmh .p3-nhac{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  z-index:6; margin:0; pointer-events:none; white-space:nowrap;
  padding:9px 15px; background:rgba(38,38,38,.62); color:#F3EEE7;
  border:1px solid rgba(243,238,231,.3); backdrop-filter:blur(4px);
  font:400 10.5px/1 var(--font-head); letter-spacing:.16em; text-transform:uppercase;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.bmh .p3-nhac.tat{ opacity:0; transform:translateX(-50%) translateY(-8px); }

/* hai nút chọn vị trí đứng: trước là chữ trần nên chìm hẳn vào khối tối,
   khách không nhận ra bấm được. Nay có viền + nền, nút đang chọn nền sáng. */
.bmh .p3-diem{ gap:10px; }
.bmh .p3-diem button{
  padding:11px 15px; min-height:44px;
  border:1px solid rgba(243,238,231,.34); background:rgba(243,238,231,.05);
  color:rgba(243,238,231,.82); letter-spacing:.14em;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.bmh .p3-diem button::after{ display:none; }   /* bỏ gạch chân, đã có viền */
.bmh .p3-diem button:hover{ border-color:rgba(243,238,231,.7); color:#F3EEE7; }
.bmh .p3-diem button[aria-pressed="true"]{
  background:var(--bone); border-color:var(--bone); color:var(--ink);
}
@media(max-width:767.98px){
  .bmh .p3-nhac{ font-size:9.5px; padding:8px 12px; top:12px; }
  .bmh .p3-diem button{ padding:10px 13px; }
}

/* ============================================================
   CHỌN ĐÁ TRÊN CẢNH 360 (27/08) — cột bề mặt + dải mẫu đá
   ⚠️ BẪY 47: các lớp này là của RIÊNG trang 360, phải khai đủ ở đây —
   trang này không nạp page-thu-da.css nên không mượn được .tv-mat/.tv-o.
   ============================================================ */

/* cột chọn bề mặt — nổi bên phải cảnh */
.bmh .p3-mat{
  position:absolute; right:14px; top:14px; z-index:8;
  display:flex; flex-direction:column; gap:6px; max-width:190px;
}
.bmh .p3-mat[hidden]{ display:none; }
.bmh .p3-mat button{
  appearance:none; cursor:pointer; text-align:left;
  padding:11px 13px; min-height:44px;
  background:rgba(38,38,38,.62); border:1px solid rgba(243,238,231,.34);
  color:rgba(243,238,231,.86); backdrop-filter:blur(4px);
  font:400 10.5px/1.35 var(--font-head); letter-spacing:.12em; text-transform:uppercase;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.bmh .p3-mat button:hover{ border-color:rgba(243,238,231,.75); color:#F3EEE7; }
.bmh .p3-mat button[aria-pressed="true"]{
  background:var(--bone); border-color:var(--bone); color:var(--ink);
}

/* dải mẫu đá dưới cảnh */
.bmh .p3-dai-o{ background:var(--ink); border-top:1px solid rgba(243,238,231,.14); }
.bmh .p3-dai-o[hidden]{ display:none; }
.bmh .p3-dai{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:12px var(--gutter);
}
.bmh .p3-dai::-webkit-scrollbar{ display:none; }
.bmh .p3-o{
  appearance:none; background:none; border:1px solid transparent; padding:0;
  cursor:pointer; flex:0 0 auto; position:relative; line-height:0;
  transition:border-color .3s var(--ease);
}
.bmh .p3-o img{
  width:74px; height:74px; object-fit:cover; display:block;
  opacity:.82; transition:opacity .3s var(--ease);
}
.bmh .p3-o:hover img,.bmh .p3-o[aria-pressed="true"] img{ opacity:1; }
.bmh .p3-o[aria-pressed="true"]{ border-color:#F3EEE7; }
.bmh .p3-o span{
  position:absolute; left:0; right:0; bottom:0; padding:4px 5px;
  background:linear-gradient(to top,rgba(38,38,38,.85),rgba(38,38,38,0));
  color:#F3EEE7; font:400 8px/1.25 var(--font-head); letter-spacing:.04em;
  text-transform:uppercase; opacity:0; transition:opacity .3s var(--ease);
  text-align:left; white-space:normal;
}
.bmh .p3-o:hover span,.bmh .p3-o[aria-pressed="true"] span{ opacity:1; }

@media(max-width:767.98px){
  .bmh .p3-mat{ right:8px; top:8px; max-width:132px; gap:4px; }
  .bmh .p3-mat button{ padding:9px 10px; font-size:9px; min-height:40px; }
  .bmh .p3-dai{ padding:10px 12px; gap:6px; }
  .bmh .p3-o img{ width:62px; height:62px; }
}
/* toàn màn hình: dải đá thành dải nổi ở đáy */
.bmh .p3-san.toan-man .p3-dai-o{
  position:fixed; left:0; right:0; bottom:52px; z-index:12;
  background:rgba(38,38,38,.8); backdrop-filter:blur(6px); border-top:0;
}