/* ═══════════════════════════════════════════════════════════════
   Lớp hướng nghệ thuật — nạp sau cùng, đè lên token cũ.
   Lấy từ bảng màu của NopiA: nền gần đen, neon bão hoà, nét cọ tay.
   Không ảnh. Mọi hình khối là SVG/CSS viết tay.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0B;
  --ink-2:#121215;
  --ink-3:#1A1A1F;

  --bone:#F4F1EA;
  --bone-72:rgba(244,241,234,.74);
  --bone-52:rgba(244,241,234,.54);
  --bone-38:rgba(244,241,234,.38);

  --dim:#A6A29B;
  --dim-2:#6E6A64;

  --line:rgba(244,241,234,.12);
  --line-2:rgba(244,241,234,.24);

  /* neon lấy từ bảng màu tham chiếu */
  --acid:#D8FF3E;
  --pink:#FF3D8B;
  --cyan:#23E8D4;
  --blue:#2D6BFF;

  /* màu nhấn chính của trang */
  --red:var(--acid);
  --red-deep:#B8E01F;
  --red-press:#96BA12;
  --brand:var(--acid);
}

/* ── nền: vệt cọ thô, dựng bằng SVG filter ───────────────────── */
.brushfield{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.42;
}
.brushfield svg{width:100%;height:100%;display:block}

body{position:relative}
body > *{position:relative;z-index:1}
.brushfield{z-index:0}

::selection{background:var(--pink);color:#0A0A0B}

/* ── nút: ba kiểu, bổ trợ nhau ───────────────────────────────── */
.btn{transform:none;border-radius:0}
.btn>span{transform:none}

/* 1. Nút chính — mảng màu quét lên từ đáy, mép rách */
.btn--red{
  position:relative;
  overflow:hidden;
  background:transparent;
  color:var(--acid);
  border:1px solid var(--acid);
  isolation:isolate;
}
.btn--red::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:var(--acid);
  transform:translateY(102%) scaleY(1.1);
  transform-origin:bottom;
  transition:transform .42s cubic-bezier(.16,.84,.24,1);
  clip-path:polygon(0 4%, 12% 0, 34% 3%, 58% 0, 82% 4%, 100% 1%, 100% 100%, 0 100%);
}
.btn--red:hover{color:var(--ink);border-color:var(--acid)}
.btn--red:hover::before{transform:translateY(0)}
.btn--red:active::before{background:var(--red-press)}

/* 2. Nút viền — khung tự vẽ, chữ giãn ra */
.btn--wire{
  border:1px solid var(--line-2);
  color:var(--bone);
  background:transparent;
  transition:color .3s linear,border-color .3s linear,letter-spacing .34s cubic-bezier(.16,.84,.24,1);
}
.btn--wire:hover{
  color:var(--pink);
  border-color:var(--pink);
  letter-spacing:.24em;
}

/* 3. Nút nhỏ trên thanh trên — chỉ đổi nền, không phô */
.btn--xs{letter-spacing:.18em}

/* ── ô mức: mỗi ô một màu neon, hợp thành một bộ ─────────────── */
.amt__item:nth-child(2) .amt__box{--tile:var(--cyan)}
.amt__item:nth-child(3) .amt__box{--tile:var(--blue)}
.amt__item:nth-child(4) .amt__box{--tile:var(--acid)}
.amt__item:nth-child(5) .amt__box{--tile:var(--pink)}

.amt__box{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  transition:background-color .3s linear,transform .3s cubic-bezier(.16,.84,.24,1);
}
.amt__box::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--tile,var(--acid));
  transform:translateY(101%);
  transition:transform .38s cubic-bezier(.16,.84,.24,1);
  clip-path:polygon(0 6%, 18% 0, 42% 5%, 66% 0, 88% 6%, 100% 2%, 100% 100%, 0 100%);
}
.amt__box>*{position:relative;z-index:1;transition:color .22s linear}
.amt__box:hover::before{transform:translateY(0)}
.amt__box:hover .amt__n{color:var(--ink)}
.amt__box:hover .amt__n span{color:rgba(10,10,11,.55)}
.amt__box:hover .amt__l{color:rgba(10,10,11,.7)}

.amt__item input:checked+.amt__box{background:var(--tile,var(--acid))}
.amt__item input:checked+.amt__box .amt__n{color:var(--ink)}
.amt__item input:checked+.amt__box .amt__n span{color:rgba(10,10,11,.55)}
.amt__item input:checked+.amt__box .amt__l{color:rgba(10,10,11,.72)}
.amt__item input:checked+.amt__box::before{transform:translateY(0)}
.amt__item input:focus-visible+.amt__box{outline:2px solid var(--bone);outline-offset:-3px}

