/* Axiomo AI – toàn bộ giao diện
   1. Biến màu, font: :root ở đầu file
   2. Phần thân trang chủ: "BODY v2" và "ĐƯỜNG CHÂN TRỜI v3"
*/
:root{
  --bg:#0a0914; --bg2:#100d1e; --surface:#11101c; --line:rgba(255,255,255,.09);
  --primary:#8b5cf6; --pink:#ec4899; --cyan:#22d3ee; --text:#f5f5fa; --muted:#a3a3bd; --dim:#6f6f86;
  --sans:"Be Vietnam Pro",ui-sans-serif,system-ui,sans-serif; --display:"Plus Jakarta Sans","Be Vietnam Pro",ui-sans-serif,system-ui,sans-serif; --serif:"Fraunces",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:16px; --hh:56px; --r:20px;
  /* chuyển động: nhanh lúc đầu, chậm dần lúc cuối (giống Linear) */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.32,.72,0,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:768px){ :root{ --pad:40px; --hh:72px; } }
@media (min-width:1280px){ :root{ --pad:80px; } }
html{ scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
@media (min-width:768px){ body{ font-size:17px; } }
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
input,select,textarea{ font-size:16px; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }
::selection{ background:rgba(139,92,246,.45); }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:90; background:var(--bg); }
.noise{ position:fixed; inset:0; pointer-events:none; z-index:80; opacity:.04; transform:translateZ(0); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* ===== NỀN THÂN TRANG: dịu mắt, không đen kịt =====
   Lớp cố định phía sau mọi nội dung: dải sáng aurora rất nhạt trôi chậm (60 giây/lượt) + 3 vầng sáng lớn + viền tối nhẹ quanh mép.
   Chỉ dùng transform để chuyển động (card đồ hoạ tự lo, không làm nặng trang). */
/* Gộp thành 1 lớp tĩnh (trước là 5 lớp lớn chuyển động liên tục → card đồ hoạ phải ghép mỗi khung hình, làm cuộn bị khựng).
   Thứ tự lớp (trên → dưới): viền tối · vầng tím phải trên · vầng chàm trái · vầng hồng phải dưới · dải aurora chéo */
.page-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 40%,transparent 58%,rgba(4,3,10,.55) 100%),
    radial-gradient(circle 46vmax at 96% 0%,rgba(139,92,246,.17),transparent 70%),
    radial-gradient(circle 40vmax at 0% 58%,rgba(79,70,229,.14),transparent 70%),
    radial-gradient(circle 38vmax at 100% 100%,rgba(236,72,153,.1),transparent 70%),
    linear-gradient(100deg,transparent 8%,rgba(139,92,246,.11) 18%,transparent 29%,rgba(99,102,241,.09) 41%,transparent 52%,rgba(236,72,153,.07) 63%,transparent 73%,rgba(34,211,238,.06) 84%,transparent 94%); }
/* Thẻ kính trong trang: bỏ hiệu ứng làm mờ nền (backdrop-filter) vì phải tính lại mỗi khung hình khi cuộn;
   giữ vẻ kính bằng lớp màu + vệt sáng mép trên. Thanh menu, chatbot, cookie vẫn giữ kính mờ thật (ít, cố định). */
