/* Anchor landing — token cùng tên với src/theme/tokens.ts (pack × chế độ × màu nhấn), đổi bằng data-* trên . */ :root { --ink: #0b2e45; --ink-muted: #4f6b7e; --paper: #eaf2f5; --surface: #ffffff; --rule: #c5d6df; --verified: #1f6b4f; --inferred: #8f5b00; --unsupported: #9b2f45; --highlighter: rgba(246, 233, 107, 0.45); --accent: #e0623b; --on-accent: #1e0f08; --display: 'Sora', 'Be Vietnam Pro', sans-serif; --ui: 'Be Vietnam Pro', system-ui, sans-serif; --serif: 'Source Serif 4', Georgia, serif; --radius: 16px; --max: 1180px; } body[data-theme="muc-giay"] { --ink:#1b2440; --ink-muted:#5e6a84; --paper:#f6f1e7; --surface:#fffdf8; --rule:#d9d0bf; --display:'Source Serif 4', Georgia, serif; --radius:12px; } body[data-theme="den-khuya"] { --ink:#1a1f2e; --ink-muted:#5c6273; --paper:#f3eee4; --surface:#fbf8f1; --rule:#d6cfc2; --display:'Source Serif 4', Georgia, serif; --radius:14px; } body[data-theme="phan-bang"] { --ink:#1e3a34; --ink-muted:#4f6b62; --paper:#eef3ec; --surface:#ffffff; --rule:#c8d8d0; --radius:22px; } body[data-mode="dark"][data-theme="hai-trinh"] { --ink:#e3eef4; --ink-muted:#93a9b8; --paper:#0a1a26; --surface:#10273a; --rule:#23405a; --verified:#5bc094; --inferred:#e0a83a; --unsupported:#e27a90; } body[data-mode="dark"][data-theme="muc-giay"] { --ink:#efe8da; --ink-muted:#a89f8f; --paper:#171512; --surface:#201d18; --rule:#3a342b; --verified:#5bc094; --inferred:#e0a83a; --unsupported:#e27a90; } body[data-mode="dark"][data-theme="den-khuya"] { --ink:#ede6d6; --ink-muted:#9aa3b5; --paper:#0f1420; --surface:#171e2c; --rule:#2a3345; --verified:#5bc094; --inferred:#f2b450; --unsupported:#e27a90; --highlighter: rgba(242,180,80,.3); } body[data-mode="dark"][data-theme="phan-bang"] { --ink:#f7f3e9; --ink-muted:#b9cbc4; --paper:#1e3a34; --surface:#264a42; --rule:#3b5e55; --verified:#9be3b4; --inferred:#f5d76e; --unsupported:#f7a8b8; } body[data-accent="san-ho"] { --accent:#e0623b; --on-accent:#1e0f08; } body[data-mode="dark"][data-accent="san-ho"] { --accent:#f79a78; } body[data-accent="ngoc-bien"] { --accent:#1f7a8c; --on-accent:#ffffff; } body[data-mode="dark"][data-accent="ngoc-bien"] { --accent:#4fb3c4; --on-accent:#05242a; } body[data-accent="lam"] { --accent:#2f6fd6; --on-accent:#ffffff; } body[data-mode="dark"][data-accent="lam"] { --accent:#7fb0ff; --on-accent:#0b1a33; } body[data-accent="tim-than"] { --accent:#5b4db5; --on-accent:#ffffff; } body[data-mode="dark"][data-accent="tim-than"] { --accent:#9d93e6; --on-accent:#16112e; } body[data-accent="hong-dao"] { --accent:#c43d66; --on-accent:#ffffff; } body[data-mode="dark"][data-accent="hong-dao"] { --accent:#f08cab; --on-accent:#2a0f18; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease; } h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; margin: 0; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.05; max-width: 14ch; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; max-width: 22ch; } p { margin: 0; } a { color: inherit; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; } .skip:focus { left: 8px; z-index: 50; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 1.5px solid transparent; transition: transform .15s ease, background-color .35s ease; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; } .btn-lg { min-height: 52px; padding: 0 26px; font-size: 1.05rem; } .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.15rem; } .brand img { border-radius: 10px; } .top-nav { display: none; gap: 22px; margin-left: 24px; } .top-nav a { text-decoration: none; color: var(--ink-muted); font-weight: 500; } .top-nav a:hover { color: var(--ink); } .top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; } .lang { min-width: 44px; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--rule); background: transparent; color: var(--ink); font-weight: 600; } main > section { padding: 64px 20px; max-width: var(--max); margin: 0 auto; } /* ---------- hero ---------- */ .hero { position: relative; display: grid; gap: 40px; padding-top: 48px; overflow: hidden; } .contours { position: absolute; top: -40px; left: -20%; width: 140%; height: min(100%, 900px); color: var(--ink); opacity: .10; pointer-events: none; } .hero-copy { position: relative; display: flex; flex-direction: column; gap: 20px; } .kicker { color: var(--ink-muted); font-weight: 500; } .lede { font-size: 1.15rem; max-width: 46ch; color: var(--ink); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .fine { color: var(--ink-muted); font-size: .95rem; max-width: 50ch; } .hero-demo { position: relative; display: flex; justify-content: center; } .phone { width: 300px; aspect-ratio: 300 / 620; border-radius: 34px; background: var(--ink); padding: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); } .phone-screen { position: relative; height: 100%; border-radius: 26px; background: var(--paper); overflow: hidden; display: flex; flex-direction: column; } .demo-top { padding: 18px 16px 10px; text-align: center; font-weight: 600; font-size: .95rem; background: var(--surface); border-bottom: 1px solid var(--rule); } .demo-body { position: relative; flex: 1; padding: 16px; } .demo-q { color: var(--ink-muted); font-weight: 500; min-height: 3em; font-size: .95rem; } .caret { display: inline-block; width: 2px; height: 1em; background: var(--ink-muted); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .answer { display: flex; gap: 12px; margin-top: 12px; opacity: 0; } .rail { display: flex; flex-direction: column; align-items: flex-end; width: 10px; flex: 0 0 10px; } .rail-line { width: 2px; flex: 1; background: var(--verified); border-radius: 1px; transform-origin: top; } .rail-tick { width: 8px; height: 2px; background: var(--verified); margin-top: 2px; } .answer-text { display: flex; flex-direction: column; gap: 6px; } .answer-text .s { font-family: var(--serif); font-size: .98rem; line-height: 1.5; opacity: 0; } .cite { font-size: .85rem; font-weight: 500; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; width: fit-content; opacity: 0; } .page { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: var(--surface); border-top: 1px solid var(--rule); padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; transform: translateY(105%); } .page-line { height: 8px; border-radius: 2px; background: var(--rule); position: relative; } .page-line.hl::after { content: ""; position: absolute; inset: -3px -4px; background: var(--highlighter); border-radius: 3px; transform: scaleX(0); transform-origin: center; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .ripple { position: absolute; left: 40%; top: 34%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.3); } .demo-mascot { position: absolute; right: 10px; bottom: 10px; width: 64px; height: 64px; } .lan, .m-svg svg { width: 100%; height: 100%; } /* ---------- how ---------- */ .how-grid { display: grid; gap: 32px; } .how-text { display: flex; flex-direction: column; gap: 18px; } .verdicts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .verdicts li { display: grid; grid-template-columns: 14px auto 1fr; gap: 10px; align-items: baseline; } .verdicts b { font-weight: 600; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .v-grounded { background: var(--verified); } .v-inferred { background: var(--inferred); } .v-unsupported { background: var(--unsupported); } .how-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .how-figure img, .shot img { width: min(300px, 80vw); border-radius: 22px; border: 1px solid var(--rule); } figcaption { color: var(--ink-muted); font-size: .95rem; max-width: 34ch; text-align: center; } .refusal { margin-top: 56px; padding: 28px 24px; border-left: 3px solid var(--unsupported); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; display: flex; flex-direction: column; gap: 10px; max-width: 640px; } .refusal-q { color: var(--ink-muted); font-weight: 500; } .refusal-a { font-family: var(--serif); font-size: 1.25rem; } .refusal-a small { display: block; font-family: var(--ui); font-size: .9rem; color: var(--ink-muted); margin-top: 4px; } .refusal-note { color: var(--ink-muted); font-size: .95rem; } /* ---------- study ---------- */ .study { display: flex; flex-direction: column; gap: 56px; } .study-row { display: grid; gap: 28px; align-items: center; } .shot { margin: 0; display: flex; justify-content: center; } .study-text { display: flex; flex-direction: column; gap: 14px; max-width: 48ch; } /* ---------- look ---------- */ .look { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .look-head { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; } .look-controls { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 28px; } .opt { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } legend { padding: 0; color: var(--ink-muted); font-weight: 500; font-size: .95rem; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font-weight: 500; } .chips button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); } .swatches { display: flex; gap: 12px; } .swatches button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; background: var(--sw); } .swatches button[aria-pressed="true"] { border-color: var(--ink); } .mascots { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .mascots button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--radius); border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); text-align: center; } .mascots button[aria-pressed="true"] { border-color: var(--ink); border-width: 2px; } .mascots .m-svg { width: 96px; height: 96px; display: block; } .mascots b { font-family: var(--display); font-size: 1.1rem; } .mascots small { color: var(--ink-muted); font-size: .85rem; } /* ---------- trust ---------- */ .trust { display: flex; flex-direction: column; gap: 18px; } .trust-lede { max-width: 62ch; color: var(--ink-muted); } .metrics { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .metrics > div { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; } .metrics dt { color: var(--ink-muted); font-size: .95rem; } .metrics dd { margin: 0; font-family: var(--display); font-size: 2.6rem; line-height: 1; font-weight: 600; } .metrics dd span { font-size: 1.1rem; margin-left: 4px; color: var(--ink-muted); } .metrics small { color: var(--ink-muted); } .trust-privacy { max-width: 62ch; } /* ---------- get ---------- */ .get { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .get h2 { max-width: 26ch; } .get-mascot { width: 140px; height: 140px; } .stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .store-badge { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 12px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; opacity: .7; cursor: not-allowed; } .foot { max-width: var(--max); margin: 0 auto; padding: 28px 20px 48px; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; color: var(--ink-muted); font-size: .95rem; border-top: 1px solid var(--rule); } .foot nav { display: flex; flex-wrap: wrap; gap: 18px; } /* ---------- clip ---------- */ .clip { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: grid; place-items: center; } .clip[hidden] { display: none; } .clip-stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; } .clip-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 6%; text-align: center; opacity: 0; } .clip-h { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 6vw, 5rem); line-height: 1.05; max-width: 16ch; } .clip-q { color: var(--ink-muted); font-size: clamp(1.2rem, 3vw, 2.2rem); font-weight: 500; } .clip-answer { width: min(720px, 80%); text-align: left; } .clip-answer .s { font-size: clamp(1.2rem, 3vw, 2.4rem); } .clip-refusal { font-family: var(--serif); font-size: clamp(1.6rem, 4.5vw, 3.6rem); } .clip-sub { color: var(--ink-muted); font-size: clamp(1rem, 2.4vw, 1.8rem); } .clip-mascot { width: clamp(160px, 28vw, 360px); height: clamp(160px, 28vw, 360px); } @media (min-width: 760px) { .top { padding: 14px 32px; } .top-nav { display: flex; } main > section { padding: 96px 32px; } .hero { grid-template-columns: 1.15fr 1fr; align-items: center; padding-top: 72px; min-height: min(80vh, 760px); } .how-grid { grid-template-columns: 1.1fr 1fr; align-items: center; } .study-row { grid-template-columns: 1fr 1.2fr; } .study-row.reverse .shot { order: 2; } .look { padding: 64px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .caret { animation: none; } body, .btn { transition: none; } } /* ================= lớp chuyển động (motion.js) ================= */ /* Tiêu đề hero hiện theo từng từ: khung cắt + chữ trượt lên từ dưới. */ .hero h1 .line { display: inline-block; overflow: hidden; vertical-align: top; } .hero h1 .line-inner { display: inline-block; white-space: pre; } /* Vạch neo trước mỗi tiêu đề mục — cùng ngôn ngữ hình với thanh neo của câu trả lời. */ .head-tick { display: block; width: 28px; height: 3px; margin-bottom: 14px; background: var(--accent); border-radius: 2px; transform-origin: left center; } /* Thanh neo của cả trang: dâng theo lượng đã đọc, chấm sáng ở mục đang đứng. */ .page-rail { position: fixed; left: 18px; top: 18vh; bottom: 18vh; width: 2px; background: color-mix(in srgb, var(--rule) 70%, transparent); display: none; z-index: 15; pointer-events: none; border-radius: 2px; } .page-rail-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top center; border-radius: 2px; } .page-rail i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); transition: background-color .25s ease, border-color .25s ease, transform .25s ease; } .page-rail i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.35); } .page-rail i:nth-of-type(1) { top: 0; } .page-rail i:nth-of-type(2) { top: 20%; } .page-rail i:nth-of-type(3) { top: 40%; } .page-rail i:nth-of-type(4) { top: 60%; } .page-rail i:nth-of-type(5) { top: 80%; } .page-rail i:nth-of-type(6) { top: 100%; } /* Thanh màu của khối từ chối tách khỏi border để dựng lên được. */ .refusal { position: relative; border-left: 0; padding-left: 27px; } .refusal-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--unsupported); transform-origin: top center; border-radius: 2px; } /* Thanh trên thu lại khi đã cuộn. */ .top { transition: padding .25s ease, box-shadow .25s ease, background-color .35s ease; } body.scrolled .top { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 6px 24px -20px rgba(0,0,0,.5); } body.scrolled .brand img { transform: scale(.88); } .brand img { transition: transform .25s ease; } /* Linh vật thở nhẹ — dấu hiệu trang còn sống, không đòi ai bấm gì. */ .get-mascot, .demo-mascot { animation: bob 4.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Phản hồi khi chạm: chip, ô màu, thẻ linh vật. */ .chips button, .swatches button, .mascots button, .btn, .store-badge { transition: transform .18s ease, border-color .25s ease, background-color .35s ease, color .35s ease; } .chips button:hover, .mascots button:hover { transform: translateY(-2px); } .swatches button:hover { transform: scale(1.08); } .btn-accent:hover { transform: translateY(-2px); } .how-figure img, .shot img { will-change: transform; } @media (min-width: 1100px) { .page-rail { display: block; } } @media (prefers-reduced-motion: reduce) { .get-mascot, .demo-mascot { animation: none; } .chips button:hover, .mascots button:hover, .swatches button:hover, .btn-accent:hover { transform: none; } .page-rail-fill { transform: scaleY(1); } .head-tick { transform: scaleX(1); } } body.no-motion .page-rail-fill { transform: scaleY(1); } body.no-motion .head-tick { transform: scaleX(1); } /* Thanh đầu trang không bao giờ mang transform: đây là khung app, luôn dính trên màn hình. Chặn cứng ở CSS vì bản JS cũ còn nằm trong cache trình duyệt (Pages đặt max-age=600) từng làm nút "Tải app" đứng lệch 10px so với nút ngôn ngữ (24/9). Không có animation nào cần dịch chúng. */ .top .brand, .top-nav a, .top-actions > * { transform: none !important; }