/* ─────────────────────────────────────────────
   MÕ CỐC CỐC — Brand styling
   Dark wooden temple aesthetic with gold accents
   ───────────────────────────────────────────── */

:root {
  --bg-deep: #0d0907;
  --bg-mid: #1a1410;
  --bg-card: #221a14;
  --wood-light: #a87b54;
  --wood-mid: #7a5235;
  --wood-dark: #3a2515;
  --gold: #d4a857;
  --gold-light: #f0d28e;
  --red-seal: #a01923;
  --cream: #faf6ec;
  --text: #e8d8c0;
  --text-dim: #a89580;
  --text-faint: #6a5840;
  --shadow-glow: 0 0 30px rgba(212, 168, 87, 0.3);
  --bg-glow: #2a1a10;
}

/* ─── Ngũ Hành Theme: Kim (Metal) — silver/white/cool gold ─── */
body[data-element="kim"] {
  --bg-deep: #0a0e14;
  --bg-mid: #161e28;
  --bg-card: #1c2632;
  --gold: #c8d4e0;
  --gold-light: #e8eef6;
  --text: #e0e8f0;
  --text-dim: #94a4b8;
  --bg-glow: #2a3848;
  --shadow-glow: 0 0 30px rgba(200, 212, 224, 0.35);
}
/* ─── Mộc (Wood) — emerald/jade green ─── */
body[data-element="moc"] {
  --bg-deep: #07120c;
  --bg-mid: #0e2018;
  --bg-card: #142e22;
  --gold: #5cd68a;
  --gold-light: #98e8b8;
  --text: #d8eee0;
  --text-dim: #88b89a;
  --bg-glow: #1a3a2a;
  --shadow-glow: 0 0 30px rgba(92, 214, 138, 0.35);
}
/* ─── Thủy (Water) — deep blue/midnight cyan ─── */
body[data-element="thuy"] {
  --bg-deep: #060a14;
  --bg-mid: #0c1828;
  --bg-card: #142440;
  --gold: #5cb8e8;
  --gold-light: #a0d8f0;
  --text: #d4e4f0;
  --text-dim: #7ca0c0;
  --bg-glow: #1c3458;
  --shadow-glow: 0 0 30px rgba(92, 184, 232, 0.4);
}
/* ─── Hỏa (Fire) — crimson/ember red ─── */
body[data-element="hoa"] {
  --bg-deep: #140404;
  --bg-mid: #2a0a08;
  --bg-card: #3a1208;
  --gold: #ff7a4a;
  --gold-light: #ffb088;
  --text: #f4dcc8;
  --text-dim: #c89880;
  --bg-glow: #4a1408;
  --shadow-glow: 0 0 30px rgba(255, 122, 74, 0.4);
}
/* ─── Thổ (Earth) — ochre/warm amber (default-like) ─── */
body[data-element="tho"] {
  --bg-deep: #100a04;
  --bg-mid: #1e1608;
  --bg-card: #2a1e0c;
  --gold: #e8b04a;
  --gold-light: #ffd478;
  --text: #f0e0c0;
  --text-dim: #b09870;
  --bg-glow: #3a2810;
  --shadow-glow: 0 0 30px rgba(232, 176, 74, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent iOS pull-to-refresh while tapping mõ */
  overscroll-behavior-y: contain;
}

body {
  background:
    radial-gradient(ellipse at top, var(--bg-glow) 0%, var(--bg-deep) 70%),
    var(--bg-deep);
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari: tránh thanh địa chỉ che nội dung/mõ + layout nhảy */
  position: relative;
}

/* Background: Vietnamese Buddhist temple photo + dark vignette overlay so UI
   stays readable. Photo is webp (≈100KB mobile, ≈330KB desktop). */
.incense-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* center vignette — darker at edges, lighter at middle for mõ focus */
    radial-gradient(ellipse at center, rgba(13, 9, 7, 0.55) 0%, rgba(13, 9, 7, 0.78) 60%, rgba(13, 9, 7, 0.93) 100%),
    /* warm gold + seal-red ambient glows (preserved from old subtle bg) */
    radial-gradient(circle at 20% 80%, rgba(212, 168, 87, 0.10), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(160, 25, 35, 0.06), transparent 55%),
    /* the temple */
    url('/og/bg-temple.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: incense-drift 20s ease-in-out infinite;
  will-change: transform, opacity; /* promote GPU layer → composite thay vì repaint */
}
@media (max-width: 768px) {
  .incense-bg {
    background-image:
      radial-gradient(ellipse at center, rgba(13, 9, 7, 0.62) 0%, rgba(13, 9, 7, 0.82) 55%, rgba(13, 9, 7, 0.94) 100%),
      radial-gradient(circle at 20% 80%, rgba(212, 168, 87, 0.10), transparent 55%),
      radial-gradient(circle at 80% 20%, rgba(160, 25, 35, 0.06), transparent 55%),
      url('/og/bg-temple-mobile.webp');
  }
}
/* ─── KHUNG CẢNH NỀN (30/10/2026) ───
   Chọn ở nút "Nền" (game.js BG_THEMES), lưu localStorage 'mococ_bg', script nhỏ trong <head> đặt
   <html data-bg> TRƯỚC lần vẽ đầu (khỏi chớp nền chánh điện). Chánh điện = mặc định (khối trên, không đổi).
   Màn DỌC dùng bản cắt 9:16 quanh tượng Phật: ảnh ngang trên điện thoại chỉ lộ ~26% bề ngang, phóng to là nhoè.
   Lớp phủ riêng từng ảnh — Bình minh rất sáng nên tối ở mép trên (thanh nút) và dưới (số đếm, nút)
   cho chữ vàng/trắng đọc rõ mà vẫn giữ vùng tượng Phật sáng; Vũ trụ vốn tối nên chỉ phủ nhẹ. */
html[data-bg="binhminh"] {
  --bg-ov: linear-gradient(180deg, rgba(22, 14, 8, 0.62) 0%, rgba(22, 14, 8, 0.18) 24%, rgba(22, 14, 8, 0.22) 46%, rgba(22, 14, 8, 0.66) 76%, rgba(22, 14, 8, 0.86) 100%),
    radial-gradient(ellipse at center, rgba(22, 14, 8, 0) 30%, rgba(22, 14, 8, 0.45) 100%);
  --bg-img: url('/og/bg-binhminh.webp');
  --bg-img-doc: url('/og/bg-binhminh-doc.webp');
}
html[data-bg="vutru"] {
  --bg-ov: linear-gradient(180deg, rgba(4, 6, 18, 0.5) 0%, rgba(4, 6, 18, 0) 22%, rgba(4, 6, 18, 0) 60%, rgba(4, 6, 18, 0.55) 100%),
    radial-gradient(ellipse at center, rgba(4, 6, 18, 0.12) 0%, rgba(4, 6, 18, 0.35) 60%, rgba(4, 6, 18, 0.7) 100%);
  --bg-img: url('/og/bg-vutru.webp');
  --bg-img-doc: url('/og/bg-vutru-doc.webp');
}
html[data-bg] .incense-bg { background-image: var(--bg-ov), var(--bg-img); }
/* Nền SÁNG (Bình minh, 31/10/2026): nền cố định, các thẻ chữ trong suốt cuộn ngang qua vùng trời sáng
   giữa màn hình → chữ trắng/vàng nhạt chìm (đo: tiêu đề cuối trang 1,6:1, hộp Góp ý 1,8:1, nhịp Mõ Tự
   Ngân 2,3:1 — Chánh điện 6–10:1). Cuộn khỏi khung tượng Phật thì phủ thêm một lớp tối (game.js đặt
   class bg-dim trên <html>); lớp có sẵn, CHỈ đổi opacity (luật iPhone: chỉ chuyển động transform/opacity).
   Đầu trang vẫn sáng như ảnh gốc; mấy khung chữ nằm sẵn trên vùng sáng ở đầu trang có nền tối riêng. */
html[data-bg] .incense-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg-dim, transparent);
  opacity: 0;
  transition: opacity 0.45s ease;
}
html[data-bg].bg-dim .incense-bg::after { opacity: 1; }
/* Hào quang nằm TRÊN nền (z-index 1) và đè lên thẻ chữ: khi đã phủ tối thì làm mờ theo, kẻo còn một
   vòng sáng lơ lửng giữa trang (máy tính có hoạt ảnh "thở" điều khiển opacity → phải tắt khi mờ). */
html[data-bg] .buddha-halo { transition: opacity 0.45s ease; }
html[data-bg].bg-dim .buddha-halo { animation: none !important; opacity: 0.22; }
/* Vũ trụ tối hơn nhưng có mảng sáng (thân tượng Phật, tinh vân) ngay sau thẻ chữ → phủ nhẹ hơn. */
html[data-bg="binhminh"] { --bg-dim: rgba(16, 10, 6, 0.66); }
html[data-bg="vutru"] { --bg-dim: rgba(4, 6, 18, 0.55); }
html[data-bg] #thali-announce {
  background: linear-gradient(90deg, rgba(28, 18, 9, 0.8), rgba(28, 18, 9, 0.66));
  border-color: rgba(212, 168, 87, 0.45);
}
html[data-bg] .hint {
  color: #f3e6cb;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.5);
}
html[data-bg] #btn-bell {
  background: rgba(26, 16, 8, 0.7) !important;
  color: #f2d58c !important;
}
@media (orientation: portrait) {
  html[data-bg] .incense-bg { background-image: var(--bg-ov), var(--bg-img-doc); }
}
/* Hào quang xoay: vị trí + cỡ do placeBgHalo() (game.js) tính theo đúng phép "cover" của từng ảnh.
   Vũ trụ: vòng sáng trắng-xanh cho hợp tông ảnh, tia mờ hơn. */
html[data-bg="vutru"] .buddha-halo {
  background: radial-gradient(circle, transparent 0%, transparent 36%, rgba(222, 232, 255, 0.36) 48%,
    rgba(172, 190, 255, 0.2) 61%, rgba(150, 160, 255, 0.07) 74%, transparent 83%);
}
html[data-bg="vutru"] .buddha-halo::before { opacity: 0.2; }

@keyframes incense-drift {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}

/* ─── Hào quang toả quanh đầu đức Phật (trên ảnh nền temple) ───
   Vị trí chỉnh bằng biến --halo-x / --halo-y; mặc định ngay đầu tượng Phật. */
.buddha-halo {
  position: fixed;
  left: var(--halo-x, 50%);
  top: var(--halo-y, 35%);
  width: var(--halo-size, 19vmin);
  height: var(--halo-size, 19vmin);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  /* Vòng sáng quanh đầu — TÂM TRONG SUỐT để không che mặt Phật */
  background: radial-gradient(circle,
    transparent 0%,
    transparent 36%,
    rgba(255, 240, 180, 0.42) 48%,
    rgba(255, 212, 122, 0.26) 61%,
    rgba(255, 190, 90, 0.09) 74%,
    transparent 83%);
  animation: halo-breathe 5.5s ease-in-out infinite;
  will-change: opacity, transform;
}
/* Tia sáng toả ra (mỏng, quay rất chậm như ánh sáng lung linh) */
.buddha-halo::before {
  content: '';
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  /* Ảnh tia nung sẵn (alpha đã bo vành) quay bằng transform → Safari cache 1 LỚP rồi
     compositor xoay (gần như miễn phí). Thay conic-gradient + mask cũ vốn bắt re-raster
     mỗi khung → nóng/treo trên iPhone 120Hz. Nhìn y hệt, GPU nhẹ hẳn. */
  background: url('/halo-rays.png') center / contain no-repeat;
  animation: halo-rays 120s linear infinite;
  opacity: 0.3;
  will-change: transform;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes halo-rays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .buddha-halo, .buddha-halo::before { animation: none; }
}
@media (max-width: 768px) {
  .buddha-halo { top: var(--halo-y-m, 38%); width: var(--halo-size-m, 28vmin); height: var(--halo-size-m, 28vmin); }
}

/* ─── Skin aura layer (premium creatures floating + sparkles) ─── */
.skin-aura-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura-creature {
  position: absolute;
  font-size: 130px;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(0.3px) drop-shadow(0 0 28px rgba(255, 220, 130, 0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  animation-fill-mode: both;
  line-height: 1;
}
.aura-creature.size-large { font-size: 180px; }
.aura-creature.size-small { font-size: 90px; opacity: 0.65; }

/* Inner span for behavior animation (flap/bob/wave) — independent of flight path */
.aura-inner {
  display: inline-block;
  transform-origin: 50% 70%;
  animation-fill-mode: both;
  will-change: transform;
}

/* Wing flap — for flying creatures (phượng, rồng, hạc) */
.aura-inner.flap {
  animation: aura-flap 0.34s ease-in-out infinite alternate;
}
@keyframes aura-flap {
  0%   { transform: scaleY(1) scaleX(1) rotate(-4deg); }
  100% { transform: scaleY(0.8) scaleX(1.08) rotate(4deg); }
}

/* Slower wing flap — for larger gliding creatures (kỳ lân) */
.aura-inner.glide {
  animation: aura-glide 0.55s ease-in-out infinite alternate;
}
@keyframes aura-glide {
  0%   { transform: scaleY(1) rotate(-2deg); }
  100% { transform: scaleY(0.9) rotate(3deg); }
}

/* Stride — for ground creatures (hổ) */
.aura-inner.stride {
  animation: aura-stride 0.5s ease-in-out infinite alternate;
}
@keyframes aura-stride {
  0%   { transform: scaleX(1) translateY(0) rotate(-1deg); }
  100% { transform: scaleX(1.04) translateY(-3px) rotate(2deg); }
}

/* Serpentine body wave — for dragons */
.aura-inner.wave {
  animation: aura-wave 1.2s ease-in-out infinite;
}
@keyframes aura-wave {
  0%, 100% { transform: skewX(-6deg) rotate(-2deg); }
  50%      { transform: skewX(6deg) rotate(2deg); }
}

/* Pulse — for static items (jewel, pagoda, lotus) */
.aura-inner.pulse {
  animation: aura-pulse 2.4s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  50%      { transform: scale(1.1) rotate(3deg); filter: brightness(1.25); }
}

/* ─── Hắc Long ice dragon — flies left → right ─── */
.dragon-img-wrap {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.dragon-img {
  width: 380px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,0.55))
    drop-shadow(0 0 32px rgba(120, 200, 255, 0.7))
    drop-shadow(0 0 56px rgba(80, 170, 240, 0.5));
  transform-origin: 60% 60%;
  animation: dragon-glide 0.8s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.aura-creature.size-large .dragon-img { width: 480px; }
.aura-creature.size-small .dragon-img { width: 240px; }
@keyframes dragon-glide {
  0%   { transform: scaleY(1) rotate(-3deg) translateY(0); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 32px rgba(120, 200, 255, 0.7)) drop-shadow(0 0 56px rgba(80, 170, 240, 0.5)); }
  100% { transform: scaleY(0.92) rotate(3deg) translateY(-6px); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(160, 220, 255, 0.85)) drop-shadow(0 0 70px rgba(100, 190, 250, 0.6)); }
}

/* ─── Phoenix real image with wing-flap illusion ─── */
.phoenix-img-wrap {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.phoenix-img {
  width: 320px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 8px 24px rgba(0,0,0,0.5))
    drop-shadow(0 0 28px rgba(255, 120, 40, 0.7))
    drop-shadow(0 0 50px rgba(255, 80, 30, 0.45));
  transform-origin: 50% 70%;
  animation: phoenix-flap 0.55s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.aura-creature.size-large .phoenix-img { width: 440px; }
.aura-creature.size-small .phoenix-img { width: 220px; }
@keyframes phoenix-flap {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 28px rgba(255, 120, 40, 0.7)) drop-shadow(0 0 50px rgba(255, 80, 30, 0.45)); }
  100% { transform: scaleY(0.86) scaleX(1.04) rotate(2deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 36px rgba(255, 160, 60, 0.85)) drop-shadow(0 0 60px rgba(255, 100, 40, 0.55)); }
}

/* ─── VIP bay: Hỏa Phụng / Thanh Long (17/10/2026) ───
   MỘT con, ảnh đã tách nền sạch, bay chậm theo vòng cung trên cao rồi nghỉ ~10 giây.
   Không bóp dẹt ảnh để giả vỗ cánh, không 3 con chồng nhau. Chỉ trên máy tính (điện thoại count=0). */
.aura-creature.vip-fly {
  filter: none;
  font-size: 0;
  animation: vip-fly-phoenix 38s ease-in-out infinite both;
}
.aura-creature.vip-fly-dragon { animation-name: vip-fly-dragon; animation-duration: 42s; }
.vip-creature {
  display: block;
  width: clamp(260px, 30vw, 440px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(255, 128, 48, 0.55)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  animation: vip-bob 3.6s ease-in-out infinite alternate;
  will-change: transform;
}
.vip-fly-dragon .vip-creature {
  width: clamp(300px, 34vw, 500px);
  filter: drop-shadow(0 0 16px rgba(130, 205, 255, 0.55)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  animation-duration: 4.4s;
}
@keyframes vip-bob {
  from { transform: translateY(-6px) rotate(-1.2deg); }
  to   { transform: translateY(6px) rotate(1.2deg); }
}
/* Phượng nhìn sang trái → bay phải → trái */
@keyframes vip-fly-phoenix {
  0%   { transform: translate3d(104vw, 32vh, 0) scale(0.84); opacity: 0; }
  6%   { opacity: 0.9; }
  36%  { transform: translate3d(36vw, 11vh, 0) scale(1); }
  64%  { transform: translate3d(-4vw, 20vh, 0) scale(0.92); opacity: 0.86; }
  74%  { transform: translate3d(-40vw, 30vh, 0) scale(0.84); opacity: 0; }
  100% { transform: translate3d(-40vw, 30vh, 0) scale(0.84); opacity: 0; }
}
/* Rồng nhìn sang phải → bay trái → phải */
@keyframes vip-fly-dragon {
  0%   { transform: translate3d(-44vw, 30vh, 0) scale(0.86); opacity: 0; }
  6%   { opacity: 0.84; }
  36%  { transform: translate3d(14vw, 9vh, 0) scale(1); }
  64%  { transform: translate3d(56vw, 17vh, 0) scale(0.93); opacity: 0.8; }
  74%  { transform: translate3d(104vw, 28vh, 0) scale(0.86); opacity: 0; }
  100% { transform: translate3d(104vw, 28vh, 0) scale(0.86); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aura-creature.vip-fly { display: none; }
}

/* ─── SVG creatures (with separate part animations) ─── */
.aura-creature {
  --halo-color: rgba(255, 220, 130, 0.4);
  --elem-color: #ffd478;
}
.aura-svg-wrap.has-svg, .aura-creature.has-svg {
  font-size: 0;
}
.aura-svg {
  width: 220px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 18px var(--elem-color));
  position: relative;
  z-index: 2;
}
.aura-creature.size-large .aura-svg { width: 320px; }
.aura-creature.size-small .aura-svg { width: 150px; }

/* Halo glow behind creature */
.aura-halo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 130%; height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-color) 0%, transparent 65%);
  filter: blur(12px);
  z-index: 1;
  animation: halo-breathe 3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes halo-breathe {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Elemental trail container (positioned around creature) */
.aura-trail {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
}
.elem-particle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  will-change: transform, opacity;
}

/* ─── FIRE (Long, Phụng) — orange→red rising flames ─── */
.elem-particle.elem-fire {
  background: radial-gradient(circle, rgba(255,200,80,1) 0%, rgba(255,90,30,0.85) 40%, rgba(160,20,20,0.4) 70%, transparent 100%);
  animation: elem-fire-rise 2.4s ease-out infinite;
  width: 18px; height: 26px;
  border-radius: 50% 50% 30% 30%;
}
@keyframes elem-fire-rise {
  0%   { transform: translateY(20px) scale(0.4); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translateY(-60px) scale(1.3); opacity: 0; }
}

/* ─── CLOUD (Kỳ Lân) — soft white puffs drifting ─── */
.elem-particle.elem-cloud {
  background: radial-gradient(circle, rgba(255,248,220,0.95) 0%, rgba(255,232,144,0.5) 50%, transparent 80%);
  animation: elem-cloud-drift 3.5s ease-in-out infinite;
  width: 28px; height: 18px;
  border-radius: 50%;
  filter: blur(4px);
}
@keyframes elem-cloud-drift {
  0%   { transform: translate(0, 10px) scale(0.6); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: translate(40px, -30px) scale(1.4); opacity: 0; }
}

/* ─── ICE (Bạch Hổ) — cyan crystal sparkles ─── */
.elem-particle.elem-ice {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(168,212,255,0.85) 40%, rgba(100,160,220,0.3) 70%, transparent 100%);
  animation: elem-ice-drift 2.8s ease-out infinite;
  width: 12px; height: 12px;
  filter: blur(1px);
  box-shadow: 0 0 12px rgba(168, 212, 255, 0.7);
}
@keyframes elem-ice-drift {
  0%   { transform: translate(0, -10px) scale(0.4) rotate(0deg); opacity: 0; }
  30%  { opacity: 0.95; }
  100% { transform: translate(-20px, 50px) scale(1) rotate(180deg); opacity: 0; }
}
/* Ice crystal shape via clip-path */
.elem-particle.elem-ice::before,
.elem-particle.elem-ice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  filter: inherit;
}

/* ─── LIGHTNING (Hắc Long, Cửu Trùng) — purple/gold flashes ─── */
.elem-particle.elem-lightning {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, var(--elem-color) 40%, transparent 75%);
  animation: elem-lightning-flash 1.2s ease-out infinite;
  width: 14px; height: 14px;
  filter: blur(1.5px);
  box-shadow: 0 0 16px var(--elem-color);
}
@keyframes elem-lightning-flash {
  0%, 80%, 100% { opacity: 0; transform: scale(0.4); }
  10%, 12%      { opacity: 1; transform: scale(1.2); }
  20%, 22%      { opacity: 1; transform: scale(0.9); }
  35%           { opacity: 0.4; transform: scale(0.7); }
}

/* ─── LIGHT (Phật Tối Thượng) — golden divine rays ─── */
.elem-particle.elem-light {
  background: radial-gradient(circle, rgba(255,248,216,1) 0%, rgba(255,212,96,0.7) 40%, transparent 80%);
  animation: elem-light-twinkle 2.6s ease-in-out infinite;
  width: 14px; height: 14px;
  filter: blur(0.8px);
  box-shadow: 0 0 18px rgba(255, 212, 96, 0.7);
}
@keyframes elem-light-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.4) rotate(180deg); }
  60%      { opacity: 0.9; transform: scale(1) rotate(270deg); }
}

/* ─── CRYSTAL (Bạch Ngọc) — sharp blue crystal shards ─── */
.elem-particle.elem-crystal {
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(168,224,255,0.85) 50%, transparent 100%);
  animation: elem-crystal-shimmer 2.2s ease-out infinite;
  width: 10px; height: 16px;
  border-radius: 2px;
  transform: rotate(45deg);
  filter: blur(0.5px);
  box-shadow: 0 0 10px rgba(168, 224, 255, 0.6);
}
@keyframes elem-crystal-shimmer {
  0%   { opacity: 0; transform: rotate(45deg) translateY(0) scale(0.4); }
  40%  { opacity: 1; transform: rotate(135deg) translateY(-15px) scale(1.2); }
  100% { opacity: 0; transform: rotate(225deg) translateY(-40px) scale(0.6); }
}

/* ─── Phụng — flapping wings ─── */
.aura-svg .aura-wing {
  animation: phx-wing 0.34s ease-in-out infinite alternate;
  transform-box: fill-box;
}
.aura-svg .aura-wing-left  { animation-name: phx-wing-left; }
.aura-svg .aura-wing-right { animation-name: phx-wing-right; }
@keyframes phx-wing-left {
  0%   { transform: rotate(20deg) translateY(-4px); }
  100% { transform: rotate(-30deg) translateY(2px); }
}
@keyframes phx-wing-right {
  0%   { transform: rotate(-20deg) translateY(-4px); }
  100% { transform: rotate(30deg) translateY(2px); }
}
.aura-svg .aura-tail {
  animation: phx-tail 1.2s ease-in-out infinite alternate;
  transform-origin: 120px 95px;
  transform-box: fill-box;
}
@keyframes phx-tail {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(3deg); }
}

