:root {
  --black: #000;
  --coal: #0d0c0a;
  --smoke: #8d867a;
  --ivory: #f4eedf;
  --gold: #f5c451;
  --gold-deep: #a8731b;
  --ember: #ff7a1a;
  --line: rgba(245, 196, 81, .16);

  --metal: linear-gradient(180deg, #fff6d6 0%, #f5c451 38%, #a8731b 62%, #ffe08a 82%, #7a5110 100%);

  --display: "Anton", "Impact", sans-serif;
  --body: "Be Vietnam Pro", system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Trang bio: tông bạc trung tính theo logo chrome, để banner nhiều màu đứng cạnh nhau không bị lệch tông.
   --accent là màu ánh sáng nền, đổi theo banner đang ở giữa màn hình */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #8fa3c7; }
body.bio {
  --gold: #e8ecf3;
  --gold-deep: #8a93a3;
  --ember: var(--accent);
  --line: rgba(255, 255, 255, .12);
  --metal: linear-gradient(180deg, #ffffff 0%, #d9dee7 36%, #7d8696 60%, #f2f5fa 80%, #5b6372 100%);
  --accent: #8fa3c7;
  transition: --accent 1.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font: 400 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.locked { overflow: hidden; }

/* Lớp hạt nhiễu phủ toàn trang */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.page {
  width: min(100% - 32px, 600px);
  margin: 0 auto;
  /* Chừa chỗ cho nút donate nổi ở đáy */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ---------- Màn mở đầu ----------
   Đồng xu logo hiện giữa màn hình, vòng sáng chạy kín quanh mép, rồi đồng xu xoay và bay lên
   đúng chỗ logo trên trang (app.js tính đường bay). Nền đen mờ dần cùng lúc. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Xếp dọc: đồng xu ở trên, chữ ở dưới; khoảng cách lớn hơn phần vòng sáng thò ra ngoài đồng xu (22%) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 58px;
  background:
    radial-gradient(40vmax 40vmax at 50% 46%, rgba(157, 234, 31, .1), transparent 70%),
    var(--black);
  transition: opacity .55s ease .12s;
}
.intro {
  --coin: 150px;
  position: relative;
  flex: none;
  width: var(--coin);
  height: var(--coin);
  transition: transform .7s cubic-bezier(.65, 0, .25, 1);
  will-change: transform;
}
.intro-coin {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: .55;
  transition: opacity .35s ease, scale .55s var(--ease-spring);
}
.intro-coin img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow:
    0 0 0 2px #f4f7fb,
    0 0 0 4px #7d8794,
    0 0 0 5px rgba(255, 255, 255, .5),
    0 0 46px -4px rgba(190, 240, 120, .55);
}
.intro-ring {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  rotate: -90deg;
  overflow: visible;
  transition: opacity .25s ease;
}
.intro-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 2.5; }
.intro-arc {
  fill: none;
  stroke: url(#introRing);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 578;
  stroke-dashoffset: 578;
  filter: drop-shadow(0 0 6px rgba(170, 240, 80, .8));
}
.intro-word {
  display: block;
  flex: none;
  font: 400 15px/1 var(--display);
  letter-spacing: .42em;
  margin-right: -.42em;
  color: rgba(232, 236, 243, .75);
  opacity: 0;
  translate: 0 6px;
  transition: opacity .4s ease, translate .6s var(--ease-out);
}
.loader.play .intro-coin { opacity: 1; scale: 1; }
.loader.play .intro-arc { animation: intro-arc .8s cubic-bezier(.45, 0, .2, 1) .15s forwards; }
.loader.play .intro-word { opacity: 1; translate: 0 0; transition-delay: .2s; }
@keyframes intro-arc { to { stroke-dashoffset: 0; } }
/* Bay lên: vòng sáng và chữ tắt, đồng xu xoay một vòng trong lúc bay */
.loader.fly { opacity: 0; pointer-events: none; }
.loader.fly .intro-ring,
.loader.fly .intro-word { opacity: 0; transition-delay: 0s; }
.loader.fly .intro-coin img { animation: intro-spin .7s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes intro-spin { to { transform: rotateY(360deg); } }
.loader.gone { display: none; }
/* Logo thật hiện đúng lúc đồng xu đáp xuống, nảy nhẹ thay cho lần xoay mở đầu */
.ready.intro-done .logo-coin:not(.again) {
  opacity: 1;
  animation: coin-land .5s var(--ease-spring) both;
}
@keyframes coin-land {
  0% { transform: scale(.94); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- Nền ảnh mờ ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-photo {
  position: absolute;
  left: 50%;
  top: 0;
  height: 78svh;
  width: auto;
  max-width: none;
  translate: -50% 0;
  opacity: 0;
  transition: opacity 1.6s ease .2s;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}
.ready .bg-photo { opacity: .38; }
.bg-glow {
  position: absolute;
  left: 50%;
  top: -10svh;
  width: 140vw;
  max-width: 1100px;
  aspect-ratio: 1;
  translate: -50% 0;
  background:
    radial-gradient(closest-side, rgba(255, 122, 26, .22), transparent 70%),
    radial-gradient(closest-side at 50% 42%, rgba(245, 196, 81, .2), transparent 72%);
}
/* Trang bio: hai vầng sáng trên và dưới mang màu --accent */
.bio .bg-glow {
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(closest-side at 50% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
}
.bio .bg::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30svh;
  width: 130vw;
  max-width: 1000px;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
/* Ảnh người phía sau cũng nhuốm nhẹ màu --accent.
   Nền đen cho lớp .bg để lớp nhuốm màu hòa vào ảnh, không hiện thành mảng màu phẳng */
.bio .bg { background: var(--black); }
.bio .bg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 78svh;
  z-index: 1;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  mix-blend-mode: color;
  opacity: .5;
}

/* ---------- Logo xoay ---------- */
.top {
  display: grid;
  justify-items: center;
  padding: calc(34px + env(safe-area-inset-top)) 0 0;
  text-align: center;
}
.logo { perspective: 700px; }
.views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: rgba(245, 196, 81, .08);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease, transform .8s var(--ease-out);
}
.views .ti { font-size: 16px; color: var(--gold); }

/* Liên hệ hợp tác */
.booking {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease 1.4s, transform .8s var(--ease-out) 1.4s;
}
.ready .booking { opacity: 1; transform: none; }
.booking-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  text-align: left;
  transition: background .2s, box-shadow .2s;
}
.booking-mail:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .4); }
.booking-mail .ti { font-size: 20px; color: var(--gold); }
.booking-mail span { display: grid; line-height: 1.25; min-width: 0; }
.booking-mail b { font-size: 13px; }
.booking-mail small { font-size: 12px; color: var(--smoke); overflow-wrap: anywhere; }
/* Số điện thoại không bị cắt giữa chừng, chỉ xuống dòng sau dấu / */
.booking-mail small.nobreak { overflow-wrap: normal; }
/* Hai ô liên hệ chia đôi một hàng trên điện thoại */
@media (max-width: 520px) {
  .booking { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .booking-mail { min-width: 0; padding: 9px 8px 9px 10px; gap: 7px; }
  .booking-mail .ti { font-size: 18px; flex-shrink: 0; }
  .booking-mail b { font-size: 12.5px; }
  .booking-mail small { font-size: 11.5px; }
}

.views.show { opacity: 1; transform: none; }
.views[hidden] { display: none; }
.logo-coin {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  transform-style: preserve-3d;
  opacity: 0;
}
.logo-coin img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Logo ảnh: cắt tròn, viền bạc kim loại cho hợp logo chrome */
.logo-coin .logo-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 2px #f4f7fb,
    0 0 0 4px #7d8794,
    0 0 0 5px rgba(255, 255, 255, .5),
    0 0 46px -4px rgba(170, 205, 255, .55);
}
.logo-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 50% 35%, #2a2112, #0d0c0a 70%);
  box-shadow:
    inset 0 0 0 3px #c98b22,
    inset 0 0 0 6px #0d0c0a,
    inset 0 0 0 7px rgba(245, 196, 81, .5),
    0 0 50px -6px rgba(245, 196, 81, .55);
}
.logo-face span {
  font: 400 64px/.9 var(--display);
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-face small {
  margin-top: 2px;
  font: 400 15px/1 var(--display);
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--gold);
}
/* Vệt sáng lướt qua logo */
.logo-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.logo-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 40%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .75), transparent);
  transform: skewX(-20deg);
}

