/* ============================================================
   TRANG 'DUNG TU BAN VE' — /dung-tu-ban-ve/ (11/09/2026)
   Nap SAU page-bep-3d.css (dung chung .pn, .tv-o, .b3-*, .td-duoi).
   Moi rule boc .bmh. Khong JS: khoi cong cu an, khoi tinh hien.
   ============================================================ */
/* ⚠️ page-bep-3d.css chi cho SECTION.b3-ui hien — khoi nay la DIV nen phai mo rieng */
.js .bmh div.bv-san.b3-ui{display:block}
.bmh .bv-san{background:var(--ink);color:#F3EEE7;padding-bottom:var(--sp-m)}
.bmh .bv-mo{color:var(--muted)}

/* các bước */
.bmh .bv-buoc{display:flex;gap:6px;align-items:center;padding:var(--sp-s) var(--gutter) 0;overflow-x:auto;scrollbar-width:none}
.bmh .bv-buoc::-webkit-scrollbar{display:none}
.bmh .bv-buoc button{appearance:none;background:none;border:1px solid rgba(243,238,231,.25);color:rgba(243,238,231,.7);
  padding:9px 13px;min-height:40px;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  font:10px/1 var(--font-head);letter-spacing:.18em;text-transform:uppercase}
.bmh .bv-buoc button b{font-weight:500;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:0}
.bmh .bv-buoc button[aria-current="step"]{background:#F3EEE7;color:var(--ink);border-color:#F3EEE7}
.bmh .bv-tt{margin-left:auto;font:11px/1.4 var(--font-body);color:rgba(243,238,231,.55);white-space:nowrap;padding-left:10px}
.bmh .bv-tt i{font-style:normal}

/* khung bản vẽ / 3D */
.bmh .bv-khung{position:relative;margin-top:var(--sp-s);height:66vh;min-height:380px;background:#2a2a2a;scroll-margin-top:84px}
.bmh .bv-2d{position:absolute;inset:0;overflow:hidden}
.bmh .bv-2d canvas{display:block;touch-action:none;cursor:crosshair}
.bmh .bv-3d{position:absolute;inset:0}
.bmh .bv-3d[hidden],.bmh .bv-2d[hidden]{display:none}
.bmh #sk{position:absolute;inset:0}
.bmh #sk canvas{display:block;width:100%;height:100%}
.bmh .bv-3d-loi{position:absolute;left:var(--gutter);right:var(--gutter);top:40%;text-align:center;
  font:13px/1.6 var(--font-body);color:rgba(243,238,231,.8)}
.bmh .bv-zoom{position:absolute;right:12px;top:12px;z-index:7;display:flex;flex-direction:column;gap:6px}
.bmh .bv-zoom button{appearance:none;width:40px;height:40px;border:1px solid rgba(243,238,231,.35);
  background:rgba(38,38,38,.7);color:#F3EEE7;font:18px/1 var(--font-body);cursor:pointer}
.bmh .bv-zoom button:hover{background:#F3EEE7;color:var(--ink)}
.bmh .bv-zoom[hidden]{display:none}

/* điều khiển */
.bmh .bv-bao{margin:10px var(--gutter) 0;font:12px/1.6 var(--font-body);color:rgba(243,238,231,.75);min-height:1.6em}
.bmh .bv-dieu{padding:var(--sp-s) var(--gutter) 0}
.bmh .bv-dieu[hidden]{display:none}
.bmh .bv-hd{font:13px/1.6 var(--font-body);color:rgba(243,238,231,.72);margin:10px 0 0;max-width:70ch}
.bmh .bv-hd b{font-weight:500;color:#F3EEE7}
.bmh .bv-hang{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.bmh .bv-hang[hidden]{display:none}
.bmh .bv-cuoi{margin-top:18px;padding-top:14px;border-top:1px solid rgba(243,238,231,.15)}
.bmh .bv-o{display:flex;flex-direction:column;gap:5px;font:10px/1.4 var(--font-head);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,238,231,.7)}
.bmh .bv-o input{background:none;border:1px solid rgba(243,238,231,.35);color:#F3EEE7;padding:10px 12px;
  font:15px/1.2 var(--font-body);width:150px;min-height:44px}
.bmh .bv-o input:focus{outline:none;border-color:#F3EEE7}
.bmh .bv-ts{margin-top:10px}
.bmh .bv-ts[hidden]{display:none}

/* nút — kế thừa kiểu .b3-* nhưng ngoài .tv-nut nên khai lại (bẫy 47) */
.bmh .bv-dieu .b3-day,.bmh .bv-dieu .b3-vien,.bmh .bv-dieu .b3-nhat,.bmh .bv-nut-file{appearance:none;border:0;background:none;
  cursor:pointer;font:11px/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;min-height:44px;
  display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none}
.bmh .bv-dieu .b3-day,.bmh .bv-nut-file{background:#F3EEE7;color:var(--ink);padding:13px 20px}
.bmh .bv-dieu .b3-day:hover,.bmh .bv-nut-file:hover{background:#fff}
.bmh .bv-dieu .b3-day:disabled{opacity:.35;cursor:not-allowed}
.bmh .bv-dieu .b3-vien{border:1px solid rgba(243,238,231,.55);color:#F3EEE7;padding:12px 18px;margin-left:14px}
.bmh .bv-dieu .b3-vien:hover{border-color:#F3EEE7}
.bmh .bv-dieu .b3-nhat{color:rgba(243,238,231,.55);padding:12px 0}
.bmh .bv-dieu .b3-nhat:hover{color:#F3EEE7}
.bmh .bv-dieu button[hidden]{display:none}

/* chọn hạng mục */
.bmh .bv-loai{display:flex;gap:8px;flex-wrap:wrap}
.bmh .bv-loai button{appearance:none;background:none;border:1px solid rgba(243,238,231,.28);color:rgba(243,238,231,.8);
  padding:9px 14px;min-height:42px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font:10px/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase}
.bmh .bv-loai button i{width:12px;height:12px;display:inline-block}
.bmh .bv-loai button[aria-pressed="true"]{background:#F3EEE7;color:var(--ink);border-color:#F3EEE7}

/* danh sách mảng */
.bmh .bv-ds{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bmh .bv-chip{appearance:none;background:none;border:1px solid rgba(243,238,231,.28);color:rgba(243,238,231,.85);
  padding:8px 10px 8px 12px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font:12px/1.2 var(--font-body)}
.bmh .bv-chip i{width:10px;height:10px;display:inline-block}
.bmh .bv-chip em{font-style:normal;color:rgba(243,238,231,.55);font-size:11px}
.bmh .bv-chip span{margin-left:4px;padding:2px 6px;color:rgba(243,238,231,.6);font-size:16px;line-height:1}
.bmh .bv-chip span:hover{color:#F3EEE7}
.bmh .bv-chip[aria-pressed="true"]{border-color:#F3EEE7;background:rgba(243,238,231,.1)}
.bmh #bv-ds-trong[hidden]{display:none}

/* chip mảng ở bước 4 (giống #bm trang bếp 3D) */
.bmh #bv-bm{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;padding-top:4px;padding-bottom:6px}
.bmh #bv-bm::-webkit-scrollbar{display:none}
.bmh #bv-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 #bv-bm button::after{display:none}
.bmh #bv-bm button[aria-pressed="true"]{background:#F3EEE7;color:var(--ink);border-color:#F3EEE7}
.bmh #bv-bm .b3-swatch{width:16px;height:16px;background-size:cover;background-position:center;border:1px solid rgba(243,238,231,.35)}
.bmh #bv-bm .b3-trong{background:repeating-linear-gradient(45deg,rgba(243,238,231,.25) 0 2px,transparent 2px 5px)}

.bmh #bv-3d-nut[hidden],.bmh #bv-chon[hidden]{display:none}
.bmh .b3-duoi{background:var(--ink);padding:0 var(--gutter)}
.bmh .tv-ten{left:var(--gutter);top:16px}

@media(max-width:767.98px){
  .bmh .bv-khung{height:58svh;min-height:320px}
  .bmh .bv-hang{gap:10px}
  .bmh .bv-o input{width:120px}
  .bmh .bv-dieu .b3-vien{margin-left:0;margin-top:8px}
  .bmh .bv-dieu .b3-day,.bmh .bv-nut-file,.bmh .bv-dieu .b3-vien{padding:11px 14px}
}
@media(max-width:900px) and (orientation:landscape){
  .bmh .bv-khung{height:78vh}
}
@media(prefers-reduced-motion:reduce){.bmh .bv-buoc button{transition:none}}