/* Nút liên hệ nổi (Zalo + gọi điện) — trích từ theme bachkhoa,
   assets/css/components.css dòng 813-928.

   Chỉ lấy đúng phần này chứ không nạp cả components.css: file đó định nghĩa lại
   .row, .col, .section, .button... trùng tên với Flatsome và sẽ đá nhau.

   Bỏ #top-link của bản gốc vì Flatsome đã có nút lên đầu trang riêng.
*/
/* --------------------------------------------- nút liên hệ nổi + lên đầu */

/* Số đo dưới đây lấy từ trang gốc dienlanhdientubachkhoa.net, đo bằng
   getBoundingClientRect chứ không ước lượng. Trang gốc dùng plugin
   button-contact-vr; ta chép lại đúng kích thước và màu, không cần plugin.

   Cấu trúc ba lớp lồng nhau, mỗi lớp một việc:

     .phone-vr              khung 90×90 trong suốt, chỉ để chứa
     .phone-vr-circle-fill  vòng 64×64 mờ, phóng to thu nhỏ (hoạt hình zoom)
     .phone-vr-img-circle   vòng 40×40 đặc màu, lắc qua lại, chứa icon 25px

   Icon là hình TRẮNG trên nền trong suốt, nằm đè lên vòng màu — nên đừng
   thay bằng ảnh có sẵn nền tròn, sẽ thành hai vòng chồng nhau.

   Không có luật riêng cho điện thoại: trang gốc giữ nguyên kích thước ở mọi
   khổ màn hình, nên bản này cũng vậy. */

#button-contact-vr {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99999;
}

/* margin-top âm cho hai nút chồng nhẹ lên nhau, giống bản gốc.
   Khung 90px rộng hơn vòng tròn 64px nhiều nên chồng vậy vẫn không đè icon. */
#button-contact-vr .button-contact {
  position: relative;
  margin-top: -5px;
}

#button-contact-vr .button-contact .phone-vr {
  position: relative;
  width: 90px;
  height: 90px;
  background-color: transparent;
  cursor: pointer;
  z-index: 11;
  display: block;
}

.phone-vr-circle-fill {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 65px;
  height: 65px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-color: rgba(230, 8, 8, .7);
  transform-origin: 50% 50%;
  animation: bk-vr-zoom 1.3s infinite;
}

.phone-vr-img-circle {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e60808;
  display: flex;
  justify-content: center;
  animation: bk-vr-lac 1s infinite ease-in-out;
}

.phone-vr-img-circle a {
  display: block;
  line-height: 37px;
}

/* Icon căn giữa bằng translate, và giới hạn bằng max-* đúng như bản gốc:
   ảnh nguồn to hơn (zalo.png 100×95) nên phải ghì lại, không phóng lên. */
.phone-vr-img-circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 27px;
  max-height: 25px;
  width: auto;
  height: auto;
}

/* Icon SVG (Messenger, chỉ đường) căn giữa y như icon ảnh. */
.phone-vr-img-circle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}

/* Zalo xanh dương, điện thoại đỏ, Messenger xanh Facebook, chỉ đường xanh lá. */
#zalo-vr .phone-vr-circle-fill      { background-color: rgba(33, 150, 243, .7); }
#zalo-vr .phone-vr-img-circle       { background-color: #2196f3; }
#messenger-vr .phone-vr-circle-fill { background-color: rgba(0, 132, 255, .7); }
#messenger-vr .phone-vr-img-circle  { background-color: #0084ff; }
#maps-vr .phone-vr-circle-fill      { background-color: rgba(52, 168, 83, .7); }
#maps-vr .phone-vr-img-circle       { background-color: #34a853; }

/* Vị trí góc phải — chọn trong trang "Nút liên hệ nổi". Nâng lên 70px để không
   đè lên nút "lên đầu trang" của Flatsome (nút đó nằm sát góc phải dưới). */
#button-contact-vr.bk-nut-phai {
  left: auto;
  right: 0;
  bottom: 70px;
}

@keyframes bk-vr-zoom {
  0%   { transform: scale(.9); }
  70%  { transform: scale(1); box-shadow: 0 0 0 15px transparent; }
  100% { transform: scale(.9); box-shadow: 0 0 0 0 transparent; }
}

/* Vòng màu lắc qua lại như chuông điện thoại đang rung. */
@keyframes bk-vr-lac {
  0%   { transform: rotate(0) scale(1) skew(1deg); }
  10%  { transform: rotate(-25deg) scale(1) skew(1deg); }
  20%  { transform: rotate(25deg) scale(1) skew(1deg); }
  30%  { transform: rotate(-25deg) scale(1) skew(1deg); }
  40%  { transform: rotate(25deg) scale(1) skew(1deg); }
  50%  { transform: rotate(0) scale(1) skew(1deg); }
  100% { transform: rotate(0) scale(1) skew(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .phone-vr-circle-fill,
  .phone-vr-img-circle { animation: none; }
}

/* Popup của plugin liên hệ — không dùng, ẩn đi */
#popup-form-contact-vr,
#popup-showroom-vr { display: none; }