/* Chuỗi: xoay như đồng xu → nảy → lướt sáng; sau đó lóe sáng định kỳ */
.ready .logo-coin {
  opacity: 1;
  animation:
    coin-spin 1.5s cubic-bezier(.2, .7, .2, 1) both,
    coin-pop .55s var(--ease-spring) 1.5s forwards;
}
.ready .logo-shine::before {
  animation:
    shine-pass .9s ease-in-out 1.95s both,
    shine-pass .9s ease-in-out 9s infinite;
}
@keyframes coin-spin {
  from { transform: rotateY(-900deg) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes coin-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes shine-pass {
  0% { left: -60%; }
  60%, 100% { left: 130%; }
}
/* Chạm vào logo thì xoay lại */
.logo-coin.again { animation: coin-spin 1.1s cubic-bezier(.2, .7, .2, 1) both; }

.top-name {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease 1.2s, transform .9s var(--ease-out) 1.2s;
}
.top-name .ti { color: var(--gold); font-size: 20px; }
.ready .top-name { opacity: 1; transform: none; }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(255, 59, 48, .14);
  color: #ff8a80;
  font-size: 12px;
  font-weight: 600;
}
.live-pill i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; }
.live-pill i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #ff3b30; animation: ping 1.6s ease-out infinite; }
.live-pill[hidden] { display: none; }