/* ─── Long / Hắc Long — body wave ─── */
.aura-svg .aura-body-wave {
  animation: drag-wave 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes drag-wave {
  0%, 100% { transform: skewX(-3deg) scaleY(1); }
  50%      { transform: skewX(3deg) scaleY(1.04); }
}
.aura-svg .aura-head {
  animation: drag-head 2s ease-in-out infinite alternate;
  transform-origin: 34px 80px;
  transform-box: fill-box;
}
@keyframes drag-head {
  0%   { transform: rotate(-4deg) translateY(-2px); }
  100% { transform: rotate(4deg) translateY(2px); }
}

/* ─── Kỳ Lân + Hổ — galloping legs ─── */
.aura-svg .aura-legs .leg {
  transform-box: fill-box;
  transform-origin: top center;
}
.aura-svg .leg-fl { animation: leg-front 0.4s ease-in-out infinite alternate; }
.aura-svg .leg-fr { animation: leg-front 0.4s ease-in-out infinite alternate-reverse; }
.aura-svg .leg-bl { animation: leg-back 0.4s ease-in-out infinite alternate-reverse; }
.aura-svg .leg-br { animation: leg-back 0.4s ease-in-out infinite alternate; }
@keyframes leg-front {
  0%   { transform: rotate(-18deg) translateY(-2px); }
  100% { transform: rotate(20deg) translateY(2px); }
}
@keyframes leg-back {
  0%   { transform: rotate(18deg) translateY(-2px); }
  100% { transform: rotate(-20deg) translateY(2px); }
}
.aura-svg .aura-tail {
  animation: tail-wag 0.5s ease-in-out infinite alternate;
  transform-box: fill-box;
}
@keyframes tail-wag {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(8deg); }
}
.aura-svg .aura-mane {
  animation: mane-flow 1.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mane-flow {
  0%   { transform: translateY(-1px) rotate(-1deg); }
  100% { transform: translateY(2px) rotate(1.5deg); }
}

/* 4 distinct flight paths for variety */
@keyframes aura-fly-1 {
  0%   { transform: translate(-15vw, 50vh) rotate(-6deg) scale(0.8); opacity: 0; }
  10%  { opacity: 0.55; }
  50%  { transform: translate(50vw, 25vh) rotate(4deg) scale(1.05); opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translate(115vw, 60vh) rotate(-3deg) scale(0.85); opacity: 0; }
}
@keyframes aura-fly-2 {
  0%   { transform: translate(110vw, 70vh) rotate(8deg) scale(0.9); opacity: 0; }
  15%  { opacity: 0.5; }
  50%  { transform: translate(40vw, 35vh) rotate(-3deg) scale(1.0); opacity: 0.65; }
  85%  { opacity: 0.45; }
  100% { transform: translate(-15vw, 80vh) rotate(2deg) scale(0.85); opacity: 0; }
}
@keyframes aura-fly-3 {
  0%   { transform: translate(50vw, 105vh) rotate(-12deg) scale(0.85); opacity: 0; }
  20%  { opacity: 0.6; }
  50%  { transform: translate(70vw, 40vh) rotate(6deg) scale(1.1); opacity: 0.75; }
  100% { transform: translate(20vw, -15vh) rotate(-8deg) scale(0.9); opacity: 0; }
}
@keyframes aura-fly-4 {
  0%   { transform: translate(80vw, -10vh) rotate(15deg) scale(0.9); opacity: 0; }
  20%  { opacity: 0.55; }
  60%  { transform: translate(20vw, 55vh) rotate(-8deg) scale(1.05); opacity: 0.7; }
  100% { transform: translate(60vw, 110vh) rotate(4deg) scale(0.85); opacity: 0; }
}

/* Sparkle dots — twinkle in place */
.aura-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, rgba(255, 232, 144, 0.9) 0%, rgba(255, 200, 100, 0.4) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: aura-twinkle 3.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.aura-sparkle.large {
  width: 10px; height: 10px;
  background: radial-gradient(circle, rgba(255, 244, 220, 1) 0%, rgba(255, 212, 96, 0.6) 35%, transparent 70%);
}
@keyframes aura-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%      { opacity: 0.85; transform: scale(1.2); }
  60%      { opacity: 0.95; transform: scale(1); }
}

/* Drift sparkle — moves in addition to twinkle */
.aura-sparkle.drift { animation: aura-sparkle-drift 18s linear infinite; }
@keyframes aura-sparkle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translate(var(--dx, 50px), var(--dy, -200px)); opacity: 0; }
}

/* ─── TOPBAR ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 14px 20px;
  /* iOS notch / Dynamic Island — push content below safe-area inset */
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background: rgba(13, 9, 7, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-mark {
  font-size: 22px;
  color: var(--gold);
}
.brand-name {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 0;
}

/* Prominent, LABELLED toolbar buttons — override base square .icon-btn.
   Scoped to .topbar-actions so modal close (✕) / back buttons stay unchanged. */
.topbar-actions .icon-btn {
  flex-shrink: 0;
  flex-direction: column;
  gap: 3px;
  width: auto;
  height: auto;
  min-width: 60px;
  padding: 7px 9px 6px;
  font-size: 23px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.20), rgba(212, 168, 87, 0.06));
  border: 1px solid rgba(212, 168, 87, 0.5);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 235, 180, 0.14);
}
.topbar-actions .icon-btn[data-label]::after {
  content: attr(data-label);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  color: var(--gold-light);
  white-space: nowrap;
}
.topbar-actions .icon-btn:hover,
.topbar-actions .icon-btn:focus-visible {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.34), rgba(212, 168, 87, 0.14));
  border-color: rgba(212, 168, 87, 0.8);
}

/* Feature/destination buttons — extra emphasis to drive discovery. */
.topbar-actions .icon-btn.ib-feature {
  position: relative;
  background: linear-gradient(135deg, rgba(224, 178, 96, 0.62), rgba(190, 142, 60, 0.32));
  border-color: rgba(255, 224, 160, 0.95);
  box-shadow: 0 3px 16px rgba(212, 168, 87, 0.4), inset 0 1px 0 rgba(255, 235, 180, 0.35);
}
.topbar-actions .icon-btn.ib-feature::after { color: #fff4d0; }
/* HÀO QUANG NHỊP THỞ — CHỐNG NÓNG MÁY (29/10/2026). Trước đây animate box-shadow ⇒ trình duyệt phải VẼ
   LẠI cả nút mỗi khung hình; đo trang chủ để yên trên điện thoại: ~780 lần vẽ/giây, gần hết do 12 nút
   phát sáng kiểu này. Nay bóng nền đứng yên, phần sáng thêm nằm ở MỘT LỚP RIÊNG chỉ đổi opacity ⇒ GPU
   ghép lớp có sẵn, không vẽ lại. Nhìn như cũ. ĐỪNG quay lại animate box-shadow/filter/background. */
.topbar-actions .icon-btn.ib-feature::before,
.topbar-actions .icon-btn.ib-vip .ib-glow {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 4px 30px rgba(255, 214, 124, 0.78), inset 0 1px 0 rgba(255, 240, 195, 0.5);
  opacity: 0;
  will-change: opacity;
  animation: ibGlow 2.6s ease-in-out infinite;
}
@keyframes ibGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .topbar-actions .icon-btn.ib-feature::before, .topbar-actions .icon-btn.ib-vip .ib-glow { animation: none; }
}

/* "Hỷ cúng tác giả" CTA — shown on the Bảng Vàng tab of the leaderboard */
.bxh-donate-btn {
  display: block; width: fit-content; margin: 0 auto 14px;
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  font-family: "Cormorant Garamond", "Noto Serif", serif; font-size: 13px; font-style: italic;
  color: var(--gold, #d4a857); text-decoration: underline; text-underline-offset: 3px;
  opacity: 0.82; transition: opacity .15s ease;
}
.bxh-donate-btn:hover { opacity: 1; }

/* VIP / Cửa hàng — the SINGLE most prominent button on the toolbar:
   solid gold fill, red "VIP" badge, larger, brighter glow. */
.topbar-actions .icon-btn.ib-vip {
  color: #2a160a;
  min-width: 66px;
  background: linear-gradient(135deg, #ffe9a8 0%, #f4cf72 42%, #d9a23e 100%);
  border: 1.5px solid #fff0c4;
  box-shadow:
    0 4px 16px rgba(212, 168, 87, 0.55),
    0 0 0 1px rgba(184, 137, 58, 0.5),
    inset 0 1px 2px rgba(255, 252, 235, 0.9),
    inset 0 -3px 6px rgba(150, 100, 30, 0.35);
  overflow: visible;
  z-index: 1;
}
.topbar-actions .icon-btn.ib-vip::after {            /* label */
  color: #3a1e08;
  font-weight: 700;
}
.topbar-actions .icon-btn.ib-vip::before {           /* "VIP" badge */
  content: "VIP";
  position: absolute;
  top: -7px; right: -7px;
  background: linear-gradient(135deg, #c0202e, #8a121d);
  color: #fff3d0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 224, 168, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.topbar-actions .icon-btn.ib-vip:hover,
.topbar-actions .icon-btn.ib-vip:focus-visible {
  background: linear-gradient(135deg, #fff0be 0%, #f8d77e 42%, #e0ad48 100%);
  border-color: #fff;
}
/* nút VIP: ::before là nhãn "VIP", ::after là chữ → lớp sáng là thẻ <i class="ib-glow"> trong nút */
.topbar-actions .icon-btn.ib-vip .ib-glow {
  box-shadow: 0 4px 26px rgba(255, 214, 128, 0.85), 0 0 0 1px rgba(244, 208, 142, 0.7);
  animation-duration: 2.2s;
}
@media (prefers-reduced-motion: reduce) {
  .topbar-actions .icon-btn.ib-vip { animation: none; }
}

/* Mobile: let the toolbar drop to a full-width row that WRAPS — every button
   visible at once instead of hidden behind a horizontal scroll. */
@media (max-width: 600px) {
  .topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); row-gap: 8px; }
  .topbar-actions { flex-basis: 100%; justify-content: center; gap: 6px; }
  .topbar-actions .icon-btn { min-width: 52px; font-size: 21px; padding: 6px 7px 5px; }
  .topbar-actions .icon-btn[data-label]::after { font-size: 9.5px; }
}
@media (max-width: 380px) {
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-btn { min-width: 46px; font-size: 19px; padding: 5px 5px 4px; }
  .topbar-actions .icon-btn[data-label]::after { font-size: 9px; letter-spacing: 0; }
}

.icon-btn {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.08), rgba(212, 168, 87, 0.02));
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 14px;
  color: var(--gold-light);
  font-size: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 235, 180, 0.08);
  position: relative;
}
.icon-btn:hover, .icon-btn:focus-visible {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.22), rgba(212, 168, 87, 0.08));
  color: var(--gold);
  border-color: rgba(212, 168, 87, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212, 168, 87, 0.25);
}
.icon-btn:active { transform: translateY(0); }
@media (max-width: 480px) {
  .icon-btn { width: 46px; height: 46px; font-size: 24px; border-radius: 12px; }
  .topbar-actions { gap: 6px; }
}
@media (max-width: 380px) {
  .icon-btn { width: 42px; height: 42px; font-size: 22px; }
  .topbar-actions { gap: 4px; }
}

/* ─── GAME LAYOUT ─── */
.game {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px); /* iOS: dùng small-viewport để mõ không lọt dưới thanh công cụ */
}

/* ─── RANK CARD ─── */
.rank-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Live community presence bar ── */
.live-bar {
  margin: 8px 0 10px;
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.08), rgba(40, 28, 16, 0.35));
  border: 1px solid rgba(212, 168, 87, 0.20);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.live-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.live-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.live-stat-num {
  font-weight: 700;
  color: var(--gold-light);
  font-family: "Inter", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.live-stat-lbl {
  color: var(--text-dim);
  font-size: 12px;
}
.live-stat-icon { width: 17px; height: 17px; border-radius: 5px; object-fit: cover; vertical-align: -3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.live-online .live-dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ade80;
}
/* sóng loang quanh chấm xanh: lớp riêng phóng to + mờ dần (chỉ transform/opacity), không animate box-shadow */
.live-online .live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(74, 222, 128, 0.6);
  will-change: transform, opacity;
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
/* Activity ticker — horizontal scrolling community feed */
.live-ticker-wrap {
  position: relative;
  height: 22px;
  overflow: hidden;
  border-top: 1px dashed rgba(212, 168, 87, 0.18);
  padding-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.live-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  font-size: 12px;
  color: var(--text-dim);
}
.live-ticker .ticker-item {
  flex-shrink: 0;
  padding: 0 12px;
}
.live-ticker .ticker-item strong {
  color: var(--gold-light);
  font-weight: 600;
}
.live-ticker .ticker-sep {
  color: rgba(212, 168, 87, 0.4);
  flex-shrink: 0;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.live-bar:hover .live-ticker { animation-play-state: paused; }

@media (max-width: 480px) {
  .live-bar { padding: 8px 12px; gap: 6px; }
  .live-stat { font-size: 12px; gap: 5px; }
  .live-stat-num { font-size: 14px; }
  .live-stat-lbl { font-size: 11px; }
  .live-stats { gap: 8px; }
  .live-ticker { font-size: 11.5px; animation-duration: 70s; }
  .live-ticker-wrap { height: 20px; }
}
.rank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.04), transparent);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 50% { opacity: 0.5; } }

.rank-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.rank-name {
  font-family: "Noto Serif", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(212, 168, 87, 0.4);
}
.rank-progress {
  height: 6px;
  background: rgba(212, 168, 87, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
/* Thanh luôn dài đủ 100% rồi TRƯỢT vào bằng transform (29/10/2026 — chống nóng máy): trước đây đổi
   width mỗi nhịp gõ ⇒ tính lại bố cục + vẽ lại suốt 0,5s chuyển động, gõ liên tục là không lúc nào nghỉ.
   Rãnh .rank-progress cắt tràn + bo tròn nên đầu trái vẫn tròn, đầu phải là đầu tròn của chính thanh. */
.rank-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  will-change: transform;
  box-shadow: 0 0 8px rgba(212, 168, 87, 0.5);
}
.rank-progress-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── COUNTER ─── */
.counter {
  text-align: center;
  padding: 8px 0;
}
.counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.counter-value {
  font-family: "Noto Serif", serif;
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(212, 168, 87, 0.55), 0 2px 0 rgba(40,20,8,0.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  word-break: break-all;
  padding: 0 8px;
}
.counter-rate {
  font-size: 15px;
  color: var(--gold-light);
  opacity: 0.85;
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.counter-value.pulse {
  animation: counter-pulse 0.2s ease;
}
@keyframes counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─── MO BUTTON ─── */
.mo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: relative;
  /* Push mõ + counter down so the mõ sits at Buddha's feet level
     instead of overlapping the torso. Responsive to viewport height. */
  margin-top: clamp(140px, 26vh, 280px);
}

.dui-wrap {
  position: absolute;
  top: 0;
  right: 8%;
  width: 70px;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-25deg) translateY(0);
  transform-origin: 50% 95%;
  transition: transform 0.08s ease-out;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.dui-svg {
  width: 100%;
  height: 100%;
}

/* CÚ GÕ (30/10/2026): tiếng phát NGAY lúc chạm tay, nên khung đầu tiên của hoạt cảnh phải là lúc
   đầu chùy CHẠM mõ (-44°: chồng vành trên mõ 4–12px ở 360/390px và máy tính), rồi nảy lên quá tư
   thế nghỉ và về -25°. Bản cũ đi -25° → +20° = vung RA XA mõ (cách mép 84–110px) đúng lúc "va",
   chỉ quay về sát mõ sau ~0,25 s → tiếng đi trước hình; gõ nhanh hơn ~8 nhịp/s thì không bao giờ
   thấy chùy chạm mõ. Trục quay 50% 95% = đuôi cán, đầu chùy ở trên. */
.dui-wrap.striking {
  animation: dui-strike 0.3s cubic-bezier(0.2, 0.75, 0.35, 1);
}
/* Bản sao y hệt (tên khác): mỗi nhịp gõ đổi qua lại striking ↔ striking2 là hoạt cảnh tự chạy lại —
   khỏi "void el.offsetWidth" ép tính lại bố cục cả trang mỗi nhịp (chống nóng máy, 29/10/2026). */
.dui-wrap.striking2 {
  animation: dui-strike2 0.3s cubic-bezier(0.2, 0.75, 0.35, 1);
}
@keyframes dui-strike {
  0%   { transform: rotate(-44deg) translateY(0); }
  28%  { transform: rotate(-15deg) translateY(-5px); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  100% { transform: rotate(-25deg) translateY(0); }
}
@keyframes dui-strike2 {
  0%   { transform: rotate(-44deg) translateY(0); }
  28%  { transform: rotate(-15deg) translateY(-5px); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  100% { transform: rotate(-25deg) translateY(0); }
}

@media (max-width: 380px) {
  .dui-wrap { width: 56px; height: 170px; right: 4%; }
}

.mo {
  position: relative;
  width: 280px;
  height: 280px;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  /* Prevent iOS double-tap zoom + tap delay */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.mo-area {
  /* Prevent iOS back-swipe / pull-to-refresh interfering with tap */
  touch-action: manipulation;
  overscroll-behavior: contain;
}

.mo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.6));
  transition: transform 0.06s ease-out;
}

.mo:active .mo-svg {
  transform: scale(0.92);
}

/* ─────────────────────────────────────────────
   MÕ PRIME RINGS — Hỏa Phụng / Thanh Long / Phật
   3-layer rings + 6 orbiting emojis around the mõ
   ───────────────────────────────────────────── */

.mo.mo-fire-ring,
.mo.mo-ice-ring,
.mo.mo-rainbow-ring {
  position: relative;
  overflow: visible;
}

/* Outer rotating element ring */
.mo.mo-fire-ring::before,
.mo.mo-ice-ring::before,
.mo.mo-rainbow-ring::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(4px) saturate(1.2);
  animation: mo-ring-spin 6s linear infinite;
  pointer-events: none;
}
/* Mid dashed ring */
.mo.mo-fire-ring::after,
.mo.mo-ice-ring::after,
.mo.mo-rainbow-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: -1;
  animation: mo-ring-spin 11s linear infinite reverse;
  pointer-events: none;
}

@keyframes mo-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 🔥 Hỏa Phụng — fire ring */
.mo.mo-fire-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff2020, #ff7020, #ffc040, #fff080, #ffc040, #ff7020, #ff2020,
    #ff5010, #ffaa30, #fff8b0, #ffaa30, #ff5010, #ff2020
  );
  box-shadow: 0 0 60px rgba(255, 120, 40, 0.85), 0 0 120px rgba(255, 80, 30, 0.4);
}
.mo.mo-fire-ring::after {
  border: 3px dashed rgba(255, 220, 120, 0.95);
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.85);
}

/* ❄️ Thanh Long — ice ring */
.mo.mo-ice-ring::before {
  background: conic-gradient(
    from 0deg,
    #50a8e8, #80c8ff, #c8e8ff, #ffffff, #c8e8ff, #80c8ff, #50a8e8,
    #3098d8, #80b8e8, #e0f0ff, #80b8e8, #3098d8, #50a8e8
  );
  box-shadow: 0 0 60px rgba(140, 210, 255, 0.85), 0 0 120px rgba(80, 170, 240, 0.4);
}
.mo.mo-ice-ring::after {
  border: 3px dashed rgba(220, 240, 255, 0.95);
  box-shadow: 0 0 24px rgba(180, 220, 255, 0.85);
}

/* 🌈 Phật Tối Thượng — rainbow ring */
.mo.mo-rainbow-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3b3b, #ff8a3b, #ffd93b, #3bff7e, #3bb6ff, #5b3bff, #c83bff, #ff3b3b
  );
  box-shadow: 0 0 60px rgba(255, 200, 100, 0.85), 0 0 120px rgba(200, 150, 255, 0.4);
  animation-duration: 9s;
}
.mo.mo-rainbow-ring::after {
  border: 3px dashed rgba(255, 245, 200, 0.95);
  box-shadow: 0 0 24px rgba(255, 240, 180, 0.85);
}

/* 🌌 Cửu Trùng — vòng vũ trụ (tinh vân tím–hồng, điểm vàng) */
.mo.mo-cosmic-ring { position: relative; overflow: visible; }
.mo.mo-cosmic-ring::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    #2a1b78, #6a4bd6, #c25bd6, #ffd773, #8a6bff, #1b1150,
    #4f7cff, #c25bd6, #ffe9a6, #6a4bd6, #2a1b78
  );
  filter: blur(5px) saturate(1.15);
  box-shadow: 0 0 60px rgba(140, 100, 255, 0.75), 0 0 120px rgba(200, 90, 220, 0.38);
  animation: mo-ring-spin 14s linear infinite;
}
.mo.mo-cosmic-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  border: 2px dashed rgba(255, 226, 150, 0.85);
  box-shadow: 0 0 22px rgba(190, 150, 255, 0.75);
  animation: mo-ring-spin 22s linear infinite reverse;
}

/* ─── Hạt hiệu ứng quanh mõ VIP (17/10/2026): tàn lửa / tinh thể băng / sao ───
   Thay 6 emoji bay vòng. Chỉ animate transform + opacity (rẻ cho GPU). */
.mo-vip-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; --R: 140px; }
.mo-vip-fx span {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateY(calc(var(--R) * var(--k) * -1));
}
.mo-vip-fx i {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%;
  animation-delay: var(--d);
  will-change: transform, opacity;
}
/* Tàn lửa: bắn ra ngoài theo bán kính, nhỏ dần, tắt */
.fx-ember i {
  background: radial-gradient(circle, #fff6c8 0%, #ffb347 38%, rgba(255, 90, 30, 0) 72%);
  box-shadow: 0 0 10px rgba(255, 140, 60, 0.9);
  animation: fx-ember 2.6s ease-out infinite;
}
@keyframes fx-ember {
  0%   { transform: translateY(6px) scale(var(--s)); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateY(-38px) scale(calc(var(--s) * 0.35)); opacity: 0; }
}
/* Tinh thể băng: lấp lánh hình chữ thập, trôi nhẹ */
.fx-frost i {
  background: radial-gradient(circle, #ffffff 0%, #d8f2ff 30%, rgba(160, 215, 255, 0) 70%);
  animation: fx-twinkle 2.8s ease-in-out infinite;
}
.fx-frost i::before, .fx-frost i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.4px;
  margin: -0.7px 0 0 -9px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(220, 245, 255, 0), #ffffff, rgba(220, 245, 255, 0));
}
.fx-frost i::after { transform: rotate(90deg); }
/* Sao vũ trụ: vàng nhạt, chữ thập mảnh */
.fx-star i {
  background: radial-gradient(circle, #fffbe6 0%, #ffd773 32%, rgba(200, 140, 255, 0) 72%);
  animation: fx-twinkle 3.2s ease-in-out infinite;
}
.fx-star i::before, .fx-star i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.2px;
  margin: -0.6px 0 0 -7px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 230, 160, 0), #fff3c4, rgba(255, 230, 160, 0));
}
.fx-star i::after { transform: rotate(90deg); }
.mo-vip-fx.fx-star { animation: vr-spin 90s linear infinite; }
@keyframes fx-twinkle {
  0%, 100% { transform: translateY(0) scale(calc(var(--s) * 0.55)) rotate(0deg); opacity: 0.25; }
  50%      { transform: translateY(-8px) scale(var(--s)) rotate(45deg); opacity: 1; }
}
@media (max-width: 380px) { .mo-vip-fx { --R: 120px; } }

/* ─── Vòng tràng hạt quanh mõ VIP: Hỏa Phụng / Thanh Long / Cửu Trùng (17/10/2026) ───
   Thay vòng conic nhoè + emoji bay vòng. Vòng chỉ vàng mảnh đứng yên, chuỗi hạt xoay rất chậm.
   Điện thoại / giảm chuyển động: hạt đứng yên (đỡ GPU — xem bài học iPhone treo). */
.mo-vip-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124%;
  height: 124%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}
.mo-vip-ring .vr-beads {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: vr-spin 140s linear infinite;
}
.mo-vip-ring .vr-beads.rev { animation-duration: 200s; animation-direction: reverse; }
@keyframes vr-spin { to { transform: rotate(360deg); } }
@media (hover: none) and (pointer: coarse), (max-width: 768px), (prefers-reduced-motion: reduce) {
  .mo-vip-ring .vr-beads { animation: none; }
}

