/* slice-mobile.css — MẶT CẮT TẦNG trên ĐIỆN THOẠI (26/09/2026), đi cùng slice-mobile.js.
   Chỉ có hiệu lực khi body mang np-slice-mobile (runtime báo slice.mobile đang bật: màn chạm, cạnh ngắn ≤ 760 px).
   Máy tính không bao giờ thấy các khối này (visibility:hidden, không nhận chạm, không vào thứ tự Tab).

   Bố cục theo mockup đã duyệt (inline/proposals/slice-touch-2026-09-26):
   - thanh gọn dưới đáy: ‹ Tầng N › · Danh sách / chú giải một dòng / chip Toàn tầng · Block 1 · 2 · 3
   - nút ✕ thoát: góc trên phải khi điện thoại dựng đứng (chỗ thanh mood, lúc cắt thì ẩn), trong thanh khi nằm ngang
   - bảng chọn tầng + danh sách căn: sheet đáy, cùng nền với menu ☰ (#sheet)
   Kính: cùng công thức với #floors (site.css › "3 CÔNG TẮC ĐỘ MỜ ĐỤC"), nút chọn: gradient brand như tầng đang chọn. */

#npSliceBar,#npSliceExit,#npSliceHint{visibility:hidden;opacity:0;pointer-events:none}

/* ---------- 1. trang lúc đang cắt trên điện thoại ---------- */
/* panel "Chọn tầng" cũ nhường chỗ cho thanh gọn (site.js vẫn giữ trạng thái của nó: .open, tầng đang chọn) */
body.np-slice-mobile #floors{display:none!important}
/* minimap của trang nằm đúng chỗ thanh gọn */
body.np-slice-mobile #blStack{opacity:0;visibility:hidden;pointer-events:none}
/* slice.mobile.hideBars: tour + mood + ☰ lùi đi lúc cắt, thoát là về */
body.np-slice-hidebars :is(#tour,#mood,#menuFab){opacity:0!important;visibility:hidden;pointer-events:none!important;
  transition:opacity .2s,visibility 0s .2s}

/* thẻ căn kiểu chạm (slice.touchTaps = 2: chạm 1 hiện thẻ, chạm 2 mở) đứng TRÊN thanh gọn, không đè lên nó */
body.np-slice-mobile #unitCard.touch{bottom:var(--nsb-h,150px)}

/* ---------- 2. thanh gọn ---------- */
#npSliceBar{
  --fl-tint:rgba(43,46,35,.46);
  --fl-blur:18px;
  --fl-sheen:.16;
  position:fixed;z-index:52;
  left:var(--edge-l,12px);right:var(--edge-r,12px);bottom:var(--edge-b,12px);
  display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:22px;
  background:
    linear-gradient(155deg,rgba(255,255,255,var(--fl-sheen)),rgba(255,255,255,calc(var(--fl-sheen) * .2)) 46%,
      rgba(255,255,255,calc(var(--fl-sheen) * .45))),
    var(--fl-tint);
  -webkit-backdrop-filter:blur(var(--fl-blur)) saturate(1.55);backdrop-filter:blur(var(--fl-blur)) saturate(1.55);
  border:1px solid rgba(220,211,192,.34);
  box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.18);
  color:var(--text,#eef2f7);font-family:var(--f-sub);
  transform:translateY(12px);transition:opacity .22s,transform .22s,visibility 0s .22s}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #npSliceBar{--fl-blur:6px;--fl-tint:rgba(43,46,35,.62)}
body.np-slice-mobile #npSliceBar{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
#npSliceBar button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#npSliceBar button:focus-visible,.nus button:focus-visible,#npSliceExit:focus-visible{outline:2px solid #DCD3C0;outline-offset:2px}

.nsb-row{display:flex;align-items:center;gap:6px;min-width:0}
.nsb-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(220,211,192,.34);background:rgba(10,12,8,.22)}
.nsb-ico:active,.nsb-floor:active,.nsb-list:active{transform:scale(.96)}
.nsb-ico:disabled{opacity:.32;cursor:default;transform:none}
.nsb-floor{flex:1 1 auto;min-width:0;height:44px;padding:0 10px;border-radius:22px;border:0;background:none;
  display:flex;align-items:center;justify-content:center;gap:6px}
