/*
====================================================
TAPATO VR360 MODULE — CSS
====================================================
*/

.tp-vr360 {
    --tp-vr360-radius: 12px;
    --tp-vr360-accent: #ec3013;

    position: relative;
    width: 100%;
}

.tp-vr360-stage {
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: var(--tp-vr360-radius);
    overflow: hidden;
    background: #16181c;
}

/* PSV đặt canvas ở vị trí absolute trong container — bo góc phải cắt ở đây */
.tp-vr360-stage .psv-container {
    border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   Không mở được — báo thẳng thay vì để màn hình đen
   ───────────────────────────────────────────────────────────────────── */

.tp-vr360-fatal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 240px;
    padding: 28px 20px;
    border: 1px dashed #d4573f;
    border-radius: var(--tp-vr360-radius, 12px);
    background: #fff6f4;
    color: #8a2d1b;
    font-size: 14px;
    line-height: 1.55;
}

.tp-vr360-fatal strong { font-size: 15px; }
.tp-vr360-fatal em { font-style: normal; opacity: .75; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────────
   Nút tắt/bật thanh điều khiển — nằm trong khung xem
   ─────────────────────────────────────────────────────────────────────
   Đặt góc dưới phải, ngay trên thanh điều khiển. Thanh ẩn đi thì nút tụt
   xuống sát đáy. Thanh điều khiển của PSV có z-index 90 nên nút phải cao hơn.
   ───────────────────────────────────────────────────────────────────── */

.tp-vr360-bar-toggle {
    position: absolute;
    right: 10px;
    bottom: 50px;
    z-index: 91;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 20, 24, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    opacity: .55;
    transition: bottom .22s ease, opacity .18s ease, transform .22s ease;
}

.tp-vr360-bar-toggle:hover,
.tp-vr360-bar-toggle:focus-visible { opacity: 1; }

.tp-vr360-bar-toggle svg { display: block; width: 100%; height: 100%; }

/* Ở góc trên phải khi mini-map chiếm mất góc dưới phải */
.tp-vr360-bar-toggle.is-top { top: 10px; bottom: auto; }

/* Thanh đang ẩn: nút tụt xuống đáy và mũi tên lật lên */
.tp-vr360.is-bar-off .tp-vr360-bar-toggle { bottom: 10px; }

/* Đẩy thanh điều khiển xuống hẳn dưới đáy khung (khung cắt overflow nên mất
   hẳn). Phải làm bằng CSS chứ không chỉ gọi navbar.hide(): PSV tự mở lại thanh
   khi ảnh nạp xong, gọi API trước đó là công cốc. Dùng translateY thay vì
   bottom:-40px để không phụ thuộc chiều cao thanh. */
.tp-vr360.is-bar-off .tp-vr360-stage .psv-navbar {
    transform: translateY(100%);
}
.tp-vr360.is-bar-off .tp-vr360-bar-toggle.is-top { top: 10px; bottom: auto; }
.tp-vr360.is-bar-off .tp-vr360-bar-toggle svg { transform: rotate(180deg); }

/* ── Nút Chia sẻ ─────────────────────────────────────────────────────
   Nằm cùng cột với nút thanh điều khiển, ngay trên nó. Khi thanh ẩn đi thì
   cả hai cùng tụt xuống, khoảng cách giữ nguyên. */
.tp-vr360-share {
    position: absolute;
    right: 10px;
    bottom: 92px;
    z-index: 91;
    width: 34px;
    height: 34px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 20, 24, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    opacity: .55;
    transition: bottom .22s ease, opacity .18s ease;
}

.tp-vr360-share:hover,
.tp-vr360-share:focus-visible { opacity: 1; }

.tp-vr360-share svg { display: block; width: 100%; height: 100%; }

.tp-vr360.is-bar-off .tp-vr360-share { bottom: 52px; }

/* Không có nút thanh điều khiển thì nút chia sẻ xuống chỗ của nó */
.tp-vr360:not(:has(.tp-vr360-bar-toggle)) .tp-vr360-share { bottom: 50px; }

/* ── Nút loa ─────────────────────────────────────────────────────────
   Cùng cột với nút chia sẻ và nút thanh điều khiển, nằm trên cùng. */
.tp-vr360-audio {
    position: absolute;
    right: 10px;
    bottom: 134px;
    z-index: 91;
    width: 34px;
    height: 34px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 20, 24, .72);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    opacity: .55;
    transition: bottom .22s ease, opacity .18s ease;
}

.tp-vr360-audio:hover,
.tp-vr360-audio:focus-visible { opacity: 1; }

.tp-vr360-audio svg { display: block; width: 100%; height: 100%; }

.tp-vr360.is-bar-off .tp-vr360-audio { bottom: 94px; }

/* Không có nút thanh điều khiển thì cả cột tụt xuống một nấc */
.tp-vr360:not(:has(.tp-vr360-bar-toggle)) .tp-vr360-audio { bottom: 92px; }

/* Trình duyệt đang chặn tự phát: nhấp nháy cho người xem biết là có tiếng
   mà chưa bật. Người bật "giảm chuyển động" thì thôi nháy, để nguyên sáng. */
.tp-vr360-audio.is-blocked {
    opacity: 1;
    animation: tp-vr360-audio-wait 1.4s ease-in-out infinite;
}