/* Nút donate chính */
.btn-donate {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe08a, #f5c451 45%, #c98b22);
  color: #1d1406;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 10px 30px -10px rgba(245, 196, 81, .7);
  transition: transform .5s var(--ease-spring), box-shadow .3s;
}
.btn-donate .ti { font-size: 20px; }
.btn-donate:active { transform: scale(.96); }
.btn-donate-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 4.5s ease-in-out 2.4s infinite;
}
@keyframes shine {
  0%, 70% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.socials { display: flex; gap: 6px; }
.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--smoke);
  font-size: 22px;
  transition: color .2s, background .2s;
}
.socials a:hover { color: var(--gold); background: rgba(245, 196, 81, .08); }


/* ---------- Các khối nội dung ---------- */
.block { padding: 56px 0 8px; }
.block-first { padding-top: 22px; }

/* Ô sắp ra mắt */
.soon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.soon-card {
  position: relative;
  min-height: 150px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #17140f, #0a0907);
  box-shadow: inset 0 0 0 1px var(--line);
}
.soon-card::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}
.soon-blur {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 16px;
  filter: blur(2px);
  opacity: .45;
}
.soon-blur .ti { font-size: 26px; color: var(--gold); margin-bottom: 6px; }
.soon-blur strong { font: 400 24px/1 var(--display); letter-spacing: .02em; }
.soon-blur span { font-size: 12px; color: var(--smoke); }
.soon-card .lock { background: rgba(10, 9, 7, .25); }
.soon-card .lock .ti { font-size: 34px; color: var(--ivory); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); }

