/* A0-trang-chu-toi.css — lop phu TRANG CHU affworth.com cung tong voi app (lop phu 95/9D): nen den #050505, the #111,
   vien #232323, xanh ngoc #35d49a, chu Inter. Ben Hai, 25/09/2026 (ban demo 1).
   CHI PHU LEN trang goc, khong sua mot dong ma goc, khong doi mot chu nao. Bo file nay ra la ve nguyen ban.
   Nguyen tac: trang goc da dung bien (--bg --panel --line --ink --accent...) nen chi can khai lai bien; ngoai ra chi de
   nhung cho ma goc ghi mau cung (#fff, #f7f6f1, #fdfcf8, rgba(15,122,74,...)) va them hieu ung.
   Khong co @media(prefers-reduced-motion): may tat hieu ung Windows se mat sach chuyen dong (bai hoc 23/09). */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ── 1. Bang mau: y het app (95 + 9D muc 13) ── */
:root{
  --bg:#050505; --panel:#111111; --panel2:#1a1a1a; --line:#232323; --line2:#171717;
  --ink:#fafafa; --ink2:#e4e4e4; --dim:#b3b3b3;
  --accent:#35d49a; --accent2:#0f2a1f; --amber:#f4a362; --amberbg:#1a1a1a; --red:#ef4444;
  --tren-xanh:#06221b;                       /* chu tren nen xanh ngoc (nut chinh), nhu nut Upgrade trong app */
  --aw-spring:cubic-bezier(.2,.9,.25,1);     /* luc lo xo cua app (96 ghi lai bang linear() neu co) */
  color-scheme:dark;
  interpolate-size:allow-keywords;           /* cho <details> mo ra co chuyen dong (Chrome 129+) */
  scroll-behavior:smooth;
  scroll-padding-top:96px;                   /* bam menu #pricing khong bi dau trang de len tieu de */
}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:#fff}
html{scrollbar-color:#2e2e2e var(--bg)}

/* ── 2. Chu: Inter nhu app, so thang cot ── */
body, body *:not(svg):not(svg *){font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
/* so thang cot CHI o cho la so: bat cho ca trang thi Inter gian luon dau gach noi ("break - even", "cost - per - click") */
.numbers,.trust,.plan .amt,.plan .was,.plan .per,.save,.tbl{font-variant-numeric:tabular-nums}
body{background:var(--bg);color:var(--ink);letter-spacing:-.006em}
.lead b,.card p b,.note b,.faq p b,p b{color:var(--ink)}

/* anh sang nen rat nhe, nhu body::before cua app */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(700px 420px at 104% 108%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%)}

/* ── 3. Dai BETA: y het trong app ── */
.aw-beta{background:#0d0d0d;color:var(--ink2);border-bottom:1px solid var(--line)}
.aw-beta .aw-beta-k{background:var(--accent);color:var(--tren-xanh)}
.aw-beta .aw-beta-x{color:var(--dim)}
.aw-beta .aw-beta-x:hover{background:var(--panel2);color:var(--ink)}

/* ── 4. Dau trang: kinh mo toi, dam dan khi cuon (JS gan html.aw-tc-cuon) ── */
header{background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);transition:background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
html.aw-tc-cuon header{background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:0 12px 32px -20px #000}
.logo{color:var(--ink)}
.logo svg rect:first-child{fill:var(--accent)}              /* giong logo trong thanh ben app */
header nav a:not(.btn){position:relative;color:var(--ink2);transition:color .15s cubic-bezier(.4,0,.2,1)}
header nav a:not(.btn):hover{color:var(--ink)}
header nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--aw-spring)}
header nav a.aw-on{color:var(--accent)}
header nav a.aw-on::after{transform:scaleX(1)}

/* ── 5. Nut ── */
.btn{background:var(--accent);border-color:var(--accent);color:var(--tren-xanh);border-radius:10px;
  transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s,border-color .2s,color .2s}
.btn:hover{background:color-mix(in srgb,var(--accent) 86%,#fff);transform:translateY(-1px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 10px 30px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:color-mix(in srgb,var(--panel) 75%,transparent);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:none}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ── 6. Hero: quang xanh ngoc tren dau + luoi mo, cau thu hai to mau, anh app nghieng roi thang lai khi cuon ── */
.hero{position:relative;isolation:isolate;overflow:clip}
.hero::before{content:"";position:absolute;left:50%;top:-300px;width:1300px;height:820px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 5%,transparent) 55%,transparent)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,#fff 4.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#fff 4.5%,transparent) 1px,transparent 1px);
  background-size:56px 56px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 25%,transparent 78%)}
