/* PDL MODERN HOTSPOT SYSTEM - GLASSMORPHISM (Mẫu 2) */

/* 1. Base Hotspot Container (Generated by Pannellum) */
/* This is the 0x0 anchor point positioned by the viewer */
.hotspot-container-pdl {
    background: transparent !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; 
    z-index: 1000 !important;
    position: absolute; /* Ensure it is positioned by Pannellum */
}

/* 2. Hotspot Wrapper (Inner Content) */
.hotspot-2 {
    position: absolute; /* Relative to the 0x0 container */
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content !important; 
    height: auto !important;
    pointer-events: none;
    
    /* DEFAULT ANCHOR: Bottom-Center (Pin style) */
    /* Shifts element up by 100% height and left by 50% width */
    transform: translate(-50%, -100%); 
}

/* 3. Tùy Chỉnh Hướng & Điểm Neo (Anchor Point) */
/* 
   HƯỚNG DẪN ĐIỀU CHỈNH ĐIỂM NEO:
   Sử dụng thuộc tính `transform: translate(X, Y)` để dịch chuyển hotspot so với điểm tọa độ gốc (0,0).
   - X: Dịch chuyển ngang (-50% là căn giữa theo chiều ngang)
   - Y: Dịch chuyển dọc (-100% là đẩy lên trên, 0 là ở dưới)
*/