/* Nút donate nổi */
.fab-donate {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a, #f5c451 45%, #c98b22);
  color: #1d1406;
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -6px rgba(0, 0, 0, .8), 0 0 0 6px rgba(0, 0, 0, .35);
  translate: -50% 140%;
  transition: translate .5s var(--ease-spring);
}
.bio .fab-donate {
  background: linear-gradient(180deg, color-mix(in srgb, var(--donate-tint, #a259ff) 55%, #fff), var(--donate-tint, #a259ff));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 32px -6px rgba(0, 0, 0, .8), 0 0 24px color-mix(in srgb, var(--donate-tint, #a259ff) 45%, transparent);
}
.fab-donate .ti { font-size: 19px; }
.fab-donate.show { translate: -50% 0; }
.fab-donate:active { scale: .96; }
.block-title {
  position: relative;
  isolation: isolate;
  margin: 0 0 22px;
  padding-top: clamp(44px, 13vw, 84px);
  font-size: 15px;
  font-weight: 600;
  color: var(--smoke);
}
.block-title::before {
  content: attr(data-word);
  position: absolute;
  left: -2px;
  top: -.2em;
  padding-top: .2em;
  white-space: nowrap;
  font: 400 clamp(56px, 17vw, 112px)/1.15 var(--display);
  letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(244, 238, 223, .22), rgba(244, 238, 223, 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Banner ---------- */
.banners {
  display: grid;
  gap: 30px;
}
.banner {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: relative;
  display: block;
  aspect-ratio: 4 / 1;
  border-radius: 18px;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.links-hint { margin: -14px 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--smoke); max-width: 42ch; }
.links-hint .ti { font-size: 14px; vertical-align: -2px; color: var(--ivory); }

/* Nút copy ở góc trên bên phải mỗi banner */
.banner-wrap { position: relative; }
.banner-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  font-size: 16px;
  transition: transform .3s var(--ease-spring), background .2s, color .2s;
}
.banner-copy:active { transform: scale(.9); }
.banner-copy:hover { color: var(--gold); }
.banner-copy.done { background: #2fbf71; color: #04220f; }
/* Gợi ý lần đầu */
.banner-copy.hint { animation: copy-pulse 1s ease-out 4; color: var(--gold); }
@keyframes copy-pulse {
  0% { box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .6), 0 0 0 0 rgba(245, 196, 81, .7); }
  100% { box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .6), 0 0 0 14px rgba(245, 196, 81, 0); }
}
.copy-tip {
  position: absolute;
  top: 12px;
  right: 50px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ivory);
  color: #1d1406;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: tip-in .4s var(--ease-spring);
}
.copy-tip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  translate: 0 -50%;
  border: 5px solid transparent;
  border-right: 0;
  border-left-color: var(--ivory);
}
@keyframes tip-in { from { opacity: 0; transform: translateX(6px) scale(.9); } }

/* Nhãn "Nhấn để…" treo ở mép dưới banner */
.banner-cta {
  position: absolute;
  right: 14px;
  bottom: -12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, #fff), var(--tint));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .45);
  color: var(--tint-ink, #fff);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.banner-cta .ti { font-size: 15px; color: inherit; animation: cta-nudge 1.6s var(--ease-out) infinite; }
@keyframes cta-nudge {
  0%, 55%, 100% { translate: 0 0; }
  25% { translate: 4px 0; }
}
/* Banner donate: nhãn tô đặc theo màu banner, phát sáng nhịp nhàng */
.banner-donate .banner-cta {
  bottom: -14px;
  padding: 7px 10px 7px 15px;
  font-size: 13px;
  animation: cta-glow 2s ease-in-out infinite;
}
@keyframes cta-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px rgba(0, 0, 0, .35), 0 4px 16px color-mix(in srgb, var(--tint) 45%, transparent); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 3px rgba(0, 0, 0, .35), 0 4px 26px color-mix(in srgb, var(--tint) 90%, transparent), 0 0 0 7px color-mix(in srgb, var(--tint) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .banner-cta, .banner-cta .ti { animation: none; } }

button.banner {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
/* Banner donate nổi bật hơn các banner khác */
.banner-donate .banner-art {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.banner-donate::before { opacity: .9; }
/* Vệt sáng dưới chân banner */
.banner::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14px;
  height: 28px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 80%, var(--gold)), transparent);
  opacity: .55;
  z-index: -1;
  transition: opacity .4s;
}
.banner-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  align-items: center;
  padding: 0 7%;
  background:
    radial-gradient(120% 140% at 88% 50%, color-mix(in srgb, var(--tint) 38%, transparent), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(245, 196, 81, .16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #17140f, #0a0907);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.banner-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Banner ảnh cao hơn 4:1 thì giữ đúng tỉ lệ ảnh */
.banner.banner-tall { aspect-ratio: var(--ratio); }
/* Vệt sáng lướt qua + ánh theo con trỏ */
.banner-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 240, 200, .28) 50%, transparent 60%) no-repeat,
    radial-gradient(400px circle at var(--gx) var(--gy), rgba(255, 230, 170, .14), transparent 45%);
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  pointer-events: none;
}
.banner.lit .banner-art::after {
  animation: sweep 1.1s var(--ease-out) calc(var(--i, 0) * 110ms) both;
}
@keyframes sweep {
  from { background-position: 150% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}
.banner-icon {
  position: absolute;
  right: 5%;
  top: 50%;
  font-size: clamp(64px, 20vw, 120px);
  color: color-mix(in srgb, var(--tint) 70%, white);
  opacity: .9;
  transform: translateY(-50%) rotate(-8deg);
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--tint) 60%, transparent));
  transition: transform .6s var(--ease-spring);
}
.banner-text { position: relative; display: grid; gap: 4px; max-width: 74%; }
.banner-text strong {
  font: 400 clamp(26px, 8vw, 46px)/.95 var(--display);
  padding: .18em 0 .12em;
  margin: -.18em 0 -.12em;
  white-space: nowrap;
  letter-spacing: .01em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.banner-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .35);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.banner-text em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(244, 238, 223, .72);
}

