/* giftgame.live — bảng màu và thang chữ ĐO TỪ streamtoearn.io ngày 29/8/2026 (getComputedStyle trên trang thật, không phải ước lượng bằng mắt). Mọi con số dưới đây là con số đọc được; chỗ nào tự chọn thì có ghi chú. */ :root { /* nền: html #04081A, body chồng ba lớp gradient */ --bg: #04081a; --sky-top: #1f3463; --sky-mid: #0a1330; /* mực */ --ink: #ffffff; --cream: #f4efe2; /* màu chữ dẫn — KHÔNG phải trắng */ --muted: rgba(255,255,255,.62); --faint: rgba(255,255,255,.38); /* thẻ & viền */ --card: rgba(11,22,56,.55); --card-solid: #0a1330; --card-hi: rgba(15,28,60,.7); --card-ink: rgba(7,12,32,.72); --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --line-3: rgba(255,255,255,.06); /* nhấn */ --gold: #f0a722; --gold-ink: #3d2700; --lime: #9ec73a; --lime-ink: #1f3000; --lime-deep: #6e8e1d; --lime-soft: #c4dd75; --magenta: #c33ef0; --pink: #ff7ad6; --wrap: 1080px; /* bề ngang nội dung đo được ở khung 1440 */ --r: 18px; --r-lg: 26px; /* CÙNG HỆ VỚI APP — xem `site/src/fonts/fonts.css`. Ubuntu và Inter chỉ có mặt vì trang này chọn lúc nó còn đứng riêng. */ --f-head: "Chakra Petch", "Exo 2", system-ui, sans-serif; --f-body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* KHÔNG đặt `overflow-x` lên . ═══════════════════════════════════════════════════════════════════════ `overflow-x: clip` ở đây từng dùng để chặn tràn ngang trên máy nhỏ. Nó chặn được thật — và ĐỒNG THỜI giết luôn việc cuộn tới neo: mở `…/#doc-binh-luan` hay bấm một liên kết `href="#…"` thì địa chỉ đổi, trang KHÔNG nhúc nhích. Đo A/B/A trên bản chạy thật 29/8: overflow-x: clip → scrollY 0 gỡ ra → scrollY 2074 trả lại clip → scrollY 0 Nguồn tràn thật là vầng sáng `.ring` của khối kêu gọi cuối trang, và nó đã được `.final { overflow: hidden }` bọc lại. Sau khi bọc, ở khung 375px `documentElement.scrollWidth` đúng bằng 375 KỂ CẢ khi không có dòng này — tức là nó không còn che giấu gì nữa, chỉ còn làm hỏng neo. Chặn tràn ở ĐÚNG phần tử gây tràn, đừng bịt mắt cả tài liệu. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.5; color: var(--cream); background-image: radial-gradient(900px 600px at 88% 5%, rgba(195,62,240,.14), transparent 55%), radial-gradient(700px 500px at 8% 25%, rgba(240,167,34,.07), transparent 60%), linear-gradient(var(--sky-top) 0%, var(--sky-mid) 40%, var(--bg) 100%); background-attachment: scroll; } img, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; margin: 0; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; } /* ── sao trời: một lớp nền, không phải ảnh ─────────────────────────────── */ .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,.55), transparent), radial-gradient(1.2px 1.2px at 78% 8%, rgba(255,255,255,.45), transparent), radial-gradient(1.6px 1.6px at 33% 42%, rgba(255,255,255,.35), transparent), radial-gradient(1.2px 1.2px at 91% 33%, rgba(255,255,255,.4), transparent), radial-gradient(1.3px 1.3px at 55% 22%, rgba(255,255,255,.3), transparent), radial-gradient(1.1px 1.1px at 22% 66%, rgba(255,255,255,.28), transparent), radial-gradient(1.5px 1.5px at 68% 55%, rgba(255,255,255,.32), transparent); background-size: 100% 900px; opacity: .8; } .page { position: relative; z-index: 1; } /* ── thanh điều hướng ──────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; backdrop-filter: blur(14px); background: rgba(4,8,26,0); transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .nav.stuck { background: rgba(4,8,26,.82); border-bottom-color: var(--line); } .nav .wrap { display: flex; align-items: center; gap: 20px; } .logo { /* KHÔNG `gap` ở đây. Thẻ này là flex và có một TEXT NODE («Gift») đứng giữa ảnh với , nên text node thành một mục flex và `gap` chèn luôn vào GIỮA TÊN: «Gift Game.live» thay vì «GiftGame.live». Khe cũ 3px, nhìn ra được ở cỡ 22px. Khoảng cách ảnh ↔ chữ chuyển hết sang `margin-right` của `.logo-mark`, giữ nguyên 4px như trước. */ font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: -.4px; color: #fff; display: flex; align-items: center; white-space: nowrap; } .logo-mark { /* Ảnh thật thay đồng xu vẽ bằng CSS. Khai `width/height` để chỗ của nó được giữ trước khi ảnh về — logo nằm ngay đầu thanh nav, nhảy một nhịp ở đó là cả hàng nav giật theo. */ width: 26px; height: 26px; display: block; flex: none; margin-right: 4px; } .logo-w { margin-left: 1px } .nav-links { display: flex; gap: 4px; align-items: center; margin-inline: auto; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); } .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 8px 13px; border-radius: 999px; transition: color .18s, background .18s; white-space: nowrap; flex: none; } .nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); } .nav-links a.on { color: #fff; background: var(--magenta); box-shadow: 0 6px 18px -8px var(--magenta); } .nav-links a .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; margin-right: 6px; vertical-align: 1px; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } .nav-right { display: flex; align-items: center; gap: 14px; } .lang { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: default; } .lang svg { opacity: .6 } .burger { display: none; width: 44px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); align-items: center; justify-content: center; cursor: pointer; } .burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; border-radius: 2px; } .burger span::before { top: -6px } .burger span::after { top: 6px } /* ── nút ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 700; font-size: 16px; border-radius: 999px; border: 0; cursor: pointer; padding: 14px 24px; transition: transform .16s ease, box-shadow .16s ease, background .16s; white-space: nowrap; } .btn:active { transform: translateY(2px); } .btn-lime { background: var(--lime); color: var(--lime-ink); padding: 14px 24px 14px 20px; box-shadow: 0 4px 0 0 var(--lime-deep), 0 12px 26px -8px rgba(158,199,58,.55); } .btn-lime:hover { background: var(--lime-soft); } .btn-lime:active { box-shadow: 0 1px 0 0 var(--lime-deep), 0 8px 20px -10px rgba(158,199,58,.5); } .btn-lime .two { display: grid; text-align: left; line-height: 1.1; } .btn-lime .two small { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .72; } .btn-gold { background: var(--gold); color: var(--gold-ink); font-size: 15px; padding: 11px 22px; box-shadow: 0 4px 0 0 #b9760a, 0 10px 24px -10px rgba(240,167,34,.6); } .btn-gold:hover { background: #ffbe4d; } .btn-ghost { background: rgba(255,255,255,.05); color: #fff; border: 1px solid var(--line-2); font-size: 15px; } .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); } /* ── hero ──────────────────────────────────────────────────────────────── */ .hero { padding: 76px 0 90px; position: relative; } .hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; align-items: center; } .hero h1 { font-size: clamp(34px, 3.85vw, 60px); line-height: 1.02; letter-spacing: -.028em; color: #fff; margin-bottom: 22px; text-wrap: balance; } .hero h1 .gold { color: var(--gold); } .hero .lead { color: var(--cream); max-width: 480px; margin: 0 0 30px; } /* KHÔNG đặt `margin-bottom` ở đây. Lề dưới của hàng nút và lề trên của khối số nhập vào nhau, cái nào lớn hơn thì thắng — để 46px ở đây thì 32px của `.stats` không bao giờ có tiếng nói. Đo trên trang họ: đúng 32px từ đáy nút xuống đường kẻ. */ .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } /* Khối số dưới nút bấm. Đo trên trang họ ngày 30/8/2026: HAI số nằm một hàng, cách nhau 28px, mỗi số là `icon 24px + số 26px` trên cùng một dòng, nhãn mono 10px bên dưới, và một đường kẻ mảnh tách khỏi hàng nút phía trên (`border-top` + `padding-top: 22px`). Trước đây chỗ này là bốn số xếp lưới 2×2 — đó là tôi tự nghĩ ra, không phải khuôn của họ. Bốn số ở cỡ chữ này rộng ~564px, quá khổ 540px của cột chữ, nên kiểu gì cũng phải rớt xuống hai hàng. `
` mang lề mặc định của trình duyệt, phải gỡ. */ .stats { margin: 32px 0 0; padding-top: 22px; max-width: 540px; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 28px; } .stats .stat { min-width: 0 } .stats dt, .stats dd { margin: 0 } .stat .n { font-family: var(--f-head); font-weight: 700; font-size: 26px; color: #fff; display: inline-flex; align-items: center; gap: 10px; line-height: 26px; font-variant-numeric: tabular-nums; } /* `flex: none` để cái icon không bị bóp khi nhãn dài hơn ô. */ .stat .n svg { width: 24px; height: 24px; display: block; flex: none } .stat .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; line-height: 15.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* ── ảnh đầu trang ──────────────────────────────────────────────────── Trước đây dựng bằng ~120 dòng CSS và một tá thẻ div: khung máy tính, sáu dòng luật, điện thoại, đồng xu bay. Nay là MỘT tệp ảnh nướng sẵn, nên trình duyệt không phải vẽ lại từng khung — và emoji không còn mỗi hệ điều hành một kiểu. `aspect-ratio` khai đúng tỉ lệ ảnh để chỗ của nó được giữ TRƯỚC khi ảnh tải xong; thiếu nó thì cả cột chữ bên trái nhảy một nhịp lúc ảnh về. */ .art { display: block; width: 100%; aspect-ratio: 1096 / 716 } .art img { width: 100%; height: auto; display: block } /* ── khung mục ─────────────────────────────────────────────────────────── */ .sect { padding: 74px 0; position: relative; } .eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); } .eyebrow.lime { color: var(--lime) } .eyebrow.lime::before { background: var(--lime); box-shadow: 0 0 12px var(--lime) } .eyebrow.mag { color: var(--pink) } .eyebrow.mag::before { background: var(--pink); box-shadow: 0 0 12px var(--pink) } .sect-h2 { font-size: 44px; line-height: 1.05; letter-spacing: -.88px; color: #fff; } .sect-lead { color: var(--muted); max-width: 620px; margin: 16px 0 0; font-size: 16px; } .sect-head { margin-bottom: 40px; } /* ── thẻ chung ─────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; position: relative; overflow: hidden; transition: border-color .22s ease, transform .22s ease; } .card:hover { border-color: var(--line-2); } .num-ghost { position: absolute; right: 14px; top: -14px; font-family: var(--f-head); font-weight: 700; font-size: 116px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.055); pointer-events: none; user-select: none; } .tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); } .tile.lime { background: rgba(158,199,58,.1); border-color: rgba(158,199,58,.3); color: var(--lime) } .tile.gold { background: rgba(240,167,34,.12); border-color: rgba(240,167,34,.32); color: var(--gold) } .tile.mag { background: rgba(195,62,240,.12); border-color: rgba(195,62,240,.34); color: var(--pink) } .card h3 { font-size: 22px; letter-spacing: -.3px; color: #fff; margin-bottom: 10px; } .card p { color: var(--muted); font-size: 15px; margin: 0; } .mini { margin-top: 20px; background: var(--card-ink); border: 1px solid var(--line-3); border-radius: 14px; padding: 13px 14px; } .chip { display: flex; align-items: center; gap: 10px; font-size: 14px; } .chip + .chip { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-3); } .chip .em { font-size: 17px; } .chip .to { color: var(--gold); } .chip .act { color: var(--muted); font-family: var(--f-mono); font-size: 12px; } .chip .cost { font-family: var(--f-mono); font-size: 11px; color: var(--gold); display: inline-flex; align-items: center; gap: 4px; } .chip .cost b { font-weight: 500 } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .frow p code, .qa .ans code, .feat p code { font-family: var(--f-mono); font-size: .86em; color: var(--gold); background: rgba(240,167,34,.1); border-radius: 5px; padding: 1px 5px; } .note { margin-top: 22px; border-radius: var(--r); padding: 18px 20px; background: rgba(240,167,34,.06); border: 1px solid rgba(240,167,34,.22); display: flex; gap: 14px; align-items: flex-start; } .note .ic { color: var(--gold); flex: none; margin-top: 2px } .note p { margin: 0; font-size: 14.5px; color: var(--cream) } .note b { color: var(--gold) } /* ── game & mod ────────────────────────────────────────────────────────── */ .feat { border-radius: var(--r-lg); padding: 34px; background: radial-gradient(120% 140% at 100% 0%, rgba(158,199,58,.12), transparent 55%), var(--card-hi); border: 1px solid var(--line-2); margin-bottom: 22px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; } .feat h3 { font-size: 30px; letter-spacing: -.6px; color: #fff; margin: 14px 0 12px } .feat p { color: var(--muted); font-size: 15px; margin: 0 0 10px } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px } .tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--muted); } .tag.on { background: rgba(158,199,58,.12); border-color: rgba(158,199,58,.34); color: var(--lime) } .cmdbox { background: var(--card-ink); border: 1px solid var(--line); border-radius: var(--r); padding: 16px } .cmdbox .hd { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .cmdbox .ln { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11.5px; padding: 7px 0; border-top: 1px solid var(--line-3); color: var(--muted); } .cmdbox .ln:first-of-type { border-top: 0 } .cmdbox .ln b { color: #fff; font-weight: 500 } .games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .game { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 15px; transition: border-color .2s, transform .2s; } .game:hover { border-color: var(--line-2); transform: translateY(-2px) } .game .nm { font-family: var(--f-head); font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 6px } .game .mt { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint) } .game .st { margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; } .game .st.live { background: rgba(158,199,58,.12); color: var(--lime); border: 1px solid rgba(158,199,58,.3) } .game .st.soon { background: rgba(255,255,255,.05); color: var(--faint); border: 1px solid var(--line) } .game.hero-game { border-color: rgba(158,199,58,.34); background: rgba(158,199,58,.055) } /* ── tính năng: khối xen kẽ ────────────────────────────────────────────── */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line-3); } .frow:first-of-type { border-top: 0 } .frow.flip .fr-txt { order: 2 } .frow h3 { font-size: 30px; letter-spacing: -.6px; color: #fff; margin: 14px 0 12px } .frow p { color: var(--muted); font-size: 15px; margin: 0 } .bullets { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px } .bullets li { display: flex; gap: 11px; font-size: 14.5px; color: var(--cream); line-height: 1.4 } .bullets li::before { content: "✓"; flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px; background: rgba(158,199,58,.14); color: var(--lime); font-size: 10px; display: grid; place-items: center; border: 1px solid rgba(158,199,58,.3); } .panel { background: var(--card-ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px } .panel .ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } /* bảng bốn tình trạng */ .states { display: grid; gap: 8px } .state { display: grid; grid-template-columns: 11px 1fr auto; gap: 12px; align-items: center; background: rgba(255,255,255,.035); border: 1px solid var(--line-3); border-radius: 12px; padding: 11px 14px; } .state i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint) } .state .t { font-size: 13.5px; color: #fff } .state .d { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); text-align: right } .state.ok { background: rgba(158,199,58,.08); border-color: rgba(158,199,58,.28) } .state.ok i { background: var(--lime); box-shadow: 0 0 10px var(--lime) } .state.warn i { background: var(--gold) } .state.bad i { background: #ff4d6d } /* overlay xem trước */ .ovl { border-radius: 14px; padding: 14px; background: linear-gradient(180deg, #123, #061024); border: 1px solid var(--line); } .ovl .bar { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.42); margin-bottom: 8px; font-size: 12.5px; } .ovl .bar:last-child { margin-bottom: 0 } .ovl .bar .rank { font-family: var(--f-mono); font-size: 11px; color: var(--gold); width: 16px } .ovl .bar .who { color: #fff; flex: 1 } .ovl .bar .amt { font-family: var(--f-mono); font-size: 11px; color: var(--lime) } .ovl .meter { height: 4px; border-radius: 9px; background: rgba(255,255,255,.1); margin-top: 8px; overflow: hidden } .ovl .meter i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--gold), var(--pink)) } /* ── giá ───────────────────────────────────────────────────────────────── */ .tscroll { margin-bottom: 34px; } .ptable { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .ptable th, .ptable td { padding: 14px 18px; text-align: center; font-size: 14px; border-top: 1px solid var(--line-3) } .ptable thead th { border-top: 0; background: rgba(255,255,255,.03) } .ptable th:first-child, .ptable td:first-child { text-align: left; color: var(--muted) } .ptable thead th:first-child { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; } .ptable thead th:not(:first-child) { font-family: var(--f-head); font-size: 15px; color: #fff } .ptable thead th.best { color: var(--gold) } .ptable td:not(:first-child) { color: #fff; font-family: var(--f-mono); font-size: 13px } .ptable .yes { color: var(--lime) } .ptable .no { color: rgba(255,255,255,.22) } .ptable td small { display: block; font-family: var(--f-body); font-size: 11px; color: var(--faint); margin-top: 3px } .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin-top: 14px } .tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; position: relative; } .tier.best { border-color: rgba(240,167,34,.4); background: radial-gradient(120% 130% at 50% 0%, rgba(240,167,34,.1), transparent 60%), var(--card-hi); } .tier .flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 5px 13px; white-space: nowrap; font-weight: 600; } .tier .nm { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .tier .px { font-family: var(--f-head); font-weight: 700; font-size: 30px; color: #fff; letter-spacing: -.6px } .tier .px span { font-family: var(--f-body); font-size: 14px; font-weight: 400; color: var(--faint) } .tier > p { color: var(--muted); font-size: 14px; margin: 14px 0 20px; line-height: 1.5 } .tier .bullets li { font-size: 13.5px } .tier .btn { width: 100%; justify-content: center; margin-top: 22px } /* ── CTA cuối ──────────────────────────────────────────────────────────── */ .final { padding: 84px 0; text-align: center; position: relative } .final .ring { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; background: conic-gradient(from 200deg, var(--magenta), var(--pink), var(--gold), var(--lime), var(--magenta)); opacity: .22; filter: blur(64px); } .final .kick { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .final h2 { font-size: 52px; line-height: 1.05; letter-spacing: -1.1px; color: #fff } .final p { color: var(--cream); max-width: 560px; margin: 20px auto 32px } .final .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq { display: grid; gap: 10px; max-width: 820px } .qa { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden } .qa summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--f-head); font-weight: 700; font-size: 16.5px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .qa summary::-webkit-details-marker { display: none } .qa summary::after { content: "+"; font-family: var(--f-mono); font-size: 19px; color: var(--gold); flex: none; transition: transform .2s ease; } .qa[open] summary::after { transform: rotate(45deg) } .qa[open] { border-color: var(--line-2) } .qa .ans { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.55 } .qa .ans code { font-family: var(--f-mono); font-size: 12.5px; color: var(--gold); background: rgba(240,167,34,.1); border-radius: 5px; padding: 1px 6px; } /* ── chân trang ────────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--line); padding: 52px 0 34px; margin-top: 20px } .foot .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px } .foot .about { color: var(--muted); font-size: 14px; max-width: 300px; margin: 16px 0 0 } .foot h5 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; font-weight: 500; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px } .foot ul a { color: var(--muted); font-size: 14px } .foot ul a:hover { color: #fff } .foot .btm { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); } /* nút lên đầu trang */ .up { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--magenta); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px -8px var(--magenta); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .25s ease; } .up.on { opacity: 1; pointer-events: auto; transform: none } /* hiện dần khi cuộn tới */ .rise { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease } .rise.in { opacity: 1; transform: none } /* ── co giãn ───────────────────────────────────────────────────────────── */ @media (max-width: 1040px) { .games { grid-template-columns: repeat(3, 1fr) } } @media (max-width: 900px) { .nav-links { display: none } .burger { display: flex } .lang { display: none } .nav .wrap { justify-content: space-between } .logo { margin-right: auto } .hero { padding: 46px 0 62px } .hero .wrap { grid-template-columns: 1fr; gap: 46px } .hero h1 { font-size: 42px; letter-spacing: -1px } .art { order: 2 } .sect { padding: 56px 0 } .sect-h2 { font-size: 32px; letter-spacing: -.6px } .grid-3, .grid-2, .tiers { grid-template-columns: 1fr } .feat { grid-template-columns: 1fr; padding: 26px } .frow { grid-template-columns: 1fr; gap: 28px; padding: 32px 0 } .frow.flip .fr-txt { order: 0 } .frow h3, .feat h3 { font-size: 24px } .final h2 { font-size: 34px; letter-spacing: -.7px } .foot .top { grid-template-columns: 1fr 1fr; gap: 28px } .stats { gap: 24px; flex-wrap: wrap; row-gap: 20px } .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch } .ptable { min-width: 520px; white-space: nowrap } } @media (max-width: 600px) { .games { grid-template-columns: 1fr } .hero h1 { font-size: 34px } .hero-cta .btn { width: 100% ; justify-content: center } .foot .top { grid-template-columns: 1fr } } /* ═══════════════════════════════════════════════════════════════════════ NÂNG CẤP — các thành phần có tương tác ═══════════════════════════════════════════════════════════════════════ */ /* ── nhìn thấy được bằng bàn phím ────────────────────────────────────── Mọi thứ bấm được phải có viền khi tab tới. Bỏ qua chỗ này thì trang vẫn «đẹp» y hệt trong ảnh chụp, và không dùng nổi nếu không có chuột. */ :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); font-family: var(--f-head); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 0 0 14px 14px; transition: top .18s ease; } .skip:focus { top: 0; } /* thanh tiến trình cuộn */ .progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 90; background: transparent; pointer-events: none; } .progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--magenta), var(--pink), var(--gold), var(--lime)); box-shadow: 0 0 12px rgba(240,167,34,.55); } /* ── hộp chọn ngôn ngữ (trước đây là một chữ chết) ─────────────────────── */ .lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); } .lang button { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 6px 11px; border-radius: 999px; transition: color .16s, background .16s; } .lang button:hover { color: #fff } .lang button.on { color: var(--gold-ink); background: var(--gold); font-weight: 600 } /* ── hero: quà bay từ điện thoại sang bàn soạn luật ────────────────────── */ /* ── thanh công cụ: lọc + tìm ──────────────────────────────────────────── */ .toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0 } .chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .chips.scroll-x::-webkit-scrollbar { height: 5px } .chips.scroll-x::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px } .chip-btn { font-family: var(--f-body); font-size: 13px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; transition: color .16s, background .16s, border-color .16s; } .chip-btn:hover { color: #fff; border-color: var(--line-2) } .chip-btn b { font-family: var(--f-mono); font-size: 11px; font-weight: 500; opacity: .7; margin-left: 4px } .chip-btn.on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); font-weight: 600; } .chip-btn.on b { opacity: .78 } .search { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; color: var(--faint); transition: border-color .16s; } .search:focus-within { border-color: var(--line-2) } .search input { background: none; border: 0; outline: 0; color: #fff; font-family: var(--f-body); font-size: 13.5px; width: 180px; } .search input::placeholder { color: var(--faint) } .search input::-webkit-search-cancel-button { filter: invert(1) opacity(.4) } .search.wide { max-width: 420px; margin-bottom: 18px } .search.wide input { width: 100% } .empty-msg { text-align: center; color: var(--faint); font-size: 14.5px; padding: 34px 0; margin: 0; } /* ── game: thẻ có thêm gợi ý ───────────────────────────────────────────── */ .game { display: flex; flex-direction: column; gap: 0 } .game.hide { display: none } .game .st { align-self: flex-start } .game .st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .game .hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.42; color: var(--faint); border-top: 1px solid var(--line-3); padding-top: 10px; } .game.playable { border-color: rgba(158,199,58,.34); background: rgba(158,199,58,.055) } .game:focus-visible { border-color: var(--gold) } .cmdbox .ln.total { border-top: 1px solid var(--line-2); margin-top: 4px; color: var(--gold) } .cmdbox .ln.total b { color: var(--gold) } /* ── chân trang:
đổi thành

cho đúng dàn tiêu đề ──────────────── */ .foot h2 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; font-weight: 500; } .badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 0 } .note.soft { background: rgba(255,255,255,.035); border-color: var(--line) } .note.soft p { color: var(--muted) } .note.soft p b { color: #fff } .note.soft .ic { color: var(--muted) } .ovl .bar.hot { background: rgba(240,167,34,.12) } /* ── co giãn cho phần mới ──────────────────────────────────────────────── */ @media (max-width: 900px) { .toolbar { align-items: stretch } .search { justify-content: flex-start } .search input { width: 100% } } /* Tôn trọng «giảm chuyển động»: tắt mọi vòng lặp trang trí, giữ nguyên phần chức năng. Quy tắc chung ở đầu tệp rút thời lượng về 0.01ms, nhưng animation LẶP VÔ HẠN thì rút ngắn không đủ — nó vẫn nháy liên tục. */ @media (prefers-reduced-motion: reduce) { .nav-links a .dot { animation: none !important } } /* Thanh nav còn năm mục — vừa ở mọi bề ngang máy tính, không phải giấu dần. Mục «Tải app» chỉ hiện trong menu máy nhỏ, nơi nút vàng đã rời thanh nav. */ @media (max-width: 900px) { .nav-links[style] a { display: block !important } } .feat .muted-p { font-size: 13.5px; color: var(--faint); line-height: 1.5 } /* Thanh nav ở màn hẹp: logo + VI/EN + «Tải app» + nút menu cộng lại 420px trong khung 375px, nên hàng tràn ra ngoài và kéo cả trang rộng 497px. Nút vàng rời thanh nav — mục tải đã có trong menu (`.only-menu`), trong hero, và ở khối kêu gọi cuối trang, nên không mất lối đi nào. */ .only-menu { display: none } @media (max-width: 900px) { .nav-links[style] .only-menu { display: block !important } .nav-links[style] { padding-bottom: 10px } } @media (max-width: 660px) { .nav .btn-gold { display: none } .nav .wrap { gap: 12px } .nav-right { gap: 10px } } @media (max-width: 380px) { .logo { font-size: 19px } .logo-mark { width: 21px; height: 21px } .lang button { padding: 6px 9px } } /* Vầng sáng sau khối kêu gọi rộng cố định 620px và bị dịch trái 50%, nên trên khung 375px nó trải từ -122px tới 497px, kéo KHỐI CHỨA ĐẦU TRANG rộng theo — và mọi thứ đo theo nó đều lệch: nút «lên đầu trang» (`position: fixed; right: 22px`) neo vào mép 497 nên nằm một nửa ngoài màn hình. Cắt tại chính khối chứa nó. Đây là chỗ sửa ĐÚNG; bịt `overflow-x` trên chỉ giấu triệu chứng và làm hỏng cuộn tới neo. */ .final { overflow: hidden } .final .ring { max-width: 130vw; max-height: 130vw } /* ── bảng giá sinh từ quota.py ─────────────────────────────────────────── */ .tier .bullets li b { color: #fff; font-family: var(--f-mono); font-size: 13px; min-width: 30px } .sect-lead code { font-family: var(--f-mono); font-size: .84em; color: var(--gold); background: rgba(240,167,34,.1); border-radius: 5px; padding: 1px 6px; } /* ── 02 · ĐANG LIVE ──────────────────────────────────────────────────── Giải phẫu thẻ CHÉP THEO streamtoearn.io, đo bằng getComputedStyle ngày 29/8/2026 — không ước lượng: thẻ 170×198 · nền rgba(15,28,60,.7) · bo 18 · đệm 16/10/14 .live-dot góc trái trên 10/10 · 44×16 · nền đen .4 · chữ 8px · ls .8 ::before chấm 4×4 màu #ff3b6b .viewers góc phải trên 10/10 · chữ 9px · màu #f4efe2 · gap 3 .av-ring vòng conic 200deg tím→hồng→vàng, đệm 2, đè -2 quanh ảnh .av 64×64 tròn · chữ 18/700 · rgba(255,255,255,.85) .badge đáy -6 · bo 4 · 9px/700 · ls .54 · FREE #9ec73a/#1f3000 .handle 13px/500 trắng .game-row 11px · rgba(255,255,255,.62) .cta-mini #f0a722 trên #3d2700 · 11/700 · bo 999 · đệm 4/12 HAI CHỖ HỌ CÓ MÀ MÌNH KHÔNG: · ẢNH ĐẠI DIỆN — họ nhúng ảnh từ CDN TikTok; kho này không lưu ảnh nào. Ô `.av` giữ nguyên kích thước và kiểu chữ của họ (18px/700 — chính là kiểu họ đặt cho chữ `alt` khi ảnh hỏng) và điền CHỮ CÁI ĐẦU của tên phòng. Một chỗ trống rõ ràng, không phải một khuôn mặt bịa. · SỐ NGƯỜI XEM — hệ không đo được. Ô ấy giữ nguyên vị trí và kiểu chữ, nhưng chở con số đo được: SỐ LỆNH ĐÃ BẮN trong buổi, với biểu tượng tia chớp thay cho biểu tượng người. Giữ hình, đổi nghĩa, và nói ra nghĩa mới. */ .live-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px } .live-grid:empty { display: none } .live-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: rgba(15,28,60,.7); border: 1px solid var(--line); border-radius: 18px; padding: 16px 10px 14px; transition: border-color .2s ease, transform .2s ease; } .live-card:hover { border-color: var(--line-2); transform: translateY(-2px) } .live-card .live-dot { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.4); color: #fff; font-family: var(--f-mono); font-size: 8px; letter-spacing: .8px; border-radius: 999px; padding: 2px 7px; } .live-card .live-dot::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #ff3b6b; animation: pulse 1.8s ease-in-out infinite; } .live-card .fired-top { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--cream); } .live-card .av-wrap { position: relative; width: 64px; height: 64px; margin-bottom: 4px } .live-card .av-ring { position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #c33ef0, #ff7ad6, #f0a722, #c33ef0); } .live-card .av { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-head); font-size: 18px; font-weight: 700; color: rgba(255,255,255,.85); background: #101c3a; text-transform: uppercase; } .live-card .badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: -6px; font-family: var(--f-body); font-size: 9px; font-weight: 700; letter-spacing: .54px; border-radius: 4px; padding: 2px 6px; text-transform: uppercase; white-space: nowrap; } .live-card .badge.t-normal { background: var(--lime); color: var(--lime-ink) } .live-card .badge.t-pro { background: var(--gold); color: var(--gold-ink) } .live-card .badge.t-expert { background: var(--magenta); color: #fff } .live-card .handle { font-size: 13px; font-weight: 500; color: #fff; padding: 0 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-card .game-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-card .cta-mini { margin-top: 4px; background: var(--gold); color: var(--gold-ink); font-family: var(--f-head); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 12px; } .live-more { display: flex; justify-content: center; margin-top: 22px } /* Bốn tình trạng, bốn câu — gộp thành một dòng «không có dữ liệu» là nói cùng một câu cho bốn việc phải làm khác hẳn nhau. */ .live-state { text-align: center; color: var(--faint); font-size: 14px; margin: 0; padding: 30px 20px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: rgba(255,255,255,.02); } .live-state.gone { display: none } .live-state code { font-family: var(--f-mono); font-size: 12.5px; color: var(--gold); background: rgba(240,167,34,.1); border-radius: 5px; padding: 1px 6px; } /* Lưới live co theo bề ngang. ĐẶT CUỐI TỆP: cùng độ cụ thể với luật gốc `.live-grid`, nên đứng trước nó là bị đè, và lưới ở lại sáu cột. */ @media (max-width: 1040px) { .live-grid { grid-template-columns: repeat(4, 1fr) } } @media (max-width: 760px) { .live-grid { grid-template-columns: repeat(3, 1fr) } } @media (max-width: 520px) { .live-grid { grid-template-columns: repeat(2, 1fr) } } /* ── miễn phí · đọc bình luận ──────────────────────────────────────────── */ .free-sect { background: radial-gradient(80% 120% at 50% 0%, rgba(158,199,58,.07), transparent 60%); } .tts-box { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; } .tts-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center } .tts-at { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 220px; background: var(--card-ink); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; color: var(--faint); transition: border-color .16s; } .tts-at:focus-within { border-color: rgba(158,199,58,.45) } .tts-at input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-family: var(--f-body); font-size: 15px; } .tts-at input::placeholder { color: var(--faint) } .tts-form select { background: var(--card-ink); border: 1px solid var(--line); color: #fff; border-radius: 999px; padding: 11px 16px; font-family: var(--f-body); font-size: 14px; cursor: pointer; } .tts-form select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px } .tts-state { margin: 16px 0 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; min-height: 21px; } .tts-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; } .tts-state.on::before { background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: pulse 1.8s ease-in-out infinite } .tts-state.wait::before { background: var(--gold) } .tts-state.bad::before { background: #ff4d6d } .tts-state.bad { color: #ffb3c0 } /* Câu đang đọc. Bày ra CHỮ chứ không chỉ phát tiếng: dán tab này vào OBS thì khán giả thấy được câu nào đang được đọc, và người dùng biết máy còn sống. */ .tts-now { margin-top: 16px; display: flex; align-items: center; gap: 11px; background: var(--card-ink); border: 1px solid rgba(158,199,58,.28); border-radius: var(--r); padding: 14px 16px; min-height: 52px; } .tts-now .tts-ic { font-size: 17px; flex: none } .tts-now .tts-text { flex: 1; min-width: 0; color: #fff; font-size: 15px; line-height: 1.4 } .tts-now .tts-q { flex: none; font-family: var(--f-mono); font-size: 11px; color: var(--faint); } .tts-facts { list-style: none; margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 9px; border-top: 1px solid var(--line-3); } .tts-facts li { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45 } .tts-facts li::before { content: "·"; color: var(--lime); font-weight: 700; flex: none; } .tts-facts b { color: var(--cream) } @media (max-width: 600px) { .tts-box { padding: 20px } .tts-form { flex-direction: column; align-items: stretch } .tts-form .btn, .tts-form select { width: 100%; justify-content: center } } /* ── luồng sự kiện của ô đọc bình luận ─────────────────────────────────── */ .feed-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .feed-head .feed-n { color: var(--muted) } /* `column-reverse`: tin mới chèn vào ĐẦU DOM và hiện ở ĐÁY, nên khung tự dính đáy mà không cần tính scrollTop mỗi lần — không có cách nào để nó "nhảy" khi người ta đang đọc dở. */ .feed { list-style: none; margin: 0; padding: 10px 12px; background: var(--card-ink); border: 1px solid var(--line); border-radius: var(--r); max-height: 300px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 7px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .feed::-webkit-scrollbar { width: 6px } .feed::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px } .feed li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13.5px; line-height: 1.45; animation: feedin .24s ease; } @keyframes feedin { from { opacity: 0; transform: translateY(5px) } } .feed .ic { flex: none; font-size: 13px; width: 17px; text-align: center } .feed .who { flex: none; max-width: 34%; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .feed .what { min-width: 0; flex: 1; color: var(--cream); overflow-wrap: anywhere } .feed .amt { flex: none; font-family: var(--f-mono); font-size: 11px; color: var(--gold); } /* Bình luận là thứ được ĐỌC LÊN, nên nó nổi hơn tương tác — cùng thứ bậc với việc máy đọc chỉ đọc bình luận. */ .feed li.k-comment .what { color: #fff } .feed li.k-gift .amt { color: var(--gold) } .feed li.k-like .amt { color: #ff6b85 } .feed li.k-follow .what, .feed li.k-share .what, .feed li.k-subscribe .what { color: var(--muted) } .feed li.sub .who::after { content: "★"; color: var(--pink); margin-left: 4px; font-size: 10px; } /* Câu đang được đọc, đánh dấu ngay trong luồng */ .feed li.doc { background: rgba(158,199,58,.09); border-radius: 8px; margin: -2px -6px; padding: 2px 6px } .feed .empty { color: var(--faint); font-size: 13px } /* ═══════════════════════════════════════════════════════════════════════ TRANG CON — live · games · gifts · docs Bố cục chép theo streamtoearn (đo 30/8): main.page-wrap › container › breadcrumbs › page-title › phần riêng. Số đo lấy từ trang họ; màu và chữ là của mình. ═══════════════════════════════════════════════════════════════════════ */ .page-wrap { padding: 34px 0 72px; min-height: 60vh } .crumbs { margin-bottom: 20px } .crumb-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .crumb-list li + li::before { content: "/"; margin-right: 8px; opacity: .5 } .crumb-list a { color: var(--muted) } .crumb-list a:hover { color: #fff } .page-title { margin-bottom: 30px; max-width: 760px } .page-title h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: #fff; margin: 0 0 14px; } .page-title.small-h1 h1 { font-size: clamp(26px, 2.6vw, 34px) } .page-title .lede { color: var(--muted); font-size: 16px; margin: 0; line-height: 1.55 } .page-search { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; } /* ── /live ─────────────────────────────────────────────────────────────── */ .live-filters-bar { margin-bottom: 20px } .live-filters-inner { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; background: var(--card); } .live-count { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: #fff; flex: none; } .live-note { font-size: 13px; color: var(--muted); line-height: 1.45 } /* ── /games ─── lưới 5 cột · gap 18px · ảnh 4:5, đúng số đo của họ ────── */ .games-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .game-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; } .game-card:hover { border-color: var(--line-2); transform: translateY(-2px) } .game-card.hide { display: none } .game-card .mod-img { /* `height: auto` BẮT BUỘC. Thuộc tính `height="1000"` trên thẻ là một GỢI Ý TRÌNH BÀY, và nó thắng `aspect-ratio` — vì aspect-ratio chỉ điền vào chiều nào đang `auto`. Thiếu dòng này thì thẻ cao đúng 1000px và cả lưới dài ra gấp bốn lần. Vẫn giữ hai thuộc tính width/height trên HTML: chúng là thứ giữ chỗ trước khi ảnh tải xong. */ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #0d1733; } .game-card .gc-body { padding: 14px; display: flex; flex-direction: column; flex: 1 } .game-card h2 { font-family: var(--f-head); font-weight: 700; font-size: 15px; color: #fff; margin: 0 0 6px; line-height: 1.25; } .game-card .gc-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); margin: 0 0 10px } .game-card .st { align-self: flex-start } .game-card .gc-hint { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-3); font-size: 11.5px; line-height: 1.42; color: var(--faint); } /* ── /gifts ─── hai cột, thẻ ảnh 96 (hiện 70) — số đo của họ ──────────── */ .flex-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start } .gifts-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .gift { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px 8px; text-align: center; transition: border-color .18s; } .gift:hover { border-color: var(--line-2) } .gift.hide { display: none } .gift img, .gift .gift-noimg { width: 70px; height: 70px; object-fit: contain; display: block; margin: 0 auto 8px; } .gift .gift-noimg { display: grid; place-items: center; font-size: 26px } .gift-name { margin: 0 0 3px; font-size: 12px; color: #fff; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gift-price { margin: 0; font-family: var(--f-mono); font-size: 11px; color: var(--gold) } .gift-price::after { content: " 💎"; font-size: 9px } .right-side { display: grid; gap: 14px; position: sticky; top: 88px } .side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; } .side-card h2 { font-family: var(--f-head); font-weight: 700; font-size: 16px; color: #fff; margin: 0 0 10px; } .side-card p { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5 } .side-card p:last-child { margin-bottom: 0 } .side-card b { color: var(--cream) } /* ── /docs ─────────────────────────────────────────────────────────────── */ .docs-page { display: grid; gap: 22px; max-width: 860px } .docs-section, .docs-help { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; } .docs-section h2, .docs-help h2 { font-family: var(--f-head); font-weight: 700; font-size: 21px; color: #fff; margin: 0 0 14px; letter-spacing: -.2px; } .docs-section p, .docs-help p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px } .docs-steps, .docs-list { margin: 0; padding-left: 20px; display: grid; gap: 10px } .docs-steps li, .docs-list li { color: var(--cream); font-size: 14.5px; line-height: 1.55 } .docs-steps b, .docs-list b { color: #fff } .docs-table { width: 100%; border-collapse: collapse; margin: 4px 0 0 } .docs-table td { padding: 10px 0; border-top: 1px solid var(--line-3); font-size: 14px; color: var(--cream) } .docs-table td:last-child { text-align: right; color: var(--muted); font-family: var(--f-mono); font-size: 12.5px } .docs-warn { margin-top: 16px !important; background: rgba(240,167,34,.06); border: 1px solid rgba(240,167,34,.22); border-radius: var(--r); padding: 14px 16px; color: var(--cream) !important; } .docs-warn b { color: var(--gold) } .docs-help .btn + .btn { margin-left: 10px } .docs-section code, .docs-help code { font-family: var(--f-mono); font-size: .86em; color: var(--gold); background: rgba(240,167,34,.1); border-radius: 5px; padding: 1px 6px; } @media (max-width: 1040px) { .games-list { grid-template-columns: repeat(4, minmax(0,1fr)) } .flex-page { grid-template-columns: 1fr } .right-side { position: static } } @media (max-width: 760px) { .games-list { grid-template-columns: repeat(3, minmax(0,1fr)) } } @media (max-width: 520px) { .games-list { grid-template-columns: repeat(2, minmax(0,1fr)) } .gifts-container { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) } }