/* TOP (Mặc định): Nội dung nằm TRÊN điểm neo */
.hotspot-2.top {
    flex-direction: column-reverse; /* Đảo ngược: Chấm ở dưới cùng */
    /* Dịch sang trái 50% (căn giữa ngang), Dịch lên 100% (căn đáy trùng điểm neo) */
    transform: translate(-50%, -100%);
}
.hotspot-2.top .leader {
    /* Kích thước được điều chỉnh bởi JS dựa vào lineHeight */
    background: linear-gradient(to top, #3498db, #2980b9);
}

/* BOTTOM: Nội dung nằm DƯỚI điểm neo */
.hotspot-2.bottom {
    flex-direction: column; /* Xuôi chiều: Chấm ở trên cùng */
    /* Dịch sang trái 50% (căn giữa ngang), Giữ nguyên Y (căn đỉnh trùng điểm neo) */
    transform: translate(-50%, 0);
}
.hotspot-2.bottom .leader {
    /* Kích thước được điều chỉnh bởi JS dựa vào lineHeight */
    background: linear-gradient(to bottom, #3498db, #2980b9);
}

/* RIGHT: Nội dung nằm bên PHẢI điểm neo */
.hotspot-2.right {
    flex-direction: row; /* Xuôi chiều: Chấm ở bên trái */
    /* Giữ nguyên X (căn trái trùng điểm neo), Dịch lên 50% (căn giữa dọc) */
    transform: translate(0, -50%);
}
.hotspot-2.right .leader {
    /* Kích thước được điều chỉnh bởi JS dựa vào lineHeight */
    background: linear-gradient(to right, #3498db, #2980b9);
}

/* LEFT: Nội dung nằm bên TRÁI điểm neo */
.hotspot-2.left {
    flex-direction: row-reverse; /* Đảo ngược: Chấm ở bên phải */
    /* Dịch sang trái 100% (căn phải trùng điểm neo), Dịch lên 50% (căn giữa dọc) */
    transform: translate(-100%, -50%);
}
.hotspot-2.left .leader {
    /* Kích thước được điều chỉnh bởi JS dựa vào lineHeight */
    background: linear-gradient(to left, #3498db, #2980b9);
}

/* --- CÁC HƯỚNG CHÉO (DIAGONAL) --- */

/* TOP-RIGHT: Nội dung góc TRÊN-PHẢI */
.hotspot-2.top-right {
    flex-direction: column-reverse; /* Dot ở dưới */
    align-items: flex-start; /* Dot ở trái */
    transform: translate(0, -100%); /* Neo tại góc dưới-trái của box */
}
.hotspot-2.top-right .leader {
    transform: rotate(35deg);
    transform-origin: 50% 100%; /* Xoay từ giữa chân */
    background: linear-gradient(to top right, #3498db, #2980b9);
    margin-left: 7px; /* (Dot 16px - Leader 2px) / 2 = 7px để căn giữa */
    margin-bottom: -4px; /* Kéo xuống một chút để dính vào dot */
}
.hotspot-2.top-right .content {
    margin-left: 35px; /* Đẩy sang phải nhiều hơn để tránh đè line */
    margin-bottom: -20px; /* User request */
}

/* TOP-LEFT: Nội dung góc TRÊN-TRÁI */
/* Logic tương tự Top-Right nhưng đảo chiều */
.hotspot-2.top-left {
    flex-direction: column-reverse; /* Dot ở dưới */
    align-items: flex-end; /* Dot ở phải */
    transform: translate(-100%, -100%); /* Neo tại góc dưới-phải của box */
}
.hotspot-2.top-left .leader {
    transform: rotate(-35deg);
    transform-origin: 50% 100%; /* Xoay từ giữa chân */
    background: linear-gradient(to top left, #3498db, #2980b9);
    margin-right: 7px; /* Căn giữa với Dot */
    margin-bottom: -4px;
}
.hotspot-2.top-left .content {
    margin-right: 35px;
    margin-bottom: -20px; /* Đồng bộ với Top-Right */
}

/* BOTTOM-RIGHT: Nội dung góc DƯỚI-PHẢI */
.hotspot-2.bottom-right {
    flex-direction: column; /* Dot ở trên */
    align-items: flex-start; /* Dot ở trái */
    transform: translate(0, 0); /* Neo tại góc trên-trái của box */
}
.hotspot-2.bottom-right .leader {
    transform: rotate(-35deg);
    transform-origin: 50% 0%; /* Xoay từ giữa đỉnh */
    background: linear-gradient(to bottom right, #3498db, #2980b9);
    margin-left: 7px; /* Căn giữa với Dot */
    margin-top: -4px;
}
.hotspot-2.bottom-right .content {
    margin-left: 10px; /* User request */
    margin-top: -10px; /* User request */
}

/* BOTTOM-LEFT: Nội dung góc DƯỚI-TRÁI */
.hotspot-2.bottom-left {
    flex-direction: column; /* Dot ở trên */
    align-items: flex-end; /* Dot ở phải */
    transform: translate(-100%, 0); /* Neo tại góc trên-phải của box */
}
.hotspot-2.bottom-left .leader {
    transform: rotate(35deg);
    transform-origin: 50% 0%; /* Xoay từ giữa đỉnh */
    background: linear-gradient(to bottom left, #3498db, #2980b9);
    margin-right: 7px; /* Căn giữa với Dot */
    margin-top: -4px;
}
.hotspot-2.bottom-left .content {
    margin-right: -20px; /* User request */
    margin-top: -10px; /* User request */
}

/* 4. Shared Leader Effects */
.hotspot-2 .leader {
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* 5. Content Container */
.hotspot-2 .content {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    pointer-events: auto; /* Enable clicks */
}

.hotspot-2:hover .content {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 6. Thumbnail */
.hotspot-2 .thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* 7. Text Content */
.hotspot-2 .text-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.hotspot-2 .header {
    color: #2c3e50;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hotspot-2 .subtext {
    color: #333;
    font-size: 11px;
    margin-top: 2px;
    white-space: nowrap;
}

/* 8. Dot Animation */
.hotspot-2 .dot {
    width: 12px;
    height: 12px;
    background: #3498db;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.3);
    animation: pulse-2 2s infinite;
    /* Remove absolute positioning to participate in Flex flow logic */
    display: block; 
    flex-shrink: 0;
    pointer-events: none;
}

@keyframes pulse-2 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    /* Thu nhỏ kích thước toàn bộ hotspot để không choáng chỗ */
    .hotspot-2 {
        transform: translate(-50%, -100%) scale(0.7); /* Scale 70% mặc định (Neo dưới) */
    }

    /* Vì transform bị ghi đè bởi style inline của class hướng (CSS specificity),
       ta cần các rule cụ thể cho từng hướng để giữ lại translate đúng */
    
    .hotspot-2.top-right {
        transform: translate(0, -100%) scale(0.7);
    }
    .hotspot-2.top-left {
        transform: translate(-100%, -100%) scale(0.7);
    }
    .hotspot-2.bottom-right {
        transform: translate(0, 0) scale(0.7);
    }
    .hotspot-2.bottom-left {
        transform: translate(-100%, 0) scale(0.7);
    }
    .hotspot-2.left {
         transform: translate(-100%, -50%) scale(0.7);
    }
     .hotspot-2.right {
         transform: translate(0, -50%) scale(0.7);
    }
    /* Top bottom giữ nguyên default template */
    .hotspot-2.top {
        transform: translate(-50%, 0) scale(0.7);
    }
    .hotspot-2.bottom {
        transform: translate(-50%, -100%) scale(0.7);
    }

    /* Ẩn bớt thumbnail nếu màn hình quá nhỏ */
    @media (max-width: 480px) {
        .hotspot-2 .thumbnail {
            width: 30px;
            height: 30px;
        }
        .hotspot-2 .content {
            padding: 4px 8px;
            gap: 6px;
        }
        .hotspot-2 .header {
            font-size: 11px;
        }
        .hotspot-2 .subtext {
            font-size: 9px;
            display: none; /* Ẩn subtext trên điện thoại quá nhỏ */
        }
    }
}