/* =====================================================================
   VTPay — "Loa Báo Tiền"
   Chiếc loa báo tiền ở quầy hàng: nhựa cam mờ, lưới lỗ loa, LED chấm.
   Quy ước màu: cam = tín hiệu / hành động chính, cobalt = tiền và tài khoản,
   mực đen = chữ, lưới loa, trạng thái bị giữ.
   ===================================================================== */

:root {
  --ground: #E9EAEE;
  --plate: #F6F7F9;
  --plate-2: #DCDEE5;
  --slot: #FBFBFC;
  --line: #C4C7D0;
  --ink: #14161A;
  --surface: #FFFFFF;
  --panel: #14161A;
  --on-ink: #FFFFFF;
  --ink-2: #383D48;
  --ink-3: #586070;
  --orange: #2F6BFF;
  --orange-deep: #1F4FD1;
  --orange-face: #2458E6;
  --cobalt: #2450F5;
  --led-amber: #6FB2FF;
  --led-blue: #86A6FF;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-text: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Barlow Condensed', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-led: 'Baloo 2', 'Bricolage Grotesque', system-ui, sans-serif;

  /* Co giãn theo màn hình: laptop ~1200–1240px như trước, màn 1920px rộng ~1560px, trần 1560px cho màn 2K/4K. */
  /* Trang trải sát hai mép (chủ dự án yêu cầu 2026-10-15): không giới hạn bề ngang, chỉ chừa lề nhỏ. */
  --wrap: 100%;
  --gutter: clamp(14px, 1.6vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scrollbar-color: var(--ink-3) var(--ground);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip; /* trang sát mép: phần trang trí lấn ra lề không tạo thanh cuộn ngang */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
svg, canvas { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--orange); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
input { caret-color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- biểu tượng SVG: một nét, một độ dày ---- */
.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-fill { fill: currentColor; stroke: none; }
.ic-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-left: 0.15em; }
.ic-brand { width: 20px; height: 20px; flex: none; }

/* =====================================================================
   Nút: phím nhựa nổi
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--plate);
  color: var(--ink);
  font: 600 15px/1.1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s, color 0.18s;
}

.btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; border-radius: 16px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }

.btn-primary {
  background: var(--orange);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 6px -2px rgba(140, 30, 0, 0.42),
    0 10px 18px -10px rgba(20, 22, 26, 0.6),
    0 2px 4px rgba(20, 22, 26, 0.16);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 6px -2px rgba(140, 30, 0, 0.42), 0 16px 22px -10px rgba(20, 22, 26, 0.65), 0 3px 6px rgba(20, 22, 26, 0.18); }
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(140, 30, 0, 0.45), 0 2px 4px rgba(20, 22, 26, 0.16); }

.btn-outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--plate); transform: translateY(-1px); }
.btn-outline:active { transform: translateY(1px); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(20, 22, 26, 0.07); }

.btn-ink {
  background: var(--ink);
  color: var(--plate);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 -4px 6px -2px rgba(0, 0, 0, 0.6), 0 8px 14px -8px rgba(20, 22, 26, 0.7);
}
.btn-ink:hover { transform: translateY(-2px); background: #23272E; }
.btn-ink:active { transform: translateY(1px); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =====================================================================
   Đầu trang
   ===================================================================== */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ground);
  transition: box-shadow 0.25s var(--ease-out);
}
.bar.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 24px -18px rgba(20, 22, 26, 0.5); }

.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.bar-actions { display: flex; align-items: center; gap: 8px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 1.4rem/1 var(--font-display);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
}
.mark { width: 36px; height: 36px; flex: none; border-radius: 10px; box-shadow: 0 6px 10px -6px rgba(20, 22, 26, 0.5); }
.logo-foot { color: var(--plate); }
.mark-led { animation: beat-led 5s linear infinite; }

/* trạng thái đã đăng nhập (auth.js) */
.user-bar { display: flex; align-items: center; gap: 14px; }
.icon-btn-group { display: flex; gap: 8px; }
.icon-btn-group, .user-menu { position: relative; }

.icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--plate);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 5px -1px rgba(20, 22, 26, 0.14), 0 6px 12px -8px rgba(20, 22, 26, 0.45);
  transition: transform 0.18s var(--ease-out), background-color 0.18s;
}
.icon-btn:hover { transform: translateY(-1px); background: var(--surface); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn[aria-expanded="true"] { background: var(--ink); color: var(--plate); }

.header-divider { width: 1px; height: 26px; background: var(--line); }

.avatar-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 1.05rem/1 var(--font-display);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 5px -1px rgba(20, 22, 26, 0.26), 0 6px 12px -8px rgba(20, 22, 26, 0.55);
  transition: transform 0.18s var(--ease-out);
}
.avatar-btn:hover { transform: translateY(-1px); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  padding: 16px;
  border-radius: 20px;
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--line), 0 28px 40px -20px rgba(20, 22, 26, 0.55), 0 4px 10px rgba(20, 22, 26, 0.1);
  z-index: 70;
  transform-origin: top right;
  animation: pop-in 0.28s var(--ease-out);
}
.dropdown-title { font: 700 1.05rem/1.2 var(--font-display); letter-spacing: -0.02em; margin-bottom: 10px; }
.dropdown-empty { font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); padding: 10px 0 4px; }
.dropdown-email { font-size: 0.92rem; color: var(--ink-2); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); word-break: break-all; }
.dropdown-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}
.dropdown-item:hover { background: var(--plate-2); }

/* =====================================================================
   Loa báo tiền (thiết bị) — kích thước tính theo cqw của chính nó
   ===================================================================== */
.loa { position: relative; width: 100%; max-width: clamp(720px, 44vw, 880px); margin-inline: auto; container-type: inline-size; }
.loa::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4.2cqw;
  height: 5cqw;
  background: radial-gradient(closest-side, rgba(20, 22, 26, 0.34), transparent);
  z-index: -1;
}

.loa-shell {
  position: relative;
  padding: 5cqw;
  aspect-ratio: 100 / 70;
  border-radius: 8cqw;
  background: var(--orange);
  box-shadow:
    inset 0 0.7cqw 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.8cqw 2.6cqw rgba(140, 30, 0, 0.3),
    inset 0 0 0 0.25cqw rgba(140, 30, 0, 0.28),
    0 3cqw 4.4cqw -1.2cqw rgba(20, 22, 26, 0.32),
    0 0.8cqw 1.4cqw rgba(20, 22, 26, 0.18);
}

.loa-face {
  position: absolute;
  left: 5cqw;
  top: 5cqw;
  bottom: 5cqw;
  width: 63cqw;
  border-radius: 5.5cqw;
  background: var(--orange-face);
  overflow: hidden;
  box-shadow: 0 0.5cqw 0 rgba(255, 255, 255, 0.3);
}
.loa-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0.8cqw 1.6cqw rgba(110, 24, 0, 0.5), inset 0 -0.4cqw 0 rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.loa-grille { position: absolute; inset: 0; width: 100%; height: 100%; --dot: #3A1608; --dot-lit: #FFE9D2; }

.loa-panel {
  position: absolute;
  right: 5cqw;
  top: 5cqw;
  bottom: 5cqw;
  width: 21.5cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqw;
}

.loa-led {
  position: relative;
  flex: none;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: #8A2200;
  box-shadow: inset 0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.55), 0 0.3cqw 0 rgba(255, 255, 255, 0.35);
}
.loa-led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF, #FFD9A8 45%, #6FB2FF 100%);
  animation: beat-led 5s linear infinite;
}