/* Banner khóa */
.banner-locked { cursor: not-allowed; }
.banner-locked .banner-art > * { filter: grayscale(.85) blur(1.5px); opacity: .45; }
.banner-locked::before { opacity: .2; }
.lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: inherit;
  background: rgba(10, 9, 7, .35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-weight: 600;
  font-size: 13px;
  color: var(--ivory);
}
.lock .ti { font-size: 30px; color: var(--gold); }

@media (hover: hover) and (pointer: fine) {
  .banner:hover::before { opacity: 1; }
  .banner:hover .banner-icon { transform: translateY(-58%) rotate(-2deg) scale(1.08); }
  .btn-donate:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 14px 40px -8px rgba(245, 196, 81, .9); }
}
.banner:not(.banner-locked):active { transform: perspective(900px) scale(.97); transition-duration: .15s; }

/* Hiện dần khi cuộn tới */
[data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .9s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].in { opacity: 1; translate: 0 0; }

/* ---------- Bảng top donate ---------- */
.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.board li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.board .rank {
  font: 400 22px/1 var(--display);
  color: var(--smoke);
  text-align: center;
}
.board li:nth-child(1) .rank { color: var(--gold); }
.board li:nth-child(1) { background: linear-gradient(90deg, rgba(245, 196, 81, .12), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--line); }
.board .who { font-weight: 600; }
.board .who small { display: block; font-weight: 400; font-size: 12.5px; color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .amt { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.note { margin: 12px 2px 0; font-size: 12.5px; color: var(--smoke); }

.foot {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 72px 0 calc(32px + env(safe-area-inset-bottom));
  color: var(--smoke);
  font-size: 12.5px;
}
.foot p { margin: 0; }

/* ---------- Khung donate ---------- */
.sheet {
  width: min(100%, 440px);
  max-width: none;
  max-height: 92svh;
  margin: auto auto 0;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #17140f, #0a0907 40%);
  box-shadow: inset 0 1px 0 rgba(245, 196, 81, .35);
  color: var(--ivory);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet[open] { animation: sheet-in .55s var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in .3s ease; }
.sheet.closing { animation: sheet-out .3s ease-in forwards; }
.sheet.closing::backdrop { animation: fade-in .3s ease reverse forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }

@media (min-width: 720px) {
  .sheet { margin: auto; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -20px rgba(0, 0, 0, .8); }
  @keyframes sheet-in { from { transform: translateY(24px) scale(.97); opacity: 0; } }
  @keyframes sheet-out { to { transform: translateY(12px) scale(.98); opacity: 0; } }
  .sheet-grip { display: none; }
}

.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); margin: -12px auto 14px; }
.sheet-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  font-size: 18px;
  display: grid;
  place-items: center;
}
.sheet h3 { margin: 0; font-size: 20px; font-weight: 700; }
.sheet-sub { margin: 4px 0 20px; color: var(--smoke); font-size: 13.5px; }

