/* VSW-HU · Hieu ung hien dan khi cuon + vao trang + vi tuong tac (Q67, 25/09) */

/* ---- 1) He thong hien dan: 6 kieu data-hu. Chi doi opacity/transform/filter/clip-path.
   Moi quy tac chi song khi html.vs-hu VA phan tu chua xong (:not(.vs-hu-xong)). hieu-ung.js gan
   vs-hu-xong khi phan tu hien xong (het thoi luong + do tre cua chinh no) => tu do phan tu ve y
   het ban goc (transition rieng, hover nhac the, transform rieng). Trang thai cuoi KHONG ep
   opacity/transform: phan tu chuyen ve gia tri goc cua no, nen luc go lop khong giat. Rieng "anh"
   giu clip-path bo goc dung bang bo goc that cua khung (.kg-anh bo --vs-bo-vua + overflow hidden). ---- */
html.vs-hu [data-hu]:not(.vs-hu-xong) {
  transition-property: opacity, transform;
  transition-duration: var(--vs-hu-t);
  transition-timing-function: var(--vs-ease);
  transition-delay: calc(var(--hu-i, 0) * var(--vs-hu-so-le));
}
html.vs-hu [data-hu="lam-ro"]:not(.vs-hu-xong) { transition-property: opacity, filter, transform; }
html.vs-hu [data-hu="anh"]:not(.vs-hu-xong) { transition-property: opacity, clip-path, transform; transition-duration: var(--vs-hu-t-anh); }
html.vs-hu [data-hu="net"]:not(.vs-hu-xong) { transition-property: transform; transition-duration: var(--vs-hu-t-net); transform-origin: left; }
html.vs-hu [data-hu="thu"]:not(.vs-hu-xong) { transition-duration: var(--vs-hu-t-thu); }
html.vs-hu [data-hu="mo"]:not(.vs-hu-xong) { transition-property: opacity; transition-duration: var(--vs-hu-t-mo); }
/* Man dau luc tai trang (JS gan vs-hu-dau cho dot hien dau tien): chay ngan hon de noi dung dau
   trang (thuong la LCP) ro som hon; do tre so le giu nguyen. */
html.vs-hu .vs-hu-dau[data-hu]:not([data-hu="mo"]):not(.vs-hu-xong) { transition-duration: var(--vs-hu-t-dau); }

html.vs-hu [data-hu="len"]:not(.vs-hien) { opacity: 0; transform: translateY(var(--vs-hu-doi)); }
html.vs-hu [data-hu="lam-ro"]:not(.vs-hien) { opacity: 0; filter: blur(var(--vs-hu-mo)); transform: translateY(8px); }
html.vs-hu [data-hu="anh"]:not(.vs-hien) { opacity: 0; clip-path: inset(6% round var(--vs-bo-vua)); transform: scale(var(--vs-hu-anh-ty-le)); }
html.vs-hu [data-hu="anh"].vs-hien:not(.vs-hu-xong) { clip-path: inset(0 round var(--vs-bo-vua)); }
html.vs-hu [data-hu="net"]:not(.vs-hien) { transform: scaleX(0); }
html.vs-hu [data-hu="thu"]:not(.vs-hien) { opacity: 0; transform: scale(var(--vs-hu-thu-ty-le)); }
/* "mo": chi mo -> ro, cho TAM NEN chua chu (dau trang con) - khong truot de khong cong don voi chu ben trong */
html.vs-hu [data-hu="mo"]:not(.vs-hien) { opacity: 0; }

@media (max-width: 767px) {
  html.vs-hu [data-hu="len"]:not(.vs-hien) { transform: translateY(var(--vs-hu-doi-nho)); }
  html.vs-hu [data-hu="lam-ro"]:not(.vs-hien) { transform: translateY(6px); }
  html.vs-hu [data-hu="anh"]:not(.vs-hien) { clip-path: inset(3% round var(--vs-bo-vua)); }
}

/* ---- 2) Moc thoi gian Loi chao: duong ke dan truoc, cham moc hien dung luc dau duong vua toi.
   Duong chay deu (linear) --vs-hu-t-net; moc thu i bat dau o i x --vs-hu-so-le-moc + --vs-hu-moc-lech.
   May tinh: 1 duong ngang tren .lc-moc-ds (5 cot deu => dau duong toi cham i o (2i+1)/10 thoi luong).
   Duoi 1024px: moi .lc-moc-buoc co 1 doan doc noi xuong moc sau, doan i ve cung luc moc i hien va
   ve xong dung luc moc i+1 hien => nhin nhu 1 duong ve lien tu tren xuong. ---- */
