/* #116 website khách: CHỈ phần riêng của portal. Nút, ô nhập, thẻ, bảng, hộp thoại… lấy từ thư viện dùng chung (bản chép nguyên văn design/export/components.css) — không khai lại ở đây. */ /* Lối tắt bỏ qua điều hướng (mẫu để sẵn): ẩn cho tới khi người dùng bàn phím nhảy vào. */ .pt-skip { position: absolute; left: -999px; top: 8px; z-index: 300; padding: 10px 14px; border-radius: 6px; background: var(--color-accent); color: var(--color-accent-contrast); } .pt-skip:focus { left: 8px; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } /* Tiêu đề trang nhận focus do FocusOnNavigate (tabindex=-1) — không vẽ khung quanh chữ, nhưng phần tử tương tác vẫn có vòng focus */ h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pt-app { min-height: 100vh; display: flex; flex-direction: column; } /* ----- thanh trên ----- */ .pt-top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .pt-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-family: var(--font-head); font-size: 18px; } .pt-nav { display: flex; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; } .pt-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; text-decoration: none; color: var(--color-text-muted); font-size: 14px; } .pt-link:hover { background: var(--color-accent-subtle); color: var(--color-text); } .pt-link.active { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; } .pt-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .pt-user { font-size: 13px; color: var(--color-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-theme { display: flex; gap: 3px; align-items: center; } .pt-theme input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; background: none; cursor: pointer; } .pt-burger { display: none; } /* ----- nội dung ----- */ .pt-main { flex: 1 1 auto; width: min(1100px, 100%); margin: 0 auto; padding: 22px 18px 40px; } .pt-foot { padding: 16px 18px 26px; text-align: center; font-size: 13px; border-top: 1px solid var(--color-border); } .pt-foot a { color: inherit; } .pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .pt-card { padding: 18px 20px; border-radius: 14px; } .pt-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; align-items: baseline; font-size: 14px; } .pt-kv > :nth-child(odd) { color: var(--color-text-muted); } .pt-big { font-family: var(--font-mono); font-size: 28px; font-weight: 700; } .pt-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pt-form { display: grid; gap: 12px; max-width: 420px; } .pt-field { display: grid; gap: 5px; font-size: 13px; } .pt-center { min-height: 60vh; display: grid; place-items: center; gap: 12px; } .pt-auth { width: min(420px, 100%); padding: 26px 24px; border-radius: 16px; } .pt-error { padding: 9px 12px; border-radius: 9px; font-size: 13px; background: var(--color-accent-subtle); color: var(--color-danger); } .pt-ok { padding: 9px 12px; border-radius: 9px; font-size: 13px; background: var(--color-accent-subtle); color: var(--color-success); } .pt-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pt-table th, .pt-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-border); text-align: left; } .pt-table th { color: var(--color-text-muted); font-weight: 500; } .pt-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } /* chip số tiền: cùng kiểu seg, chip đang chọn nổi bằng màu nhấn */ .pt-chips { display: flex; gap: 8px; flex-wrap: wrap; } /* hàng "số tiền khác": ô nhập không giãn hết bề ngang thẻ */ .pt-amount { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .pt-qr { width: 220px; height: 220px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); } .pt-skel { width: 180px; height: 10px; border-radius: 6px; background: var(--color-border); } .pt-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; } .pt-note { font-size: 13px; color: var(--color-text-muted); } .pt-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; } .pt-sha { word-break: break-all; font-size: 12px; } .pt-unread { font-weight: 600; } /* ----- điện thoại ----- */ @media (max-width: 760px) { .pt-top { gap: 10px; padding: 10px 14px; } /* Điện thoại: chỉ còn logo + nút menu trên thanh; mọi thứ khác nằm trong menu bung ra */ .pt-burger { display: inline-flex; margin-left: auto; order: 2; } .pt-nav, .pt-right { display: none; width: 100%; } .pt-nav { order: 3; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--color-border); } .pt-right { order: 4; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--color-border); } .pt-nav.open, .pt-right.open { display: flex; } .pt-link { padding: 11px 10px; font-size: 15px; } .pt-main { padding: 16px 14px 32px; } .pt-qr { width: 100%; height: auto; aspect-ratio: 1; } .pt-user { max-width: 120px; } } /* #123 — khung chờ tĩnh lúc chưa có circuit (xem App.razor). Tự ẩn ngay khi Blazor gắn nội dung thật: `:has()` nhìn xuống cả cây, nên chỉ cần trang thật xuất hiện là khối này biến mất, không cần một dòng JS nào (và vì vậy không phụ thuộc thứ tự tải script). */ #pt-boot { display: grid; gap: 22px; min-height: 100dvh; align-content: start; } /* PHA 3b (22/10/2026): khung chờ = ẢNH LOADING chủ dự án (đã có logo + tay cầm), phủ kín ở lớp ::before (chừa 72 px đáy cho chữ, mép dưới mờ dần); ảnh theo màn: 1280×720 · ≥ 1400 px rộng: 1920×1080 · màn dọc (≤ 3:4): bản dọc 720×1560 (cắt giữ logo + tay cầm). */ #pt-boot.pt-load { position: fixed; inset: 0; z-index: 50; display: block; gap: 0; background: #05070F; overflow: hidden; } #pt-boot.pt-load::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 72px; pointer-events: none; background: url("../_content/BestGame.Web.Ui/brand/gova-loading-1280x720.webp") 50% 40% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); } @media (min-width: 1400px) { #pt-boot.pt-load::before { background-image: url("../_content/BestGame.Web.Ui/brand/gova-loading-1920x1080.webp"); } } @media (max-aspect-ratio: 3/4) { #pt-boot.pt-load::before { bottom: 0; background-image: url("../_content/BestGame.Web.Ui/brand/gova-loading-doc-720x1560.webp"); background-position: 50% 42%; -webkit-mask-image: none; mask-image: none; } } .pt-load-band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 48px 16px clamp(18px, 4vh, 40px); background: linear-gradient(180deg, transparent, #05070FB3 55%, #05070FE0); } .pt-load-status { margin: 0; font-family: "GOVA Jakarta", var(--font-body); font-size: clamp(11px, 1.5vh, 14px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #C9CCEA; text-align: center; text-shadow: 0 1px 8px #05070F; } .pt-load-bar { width: min(320px, 60vw); height: 2px; border-radius: 2px; background: #A5B4FC2E; overflow: hidden; margin-top: 12px; } .pt-load-bar > i { display: block; width: 34%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8B5CF6, #6366F1, #38BDF8); animation: pt-load-indet 1.6s ease-in-out infinite; } @keyframes pt-load-indet { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } } @media (prefers-reduced-motion: reduce) { .pt-load-bar > i { animation: none; width: 100%; opacity: .6; } } @font-face { font-family: "GOVA Jakarta"; font-weight: 600; font-display: swap; src: url("../_content/BestGame.Web.Ui/brand/PlusJakartaSans-SemiBold.woff2") format("woff2"); } .pt-boot-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .pt-boot-body { display: grid; gap: 16px; padding: 0 clamp(16px, 4vw, 36px); max-width: 1400px; width: 100%; margin: 0 auto; } .pt-boot-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } body:has([data-ui="page"]) #pt-boot, body:has([data-ui="auth"]) #pt-boot, body:has(#main) #pt-boot { display: none; } /* --------------------------------------------------------------------------------------------- W5 v8 — TRANG CHỦ theo design/ref-2026-09-28/homepage.html (+ homepage.page.css), tiền tố [data-hx=…] như mẫu. Nền ảnh game do NcGameBackdrop (PublicLayout, Strong) lo; ở đây: hero giữa (chữ thương hiệu gradient), carousel Top 10 (cuộn ngang có snap — script bgPortal.homeCarousel trong js/portal.js tự trượt), dải nền tảng chạy ngang vô hạn. Chỉ dùng token của nc-components.css (--font-head, --grad-accent, --color-edge, --wave, --color-border-hi…). --------------------------------------------------------------------------------------------- */ [data-home] { gap: clamp(28px, 5vw, 56px); padding-top: 0; padding-left: 0; padding-right: 0; position: relative; z-index: 1; } body { overflow-x: clip; } [data-hx="hero"] { position: relative; min-height: min(calc(100dvh - 140px), 760px); display: grid; place-items: center; text-align: center; padding: clamp(48px, 9vw, 110px) clamp(16px, 4vw, 40px) clamp(24px, 4vw, 48px); } /* quầng tối sau chữ để đọc rõ trên ảnh sáng — nằm TRONG khung (inset: 0), không làm trang tràn ngang */ [data-hx="hero"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 50%, color-mix(in srgb, var(--color-bg) 70%, transparent), transparent 75%); } [data-hx="hero-in"] { display: grid; gap: 22px; justify-items: center; max-width: 760px; min-width: 0; } /* PHA 3 (22/10/2026): chữ thương hiệu lớn = LOGO GOVA chính thức (biểu tượng gradient + wordmark), không còn chữ gõ bằng font. Chữ "GOVA" (i18n home.hero.brand) vẫn nằm trong