.step { display: grid; gap: 16px; }
.step[hidden] { display: none; }
.step.enter { animation: step-in .45s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } }

.field { display: grid; gap: 8px; }
.field > span { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }
.field > span em { font-style: normal; font-weight: 400; color: var(--smoke); }
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--ivory);
  font: inherit;
  font-size: 16px;
  resize: none;
  transition: box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 238, 223, .3); }

/* ---------- Tài khoản ---------- */
.acct {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.acct[hidden], .acct [hidden] { display: none !important; }
.acct-title { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; }
.acct-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.acct-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .3s var(--ease-spring), filter .2s;
}
.acct-btn .ti { font-size: 18px; }
.acct-btn:active { transform: scale(.96); }
.acct-discord { background: #5865f2; color: #fff; }
.acct-google { background: #fff; color: #1f1f1f; }
.acct-facebook { background: #1877f2; color: #fff; }
.acct-dev { background: rgba(255, 255, 255, .08); color: var(--ivory); grid-column: 1 / -1; }
.acct-note { margin: 8px 0 0; font-size: 12px; color: var(--smoke); }
.acct-hint { margin-top: 6px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.acct-in { display: flex; align-items: center; gap: 12px; }
.acct-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--coal);
  box-shadow: 0 0 0 1.5px var(--gold);
  font: 400 18px/1 var(--display);
  color: var(--gold);
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-who { flex: 1; min-width: 0; display: grid; }
.acct-who strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-who small { font-size: 12.5px; color: var(--smoke); }
.acct-who b { color: var(--gold); }
.acct-link { padding: 6px 4px; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--smoke); }
.acct-link:hover { color: var(--gold); }
.acct-rename { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.acct-rename input {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--ivory);
  font: inherit;
  font-size: 16px;
}
.acct-rename input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--gold); }
.acct-rename .btn-gold { height: 42px; padding: 0 18px; }
.acct-rename .err { grid-column: 1 / -1; }

.hint { font-size: 12px; color: var(--smoke); }
.hint b { color: var(--gold); font-weight: 600; }
.anon { display: flex; align-items: center; gap: 10px; margin-top: -6px; font-size: 13.5px; cursor: pointer; }
.anon input { width: 18px; height: 18px; accent-color: var(--gold); }

