/* ===========================================================================
   FORELY — LỚP CHUYỂN ĐỘNG  (_page.css)
   ---------------------------------------------------------------------------
   NGUYÊN TẮC
   Hệ thiết kế đã có sẵn --f-ease-spring và --f-hilite ("vệt bút dạ — chữ ký
   thị giác") nhưng chưa dùng lần nào. File này KHÔNG phát minh ngôn ngữ mới;
   nó kích hoạt đúng thứ đã được định nghĩa.

   VÌ SAO TRÔNG KHÔNG GIỐNG WEB DO AI DỰNG
   Ba thứ, theo đúng thứ tự quan trọng:
   1. NHIỄU HẠT. Gradient phẳng tuyệt đối là dấu vân tay của web sinh tự động.
      Một lớp hạt 3,5% phá vỡ nó ngay lập tức.
   2. BẤT ĐỐI XỨNG CÓ CHỦ Ý. Sticker xoay -2deg, vệt bút dạ run tay, góc bo
      không đều nhau. Máy làm ra thứ cân đối; người làm ra thứ hơi lệch.
   3. BIÊN ĐẠO THEO THỜI GIAN. Web AI cho mọi thứ fade-in cùng lúc, cùng
      200ms. Ở đây một cú bấm mở ra chuỗi 1,2 giây có trước có sau: nén →
      bật → quét màu → vụn bắn → số đếm → bảng trượt lên.

   Tất cả nằm sau prefers-reduced-motion. Chỉ animate transform và opacity.
   =========================================================================== */


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--f-canvas,#F8FAFC);color:var(--f-ink,#0F172A);
  font:16px/1.6 'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* --- 1. NHIỄU HẠT -------------------------------------------------------
   Một lớp SVG turbulence phủ toàn trang. Đây là thứ rẻ nhất và hiệu quả
   nhất để trang thôi trông như render từ máy. Không chặn chuột. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 2. QUẦNG SÁNG THEO CHUỘT ------------------------------------------
   Chạy sau nội dung, di chuyển trễ hơn chuột (lerp) nên có cảm giác nặng,
   không dính chặt. Tắt hoàn toàn trên thiết bị cảm ứng. */
#fo-glow{
  position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 700ms var(--f-ease,cubic-bezier(.2,.8,.2,1));
  background:radial-gradient(circle,rgba(196,245,49,.16),rgba(196,245,49,0) 62%);
}
#fo-glow.on{opacity:1}

