/* iOS Safari fix */
.image-wrap img{
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

#global-lang{
  position:fixed;
  top:14px;
  right:20px;
  z-index:999;
  display:flex;
  gap:6px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(201,164,95,.5);
  border-radius:20px;
  padding:5px;
  backdrop-filter:blur(6px);

  transition:opacity .5s ease, transform .5s ease;
}

#global-lang.is-hidden{
  opacity:0;
  transform:translateY(-20px);
  pointer-events:none;
}

#global-lang button{
  border:none;
  background:none;
  color:#c9a45f;
  font-size:12px;
  padding:6px 12px;
  border-radius:14px;
  cursor:pointer;
  opacity:.6;
}

#global-lang button.active{
  background:#c9a45f;
  color:#000;
  opacity:1;
}
/* ===== SECTION 3D MODEL ===== */
.s-3d {
  position: relative;
  height: 100vh;
  background: #1a1a1a; /* Nền tối để làm nổi bật model */
  overflow: hidden;
}

/* Đảm bảo iframe chiếm toàn bộ không gian nhưng không chặn scroll */
.s-3d .image-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0; /* Sẽ được GSAP làm hiện lên từ từ */
  transition: opacity 1s ease-in;
}

/* Overlay bảo vệ thao tác cuộn trên Mobile */
/* Tránh việc người dùng muốn cuộn trang nhưng lại bị kẹt vào thao tác xoay Model */
@media (max-width: 768px) {
  .s-3d {
    height: 100svh;
  }
  
  /* Nếu bạn muốn người dùng phải chạm vào model mới tương tác được, 
     có thể thêm một lớp phủ nhẹ hoặc chỉ định pointer-events */
  .s-3d iframe {
    touch-action: pan-y; 
  }
}

/* Tùy chỉnh vị trí Caption cho Section 3D (Góc dưới bên trái giống Section 1) */
.s-3d .caption {
  left: 7%;
  bottom: 7%;
  z-index: 10;
  border-left: 3px solid #FA891A; /* Line trang trí */
}

/* Đảm bảo hiệu ứng line xuất hiện khi section active */
.s-3d.is-active .caption::before {
  opacity: 1;
}