cho trình đọc màn hình / SEO (font-size 0); ::before = biểu tượng, ::after = wordmark (mặt nạ tô màu chữ theme). Tỉ lệ = logo ngang chuẩn hero: chữ cao 0,402X, khe 0,183X (X = chiều cao biểu tượng). */ [data-hx="word"] { --gv-x: clamp(72px, 13vw, 168px); display: inline-flex; align-items: center; gap: calc(var(--gv-x) * .183); margin: 0; font-size: 0; line-height: 0; color: transparent; filter: drop-shadow(0 10px 40px color-mix(in srgb, var(--color-accent) 40%, transparent)); } [data-hx="word"]::before { content: ""; width: calc(var(--gv-x) * .8857); height: var(--gv-x); flex: none; background: url("../_content/BestGame.Web.Ui/brand/gova-icon.svg") center / contain no-repeat; } [data-hx="word"]::after { content: ""; height: calc(var(--gv-x) * .402); aspect-ratio: 424.14 / 100; flex: none; background: var(--color-text); -webkit-mask: url("../_content/BestGame.Web.Ui/brand/gova-wordmark.svg") center / contain no-repeat; mask: url("../_content/BestGame.Web.Ui/brand/gova-wordmark.svg") center / contain no-repeat; } html[data-theme="light"] [data-hx="word"] { filter: none; } /* #166: khẩu hiệu GOVA dưới chữ thương hiệu (hero trang chủ + Giới thiệu) */ [data-hx="slogan"] { margin: -6px 0 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(18px, 2.6vw, 30px); letter-spacing: .03em; color: var(--color-accent); text-shadow: 0 2px 14px color-mix(in srgb, var(--color-bg) 70%, transparent); } [data-hx="lead"] { margin: 0; max-width: 620px; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; color: var(--color-text); text-shadow: 0 2px 14px color-mix(in srgb, var(--color-bg) 70%, transparent); } [data-hx="cta"] { justify-content: center; } [data-hx="facts"] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-text-muted); } [data-hx="facts"] li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } [data-hx="facts"] i { color: var(--color-accent); } [data-hx="sec"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 clamp(16px, 3vw, 40px); min-width: 0; } [data-hx="sec"][data-hx-center] { justify-items: center; text-align: center; padding-bottom: clamp(40px, 6vw, 80px); } [data-hx="head"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } [data-hx="head"] h2 { margin: 0; font-size: clamp(20px, 2.4vw, 28px); } [data-hx="car"] { position: relative; min-width: 0; overflow: hidden; padding: 18px 0 26px; margin: -18px 0 -26px; } [data-hx="track"] { display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: clamp(18px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 18px 4px 26px; margin: -18px 0 -26px; overscroll-behavior-x: contain; list-style: none; outline: 0; } [data-hx="track"]::-webkit-scrollbar { display: none; } /* 0.2.163: đang trượt bằng script (portal.js glide) → tắt snap + cuộn mượt của CSS để từng khung không bị kéo giật về điểm snap */ [data-hx="track"][data-glide] { scroll-snap-type: none; scroll-behavior: auto; } [data-hx="track"] > li { display: contents; } [data-hx="item"] { scroll-snap-align: start; display: grid; grid-template-columns: var(--rw, clamp(70px, 7vw, 104px)) var(--cw, clamp(240px, 26vw, 360px)); align-items: end; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: #fff; cursor: pointer; outline: 0; } [data-hx="item"][data-wide] { --rw: clamp(118px, 11vw, 168px); } /* 0.2.163: carousel AAA trang chủ không có cột số hạng — thẻ rộng hơn */ [data-norank] [data-hx="item"] { grid-template-columns: var(--cw, clamp(270px, 30vw, 420px)); } [data-hx="rank"] { font-family: var(--font-head); font-weight: 700; font-size: clamp(110px, 11vw, 168px); line-height: .78; margin-right: -.18em; text-align: right; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--color-text) 55%, transparent); position: relative; z-index: 0; transition: -webkit-text-stroke-color .4s, transform .45s cubic-bezier(.16, .84, .24, 1); } [data-hx="card"] { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-hi); background: var(--color-surface-2); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); transition: transform .45s cubic-bezier(.16, .84, .24, 1), box-shadow .45s, border-color .45s; } [data-hx="card"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16, .84, .24, 1); } [data-hx="card"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 16, .92) 100%); } [data-hx="meta"] { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px; display: grid; gap: 6px; } [data-hx="meta"] strong { font-family: var(--font-head); font-size: 18px; line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-hx="sub"] { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #c9cde0; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; } [data-hx="play"] { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-accent); color: #fff; box-shadow: 0 8px 20px -6px var(--wave); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.5, .4, 1); } [data-hx="item"]:hover [data-hx="card"], [data-hx="item"]:focus-visible [data-hx="card"] { transform: translateY(-6px); border-color: var(--color-edge); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-edge) 40%, transparent), 0 26px 50px -20px color-mix(in srgb, var(--color-accent) 55%, #000); } [data-hx="item"]:hover img { transform: scale(1.07); } [data-hx="item"]:hover [data-hx="sub"], [data-hx="item"]:focus-visible [data-hx="sub"], [data-hx="item"]:hover [data-hx="play"], [data-hx="item"]:focus-visible [data-hx="play"] { opacity: 1; transform: none; } [data-hx="item"]:hover [data-hx="rank"] { -webkit-text-stroke-color: var(--color-edge); transform: translateX(-4px); } [data-hx="track"] > li:nth-child(-n+3) [data-hx="rank"] { -webkit-text-stroke-color: color-mix(in srgb, var(--color-accent) 80%, #fff); } [data-hx="nav"] { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-border-hi); background: color-mix(in srgb, var(--color-surface) 80%, transparent); backdrop-filter: blur(10px); color: var(--color-text); display: grid; place-items: center; cursor: pointer; transition: opacity .3s, transform .3s, border-color .3s; } [data-hx="nav"]:hover:not(:disabled) { border-color: var(--color-edge); transform: translateY(-50%) scale(1.06); } [data-hx="nav"]:disabled { opacity: 0; pointer-events: none; } [data-hx="nav"][data-dir="-1"] { left: 6px; } [data-hx="nav"][data-dir="1"] { right: 6px; } [data-hx="fade"] { position: absolute; top: 0; bottom: 0; width: 72px; z-index: 3; pointer-events: none; transition: opacity .3s; } [data-hx="fade"][data-side="l"] { left: 0; background: linear-gradient(90deg, var(--color-bg), transparent); } [data-hx="fade"][data-side="r"] { right: 0; background: linear-gradient(270deg, var(--color-bg), transparent); } [data-hx="bar"] { width: clamp(120px, 16vw, 220px); height: 3px; border-radius: 2px; background: var(--color-border); overflow: hidden; } [data-hx="bar"] > span { display: block; height: 100%; width: 20%; background: var(--grad-accent); border-radius: inherit; transition: transform .4s cubic-bezier(.16, .84, .24, 1), width .4s; } /* dải nền tảng: hai bản danh sách nối nhau, dịch -50% — chạy ngang vô hạn, rê chuột thì dừng */ [data-hx="plat-wrap"] { width: 100%; overflow: hidden; padding: 6px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } [data-hx="plat"] { display: flex; gap: clamp(20px, 3vw, 44px); width: max-content; margin: 0; padding: 0 0 0 clamp(20px, 3vw, 44px); list-style: none; animation: ncplat 72s linear infinite; } [data-hx="plat-wrap"]:hover [data-hx="plat"] { animation-play-state: paused; } @keyframes ncplat { to { transform: translateX(-50%); } } [data-hx="plat"] > li { display: grid; justify-items: center; gap: 8px; min-width: 88px; color: var(--color-text-muted); font-size: 13px; transition: color .3s, transform .35s; } [data-hx="plat"] > li:hover { color: var(--color-text); transform: translateY(-3px); } [data-hx="mark"] { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 70%, transparent); backdrop-filter: blur(6px); transition: border-color .35s, box-shadow .35s; } /* logo SVG đơn sắc làm mặt nạ (url() đặt thẳng trong style của — xem Home.Mark) tô bằng màu chữ → theo Tối/Sáng */ [data-hx="mark"] > i { display: block; width: 32px; height: 32px; background: currentColor; color: var(--color-text); opacity: .9; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: color .35s; } [data-hx="plat"] > li:hover [data-hx="mark"] { border-color: var(--color-edge); box-shadow: 0 0 18px -6px var(--wave); } [data-hx="plat"] > li:hover [data-hx="mark"] > i { color: var(--color-edge); } [data-hx="tm"] { margin: 0; } @media (max-width: 767px) { [data-hx="item"] { --rw: 64px; --cw: min(68vw, 300px); } [data-hx="item"][data-wide] { --rw: 100px; } [data-hx="nav"] { display: none; } [data-hx="rank"] { font-size: 88px; } [data-hx="sub"], [data-hx="play"] { opacity: 1; transform: none; } [data-hx="hero"] { min-height: calc(100dvh - 200px); } } /* 0.2.155 + W5 v8 (chủ dự án 28/09: "carousel tự chuyển động"): prefers-reduced-motion KHÔNG dừng hẳn (máy tắt hiệu ứng Windows báo reduced-motion → khách tưởng hỏng) — chỉ chậm hơn; carousel Top 10 do script tự đổi nhịp 3,8 s → 6,5 s. */ @media (prefers-reduced-motion: reduce) { [data-hx="plat"] { animation-duration: 150s; } } /* --------------------------------------------------------------------------------------------- W5 v8 — BẢNG GIÁ theo design/ref-2026-09-28/pricing.html (+ pricing.page.css), tiền tố [data-px=…] như mẫu. Tab chu kỳ viên thuốc, lưới thẻ sản phẩm (--n = số cột, tối đa 3). v10 mục 168: thẻ CAO BẰNG NHAU (align-items: stretch, thẻ là cột flex, chân thẻ margin-top:auto), KHÔNG phóng to thẻ chủ lực — thẻ chủ lực nổi bằng viền + nhãn + nền và cột giữa rộng hơn (1.22fr); dòng thiếu dữ liệu giữ chỗ bằng [data-px="ph"] cùng chiều cao. --------------------------------------------------------------------------------------------- */ [data-px="tabs"] { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; padding: 4px; border-radius: 999px; border: 1px solid var(--color-border-hi); background: color-mix(in srgb, var(--color-surface) 80%, transparent); backdrop-filter: blur(10px); gap: 2px; } [data-px="tabs"] button { border: 0; background: transparent; color: var(--color-text-muted); min-height: 40px; padding: 0 20px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: background .35s, color .35s, box-shadow .35s; } [data-px="tabs"] button[aria-selected="true"] { background: var(--grad-accent); color: var(--color-accent-contrast); box-shadow: 0 6px 18px -8px var(--wave); } [data-px="tabs"] small { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); } [data-px="tabs"] button[aria-selected="true"] small { background: rgba(255, 255, 255, .22); color: #fff; } [data-px="grid"] { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; max-width: min(1180px, calc(var(--n, 3) * 420px)); width: 100%; margin: 0 auto; } @media (max-width: 959px) { [data-px="grid"] { grid-template-columns: minmax(0, 1fr); max-width: 480px; } } /* 0.2.164: thẻ chủ lực ở giữa, cột rộng hơn hai bên; một cột (điện thoại) thì thẻ chủ lực lên đầu */ @media (min-width: 960px) { [data-px="grid"][style*="--n:3"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); } [data-px="grid"][style*="--n:3"] [data-px="card"]:not([data-hot]) { font-size: 0.95em; } } @media (max-width: 959px) { [data-px="card"][data-hot] { order: -1; } } [data-px="card"] { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border-radius: 18px; border: 1px solid var(--color-border-hi); background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, transparent), color-mix(in srgb, var(--color-bg) 92%, transparent)); backdrop-filter: blur(12px); padding: clamp(20px, 2.4vw, 28px); display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 8); row-gap: 18px; align-content: start; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .85); transition: transform .45s cubic-bezier(.16, .84, .24, 1), border-color .45s, box-shadow .45s; } /* khối giá của tab KHÔNG chọn có `hidden` — [data-ui=stack] (display: grid) đè mất thuộc tính này nên phải ẩn lại (đo bằng w5-web.sh) */ [data-px="card"] [hidden] { display: none !important; } [data-px="card"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; z-index: -1; background: radial-gradient(90% 100% at 20% 0%, color-mix(in srgb, var(--c) 42%, transparent), transparent 70%), radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); opacity: .8; transition: opacity .45s; } [data-px="card"]:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 30px 70px -28px color-mix(in srgb, var(--c) 55%, #000); } [data-px="card"]:hover::before { opacity: 1; } [data-px="card"][data-hot] { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 40px 90px -30px color-mix(in srgb, var(--c) 60%, #000); } [data-px="card"][data-hot] { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--color-surface)), color-mix(in srgb, var(--color-bg) 92%, transparent)); } [data-px="card"][data-hot]::before { height: 240px; opacity: 1; } [data-px="logo"] { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 10px 24px -10px var(--c), inset 0 1px 0 rgba(255, 255, 255, .35); } [data-px="hot"] { position: absolute; right: 16px; top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(6px); } html[data-theme="light"] [data-px="hot"] { background: var(--color-accent-subtle); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); } [data-px="price"] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 48px; } [data-px="price"] b { font-family: var(--font-mono); font-weight: 600; font-size: clamp(30px, 3.2vw, 40px); line-height: 1; } [data-px="price"] s { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); } [data-px="spec"] { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; } [data-px="spec"] li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 22px; } [data-px="spec"] li > i { color: color-mix(in srgb, var(--c) 75%, var(--color-text)); text-align: center; } [data-px="spec"] li > b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; text-align: right; overflow-wrap: anywhere; } [data-px="spec"] li > span { color: var(--color-text-muted); } [data-px="div"] { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); } [data-px="div"]::before, [data-px="div"]::after { content: ""; flex: 1; border-top: 1px dashed var(--color-border-hi); } [data-px="feat"] { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; } [data-px="feat"] li { display: flex; gap: 10px; align-items: center; min-height: 22px; } [data-px="feat"] li > i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: none; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 80%, var(--color-text)); } /* v10 mục 168: ô giữ chỗ (dòng thiếu dữ liệu) — cùng chiều cao dòng thật, không vẽ gì */ [data-px="ph"] { display: block; visibility: hidden; } [data-px="ph"][data-row="saving"] { min-height: 28px; } [data-px="ph"][data-row="avg"] { min-height: 18px; } [data-px="ph"][data-row="note"] { min-height: 40px; } [data-px="ph"][data-row="free"] { min-height: 18px; } [data-px="spec"] li[data-px="ph"], [data-px="feat"] li[data-px="ph"] { min-height: 22px; } [data-px="price"][aria-hidden="true"] { visibility: hidden; } [data-px="foot"] { margin-top: auto; align-self: end; display: grid; gap: 8px; } [data-px="ph"][data-row="hint"] { min-height: 18px; } /* trình duyệt chưa có subgrid (Chrome < 117, Safari < 16): thẻ là cột flex, chân thẻ vẫn ghim đáy — chỉ các dòng giữa có thể lệch nhẹ */ @supports not (grid-template-rows: subgrid) { [data-px="card"] { display: flex; flex-direction: column; gap: 18px; grid-row: auto; } } @media (prefers-reduced-motion: reduce) { [data-px="card"], [data-px="card"]::before { transition: none; } } /* --------------------------------------------------------------------------------------------- W5 v8 — BẢNG ĐIỀU KHIỂN KHÁCH (/app, AppLayout): nền ảnh game ĐẦY ĐỦ (NcGameBackdrop Strong — chủ dự án 28/09 "Tại Bảng điều khiển của User cũng phải có background đầy đủ"); thẻ/khung dạng KÍNH MỜ để chữ vẫn rõ trên ảnh. Chỉ áp trong [data-ui="shell"] (khung /app) — trang công khai không đổi. Màu lấy từ token (--color-surface/--color-bg) nên tự theo Tối/Sáng/Tuỳ chỉnh; tỉ lệ phủ 74–82 % giữ tương phản chữ ≥ 4,5:1 cả khi ảnh sáng. --------------------------------------------------------------------------------------------- */ /* K-T28l: portal KHÔNG khai lại thuộc tính hình thức của component → chỉ đổi TOKEN (--grad-surface, --color-surface) trong phạm vi /app. --glass* tính MỘT lần ở khung (màu mặt thật của theme đang dùng) rồi kế thừa xuống — gán lại --color-surface = var(--glass) ở con không bị vòng lặp biến. Nút phụ/ô chọn trong thẻ lấy lại nền đặc (--grad-solid) để không chồng hai lớp kính. */ [data-ui="shell"] { --glass: color-mix(in srgb, var(--color-surface) 76%, transparent); --glass-hi: color-mix(in srgb, var(--color-surface) 86%, transparent); --glass-side: color-mix(in srgb, var(--color-surface) 82%, transparent); --grad-solid: var(--grad-surface); } html[data-theme="light"] [data-ui="shell"] { --glass: color-mix(in srgb, var(--color-surface) 82%, transparent); --glass-hi: color-mix(in srgb, var(--color-surface) 90%, transparent); --glass-side: color-mix(in srgb, var(--color-surface) 86%, transparent); } [data-ui="shell"] > [data-ui="side"] { --color-surface: var(--glass-side); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); } [data-ui="shell"] [data-ui="card-static"], [data-ui="shell"] [data-ui="card"] { --grad-surface: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass) 100%); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } [data-ui="shell"] [data-ui="table-wrap"] { --color-surface: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } [data-ui="shell"] :is([data-ui="card-static"], [data-ui="card"]) :is([data-ui="btn-s"], [data-ui="select"]) { --grad-surface: var(--grad-solid); } [data-ui="shell"] [data-ui="page-head"] h1 { text-shadow: 0 2px 16px color-mix(in srgb, var(--color-bg) 80%, transparent); } /* --------------------------------------------------------------------------------------------- W6 v8 — THƯ VIỆN GAME (/games) theo trang chủ GOVA Station (src/Edge/bg-launcher/Web): banner game nổi bật + các hàng kiểu Netflix. Hàng dùng LẠI khung carousel Top 10 của trang chủ ([data-hx=sec|head|car|track|item|rank|card|meta|sub|play|nav|fade|bar] ở trên) — ở đây chỉ thêm: banner [data-gx=hero], thẻ không số hạng ([data-plain]), phóng to khi rê, hiện dần khi cuộn tới, kéo chuột. Chỉ token của nc-components.css (--font-head, --grad-accent, --color-*, --radius, --shadow-hover, --wave); không khai lại component [data-ui]. --------------------------------------------------------------------------------------------- */ [data-games] { --gx-r: calc(var(--radius, 6px) * 2 + 2px); gap: clamp(22px, 4vw, 44px); padding: 0 0 clamp(28px, 4vw, 48px); position: relative; z-index: 1; min-width: 0; } [data-gx="body"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 44px); min-width: 0; } [data-gx="body"] > :not([data-gx="row"]) { margin-inline: clamp(16px, 3vw, 40px); } /* thanh tiện ích gọn: tiêu đề trang bên trái, tìm/lọc bên phải (màn hẹp thì xuống dòng); kéo lên phủ đáy banner như Station */ [data-gx="tools"] { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 28px; min-width: 0; } [data-gx="tools"] > * { min-width: 0; } [data-gx="tools-h"] { flex: 1 1 320px; } [data-gx="filters"] { flex: 999 1 560px; flex-wrap: wrap; justify-content: flex-end; } [data-gx="hero"] + [data-gx="body"] { margin-top: calc(clamp(22px, 4vw, 44px) * -1 - 36px); position: relative; z-index: 2; } /* ----- banner nổi bật: các game chồng lên nhau, game đang chọn [data-on] hiện dần; ảnh trôi chậm (Ken Burns) ----- */ [data-gx="hero"] { position: relative; display: grid; min-height: clamp(420px, 62vh, 680px); overflow: hidden; isolation: isolate; } /* đáy banner mờ dần vào nền ảnh game của trang (NcGameBackdrop) — không còn mép ngang ở chế độ Sáng (ảnh w6-games-vi-light-1920) */ [data-gx="hero"]:not([data-skel]) { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); } [data-gx="hero"][data-skel] { min-height: clamp(420px, 62vh, 680px); } [data-gx="slide"] { grid-area: 1 / 1; position: relative; display: grid; align-items: end; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.16, .84, .24, 1), visibility 0s linear .9s; } [data-gx="slide"][data-on], [data-gx="hero"]:not([data-ready]) [data-gx="slide"]:first-of-type { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; } [data-gx="slide"] > img[data-gx="bg"] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: -2; transform: scale(1.08); transition: transform var(--gx-ms, 6500ms) linear; user-select: none; -webkit-user-drag: none; } [data-gx="slide"][data-on] > img[data-gx="bg"] { transform: scale(1); } /* lớp tối phía chữ (trái + đáy) như Station — màu theo nền của theme để chữ đọc rõ cả Tối lẫn Sáng */ [data-gx="slide"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 92%, transparent) 0%, color-mix(in srgb, var(--color-bg) 62%, transparent) 34%, transparent 70%), linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 55%, transparent) 26%, transparent 60%); } [data-gx="copy"] { display: grid; gap: 14px; justify-items: start; max-width: min(720px, 100%); min-width: 0; padding: 0 clamp(16px, 3vw, 40px) calc(clamp(64px, 8vh, 96px) + 72px); } [data-gx="copy"] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .7s cubic-bezier(.16, .84, .24, 1); } [data-gx="slide"][data-on] [data-gx="copy"] > *, [data-gx="hero"]:not([data-ready]) [data-gx="copy"] > * { opacity: 1; transform: none; } [data-gx="slide"][data-on] [data-gx="copy"] > :nth-child(2) { transition-delay: .08s; } [data-gx="slide"][data-on] [data-gx="copy"] > :nth-child(3) { transition-delay: .16s; } [data-gx="slide"][data-on] [data-gx="copy"] > :nth-child(4) { transition-delay: .24s; } [data-gx="slide"][data-on] [data-gx="copy"] > :nth-child(5) { transition-delay: .32s; } [data-gx="kicker"] { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-accent) 70%, var(--color-text)); } [data-gx="title"] { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 5.4vw, 72px); line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; text-shadow: 0 4px 24px color-mix(in srgb, var(--color-bg) 70%, transparent); } [data-gx="desc"] { margin: 0; max-width: 620px; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 12px color-mix(in srgb, var(--color-bg) 80%, transparent); } [data-gx="tags"] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } [data-gx="tags"] li { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--color-border-hi); background: color-mix(in srgb, var(--color-surface) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-gx="cta"] { gap: 12px; } /* chấm vị trí: chấm đang chọn dài ra, vạch trắng chạy hết thời gian của game (dừng khi rê) */ [data-gx="dots"] { position: absolute; left: clamp(16px, 3vw, 40px); bottom: calc(clamp(24px, 4vh, 40px) + 72px); z-index: 3; display: flex; gap: 8px; align-items: center; } [data-gx="dot"] { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--color-text) 35%, transparent); transition: width .35s cubic-bezier(.16, .84, .24, 1), background .35s; } [data-gx="dot"]::before { content: ""; position: absolute; inset: -12px -2px; } /* vùng bấm lớn hơn chấm */ [data-gx="dot"][data-on] { width: 42px; background: color-mix(in srgb, var(--color-text) 25%, transparent); } [data-gx="dot"] > span { position: absolute; inset: 0; width: 0; background: var(--grad-accent); border-radius: inherit; } [data-gx="dot"][data-on] > span { width: 100%; } [data-gx="dot"][data-on][data-run] > span { width: 0; animation: gx-fill var(--gx-ms, 6500ms) linear forwards; } [data-gx="hero"][data-hold] [data-gx="dot"] > span { animation-play-state: paused; } [data-gx="dot"]:focus-visible { outline: 2px solid var(--color-edge); outline-offset: 3px; } @keyframes gx-fill { from { width: 0; } to { width: 100%; } } /* ----- hàng: tiêu đề + đếm, thẻ thường (không số hạng) hẹp hơn thẻ Top ----- */ [data-gx="row"] { padding: 0 clamp(16px, 3vw, 40px); gap: 14px; } [data-gx="row-h"] { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: clamp(19px, 2.2vw, 26px); } [data-gx="row-h"] small { font-family: var(--font-body, inherit); font-size: 13px; font-weight: 400; color: var(--color-text-muted); } [data-games] [data-hx="item"][data-plain] { grid-template-columns: var(--cw, clamp(220px, 21vw, 320px)); } [data-games] [data-hx="card"] { border-radius: var(--gx-r); } /* hàng ít thẻ: cột 'auto' của lưới bị kéo giãn cho đầy bề ngang → thẻ cách nhau nửa màn (đo bằng w6-web.sh) — dồn về đầu hàng */ [data-games] [data-hx="track"] { justify-content: start; } /* 0.2.163 (chủ dự án 28/09: tìm ra 1 game thì thẻ to hết khung): lưới dùng auto-fill — cột trống vẫn giữ chỗ, thẻ tối đa ~360 px */ [data-games] [data-testid="game-grid"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } @media (min-width: 768px) { [data-games] [data-testid="game-grid"] { grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); } } /* rê chuột / tiêu điểm: thẻ nổi lên + PHÓNG TO, ảnh zoom, hiện nút phát + launcher · thể loại (phần hiện của trang chủ ở trên) */ [data-games] [data-hx="item"]:hover [data-hx="card"], [data-games] [data-hx="item"]:focus-visible [data-hx="card"] { transform: translateY(-6px) scale(1.05); box-shadow: var(--shadow-hover); } [data-games] [data-hx="item"]:active [data-hx="card"] { transform: translateY(-2px) scale(1.02); } [data-games] [data-hx="item"]:focus-visible [data-hx="card"] { outline: 2px solid var(--color-edge); outline-offset: 3px; } [data-games] [data-hx="car"] { padding-top: 22px; margin-top: -22px; } /* kéo bằng chuột: tắt snap + cuộn mượt trong lúc kéo, con trỏ nắm tay */ [data-games] [data-hx="track"] { cursor: grab; } [data-games] [data-hx="track"][data-drag] { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } [data-games] [data-hx="track"][data-drag] [data-hx="item"] { pointer-events: none; } [data-games] [data-hx="card"] img { -webkit-user-drag: none; user-select: none; } /* ----- hiện dần khi cuộn tới (games.js gắn [data-in] bằng IntersectionObserver). Không có JS → không ẩn gì ----- */ [data-gx-ready] [data-gx="row"]:not([data-in]) [data-gx="row-h"], [data-gx-ready] [data-gx="row"]:not([data-in]) [data-gx="item"] { opacity: 0; } [data-gx="row"][data-in] [data-gx="row-h"] { animation: gx-up .6s cubic-bezier(.16, .84, .24, 1) both; } [data-gx="row"][data-in] [data-gx="item"] { animation: gx-up .7s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); } [data-gx="hero"][data-in] [data-gx="dots"] { animation: gx-up .6s .3s cubic-bezier(.16, .84, .24, 1) both; } @keyframes gx-up { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } /* khung chờ */ [data-gx="skel-row"] { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 21vw, 320px); gap: clamp(18px, 2vw, 28px); overflow: hidden; } [data-gx="skel-row"] > span { display: block; aspect-ratio: 16 / 10; border-radius: var(--gx-r); } @media (max-width: 767px) { [data-games] [data-hx="item"][data-plain] { --cw: min(62vw, 260px); } [data-gx="hero"] { min-height: clamp(460px, 78vh, 640px); } [data-gx="copy"] { padding-bottom: 136px; } [data-gx="slide"]::before { background: linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 78%, transparent) 45%, color-mix(in srgb, var(--color-bg) 20%, transparent) 100%); } [data-gx="cta"] > * { flex: 1 1 auto; } /* điện thoại: ô tìm + hai ô lọc mỗi ô một dòng đủ rộng (đè flex nội tuyến của nhãn) */ [data-gx="filters"] > label { flex: 1 1 100% !important; max-width: none !important; } [data-gx="filters"] > button { flex: 1 1 100%; } } /* reduced-motion: chủ dự án muốn hoạt ảnh LUÔN chạy — KHÔNG tắt, chỉ chậm lại (banner đổi 10 s và ảnh trôi theo đó — do script; thẻ hiện cùng lúc, chậm hơn, không so le) */ @media (prefers-reduced-motion: reduce) { [data-gx="row"][data-in] [data-gx="item"] { animation-duration: 1s; animation-delay: 0s; } } /* --------------------------------------------------------------------------------------------- W12 (05/10, chủ dự án) — MỖI HÀNG MỘT KIỂU TRÌNH BÀY theo [data-layout] (GameLibrary.Layout). Khung carousel giữ nguyên (data-hx=car/track/item) nên nút trước/sau, kéo chuột, phím ← → của games.js chạy như cũ. Không hàng nào tràn ngang trang: track tự cuộn trong [data-hx=car] (overflow: hidden). Chỉ token (--grad-accent, --color-*, --gx-r, --wave). · rank Top 10: thẻ dọc 2:3 + số hạng lớn, đậm (ba hạng đầu tô màu nhấn) · tall Mới thêm: thẻ dọc lớn + nhãn "Mới" · hero featured / Game AAA: thẻ đầu to cao hai tầng, các thẻ sau nhỏ xếp hai tầng · compact Cài sẵn trong máy GOVA: lưới gọn ba dòng (ảnh nhỏ + tên + launcher), nhiều game một màn · square danh mục: thẻ vuông nhỏ · launcher: thẻ nhỏ + logo launcher ở góc · wide: thẻ ngang 16:10 (mặc định ở trên) --------------------------------------------------------------------------------------------- */ /* tên game trên thẻ hẹp: hai dòng thay vì cắt một dòng */ [data-games] :is([data-layout="rank"], [data-layout="tall"], [data-layout="square"], [data-layout="launcher"]) [data-hx="meta"] { padding: 10px 12px; gap: 4px; } [data-games] :is([data-layout="rank"], [data-layout="tall"], [data-layout="square"], [data-layout="launcher"]) [data-hx="meta"] strong { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } [data-games] :is([data-layout="rank"], [data-layout="tall"], [data-layout="square"], [data-layout="launcher"]) [data-hx="play"] { width: 36px; height: 36px; right: 10px; top: 10px; } /* rank — thẻ dọc 2:3, số hạng cao bằng thẻ */ [data-games] [data-layout="rank"] [data-hx="item"] { --rw: clamp(84px, 8vw, 124px); --cw: clamp(150px, 13vw, 196px); } [data-games] [data-layout="rank"] [data-hx="item"][data-wide] { --rw: clamp(140px, 13vw, 196px); } [data-games] [data-layout="rank"] [data-hx="card"] { aspect-ratio: 2 / 3; } [data-games] [data-layout="rank"] [data-hx="rank"] { font-size: clamp(128px, 13vw, 210px); -webkit-text-stroke-width: 3px; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--color-bg) 80%, transparent)); } [data-games] [data-layout="rank"] [data-hx="track"] > li:nth-child(-n+3) [data-hx="rank"] { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 85%); -webkit-background-clip: text; background-clip: text; } /* ảnh dọc (600×900) phủ trên ảnh ngang; lỗi thì ẩn (onerror) → còn ảnh ngang cắt 2:3 */ [data-games] [data-hx="card"] img[data-gx="poster"] { z-index: 0; } /* tall — Mới thêm */ [data-games] [data-layout="tall"] [data-hx="item"][data-plain] { --cw: clamp(176px, 15vw, 232px); } [data-games] [data-layout="tall"] [data-hx="card"] { aspect-ratio: 2 / 3; } [data-gx="badge"] { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--grad-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px -6px var(--wave); } [data-gx="badge"] i { font-size: 10px; } /* hero — featured / AAA: hai tầng, thẻ đầu chiếm cả hai tầng */ [data-games] [data-layout="hero"] [data-hx="track"] { grid-template-rows: repeat(2, auto); grid-auto-flow: column; row-gap: clamp(12px, 1.4vw, 18px); } [data-games] [data-layout="hero"] [data-hx="item"][data-plain] { --cw: clamp(196px, 17vw, 256px); } [data-games] [data-layout="hero"] [data-hx="item"][data-big] { --cw: clamp(340px, 36vw, 580px); grid-row: 1 / span 2; align-items: stretch; grid-template-rows: minmax(0, 1fr); } [data-games] [data-layout="hero"] [data-hx="item"][data-big] [data-hx="card"] { aspect-ratio: auto; min-height: 100%; } [data-games] [data-layout="hero"] [data-hx="item"]:not([data-big]) [data-hx="meta"] { padding: 10px 12px; } [data-games] [data-layout="hero"] [data-hx="item"]:not([data-big]) [data-hx="meta"] strong { font-size: 15px; } [data-games] [data-layout="hero"] [data-hx="item"]:not([data-big]) [data-hx="play"] { width: 34px; height: 34px; right: 10px; top: 10px; } [data-games] [data-layout="hero"] [data-big] [data-hx="meta"] { padding: 18px 20px; } [data-games] [data-layout="hero"] [data-big] [data-hx="meta"] strong { font-size: clamp(20px, 2.2vw, 30px); white-space: normal; } [data-games] [data-layout="hero"] [data-big] [data-hx="sub"] { opacity: 1; transform: none; } /* compact — Cài sẵn trong máy GOVA: lưới gọn 3 dòng cuộn ngang theo cột */ [data-games] [data-layout="compact"] [data-hx="track"] { grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: clamp(250px, 23vw, 330px); gap: 10px clamp(12px, 1.4vw, 18px); padding-top: 6px; margin-top: -6px; } [data-games] [data-layout="compact"] [data-hx="item"][data-plain] { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 7px 12px 7px 7px; border-radius: var(--gx-r); border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 78%, transparent); color: var(--color-text); transition: transform .3s cubic-bezier(.16, .84, .24, 1), border-color .3s, background .3s, box-shadow .3s; } [data-games] [data-layout="compact"] [data-hx="item"]:hover, [data-games] [data-layout="compact"] [data-hx="item"]:focus-visible { transform: translateY(-3px); border-color: var(--color-edge); background: var(--color-surface-2); box-shadow: var(--shadow-hover); } [data-games] [data-layout="compact"] [data-hx="item"]:focus-visible { outline: 2px solid var(--color-edge); outline-offset: 2px; } [data-gx="thumb"] { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--gx-r) - 4px); background: var(--color-surface-2); } [data-gx="thumb"] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; } [data-gx="ci"] { display: grid; gap: 3px; min-width: 0; } [data-gx="ci"] strong { font-size: 14px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-gx="ci-sub"] { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* square — danh mục */ [data-games] [data-layout="square"] [data-hx="item"][data-plain] { --cw: clamp(150px, 12vw, 188px); } [data-games] [data-layout="square"] [data-hx="card"] { aspect-ratio: 1 / 1; } /* launcher — thẻ nhỏ + logo launcher ở góc */ [data-games] [data-layout="launcher"] [data-hx="item"][data-plain] { --cw: clamp(176px, 14vw, 216px); } [data-gx="ln"][data-ln-mark] { position: absolute; left: 10px; top: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 9px; color: #fff; font-size: 14px; } [data-gx="ln"][data-ln-mark] > i { width: 18px; height: 18px; } @media (max-width: 767px) { [data-games] [data-layout="rank"] [data-hx="item"] { --rw: 58px; --cw: min(40vw, 168px); } [data-games] [data-layout="rank"] [data-hx="item"][data-wide] { --rw: 96px; } [data-games] [data-layout="rank"] [data-hx="rank"] { font-size: 104px; -webkit-text-stroke-width: 2px; } [data-games] [data-layout="tall"] [data-hx="item"][data-plain] { --cw: min(44vw, 188px); } [data-games] [data-layout="hero"] [data-hx="item"][data-plain] { --cw: min(42vw, 176px); } [data-games] [data-layout="hero"] [data-hx="item"][data-big] { --cw: min(78vw, 320px); } [data-games] [data-layout="hero"] [data-big] [data-hx="meta"] { padding: 14px; } [data-games] [data-layout="compact"] [data-hx="track"] { grid-auto-columns: min(80vw, 320px); } [data-games] [data-layout="compact"] [data-hx="item"][data-plain] { grid-template-columns: 88px minmax(0, 1fr); } [data-games] [data-layout="square"] [data-hx="item"][data-plain] { --cw: min(38vw, 160px); } [data-games] [data-layout="launcher"] [data-hx="item"][data-plain] { --cw: min(44vw, 180px); } } /* --------------------------------------------------------------------------------------------- 0.2.164 (chủ dự án 28/09) — bảng điều khiển khách: icon launcher · Trung tâm hỗ trợ · Thông báo --------------------------------------------------------------------------------------------- */ /* ô icon launcher: nền màu thương hiệu, logo SVG đơn sắc làm mặt nạ tô trắng */ [data-ln-mark] { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--ln, var(--grad-accent)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 8px 18px -10px var(--ln, #000); } [data-ln-mark] > i { display: block; width: 26px; height: 26px; background: #fff; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } [data-ln-mark="steam"] { --ln: linear-gradient(135deg, #1b2838, #2a475e 60%, #1a9fff); } [data-ln-mark="ea"] { --ln: linear-gradient(135deg, #ff4747, #c4122f); } [data-ln-mark="epic"] { --ln: linear-gradient(135deg, #2f2f2f, #121212); } [data-ln-mark="ubisoft"] { --ln: linear-gradient(135deg, #0070ff, #1c1c8c); } [data-ln-mark="battlenet"] { --ln: linear-gradient(135deg, #148eff, #0b4ea2); } [data-ln-mark="gog"] { --ln: linear-gradient(135deg, #86328a, #4b1d6e); } /* Hỗ trợ — liên hệ trực tiếp (Discord / Zalo) */ [data-sx="contact"] { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } [data-sx="ch"] { --c: var(--color-accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--color-border)); color: var(--color-text); text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--color-surface)), var(--color-surface) 70%); transition: transform .3s cubic-bezier(.16, .84, .24, 1), box-shadow .3s, border-color .3s; } [data-sx="ch"]:hover, [data-sx="ch"]:focus-visible { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 16px 34px -18px var(--c); } [data-sx="ic"] { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c); color: #fff; font-size: 26px; } [data-sx="tx"] { display: grid; gap: 3px; min-width: 0; } [data-sx="tx"] strong { font-family: var(--font-head); font-size: 17px; } [data-sx="tx"] span { font-size: 13px; color: var(--color-text-muted); } [data-sx="cta"] { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--c); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; } [data-sx="cta"] i { font-size: 11px; } [data-social="discord"][data-sx] { --c: #5865f2; } [data-social="zalo"][data-sx] { --c: #0068ff; } @media (max-width: 560px) { [data-sx="ch"] { grid-template-columns: auto minmax(0, 1fr); } [data-sx="cta"] { grid-column: 1 / -1; justify-content: center; } } /* Hỗ trợ — theo dõi GOVA (quảng bá YouTube / Facebook / TikTok / X) */ [data-sx="promo"] { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } [data-sx="ad"] { --c: #333; --c2: #111; position: relative; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: 170px; padding: 20px; border-radius: 14px; color: #fff; text-decoration: none; background: linear-gradient(140deg, var(--c), var(--c2)); transition: transform .3s cubic-bezier(.16, .84, .24, 1), box-shadow .3s; } [data-sx="ad"]:hover, [data-sx="ad"]:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--c); } [data-sx="big"] { position: absolute; right: -14px; top: -18px; font-size: 120px; opacity: .16; transform: rotate(-12deg); transition: transform .5s cubic-bezier(.16, .84, .24, 1); } [data-sx="ad"]:hover [data-sx="big"] { transform: rotate(-4deg) scale(1.06); } [data-sx="ad"] strong { position: relative; font-family: var(--font-head); font-size: 19px; } [data-sx="ad"] > span:not([data-sx]) { position: relative; font-size: 13px; opacity: .88; } [data-sx="btn"] { position: relative; justify-self: start; margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--c2); font-size: 13px; font-weight: 700; } [data-social="youtube"][data-sx="ad"] { --c: #ff0033; --c2: #a8001f; } [data-social="facebook"][data-sx="ad"] { --c: #1877f2; --c2: #0b3d91; } [data-social="tiktok"][data-sx="ad"] { --c: #fe2c55; --c2: #111; } [data-social="x"][data-sx="ad"] { --c: #3a3a3a; --c2: #000; } /* Thông báo — một khung danh sách, nhóm theo ngày */ [data-nx="list"] { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); overflow: hidden; } [data-nx="day"] { margin: 0; padding: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface-2) 70%, transparent); border-bottom: 1px solid var(--color-border); } [data-nx="day"]:not(:first-child) { border-top: 1px solid var(--color-border); } [data-nx="rows"] { list-style: none; margin: 0; padding: 0; } [data-nx="row"] { --k: var(--color-text-muted); display: grid; grid-template-columns: 8px 34px minmax(0, 1fr) auto auto; align-items: start; gap: 12px; padding: 12px 18px; transition: background .2s; } [data-nx="row"] + [data-nx="row"] { border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } [data-nx="row"]:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); } [data-nx="dot"] { width: 8px; height: 8px; margin-top: 13px; border-radius: 50%; background: transparent; } [data-nx="row"][data-unread] [data-nx="dot"] { background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); } [data-nx="ic"] { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); } [data-nx="row"][data-kind="payment"] { --k: #22c55e; } [data-nx="row"][data-kind="machine"] { --k: var(--color-accent); } [data-nx="row"][data-kind="system"] { --k: #f59e0b; } [data-nx="row"][data-kind="account"] { --k: #38bdf8; } [data-nx="row"][data-kind="support"] { --k: var(--color-warning); } /* W9 v11 (#178): admin trả lời báo lỗi */ [data-nx="tx"] { display: grid; gap: 2px; min-width: 0; padding-top: 1px; } [data-nx="tx"] strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-nx="row"]:not([data-unread]) [data-nx="tx"] strong { font-weight: 500; color: var(--color-text-muted); } [data-nx="tx"] p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-nx="at"] { padding-top: 2px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--color-text-muted); white-space: nowrap; } [data-nx="act"] { opacity: 0; transition: opacity .2s; } [data-nx="row"]:hover [data-nx="act"], [data-nx="row"]:focus-within [data-nx="act"] { opacity: 1; } @media (hover: none), (max-width: 640px) { [data-nx="act"] { opacity: 1; } [data-nx="row"] { padding: 12px 14px; } } .nc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* v9 (chủ dự án 28/09): thanh "% còn lại / tổng gói" của gói đã mua (PackProgress) */ [data-pg]:not([data-pg="bar"]):not([data-pg="tx"]) { display: grid; gap: 6px; width: 100%; } [data-pg="bar"] { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 12%, transparent); overflow: hidden; } [data-pg="bar"] > i { display: block; height: 100%; border-radius: inherit; background: var(--grad-accent); transition: width .5s cubic-bezier(.16, .84, .24, 1); } [data-pg][data-lvl="mid"] [data-pg="bar"] > i { background: var(--color-warning); } [data-pg][data-lvl="low"] [data-pg="bar"] > i { background: var(--color-danger); } [data-pg="tx"] { font-size: 12.5px; color: var(--color-text-muted); } [data-pg="tx"] b { color: var(--color-text); font-weight: 600; } /* --------------------------------------------------------------------------------------------- v10 mục 168 — ô chênh lệch của bảng so sánh (mốc = sản phẩm giá phút thấp nhất). Màu từ token. --------------------------------------------------------------------------------------------- */ [data-px="cmp"] [data-cmp] { font-family: var(--font-mono); font-size: 12px; margin-left: 6px; white-space: nowrap; } [data-px="cmp"] [data-cmp="up"], [data-px="cmp"] [data-cmp="worse"] { color: var(--color-warning); } [data-px="cmp"] [data-cmp="down"], [data-px="cmp"] [data-cmp="better"] { color: var(--color-success); } [data-px="cmp"] [data-cmp="eq"] { color: var(--color-text-muted); } [data-px="cmp"] th[data-base] { white-space: nowrap; } /* v10 mục 169 — Tổng quan › Máy của bạn: danh sách gói còn dùng (tên + loại + thanh %). */ [data-dp="list"] { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } [data-dp="list"] > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-border); } [data-dp="list"] > li > [data-pg] { grid-column: 1 / -1; } [data-dp="name"] { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } /* W12 (05/10) — Tổng quan › Hoạt động 30 ngày: dải số tóm tắt trên biểu đồ mảnh (ComboChart, CSS ở nc-charts.css của thư viện) + khung chờ. Lưới tự gói (auto-fit) nên 390 px là 2 cột, không tràn. Màu từ token. */ [data-dash="stats"] { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 10px 18px; } [data-dash="stats"] > div { display: grid; gap: 2px; min-width: 0; padding-left: 10px; border-left: 2px solid var(--color-border); } [data-dash="stats"] dt { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-dash="stats"] dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } [data-dash="act-skel"] { display: grid; gap: 12px; } @media (max-width: 480px) { [data-dash="stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------------------------- v10 mục 170 — GameLightbox HAI CỘT, tiền tố [data-gl=…]: trái ảnh + tên + launcher + thể loại + Chơi; phải mô tả + thông tin. ≤ 767 px xếp dọc. Màu từ token. --------------------------------------------------------------------------------------------- */ [data-gl="grid"] { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; } [data-gl="left"], [data-gl="right"] { display: grid; gap: 12px; min-width: 0; align-content: start; } [data-gl="img"] { width: 100%; overflow: hidden; border-radius: 12px; background: var(--color-surface-2); } [data-gl="name"] { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; } [data-gl="launcher"] { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--color-text-muted); } [data-gl="chips"] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } [data-gl="desc"] { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; color: var(--color-text); max-height: 46vh; overflow: auto; } [data-gl="facts"] { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border); } [data-gl="facts"] > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; } [data-gl="facts"] dt { color: var(--color-text-muted); } [data-gl="facts"] dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 767px) { [data-gl="grid"] { grid-template-columns: minmax(0, 1fr); } [data-gl="facts"] > div { grid-template-columns: 110px minmax(0, 1fr); } [data-gl="desc"] { max-height: none; } } /* v10 mục 176 — hộp Mua thêm phút: mỗi mức một dòng chọn (radio), dòng đang chọn viền màu nhấn. */ [data-tu="opts"] { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; } [data-tu="opts"] > legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; } [data-tu="opt"] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-border-hi); background: var(--color-surface); cursor: pointer; } [data-tu="opt"][data-on] { border-color: var(--color-accent); background: var(--color-accent-subtle); } [data-tu="opt"] input { accent-color: var(--color-accent); margin: 0; } /* 0.2.169 (chủ dự án 29/09): hộp game TRANG CHỦ — lớn, ảnh phủ kín, chữ + nút nằm trên ảnh (GameLightbox Hero) */ [data-ui="dialog"][data-gh] [data-ui="dlg-h"], [data-ui="dialog"][data-gh] [data-ui="dlg-f"] { display: none; } /* KHÔNG khai lại padding của hộp (K-T28l: hình thức component là việc của thư viện) → khung ảnh tràn bằng margin âm đúng padding thân hộp (4px 22px 18px) */ [data-gh="stage"] { position: relative; margin: -4px -22px -18px; min-height: min(82vh, 820px); display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); color: #fff; overflow: hidden; background: #0b0d14; } [data-gh="bg"] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ncgh-zoom 14s ease-out both; } @keyframes ncgh-zoom { from { transform: scale(1.06); } to { transform: scale(1); } } [data-gh="shade"] { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,8,16,.55) 0%, rgba(6,8,16,0) 22%, rgba(6,8,16,0) 38%, rgba(6,8,16,.78) 70%, rgba(6,8,16,.96) 100%), linear-gradient(90deg, rgba(6,8,16,.55) 0%, rgba(6,8,16,0) 45%); } [data-gh="top"] { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; } [data-gh="count"] { background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); border-color: rgba(255,255,255,.18); } [data-gh="tools"] { display: inline-flex; gap: 8px; } [data-gh="btn"] { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(10,12,20,.55); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, transform .2s; } [data-gh="btn"]:hover, [data-gh="btn"]:focus-visible { background: rgba(255,255,255,.18); transform: scale(1.06); } [data-gh="info"] { position: relative; z-index: 1; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 56px); align-items: end; padding: clamp(20px, 3.5vw, 44px); } [data-gh="left"] { display: grid; gap: 12px; align-content: end; min-width: 0; } [data-gh="kicker"] { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-accent) 60%, #fff); } [data-gh="name"] { margin: 0; font-family: var(--font-head); font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(0,0,0,.6); overflow-wrap: anywhere; } [data-gh="chips"] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } [data-gh="chip"] { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); } [data-gh="right"] { display: grid; gap: 14px; align-content: end; min-width: 0; padding: 20px 22px; border-radius: 16px; background: rgba(10,12,20,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); } [data-gh="desc"] { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } [data-gh="facts"] { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; font-size: 13px; } [data-gh="facts"] dt { color: rgba(255,255,255,.6); } [data-gh="facts"] dd { margin: 0; color: #fff; font-weight: 600; } [data-gh="pitch"] { margin: 0; font-size: 13px; color: rgba(255,255,255,.72); } [data-gh="cta"] { display: flex; flex-wrap: wrap; gap: 10px; } [data-gh="cta"] > a { flex: 1 1 auto; justify-content: center; white-space: nowrap; } @media (max-width: 767px) { [data-gh="stage"] { min-height: 86vh; } [data-gh="info"] { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; } [data-gh="right"] { padding: 16px; } [data-gh="desc"] { -webkit-line-clamp: 4; } /* điện thoại: nút xuống dòng + chiếm cả dòng (nowrap làm khối rộng hơn màn → tràn lệch trái); chip đếm rút gọn */ [data-gh="cta"] > a { flex: 1 1 100%; white-space: normal; } [data-gh="count"] { min-width: 0; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-gh="tools"] [data-testid="lb-prev"], [data-gh="tools"] [data-testid="lb-next"] { display: none; } [data-gh="info"], [data-gh="left"], [data-gh="right"] { min-width: 0; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { [data-gh="bg"] { animation-duration: 30s; } } /* ===== W9 v11 — #177 ghi chú gói (một dòng mô tả dưới tên gói) · #178 báo lỗi (danh sách + chân trang /app). Màu chỉ lấy từ token. ===== */ [data-pn] { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--color-text-muted); } [data-pn] > i { flex: none; font-size: 11px; color: var(--color-accent); } [data-pn] > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-pn="form"] { display: grid; gap: 6px; font-size: 14px; color: var(--color-text); } [data-pn="form"] [data-ui="input"] { width: 100%; } [data-dp="name"] > [data-pn] { margin-top: 2px; } [data-rp="list"] { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } [data-rp="msg"] { margin: 0; font-size: 14px; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; } [data-app-foot] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px clamp(16px, 3vw, 36px) 18px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); } /* nút "Báo lỗi" ở chân cột trái: trông như một mục menu (cùng kích thước side-link) nhưng là