/* Trang chủ (front-page) — CSS riêng.
   Phần lớn style đã nằm trong template/css/style.css.
   Thêm tinh chỉnh riêng cho bản WordPress tại đây nếu cần. */

/* ============================================================
   Gallery đánh giá (.homes-rate) — chiều rộng cột theo số cột thật
   style.css cố định .homes-rate__wrap .col ở 16.67% (đúng 6 cột).
   Khi ít ảnh, PHP giảm số cột để mỗi ảnh chỉ nằm ở một cột; phải chỉnh
   chiều rộng tương ứng, không thì hàng bị hụt bên phải.
   ============================================================ */

.homes-rate__wrap--cols-4 .col { width: 25%; }
.homes-rate__wrap--cols-2 .col { width: 50%; }
.homes-rate__wrap--cols-1 .col { width: 100%; }

/* Dải mờ dưới đáy gallery (.homes-rate__wrap::before) mặc định cao 10% chiều
   cao khối và chuyển màu đều từ đầu tới cuối. Ảnh xếp dày nên 10% không đủ tan,
   còn nhìn rõ một đường cắt ngang ở đáy. Kéo lên 25%, không đẩy cao hơn nữa:
   35% đã ăn mất gần một phần ba gallery.

   Chặn 30% dưới cùng đặc hẳn màu nền rồi mới chuyển: ảnh tan hết trước khi
   chạm đáy, không còn vệt lờ mờ sát chân gallery. Nền trang ngay dưới khối
   cũng là #d8efff nên không lộ đường nối. */
