/* Đông Võ Realty – hiệu ứng chuyển động (TK00430).
   1) Màn hình đầu hiện dần lúc tải trang: chỉ chạy khi <html> có .dv-anim-ready (script nhỏ trong <head> gắn,
      bỏ qua khi người xem bật "giảm chuyển động"). Tắt JS thì nội dung hiện bình thường.
      Chỉ đổi opacity/transform nên không làm xô lệch bố cục.
   2) Hover: nút nhấc nhẹ, thẻ nâng lên + đổ bóng (chỉ trên máy có chuột).
   Hiện dần khi cuộn nằm ở layout.css + main.js (data-dv-reveal). */

/* ===================== 1. Màn hình đầu ===================== */
@keyframes dv-intro-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes dv-intro-fade { from { opacity: 0; } }
@keyframes dv-intro-zoom { from { transform: scale(1.08); } }

.dv-anim-ready :is(
	.dv-hero__content > *, .dv-hero__content ~ *,
	.dv-phero__in > *, .dv-ahero__in > *, .dv-jhero__t > *,
	.dv-intro__text > *,
	.dv-phead .dv-wrap > *, .dv-lhead .dv-wrap > *, .dv-parch-head .dv-wrap > *, .dv-bhead .dv-wrap > *,
	.dv-ahead .dv-wrap > *, .dv-ld__head > *
):not([data-dv-reveal]):not([data-dv-reveal] *) {
	animation: dv-intro-up .8s cubic-bezier(.22, 1, .36, 1) .05s backwards;
}
.dv-anim-ready :is(.dv-jhero__media, .dv-intro__media, .dv-ldside):not([data-dv-reveal]):not([data-dv-reveal] *) {
	animation: dv-intro-fade 1s ease .2s backwards;
}
/* Các phần tử sau lệch nhau một chút */
.dv-anim-ready :is(.dv-hero__content > *, .dv-phero__in > *, .dv-ahero__in > *, .dv-jhero__t > *, .dv-intro__text > *, .dv-phead .dv-wrap > *, .dv-lhead .dv-wrap > *, .dv-parch-head .dv-wrap > *, .dv-bhead .dv-wrap > *, .dv-ahead .dv-wrap > *, .dv-ld__head > *):nth-child(2) { animation-delay: .13s; }
.dv-anim-ready :is(.dv-hero__content > *, .dv-phero__in > *, .dv-ahero__in > *, .dv-jhero__t > *, .dv-intro__text > *, .dv-phead .dv-wrap > *, .dv-lhead .dv-wrap > *, .dv-parch-head .dv-wrap > *, .dv-bhead .dv-wrap > *, .dv-ahead .dv-wrap > *, .dv-ld__head > *):nth-child(3) { animation-delay: .21s; }
.dv-anim-ready :is(.dv-hero__content > *, .dv-phero__in > *, .dv-ahero__in > *, .dv-jhero__t > *, .dv-intro__text > *, .dv-phead .dv-wrap > *, .dv-lhead .dv-wrap > *, .dv-parch-head .dv-wrap > *, .dv-bhead .dv-wrap > *, .dv-ahead .dv-wrap > *, .dv-ld__head > *):nth-child(4) { animation-delay: .29s; }
.dv-anim-ready :is(.dv-hero__content > *, .dv-phero__in > *, .dv-ahero__in > *, .dv-jhero__t > *, .dv-intro__text > *, .dv-phead .dv-wrap > *, .dv-lhead .dv-wrap > *, .dv-parch-head .dv-wrap > *, .dv-bhead .dv-wrap > *, .dv-ahead .dv-wrap > *, .dv-ld__head > *):nth-child(n+5) { animation-delay: .37s; }
/* Ô tìm kiếm, từ khoá phổ biến, số liệu của hero trang chủ */
.dv-anim-ready .dv-hero__content ~ *:nth-child(2) { animation-delay: .4s; }
.dv-anim-ready .dv-hero__content ~ *:nth-child(3) { animation-delay: .5s; }
.dv-anim-ready .dv-hero__content ~ *:nth-child(n+4) { animation-delay: .6s; }
/* Ảnh nền hero dự án / khu vực thu nhỏ dần về khung (khung đã overflow: hidden) */
.dv-anim-ready :is(.dv-phero__bg, .dv-ahero__img) { animation: dv-intro-zoom 1.8s cubic-bezier(.22, 1, .36, 1) backwards; }

/* ===================== 2. Hover ===================== */
.dv-btn, .dv-pbtn, .dv-cbtn, .dv-search__btn, .dv-ldside__btn, .dv-psub__book, .dv-social a, .dv-cform .fluentform .ff-btn-submit {
	transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dv-acard, .dv-bcard__media, .dv-vcard, .dv-cinfo, .dv-ld__proj { transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; }
.dv-nav > li > a::after { transform-origin: left center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.dv-bside__img img { transition: transform .6s ease; }

@media (hover: hover) and (pointer: fine) {
	.dv-btn:hover, .dv-pbtn:hover, .dv-cbtn:hover, .dv-search__btn:hover, .dv-ldside__btn:hover, .dv-psub__book:hover, .dv-cform .fluentform .ff-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(17, 18, 20, .16); }
	.dv-social a:hover { transform: translateY(-2px); }
	.dv-acard:hover, .dv-vcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17, 18, 20, .18); }
	.dv-bcard:hover .dv-bcard__media { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 18, 20, .14); }
	.dv-cinfo:hover, .dv-ld__proj:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 18, 20, .08); }
	.dv-bside:hover .dv-bside__img img { transform: scale(1.06); }
	.dv-footer__links a:hover { opacity: 1; color: #fff; }
}

/* ===================== Giảm chuyển động ===================== */
@media (prefers-reduced-motion: reduce) {
	.dv-anim-ready *, .js [data-dv-reveal] { animation: none !important; }
	.js [data-dv-reveal]:not(.is-in) { opacity: 1; }
	.dv-btn:hover, .dv-pbtn:hover, .dv-cbtn:hover, .dv-search__btn:hover, .dv-ldside__btn:hover, .dv-psub__book:hover, .dv-social a:hover,
	.dv-acard:hover, .dv-vcard:hover, .dv-bcard:hover .dv-bcard__media, .dv-cinfo:hover, .dv-ld__proj:hover,
	.dv-cform .fluentform .ff-btn-submit:hover { transform: none; }
	.dv-acard:hover .dv-acard__img, .dv-lcard:hover, .dv-lcard:hover .dv-lcard__img, .dv-pcard:hover, .dv-pcard:hover .dv-pcard__img,
	.dv-vcard:hover .dv-vcard__img, .dv-bcard:hover .dv-bcard__img, .dv-bside:hover .dv-bside__img img { transform: none; }
}