.loa-display {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 8.6cqw;
  border-radius: 1.8cqw;
  background: radial-gradient(circle at 50% 15%, #15263F 0%, #0C1524 55%, #050A10 100%);
  display: grid;
  place-items: center;
  padding: 0.8cqw 1cqw;
  font: 800 4.6cqw/1 var(--font-led);
  letter-spacing: 0.03em;
  color: #7DD3FC;
  box-shadow: inset 0 0.5cqw 1.2cqw rgba(0, 0, 0, 0.9), inset 0 0 1.2cqw rgba(56, 189, 248, 0.25), 0 0.4cqw 0 rgba(255, 255, 255, 0.34);
}
.loa-display::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 1.6cqw 1.6cqw 50% 50%;
  pointer-events: none;
}
.led-digits {
  background: linear-gradient(180deg, #FFFFFF 0%, #BAE6FD 25%, #38BDF8 65%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.8cqw rgba(56, 189, 248, 0.85)) drop-shadow(0 0.2cqw 0.4cqw rgba(2, 132, 199, 0.6));
  animation: beat-display 5s linear infinite;
}

.loa-keys { display: flex; gap: 1.5cqw; }
.loa-key {
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #FF7A45;
  box-shadow: inset 0 0.4cqw 0 rgba(255, 255, 255, 0.5), inset 0 -0.7cqw 0.9cqw -0.3cqw rgba(140, 30, 0, 0.42), 0 0.7cqw 1cqw -0.4cqw rgba(20, 22, 26, 0.5);
}
.loa-key .ic { width: 55%; height: 55%; stroke-width: 2.2; }

.loa-plate {
  position: relative;
  margin-top: auto;
  width: 100%;
  aspect-ratio: 1;
  padding: 1.8cqw;
  border-radius: 2cqw;
  background: var(--plate);
  color: var(--ink);
  overflow: hidden;
  box-shadow: inset 0 0 0 0.25cqw rgba(20, 22, 26, 0.16), 0 0.4cqw 0 rgba(255, 255, 255, 0.4);
}
.qr { width: 100%; height: 100%; }
.qr-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  height: 0.7cqw;
  background: var(--orange);
  animation: scan 2.6s ease-in-out infinite alternate;
}

.loa-feet { display: flex; justify-content: space-between; padding-inline: 13cqw; margin-top: -0.4cqw; position: relative; z-index: -1; }
.loa-feet::before, .loa-feet::after { content: ""; width: 13cqw; height: 2.2cqw; background: var(--ink); border-radius: 0 0 1.4cqw 1.4cqw; }

.loa-chip {
  position: absolute;
  right: -3.5cqw;
  top: -6cqw;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 1.5cqw 3cqw 1.5cqw 1.5cqw;
  border-radius: 99px;
  background: var(--plate);
  color: var(--ink);
  transform-origin: 100% 100%;
  box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.9), 0 2cqw 3.4cqw -1.2cqw rgba(20, 22, 26, 0.45), 0 0.4cqw 1cqw rgba(20, 22, 26, 0.16);
  animation: beat-chip 5s linear infinite;
}
.chip-ico { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--orange); display: grid; place-items: center; }
.chip-ico .ic { width: 56%; height: 56%; }
.chip-lines { display: grid; gap: 1cqw; }
.chip-lines i { display: block; height: 1.2cqw; border-radius: 1cqw; background: var(--ink); width: 10cqw; }
.chip-lines i + i { width: 6.5cqw; opacity: 0.3; }
.chip-amt {
  font: 800 3.8cqw/1 var(--font-led);
  background: linear-gradient(180deg, #0284C7 0%, #0369A1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.3));
  letter-spacing: 0.02em;
}

.loa.is-buzz .loa-shell { animation: buzz 0.42s var(--ease-out); }

/* =====================================================================
   Trang chủ: hero
   ===================================================================== */
.hero { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; min-height: clamp(560px, calc(100svh - 72px), 820px); padding: clamp(24px, 4vw, 48px) 0 clamp(36px, 5vw, 64px); }

.hero-lattice {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  --dot: #14161A;
  --dot-lit: #2F6BFF;
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(24px, 4vw, 56px); align-items: center; }

.hero-copy { animation: rise 0.9s var(--ease-out) both; }
.hero-title {
  font: 800 clamp(2.6rem, 4.6vw, 5.6rem) / 1.02 var(--font-display);
  font-stretch: 92%;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 0.4em;
}

.led-chip {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-inline: 0.05em;
  padding: 0.04em 0.28em 0.14em;
  border-radius: 0.28em;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(224, 242, 254, 0.6) 35%, rgba(56, 189, 248, 0.35) 75%, rgba(14, 165, 233, 0.45) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 25px -4px rgba(2, 132, 199, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(255, 255, 255, 0.95), inset 0 -3px 8px rgba(2, 132, 199, 0.35), inset 0 0 10px rgba(186, 230, 253, 0.6);
  color: #0284C7;
  text-shadow: 0 1px 0 #FFFFFF, 0 2px 5px rgba(2, 132, 199, 0.35);
  animation: beat-glow 5s linear infinite;
  font-family: var(--font-led);
  font-weight: 800;
  letter-spacing: 0.02em;
  word-spacing: normal;
  line-height: 0.98;
  vertical-align: baseline;
}
.led-chip::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 38%;
  border-radius: 99px 99px 40px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}
.led-chip::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 70%;
  height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: rotate(25deg);
  animation: water-sheen 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.hero-desc { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 44ch; margin-bottom: 32px; }
.hero-desc strong { color: var(--ink); font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.proof { display: flex; align-items: center; gap: 16px; color: var(--ink-2); font-size: 0.98rem; }
.proof strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.avatars { display: flex; }
.av {
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ground);
  animation: bob 2.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.5s);
}
.av:first-child { margin-left: 0; }
img.av { object-fit: cover; background: var(--plate-2); }

.hero-stage { position: relative; margin-right: calc(-1 * clamp(0px, 4vw, 56px)); padding: 7% 4% 6% 0; animation: rise 1s 0.12s var(--ease-out) both; }

.sticker {
  position: absolute;
  left: -2%;
  bottom: 4%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border-radius: 8px;
  background: var(--plate);
  color: var(--ink);
  font: 600 1.05rem/1.1 var(--font-label);
  letter-spacing: 0.02em;
  transform: rotate(-4deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(20, 22, 26, 0.1), 0 14px 20px -12px rgba(20, 22, 26, 0.6);
}
.sticker::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

/* =====================================================================
   Cơ chế: sơ đồ + 4 điểm
   ===================================================================== */
.mech { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 128px); }

.mech-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }

.h2 { font: 800 clamp(2.1rem, 3.6vw, 4.4rem) / 1.03 var(--font-display); font-stretch: 92%; letter-spacing: -0.035em; text-wrap: balance; }
.h2 .under {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-thickness: 0.085em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; }

.mech-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.diagram-wrap { position: sticky; top: 104px; }

.diagram {
  position: relative;
  padding: clamp(14px, 2.4vw, 28px);
  border-radius: 30px;
  background-color: var(--plate);
  background-image: radial-gradient(rgba(20, 22, 26, 0.13) 1px, transparent 1.5px);
  background-size: 18px 18px;
  box-shadow: 0 0 0 1px var(--line), 0 32px 44px -30px rgba(20, 22, 26, 0.4);
}
.sticker-tape { left: -12px; top: -16px; bottom: auto; transform: rotate(-3deg); }
.dgm { width: 100%; height: auto; overflow: visible; }

.dgm .part { transition: opacity 0.4s var(--ease-out); }
.diagram[data-active] .part { opacity: 0.5; }
.diagram[data-active="1"] .p-money,
.diagram[data-active="2"] .p-ghost,
.diagram[data-active="3"] .p-plug,
.diagram[data-active="4"] .p-vt { opacity: 1; }

