/* ==========================================================================
   Song Anh – chuyển động: hiệu ứng xuất hiện khi cuộn
   Hiệu ứng chỉ bật khi <html> có .sa-anim-ready (script ở <head> thêm vào, và chỉ khi người dùng KHÔNG bật
   "giảm chuyển động") → không có JS / giảm chuyển động thì nội dung hiện bình thường.
   ========================================================================== */

:root {
	--sa-anim-dur: 1.6s;                           /* thời gian dịch chuyển của 1 hiệu ứng – đo từ Flatsome gốc: transform 1,6s, opacity 0,7s ease-in */
	--sa-anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* dùng cho các chi tiết đi kèm (gạch vàng, hero…) */
}

/* ---------- Hiệu ứng khi cuộn: cùng nhịp với data-animate mặc định của Flatsome (trượt 70px / 1,6s, mờ dần 0,7s ease-in,
   chờ ~0,3s rồi các ô nối nhau cách ~0,19s – phần chờ + nối nhau do sa-motion.js đặt vào --sa-d) ---------- */
.sa-anim-ready [data-sa-animate] {
	transition:
		opacity 0.7s ease-in var(--sa-d, 0ms),
		transform var(--sa-anim-dur) ease var(--sa-d, 0ms);
	/* KHÔNG đặt will-change cố định: mỗi phần tử sẽ thành 1 lớp GPU riêng (50+ lớp chứa ảnh lớn làm cuộn giật);
	   trình duyệt tự đưa lên GPU trong lúc chạy transition */
}
/* trạng thái ban đầu (chưa vào khung nhìn) */
.sa-anim-ready [data-sa-animate]:not(.is-in) { opacity: 0; }
.sa-anim-ready [data-sa-animate="fadeInUp"]:not(.is-in) { transform: translate3d(0, 70px, 0); }
.sa-anim-ready [data-sa-animate="fadeInDown"]:not(.is-in) { transform: translate3d(0, -70px, 0); }
.sa-anim-ready [data-sa-animate="fadeInLeft"]:not(.is-in) { transform: translate3d(-70px, 0, 0); }
.sa-anim-ready [data-sa-animate="fadeInRight"]:not(.is-in) { transform: translate3d(70px, 0, 0); }
.sa-anim-ready [data-sa-animate="zoomIn"]:not(.is-in) { transform: scale(0.93); }
.sa-anim-ready [data-sa-animate="blurIn"]:not(.is-in) { filter: blur(15px); transform: scale(1.02); }
/* filter / clip-path chỉ thêm transition ở đúng kiểu dùng chúng (các kiểu còn lại chỉ opacity + transform) */
.sa-anim-ready [data-sa-animate="blurIn"] { transition-property: opacity, transform, filter; transition-duration: 0.7s, 1.6s, 1.3s; }
.sa-anim-ready [data-sa-animate="revealUp"] { transition-property: opacity, transform, clip-path; transition-duration: 1.2s; }
/* mở màn từ dưới lên: lớp cắt kéo dần, không dùng mờ */
.sa-anim-ready [data-sa-animate="revealUp"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
.sa-anim-ready [data-sa-animate="revealUp"].is-in { clip-path: inset(0 0 0 0); }

/* ảnh/video: khung nhỏ hơn thì dịch ít lại, không làm tràn ngang trên mobile */
@media (max-width: 549px) {
	.sa-anim-ready [data-sa-animate="fadeInLeft"]:not(.is-in),
	.sa-anim-ready [data-sa-animate="fadeInRight"]:not(.is-in) { transform: translate3d(0, 40px, 0); }
}
/* tính năng dự phòng: người dùng bật giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
	[data-sa-animate] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
}

/* ==========================================================================
   Hero: hiệu ứng vào trang / đổi slide
   Thẻ nội dung xuất hiện trước, rồi tiêu đề → mô tả → nút lần lượt; ảnh nền phóng to nhẹ rồi lùi về.
   Chạy khi slide có .is-active (kể cả slide đầu lúc tải trang). Tắt: option "Thẻ nội dung xuất hiện = Không".
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sa-hero-in-up    { from { opacity: 0; transform: translate3d(0, 36px, 0); } to { opacity: 1; transform: none; } }
	@keyframes sa-hero-in-left  { from { opacity: 0; transform: translate3d(-48px, 0, 0); } to { opacity: 1; transform: none; } }
	@keyframes sa-hero-in-right { from { opacity: 0; transform: translate3d(48px, 0, 0); } to { opacity: 1; transform: none; } }
	@keyframes sa-hero-in-fade  { from { opacity: 0; } to { opacity: 1; } }
	@keyframes sa-hero-in-line  { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
	@keyframes sa-hero-zoom     { from { transform: scale(1.07); } to { transform: scale(1); } }

	/* thẻ: dùng animation thay cho transition cũ (transition cũ không chạy được ở slide đầu vì đã is-active sẵn) */
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__card { transition: none; }
	.sa-hero.anim-fadeInUp:not(.is-builder) .sa-hero__slide.is-active .sa-hero__card { animation: sa-hero-in-up 1.1s var(--sa-anim-ease, ease) 0.2s both; }
	.sa-hero.anim-fadeInLeft:not(.is-builder) .sa-hero__slide.is-active .sa-hero__card { animation: sa-hero-in-left 1.1s var(--sa-anim-ease, ease) 0.2s both; }
	.sa-hero.anim-fadeInRight:not(.is-builder) .sa-hero__slide.is-active .sa-hero__card { animation: sa-hero-in-right 1.1s var(--sa-anim-ease, ease) 0.2s both; }
	.sa-hero.anim-fadeIn:not(.is-builder) .sa-hero__slide.is-active .sa-hero__card { animation: sa-hero-in-fade 1.15s ease 0.2s both; }

	/* chữ trong thẻ hiện lần lượt sau khi thẻ đã nổi lên */
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__slide.is-active .sa-hero__title   { animation: sa-hero-in-line 0.9s var(--sa-anim-ease, ease) 0.6s both; }
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__slide.is-active .sa-hero__text    { animation: sa-hero-in-line 0.9s var(--sa-anim-ease, ease) 0.78s both; }
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__slide.is-active .sa-hero__actions { animation: sa-hero-in-line 0.9s var(--sa-anim-ease, ease) 0.96s both; }

	/* ảnh nền (không áp dụng cho video): phóng to nhẹ rồi lùi về trong lúc slide hiện */
	.sa-hero.has-zoom:not(.is-builder) .sa-hero__slide.is-active:not(.is-video) .sa-hero__img { animation: sa-hero-zoom 8s ease-out both; }

	/* bullet + mũi tên hiện sau cùng */
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__dots,
	.sa-hero:not(.anim-none):not(.is-builder) .sa-hero__arrow { animation: sa-hero-in-fade 0.9s ease 1.3s both; }
}


