:root {
  --d-line-1: 14vh;
  --d-line-2: 15vh;
  --d-line-3: 20vh;
  --d-line-4: 30vh;
  --d-line-41: 35vh;
  --d-line-5: 40vh;
  --d-line-51: 45vh;
  --d-line-6: 50vh;
  --d-line-61: 52vh;
  --d-line-7: 60vh;
  --d-line--1: 60px;

  --d-hline-1:5vw ;

}
@media (max-width:1599px) {
    :root {
      --d-line-1: 8vh;
      --d-line-2: 15vh;
      --d-line-3: 20vh;
      --d-line-4: 28vh;
      --d-line-41: 33vh;
      --d-line-5: 35vh;
      --d-line-51: 43vh;
      --d-line-6: 50vh;
      --d-line-61: 48vh;
      --d-line-7: 55vh;
      --d-line--1: 55px;

      --d-hline-1:5vw ;

    }
}
@media (max-width:767px) {
    :root {
        --d-line-1: 5vh;
        --d-line-2: 15vh;
        --d-line-3: 20vh;
        --d-line-4: 27vh;
        --d-line-41: 25vh;
        --d-line-5: 27vh;
        --d-line-51: 35vh;
        --d-line-6: 35vh;
        --d-line-61: 42vh;
        --d-line-7: 55vh;
        --d-line--1: 60px;
         
         --d-hline-1:5vw ;
      }       
}