.dgm .node rect { fill: var(--surface); stroke: var(--ink); stroke-width: 2; filter: drop-shadow(0 10px 8px rgba(20, 22, 26, 0.16)); }
.dgm .node use { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dgm .ln { fill: none; stroke-width: 4; stroke-linecap: round; opacity: 0.34; }
.dgm .ln-money { stroke: var(--cobalt); }
.dgm .ln-sig, .dgm .ln-alert { stroke: var(--orange); }
.dgm .flow { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 13; animation: flow 1.1s linear infinite; }
.dgm .flow-money { stroke: var(--cobalt); }
.dgm .flow-sig, .dgm .flow-alert { stroke: var(--orange); }
.dgm .coin circle:first-child { fill: var(--cobalt); }
.dgm .coin .coin-core { fill: var(--surface); }
.dgm .coin, .dgm .sigdot, .dgm .alertdot { opacity: 0; }
.dgm .coin { animation: beat-coin 5s linear infinite; }
.dgm .sigdot { fill: var(--orange); animation: beat-sig 5s linear infinite; }
.dgm .alertdot { fill: var(--orange); animation: beat-alert 5s linear infinite; }
.dgm .pulse { fill: none; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dgm .pulse-bank { stroke: var(--cobalt); animation: beat-pulse-bank 5s linear infinite; }
.dgm .pulse-vt { stroke: var(--orange); animation: beat-pulse-vt 5s linear infinite; }
.dgm .pulse-screen { stroke: var(--orange); animation: beat-pulse-screen 5s linear infinite; }
.dgm .pop-heart { fill: var(--orange); stroke: var(--ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; animation: beat-heart 5s linear infinite; }
.dgm .ghost-box { fill: rgba(255, 255, 255, 0.55); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 7; opacity: 0.7; }
.dgm .ln-ghost { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 6; opacity: 0.5; }
.dgm .ghost-ic { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.dgm .plug-bg { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.dgm .plug-ic { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dgm .badge circle { fill: var(--ink); }
.dgm .badge use { fill: none; stroke: var(--plate); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.diagram[data-active="2"] .ghost-box { stroke-dashoffset: 0; animation: flow-box 1.2s linear infinite; }
.diagram[data-active="3"] .plug-ic { transform-box: fill-box; transform-origin: center; animation: plug 1.6s var(--ease-out) infinite; }
.diagram[data-active="4"] .badge { animation: badge 1.2s var(--ease-out) infinite alternate; transform-box: fill-box; transform-origin: center; }

.specs { border-top: 1px solid var(--line); }
.spec {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.spec::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.spec.is-active::after { animation: fill 3.2s linear forwards; }
.specs.is-hold .spec.is-active::after { animation-play-state: paused; }

.spec-key {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--plate);
  color: var(--ink);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -4px 6px -2px rgba(20, 22, 26, 0.16), 0 10px 14px -10px rgba(20, 22, 26, 0.5);
  transition: transform 0.35s var(--ease-out), background-color 0.35s, box-shadow 0.35s;
}
.spec-key .ic { width: 26px; height: 26px; }
.spec.is-active .spec-key {
  background: var(--orange);
  transform: translateY(-3px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 6px -2px rgba(140, 30, 0, 0.42), 0 14px 16px -10px rgba(20, 22, 26, 0.6);
}
.spec h3 { font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -0.025em; margin-bottom: 6px; }
.spec p { color: var(--ink-2); max-width: 46ch; }

/* =====================================================================
   So sánh cùng một khoản
   ===================================================================== */
.compare { padding-bottom: clamp(72px, 10vw, 136px); }
.card { padding: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3.4vw, 40px); }
.card-title { font: 800 clamp(1.9rem, 3.8vw, 3.2rem) / 1.08 var(--font-display); font-stretch: 92%; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.led-chip-money { color: var(--led-blue); animation: none; }

.lanes { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(14px, 2.4vw, 28px); }
.lane { display: flex; flex-direction: column; gap: 22px; padding: clamp(18px, 2.6vw, 30px); border-radius: 24px; }
.lane-wallet { background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); }
.lane-vt { background: var(--surface); box-shadow: 0 0 0 2px var(--ink), 0 24px 30px -22px rgba(20, 22, 26, 0.5); }

.lane-title { display: flex; align-items: center; gap: 10px; font: 700 1.05rem/1 var(--font-label); letter-spacing: 0.09em; color: var(--ink); }
.lane-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.lane-dot-live { background: var(--orange); animation: beat-led 5s linear infinite; }

.steps { display: grid; gap: 22px; }
.step { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: -20px; width: 2px; background: var(--line); }
.lane-vt .step:not(:last-child)::after { background: var(--cobalt); opacity: 0.35; }

.node {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color 0.4s var(--ease-out), color 0.4s, border-color 0.4s, opacity 0.4s;
}
.node .ic { width: 19px; height: 19px; stroke-width: 2; }
.node::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }

.step.done .node { background: var(--cobalt); color: #fff; }
.step.warn .node { background: var(--ink); color: var(--plate); }
.step.pending .node { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--ink-3); }

.step strong { display: block; font: 600 1rem/1.35 var(--font-text); color: var(--ink); }
.step > div > span { display: block; font-size: 0.9rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step.pending strong { color: var(--ink-2); }

.step-final { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cobalt); }
.step-final .ic { width: 20px; height: 20px; stroke-width: 2.2; }

.result {
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: inset 0 0.5em 0.9em rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.6);
}
.result-amount {
  font: 800 clamp(1.9rem, 3.4vw, 2.7rem) / 1 var(--font-led);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, #BAE6FD 25%, #38BDF8 65%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.5));
}
.result-unknown .result-amount { color: #8A91A0; }
.result-note { margin-top: 10px; font-size: 0.88rem; color: #B9BFCC; }
.lane-vt .result-note { color: #D6DAE4; }

/* trạng thái đua (fx.js thêm .is-racing) */
.is-racing .step:not(.is-lit):not(.is-live) .node { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--line); }
.is-racing .step:not(.is-lit):not(.is-live) > div { opacity: 0.45; }
.is-racing .step > div { transition: opacity 0.4s var(--ease-out); }
.is-racing .step.is-live .node::after { animation: live 1.1s var(--ease-out) infinite; }
.is-racing .step-final { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.is-racing .step-final.is-lit { opacity: 1; transform: none; }
.is-racing .result-amount { opacity: 0.22; transition: opacity 0.4s var(--ease-out); }
.is-racing .result.is-on .result-amount { opacity: 1; }
.is-racing .result-unknown.is-on .result-amount { animation: blink 1.4s steps(2, jump-none) infinite; }
.is-racing .result-success.is-on { animation: ting 0.9s var(--ease-out); }

/* =====================================================================
   Kêu gọi hành động
   ===================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(56px, 7vw, 96px) 4vw;
  background: var(--orange);
  color: var(--ink);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(20, 22, 26, 0.2) 1.6px, transparent 2.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 120% at 12% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(70% 120% at 12% 20%, #000 10%, transparent 75%);
}
.cta .wrap { max-width: var(--wrap); padding-inline: 0; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cta-title { font: 800 clamp(2.5rem, 4.6vw, 5.4rem) / 1.02 var(--font-display); font-stretch: 92%; letter-spacing: -0.035em; text-wrap: balance; }
.cta-desc { margin-top: 18px; max-width: 38ch; font-size: 1.15rem; color: rgba(20, 22, 26, 0.9); }

.username-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 24px;
  border-radius: 22px;
  background: var(--slot);
  box-shadow: inset 0 3px 6px rgba(20, 22, 26, 0.22), 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.2s;
}
.username-field:focus-within { box-shadow: inset 0 3px 6px rgba(20, 22, 26, 0.22), 0 0 0 3px var(--ink); }
.username-prefix { flex: none; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.username-input { flex: 1; min-width: 0; height: 52px; font-size: 1.05rem; border: 0; background: transparent; padding: 0 6px; outline: none; font-weight: 600; color: var(--ink); }
.username-input::placeholder { color: var(--ink-3); font-weight: 500; }
.username-field .btn { min-height: 56px; padding: 0 28px; border-radius: 16px; }
.username-field .btn-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--ink);
  opacity: 0;
  pointer-events: none;
  animation: beat-echo 5s linear infinite;
}

.checks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 22px; }
.checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tick { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--orange); display: grid; place-items: center; }
.tick .ic { width: 14px; height: 14px; stroke-width: 2.6; }

/* =====================================================================
   Chân trang: nhãn sau thiết bị
   ===================================================================== */
.foot { background: var(--panel); color: #C9CDD8; padding: clamp(48px, 7vw, 88px) 0 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.6fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.foot-desc { max-width: 38ch; margin: 18px 0 24px; color: #C9CDD8; }
.foot-social { display: flex; gap: 10px; }
.key {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #23272E;
  color: var(--plate);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.14), inset 0 -4px 6px -2px rgba(0, 0, 0, 0.6);
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-out);
}
.key:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }
.key .ic { width: 22px; height: 22px; }

.foot-label { position: relative; padding: 24px 26px 22px; border-radius: 20px; background: var(--plate); color: var(--ink); }
.foot-heading { font: 700 1.1rem/1.2 var(--font-label); letter-spacing: 0.09em; margin-bottom: 14px; }
.foot-text { font-size: 0.95rem; line-height: 1.6; margin-bottom: 8px; color: var(--ink-2); }
.foot-text a { color: var(--ink); font-weight: 600; }
.barcode { width: 100%; height: 34px; margin-top: 16px; color: var(--ink); opacity: 0.85; }
.foot-legal .foot-heading { color: var(--plate); }
.slot { display: block; height: 58px; border-radius: 14px; background-color: #1B1E24; background-image: radial-gradient(#3F4550 2px, transparent 2.6px); background-size: 14px 14px; background-position: 7px 7px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }

.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #2E333C; font-size: 0.9rem; color: #A0A7B5; }
.foot-bottom span { display: inline-flex; align-items: center; gap: 6px; }
.heart { width: 1.05em; height: 1.05em; color: var(--orange); animation: heartbeat 1.6s var(--ease-out) infinite; }

/* =====================================================================
   Trang đăng nhập / đăng ký
   ===================================================================== */
.auth { position: relative; isolation: isolate; overflow: clip; min-height: calc(100vh - 72px); display: flex; align-items: center; padding-block: clamp(24px, 5vw, 64px); }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 7vw, 112px); align-items: center; }
.auth-stage { padding: 8% 4% 6% 2%; animation: rise 1s var(--ease-out) both; }
.auth-stage .loa { max-width: 560px; }

.auth-plate {
  position: relative;
  padding: 42px;
  border-radius: 30px;
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--line), 0 44px 60px -40px rgba(20, 22, 26, 0.5), 0 6px 14px rgba(20, 22, 26, 0.08);
  animation: rise 0.9s 0.1s var(--ease-out) both;
}
.auth-title { font: 800 2.4rem / 1.05 var(--font-display); font-stretch: 92%; letter-spacing: -0.035em; }
.auth-subtitle { margin: 8px 0 26px; color: var(--ink-2); }

.federated-buttons { display: grid; gap: 10px; margin-bottom: 22px; }
.btn-federated { width: 100%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); gap: 12px; }
.btn-federated:hover { background: var(--ink); color: var(--plate); transform: translateY(-1px); }
.btn-federated:hover .ic-brand[viewBox="0 0 24 24"] { color: var(--plate); }

.divider { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: var(--ink-3); font-size: 0.9rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sign-in-form, .mfa-form { display: grid; gap: 18px; }
.form-field { display: grid; gap: 7px; }
.form-field label { font-weight: 600; font-size: 0.92rem; }
.form-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--slot);
  outline: none;
  box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 1px var(--line);
  transition: box-shadow 0.2s;
}
.form-field input:focus { box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 3px var(--ink); }

.password-field { position: relative; }
.password-field input { padding-right: 56px; }
.password-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
}
.password-toggle:hover { background: var(--plate-2); }
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFE1D4;
  color: #7C2504;
  font-size: 0.92rem;
  font-weight: 500;
  animation: shake 0.42s var(--ease-out);
}
.form-error .ic { margin-top: 1px; color: var(--orange-deep); }