html.vs-hu .lc-moc-ds > [data-hu]:not(.vs-hu-xong) {
  transition-delay: calc(var(--hu-i, 0) * var(--vs-hu-so-le-moc) + var(--vs-hu-moc-lech));
}
@media (min-width: 1024px) {
  html.vs-hu .lc-moc-ds:not(.vs-hu-nhom-xong)::before { transform: scaleX(0); transform-origin: left; transition: transform var(--vs-hu-t-net) linear; }
  html.vs-hu .lc-moc-ds.vs-hien-nhom:not(.vs-hu-nhom-xong)::before { transform: none; }
}
@media (max-width: 1023px) {
  html.vs-hu .lc-moc-buoc:not(.vs-hu-xong)::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--vs-hu-so-le-moc) linear calc(var(--hu-i, 0) * var(--vs-hu-so-le-moc) + var(--vs-hu-moc-lech));
  }
  html.vs-hu .lc-moc-buoc.vs-hien:not(.vs-hu-xong)::before { transform: none; }
}

/* ---- 3) Ep hien het, khong hieu ung: reduced-motion (bat giua phien) + in. Chi dung vao phan tu
   con dang trong he hien dan - phan tu da xong giu nguyen transform/hover rieng nhu ban goc. ---- */
@media (prefers-reduced-motion: reduce), print {
  html.vs-hu [data-hu]:not(.vs-hu-xong) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  html.vs-hu .lc-moc-ds:not(.vs-hu-nhom-xong)::before, html.vs-hu .lc-moc-buoc:not(.vs-hu-xong)::before { transform: none !important; transition: none !important; }
  .vs-tien-do { display: none !important; }
}

/* ---- 4) Hero: lang nhe luc vao trang (KHONG dung [data-hu], opacity giu 1 suot) ---- */
@keyframes vs-hero-len { from { transform: translateY(14px); } to { transform: translateY(0); } }
@keyframes vs-hero-logo { from { transform: scale(.985); } to { transform: scale(1); } }
html.vs-hu .hero-noi-dung > * { animation: vs-hero-len 900ms var(--vs-ease) backwards; }
html.vs-hu .hero-logo { animation: vs-hero-logo 900ms var(--vs-ease) backwards; }
html.vs-hu .hero-noi-dung > *:nth-child(1) { animation-delay: 0ms; }
html.vs-hu .hero-noi-dung > *:nth-child(2) { animation-delay: 80ms; }
html.vs-hu .hero-noi-dung > *:nth-child(3) { animation-delay: 160ms; }
html.vs-hu .hero-noi-dung > *:nth-child(4) { animation-delay: 240ms; }
html.vs-hu .hero-noi-dung > *:nth-child(n+5) { animation-delay: 320ms; }
@media (max-width: 767px) {
  @keyframes vs-hero-len { from { transform: translateY(8px); } to { transform: translateY(0); } }
}

/* ---- 5) Vi tuong tac D ---- */
/* D1: quang sang bam con tro tren the lon (chi chuot that, JS ghi --hu-mx/--hu-my).
   Ve bang background-image ngay tren the (khong dung pseudo/overflow) de quang nam
   DUOI noi dung nhu nen thuong, khong de len chu va khong cat vong focus ben trong. */
@media (hover: hover) and (pointer: fine) {
  .ntt-the.vs-the--vien:hover, .kg-gioi-thieu.vs-the:hover,
  .ntt-the.vs-the--vien:focus-within, .kg-gioi-thieu.vs-the:focus-within {
    background-image: radial-gradient(220px circle at var(--hu-mx, 50%) var(--hu-my, 50%), var(--vs-hu-quang-mau), transparent 70%);
  }
}

/* D2: gach chan chay tu trai o menu dau trang - CHI menu ngang may tinh
   (header.css chuyen .hd-lien-ket thanh hang doc co vien duoi rieng tu 1023px
   tro xuong). Bo qua muc dang chon [aria-current] - muc do da co border-bottom
   2px teal tinh san, them ::after se chong thanh vach day. */
