/* ===== Khoá dọc (portrait lock) =====
   Bes3D chỉ thiết kế cho chế độ dọc. Khi màn hình ở tư thế ngang — điện
   thoại xoay ngang, hoặc cửa sổ PC bị kéo rộng hơn cao — lớp phủ này che
   kín toàn bộ trang, chặn thao tác với nội dung bên dưới, và yêu cầu người
   dùng xoay/lại về chế độ dọc mới dùng tiếp được. Áp dụng cho MỌI kích
   thước màn hình (điện thoại, tablet, PC), không có ngoại lệ. */

#orientation-lock{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--navy);
  color:var(--white);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px;
}

@media (orientation:landscape){
  #orientation-lock{display:flex;}
  /* Chặn tương tác + cuộn trang bên dưới lớp phủ khi đang ở chế độ ngang */
  body{overflow:hidden;}
}

#orientation-lock .lock-icon{
  width:76px;height:76px;margin-bottom:22px;
  color:var(--teal-light);
  animation:rotateHint 1.8s ease-in-out infinite;
}

@keyframes rotateHint{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-90deg);}
}

#orientation-lock h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;font-weight:800;
  margin-bottom:10px;
  max-width:320px;
}

#orientation-lock p{
  font-size:14px;font-weight:500;line-height:1.55;
  color:rgba(255,255,255,0.72);
  max-width:300px;
}