/* Tham quan 360° – CHỈ BẢN TƯ VẤN (xem tour-360.js). Dùng token màu/font trong :root của style.css. */

/* ---------- Thẻ trong section #tham-quan-360 (kế thừa .amenity-card) ---------- */
.t360-card{margin:0;}
.t360-mark{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;background:rgba(var(--deep-rgb),.78);color:#fff;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.5px;line-height:1;pointer-events:none;}
.t360-mark svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.t360-hit{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.t360-hit:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
.t360-card:hover .t360-mark{background:var(--primary);}
@media (max-width:640px){
  .t360-mark{top:8px;left:8px;padding:4px 7px 4px 5px;font-size:11px;}
  .t360-mark svg{width:16px;height:16px;}
}

/* ---------- Lớp phủ tour ---------- */
html.t360-lock,html.t360-lock body{overflow:hidden;}
html.t360-lock .cc-float{display:none !important;}
.t360{position:fixed;inset:0;z-index:200;background:#140709;color:#fff;font-family:var(--font-body);}
.t360[hidden]{display:none;}
.t360-pano{position:absolute;inset:0;}
.t360 .pnlm-container{background:#140709;font-family:var(--font-body);}
.t360 .pnlm-load-box{background:rgba(var(--deep-rgb),.85);border-radius:var(--radius);width:220px;}
.t360 .pnlm-lbar{border-color:var(--accent);}
.t360 .pnlm-lbar-fill{background:var(--accent);}
.t360 .pnlm-about-msg,.t360 .pnlm-error-msg{display:none !important;}  /* lỗi hiện bằng .t360-msg của trang */

.t360-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:14px 16px 28px;background:linear-gradient(180deg,rgba(20,7,9,.78),transparent);pointer-events:none;}
.t360-top > *{pointer-events:auto;}
.t360-logo{width:52px;height:52px;flex:none;object-fit:contain;}
.t360-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.t360-title b{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t360-title small{font-size:12px;opacity:.8;}

.t360-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.35);background:rgba(20,7,9,.55);color:#fff;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s;}
.t360-btn:hover{background:var(--primary);border-color:var(--primary);}
.t360-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.t360-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.t360-close{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.t360-close:hover{background:var(--accent-2);border-color:var(--accent-2);}

.t360-tools{position:absolute;right:16px;bottom:128px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.t360-seg{display:flex;border:1px solid rgba(255,255,255,.35);background:rgba(20,7,9,.55);}
.t360-seg[hidden]{display:none;}
.t360-seg button{border:0;background:transparent;color:#fff;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:12px 18px;cursor:pointer;}
.t360-seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);}

.t360-strip{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;overflow-x:auto;padding:28px 16px 14px;background:linear-gradient(0deg,rgba(20,7,9,.82),transparent);scrollbar-width:none;}
.t360-strip::-webkit-scrollbar{display:none;}
.t360-strip button{position:relative;flex:none;width:132px;border:2px solid transparent;padding:0;background:#000;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
.t360-strip button:hover,.t360-strip button.is-active{opacity:1;}
.t360-strip button.is-active{border-color:var(--accent);}
.t360-strip img{display:block;width:100%;height:78px;object-fit:cover;}
.t360-strip span{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;background:linear-gradient(0deg,rgba(20,7,9,.9),transparent);color:#fff;font-family:var(--font-head);font-weight:600;font-size:11.5px;line-height:1.25;text-align:left;}

.t360-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(420px,calc(100% - 32px));margin:0;padding:16px 20px;background:rgba(var(--deep-rgb),.92);text-align:center;font-size:14px;line-height:1.5;}
.t360-msg[hidden]{display:none;}

/* Hotspot chuyển cảnh: chấm vàng phát sáng tại đúng vị trí + đường dẫn + nhãn tên khu đặt ra ngoài (tour-360.js layout()) */
.t360 .t360-hs{width:30px;height:30px;cursor:pointer;}
.t360-hs i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#fffaf0 0 22%,#ffd9a8 45%,var(--accent) 75%);box-shadow:0 0 10px 3px rgba(255,214,160,.75),0 0 0 0 rgba(244,181,133,.6);animation:t360-pulse 2s ease-out infinite;transition:transform .2s;}
.t360-hs:hover i,.t360-hs.is-hot i{transform:scale(1.35);}
@keyframes t360-pulse{0%{box-shadow:0 0 10px 3px rgba(255,214,160,.75),0 0 0 0 rgba(244,181,133,.6);}80%,100%{box-shadow:0 0 10px 3px rgba(255,214,160,.75),0 0 0 12px rgba(244,181,133,0);}}
@media (prefers-reduced-motion:reduce){.t360-hs i{animation:none;}}

.t360-callouts{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.t360-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.t360-lines path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.7));transition:stroke .2s;}
.t360-lines path.is-hot{stroke:#fff;stroke-width:2;}
.t360-label{position:absolute;left:0;top:0;visibility:hidden;pointer-events:auto;margin:0;border:0;border-radius:0;padding:7px 13px;background:rgba(var(--primary-rgb),.94);color:#fff;font-family:var(--font-head);font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s;}
.t360-label:hover,.t360-label.is-hot,.t360-label:focus-visible{background:var(--accent);color:var(--on-accent);outline:none;z-index:1;}


@media (max-width:640px){
  .t360-top{padding:10px 10px 24px;gap:10px;}
  .t360-logo{width:40px;height:40px;}
  .t360-title b{font-size:21px;}
  .t360-title small{font-size:11px;}
  .t360-tools{right:10px;bottom:112px;}
  .t360-seg button{padding:10px 14px;font-size:12px;}
  .t360-strip{padding:24px 10px 10px;gap:6px;}
  .t360-strip button{width:108px;}
  .t360-strip img{height:66px;}
  .t360 .t360-hs{width:26px;height:26px;}
  .t360-label{padding:5px 9px;font-size:12px;}
}

/* ---------- Cảnh flycam ốp mặt bằng: bấm chọn căn (can-360.js) ---------- */
.cu-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.cu-layer[hidden]{display:none;}
.cu-svg{position:absolute;inset:0;width:100%;height:100%;}
.cu-hov{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:2;stroke-linejoin:round;}
.cu-sel{fill:rgba(244,181,133,.32);stroke:var(--accent);stroke-width:3.5;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,0,0,.65));}
.cu-tag{position:absolute;left:0;top:0;padding:6px 12px;background:var(--bg,#f6eedf);color:var(--primary);font-family:var(--font-display);font-size:17px;line-height:1.2;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.35);}
.cu-hint{position:absolute;left:50%;top:86px;transform:translateX(-50%);margin:0;padding:8px 14px;background:rgba(20,7,9,.72);color:#fff;font-family:var(--font-head);font-weight:600;font-size:13px;white-space:nowrap;}
.cu-hint:empty{display:none;}

/* Khung thông tin căn: cao theo nội dung (không kéo dài tới đáy), thông số xếp 2 cột */
.cu-panel{position:absolute;left:16px;top:84px;width:316px;max-height:calc(100% - 84px - 128px);overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 16px;background:var(--bg,#f6eedf);color:var(--ink,#2f1b20);box-shadow:0 10px 40px rgba(0,0,0,.45);z-index:2;}
.cu-panel[hidden]{display:none;}
.cu-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--primary);cursor:pointer;padding:0;}
.cu-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.cu-title{display:flex;align-items:baseline;gap:10px;margin:0 40px 10px 0;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;color:var(--primary);}
.cu-title small{font-family:var(--font-head);font-weight:600;font-size:12.5px;color:var(--muted,#6f5a5e);}
.cu-fig{margin:0 0 10px;background:#fff;border:1px solid var(--line,#ecdfc8);}
.cu-fig a{display:block;}
.cu-fig img{display:block;width:100%;height:auto;max-height:170px;object-fit:contain;padding:6px;box-sizing:border-box;}
.cu-noimg{margin:0;padding:14px 12px;text-align:center;font-size:12.5px;color:var(--muted,#6f5a5e);}
.cu-spec{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line,#ecdfc8);}
.cu-spec div{min-width:0;}
.cu-spec dt{font-size:11.5px;color:var(--muted,#6f5a5e);line-height:1.3;}
.cu-spec dd{margin:1px 0 0;font-weight:600;font-size:13.5px;line-height:1.3;}
.cu-price{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;}
.cu-price span{font-size:11.5px;color:var(--muted,#6f5a5e);}
.cu-price b{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--primary);}
.cu-price small{font-size:11.5px;color:var(--muted,#6f5a5e);line-height:1.4;}
.cu-none{margin:0 0 12px;font-size:13px;color:var(--muted,#6f5a5e);}
.cu-cta{display:block;padding:11px 14px;background:var(--accent);color:var(--on-accent);font-family:var(--font-head);font-weight:700;font-size:13.5px;text-align:center;text-decoration:none;}
.cu-cta:hover{background:var(--accent-2,#f8cca5);}
.cu-cta--ghost{background:transparent;border:1.5px solid var(--primary);color:var(--primary);}
.cu-cta--ghost:hover{background:var(--primary);color:#fff;}

@media (max-width:640px){
  .cu-hint{top:66px;font-size:12px;}
  .cu-tag{font-size:13px;padding:4px 8px;}
  .cu-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:62%;padding:12px 14px 14px;z-index:3;}
  .cu-title{font-size:26px;}
  .cu-fig img{max-height:150px;}
}
/* Máy tính màn hình thấp (laptop 720–820px): thu ảnh layout để cả khung, gồm nút xem giá, vừa một màn */
@media (min-width:641px) and (max-height:820px){
  .cu-fig img{max-height:118px;}
  .cu-title{margin-bottom:8px;}
  .cu-spec{gap:6px 12px;margin-bottom:10px;padding-bottom:10px;}
  .cu-price{margin-bottom:10px;}
}