/*
 * Chuyen dong / hieu ung cho trang tich diem (di kem assets/js/site-motion.js).
 * Chi animate transform/opacity. Trang thai "an truoc khi hien" chi ap khi JS da gan class .motion
 * len <html> -> JS loi thi noi dung van hien day du. Tat het khi may bat "giam chuyen dong".
 */
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-card { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes sweep { 0% { transform: translateX(-110%); } 22%, 100% { transform: translateX(110%); } }
@keyframes drift { from { transform: translate(0, 0) rotate(var(--r0, 0deg)); } to { transform: translate(var(--dx, 12px), var(--dy, 18px)) rotate(var(--r1, 14deg)); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bump { 0%, 100% { transform: none; } 40% { transform: scale(1.18); } }
@keyframes dot-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: none; } }
@keyframes stripes { to { background-position: 28px 0; } }
@keyframes dock-in { from { transform: translateY(120%); } to { transform: none; } }
@keyframes ring { 0%, 8%, 100% { transform: none; } 2%, 6% { transform: rotate(-14deg); } 4% { transform: rotate(14deg); } }

/* ---------- Hero: xuat hien theo nhip khi tai trang ---------- */
.hero { isolation: isolate; }
.hero-copy > * { animation: rise .6s var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; }
.hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; }
/* anh chuong trinh (desktop): hien xong thi bong nhe */
.hero-copy > .hero-art { animation: rise .6s .24s var(--ease-out) both, float 7s 1.2s ease-in-out infinite; }
.card { position: relative; animation: rise-card .7s .1s var(--ease-out) both; }

/* chu "nhan qua": vet sang luot qua dinh ky */
.hero-title em {
  /* gradient rong gap 3 chu, 2 dau la mau dac -> vi tri 100% va 0% deu la vang dam, vet sang chi o giua */
  background: linear-gradient(100deg, var(--gold-ink) 44%, #d9b45c 50%, var(--gold-ink) 56%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s 1.2s ease-in-out infinite;
}

/* la tra troi cham phia sau, chi trang tri */
.hero-leaves { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-leaves svg { position: absolute; width: 56px; height: 56px; color: var(--forest-2); opacity: .14; animation: drift 11s ease-in-out infinite alternate; }
.hero-leaves svg:nth-child(1) { top: 6%; right: 4%; --dx: -14px; --dy: 22px; --r0: -20deg; --r1: 8deg; }
.hero-leaves svg:nth-child(2) { top: 44%; left: -10px; width: 40px; height: 40px; color: var(--gold); opacity: .3; animation-duration: 9s; --dx: 16px; --dy: -18px; --r0: 30deg; --r1: 60deg; }
.hero-leaves svg:nth-child(3) { bottom: 4%; right: 38%; width: 34px; height: 34px; animation-duration: 13s; --dx: 20px; --dy: -12px; --r0: 110deg; --r1: 140deg; }

/* ---------- The tich diem ---------- */
.card-head > * { position: relative; z-index: 1; }
.card-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  transform: translateX(-110%); animation: sweep 7s 1.4s ease-in-out infinite;
}

/* gach chan tab truot sang tab dang chon (trinh duyet khong ho tro :has thi dung vien tung tab) */
@supports selector(:has(a)) {
  .td-tabs { position: relative; }
  .td-tabs::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 50%; height: 3px; border-radius: 3px;
    background: var(--gold); transition: transform .3s var(--ease-out);
  }
  .td-tabs:has(#td-tab-kiem[aria-selected="true"])::after { transform: translateX(100%); }
  .td-tab[aria-selected="true"] { border-bottom-color: transparent; }
}
.td-pane:not([hidden]) { animation: fade-in .3s var(--ease-out); }
.td-field label { transition: color .2s ease; }
.td-field:focus-within label { color: var(--forest-2); }

/* nut: noi nhe khi re chuot, xoay vong khi dang gui */
.td-btn { position: relative; overflow: hidden; transition: background-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.td-btn:disabled::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite;
}

.result-message.success, .result-message.error { animation: fade-in .3s var(--ease-out); }
.result-message.error { animation: fade-in .3s var(--ease-out), shake .4s .05s ease-in-out; }

.td-progress:not([hidden]) { animation: pop-in .45s var(--ease-spring); }
.td-points-wrap.is-bump .td-points { display: inline-block; animation: bump .5s var(--ease-spring); }
.td-bar span { position: relative; transition: width .9s var(--ease-out) .15s; }
/* soc chay nhe tren thanh tien do */
.td-bar span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 7px, transparent 7px 14px);
  animation: stripes 1.2s linear infinite;
}

/* phao giay khi tich diem thanh cong (span do site-motion.js tao) */
.confetti { position: absolute; z-index: 5; width: 8px; height: 8px; pointer-events: none; border-radius: 2px; }
.confetti.leaf { width: 10px; height: 10px; border-radius: 0 60% 0 60%; }

/* ---------- Moc qua ---------- */
.td-gift.is-ok::before { animation: dot-pop .5s calc(var(--k, 0) * 90ms) var(--ease-spring) both; }
.td-gift.is-ok .td-gift-name::after { animation: pop-in .4s calc(var(--k, 0) * 90ms + .1s) var(--ease-out) both; }
.td-gift { transition: border-color .2s ease, background-color .2s ease, transform .25s var(--ease-out), box-shadow .25s ease; }
.td-gift img { transition: transform .35s var(--ease-out); }
.motion .ladder::before { transform-origin: top; transform: scaleY(0); transition: transform 1.1s var(--ease-out) .15s; }
.motion .ladder.is-drawn::before { transform: none; }

.steps svg { transition: transform .3s var(--ease-spring); }
.faq details[open] > :not(summary) { animation: fade-in .3s var(--ease-out); }
.faq summary { transition: background-color .2s ease; border-radius: 14px; }

.top { transition: box-shadow .25s ease; }
.top.is-scrolled { box-shadow: 0 6px 20px rgba(23, 61, 42, .08); }

.dock { animation: dock-in .5s .7s var(--ease-out) both; }
.dock-call svg { animation: ring 5s 2.5s ease-in-out infinite; transform-origin: 50% 50%; }

/* ---------- Hien dan khi cuon toi ---------- */
.motion .reveal { opacity: 0; transform: translateY(26px); }
.motion .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* hover chi tren may co chuot (dien thoai cham vao khong bi ket trang thai hover) */
@media (hover: hover) {
  .td-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23, 61, 42, .22); }
  .td-gift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .td-gift:hover img { transform: scale(1.04); }
  .steps li:hover svg { transform: rotate(-8deg) scale(1.08); }
  .faq summary:hover { background: var(--leaf); }
}

@media (min-width: 768px) {
  .motion .ladder::before { transform-origin: left; transform: scaleX(0); }
  .motion .ladder.is-drawn::before { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .hero-leaves { display: none; }
  .hero-title em { background: none; color: var(--gold-ink); }
}