/* ─── 6 orbiting emojis around the mõ ─── */
.mo-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.mo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 28px;
  filter: drop-shadow(0 0 10px currentColor);
  will-change: transform;
}
.mo.mo-fire-ring .mo-orbit { color: rgba(255, 200, 80, 0.95); }
.mo.mo-ice-ring .mo-orbit { color: rgba(180, 230, 255, 0.95); }
.mo.mo-rainbow-ring .mo-orbit { color: rgba(255, 230, 180, 0.95); }

/* 6 orbits at different radii + speeds + starting angles */
.mo-orbit-1 { animation: mo-orbit-1 11s linear infinite; }
.mo-orbit-2 { animation: mo-orbit-2 13s linear infinite reverse; font-size: 18px; }
.mo-orbit-3 { animation: mo-orbit-3 12s linear infinite; font-size: 22px; }
.mo-orbit-4 { animation: mo-orbit-4 15s linear infinite reverse; font-size: 16px; }
.mo-orbit-5 { animation: mo-orbit-5 10s linear infinite; font-size: 24px; }
.mo-orbit-6 { animation: mo-orbit-6 16s linear infinite reverse; font-size: 14px; }

@keyframes mo-orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(170px) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(170px) rotate(-360deg); }
}
@keyframes mo-orbit-2 {
  from { transform: translate(-50%, -50%) rotate(60deg) translateX(195px) rotate(-60deg); }
  to   { transform: translate(-50%, -50%) rotate(420deg) translateX(195px) rotate(-420deg); }
}
@keyframes mo-orbit-3 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(160px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(160px) rotate(-480deg); }
}
@keyframes mo-orbit-4 {
  from { transform: translate(-50%, -50%) rotate(180deg) translateX(205px) rotate(-180deg); }
  to   { transform: translate(-50%, -50%) rotate(540deg) translateX(205px) rotate(-540deg); }
}
@keyframes mo-orbit-5 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(155px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(600deg) translateX(155px) rotate(-600deg); }
}
@keyframes mo-orbit-6 {
  from { transform: translate(-50%, -50%) rotate(300deg) translateX(215px) rotate(-300deg); }
  to   { transform: translate(-50%, -50%) rotate(660deg) translateX(215px) rotate(-660deg); }
}

/* Mobile mode — keep visuals but cut GPU cost */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  /* Static rings (no rotation) — saves continuous repaint each frame */
  .mo.mo-fire-ring::before,
  .mo.mo-ice-ring::before,
  .mo.mo-rainbow-ring::before,
  .mo.mo-cosmic-ring::before {
    inset: -10px !important;
    filter: blur(1.5px) !important;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.4) !important;
    animation: none !important;
  }
  .mo.mo-fire-ring::after,
  .mo.mo-ice-ring::after,
  .mo.mo-rainbow-ring::after,
  .mo.mo-cosmic-ring::after { display: none; }
  .fx-ember i { box-shadow: none; }
  .mo-vip-fx.fx-star { animation: none; }

  /* Slow orbit speed + làm nhẹ filter drop-shadow (chi phí repaint THẬT trên
     mobile) — vừa chậm vừa rẻ hơn mỗi frame */
  .mo-orbit { animation-duration: 18s !important; filter: drop-shadow(0 0 4px currentColor) !important; }

  /* Lighter mõ shadow */
  .mo-svg { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) !important; }

  /* Lighter sparkles */
  .aura-sparkle { animation-duration: 5s !important; filter: blur(0.4px) !important; }

  /* Lighter ripple/halo on tap */
  .mo-ripple { border-width: 1.5px !important; }
}

/* Tôn trọng "giảm chuyển động" của hệ điều hành — tắt animation trang trí liên
   tục (đỡ hao pin/CPU, tốt cho người nhạy cảm chuyển động). */
@media (prefers-reduced-motion: reduce) {
  .mo-orbit,
  .mo.mo-fire-ring::before, .mo.mo-ice-ring::before, .mo.mo-rainbow-ring::before,
  .mo.mo-fire-ring::after, .mo.mo-ice-ring::after, .mo.mo-rainbow-ring::after,
  .mo.mo-cosmic-ring::before, .mo.mo-cosmic-ring::after, .mo-vip-fx, .mo-vip-fx i,
  .aura-sparkle, .hint, .buddha-halo, .btn-donate-dev, .btn-donate-dev::before { animation: none !important; }
}

/* Idle-pause: khi "treo" (body.idle do game.js bật sau ~7s không tương tác),
   ĐÓNG BĂNG mọi animation trang trí liên tục → GPU ~0 → máy mát. Chạm lại chạy ngay. */
body.idle .incense-bg,
body.idle .buddha-halo,
body.idle .buddha-halo::before,
body.idle .skin-aura-layer,
body.idle .mo-orbit,
body.idle .aura-sparkle,
body.idle .mo.mo-fire-ring::before,
body.idle .mo.mo-ice-ring::before,
body.idle .mo.mo-rainbow-ring::before,
body.idle .mo.mo-fire-ring::after,
body.idle .mo.mo-ice-ring::after,
body.idle .mo.mo-rainbow-ring::after,
body.idle .mo.mo-cosmic-ring::before,
body.idle .mo.mo-cosmic-ring::after,
body.idle .mo-vip-fx,
body.idle .mo-vip-fx i,
body.idle .mo-vip-ring .vr-beads,
body.idle .btn-donate-dev,
body.idle .btn-donate-dev::before,
body.idle .tt-ring,
body.idle .tt-card::after,
body.idle .streak-flame,
body.idle .sk-halo,
body.idle .skin-aura-layer *,
body.idle .aura-svg,
body.idle .aura-svg *,
body.idle .aura-sparkle *,
body.idle [class*="elem-"],
body.idle [class*="elem-"]::before,
body.idle [class*="elem-"]::after { animation-play-state: paused !important; }

/* Nghỉ SÂU (body.rest — game.js bật sau ~12s không tương tác): lưới an toàn đóng băng
   MỌI animation trang trí còn sót (kể cả cánh/chân/đuôi rồng-phượng-lân) → GPU nghỉ,
   máy mát, đỡ hao pin. Chạm/gõ/cuộn là chạy lại tức thì. Nhạc & chức năng KHÔNG đổi. */
body.rest *,
body.rest *::before,
body.rest *::after { animation-play-state: paused !important; }

/* NGOẠI LỆ nghỉ sâu (29/07): những thứ PHẢI SỐNG khi treo máy — cost GPU không đáng kể:
   (1) dòng thông báo chạy; (2) nhịp gõ Mõ Tự Ngân (mõ nảy, dùi vung, +N bay, gợn nước)
   — không có nó auto-gõ nhìn như CHẾT dù điểm vẫn cộng; (3) đèn LIVE trợ lý AI.
   Trang trí nặng (hào quang, linh thú, particle) VẪN đóng băng như cũ → máy vẫn mát. */
body.rest #thali-announce .ta-track,
body.rest #thali-announce .ta-dot,
body.rest .mo,
body.rest #dui-wrap, body.rest #dui-wrap *,
body.rest .float-text,
body.rest .mo-ripple,
body.rest #tl-fab, body.rest #tl-dot, body.rest #tl-dot::after,
body.rest #tl-pill .tl-ld,
body.rest .tl-live i, body.rest .tl-live i::after { animation-play-state: running !important; }

/* Thanh "Đi chùa online" trên trang chủ */
.chua-bar {
  display: flex; align-items: center; gap: 14px;
  max-width: 480px; margin: 8px auto 4px; padding: 14px 18px;
  text-decoration: none; border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,168,87,0.18), rgba(160,40,30,0.10));
  border: 1px solid rgba(212,168,87,0.4);
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chua-bar:hover { transform: translateY(-2px); border-color: #ffd87a; box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 18px rgba(212,168,87,0.22); }
.chua-bar-ic { font-size: 32px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(212,168,87,0.5)); }
.chua-bar-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chua-bar-txt strong { font-family: "Noto Serif", serif; color: #fff4d0; font-size: 17px; }
.chua-bar-txt span { color: #a89580; font-size: 12.5px; line-height: 1.4; }
.chua-bar-arrow { color: #d4a857; font-size: 22px; flex-shrink: 0; }

/* Lightweight rainbow burst — used on mobile when Phật equipped */
.mo-halo-ring.rainbow-mobile {
  inset: 30%;          /* start small, contained */
  border-width: 1.5px;
  filter: none;
  animation: mo-halo-ring-light 0.7s ease-out forwards;
}
@keyframes mo-halo-ring-light {
  0%   { transform: scale(0.4); opacity: 0.95; }
  60%  { opacity: 0.55; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Mobile — smaller orbits */
@media (max-width: 480px) {
  .mo-orbit { font-size: 22px; }
  .mo-orbit-2 { font-size: 14px; }
  .mo-orbit-4 { font-size: 13px; }
  .mo-orbit-6 { font-size: 12px; }
  @keyframes mo-orbit-1 { from { transform: translate(-50%,-50%) rotate(0deg) translateX(140px) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(140px) rotate(-360deg); } }
  @keyframes mo-orbit-2 { from { transform: translate(-50%,-50%) rotate(60deg) translateX(160px) rotate(-60deg); } to { transform: translate(-50%,-50%) rotate(420deg) translateX(160px) rotate(-420deg); } }
  @keyframes mo-orbit-3 { from { transform: translate(-50%,-50%) rotate(120deg) translateX(132px) rotate(-120deg); } to { transform: translate(-50%,-50%) rotate(480deg) translateX(132px) rotate(-480deg); } }
  @keyframes mo-orbit-4 { from { transform: translate(-50%,-50%) rotate(180deg) translateX(170px) rotate(-180deg); } to { transform: translate(-50%,-50%) rotate(540deg) translateX(170px) rotate(-540deg); } }
  @keyframes mo-orbit-5 { from { transform: translate(-50%,-50%) rotate(240deg) translateX(128px) rotate(-240deg); } to { transform: translate(-50%,-50%) rotate(600deg) translateX(128px) rotate(-600deg); } }
  @keyframes mo-orbit-6 { from { transform: translate(-50%,-50%) rotate(300deg) translateX(178px) rotate(-300deg); } to { transform: translate(-50%,-50%) rotate(660deg) translateX(178px) rotate(-660deg); } }
}

/* Mõ lún NGAY khung đầu (cùng lúc chùy chạm + tiếng), nghiêng nhẹ về phía bị gõ (vành trên bên
   phải), nảy lại rồi đứng yên. Bản cũ lún ở 35% (~63 ms) — trước cả lúc chùy cũ tới. */
.mo.struck .mo-svg {
  animation: mo-strike 0.22s cubic-bezier(0.2, 0.75, 0.35, 1);
}
.mo.struck2 .mo-svg {   /* bản sao để chạy lại không ép bố cục — xem .dui-wrap.striking2 */
  animation: mo-strike2 0.22s cubic-bezier(0.2, 0.75, 0.35, 1);
}
@keyframes mo-strike {
  0% { transform: scale(0.92) rotate(0.8deg); }
  45% { transform: scale(1.02) rotate(-0.3deg); }
  100% { transform: scale(1); }
}
@keyframes mo-strike2 {
  0% { transform: scale(0.92) rotate(0.8deg); }
  45% { transform: scale(1.02) rotate(-0.3deg); }
  100% { transform: scale(1); }
}

.mo-shadow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(4px);
  z-index: -1;
}

.mo-ripple-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.mo-ripple {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: mo-ripple 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes mo-ripple {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ─── Halo light burst on tap ─── */
.mo-halo-ring {
  position: absolute;
  inset: -10%;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-ring 1s ease-out forwards;
  filter: blur(0.4px);
}
@keyframes mo-halo-ring {
  0%   { transform: scale(0.5); opacity: 0.8; border-width: 3px; }
  60%  { opacity: 0.45; }
  100% { transform: scale(2.4); opacity: 0; border-width: 0.5px; }
}

.mo-halo-flash {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-flash 0.65s ease-out forwards;
  filter: blur(8px);
  mix-blend-mode: screen;
}
@keyframes mo-halo-flash {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

.mo-halo-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 80%;
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-beam 0.55s ease-out forwards;
  filter: blur(1px);
  mix-blend-mode: screen;
}
@keyframes mo-halo-beam {
  0%   { transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(0.3); opacity: 0; }
  30%  { opacity: 0.9; }
  100% { transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(1.4); opacity: 0; }
}

/* ─── 🌈 RAINBOW BURST — Mõ Phật Tối Thượng (siêu vip) ─── */
.mo-halo-ring.rainbow {
  border-width: 3px;
  filter: blur(0.6px);
  animation-name: mo-halo-ring-rainbow;
}
@keyframes mo-halo-ring-rainbow {
  0%   { transform: scale(0.4); opacity: 0.95; border-width: 4px; }
  30%  { transform: scale(1.2) rotate(60deg); opacity: 1; }
  60%  { transform: scale(2.0) rotate(120deg); opacity: 0.6; }
  100% { transform: scale(2.8) rotate(180deg); opacity: 0; border-width: 0.5px; }
}
.mo-halo-flash.rainbow {
  filter: blur(10px);
  animation: mo-halo-flash-rainbow 0.9s ease-out forwards;
}
@keyframes mo-halo-flash-rainbow {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  20%  { transform: scale(1.0) rotate(60deg); opacity: 0.9; }
  60%  { transform: scale(1.8) rotate(180deg); opacity: 0.5; }
  100% { transform: scale(2.6) rotate(360deg); opacity: 0; }
}
.mo-rainbow-petal {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-left: -6px; margin-top: -6px;
  opacity: 0;
  pointer-events: none;
  animation: mo-rainbow-petal 1.2s cubic-bezier(.2,.5,.3,1) forwards;
  filter: blur(0.5px);
}
@keyframes mo-rainbow-petal {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.4); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; }
}

.hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  animation: hint-fade 2s ease-in-out infinite;
}
.hint.hidden { display: none; }
@keyframes hint-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ─── FLOATING +N TEXT ─── */
.float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.float-text {
  position: absolute;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(212, 168, 87, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: float-up 1s ease-out forwards;
  white-space: nowrap;
}
@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

/* ─── STATS ─── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
}

/* ─── Unified "Cảnh giới" panel — replaces old rank-card + stats-strip ─── */
.rank-stats {
  position: relative;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1px solid rgba(212, 168, 87, 0.22);
  border-radius: 16px;
  padding: 18px 20px 14px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255, 244, 208, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Counter inside the panel — scaled slightly down vs the old standalone */
.rs-counter { position: relative; }
.rs-counter .counter-value {
  font-family: "Noto Serif", serif;
  font-size: clamp(34px, 7.5vw, 52px);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.05;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.5), 0 2px 0 rgba(40, 20, 8, 0.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  margin: 4px 0 6px;
}
.rs-counter .counter-rate {
  font-size: 13px;
  color: var(--gold-light);
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 1px;
}
.rank-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.05), transparent);
  pointer-events: none;
  animation: shimmer 4s ease-in-out infinite;
}

.rs-header { position: relative; }
.rs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
}

/* Divider — gold hairline with diamond center, temple/altar feel */
.rs-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 12px;
  height: 12px;
}
.rs-divider::before,
.rs-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(50% - 14px);
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.5), transparent);
}
.rs-divider::before { left: 0; }
.rs-divider::after  { right: 0; }
.rs-diamond {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 0;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(212, 168, 87, 0.45);
}

/* 3-column stats inside the unified panel */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
}
.rs-stat {
  padding: 6px 4px;
  text-align: center;
  position: relative;
}
.rs-stat + .rs-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 168, 87, 0.18), transparent);
}

.stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── CTA ─── */
.cta-share {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.btn-share {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 168, 87, 0.3);
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(212, 168, 87, 0.5);
}
.btn-share:active {
  transform: translateY(0);
}

/* ─── MODAL ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-in 0.2s ease;
}
.modal[hidden] { display: none !important; }
/* Payment modal must always sit above other modals */
#modal-auto, .audio-mixer-modal, .share-modal, .bg-picker-modal { z-index: 200; }