.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips button {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-weight: 700;
  transition: background .2s, box-shadow .2s, color .2s, transform .3s var(--ease-spring);
}
.chips button:active { transform: scale(.94); }
.chips button.on { background: rgba(245, 196, 81, .14); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.money { position: relative; }
.money span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--smoke); }
.money input { font-weight: 700; font-variant-numeric: tabular-nums; }
.err { color: #ff8a7a; font-size: 12.5px; min-height: 0; }
.err:empty { display: none; }
.field.bad .money input { box-shadow: inset 0 0 0 1.5px #ff8a7a; }

.btn-gold, .btn-ghost {
  height: 50px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .4s var(--ease-spring), background .2s;
}
.btn-gold { background: linear-gradient(180deg, #ffe08a, #f5c451 45%, #c98b22); color: #1d1406; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-ghost { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.btn-gold:active, .btn-ghost:active { transform: scale(.97); }
.btn-link { justify-self: center; border: 0; background: none; color: var(--smoke); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }

.qr-wrap {
  position: relative;
  justify-self: center;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(245, 196, 81, .25);
}
.qr-wrap canvas { display: block; width: 200px; height: 200px; }
.qr-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ember);
  color: #1d1406;
  font-size: 11px;
  font-weight: 700;
}
.rows { margin: 0; display: grid; gap: 2px; }
.rows > div {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 6px 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
.rows dt { color: var(--smoke); font-size: 13px; }
.rows dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows dd.code { color: var(--gold); letter-spacing: .06em; }
.rows button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--smoke);
  font-size: 18px;
  display: grid;
  place-items: center;
}
.rows button:hover { color: var(--gold); }
.qr-actions { display: grid; gap: 10px; }
.btn-gold, .btn-ghost { white-space: nowrap; }
.waiting { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--smoke); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); animation: ping 1.6s ease-out infinite; }
@keyframes ping { to { transform: scale(3); opacity: 0; } }

/* ---------- Hướng dẫn mở trình duyệt ---------- */
.iab {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: radial-gradient(circle 48px at calc(100% - 30px) 26px, transparent 0 46px, rgba(0, 0, 0, .86) 48px);
  animation: fade-in .4s ease;
}
.iab[hidden] { display: none; }
.iab-spot { position: absolute; top: 26px; right: 30px; }
.iab-spot i {
  position: absolute;
  left: -46px;
  top: -46px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: radar 2s var(--ease-out) infinite;
}
.iab-spot i + i { animation-delay: 1s; }
@keyframes radar { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.iab-finger {
  position: absolute;
  top: 70px;
  right: 22px;
  font-size: 44px;
  color: var(--ivory);
  transform-origin: 50% 0;
  animation: tap 2s var(--ease-out) infinite;
}
@keyframes tap {
  0%, 100% { transform: translate(0, 10px) rotate(-12deg); }
  40% { transform: translate(-4px, -18px) rotate(-12deg) scale(.92); }
  55% { transform: translate(-4px, -14px) rotate(-12deg); }
}
.iab-card {
  position: absolute;
  top: 150px;
  right: 16px;
  left: 16px;
  max-width: 360px;
  margin-left: auto;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #1b1710, #0d0c0a);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: step-in .6s var(--ease-out) .2s both;
}
.iab-card h3 { margin: 0; font-size: 18px; }
.iab-sub { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--smoke); }
.iab-card b { color: var(--gold); }

/* Hai cách hướng dẫn */
.iab-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.iab-tabs button {
  position: relative;
  z-index: 1;
  height: 36px;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--smoke);
  transition: color .25s;
}
.iab-tabs button[aria-selected="true"] { color: #1d1406; }
.iab-tabs-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe08a, #f5c451 50%, #d99a2b);
  transition: translate .45s var(--ease-spring);
}
.iab[data-mode="copy"] .iab-tabs-pill { translate: 100% 0; }
.iab-pane[hidden] { display: none; }
.iab-pane { animation: step-in .4s var(--ease-out); }

/* Cách 2: ẩn vòng sáng và menu, đưa thẻ lên giữa */
.iab[data-mode="copy"] { background: rgba(0, 0, 0, .86); }
.iab[data-mode="copy"] .iab-spot,
.iab[data-mode="copy"] .iab-menu,
.iab[data-mode="copy"] .iab-finger { opacity: 0; visibility: hidden; }
.iab[data-mode="copy"][data-step] .iab-card { top: 90px; }