.homes-rate__wrap::before {
  height: 25%;
  background: linear-gradient(to top, #d8efff 0%, #d8efff 30%, transparent 100%);
}

@media screen and (max-width: 1200px) {
  /* gốc: 20% (5 cột). Giữ nguyên khi đủ ảnh, còn lại co theo số cột. */
  .homes-rate__wrap--cols-4 .col { width: 25%; }
  .homes-rate__wrap--cols-2 .col { width: 50%; }
}

@media screen and (max-width: 800px) {
  /* gốc: 33.33% (3 cột). */
  .homes-rate__wrap--cols-4 .col { width: 50%; }
  .homes-rate__wrap--cols-2 .col { width: 50%; }
}

/* ============================================================
   Marquee ảnh (.homes-swap__splide) — bề ngang slide phải tự tính được

   style.css để slide width:auto rồi trông chờ chuỗi phần trăm bên trong
   (.twoSplideAutoW-it width:100% -> img width:100%) tự co theo tỉ lệ ảnh.
   Chrome giải chuỗi này ra chiều cao x tỉ lệ (~276px), WebKit lại lấy nguyên
   chiều rộng gốc của ảnh (2028px) -> mỗi slide rộng hơn cả màn hình, Safari
   (iOS lẫn macOS) chỉ hiện được đúng 1 ảnh phóng to mỗi hàng.

   Cách chữa: cho ảnh ra khỏi luồng tính bề ngang (position:absolute) và khai
   báo thẳng tỉ lệ khung. Bề ngang = chiều cao x 3/2, không còn phụ thuộc vào
   ảnh đã tải xong hay chưa, mọi trình duyệt ra cùng một số.
   ============================================================ */

.homes-swap__splide .twoSplideAutoW-it {
  width: auto;
  aspect-ratio: 3 / 2;
}

.homes-swap__splide .twoSplideAutoW-it .img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.homes-swap__splide .twoSplideAutoW-it .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Vòng tròn cụm kiểm soát (.homes-control__visual) — quay bị trôi lệch tâm

   style.css căn hai vòng bằng top/left 50% + transform: translate(-50%,-50%),
   rồi cho vòng graphic quay bằng:
     @keyframes spin { 100% { transform: translate(-50%,-50%) rotate(360deg) } }

   Phần trăm nằm ngay trong transform đang được animate. Safari đẩy animation
   transform xuống GPU và quy -50% ra pixel một lần lúc dựng lớp; chiều cao khối
   lại lấy từ tỉ lệ ảnh nên lúc animation khởi động, ảnh chưa tải xong thì khối
   còn cao 0. Giá trị đã quy ra pixel không được tính lại khi ảnh về, vòng quay
   đứng lệch khỏi tâm trong khi vòng tĩnh vẫn đúng chỗ -> nhìn ra hai cung tròn
   không đồng tâm. Lệch hay không phụ thuộc ảnh tải nhanh chậm, nên cùng iOS
   Safari mà máy này lỗi máy kia không.

   Tách việc căn giữa ra khỏi việc quay: căn bằng thuộc tính translate (tĩnh,
   layout đổi là tính lại), quay bằng thuộc tính rotate. Transform được animate
   không còn phần trăm nào. Giữ height:auto nên ảnh admin tự tải lên tỉ lệ nào
   cũng không bị bóp.

   Bọc trong @supports: trình duyệt cũ không hiểu translate/rotate rời thì giữ
   nguyên cách cũ chứ không mất căn giữa.
   ============================================================ */

/* Khoá luôn chiều cao khối vòng. Trước đó khối chỉ có width, chiều cao suy ra
   từ tỉ lệ ảnh -> lúc chưa tải ảnh khối gần như cao 0, tải xong mới bung ra.
   Cả translate lẫn transform-origin của animation đều là phần trăm tính theo
   khối đó, mà Safari đã quy chúng ra pixel từ lúc dựng lớp GPU và không tính
   lại -> vòng nhảy lệch đúng lúc scroll tới (ảnh lazy vừa về), cuộn qua lại vài
   lần buộc dựng lại lớp thì mới hết.

   backdoor.css đã đặt aspect-ratio:1 nhưng chỉ từ 1201px trở lên — đó là lý do
   desktop không bao giờ dính, chỉ mobile dính. Đặt cho mọi khổ màn hình.
   Vòng trang trí luôn vuông; object-fit contain nên ảnh admin tải lên lệch tỉ lệ
   thì thừa viền chứ không bị bóp méo. */
.homes-control__cir-linear,
.homes-control__cir-graphic {
  aspect-ratio: 1;
}

.homes-control__cir-linear img,
.homes-control__cir-graphic img {
  -o-object-fit: contain;
  object-fit: contain;
}

@supports (translate: 1px) and (rotate: 1deg) {
  .homes-control__cir-linear,
  .homes-control__cir-graphic {
    -webkit-transform: none;
    transform: none;
    translate: -50% -50%;
  }

  .homes-control__cir-graphic {
    -webkit-animation-name: spinControlCircle;
    animation-name: spinControlCircle;
  }

  @keyframes spinControlCircle {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
  }
}

/* ============================================================
   Section năng lực (.homes-ability) — dải chuyển nền ở đáy
   Section đã có class "relative" nên ::after neo đúng vào nó.
   ============================================================ */

@media screen and (min-width: 1201px) {
  .homes-ability::after {
    content: "";
    display: block;
    width: 100%;
    height: 6rem;
    background: linear-gradient(to top, #e9f3ff, transparent);
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

/* ============================================================
   Section dịch vụ (.homes-service) — lớp mờ trắng đè lên nội dung

   .homes-service::after là dải linear-gradient trắng cao 10% chiều cao
   section, z-index 2, dùng để hoà nền section vào section kế tiếp.
   .homes-fire__head được nâng z-index 3 nên không sao, còn .homes-service__wrap
   thì không -> nằm dưới dải mờ.

   Trên desktop khối 2 cột nên phần cuối section là khoảng trống. Trên mobile
   khối xếp dọc, 2 ảnh dịch vụ tụt xuống đúng vùng 10% cuối -> bị phủ trắng mờ.
   Nâng wrap lên z-index 3 giống head: ảnh hết mờ, dải gradient vẫn còn để
   chuyển nền xuống section dưới.
   ============================================================ */

@media screen and (max-width: 900px) {
  .homes-service__wrap {
    z-index: 3;
  }
}

/* ============================================================
   Popup tư vấn (.popup-consult)
   Dùng lại nguyên khối .homes-youneed__box vốn thiết kế cho section
   full-width. Trong popup phải thu gọn lại: hẹp hơn, bớt padding dọc,
   và cho cuộn khi màn hình thấp.
   ============================================================ */

.popup-consult .popup-main {
  width: 112rem;
  max-width: calc(100% - 3rem);
}

.popup-consult .popup-over {
  /* nền do chính khối bên trong vẽ (radial-gradient), tránh viền trắng thừa */
  background-color: transparent;
  max-height: 88vh;
}

.popup-consult .homes-youneed__box {
  border-radius: 2.4rem;
}

/* Section gốc có padding-top 6rem để chừa chỗ cho bản đồ phía trên;
   trong popup không có bản đồ nên thu lại. */
.popup-consult .homes-youneed__boxin {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.popup-consult .homes-youneed__boxin .flex .flex-left .wrapper {
  padding-right: 3.2rem;
  gap: 1.8rem;
}

.popup-consult .homes-youneed__boxin .flex .flex-right .wrapper {
  padding-bottom: 0;
}

/* Ảnh nhân vật chiếm nhiều chiều cao; trong popup để nhỏ lại và đẩy xuống đáy
   cột trái cho cân với form bên phải. */
.popup-consult .homes-youneed__models {
  max-width: 26rem;
  margin-top: auto;
}

.popup-consult .homes-youneed__box .bg img {
  -o-object-fit: cover;
  object-fit: cover;
}

/* Nút đóng mặc định nhô ra ngoài góc (translate 30%/-30%). Ở popup này khối
   bên trong bo góc lớn nên kéo vào trong cho khỏi bị cắt. */
.popup-consult .popup-close {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  right: 1.2rem;
  top: 1.2rem;
}

@media screen and (max-width: 1200px) {
  .popup-consult .popup-main {
    width: calc(100% - 3rem);
  }
  .popup-consult .homes-youneed__models {
    max-width: 20rem;
  }
}

/* Dưới 800px khối gốc đã tự xếp dọc. Ở đây chỉ cần siết padding và bỏ ảnh
   nhân vật để form không bị đẩy quá sâu xuống dưới. */
@media screen and (max-width: 800px) {
  .popup-consult .popup-main {
    width: calc(100% - 2rem);
  }
  .popup-consult .popup-over {
    max-height: 85vh;
  }
  .popup-consult .homes-youneed__boxin {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .popup-consult .homes-youneed__boxin .flex .flex-left .wrapper {
    padding-right: 0;
    gap: 1.4rem;
  }
  .popup-consult .homes-youneed__models {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .popup-consult .popup-over {
    max-height: 82vh;
  }
  .popup-consult .homes-youneed__box {
    border-radius: 1.6rem;
  }
  .popup-consult .popup-close {
    right: 0.8rem;
    top: 0.8rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}