@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  background: var(--bg-mid);
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  animation: modal-card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-card-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}
.modal-header h2 {
  font-family: "Noto Serif", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  text-shadow: 0 0 18px rgba(212, 168, 87, 0.35);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ─── TABS (thanh dashboard) ─── */
.tabs {
  display: flex;
  gap: 5px;
  padding: 14px 16px 4px;
}
.tab {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 168, 87, 0.12);
  color: var(--text-dim);
  padding: 9px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tab:hover { color: var(--text); border-color: rgba(212, 168, 87, 0.3); }
.tab.active {
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.24), rgba(212, 168, 87, 0.10));
  border-color: rgba(212, 168, 87, 0.5);
  color: #fff2d4;
  box-shadow: 0 2px 10px rgba(212, 168, 87, 0.2), inset 0 1px 0 rgba(255, 244, 208, 0.15);
}
/* Bảng Vàng = tab VIP NHẤT — vàng kim nổi bật cả khi chưa chọn */
.tab[data-tab="donate"] {
  background: linear-gradient(180deg, rgba(226, 188, 110, 0.20), rgba(184, 137, 58, 0.07));
  border-color: rgba(212, 168, 87, 0.5);
  color: #f3dca2;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 244, 208, 0.12);
}
.tab[data-tab="donate"]:hover { border-color: rgba(212, 168, 87, 0.78); color: #ffeec0; }
.tab[data-tab="donate"].active {
  background: linear-gradient(168deg, #fbe7ab 0%, #ecc878 50%, #dca94f 100%);
  border-color: rgba(150, 110, 55, 0.6);
  color: #3a2410;
  box-shadow: 0 3px 16px rgba(212, 168, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
@media (max-width: 480px) {
  .tabs { gap: 4px; padding: 12px 12px 4px; }
  .tab { font-size: 11.5px; padding: 8px 4px; border-radius: 9px; }
}

/* ─── LEADERBOARD ─── */
.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 20px;
}
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.lb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.lb-row.me {
  background: rgba(212, 168, 87, 0.1);
  border: 1px solid rgba(212, 168, 87, 0.3);
}
.lb-rank {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: var(--text-dim);
}
.lb-row:nth-child(1) .lb-rank { color: #ffd700; font-size: 20px; text-shadow: 0 0 12px rgba(255, 215, 0, 0.5); }
.lb-row:nth-child(2) .lb-rank { color: #c0c0c0; font-size: 18px; text-shadow: 0 0 10px rgba(192, 192, 192, 0.4); }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; font-size: 18px; text-shadow: 0 0 10px rgba(205, 127, 50, 0.4); }
/* Bục vinh danh — top 3 nổi bật như podium */
.lb-row:nth-child(1) { background: linear-gradient(90deg, rgba(255, 215, 0, 0.13), rgba(255, 215, 0, 0.02) 60%, transparent); border: 1px solid rgba(255, 215, 0, 0.22); }
.lb-row:nth-child(2) { background: linear-gradient(90deg, rgba(200, 200, 200, 0.10), transparent 60%); border: 1px solid rgba(200, 200, 200, 0.16); }
.lb-row:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.10), transparent 60%); border: 1px solid rgba(205, 127, 50, 0.16); }

.lb-name { color: var(--text); font-weight: 500; }
/* ─── ĐỐM LỬA CHUỖI TINH TẤN theo CẤP (st1…st7) ───
   st1 <10 ngày: vàng cam mặc định · st2 ≥10: tím — HAI CẤP NÀY GIỮ NGUYÊN, đừng đổi.
   st3 ≥49: Tím Liên Hoa (nâng cấp 29/08 theo yêu cầu Sếp — đẹp hơn "aura tím" cũ).
   st4 ≥108 Tử Kim · st5 ≥180 Ngọc Bích · st6 ≥365 Kim Quang · st7 ≥1000 Kim Quang Luân.
   Emoji không đổi màu trực tiếp được → xoay sắc (hue-rotate) trên chính glyph. */
.streak-flame { display: inline-block; line-height: 1; }
.streak-flame.st2  { filter: hue-rotate(255deg) saturate(1.5) brightness(1.08); }
/* st3 Tím Liên Hoa — nâng từ "aura tím" cũ: viền trong ánh hồng sen + quầng tím rộng,
   nhịp thở CHẬM (3.4s) nên trông sang và tĩnh, không nhấp nháy như đèn báo. */
.streak-flame.st3 {
  filter: hue-rotate(272deg) saturate(1.62) brightness(1.16)
          drop-shadow(0 0 3px rgba(255, 214, 245, .95))
          drop-shadow(0 0 9px rgba(206, 138, 255, .8))
          drop-shadow(0 0 18px rgba(140, 80, 225, .45));
  animation: streakAura 3.4s ease-in-out infinite;
}
@keyframes streakAura {
  0%, 100% { transform: scale(1);
             filter: hue-rotate(272deg) saturate(1.6) brightness(1.13)
                     drop-shadow(0 0 3px rgba(255, 214, 245, .85))
                     drop-shadow(0 0 8px rgba(200, 132, 255, .7))
                     drop-shadow(0 0 15px rgba(140, 80, 225, .35)); }
  50%      { transform: scale(1.05);
             filter: hue-rotate(272deg) saturate(1.7) brightness(1.24)
                     drop-shadow(0 0 6px rgba(255, 230, 250, 1))
                     drop-shadow(0 0 14px rgba(216, 158, 255, .95))
                     drop-shadow(0 0 26px rgba(155, 95, 240, .6)); }
}
/* Tử Kim — tím ánh vàng, hào quang dày hơn hẳn cấp 3 */
.streak-flame.st4 {
  filter: hue-rotate(285deg) saturate(1.75) brightness(1.2)
          drop-shadow(0 0 5px rgba(235, 175, 255, 1)) drop-shadow(0 0 14px rgba(255, 200, 110, .6));
  animation: streakTuKim 2.4s ease-in-out infinite;
}
@keyframes streakTuKim {
  0%, 100% { transform: scale(1);    filter: hue-rotate(285deg) saturate(1.7) brightness(1.16)
                     drop-shadow(0 0 4px rgba(230, 170, 255, .9)) drop-shadow(0 0 11px rgba(255, 195, 105, .5)); }
  50%      { transform: scale(1.07); filter: hue-rotate(285deg) saturate(1.85) brightness(1.28)
                     drop-shadow(0 0 8px rgba(245, 195, 255, 1)) drop-shadow(0 0 20px rgba(255, 210, 120, .75)); }
}
/* Ngọc Bích — xanh ngọc trong, hào quang lạnh */
.streak-flame.st5 {
  filter: hue-rotate(128deg) saturate(1.7) brightness(1.2)
          drop-shadow(0 0 5px rgba(150, 255, 220, 1)) drop-shadow(0 0 15px rgba(30, 200, 150, .6));
  animation: streakNgoc 2.6s ease-in-out infinite;
}
@keyframes streakNgoc {
  0%, 100% { transform: scale(1);    filter: hue-rotate(128deg) saturate(1.65) brightness(1.16)
                     drop-shadow(0 0 4px rgba(150, 255, 220, .9)) drop-shadow(0 0 12px rgba(30, 200, 150, .5)); }
  50%      { transform: scale(1.08); filter: hue-rotate(128deg) saturate(1.8) brightness(1.3)
                     drop-shadow(0 0 9px rgba(185, 255, 235, 1)) drop-shadow(0 0 22px rgba(40, 225, 170, .8)); }
}
/* Kim Quang / Kim Quang Luân — vàng trắng chói, đỉnh thang */
.streak-flame.st6, .streak-flame.st7 {
  filter: saturate(.55) brightness(1.45)
          drop-shadow(0 0 5px rgba(255, 245, 205, 1)) drop-shadow(0 0 16px rgba(255, 200, 80, .8));
  animation: streakKim 2.2s ease-in-out infinite;
}
.streak-flame.st7 { animation-duration: 1.6s; }
@keyframes streakKim {
  0%, 100% { transform: scale(1);   filter: saturate(.55) brightness(1.38)
                     drop-shadow(0 0 4px rgba(255, 245, 205, .95)) drop-shadow(0 0 13px rgba(255, 200, 80, .65)); }
  50%      { transform: scale(1.1); filter: saturate(.5) brightness(1.6)
                     drop-shadow(0 0 10px rgba(255, 252, 235, 1)) drop-shadow(0 0 26px rgba(255, 215, 110, .95)); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-flame.st3, .streak-flame.st4, .streak-flame.st5,
  .streak-flame.st6, .streak-flame.st7 { animation: none; }
}

/* Huy hiệu chuỗi cạnh tên ở BXH — đổi màu theo cấp để người khác NHÌN THẤY đẳng cấp */
/* NGỌN LỬA TINH TẤN v4 (21/10/2026): chip BXH màu dịu theo giai đoạn sen — cam, lá xanh, hồng sen,
   vàng hào quang, trắng ngọc, vàng kim liên, ngũ sắc nhạt. Không kim loại, không vệt sáng chạy (bớt "game"). */
.lb-streak { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 800; line-height: 18px; color: #ffc08a; background: rgba(255,150,90,.12); border: 1px solid rgba(255,160,100,.3); border-radius: 999px; padding: 0 7px 0 1px; margin-left: 5px; vertical-align: middle; }
.lb-streak .se { width: 18px; height: 18px; }
.lb-streak.st2 { color: #c8f0b4; background: rgba(110,190,100,.14); border-color: rgba(140,210,130,.38); }
.lb-streak.st3 { color: #ffd0e2; background: rgba(240,130,175,.13); border-color: rgba(255,170,205,.38); }
.lb-streak.st4 { color: #ffd0e2; background: rgba(240,130,175,.17); border-color: rgba(255,170,205,.48); }
.lb-streak.st5 { color: #ffd9e8; background: rgba(240,130,175,.2); border-color: rgba(255,185,215,.58); box-shadow: 0 0 8px rgba(255,160,200,.25); }
.lb-streak.st6 { color: #ffe0ee; background: rgba(240,130,175,.24); border-color: rgba(255,200,225,.7); box-shadow: 0 0 10px rgba(255,170,205,.32); }
.lb-streak.st7 { color: #fff0c8; background: rgba(255,200,110,.18); border-color: rgba(255,225,160,.6); box-shadow: 0 0 10px rgba(255,210,130,.32); }
.lb-streak.st8 { color: #f0eaff; background: rgba(200,185,255,.16); border-color: rgba(225,215,255,.6); box-shadow: 0 0 10px rgba(215,200,255,.32); }
.lb-streak.st9 { color: #fff3cc; background: rgba(255,205,100,.22); border-color: rgba(255,225,150,.72); box-shadow: 0 0 12px rgba(255,210,120,.4); }
.lb-streak.st10 { color: #fffaf0; background: linear-gradient(90deg, rgba(255,200,225,.22), rgba(255,235,170,.24), rgba(190,235,255,.22)); border-color: rgba(255,245,220,.8); box-shadow: 0 0 12px rgba(255,235,190,.45); }

/* ══ THẺ CHUỖI TINH TẤN Ở TRANG CHỦ ══
   Một bộ luật chung, mỗi cấp chỉ đổi 5 biến màu → thêm cấp sau này là thêm 1 dòng.
   Cấp 1–3 để mộc (đúng như giao diện cũ); hào quang/animation chỉ bật từ cấp 4. */
.tt-card {
  --tt-a: #ffd97a; --tt-b: #f0872a;
  --tt-bg: rgba(240,135,42,.10); --tt-bd: rgba(240,170,80,.34); --tt-gl: rgba(255,180,60,.26);
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 12px 0 0; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--tt-bg), rgba(255,255,255,.02) 62%);
  border: 1px solid var(--tt-bd); box-shadow: 0 6px 20px rgba(0,0,0,.28);
  cursor: pointer; text-align: left; font-family: inherit; overflow: hidden;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.tt-card[hidden] { display: none; }
.tt-card:active { transform: scale(.99); }
.tt-card.st2  { --tt-a: #d8f5c4; --tt-b: #6fc25e; --tt-bg: rgba(110,190,100,.12); --tt-bd: rgba(140,210,130,.4);  --tt-gl: rgba(150,215,130,.3); }
.tt-card.st3  { --tt-a: #ffd6e6; --tt-b: #e97aa8; --tt-bg: rgba(240,130,175,.12); --tt-bd: rgba(255,170,205,.42); --tt-gl: rgba(255,170,205,.3); }
.tt-card.st4  { --tt-a: #ffd6e6; --tt-b: #e5729f; --tt-bg: rgba(240,130,175,.15); --tt-bd: rgba(255,170,205,.5);  --tt-gl: rgba(255,170,205,.36); }
.tt-card.st5  { --tt-a: #ffe0ec; --tt-b: #e06d9c; --tt-bg: rgba(240,130,175,.18); --tt-bd: rgba(255,185,215,.56); --tt-gl: rgba(255,170,205,.42); }
.tt-card.st6  { --tt-a: #ffe6f0; --tt-b: #db6896; --tt-bg: rgba(240,130,175,.2);  --tt-bd: rgba(255,195,220,.65); --tt-gl: rgba(255,175,210,.48); }
.tt-card.st7  { --tt-a: #fff0c8; --tt-b: #e8a83a; --tt-bg: rgba(255,200,110,.16); --tt-bd: rgba(255,225,160,.6);  --tt-gl: rgba(255,210,130,.5); }
.tt-card.st8  { --tt-a: #f6f2ff; --tt-b: #a796e6; --tt-bg: rgba(200,185,255,.15); --tt-bd: rgba(225,215,255,.6);  --tt-gl: rgba(215,200,255,.5); }
.tt-card.st9  { --tt-a: #fff6d6; --tt-b: #e8b03a; --tt-bg: rgba(255,205,100,.2);  --tt-bd: rgba(255,225,150,.75); --tt-gl: rgba(255,215,120,.58); }
.tt-card.st10 { --tt-a: #fffdf2; --tt-b: #e8c060; --tt-bg: rgba(255,235,190,.18); --tt-bd: rgba(255,245,220,.85); --tt-gl: rgba(255,235,190,.66); }
.tt-ring {
  position: absolute; inset: -60% -20%; pointer-events: none;
  background: radial-gradient(48% 52% at 16% 50%, var(--tt-gl), transparent 70%);
}
.tt-card.st6 .tt-ring, .tt-card.st7 .tt-ring, .tt-card.st8 .tt-ring,
.tt-card.st9 .tt-ring, .tt-card.st10 .tt-ring { animation: ttBreath 4.5s ease-in-out infinite; }
.tt-card.st4 .tt-ring, .tt-card.st5 .tt-ring { animation: ttBreath 6s ease-in-out infinite; }   /* nhẹ hơn cấp 6 */
@keyframes ttBreath { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* (21/10/2026) Bỏ vệt sáng quét ngang thẻ ở cấp cao — ngọn lửa đang thiền cần tĩnh, bớt "game". */
/* Đèn tinh tấn (SVG) tự có hào quang/vòng theo cấp → bỏ khung tròn cũ của emoji */
.tt-flame {
  position: relative; flex: none; width: 52px; height: 52px; margin: -4px -2px -4px -4px;
  display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 0;
}
.tt-main { position: relative; flex: 1; min-width: 0; }
.tt-top { display: block; font-size: 13px; color: #e8d9bd; font-weight: 600; }
.tt-top b {
  font-size: 20px; font-weight: 900; margin-right: 4px; vertical-align: -1px;
  background: linear-gradient(180deg, var(--tt-a), var(--tt-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tt-tier {
  display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; color: #1d1206; white-space: nowrap;
  background: linear-gradient(180deg, var(--tt-a), var(--tt-b));
}
.tt-card.st5 .tt-tier, .tt-card.st6 .tt-tier, .tt-card.st7 .tt-tier, .tt-card.st8 .tt-tier,
.tt-card.st9 .tt-tier, .tt-card.st10 .tt-tier { box-shadow: 0 0 12px var(--tt-gl); }
.tt-next { display: inline-flex; vertical-align: -4px; line-height: 0; margin: 0 1px; filter: saturate(.75); opacity: .9; }
.tt-sub b { color: var(--tt-a); }
.tt-bar { display: block; height: 5px; margin: 8px 0 5px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.tt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tt-b), var(--tt-a)); }
.tt-sub { display: block; font-size: 11px; color: #bda887; line-height: 1.4; }
.tt-go { flex: none; position: relative; color: var(--tt-a); font-size: 22px; font-weight: 700; opacity: .75; }
@media (max-width: 400px) {
  .tt-card { gap: 10px; padding: 11px 12px; }
  .tt-top { font-size: 12px; } .tt-tier { margin-left: 5px; padding: 2px 7px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-ring, .tt-card.st8::after, .tt-card.st9::after, .tt-card.st10::after { animation: none; }
  .tt-card.st8::after, .tt-card.st9::after, .tt-card.st10::after { display: none; }
}

/* ══ Modal chuỗi: hero + thang cấp (bổ sung cho .sk-* khai trong index.html) ══ */
.sk-hero { position: relative; overflow: hidden; }
.sk-halo { position: absolute; inset: 0; pointer-events: none; }
/* màn chuỗi theo 10 cấp đèn (20/10/2026) */
.sk-hero.st2 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(150,215,130,0.28), transparent 72%); animation: ttBreath 6s ease-in-out infinite; }
.sk-hero.st3 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,170,205,0.28), transparent 72%); animation: ttBreath 6s ease-in-out infinite; }
.sk-hero.st4 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,170,205,0.28), transparent 72%); animation: ttBreath 6s ease-in-out infinite; }
.sk-hero.st5 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,165,205,0.36), transparent 72%); animation: ttBreath 6s ease-in-out infinite; }
.sk-hero.st6 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,175,210,0.36), transparent 72%); animation: ttBreath 4.5s ease-in-out infinite; }
.sk-hero.st7 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,210,130,0.44), transparent 72%); animation: ttBreath 4.5s ease-in-out infinite; }
.sk-hero.st8 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(220,210,255,0.44), transparent 72%); animation: ttBreath 3.6s ease-in-out infinite; }
.sk-hero.st9 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,215,120,0.44), transparent 72%); animation: ttBreath 3.6s ease-in-out infinite; }
.sk-hero.st10 .sk-halo { background: radial-gradient(60% 58% at 50% 10%, rgba(255,235,190,0.44), transparent 72%); animation: ttBreath 3.6s ease-in-out infinite; }
.sk-hero .sk-flame, .sk-hero .sk-days, .sk-hero .sk-days-l, .sk-hero .sk-chips, .sk-tier-name { position: relative; }
.sk-hero.st2 .sk-days { background: linear-gradient(180deg, #d8f5c4, #6fc25e); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st3 .sk-days { background: linear-gradient(180deg, #ffd6e6, #e97aa8); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st4 .sk-days { background: linear-gradient(180deg, #ffd6e6, #e5729f); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st5 .sk-days { background: linear-gradient(180deg, #ffe0ec, #e06d9c); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st6 .sk-days { background: linear-gradient(180deg, #ffe6f0, #db6896); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st7 .sk-days { background: linear-gradient(180deg, #fff0c8, #e8a83a); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st8 .sk-days { background: linear-gradient(180deg, #f6f2ff, #a796e6); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st9 .sk-days { background: linear-gradient(180deg, #fff6d6, #e8b03a); -webkit-background-clip: text; background-clip: text; }
.sk-hero.st10 .sk-days { background: linear-gradient(180deg, #fffdf2, #e8c060); -webkit-background-clip: text; background-clip: text; }
.sk-tier-name { margin-top: 8px; font-size: 12.5px; font-weight: 800; color: #f0dcb0; letter-spacing: .3px; }
.sk-tier-name span { display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #e6d3ad; background: rgba(255,255,255,.07); border: 1px solid rgba(212,168,87,.3); }
.sk-ladder-wrap { margin: 16px 4px 0; padding: 12px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(212,168,87,.16); }
.sk-ladder-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #a8926a; text-align: center; }
.sk-tier-next { margin-top: 5px; font-size: 12px; color: #d8c19a; text-align: center; }
.sk-tier-next b { color: #ffc061; }
.sk-ladder { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.sk-rung { flex: 1 0 68px; text-align: center; padding: 8px 4px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); opacity: .42; }
.sk-rung.on { opacity: 1; background: rgba(255,255,255,.07); border-color: rgba(212,168,87,.35); }
.sk-rung.now { border-color: rgba(255,200,110,.8); box-shadow: 0 0 12px rgba(255,190,90,.28); }
.sk-rung:not(.on) .sk-r-f { filter: grayscale(1) brightness(.75); }
.sk-rung:not(.on) .streak-flame { animation: none; }
.sk-r-f { display: flex; justify-content: center; font-size: 17px; line-height: 0; }
.sk-r-n { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 800; color: #e6d3ad; line-height: 1.15; }
.sk-r-d { display: block; margin-top: 1px; font-size: 9px; color: #b09870; }
.lb-tier { font-size: 11px; color: var(--text-faint); }
.lb-score {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--gold-light);
}
/* keyframe giữ lại — tab Bảng Vàng donate (.db-row--new) còn dùng */
@keyframes lbSweep { 0%, 100% { left: -55%; } 55% { left: 130%; } }

/* ─── BẢNG VÀNG (tab tri ân trong modal xếp hạng) — mọi mạnh thường quân là thẻ vàng VIP ─── */
.db-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(212,168,87,0.3);
  background: linear-gradient(135deg, rgba(212,168,87,0.14), rgba(212,168,87,0.04) 60%, rgba(255,215,0,0.07));
  box-shadow: inset 0 0 20px rgba(212,168,87,0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.db-row:hover {
  transform: translateY(-1px);
  border-color: rgba(212,168,87,0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 14px rgba(212,168,87,0.12);
}
.db-icon { font-size: 20px; text-align: center; filter: drop-shadow(0 0 7px rgba(212,168,87,0.65)); }
.db-info { min-width: 0; }
.db-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
.db-name-text {
  font-weight: 700;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #e9d6a0; /* fallback nếu không hỗ trợ background-clip:text */
  background: linear-gradient(90deg, #e9d6a0 0%, #d4a857 30%, #fff3cf 50%, #d4a857 70%, #e9d6a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 6.5s linear infinite;
}
.db-prov { color: var(--gold); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.db-sub { font-size: 10.5px; color: var(--text-dim); font-style: italic; margin-top: 2px; }
/* ── 2 vị trí đầu Bảng Vàng — thẻ vàng DỌC, sang trọng, nổi bật (thay layout 2-khung-ngang) ── */
.db-row.db-top {
  grid-template-columns: 48px 1fr; padding: 14px 15px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,224,150,0.62);
  background:
    linear-gradient(135deg, rgba(255,224,150,0.16), rgba(212,168,87,0.05) 55%, rgba(255,215,0,0.09)),
    linear-gradient(180deg, rgba(58,42,24,0.62), rgba(30,20,10,0.62));
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 22px rgba(255,214,130,0.18), inset 0 1px 0 rgba(255,245,210,0.35);
}
.db-row.db-top::after { content: ''; position: absolute; inset: 3px; border-radius: 12px; border: 1px solid rgba(231,196,120,0.28); pointer-events: none; }
.db-row.db-top > * { position: relative; z-index: 1; }
.db-row.db-top-1 { border-color: rgba(255,232,170,0.8); box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 28px rgba(255,214,130,0.26), inset 0 1px 0 rgba(255,245,210,0.44); }
.db-row.db-top-1::before {
  content: ''; position: absolute; top: -40%; left: -60%; width: 40%; height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255,248,214,0.18), transparent);
  transform: skewX(-18deg); animation: lbSweep 6.5s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.db-crown { font-size: 27px; text-align: center; line-height: 1; filter: drop-shadow(0 0 9px rgba(255,214,130,0.7)); }
.db-name-lux {
  font-family: "Cormorant Garamond","Noto Serif",serif; font-weight: 700; font-size: 20px; letter-spacing: .2px; line-height: 1.12;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3cf;
  background: linear-gradient(90deg, #e7cf95, #d4a857 32%, #fff6d6 50%, #d4a857 68%, #e7cf95);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.db-sub-lux {
  font-size: 10.5px; font-weight: 700; font-style: normal; color: #2c1f0c; display: inline-block; margin-top: 5px;
  background: linear-gradient(90deg, #ffe9b0, #d8b262); padding: 2px 11px; border-radius: 999px; box-shadow: 0 2px 7px rgba(0,0,0,0.25);
}
.db-row.db-top-2 .db-sub-lux { background: linear-gradient(90deg, #f0e0c0, #cbb483); }
/* Người vừa hỷ cúng — sáng hơn + sao lấp lánh + dải vàng quét */
.db-row--new {
  border-color: rgba(255,224,150,0.6);
  background: linear-gradient(135deg, rgba(255,224,150,0.18), rgba(212,168,87,0.06) 60%, rgba(255,215,0,0.10));
  box-shadow: 0 0 20px rgba(255,224,150,0.2), inset 0 0 22px rgba(255,224,150,0.05);
}
.db-row--new .db-icon { animation: kbSparkle 1.9s ease-in-out infinite; }
.db-row--new::before {
  content: '';
  position: absolute; top: -30%; left: -55%;
  width: 42%; height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255,246,205,0.22), transparent);
  transform: skewX(-18deg);
  animation: lbSweep 5.5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.db-row--new > * { position: relative; z-index: 1; }
.db-new-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  color: #2a1e0c;
  background: linear-gradient(90deg, #f6e6b4, #d4a857);
  padding: 1px 7px; border-radius: 999px;
  vertical-align: middle;
}
/* ─── 2 KHUNG VIP Bảng Vàng: 👑 Đại Thí Chủ + 🪔 Vừa Thắp Đèn (sang trọng, gọn, chuyên nghiệp) ─── */
.db-top2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 6px 0 13px; }
.db-top2-single { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
.db-top2-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 14px 11px 12px; border-radius: 15px; min-width: 0;
  border: 1px solid rgba(231,196,120,0.5);
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(255,238,190,0.16), transparent 62%),
    linear-gradient(158deg, #4a371d 0%, #382816 50%, #2a1e10 100%);
  box-shadow: 0 9px 26px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,238,200,0.28);
}
.db-top2-card::after {                 /* viền vàng kim mảnh bên trong (gold-leaf frame) */
  content: ''; position: absolute; inset: 3px; border-radius: 12px;
  border: 1px solid rgba(231,196,120,0.26); pointer-events: none;
}
.db-top2-card > * { position: relative; z-index: 1; }
.db-top2-most {
  border-color: rgba(255,224,150,0.72);
  box-shadow: 0 11px 30px rgba(0,0,0,0.52), 0 0 22px rgba(255,214,130,0.20), inset 0 1px 0 rgba(255,245,210,0.40);
}
.db-top2-most::before {                /* vệt sáng quét chậm, sang trọng */
  content: ''; position: absolute; top: -40%; left: -60%; width: 42%; height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255,248,214,0.16), transparent);
  transform: skewX(-18deg); animation: lbSweep 6.5s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.db-top2-label {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #2c1f0c; background: linear-gradient(90deg, #ffe9b0, #d8b262);
  padding: 2.5px 12px; border-radius: 999px; margin-bottom: 7px; box-shadow: 0 2px 7px rgba(0,0,0,0.28);
}
.db-top2-recent .db-top2-label { color: #0c2c18; background: linear-gradient(90deg, #c4ead2, #84c79b); }
.db-top2-name {
  font-family: "Cormorant Garamond","Noto Serif",serif;
  font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3cf;
  background: linear-gradient(90deg, #e7cf95, #d4a857 32%, #fff6d6 50%, #d4a857 68%, #e7cf95);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 7s linear infinite;
}
.db-top2-recent .db-top2-name { background: none; -webkit-text-fill-color: #eaf7ef; color: #eaf7ef; animation: none; }
.db-top2-prov { font-size: 11px; color: #e7c478; margin-top: 3px; font-style: italic; }
.db-top2-recent .db-top2-prov { color: #9fd9b0; }
@media (prefers-reduced-motion: reduce) {
  .db-name-text, .db-row--new .db-icon, .db-row--new::before, .db-top2-name, .db-top2-most::before { animation: none; }
}
.loading { text-align: center; padding: 40px 20px; color: var(--text-dim); }

.my-rank { text-align: center; color: var(--text-dim); }
.my-rank strong { color: var(--gold); }

/* ─── SKINS ─── */
.skin-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.skin-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 14px;
  padding: 14px 10px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.skin-card:hover {
  border-color: rgba(212, 168, 87, 0.4);
  transform: translateY(-2px);
}
.skin-card.equipped {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.1);
}
.skin-card.equipped::after {
  content: "✓ Đang dùng";
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.skin-card.locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.skin-card.exclusive {
  background: linear-gradient(145deg, rgba(255,232,144,0.08), rgba(212,168,87,0.04));
  border-color: rgba(255,232,144,0.4);
  box-shadow: 0 0 24px rgba(255,232,144,0.15);
}
.skin-card.exclusive.locked {
  filter: none;
  opacity: 0.85;
  background: linear-gradient(145deg, rgba(255,232,144,0.08), rgba(80,40,40,0.5));
}
.skin-card.exclusive .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255,232,144,0.18), rgba(0,0,0,0.3));
  box-shadow: inset 0 0 20px rgba(255,232,144,0.15);
}

/* ─── Premium tier visual effects (subtle, dignified, not flashy) ─── */
.skin-card { overflow: hidden; }

/* Premium animated emoji float */
.skin-emoji-anim {
  display: inline-block;
  animation: skin-float 4s ease-in-out infinite;
}
@keyframes skin-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-3px) rotate(1deg); }
}

/* Tier badge — top-right corner */
.skin-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4a857, #b8893a);
  color: #1a0e07;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.tier-vip .skin-badge {
  background: linear-gradient(135deg, #c8d4f0, #8a9cc8);
  color: #1a1a2a;
}
.tier-supreme .skin-badge {
  background: linear-gradient(135deg, #fff8d8, #ffd460);
  color: #4a2c10;
  box-shadow: 0 2px 8px rgba(255, 212, 96, 0.5);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255, 212, 96, 0.5); }
  50%      { box-shadow: 0 2px 14px rgba(255, 212, 96, 0.85); }
}

/* Standard tier — subtle warm border glow */
.tier-standard {
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.06), rgba(212, 168, 87, 0.02));
  border-color: rgba(212, 168, 87, 0.28);
}
.tier-standard:hover { border-color: rgba(212, 168, 87, 0.5); }

/* Premium (100K-200K): soft halo + slow rotating golden ring */
.tier-premium {
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.1), rgba(255, 232, 144, 0.04));
  border: 1.5px solid rgba(212, 168, 87, 0.4);
}
.tier-premium .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 232, 144, 0.18), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 18px rgba(255, 232, 144, 0.2), 0 0 14px rgba(212, 168, 87, 0.25);
  position: relative;
}
.tier-premium .skin-preview::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(255, 232, 144, 0.4);
  border-radius: 14px;
  animation: ring-spin 14s linear infinite;
  pointer-events: none;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* VIP (200K-500K): dual ring + sparkle particles + shimmer sweep */
.tier-vip {
  background: linear-gradient(145deg, rgba(168, 200, 232, 0.08), rgba(212, 168, 87, 0.06));
  border: 1.5px solid rgba(212, 168, 87, 0.55);
  box-shadow: 0 0 24px rgba(212, 168, 87, 0.18);
}
.tier-vip .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 232, 144, 0.22), rgba(50, 30, 50, 0.5));
  box-shadow: inset 0 0 22px rgba(255, 232, 144, 0.28), 0 0 18px rgba(212, 168, 87, 0.4);
  position: relative;
  overflow: visible;
}
.tier-vip .skin-preview::before,
.tier-vip .skin-preview::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
}
.tier-vip .skin-preview::before {
  border: 1.5px solid rgba(255, 232, 144, 0.6);
  animation: ring-spin 16s linear infinite;
}
.tier-vip .skin-preview::after {
  inset: -8px;
  border: 1px dashed rgba(212, 168, 87, 0.45);
  animation: ring-spin 24s linear infinite reverse;
}
.tier-vip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 240, 200, 0.18) 50%, transparent 70%);
  animation: card-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes card-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* Supreme (≥500K + Phật Tối Thượng): full effect — gold halo + breathing glow + falling petals */
.tier-supreme {
  background: linear-gradient(145deg, rgba(255, 240, 200, 0.12), rgba(255, 200, 100, 0.06));
  border: 2px solid rgba(255, 232, 144, 0.7);
  box-shadow: 0 0 32px rgba(255, 212, 96, 0.3), inset 0 0 24px rgba(255, 232, 144, 0.08);
  animation: supreme-breathe 4s ease-in-out infinite;
}
@keyframes supreme-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 212, 96, 0.28), inset 0 0 20px rgba(255, 232, 144, 0.08); }
  50%      { box-shadow: 0 0 44px rgba(255, 212, 96, 0.5), inset 0 0 28px rgba(255, 232, 144, 0.16); }
}
.tier-supreme .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 244, 208, 0.32), rgba(80, 40, 20, 0.6));
  box-shadow: inset 0 0 28px rgba(255, 232, 144, 0.5), 0 0 28px rgba(255, 200, 100, 0.55);
  position: relative;
  overflow: visible;
}
.tier-supreme .skin-preview::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid rgba(255, 232, 144, 0.7);
  animation: ring-spin 12s linear infinite;
  pointer-events: none;
}
.tier-supreme .skin-preview::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 200, 100, 0.55);
  animation: ring-spin 22s linear infinite reverse;
  pointer-events: none;
}
.tier-supreme .skin-emoji-anim {
  filter: drop-shadow(0 0 12px rgba(255, 212, 96, 0.7)) drop-shadow(0 4px 8px rgba(80, 40, 10, 0.4));
  animation: supreme-float 4s ease-in-out infinite;
}
@keyframes supreme-float {
  0%, 100% { transform: translateY(0) scale(1) rotate(-2deg); }
  50%      { transform: translateY(-4px) scale(1.05) rotate(2deg); }
}
.tier-supreme::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 2px at 22% 38%, rgba(255, 232, 144, 0.85) 50%, transparent 60%),
    radial-gradient(circle 2px at 78% 28%, rgba(255, 232, 144, 0.7) 50%, transparent 60%),
    radial-gradient(circle 1.5px at 38% 72%, rgba(255, 232, 144, 0.8) 50%, transparent 60%),
    radial-gradient(circle 2px at 88% 78%, rgba(255, 232, 144, 0.7) 50%, transparent 60%),
    radial-gradient(circle 1.5px at 12% 82%, rgba(255, 232, 144, 0.85) 50%, transparent 60%);
  pointer-events: none;
  animation: supreme-sparkle 3s ease-in-out infinite alternate;
}
@keyframes supreme-sparkle {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}
/* Thẻ TỐI THƯỢNG đang dùng: ::after vừa là lớp lấp lánh (inset:0) vừa là nhãn "✓ Đang dùng"
   → nhãn bị kéo giãn thành mảng oval vàng che cả thẻ. Trả nhãn về góc phải trên. (17/10/2026) */