@keyframes tp-vr360-audio-wait {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 48, 19, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(236, 48, 19, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-audio.is-blocked { animation: none; box-shadow: 0 0 0 3px rgba(236, 48, 19, .5); }
}

/* Lời nhắn "Đã chép link" — hiện bên trái nút, tự tắt sau vài giây */
.tp-vr360-share-msg {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 12px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(18, 20, 24, .88);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.tp-vr360-share-msg.is-on { opacity: 1; }

/* ── La bàn ──────────────────────────────────────────────────────────
   Mặt la bàn do module tự vẽ (xem buildCompassSvg) để xoay được theo bắc
   thật của từng cảnh. Ở đây chỉ lo phần khung. */
.tp-vr360-stage .tp-vr360-compass {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}

/* Màn hẹp thì la bàn to choán mất ảnh — thu lại còn hai phần ba */
@media (max-width: 575.98px) {
    .tp-vr360-stage .tp-vr360-compass { width: 76px !important; }
}

/* Toàn màn hình thì PSV đẩy khung xem ra hết màn hình, nút vẫn bám theo vì
   nó nằm trong .tp-vr360-stage — không cần làm gì thêm. */

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-bar-toggle { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Logo / watermark
   ───────────────────────────────────────────────────────────────────── */

.tp-vr360-logo {
    position: absolute;
    z-index: 50;
    padding: 10px;
    pointer-events: none;
}

.tp-vr360-logo--top-left     { top: 0; left: 0; }
.tp-vr360-logo--top-right    { top: 0; right: 0; }
.tp-vr360-logo--bottom-left  { bottom: 0; left: 0; }
.tp-vr360-logo--bottom-right { bottom: 0; right: 0; }

.tp-vr360-logo img {
    display: block;
    height: auto;
    pointer-events: auto;
}

.tp-vr360-logo a {
    display: block;
    pointer-events: auto;
}


/* ─────────────────────────────────────────────────────────────────────
   Script / scripted tour controls bar
   ───────────────────────────────────────────────────────────────────── */

.tp-vr360-script-bar {
    position: absolute;
    z-index: 55;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, .55);
    border-radius: 20px;
    padding: 4px 10px;
    pointer-events: auto;
}

.tp-vr360-script-playbtn,
.tp-vr360-script-stopbtn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
    transition: background .15s;
}

.tp-vr360-script-playbtn:hover,
.tp-vr360-script-stopbtn:hover {
    background: rgba(255, 255, 255, .18);
}

.tp-vr360-script-info {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    min-width: 32px;
    text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────
   Dải thumbnail chọn cảnh
   ───────────────────────────────────────────────────────────────────── */

/* Khi có nhóm, bọc ngoài thêm một tầng; khi không có nhóm thì
   .tp-vr360-thumbs đứng thẳng như cũ và margin-top của nó vẫn áp dụng. */
.tp-vr360-thumbs-outer { margin-top: 12px; }
.tp-vr360-thumbs-outer .tp-vr360-thumbs { margin-top: 8px; }

.tp-vr360-group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 2px;
}

.tp-vr360-group-tab {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.tp-vr360-group-tab:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .5);
}

