/* ═══════════════════════════════════════════════════════════════
   Lớp hoà giải — nạp cuối cùng.
   Không thêm hiệu ứng mới. Chỉ làm các lớp cũ nói cùng một giọng.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* một thang thời gian duy nhất cho toàn trang */
  --t-fast:140ms;
  --t-base:260ms;
  --t-slow:480ms;
  --t-cine:900ms;

  /* hai đường cong: một chuẩn, một bật nhẹ */
  --ease-out:cubic-bezier(.16,.84,.24,1);
  --ease-pop:cubic-bezier(.17,1.32,.4,1);

  /* một hướng gradient cho mọi mảng màu */
  --grad-x:linear-gradient(92deg,var(--acid),var(--cyan));
  --grad-y:linear-gradient(180deg,#FFFFFF,#F4F1EA 45%,#8E969E);
}

/* ── 1. Nhịp: mọi thứ bấm được dùng chung một thang ───────────── */
.btn,
.rate,
.rate__amount,
.rate__label,
.rate__go,
.plug,
.nav__links a::after,
.snd,
.chapters__item::after{
  transition-duration:var(--t-base);
  transition-timing-function:var(--ease-out);
}

.btn__film,
.rate__film,
.qr__spin{
  transition-duration:var(--t-fast);
}

/* ── 2. Chuyển động khi hover: một hướng, không hai ───────────── */
/* dòng mức: dịch 16px, số tiền đứng yên (trước đây vừa dịch dòng vừa trượt số) */
.rate:hover{padding-left:16px}
.rate:hover .rate__amount{transform:none}
.rate:hover .rate__label{letter-spacing:.22em}

/* dòng plugin: cùng 16px để hai loại danh sách đọc như một hệ */
.plug:hover,.plug[open]{padding-left:16px}

/* ── 3. Màu: một vai một màu ──────────────────────────────────── */
/* acid  = hành động, đang chọn, tổng tiền
   cyan  = thông tin phụ, số liệu sống
   pink  = nhấn cảm xúc, không bao giờ là nút */

.btn--red{border-color:var(--acid);color:var(--acid)}
.btn--red:hover .btn__film{filter:hue-rotate(var(--bh,80deg)) saturate(1.15) brightness(1.05)}

/* con số tổng và đếm ngược cùng một cách tô */
.plugs__total strong,
.figure--count dd span#countdown{
  background-image:var(--grad-x);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ── 4. Đường kẻ: 1px là mặc định, 2px chỉ cho tổng ───────────── */
.ledger__row--total{border-top-width:2px}
.rate::before,.plug::before{width:2px}
.band__head::before{background:var(--line-2);height:1px}

/* ── 5. Bóng: chỉ nút chính có quầng, không nơi nào khác ──────── */
.rate:hover,.plug:hover,.figure:hover{box-shadow:none}

/* ── 6. Tiêu đề: cùng một gradient dọc ────────────────────────── */
.display{
  background-image:var(--grad-y);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── 7. Tiêu điểm bàn phím: cùng một kiểu ở mọi nơi ───────────── */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--acid);
  outline-offset:3px;
}

/* ── 8. Chữ phụ: một cỡ, một màu ──────────────────────────────── */
.dek,.figures dt,.plug__role,.foot__legal,.foot__fine,.cta-note,.trust{
  color:#918D86;
}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:1ms;--t-base:1ms;--t-slow:1ms;--t-cine:1ms}
}

/* ── 9. Chữ gradient không được cắt dấu tiếng Việt ─────────────
   background-clip:text chỉ vẽ trong hộp nền. Với line-height < 1,
   dấu mũ và dấu móc nằm ngoài hộp nên mất màu -> chữ trông như
   mất dấu. Nới hộp nền lên trên rồi kéo lại bằng margin âm. */
.display,
.plugs__total strong,
.figure--count dd span#countdown{
  display:inline-block;
  padding-top:.2em;
  margin-top:-.2em;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.display{display:block}

/* ── 10. Nhịp thở cho nút chính ───────────────────────────────
   Lấy từ shot "Breathing Techniques": một nhịp chậm 5 giây,
   đủ để mắt bắt được mà không thành nhấp nháy. */
@keyframes breathe{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(216,255,62,.45),
      0 0 12px 0 rgba(216,255,62,.10);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(216,255,62,.85),
      0 0 26px 3px rgba(216,255,62,.22),
      0 0 60px 8px rgba(35,232,212,.10);
  }
}
#cta-main{animation:breathe 5s ease-in-out infinite}
#cta-main:hover,
#cta-main:focus-visible{animation:none}

/* ── 11. Mức đã chọn giữ trạng thái như chọn biến thể sản phẩm ─ */
.rate.is-picked .rate__amount{color:var(--tile)}
.rate.is-picked .rate__go{
  background:var(--tile);
  border-color:var(--tile);
  color:var(--ink);
}
.rate.is-picked{padding-left:16px}

@media (prefers-reduced-motion:reduce){
  #cta-main{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   12. Dễ thấy hơn: chữ to hơn, nền khối rõ hơn, đường kẻ đậm hơn
   ═══════════════════════════════════════════════════════════════ */
body{font-size:16px}
.lede{font-size:clamp(17px,1.25vw,19px);color:rgba(244,241,234,.88)}
.dek{font-size:16.5px;color:rgba(244,241,234,.8)}
.foot__legal{color:#A8A49C}
.foot__fine,.cta-note,.plug__role,.figures dt{color:#A09C94}
:root{--line:rgba(244,241,234,.16);--line-2:rgba(244,241,234,.3)}

/* khối có bề mặt: đọc như một vật, không phải chữ trôi */
.rates,
.ledger,
.plugs,
.qa-list{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid rgba(244,241,234,.10);
  border-radius:0;
  box-shadow:0 20px 60px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════════════════════
   13. Bảng chi phí thành khối dữ liệu (kiểu GPU analytics)
   ═══════════════════════════════════════════════════════════════ */
.ledger__row{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:"name share money";
  align-items:baseline;
  gap:0 16px;
  padding:18px 20px 24px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.ledger__share{
  grid-area:share;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--dim-2);
  font-variant-numeric:tabular-nums;
}
.ledger__bar{
  position:absolute;
  left:20px;
  bottom:11px;
  height:3px;
  width:0;
  max-width:calc(100% - 40px);
  background:linear-gradient(90deg,var(--acid),var(--cyan));
  transition:width 1.1s cubic-bezier(.16,.84,.24,1);
}
.ledger.in-view .ledger__bar{width:var(--w)}
.ledger__row--total{
  grid-template-areas:"name money";
  grid-template-columns:1fr auto;
  padding-bottom:18px;
}
.ledger__row--total .ledger__money{font-size:clamp(26px,3vw,38px);color:var(--bone)}

/* nhãn trực tiếp cạnh đếm ngược */
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:8px;
  padding:2px 7px;
  font-family:var(--f-mono);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  border:1px solid rgba(35,232,212,.35);
  vertical-align:middle;
}
.live-pill::first-letter{color:var(--cyan)}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:.25}}
.live-pill{animation:blink 2.4s ease-in-out infinite}

@media (max-width:719px){
  .ledger__row{grid-template-columns:1fr auto;grid-template-areas:"name money"}
  .ledger__share{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ledger__bar{transition:none}
  .live-pill{animation:none}
}