/* ── tiêu đề hạt: đổi màu hạt theo bảng mới ──────────────────── */
.m__title,.hero__title{color:var(--bone)}

/* ── panel QR: viền neon, góc cắt xéo ────────────────────────── */
.panel{border-color:var(--line-2);background:var(--ink-2)}
.panel__head{border-bottom-color:var(--line)}
.panel__amount{color:var(--bone)}
.qr__corners{
  background-image:
    linear-gradient(var(--cyan) 0 0),linear-gradient(var(--cyan) 0 0),
    linear-gradient(var(--pink) 0 0),linear-gradient(var(--pink) 0 0);
}
.qr__spin{border-color:var(--line-2);border-top-color:var(--cyan)}

/* ── nhãn, link, chân trang ──────────────────────────────────── */
.m__tag{color:var(--dim)}
.m__links a:hover{color:var(--acid)}
.foot__links a:hover{color:var(--acid)}

.m__hint{color:var(--dim-2)}
.m__hint::before{
  content:"";
  display:inline-block;
  width:18px;height:1px;
  margin-right:10px;
  vertical-align:middle;
  background:var(--pink);
}

/* ── dòng chữ dưới tiêu đề: gạch neon ────────────────────────── */
.m__lede{color:var(--bone-72)}

/* ── chống tràn ngang do vệt cọ vượt khung ───────────────────── */
html{overflow-x:clip}
.brushfield svg{overflow:hidden}

/* ── nhấn chữ: chỉ đổi màu, không nền ────────────────────────── */
.mark{color:var(--acid);font-weight:500}

/* ── nút âm thanh trên thanh nav ─────────────────────────────── */
.snd{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:auto;
  padding:6px 9px;
  border:1px solid transparent;
  background:transparent;
  color:var(--dim-2);
  font-family:var(--f-mono);
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.8;
  transition:color .2s linear,border-color .2s linear,opacity .2s linear;
}
.snd:hover{color:var(--bone);border-color:var(--line-2);opacity:1}
.snd__bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.snd__bars i{display:block;width:2px;height:3px;background:currentColor}
.snd.on{color:var(--acid);opacity:1}
.snd.on .snd__bars i{animation:eq .9s ease-in-out infinite alternate}
.snd.on .snd__bars i:nth-child(2){animation-delay:.15s}
.snd.on .snd__bars i:nth-child(3){animation-delay:.3s}
.snd.on .snd__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:3px}to{height:11px}}

.identity{
  margin:22px 0 0;
  display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:12px;
  color:var(--dim-2);
  letter-spacing:.02em;
}
.identity a{color:var(--bone-72);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.identity a:hover{text-decoration-color:var(--acid);color:var(--bone)}
.identity .sep{color:var(--line-2)}
.rate__note{position:relative;display:block;min-width:1px}
.rate__note .n{display:block;transition:opacity .14s linear}
.rate__note .rate__eq{
  position:absolute;right:0;top:0;
  white-space:nowrap;
  color:var(--tile);
  opacity:0;
  transition:opacity .14s linear;
}
.rate:hover .rate__note .n,
.rate:focus-visible .rate__note .n{opacity:0}
.rate:hover .rate__note .rate__eq,
.rate:focus-visible .rate__note .rate__eq{opacity:1}

/* dòng phụ dưới nút gọi */
.cta-note{
  margin:16px 0 0;
  font-size:12px;
  color:var(--dim-2);
}

/* ── texture gốc NopiA: mỗi ô một cú splash riêng ────────────── */
.rate{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.rate > *{position:relative;z-index:1}

.rate__film{
  position:absolute;
  inset:0;
  z-index:0;
  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(--hue,0deg)) saturate(1.08);
  transform:scale(1);
  transform-origin:left center;
  transition:opacity .16s linear,transform .5s cubic-bezier(.16,.84,.24,1);
  will-change:background-position,opacity,transform;
}

/* lớp thứ hai đã bỏ — giữ một lớp cho gọn */
.rates li:nth-child(1){--hue:172deg}
.rates li:nth-child(2){--hue:222deg}
.rates li:nth-child(3){--hue:70deg}
.rates li:nth-child(4){--hue:335deg}
.rates li:nth-child(5){--hue:190deg}

.rate:hover .rate__film,
.rate:focus-visible .rate__film{
  opacity:.62;
  animation:filmrun .5s steps(3) forwards;
}

@keyframes filmrun{
  from{background-position-x:0%}
  to{background-position-x:100%}
}

/* cho phép cuộn dọc đi xuyên qua nút */
.rate{touch-action:pan-y}

/* ── con trỏ: giữ mặc định, chỉ đổi màu chọn ─────────────────── */

/* ── lớp tương tác mới ───────────────────────────────────────── */
.glow{
  position:fixed;left:0;top:0;
  width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;
  pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,
    rgba(216,255,62,.13) 0%,
    rgba(35,232,212,.07) 36%,
    rgba(255,61,139,.05) 58%,
    transparent 72%);
  filter:blur(4px);
  transition:opacity .55s var(--ease);
  will-change:transform;
}
.glow.on{opacity:1}