.fo-top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;background:var(--f-ink,#0F172A);
}
.fo-logo{color:var(--f-accent,#C4F531);font-weight:800;letter-spacing:-.02em;text-decoration:none;font-size:16px}
.fo-back{color:#C6CEDD;text-decoration:none;font-size:13px;transition:color var(--f-dur-base,200ms) var(--f-ease,cubic-bezier(.2,.8,.2,1))}
.fo-back:hover{color:#fff}

.fo-main{position:relative;z-index:1;max-width:660px;margin:0 auto;padding:24px 20px 60px}

/* --- 3. STICKER ---------------------------------------------------------
   Xoay -2deg + bóng lệch một phía để trông như miếng dán bằng tay chứ không
   phải badge CSS. Rê chuột thì nó "được vuốt phẳng" — xoay về 0 có nảy. */
.fo-chips{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 16px}
.fo-chip{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;
  background:var(--f-accent,#C4F531);color:var(--f-accent-ink,#0F1A00);
  transform:rotate(-2deg);transform-origin:center;
  box-shadow:2px 3px 0 rgba(15,23,42,.14);
  transition:transform var(--f-dur-slow,300ms) var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)),
             box-shadow var(--f-dur-slow,300ms) var(--f-ease,cubic-bezier(.2,.8,.2,1));
  cursor:default;
}
.fo-chip:hover{transform:rotate(0deg) scale(1.04);box-shadow:3px 5px 0 rgba(15,23,42,.18)}
.fo-chip--cat{
  background:#fff;color:var(--f-ink2,#334155);border:1px solid var(--f-line,#E2E8F0);
  transform:rotate(1.5deg);box-shadow:2px 3px 0 rgba(15,23,42,.06);
}
.fo-chip--cat:hover{transform:rotate(0deg) scale(1.04)}

/* --- 4. TIÊU ĐỀ + VỆT BÚT DẠ -------------------------------------------
   Chữ to, tracking bó chặt. Vệt bút dạ là SVG có đường run tay, nằm ĐÈ LÊN
   một phần ba dưới của chữ (không phải nền phía sau) và tự vẽ từ trái sang
   khi cuộn tới. Bút dạ thật cũng loang ra ngoài chữ — nên nó cố tình không
   khớp mép. */
.fo-h1{
  font-size:clamp(29px,6vw,42px);line-height:1.15;letter-spacing:-.032em;
  font-weight:800;margin:0 0 18px;position:relative;
}
.fo-mark{position:relative;display:inline;white-space:nowrap}
.fo-mark svg{
  position:absolute;left:-7px;right:-9px;bottom:.42em;width:calc(100% + 16px);height:.50em;
  z-index:-1;overflow:visible;pointer-events:none;
}
.fo-mark path{
  fill:none;stroke:var(--f-hilite,#E9FBB2);stroke-width:26;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
}
.fo-mark.drawn path{
  animation:foDraw 620ms cubic-bezier(.35,.75,.35,1) forwards;
}
@keyframes foDraw{to{stroke-dashoffset:0}}

.fo-desc{
  background:var(--f-surface,#FFFFFF);border:1px solid var(--f-line,#E2E8F0);
  border-radius:16px 16px 16px 5px;   /* góc gãy — không bo đều bốn phía */
  padding:16px 18px;margin:0 0 26px;font-size:14.6px;color:var(--f-ink2,#334155);line-height:1.65;
}

.fo-h2{font-size:17px;font-weight:750;letter-spacing:-.015em;margin:0 0 13px}

/* --- 5. ĐÁP ÁN BẤM ĐƯỢC ------------------------------------------------ */
.fo-opts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.fo-opt{
  position:relative;width:100%;text-align:left;overflow:hidden;
  background:var(--f-surface,#FFFFFF);border:1.5px solid var(--f-line,#E2E8F0);border-radius:14px;
  padding:15px 17px;font:inherit;color:inherit;cursor:pointer;
  transform:translateZ(0);
  transition:border-color var(--f-dur-base,200ms) var(--f-ease,cubic-bezier(.2,.8,.2,1)),
             transform 380ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)),
             opacity var(--f-dur-slow,300ms) var(--f-ease,cubic-bezier(.2,.8,.2,1)),
             filter var(--f-dur-slow,300ms) var(--f-ease,cubic-bezier(.2,.8,.2,1));
}
.fo-opt:hover{border-color:var(--f-accent-line,#A9E01A)}
.fo-opt:focus-visible{outline:3px solid var(--f-accent-line,#A9E01A);outline-offset:2px}
.fo-opt.is-down{transform:scale(.972)}          /* nén khi nhấn xuống */
.fo-opt.is-pick{border-color:var(--f-accent-line,#A9E01A);transform:scale(1)}
.fo-opt.is-dim{opacity:.42;filter:saturate(.35);transform:scale(.985)}

/* Vệt quét lime chạy ngang khi được chọn — không phải đổi màu, mà là quét. */
.fo-opt-wash{
  position:absolute;inset:0;background:var(--f-accent-soft,#F4FBDD);
  transform:scaleX(0);transform-origin:left center;
}
.fo-opt.is-pick .fo-opt-wash{animation:foWash 460ms var(--f-ease,cubic-bezier(.2,.8,.2,1)) forwards}
@keyframes foWash{to{transform:scaleX(1)}}

/* Thanh tỷ lệ cộng đồng — mọc lên sau, không hiện cùng lúc với vệt quét. */
.fo-opt-fill{
  position:absolute;inset:0 auto 0 0;background:rgba(196,245,49,.30);
  width:var(--w,0%);transform:scaleX(0);transform-origin:left center;
}
.fo-opt.is-shown .fo-opt-fill{
  animation:foGrow 720ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes foGrow{to{transform:scaleX(1)}}

.fo-opt-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px}
.fo-opt-label{font-size:14.8px;font-weight:650;letter-spacing:-.005em}
.fo-opt-tick{
  display:inline-block;margin-left:7px;color:var(--f-accent-text,#4E6B0E);font-weight:800;
  opacity:0;transform:scale(.4) rotate(-18deg);
}
.fo-opt.is-pick .fo-opt-tick{
  animation:foTick 420ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)) 180ms forwards;
}
@keyframes foTick{to{opacity:1;transform:scale(1) rotate(0)}}

/* --- 6. SỐ CUỘN KIỂU ĐỒNG HỒ CÔNG-TƠ-MÉT ------------------------------
   Mỗi chữ số là một dải dọc 0-9 trượt lên vị trí đích. Các chữ số lệch pha
   nhau nên nó cuộn như đồng hồ cơ chứ không nhảy cái một. */
.fo-odo{
  display:inline-flex;align-items:center;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--f-ink,#0F172A);opacity:0;transition:opacity var(--f-dur-slow,300ms) var(--f-ease,cubic-bezier(.2,.8,.2,1));
}
.fo-odo.on{opacity:1}
.fo-odo-d{display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom}
.fo-odo-s{
  display:block;transform:translateY(0);
  transition:transform 900ms cubic-bezier(.16,.9,.28,1);
  transition-delay:var(--dd,0ms);
}
.fo-odo-s i{display:block;height:1.25em;line-height:1.25em;font-style:normal}
.fo-odo-p{margin-left:1px;font-size:.86em;opacity:.62}

.fo-note{font-size:12.8px;color:var(--f-mute,#64748B);margin:0 0 22px}

/* --- 8. BẢNG MỜI ĐĂNG KÝ ---------------------------------------------- */
.fo-gate{
  background:var(--f-accent-soft,#F4FBDD);border:1px solid var(--f-accent-line,#A9E01A);
  border-radius:18px 18px 18px 5px;padding:20px 22px;margin:22px 0 18px;
  opacity:0;transform:translateY(18px);
}
.fo-gate.on{animation:foGate 560ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)) forwards}
@keyframes foGate{to{opacity:1;transform:translateY(0)}}
.fo-gate-k{
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--f-accent-text,#4E6B0E);
}
.fo-gate-v{font-size:21px;font-weight:800;letter-spacing:-.025em;margin:5px 0 11px}
.fo-gate-p{font-size:13.6px;color:var(--f-ink2,#334155);margin:0 0 15px;line-height:1.6}
.fo-gate-s{font-size:12px;color:var(--f-mute,#64748B);text-align:center;margin:11px 0 0}
.fo-gate-s a{color:var(--f-mute,#64748B)}

/* --- 9. NÚT HÚT CHUỘT --------------------------------------------------
   Nút dịch về phía con trỏ, còn CHỮ bên trong dịch ít hơn nút. Chênh lệch
   nhỏ đó là thứ làm nó có cảm giác vật lý thay vì chỉ trượt đi. */
.fo-cta{
  position:relative;display:block;width:100%;text-align:center;
  padding:15px 20px;border-radius:14px;background:var(--f-accent,#C4F531);
  color:var(--f-accent-ink,#0F1A00);font-weight:800;font-size:15.5px;text-decoration:none;
  border:none;cursor:pointer;overflow:hidden;
  will-change:transform;
  transition:transform 480ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25)),box-shadow var(--f-dur-slow,300ms) var(--f-ease,cubic-bezier(.2,.8,.2,1));
  box-shadow:0 4px 0 #9FCE1C;
}
.fo-cta span{display:inline-block;position:relative;transition:transform 480ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25))}
.fo-cta:active{box-shadow:0 1px 0 #9FCE1C}
.fo-cta::after{     /* ánh sáng quét ngang khi rê chuột */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-110%);
}
.fo-cta:hover::after{animation:foShine 780ms var(--f-ease-out,cubic-bezier(0,0,.2,1))}
@keyframes foShine{to{transform:translateX(110%)}}

/* --- 10. VỤN BẮN KHI CHỌN ---------------------------------------------
   Không dùng emoji, không dùng hình tròn chung chung. Ba hình của thương
   hiệu: dấu ngoặc nhọn, nét chéo, chấm. Bay ra rồi rơi, ~640ms. */
.fo-shard{
  position:fixed;z-index:60;pointer-events:none;width:9px;height:9px;
  will-change:transform,opacity;
}
.fo-shard i{display:block;width:100%;height:100%;background:var(--f-accent,#C4F531)}
.fo-shard.s-chev i{clip-path:polygon(0 26%,26% 0,100% 74%,74% 100%)}
.fo-shard.s-slash i{clip-path:polygon(56% 0,100% 0,44% 100%,0 100%)}
.fo-shard.s-dot i{border-radius:50%}
.fo-shard.s-ink i{background:var(--f-ink,#0F172A)}

/* --- 11. HIỆN DẦN THEO CUỘN -------------------------------------------
   Mỗi loại phần tử đến theo một kiểu khác nhau, không phải cùng một cú
   fade-up cho tất cả. Đó là khác biệt giữa "có làm animation" và "có biên
   đạo". */
[data-rise]{opacity:0;transform:translateY(22px)}
[data-rise].in{transition:opacity 620ms var(--f-ease,cubic-bezier(.2,.8,.2,1)),transform 620ms var(--f-ease-spring,cubic-bezier(.2,.9,.3,1.25));
  opacity:1;transform:none}
[data-rise="2"]{transition-delay:90ms}
[data-rise="3"]{transition-delay:180ms}


/* --- 12. TÔN TRỌNG NGƯỜI DÙNG -----------------------------------------
   Ai bật giảm chuyển động thì nhận đúng nội dung, không mất chức năng nào. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #fo-glow{display:none}
  .fo-chip,.fo-chip--cat{transform:none}
  .fo-mark path{stroke-dashoffset:0}
  .fo-opt-wash,.fo-opt-fill{transform:scaleX(1)}
  .fo-opt-tick{opacity:1;transform:none}
  [data-rise]{opacity:1;transform:none}
  .fo-gate{opacity:1;transform:none}
  .fo-pt{transform:translate(-50%,0) scale(1)}
  .fo-delta{opacity:1;transform:translateX(-50%)}
  .fo-odo{opacity:1}
}