.nsb-floor .nsb-t{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15}
.nsb-floor b{font-size:17px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.nsb-floor small{font-size:11px;color:rgba(238,242,247,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nsb-floor svg{flex:none;opacity:.7}
.nsb-list{flex:none;display:flex;align-items:center;gap:7px;height:44px;padding:0 15px;border-radius:22px;
  border:1px solid rgba(220,211,192,.5);background:rgba(243,235,218,.1);font-size:13.5px;font-weight:600}
.nsb-list[hidden]{display:none}
.nsb-x{display:none}

/* chú giải một dòng (màu nhóm + số căn của tầng) */
/* chiều cao thanh cố định từ đầu (dòng chú giải + hàng chip luôn giữ chỗ): vùng trống báo cho runtime lúc cảnh
   vừa lên đã đúng, vào mặt cắt camera bay một lần là xong */
.nsb-key{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;padding:0 6px;font-size:11.5px;
  color:rgba(238,242,247,.86);line-height:18px;min-height:18px}
.nsb-key span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nsb-key i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(254,240,225,.45);flex:none}
.nsb-key em{font-style:normal;opacity:.66}
/* chú giải = chip LỌC loại căn (chủ dự án 28/09/2026): chạm chọn / bỏ, chọn được nhiều; máy 344–390 px xuống 2 hàng khi có "Bỏ lọc" */
.nsb-key.is-filter{gap:6px;padding:2px 2px 0}
.nsb-key button,#nsbTypePop button{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px;border-radius:17px;
  border:1px solid rgba(254,240,225,.3);background:rgba(254,240,225,.06);font-size:12px;white-space:nowrap}
#npSliceBar .nsb-key button[aria-pressed="true"],#nsbTypePop button[aria-pressed="true"]{background:rgba(254,240,225,.93);color:#12151b;border-color:transparent}
.nsb-key button[aria-pressed="true"]::before,#nsbTypePop button[aria-pressed="true"]::before{content:"✓";font-weight:700;margin-right:-1px}
.nsb-key button[aria-pressed="true"] i,#nsbTypePop button[aria-pressed="true"] i{border-color:#12151b}
.nsb-key button[aria-pressed="true"] em,#nsbTypePop button[aria-pressed="true"] em{opacity:.7}
.nsb-key button.is-dim,#nsbTypePop button.is-dim{opacity:.5}
.nsb-key button.is-zero,#nsbTypePop button.is-zero{opacity:.34}
.nsb-key button.is-zero[aria-pressed="true"],#nsbTypePop button.is-zero[aria-pressed="true"]{opacity:.9}
#npSliceBar .nsb-key .nsb-clear,#nsbTypePop .nsb-clear{border:0;background:none;padding:0 8px;color:#e2c08f;font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
/* tầng không có loại đang lọc */
.nsb-note{margin:0 2px;padding:8px 10px;border-radius:12px;background:rgba(254,240,225,.1);border:1px solid rgba(214,178,128,.5);
  font:500 12px/1.4 var(--f-sub);color:#fef0e1;text-align:center}
.nsb-note[hidden]{display:none}
.nsb-note b{color:#e2c08f}
#npSliceBar .nsb-note button{margin:6px 3px 0;height:30px;padding:0 12px;border-radius:15px;border:0;
  background:rgba(254,240,225,.92);color:#12151b;font-size:11.5px;font-weight:600}
/* nằm ngang: nút "Loại ▾" (chỉ hiện khi nằm ngang — mục 4) + bảng chọn nổi phía trên nó */
.nsb-type{display:none}
#nsbTypePop{position:fixed;z-index:53;display:flex;align-items:center;gap:6px;padding:8px;border-radius:18px;max-width:calc(100vw - 16px);
  background:rgba(28,31,22,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(220,211,192,.3);
  box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--text,#eef2f7);font-family:var(--f-sub)}
#nsbTypePop[hidden]{display:none}
#nsbTypePop button{font:inherit;font-size:12px;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#nsbTypePop button i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(254,240,225,.45);flex:none}
#nsbTypePop button em{font-style:normal;opacity:.66}

/* chip Toàn tầng / Block N */
.nsb-chips{display:grid;gap:6px;min-height:40px}
.nsb-chips.is-empty{visibility:hidden}
.nsb-chips button{min-width:0;height:40px;padding:0 6px;border-radius:999px;border:1px solid rgba(220,211,192,.3);
  background:rgba(10,12,8,.2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsb-chips button.on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600;border-color:transparent}

/* ✕ góc trên phải (điện thoại dựng đứng) */
#npSliceExit{position:fixed;z-index:52;top:calc(10px + env(safe-area-inset-top,0px));right:var(--edge-r,12px);
  width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  color:var(--accent,#F3EBDA);border:1px solid rgba(220,211,192,.4);background:rgba(28,31,22,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:opacity .22s,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
body.np-slice-mobile #npSliceExit{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}

/* lời nhắc nổi trên thanh ("Chạm vào một block để phóng to" / "Chạm vào căn để xem") + gợn sóng khi chạm hụt */
#npSliceHint{position:fixed;z-index:51;left:50%;bottom:var(--nsb-h,150px);transform:translate(-50%,6px);
  max-width:calc(100vw - 32px);padding:8px 16px;border-radius:999px;font:500 13px/1.3 var(--f-sub);
  color:var(--text,#eef2f7);background:rgba(28,31,22,.84);border:1px solid rgba(220,211,192,.3);
  box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .25s,transform .25s,visibility 0s .25s}
body.np-slice-mobile #npSliceHint.show{visibility:visible;opacity:1;transform:translate(-50%,0);transition-delay:0s}
.nsm-ripple{position:fixed;z-index:51;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(243,235,218,.85);animation:nsmRipple .5s ease-out forwards}
@keyframes nsmRipple{from{transform:scale(.35);opacity:.9}to{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.nsm-ripple{animation-duration:.01s}}

/* ---------- 3. sheet: chọn tầng + danh sách căn ---------- */
.nus{position:fixed;inset:0;z-index:64}
.nus[hidden]{display:none}
.nus-back{position:absolute;inset:0;background:rgba(4,6,9,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:nusFade .22s ease-out}
.nus-panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:640px;max-height:82vh;max-height:82dvh;
  display:flex;flex-direction:column;border-radius:24px 24px 0 0;
  padding:0 0 env(safe-area-inset-bottom,0px);
  background:rgba(28,31,22,.94);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(220,211,192,.2);border-bottom:0;box-shadow:0 -12px 50px rgba(0,0,0,.5);
  color:var(--text,#eef2f7);font-family:var(--f-sub);animation:nusUp .28s cubic-bezier(.2,.8,.3,1)}
#npUnitList .nus-panel{height:82vh;height:82dvh}
@keyframes nusFade{from{opacity:0}}
@keyframes nusUp{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.nus-back,.nus-panel{animation:none}}
.nus button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nus-grip{width:44px;height:5px;border-radius:3px;background:rgba(220,211,192,.32);margin:10px auto 2px;flex:none}
.nus-head{display:flex;align-items:center;gap:6px;padding:6px 12px 8px;flex:none}
.nus-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;padding:0 4px}
.nus-title b{font-size:17px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nus-title span{font-size:12px;color:rgba(217,203,184,.9)}
.nus-title span:empty{display:none}
.nus-chips{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;flex:none;scrollbar-width:none}
.nus-chips:empty{display:none}
.nus-chips::-webkit-scrollbar{display:none}
.nus-chips button{flex:none;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(220,211,192,.3);
  background:rgba(255,255,255,.04);font-size:13px;white-space:nowrap}
.nus-chips button em{font-style:normal;opacity:.65;margin-left:2px}
.nus-chips button.on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600;border-color:transparent}
.nus-chips button.on em{opacity:.8}
.nus-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 18px;
  -webkit-overflow-scrolling:touch}
.nus-body h5{margin:0;padding:14px 6px 6px;font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(217,203,184,.85)}
/* danh sách đang lọc loại căn: "Đang lọc ● 1 phòng ngủ ● 3 phòng ngủ · Bỏ lọc" (28/09/2026) */
.nus-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:0 14px 8px;flex:none;font-size:12px;color:rgba(217,203,184,.9)}
.nus-filter[hidden]{display:none}
.nus-filter b{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:12px;background:rgba(254,240,225,.9);color:#12151b;font-weight:600}
.nus-filter b i{width:8px;height:8px;border-radius:50%;flex:none}
.nus-filter button{padding:0;border:0;background:none;color:#e2c08f;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nus-row{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;text-align:left;
  border:0;border-bottom:1px solid rgba(220,211,192,.12);background:none;border-radius:0}
.nus-row:active{background:rgba(220,211,192,.12)}
.nus-row i{flex:none;width:12px;height:12px;border-radius:50%;border:1px solid rgba(254,240,225,.45)}
.nus-row span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.nus-row b{font-size:15.5px;font-weight:600;letter-spacing:.01em}
.nus-row small{font-size:12.5px;color:rgba(217,203,184,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nus-row svg{flex:none;opacity:.55}
.nus-empty{margin:24px 8px;font-size:13px;color:rgba(217,203,184,.9);text-align:center}
.nus .nsb-ico{color:var(--accent,#F3EBDA)}
/* bảng chọn tầng: lưới, tầng cao ở trên như thang máy */
.nus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 12px 16px;overflow-y:auto}
.nus-grid button{min-height:46px;border-radius:12px;border:1px solid rgba(220,211,192,.22);background:rgba(255,255,255,.05);
  font-size:14px;padding:0 4px}
.nus-grid button.on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600;border-color:transparent}

/* ---------- 4. hướng màn hình ---------- */
/* điện thoại dựng đứng: ✕ ở góc trên phải; màn rất hẹp (≤ 370 px) → "Danh sách" chỉ còn icon */
@media (max-width:370px){
  .nsb-list span{display:none}
  .nsb-list{width:44px;padding:0;justify-content:center}
}
/* không phải điện thoại dựng đứng (nằm ngang, máy tính bảng nhỏ): ✕ vào trong thanh, chừa cột nút phải */
@media (min-width:741px), (max-height:520px) and (orientation:landscape){
  #npSliceExit{display:none}
  .nsb-x{display:grid}
  #npSliceBar{left:var(--edge,12px);right:calc(var(--edge,12px) + var(--btn,49px) + 12px)}
}
/* nằm ngang: chiều cao khan hiếm — thanh MỘT hàng: ‹ tầng › · chip · Danh sách · ✕; chú giải ẩn (có trong danh sách) */
@media (max-height:520px) and (orientation:landscape){
  #npSliceBar{flex-direction:row;align-items:center;gap:8px;padding:6px 8px;border-radius:26px;bottom:var(--edge,12px)}
  #npSliceBar .nsb-key{display:none}
  #npSliceBar .nsb-row{display:contents}
  #npSliceBar .nsb-floor{flex:0 1 auto;min-width:96px}
  #npSliceBar .nsb-chips{flex:1 1 auto;min-width:0;order:3}
  #npSliceBar .nsb-list{order:4}
  #npSliceBar .nsb-x{order:5}
  #npSliceBar .nsb-chips button{height:38px}
  /* lọc loại căn: nút "Loại ▾" giữa ‹ tầng › và chip; thanh đã đầy nên "Danh sách" chỉ còn biểu tượng */
  #npSliceBar .nsb-type:not([hidden]){order:2;flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px;
    border-radius:19px;border:1px solid rgba(254,240,225,.35);background:rgba(254,240,225,.08);font-size:12px;font-weight:600;white-space:nowrap}
  #npSliceBar .nsb-type.on{background:rgba(254,240,225,.93);color:#12151b;border-color:transparent}
  #npSliceBar .nsb-type i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(18,21,27,.5);margin:0 1px}
  #npSliceBar .nsb-type svg:last-child{opacity:.7}
  #npSliceBar .nsb-type:not([hidden]) ~ .nsb-list span{display:none}
  #npSliceBar .nsb-type:not([hidden]) ~ .nsb-list{width:44px;padding:0;justify-content:center}
  #npSliceBar .nsb-note{position:fixed;left:50%;bottom:var(--nsb-h,70px);transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));
    background:rgba(28,31,22,.9);box-shadow:0 6px 18px rgba(0,0,0,.3)}
  .nus-panel{max-height:88vh;max-height:88dvh}
  #npUnitList .nus-panel{height:88vh;height:88dvh}
  .nus-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* ---------- 5. máy tính: "Danh sách căn" trong panel "Chọn tầng" + bảng danh sách cạnh panel ----------
   Chủ dự án 26/09 chiều: "trên PC cũng nên có danh sách unit trong menu MẶT CẮT TẦNG". Nút nằm ngay dưới danh sách
   tầng, cùng kiểu nút của panel (site.css › #floors); bảng mở bên TRÁI panel, cùng kính, không phủ màn (3D và panel
   tầng vẫn dùng được). Điều kiện "bảng cạnh panel" = slice-mobile.js › DESK_MQ; màn hẹp vẫn là sheet đáy. */
#floors .fl-units{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:8px 10px;border-radius:9px;
  font-size:12px;color:#DCD3C0;border:1px solid rgba(220,211,192,.3);background:rgba(220,211,192,.06);
  text-align:left;transition:background .15s}
#floors .fl-units[hidden]{display:none}
#floors .fl-units:hover{background:rgba(220,211,192,.14)}
#floors .fl-units:focus-visible{outline:2px solid #DCD3C0;outline-offset:-2px}
#floors .fl-units svg{width:16px;height:16px;flex:none}
#floors .fl-units span{flex:1 1 auto}
#floors .fl-units em{font-style:normal;font-size:11px;opacity:.72}
#floors .fl-units.is-on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600;
  border-color:transparent}
/* điện thoại: thanh gọn có nút riêng; slice.mobile.mode = off thì panel là dải tầng của page-shell.css — không chỗ */
@media (max-width:740px), (max-height:520px) and (orientation:landscape){#floors .fl-units{display:none}}

#npUnitList.is-fly{inset:auto;top:50%;right:calc(var(--edge,12px) + var(--btn,49px) + 12px + 210px + 10px);
  width:340px;transform:translateY(-50%);z-index:50}
#npUnitList.is-fly .nus-back,#npUnitList.is-fly .nus-grip{display:none}
#npUnitList.is-fly .nus-panel{position:relative;left:auto;right:auto;bottom:auto;margin:0;max-width:none;height:auto;
  max-height:min(72vh,640px);padding:4px 0 0;border-radius:14px;border:1px solid rgba(220,211,192,.34);
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 46%,rgba(255,255,255,.07)),rgba(43,46,35,.52);
  -webkit-backdrop-filter:blur(18px) saturate(1.55);backdrop-filter:blur(18px) saturate(1.55);
  box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);animation:nusFly .22s ease-out}
:is(body.v4d-tier-low,body.v4d-tier-midlite,body.v4d-tier-tablet,body.v4d-tier-mobile) #npUnitList.is-fly .nus-panel{
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(36,39,30,.86)}
@keyframes nusFly{from{opacity:0;transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){#npUnitList.is-fly .nus-panel{animation:none}}
#npUnitList.is-fly .nus-head{padding:6px 8px 6px 10px;gap:4px}
#npUnitList.is-fly .nus-head .nsb-ico{width:34px;height:34px}
#npUnitList.is-fly .nus-title b{font-size:14.5px}
#npUnitList.is-fly .nus-title span{font-size:11.5px}
/* bốn chip (Tất cả + 3 block) trên MỘT hàng: co theo chỗ, không xuống dòng */
#npUnitList.is-fly .nus-chips{padding:0 10px 8px;gap:4px;overflow:visible}
#npUnitList.is-fly .nus-chips button{flex:1 1 auto;min-width:0;height:30px;padding:0 6px;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis}
#npUnitList.is-fly .nus-chips button:hover{background:rgba(220,211,192,.14)}
#npUnitList.is-fly .nus-chips button.on:hover{background:linear-gradient(115deg,#A78061,#DCD3C0 85%)}
#npUnitList.is-fly .nus-body{padding:0 8px 10px;scrollbar-width:thin}
#npUnitList.is-fly .nus-body h5{padding:10px 6px 4px;font-size:10.5px}
#npUnitList.is-fly .nus-row{min-height:46px;padding:6px 6px 6px 8px;gap:10px;border-radius:8px;transition:background .12s}
#npUnitList.is-fly .nus-row:hover,#npUnitList.is-fly .nus-row:focus-visible{background:rgba(220,211,192,.16);outline:0}
#npUnitList.is-fly .nus-row b{font-size:14px}
#npUnitList.is-fly .nus-row small{font-size:11.5px}
#npUnitList.is-fly .nus-row svg{width:16px;height:16px}

/* ---------- 6. máy tính / iPad: phóng tới block (slice.desktop, 26/09/2026) ----------
   Chip "Toàn tầng · Block N" trong panel "Chọn tầng", ngay dưới danh sách tầng, cùng kiểu nút của panel; lời nhắc nổi
   giữa đáy như trên điện thoại. */
#floors .fl-blocks{display:grid;gap:4px;margin-top:8px}
#floors .fl-blocks[hidden]{display:none}
#floors .fl-blocks button{min-width:0;height:30px;padding:0 4px;border-radius:8px;font-size:11.5px;color:#DCD3C0;cursor:pointer;
  border:1px solid rgba(220,211,192,.3);background:rgba(220,211,192,.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .15s}
#floors .fl-blocks:not(.one-row) button[data-block=""]{grid-column:1/-1}
#floors .fl-blocks button:hover{background:rgba(220,211,192,.14)}
#floors .fl-blocks button:focus-visible{outline:2px solid #DCD3C0;outline-offset:-2px}
#floors .fl-blocks button.on{background:linear-gradient(115deg,#A78061,#DCD3C0 85%);color:#2f3327;font-weight:600;border-color:transparent}
@media (max-width:740px), (max-height:520px) and (orientation:landscape){#floors .fl-blocks{display:none}}
body.np-slice-desk #npSliceHint{bottom:108px}
body.np-slice-desk #npSliceHint.show{visibility:visible;opacity:1;transform:translate(-50%,0);transition-delay:0s}

/* ---------- 7. máy tính: panel "Chọn tầng" gọn lại (chủ dự án 26/09/2026 tối: "độ cao của menu mặt cắt tầng khi được
   bật đang dài quá" — cao gần hết màn hình sau khi có chip block). Danh sách tầng hiện ~6–7 tầng (cuộn phần còn lại;
   site.js vẫn cuộn tới tầng đang chọn), chip block một hàng, nút và chú giải sát hơn. Chỉ máy tính: điện thoại / màn
   thấp giữ page-shell.css + mục 3 ở trên. ---------- */
@media (min-width:741px) and (min-height:521px){
  #floors{padding:8px 9px}
  #floors h4{margin:2px 4px 4px}
  #floors .list{max-height:clamp(150px,26vh,236px);gap:2px;padding:4px 0}
  #floors .list button{padding:6px 12px}
  #floors .fl-blocks{margin-top:6px;gap:3px}
  #floors .fl-blocks button{height:28px;padding:0 1px;font-size:10px;letter-spacing:-.01em}
  #floors .fl-units{margin-top:6px;padding:6px 10px}
  #floors .ov{margin-top:6px;padding-top:6px}
  #floors .ov-head{padding:4px}
  #floors .ov-key{margin-top:2px}
  #floors .ov-key div{padding:2px 5px}
  #floors .ov-key button{margin:2px 0;padding:4px 6px}
  #floors .exit{margin-top:6px;padding:6px}
}

/* ---------- 8. máy tính bảng + cảm ứng ở bố cục máy tính (review đa thiết bị 26/09/2026 đêm) ----------
   Chủ dự án: sale / marketing giới thiệu dự án phần lớn trên laptop, MacBook, iPad, máy tính bảng Android. Đo 16 cấu
   hình (reviews/unit-types-20260926/devices-slice.mjs): máy tính bảng DỌC (741–900 px) — site.css thu panel còn 170 px,
   chip bị cắt, "Danh sách căn" / "Màu loại căn" xuống 2 dòng; màn CẢM ỨNG — nút tầng 31 px, chip 28 px (dưới cỡ ngón tay
   ~44 px). */
@media (min-width:741px) and (max-width:900px) and (min-height:521px){
  #floors{width:196px}
}
@media (min-width:741px) and (min-height:521px) and (pointer:coarse){
  #floors .list button{min-height:38px;padding:8px 12px}
  #floors .fl-blocks{gap:4px}
  #floors .fl-blocks button{height:36px;padding:0 4px;font-size:12px;letter-spacing:0}
  #floors .fl-units{min-height:40px;padding:8px 10px}
  #floors .ov-head{min-height:36px}
  #floors .ov-key button{min-height:34px}
  #floors .exit{min-height:40px}
}
/* bảng "Danh sách căn" trên màn < 1100 px (iPad, máy tính bảng, laptop nhỏ): mở ĐÈ lên panel tầng — bảng có ‹ tầng › và ✕
   riêng — thay vì bên trái panel (iPad dọc: panel + bảng + cột nút chiếm ~590/768 px, mặt bằng còn ~180 px) */
@media (min-width:741px) and (max-width:1099px) and (min-height:521px){
  #npUnitList.is-fly{right:calc(var(--edge,12px) + var(--btn,49px) + 12px);z-index:52;
    width:min(340px,calc(100vw - var(--edge,12px) * 2 - var(--btn,49px) - 24px))}
  body:has(#npUnitList.is-fly:not([hidden])) #floors{opacity:0;pointer-events:none}
}