.progress{
  position:fixed;left:0;top:0;
  width:100%;height:2px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acid),var(--cyan),var(--pink));
  z-index:210;pointer-events:none;
}

/* ── bảng plugin ─────────────────────────────────────────────── */
.plugs{border-top:1px solid var(--line-2);max-width:900px}
.plug{
  border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease),background-color .25s linear;
  transform-style:preserve-3d;
  will-change:transform;
}
.plug:hover{background:rgba(244,241,234,.022)}
.plug summary{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 24px;
  align-items:baseline;
  padding:20px 4px;
  cursor:pointer;
  list-style:none;
}
.plug summary::-webkit-details-marker{display:none}
.plug__name{
  font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--bone);
  transition:color .2s linear;
}
.plug__name em{
  font-style:normal;
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acid);
  margin-left:9px;
  padding:2px 5px;
  border:1px solid rgba(216,255,62,.4);
}
.plug__role{grid-column:1;font-size:12px;color:var(--dim-2)}
.plug__price{
  grid-column:2;grid-row:1 / span 2;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.2vw,28px);line-height:1;
  color:var(--bone);white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transition:color .2s linear;
}
.plug__price--est{color:var(--dim)}
.plug:hover .plug__name,
.plug[open] .plug__name{color:#fff}
.plug[open] .plug__price{color:var(--acid)}
.plug__body{padding:0 4px 22px;max-width:66ch;animation:plugIn .3s var(--ease)}
@keyframes plugIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.plug__body p{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:var(--bone-72)}
.plug__body p:last-child{margin-bottom:0}
.plug__meta{font-size:11px;color:var(--dim-2);letter-spacing:.02em}

.plugs__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:24px 4px 0;
  margin-top:-1px;
  border-top:2px solid var(--acid);
}
.plugs__total span{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.plugs__total strong{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(26px,3.4vw,40px);line-height:1;color:var(--acid);
  font-variant-numeric:tabular-nums;
}
.plugs__total strong span{font-size:.5em;letter-spacing:0;margin-left:2px}

/* ── ô mức: nhấn giữ thì viền sáng lên ───────────────────────── */
.rate.press{box-shadow:inset 0 0 0 1px var(--tile,var(--acid))}
.rate.press .rate__go{background:var(--tile,var(--acid));border-color:var(--tile,var(--acid));color:var(--ink)}

/* ── sửa tương phản: chữ trên nền acid phải là mực, không phải trắng ── */
.rate__flag{background:var(--acid);color:var(--ink)}
.rate:hover .rate__go{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.check input:checked+.check__box::after{background:var(--ink)}
.dock .btn--red:hover{color:var(--ink)}
.btn--red:active::before{background:var(--red-press)}
.pay__panel{border-top-color:var(--acid)}
.panel__copy:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.qa[open] summary::after{border-color:var(--pink)}
.ledger__row--total{border-top-color:var(--acid)}
.thanks__inner{border-left-color:var(--pink)}
.step:hover .step__n{color:var(--cyan);-webkit-text-stroke-color:var(--cyan)}
@media (prefers-reduced-motion:reduce){
  .btn--red::before,.amt__box::before{transition:none}
}


/* ═══════════════════════════════════════════════════════════════
   Hộp ủng hộ — bản gọn
   ═══════════════════════════════════════════════════════════════ */
.pay__scrim{background:rgba(5,5,7,.9);backdrop-filter:blur(8px)}
.pay__panel{
  border-top:2px solid var(--acid);
  animation:payIn .3s cubic-bezier(.16,.9,.3,1) both;
}
@keyframes payIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.pay__amount{
  font-size:clamp(36px,4.6vw,48px);
  letter-spacing:-.01em;
}

@media (max-width:719px){
  .pay{place-items:end center}
  .pay__panel{border-left:0;border-right:0;border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .pay__panel{animation:none!important}
}