main .glass{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.stage .glass{ background-color:rgba(16,13,32,.62); } /* 2 thẻ cạnh robot: tối hơn chút để chữ rõ trên nền robot */
/* lưới chấm rất mờ, cuộn theo nội dung, mờ dần về 2 bên */
#app::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.5px); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }
.wrap{ max-width:1280px; margin:0 auto; padding:0 var(--pad); }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; }
.grad{ background:linear-gradient(90deg,#f5f5fa 10%,#c4b5fd 55%,#f9a8d4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted); }
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0; }
.mono{ font-family:var(--mono); }

/* glass */
.glass{ position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.glass::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; transition:background .3s, box-shadow .4s, border-color .3s, translate .5s var(--ease-spring), scale .25s var(--ease-spring); }
.btn-light{ background:var(--text); color:#07070c; }
.btn-light:hover{ box-shadow:0 0 32px rgba(139,92,246,.55); }
.btn-ghost{ background:transparent; color:var(--text); border-color:rgba(255,255,255,.16); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); }
.btn-pill{ display:inline-flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:8px 8px 8px 28px; border-radius:999px; background:#050509; border:1px solid rgba(255,255,255,.16); font-weight:600; transition:box-shadow .4s, border-color .3s, translate .5s var(--ease-spring), scale .25s var(--ease-spring); cursor:pointer; position:relative; overflow:hidden; isolation:isolate; }
.btn-pill .arr{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--text); color:#07070c; flex:none; transition:scale .4s var(--ease-spring); }
.btn-pill .arr svg{ transition:transform .45s var(--ease-spring); }
.btn-pill:hover .arr{ scale:1.08; }
/* vệt sáng lướt qua nút khi rê chuột */
.btn-light::after, .btn-pill::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); transform:translateX(-120%); transition:transform .9s var(--ease-out); }
.btn-pill::after{ background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%); }
.btn-light:hover::after, .btn-pill:hover::after{ transform:translateX(120%); }
.btn:active, .btn-pill:active{ scale:.97; }
.btn-pill:hover{ border-color:rgba(255,255,255,.3); box-shadow:0 0 36px rgba(236,72,153,.35); }
.btn-pill:hover .arr svg{ transform:translateX(3px); }
.chip{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; font-size:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.tag{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; background:rgba(139,92,246,.16); color:#c4b5fd; }

/* header */
.hdr{ position:fixed; inset:0 0 auto; z-index:60; padding-top:env(safe-area-inset-top,0px); transition:transform .6s var(--ease-spring), background .3s; view-transition-name:hdr; }
.hdr.solid{ background:rgba(7,7,12,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.hdr.hide{ transform:translateY(-110%); }
.hdr .bar{ height:var(--hh); max-width:1440px; margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo svg{ height:36px; width:auto; display:block; }
@media (min-width:768px){ .logo svg{ height:44px; } }
.nav{ display:none; height:44px; align-items:center; border-radius:999px; padding:0 6px; }
@media (min-width:1024px){ .nav{ display:flex; } }
.nav a, .nav button{ background:none; border:0; padding:8px 14px; font-size:15px; color:var(--muted); border-radius:999px; cursor:pointer; transition:color .3s; }
.nav a:hover, .nav button:hover, .nav a.on{ color:var(--text); }
.dd{ position:relative; }
.dd-menu{ position:absolute; top:calc(100% + 12px); left:-12px; width:300px; border-radius:18px; padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:40px 0; transition:opacity .25s var(--ease-out), transform .5s var(--ease-spring), visibility .25s; background:rgba(16,14,28,.96); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu{ opacity:1; visibility:visible; transform:none; }
.dd-menu a{ display:block; padding:10px 12px; border-radius:12px; transition:background .2s; }
.dd-menu a:hover{ background:rgba(255,255,255,.06); }
.dd-menu b{ display:block; font-size:15px; color:var(--text); font-weight:600; }
.dd-menu span{ font-size:13px; color:var(--muted); }
.right{ display:flex; align-items:center; gap:8px; }
.lang{ display:flex; height:44px; align-items:center; padding:4px; border-radius:999px; }
.lang button{ border:0; background:transparent; min-width:44px; height:36px; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.lang button[aria-pressed="true"]{ background:var(--text); color:#07070c; }
.hdr .cta{ display:none; }
@media (min-width:768px){ .hdr .cta{ display:inline-flex; } }
.burger{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
@media (min-width:1024px){ .burger{ display:none; } }
.lang.desk{ display:none; }
@media (min-width:768px){ .lang.desk{ display:flex; } }
.mnav{ position:fixed; inset:0; z-index:70; background:rgba(7,7,12,.97); backdrop-filter:blur(20px); padding:calc(env(safe-area-inset-top,0px)) var(--pad) calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .35s var(--ease-out), visibility .35s; }
.mnav.open{ opacity:1; visibility:visible; }
/* menu mobile: từng dòng trượt lên lần lượt */
.mnav nav a, .mnav .bottom{ opacity:0; translate:0 18px; transition:opacity .45s var(--ease-out), translate .7s var(--ease-out); }
.mnav.open nav a, .mnav.open .bottom{ opacity:1; translate:0 0; transition-delay:calc(80ms + var(--i,0) * 35ms); }
.mnav .top{ height:var(--hh); display:flex; align-items:center; justify-content:space-between; }
.mnav nav{ margin-top:24px; display:flex; flex-direction:column; overflow:auto; }
.mnav nav a{ min-height:56px; display:flex; align-items:center; border-bottom:1px solid var(--line); font-size:24px; font-weight:500; letter-spacing:-.02em; }
.mnav nav a.sub{ font-size:17px; min-height:46px; padding-left:16px; color:var(--muted); }
.mnav .bottom{ margin-top:auto; display:flex; flex-direction:column; gap:14px; padding-top:20px; }

/* hero */
.hero{ position:relative; isolation:isolate; min-height:100dvh; overflow:hidden; }
/* ===== NỀN HERO v3: tím xanh sáng hơn + 3 mảng sáng trôi + sao lấp lánh + sàn lưới 3D (mọi chuyển động chỉ dùng transform/opacity nên nhẹ) ===== */
.hero .bg{ position:absolute; inset:0; z-index:-3; overflow:hidden;
  /* mép ngoài trong suốt: nền hero nhạt dần vào nền chung của trang (không còn đường nối ở đáy hero) */
  background:radial-gradient(62% 72% at 70% 42%, rgba(52,19,106,.95) 0%, rgba(27,12,56,.82) 38%, rgba(13,10,29,.4) 72%, transparent 100%); }
/* 3 mảng sáng: tím (phải trên), hồng (trái dưới), xanh dương (trái trên) */
.hero .au{ position:absolute; border-radius:50%; will-change:transform; animation:drift 24s ease-in-out infinite alternate; }
.hero .a1{ width:72vmax; height:72vmax; left:36%; top:-24%; background:radial-gradient(closest-side,rgba(139,92,246,.55),rgba(139,92,246,.16) 48%,transparent 72%); }
.hero .a2{ width:56vmax; height:56vmax; left:-16%; top:44%; background:radial-gradient(closest-side,rgba(236,72,153,.3),transparent 70%); animation-duration:30s; animation-delay:-9s; }
.hero .a3{ width:42vmax; height:42vmax; left:4%; top:-22%; background:radial-gradient(closest-side,rgba(56,189,248,.2),transparent 70%); animation-duration:27s; animation-delay:-4s; }
/* sao lấp lánh ở nửa trên */
.hero .stars, .hero .stars::after{ position:absolute; inset:0 0 42% 0; animation:twinkle 3.6s ease-in-out infinite alternate;
  background-image:radial-gradient(1.6px 1.6px at 8% 14%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 38%,#e9d5ff,transparent),radial-gradient(1.4px 1.4px at 37% 9%,#fff,transparent),
    radial-gradient(1px 1px at 48% 30%,#c4b5fd,transparent),radial-gradient(1.6px 1.6px at 63% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 74% 34%,#f9a8d4,transparent),
    radial-gradient(1.4px 1.4px at 86% 18%,#fff,transparent),radial-gradient(1px 1px at 94% 44%,#e9d5ff,transparent),radial-gradient(1.2px 1.2px at 56% 52%,#fff,transparent); }
.hero .stars::after{ content:""; inset:0; animation-duration:5s; animation-delay:-2s;
  background-image:radial-gradient(1.2px 1.2px at 14% 52%,#fff,transparent),radial-gradient(1.6px 1.6px at 31% 22%,#c4b5fd,transparent),radial-gradient(1px 1px at 44% 60%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 69% 48%,#fff,transparent),radial-gradient(1.2px 1.2px at 81% 6%,#e9d5ff,transparent),radial-gradient(1.6px 1.6px at 97% 28%,#fff,transparent); }
@keyframes twinkle{ from{ opacity:.25; } to{ opacity:.9; } }
/* sàn lưới 3D chạy chậm về phía người xem: phủ hết bề ngang và chạy tới tận đáy hero, chỉ mờ dần ở chân trời */
.hero .floor{ position:absolute; left:-30%; right:-30%; bottom:0; height:46%; overflow:hidden; perspective:800px; perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 88%,transparent 100%); }
/* máy tính: điểm tụ của lưới nằm ngay dưới robot (robot ở khoảng 68% bề ngang hero → 61% bề ngang sàn) */
@media (min-width:768px){ .hero .floor{ perspective-origin:61% 0; } }
.hero .floor i{ position:absolute; left:0; right:0; top:0; height:100%; transform-origin:50% 0; transform:rotateX(68deg); will-change:transform;
  background-image:linear-gradient(rgba(167,139,250,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.38) 1px,transparent 1px); background-size:72px 72px;
  animation:floor 3.6s linear infinite; }
@keyframes floor{ to{ transform:rotateX(68deg) translateY(72px); } }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-7vmax,5vmax,0) scale(1.12); } 100%{ transform:translate3d(5vmax,-4vmax,0) scale(.94); } }
/* Chữ "AI" khổng lồ phía sau robot: nằm giữa vùng robot, cỡ chữ theo bề ngang vùng đó (cqw) nên luôn hiện đủ, không bị cắt */
.stage{ container-type:inline-size; }
.stage .giant{ position:absolute; z-index:-1; left:50%; top:44%; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--display); font-weight:700; line-height:.8; letter-spacing:-.06em; font-size:34vw; font-size:86cqw;
  translate:calc(-50% + var(--px,0) * -30px) calc(-50% + var(--py,0) * -18px);
  background:linear-gradient(180deg,rgba(233,213,255,.42) 0%,rgba(167,139,250,.2) 45%,rgba(139,92,246,0) 88%); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1.5px rgba(221,214,254,.18); }
/* 2 vòng tròn mảnh quanh robot + 1 vệt sáng chạy vòng như sao chổi */
.stage .halo{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.stage .halo i{ position:absolute; left:50%; top:46%; aspect-ratio:1; border-radius:50%; translate:-50% -50%; }
.stage .halo i:nth-child(1){ width:min(88cqw,660px); border:1px solid rgba(196,181,253,.18); }
.stage .halo i:nth-child(2){ width:min(64cqw,480px); border:1px dashed rgba(196,181,253,.16); animation:spin 70s linear infinite reverse; }
.stage .halo i:nth-child(3){ width:min(88cqw,660px); animation:spin 9s linear infinite; filter:drop-shadow(0 0 6px rgba(236,72,153,.85));
  background:conic-gradient(from 0deg,transparent 0 64%,rgba(236,72,153,.55) 82%,rgba(243,232,255,1) 89%,transparent 89.5%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px)); mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px)); }
.hero .asts{ position:absolute; inset:0; z-index:-1; pointer-events:none; translate:calc(var(--px,0) * 36px) calc(var(--py,0) * 24px); }
.hero .in{ display:grid; grid-template-columns:1fr; min-height:100dvh; max-width:1440px; margin:0 auto; padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 24px) var(--pad) calc(96px + env(safe-area-inset-bottom,0px)); }
@media (min-width:768px){ .hero .in{ grid-template-columns:55fr 45fr; padding-top:110px; padding-bottom:110px; padding-right:0; } }
.hero .copy{ position:relative; z-index:5; display:flex; flex-direction:column; justify-content:center; translate:0 calc(var(--hs,0) * 90px); opacity:calc(1 - var(--hs,0) * .9); }
/* hero xuất hiện lần lượt: chữ nhỏ → tiêu đề từng dòng → mô tả → nút → chip */
@keyframes rise{ from{ opacity:0; transform:translate3d(0,26px,0); filter:blur(10px); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; scale:.86; } }
.hero .copy > *, .hero h1 > span{ animation:rise 1.1s var(--ease-out) both; }
.hero .copy > h1{ animation:none; }
.hero .copy > .eyebrow{ animation-delay:.1s; }
.hero h1 > span:nth-child(1){ animation-delay:.2s; }
.hero h1 > span:nth-child(2){ animation-delay:.34s; }
.hero .copy > .desc{ animation-delay:.5s; }
.hero .copy > .ctas{ animation-delay:.62s; }
.hero .copy > .chips{ animation-delay:.74s; }
.hero .copy > .hstats{ animation-delay:.86s; }
/* chữ gradient ánh lên chậm rãi */
.hero h1 .grad{ background-image:linear-gradient(90deg,#f5f5fa 0%,#c4b5fd 25%,#f9a8d4 50%,#c4b5fd 75%,#f5f5fa 100%); background-size:200% 100%; animation:rise 1.1s var(--ease-out) .34s both, shine 10s linear 1.6s infinite; }
@keyframes shine{ to{ background-position:200% 0; } }
/* chữ nhỏ trên cùng: dạng viên thuốc có chấm xanh "đang hoạt động" */
.hero .copy > .eyebrow{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; height:34px; padding:0 14px 0 12px; border-radius:999px;
  border:1px solid rgba(196,181,253,.24); background:rgba(139,92,246,.14); color:#ddd3ff; }
.hero .copy > .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; }
.hero h1{ margin:22px 0 0; font-size:36px; line-height:1.08; }
@media (min-width:768px){ .hero h1{ font-size:clamp(44px,4.3vw,72px); line-height:1.05; } }
.hero h1 span{ display:block; }
/* dòng chữ nghiêng to hơn một chút (chữ có chân nghiêng trông nhỏ hơn chữ đậm cùng cỡ) */
.hero h1 .serif{ font-size:1.06em; line-height:1.1; padding-bottom:.06em; letter-spacing:-.01em; }
.hero .desc{ margin:22px 0 0; max-width:46ch; color:#c9c6dc; }
@media (min-width:768px){ .hero .desc{ font-size:18px; } }
/* hàng số liệu dưới các chip: lấp khoảng trống (không kẻ ngang vì lẫn với sàn lưới đang chạy) */
.hstats{ display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:12px 40px; margin:36px 0 0; max-width:600px; }
.hstats div{ min-width:0; }
.hstats dt{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1; letter-spacing:-.03em; background:linear-gradient(90deg,#fff,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hstats dd{ margin:8px 0 0; font-size:13px; line-height:1.4; color:var(--muted); max-width:17ch; }
@media (max-width:639px){ .hstats{ grid-template-columns:repeat(3,1fr); gap:10px 14px; margin-top:26px; } .hstats dt{ font-size:22px; } .hstats dd{ font-size:12px; } }
/* thẻ "Agent đang làm việc" (bên phải, cạnh robot): việc đổi lần lượt Đang chạy → ✓ Xong */
.stat.live{ width:220px; }
@media (min-width:768px){ .stat.live{ width:250px; } }
.stat.live .lv-h{ display:flex; align-items:center; gap:8px; margin:0; font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stat.live .lv-h i{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:tp 1.6s ease-in-out infinite; }
.stat.live .lv-t{ display:block; margin-top:12px; font-size:15px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.stat.live .lv-t.sw{ animation:rise .55s var(--ease-out) both; }
.stat.live .lv-s{ display:inline-flex; align-self:flex-start; margin-top:12px; padding:3px 9px; border-radius:999px; font-size:11.5px; line-height:1.3; background:rgba(34,211,238,.14); color:#67e8f9; transition:background .3s, color .3s; }
.stat.live .lv-s.ok{ background:rgba(34,197,94,.16); color:#86efac; }
.hero .ctas{ display:flex; flex-direction:column; gap:10px; margin-top:32px; }
@media (min-width:640px){ .hero .ctas{ flex-direction:row; align-items:center; } }
.hero .chips{ display:flex; gap:8px; margin:24px calc(var(--pad) * -1) 0; padding:0 var(--pad); overflow-x:auto; scrollbar-width:none; }
.hero .chips::-webkit-scrollbar{ display:none; }
@media (min-width:768px){ .hero .chips{ margin:32px 0 0; padding:0; flex-wrap:wrap; } }
.hero .chips .chip{ height:44px; flex:none; }
.stage{ position:relative; height:52vh; min-height:360px; margin-top:16px; translate:0 calc(var(--hs,0) * 50px); animation:stageIn 1.6s var(--ease-out) .25s both; }
@keyframes stageIn{ from{ opacity:0; transform:scale(.92); } }
@media (min-width:768px){ .stage{ height:auto; margin-top:0; } }
.stage .scene{ position:absolute; inset:0; -webkit-mask-image:radial-gradient(closest-side at 50% 44%,#000 38%,rgba(0,0,0,.55) 58%,transparent 80%); mask-image:radial-gradient(closest-side at 50% 44%,#000 38%,rgba(0,0,0,.55) 58%,transparent 80%); }
.stage .scene::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(closest-side at 50% 44%,transparent 55%,#0b0711 100%); }
.stage .scene spline-viewer{ filter:saturate(1.05); }
.stage .glowfloor{ position:absolute; left:50%; top:62%; width:80%; height:30%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(236,72,153,.35),rgba(139,92,246,.15) 55%,transparent); filter:blur(20px); z-index:0; pointer-events:none; translate:calc(var(--px,0) * 18px) calc(var(--py,0) * 10px); }
@media (min-width:768px){ .stage .scene{ inset:-8% -10% -8% -6%; } }
.stage spline-viewer{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Điện thoại: robot Spline luôn cao cố định ~416px, nằm giữa khung vẽ (không co theo khung), còn dòng chữ "Built with Spline" luôn dính đáy khung vẽ.
   Khung cũ thấp + vùng làm mờ hẹp → mất nửa đầu robot. Cách sửa: khung robot cao 520px; khung vẽ (.scene) cao 680px, nhô ra trên/dưới 80px
   → robot nằm trọn trong khung robot, dòng chữ ở đáy rơi vào phần nhô ra bên dưới và bị làm mờ hẳn (lớp mờ thẳng ở đáy).
   Khung vẽ không nhận chạm để vuốt cuộn trang trên robot vẫn mượt; robot vẫn nhìn theo con trỏ AI (gaze gửi sự kiện thẳng vào canvas). */
@media (max-width:767px){
  .stage{ height:520px; }
  .stage .scene{ inset:-80px 0; pointer-events:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 78px),transparent calc(100% - 64px)),radial-gradient(ellipse 80% 58% at 50% 56%,#000 62%,rgba(0,0,0,.6) 82%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(#000 calc(100% - 78px),transparent calc(100% - 64px)),radial-gradient(ellipse 80% 58% at 50% 56%,#000 62%,rgba(0,0,0,.6) 82%,transparent 100%);
    mask-composite:intersect; }
  .stage .scene::after{ display:none; }
}
.orb{ position:absolute; left:50%; top:50%; width:min(70%,380px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0%,#f0abfc 18%,#8b5cf6 45%,#1e1040 75%); box-shadow:0 0 120px rgba(139,92,246,.6), inset -20px -30px 60px rgba(0,0,0,.45); animation:breathe 5s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:translate(-50%,-52%) scale(1.04); } }
.stat{ position:absolute; z-index:6; right:0; bottom:4%; width:190px; border-radius:20px; padding:16px; translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -12px); animation:pop .9s var(--ease-spring) 1.1s both, floaty 4s ease-in-out 2s infinite; }
@media (min-width:768px){ .stat{ width:220px; padding:20px; right:8%; bottom:12%; } }
.stat b{ display:block; font-size:30px; line-height:1; letter-spacing:-.03em; }
.stat span{ display:block; margin-top:8px; font-size:13px; line-height:1.35; color:var(--muted); }
.small{ position:absolute; z-index:6; left:0; bottom:3%; display:none; align-items:center; gap:12px; padding:8px 20px 8px 8px; border-radius:999px; translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 8px); animation:pop .9s var(--ease-spring) 1.3s both; }
@media (min-width:768px){ .small{ display:flex; } }
.small b{ display:block; font-size:15px; line-height:1.2; }
.small span{ font-size:13px; color:var(--muted); }
@keyframes floaty{ 50%{ transform:translateY(-6px); } }
.avs{ display:flex; }
.avs i{ width:32px; height:32px; border-radius:50%; border:2px solid var(--bg); margin-left:-10px; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; color:#fff; }
.avs i:first-child{ margin-left:0; }
.ast{ position:absolute; z-index:-1; pointer-events:none; animation:spin 20s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* marquee */
.marq{ border-block:1px solid var(--line); overflow:hidden; padding:22px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marq .track{ display:flex; gap:56px; width:max-content; animation:mq 40s linear infinite; }
.marq:hover .track{ animation-play-state:paused; }
@keyframes mq{ to{ transform:translateX(-50%); } }
.marq .lg{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; color:var(--dim); white-space:nowrap; transition:color .3s; }
.marq .lg:hover{ color:var(--text); }
.marq .lg svg{ width:26px; height:26px; }

/* sections */
/* nhịp khoảng cách giữa các phần: điện thoại 56px, máy tính 96px (đều nhau trên toàn trang) */
.sec{ padding:16px 0; } /* điện thoại: khoảng trống giữa 2 phần = 16px (theo ý bạn); máy tính 96px */
@media (max-width:767px){ .wrap.prow{ margin-top:0; } .prow .pr-item:last-child{ padding-bottom:0; }
  /* phần ngay sau 1 phần khác / sau đầu trang: bỏ đệm trên + lề trên của khối đầu tiên → khoảng trống luôn đúng 16px */
  .sec + .sec, .ph + .sec{ padding-top:0; } .ph + .sec > .wrap > :first-child{ margin-top:0; } } /* bỏ khoảng đệm thừa trước/sau phần quy trình */
@media (min-width:768px){ .sec{ padding:96px 0; } }
.sec-h{ max-width:760px; }
.sec h2{ margin:12px 0 0; font-size:28px; line-height:1.15; letter-spacing:-.02em; font-weight:700; }
@media (min-width:768px){ .sec h2{ font-size:48px; } }
.sec .sub{ margin:14px 0 0; color:var(--muted); max-width:62ch; }
.grid{ display:grid; gap:16px; margin-top:32px; }
@media (min-width:768px){ .grid{ gap:24px; margin-top:56px; } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:768px) and (max-width:1023px){ .g4{ grid-template-columns:repeat(2,1fr); } }
.card{ border-radius:24px; padding:24px; display:flex; flex-direction:column; transition:translate .55s var(--ease-spring), border-color .3s, box-shadow .4s; }
.card:hover{ translate:0 -6px; border-color:rgba(255,255,255,.2); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.card .ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(236,72,153,.25)); transition:transform .6s var(--ease-spring); }
.card:hover .ic, .sv:hover .ic{ transform:rotate(-8deg) scale(1.08); }
.card .more{ transition:gap .4s var(--ease-spring); } .card:hover .more{ gap:10px; }
.card h3{ margin:20px 0 0; font-size:22px; line-height:1.2; letter-spacing:-.01em; }
.card p{ margin:10px 0 0; color:var(--muted); font-size:15px; }
.card .more{ margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#c4b5fd; }
.nums{ display:grid; gap:12px; margin-top:32px; }
@media (min-width:768px){ .nums{ grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; } }
.num{ border-top:1px solid var(--line); padding-top:16px; }
.num b{ display:block; font-size:44px; line-height:1; letter-spacing:-.03em; }
@media (min-width:768px){ .num b{ font-size:60px; } }
.num span{ display:block; margin-top:8px; color:var(--muted); font-size:15px; }
.steps{ display:grid; gap:12px; margin-top:32px; counter-reset:st; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; } }
.step{ border-radius:24px; padding:24px; position:relative; }
.step .n{ font-family:var(--mono); font-size:13px; color:var(--cyan); }
.step h3{ margin:28px 0 0; font-size:20px; }
.step p{ margin:8px 0 0; color:var(--muted); font-size:15px; }
.step .bar{ height:3px; border-radius:3px; margin-top:20px; background:rgba(255,255,255,.08); overflow:hidden; }
.step .bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--primary),var(--pink)); transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
.reveal.in .bar i{ width:100%; }
.case{ border-radius:24px; overflow:hidden; display:flex; flex-direction:column; transition:translate .55s var(--ease-spring), box-shadow .4s; }
.case:hover{ translate:0 -6px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.case .cov{ aspect-ratio:16/10; position:relative; display:grid; place-items:center; overflow:hidden; transition:filter .5s; }
.case .cov b{ font-size:44px; letter-spacing:-.03em; transition:scale .7s var(--ease-spring); }
.case:hover .cov{ filter:saturate(1.2) brightness(1.08); }
.case:hover .cov b{ scale:1.08; }
.case .cov small{ position:absolute; left:16px; top:16px; }
.case .bd{ padding:20px 22px 24px; }
.case h3{ margin:8px 0 0; font-size:20px; line-height:1.25; }
.case p{ margin:8px 0 0; color:var(--muted); font-size:15px; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.filters button{ height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:transparent; cursor:pointer; color:var(--muted); }
.filters button[aria-pressed="true"]{ background:var(--text); color:#07070c; border-color:var(--text); }

/* ROI */
.roi{ border-radius:28px; padding:24px; display:grid; gap:28px; }
@media (min-width:900px){ .roi{ grid-template-columns:1.1fr .9fr; padding:40px; } }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label{ font-size:14px; color:var(--muted); display:flex; justify-content:space-between; }
.field label b{ color:var(--text); font-family:var(--mono); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:rgba(255,255,255,.12); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--text); box-shadow:0 0 0 6px rgba(139,92,246,.35); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--text); border:0; }
.roi .out{ border-radius:22px; padding:24px; background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(236,72,153,.14)); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; justify-content:center; }
.roi .out b{ font-size:40px; letter-spacing:-.03em; line-height:1.05; }
@media (min-width:768px){ .roi .out b{ font-size:52px; } }

/* testimonials */
.tst{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin-top:32px; scrollbar-width:thin; }
.tst .t{ scroll-snap-align:start; flex:0 0 86%; border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:18px; }
@media (min-width:768px){ .tst .t{ flex-basis:calc((100% - 32px)/3); } .tst{ margin-top:48px; } }
.tst q{ quotes:none; font-size:17px; line-height:1.55; }
.who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.who i{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; }
.who b{ display:block; font-size:15px; } .who span{ font-size:13px; color:var(--muted); }

/* pricing */
.toggle{ display:inline-flex; padding:4px; border-radius:999px; border:1px solid var(--line); margin-top:28px; }
.toggle button{ height:40px; padding:0 18px; border-radius:999px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-weight:600; }
.toggle button[aria-pressed="true"]{ background:var(--text); color:#07070c; }
.toggle .save{ font-size:12px; color:var(--cyan); margin-left:6px; }
.plan{ border-radius:28px; padding:28px; display:flex; flex-direction:column; }
.plan.hot{ border-color:rgba(139,92,246,.6); box-shadow:0 0 0 1px rgba(139,92,246,.4), 0 30px 80px rgba(139,92,246,.25); }
.plan .pr{ font-size:40px; letter-spacing:-.03em; margin-top:16px; line-height:1; }
.plan .pr small{ font-size:15px; color:var(--muted); letter-spacing:0; }
.plan ul{ list-style:none; padding:0; margin:24px 0; display:flex; flex-direction:column; gap:10px; font-size:15px; }
.plan li{ display:flex; gap:10px; } .plan li::before{ content:"✓"; color:var(--cyan); font-weight:700; }
.plan .btn{ margin-top:auto; width:100%; }

/* FAQ */
.faq{ margin-top:32px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:18px; font-weight:500; padding:12px 0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:26px; color:var(--muted); transition:transform .5s var(--ease-spring), color .3s; }
.faq details[open] summary::after{ transform:rotate(45deg); color:var(--text); }
.faq summary{ transition:color .3s; } .faq summary:hover{ color:#c4b5fd; }
/* mở/đóng câu hỏi mượt (Chrome/Edge mới; trình duyệt cũ vẫn mở bình thường) */
.faq{ interpolate-size:allow-keywords; }
.faq details::details-content{ block-size:0; overflow:clip; transition:block-size .55s var(--ease-out), content-visibility .55s allow-discrete; }
.faq details[open]::details-content{ block-size:auto; }
.faq details[open] p{ animation:rise .6s var(--ease-out) both; }
.faq p{ margin:0 0 20px; color:var(--muted); max-width:70ch; }

/* band */
.band{ border-radius:32px; padding:48px 24px; text-align:center; position:relative; overflow:hidden; isolation:isolate; }
@media (min-width:768px){ .band{ padding:88px 48px; } }
.band::after{ content:""; position:absolute; inset:auto -10% -70% -10%; height:130%; background:radial-gradient(closest-side,rgba(236,72,153,.35),rgba(139,92,246,.18),transparent); z-index:-1; }
.band h2{ margin:0 auto; max-width:20ch; }
.band .sub{ margin:14px auto 28px; }

/* page header */
.ph{ position:relative; isolation:isolate; padding:calc(var(--hh) + env(safe-area-inset-top,0px) + 56px) 0 16px; overflow:hidden; }
@media (min-width:768px){ .ph{ padding-top:180px; padding-bottom:72px; } }
.ph::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 80% at 85% 0%,rgba(139,92,246,.28),transparent 70%), radial-gradient(40% 60% at 10% 10%,rgba(236,72,153,.12),transparent 70%); }
.ph h1{ margin:14px 0 0; font-size:36px; line-height:1.08; letter-spacing:-.03em; max-width:20ch; }
@media (min-width:768px){ .ph h1{ font-size:64px; } }
.ph p{ margin:16px 0 0; color:var(--muted); max-width:58ch; font-size:17px; }
.crumb{ font-size:14px; color:var(--dim); } .crumb a:hover{ color:var(--text); }

/* ===== NỀN RIÊNG CHO 5 TRANG (phía sau phần đầu trang; bạn chọn từ _goi-y/nen-5-trang.html) =====
   Nằm lệch phải và mờ dần về bên trái để chữ luôn dễ đọc; điện thoại mờ hơn vì chữ chiếm cả bề ngang. */
.ph-fx{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 58%); mask-image:linear-gradient(90deg,transparent 22%,#000 58%); }
.ph-fx i, .ph-fx span, .ph-fx svg{ position:absolute; display:block; }
.ph-fx svg{ inset:0; width:100%; height:100%; }
@media (max-width:767px){ .ph-fx{ opacity:.45; -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 80%); mask-image:linear-gradient(90deg,transparent 30%,#000 80%); } }
/* Case study – biểu đồ tăng trưởng: đường vẽ dần lên, điểm số liệu nhấp nháy */
.ph-chart .ln{ stroke-dasharray:1; stroke-dashoffset:1; animation:phDraw 2.6s var(--ease-out) .4s forwards; }
@keyframes phDraw{ to{ stroke-dashoffset:0; } }
.ph-chart .dot{ animation:hzBreath 2.4s ease-in-out infinite; }
/* Bảng giá – 3 cột sáng cao dần như 3 gói, cột giữa (gói phổ biến) hồng nổi bật */
.ph-pillars .pil{ bottom:0; width:9%; max-width:120px; border-radius:16px 16px 0 0; border:1px solid rgba(255,255,255,.14); border-bottom:0; transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(139,92,246,.05),rgba(139,92,246,.28)); animation:phGrow 1.4s var(--ease-out) both; }
.ph-pillars .pil::before{ content:""; position:absolute; left:50%; bottom:100%; width:240%; height:200px; translate:-50% 0; clip-path:polygon(35% 100%,65% 100%,100% 0,0 0);
  background:linear-gradient(to top,rgba(196,181,253,.22),transparent); animation:hzBreath 4s ease-in-out infinite; }
.ph-pillars .pil.hot{ background:linear-gradient(to top,rgba(236,72,153,.08),rgba(236,72,153,.4)); border-color:rgba(249,168,212,.5); box-shadow:0 0 60px rgba(236,72,153,.35); }
@keyframes phGrow{ from{ transform:scaleY(0); } }
/* Về chúng tôi – chòm sao đội ngũ: điểm sáng lấp lánh, cả chòm trôi nhẹ */
.ph-stars svg{ left:42%; width:58%; } /* gọn về bên phải, không lấn vào đoạn mô tả dài */
.ph-stars .star{ animation:hzBreath 3s ease-in-out infinite; }
.ph-stars .net{ animation:phNet 16s ease-in-out infinite alternate; }
@keyframes phNet{ to{ transform:translate(-18px,10px); } }
/* Blog – giấy kẻ dòng, đường lề hồng, nét bút dạ quang tự viết ra */
.ph-paper .paper{ inset:0; background-image:linear-gradient(rgba(196,181,253,.1) 1px,transparent 1px); background-size:100% 32px; background-position:0 14px; }
.ph-paper .margin{ top:0; bottom:0; left:62%; width:2px; background:linear-gradient(to bottom,transparent,rgba(244,114,182,.55),transparent); }
.ph-paper .ink{ left:66%; top:58%; width:26%; height:10px; border-radius:6px; transform-origin:0 50%; background:linear-gradient(90deg,rgba(139,92,246,.6),rgba(236,72,153,.6)); animation:phWrite 3.5s var(--ease-out) infinite; }
.ph-paper .ink.i2{ top:69%; width:18%; animation-delay:.6s; } .ph-paper .ink.i3{ top:47%; width:22%; animation-delay:1.2s; opacity:.6; }
@keyframes phWrite{ 0%{ transform:scaleX(0); opacity:0; } 30%{ opacity:1; } 60%,100%{ transform:scaleX(1); opacity:.9; } }
/* Liên hệ – bong bóng chat bay lên (bong bóng xanh kiểu Zalo, có dấu "đang gõ…") */
.ph-chat .bub{ bottom:0; display:flex; align-items:center; gap:5px; padding:10px 14px; border-radius:16px 16px 16px 4px; font-size:13px; line-height:1.3; white-space:nowrap; color:#d7d7e4;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); opacity:0; animation:phFloat 9s linear infinite; }
.ph-chat .bub.me{ border-radius:16px 16px 4px 16px; background:rgba(0,104,255,.35); border-color:rgba(96,165,250,.4); color:#fff; }
.ph-chat .bub .td{ position:static; width:6px; height:6px; border-radius:50%; background:#c4b5fd; animation:hzBreath 1s ease-in-out infinite; }
.ph-chat .bub .td:nth-child(2){ animation-delay:.2s; } .ph-chat .bub .td:nth-child(3){ animation-delay:.4s; }
@keyframes phFloat{ 0%{ transform:translateY(60px); opacity:0; } 15%{ opacity:1; } 80%{ opacity:.9; } 100%{ transform:translateY(-380px); opacity:0; } }

/* forms */
.form{ display:grid; gap:16px; }
@media (min-width:768px){ .form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } }
.form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--muted); }
.form input, .form select, .form textarea{ min-height:52px; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; }
.form textarea{ min-height:120px; resize:vertical; }
.form select option{ background:#11101c; }
/* ô chọn (vd "Ngân sách dự kiến"): bỏ mũi tên mặc định nằm sát viền, thay bằng mũi tên riêng cách viền 18px */
.form select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:48px; cursor:pointer; text-overflow:ellipsis;
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 16px 16px; }
.form select:hover{ border-color:rgba(255,255,255,.24); }
.form input:focus, .form select:focus, .form textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(139,92,246,.2); }
.form .err{ color:#fda4af; font-size:13px; min-height:18px; }
.form .invalid{ border-color:#fb7185 !important; }
.hp{ position:absolute; left:-9999px; }
.ok{ border-radius:24px; padding:32px; text-align:center; }
.ok .tick{ width:64px; height:64px; border-radius:50%; margin:0 auto; display:grid; place-items:center; background:linear-gradient(135deg,var(--primary),var(--pink)); font-size:28px; }

/* booking */
.book{ display:grid; gap:24px; }
@media (min-width:1000px){ .book{ grid-template-columns:1fr 1.15fr; } }
.cal{ border-radius:24px; padding:20px; }
.days{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
@media (min-width:640px){ .days{ grid-template-columns:repeat(7,1fr); } }
.days button, .slots button{ min-height:56px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer; color:var(--text); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; font-size:13px; }
.days button b{ font-size:18px; }
.days button[disabled]{ opacity:.3; cursor:not-allowed; }
.days button[aria-pressed="true"], .slots button[aria-pressed="true"]{ background:var(--text); color:#07070c; border-color:var(--text); }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
@media (min-width:640px){ .slots{ grid-template-columns:repeat(4,1fr); } }
.slots button{ min-height:48px; font-size:15px; }

/* article */
.post{ max-width:720px; margin:0 auto; }
.post h2{ font-size:26px; margin:40px 0 12px; letter-spacing:-.02em; }
.post p, .post li{ color:#d7d7e4; font-size:18px; line-height:1.75; }
.post .meta{ color:var(--muted); font-size:14px; }
.cover{ border-radius:24px; aspect-ratio:16/8; margin:32px 0; display:grid; place-items:center; font-size:72px; }
.legal{ max-width:760px; } .legal h2{ font-size:22px; margin:32px 0 8px; } .legal p, .legal li{ color:#cfcfe0; }

/* detail */
.kpi{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px; }
@media (min-width:768px){ .kpi{ grid-template-columns:repeat(4,1fr); } }
.kpi div{ border-radius:20px; padding:18px; }
.kpi small{ color:var(--muted); font-size:13px; display:block; }
.kpi .ba{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.kpi s{ color:var(--dim); } .kpi b{ font-size:26px; letter-spacing:-.02em; }
.cols{ display:grid; gap:24px; } @media (min-width:900px){ .cols{ grid-template-columns:1.4fr 1fr; gap:48px; } }
.list{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:12px; }
.list li{ display:flex; gap:12px; } .list li::before{ content:""; flex:none; margin-top:9px; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); }

/* footer */
.foot{ border-top:1px solid var(--line); padding:56px 0 calc(110px + env(safe-area-inset-bottom,0px)); margin-top:0; }
@media (min-width:768px){ .foot{ padding-bottom:48px; } }
.foot .top{ display:grid; gap:40px; }
@media (min-width:900px){ .foot .top{ grid-template-columns:1.3fr 2fr; } }
.foot .cols4{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (min-width:768px){ .foot .cols4{ grid-template-columns:repeat(3,1fr); } }
.foot h4{ margin:0 0 10px; font-size:15px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li a{ display:inline-flex; min-height:40px; align-items:center; color:var(--muted); font-size:15px; }
.foot li a:hover{ color:var(--text); }
.nl{ display:flex; gap:6px; padding:6px; border-radius:999px; margin-top:16px; max-width:440px; }
.nl input{ flex:1; min-width:0; background:transparent; border:0; outline:none; padding:0 14px; height:44px; }
.foot .bot{ display:flex; flex-direction:column; gap:10px; margin-top:44px; padding-top:20px; border-top:1px solid var(--line); color:var(--dim); font-size:14px; }
@media (min-width:768px){ .foot .bot{ flex-direction:row; justify-content:space-between; } }
.foot .bot a{ margin-right:18px; } .foot .bot a:hover{ color:var(--text); }

/* floating */
.fab{ position:fixed; right:16px; z-index:55; display:flex; flex-direction:column; gap:10px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
@media (min-width:768px){ .fab{ right:24px; bottom:24px; } }
.fab a, .fab button{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:0; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.fab .zalo{ background:#0068ff; color:#fff; font-weight:700; font-size:13px; }
.fab .bot{ background:linear-gradient(135deg,var(--primary),var(--pink)); color:#fff; }
.fab .top{ background:rgba(255,255,255,.1); backdrop-filter:blur(12px); color:#fff; }
.sticky{ position:fixed; inset:auto 0 0; z-index:54; padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px)); background:rgba(7,7,12,.85); backdrop-filter:blur(16px); border-top:1px solid var(--line); }
.sticky a{ display:flex; height:48px; align-items:center; justify-content:center; border-radius:999px; background:var(--text); color:#07070c; font-weight:700; }
@media (min-width:768px){ .sticky{ display:none; } }

/* chatbot */
.chat{ position:fixed; z-index:75; right:16px; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-height:min(620px,80dvh); border-radius:24px; display:flex; flex-direction:column; overflow:hidden; background:rgba(14,12,24,.97); opacity:0; visibility:hidden; transform:translateY(18px) scale(.95); transform-origin:100% 100%; transition:opacity .3s var(--ease-out), transform .55s var(--ease-spring), visibility .3s; }
@media (min-width:640px){ .chat{ left:auto; width:380px; right:24px; bottom:92px; } }
.chat.open{ opacity:1; visibility:visible; transform:none; }
.chat header{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.chat header .av{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--pink)); display:grid; place-items:center; }
.chat header b{ display:block; font-size:15px; } .chat header span{ font-size:12px; color:#86efac; }
.chat header button{ margin-left:auto; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.06); cursor:pointer; }
.msgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.5; white-space:pre-line; animation:msgIn .5s var(--ease-spring) both; }
.msg.bot{ background:rgba(255,255,255,.07); border-bottom-left-radius:4px; transform-origin:0 100%; }
.msg.me{ align-self:flex-end; background:var(--text); color:#07070c; border-bottom-right-radius:4px; transform-origin:100% 100%; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.94); } }
.typing{ display:flex; gap:4px; padding:12px 14px; } .typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tp 1s infinite; } .typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes tp{ 50%{ opacity:.3; transform:translateY(-3px); } }
.sugg{ display:flex; gap:6px; overflow-x:auto; padding:0 16px 10px; scrollbar-width:none; }
.sugg button{ flex:none; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:13px; color:var(--muted); }
.chat form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat form input{ flex:1; min-width:0; height:44px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); padding:0 16px; outline:none; }
.chat form button{ width:44px; height:44px; border-radius:50%; border:0; background:var(--text); color:#07070c; cursor:pointer; }
.chat .lim{ font-size:11px; color:var(--dim); text-align:center; padding:0 0 8px; }

/* hiện dần khi cuộn tới: mờ → rõ, trượt lên. --d = độ trễ (JS tự gán để các thẻ hiện lần lượt)
   Không làm nhoè (blur) cả thẻ vì đo thực tế làm cuộn giật; chỉ nhoè chữ tiêu đề (nhỏ, nhẹ) */
.reveal{ opacity:0; transform:translate3d(0,32px,0) scale(.98);
  transition:opacity .9s var(--ease-out) var(--d,0ms), transform 1.1s var(--ease-out) var(--d,0ms),
    translate .55s var(--ease-spring), scale .25s var(--ease-spring), border-color .3s, box-shadow .4s, background-color .3s; }
.reveal.in{ opacity:1; transform:none; }
/* tiêu đề mục: từng chữ hiện lần lượt */
.reveal.split{ opacity:1; transform:none; }
.split .w{ display:inline-block; opacity:0; transform:translate3d(0,.45em,0); filter:blur(6px);
  transition:opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out); transition-delay:calc(var(--d,0ms) + var(--wi,0) * 45ms); }
.split.in .w{ opacity:1; transform:none; filter:none; }
.page-enter{ animation:pe .6s var(--ease-out); } @keyframes pe{ from{ opacity:0; transform:translateY(12px); } }
.cookie{ position:fixed; z-index:58; left:16px; right:16px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; font-size:14px; animation:rise .8s var(--ease-out) 1.2s both; }
@media (min-width:768px){ .cookie{ left:24px; right:auto; bottom:24px; max-width:420px; } }
.cookie .row{ display:flex; gap:8px; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important; } .reveal{ opacity:1; transform:none; } .split .w{ opacity:1; transform:none; filter:none; } .hero .copy, .stage{ translate:none; opacity:1; } }

/* ===== typography v2 ===== */
h1,h2,h3,h4,.big,.strip b,.num b,.pr-item .no,.stat b,.plan .pr,.roi .out b,.tile b,.kpi b,.hero .giant,.small b,.case .cov b,.btn,.btn-pill,.nav a,.nav button{ font-family:var(--display); }
h1,h2{ font-weight:800; letter-spacing:-.03em; }
h3{ font-weight:700; letter-spacing:-.015em; }
/* xuống dòng cân đối cho tiêu đề (không để 1 chữ lẻ loi dòng cuối), đoạn văn tránh chữ mồ côi */
h1,h2,h3{ text-wrap:balance; } p{ text-wrap:pretty; }
.serif{ font-family:var(--serif); font-style:italic; font-weight:400; font-variation-settings:"opsz" 144; letter-spacing:-.015em; }
.hero h1{ font-weight:800; letter-spacing:-.035em; }
.hero h1 .serif{ font-weight:400; }
.eyebrow{ font-family:var(--mono); font-weight:500; letter-spacing:.14em; font-size:12px; }
.tfeat q{ font-family:var(--serif); font-weight:300; }
body{ letter-spacing:-.005em; }

/* ===== BODY v2 (bento, workflow, console, horizon) ===== */
.bento{ display:grid; gap:16px; margin-top:32px; grid-template-columns:1fr; }
@media (min-width:900px){ .bento{ grid-template-columns:repeat(12,1fr); gap:20px; margin-top:56px; } .b7{ grid-column:span 7; } .b5{ grid-column:span 5; } .b4{ grid-column:span 4; } .b8{ grid-column:span 8; } }
.bx{ border-radius:28px; padding:24px; position:relative; overflow:hidden; min-height:260px; display:flex; flex-direction:column; }
.bx h3{ margin:0; font-size:20px; letter-spacing:-.01em; } .bx p{ margin:6px 0 0; color:var(--muted); font-size:14px; max-width:42ch; }
.bx .vis{ margin-top:auto; padding-top:20px; position:relative; }
.bx.b7 .vis{ margin-bottom:auto; }
.bx::after{ content:""; position:absolute; inset:auto -30% -60% -30%; height:90%; background:radial-gradient(closest-side,rgba(139,92,246,.18),transparent); pointer-events:none; z-index:-1; }
.gborder{ position:relative; }
.gborder::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:conic-gradient(from var(--ang,0deg),rgba(139,92,246,.0),rgba(139,92,246,.9),rgba(236,72,153,.9),rgba(34,211,238,.7),rgba(139,92,246,0) 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:ang 6s linear infinite; pointer-events:none; }
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes ang{ to{ --ang:360deg; } }
/* workflow */
.flow{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
@media (min-width:640px){ .flow{ grid-template-columns:repeat(4,1fr); } }
.node{ position:relative; z-index:2; border-radius:16px; padding:12px; background:rgba(20,18,34,.85); border:1px solid rgba(255,255,255,.12); font-size:13px; line-height:1.35; transition:border-color .4s, box-shadow .4s, transform .4s; }
.node .ni{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:8px; font-size:15px; }
.node b{ display:block; font-size:13.5px; } .node span{ color:var(--muted); font-size:12px; }
.node.on{ border-color:rgba(236,72,153,.75); box-shadow:0 0 0 4px rgba(236,72,153,.12), 0 0 30px rgba(236,72,153,.35); transform:translateY(-3px); }
.flow svg.wires{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.flow .done{ position:absolute; right:10px; top:10px; font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(34,197,94,.18); color:#86efac; opacity:0; transition:opacity .3s; }
.node.ok .done{ opacity:1; }
/* chat mock */
.cm{ display:flex; flex-direction:column; gap:8px; }
.cm .b{ max-width:85%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.4; opacity:0; transform:translateY(8px); transition:all .45s cubic-bezier(.2,.8,.2,1); }
.cm .b.show{ opacity:1; transform:none; }
.cm .u{ align-self:flex-end; background:var(--text); color:#07070c; border-bottom-right-radius:4px; }
.cm .a{ background:rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.cm .a small{ display:block; color:var(--cyan); font-size:11px; margin-bottom:2px; }
/* bars */
.bars{ display:flex; align-items:flex-end; gap:6px; height:110px; }
.bars i{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#c084fc,#6d28d9); height:8%; transition:height 1s cubic-bezier(.2,.8,.2,1); }
.bars i:nth-child(odd){ background:linear-gradient(180deg,#f9a8d4,#be185d); }
.big{ font-size:52px; font-weight:700; letter-spacing:-.04em; line-height:1; }
/* integrations */
.ints{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ints span{ height:56px; border-radius:14px; display:grid; place-items:center; font-size:12.5px; font-weight:600; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#d4d4e4; transition:transform .5s var(--ease-spring), border-color .3s, background-color .3s, box-shadow .4s; }
.ints span:hover{ transform:translateY(-4px); border-color:rgba(139,92,246,.6); background-color:rgba(139,92,246,.12); box-shadow:0 10px 30px rgba(139,92,246,.25); }
/* pulse */
.pulse{ position:relative; width:120px; height:120px; margin:0 auto; display:grid; place-items:center; }
.pulse i{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(34,211,238,.6); animation:pr 2.6s cubic-bezier(.2,.8,.2,1) infinite; }
.pulse i:nth-child(2){ animation-delay:.85s; } .pulse i:nth-child(3){ animation-delay:1.7s; }
.pulse b{ font-size:30px; letter-spacing:-.03em; z-index:1; }
@keyframes pr{ from{ transform:scale(.45); opacity:1; } to{ transform:scale(1.15); opacity:0; } }
/* service row */
.svrow{ display:grid; gap:12px; margin-top:20px; }
@media (min-width:768px){ .svrow{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.sv{ border-radius:20px; padding:18px; display:flex; gap:14px; align-items:center; transition:translate .55s var(--ease-spring), border-color .3s; }
.sv:hover{ translate:0 -4px; border-color:rgba(255,255,255,.22); }
.sv .ic{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(236,72,153,.28)); transition:transform .6s var(--ease-spring); }
.sv b{ display:block; font-size:16px; } .sv span{ font-size:13px; color:var(--muted); }
/* stats strip */
.strip{ border-radius:28px; display:grid; grid-template-columns:repeat(2,1fr); margin-top:40px; overflow:hidden; }
@media (min-width:768px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip > div{ padding:28px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip b{ display:block; font-size:44px; letter-spacing:-.04em; line-height:1; }
@media (min-width:768px){ .strip b{ font-size:56px; } }
.strip span{ display:block; margin-top:10px; color:var(--muted); font-size:14px; }
/* process rows */
.prow{ display:grid; gap:32px; margin-top:8px; }
@media (min-width:900px){ .prow{ grid-template-columns:.9fr 1.1fr; gap:64px; } .prow .stick{ position:sticky; top:120px; align-self:start; } }
.pr-item{ display:grid; grid-template-columns:auto 1fr; gap:18px 24px; padding:28px 0; border-top:1px solid var(--line); }
.pr-item .no{ font-size:56px; font-weight:700; letter-spacing:-.04em; line-height:.9; background:linear-gradient(180deg,#f5f5fa,rgba(245,245,250,.15)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (min-width:768px){ .pr-item .no{ font-size:80px; } }
.pr-item h3{ margin:4px 0 0; font-size:24px; } .pr-item p{ margin:8px 0 0; color:var(--muted); }
.pr-item .wk{ display:inline-block; margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--cyan); }
/* console mock */
.console{ border-radius:24px; overflow:hidden; margin-top:40px; background:rgba(13,12,22,.92); }
.console .tb{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); }
.console .tb i{ width:11px; height:11px; border-radius:50%; background:#3a3a4d; } .console .tb i:nth-child(1){ background:#ff5f57; } .console .tb i:nth-child(2){ background:#febc2e; } .console .tb i:nth-child(3){ background:#28c840; }
.console .tb span{ margin-left:12px; font-size:12px; color:var(--dim); font-family:var(--mono); }
.console .cb{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .console .cb{ grid-template-columns:200px 1fr; } }
.console aside{ display:none; padding:18px 12px; border-right:1px solid var(--line); }
@media (min-width:900px){ .console aside{ display:block; } }
.console aside a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:13.5px; color:var(--muted); }
.console aside a.on{ background:rgba(139,92,246,.18); color:var(--text); }
.console main{ padding:18px; display:grid; gap:14px; }
@media (min-width:768px){ .console main{ padding:22px; grid-template-columns:repeat(3,1fr); } .console .wide{ grid-column:span 2; } .console .full{ grid-column:1/-1; } }
.tile{ border-radius:16px; padding:16px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.tile small{ color:var(--muted); font-size:12px; } .tile b{ display:block; font-size:28px; letter-spacing:-.03em; margin-top:4px; }
.tile .up{ font-size:12px; color:#86efac; }
.tasks{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tasks li{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); }
.tasks li em{ margin-left:auto; font-style:normal; font-size:11px; padding:2px 8px; border-radius:999px; }
.st-ok{ background:rgba(34,197,94,.16); color:#86efac; } .st-run{ background:rgba(34,211,238,.16); color:#67e8f9; } .st-wait{ background:rgba(250,204,21,.16); color:#fde68a; }
.sw{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; padding:8px 0; }
.sw i{ width:38px; height:22px; border-radius:999px; background:rgba(255,255,255,.15); position:relative; transition:background .3s; }
.sw i::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .3s; }
.sw.on i{ background:linear-gradient(90deg,var(--primary),var(--pink)); } .sw.on i::after{ transform:translateX(16px); }
.area path.ln{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 2s ease; }
.reveal.in .area path.ln, .area.in path.ln{ stroke-dashoffset:0; }
/* ===== ĐƯỜNG CHÂN TRỜI v3 (vẽ bằng CSS, không bị kéo méo; chỉ chuyển động bằng opacity/translate/scale nên nhẹ) ===== */
/* đường cong lấn vào khoảng trống cuối phần trước; phần ngay sau bám sát (không cộng thêm khoảng đệm) */
.horizon{ position:relative; height:180px; margin:-16px 0 0; pointer-events:none; overflow:hidden; }
@media (min-width:768px){ .horizon{ height:240px; margin-top:-48px; } .hz-rays{ height:220px; } }
.horizon + .sec{ padding-top:0; }
.horizon i{ position:absolute; display:block; }
@keyframes hzBreath{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* bụi sáng bay lên rồi tan (2 lớp lệch nhịp) */
.horizon .hz-spark{ inset:8% 18% 30%; animation:sparkUp 7s linear infinite;
  background-image:radial-gradient(1.6px 1.6px at 12% 70%,#fff,transparent),radial-gradient(1.2px 1.2px at 24% 40%,#e9d5ff,transparent),radial-gradient(1.4px 1.4px at 37% 82%,#fff,transparent),
    radial-gradient(1px 1px at 46% 30%,#f9a8d4,transparent),radial-gradient(1.8px 1.8px at 52% 64%,#fff,transparent),radial-gradient(1.2px 1.2px at 61% 22%,#c4b5fd,transparent),
    radial-gradient(1.4px 1.4px at 70% 76%,#fff,transparent),radial-gradient(1px 1px at 79% 46%,#e9d5ff,transparent),radial-gradient(1.6px 1.6px at 88% 68%,#f9a8d4,transparent); }
.horizon .hz-spark.s2{ animation-duration:9s; animation-delay:-4s;
  background-image:radial-gradient(1.2px 1.2px at 8% 50%,#e9d5ff,transparent),radial-gradient(1.6px 1.6px at 19% 86%,#fff,transparent),radial-gradient(1px 1px at 33% 58%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 43% 12%,#c4b5fd,transparent),radial-gradient(1.2px 1.2px at 57% 90%,#fff,transparent),radial-gradient(1.6px 1.6px at 66% 44%,#f9a8d4,transparent),
    radial-gradient(1px 1px at 83% 26%,#fff,transparent),radial-gradient(1.4px 1.4px at 93% 80%,#e9d5ff,transparent); }
@keyframes sparkUp{ 0%{ translate:0 22px; opacity:0; } 25%{ opacity:1; } 75%{ opacity:.7; } 100%{ translate:0 -30px; opacity:0; } }

/* kiểu "globe" – Lưới hành tinh (trước Bảng giá): quả cầu lưới phát sáng tự xoay chậm */
.hz-globe svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hz-globe .gl-glow{ left:15%; right:15%; top:18%; height:70%; border-radius:50%; background:radial-gradient(closest-side,rgba(139,92,246,.3),rgba(236,72,153,.08) 60%,transparent); animation:hzBreath 6s ease-in-out infinite; }

/* kiểu "rays" – Tia sáng hội tụ (trước khung kêu gọi cuối): nguồn sáng ở TRÊN, 7 tia tím/hồng xoè XUỐNG rọi vào khung kêu gọi như đèn sân khấu;
   khi được dựng thì các tia buông xuống từ nguồn sáng, rồi đung đưa nhẹ */
.hz-rays{ -webkit-mask-image:linear-gradient(to top,transparent,#000 45%); mask-image:linear-gradient(to top,transparent,#000 45%); } /* tia mờ dần trước khi chạm khung bên dưới */
.hz-rays .ry{ left:50%; top:30px; width:0; height:0; transform-origin:50% 0; transform:scaleY(.25); opacity:0; transition:transform 1.4s var(--ease-out) .1s, opacity .9s var(--ease-out) .1s; }
.hz-rays.in .ry{ transform:none; opacity:1; }
.hz-rays .ry i{ left:-40px; top:0; width:80px; height:440px; transform-origin:50% 0; border-radius:40px; animation:sway 7s ease-in-out infinite alternate;
  background:linear-gradient(to bottom,transparent 0,rgba(255,255,255,.5) 10%,rgba(196,181,253,.22) 36%,transparent 78%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent); mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent); }
.hz-rays .ry i:nth-child(even){ background:linear-gradient(to bottom,transparent 0,rgba(249,168,212,.48) 10%,rgba(236,72,153,.18) 36%,transparent 78%); }
.hz-rays .ry i:nth-child(1){ rotate:-48deg; animation-delay:-1s; } .hz-rays .ry i:nth-child(2){ rotate:-32deg; animation-delay:-3s; } .hz-rays .ry i:nth-child(3){ rotate:-16deg; animation-delay:-5s; }
.hz-rays .ry i:nth-child(4){ rotate:0deg; } .hz-rays .ry i:nth-child(5){ rotate:16deg; animation-delay:-2s; } .hz-rays .ry i:nth-child(6){ rotate:32deg; animation-delay:-4s; } .hz-rays .ry i:nth-child(7){ rotate:48deg; animation-delay:-6s; }
@keyframes sway{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }
/* nguồn sáng ở trên: vầng sáng mờ dần trước mép trên khung (không bị cắt thẳng) */
.hz-rays .ry-focus{ left:50%; top:0; width:min(52%,400px); height:130px; translate:-50% 0; border-radius:50%; animation:hzBreath 4s ease-in-out infinite;
  background:radial-gradient(closest-side,rgba(255,255,255,.42),rgba(196,181,253,.22) 45%,rgba(139,92,246,.08) 70%,transparent); }
.hz-rays .hz-spark{ inset:22% 26% 18%; animation-name:sparkDown; }
@keyframes sparkDown{ 0%{ translate:0 -22px; opacity:0; } 25%{ opacity:1; } 75%{ opacity:.7; } 100%{ translate:0 30px; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .hz-rays .ry{ transform:none; opacity:1; } }
/* testimonials v2 */
.tfeat{ border-radius:28px; padding:28px; margin-top:40px; display:grid; gap:24px; }
@media (min-width:900px){ .tfeat{ grid-template-columns:1.5fr 1fr; padding:44px; align-items:end; } }
.tfeat q{ quotes:none; font-family:var(--serif); font-style:italic; font-size:26px; line-height:1.3; }
@media (min-width:768px){ .tfeat q{ font-size:36px; } }
.tfeat .kp{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* testimonials loop */
.tloop{ position:relative; overflow:hidden; margin-top:24px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tloop .trk{ display:flex; gap:16px; width:max-content; animation:tl 46s linear infinite; padding:8px 0 12px; }
.tloop:hover .trk, .tloop:focus-within .trk{ animation-play-state:paused; }
/* thẻ đang chạy liên tục: bỏ hiệu ứng làm mờ nền (backdrop-filter) vì rất nặng khi di chuyển */
.tloop .t{ flex:0 0 300px; border-radius:24px; padding:22px; display:flex; flex-direction:column; gap:18px; animation:tBob 6s ease-in-out infinite; backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(22,20,36,.9); }
.tloop .t:nth-child(3n+2){ animation-delay:-2s; } .tloop .t:nth-child(3n){ animation-delay:-4s; }
@media (min-width:768px){ .tloop .t{ flex-basis:360px; } }
.tloop q{ quotes:none; font-size:16px; line-height:1.55; }
@keyframes tl{ to{ transform:translateX(calc(-50% - 8px)); } }
@keyframes tBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(-.4deg); } }

.fab [hidden]{ display:none; }

/* ===== CHUẨN DÙNG THẬT: bàn phím, form, mạng xã hội ===== */
/* nút "Bỏ qua, tới nội dung chính": ẩn, chỉ hiện khi người dùng bàn phím bấm Tab */
.skip{ position:fixed; z-index:100; left:16px; top:-80px; padding:12px 18px; border-radius:12px; border:0; background:var(--text); color:#07070c; font-weight:600; cursor:pointer; transition:top .25s var(--ease-out); }
.skip:focus{ top:calc(12px + env(safe-area-inset-top,0px)); }
main:focus{ outline:none; }
/* nút đang gửi form */
.btn[disabled], .btn-pill[disabled]{ opacity:.65; cursor:progress; }
.form-err{ margin:0; }
/* mạng xã hội ở chân trang (chỉ hiện khi đã điền link trong content.js) */
.soc{ display:flex; gap:8px; margin-top:18px; }
.soc a{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.03); transition:color .3s, border-color .3s, translate .4s var(--ease-spring); }
.soc a:hover{ color:var(--text); border-color:rgba(196,181,253,.5); translate:0 -2px; }

/* ===== MOTION v3 (mượt hơn, tham khảo Linear / Raycast) ===== */
/* 1. Thanh menu thành "viên thuốc" nổi khi cuộn (máy tính, tablet) */
@media (min-width:768px){
  .hdr.solid{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
  .hdr .bar{ position:relative; }
  .hdr .bar::before{ content:""; position:absolute; z-index:-1; inset:8px calc(var(--pad) - 20px); border-radius:999px; pointer-events:none;
    background:rgba(12,11,22,.62); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.09); box-shadow:0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    opacity:0; transform:translateY(-10px) scale(.97); transition:opacity .4s var(--ease-out), transform .7s var(--ease-spring); }
  .hdr.solid .bar::before{ opacity:1; transform:none; }
  .hdr.solid .nav, .hdr.solid .lang{ background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hdr.solid .nav::before, .hdr.solid .lang::before{ opacity:0; }
  .hdr .nav, .hdr .lang{ transition:background .4s, border-color .4s; }
  .hdr .cta{ min-height:44px; }
}
.nav a, .nav button{ position:relative; }
.nav > a.on::after, .nav .dd > button.on::after{ content:""; position:absolute; left:50%; bottom:2px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); }

/* 2. Thanh tiến độ cuộn trang (trên cùng) */
.prog{ position:fixed; z-index:65; left:0; right:0; top:env(safe-area-inset-top,0px); height:2px; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); will-change:transform;
  background:linear-gradient(90deg,var(--cyan),var(--primary),var(--pink)); box-shadow:0 0 12px rgba(139,92,246,.7); view-transition-name:prog; }

/* 3. Ánh sáng đi theo chuột trên thẻ kính (JS gán --mx, --my) */
main .glass{ background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.11),transparent 65%); }
main .glass:not(.gborder)::before{ background:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),rgba(216,180,254,.75),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%); }

/* 4. Tạm dừng hiệu ứng chạy liên tục khi khối đó nằm ngoài màn hình (đỡ giật, đỡ tốn pin) */
.off, .off::before, .off::after, .off *, .off *::before, .off *::after{ animation-play-state:paused !important; }

/* 5. Nút chat: vòng sáng lan ra nhẹ */
.fab a, .fab button{ position:relative; transition:translate .45s var(--ease-spring), box-shadow .3s; }
.fab a:hover, .fab button:hover{ translate:0 -3px; }
.fab .bot::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(236,72,153,.7); pointer-events:none; animation:ring 2.8s var(--ease-out) infinite; }
@keyframes ring{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.65); opacity:0; } }
.fab{ view-transition-name:fab; } .sticky{ view-transition-name:sticky; }

/* 6. Chuyển trang: trang cũ mờ đi, trang mới trượt lên (Chrome, Edge, Safari mới) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vtOut .28s var(--ease-io) both; }
  ::view-transition-new(root){ animation:vtIn .6s var(--ease-out) .06s both; }
}
@keyframes vtOut{ to{ opacity:0; transform:scale(.985); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(16px); } }

/* ===== AI AGENTS dựng trang (con trỏ + khung chọn kiểu Figma) ===== */
/* lớp phủ bằng đúng kích thước trang; overflow:hidden để con trỏ bay từ mép vào không làm trang rộng ra (cuộn ngang) */
#app{ position:relative; }
.agents{ position:absolute; inset:0; overflow:hidden; z-index:52; pointer-events:none; }
.ag{ position:absolute; left:0; top:0; display:flex; align-items:flex-start; gap:2px; will-change:transform; transition:opacity .4s var(--ease-out); }
.ag.rest{ opacity:0; }
.ag svg{ display:block; flex:none; }
.ag span{ margin-top:16px; padding:1px 8px; border-radius:999px; font:600 11px/1.6 var(--sans); color:#07070c; white-space:nowrap; }
/* khung chọn: viền màu của agent, 4 ô vuông ở góc, tên agent phía trên, kích thước phía dưới */
.sel{ position:absolute; left:0; top:0; width:0; height:0; border:1.5px solid var(--c); background:color-mix(in srgb,var(--c) 7%,transparent);
  box-shadow:0 0 24px color-mix(in srgb,var(--c) 35%,transparent); transition:opacity .45s var(--ease-out); }
.sel.bye{ opacity:0; }
.sel i{ position:absolute; width:7px; height:7px; background:#fff; border:1.5px solid var(--c); border-radius:1px; }
.sel i:nth-child(1){ left:-4.5px; top:-4.5px; } .sel i:nth-child(2){ right:-4.5px; top:-4.5px; }
.sel i:nth-child(3){ left:-4.5px; bottom:-4.5px; } .sel i:nth-child(4){ right:-4.5px; bottom:-4.5px; }
.sel b{ position:absolute; left:-1.5px; bottom:calc(100% + 5px); padding:1px 7px; border-radius:4px; background:var(--c); color:#07070c; font:600 11px/1.6 var(--sans); white-space:nowrap; }
.sel em{ position:absolute; left:50%; top:calc(100% + 7px); translate:-50% 0; padding:1px 7px; border-radius:4px; background:var(--c); color:#07070c; font:500 10.5px/1.6 var(--mono); font-style:normal; white-space:nowrap; opacity:0; transition:opacity .25s; }
.sel.done em{ opacity:1; }
/* phần do agent dựng: ẩn bằng độ mờ (không dịch chuyển) để khung chọn ôm đúng vị trí, rồi "hiện hình" */
.reveal.bld{ transform:none; }
.bld{ opacity:0; }
.bld.in, .bld.built{ opacity:1; animation:built .7s var(--ease-out) both; }
@keyframes built{ from{ opacity:0; transform:scale(.985); filter:brightness(1.8); } }
.hero .bld{ opacity:0; animation:none; }
.hero .bld.built{ opacity:1; animation:rise .8s var(--ease-out) both; }
.hero h1 .grad.bld.built{ animation:rise .8s var(--ease-out) both, shine 10s linear 1.2s infinite; }
.hero .stage.bld.built{ animation:stageIn 1.3s var(--ease-out) both; }
.hero .stat.bld.built{ animation:pop .8s var(--ease-spring) both, floaty 4s ease-in-out 1s infinite; }
.hero .small.bld.built{ animation:pop .8s var(--ease-spring) both; }
/* ===== MỖI PHẦN MỘT KIỂU "BAY RA" (data-fx trên <section>) — chạy khi con trỏ AI kéo khung xong =====
   flip: lật 3D dựng lên · pop: bật nảy · rows: trượt ngang · tilt: nằm nghiêng rồi dựng thẳng · cover: băng chuyền 3D
   zoom: thu từ to về · wipe: quét mở · drop: rơi xuống nảy · skew: nghiêng rồi thẳng · curtain: mở như rèm */
main{ overflow-x:clip; } /* thẻ bay ngang không làm trang rộng ra */
@keyframes fxFlip{ from{ opacity:0; transform:perspective(900px) translateY(40px) rotateX(-58deg); } }
@keyframes fxSlideL{ from{ opacity:0; transform:translate3d(-110px,0,0) rotate(-2deg); } }
@keyframes fxSlideR{ from{ opacity:0; transform:translate3d(110px,0,0) rotate(2deg); } }
@keyframes fxPop{ from{ opacity:0; transform:scale(.68); } }
@keyframes fxTilt{ from{ opacity:0; transform:perspective(1200px) translateY(70px) rotateX(34deg) scale(.94); } }
@keyframes fxCoverL{ from{ opacity:0; transform:perspective(1000px) translateX(-140px) rotateY(40deg) scale(.88); } }
@keyframes fxCoverM{ from{ opacity:0; transform:perspective(1000px) translateY(80px) scale(.86); } }
@keyframes fxCoverR{ from{ opacity:0; transform:perspective(1000px) translateX(140px) rotateY(-40deg) scale(.88); } }
@keyframes fxZoom{ from{ opacity:0; transform:scale(1.14); } }
@keyframes fxWipe{ from{ opacity:0; transform:translateX(-24px); clip-path:inset(-80px 100% -80px -80px); } to{ clip-path:inset(-80px -80px -80px -80px); } }
@keyframes fxDrop{ from{ opacity:0; transform:translate3d(0,-100px,0) rotate(-3deg); } }
@keyframes fxSkew{ from{ opacity:0; transform:translate3d(0,70px,0) skewY(7deg); } }
@keyframes fxCurtain{ from{ opacity:0; transform:scaleX(.5) scaleY(.85); } }
[data-fx="flip"] .bld.in{ animation:fxFlip .95s var(--ease-out) both; transform-origin:50% 100%; }
[data-fx="flip"] .svrow > :nth-child(odd).bld.in{ animation-name:fxSlideL; }
[data-fx="flip"] .svrow > :nth-child(even).bld.in{ animation-name:fxSlideR; }
[data-fx="pop"] .bld.in{ animation:fxPop .85s var(--ease-back) both; }
[data-fx="rows"] .bld.in{ animation:fxSlideR .9s var(--ease-out) both; }
[data-fx="rows"] .stick .bld.in, [data-fx="rows"] .cols > :first-child .bld.in, [data-fx="rows"] .book > :first-child.bld.in{ animation-name:fxSlideL; }
[data-fx="tilt"] .bld.in{ animation:fxTilt 1.15s var(--ease-out) both; transform-origin:50% 0; }
[data-fx="cover"] .bld.in{ animation:fxCoverM .95s var(--ease-out) both; }
[data-fx="cover"] .grid > :nth-child(3n+1).bld.in{ animation-name:fxCoverL; }
[data-fx="cover"] .grid > :nth-child(3n).bld.in{ animation-name:fxCoverR; }
[data-fx="zoom"] .bld.in{ animation:fxZoom 1s var(--ease-out) both; }
[data-fx="wipe"] .bld.in{ animation:fxWipe 1.1s var(--ease-out) both; }
[data-fx="wipe"] .tloop.bld.in{ animation-name:fxSlideR; }
[data-fx="slide"] .bld.in{ animation:fxSlideL .9s var(--ease-out) both; }
[data-fx="slide"] .tst > :nth-child(even).bld.in{ animation-name:fxSlideR; }
[data-fx="drop"] .bld.in{ animation:fxDrop .95s var(--ease-back) both; }
[data-fx="drop"] .plan.hot.bld.in{ animation-name:fxPop; }
[data-fx="skew"] .bld.in{ animation:fxSkew .9s var(--ease-out) both; transform-origin:0 100%; }
[data-fx="curtain"] .bld.in, .marq.bld.in{ animation:fxCurtain 1s var(--ease-out) both; }
/* tiêu đề mục: chữ hiện theo hướng khác nhau tuỳ phần (tiêu đề không "bay" cả khối, chỉ từng chữ) */
[data-fx] .sec-h .bld.in{ animation:built .7s var(--ease-out) both; }
[data-fx="drop"] .split .w{ transform:translate3d(0,-.6em,0); }
[data-fx="rows"] .split .w, [data-fx="wipe"] .split .w, [data-fx="slide"] .split .w{ transform:translate3d(-.6em,0,0); }
[data-fx="pop"] .split .w, [data-fx="zoom"] .split .w{ transform:scale(.55); }
[data-fx="flip"] .split .w, [data-fx="tilt"] .split .w{ transform:perspective(400px) rotateX(-85deg); transform-origin:50% 100%; }
[data-fx="cover"] .split .w, [data-fx="curtain"] .split .w{ transform:translate3d(0,.8em,0) scale(.9); }
[data-fx] .split.in .w{ transform:none; }

/* ===== CHUYỂN ĐỘNG THEO CUỘN: JS gán --sp từ 1 (phần đó ở dưới màn hình) → 0 (giữa) → -1 (đã lên trên) =====
   dùng translate/rotate/scale riêng (không đụng transform của hiệu ứng bay ra, không đụng hiệu ứng rê chuột) */
main section[data-fx] .sec-h{ translate:calc(var(--sp,0) * 36px) 0; }
[data-fx="flip"] .bento > :nth-child(even){ translate:0 calc(var(--sp,0) * 26px); }
[data-fx="pop"] .strip > div:nth-child(even) b{ translate:0 calc(var(--sp,0) * 14px); }
[data-fx="rows"] .pr-item .no{ translate:calc(var(--sp,0) * -46px) 0; }
[data-fx="tilt"] .wrap{ perspective:1600px; }
[data-fx="tilt"] .console{ transform-origin:50% 0; rotate:x calc(max(var(--sp,0), 0) * 22deg); backdrop-filter:none; -webkit-backdrop-filter:none; }
[data-fx="cover"] .case .cov b{ translate:0 calc(var(--sp,0) * 26px); }
[data-fx="wipe"] .tfeat q{ display:block; translate:calc(var(--sp,0) * 26px) 0; }
[data-fx="drop"] .plan.hot{ translate:0 calc(var(--sp,0) * -28px); }
[data-fx="curtain"] .band{ scale:calc(1 - max(var(--sp,0), 0) * .1); }

/* thanh trạng thái phía dưới (màn hình rộng) */
.agbar{ position:fixed; z-index:53; left:50%; bottom:24px; display:none; align-items:center; gap:12px; height:40px; padding:0 16px 0 14px; border-radius:999px; pointer-events:none;
  background:rgba(14,12,24,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1); box-shadow:0 12px 40px rgba(0,0,0,.45);
  font:500 12.5px/1 var(--mono); color:var(--muted); white-space:nowrap; opacity:0; translate:-50% 14px; transition:opacity .4s var(--ease-out), translate .6s var(--ease-spring); view-transition-name:agbar; }
@media (min-width:1200px){ .agbar{ display:flex; } }
.agbar.on{ opacity:1; translate:-50% 0; }
.agbar .dots{ display:flex; }
.agbar .dots i{ width:11px; height:11px; border-radius:50%; margin-left:-4px; border:2px solid #0e0c18; }
.agbar .dots i:first-child{ margin-left:0; }
/* nút "Bỏ qua" khi trang đang tự cuộn giới thiệu: góc phải, ngay dưới thanh menu */
.tourskip{ position:fixed; z-index:61; right:16px; top:calc(var(--hh) + env(safe-area-inset-top,0px) + 12px); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 18px;
  border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(14,12,24,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.4);
  color:var(--text); font:600 14px/1 var(--sans); cursor:pointer; opacity:0; translate:0 -8px; transition:opacity .4s var(--ease-out), translate .6s var(--ease-spring), background .3s; }
.tourskip[hidden]{ display:none; }
.tourskip.on{ opacity:1; translate:0 0; }
.tourskip:hover{ background:rgba(44,36,72,.92); }
@media (min-width:768px){ .tourskip{ right:24px; } }

/* ===== HÌNH DẠNG THẺ v4 (bạn chọn từ _goi-y/hinh-dang-the.html; mình chọn hình hợp nhất cho từng loại) =====
   Case study + Blog: khoét góc + nút tròn · Dịch vụ, ô ứng dụng, hộp liên hệ: khung ngắm HUD · Bảng giá: góc vát + viền sáng chạy
   Quy trình (trang Dịch vụ): hình bình hành · Giá trị (Về chúng tôi): lục giác lật · Đội ngũ: ảnh Polaroid
   Máy tính ROI: biên nhận răng cưa · Hộp giá dịch vụ: tấm vé nghiêng 3D · Kết quả case: cửa sổ dòng lệnh · Lời khách hàng: bong bóng chat
   Quy ước: thẻ có .reveal KHÔNG khai báo transition riêng (dùng transition của .reveal); hover chỉ dùng translate/scale/rotate riêng, không dùng transform. */

/* -- Case study + Blog: khoét góc dưới phải, nút tròn nằm trong chỗ khoét; rê chuột: bìa phóng to, số đẩy lên, mô tả trượt ra, nút xoay đổi màu -- */
main .case.glass{ background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; }
main .case.glass::before{ display:none; }
.case{ --n:68px; --r:18px; position:relative; display:block; height:400px; color:var(--text); }
@media (min-width:768px){ .case{ height:440px; } }
.case .sh{ position:absolute; inset:0; border-radius:28px; overflow:hidden; isolation:isolate; background:#100e1d;
  --m:linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--n) - var(--r)) no-repeat,
    linear-gradient(#000 0 0) left 0 bottom var(--n) / calc(100% - var(--r)) var(--r) no-repeat,
    radial-gradient(circle at 0 0,#000 calc(var(--r) - .5px),#0000 var(--r)) right 0 bottom var(--n) / var(--r) var(--r) no-repeat,
    linear-gradient(#000 0 0) left 0 bottom 0 / calc(100% - var(--n) - var(--r)) var(--n) no-repeat,
    linear-gradient(#000 0 0) right var(--n) bottom var(--r) / var(--r) calc(var(--n) - var(--r)) no-repeat,
    radial-gradient(circle at 0 0,#000 calc(var(--r) - .5px),#0000 var(--r)) right var(--n) bottom 0 / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 100%,#0000 calc(var(--r) - .5px),#000 var(--r)) right calc(var(--n) - var(--r)) bottom calc(var(--n) - var(--r)) / var(--r) var(--r) no-repeat;
  -webkit-mask:var(--m); mask:var(--m); }
.case .sh::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.12),transparent 60%); }
.case .cov{ position:absolute; inset:0; z-index:-1; aspect-ratio:auto; display:block; transition:scale .9s var(--ease-out), filter .5s; }
.case:hover .cov{ scale:1.08; }
.case .cov small{ left:18px; top:18px; }
.case .cov b{ position:absolute; left:0; right:0; top:20%; text-align:center; font-size:56px; transition:translate .6s var(--ease-spring); }
@media (min-width:768px){ .case .cov b{ font-size:64px; } }
.case:hover .cov b, [data-fx] .case:hover .cov b{ scale:1; translate:0 calc(var(--sp,0) * 26px - 20px); }
.post-c .cov .emo{ font-size:72px; top:16%; }
.case .bd{ position:absolute; z-index:1; left:0; right:0; bottom:0; padding:80px calc(var(--n) + 8px) 20px 22px;
  background:linear-gradient(to top,rgba(8,7,16,.96) 45%,rgba(8,7,16,.55) 72%,transparent); }
.case h3{ margin:6px 0 0; font-size:19px; line-height:1.28; }
.case .more{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s var(--ease-out), opacity .4s; }
.case .more > div{ overflow:hidden; }
.case:hover .more, .case:focus-visible .more{ grid-template-rows:1fr; opacity:1; }
@media (hover:none){ .case .more{ grid-template-rows:1fr; opacity:1; } }
.post-c .dt{ margin:8px 0 0; font-size:13px; }
.case .go{ position:absolute; right:0; bottom:0; width:calc(var(--n) - 10px); height:calc(var(--n) - 10px); border-radius:50%; display:grid; place-items:center;
  color:#fff; background:#1b1830; border:1px solid rgba(255,255,255,.12); transition:rotate .6s var(--ease-spring), background-color .3s, color .3s, border-color .3s; }
.case:hover .go, .case:focus-visible .go{ rotate:-45deg; background-color:var(--c1,#8b5cf6); border-color:transparent; color:#0a0914; }

/* -- Khung ngắm HUD: không viền kín, chỉ 4 góc ngoặc; rê chuột góc bung ra + đèn rọi chấm sáng (dịch vụ, ô ứng dụng, hộp liên hệ) -- */
main .svc.glass, main .sv.glass, main .hudc.glass{ border-radius:4px; border-color:rgba(255,255,255,.05); background-color:rgba(255,255,255,.025); box-shadow:none;
  background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),color-mix(in srgb,var(--hc,#a78bfa) 16%,transparent),transparent 65%); }
main .svc.glass::before, main .sv.glass::before, main .hudc.glass::before{ display:none; }
.svc > :not(i), .sv > :not(i), .hudc > :not(i){ position:relative; }
.hud{ --l:20px; --t:2px; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(var(--hc,#a78bfa) 0 0) left top,linear-gradient(var(--hc,#a78bfa) 0 0) left top,linear-gradient(var(--hc,#a78bfa) 0 0) right top,linear-gradient(var(--hc,#a78bfa) 0 0) right top,
    linear-gradient(var(--hc,#a78bfa) 0 0) left bottom,linear-gradient(var(--hc,#a78bfa) 0 0) left bottom,linear-gradient(var(--hc,#a78bfa) 0 0) right bottom,linear-gradient(var(--hc,#a78bfa) 0 0) right bottom;
  background-repeat:no-repeat;
  background-size:var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l),var(--l) var(--t),var(--t) var(--l);
  transition:inset .5s var(--ease-spring), background-size .5s var(--ease-spring); }
.svc:hover .hud, .hudc:hover .hud{ inset:-8px; --l:38px; }
.sv .hud{ --l:12px; } .sv:hover .hud{ inset:-5px; --l:22px; }
.hdots{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; background-image:radial-gradient(rgba(255,255,255,.45) 1px,transparent 1.6px); background-size:14px 14px;
  -webkit-mask-image:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%); mask-image:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%); }
.svc:hover .hdots, .sv:hover .hdots, .hudc:hover .hdots{ opacity:1; }
.svc .hud-n{ position:absolute; right:20px; top:22px; font:500 12px/1 var(--mono); letter-spacing:.06em; color:var(--hc); }

/* -- Bảng giá: góc vát 2 góc; viền là lớp ::before, nền là ::after (cùng hình vát). Gói nổi bật có vệt sáng chạy quanh viền, gói khác chạy khi rê chuột -- */
.plan{ --cut:26px; --poly:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  border-radius:0; clip-path:var(--poly); isolation:isolate; }
main .plan.glass{ background:none; border:0; box-shadow:none; }
main .plan.glass::before{ content:""; position:absolute; inset:0; z-index:-2; padding:0; border-radius:0; -webkit-mask:none; mask:none; animation:none;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.07) 40%,rgba(255,255,255,.14)); }
main .plan.glass:hover::before, main .plan.glass.hot::before{
  background:conic-gradient(from var(--ang,0deg),transparent 0 58%,rgba(167,139,250,.9) 76%,#fff 86%,rgba(236,72,153,.9) 92%,transparent 100%),linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));
  animation:ang 3.2s linear infinite; }
main .plan.glass.hot::before{ animation-duration:4.5s; }
.plan::after{ content:""; position:absolute; inset:1.5px; z-index:-1; clip-path:var(--poly); pointer-events:none;
  background:linear-gradient(90deg,var(--primary),var(--pink)) var(--cut) 0 / 32% 3px no-repeat,
    radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.14),transparent 65%), #110f1f; }
.plan.hot::after{ background:linear-gradient(90deg,var(--primary),var(--pink)) var(--cut) 0 / 32% 3px no-repeat,
    radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.16),transparent 65%), linear-gradient(180deg,rgba(139,92,246,.2),transparent 55%), #130f24; }
.plan:hover{ translate:0 -6px; }

/* -- Quy trình 4 bước (trang Dịch vụ): hình bình hành khớp nhau như mảnh ghép; rê vào 1 bước thì bước đó nổi lên, bước khác mờ đi -- */
.step{ --sl:26px; --poly:polygon(var(--sl) 0,100% 0,calc(100% - var(--sl)) 100%,0 100%); border-radius:0; clip-path:var(--poly); isolation:isolate; padding:26px calc(var(--sl) + 16px); }
main .step.glass{ background:none; border:0; box-shadow:none; }
main .step.glass::before{ content:""; position:absolute; inset:0; z-index:-2; padding:0; border-radius:0; -webkit-mask:none; mask:none;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 45%,rgba(255,255,255,.16)); }
.step::after{ content:""; position:absolute; inset:1.5px; z-index:-1; clip-path:var(--poly); pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.16),transparent 65%), linear-gradient(160deg,rgba(139,92,246,.14),transparent 55%), #110f1f; }
.steps:has(.step:hover) .step:not(:hover){ opacity:.45; scale:.97; }
.step:hover{ scale:1.03; z-index:1; }
@media (min-width:768px){ .steps{ column-gap:0; } .step{ margin-inline:-8px; } .step:first-child{ margin-left:0; } .step:last-child{ margin-right:0; } }

/* -- Giá trị (Về chúng tôi): lục giác xếp so le như tổ ong; rê chuột (hoặc Tab) lật 3D xem mô tả. Điện thoại: mô tả hiện luôn ở mặt trước -- */
.hexes{ align-items:start; }
@media (min-width:768px){ .hexes > :nth-child(2){ margin-top:64px; } }
.hex{ perspective:1100px; width:100%; max-width:420px; margin-inline:auto; aspect-ratio:1.1547; outline:none; }
.hex .flip{ position:relative; height:100%; transform-style:preserve-3d; transition:transform .8s var(--ease-spring); }
.hex:hover .flip, .hex:focus-visible .flip{ transform:rotateY(180deg); }
.hex .face{ --hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  clip-path:var(--hex); -webkit-backface-visibility:hidden; backface-visibility:hidden; background:linear-gradient(150deg,var(--c1),rgba(255,255,255,.12) 55%,var(--c1)); }
.hex .face::before{ content:""; position:absolute; inset:2px; clip-path:var(--hex); }
.hex .front::before{ background:radial-gradient(70% 60% at 50% 12%,color-mix(in srgb,var(--c1) 70%,transparent),#110f1f 72%); }
.hex .back{ transform:rotateY(180deg); } .hex .back::before{ background:#110f1f; }
.hex .ct{ position:relative; padding:0 19%; display:grid; justify-items:center; gap:8px; }
.hex .n{ font:700 44px/1 var(--display); letter-spacing:-.03em; background:linear-gradient(180deg,#fff,rgba(255,255,255,.35)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hex h3{ margin:0; font-size:22px; line-height:1.2; }
.hex .back .n{ font-size:22px; } .hex .back p{ margin:0; color:var(--text); font-size:16px; line-height:1.5; }
.hex .front .ds{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0; }
@media (hover:none){ .hex .front .ds{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; color:var(--muted); font-size:14.5px; line-height:1.5; } .hex:hover .flip{ transform:none; } }

/* -- Đội ngũ: ảnh Polaroid dán băng keo, hơi nghiêng; rê chuột ảnh thẳng lại, 2 ảnh phía sau xoè ra -- */
.pols{ align-items:start; }
@media (max-width:767px){ .pols{ grid-template-columns:1fr 1fr; gap:14px; } }
.pol{ position:relative; margin:0; padding:22px 8px 8px; }
.pol .bk{ position:absolute; inset:22px 8px 8px; border-radius:4px; box-shadow:0 12px 30px rgba(0,0,0,.4); transition:transform .6s var(--ease-spring);
  background:linear-gradient(color-mix(in srgb,var(--c1) 55%,#222) 0 0) 12px 12px / calc(100% - 24px) 66% no-repeat, #e4e1ee; }
.pol .b1{ transform:rotate(4deg); } .pol .b2{ transform:rotate(-5deg); background-color:#d3cfe0; }
.pol .sheet{ position:relative; padding:12px 12px 0; border-radius:4px; background:#f3f1f8; box-shadow:0 24px 50px rgba(0,0,0,.5);
  rotate:var(--rot,-2deg); transition:rotate .6s var(--ease-spring), translate .6s var(--ease-spring); }
.pol .tape{ position:absolute; z-index:2; left:50%; top:-12px; width:88px; height:26px; translate:-50% 0; rotate:-3deg; background:rgba(255,255,255,.42); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.pol .pic{ aspect-ratio:1; display:grid; place-items:center; font:700 64px/1 var(--display); color:#fff; }
.pol figcaption{ padding:12px 4px 16px; color:#1c1930; }
.pol figcaption b{ display:block; font:italic 400 21px/1.2 var(--serif); }
.pol figcaption span{ display:block; margin-top:4px; font-size:13.5px; line-height:1.4; color:#55506b; }
.pol:hover .sheet{ rotate:0deg; translate:0 -8px; }
.pol:hover .b1{ transform:translate(26px,-4px) rotate(9deg); } .pol:hover .b2{ transform:translate(-26px,-2px) rotate(-10deg); }
@media (max-width:767px){ .pol .pic{ font-size:44px; } .pol .tape{ width:60px; height:22px; } .pol figcaption{ padding:10px 2px 12px; } .pol figcaption b{ font-size:17px; } .pol figcaption span{ font-size:12.5px; } }

/* -- Máy tính ROI: kết quả in ra như tờ biên nhận từ khe máy, mép dưới răng cưa -- */
.rcw{ position:relative; align-self:start; }
.rcw .slot{ display:block; position:relative; z-index:2; height:16px; border-radius:10px; background:linear-gradient(#2c2844,#16142a); box-shadow:inset 0 -4px 6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07); }
.roi .out{ --z:9px; position:relative; margin:-8px 12px 0; border:0; border-radius:0; padding:24px 22px calc(var(--z) + 26px); justify-content:flex-start;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 28px),linear-gradient(135deg,rgba(139,92,246,.16),rgba(236,72,153,.08)),#1a1730;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(var(--z) * 2) 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(var(--z) * 2) 100%;
  transition:translate .6s var(--ease-spring); }
.rcw:hover .out{ translate:0 5px; }
.roi .out .rc-h{ display:block; font:700 12px/1.4 var(--mono); letter-spacing:.1em; color:var(--text); text-align:center; padding-bottom:14px; margin-bottom:18px; border-bottom:1.5px dashed rgba(255,255,255,.22); }
.roi .out .hrs{ margin-top:14px; padding-bottom:18px; border-bottom:3px double rgba(255,255,255,.22); }

/* -- Hộp giá dịch vụ: tấm vé có 2 lỗ bấm + đường nét đứt; rê chuột vé nghiêng 3D theo chuột (bindTilt) -- */
main .tk.glass{ background:none; border:0; box-shadow:none; }
main .tk.glass::before{ display:none; }
.tk{ perspective:900px; }
.tk .tilt{ --y:178px; position:relative; border-radius:22px; overflow:hidden; background:#1a1730;
  -webkit-mask:radial-gradient(circle 14px at 0 var(--y),#0000 97%,#000),radial-gradient(circle 14px at 100% var(--y),#0000 97%,#000);
  mask:radial-gradient(circle 14px at 0 var(--y),#0000 97%,#000),radial-gradient(circle 14px at 100% var(--y),#0000 97%,#000);
  -webkit-mask-composite:source-in; mask-composite:intersect; transition:rotate .5s var(--ease-spring); }
.tk .tilt.on{ transition:rotate .12s linear; }
.tk .tilt::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 45%); }
.tk .tilt.on::after{ opacity:1; }
.tk .stub{ height:var(--y); padding:22px 24px; display:flex; flex-direction:column; background:radial-gradient(120% 110% at 85% 0%,rgba(139,92,246,.6),rgba(76,29,149,.35) 60%,#1a1730); }
.tk .ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.14); }
.tk .stub p{ margin:auto 0 0; font-size:14px; color:rgba(255,255,255,.78); }
.tk .stub b{ font:700 36px/1.1 var(--display); letter-spacing:-.02em; }
.tk .perf{ position:absolute; left:22px; right:22px; top:calc(var(--y) - 1px); border-top:2px dashed rgba(255,255,255,.25); }
.tk .tkb{ padding:22px 24px 24px; }
.tk .tkb p{ margin:0; font-size:14px; } .tk .tkb b{ display:block; }
.code{ display:block; width:120px; height:30px; opacity:.4; margin:20px auto 0;
  background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px); }

/* -- Kết quả case study: cửa sổ dòng lệnh, AI agent in báo cáo trước → sau; rê chuột chữ gõ lại từng dòng -- */
main .term.glass{ background:#0c0b16; border-color:rgba(255,255,255,.1); box-shadow:0 30px 70px -30px rgba(0,0,0,.6); }
main .term.glass::before{ display:none; }
.term{ border-radius:16px; overflow:hidden; margin-top:24px; font-family:var(--mono); }
.term .tbar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(255,255,255,.045); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
.term .tbar i{ flex:none; width:11px; height:11px; border-radius:50%; background:#ff5f57; } .term .tbar i:nth-child(2){ background:#febc2e; } .term .tbar i:nth-child(3){ background:#28c840; }
.term .tbar span{ margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.term .tbody{ padding:18px 16px 14px; font-size:13px; line-height:1.85; color:#d4d2e4; }
@media (min-width:768px){ .term .tbody{ padding:22px 24px 16px; } }
.term .tln{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d4d2e4; font-size:13px; }
.term .tp{ color:var(--pink); } .term .tg{ color:#4ade80; } .term .tc{ color:var(--dim); }
.kpi{ grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0; }
@media (min-width:768px){ .kpi{ grid-template-columns:repeat(4,1fr); gap:12px; } }
.kpi > div{ border-radius:10px; padding:14px; background:rgba(255,255,255,.035); border:1px solid var(--line); }
.kpi small{ font-size:12px; line-height:1.45; }
.kpi .ba{ padding:0; border-radius:0; }
.kpi s, .kpi .ba .muted{ font-family:var(--display); }
.term .caret{ display:inline-block; width:8px; height:15px; vertical-align:-2px; background:var(--pink); }
.term:hover .caret{ animation:tmBlink 1s steps(1) infinite; }
.term:hover .tln{ animation:tmType .5s steps(28,end) both; animation-delay:calc(var(--i,0) * .25s); }
.term:hover .kpi > div{ animation:tmUp .5s var(--ease-out) both; animation-delay:calc(var(--i,0) * .15s + .2s); }
@keyframes tmType{ from{ clip-path:inset(0 100% 0 0); } }
@keyframes tmBlink{ 50%{ opacity:0; } }
@keyframes tmUp{ from{ opacity:0; translate:0 10px; } }

/* -- Lời khách hàng: bong bóng chat, đuôi chỉ xuống ảnh đại diện (Trang chủ, Về chúng tôi, chi tiết case) -- */
.t{ display:flex; flex-direction:column; gap:14px; }
.tst .t, .tloop .t{ padding:0; border-radius:0; gap:14px; }
.tloop .t{ background:none; padding-bottom:4px; }
.qbub{ position:relative; flex:1; margin:0; padding:22px 22px 24px; border-radius:24px 24px 24px 6px; transition:translate .5s var(--ease-spring); }
main .qbub.glass{ background-color:#161428; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.qbub::after{ content:""; position:absolute; left:22px; bottom:-8px; width:16px; height:16px; background:#161428; border-right:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); border-bottom-right-radius:3px; transform:rotate(45deg); }
.t .who{ margin-top:4px; padding-left:8px; }
.t:hover .qbub{ translate:0 -4px; }