.btn-submit { width: 100%; margin-top: 4px; }
.auth-switch { margin-top: 24px; text-align: center; color: var(--ink-2); font-size: 0.95rem; }
.auth-switch a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--orange); text-underline-offset: 0.22em; }
.auth-switch a:hover { background: var(--orange); text-decoration-color: var(--ink); }

.forgot-link { margin-top: 8px; text-align: right; font-size: 0.88rem; }
.forgot-link a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.2em; }
.forgot-link a:hover { color: var(--ink); }

.signup-done { display: grid; gap: 10px; }

.form-field textarea {
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--slot);
  outline: none;
  box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 1px var(--line);
  transition: box-shadow 0.2s;
  font: inherit;
  resize: vertical;
}
.form-field textarea:focus { box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 3px var(--ink); }
.form-hint { font-size: 0.82rem; color: var(--ink-3); }
.form-hint.is-bad { color: #7C2504; }
.form-hint.is-good { color: #1A7A3C; }

/* =====================================================================
   HỒ SƠ (profile.html)
   ===================================================================== */
.settings { position: relative; min-height: calc(100vh - 72px); padding-block: clamp(24px, 5vw, 64px); }
.settings .wrap { max-width: 640px; }
.settings-card { animation: rise 0.9s 0.1s var(--ease-out) both; }
.settings-skeleton { display: grid; gap: 18px; }
.skeleton-block { height: 52px; border-radius: 14px; background: linear-gradient(100deg, var(--slot) 30%, var(--plate-2) 50%, var(--slot) 70%); background-size: 200% 100%; animation: skeleton-sweep 1.4s linear infinite; }
@keyframes skeleton-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.avatar-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.avatar-preview, .avatar-fallback { position: absolute; inset: 0; width: 84px; height: 84px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.avatar-preview { object-fit: cover; background: var(--plate-2); }
.avatar-fallback { display: grid; place-items: center; font: 800 1.9rem/1 var(--font-display); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 5px -1px rgba(20, 22, 26, 0.26), 0 0 0 1px var(--line); }
.avatar-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.username-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--slot); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.username-pill .ic { width: 16px; height: 16px; color: var(--ink-3); }

/* =====================================================================
   BẢO MẬT (security.html) — 2FA
   ===================================================================== */
.secret-box {
  margin: 14px 0 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--plate);
  font: 700 1rem/1.6 var(--font-led), monospace;
  letter-spacing: 0.06em;
  word-break: break-all;
  white-space: pre-wrap;
}
.mfa-status { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-weight: 700; }
.mfa-status .ic { color: #1A7A3C; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.step-up-panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }

/* =====================================================================
   NGÂN HÀNG (bank-account.html)
   ===================================================================== */
.form-field select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--slot);
  outline: none;
  box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 1px var(--line);
  font: inherit;
  color: inherit;
}
.form-field select:focus { box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 3px var(--ink); }

.section-heading { font: 800 1.15rem/1.2 var(--font-display); font-stretch: 92%; margin: 28px 0 14px; }
.section-heading:first-child { margin-top: 0; }