@media (min-width: 1024px) {
  .hd-lien-ket:not([aria-current]) { position: relative; }
  .hd-lien-ket:not([aria-current])::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--vs-teal); transform: scaleX(0); transform-origin: left;
    transition: transform 200ms var(--vs-ease);
  }
  .hd-lien-ket:not([aria-current]):hover::after, .hd-lien-ket:not([aria-current]):focus-visible::after { transform: scaleX(1); }
}

/* D3: nut tron phong nhe khi hover */
.vs-nut-tron {
  transition: background-color var(--vs-t-nhanh) var(--vs-ease), border-color var(--vs-t-nhanh) var(--vs-ease),
    color var(--vs-t-nhanh) var(--vs-ease), transform var(--vs-t-nhanh) var(--vs-ease);
}
.vs-nut-tron:not(:disabled):not([aria-disabled="true"]):hover { transform: scale(1.06); }

/* D4: logo dau/chan trang phong nhe khi hover */
.hd-logo-anh, .ft-logo-anh { transition: transform var(--vs-t-nhanh) var(--vs-ease); }
.hd-logo:hover .hd-logo-anh, .ft-logo:hover .ft-logo-anh { transform: scale(1.03); }

/* D5: popup tai tro mo/dong mem (@starting-style, bo qua em o trinh duyet chua ho tro).
   CHI khi JS cua khoi da nhan dialog (.ttcs--js do tai-tro-chinh-sach.js gan): khong JS hoac JS
   khoi loi thi dialog hien thanh khoi thuong nhu ban goc, khong bi opacity 0 nuot mat noi dung.
   Trang thai dong (:not([open])) mo + thu nho; mo ([open]) ve gia tri goc cua dialog.
   Transition chi bat khi html.vs-hu-san (hieu-ung.js gan sau DOMContentLoaded): luc JS khoi gan
   .ttcs--js, dialog dang hien kieu khoi thuong phai tat ngay, khong duoc mo dan giua man hinh. */
@supports (transition-behavior: allow-discrete) {
  html.vs-hu-san .ttcs--js dialog.ttcs-popup {
    transition: opacity 200ms var(--vs-ease), transform 200ms var(--vs-ease), overlay 200ms allow-discrete, display 200ms allow-discrete;
  }
  .ttcs--js dialog.ttcs-popup:not([open]) { opacity: 0; transform: scale(.97); }
  @starting-style { .ttcs--js dialog.ttcs-popup[open] { opacity: 0; transform: scale(.97); } }
  html.vs-hu-san .ttcs--js dialog.ttcs-popup::backdrop { transition: opacity 200ms var(--vs-ease), overlay 200ms allow-discrete, display 200ms allow-discrete; }
  .ttcs--js dialog.ttcs-popup:not([open])::backdrop { opacity: 0; }
  @starting-style { .ttcs--js dialog.ttcs-popup[open]::backdrop { opacity: 0; } }
}

/* D6: nut +/- chon ve nhan xuong nhe (lop that: dkv-ve-giam / dkv-ve-tang) */
.dkv-ve-giam:active, .dkv-ve-tang:active { transform: scale(.94); transition: transform 100ms var(--vs-ease); }

/* D7: nut dieu khien bang tin tuc nhan xuong nhe (bo qua khi dang disabled - vd nut lui o the dau) */
[data-bang-lui]:not(:disabled):not([aria-disabled="true"]):active,
[data-bang-toi]:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.94); transition: transform 100ms var(--vs-ease); }

/* D8: thanh tab doi mau mem thay vi doi tuc thi (chuan bi cho khoi tuong lai) */
.vs-tab { transition: background-color 220ms var(--vs-ease), box-shadow 220ms var(--vs-ease); }

/* ---- 6) Chuyen trang (cross-fade toan trang, chi Chromium ho tro, noi khac bo qua em).
   Chi bat khi KHONG giam-chuyen-dong - dat trong media thay vi bat roi tat group,
   vi tat rieng group khong triet tieu duoc phan mo cheo old/new cua UA. ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---- 7) Thanh tien do doc (chi Chromium ho tro animation-timeline, noi khac khong hien) ---- */
@supports (animation-timeline: scroll()) {
  .vs-tien-do {
    position: fixed; inset: 0 0 auto 0; height: var(--vs-hu-tien-do-cao);
    transform-origin: left; background: var(--vs-hu-tien-do-mau); z-index: 60; pointer-events: none;
    animation: vs-tien-do-cuon auto linear; animation-timeline: scroll(root);
  }
  @keyframes vs-tien-do-cuon { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}