/* ═══════════════════════════════════════════════════════════════
   Gradient đậm hơn + tương tác rõ hơn. Nạp sau art.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── nền: bốn quầng màu đậm, có nhịp trôi chậm ─────────────────── */
body{
  background:
    radial-gradient(120% 72% at 4% -12%, #1b2436 0%, rgba(27,36,54,0) 58%),
    radial-gradient(95% 65% at 104% -4%, #2a1830 0%, rgba(42,24,48,0) 55%),
    radial-gradient(120% 80% at 62% 118%, #123028 0%, rgba(18,48,40,0) 58%),
    radial-gradient(70% 50% at 30% 60%, #101826 0%, rgba(16,24,38,0) 70%),
    #0A0A0B;
  background-attachment:fixed;
}

/* quầng aurora trôi rất chậm phía sau nội dung */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(closest-side, rgba(45,107,255,.20), transparent 70%) 12% 18%/58vmax 58vmax no-repeat,
    radial-gradient(closest-side, rgba(255,61,139,.16), transparent 70%) 88% 26%/52vmax 52vmax no-repeat,
    radial-gradient(closest-side, rgba(35,232,212,.15), transparent 70%) 62% 92%/62vmax 62vmax no-repeat;
  filter:blur(18px);
  animation:aurora 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}

/* khối xen kẽ đậm hơn */
.band--deep{
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(45,107,255,.16) 0%, transparent 62%),
    radial-gradient(85% 75% at 0% 100%, rgba(255,61,139,.13) 0%, transparent 62%),
    radial-gradient(60% 50% at 50% 50%, rgba(35,232,212,.05) 0%, transparent 70%),
    rgba(255,255,255,.014);
}

/* ── chữ lớn: gradient rõ hơn ─────────────────────────────────── */
.display{
  background-image:linear-gradient(175deg, #FFFFFF 0%, #F4F1EA 38%, #C9CFD6 70%, #7E8892 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── dòng mức: hover rõ ràng hơn ──────────────────────────────── */
.rate{transition:padding-left .26s cubic-bezier(.16,.84,.24,1)}
.rate__amount{transition:color .18s linear,transform .26s cubic-bezier(.16,.84,.24,1)}
.rate__label{transition:color .18s linear,letter-spacing .26s cubic-bezier(.16,.84,.24,1)}

.rate:hover{padding-left:22px}
.rate:hover .rate__amount{transform:translateX(6px)}
.rate:hover .rate__label{color:var(--tile);letter-spacing:.26em}

.rate__go{transition:background-color .2s linear,border-color .2s linear,color .2s linear,transform .26s cubic-bezier(.16,.84,.24,1)}
.rate:hover .rate__go{
  background:var(--tile,var(--acid));
  border-color:var(--tile,var(--acid));
  color:var(--ink);
  transform:translateX(5px);
}

/* thanh màu bên trái đậm hơn */
.rate::before{width:3px;background:var(--tile,var(--acid))}

/* ── splash: đậm và to hơn nữa ─────────────────────────────────── */
.rate__film{
  background-size:400% 100%;
  transform:scaleY(1.5);
  transform-origin:center;
}
.rate:hover .rate__film,
.rate:focus-visible .rate__film{opacity:1}

/* ── nút: hút mạnh hơn, viền sáng hơn ─────────────────────────── */
.btn--red{border-width:1.5px}
.btn--red:hover{box-shadow:0 0 0 1px rgba(216,255,62,.35),0 10px 30px -12px rgba(216,255,62,.6)}

/* ── nav: gạch chân chạy ──────────────────────────────────────── */
.nav__links a{position:relative}
.nav__links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:linear-gradient(90deg,var(--acid),var(--cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.16,.84,.24,1);
}
.nav__links a:hover::after{transform:scaleX(1)}

/* ── dòng plugin: vạch màu bên trái khi mở ────────────────────── */
.plug{position:relative;padding-left:0;transition:padding-left .24s cubic-bezier(.16,.84,.24,1)}
.plug::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--acid),var(--cyan));
  transform:scaleY(0);transform-origin:top;
  transition:transform .26s cubic-bezier(.16,.84,.24,1);
}
.plug:hover,.plug[open]{padding-left:14px}
.plug:hover::before,.plug[open]::before{transform:scaleY(1)}

/* ── số liệu sống: hover đổi màu ──────────────────────────────── */
.figure dd{transition:color .2s linear,transform .26s cubic-bezier(.16,.84,.24,1)}
.figure:hover dd{color:var(--acid);transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   Nút Ủng hộ: hover -> texture graffiti phủ kín + bloom
   ═══════════════════════════════════════════════════════════════ */
.btn--red{position:relative;overflow:hidden;isolation:isolate}
.btn--red > span{position:relative;z-index:2}

.btn__film{
  position:absolute;
  inset:-30% -6%;
  z-index:1;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background-image:url("film/screen01.webp");
  background-repeat:no-repeat;
  background-size:400% 100%;
  background-position-x:0%;
  filter:hue-rotate(var(--bh,80deg)) saturate(1.25) brightness(1.15);
  transform:scaleY(1.6);
  transition:opacity .14s linear;
  will-change:background-position,opacity;
}

.btn--red:hover .btn__film,
.btn--red:focus-visible .btn__film{
  opacity:1;
  animation:filmrun .5s steps(3) forwards;
}

/* quầng sáng: hai lớp, lớp ngoài rộng và mờ */
.btn--red:hover,
.btn--red:focus-visible{
  box-shadow:
    0 0 0 1px rgba(216,255,62,.55),
    0 0 18px 2px rgba(216,255,62,.35),
    0 0 60px 10px rgba(35,232,212,.22),
    0 14px 40px -14px rgba(216,255,62,.55);
  transition:box-shadow .22s linear,border-color .2s linear,color .2s linear;
}

/* hero dùng cặp acid -> cyan, nav dùng acid thuần */
#nav-cta{--bh:70deg}
#cta-main{--bh:95deg}
.dock .btn{--bh:60deg}

@media (prefers-reduced-motion:reduce){
  .btn--red:hover .btn__film,
  .btn--red:focus-visible .btn__film{animation:none;opacity:.85;background-position-x:60%}
}

/* ── ô đếm ngược duy nhất ─────────────────────────────────────── */
.live-figures{grid-template-columns:1fr}
.live-figures .figure dd{
  font-size:clamp(30px,4.4vw,46px);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--acid);
}
.figure--count dd span#countdown{font-size:1em;letter-spacing:0;color:var(--acid)}

/* ═══════════════════════════════════════════════════════════════
   Sửa lỗi UX đo được: tương phản và vùng chạm
   ═══════════════════════════════════════════════════════════════ */
:root{--dim-2:#918D86}

/* 3.68 -> 5.3 : chữ phụ và chữ pháp lý phải đọc được */
.cta-note,.rate__note,.foot__legal,.foot__fine,.plug__role,.figures dt{
  color:#918D86;
}
.foot__legal{font-size:12.5px;line-height:1.7}

/* quy đổi ngày máy chủ hiện rõ màu của ô */
.rate__note .rate__eq,.rate__eq{color:var(--tile,var(--acid))}

/* vùng chạm tối thiểu 44px */
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.snd{min-height:44px;padding:10px 12px}

/* dải tin cậy dưới số liệu */
.trust{
  margin:22px 0 0;
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#918D86;
}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{
  content:"";
  width:5px;height:5px;flex:0 0 auto;
  background:var(--acid);border-radius:50%;
  opacity:.85;
}