.bank-list { display: grid; gap: 12px; margin-bottom: 8px; }
.bank-item { padding: 16px 18px; border-radius: 16px; background: var(--slot); box-shadow: 0 0 0 1px var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bank-item-info { display: grid; gap: 4px; }
.bank-item-bank { font-weight: 700; }
.bank-item-meta { font-size: 0.86rem; color: var(--ink-3); }
.bank-item-note { font-size: 0.86rem; color: #7C2504; }

.status-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.status-badge.st-pending { background: #FFE8C2; color: #7A4A00; }
.status-badge.st-active { background: #CFF3DA; color: #166830; }
.status-badge.st-rejected { background: #FFE1D4; color: #7C2504; }
.status-badge.st-off { background: var(--plate-2); color: var(--ink-3); }

/* =====================================================================
   TRANG DONATE CÔNG KHAI (u.html)
   ===================================================================== */
.donate-page { position: relative; min-height: calc(100vh - 72px); padding-block: clamp(24px, 5vw, 64px); }
.donate-page .wrap { max-width: 640px; display: grid; gap: 22px; }

.creator-card { text-align: center; padding: 32px 28px; }
.creator-avatar { width: 96px; height: 96px; margin: 0 auto 16px; }
.creator-avatar .avatar-preview, .creator-avatar .avatar-fallback { width: 96px; height: 96px; font-size: 2.1rem; }
.creator-name { font: 800 1.8rem/1.15 var(--font-display); font-stretch: 92%; letter-spacing: -0.03em; }
.creator-username { color: var(--ink-3); margin-top: 2px; }
.creator-bio { margin-top: 14px; color: var(--ink-2); white-space: pre-wrap; }
.verified-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 12px; border-radius: 999px; background: #CFF3DA; color: #166830; font-size: 0.82rem; font-weight: 700; }

.cur-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: var(--slot); box-shadow: 0 0 0 1px var(--line); }
.cur-opt { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.cur-opt.is-active { background: var(--ink); color: var(--plate); }
.cur-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fx-note { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--slot); font-size: .9rem; line-height: 1.5; }
.fx-note b { font-variant-numeric: tabular-nums; }
.amount-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.amount-preset { min-height: 48px; border-radius: 14px; background: var(--slot); box-shadow: 0 0 0 1px var(--line); font-weight: 700; }
.amount-preset:hover { box-shadow: 0 0 0 2px var(--ink); }
.amount-preset.is-active { background: var(--ink); color: var(--plate); box-shadow: none; }

.transfer-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.transfer-field:last-of-type { border-bottom: 0; }
.transfer-field span { color: var(--ink-3); font-size: 0.88rem; }
.transfer-field strong { font-weight: 700; text-align: right; word-break: break-word; }
.transfer-field.highlight { padding: 14px; margin: 6px 0; border-radius: 14px; background: #FFF3E3; border-bottom: 0; }
.transfer-field.highlight strong { font: 800 1.1rem/1.2 var(--font-led), monospace; letter-spacing: 0.04em; color: #7C2504; }
.copy-btn { flex: none; min-height: 36px; padding: 0 14px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 0.82rem; font-weight: 700; }
.copy-btn:hover { background: var(--ink); color: var(--plate); }

.donate-waiting, .donate-paid, .donate-expired { margin-top: 18px; text-align: center; font-weight: 700; }
.donate-paid { color: #1A7A3C; }
.donate-expired { color: #7C2504; }
.countdown { font: 800 1.4rem/1 var(--font-led), monospace; text-align: center; margin: 10px 0; color: var(--ink); }

.qr-wrap { display: grid; justify-items: center; gap: 10px; margin: 18px 0; }
.qr-image { width: 220px; height: 220px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 20px 30px -20px rgba(20, 22, 26, 0.4); background: var(--surface); }

/* =====================================================================
   OVERLAY OBS (overlay.html) — nền phải TRONG SUỐT, không dùng --ground
   ===================================================================== */
body.page-overlay { background: transparent; }

.donate-toast {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translate(-50%, 32px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(90vw, 620px);
  padding: 20px 28px;
  border-radius: 22px;
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--line), 0 30px 50px -20px rgba(20, 22, 26, 0.55), 0 8px 16px rgba(20, 22, 26, 0.2);
}
.donate-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.donate-toast-icon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 6px -2px rgba(140, 30, 0, 0.42);
}
.donate-toast-icon .ic { width: 30px; height: 30px; }
.donate-toast-body { display: grid; gap: 4px; min-width: 0; }
.donate-toast-name { font: 800 1.2rem/1.2 var(--font-display); font-stretch: 92%; }
.donate-toast-amount { font: 900 1.5rem/1 var(--font-led); color: var(--cobalt); letter-spacing: 0.02em; }
.donate-toast-message { font-size: 1rem; color: var(--ink-2); overflow-wrap: anywhere; }

/* =====================================================================
   overlay-settings.html — khung xem trước overlay
   ===================================================================== */
.overlay-preview {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(45deg, var(--slot) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(-45deg, var(--slot) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(45deg, transparent 75%, var(--slot) 75%) 0 0 / 20px 20px,
    linear-gradient(-45deg, transparent 75%, var(--slot) 75%) 0 0 / 20px 20px,
    var(--ground);
  box-shadow: inset 0 0 0 1px var(--line);
}
.overlay-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--orange); text-underline-offset: 0.22em; }
.link-btn:hover { background: var(--orange); text-decoration-color: var(--ink); }

/* =====================================================================
   Nút tròn nổi (kiểu dùng cho nút ngôn ngữ)
   ===================================================================== */
.bar-end { display: flex; align-items: center; gap: 8px; }
.motion-toggle {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--plate);
  color: var(--ink);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 5px -1px rgba(20, 22, 26, 0.14), 0 6px 12px -8px rgba(20, 22, 26, 0.45);
  transition: transform 0.18s var(--ease-out), background-color 0.18s;
}
.motion-toggle:hover { background: var(--surface); transform: translateY(-1px); }
.motion-toggle:active { transform: translateY(1px); }
.motion-toggle:focus-visible { outline: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--plate), 0 0 0 6px var(--ink); }
.motion-toggle .ic { width: 18px; height: 18px; grid-area: 1 / 1; }

/* =====================================================================
   Hiện dần khi cuộn (chỉ khi có JS; nội dung mặc định luôn thấy được)
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
/* Đầu trang chủ: motion.js (GSAP) cho hiện lần lượt. Giấu sẵn để không nháy; nếu GSAP không chạy thì sau 1,5 giây tự hiện. */
.js .hero-anim { opacity: 0; animation: vt-show 0s 1.5s forwards; }
@keyframes vt-show { to { opacity: 1; } }
html[data-motion="off"] .hero-anim { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .js .hero-anim { opacity: 1; animation: none; } }

/* =====================================================================
   Chuyển động: một nhịp 5 giây (100% = 5s; 26% = 1,3s là lúc loa "ting")
   ===================================================================== */
@keyframes beat-led {
  0%, 24% { opacity: 0.22; }
  26%, 46% { opacity: 1; }
  62%, 100% { opacity: 0.22; }
}
@keyframes beat-display {
  0%, 24% { opacity: 0.2; }
  26%, 66% { opacity: 1; }
  80%, 100% { opacity: 0.2; }
}
@keyframes beat-chip {
  0%, 27% { opacity: 0; transform: translateY(24%) scale(0.6); animation-timing-function: var(--ease-out); }
  33% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; }
  77%, 100% { opacity: 0; transform: translateY(-16%) scale(0.96); }
}
@keyframes beat-echo {
  0%, 25% { opacity: 0; transform: scale(1); }
  27% { opacity: 0.55; }
  48%, 100% { opacity: 0; transform: scale(1.14, 1.5); }
}
@keyframes beat-glow {
  0%, 24% { filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.35)); }
  27%, 62% { filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85)) drop-shadow(0 2px 8px rgba(2, 132, 199, 0.45)); }
  84%, 100% { filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.35)); }
}
@keyframes beat-coin {
  0% { opacity: 0; transform: translateX(0); }
  1% { opacity: 1; }
  14% { opacity: 1; transform: translateX(400px); }
  15%, 100% { opacity: 0; transform: translateX(400px); }
}
@keyframes beat-sig {
  0%, 15% { opacity: 0; transform: translateY(0); }
  16% { opacity: 1; }
  25% { opacity: 1; transform: translateY(164px); }
  26%, 100% { opacity: 0; transform: translateY(164px); }
}
@keyframes beat-alert {
  0%, 29% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  44% { opacity: 1; transform: translateX(-400px); }
  45%, 100% { opacity: 0; transform: translateX(-400px); }
}
@keyframes beat-pulse-bank {
  0%, 13% { opacity: 0; transform: scale(0.85); }
  14% { opacity: 0.8; }
  26%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes beat-pulse-vt {
  0%, 25% { opacity: 0; transform: scale(0.85); }
  26% { opacity: 0.8; }
  40%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes beat-pulse-screen {
  0%, 43% { opacity: 0; transform: scale(0.85); }
  44% { opacity: 0.8; }
  58%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes beat-heart {
  0%, 44% { opacity: 0; transform: translateY(6px) scale(0); }
  50% { opacity: 1; transform: translateY(-6px) scale(1.25); }
  54% { transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-8px) scale(0.9); }
}
@keyframes flow { to { stroke-dashoffset: -26; } }
@keyframes flow-box { to { stroke-dashoffset: -28; } }
@keyframes plug { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(-9px); } 80% { transform: translateY(0); } }
@keyframes badge { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes scan { from { top: 8%; } to { top: 88%; } }
@keyframes bob { to { transform: translateY(-5px); } }
@keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.3); } 78% { transform: scale(1); } 86% { transform: scale(1.18); } }
@keyframes live { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes ting { 0% { transform: scale(1); } 30% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes buzz { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1.2cqw); } 40% { transform: translateX(1cqw); } 60% { transform: translateX(-0.7cqw); } 80% { transform: translateX(0.4cqw); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* dừng chuyển động: người dùng bấm nút, hoặc hệ điều hành yêu cầu giảm chuyển động */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html:not([data-motion="on"]) .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Co giãn
   ===================================================================== */
@media (max-width: 960px) {
  .hero-grid, .mech-head, .mech-body, .cta-inner, .auth-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { max-width: 640px; margin-inline: auto; width: 100%; }
  .diagram-wrap { position: static; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-grid .foot-col:first-child { grid-column: 1 / -1; }
  .hero { min-height: 0; }
  .hero-stage { margin-right: 0; padding-right: 3%; }
  .auth-stage { width: 100%; padding: 6% 3% 4% 0; }
  .auth-stage .loa { max-width: clamp(190px, 44vw, 300px); }
  .auth { align-items: flex-start; }
  .auth-grid { justify-items: center; gap: 20px; }
  .auth-plate { width: 100%; max-width: 460px; }
}

@media (max-width: 560px) {
  .auth-plate { padding: 26px; }
}

@media (max-width: 720px) {
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .sticker { font-size: 0.95rem; }
}

@media (max-width: 560px) {
  .bar-inner { min-height: 64px; }
  .bar-actions .btn { padding: 0 14px; }
  .hero { padding-top: 20px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .username-field { flex-wrap: wrap; padding: 14px; gap: 8px; }
  .username-field .btn { width: 100%; }
  .username-input { flex: 1 1 60%; }
  .user-bar { gap: 8px; }
  .dropdown-panel { right: -56px; width: min(280px, calc(100vw - 32px)); }
  .foot { padding-bottom: 88px; }
}

@media (max-width: 640px) {
  .motion-toggle {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 80;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--plate);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.16), 0 12px 20px -8px rgba(20, 22, 26, 0.6);
  }
  .motion-toggle:hover { background: #23272E; }
  .motion-toggle:focus-visible { box-shadow: 0 0 0 3px var(--plate), 0 0 0 6px var(--ink); }
}

/* =====================================================================
   Hướng dẫn donate (index.html #huong-dan): tay cầm điện thoại 3D quét QR.
   Khối riêng, không đổi quy tắc nào ở trên. Pha do donate-guide.js đặt ở
   .guide-stage[data-phase], 0..3 khớp 4 bước bên trái.
   ===================================================================== */
.guide { padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 128px); }
.guide-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.guide-head .lede { margin-top: 18px; max-width: 58ch; }
.guide-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font: 700 0.95rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep);
}
.guide-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18); }
.guide-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* ---- Các bước ---- */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-step-btn {
  position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left; overflow: hidden;
  padding: 18px 20px; border: 1px solid transparent; border-radius: 20px; background: transparent; cursor: pointer; color: inherit; font: inherit;
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.guide-step-btn:hover { background: rgba(255, 255, 255, 0.55); }
.guide-step-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.guide-num {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font: 800 1rem/1 var(--font-display); background: var(--plate-2); color: var(--ink-2);
  transition: background 0.35s, color 0.35s, transform 0.35s var(--ease-out);
}
.guide-text { display: grid; gap: 4px; }
.guide-text strong { font: 700 1.08rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.guide-text span { color: var(--ink-3); font-size: 0.95rem; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.4s; }
.guide-step.is-active .guide-step-btn { background: var(--surface); border-color: rgba(20, 22, 26, 0.06); box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 18px 40px -18px rgba(20, 22, 26, 0.22); }
.guide-step.is-active .guide-num { background: var(--orange); color: var(--ink); transform: scale(1.06); }
.guide-step.is-active .guide-text span { max-height: 6em; opacity: 1; }
/* Thanh tiến độ của bước đang chạy */
.guide-step-btn::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
}
.guide.is-playing .guide-step.is-active .guide-step-btn::after { animation: guide-progress var(--guide-phase, 3.6s) linear forwards; }
@keyframes guide-progress { to { transform: scaleX(1); } }

/* ---- Sân khấu 3D ---- */
.guide-stage-wrap { position: relative; isolation: isolate; }
.guide-stage {
  --rx: 0deg; --ry: 0deg;
  position: relative; aspect-ratio: 1 / 0.92; perspective: 1700px; perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}
/* Nền sáng phía sau cảnh: đặt ở lớp bọc (ngoài không gian 3D), nếu không nó nằm TRƯỚC màn hình đã đẩy lùi translateZ âm. */
.guide-stage-wrap::before {
  content: ''; position: absolute; inset: 4% 2% 0; border-radius: 40px;
  background: radial-gradient(60% 55% at 45% 45%, #fff 0%, var(--plate) 55%, transparent 75%);
}
/* Tay đi vào từ mép dưới: mờ dần thay vì tràn sang khu vực kế tiếp. */
.guide-stage-wrap { padding: 10% 5% 4% 0; margin: -10% -5% 0 0; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
.gs-screen, .gs-rig { position: absolute; transform-style: preserve-3d; will-change: transform; }

/* Màn hình (trang donate của streamer) */
.gs-screen {
  left: 2%; top: 8%; width: 62%; border-radius: 22px; overflow: hidden; background: var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 40px 80px -30px rgba(20, 22, 26, 0.35), 0 12px 24px -12px rgba(20, 22, 26, 0.2);
  transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(16deg + var(--ry))) translateZ(-40px);
  transition: transform 0.9s var(--ease-out);
}
.gs-screen-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--plate); border-bottom: 1px solid var(--plate-2); }
.gs-screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--plate-2); }
.gs-screen-bar span { margin-left: 8px; flex: 1; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--ink-3); font-size: 0.72rem; }
.gs-screen-body { display: grid; justify-items: center; gap: 10px; padding: 18px 18px 22px; }
.gs-profile { display: flex; align-items: center; gap: 10px; justify-self: stretch; }
.gs-profile div { display: grid; line-height: 1.2; }
.gs-profile strong { font: 700 0.95rem var(--font-display); }
.gs-profile span { font-size: 0.75rem; color: var(--ink-3); }
.gs-avatar { width: 38px; height: 38px; border-radius: 50%; }
.gs-qr-card { position: relative; width: 58%; aspect-ratio: 1; padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--plate-2); overflow: hidden; }
.gs-qr { width: 100%; height: 100%; color: var(--ink); display: block; }
.gs-qr-scan { position: absolute; left: 8px; right: 8px; top: 8%; height: 3px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 14px 2px rgba(47, 107, 255, 0.55); opacity: 0; }
.guide-stage[data-phase="1"] .gs-qr-scan { opacity: 1; animation: gs-scan 1.4s ease-in-out infinite alternate; }
@keyframes gs-scan { from { top: 8%; } to { top: 88%; } }
.gs-amount { font: 800 1.35rem/1 var(--font-display); letter-spacing: -0.02em; }
.gs-content { font: 600 0.72rem/1 var(--font-label); letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 10px; border-radius: 8px; background: var(--plate); }
.gs-toast {
  position: absolute; left: 50%; bottom: 14px; display: flex; gap: 10px; align-items: center; min-width: 72%;
  padding: 10px 14px; border-radius: 16px; background: var(--ink); color: var(--on-ink); box-shadow: 0 16px 30px -12px rgba(20, 22, 26, 0.6);
  opacity: 0; transform: translate(-50%, 20px) scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.gs-toast .ic { width: 22px; height: 22px; color: var(--orange); flex: none; }
.gs-toast div { display: grid; line-height: 1.25; }
.gs-toast strong { font: 700 0.85rem var(--font-display); }
.gs-toast span { font-size: 0.72rem; opacity: 0.75; }
.guide-stage[data-phase="3"] .gs-toast { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0.7s; }

/* Tay + điện thoại: ẢNH THẬT (hand-phone.webp, nền đã tách trong suốt). Các màn hình đặt đúng vùng màn hình trắng đo từ ảnh;
   hand-finger.webp là riêng ngón trỏ đè lên màn hình, phủ TRÊN nội dung để ngón tay trông như đang chạm thật. */
.gs-rig {
  right: -4%; top: 2%; width: 62%;
  transform: translate3d(0, 4%, 60px) rotateX(calc(6deg + var(--rx))) rotateY(calc(-16deg + var(--ry))) rotateZ(3deg);
  transition: transform 1.1s var(--ease-out);
}
.guide-stage[data-phase="1"] .gs-rig { transform: translate3d(-22%, -2%, 110px) rotateX(calc(4deg + var(--rx))) rotateY(calc(-22deg + var(--ry))) rotateZ(-3deg); }
.guide-stage[data-phase="2"] .gs-rig { transform: translate3d(-6%, 2%, 90px) rotateX(calc(5deg + var(--rx))) rotateY(calc(-12deg + var(--ry))) rotateZ(2deg); }
.guide-stage[data-phase="3"] .gs-rig { transform: translate3d(-3%, 0%, 80px) rotateX(calc(5deg + var(--rx))) rotateY(calc(-10deg + var(--ry))) rotateZ(2deg); }
.gs-hold { position: relative; transform-style: preserve-3d; animation: gs-float 5s ease-in-out infinite; }
@keyframes gs-float { 0%, 100% { transform: translateY(0) rotateZ(0deg); } 50% { transform: translateY(-2%) rotateZ(-0.6deg); } }

.gs-photo { position: relative; filter: drop-shadow(0 34px 36px rgba(20, 22, 26, 0.22)); }
.gs-photo-img, .gs-photo-finger { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.gs-photo-finger { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gs-display.gs-display-photo {
  position: absolute; left: 37.17%; top: 7.885%; width: 29.81%; height: 60.75%;
  border-radius: 9% / 4.2%; overflow: hidden; background: var(--surface); z-index: 1; container-type: inline-size;
}
.gs-display-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 30%, transparent 44%);
}
.gs-display-photo .gs-view { font-size: 5.6cqw; padding: 13% 7% 6%; gap: 0.55em; }
.gs-display-photo .gs-cf-row { padding: 0.55em 0.8em; }
.gs-display-photo .gs-cf-btn { padding: 0.75em; }

/* Các màn hình trong điện thoại */
.gs-view { position: absolute; inset: 0; display: grid; align-content: start; padding: 22% 9% 10%; opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); font-size: clamp(9px, 1.05vw, 13px); }
.guide-stage[data-phase="0"] .gs-view-app,
.guide-stage[data-phase="1"] .gs-view-cam,
.guide-stage[data-phase="2"] .gs-view-confirm,
.guide-stage[data-phase="3"] .gs-view-done { opacity: 1; transform: none; transition-delay: 0.25s; }