/* ==========================================================================
   Chi tiết đi kèm (chạy cùng hiệu ứng của khối chứa)
   ========================================================================== */

/* Gạch vàng dưới tiêu đề "vẽ" dần từ trái sang sau khi chữ hiện */
.sa-anim-ready [data-sa-animate] .sa-heading__bar,
.sa-anim-ready [data-sa-animate="bar"] {
	transition: transform 1s var(--sa-anim-ease) calc(var(--sa-d, 0ms) + 340ms);
}
.sa-anim-ready [data-sa-animate]:not(.is-in) .sa-heading__bar,
.sa-anim-ready [data-sa-animate="bar"]:not(.is-in) { transform: scaleX(0); transform-origin: left center; }
.sa-anim-ready .text-center[data-sa-animate]:not(.is-in) .sa-heading__bar { transform-origin: center; }
.sa-anim-ready [data-sa-animate="bar"] { opacity: 1 !important; }
.sa-anim-ready [data-sa-animate="bar"]:not(.is-in) { opacity: 1; }

/* Đường nối timeline "vẽ" ra: ngang → từ trái sang; dọc → từ trên xuống */
.sa-anim-ready .sa-timeline[data-sa-animate="draw"] { opacity: 1; }
.sa-anim-ready .sa-timeline[data-sa-animate="draw"]::before { transition: transform 1.6s var(--sa-anim-ease) var(--sa-d, 0ms); }
.sa-anim-ready .sa-timeline[data-sa-animate="draw"]:not(.is-in)::before { transform: scaleX(0); transform-origin: left center; }
@media (max-width: 849px) {
	.sa-anim-ready .sa-timeline[data-sa-animate="draw"]:not(.is-in)::before { transform: scaleY(0); transform-origin: center top; }
}
.sa-anim-ready .sa-timeline.layout-vertical[data-sa-animate="draw"]:not(.is-in)::before { transform: scaleY(0); transform-origin: center top; }

/* (Đã bỏ hiệu ứng ảnh trong thẻ phóng to 1.14 → 1: đo bằng Chrome thật, riêng nó chiếm ~½ tổng độ giật lúc item hiện ra vì ảnh lớn bị
   lấy mẫu lại mỗi khung hình; thẻ chỉ còn mờ + trượt lên — chỉ opacity/transform, chạy trên GPU.) */

/* Banner đầu trang (trang con): ảnh nền lùi từ phóng to nhẹ, chạy ngay khi mở trang */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sa-ph-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
	.sa-page-hero__img { animation: sa-ph-zoom 2s var(--sa-anim-ease, ease) both; }

	/* Header: logo rồi từng mục menu hiện lần lượt khi mở trang */
	@keyframes sa-hdr-in { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }
	.header-main #logo { animation: sa-hdr-in 0.9s var(--sa-anim-ease, ease) 0.1s both; }
	.header-nav-main > li { animation: sa-hdr-in 0.9s var(--sa-anim-ease, ease) both; }
	.header-nav-main > li:nth-child(1) { animation-delay: 0.2s; }
	.header-nav-main > li:nth-child(2) { animation-delay: 0.3s; }
	.header-nav-main > li:nth-child(3) { animation-delay: 0.4s; }
	.header-nav-main > li:nth-child(4) { animation-delay: 0.5s; }
	.header-nav-main > li:nth-child(5) { animation-delay: 0.6s; }
	.header-nav-main > li:nth-child(6) { animation-delay: 0.7s; }
	.header-nav-main > li:nth-child(n+7) { animation-delay: 0.8s; }
}