.skin-card.tier-supreme.equipped::after {
  inset: auto;
  top: 6px;
  right: 6px;
  background: var(--gold);
  animation: none;
  opacity: 1;
}

/* Equipped tier extras — golden inner ring */
.skin-card.tier-premium.equipped,
.skin-card.tier-vip.equipped,
.skin-card.tier-supreme.equipped {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(255, 232, 144, 0.16), rgba(212, 168, 87, 0.08));
}
.skin-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
  position: relative;
}
.skin-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  animation: preview-float 4s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}
@keyframes preview-float {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.06) translateY(-2px); }
}

/* ─── Element rings around skin preview (fire / ice / rainbow) ─── */
.skin-preview.has-fire-ring,
.skin-preview.has-ice-ring,
.skin-preview.has-rainbow-ring {
  overflow: visible;
  background: rgba(0, 0, 0, 0.5);
}
.skin-preview.has-fire-ring::before,
.skin-preview.has-ice-ring::before,
.skin-preview.has-rainbow-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: 0;
  animation: ring-spin-fast 6s linear infinite;
  filter: blur(2px);
}
.skin-preview.has-fire-ring::after,
.skin-preview.has-ice-ring::after,
.skin-preview.has-rainbow-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 0;
  animation: ring-spin-slow 12s linear infinite reverse;
}
.skin-preview.has-fire-ring,
.skin-preview.has-ice-ring,
.skin-preview.has-rainbow-ring {
  border-radius: 50%;
}

/* 🔥 Fire ring (Hỏa Phụng) */
.skin-preview.has-fire-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3030, #ff8030, #ffd040, #ff8030, #ff3030,
    #ff5020, #ffaa30, #fff080, #ffaa30, #ff5020, #ff3030
  );
  box-shadow: 0 0 28px rgba(255, 120, 40, 0.8), inset 0 0 20px rgba(255, 80, 30, 0.6);
}
.skin-preview.has-fire-ring::after {
  border: 2px solid rgba(255, 200, 80, 0.9);
  box-shadow: 0 0 16px rgba(255, 200, 80, 0.7);
}

/* ❄️ Ice ring (Thanh Long) */
.skin-preview.has-ice-ring::before {
  background: conic-gradient(
    from 0deg,
    #80d0ff, #b0e0ff, #ffffff, #b0e0ff, #80d0ff,
    #50a8e8, #80c8ff, #e0f0ff, #80c8ff, #50a8e8, #80d0ff
  );
  box-shadow: 0 0 28px rgba(120, 200, 255, 0.8), inset 0 0 20px rgba(80, 170, 240, 0.6);
}
.skin-preview.has-ice-ring::after {
  border: 2px solid rgba(200, 230, 255, 0.95);
  box-shadow: 0 0 16px rgba(180, 220, 255, 0.8);
}

/* 🌈 Rainbow ring (Phật Tối Thượng) */
.skin-preview.has-rainbow-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3b3b, #ff8a3b, #ffd93b, #3bff7e, #3bb6ff, #5b3bff, #c83bff, #ff3b3b
  );
  box-shadow: 0 0 32px rgba(255, 200, 100, 0.9), inset 0 0 24px rgba(255, 200, 100, 0.5);
  animation-duration: 8s;
}
.skin-preview.has-rainbow-ring::after {
  border: 2px solid rgba(255, 255, 200, 0.95);
  box-shadow: 0 0 18px rgba(255, 240, 180, 0.85);
}

@keyframes ring-spin-fast {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ring-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Enlarge preview slightly when has ring (for visual breathing room) */
.tier-supreme .skin-preview.has-fire-ring,
.tier-supreme .skin-preview.has-ice-ring,
.tier-supreme .skin-preview.has-rainbow-ring {
  width: 90px; height: 90px;
}

/* ─────────────────────────────────────────────
   PRIME skins — Hỏa Phụng & Thanh Long
   3-layer rings + orbiting particles + breathing card aura
   ───────────────────────────────────────────── */

.skin-card.prime-skin {
  padding-top: 22px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

/* Animated fire/ice gradient border on card */
.skin-card.prime-skin {
  border-width: 2px;
}
.skin-card.prime-fire-card {} /* placeholder for variant */

.skin-card.prime-skin[data-skin="phung"] {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 100, 30, 0.18), transparent 70%),
    linear-gradient(165deg, rgba(60, 12, 8, 0.5), rgba(20, 8, 6, 0.95));
  border-color: rgba(255, 130, 60, 0.65);
  box-shadow:
    0 0 32px rgba(255, 100, 30, 0.35),
    inset 0 0 20px rgba(255, 80, 30, 0.12);
  animation: prime-fire-breathe 3.2s ease-in-out infinite;
}
@keyframes prime-fire-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 100, 30, 0.32), inset 0 0 18px rgba(255, 80, 30, 0.1); }
  50%      { box-shadow: 0 0 48px rgba(255, 130, 50, 0.6), inset 0 0 26px rgba(255, 100, 40, 0.18); }
}

.skin-card.prime-skin[data-skin="haclong"] {
  background:
    radial-gradient(circle at 50% 35%, rgba(120, 200, 255, 0.18), transparent 70%),
    linear-gradient(165deg, rgba(8, 30, 60, 0.55), rgba(6, 18, 32, 0.95));
  border-color: rgba(140, 210, 255, 0.65);
  box-shadow:
    0 0 32px rgba(120, 200, 255, 0.35),
    inset 0 0 20px rgba(80, 170, 240, 0.12);
  animation: prime-ice-breathe 3.6s ease-in-out infinite;
}
@keyframes prime-ice-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(120, 200, 255, 0.32), inset 0 0 18px rgba(80, 170, 240, 0.1); }
  50%      { box-shadow: 0 0 48px rgba(160, 220, 255, 0.6), inset 0 0 26px rgba(100, 190, 250, 0.2); }
}

/* Bigger preview area */
.skin-card.prime-skin .skin-preview {
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 10px;
  position: relative;
  overflow: visible;
  background: transparent;
}
.skin-card.prime-skin .skin-preview-img {
  border-radius: 50%;
  position: relative;
  z-index: 3;
}
.skin-card.prime-skin[data-skin="phung"] .skin-preview-img {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6))
          drop-shadow(0 0 22px rgba(255, 130, 50, 0.85))
          drop-shadow(0 0 38px rgba(255, 80, 30, 0.55));
}
.skin-card.prime-skin[data-skin="haclong"] .skin-preview-img {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6))
          drop-shadow(0 0 22px rgba(140, 220, 255, 0.85))
          drop-shadow(0 0 38px rgba(80, 170, 240, 0.55));
}

/* 3-layer rings — outer thick element gradient, middle dashed, inner solid */
.skin-card.prime-skin .skin-preview.has-fire-ring::before {
  inset: -10px;
  background: conic-gradient(
    from 0deg,
    #ff2020, #ff7020, #ffc040, #fff080, #ffc040, #ff7020, #ff2020,
    #ff5010, #ffaa30, #fff8b0, #ffaa30, #ff5010, #ff2020
  );
  filter: blur(3px) saturate(1.2);
  box-shadow: 0 0 36px rgba(255, 120, 40, 0.9);
  animation-duration: 5s;
}
.skin-card.prime-skin .skin-preview.has-fire-ring::after {
  inset: -2px;
  border: 2px dashed rgba(255, 220, 120, 0.95);
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.85);
  animation-duration: 9s;
}
.skin-card.prime-skin .skin-preview.has-ice-ring::before {
  inset: -10px;
  background: conic-gradient(
    from 0deg,
    #50a8e8, #80c8ff, #c8e8ff, #ffffff, #c8e8ff, #80c8ff, #50a8e8,
    #3098d8, #80b8e8, #e0f0ff, #80b8e8, #3098d8, #50a8e8
  );
  filter: blur(3px) saturate(1.2);
  box-shadow: 0 0 36px rgba(140, 210, 255, 0.9);
  animation-duration: 6s;
}
.skin-card.prime-skin .skin-preview.has-ice-ring::after {
  inset: -2px;
  border: 2px dashed rgba(220, 240, 255, 0.95);
  box-shadow: 0 0 18px rgba(180, 220, 255, 0.85);
  animation-duration: 10s;
}

/* 4 orbiting decorative emojis (fire sparks / ice crystals) */
.skin-card.prime-skin .skin-preview .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 22px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px currentColor);
  z-index: 4;
  will-change: transform;
}
.skin-card.prime-skin[data-skin="phung"] .orbit { color: rgba(255, 200, 80, 0.95); }
.skin-card.prime-skin[data-skin="haclong"] .orbit { color: rgba(180, 230, 255, 0.95); }

.skin-card.prime-skin .skin-preview .orbit-1 {
  animation: orbit-1 4.5s linear infinite;
}
.skin-card.prime-skin .skin-preview .orbit-2 {
  animation: orbit-2 6s linear infinite reverse;
  font-size: 14px;
}
.skin-card.prime-skin .skin-preview .orbit-3 {
  animation: orbit-3 5.5s linear infinite;
  font-size: 16px;
}
.skin-card.prime-skin .skin-preview .orbit-4 {
  animation: orbit-4 7s linear infinite reverse;
  font-size: 13px;
}
@keyframes orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(82px) rotate(0deg) scale(1); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(82px) rotate(-360deg) scale(1); }
}
@keyframes orbit-2 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(95px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(95px) rotate(-480deg); }
}
@keyframes orbit-3 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(78px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(600deg) translateX(78px) rotate(-600deg); }
}
@keyframes orbit-4 {
  from { transform: translate(-50%, -50%) rotate(60deg) translateX(105px) rotate(-60deg); }
  to   { transform: translate(-50%, -50%) rotate(420deg) translateX(105px) rotate(-420deg); }
}

/* Skin name with element-color gradient */
.skin-card.prime-skin .skin-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: name-shimmer 3s linear infinite;
}
.skin-card.prime-skin[data-skin="phung"] .skin-name {
  background-image: linear-gradient(90deg, #ffd070, #ff7030, #fff8a0, #ff8030, #ffd070);
  filter: drop-shadow(0 1px 4px rgba(255, 100, 30, 0.6));
}
.skin-card.prime-skin[data-skin="haclong"] .skin-name {
  background-image: linear-gradient(90deg, #c0e8ff, #6098e8, #f0f8ff, #80b8e8, #c0e8ff);
  filter: drop-shadow(0 1px 4px rgba(120, 200, 255, 0.6));
}
@keyframes name-shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Price with subtle glow */
.skin-card.prime-skin .skin-price {
  font-weight: 700;
  font-size: 14px;
}
.skin-card.prime-skin[data-skin="phung"] .skin-price { color: #ffb060; text-shadow: 0 0 10px rgba(255, 140, 50, 0.5); }
.skin-card.prime-skin[data-skin="haclong"] .skin-price { color: #98c8ff; text-shadow: 0 0 10px rgba(120, 200, 255, 0.5); }
.skin-name {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  margin: 4px 0 4px;
  line-height: 1.3;
  display: block;
  width: 100%;
}
.skin-price {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  width: 100%;
  line-height: 1.3;
}
.skin-price.free { color: #6dbf6d; font-weight: 600; }
.skin-price.locked { color: var(--text-faint); font-weight: 500; }
.skin-price.exclusive { color: #ffd478; font-weight: 600; letter-spacing: 0.5px; }

/* ─── INFO ─── */
.info-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.7;
}
.info-content h3 {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  margin: 16px 0 8px;
  font-size: 16px;
}
.info-content p, .info-content li { color: var(--text); font-size: 14px; }
.info-content ul, .info-content ol { padding-left: 22px; }
.info-content ul li, .info-content ol li { margin-bottom: 4px; }
.info-tagline {
  text-align: center;
  font-size: 16px !important;
  color: var(--gold-light) !important;
  margin-bottom: 16px;
}
.info-credit {
  text-align: center;
  margin-top: 24px;
  color: var(--text-faint) !important;
  font-size: 12px !important;
}
.info-credit a { color: var(--gold); text-decoration: none; }

.ranks-list {
  list-style: none;
  padding: 0 !important;
  margin: 8px 0;
}
.ranks-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px dashed rgba(212, 168, 87, 0.1);
  font-size: 14px;
}
.ranks-list .rank-name-li {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  font-weight: 600;
}
.ranks-list .rank-cost-li {
  color: var(--text-faint);
  font-family: "JetBrains Mono", monospace;
}
.ranks-list li.unlocked .rank-name-li { color: var(--gold-light); }
.ranks-list li.locked { opacity: 0.4; }

/* ─── STUDIO ─── */
.studio-content {
  flex: 1;
  overflow-y: auto;
}
.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.studio-tpl {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
}
.studio-tpl:hover {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.08);
  transform: translateY(-1px);
}
.studio-tpl-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.studio-tpl-title {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  color: var(--gold-light);
  font-size: 14px;
}
.studio-tpl-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ─── FORTUNE MODAL ─── */
.fortune-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  text-align: center;
}
.fortune-locked {
  padding: 40px 20px;
}
.fortune-locked .icon-big {
  font-size: 64px;
  margin-bottom: 12px;
  filter: grayscale(0.7);
}
.fortune-locked h3 {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  margin-bottom: 8px;
}
.fortune-locked .progress {
  margin: 16px auto;
  max-width: 280px;
  height: 8px;
  background: rgba(212, 168, 87, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.fortune-locked .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.6s ease;
}

.fortune-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  padding: 24px 20px;
  margin: 0 auto;
  max-width: 360px;
  position: relative;
  box-shadow: 0 0 40px rgba(212, 168, 87, 0.2);
  animation: fortune-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RICH FORTUNE CARD ─── */
.fortune-rich {
  text-align: left;
  animation: fortune-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 4px;
}

.fortune-hero {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.1), transparent);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.fortune-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 168, 87, 0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160, 25, 35, 0.08), transparent 40%);
  pointer-events: none;
}
.fortune-hero .hexagram {
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.fortune-hero .emoji-large {
  font-size: 64px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(212, 168, 87, 0.4));
}
.fortune-hero .badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 168, 87, 0.18);
  color: var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.fortune-title {
  font-family: "Noto Serif", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.5);
  margin: 0 0 8px;
  line-height: 1.2;
}
.fortune-meaning {
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
}

.fortune-section {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--gold);
}
.fortune-section.advice {
  border-left-color: #6dbf6d;
  background: rgba(109, 191, 109, 0.05);
}
.fortune-section.avoid {
  border-left-color: var(--seal);
  background: rgba(160, 25, 35, 0.05);
}
.fortune-section .section-icon {
  font-size: 22px;
  margin-bottom: 4px;
}
.fortune-section .section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 6px;
}
.fortune-section.advice .section-label { color: #6dbf6d; }
.fortune-section.avoid .section-label { color: #e8a5a5; }
.fortune-section .section-body {
  color: var(--text);
  line-height: 1.7;
  font-size: 14px;
  margin: 0;
}

.fortune-mantra {
  text-align: center;
  padding: 18px 16px;
  margin: 14px 0;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.1), rgba(160, 25, 35, 0.05));
  border-radius: 12px;
  border-top: 1px solid rgba(212, 168, 87, 0.3);
  border-bottom: 1px solid rgba(212, 168, 87, 0.3);
  font-family: "Noto Serif", serif;
  font-size: 18px;
  color: var(--gold-light);
  position: relative;
}
.fortune-mantra .quote-mark {
  font-size: 36px;
  color: var(--gold);
  opacity: 0.6;
  font-family: serif;
  margin: 0 4px;
  vertical-align: middle;
}

.fortune-lucky {
  background: rgba(212, 168, 87, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  border: 1px dashed rgba(212, 168, 87, 0.4);
}
.fortune-lucky .lucky-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}
.fortune-lucky .lucky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fortune-lucky .lucky-item {
  text-align: center;
  padding: 10px 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.fortune-lucky .lucky-icon {
  font-size: 22px;
}
.fortune-lucky .lucky-name {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.fortune-lucky .lucky-value {
  font-family: "Noto Serif", serif;
  color: var(--gold-light);
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

.fortune-footer {
  text-align: center;
  padding: 12px 4px;
  margin-top: 8px;
  border-top: 1px dashed rgba(212, 168, 87, 0.2);
}
.fortune-disclaimer {
  font-size: 11.5px;
  color: #8a7860;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin: 16px 8px 4px;
  padding: 10px 14px;
  border-top: 1px dashed rgba(212, 168, 87, 0.15);
  opacity: 0.85;
}
.fortune-footer p {
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 12px;
}
.btn-share-fortune {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212, 168, 87, 0.3);
  transition: all 0.2s ease;
}
.btn-share-fortune:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 168, 87, 0.5);
}

/* Cross-feature CTA: "Gõ mõ X nhịp để..." after fortune draw */
.fortune-knock-cta {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at top, rgba(212, 168, 87, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(40, 28, 16, 0.6), rgba(20, 14, 8, 0.6));
  border: 1px solid rgba(212, 168, 87, 0.42);
  border-radius: 14px;
  text-align: center;
}
.fortune-knock-cta.done {
  background: linear-gradient(180deg, rgba(120, 200, 100, 0.18), rgba(80, 140, 60, 0.10));
  border-color: rgba(120, 200, 100, 0.55);
  padding: 12px 14px;
}
.fortune-knock-cta .knock-cta-head {
  font-family: "Noto Serif", serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fortune-knock-cta.done .knock-cta-head {
  color: #c8e8a8; margin-bottom: 0;
}
.knock-cta-bar {
  width: 100%; height: 6px;
  background: rgba(212, 168, 87, 0.16);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.knock-cta-fill {
  height: 100%;
  background: #d4a857;
  transition: width 0.4s ease;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(212, 168, 87, 0.45);
}
.knock-cta-progress {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-family: "Inter", monospace;
  letter-spacing: 0.5px;
}
.btn-fortune-tap {
  width: 100%;
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.22), rgba(180, 130, 50, 0.18));
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.55);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
.btn-fortune-tap:hover {
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.35), rgba(180, 130, 50, 0.25));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 168, 87, 0.30);
}

/* History button + secondary action */
.btn-fortune-history {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.4);
  border-radius: 10px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
}
.btn-fortune-history:hover { background: rgba(212, 168, 87, 0.12); border-color: rgba(212, 168, 87, 0.7); }

/* Streak / total stat pills */
.fortune-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 4px;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(212, 168, 87, 0.10);
  border: 1px solid rgba(212, 168, 87, 0.30);
  border-radius: 999px;
  font-size: 12px;
  color: var(--gold-light);
  font-weight: 500;
}
.stat-pill > span:first-child { font-size: 14px; }