.gs-view-app { background: linear-gradient(180deg, #fff3ec 0%, #fff 45%); gap: 12px; }
.gs-app-top { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.gs-app-top .ic { width: 1.4em; height: 1.4em; color: var(--orange-deep); }
.gs-app-balance { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--ink); color: var(--on-ink); }
.gs-app-balance span { font-size: 0.8em; opacity: 0.7; }
.gs-app-balance strong { font: 800 1.5em/1 var(--font-display); letter-spacing: 0.1em; }
.gs-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gs-app-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; background: var(--plate); font-size: 0.85em; font-weight: 600; color: var(--ink-2); }
.gs-app-tile i, .gs-app-tile svg { width: 2.2em; height: 2.2em; border-radius: 10px; background: var(--plate-2); }
.gs-app-tile.is-qr { background: var(--orange); color: var(--ink); box-shadow: 0 8px 18px -8px rgba(47, 107, 255, 0.8); animation: gs-pulse 1.4s ease-in-out infinite; }
.gs-app-tile.is-qr svg { background: var(--surface); padding: 4px; color: var(--ink); }
@keyframes gs-pulse { 50% { transform: scale(1.05); } }

.gs-view-cam { background: #1b1d22; padding: 0; place-items: center; align-content: center; }
.gs-cam-feed { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 45%, #8f96a3 0%, #4b505a 60%, #2b2e34 100%); }
.gs-cam-qr { width: 58%; padding: 6%; background: #f4f5f6; border-radius: 8px; color: #222; transform: perspective(300px) rotateY(12deg) rotateX(4deg); filter: blur(0.3px); }
.gs-cam-frame { position: relative; width: 68%; aspect-ratio: 1; }
.gs-cam-frame i { position: absolute; width: 22%; height: 22%; border: 3px solid var(--surface); }
.gs-cam-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.gs-cam-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.gs-cam-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.gs-cam-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.gs-cam-line { position: absolute; left: 6%; right: 6%; top: 10%; height: 2px; background: var(--orange); box-shadow: 0 0 12px 2px rgba(47, 107, 255, 0.7); animation: gs-scan 1.2s ease-in-out infinite alternate; }
.gs-cam-hint { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.85em; }

.gs-view-confirm { gap: 10px; }
.gs-cf-title { font: 800 1.25em/1.2 var(--font-display); margin-bottom: 6px; }
.gs-cf-row { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--plate); }
.gs-cf-row span { font-size: 0.8em; color: var(--ink-3); }
.gs-cf-row strong { font-size: 0.95em; word-break: break-all; }
.gs-cf-row strong.is-money { font: 800 1.35em/1.1 var(--font-display); color: var(--orange-deep); }
.gs-cf-btn { margin-top: 8px; padding: 12px; border-radius: 99px; text-align: center; font-weight: 700; color: var(--ink); background: var(--orange); }

.gs-view-done { place-items: center; align-content: center; gap: 8px; text-align: center; background: linear-gradient(180deg, #effaf3, #fff 60%); }
.gs-done-check { display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 50%; background: #16803c; color: #fff; box-shadow: 0 10px 24px -10px rgba(22,128,60,.8); }
.gs-done-check .ic { width: 55%; height: 55%; stroke-width: 3; }
.guide-stage[data-phase="3"] .gs-done-check { animation: gs-pop 0.6s var(--ease-out) 0.3s both; }
@keyframes gs-pop { from { transform: scale(0.4); opacity: 0; } }
.gs-view-done strong { font: 800 1.15em var(--font-display); }
.gs-view-done .gs-done-amount { font: 800 1.6em var(--font-display); color: #16803c; }

@media (max-width: 900px) {
  .guide-body { grid-template-columns: 1fr; }
  .guide-stage-wrap { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
}
/* Ảnh thật bị cắt ở mép dưới/phải: mờ dần để cổ tay tan vào nền thay vì dừng bằng một đường thẳng. */
.gs-photo-img, .gs-photo-finger {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to left, transparent 0%, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to left, transparent 0%, #000 10%);
  mask-composite: intersect;
}

/* Bước 2FA: mã dự phòng qua email */
.mfa-hint { margin: 12px 0 0; color: var(--ink-3); font-size: 0.92rem; }
.mfa-email-btn { margin-top: 10px; width: 100%; }

/* Menu tài khoản kiểu VTPay: hai thẻ Cá nhân / Trang (auth.js → setupAccountMenu). Màu theo website. */
.dropdown-panel.acct-panel { width: 320px; padding: 12px; }
.acct-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px;
  background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line);
}
.acct-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-2); font: 600 0.98rem/1 var(--font-text); cursor: pointer; transition: background 0.18s, color 0.18s;
}
.acct-tab:hover { color: var(--ink); }
.acct-tab[aria-selected="true"] { background: var(--orange); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(47, 107, 255, 0.9); }
.acct-tab:focus-visible, .acct-item:focus-visible, .acct-card:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }
.acct-pane { padding: 6px 4px 2px; }
.acct-email { font-size: 0.88rem; color: var(--ink-3); padding: 10px 10px 2px; word-break: break-all; }
.acct-group {
  font: 700 0.74rem/1 var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  padding: 16px 10px 8px;
}
.acct-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: 500 1rem/1.2 var(--font-text); text-align: left; text-decoration: none; cursor: pointer;
}
.acct-item:hover { background: var(--plate-2); }
.acct-item[aria-current="page"] { background: var(--surface); font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.acct-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); }
.acct-item:hover .acct-ic, .acct-item[aria-current="page"] .acct-ic, .acct-tab .acct-ic { color: inherit; }
.acct-tab .acct-ic { width: 20px; height: 20px; }
.acct-card {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 10px; border-radius: 14px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line); color: inherit; text-decoration: none;
}
.acct-card:hover { box-shadow: 0 0 0 1px var(--orange); }
.acct-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; object-fit: cover;
  background: var(--orange); color: var(--ink); font: 800 1.05rem/1 var(--font-display);
}
.acct-card-meta { display: grid; gap: 2px; min-width: 0; }
.acct-card-meta strong { font: 700 0.98rem/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card-meta span { font-size: 0.85rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .dropdown-panel.acct-panel { width: min(320px, calc(100vw - 32px)); } }

/* Trang donate công khai: ảnh bìa, phân loại, tags, mạng xã hội (auth.js → renderCreatorExtras). */
.creator-card.has-cover { padding-top: 0; overflow: hidden; }
.creator-cover { aspect-ratio: 3 / 1; margin: 0 -28px; background-size: cover; background-position: center; }
.creator-card.has-cover .creator-avatar { margin-top: -48px; position: relative; }
.creator-card.has-cover .creator-avatar .avatar-preview, .creator-card.has-cover .creator-avatar .avatar-fallback { border: 4px solid var(--plate); box-sizing: content-box; }
.creator-chip { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 99px; background: rgba(47, 107, 255, 0.12); color: var(--orange-deep); font: 700 0.82rem/1 var(--font-text); }
.creator-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 12px; color: var(--ink-2); font-size: 0.88rem; }
.creator-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.creator-socials a { padding: 8px 14px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font: 600 0.88rem/1 var(--font-text); text-decoration: none; }
.creator-socials a:hover { box-shadow: 0 0 0 1px var(--orange); color: var(--orange-deep); }