@media(min-width:761px){.hero{padding:92px 0 72px}}
.hero h1{font-size:clamp(30px,4.6vw + 8px,52px);line-height:1.08;letter-spacing:-.04em;max-width:900px;color:var(--ink)}
.hero h1 .aw-tc-nhan{background:linear-gradient(95deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 45%,#fff) 45%,var(--accent) 70%,color-mix(in srgb,var(--accent) 75%,#000) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:awTcAnhKim 2.4s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes awTcAnhKim{from{background-position:100% 0}to{background-position:0 0}}   /* vet sang chay qua MOT lan khi mo trang */
.hero .lead{color:var(--ink2);max-width:680px}
.trust{color:var(--dim)}
.trust span[id]{color:var(--ink);font-weight:600}
.trust::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px;
  animation:awTcNhip 2.2s cubic-bezier(.4,0,.6,1) infinite}                 /* cham "dang song": so o dong nay lay truc tiep tu may chu */
@keyframes awTcNhip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
.hero-shot{margin-top:48px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 50px 120px -50px color-mix(in srgb,var(--accent) 45%,transparent),0 30px 60px -30px #000}
@supports (animation-timeline:view()){
  .hero-shot{transform-origin:50% 0;animation:awTcNghieng linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
}
@keyframes awTcNghieng{from{transform:perspective(1400px) rotateX(16deg) scale(.93);opacity:.55}to{transform:none;opacity:1}}

/* ── 7. Cac muc: nhan nho co vach, duong ke mo 2 dau ── */
.sec{position:relative;border-bottom:0}
.sec::after{content:"";position:absolute;left:50%;bottom:0;width:min(1000px,100%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.sec[style*="border-bottom:0"]::after{display:none}
.sec .eyebrow{display:flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.14em}
.sec .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
h2{font-size:clamp(24px,2.2vw + 10px,34px);line-height:1.2;letter-spacing:-.032em;font-weight:700;color:var(--ink);margin-bottom:14px}
h3{color:var(--ink)}
.sec .lead{color:var(--ink2)}

/* the ghi chu + trich dan */
.note{background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 7%,var(--panel)),var(--panel) 70%);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:12px;color:var(--ink2)}
.quote{color:var(--ink);font-weight:500;border-left-color:var(--accent)}
.note + .quote{margin-top:28px}                                              /* goc: trich dan dinh sat the ghi chu */

/* the so lon */
.numbers div{position:relative;overflow:hidden;border-radius:14px;transition:border-color .2s cubic-bezier(.4,0,.2,1),transform .45s var(--aw-spring)}
.numbers div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 65%,transparent),transparent);opacity:.75}
.numbers div:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));transform:translateY(-2px)}
.numbers > div > b{font-weight:700;font-size:32px;line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.numbers span{color:var(--dim)}
.numbers span b{display:inline;font:inherit;font-weight:700;font-size:inherit;line-height:inherit;letter-spacing:inherit;margin:0;color:var(--ink)}
/* ^ goc: ".numbers b" an ca so NAM TRONG cau (1,808 link chet) -> nhay thanh so to 30px, dung giua cau. Tra no ve chu thuong. */
@media(max-width:760px){.numbers > div > b{font-size:26px}}

/* the 3 cot */
.card{position:relative;overflow:hidden;border-radius:14px;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),transform .45s var(--aw-spring),box-shadow .25s cubic-bezier(.4,0,.2,1)}
.card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));transform:translateY(-3px);box-shadow:0 20px 44px -26px #000}
.card p{color:var(--ink2)}
.card[style*="accent2"]{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 18px 50px -28px color-mix(in srgb,var(--accent) 55%,transparent)}

