/* Nha Khoa Ky Hoa - hieu ung dong (dung chung trang chu + 38 trang sinh tu build.py)
*
* NGUYEN TAC AN TOAN, dung sua neu chua doc het:
*
* 1. Chi giau noi dung khi co data-anim="on". Thuoc tinh do do mot doan
* script nho trong dat, va no CHI dat khi trinh duyet co
* IntersectionObserver VA nguoi dung khong bat "giam hoat anh".
* => JS hong / trinh duyet cu / nguoi dung tat hoat anh: KHONG giau gi ca.
* Day la ly do rule nao cung phai bat dau bang html[data-anim="on"].
*
* 2. Giau bang SELECTOR CAU TRUC chu khong bang class do JS gan. Neu doi JS gan
* class roi moi giau thi trang da ve xong moi bi giau -> nhay mot cai roi hien
* lai (flash). Giau ngay tu luc ve dau tien thi khong co hien tuong do.
*
* 3. KHONG dung cho hero (#top tren trang chu, .page-hero tren trang trong).
* Do la khoi tren man hinh dau, cung thuong la phan tu Google do LCP.
* Dat opacity:0 o do = tu lam cham diem toc do. Hero co hieu ung rieng ben duoi,
* chi dich chuyen chu KHONG mo dan, nen chu ve ra ngay.
*
* 4. Chi animate `opacity` va `transform`. Hai thu nay chay tren card do hoa,
* khong bat trinh duyet tinh lai bo cuc -> khong giat, khong lam xe dich trang.
*/
:root{
--kh-ease: cubic-bezier(.22,.61,.36,1);
--kh-dur: .6s;
}
/* ---------- Hien dan khi cuon toi ---------- */
/* Giau: con cua lop bao trong moi section, tru hero.
Viet `> * > *` de khop ca hai kieu markup:
trang chu
trang trong */
/* ⚠️ DUNG viet `section:not(#top)` o day. Da tra gia 30/7/2026: trang bi TRANG BOC
toan bo phan duoi hero. Ly do: trong CSS, `:not(#top)` mang do uu tien cua mot ID,
nen luat giau (co ID) luon THANG luat hien (chi co class .kh-in) -> JS gan class
dung nhung noi dung khong bao gio hien lai.
`section ~ section` = moi section TRU section dau tien (chinh la hero o ca trang chu
lan trang trong), khong dinh ID nen do uu tien thap, va neu markup doi khien no
khong khop thi hong theo huong AN TOAN: khong giau gi ca. */
html[data-anim="on"] section ~ section > * > *{
opacity: 0;
transform: translateY(16px);
}
/* Hien: JS gan .kh-in cho chinh the khi no vao tam nhin.
Phai giu nguyen tien to `section ~ section` de do uu tien cao hon luat giau. */
html[data-anim="on"] section ~ section.kh-in > * > *{
opacity: 1;
transform: none;
transition: opacity var(--kh-dur) var(--kh-ease),
transform var(--kh-dur) var(--kh-ease);
}
/* Lech nhip giua cac khoi con cho co nhip dieu. Toi da 6 bac roi dung lai -
de lau hon nua thi khoi cuoi cung hien qua tre, nguoi doc phai cho. */
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(1){ transition-delay: 0ms; }
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(2){ transition-delay: 70ms; }
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(3){ transition-delay: 140ms; }
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(4){ transition-delay: 210ms; }
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(5){ transition-delay: 280ms; }
html[data-anim="on"] section ~ section.kh-in > * > :nth-child(n+6){ transition-delay: 340ms; }
/* Khoi da nam san tren man hinh luc vua tai: hien ngay, khong dien hieu ung,
de khong tri hoan phan noi dung nguoi ta thay dau tien. */
html[data-anim="on"] section ~ section.kh-now > * > *{
opacity: 1;
transform: none;
transition: none;
}
/* ---------- Hero vao trang ---------- */
/* CHI dich chuyen, khong mo dan: chu ve ra ngay tu khung hinh dau nen khong
anh huong LCP, nhung van co cam giac "trang vua mo ra". */
@keyframes kh-rise{
from{ transform: translateY(14px); }
to { transform: none; }
}
/* PHAI viet `section#top` chu khong phai `#top`: trang chu co HAI the cung mang
id="top" ( va - loi HTML co san tu ban thiet
ke). Viet `#top > *` thi header va menu cung bi keo theo. */
html[data-anim="on"] section#top > *,
html[data-anim="on"] .page-hero > *{
animation: kh-rise .55s var(--kh-ease) both;
}
/* ---------- Ton trong lua chon cua nguoi dung ---------- */
/* Nguoi bat "giam hoat anh" trong he dieu hanh (hoac bi say chuyen dong):
tra lai trang thai tinh hoan toan. Doan script trong von da khong bat
data-anim trong truong hop nay - day la lop chan thu hai, phong khi nguoi dung
doi cai dat GIUA CHUNG luc dang mo trang. */
@media (prefers-reduced-motion: reduce){
html[data-anim="on"] section ~ section > * > *,
html[data-anim="on"] section ~ section.kh-in > * > *{
opacity: 1;
transform: none;
transition: none;
}
html[data-anim="on"] section#top > *,
html[data-anim="on"] .page-hero > *{
animation: none;
}
html{ scroll-behavior: auto; }
}