#pano_container{ }
.default-title{ width: auto !important; height: auto !important;  left: var(--d-hline-1) !important; bottom: 0px !important;  }
.default-title > div{width: auto !important; background: #054b54 !important; border-radius: 5px !important; border: 0px !important; padding: 5px 12px !important; bottom: -16px !important;  cursor: pointer !important;
     min-width: 140px;
}
.default-title h2{margin: 0px; white-space: nowrap; color: #fff; text-transform: uppercase; }
.default-title:after{content: ''; height: 1px; width: var(--d-hline-1); position: absolute; left: calc(var(--d-hline-1) * -1 );  background:#fff;}
.default-title:hover > div{background: #000 !important;}


.default-title >div h4{display: none; }

.default-title >div h2{text-align:center; font-size: 16px; font-weight: 400; }

@media (max-width:1921px) {     
    .default-title > div{}  
    .default-title >div h2{font-size: 16px; font-weight: 400;}
}

@media (max-width:767px) {
      .default-title > div{min-width: 100px;}
      .default-title >div h2{font-size: 10px;} 
}


.utilities-node,
.utilities-node * {pointer-events: none !important; cursor: default !important;}

.utilities-title{  width: auto !important; height: auto !important;  left: 50% !important; transform: translateX(-50%);  bottom: 60px !important; position:relative; 
    
}
.utilities-title h2,.utilities-title h4{margin: 0px; white-space: nowrap; color: #fff;}
.utilities-title:after{content: ''; width: 1px; height: 60px; position: absolute; bottom: -60px; left: 50%; margin-left: -0.5px; background:rgba(232, 121, 41, 0.9);}

.utilities-title >div{width: auto !important; height: auto !important; border: 0px !important;
       cursor:pointer !important;
       min-height: 40px; padding: 4px 15px 2px !important;
       overflow: visible !important;
      transform: translateX(-50%);
      background: rgba(232, 121, 41, 0.9) !important;
      border-radius: 5px;
      display: flex;
    align-items: center;
}
.utilities-title >div h4{ font-size: 14px; font-weight: 400; position: relative;  }
.utilities-title >div h2{ font-size: 14px; font-weight: 500;}

@media (max-width:1599px) {
     .utilities-title >div h4{ font-size: 12px;}
      .utilities-title >div h2{ font-size: 12px;}
      .utilities-title >div{min-height: 40px; }
      
}

@media (max-width:767px) {
      .utilities-title{bottom: 60px !important;}
      .utilities-title:after{height: 60px; bottom: -60px;}
      .utilities-title >div{min-height: 30px; padding: 3px 8px 2px !important;}
      .utilities-title >div h4{ font-size: 10px;}
      .utilities-title >div h2{ font-size: 10px;}

}


.default-floor-plans{margin-top: 40px; margin-left: 40px;
      transition: var(--d-transaction)  !important;
}
.default-floor-plans.over{
   transform: scale(1.3);   
}
@media(hover: hover) and (pointer: fine) {
    
}
@media (max-width:767px) {
      .default-floor-plans{margin-top: 10px; margin-left: 10px;}      
      .default-floor-plans{transform: scale(0.5);}
      .default-floor-plans.over{
         transform: scale(1);   
      }
}



/*FIX Position*/
/*Tổng Quan*/



.toan_canh .Point10 .utilities-title{ bottom: var(--d-line-2) !important;}
.toan_canh .Point10 .utilities-title:after{height: var(--d-line-2); bottom: calc(var(--d-line-2) * -1 );}

.toan_canh .Point08 .utilities-title{ bottom: var(--d-line-4) !important;}
.toan_canh .Point08 .utilities-title:after{height: var(--d-line-4); bottom: calc(var(--d-line-4) * -1 );}

.toan_canh .Point05 .utilities-title{ bottom: var(--d-line-2) !important;}
.toan_canh .Point05 .utilities-title:after{height: var(--d-line-2); bottom: calc(var(--d-line-2) * -1 );}

.toan_canh .Point07 .utilities-title{ bottom: var(--d-line-3) !important;}
.toan_canh .Point07 .utilities-title:after{height: var(--d-line-3); bottom: calc(var(--d-line-3) * -1 );}

.toan_canh .Point13 .utilities-title{ bottom: var(--d-line-3) !important;}
.toan_canh .Point13 .utilities-title:after{height: var(--d-line-3); bottom: calc(var(--d-line-3) * -1 );}



@media (max-width:1599px) {
    .node_tongquan .Point11 .utilities-title h2{width: 120px; height: 94px;}
}

@media (max-width:767px) {
      .default-title > div{height: 25px !important;     padding: 4px 10px !important;}
      .direction-title > div{    height: 20px !important;}
      .direction-title >div h2{font-size: 10px;}
      .node_tongquan .Point11 .utilities-title h2{width: 120px; height: 94px;}
}

.node_tham_quan .default-title > div{}


/*TEST*/

.direction-title{ width: auto !important; height: auto !important;  }
.direction-title > div{width: auto !important; 
      background: rgba(51,51,51,0.7)  !important; 
      border-radius: 4px !important; border: 0px !important; 
      padding: 2px 8px !important; cursor: pointer !important;
     min-width: 60px;
     height: 24px !important;
     transform: translateX(-50%);
}

.direction-title >div h2{
      margin: 0px; white-space: nowrap; color: #fff; text-transform: uppercase; 
      text-align:center; 
      font-size: 13px; 
      font-weight: 400; 
}
.direction-node:hover .direction-title > div{background: rgba(5,75,85,0.7) !important;}

/*2*/
.direction-node .ggskin.ggskin_svg {
    overflow: visible;
    opacity: 1;
    background-image: url("../images/hostspot.png");
    cursor: pointer;
    pointer-events: auto;
    width: 51.2px !important;
    height: 51.2px !important;
    left: -25.6px;
    top: -25.6px;
    background-size: 819.2px 1280px;
    background-repeat: no-repeat;
    will-change: background-position;
    animation-name: MOVEBG;
    animation-duration: 1s;
    animation-delay: -0.5s;
    animation-timing-function: steps(10);
    animation-iteration-count: infinite;
    background-position: 0px 0px; /* -102.4px  -51.2px    */
    
}
.direction-node.left .ggskin.ggskin_svg{ 
      animation-name: MOVEBGLEFT;
      background-position: -51.2px 0px; /* -102.4px  -51.2px    */
}
.direction-node.right .ggskin.ggskin_svg{ 
      animation-name: MOVEBGRIGHT;
      background-position: -102.4px 0px; /* -102.4px  -51.2px    */
}

.direction-node .ggskin.ggskin_svg img{opacity: 0;}

@keyframes MOVEBG {
    100% {
         background-position: 0px   -1024px;
      } 
}
@keyframes MOVEBGRIGHT {
    100% {
         background-position: -102.4px   -1024px;
      } 
}
@keyframes MOVEBGLEFT {
    100% {
         background-position: -51.2px  -1024px;
      } 
}


.default-floor-plans .heading .btn-resize{    font-size: 40px;color: #fff;}