/* den soi theo chuot (JS ghi --mx/--my) */
.card::after,.numbers > div::after,.plan::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%);
  transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.card:hover::after,.numbers > div:hover::after,.plan:hover::after{opacity:1}

/* bang so sanh + bang cot */
.tblwrap{border-radius:14px}
.tbl th{background:var(--panel2);color:var(--dim);font-weight:600}
.tbl td{border-bottom-color:var(--line)}
.tbl tr:not(:first-child):hover td{background:color-mix(in srgb,var(--panel2) 55%,transparent)}
@media(min-width:701px){
  .cmp td.yes::before,.cmp td.no::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor}
  .cmp td.yes::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
                      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
  .cmp td.no::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/contain no-repeat;
                     mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.6}
  .cmp tr[style] td{background:var(--accent2)}
  .cmp tr[style] td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
}

/* anh chup app */
.shots a{display:block;border-radius:14px}
.shots img{border-color:var(--line);border-radius:14px;box-shadow:0 30px 60px -34px #000;transition:transform .45s var(--aw-spring),border-color .2s,box-shadow .3s}
.shots a:hover img{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:0 36px 70px -34px #000,0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent)}

/* ── 8. Bang gia ── */
.plan{transition:box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s}
.plan:hover{box-shadow:0 22px 50px -30px #000;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.plan .amt{color:var(--ink)}
.plan .tag{align-self:flex-start}                                            /* goc: the la flex doc nen nhan bi keo dai het the */
.plan .tag.muted{background:var(--panel2);color:var(--ink2)}
.plan.hi{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--panel)) 0%,var(--panel) 58%);border-color:var(--accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),0 34px 90px -40px color-mix(in srgb,var(--accent) 60%,transparent)}
.plan.hi:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 38px 100px -36px color-mix(in srgb,var(--accent) 70%,transparent)}
.plan.hi .pop{background:var(--accent);color:var(--tren-xanh);box-shadow:0 6px 20px -4px color-mix(in srgb,var(--accent) 65%,transparent)}
.plan.hi .btn{box-shadow:0 8px 26px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.fform input{background:var(--panel2);border-color:var(--line);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fform input::placeholder{color:#8a8a8a}
.fform input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.fmsg.err{color:#ff8a80}

/* ── 9. Cau hoi: mo ra co chuyen dong, mui ten xoay ── */
.faq details{border-radius:12px;transition:border-color .2s cubic-bezier(.4,0,.2,1),background-color .2s}
.faq details:hover{border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--panel))}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:translateY(-3px) rotate(45deg);transition:transform .45s var(--aw-spring),border-color .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg);border-color:var(--accent)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--aw-spring),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq p{color:var(--ink2)}

/* ── 10. Loi moi cuoi trang + chan trang ── */
.sec[style*="border-bottom:0"]{isolation:isolate;overflow:clip}
.sec[style*="border-bottom:0"]::before{content:"";position:absolute;left:50%;top:50%;width:1000px;height:460px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 14%,transparent),transparent)}
footer{position:relative;color:var(--dim)}
footer::before{content:"";position:absolute;left:50%;top:0;width:min(1000px,100%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
footer a{transition:color .15s}

/* ── 11. Hien dan khi cuon toi (JS gan html.aw-tc-dong + .aw-hien/.aw-ra). Dung "translate" rieng, KHONG dung transform,
      de khong de mat hieu ung nang the khi re chuot (transform) va the gia noi -14px cua goc ── */
html.aw-tc-dong .aw-hien{opacity:0;translate:0 20px;
  transition:opacity .7s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 70ms),translate .8s var(--aw-spring) calc(var(--i,0) * 70ms),
    transform .45s var(--aw-spring),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),background-color .2s}
html.aw-tc-dong .aw-hien.aw-ra{opacity:1;translate:none}