/* History view */
.fortune-history-view {
  padding: 14px 16px 20px;
}
.hist-back {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.30);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}
.hist-back:hover { background: rgba(212, 168, 87, 0.12); }
.hist-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
}
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(212, 168, 87, 0.06);
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 10px;
}
.hist-emoji { font-size: 24px; flex-shrink: 0; }
.hist-meta { flex: 1; min-width: 0; }
.hist-title {
  font-family: "Noto Serif", serif;
  font-size: 14px;
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
@keyframes fortune-reveal {
  from { transform: scale(0.85) rotateY(20deg); opacity: 0; }
  to { transform: scale(1) rotateY(0); opacity: 1; }
}
.fortune-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
}
.fortune-card .title {
  font-family: "Noto Serif", serif;
  font-size: 26px;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.fortune-card .body {
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 16px;
}
.fortune-card .category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
  border-radius: 999px;
  font-size: 12px;
  margin-bottom: 12px;
}
.fortune-action {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-faint);
}
.btn-draw-fortune {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-family: "Noto Serif", serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(212, 168, 87, 0.4);
  transition: all 0.2s ease;
}
.btn-draw-fortune:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(212, 168, 87, 0.6); }
.btn-draw-fortune:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── DONATE DEV ─── */
.dev-footer {
  position: relative;
  z-index: 2;
  padding: 28px 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dev-footer-eyebrow {
  font-family: "Cormorant Garamond", "Noto Serif", serif;
  font-size: 12.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(212, 168, 87, 0.62); margin-bottom: 4px;
}
.btn-donate-dev {
  background: linear-gradient(180deg, #ffe9b0 0%, #f0c66e 46%, #d9a441 100%);
  border: 1px solid rgba(255, 236, 190, 0.85);
  color: #43290f;
  padding: 15px 40px;
  border-radius: 999px;
  font-size: 15px;
  font-family: "Cormorant Garamond", "Noto Serif", serif;
  font-style: italic;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 8px 30px rgba(230, 176, 80, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 8px rgba(150, 100, 30, 0.28);
  animation: donateBreathe 3.2s ease-in-out infinite;
}
/* Nhịp thở nhẹ — hào quang vàng phồng/xẹp để nổi bật khi kéo tới cuối trang. Nút cắt tràn (overflow
   hidden, cho vệt sáng quét) nên không tách lớp sáng ra được → DỪNG hẳn khi nút khuất màn hình
   (.dd-off do IntersectionObserver ở index.html gắn) — phần lớn thời gian nút nằm cuối trang. */
.btn-donate-dev.dd-off, .btn-donate-dev.dd-off::before { animation-play-state: paused; }
@keyframes donateBreathe {
  0%, 100% { box-shadow: 0 8px 30px rgba(230, 176, 80, 0.40), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -3px 8px rgba(150,100,30,0.28); }
  50%      { box-shadow: 0 10px 42px rgba(255, 200, 100, 0.72), 0 0 22px rgba(255, 210, 120, 0.45), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -3px 8px rgba(150,100,30,0.28); }
}
.btn-donate-icon {
  font-size: 24px;
  filter: drop-shadow(0 1px 2px rgba(90, 50, 10, 0.4));
}
.btn-donate-text {
  font-style: italic;
  font-size: 17.5px;
  font-weight: 700;
  color: #43290f;
  text-shadow: 0 1px 0 rgba(255, 250, 224, 0.5);
}
.btn-donate-icon, .btn-donate-text { position: relative; z-index: 1; }
.btn-donate-dev:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 12px 32px rgba(212, 168, 87, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(150, 100, 30, 0.35);
}
.btn-donate-dev:active {
  transform: translateY(0);
}
.dev-footer-sub {
  font-family: "Cormorant Garamond", "Noto Serif", serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(212, 168, 87, 0.55);
  letter-spacing: 0.3px;
  max-width: 320px;
  line-height: 1.4;
}
.dev-footer-disclaimer {
  font-size: 10.5px;
  color: rgba(244, 228, 180, 0.32);
  font-style: italic;
  letter-spacing: 0.2px;
  max-width: 560px;
  line-height: 1.55;
  margin: 14px auto 0;
  padding: 0 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .btn-donate-dev { font-size: 12px; padding: 10px 22px; }
  .dev-footer-sub { font-size: 11px; }
}

.donate-content {
  padding: 20px;
  text-align: center;
  /* BUG FIX: là flex-child duy nhất của .modal-card{max-height:85vh;overflow:hidden}
     mà thiếu vùng cuộn → nội dung dài (QR + bank + Bảng Vàng) bị cắt, không lướt
     xuống được. Thêm flex:1 + overflow-y:auto như .auto-content. */
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Nút "Lưu / Chia sẻ ảnh QR" (skins/auto/donate) — full-width cho đồng nhất */
.btn-save-qr { display: block; width: 100%; margin: 8px 0 4px; }
.donate-message {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.donate-custom-input {
  margin: 12px 0;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.25);
  border-radius: 10px;
  padding: 12px;
}
.donate-custom-input label {
  display: block;
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 600;
}
.donate-custom-input input {
  width: 100%;
  height: 44px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--gold-light);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.donate-custom-input input:focus {
  outline: none;
  border-color: var(--gold);
}
.donate-custom-hint {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 6px;
}
.donate-amount-btn {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  color: var(--text);
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.donate-amount-btn:hover, .donate-amount-btn.active {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.1);
  color: var(--gold-light);
}
.donate-qr {
  max-width: 280px;
  width: 100%;
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  margin: 12px 0;
  background: white;
}
.donate-thanks {
  font-style: italic;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 12px;
}

/* ─── Bảng Vàng Tri Ân ─── */
/* ─── BẢNG VÀNG TRI ÂN — tấm bảng vàng khắc tên, VIP & lấp lánh ─── */
.kim-bang-wrap {
  margin-top: 20px;
  padding: 18px 14px 12px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(212,168,87,0.36);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(212,168,87,0.14), transparent 70%),
    linear-gradient(180deg, rgba(30,23,14,0.60), rgba(20,16,10,0.32));
  box-shadow: inset 0 0 42px rgba(212,168,87,0.08), 0 8px 28px rgba(0,0,0,0.34);
}
/* Dải vàng quét ngang — cảm giác "lấp lánh" sang trọng */
.kim-bang-wrap::before {
  content: '';
  position: absolute;
  top: -20%; left: -60%;
  width: 42%; height: 140%;
  background: linear-gradient(105deg, transparent, rgba(255,243,206,0.13), transparent);
  transform: skewX(-18deg);
  animation: kbSweep 7.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes kbSweep { 0%, 100% { left: -60%; } 55% { left: 125%; } }
.kim-bang-wrap > * { position: relative; z-index: 1; }
.kim-bang-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,228,150,0.85), rgba(212,168,87,0.5), transparent);
  margin: 0 0 14px;
  box-shadow: 0 0 10px rgba(212,168,87,0.4);
}
.kim-bang-title {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  text-align: center;
  color: #f0d68a;
  letter-spacing: 1.6px;
  margin-bottom: 4px;
  animation: kbTitleGlow 3.4s ease-in-out infinite;
}
@keyframes kbTitleGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(212,168,87,0.35); }
  50% { text-shadow: 0 0 20px rgba(255,228,150,0.7), 0 0 34px rgba(212,168,87,0.32); }
}
.kim-bang-sub {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 14px;
}
.kim-bang-total {
  text-align: center;
  font-size: 12px;
  color: #f0d68a;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(212,168,87,0.12), rgba(212,168,87,0.04));
  border: 1px solid rgba(212,168,87,0.3);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.kim-bang-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.kim-bang-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin: 6px 0;
  border-radius: 11px;
  border: 1px solid rgba(212,168,87,0.16);
  background: linear-gradient(180deg, rgba(212,168,87,0.06), rgba(212,168,87,0.015));
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kim-bang-row:hover {
  border-color: rgba(212,168,87,0.42);
  box-shadow: 0 0 16px rgba(212,168,87,0.15);
  transform: translateY(-1px);
}
.kim-bang-rank {
  font-size: 18px;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(212,168,87,0.6));
}
/* Tên khắc vàng — gradient shimmer chạy ngang (chỉ tên, không phải tỉnh) */
.kim-bang-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.kb-name-text {
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e9d6a0; /* fallback nếu trình duyệt không hỗ trợ background-clip:text */
  background: linear-gradient(90deg, #e9d6a0 0%, #d4a857 30%, #fff3cf 50%, #d4a857 70%, #e9d6a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 6.5s linear infinite;
}
@keyframes kbGoldShimmer { to { background-position: 200% center; } }
.kim-bang-prov {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
}
/* Người vừa hỷ cúng — nổi bật, sao lấp lánh + nhãn vàng */
.kim-bang-row--new {
  border-color: rgba(255,224,150,0.55);
  background: linear-gradient(180deg, rgba(255,224,150,0.15), rgba(212,168,87,0.05));
  box-shadow: 0 0 20px rgba(255,224,150,0.2);
}
.kim-bang-row--new .kim-bang-rank { animation: kbSparkle 1.9s ease-in-out infinite; }
@keyframes kbSparkle {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,224,150,0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 13px rgba(255,238,180,0.95)); transform: scale(1.14); }
}
.kim-bang-new-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #2a1e0c;
  -webkit-text-fill-color: #2a1e0c;
  background: linear-gradient(90deg, #f6e6b4, #d4a857);
  padding: 1px 8px;
  border-radius: 999px;
}
.kim-bang-amount {
  color: #d4a857;
  font-family: monospace;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.kim-bang-empty,
.kim-bang-loading {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-dim);
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .kim-bang-wrap::before, .kim-bang-title, .kim-bang-name, .kim-bang-row--new .kim-bang-rank { animation: none; }
}

/* ─── PROVINCE LEADERBOARD ─── */
.lb-province-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.lb-province-row .province-name {
  font-family: "Noto Serif", serif;
  color: var(--text);
  font-weight: 600;
}
.lb-province-row .province-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.lb-province-row.me {
  background: rgba(212, 168, 87, 0.1);
  border: 1px solid rgba(212, 168, 87, 0.3);
}

/* ─── PARTICLE FALL ─── */
@keyframes particle-fall {
  0% { transform: translateY(-40px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(30px) rotate(360deg); opacity: 0; }
}

/* ─── AUTO CLICKER BAR ─── */
.auto-clicker-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}

.auto-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #3a2818, #4a3320 55%, #2e2010);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, border-color .15s ease;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
/* vòng vàng toả ra quanh nút: lớp riêng chỉ đổi transform/opacity (trước: animate box-shadow = vẽ lại cả nút) */
.auto-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(212, 168, 87, 0.55), 0 4px 22px rgba(212, 168, 87, .25);
  opacity: 0;
  will-change: transform, opacity;
  animation: autoCtaPulse 2.6s ease-in-out infinite;
}
@keyframes autoCtaPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  35%      { opacity: 1; }
  70%      { opacity: 0; transform: scale(1.025, 1.08); }
}
.auto-cta:hover {
  transform: translateY(-2px);
  border-color: #f4d484;
  animation-play-state: paused;
  box-shadow: 0 0 0 4px rgba(212, 168, 87, .25), 0 6px 22px rgba(212, 168, 87, .35);
}
.auto-cta:active { transform: translateY(0); }
.auto-icon {
  font-size: 30px;
  color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(212, 168, 87, 0.7));
  animation: autoIconShine 3.2s ease-in-out infinite;
}
@keyframes autoIconShine {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.08); }
}
.auto-text {
  flex: 1;
  min-width: 0;
}
.auto-title {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff4d0;
  letter-spacing: .2px;
}
.auto-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.45;
}
.auto-price-chip {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: #1a1108;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(212,168,87,.35);
  min-width: 78px;
}
.auto-price-amount {
  font-family: "Noto Serif", serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.3px;
}
.auto-price-amount > span { font-size: 13px; font-weight: 600; margin-left: 1px; }
.auto-price-label {
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
  opacity: .85;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Hàng chọn nhịp: LUÔN chiếm trọn 1 dòng riêng (mobile không bị bóp còn 1-2px),
   mỗi nút cao ≥40px cho vừa đầu ngón tay. */
.auto-speed-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 0 100%;
  width: 100%;
  flex-wrap: nowrap;
}
.auto-speed-label {
  font-size: 12px;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.auto-speed-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  padding: 0 6px;
  min-height: 40px;
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212, 168, 87, .3);
  user-select: none;
}
.auto-speed-btn.active {
  background: rgba(26, 127, 90, 0.85);
  border-color: #1a7f5a;
  color: #fff;
}
.auto-active-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(26, 127, 90, 0.12);
  border: 1px solid rgba(26, 127, 90, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
}
.btn-auto-toggle {
  flex: 1 1 auto;
  min-height: 40px;
  touch-action: manipulation;
  background: #1a7f5a;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-auto-toggle.active {
  background: var(--red-seal);
}
.auto-expires {
  flex: 1;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}

/* AUTO PURCHASE MODAL */
.auto-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* ─── Auto package picker ─── */
.pkg-intro {
  text-align: center;
  padding: 16px 18px 8px;
}
.pkg-intro h3 {
  font-family: "Noto Serif", serif;
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.pkg-intro p {
  font-size: 13px;
  color: var(--text-dim);
}
/* ─── "Vì sao có phí" note — sincere, low-pressure ─── */
.pkg-why {
  margin: 6px 16px 14px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.08), rgba(160, 25, 35, 0.04));
  border: 1px solid rgba(212, 168, 87, 0.22);
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}
.pkg-trial {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.35);
  color: #cfe9d0;
  font-size: 13px;
  line-height: 1.5;
}
.pkg-why-title {
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.pkg-why p {
  margin: 6px 0;
  color: var(--text);
}
.pkg-why strong { color: var(--gold-light); font-weight: 600; }
.pkg-why-thanks {
  margin-top: 8px !important;
  font-style: italic;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
}
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 16px 16px;
}
@media (min-width: 480px) { .pkg-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px 14px;
  background: linear-gradient(160deg, rgba(212, 168, 87, 0.08), rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(212, 168, 87, 0.25);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}
.pkg-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 168, 87, 0.2);
}
.pkg-card.pkg-best {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(212, 168, 87, 0.18), rgba(212, 168, 87, 0.05));
  box-shadow: 0 4px 18px rgba(212, 168, 87, 0.25);
}
.pkg-ribbon {
  position: absolute;
  top: 8px;
  right: -22px;
  transform: rotate(28deg);
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  padding: 3px 24px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.pkg-save {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red-seal);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pkg-badge {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 700;
  margin-top: 6px;
}
.pkg-price {
  font-family: "Noto Serif", serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin: 6px 0 2px;
}
.pkg-currency { font-size: 16px; color: var(--text-dim); margin-left: 1px; }
.pkg-perday {
  font-size: 11px;
  color: var(--text-faint);
}
.pkg-hint {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
}
.pkg-cta {
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(212, 168, 87, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
.pkg-card.pkg-best .pkg-cta {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
}
.pkg-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  padding: 0 16px 14px;
}
.pkg-back {
  background: transparent;
  border: 1px dashed rgba(212, 168, 87, 0.3);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}
.pkg-back:hover { border-color: var(--gold); color: var(--gold); }

.auto-pricing-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.auto-pricing-card .auto-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.auto-pricing-card h3 {
  font-family: "Noto Serif", serif;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 4px;
}
.auto-price {
  font-family: "Noto Serif", serif;
  font-size: 36px;
  color: var(--gold-light);
  margin: 12px 0 4px;
}
.auto-price-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.auto-features {
  list-style: none;
  padding: 16px 0;
  margin: 12px 0;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
  text-align: left;
}
.auto-features li {
  padding: 6px 0;
  color: var(--text);
  font-size: 14px;
}
.auto-features li::before { content: "✓ "; color: #6dbf6d; font-weight: 700; }

.auto-qr-section {
  text-align: center;
}
.auto-qr-section img {
  max-width: 280px;
  width: 100%;
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  background: white;
  margin: 12px 0;
}
.auto-bank-info {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  text-align: left;
  margin: 12px 0;
}
.auto-bank-info .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(212, 168, 87, 0.1);
}
.auto-bank-info .row:last-child { border: none; }
.auto-bank-info .label { color: var(--text-dim); }
.auto-bank-info .val { color: var(--text); font-family: "JetBrains Mono", monospace; font-weight: 600; }

/* Copy actions row above bank info */
.copy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin: 14px 0 4px;
}
.btn-copy-pay {
  background: rgba(212, 168, 87, 0.12);
  border: 1px solid rgba(212, 168, 87, 0.4);
  color: var(--gold-light);
  padding: 10px 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.btn-copy-pay:hover {
  background: rgba(212, 168, 87, 0.25);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.btn-copy-pay.primary {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(212, 168, 87, 0.3);
}
.btn-copy-pay.primary:hover { box-shadow: 0 6px 16px rgba(212, 168, 87, 0.45); }
.btn-copy-pay.copied,
.copyable.copied {
  background: rgba(95, 214, 124, 0.2) !important;
  border-color: #5fd67c !important;
  color: #b8f5c8 !important;
}
.btn-copy-pay.copied::after, .copyable.copied .copy-hint::after { content: ' ✓'; }

/* Copyable rows in bank info */
.auto-bank-info .row.copyable {
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
  margin: 0 -4px;
  padding: 6px 8px;
}
.auto-bank-info .row.copyable:hover {
  background: rgba(212, 168, 87, 0.12);
}
.auto-bank-info .row.copyable:active {
  background: rgba(212, 168, 87, 0.2);
}
.copy-hint {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
  font-style: normal;
}
@media (max-width: 380px) {
  .copy-actions { grid-template-columns: 1fr 1fr; }
  .copy-actions .btn-copy-pay.primary { grid-column: 1 / -1; }
}
.auto-bank-info .val.highlight { color: var(--gold-light); }

.auto-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(26, 127, 90, 0.1);
  border: 1px solid rgba(26, 127, 90, 0.3);
  border-radius: 10px;
  font-size: 13px;
  color: #6dbf6d;
  margin-top: 10px;
}
.auto-status .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6dbf6d;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* LOGIN BADGE */
.login-status {
  margin-bottom: 8px;
}
.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.login-badge.anonymous {
  background: rgba(160, 25, 35, 0.1);
  border: 1px solid rgba(160, 25, 35, 0.3);
  color: #e8a5a5;
}
.login-badge.logged-in {
  background: rgba(26, 127, 90, 0.1);
  border: 1px solid rgba(26, 127, 90, 0.3);
  color: #6dbf6d;
}

/* ─── PROFILE MODAL ─── */
.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.profile-section {
  margin-bottom: 8px;
}
.profile-divider {
  height: 1px;
  background: rgba(212, 168, 87, 0.15);
  margin: 16px 0;
}
.profile-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}
.profile-help {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
  line-height: 1.5;
}
.profile-input {
  width: 100%;
  height: 44px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 8px;
}
.profile-input:focus {
  outline: none;
  border-color: var(--gold);
}
.btn-profile-save {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-profile-save:hover { background: var(--gold-light); }
.btn-profile-save.danger-btn {
  background: transparent;
  color: var(--red-seal);
  border: 1.5px solid var(--red-seal);
}
.btn-profile-save.danger-btn:hover { background: var(--red-seal); color: var(--cream); }

.profile-code-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
/* QR đồng bộ giữa máy */
.sync-qr-wrap {
  display: flex; justify-content: center;
  margin: 6px 0 12px;
}
.sync-qr-img {
  width: 180px; height: 180px;
  border-radius: 12px;
  background: #fff; /* nền trắng để QR luôn quét được dù theme tối */
  padding: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.sync-link-row { flex-wrap: wrap; }
.sync-link-row .btn-profile-save { flex: 1; min-width: 150px; }
.profile-code {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 1px;
  word-break: break-all;
}
.btn-profile-copy {
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-profile-copy:hover { background: rgba(212, 168, 87, 0.25); }

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.profile-stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
}
.profile-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ─── SHARE MODAL ─── */
/* ─── Ngũ Hành badge in profile ─── */
.nguhanh-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.12), rgba(212, 168, 87, 0.04));
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
}
.nguhanh-icon { font-size: 28px; }
.nguhanh-text { font-size: 13px; color: var(--text); flex: 1; }