/* Trang donate công khai: ghi âm lời nhắn, bảng xếp hạng. */
.rec-box { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(20, 22, 26, 0.2); }
.rec-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.rec-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-controls audio { height: 36px; max-width: 100%; }
#recStop { color: #c81e1e; border-color: #c81e1e; }
.lb-list { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: lb; display: grid; gap: 6px; }
.lb-list li { counter-increment: lb; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.lb-list li::before { content: counter(lb); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--plate-2); font-weight: 800; font-size: 0.85rem; }
.lb-list li:nth-child(1)::before { background: #ffd24c; }
.lb-list li:nth-child(2)::before { background: #d9dde3; }
.lb-list li:nth-child(3)::before { background: #f0b27a; }
.lb-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-guide { color: var(--orange-deep); font-weight: 700; white-space: nowrap; }
.foot-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot-links a { color: #C9CDD8; text-decoration: none; font-size: 0.95rem; }
.foot-links a:hover { color: var(--orange); }
img.acct-avatar { object-fit: cover; }
/* Thông báo hệ thống (Cài đặt chung của quản trị viên) */
.site-banner { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 44px; font-weight: 600; font-size: 0.95rem; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.site-banner.is-info { background: #dceeff; color: #0d2b55; }
.site-banner.is-warning { background: #ffe9a8; color: #5a3b00; }
.site-banner.is-success { background: #c9f2dc; color: #0f4a2b; }
.site-banner-close { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.08); color: inherit; font-size: 1.1rem; cursor: pointer; }
.mark-img { width: auto; max-width: 240px; height: 48px; object-fit: contain; object-position: left center; border-radius: 0; box-shadow: none; }
@media (max-width: 640px) { .mark-img { max-width: 170px; height: 40px; } }
/* Đồng ý Điều khoản khi đăng ký */
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.terms-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.terms-check a, .terms-note a { color: var(--orange-deep); font-weight: 600; }
.terms-note { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-3); text-align: center; }
/* Khung tin nhắn ở thanh đầu trang */
.icon-btn { position: relative; }
.chat-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--orange); color: var(--ink); font: 800 0.68rem/18px var(--font-text); text-align: center; box-shadow: 0 0 0 2px #fff; }
.chat-mini { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.chat-mini a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.chat-mini a:hover { background: var(--plate); }
.chat-mini strong, .chat-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mini span { font-size: 0.85rem; color: var(--ink-3); }
.chat-mini a.is-unread span { color: var(--ink); font-weight: 600; }
.chat-mini-all { display: block; margin-top: 8px; padding: 8px 10px; border-top: 1px solid var(--line); color: var(--orange-deep); font-weight: 700; text-decoration: none; text-align: center; }

/* Ô chọn tự dựng (select-menu.js): thay popup <select> của trình duyệt; <select> gốc bị ẩn nhưng vẫn giữ giá trị. */
.sel { position: relative; }
.sel-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--slot); box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 1px var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sel-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn svg { flex: none; width: 12px; height: 8px; transition: transform .15s; }
.sel.is-open .sel-btn svg { transform: rotate(180deg); }
.sel-btn:focus-visible, .sel.is-open .sel-btn { outline: none; box-shadow: inset 0 2px 5px rgba(20, 22, 26, 0.2), 0 0 0 3px var(--ink); }
.sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.sel-pop { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; border-radius: 14px; background: var(--plate, #fff); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(20, 22, 26, 0.18); }
.sel.sel-up .sel-pop { top: auto; bottom: calc(100% + 6px); }
.sel-search { width: 100%; height: 40px; margin-bottom: 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--slot); box-shadow: 0 0 0 1px var(--line); font: inherit; color: inherit; outline: none; }
.sel-search:focus { box-shadow: 0 0 0 2px var(--ink); }
.sel-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; outline: none; }
.sel-list li { padding: 9px 10px; border-radius: 8px; cursor: pointer; line-height: 1.35; }
.sel-list li:hover, .sel-list li.is-hl { background: var(--slot); }
.sel-list li[aria-selected="true"] { font-weight: 700; }
.sel-list li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.sel-list .sel-empty { color: var(--muted, #6b7280); cursor: default; }
.lang-toggle { font-family: inherit; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .04em; cursor: pointer; }
/* Điện thoại: nút ngôn ngữ nổi ở góc trái dưới. */
@media (max-width: 640px) {
  .motion-toggle.lang-toggle { left: 12px; background: var(--ink); color: var(--plate); }
}
/* Trang pháp lý: bản tiếng Việt (chính thức) và bản English (tham khảo) — hiện theo ngôn ngữ đang chọn (i18n.js đặt html[lang]). */
html[lang="en"] [data-lang="vi"] { display: none !important; }
html[lang="en"] [data-lang="en"] { display: block !important; }
/* Chữ tên thương hiệu cạnh logo: ẩn khỏi màn hình (2026-09-29), vẫn giữ cho trình đọc màn hình làm tên liên kết logo. */
.logo > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Nút Sáng/Tối (theme.js): đang sáng hiện mặt trăng (bấm để tối), đang tối hiện mặt trời. */
.theme-toggle { cursor: pointer; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
@media (max-width: 640px) {
  .motion-toggle.theme-toggle { left: 60px; background: var(--ink); color: var(--plate); }
}
/* Điện thoại, trang thiết lập (dashboard): chừa đáy trang để nút nổi không che nút/nội dung cuối trang khi cuộn hết. */
@media (max-width: 640px) {
  body[data-dash] { padding-bottom: 76px; }
}
/* Biểu tượng mạng xã hội có link (quản trị viên đặt): giữ hình phím, thêm vòng focus cho bàn phím. */
.foot-social a.key { text-decoration: none; }
.foot-social a.key:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.mark-logo { object-fit: cover; }

/* Nút Sao chép có icon (copy-btn) và nút chỉ có icon (đóng...): icon thẳng hàng với chữ, vùng bấm đủ lớn. */
.copy-btn { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn .ic { width: 16px; height: 16px; }
.copy-btn.is-copied, .pe-copy.is-copied { color: #1F8A4C; box-shadow: inset 0 0 0 1.5px #1F8A4C; background: transparent; }
.btn-sm[aria-label="Đóng"] { width: 40px; min-width: 40px; padding: 0; }
.btn-sm[aria-label="Đóng"] > svg.ic { width: 20px; height: 20px; }

/* Nút Sao chép trong khung chuyển khoản: chữ trên nút giữ màu/cỡ của nút (không theo nhãn xám). */
.transfer-field .copy-btn span { color: inherit; font-size: inherit; }
/* Điện thoại: không bẻ số tài khoản/nội dung giữa chừng — nút Sao chép xuống dòng, canh phải. */
@media (max-width: 480px) {
  .transfer-field { flex-wrap: wrap; }
  .transfer-field > strong { flex: 1 1 auto; white-space: nowrap; }
  .transfer-field > .copy-btn { margin-left: auto; }
  .transfer-field.highlight > span:first-child { flex-basis: 100%; }
  .transfer-field.highlight > strong { white-space: normal; word-break: break-all; text-align: left; }
}

/* Menu avatar (thẻ Trang): "Hồ sơ trang" và "Cài đặt Donate" có mũi tên riêng xổ các thẻ. Đóng: ∨; mở: quay 180° thành ^. */
.acct-sub-row { display: flex; align-items: center; gap: 2px; }
.acct-sub-row > .acct-item { flex: 1; min-width: 0; }
.acct-sub-toggle {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.acct-sub-toggle:hover { background: var(--plate-2); color: var(--ink); }
.acct-sub-toggle:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 1px; }
.acct-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease-out; }
.acct-sub-row.is-open .acct-chev { transform: rotate(180deg); }
.acct-sub { display: grid; gap: 2px; margin: 0 0 4px 21px; padding-left: 12px; border-left: 2px solid var(--plate-2); }
.acct-sub[hidden] { display: none; }
.acct-sub .acct-sub-item { min-height: 38px; font-size: 0.93rem; }
@media (prefers-reduced-motion: reduce) { .acct-chev { transition: none; } }
/* Đăng nhập bằng mã Gmail (không mật khẩu): nút dưới Continue with Google + form 2 bước. */
.email-code-entry { display: grid; }
.federated-buttons > .email-code-entry { margin-top: 0; }
.code-login-form { display: grid; gap: 14px; }
.code-login-form #loginCode { font-size: 1.4rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.code-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.auth-plate > .email-code-entry { margin-bottom: 22px; }