.tp-vr360-group-tab.is-on {
    background: var(--tp-vr360-accent, #ec3013);
    border-color: var(--tp-vr360-accent, #ec3013);
    color: #fff;
    font-weight: 600;
}

.tp-vr360-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.tp-vr360-thumb {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, transform .18s ease;
}

.tp-vr360-thumb:hover { transform: translateY(-2px); }
.tp-vr360-thumb.is-on { border-color: var(--tp-vr360-accent); }

.tp-vr360-thumb-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #2a2d33 center / cover no-repeat;
}

/* Ô đang xem có viền đỏ bao quanh cả ô — bo góc dưới của ảnh phải phẳng lại
   thì ảnh mới ăn khít vào viền, không hở hai góc. */
.tp-vr360-thumb.is-on .tp-vr360-thumb-img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tp-vr360-thumb-name {
    display: block;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-vr360-thumb.is-on .tp-vr360-thumb-name { color: var(--tp-vr360-accent); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────
   Điểm đánh dấu (marker) — PSV chèn khối html của ta vào .tp-vr360-marker
   ───────────────────────────────────────────────────────────────────── */

.psv-marker.tp-vr360-marker { cursor: pointer; }

.tp-vr360-mk {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

.tp-vr360-mk svg { display: block; width: 100%; height: 100%; }

.tp-vr360-mk-dot {
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .9);
    box-sizing: border-box;
}

.tp-vr360-mk-ring {
    border-radius: 50%;
    border: 3px solid;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
}

.tp-vr360-mk-ring i {
    display: block;
    width: 34%;
    height: 34%;
    border-radius: 50%;
}

.tp-vr360-mk-info {
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .9);
    box-sizing: border-box;
    color: #fff;
    font: 700 60%/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cỡ chữ do JS đặt inline theo size của điểm đánh dấu */
.tp-vr360-mk-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .9em;
    border-radius: 999px;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Điểm ẩn: trong suốt hoàn toàn, rê chuột mới hiện một vòng mờ cho biết đang
   trỏ trúng. Không có hình cố định nào. */
.tp-vr360-mk-hot {
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    box-sizing: border-box;
    filter: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.psv-marker:hover .tp-vr360-mk-hot {
    background: color-mix(in srgb, var(--tp-vr360-hot, #ec3013) 28%, transparent);
    border-color: var(--tp-vr360-hot, #ec3013);
}

/* Trình duyệt chưa có color-mix thì vẫn phải thấy được vòng viền */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .psv-marker:hover .tp-vr360-mk-hot { background: rgba(255, 255, 255, .22); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-mk-hot { transition: none; }
}

.tp-vr360-mk-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nhịp đập cho mấy điểm cần gây chú ý. Ai bật "giảm chuyển động" trong hệ
   điều hành thì dừng — đây là hiệu ứng lặp vô hạn, dễ gây khó chịu. */
@media (prefers-reduced-motion: no-preference) {
    .tp-vr360-pulse { animation: tp-vr360-pulse-anim 1.8s ease-out infinite; }
}

@keyframes tp-vr360-pulse-anim {
    0%   { transform: scale(1);    opacity: 1; }
    55%  { transform: scale(1.18); opacity: .7; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   Ghi đè nhẹ lên giao diện sẵn có của Photo Sphere Viewer
   ───────────────────────────────────────────────────────────────────── */

.tp-vr360-stage .psv-navbar {
    background: rgba(18, 20, 24, .72);
    backdrop-filter: blur(6px);
}

.tp-vr360-stage .psv-map { border-radius: 10px; }

/* Màu mũi tên lúc rê chuột. PSV đặt color inline nên phải !important mới đè
   được — biến do applyCss() ghi lên thẻ gốc của từng module. */
.tp-vr360-stage .tp-vr360-arrow:hover {
    color: var(--tp-vr360-arrow-hover, #ec3013) !important;
}

/* Mũi tên là ảnh tự tải lên.

   Ảnh png/jpg KHÔNG ăn màu — màu nằm sẵn trong từng điểm ảnh, tô lại là
   hỏng ảnh. Nên lúc rê chuột đổi độ sáng và phóng nhẹ thay cho đổi màu:
   vẫn thấy rõ là bấm được, mà không đụng vào ảnh của người soạn. */
.tp-vr360-arrow-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .18s ease, transform .18s ease;
}

.tp-vr360-stage .tp-vr360-arrow:hover .tp-vr360-arrow-img {
    filter: brightness(1.25);
    transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-arrow-img { transition: none; }
    .tp-vr360-stage .tp-vr360-arrow:hover .tp-vr360-arrow-img { transform: none; }
}

/* Tooltip hai tầng: dòng tiêu đề, bên dưới là đoạn mô tả ngắn */
.tp-vr360-stage .psv-tooltip-content { font-size: 13px; }

.tp-vr360-stage .psv-tooltip.tp-vr360-tip { max-width: 280px; }

.tp-vr360-tip-t {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
}

.tp-vr360-tip-d {
    display: block;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    opacity: .88;
}

/* Chỉ có mô tả mà không có tiêu đề thì bỏ vạch ngăn đi */
.tp-vr360-tip-t + .tp-vr360-tip-d { margin-top: 5px; }
.tp-vr360-tip-d:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.title-point {
    font-size: 16px;
    font-weight: 600;
}

/*
====================================================
CẢNH BÁO ẢNH 360 TRONG BẢNG SOẠN THẢO
====================================================

Ảnh rộng hơn trần texture của card đồ hoạ thì Photo Sphere Viewer
thu nhỏ lại mà không báo gì. Hai chỗ nói cho người soạn biết: dòng
chữ ngay dưới ô chọn ảnh, và một dấu ⚠ trên đầu khối cảnh để thấy
được cả khi khối đang gập.
*/

.tp-vr360-pano-note {
    margin: -4px 0 8px;
    font-size: 12px;
    line-height: 1.45;
}

.tp-vr360-pano-note:empty { display: none; }

.tp-vr360-pano-note.is-on,
.tp-vr360-pano-note.is-goi-y {
    color: #5c6670;
}

.tp-vr360-pano-note.is-goi-y {
    padding: 6px 8px;
    border-left: 3px solid #b9c0c7;
    border-radius: 3px;
    background: rgba(120, 130, 140, .07);
}

.tp-vr360-pano-note.is-canh-bao {
    padding: 6px 8px;
    border-left: 3px solid #d98c00;
    border-radius: 3px;
    background: rgba(217, 140, 0, .09);
    color: #8a5a00;
}

.tp-vr360-pano-note.is-loi {
    padding: 6px 8px;
    border-left: 3px solid #d9342b;
    border-radius: 3px;
    background: rgba(217, 52, 43, .09);
    color: #a82119;
}

.tp-vr360-scene-warn {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    cursor: help;
}

.tp-vr360-scene-warn:empty { display: none; }

.tp-vr360-scene-warn.is-canh-bao { color: #d98c00; }

.tp-vr360-scene-warn.is-loi { color: #d9342b; }


/*
====================================================
NHIỀU MODULE TRÊN MỘT TRANG (BẢNG SOẠN THẢO)
====================================================

Bảng tuỳ chỉnh chỉ có một, luôn sửa cho module đang chọn — nên phải
nhìn ra ngay đang sửa cái nào.
*/

.tp-vr360.is-active-module {
    /*outline: 2px solid #1f6fb2;
    outline-offset: 4px;
    border-radius: 4px;*/
}

.tp-vr360-module-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tp-vr360-mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 3px 4px 3px 10px;
    border: 1px solid #d6dde4;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
}

.tp-vr360-mod-chip:hover { border-color: #1f6fb2; }

.tp-vr360-mod-chip.is-on {
    border-color: #1f6fb2;
    background: #eaf2fa;
    font-weight: 600;
}

/* min-width: 0 là thứ cho phép cắt bằng "…" bên trong flex */
.tp-vr360-mod-chip-t {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tp-vr360-mod-chip-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a939c;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.tp-vr360-mod-chip-x:hover { background: #d9342b; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .tp-vr360.is-active-module { outline-offset: 2px; }
}


/*
====================================================
THANH "TUỲ CHỈNH ĐIỂM" TRÊN KHUNG XEM (BẢNG SOẠN THẢO)
====================================================
*/

/* Đang đặt hoặc đang chọn điểm thì con trỏ đổi cho biết bấm được */
.is-marking .tp-vr360-stage .psv-container { cursor: crosshair; }

/*
Viền quanh điểm đang chọn. Dùng outline chứ không dùng border: border
làm thẻ to ra, điểm xê dịch khỏi đúng chỗ vừa đặt.
*/
.psv-marker.tp-vr360-mk-picked {
    outline: 2px solid #0d6efd;
    outline-offset: 3px;
    border-radius: 3px;
}


/*
====================================================
BONG BÓNG TOOLTIP "LUÔN HIỆN"
====================================================

Tooltip của Photo Sphere Viewer chỉ giữ MỘT cái trên màn hình — đo
thật thì gọi hiện cho bốn điểm là ba cái kia tắt ngay. Nên bong bóng
"luôn hiện" là thẻ nằm trong chính điểm, module tự vẽ.

Đặt tuyệt đối để KHÔNG ảnh hưởng kích thước mà thư viện dùng để đặt
điểm — thêm bong bóng mà điểm xê dịch thì hỏng hết toạ độ đã khai.
*/

.tp-vr360-tip-fixed {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    box-sizing: border-box;
    width: max-content;
    max-width: 280px;
    padding: .5em 1em;
    border-radius: 4px;
    background: rgba(61, 61, 61, .8);
    color: #fff;
    text-align: center;
    text-shadow: 0 1px #000;
    pointer-events: none;
    z-index: 2;
}

/* Mũi nhọn chỉ xuống điểm */
.tp-vr360-tip-fixed::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: rgba(61, 61, 61, .8);
}


/* Căn ngang riêng cho từng tooltip:
   left = hộp lệch về trái so với marker,
   center = hộp nằm giữa marker,
   right = hộp lệch về phải so với marker. */
.tp-vr360-tip-fixed.tp-vr360-tip-align-left {
    left: 0;
    right: auto;
    transform: translate(0, var(--tp-vr360-tip-offset-y, 0px));
    text-align: left;
}

.tp-vr360-tip-fixed.tp-vr360-tip-align-left::after {
    left: 20px;
    margin-left: -7px;
}

.tp-vr360-tip-fixed.tp-vr360-tip-align-center {
    left: 50%;
    right: auto;
    transform: translate(-50%, var(--tp-vr360-tip-offset-y, 0px));
    text-align: center;
}

.tp-vr360-tip-fixed.tp-vr360-tip-align-center::after {
    left: 50%;
    margin-left: -7px;
}

.tp-vr360-tip-fixed.tp-vr360-tip-align-right {
    left: auto;
    right: 0;
    transform: translate(0, var(--tp-vr360-tip-offset-y, 0px));
    text-align: right;
}

.tp-vr360-tip-fixed.tp-vr360-tip-align-right::after {
    left: auto;
    right: 20px;
    margin-left: 0;
}

/*
Điểm kiểu ghim neo ở đáy nên thẻ của nó cao bằng cả cây ghim — bong
bóng phải đẩy lên khỏi đầu ghim, không thì đè lên chính nó.
*/
.psv-marker .tp-vr360-tip-fixed .tp-vr360-tip-t,
.psv-marker .tp-vr360-tip-fixed .tp-vr360-tip-d {
    text-align: center;
}


/*
====================================================
ĐƯỜNG KẺ NỐI VÀ HIỆU ỨNG HIỆN DẦN
====================================================

Lối trình bày quen thuộc của ảnh chụp từ trên cao trong bất động
sản: chấm nằm đúng chỗ, một nét kẻ đẩy nhãn lên chỗ trống cho khỏi
che công trình.

Chiều dài, độ dày và màu do CSS runtime của từng module đặt.
*/

.tp-vr360-tip-fixed::before {
    content: "";
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 60px;
    margin-left: -1px;
    background: #fff;
    transform: scaleY(1);
    /* Gốc ở ĐÁY — tức phía điểm — nên nét kẻ vươn LÊN phía bong bóng */
    transform-origin: 50% 100%;
}

/*
Hiện dần: nét kẻ vươn lên trước, bong bóng hiện sau. Thời gian và
độ trễ do CSS runtime đặt theo cấu hình.
*/
.tp-vr360-tip-reveal {
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-out;
}

.tp-vr360-tip-reveal::before {
    transform: scaleY(0);
    transition-property: transform;
    transition-timing-function: ease-out;
}

.tp-vr360-tip-reveal.is-on { opacity: 1; }

.tp-vr360-tip-reveal.is-on::before { transform: scaleY(1); }

/*
Người dùng đã xin bớt chuyển động thì hiện thẳng, đừng chạy hiệu
ứng — nhưng vẫn giữ luật "chỉ điểm đang trực diện mới hiện".
*/
@media (prefers-reduced-motion: reduce) {

    .tp-vr360-tip-reveal,
    .tp-vr360-tip-reveal::before {
        transition: none;
    }

}


/*
====================================================
HIỆU ỨNG TOẢ QUANH MŨI TÊN ĐI TIẾP
====================================================

Ảnh 360 nào cũng lắm chi tiết, mũi tên đứng yên rất dễ chìm vào nền.
Một vòng lan ra là mắt bắt được ngay.

Vòng vẽ bằng ::after nên không đụng gì tới SVG bên trong — đổi hình
mũi tên hay dùng ảnh tự tải lên đều chạy như nhau.
*/

.tp-vr360-arrow-pulse { position: relative; }

.tp-vr360-arrow-pulse::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin: -50% 0 0 -50%;
    border: 2px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
    animation: tp-vr360-arrow-wave 1900ms ease-out infinite;
}

@keyframes tp-vr360-arrow-wave {
    0%   { transform: scale(.5);  opacity: .8; }
    70%  { opacity: .12; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-arrow-pulse::after { animation: none; opacity: 0; }
}


/*
====================================================
MŨI TÊN ĐỨNG YÊN TRÊN KHUNG
====================================================

Gắn vào KHUNG XEM chứ không vào không gian: xoay đi đâu mũi tên vẫn
nằm nguyên một chỗ trên màn hình. Lối quen thuộc của tour bán nhà —
lúc nào cũng thấy đường đi tiếp.
*/

.tp-vr360-fixed-arrows {
    position: absolute;
    inset: 0;
    z-index: 30;
    /* Lớp chỉ để chứa, không được ăn chuột — còn phải kéo xoay ảnh */
    pointer-events: none;
}

.tp-vr360-fixed-arrow {
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    line-height: 0;
    cursor: pointer;
    pointer-events: auto;
    /* Độ ngả do CSS runtime của từng module đặt */
    transform: translate(-50%, -50%) perspective(420px) rotateX(58deg);
    transition: filter .15s ease, opacity .15s ease;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}

.tp-vr360-fixed-arrow svg,
.tp-vr360-fixed-arrow img {
    width: 100%;
    height: 100%;
    display: block;
}

.tp-vr360-stage .tp-vr360-fixed-arrow:hover {
    color: var(--tp-vr360-arrow-hover, #ec3013);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)) brightness(1.12);
}

/*
Chế độ này vẫn để thư viện dựng mũi tên của nó (la bàn còn chấm theo
hướng đi tiếp) — chỉ giấu đi cho khỏi có hai bộ mũi tên.
*/
.tp-vr360-hide-psv-arrows .psv-virtual-tour-arrows,
.tp-vr360-hide-psv-arrows .psv-virtual-tour-link {
    display: none !important;
}


/*
====================================================
KIỂU DÁNG THANH ĐIỀU KHIỂN
====================================================

Sáu kiểu, chỉ khác nhau lớp sơn CSS — nút nào có trên thanh vẫn do ô
"Nút trên thanh điều khiển" quyết định.

Ẩn/hiện thanh làm bằng transform chứ không đổi bottom/right, nên mỗi
kiểu phải khai lại hướng trượt đi cho đúng phía nó nép vào.
*/

/* ── Kính mờ: vẫn chạy hết bề ngang nhưng nhìn xuyên được ───────── */
.tp-vr360-nav-glass .tp-vr360-stage .psv-navbar {
    backdrop-filter: blur(10px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ── Viên thuốc nổi ở giữa đáy ──────────────────────────────────── */
.tp-vr360-nav-pill .tp-vr360-stage .psv-navbar,
.tp-vr360-nav-pill-top .tp-vr360-stage .psv-navbar {
    left: 50%;
    width: auto;
    max-width: calc(100% - 32px);
    transform: translateX(-50%);
    border-radius: 999px;
    padding: 0 6px;
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.tp-vr360-nav-pill .tp-vr360-stage .psv-navbar { bottom: -60px; }
.tp-vr360-nav-pill .tp-vr360-stage .psv-navbar--open { bottom: 16px; }

.tp-vr360-nav-pill-top .tp-vr360-stage .psv-navbar { top: -60px; bottom: auto; }
.tp-vr360-nav-pill-top .tp-vr360-stage .psv-navbar--open { top: 16px; bottom: auto; }

/* Thanh gập lại: trượt ra phía nó nép vào */
.tp-vr360-nav-pill.is-bar-off .tp-vr360-stage .psv-navbar {
    transform: translateX(-50%) translateY(200%);
}
.tp-vr360-nav-pill-top.is-bar-off .tp-vr360-stage .psv-navbar {
    transform: translateX(-50%) translateY(-200%);
}

/*
Chú thích cảnh co giãn hết chỗ trống nên viên thuốc bị kéo dài hết
khung — mất hẳn dáng viên thuốc. Bỏ đi, tên cảnh đã có ở dải ảnh.
*/
.tp-vr360-nav-pill .tp-vr360-stage .psv-caption,
.tp-vr360-nav-pill-top .tp-vr360-stage .psv-caption,
.tp-vr360-nav-side .tp-vr360-stage .psv-caption,
.tp-vr360-nav-minimal .tp-vr360-stage .psv-caption {
    display: none;
}

/* ── Cột dọc nép bên phải ───────────────────────────────────────── */
.tp-vr360-nav-side .tp-vr360-stage .psv-navbar {
    flex-direction: column;
    left: auto;
    right: 12px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: auto;
    padding: 6px 2px;
    border-radius: 16px;
    transform: translateY(-50%);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.tp-vr360-nav-side .tp-vr360-stage .psv-navbar--open { right: 12px; }

.tp-vr360-nav-side.is-bar-off .tp-vr360-stage .psv-navbar {
    transform: translateY(-50%) translateX(200%);
}

/* Thanh trượt zoom nằm ngang 80px, dựng đứng vào cột là vỡ hàng */
.tp-vr360-nav-side .tp-vr360-stage .psv-zoom-range { display: none; }

/* Hai nút xoay dính nhau bằng margin âm — trong cột thì thành chồng lên */
.tp-vr360-nav-side .tp-vr360-stage .psv-move-button + .psv-move-button {
    margin-left: 0;
}

/* ── Chỉ biểu tượng, không nền ──────────────────────────────────── */
.tp-vr360-nav-minimal .tp-vr360-stage .psv-navbar {
    background: none !important;
    height: 46px;
}

/*
Không có nền thì biểu tượng dễ chìm vào ảnh sáng — cho mỗi cái một
bóng đổ nhỏ thay cho nền.
*/
.tp-vr360-nav-minimal .tp-vr360-stage .psv-button {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
}

.tp-vr360-nav-minimal .tp-vr360-stage .psv-button--active {
    background: rgba(255, 255, 255, .22);
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-stage .psv-navbar { transition: none; }
}

/*
Cột dọc nép bên phải thì hai nút nổi (chia sẻ, gập thanh) phải đổi
sang trái — không thì nút cuối của cột đè lên chúng.
*/
.tp-vr360-nav-side .tp-vr360-share,
.tp-vr360-nav-side .tp-vr360-bar-toggle {
    right: auto;
    left: 10px;
}

/*
Lớp bọc để ngả mũi tên ở chế độ "dán chặt vào điểm trong ảnh".

Phải là thẻ BÊN TRONG nút: thư viện ghi transform thẳng lên thẻ nút ở
mỗi khung hình để đặt nó vào đúng hướng trong không gian — ngả trên
chính thẻ đó là bị xoá ngay khung hình sau.
*/
.tp-vr360-arrow-tilt {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .45));
}

.tp-vr360-arrow-tilt > svg,
.tp-vr360-arrow-tilt > img { width: 100%; height: 100%; display: block; }

/*
Vòng sáng loang ra khi rê chuột vào mũi tên.

Thay cho vòng của Photo Sphere Viewer — cái đó tô màu #61aaf2 viết
cứng trong mã thư viện, không đổi được. Vòng này tô bằng currentColor
nên tự lấy đúng "Màu rê chuột" đã khai.
*/
@keyframes tp-vr360-arrow-ring {
    0%   { box-shadow: 0 0 0 0 transparent; }
    20%  { box-shadow: 0 0 0 5px currentColor; }
    100% { box-shadow: 0 0 0 20px transparent; }
}

/* Vòng loang là box-shadow nên phải bo tròn mới ra vòng */
.tp-vr360-arrow-tilt { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .tp-vr360-stage .psv-virtual-tour-arrow:hover,
    .tp-vr360-stage .psv-virtual-tour-arrow:hover .tp-vr360-arrow-tilt,
    .tp-vr360-stage .tp-vr360-fixed-arrow:hover { animation: none !important; }
}


/*
============================================================
NGHE THỬ TIẾNG TRONG TRANG SOẠN THẢO
============================================================
*/

/* Nút ▶ hẹp hơn nút chọn tệp — nó chỉ có một hình nhỏ */
.tp-vr360-audio-try {
    padding-left: .45rem;
    padding-right: .45rem;
}

.tp-vr360-audio-try svg {
    vertical-align: -1px;
}

/*
Lời nhắc khi "Bật tiếng cho tour" đang tắt. Vàng chứ không đỏ: đây
là một lựa chọn hợp lệ, chỉ là dễ quên.
*/
.tp-vr360-tat-tieng {
    margin: -.35rem 0 .6rem;
    padding: .35rem .5rem;
    font-size: .74rem;
    line-height: 1.35;
    border-radius: .3rem;
    color: #7a5b00;
    background: #fff6d9;
    border: 1px solid #f2dc9a;
}

/* Mở không được tệp thì nút đỏ — sai đường dẫn im lặng y hệt tệp đúng */
.tp-vr360-audio-try.is-loi {
    color: #b42318;
    border-color: #e6a8a2;
    background: #fdecea;
}

/* Cảnh đang hiển thị trong viewer/editor */
#tp-vr360-scenes-editor .tp-vr360-scene-editor.is-active-scene > .tp-vr360-scene-head {
    outline: 2px solid rgba(13, 110, 253, .35);
    outline-offset: -2px;
}

#tp-vr360-scenes-editor .tp-vr360-scene-editor.is-active-scene > .tp-vr360-scene-head .member-title::after {
    content: " • đang xem";
    font-weight: 600;
}
#tp-vr360-scenes-editor .tp-vr360-scene-editor.is-active-scene > .tp-vr360-scene-head { outline:2px solid rgba(13,110,253,.35); outline-offset:-2px; }
#tp-vr360-scenes-editor .tp-vr360-scene-editor.is-active-scene > .tp-vr360-scene-head .member-title::after { content:" • đang xem"; font-weight:600; }


/* Tooltip hover của PSV cũng nhận căn chỉnh theo từng marker. */
.psv-tooltip.tp-vr360-tip-align-left,
.tp-vr360-tip.tp-vr360-tip-align-left { text-align: left; }

.psv-tooltip.tp-vr360-tip-align-center,
.tp-vr360-tip.tp-vr360-tip-align-center { text-align: center; }

.psv-tooltip.tp-vr360-tip-align-right,
.tp-vr360-tip.tp-vr360-tip-align-right { text-align: right; }


/* Property Information panel */
.tp-vr360{position:relative;}
.tp-vr360-property-panel{position:absolute;z-index:1200;top:16px;right:16px;width:390px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);overflow:auto;background:rgba(18,18,20,.98);color:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none;}
.tp-vr360-property-panel.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.tp-vr360-property-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 14px 10px;}
.tp-vr360-property-panel-title{font-size:18px;font-weight:800;line-height:1.25;}
.tp-vr360-property-close{width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer;}
.tp-vr360-property-panel-media img{display:block;width:100%;max-height:230px;object-fit:cover;}
.tp-vr360-property-panel-body{padding:0 14px 14px;}
.tp-vr360-property-panel-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0;}
.tp-vr360-property-panel-meta span{font-size:11px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.1);}
.tp-vr360-property-panel-sub,.tp-vr360-property-panel-desc{font-size:12px;line-height:1.5;opacity:.82;margin:6px 0;}
.tp-vr360-property-panel-price{font-size:22px;font-weight:900;margin:8px 0;}
.tp-vr360-property-panel-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px;}
.tp-vr360-property-panel-gallery img{width:100%;height:70px;object-fit:cover;border-radius:6px;}
.tp-vr360-property-panel-features{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.tp-vr360-property-panel-features span{font-size:10px;border:1px solid rgba(255,255,255,.18);padding:4px 6px;border-radius:5px;}
.tp-vr360-property-panel-actions{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.tp-vr360-property-actions{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
.tp-vr360-property-actions button,.tp-vr360-property-actions a{display:block;text-align:center;padding:8px 10px;border-radius:8px;border:0;text-decoration:none;font-size:12px;font-weight:800;cursor:pointer;background-color: red;color: #fff;}
.tp-vr360-property-actions .tp-vr360-property-vr{background:#fff;color:#111;}
.tp-vr360-property-panel-actions button,.tp-vr360-property-panel-actions a{display:block;width:100%;text-align:center;padding:9px 10px;border-radius:8px;border:0;text-decoration:none;font-size:12px;font-weight:800;cursor:pointer;}
.tp-vr360-property-vr{background:#fff;color:#111;}
.tp-vr360-property-panel .tp-vr360-property-cta{background:#ec3013;color:#fff;}
@media(max-width:767.98px){.tp-vr360-property-panel{top:8px;right:8px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);width:360px;}.tp-vr360-property-panel-title{font-size:16px;}}

/*
 * Property tooltip interactive khi Always Tooltip bật.
 * Card nằm bên trong marker thay vì PSV .psv-tooltip, vì vậy
 * người dùng có thể rê từ icon sang card mà card không biến mất.
 */
.tp-vr360-marker .tp-vr360-property-fixed-wrap {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    display: none;
    width: max-content;
    max-width: 300px;
    z-index: 20;
    pointer-events: auto;
}

/* Property tooltip là một bubble duy nhất: hiện khi rê vào marker/card,
 * tự ẩn khi chuột rời toàn bộ vùng marker + bubble. */
.tp-vr360-marker:hover .tp-vr360-property-fixed-wrap {
    display: block;
}

.tp-vr360-marker .tp-vr360-property-fixed-wrap .tp-vr360-property-card {
    position: relative;
    pointer-events: auto;
    cursor: default;
}

.tp-vr360-marker .tp-vr360-property-fixed-wrap .tp-vr360-property-cta {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    cursor: pointer;
}

.tp-vr360-marker .tp-vr360-property-fixed-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid rgba(18,18,20,.96);
    transform: translateX(-50%);
}

@media (max-width: 575.98px) {
    .tp-vr360-marker .tp-vr360-property-fixed-wrap {
        max-width: min(300px, calc(100vw - 24px));
    }
}


/* Property marker custom icon */
.tp-vr360-mk-property{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--tp-vr360-property-color,#ec3013);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);line-height:1;}
.tp-vr360-mk-property i{display:block;line-height:1;}

/*
Sidebar

*/


  .vr-sec > summary {
    cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--bs-secondary-color);
    padding: 15px 0; border-top: 1px solid var(--bs-border-color);
  }
  .vr-sec > summary::-webkit-details-marker { display: none; }
  .vr-sec > summary::before { content: '▸ '; display: inline-block; width: 14px; }
  .vr-sec[open] > summary::before { content: '▾ '; }
  .vr-sec > summary:hover { color: var(--bs-primary); }
  .vr-sec .vr-body { padding-bottom: 10px; }

  .form-label { font-size: 14px; margin-bottom: 10px; }
  .vr-hint { font-size: 11px; color: var(--bs-secondary-color); line-height: 1.45; }

  /* Khối cảnh / điểm / liên kết do MODULE dựng ra — trang chỉ tô màu */
  .tp-vr360-scene-editor {
    border: 1px solid var(--bs-border-color); border-radius: 6px;
    padding: 10px; margin-bottom: 10px; background: var(--bs-body-bg);
  }
  .tp-vr360-marker-editor,
  .tp-vr360-link-editor {
    border: 1px solid var(--bs-border-color); border-radius: 6px;
    padding: 8px; margin-bottom: 6px; background: var(--bs-tertiary-bg);
  }
  .member-title { font-size: 14px; font-weight: 600; width: 22%; }

  /* Đầu khối cảnh — bấm vào để mở / gập */
  .tp-vr360-scene-head {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
  }
  .tp-vr360-scene-editor.is-open .tp-vr360-scene-head {
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .tp-vr360-scene-sum {
    flex: 1 1 auto; min-width: 0;
    font-size: 12px; font-weight: 600; color: var(--bs-body-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tp-vr360-scene-head:hover .tp-vr360-scene-sum { color: var(--bs-primary); }

  /* Đầu khối điểm đánh dấu — bấm vào để mở / gập */
  .tp-vr360-marker-head {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
  }
  .tp-vr360-marker-editor.is-open .tp-vr360-marker-head {
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .tp-vr360-caret {
    flex: 0 0 auto; width: 10px; font-size: 10px;
    color: var(--bs-secondary-color);
    transition: transform .15s ease;
  }
  .tp-vr360-marker-editor.is-open > .tp-vr360-marker-head .tp-vr360-caret,
  .tp-vr360-scene-editor.is-open > .tp-vr360-scene-head .tp-vr360-caret {
    transform: rotate(90deg);
  }

  /* Tóm tắt trên đầu khối: đủ để nhận ra điểm nào mà không phải mở ra */
  .tp-vr360-marker-sum {
    /* min-width: 0 là thứ làm cho text-overflow: ellipsis chạy được bên
       trong flex — bỏ đi thì chữ dài đẩy vỡ cả hàng thay vì cắt bằng "…" */
    width: 80%; min-width: 0;
    font-size: 12px; color: var(--bs-secondary-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tp-vr360-marker-head:hover .tp-vr360-marker-sum { color: var(--bs-primary); }

  @media (prefers-reduced-motion: reduce) {
    .tp-vr360-caret { transition: none; }
  }

  #tp-vr360-add-scene { font-weight: 600; color: #333; }
  #tp-vr360-add-scene:hover { color: #fff; }

  .tp-vr360-group-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  }
  .tp-vr360-groups-empty { font-size: 12px; color: var(--bs-secondary-color); margin-bottom: 0; }

  .tp-vr360-sort-item {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--bs-border-color); border-radius: 6px;
    padding: 6px 8px; margin-bottom: 4px; font-size: 12px;
    background: var(--bs-body-bg); cursor: grab; user-select: none;
  }
  .tp-vr360-sort-item .handle { color: var(--bs-secondary-color); }

  /* Chế độ "bấm lên ảnh để lấy góc" — module gắn class này lên hộp xem trước */
  .is-picking .tp-vr360-stage { outline: 3px solid #0d6efd; outline-offset: 2px; }
  .is-picking .tp-vr360-stage .psv-container { cursor: crosshair; }
  #vr-pick-bar { display: none; }
  .is-picking #vr-pick-bar { display: block; }

  /* Ô xem trước mũi tên — nền tối cho thấy rõ mũi tên màu sáng */
  .vr-arrow-preview {
    display: flex; align-items: center; justify-content: center;
    height: 82px; border-radius: 6px;
    background: repeating-conic-gradient(#3a3f47 0 25%, #30343b 0 50%) 0 0 / 14px 14px;
    overflow: hidden;
  }
  .vr-arrow-demo { display: block; transition: color .18s ease; }
  .vr-arrow-preview:hover .vr-arrow-demo { color: var(--vr-arrow-hover, #ec3013) !important; }

  .vr-file-msg { font-size: 11px; line-height: 1.4; margin-bottom: 6px; }

  #tp-vr360-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

  /* ── Mẫu bong bóng tooltip ─────────────────────────────────────── */
  .tp-vr360-tip-presets {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
    margin-bottom: 10px;
  }
  .tp-vr360-tip-preset {
    border: 2px solid transparent; border-radius: 6px;
    padding: 2px; background: none; cursor: pointer;
    text-align: center; transition: border-color .15s;
  }
  .tp-vr360-tip-preset:hover { border-color: var(--bs-primary); }
  .tp-vr360-tip-preset-swatch {
    display: block; height: 28px;
  }
  .tp-vr360-tip-preset-name {
    display: block; font-size: 9px; color: var(--bs-secondary-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px; line-height: 1.3;
  }

  /* ── Mini-map picker (kéo để đặt vị trí cảnh) ─────────────────── */
  .tp-vr360-map-picker {
    position: relative; display: block; cursor: crosshair;
    margin-bottom: 8px; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--bs-border-color);
    user-select: none; -webkit-user-select: none;
  }
  .tp-vr360-map-picker-img {
    display: block; max-width: 100%; height: auto; pointer-events: none;
  }
  .tp-vr360-map-dot {
    position: absolute; display: none;
    width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
    background: rgba(120,120,120,0.8); border: 1.5px solid #fff;
  }
  .tp-vr360-map-dot-cur {
    background: #ec3013; border-color: #fff; z-index: 2;
    width: 14px; height: 14px;
  }

  .tp-vr360-property-editor{border:1px solid var(--bs-border-color);border-radius:8px;padding:10px;margin-bottom:8px;background:var(--bs-body-bg)}
  .tp-vr360-property-image{display:block;width:100%;max-height:150px;object-fit:cover}
  .tp-vr360-property-card{width:300px;max-width:80vw;overflow:hidden;border-radius:12px;background:rgba(18,18,20,.96);box-shadow:0 12px 40px rgba(0,0,0,.35);color:#fff}
  .tp-vr360-property-body{padding:12px}.tp-vr360-property-title{font-weight:700;font-size:16px}.tp-vr360-property-code,.tp-vr360-property-sub{font-size:11px;opacity:.72;margin-top:2px}.tp-vr360-property-meta{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.tp-vr360-property-meta span{font-size:11px;padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.1)}.tp-vr360-property-price{font-size:18px;font-weight:800;margin:5px 0}.tp-vr360-property-status{display:inline-block;font-size:11px;padding:3px 7px;border-radius:20px;background:#16a34a;margin-bottom:6px}.tp-vr360-property-desc{font-size:12px;line-height:1.45;opacity:.82;margin:5px 0}.tp-vr360-property-features{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.tp-vr360-property-features span{font-size:10px;border:1px solid rgba(255,255,255,.18);padding:3px 6px;border-radius:5px}.tp-vr360-property-cta{display:block;text-align:center;margin-top:10px;padding:8px;border-radius:7px;background:#fff;color:#111;text-decoration:none;font-size:12px;font-weight:700}
  .tp-vr360-mk-property{width:42px;height:42px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;background:#ec3013;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.3)}.tp-vr360-mk-property i{transform:rotate(45deg)}