/* ─── Lịch âm widget ─── */
.lich-am-widget {
  margin: 8px auto 4px;
  width: calc(100% - 32px);
  max-width: 430px;                                   /* HẸP + căn GIỮA → không che ngang mặt Phật */
  background: linear-gradient(145deg, rgba(34, 24, 14, 0.46), rgba(18, 13, 8, 0.58));  /* TRONG hơn → Phật hiện xuyên qua */
  border: 1px solid rgba(212, 168, 87, 0.26);
  border-radius: 13px;
  overflow: hidden;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.lich-am-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;                                  /* GỌN hơn (thấp bớt) → không che vùng mặt */
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.la-emoji {
  font-size: 23px;
  flex-shrink: 0;
}
.la-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.la-line1 {
  font-family: "Noto Serif", serif;
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 600;
}
.la-line2 {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}
.la-chevron {
  color: var(--gold);
  font-size: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.lich-am-toggle[aria-expanded="true"] .la-chevron { transform: rotate(180deg); }
.lich-am-detail {
  padding: 4px 16px 14px;
  border-top: 1px dashed rgba(212, 168, 87, 0.2);
}
.la-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.la-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.la-status-item { grid-column: 1 / -1; }
.la-label {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.la-val {
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 600;
}
.la-val.lucky { color: #5fd67c; }
.la-val.unlucky { color: #ff8a8a; }
.la-tip {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(212, 168, 87, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
}
.la-tip:empty { display: none; }

/* ─── PWA install banner ─── */
.install-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(40,28,16,0.96), rgba(20,15,10,0.96));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(212, 168, 87, 0.45);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 32px rgba(212, 168, 87, 0.18);
  max-width: calc(100vw - 24px);
  animation: install-slide-up 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes install-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.install-banner[hidden] { display: none !important; }
.install-info { display: flex; align-items: center; gap: 12px; }
.install-icon {
  font-size: 32px;
  color: var(--gold);
  background: rgba(212, 168, 87, 0.12);
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(212, 168, 87, 0.3);
}
.install-title { font-size: 14px; font-weight: 700; color: var(--gold-light); margin-bottom: 1px; }
.install-sub   { font-size: 11px; color: var(--text-dim); }
.install-actions { display: flex; gap: 6px; flex-shrink: 0; }
.install-dismiss {
  background: transparent;
  border: 1px solid rgba(244, 236, 220, 0.2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.install-dismiss:hover { color: var(--gold); border-color: var(--gold); }
.install-cta {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 168, 87, 0.35);
  transition: transform 0.15s;
}
.install-cta:hover, .install-cta:active { transform: translateY(-1px); }
@media (max-width: 480px) {
  .install-banner { left: 12px; right: 12px; transform: none; max-width: none; padding: 10px 12px; }
  @keyframes install-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .install-icon { width: 42px; height: 42px; font-size: 26px; }
  .install-title { font-size: 13px; }
  .install-sub   { font-size: 10px; }
  .install-cta   { padding: 8px 14px; font-size: 12px; }
  .install-dismiss { padding: 8px 10px; font-size: 11px; }
}

/* ─── Audio Mixer modal ─── */
.audio-mixer-card { max-width: 460px; }
/* Nút "Nền" nổi góc dưới trái — cùng cỡ/độ cao/viền với nút trợ lý (#tl-fab, góc phải). TĨNH, không hoạt cảnh. */
.bg-fab {
  position: fixed; z-index: 95;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 35% 30%, #2a1d12, #0d0907 75%);
  border: 2px solid rgba(255, 227, 160, 0.8); color: #f0d28e; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); font-family: inherit;
  transition: transform 0.15s; -webkit-tap-highlight-color: transparent;
}
.bg-fab:hover { transform: translateY(-2px); }
.bg-fab:active { transform: scale(0.95); }
.bg-fab:focus-visible { outline: 2px solid #f0d28e; outline-offset: 3px; }
/* Biểu tượng con mõ + dùi (SVG, thay emoji 🌄 — founder chê xấu 30/10/2026). id gradient "bgfabMo" chỉ có MỘT bản. */
.bg-fab-mo { display: block; width: 31px; height: 26px; margin-top: 1px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.bg-fab-lb { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; }
/* Banner cài app (#install-banner) chiếm đáy màn hình điện thoại → nhích nút lên như nút trợ lý */
body:has(#install-banner:not([hidden])) .bg-fab { bottom: calc(105px + env(safe-area-inset-bottom)); }
@media print { .bg-fab { display: none; } }

/* Bảng chọn khung cảnh nền (nút "Nền") */
.bg-picker-card { max-width: 480px; }
.bg-picker-grid { display: grid; gap: 10px; padding: 2px; }
.bg-opt {
  position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; padding: 8px; border-radius: 14px; border: 1px solid rgba(212, 168, 87, 0.22);
  background: rgba(255, 240, 210, 0.04); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bg-opt-thumb { position: relative; display: block; }
.bg-opt img { display: block; width: 128px; height: 72px; object-fit: cover; border-radius: 10px; }
.bg-opt-name { display: block; font-weight: 700; font-size: 15px; color: #fff0c8; }
.bg-opt-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: rgba(232, 216, 188, 0.72); }
.bg-opt.is-on { border-color: #d4a857; background: rgba(212, 168, 87, 0.12); box-shadow: inset 0 0 0 1px rgba(212, 168, 87, 0.45); }
.bg-opt-check {
  position: absolute; left: 5px; bottom: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);   /* góc dưới trái của ảnh nhỏ: không đè chữ, không che tượng Phật */
  color: #1a1208; background: linear-gradient(135deg, #f0d28e, #c79a45);
}
.bg-opt:not(.is-on) .bg-opt-check { display: none; }
.bg-opt:focus-visible { outline: 2px solid #f0d28e; outline-offset: 2px; }
@media (max-width: 380px) {
  .bg-opt { grid-template-columns: 104px minmax(0, 1fr); }
  .bg-opt img { width: 104px; height: 60px; }
}
.audio-mixer-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mix-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 87, 0.12);
}
.mix-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1.5px dashed rgba(212, 168, 87, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.mix-toggle.no-toggle { cursor: default; }
.mix-toggle:hover:not(.no-toggle) { border-color: var(--gold); color: var(--gold); }
.mix-toggle.on {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.15), rgba(212, 168, 87, 0.05));
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}
.mix-icon { font-size: 22px; }
.mix-label { flex: 1; text-align: left; font-weight: 600; }
.mix-state {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}
.mix-toggle.on .mix-state { background: var(--gold); color: var(--bg-deep); }
.mix-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, rgba(212, 168, 87, 0.3), rgba(212, 168, 87, 0.6));
  border-radius: 3px;
  outline: none;
}
.mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(212, 168, 87, 0.6);
}
.mix-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.mix-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}

.share-modal-card {
  max-width: 480px;
}
.share-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.share-preview {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 87, 0.2);
  margin-bottom: 16px;
  display: block;
  background: rgba(20, 14, 8, 0.6);
}

/* ─── Native Web Share button (1-tap mobile) ─── */
.btn-share-native {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(135deg, #d4a857 0%, #b88a44 100%);
  color: #1a0e07;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(212, 168, 87, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-share-native:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 168, 87, 0.35);
}
.btn-share-native .sn-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.btn-share-native .sn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.btn-share-native .sn-text strong {
  font-size: 15px;
  font-weight: 700;
}
.btn-share-native .sn-text small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
  margin-top: 2px;
}
.share-or {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
  position: relative;
}

/* ─── Platform grid (Facebook, Zalo, Messenger, X, Telegram, WhatsApp) ─── */
.share-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.share-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(40, 28, 18, 0.6);
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 10px;
  padding: 12px 6px;
  text-decoration: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.share-platform:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(60, 42, 24, 0.7);
  text-decoration: none;
}
.share-platform .sp-icon {
  font-size: 24px;
  line-height: 1;
}
.share-platform .sp-label {
  font-size: 11px;
  color: var(--text-dim);
}
.share-platform.sp-fb .sp-icon { color: #1877f2; }
.share-platform.sp-zalo .sp-icon { color: #0068ff; }
.share-platform.sp-msg .sp-icon { color: #0084ff; }
.share-platform.sp-x .sp-icon { color: #fff; font-weight: 800; }
.share-platform.sp-tg .sp-icon { color: #0088cc; }
.share-platform.sp-wa .sp-icon { color: #25d366; }

.share-tip {
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(212, 168, 87, 0.08);
  border: 1px dashed rgba(212, 168, 87, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0 12px;
  line-height: 1.45;
}

.share-caption-details {
  margin-top: 8px;
}
.share-caption-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--gold);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.share-caption-details summary::-webkit-details-marker { display: none; }
.share-caption-details summary::after {
  content: ' ▾';
  font-size: 10px;
  color: var(--text-dim);
}
.share-caption-details[open] summary::after { content: ' ▴'; }

.btn-download {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .share-platforms { grid-template-columns: repeat(3, 1fr); }
  .share-platform { padding: 10px 4px; }
  .share-platform .sp-icon { font-size: 22px; }
  .share-platform .sp-label { font-size: 10.5px; }
}
.share-hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 12px;
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-share-action {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.btn-share-action:hover { background: var(--gold-light); }
/* "Chép ảnh" là đường nhanh nhất để đăng (chép → dán) nên chiếm cả hàng, nổi hơn
   "Tải ảnh"/"Copy caption" ở hàng dưới. Grid 2 cột với 3 nút mà không span thì nút
   thứ 3 lệch hẳn sang trái, xấu. */
.share-actions .btn-copy-img {
  grid-column: 1 / -1;
  padding: 13px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(212, 168, 87, 0.28);
}
.share-text {
  width: 100%;
  height: 80px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  resize: none;
}

/* ─── BREAKTHROUGH OVERLAY ─── */
.breakthrough-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at center, rgba(212, 168, 87, 0.4), rgba(0, 0, 0, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bt-overlay-in 0.4s ease;
}
.breakthrough-overlay[hidden] { display: none !important; }
@keyframes bt-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.breakthrough-content {
  text-align: center;
  position: relative;
  animation: bt-content 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bt-content {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.breakthrough-rays {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(212, 168, 87, 0.4) 5deg, transparent 10deg,
    transparent 30deg, rgba(212, 168, 87, 0.3) 35deg, transparent 40deg,
    transparent 60deg, rgba(212, 168, 87, 0.4) 65deg, transparent 70deg,
    transparent 90deg, rgba(212, 168, 87, 0.3) 95deg, transparent 100deg,
    transparent 120deg, rgba(212, 168, 87, 0.4) 125deg, transparent 130deg,
    transparent 150deg, rgba(212, 168, 87, 0.3) 155deg, transparent 160deg,
    transparent 180deg, rgba(212, 168, 87, 0.4) 185deg, transparent 190deg,
    transparent 210deg, rgba(212, 168, 87, 0.3) 215deg, transparent 220deg,
    transparent 240deg, rgba(212, 168, 87, 0.4) 245deg, transparent 250deg,
    transparent 270deg, rgba(212, 168, 87, 0.3) 275deg, transparent 280deg,
    transparent 300deg, rgba(212, 168, 87, 0.4) 305deg, transparent 310deg,
    transparent 330deg, rgba(212, 168, 87, 0.3) 335deg, transparent 340deg,
    transparent 360deg);
  animation: bt-rays-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.breakthrough-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 168, 87, 0.6), transparent 70%);
  filter: blur(20px);
  animation: bt-glow-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.breakthrough-title {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 8px;
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.8);
}
.breakthrough-rank {
  font-family: "Noto Serif", serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(212, 168, 87, 1), 0 0 60px rgba(212, 168, 87, 0.6);
  margin-bottom: 16px;
}
.breakthrough-sub {
  font-size: 14px;
  color: var(--text);
  letter-spacing: 1px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 380px) {
  .mo { width: 240px; height: 240px; }
  .counter-value { font-size: clamp(34px, 11vw, 56px); }
  .rank-name { font-size: 24px; }
  .breakthrough-rank { font-size: 44px; }
}

@media (min-width: 600px) {
  .game { padding: 32px 24px 48px; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  .game { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* iOS perf: reduce backdrop-filter blur (very expensive GPU op on Safari).
   Apply only on Safari/iOS (-webkit-touch-callout: none feature query). */
@supports (-webkit-touch-callout: none) {
  .topbar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(13, 9, 7, 0.96);
  }
  /* Modal backdrop — opaque-ish bg, cheap blur */
  .modal-backdrop, .modal {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  /* Disable expensive saturate() filter on iOS */
  .auto-modal, [class*="-overlay"], [class*="-card"] {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  /* Mõ button drop-shadow — keep but lighter */
  .mo-svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)) !important;
  }
  /* Reduce halo burst opacity on iOS to lighten compositing load */
  .mo-halo-ring, .mo-halo-flash, .mo-halo-beam {
    will-change: auto;
  }
  /* Disable will-change on long-running animations to avoid GPU memory thrash */
  .clouds .cloud, .firefly, .dust div {
    will-change: auto;
  }
}

/* PWA standalone (when added to home screen) — no browser chrome */
@media (display-mode: standalone) {
  body { -webkit-tap-highlight-color: transparent; }
  .game { padding-top: env(safe-area-inset-top); }
}

/* ─── SEO: visually-hidden H1, fully crawlable ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── SEO H1 banner — visible, low-key, supports ranking signal ─── */
.seo-h1-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px auto 28px;
  padding: 10px 18px;
  font-family: 'Noto Serif', serif;
  text-align: center;
  font-weight: normal;
  line-height: 1.4;
  /* Frosted-glass card so text holds contrast on top of temple photo */
  max-width: max-content;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(40, 28, 16, 0.72), rgba(20, 14, 8, 0.82));
  border: 1px solid rgba(212, 168, 87, 0.30);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 244, 208, 0.05);
}
.seo-h1-main {
  font-size: 15px;
  color: #f0d28e;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow: 0 0 8px rgba(212, 168, 87, 0.45), 0 1px 2px rgba(0, 0, 0, 0.75);
}
.seo-h1-sub {
  font-size: 11px;
  color: rgba(232, 216, 188, 0.88);
  font-weight: 500;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
@media (max-width: 600px) {
  .seo-h1-banner { padding: 8px 14px; margin: 8px 12px 0; }
  .seo-h1-main { font-size: 13px; }
  .seo-h1-sub { font-size: 10px; }
}

/* ─── SEO: collapsible intro/content section ─── */
.seo-intro {
  margin: 36px 16px 24px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.6), rgba(20, 14, 8, 0.5));
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 14px;
  padding: 18px 22px;
  color: #d4c4a8;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.65;
}
.seo-intro summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #e8c878;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.seo-intro summary::-webkit-details-marker { display: none; }
.seo-intro summary::after {
  content: ' ▾';
  color: #a87b54;
  font-size: 12px;
}
.seo-intro[open] summary::after { content: ' ▴'; }
.seo-intro .seo-content { margin-top: 14px; font-size: 14px; }
.seo-intro h2 {
  font-family: 'Noto Serif', serif;
  font-size: 19px;
  color: #f0d28e;
  margin: 6px 0 12px;
  font-weight: 700;
}
.seo-intro h3 {
  font-family: 'Noto Serif', serif;
  font-size: 16px;
  color: #e0b56a;
  margin: 18px 0 8px;
  font-weight: 600;
}
.seo-intro p { margin: 8px 0; }
.seo-intro ul { margin: 6px 0 12px 20px; padding: 0; }
.seo-intro li { margin: 4px 0; }
.seo-intro strong { color: #f8e0a8; }
.seo-intro a { color: #f0d28e; text-decoration: none; }
.seo-intro a:hover { text-decoration: underline; }
.seo-foot {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  font-size: 13px;
  color: #a89580;
}
@media (max-width: 600px) {
  .seo-intro { margin: 24px 10px 16px; padding: 14px 16px; }
  .seo-intro h2 { font-size: 17px; }
  .seo-intro h3 { font-size: 15px; }
}

/* ─── SEO footer — text internal links for Googlebot ─── */
.seo-footer {
  margin: 48px auto 0;
  max-width: 1100px;
  padding: 28px 20px 20px;
  border-top: 1px solid rgba(212, 168, 87, 0.18);
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.4), rgba(13, 9, 7, 0.7));
  font-family: 'Inter', system-ui, sans-serif;
  color: #a89580;
  font-size: 13px;
  line-height: 1.65;
}
.seo-footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.seo-footer-col h2.seo-footer-title {
  font-family: 'Noto Serif', serif;
  font-size: 18px;
  color: #d4a857;
  margin: 0 0 6px;
  font-weight: 700;
}
.seo-footer-tag {
  font-size: 12px;
  color: #8a7660;
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.seo-footer-h {
  font-family: 'Noto Serif', serif;
  font-size: 13px;
  color: #d4a857;
  margin: 0 0 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.seo-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seo-footer-col li {
  margin: 4px 0;
}
.seo-footer-col a {
  color: #a89580;
  text-decoration: none;
  font-size: 12.5px;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.seo-footer-col a:hover {
  color: #f0d28e;
  border-bottom-color: rgba(240, 210, 142, 0.4);
}
.seo-footer-bottom {
  max-width: 1100px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 168, 87, 0.1);
  text-align: center;
  font-size: 11px;
  color: #6a5840;
}
.seo-footer-bottom p { margin: 4px 0; }
.seo-footer-bottom a {
  color: #a89580;
  text-decoration: none;
}
.seo-footer-bottom a:hover { color: #d4a857; }
.seo-footer-disclaimer {
  font-style: italic;
  opacity: 0.75;
  max-width: 560px;
  margin: 6px auto 0 !important;
}
@media (max-width: 600px) {
  .seo-footer { padding: 24px 16px 16px; margin-top: 32px; }
  .seo-footer-inner { gap: 20px; }
  .seo-footer-col h2.seo-footer-title { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   READABILITY ON TEMPLE BACKGROUND
   Sections that float on top of the photo (live-bar, dev-footer,
   seo-footer) need heavier backdrops + brighter text + text-shadow so
   they don't dissolve into the chùa image.
   ════════════════════════════════════════════════════════════════════ */

/* Live bar — frosted glass over photo */
.live-bar {
  background:
    linear-gradient(145deg, rgba(212, 168, 87, 0.10), rgba(20, 14, 8, 0.78)),
    rgba(13, 9, 7, 0.55);
  border-color: rgba(212, 168, 87, 0.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 244, 208, 0.05);
}
.live-stat-lbl {
  color: rgba(240, 220, 180, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.live-stat-num {
  text-shadow: 0 0 8px rgba(212, 168, 87, 0.45), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-item {
  color: rgba(232, 216, 192, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-item strong {
  color: var(--gold-light);
  text-shadow: 0 0 6px rgba(212, 168, 87, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-sep {
  color: rgba(212, 168, 87, 0.65);
}

/* Dev footer (donate prompt + disclaimer) — wrap in a soft card */
.dev-footer {
  margin: 34px 14px 18px;
  padding: 26px 20px 18px;
  border-radius: 18px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(212, 168, 87, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(46, 31, 16, 0.66), rgba(13, 9, 7, 0.86));
  border: 1px solid rgba(212, 168, 87, 0.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 228, 180, 0.12);
}
.dev-footer-sub {
  color: rgba(238, 210, 158, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.dev-footer-disclaimer {
  color: rgba(244, 228, 180, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Nút Hỷ cúng = vàng kim NHẠT, sang trọng + lấp lánh nhẹ */
.btn-donate-dev {
  color: #4a3416;
  text-shadow: none;
  background:
    linear-gradient(168deg, #fdf1d2 0%, #f3dca2 46%, #e6c67e 100%);
  border: 1px solid rgba(150, 110, 55, 0.45);
  box-shadow:
    0 6px 22px rgba(226, 190, 120, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 8px rgba(170, 125, 55, 0.3);
}
/* Lấp lánh nhẹ — vệt sáng quét ngang (chỉ animate transform → rẻ GPU) */
.btn-donate-dev::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: translateX(-200%) skewX(-18deg);
  animation: donateShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes donateShine {
  0% { transform: translateX(-200%) skewX(-18deg); }
  16% { transform: translateX(320%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

/* SEO footer — heavier backdrop + brighter children for readability */
.seo-footer {
  background:
    linear-gradient(180deg, rgba(20, 14, 8, 0.82), rgba(13, 9, 7, 0.94));
  border-top: 1px solid rgba(212, 168, 87, 0.30);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.seo-footer-tag {
  color: rgba(216, 200, 168, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col h2.seo-footer-title,
.seo-footer-col h3.seo-footer-h {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col a {
  color: rgba(216, 200, 168, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col a:hover {
  color: var(--gold-light);
}
.seo-footer-bottom {
  color: rgba(200, 184, 152, 0.80);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-disclaimer {
  color: rgba(216, 200, 168, 0.70);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ─── INTRO SPLASH — 3 giây: GIỌT NƯỚC RƠI XUỐNG HỒ. Đổ-bóng 3D nung sẵn (ripple-ring.png)
   + chuyển động bằng transform/opacity → mượt, KHÔNG nặng GPU. Tự vào sau 3s, không
   chuông, chỉ hiện 1 lần/phiên. ─── */
html.no-intro #intro-splash { display: none !important; }
#intro-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 82% 62% at 50% 30%, #16242e 0%, #0b1118 50%, #05070a 100%),
    #05070a;
  overflow: hidden;
  transition: opacity 0.6s ease;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#intro-splash.intro-out { opacity: 0; pointer-events: none; }
#intro-splash::after { /* sheen mặt nước + vignette cho chiều sâu */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 20% at 50% 37%, rgba(70, 98, 122, 0.28), transparent 70%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}
.intro-water { position: relative; width: 240px; height: 240px; margin-bottom: 8px; }
.intro-water > * { position: absolute; left: 50%; top: 50%; }
.ripple {
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  background: url('/ripple-ring.png') center / contain no-repeat;
  opacity: 0; transform: scale(0.12); will-change: transform, opacity;
}
.ripple-1 { animation: introRipple 1.8s ease-out 0.70s both; }
.ripple-2 { animation: introRipple 1.8s ease-out 1.15s both; }
.ripple-3 { animation: introRipple 1.8s ease-out 1.60s both; }
.intro-core {
  width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.85) 0%, rgba(255, 214, 140, 0.28) 42%, transparent 70%);
  opacity: 0; animation: introCore 1.1s ease-out 0.72s both;
}
.intro-glint {
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 234, 0.95) 0%, rgba(255, 228, 168, 0.4) 32%, transparent 70%);
  opacity: 0; transform: scale(0.2); will-change: transform, opacity;
  animation: introGlint 0.6s ease-out 0.6s both;
}
.intro-drop {
  width: 19px; height: 27px; margin: -13px 0 0 -9.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(at 38% 28%, #ffffff 0%, #ffedc6 42%, #9a7d4e 100%);
  box-shadow: 0 0 13px rgba(255, 236, 190, 0.55);
  opacity: 0; will-change: transform, opacity;
  animation: introDrop 0.72s cubic-bezier(0.5, 0, 0.85, 1) both;
}
.intro-words { text-align: center; position: relative; z-index: 1; }
.intro-line {
  font-family: "Cormorant Garamond", "Noto Serif", Cambria, "Times New Roman", serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(28px, 8vw, 38px); line-height: 1.25; color: #eee4cf; opacity: 0;
}
.intro-l1 { animation: introRise 0.9s ease-out 1.25s both; }
.intro-l2 { animation: introRise 0.9s ease-out 1.5s both; color: #f6eeda; }
.intro-ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; color: #c2b48f; font-size: 14px;
  opacity: 0; animation: introRise 0.9s ease-out 1.9s both;
}
.intro-ornament span { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 176, 196, 0.55)); }
.intro-ornament span:last-child { background: linear-gradient(90deg, rgba(159, 176, 196, 0.55), transparent); }
.intro-wordmark {
  font-family: "Cormorant Garamond", Cambria, "Times New Roman", serif;
  font-size: 13px; letter-spacing: 5px; color: #cdb88f;
  margin-top: 16px; opacity: 0; animation: introRise 0.9s ease-out 2.1s both;
}
@keyframes introDrop {
  0%   { opacity: 0; transform: translateY(-96px) scaleY(1.35); }
  16%  { opacity: 1; }
  82%  { opacity: 1; transform: translateY(-4px) scaleY(1.25); }
  100% { opacity: 0; transform: translateY(2px) scaleY(0.5); }
}
@keyframes introGlint {
  0%   { opacity: 0; transform: scale(0.2); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes introRipple {
  0%   { opacity: 0; transform: scale(0.12); }
  16%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes introCore { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes introRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .intro-drop, .intro-glint { display: none; }
  .ripple { animation: none; opacity: 0.4; transform: scale(0.8); }
  .ripple-2, .ripple-3 { display: none; }
  .intro-core { animation: introCore 0.4s ease-out both; }
  .intro-line, .intro-ornament, .intro-wordmark { animation: introRise 0.4s ease-out both; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HỘI VIÊN (17/10/2026) — hộp đăng ký, banner cửa hàng, viền BXH, hồ sơ.
   Vàng sen CỐ ĐỊNH (không đổi theo màu bản mệnh) để nhận diện gói ở mọi giao diện.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --hv-hi: #fff1c4; --hv: #e8bf68; --hv-lo: #a8702a; --hv-ink: #2a1a08; }
.hv-lotus { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.hv-lotus.xs { width: 14px; height: 14px; }
.hv-lotus.sm { width: 20px; height: 20px; }
.hv-lotus.md { width: 34px; height: 34px; }
.hv-lotus.lg { width: 46px; height: 46px; }
.hv-lotus.xl { width: 66px; height: 66px; filter: drop-shadow(0 0 18px rgba(232,191,104,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hv-lotus.xxl { width: 96px; height: 96px; filter: drop-shadow(0 0 28px rgba(232,191,104,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

#modal-member { z-index: 200; }
.hv-card { max-width: 520px; }
.hv-h2 { display: flex; align-items: center; gap: 8px; }
.hv-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 18px; }
.hv-body > .loading { padding: 40px 20px; text-align: center; color: var(--text-dim); }

.hv-hero { position: relative; text-align: center; padding: 26px 22px 20px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232,191,104,.22), rgba(232,191,104,0) 62%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(232,191,104,.14); }
.hv-hero-mark { display: flex; justify-content: center; margin-bottom: 8px; }
.hv-kicker { font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--hv); }
.hv-title { font-family: "Noto Serif", serif; font-weight: 700; font-size: 25px; line-height: 1.25; color: var(--hv-hi); margin: 6px 0; letter-spacing: .2px; }
.hv-sub { font-size: 14px; color: var(--text-dim); margin: 0; }
.hv-status { margin: 14px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; font-size: 13px; color: var(--text); }
.hv-status b { color: var(--hv-hi); font-weight: 600; }
.hv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hv-hi); background: rgba(232,191,104,.12); border: 1px solid rgba(232,191,104,.45); }
.hv-chip.ks, .hv-plan-ribbon, .hv-sb-go, .hv-mini, .hv-remind-go, .hv-plan.featured .hv-plan-cta, .hv-btn.primary {
  color: var(--hv-ink); background: linear-gradient(135deg, #fff1c4, #e8bf68 55%, #c9923e); }
.hv-chip.ks { border-color: rgba(255,241,196,.8); }
.hv-status-link { color: var(--hv); font-weight: 600; text-decoration: none; }

.hv-strip { display: flex; gap: 10px; overflow-x: auto; padding: 16px 18px 6px; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.hv-strip::-webkit-scrollbar { display: none; }
.hv-thumb { flex: none; width: 70px; text-align: center; scroll-snap-align: start; }
.hv-thumb-img { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(232,191,104,.18), rgba(0,0,0,.25) 70%); border: 1px solid rgba(232,191,104,.3); }
.hv-thumb-img img, .hv-thumb-img svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-thumb-img.dui img { object-fit: contain; padding: 5px; }
.hv-thumb-img .skin-preview-img { animation: none; filter: none; }   /* 13 ảnh nhỏ cùng trôi = nặng máy yếu */
.hv-thumb-name { font-size: 11px; line-height: 1.25; color: var(--text-dim); margin-top: 5px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hv-value { text-align: center; font-size: 13px; color: var(--text-dim); padding: 8px 18px 2px; }
.hv-value s { color: var(--text-faint); }
.hv-value b { color: var(--hv-hi); font-weight: 600; }

.hv-perks { list-style: none; margin: 16px 18px 4px; padding: 0; display: grid; gap: 11px; }
.hv-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--text); }
.hv-perks li i { width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; position: relative;
  background: radial-gradient(circle, rgba(232,191,104,.25), rgba(232,191,104,.08)); border: 1px solid rgba(232,191,104,.55); }
.hv-perks li i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--hv-hi); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hv-perks b { color: var(--hv-hi); font-weight: 600; }
.hv-perks small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.hv-founders { margin: 16px 18px 0; font-size: 12px; color: var(--text-dim); text-align: center; }
.hv-founders-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; margin-bottom: 6px; }
.hv-founders-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9923e, #fff1c4); border-radius: 6px; }

.hv-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 18px 6px; }
.hv-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 16px 14px 14px; min-height: 198px;
  border-radius: 16px; cursor: pointer; font: inherit; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid rgba(232,191,104,.22);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.hv-plan:hover { transform: translateY(-2px); border-color: rgba(232,191,104,.55); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.hv-plan.featured { background: linear-gradient(160deg, rgba(232,191,104,.20), rgba(232,191,104,.05) 70%); border-color: rgba(240,206,128,.75);
  box-shadow: inset 0 0 0 1px rgba(255,241,196,.12), 0 10px 28px rgba(168,112,42,.25); }
.hv-plan-ribbon { position: absolute; top: -10px; right: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; }
.hv-plan-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hv); }
.hv-plan-price { font-family: "Noto Serif", serif; font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--hv-hi); margin-top: 6px; }
.hv-plan-price small { font-size: 16px; font-weight: 600; margin-left: 1px; }
.hv-plan-per { font-size: 12.5px; color: var(--text-dim); }
.hv-plan-lines { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.hv-plan-lines span::before { content: "·"; color: var(--hv); margin-right: 6px; font-weight: 700; }
.hv-plan-cta { margin-top: auto; align-self: stretch; text-align: center; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--hv-hi); background: rgba(232,191,104,.12); border: 1px solid rgba(232,191,104,.4); }
.hv-plan.featured .hv-plan-cta { border-color: transparent; box-shadow: 0 4px 14px rgba(232,191,104,.35); }
.hv-plan.sk { cursor: default; background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%);
  background-size: 220% 100%; animation: hv-sk 1.2s linear infinite; }
.hv-plan.sk:hover { transform: none; box-shadow: none; }
@keyframes hv-sk { from { background-position: 100% 0; } to { background-position: -120% 0; } }

.hv-rules { margin: 16px 18px 0; border-top: 1px solid rgba(232,191,104,.12); padding-top: 12px; font-size: 13px; color: var(--text-dim); }
.hv-rules summary { cursor: pointer; color: var(--hv); font-weight: 600; list-style: none; }
.hv-rules summary::-webkit-details-marker { display: none; }
.hv-rules summary::after { content: " ▾"; }
.hv-rules[open] summary::after { content: " ▴"; }
.hv-rules ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }
.hv-foot { text-align: center; font-size: 12px; color: var(--text-faint); margin: 14px 18px 0; }

.hv-qr { padding: 14px 18px 6px; }
.hv-back { background: none; border: none; color: var(--hv); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.hv-qr-sum { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(232,191,104,.16), rgba(232,191,104,.04)); border: 1px solid rgba(232,191,104,.4); }
.hv-qr-price { font-family: "Noto Serif", serif; font-weight: 700; font-size: 24px; color: var(--hv-hi); line-height: 1.2; }
.hv-qr-inc { font-size: 12.5px; color: var(--text-dim); }
.hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 16px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid rgba(232,191,104,.45); color: var(--hv-hi); background: rgba(232,191,104,.10); transition: transform .15s ease; }
.hv-btn:hover { transform: translateY(-1px); }
.hv-btn.primary { border-color: transparent; box-shadow: 0 6px 18px rgba(232,191,104,.32); }
.hv-btn.ghost { background: transparent; }
.hv-btn.wide { display: flex; width: 100%; margin-top: 12px; }

.hv-done { text-align: center; padding: 34px 22px 16px; background: radial-gradient(120% 80% at 50% 0%, rgba(232,191,104,.25), rgba(232,191,104,0) 60%); }
.hv-done-mark { display: flex; justify-content: center; margin-bottom: 10px; animation: hv-bloom 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes hv-bloom { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.hv-done-txt { font-size: 14px; color: var(--text); line-height: 1.6; margin: 8px 0 18px; }
.hv-done-txt b { color: var(--hv-hi); }
.hv-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.hv-cross { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0; padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer; font: inherit;
  color: var(--text); background: linear-gradient(160deg, rgba(232,191,104,.14), rgba(232,191,104,.03)); border: 1px solid rgba(232,191,104,.45); transition: border-color .15s ease, transform .15s ease; }
.hv-cross:hover { border-color: rgba(255,241,196,.8); transform: translateY(-1px); }
.hv-cross-txt { flex: 1; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.hv-cross-txt b { color: var(--hv-hi); font-weight: 600; }
.hv-cross-go { flex: none; font-size: 13px; font-weight: 600; color: var(--hv); white-space: nowrap; }

.hv-shop-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: radial-gradient(140% 120% at 0% 0%, rgba(232,191,104,.24), rgba(232,191,104,.04) 60%), var(--bg-card);
  border: 1px solid rgba(240,206,128,.6); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hv-shop-banner.active { cursor: default; border-color: rgba(232,191,104,.4); }
.hv-sb-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-sb-txt b { font-family: "Noto Serif", serif; font-size: 15px; font-weight: 700; color: var(--hv-hi); }
.hv-sb-txt span { font-size: 12.5px; color: var(--text-dim); }
.hv-sb-go { flex: none; padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; }
/* Dấu sen góc phải thẻ = món có trong gói. Tuyệt đối không thêm dòng chữ dưới thẻ:
   thẻ cao cố định 160px trong lưới cuộn → nội dung dài hơn là ảnh mõ bị co (80→59px). */
.skin-hv-tag { position: absolute; top: 7px; right: 7px; z-index: 4; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgba(20,14,8,.72); border: 1px solid rgba(232,191,104,.6); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.skin-hv-tag .hv-lotus.xs { width: 15px; height: 15px; }
.skin-price.hv { color: var(--hv-hi); font-weight: 600; }

/* ─── BXH: KHUNG HỘI VIÊN (18/10/2026 — bỏ nhãn chữ "Khai Sơn", thay bằng HUY HIỆU SEN đính ngoài khung) ───
   Khung = vành gradient vàng vẽ bằng mask (chỉ tô đúng vành, không đè nền). Huy hiệu đính trên mép trên,
   thẳng cột hạng, nửa nằm ngoài khung — margin-top chừa chỗ cho phần nhô lên. Khai Sơn: vành dày + sáng hơn,
   hào quang xoay chậm sau huy hiệu, vệt sáng lướt qua khung mỗi 7s. CHỈ animate transform (rẻ cho GPU —
   xem ca iPhone đời mới treo vì GPU bão hoà). */
.lb-row.lb-hv { position: relative; isolation: isolate; margin-top: 15px; border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(232,191,104,.11), rgba(232,191,104,.025) 60%, transparent); }
.lb-row.lb-hv::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(100deg, rgba(240,205,130,.95), rgba(255,241,196,.55) 26%, rgba(168,112,42,.6) 56%, rgba(232,191,104,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.lb-row.lb-hv.me { background: linear-gradient(90deg, rgba(232,191,104,.18), rgba(212,168,87,.08)); }
.lb-row.lb-ks { margin-top: 20px; border-width: 1.5px;
  background: linear-gradient(90deg, rgba(232,191,104,.2), rgba(232,191,104,.06) 55%, rgba(232,191,104,.025));
  box-shadow: 0 0 18px rgba(232,191,104,.15), inset 0 0 20px rgba(232,191,104,.06); }
.lb-row.lb-ks::before { inset: -1.5px; padding: 1.5px;
  background: linear-gradient(100deg, #f7dc96, #fff6d8 16%, #c9923e 36%, #ffe9b0 56%, #a8702a 78%, #f3d58a); }

.lb-seal { position: absolute; z-index: 1; left: 17px; top: -12px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-seal::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #4a3418, #1b1209 72%);
  box-shadow: 0 0 0 1px rgba(232,191,104,.85), 0 0 0 3px var(--bg-mid), 0 3px 8px rgba(0,0,0,.55); }
.lb-seal .hv-lotus { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: -1px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.lb-seal.ks { left: 15px; top: -14px; width: 26px; height: 26px; }
.lb-seal.ks::after { background: radial-gradient(circle at 50% 34%, #5a3f1c, #1d1309 74%);
  box-shadow: 0 0 0 1.5px #f0cd82, 0 0 0 3.5px var(--bg-mid), 0 0 14px 3px rgba(232,191,104,.4), 0 3px 8px rgba(0,0,0,.55); }
.lb-seal.ks .hv-lotus { width: 18px; height: 18px; }
/* hào quang: tia vàng mảnh, mờ dần ra ngoài, xoay 18s/vòng */
.lb-seal.ks::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,226,150,.55) 0 4deg, transparent 4deg 22.5deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 52%, transparent 100%);
          mask: radial-gradient(circle closest-side, #000 52%, transparent 100%);
  animation: lb-rays 18s linear infinite; }
@keyframes lb-rays { to { transform: rotate(1turn); } }
/* vệt sáng lướt ngang khung Khai Sơn — nằm dưới chữ (z-index -1 trong khung isolate) */
.lb-glint { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lb-glint::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,241,196,.12) 42%, rgba(255,250,230,.2) 50%, rgba(255,241,196,.12) 58%, transparent);
  transform: translateX(-110%) skewX(-16deg); animation: lb-glint 7s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes lb-glint { 0%, 64% { transform: translateX(-110%) skewX(-16deg); } 92%, 100% { transform: translateX(310%) skewX(-16deg); } }
@media (prefers-reduced-motion: reduce) { .lb-seal.ks::before { animation: none; } .lb-glint { display: none; } }

.hv-profile-wrap:empty { display: none; }
.hv-prof { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(160deg, rgba(232,191,104,.14), rgba(232,191,104,.03)); border: 1px solid rgba(232,191,104,.45); }
.hv-prof.active { cursor: default; flex-wrap: wrap; }
.hv-prof.active .hv-prof-txt { min-width: max-content; }   /* chật thì nút xuống dòng, không bẻ đôi dòng hạn */
.hv-prof-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hv-prof-t { font-family: "Noto Serif", serif; font-weight: 700; font-size: 15px; color: var(--hv-hi); }
.hv-prof-s { font-size: 12.5px; color: var(--text-dim); }
.hv-prof-act { display: flex; gap: 8px; }
.hv-mini { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; }
.hv-mini.ghost { color: var(--hv-hi); background: transparent; border: 1px solid rgba(232,191,104,.45); }

.hv-remind { position: fixed; z-index: 950; left: 50%; top: 74px; transform: translateX(-50%); width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-radius: 14px; color: var(--text);
  background: rgba(30,22,14,.96); border: 1px solid rgba(232,191,104,.55); box-shadow: 0 12px 34px rgba(0,0,0,.55); backdrop-filter: blur(8px);
  animation: hv-drop .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes hv-drop { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hv-remind-txt { flex: 1; font-size: 13px; line-height: 1.45; }
.hv-remind-txt b { color: var(--hv-hi); }
.hv-remind-go { flex: none; padding: 7px 12px; border-radius: 9px; border: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.hv-remind-x { flex: none; background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 4px 6px; }
#btn-nhom[hidden] { display: none !important; }

@media (max-width: 420px) {
  .hv-title { font-size: 22px; }
  .hv-plans { gap: 10px; margin: 20px 14px 6px; }
  .hv-plan { padding: 15px 11px 12px; min-height: 192px; }
  .hv-plan-price { font-size: 24px; }
  .hv-plan-ribbon { right: 8px; font-size: 10px; padding: 3px 7px; }
  .hv-plan-lines { font-size: 12px; }
  .hv-perks { margin: 16px 14px 4px; }
  .hv-strip { padding: 14px 14px 6px; }
  .hv-shop-banner { padding: 12px; gap: 10px; }
  .hv-shop-banner .hv-lotus.md { width: 28px; height: 28px; }
  .hv-sb-txt b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-done-mark, .hv-remind, .hv-plan.sk { animation: none; }
}

/* ─── BXH: dòng "của bạn" GHIM cuối bảng khi chưa vào top 100 (17/10/2026) ─── */
.lb-row.lb-pinned { position: sticky; bottom: 0; z-index: 2; margin-top: 12px;
  background: var(--bg-mid); border: 1px solid rgba(212,168,87,.4);
  /* dải nền 22px phía dưới che phần đệm đáy của khung cuộn — chữ dòng sau không lọt ra;
     loang 3px sang hai bên để vành vàng của dòng cuộn ngầm không lộ thành đường kẻ ở mép */
  box-shadow: 0 22px 0 3px var(--bg-mid), 0 -10px 22px rgba(0,0,0,.5); }
/* mép trên: dải mờ dần che các dòng đang cuộn ngầm (kể cả huy hiệu sen nhô lên của chúng). Khi dòng
   ghim nằm đúng chỗ (cuộn hết bảng), 20px − margin-top 12px = 8px chỉ chạm phần đệm đáy 10px của dòng trên */
.lb-row.lb-pinned::after { content: ''; position: absolute; left: -10px; right: -10px; bottom: calc(100% + 1px); height: 20px;
  z-index: -2; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg-mid) 80%); }
.lb-row.lb-pinned.lb-hv { margin-top: 18px; border-color: transparent;
  background: linear-gradient(90deg, rgba(232,191,104,.18), rgba(232,191,104,.05) 60%), var(--bg-mid); }
.lb-row.lb-pinned.lb-ks { margin-top: 22px; border-width: 1.5px; box-shadow: 0 0 18px rgba(232,191,104,.15), 0 22px 0 3px var(--bg-mid), 0 -10px 22px rgba(0,0,0,.5); }
.lb-row.lb-pinned .lb-rank { color: var(--text-faint); }
.lb-you { font-size: 11px; font-weight: 500; color: var(--text-dim); }

/* ─── Hộp Ủng hộ: khách tự đặt tên hiện trên Bảng Vàng (17/10/2026) ─── */
.donate-name-box { margin: 14px 0 6px; padding: 12px 13px; border-radius: 12px; text-align: left;
  background: rgba(212,168,87,.06); border: 1px solid rgba(212,168,87,.25); }
.donate-name-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: var(--gold); margin-bottom: 7px; }
.donate-name-box input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px;
  color: var(--text); background: rgba(0,0,0,.28); border: 1px solid rgba(212,168,87,.3); outline: none; }
.donate-name-box input[type="text"]:focus { border-color: rgba(232,191,104,.7); }
.donate-name-box input[type="text"]:disabled { opacity: .45; }
.donate-anon { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; }
.donate-anon input { width: 17px; height: 17px; accent-color: #d4a857; }
.donate-name-status { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.donate-name-status b { color: var(--gold-light); }
.donate-name-status.ok { color: #9fd8a8; }
.donate-name-status.ok b { color: #fff1c4; }
.donate-name-status.err { color: #f0a090; }
.donate-prov-link { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--gold); text-decoration: underline; }


/* ══ MÀN "LÊN CẤP" ĐÈN TINH TẤN (20/10/2026) ══ */
.lvup-ov { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(10,6,3,0); transition: background .3s ease; -webkit-tap-highlight-color: transparent; }
.lvup-ov.show { background: rgba(10,6,3,.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lvup-card { --lv-a: #ffd9b0; --lv-b: #ff8a50; --lv-g: 255,150,90;
  position: relative; width: 100%; max-width: 360px; text-align: center; border-radius: 24px; padding: 20px 18px 16px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--lv-g),.24), transparent 62%), linear-gradient(180deg, #2a1d12, #150e08);
  border: 1px solid rgba(var(--lv-g),.55); box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 40px rgba(var(--lv-g),.22);
  transform: translateY(16px) scale(.94); opacity: 0; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.lvup-ov.show .lvup-card { transform: none; opacity: 1; }
.lvup-ov.st2 .lvup-card { --lv-a: #e0f5d0; --lv-b: #7fcf6e; --lv-g: 150,215,130; }
.lvup-ov.st3 .lvup-card { --lv-a: #ffe0ec; --lv-b: #f08ab4; --lv-g: 255,170,205; }
.lvup-ov.st4 .lvup-card { --lv-a: #ffe0ec; --lv-b: #ec82ae; --lv-g: 255,170,205; }
.lvup-ov.st5 .lvup-card { --lv-a: #ffe6f0; --lv-b: #ee7fae; --lv-g: 255,165,205; }
.lvup-ov.st6 .lvup-card { --lv-a: #fff0f6; --lv-b: #e9799f; --lv-g: 255,175,210; }
.lvup-ov.st7 .lvup-card { --lv-a: #fff3d0; --lv-b: #f2b84a; --lv-g: 255,210,130; }
.lvup-ov.st8 .lvup-card { --lv-a: #f6f2ff; --lv-b: #b9a8ee; --lv-g: 220,210,255; }
.lvup-ov.st9 .lvup-card { --lv-a: #fff6d6; --lv-b: #f0c04a; --lv-g: 255,215,120; }
.lvup-ov.st10 .lvup-card { --lv-a: #fffdf2; --lv-b: #f0c96a; --lv-g: 255,235,190; }
.lvup-k { font-size: 11.5px; font-weight: 900; letter-spacing: 3px; color: rgba(var(--lv-g),1); }
.lvup-stage { position: relative; width: 190px; height: 170px; margin: 2px auto 0; display: flex; align-items: center; justify-content: center; }
.lvup-burst { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(var(--lv-g),.42), rgba(var(--lv-g),.12) 46%, transparent 70%);
  animation: lvBurstIn 1s ease-out .1s forwards, lvGlowPulse 4.5s ease-in-out 1.1s infinite; }
@keyframes lvGlowPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lvup-em { position: relative; transform: scale(.6); opacity: 0; animation: lvPop .9s cubic-bezier(.22,1.2,.36,1) .1s forwards; filter: drop-shadow(0 6px 22px rgba(var(--lv-g),.55)); }
@keyframes lvPop { to { transform: none; opacity: 1; } }
@keyframes lvBurstIn { to { opacity: 1; } }
@keyframes lvBurstSpin { to { transform: rotate(360deg); } }
.lvup-t { margin: 2px 0 0; font-family: "Noto Serif", serif; font-size: 25px; font-weight: 800; line-height: 1.2;
  background: linear-gradient(180deg, var(--lv-a), var(--lv-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lvup-s { margin-top: 5px; font-size: 13.5px; color: #e6d3ad; line-height: 1.5; }
.lvup-s b { color: var(--lv-a); }
.lvup-evo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; padding: 8px 12px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); width: max-content; max-width: 100%; }
.lvup-evo span { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .6; }
.lvup-evo span.now { opacity: 1; }
.lvup-evo em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #e6d3ad; }
.lvup-evo b { color: rgba(var(--lv-g),1); font-size: 18px; }
.lvup-ladder { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; margin: 12px auto 0; }
.lvup-ladder span { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.04); filter: grayscale(1) brightness(.55); }
.lvup-ladder span.on { filter: none; opacity: .8; }
.lvup-ladder span.now { filter: none; background: rgba(var(--lv-g),.22); box-shadow: 0 0 0 1px rgba(var(--lv-g),.7); }
.lvup-medal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #e6d3ad; }
.lvup-medal b { color: #fff1cf; }
.lvup-next { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: #cdb88f; }
.lvup-next b { color: #ffd98a; }
.lvup-ghost { display: inline-flex; line-height: 0; filter: grayscale(.6) brightness(.8); opacity: .85; }
.lvup-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lvup-btns button { cursor: pointer; border: none; font: inherit; font-size: 15px; font-weight: 800; padding: 13px 16px; border-radius: 14px; }
.lvup-share { color: #2a1a06; background: linear-gradient(180deg, var(--lv-a), var(--lv-b)); box-shadow: 0 8px 22px rgba(var(--lv-g),.35); }
.lvup-ok { color: #e6d3ad; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12) !important; }
@media (prefers-reduced-motion: reduce) {
  .lvup-card { transition: opacity .2s ease; transform: none; }
  .lvup-em { animation: none; transform: none; opacity: 1; }
  .lvup-burst { animation: none; opacity: 1; }
}

/* ══ QUÀ TINH TẤN (02/11/2026) — lộ trình quà trong khung chuỗi · màn nhận quà · nhãn mõ tặng ══
   Cùng ngôn ngữ với .sk-ladder-wrap / .sk-badge / màn lên cấp: pastel hồng sen, không khung kim loại.
   Chỉ animate transform/opacity (luật iPhone). */
.qt-wrap { margin: 14px 4px 0; padding: 12px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,170,205,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,190,215,.24); }
.qt-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #eab9cd; text-align: center; }
.qt-focus { margin: 7px 4px 0; font-size: 12.5px; color: #e6d3ad; text-align: center; line-height: 1.45; }
.qt-focus b { color: #ffd6e6; }
.qt-focus.act { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 8px 8px 11px; border-radius: 12px; background: rgba(255,170,205,.12); border: 1px solid rgba(255,170,205,.35); }
.qt-go { flex: 0 0 auto; margin-left: auto; border: none; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 800; color: #4a1a2c; background: linear-gradient(180deg, #ffe0ec, #ef8fb6); cursor: pointer; }
.qt-road { position: relative; display: flex; gap: 4px; margin-top: 10px; }
.qt-line { position: absolute; left: 10%; right: 10%; top: 24px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); }
.qt-line i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffd6e6, #ef8fb6); }
.qt-tile { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.qt-tile[data-qt] { cursor: pointer; }
.qt-art { position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2a1f18; border: 1.5px solid rgba(255,255,255,.1); line-height: 0; }
.qt-art > img, .qt-art > svg { max-width: 44px; max-height: 44px; }
.qt-tile.got .qt-art, .qt-tile.use .qt-art, .qt-tile.have .qt-art { border-color: rgba(255,190,215,.7); background: #33212a; }
.qt-tile.next .qt-art { border-color: #ffc4dc; box-shadow: 0 0 0 4px rgba(255,170,205,.16), 0 0 16px rgba(255,170,205,.35); }
.qt-tile.lock .qt-art { filter: grayscale(.85) brightness(.62); }
.qt-ok { position: absolute; right: -3px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%; background: #8fe0b0; color: #123a24; font-style: normal; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid #1a1410; }
.qt-day { margin-top: 5px; font-size: 9px; font-weight: 800; color: #b09870; letter-spacing: .2px; }
.qt-n { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 800; color: #e6d3ad; line-height: 1.15; min-height: 22px; }
.qt-lab { margin-top: 3px; font-size: 8.5px; font-weight: 800; padding: 2px 5px; border-radius: 999px; color: #b09870; line-height: 1.2; max-width: 100%; }
.qt-tile.got .qt-lab { color: #8fe0b0; }
.qt-tile.use .qt-lab, .qt-tile.have .qt-lab { color: #4a1a2c; background: linear-gradient(180deg, #ffe0ec, #ef8fb6); }
.qt-tile.next .qt-lab { color: #ffd6e6; background: rgba(255,170,205,.16); border: 1px solid rgba(255,170,205,.4); }
.qt-tile.lock .qt-n { color: #a8957a; }
.qt-foot { margin-top: 9px; font-size: 10px; color: #9a8768; text-align: center; font-style: italic; line-height: 1.4; }
.qt-nhac { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; padding: 8px 8px 8px 11px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #d8c19a; line-height: 1.4; text-align: left; }
.qt-nhac b { color: #ffd6e6; }
.qt-nhac button { flex: 0 0 auto; margin-left: auto; border: 1px solid rgba(255,170,205,.45); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 800; color: #ffd6e6; background: rgba(255,170,205,.12); cursor: pointer; }
.qt-nhac.on button { color: #b09870; border-color: rgba(255,255,255,.14); background: none; }
.qt-pond { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6fb7b8, #2f6f7a 70%, #1f4f5a); overflow: hidden; }
.qt-pond img { transform: rotate(-20deg); }
.qt-duo { position: relative; display: inline-flex; }
.qt-duo-c { position: absolute; right: -9px; bottom: -6px; line-height: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
/* màn nhận quà — dùng lại khung màn lên cấp (.lvup-*) */
.qt-ov .lvup-k { letter-spacing: 2.2px; }
.qt-ov .lvup-card > :not(.qt-petal) { position: relative; z-index: 1; }
.qt-ov.qt-long .lvup-card { --lv-a: #e6f6ff; --lv-b: #7cc4f0; --lv-g: 150,210,255; }
.qt-stage-pond { position: relative; width: 168px; height: 168px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 42% 36%, #7cc3c0, #2f7480 62%, #1d4a56); box-shadow: inset 0 0 30px rgba(0,30,40,.55), 0 10px 30px rgba(255,170,205,.25); }
.qt-stage-pond .pad { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #8fcf86, #4f9a55); opacity: .9; }
.qt-stage-pond .koi { position: absolute; left: 50%; top: 50%; width: 132px; margin: -36px 0 0 -66px; animation: qtSwim 7s ease-in-out infinite; }
@keyframes qtSwim { 0%, 100% { transform: rotate(-24deg) translate(-6px, 4px); } 50% { transform: rotate(-12deg) translate(8px, -6px); } }
.qt-petal { position: absolute; top: -12px; width: 12px; height: 16px; border-radius: 12px 12px 12px 0; background: linear-gradient(180deg, #ffd6e6, #ef8fb6); opacity: 0; animation: qtFall 6s linear infinite; pointer-events: none; }
@keyframes qtFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .85; } 100% { transform: translate(-30px, 330px) rotate(220deg); opacity: 0; } }
.qt-many { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px auto 0; }
.qt-many span { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.qt-many em { font-style: normal; font-size: 11px; font-weight: 700; color: #e6d3ad; }
.qt-many .qt-pond { flex: 0 0 auto; }
.qt-nhac-ask { display: block; margin: 12px auto 0; border: 1px dashed rgba(255,170,205,.5); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; color: #ffd6e6; background: rgba(255,170,205,.08); cursor: pointer; }
/* nhãn đếm giờ mõ tặng dưới mõ */
.qt-chip { display: flex; align-items: center; gap: 7px; width: max-content; max-width: 94%; margin: 8px auto 0; padding: 5px 13px 5px 6px; border-radius: 999px;
  background: rgba(40,22,30,.82); border: 1px solid rgba(255,170,205,.55); color: #ffe6ef; font-size: 12.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.qt-chip[hidden] { display: none; }
.qt-chip img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.qt-chip b { color: #fff; font-variant-numeric: tabular-nums; }
.qt-chip u { color: #ffd6e6; cursor: pointer; text-underline-offset: 2px; }
/* lời chào: hẹn quà ngày mai */
#tk-an-qua[hidden] { display: none; }
#tk-an .qt-tease { margin: 7px auto 0; display: flex; align-items: center; gap: 8px; max-width: 300px; padding: 7px 12px 7px 7px; border-radius: 14px; text-align: left;
  background: rgba(255,170,205,.13); border: 1px solid rgba(255,170,205,.38); font-size: 12.5px; color: #ffe6ef; line-height: 1.35; }
#tk-an .qt-tease b { color: #fff; }
#tk-an .qt-tease .qt-pond { flex: 0 0 38px; }
@media (prefers-reduced-motion: reduce) { .qt-stage-pond .koi { animation: none; } .qt-petal { display: none; } }