/* Thanh địa chỉ giả lập */
.addr {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-bottom: 12px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  background: #f2f2f4;
  color: #111;
  font-size: 14px;
}
.addr .ti { font-size: 15px; color: #6b6b70; }
.addr-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #2e7bff;
  width: 0;
  max-width: max-content;
}
.addr-go {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 8px;
  background: #2e7bff;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
}
.iab[data-mode="copy"] .addr-text { animation: type-in 1.2s steps(14) .9s forwards, caret .7s step-end infinite; }
.iab[data-mode="copy"] .addr-go { animation: go-in .4s var(--ease-spring) 2.3s forwards; }
@keyframes type-in { to { width: 100%; } }
@keyframes caret { 50% { border-color: transparent; } }
@keyframes go-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.steps-copy li.done { color: var(--ivory); }
.steps-copy li.done::before { content: "✓"; background: #2fbf71; color: #04220f; }

/* Bong bóng giọng nói */
.voice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(245, 196, 81, .1);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, .3);
}
.voice[hidden] { display: none; }
.voice-avatar {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--coal);
  box-shadow: 0 0 0 1.5px var(--gold);
  font: 400 18px/1 var(--display);
  color: var(--gold);
}
.voice-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voice-avatar .ti {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  color: var(--ivory);
  font-size: 18px;
  transition: opacity .2s;
}
.voice.playing .voice-avatar .ti { opacity: 0; }
/* Chờ người xem chạm để nghe */
.voice.waiting .voice-avatar { animation: call 1.4s ease-out infinite; }
@keyframes call {
  0% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 0 rgba(245, 196, 81, .6); }
  100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 14px rgba(245, 196, 81, 0); }
}
.voice-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; }
.voice-wave i {
  flex: 1;
  height: 30%;
  border-radius: 2px;
  background: rgba(245, 196, 81, .45);
  transform-origin: center;
}
.voice.playing .voice-wave i { background: var(--gold); animation: wave .9s ease-in-out infinite alternate; }
.voice-wave i:nth-child(3n) { animation-delay: -.3s; }
.voice-wave i:nth-child(3n+1) { animation-delay: -.6s; }
.voice-wave i:nth-child(4n) { animation-duration: .7s; }
@keyframes wave { from { height: 20%; } to { height: 100%; } }
.voice-time { flex: none; min-width: 34px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Các bước, bước đang nói thì sáng lên */
.steps { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: s; }
.steps li {
  counter-increment: s;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border-radius: 12px;
  color: rgba(244, 238, 223, .55);
  transition: background .3s, color .3s, transform .4s var(--ease-spring);
}
.steps li::before {
  content: counter(s);
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  transition: background .3s, color .3s;
}
.steps li.now { background: rgba(245, 196, 81, .1); color: var(--ivory); transform: scale(1.02); }
.steps li.now::before { background: var(--gold); color: #1d1406; }

/* Menu giả lập ở bước 2 */
.iab-menu {
  position: absolute;
  top: 58px;
  right: 12px;
  width: 210px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  transition: opacity .3s, transform .4s var(--ease-out);
  pointer-events: none;
}
.iab-menu span { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; }
.iab-menu span:first-child { background: rgba(245, 196, 81, .35); box-shadow: inset 0 0 0 2px #c98b22; font-weight: 600; }
.iab-menu .ti { font-size: 18px; }
.iab[data-step="2"] .iab-menu { opacity: 1; transform: none; }
.iab[data-step="2"] .iab-spot { opacity: 0; }
.iab[data-step="2"] .iab-finger { top: 100px; right: 26px; }
.iab-spot { transition: opacity .3s; }
.iab-finger { transition: top .5s var(--ease-out), right .5s var(--ease-out); }
.iab[data-step="2"] .iab-card { top: 210px; }
.iab-card { transition: top .5s var(--ease-out); }
.iab-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }

/* ---------- Thông báo nhỏ ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 120;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ivory);
  color: #1d1406;
  font-weight: 600;
  font-size: 13.5px;
  translate: -50% 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, translate .4s var(--ease-spring);
}
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- Máy tính ---------- */
@media (min-width: 860px) {
  .top { padding-top: 56px; }
  .logo-coin { width: 156px; height: 156px; }
  .logo-face span { font-size: 76px; }
  .top-name { font-size: 26px; }
  .bg-photo { height: 92svh; }
  .soon { gap: 18px; }
  .soon-card { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}