/* KHUNG CHÍNH */
 body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
     overflow: hidden;
 }

 #panorama {
     position: relative;
     width: 100%;
     height: 100vh;
 }

 /* LOGO */
 #logo {
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 1500;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
 }

 #logo img {
     height: 100px;
     object-fit: contain;
 }

 /* === POPUP === */

 /* Lớp phủ nền đen */
 #popupOverlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     z-index: 2000;
     justify-content: center;
     align-items: center;
     padding: 20px;
     box-sizing: border-box;
 }

 /* Khung chính của popup */
 .popupContent {
     position: relative;
     background: white;
     border-radius: 10px;
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
     max-width: 95vw;
     max-height: 95vh;
     display: grid;
     grid-template-rows: auto 1fr;
     overflow: hidden;
     padding: 0;
     animation: zoomInPopup 0.3s ease-out forwards;
 }

 /* Animation xuất hiện */
 @keyframes zoomInPopup {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* THANH TIÊU ĐỀ */
 .popupContent h3 {
     background: #2D1000;
     color: #FFB300;
     padding: 12px 20px;
     margin: 0;
     text-align: center;
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     flex-shrink: 0;
 }

 /* Khung bọc hình ảnh để tạo padding */
 .popupImageWrapper {
     padding: 15px;
     flex-grow: 1;
     min-height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Hình ảnh */
 #popupImage {
     display: block;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 4px;

 }

 /* Nút đóng */
 #closePopup {
     position: absolute;
     top: 8px;
     right: 12px;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
     color: rgba(255, 255, 255, 0.8);
     font-size: 24px;
     line-height: 30px;
     text-align: center;
     cursor: pointer;
     z-index: 2001;
     transition: all 0.2s;
 }

 #closePopup:hover {
     background: #FFB300;
     color: #2D1000;
     transform: rotate(90deg) scale(1.1);
 }

 /* PILL BANNER CĂN GIỮA TRÊN CÙNG */
 #customTitle {
     position: absolute;
     top: 30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1500;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     padding: 10px 20px;
     border-radius: 25px;
     max-width: 600px;
     text-align: center;
     pointer-events: none;
     opacity: 1;
     transition: none;
 }

 #customTitle .titleMain {
     color: #FFB300;
     font-size: 1.5rem;
     font-weight: bold;
     text-shadow: none;
     text-transform: uppercase;
     line-height: 1.3;
 }

 #customTitle .titleSub {
     color: white;
     font-size: 1rem;
     margin-top: 2px;
     opacity: 0.9;
     line-height: 1.2;
 }

 /* ẨN CÁC THÀNH PHẦN UI MẶC ĐỊNH CỦA PANNELLUM */
 .pnlm-controls {
     display: none !important;
 }

 .pnlm-fullscreen-toggle,
 .pnlm-zoom-in,
 .pnlm-zoom-out,
 .pnlm-about-box {
     display: none !important;
 }

 /* THANH NGANG DƯỚI */
 #dockMenu {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(45, 16, 0, 0.85);
     padding: 20px 10px 15px 10px;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
     z-index: 1500;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 15px;
 }

 /* THANH CUỘN NGANG */
 .scene-scroll-wrapper {
     display: flex;
     align-items: center;
     width: 1000px;
     max-width: 95vw;
     margin: 0 auto 5px auto;
     margin-bottom: 5px;
 }

 .scene-scroll-wrapper button.scroll-left,
 .scene-scroll-wrapper button.scroll-right {
     background: #FFB300;
     color: #2D1000;
     border: none;
     padding: 3px 8px;
     cursor: pointer;
     font-size: 1.2rem;
     border-radius: 50%;
     margin: 0 10px;
     width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #sceneListFull {
     display: flex;
     overflow-x: auto;
     white-space: nowrap;
     padding: 3px 0;
     gap: 8px;
     flex-grow: 1;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 #sceneListFull::-webkit-scrollbar {
     display: none;
 }

 #sceneListFull button {
     background: #2D1000;
     color: white;
     border: 1px solid transparent;
     padding: 5px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 0.75rem;
     border-radius: 4px;
     flex-shrink: 0;
     width: 85px;
     transition: all 0.2s;
 }

 #sceneListFull button:hover {
     background: #FFB300;
     color: #2D1000;
 }

 #sceneListFull button.active {
     border-color: #FFB300;
     background: #4A2400;
     box-shadow: 0 0 5px #FFB300;
 }

 #sceneListFull button img {
     width: 100%;
     height: 50px;
     object-fit: cover;
     border-radius: 3px;
     margin-bottom: 2px;
 }

 #sceneListFull button span {
     white-space: normal;
     line-height: 1.1;
     height: 2.2em;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
 }


 /* CONTROLS (NÚT ĐIỀU KHIỂN) */
 .controls {
     display: flex;
     justify-content: center;
     gap: 10px;
 }

 .controls button {
     background: #FFB300;
     color: #2D1000;
     border: none;
     padding: 8px 12px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: bold;
     border-radius: 5px;
     transition: background 0.2s;
 }

 .controls button:hover {
     background: white;
 }

 /* HOTSPOT THÔNG TIN & CHUYỂN CẢNH */

 .custom-hotspot {
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     cursor: pointer;
     will-change: transform;
     transition: none !important;
     transform-origin: center center;
     backface-visibility: hidden;
     margin: 0 !important;
     padding: 0 !important;
 }

 /* HOTSPOT KIỂU CALLOUT – CÓ LINE & DOT */
 .callout-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     padding: 0;
     margin: 0;
     gap: 0;
     transform: translateY(-205px);
 }

 .callout-label {
     background: linear-gradient(90deg, #2D1000, #FFB300);
     color: white;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 10px;
     border-radius: 12px;
     white-space: nowrap;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
     margin: 0;
 }

 .callout-line {
     width: 1px;
     height: 70px;
     background: white;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
     margin: 0;
 }

 .callout-dot {
     width: 14px;
     height: 14px;
     background: white;
     border: 2px solid #fff;
     border-radius: 50%;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
     animation: pulse-dot 1s infinite ease-out;
     margin: 0;
     position: relative;
 }

 .callout-avatar {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid white;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     margin-bottom: 4px;
 }

 .callout-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 @keyframes pulse-dot {
     0% {
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
     }
 }

 .road-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     padding: 0;
     margin: 0;
     gap: 0;
     top: 6px;
     position: relative;
 }

 .road-dot {
     width: 12px;
     height: 12px;
     background: white;
     border-radius: 50%;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     animation: pulse-dot 1s infinite ease-out;
     margin: 0;
     position: relative;

 }

 /* Line từ dot lên label */
 .road-line {
     position: absolute;
     width: 1px;
     height: 70px;
     background: white;
     bottom: 100%;
     left: 50%;

     margin: 0;
 }

 /* Label nằm trên line */

 .road-label {
     position: absolute;
     bottom: calc(100% + 70px + 0px);
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(90deg, #fff600, #ffd200);
     color: #2D1000;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 12px;
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
     margin: 0;
 }

 /* === NÚT QUAY LẠI TRÊN LỚP UI === */
 #backFromDetailButton {
     display: none;
     position: absolute;
     top: 110px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1600;
     padding: 10px 18px;
     border-radius: 999px;
     font-weight: 700;
     font-size: 14px;
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     transition: all 0.2s ease-in-out;
     background: #FFB300;
     color: #2D1000;
 }

 #backFromDetailButton:hover {
     transform: translateX(-50%) scale(1.05);
     filter: brightness(1.1);
 }

 /* BẢN ĐỒ GOOGLE MINI MAP */
 #mapMiniBox {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 180px;
     height: 180px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     z-index: 1500;
 }

 #mapMiniBox iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 #miniMapIframe {
     z-index: 998;
 }

 /* Nút Liên hệ */
 #contactButtons {
     position: absolute;
     bottom: 20px;
     right: 20px;
     z-index: 1500;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 10px;
 }

 #contactButtons a img {
     height: 30px;
     width: 30px;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
     transition: transform 0.2s;
     display: block;
 }

 #contactButtons img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: contain;
     cursor: pointer;
     transition: transform 0.3s, box-shadow 0.3s;
     box-shadow: 0 0 10px rgba(255, 179, 0, 0.7);
     animation: contactPulse 3s infinite ease-out;
 }

 /* HIỆU ỨNG NHẤP NHÁY */
 @keyframes contactPulse {
     0% {
         box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.7);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 0 8px rgba(255, 179, 0, 0);
         transform: scale(1.05);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.7);
         transform: scale(1);
     }
 }


 #contactButtons img:hover {
     transform: scale(1.2);
     box-shadow: 0 0 20px rgba(255, 179, 0, 1);
     animation: none;
 }

 /* === MENU SỔ XUỐNG MỚI === */
 #newSceneMenu {
     position: absolute;
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
     width: 1020px;
     max-width: 90vw;
     height: 50vh;
     background: rgba(45, 16, 0, 0.85);
     border: none;
     border-radius: 15px 15px 0 0;


     z-index: 2000;
     display: none;
     flex-direction: column;
     padding: 20px;
     box-sizing: border-box;
 }

 #menuHeader {
     display: flex;
     gap: 15px;
     margin-bottom: 25px;
     align-items: center;
     padding-bottom: 5px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }

 #sceneSearch,
 #categoryFilter {
     padding: 12px 18px;
     border-radius: 8px;
     border: none;
     font-size: 16px;
     flex-grow: 1;
     background: white;
     color: #2D1000;
 }

 #menuHeader button {
     background: rgba(255, 255, 255, 0.2);
     color: white;
     font-size: 24px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     line-height: 1;
     transition: background 0.3s;
 }

 #menuHeader button:hover {
     background: #FFB300;
     color: #2D1000;
 }

 #menuContent {
     overflow-y: auto;
     flex-grow: 1;
     padding-right: 15px;
     margin-top: 15px;
 }

 .scene-group-header {
     grid-column: 1 / -1;
     color: #fff;
     background: #2D1000;
     padding: 8px 15px;
     border-radius: 6px;
     margin: 30px 0 15px 0;
     font-size: 18px;
     font-weight: 700;
     text-transform: uppercase;
 }

 #filteredSceneList {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 20px;
 }

 #filteredSceneList button {
     display: flex;
     flex-direction: column;
     align-items: center;
     background: rgba(255, 255, 255, 0.15);
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 12px;
     transition: all 0.2s;
     padding: 12px;
     width: 100%;
     height: auto;
     text-align: center;
     overflow: hidden;
 }

 #filteredSceneList button:hover {
     background: #FFB300;
     color: #2D1000;
     transform: translateY(-3px) scale(1.02);
 }

 #filteredSceneList button.active {
     border: 3px solid #FFB300;
     background: #4A2400;
     color: #fff;
 }

 #filteredSceneList button img {
     width: 100%;
     height: 90px;
     object-fit: cover;
     border-radius: 8px;
     margin-bottom: 8px;
 }

 #filteredSceneList button span {
     font-size: 14px;
     line-height: 1.2;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     white-space: normal;
 }

 /* === CODE MỚI: CTA BUBBLE (Thiết kế chốt 12:59) === */
 #ctaBubble {
     position: fixed;
     bottom: 100px;
     /* Căn giữa với nút Zalo/Phone */
     right: 75px;
     /* Đặt bên trái cụm icon */
     background: linear-gradient(135deg, #fff307, #ffdd00);
     color: #2D1000;
     padding: 12px 30px 12px 15px;
     /* TĂNG PADDING PHẢI ĐỂ CHỪA CHỖ CHO NÚT X */
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
     z-index: 1550;
     display: flex;
     align-items: center;
     gap: 10px;
     animation: fadeInCta 0.5s ease-out forwards, shakeCta 2s infinite 3s;
     transform-origin: bottom right;
 }

 /* Mũi tên trỏ sang phải */
 #ctaBubble::after {
     content: '';
     position: absolute;
     top: 50%;
     right: -10px;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-left: 10px solid #FFdd00;
 }

 #ctaIcon {
     width: 40px;
     height: 40px;
 }

 #ctaText {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
 }

 #ctaMainText {
     font-size: 16px;
     font-weight: 700;
     /* Đậm */
     text-transform: uppercase;
 }

 #ctaSubText {
     font-size: 18px;
     font-weight: 700;
     color: #000;
 }

 #ctaCloseBtn {
     position: absolute;
     top: -8px;
     right: 0px;
     width: 24px;
     height: 24px;
     background: #000;
     color: white;
     border-radius: 50%;
     text-align: center;
     line-height: 24px;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
     transition: background 0.3s ease, transform 0.3s ease;
 }

 #ctaCloseBtn:hover {
     background: #333;
     transform: scale(1.1);
 }

 @keyframes fadeInCta {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes shakeCta {

     0%,
     100% {
         transform: rotate(0deg) scale(1);
     }

     10% {
         transform: rotate(-3deg) scale(1.02);
     }

     20% {
         transform: rotate(3deg) scale(1.02);
     }

     30% {
         transform: rotate(-3deg) scale(1.02);
     }

     40% {
         transform: rotate(3deg) scale(1.02);
     }

     50% {
         transform: rotate(0deg) scale(1);
     }

     60% {
         transform: rotate(0deg) scale(1);
     }

     70% {
         transform: rotate(0deg) scale(1);
     }

     80% {
         transform: rotate(0deg) scale(1);
     }

     90% {
         transform: rotate(0deg) scale(1);
     }
 }

 /* Responsive cho CTA Bubble */
 @media (max-width: 1200px) {
     #ctaBubble {
         top: 80px;
         right: 20px;
         bottom: auto;
         left: auto;
         width: auto;
     }

     #ctaBubble::after {
         bottom: auto;
         top: -10px;
         right: 25px;
         left: auto;
         transform: none;
         border-top: none;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-bottom: 10px solid #FFC107;
     }
 }

 @media (max-width: 768px) {
     #ctaBubble {
         display: none !important;
         top: 60px;
         right: 10px;
         font-size: 12px;
         padding: 8px 35px 8px 12px;
         /* Tăng padding phải cho nút X mobile */
         gap: 8px;
     }

     #ctaIcon {
         width: 32px;
         height: 32px;
     }

     #ctaMainText {
         font-size: 14px;
     }

     #ctaSubText {
         font-size: 12px;
         color: #000;
     }

     /* Reset SĐT cho mobile */

     #ctaBubble::after {
         right: 20px;
     }

     #ctaCloseBtn {
         width: 20px;
         height: 20px;
         line-height: 20px;
         font-size: 14px;
         top: 5px;
         right: 5px;
     }
 }

 /* RESPONSIVE CHO MOBILE */
 @media (max-width: 768px) {
     .hide-on-mobile {
         display: none;
     }

     #logo img {
         height: 50px;
     }

     #dockMenu {
         padding: 5px 0;
         bottom: 0;
         left: 0;
         transform: none;
         width: 100%;
         border-radius: 0;
     }

     .scene-scroll-wrapper {
         width: 95%;
         margin-bottom: 5px;
     }

     .scene-scroll-wrapper button.scroll-left,
     .scene-scroll-wrapper button.scroll-right {
         font-size: 1rem;
     }

     .controls {

         flex-wrap: wrap;
     }

     .controls button {
         padding: 6px 8px;
         font-size: 0.8rem;
         margin-left: 3px;
         margin-right: 3px;
         margin-bottom: 5px;
     }

     #contactButtons a img {
         height: 25px;
         width: 25px;
     }

     #customTitle {
         top: 20px;
         padding: 8px 15px;
         border-radius: 20px;
         max-width: 90%;
     }

     #customTitle .titleMain {
         font-size: 0.8rem;
     }

     #customTitle .titleSub {
         font-size: 0.6rem;
     }

     #contactButtons {
         top: 10px;
         bottom: auto;
         right: 10px;
         gap: 0;
         flex-direction: column;
     }

     #contactButtons a {
         margin-bottom: 6px;
     }

     #contactButtons a:last-child {
         margin-bottom: 0;
     }

     #contactButtons img {
         width: 30px;
         height: 30px;
     }

     #menuHeader {
         flex-direction: column;
         padding: 15px 10px;
         position: relative;
         justify-content: flex-start;
         align-items: flex-start;
         width: 100%;
         box-sizing: border-box;
         gap: 0;
     }

     #menuHeader button {

         position: absolute;
         top: 10px;
         right: 10px;
     }


     #sceneSearch,
     #categoryFilter {
         width: 100%;
         box-sizing: border-box;
         flex-grow: 1;
         padding: 8px 12px;
         margin-bottom: 10px;
     }

     #filteredSceneList {
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
         gap: 10px;
     }

     .callout-avatar {
         width: 60px;
         height: 60px;
         border-width: 2px;
     }

     .callout-label {
         font-size: 10px;
         padding: 2px 6px;
         border-radius: 10px;
     }

     .callout-line {
         height: 40px;
     }

     .callout-dot {
         width: 10px;
         height: 10px;
     }

     .callout-wrapper {
         transform: translateY(-120px);
     }

     .road-label {
         font-size: 10px;
         bottom: calc(100% + 40px + 0px);
     }

     .road-line {
         height: 40px;
     }

     .road-dot {
         width: 8px;
         height: 8px;
     }

     #mapMiniBox {
         display: none !important;
     }

     .scene-group-header {
         margin-top: 20px;
         font-size: 16px;
     }
 }

 @media (max-width: 1024px) {
     #contactButtons {
         top: 20px;
         bottom: auto;
         right: 20px;
         flex-direction: column;
     }

     .callout-avatar {
         width: 80px;
         height: 80px;
     }

     .callout-label {
         font-size: 11px;
         padding: 3px 8px;
     }

     .callout-line {
         height: 60px;
     }

     .callout-dot {
         width: 12px;
         height: 12px;
     }

     .callout-wrapper {
         transform: translateY(-165px);
     }


     .road-label {
         font-size: 11px;
         bottom: calc(100% + 50px + 0px);

     }

     .road-line {
         height: 50px;
     }

     .road-dot {
         width: 10px;
         height: 10px;
     }

     #mapMiniBox {
         display: none !important;
     }
 }

 @media (max-width: 1200px) {
     #mapMiniBox {
         display: none !important;
     }

     #contactButtons {
         top: 20px;
         bottom: auto;
         right: 20px;
         flex-direction: column;
     }
 }