/* SILUNE · landing page Bảng màu và thang chữ lấy nguyên từ lib/core/theme.dart — không tự đặt hex mới. Ngoại lệ duy nhất: --label và --terra-text là bản đậm hơn của muted/terra, vì muted (#8A7C63) chỉ đạt 3.36:1 trên giấy, không đủ 4.5:1 cho chữ nhỏ. Lớp chuyển động mượn kiến trúc của threeui.com/landing-pages/kage-landing-page: reveal .rv→.rv-in có stagger, mặt nạ chữ theo từng từ, chương đánh số, một scene nền gắn theo section. Bỏ hết phần chu sa/lửa/đền 3D — trái ràng buộc "không quá u tối, không icon trang trí" trong direction-approved.md. */ /* ── Chữ · tự host, trang này không gọi ra mạng ─────────────────────────── */ @font-face { font-family: 'Prata'; src: url('assets/fonts/Prata-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Lora'; src: url('assets/fonts/Lora-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Lora'; src: url('assets/fonts/Lora-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'PlexMono'; src: url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } /* ── Token ──────────────────────────────────────────────────────────────── */ :root { --paper: #F1E8D8; --paper2: #F7F1E4; --edge: #D9CDB4; --ink: #2C2822; --ink2: #4A4237; --label: #736750; /* muted, đậm lên tới 4.57:1 */ --faint: #A9A08A; /* chỉ cho vạch kẻ và dấu trang trí, không cho chữ */ --terra: #A9502F; --terra-text: #8F4227; --olive: #6B7050; --bezel: #2C2822; /* viền máy — tối ở cả hai chế độ, như máy thật */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 144px; --wide: 1120px; /* Chậm và không bao giờ bounce. kSlow của app là 420ms cho chuyển màn; trên trang web thì kéo dài hơn vì mắt đang lướt chứ không đang thao tác. */ --slow: 420ms; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); /* expo-out, mượn từ Kage */ --t-rv: 900ms; --t-word: 820ms; } /* Chế độ đêm là MẶC ĐỊNH, và nó do thuộc tính data-theme trên quyết định chứ không phải prefers-color-scheme. Lý do bỏ media query: mặc định phải là đêm bất kể hệ điều hành đặt gì, mà media query thì không thể bị nút bấm ghi đè theo cả hai chiều nếu không viết trùng ba lần. data-theme="dark" viết sẵn trong HTML nên không có cú nháy sáng lúc tải. */ :root[data-theme="dark"] { --paper: #12100A; --paper2: #1B1710; --edge: #332C22; --ink: #EFE2C4; --ink2: #C9BB98; /* muted gốc (#8E8063) đạt 4.91:1 trên nền đêm phẳng, nhưng vũng đèn nâng nền lên và nó rớt xuống 2.4:1. Sáng lên cho tới khi qua 4.5:1 ngay tại chỗ đèn sáng nhất — cùng lý do như --label ban ngày ở trên. */ --label: #A2926F; --faint: #6B604A; --terra: #D4703F; /* viền và vạch — không phải chữ, không cần 4.5:1 */ --terra-text: #E0854C; /* chữ nhỏ màu accent, sáng hơn để qua ngưỡng */ --olive: #8E9668; } :root[data-theme="dark"] .word-fb { color: #EFE2C4; opacity: .20; } /* ── Nền ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; } /* Ngọn đèn. Không phải texture giấy giả — chỉ là ánh sáng rọi lên tờ giấy, đổi chỗ rất chậm theo chương đang đọc. Vẽ trong app.js. */ /* body tự tạo stacking context, canvas nằm ở z-index âm — nó vẽ đè lên nền của body nhưng nằm dưới toàn bộ nội dung. Không cần nâng z-index cho từng phần tử: quy tắc `body > *:not(#scene)` từng đè hỏng position:sticky của header vì nó specific hơn .top. */ body { isolation: isolate; } #scene { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } img { max-width: 100%; display: block; } a { color: var(--terra-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s3); } /* ── Chữ ────────────────────────────────────────────────────────────────── */ h1 { font-family: 'Prata', Georgia, serif; font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; font-weight: 400; margin: 0; } h2 { font-family: 'Prata', Georgia, serif; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.14; font-weight: 400; margin: 0; } h3 { font-family: 'Prata', Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; font-weight: 400; margin: 0; } .label { font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; letter-spacing: 0.19em; text-transform: uppercase; color: var(--label); } .lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink2); max-width: 34em; } p { margin: 0 0 var(--s2); max-width: 36em; } p:last-child { margin-bottom: 0; } section { padding: var(--s7) 0; } section + section { border-top: 1px solid var(--edge); } .head { margin-bottom: var(--s5); } /* ── Đầu chương ─────────────────────────────────────────────────────────── */ /* Màn Home của app dùng mục lục đánh số thay tab bar. Trang này mượn lại đúng cách đánh số đó làm khung kể chuyện. */ .sec-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); } .sec-head .k { font-family: 'PlexMono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--label); white-space: nowrap; } .sec-head .k b { color: var(--terra-text); font-weight: 400; } .sec-head .line { flex: 0 1 96px; height: 1px; background: var(--edge); } /* ── Mục lục trên đầu ───────────────────────────────────────────────────── */ .top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); } @supports not (backdrop-filter: blur(2px)) { .top { background: var(--paper); } } .top .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 60px; } .brand { font-family: 'PlexMono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.34em; color: var(--ink); text-decoration: none; } .top nav { display: flex; gap: var(--s3); margin-left: auto; } .top nav a { font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); text-decoration: none; padding: 12px 4px; /* vùng chạm ≥ 44px cao */ transition: color var(--slow) var(--ease); } .top nav a:hover, .top nav a[aria-current="true"] { color: var(--ink); } @media (max-width: 900px) { .top nav { display: none; } } /* Nút đổi ngôn ngữ */ .lang { display: flex; align-items: center; border: 1px solid var(--edge); } .top nav ~ .lang { margin-left: 0; } .top .lang { margin-left: auto; } .top nav + .lang { margin-left: 0; } .lang button { font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; background: none; border: 0; color: var(--label); padding: 11px 12px; min-height: 44px; cursor: pointer; transition: color var(--slow) var(--ease), background var(--slow) var(--ease); } .lang button[aria-pressed="true"] { color: var(--ink); background: var(--paper2); } .lang button:hover { color: var(--ink); } /* Nút đổi chế độ. Cùng dáng với nút ngôn ngữ — hai nhóm điều khiển cạnh nhau mà khác kiểu thì header đọc ra như hai thứ chắp vá. Một nút thay vì hai: nó không phải bộ chọn, nó là cái công tắc, và nhãn cho biết bấm sẽ ra gì. */ .theme { display: flex; align-items: center; border: 1px solid var(--edge); margin-left: var(--s2); } .theme button { display: flex; align-items: center; gap: 8px; font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: 0; color: var(--label); padding: 11px 12px; min-height: 44px; cursor: pointer; transition: color var(--slow) var(--ease), background var(--slow) var(--ease); } .theme button:hover { color: var(--ink); background: var(--paper2); } /* Vòng tròn khuyết: đầy dần thành trăng non khi sang chế độ đêm. Không phải icon trang trí — nó là chỉ báo trạng thái duy nhất của nút. */ .theme .moon { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; border: 1px solid currentColor; position: relative; overflow: hidden; } .theme .moon::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: currentColor; transform: translateX(-56%); transition: transform var(--slow) var(--ease); } :root[data-theme="dark"] .theme .moon::after { transform: translateX(30%); } @media (max-width: 420px) { .theme .txt { display: none; } } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* Cao đúng một màn và chia ba tầng như Kage: khối chữ trên, tên app khổng lồ ở giữa, chân hero dưới cùng. Cả màn là một cảnh, không phải một đoạn cuộn. */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: var(--s5) 0 var(--s4); } .hero-spacer { flex: 1 1 auto; min-height: var(--s3); } .hero-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s6); align-items: start; } .hero .label { display: block; margin-bottom: var(--s3); } .hero h1 { margin-bottom: var(--s3); } .hero .lede { margin-bottom: 0; } .hero-top .art { max-width: 196px; margin-left: auto; } .hero-top .device { aspect-ratio: auto; height: clamp(160px, 26vh, 270px); border-bottom: 0; border-radius: 34px 34px 0 0; } .hero-top .device img { object-position: top; } /* Ô đo cho tên app. Nó absolute và rỗng: scene.js chỉ đọc getBoundingClientRect để biết đặt chữ 3D ở đâu và cao bao nhiêu. Cho nó chiếm một hàng thật thì hero cao hơn màn hình và chữ bị đẩy khuất xuống dưới mép — đã thử. */ /* Hàng riêng cho tên app — và đó là điều kiện an toàn, không phải thẩm mỹ: không có đoạn chữ nào đè lên nên chữ 3D được phép đậm mà không kéo tụt tương phản của bất cứ thứ gì. Cho nó nằm sau nội dung thì phải ép nó nhạt đi tới mức gần như vô hình. Ô này rỗng: scene.js chỉ đọc getBoundingClientRect để biết đặt và co chữ. */ .hero-word { position: relative; flex: 0 0 auto; min-height: clamp(118px, 19vh, 230px); pointer-events: none; } /* Bản CSS thay thế: chỉ hiện khi WebGL không chạy được. Không có nó thì máy cũ mở trang ra là mất hẳn tên app. */ .word-fb { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-family: 'Prata', Georgia, serif; font-size: min(19vw, 15rem); line-height: .9; letter-spacing: .06em; color: var(--ink); opacity: .22; white-space: nowrap; } .no-webgl .word-fb { display: flex; } .hero-foot { display: flex; flex-direction: column; gap: var(--s3); } .hero-foot .note { margin-top: 0; } @media (max-width: 900px) { /* Chữ trước, máy sau — trên điện thoại mà để ảnh máy lên đầu thì người đọc cuộn hết một màn mới biết đây là cái gì. */ .hero { min-height: 0; padding-bottom: var(--s5); } .hero-top { grid-template-columns: 1fr; gap: var(--s5); } /* Bỏ ảnh máy ở hero trên màn hẹp. Người đọc đang cầm sẵn một cái điện thoại, và chương 02 có tới năm ảnh — giữ lại thì tên app bị đẩy quá màn đầu, mất đúng thứ đáng thấy nhất. */ .hero-top .art { display: none; } .hero-spacer { min-height: var(--s5); } .hero-word { min-height: clamp(84px, 14vh, 150px); } } /* Chữ dọc bên hông — mượn cách đặt của Kage, nội dung là tagline của app */ .hero-side { position: absolute; right: max(12px, calc((100vw - var(--wide)) / 2 - 40px)); top: 46%; z-index: 2; pointer-events: none; } .hero-side .v { writing-mode: vertical-rl; font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.52em; text-transform: uppercase; color: var(--faint); } @media (max-width: 1320px) { .hero-side { display: none; } } /* Vạch mời cuộn — một vệt quét qua sợi kẻ 1px, lặp chậm */ .hero-cue { display: flex; align-items: center; gap: 12px; } .hero-cue .track { width: 54px; height: 1px; background: var(--edge); position: relative; overflow: hidden; } .hero-cue .track i { position: absolute; inset: 0; background: var(--terra); transform-origin: left; animation: cue 3.4s var(--ease) infinite; } @keyframes cue { 0% { transform: scaleX(0); } 42% { transform: scaleX(1); } 100% { transform: scaleX(1) translateX(100%); } } @media (max-width: 900px) { .hero-cue { display: none; } } /* Con dấu nghiêng — đúng một phần tử xoay mỗi màn, lấy từ màn Home của app */ .stamp { display: inline-block; transform: rotate(-4deg); border: 1px solid var(--terra); color: var(--terra-text); padding: 7px 12px; font-family: 'PlexMono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: var(--s3); } /* ── Máy ────────────────────────────────────────────────────────────────── */ .device { width: 100%; max-width: 300px; margin: 0 auto; border: 8px solid var(--bezel); border-radius: 42px; overflow: hidden; background: var(--paper2); aspect-ratio: 1320 / 2868; /* giữ chỗ, không nhảy layout khi ảnh về */ } .device img { width: 100%; height: 100%; object-fit: cover; } /* ── Nút tải ───────────────────────────────────────────────────────────── */ .stores { display: flex; flex-wrap: wrap; gap: var(--s2); } .store { display: flex; flex-direction: column; justify-content: center; min-width: 190px; min-height: 60px; padding: 10px var(--s3); border: 1px solid var(--edge); background: var(--paper2); color: var(--ink2); text-decoration: none; } span.store { cursor: not-allowed; } a.store { cursor: pointer; transition: border-color var(--slow) var(--ease), background var(--slow) var(--ease); } a.store:hover { border-color: var(--terra); background: var(--paper); } .store .plat { font-family: 'PlexMono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.06em; color: var(--ink); } .store .soon, .store .action { font-family: 'PlexMono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra-text); margin-top: 3px; } .note { font-size: 14px; color: var(--ink2); margin-top: var(--s3); max-width: 32em; } /* ── Lưới ───────────────────────────────────────────────────────────────── */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); } .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); } @media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } } .item { padding-top: var(--s3); border-top: 1px solid var(--edge); } .item .num { display: block; margin-bottom: var(--s2); } .item h3 { margin-bottom: var(--s2); } .item p { color: var(--ink2); font-size: 16px; } .pull { font-family: 'Prata', Georgia, serif; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.24; font-weight: 400; max-width: 17em; margin: 0 0 var(--s6); } .pull .accent { color: var(--terra-text); } /* ── Năm khoảng · hàng so le ────────────────────────────────────────────── */ .space { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s6); align-items: center; padding: var(--s6) 0; border-top: 1px solid var(--edge); } .space:nth-of-type(even) .art { order: 2; } .space .num { font-family: 'Prata', Georgia, serif; font-size: 1.6rem; color: var(--faint); display: block; margin-bottom: var(--s1); } .space h3 { margin-bottom: var(--s2); } .space .label { display: block; margin-bottom: var(--s3); } .space p { color: var(--ink2); } .space .device { max-width: 260px; } @media (max-width: 860px) { .space { grid-template-columns: 1fr; gap: var(--s4); } .space:nth-of-type(even) .art { order: 0; } } /* ── Âm nền · nghe thử ──────────────────────────────────────────────────── */ .sound { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s6); align-items: start; } @media (max-width: 860px) { .sound { grid-template-columns: 1fr; gap: var(--s5); } } .tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); } @media (max-width: 460px) { .tracks { grid-template-columns: 1fr; } } .track-btn { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 0; cursor: pointer; padding: 0 var(--s3); min-height: 60px; width: 100%; font-family: 'PlexMono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); text-align: left; transition: color var(--slow) var(--ease), background var(--slow) var(--ease); } .track-btn:hover { background: var(--paper2); color: var(--ink); } .track-btn[aria-pressed="true"] { color: var(--terra-text); background: var(--paper2); } /* Chấm trạng thái: đứng yên khi tắt, thở rất chậm khi đang phát. Không phải badge, không đếm — chỉ cho biết cái nào đang kêu. */ .track-btn .dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; border: 1px solid var(--faint); background: transparent; transition: background var(--slow) var(--ease), border-color var(--slow) var(--ease); } /* Đã chọn: chấm đầy. Đang thật sự kêu: chấm thở. Khi trình duyệt còn chặn autoplay thì nút đã chọn nhưng chưa có tiếng — hai trạng thái đó phải nhìn ra được, không thì người đọc tưởng loa hỏng. */ .track-btn[aria-pressed="true"] .dot { background: var(--terra); border-color: var(--terra); } .track-btn.playing .dot { animation: breathe 4.2s var(--ease) infinite; } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .vol { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; } .vol input { flex: 1 1 160px; max-width: 220px; accent-color: var(--terra); min-height: 44px; cursor: pointer; } .credits { font-size: 13px; line-height: 1.7; color: var(--label); margin-top: var(--s4); max-width: 40em; } .credits a { color: var(--label); } .credits a:hover { color: var(--ink); } /* ── Chăm sóc ───────────────────────────────────────────────────────────── */ .care { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); } @media (max-width: 860px) { .care { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .care { grid-template-columns: 1fr; } } .care .item h3 { font-size: 1.15rem; } /* ── Lời nhắc an toàn ───────────────────────────────────────────────────── */ .safety { border-left: 2px solid var(--terra); padding: var(--s2) 0 var(--s2) var(--s3); margin-top: var(--s5); max-width: 40em; } .safety p { font-size: 15.5px; color: var(--ink2); } /* ── Liên kết đi tiếp ───────────────────────────────────────────────────── */ .more { display: inline-flex; align-items: center; gap: 12px; font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink); text-decoration: none; min-height: 44px; margin-top: var(--s4); } .more .arrow { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; transition: border-color var(--slow) var(--ease), transform var(--slow) var(--ease-out); } .more:hover { color: var(--terra-text); } .more:hover .arrow { border-color: var(--terra); transform: translate(3px, -3px); } .more .arrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.4; } /* ── Sắp có ─────────────────────────────────────────────────────────────── */ .cta { text-align: center; } .cta .wrap > * { margin-left: auto; margin-right: auto; } .cta h2 { margin-bottom: var(--s3); } .cta .lede { margin-bottom: var(--s4); } .cta .stores { justify-content: center; } .cta .note { margin-left: auto; margin-right: auto; } /* ── Chân trang ─────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--edge); padding: var(--s5) 0; } footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; } footer .label { line-height: 2; } footer a { color: var(--label); } footer a:hover { color: var(--ink); } /* ── Trang phụ · Riêng tư & Hỗ trợ ──────────────────────────────────────── */ .doc { padding: var(--s6) 0 var(--s7); } .doc .wrap { max-width: 760px; } .doc h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: var(--s3); } .doc .updated { display: block; margin-bottom: var(--s6); } .doc h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: var(--s6) 0 var(--s3); } .doc p, .doc li { color: var(--ink2); max-width: none; } .doc ul { margin: 0 0 var(--s2); padding-left: 1.1em; } .doc li { margin-bottom: var(--s1); } .doc .back { display: inline-block; margin-bottom: var(--s4); font-family: 'PlexMono', ui-monospace, monospace; font-size: 11px; letter-spacing: .19em; text-transform: uppercase; text-decoration: none; color: var(--label); min-height: 44px; line-height: 44px; } .doc .back:hover { color: var(--ink); } .doc dl { margin: 0; } .doc dt { font-family: 'Prata', Georgia, serif; font-size: 1.15rem; color: var(--ink); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--edge); } .doc dd { margin: var(--s1) 0 0; color: var(--ink2); } /* ── Chuyển động ────────────────────────────────────────────────────────── */ /* Reveal khi cuộn tới. data-rvd giãn thời điểm để cả cụm không bật cùng lúc. */ /* Chỉ giấu khi có JS để bật lại. Tắt JS mà vẫn opacity:0 thì cả trang trắng bong — reveal là phần trang trí, không được phép nuốt nội dung. */ .js .rv { opacity: 0; transform: translateY(14px); } /* Phải cùng độ đặc hiệu với `.js .rv` ở trên, nếu không nó bị đè và reveal không bao giờ hiện ra. */ .js .rv-in { opacity: 1; transform: none; transition: opacity var(--t-rv) var(--ease-out), transform var(--t-rv) var(--ease-out); } /* Mặt nạ theo từng từ cho heading. Chữ gốc vẫn là nhãn cho trình đọc màn hình (aria-label), các từ hiện ra chỉ là phần nhìn (aria-hidden). Đệm trên/dưới là để dấu tiếng Việt — ộ, ề, ỹ — không bị cắt cụt. */ .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .22em .03em .28em; margin: -.22em -.03em -.28em; } .w > i { display: inline-block; font-style: inherit; transform: translateY(115%); } .rv-in .w > i { transform: none; transition: transform var(--t-word) var(--ease-out); transition-delay: calc(var(--wi, 0) * 52ms); } @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } .js .rv-in { transition: none; } .w > i, .rv-in .w > i { transform: none; transition: none; } .hero-cue .track i { animation: none; transform: scaleX(1); } .track-btn.playing .dot { animation: none; } .more:hover .arrow { transform: none; } } /* ── Màn hẹp · nới lỏng thang khoảng cách ───────────────────────────────── */ @media (max-width: 640px) { :root { --s6: 64px; --s7: 88px; } .space { padding: var(--s5) 0; } .store { min-width: 0; flex: 1 1 46%; } }