/* Theme Name: APKPure Skin (App System) Theme URI: https://github.com/hailstonelabs/wp-app-system-template Description: Skin kho app/game dựng trên App System core, UI bám theo apkpure.com. Toàn bộ giao diện nằm ở templates/ + style.css; inc/system/ giữ nguyên nên đổi UI không phải viết lại logic. Nhận diện (logo, favicon, tên site, mô tả) để trong assets/brand/ và config.php — xem assets/brand/README.md trước khi chạy production. Author: Hailstone Labs Author URI: https://hailstonelabs.com/ Version: 2.1.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: apkpure-skin Tags: app-store, download, multilingual */ /* ========================================================================== 0. TOKENS — số đo bám theo bản tham chiếu (xem UI-MISMATCH.md mục 1) ========================================================================== */ :root { --bg: #f2f5f9; --surface: #ffffff; --surface-2: #f2f5f9; --text: #5e5e5e; /* màu tên app ở bản gốc */ --muted: #8b8b8b; /* dòng phụ */ --faint: #a6a6a6; /* ngày bài viết */ --line: #e8eaed; --line-2: #e7e7e7; /* viền ô trang chi tiết: icon, lưới info, thẻ review */ --line-soft: #eff3f9; /* vạch ngăn giữa các dòng phiên bản */ --surface-3: #f9fafb; /* nền thanh tổng hợp đánh giá */ --band: #f8f9fa; /* băng dải tab bài viết — KHÁC --surface-2 (#f2f5f9) */ --head: #3c4043; /* tiêu đề h2 của trang chi tiết */ --link: #00a6ed; /* link xanh dương: how-to, tag, review */ --link-soft: #dbf4ff; /* nền tag khi rê chuột */ --brand-hover:#24dc83; /* nút xanh khi rê chuột */ --brand: #24cd77; --brand-dark: #16a75b; --brand-soft: #e8faf0; --on-brand: #ffffff; --star: #fa8b16; /* sao VÀ chữ điểm đều màu này */ --btn-hover: #d6f5e5; /* nền nút .btn khi rê chuột */ --chevron: #8b8b8b; /* mũi chevron sau tiêu đề khối */ --pill-xapk-bg: #ece4ff; --pill-xapk-fg: #4a21c7; --shadow: none; /* panel không đổ bóng */ --r-sm: 4px; --r-md: 8px; --r-lg: 0px; /* panel bản tham chiếu vuông góc, không bo */ --r-icon: 15%; --wrap: 1200px; --main: 868px; --side: 316px; --col-gap: 16px; /* Hệ spacing lấy nguyên từ source (3 mốc: ≥996 / 720–995 / ≤719): --module-spacing 8 / 4 / 4 khoảng hở giữa các panel --app-horizontal-spacing 16 / 12 / 8 khe ngang giữa các thẻ --app-vertical-spacing 12 khe dọc giữa các hàng */ --gap-h: 16px; --gap-v: 12px; --module-gap: 8px; --header-h: 70px; /* +1px border-bottom = 71px tổng, khớp bản tham chiếu */ --font: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ========================================================================== 1. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; /* CHÂN TRANG DÍNH ĐÁY: trang ngắn (vd /reviews/ lúc chưa có bài, thân chỉ cao 397) thì chân trang trước đây dừng giữa màn, chừa 235px trống bên dưới. Cột dọc + min-height 100vh đẩy nó xuống đáy; trang dài vẫn trôi bình thường vì đây là min-height chứ không phải height. Reset đã đặt box-sizing: border-box nên padding-top 45px của header cố định ở mobile nằm TRONG 100vh, không đẻ thêm thanh cuộn. */ display: flex; flex-direction: column; min-height: 100vh; } /* dvh: trên mobile, 100vh tính cả thanh công cụ trình duyệt nên hụt/dư. */ @supports (min-height: 100dvh) { body { min-height: 100dvh; } } .site-main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand-dark); } h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 500; } ul, ol { margin: 0; padding: 0; list-style: none; } /* breadcrumb dùng
    — phải tắt số thứ tự */ table { border-collapse: collapse; width: 100%; } button { font: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } /* --wrap là bề rộng NỘI DUNG (1200). Thêm padding vào max-width để lòng trong đúng 1200, nếu không lưới 868+16+316 không đủ chỗ và cột chính bị co lại. */ .wrap { max-width: calc(var(--wrap) + 32px); margin: 0 auto; padding: 0 16px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 2. HEADER — cao 71px, logo + nav có dropdown + icon search + tài khoản ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid #e7e7e7; } .site-header__bar { display: flex; align-items: center; gap: 56px; height: var(--header-h); } /* Bản gốc KHÔNG cap lớp trong của header ở 1200 mà cho chạy theo lề 5%: màn càng rộng logo càng bám mép chứ không dồn vào giữa. Ở 1345 ra 1211 và logo x=67 — đúng số đo được. Chỉ áp từ 720 trở lên; mobile giữ lưới 45px riêng. */ @media (min-width: 720px) { .site-header__bar { max-width: none; margin: 0 5%; padding: 0; } } .brand { display: flex; align-items: center; gap: 9px; flex: none; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .brand__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: 17px; font-weight: 700; } .brand:hover { color: inherit; } .brand--img { flex: none; } .brand--img picture { display: block; } .brand--img img { display: block; height: 32px; width: auto; } .site-nav-wrap { flex: 1 1 auto; min-width: 0; } .site-nav { display: flex; align-items: center; gap: 2px; } .site-nav > li { position: relative; } /* Chữ nav bản gốc: 14/500, cao dòng 26, màu #777 (không phải màu chữ chính). */ .site-nav a, .site-nav .nav-toggle { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 46px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 26px; color: #777; border-radius: var(--r-md); } .site-nav a:hover, .site-nav .nav-toggle:hover { color: var(--brand-dark); background: var(--surface-2); } .site-nav a[aria-current="page"] { color: var(--brand-dark); font-weight: 500; } .nav-caret { width: 9px; height: 9px; transition: transform .15s ease; } [aria-expanded="true"] .nav-caret { transform: rotate(180deg); } .nav-sub { position: absolute; top: 100%; left: 0; min-width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px -8px rgba(0,0,0,.2); } .nav-sub[hidden] { display: none; } .nav-sub a { height: 36px; font-size: 14px; } .header-actions { display: flex; align-items: center; flex: none; margin-left: auto; align-self: stretch; } .icon-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: none; color: var(--muted); } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); } /* Mặt nạ tìm kiếm. MẶC ĐỊNH chỉ là icon (đệm 9/12, không viền, không chữ) — bản gốc chỉ bung thành hộp 300px từ 1155px trở lên. Bấm vào thì ẩn nav + mặt nạ và bung ô nhập thật ra chỗ nav. */ .search-box { display: flex; align-items: center; gap: 9px; cursor: pointer; box-sizing: border-box; height: 40px; padding: 9px 12px; margin-right: 12px; background: none; text-align: left; border: 0; } .search-box:hover { color: var(--text); } .search-box__icon { flex: none; width: 20px; height: 20px; color: #666; } .search-box__text { display: none; font-size: 12px; line-height: 14px; color: #c5c5c5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1155px) { .search-box { width: 300px; margin-right: 20px; border: 1px solid #eee; border-radius: 8px; } .search-box:hover { border-color: var(--line); } .search-box__text { display: block; } } .icon-btn--search { display: none; } /* chỉ dùng ở mobile */ /* Ô nhập bung ra: rộng 600 (bản gốc 600×46) và CĂN GIỮA khoảng trống còn lại sau khi nav ẩn — bản gốc dùng `left: 50%; margin-left: -300px`. Để nó dính sát logo là sai: trên màn rộng ô nằm lệch hẳn về trái. Nút × neo tuyệt đối bên phải nên không kéo lệch tâm của ô nhập. */ .hsearch { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; } .hsearch[hidden] { display: none; } .hsearch .search { flex: 0 1 600px; max-width: 600px; } /* Bản gốc ở đầu trang: ô TRẮNG viền mảnh, kính lúp nằm BÊN TRÁI, không có nút xanh (ô ở sidebar thì vẫn giữ nút xanh — xem .side-search). */ .hsearch .search__field input { height: 46px; padding: 0 14px 0 42px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .hsearch .search__field input:focus { border-color: var(--line); } .hsearch .search__field button { left: 12px; right: auto; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: none; color: #666; border-radius: 0; } .hsearch__close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--muted); } .hsearch__close:hover { color: var(--text); } /* Khi đang tìm: giấu nav và mặt nạ, đúng như .nav_new.searching của bản gốc. */ .site-header__bar.is-searching .site-nav-wrap, .site-header__bar.is-searching .search-box { display: none; } /* Tấm tài khoản 138×70: nền xám, cao bằng thanh, sát mép phải. */ .header-user { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 138px; background: #f5f5f5; } .header-user__link { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; color: #777; border: 0; background: none; cursor: pointer; } /* Menu tài khoản: thả xuống từ mép phải của tấm xám. */ .nav-sub--acct { top: 100%; right: 0; left: auto; min-width: 160px; } .nav-sub--acct a { height: 36px; font-size: 14px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-md); color: var(--text); } .nav-sub--acct a:hover { background: var(--surface-2); color: var(--brand-dark); } .header-user__link:hover { color: var(--brand-dark); } .header-user__name { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ô tìm kiếm — dùng ở sidebar và trong lớp phủ */ .search { width: 100%; } .search__field { position: relative; display: flex; } .search__field input { width: 100%; height: 38px; padding: 0 44px 0 14px; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-sm); } .search__field input::placeholder { color: var(--faint); } .search__field input:focus { background: var(--surface); border-color: var(--brand); outline: none; } .search__field button { position: absolute; right: 3px; top: 3px; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; background: var(--brand); color: var(--on-brand); } .search-overlay__box .search__field input { height: 48px; font-size: 16px; background: var(--surface); } .search-overlay__box .search__field button { top: 6px; height: 36px; } /* lớp phủ tìm kiếm — mở bằng icon kính lúp */ .search-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .35); display: grid; align-items: start; justify-items: center; padding-top: 15vh; } .search-overlay[hidden] { display: none; } .search-overlay__box { width: min(640px, 92vw); } /* ========================================================================== 3. KHUNG 2 CỘT — cột chính 868px, sidebar 250px, khe 32px ========================================================================== */ .site-main { padding: 20px 0 32px; } .layout { display: grid; grid-template-columns: minmax(0, var(--main)) var(--side); gap: var(--col-gap); align-items: start; justify-content: center; } .layout--full { grid-template-columns: minmax(0, 1fr); } @media (max-width: 995px) { .layout { grid-template-columns: minmax(0, 1fr); } } .card { background: var(--surface); border-radius: var(--r-lg); } /* Trang tĩnh (Terms, Privacy, About, Contact…): nội dung cần đệm để không sát mép thẻ, và giới hạn bề rộng dòng cho dễ đọc văn bản dài. */ .page-static { padding: 32px 40px 40px; } .page-static .prose { max-width: 860px; } @media (max-width: 640px) { .page-static { padding: 20px 16px 28px; } } /* ========================================================================== 4. RAIL — tiêu đề h3 16px/500 + mũi tên › ngay sau chữ ========================================================================== */ .rail { margin-bottom: var(--module-gap); } .rail__head { display: flex; align-items: center; gap: 4px; padding: 10px 16px 12px; } .rail__head-link { display: flex; align-items: center; gap: 4px; } .rail-a, .rail-b, .rail-c, .rail-d, .rail-e, .rail-f { padding: 0 16px 16px; } .rail__title { font-size: 16px; font-weight: 500; line-height: 1.5; } /* Chevron vẽ bằng border: ô 6×6 chỉ có viền trên + trái, xoay 135° thành mũi nhọn chỉ sang phải. Đo từ bản tham chiếu; dùng ký tự › cho hình dáng khác hẳn. */ .rail__arrow { display: block; width: 6px; height: 6px; flex: none; margin-left: 12px; border-top: 1px solid var(--chevron); border-left: 1px solid var(--chevron); transform: rotate(135deg); } .rail__head a:hover .rail__arrow, .rail__head a:hover .rail__title { color: var(--brand-dark); } /* -- kiểu A: lưới 8 cột, icon 93px ------------------------------------- */ /* gap = --app-horizontal-spacing (16px). Cho ra item 90.5 ≈ 91 đúng như source; icon 93 là do ẢNH TRÀN ra ngoài item (xem .app-card__thumb img bên dưới). */ .rail-a { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap-h); } /* -- kiểu B: lưới 3 cột, mỗi ô là 1 dòng ngang icon 74px --------------- */ .rail-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-v) var(--gap-h); } /* -- kiểu C: danh sách dọc 1 cột, icon 62px (sidebar) ------------------ */ .rail-c { display: grid; gap: var(--gap-v); } /* -- kiểu D: thẻ bài viết 2 cột, ảnh 142×80 ---------------------------- */ .rail-d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--gap-h); } /* Tablet 720–995: bản gốc đổi list kiểu B/C thành cột-wrap cao tối đa 236px (tức cuộn ngang theo 3 hàng), mỗi khung 2 item. */ @media (max-width: 995px) { :root { --gap-h: 12px; --module-gap: 4px; } } @media (max-width: 719px) { :root { --gap-h: 8px; } } @media (min-width: 720px) and (max-width: 995px) { .rail-b, .rail-c { grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: none; grid-auto-columns: calc((100% - 52px) / 2); overflow-x: auto; } .rail-d { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 5. CÁC KIỂU THẺ APP ========================================================================== */ /* A — icon vuông + tên 2 dòng + điểm. Chữ CĂN TRÁI theo bản tham chiếu (đo được text-align:start), không căn giữa. */ .app-card { display: block; text-align: left; } .app-card__thumb { position: relative; } /* Huy hiệu hạng — CHỈ 3 vị trí đầu, dạng dải ruy-băng vẽ bằng border (border-width 14/7/4, đáy trong suốt tạo khía chữ V). Số trắng nằm đè lên. */ .app-card__rank { position: absolute; top: 0; left: 12px; z-index: 2; width: 14px; line-height: 15px; font-size: 10px; font-weight: 400; color: #fff; text-align: center; } .app-card__rank::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; border-style: solid; border-width: 14px 7px 4px; border-color: var(--rank) var(--rank) transparent; } .app-card__rank--1 { --rank: #f3251b; } .app-card__rank--2 { --rank: #f77e13; } .app-card__rank--3 { --rank: #efab19; } .app-card__thumb img { /* Source: item 91 nhưng icon 93 — ảnh tràn 1px mỗi bên. */ width: calc(100% + 2px); max-width: none; margin-left: -1px; aspect-ratio: 1; border-radius: var(--r-icon); background: var(--surface-2); object-fit: cover; } /* Chiều cao suy từ bản gốc: Discover = 93 (icon) + 42 (khối tên) = 135; Popular = 135 + 14 (dòng điểm) = 149. Nên khối tên phải đúng 42 và dòng điểm 14. */ .app-card__name { /* Bản gốc: dy=95 (icon 93 + 2), cao CỐ ĐỊNH 40 = 2 dòng × 20, kể cả tên 1 dòng. */ margin-top: 2px; height: 40px; font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .app-card:hover .app-card__name { color: var(--brand-dark); } .rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--star); } /* Bản gốc: điểm ở dy=139 (95+40+4), cao 10, CHỮ MÀU CAM. */ .app-card .rating { display: flex; margin-top: 4px; height: 10px; line-height: 10px; color: var(--star); } .rating svg { width: 11px; height: 11px; fill: var(--star); } /* B — dòng ngang icon 74px */ /* Bản gốc: chữ bắt đầu ở dx=84 (icon 74 + khe 10) và dy=0/26/52 — xếp từ trên xuống, KHÔNG căn giữa. 20 + 6+20 + 6+20 = 72 = đúng chiều cao ô. */ .app-tile { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; height: 72px; } .app-tile__icon { width: 74px; height: 74px; border-radius: var(--r-icon); background: var(--surface-2); } .app-tile__name { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .app-tile:hover .app-tile__name { color: var(--brand-dark); } .app-tile__sub { margin-top: 6px; font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-tile__sub--strong { color: var(--text); } /* C — dòng dọc icon 62px, có cột nút co theo nội dung */ .app-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; height: 60px; } .app-line__icon { width: 62px; height: 62px; border-radius: var(--r-icon); background: var(--surface-2); } .app-line__name { /* Bản gốc: Top New dùng fw 400, riêng khối giảm giá dùng 500. */ font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .app-line:hover .app-line__name { color: var(--brand-dark); } .app-line__sub { margin-top: 2px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .app-line__desc { margin-top: 12px; font-size: 12px; line-height: 20px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Cột giá bên phải (bản gốc: dx=254, giá sale trên 14px/500, giá gốc dưới 12px). */ .app-line--sale { grid-template-columns: 62px minmax(0, 1fr) max-content; } .app-line--sale .app-line__name { font-weight: 500; } .app-line--sale .app-line__desc { margin-top: 4px; } .app-line__price { display: grid; justify-items: end; text-align: right; } .price__now { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text); } .price__was { margin-top: 6px; font-size: 12px; line-height: 20px; color: var(--muted); text-decoration: line-through; } /* D — thẻ bài viết, ảnh 142×80 */ .article-card { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 12px; min-height: 88px; } .article-card__img { width: 142px; height: 80px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); } .article-card__title { font-size: 14px; font-weight: 500; line-height: 20px; height: 40px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card:hover .article-card__title { color: var(--brand-dark); } .article-card__date { margin-top: 24px; font-size: 12px; line-height: 16px; color: var(--faint); } /* bản gốc: dy=64 */ /* E — lưới 8 cột, icon 94px (chỉ trang chi tiết). Bản gốc trang chi tiết dùng bộ list KHÁC trang chủ: khe 12px và bề rộng item đúng bằng icon (12.5% − 10.5px của 836 = 94), nên ảnh KHÔNG tràn như kiểu A. Cao 170 = icon 94 + 8 + tên 2×22 + 8 + điểm 16. */ .rail-e { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } .app-card--lg .app-card__thumb img { width: 100%; margin-left: 0; } .app-card--lg .app-card__name { margin-top: 8px; height: 44px; line-height: 22px; font-weight: 700; } .app-card--lg .rating { margin-top: 8px; height: 16px; line-height: 16px; } /* App chưa có điểm: bản gốc VẪN chừa dòng điểm (thẻ .stars-zero) rồi cho chữ trong suốt, nhờ vậy mọi thẻ cao đúng 170 và hàng không bị so le. Ở đây dùng visibility cho rõ ý — giữ chỗ, không hiện số 0 giả. */ .app-card .rating--zero { visibility: hidden; } /* Cột phải trang chi tiết dùng CÙNG thẻ với rail cột chính (kiểu E). Ở desktop CSS xếp lại thành danh sách dọc, mỗi dòng icon 60 + tên + điểm (đo 284×60); ở mobile nó tự trở về dạng thẻ dọc 86 — đúng cách bản gốc làm. */ .sidebar .rail-e { display: flex; flex-direction: column; gap: 8px; } .sidebar .rail-e .app-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: center; height: 60px; } .sidebar .rail-e .app-card__thumb { width: 60px; } .sidebar .rail-e .app-card__center { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; } .sidebar .rail-e .app-card__name { margin-top: 0; height: auto; line-height: 24px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .rail-e .rating { margin-top: 0; height: 16px; line-height: 16px; font-size: 12px; } /* F — thẻ bài viết DỌC, ảnh 16/9 (bản gốc: 4 thẻ/hàng, tối đa 220 mỗi thẻ). */ .rail-f { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .rail-f::-webkit-scrollbar { display: none; } .article-card--tall { flex: 1; max-width: 220px; display: flex; flex-direction: column; gap: 8px; justify-content: center; color: var(--text); } .article-card--tall .article-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; background: var(--surface-2); } .article-card--tall .article-card__title { flex: 1; height: 48px; font-size: 14px; font-weight: 700; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card--tall:hover { color: var(--link); } .article-card--tall:hover .article-card__title { color: inherit; } /* ========================================================================== 6. HERO CAROUSEL — 868×415 ========================================================================== */ .hero { position: relative; overflow: hidden; margin-bottom: var(--module-gap); background: var(--surface-2); } .hero__track { display: flex; transition: transform .35s ease; } @media (prefers-reduced-motion: reduce) { .hero__track { transition: none; } } .hero__slide { flex: 0 0 100%; position: relative; } .hero__img { width: 100%; height: 415px; object-fit: cover; } .hero__bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); color: #fff; } .hero__icon { width: 48px; height: 48px; border-radius: var(--r-icon); flex: none; } .hero__name { font-size: 17px; font-weight: 500; flex: 1 1 auto; } .hero__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.85); color: #333; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; /* chỉ hiện khi rê chuột, như bản tham chiếu */ } .hero:hover .hero__nav, .hero__nav:focus-visible { opacity: 1; } @media (hover: none) { .hero__nav { opacity: 1; } } /* cảm ứng thì hiện luôn */ .hero__nav--prev { left: 12px; } .hero__nav--next { right: 12px; } .hero__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; } .hero__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; } .hero__dots button[aria-current="true"] { background: #fff; } /* ========================================================================== 7. SIDEBAR — ô search + chip, thẻ quảng bá, editor's pick ========================================================================== */ .sidebar { display: grid; /* minmax(0,1fr): khoá track theo bề rộng cột. Thiếu dòng này, min-content của nút .btn (white-space:nowrap) kéo cả sidebar rộng ra và panel tràn khỏi cột. */ grid-template-columns: minmax(0, 1fr); gap: var(--module-gap); } .sidebar .rail { margin-bottom: 0; } .side-search { padding: 16px; } .side-search .search { max-width: none; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .chip { padding: 5px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font-size: 12px; } .chip:hover { background: var(--brand-soft); color: var(--brand-dark); } .side-search__label { font-size: 13px; color: var(--muted); margin-top: 14px; } .promo { padding: 16px; } .promo__top { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; } .promo__icon { width: 48px; height: 48px; border-radius: var(--r-icon); } .promo__name { font-size: 16px; display: flex; align-items: center; gap: 8px; } .promo__desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .promo__help { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--brand-dark); } .promo__social { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; } .promo__social-item { width: 73px; height: 46px; display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; color: var(--muted); text-align: center; } .promo__social-item:hover { color: var(--brand-dark); } .promo__social-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--faint); color: #fff; font-weight: 700; font-size: 15px; } .promo__social-dot img, .promo__social-dot svg { width: 18px; height: 18px; display: block; } .promo__social-label { display: block; } /* padding thân khối: .editor__list không mang class .rail-* nên phải khai riêng, nếu không item rộng bằng cả panel (316) thay vì 284 như bản tham chiếu. */ .editor__list { display: grid; gap: 14px; padding: 0 16px 16px; } /* Mặc định (desktop, item KHÔNG phải dẫn đầu): dòng gọn icon 48, banner ẩn. */ .editor__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 60px; } .editor__item > .editor__banner { display: none; } .editor__icon { width: 48px; height: 48px; border-radius: var(--r-icon); background: var(--surface-2); flex: none; } .editor__name { font-size: 13px; display: flex; justify-content: space-between; gap: 8px; } .editor__desc { margin-top: 2px; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Item dẫn đầu (284×180): banner tràn hết bề ngang panel, icon 62 ĐÈ LÊN mép dưới banner, tên + điểm là chữ TRẮNG trên banner, mô tả xám ở dưới. */ .editor__item--lead { position: relative; display: block; height: 180px; grid-template-columns: none; } .editor__item--lead > .editor__banner { display: block; position: absolute; top: 0; left: -16px; z-index: 0; width: calc(100% + 32px); height: 149px; max-width: none; object-fit: cover; background: var(--surface-2); } .editor__item--lead::after { content: ""; position: absolute; z-index: 1; top: 99px; left: -16px; width: calc(100% + 32px); height: 50px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5)); pointer-events: none; } .editor__item--lead > .editor__icon { position: absolute; top: 118px; left: 0; z-index: 2; width: 62px; height: 62px; } .editor__item--lead > .editor__body { position: absolute; top: 126px; left: 70px; right: 0; z-index: 2; } .editor__item--lead .editor__name { font-size: 14px; font-weight: 500; color: #fff; } .editor__item--lead .editor__name .rating { color: #fff; } .editor__item--lead .editor__desc { margin-top: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== 8. NÚT ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; padding: 6px 16px; border: 0; border-radius: var(--r-sm); font-weight: 500; background: var(--brand-soft); color: var(--brand-dark); } .btn:hover { background: var(--btn-hover); color: var(--brand-dark); } .btn--solid { background: var(--brand); color: var(--on-brand); } .btn--solid:hover { background: var(--brand-dark); color: var(--on-brand); } .btn--lg { padding: 11px 26px; font-size: 15px; border-radius: var(--r-md); } .btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--text); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); } .btn--block { width: 100%; } .stars { display: inline-flex; gap: 1px; vertical-align: -2px; } .stars svg { width: 12px; height: 12px; } .stars__on { fill: var(--star); } .stars__off { fill: var(--line); } .score { font-weight: 700; } /* ========================================================================== 9. TRANG CHI TIẾT APP ========================================================================== */ /* --- breadcrumb: 12px/16, mục cuối MÀU XANH, vạch ngăn là ô chevron xoay --- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--muted); } .breadcrumb li { display: flex; align-items: center; gap: 8px; } .breadcrumb li:not(:first-child)::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--faint); border-left: 0; border-bottom: 0; transform: rotate(45deg); flex: 0 0 auto; } .breadcrumb li:last-child { color: var(--brand); } .breadcrumb a:hover { color: var(--brand-dark); } /* --- 9.1 HERO ------------------------------------------------------------ Bản gốc là lưới 2 cột: cột phải đúng 316px (bằng sidebar) chứa nút tải, cột trái là icon + tên. Breadcrumb và dải chỉ số trải hết 2 cột. */ .app-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); align-items: center; gap: 12px 0; padding: 12px 0; margin-bottom: var(--module-gap); } .app-head__crumbs, .app-head__stats { grid-column: 1 / -1; padding: 0 16px; } .app-head__info { grid-column: 1; grid-row: 2; padding-left: 16px; } .app-head__dl { grid-column: 2; grid-row: 2; padding-right: 16px; } .app-head__info { display: flex; gap: 20px; overflow: hidden; } .app-head__icon { flex: 0 0 auto; width: 120px; height: 120px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-icon); background: var(--surface-2); box-sizing: border-box; } .app-head__icon img { width: 100%; height: 100%; } .app-head__id { min-width: 0; overflow: hidden; } /* Ba dòng cùng line-height 30 — bản gốc xếp bằng
    , ở đây dùng block cho sạch. */ .app-head__name, .app-head__dev, .app-head__ver { display: block; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Bản gốc xếp 3 dòng bằng
    trong một khối inline: dòng 1 cao 33 (hộp chữ 20px line-height 30 cộng phần strut 14px/21 thò xuống do lệch baseline), hai dòng sau đúng 30. Ở đây dùng block nên ghi thẳng 3px chênh đó ra cho dễ đọc, chữ rơi đúng dy 43 / 79 / 111 như đo được. */ .app-head__name { margin-bottom: 3px; font-size: 20px; font-weight: 700; color: rgba(0, 0, 0, .8); } .app-head__dev { font-size: 14px; font-weight: 500; color: var(--text); } .app-head__ver { font-size: 12px; color: var(--muted); } .app-head__dl { display: flex; flex-direction: column; gap: 8px; } .dl-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: center; box-sizing: border-box; width: 300px; max-width: 100%; height: 52px; padding: 15px 16px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; line-height: 20px; } .dl-btn:hover { background: var(--brand-hover); } .dl-btn__text { flex: 1; font-weight: 500; } .dl-btn__icon { flex: 0 0 auto; width: 20px; height: 20px; } /* Nút tải phụ giữa trang: hộp trải hết bề ngang, nút 360 canh giữa. */ .dl-secondary { display: flex; justify-content: center; padding: 12px 16px; margin-bottom: var(--module-gap); background: var(--surface); } .dl-btn--wide { width: 360px; } .app-head__how { display: flex; align-items: center; justify-content: center; gap: 4px; align-self: center; color: var(--link); font-size: 14px; line-height: 21px; } .app-head__how svg { width: 12px; height: 12px; flex: 0 0 auto; } /* Dải chỉ số: các ô chia đều, vạch ngăn 1×24. */ /* Bản gốc cho chính hàng này cuộn ngang: các ô có white-space:nowrap nên khi màn hẹp chúng không co được, không cho cuộn là tràn cả trang (đo 103px). */ .app-head__stats { display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none; } .app-head__stats::-webkit-scrollbar { display: none; } .app-head__split { flex: 0 0 auto; width: 1px; height: 24px; background: var(--line-2); } .stat2 { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; } .stat2__head { display: flex; align-items: center; gap: 6px; height: 24px; font-size: 14px; font-weight: 500; color: var(--text); } .stat2__score { display: flex; align-items: center; gap: 6px; } .stat2__score svg { width: 14px; height: 14px; fill: var(--star); } .stat2__desc { font-size: 12px; line-height: 18px; color: var(--muted); } /* --- 9.2 KHỐI NỘI DUNG — tiêu đề h2 18px/700 --------------------------- */ .block2 { padding: 12px 16px; margin-bottom: var(--module-gap); } /* TRANG CHI TIẾT: bản gốc KHÔNG chừa khe giữa các module — cả cột trái là một dải trắng liên tục (đo được đáy module này = đỉnh module kia, mb=0). Mỗi module tự đệm 12px trên/dưới nên vẫn tách bạch mà không cần vạch xám. Bản trước để khe 8px nên nhìn thành một chồng thẻ rời. Chỉ áp ở desktop: mobile bản gốc chưa đo nên giữ nguyên nếp cũ. */ @media (min-width: 996px) { .layout--detail > div > * { margin-bottom: 0; } } .block2--bleed { padding-left: 0; padding-right: 0; } /* danh sách tràn viền */ .block2--bleed > .block2__title { padding: 0 16px; } .block2__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .block2__title h2 { font-size: 18px; font-weight: 700; line-height: 28px; color: var(--head); word-break: break-word; } .block2__more { flex: 0 0 auto; font-size: 12px; color: var(--link); } /* Rail dùng chung với trang chủ, nhưng panel trang chi tiết đo được khác: padding 12px 0 · tiêu đề h2 cao 28 + khe 12 · danh sách KHÔNG có padding đáy. (868×234 = 12 + 28 + 12 + 170 + 12 cho khối "Games like …".) */ .rail--big { padding: 12px 0; } .rail--big .rail__title { font-size: 18px; font-weight: 700; line-height: 28px; color: var(--head); } .rail--big .rail__head { padding: 0 16px 12px; } .rail--big .rail-e, .rail--big .rail-f, .rail--big .rail-c { padding: 0 16px; } /* --- 9.3 Additional Information — lưới 2 cột, vạch ngăn là khe 1px ------ */ .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); } .info-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; background: var(--surface); } .info-cell p { margin: 0; } /* Ô cuối lẻ hàng thì trải hết chiều ngang — giống bản gốc, không để ô trống. */ .info-cell:last-child:not(:nth-child(2n)) { grid-column: 1 / -1; } .info-cell__k { font-size: 14px; font-weight: 500; line-height: 24px; color: var(--head); } .info-cell__v { display: flex; gap: 8px; font-size: 12px; line-height: 20px; color: var(--muted); } .info-cell__v--link, .info-cell__v a { color: var(--link); } /* --- 9.4 What's New ---------------------------------------------------- */ .whatsnew { display: flex; flex-direction: column; gap: 4px; } .whatsnew__date { font-size: 14px; font-weight: 700; line-height: 28px; color: var(--text); } .whatsnew__text { font-size: 14px; line-height: 28px; color: var(--text); } .whatsnew__text p { margin: 0; } /* --- 9.5 Screenshots — cuộn ngang, ảnh cao 180 ------------------------- */ .shots-wrap { position: relative; } .shots { display: flex; align-items: center; gap: 12px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .shots::-webkit-scrollbar { display: none; } .shots img { flex: 0 0 auto; height: 180px; width: auto; border-radius: 8px; background: var(--surface-2); } /* Nút lùi/tiến: viên tròn trắng 40 (đệm 12 + icon 16), nổi đè lên ảnh, căn giữa theo chiều dọc, cách mép 38. Mặc định ẩn — JS bật .is-on khi phía đó còn chỗ cuộn, nên ở đầu/cuối danh sách nút tương ứng không hiện. */ .shots-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; padding: 12px; border: 0; border-radius: 100px; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, .06), 0 5px 5px -3px rgba(0, 0, 0, .1); } .shots-nav.is-on { display: flex; } .shots-nav:hover { color: var(--link); } .shots-nav svg { width: 16px; height: 16px; display: block; } .shots-nav--prev { left: 38px; } .shots-nav--next { right: 38px; } /* Bản gốc bỏ hẳn nút từ 996px trở xuống — dưới đó vuốt ngang bằng tay. */ @media (max-width: 996px) { .shots-nav.is-on { display: none; } } @media (prefers-reduced-motion: reduce) { .shots { scroll-behavior: auto; } } /* --- 9.6 Old Versions --------------------------------------------------- */ .vlist { display: flex; flex-direction: column; gap: 8px; } .vlist__sep { height: 1px; background: var(--line-soft); } .vitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .vitem__info { flex: 1 0 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .vitem__name { font-size: 14px; font-weight: 700; line-height: 24px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vitem:hover .vitem__name { color: var(--link); } .vitem__meta { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 12px; line-height: 20px; color: var(--muted); } .vtag { display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid var(--brand); border-radius: 3px; color: var(--brand); font-size: 10px; line-height: 16px; } .vtag--xapk { border-color: var(--link); color: var(--link); } .vitem__btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 8px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 12px; line-height: 18px; } .vitem__btn:hover { background: var(--brand-hover); } /* --- 9.7 Featured Reviews (nguồn: bình luận WordPress) ------------------ */ .reviews { display: flex; flex-direction: column; gap: 12px; } .reviews__bar { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 12px; border-radius: 8px; background: var(--surface-3); overflow: hidden; } .reviews__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; } .reviews__icon img { width: 100%; height: 100%; } .reviews__app { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text); } .reviews__count { font-size: 12px; line-height: 14px; } /* Bản gốc xếp HAI nút cạnh nhau, mỗi nút cao 32. */ .reviews__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .reviews__btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); color: var(--link); font-size: 12px; line-height: 20px; } .reviews__btn:hover { border-color: var(--link); } .reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px; } .review { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 12px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; } .review__top { display: flex; align-items: center; gap: 8px; padding: 0 8px; } .review__avatar { flex: 0 0 auto; width: 40px; height: 40px; } .review__avatar img { width: 100%; height: 100%; border-radius: 999px; } .review__who { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .review__name { font-size: 14px; font-weight: 700; line-height: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review__date { font-size: 12px; line-height: 12px; color: var(--muted); } /* Thân review CAO CỐ ĐỊNH 60 (3 dòng × 20) như bản gốc: bình luận dài ngắn khác nhau nhưng mọi thẻ vẫn đúng 138, hàng không so le. Bản trước để clamp 5 dòng và cao theo nội dung -> thẻ ngắn 118, thẻ dài kéo cả hàng giãn ra. */ .review__body { flex: 0 0 auto; height: 60px; padding: 0 8px; font-weight: 500; line-height: 20px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .review__body p { margin: 0 0 8px; } /* --- 9.8 Related Tags — viên bo tròn cao 36 ----------------------------- */ .tag-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .tag-item { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 36px; padding: 0 12px; border: 1px solid var(--bg); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 14px; line-height: 20px; } .tag-item:hover { background: var(--link-soft); border-color: var(--link-soft); color: var(--link); } /* --- 9.9 Thẻ "Reviewed by …" ------------------------------------------- Bản tham chiếu: avatar 40, cách chữ 12, hai dòng — nhãn nhỏ ở trên, tên (14/500) kèm chức danh ở dưới. Bản trước đây gộp một dòng 12px với avatar 24 nên tên tác giả gần như biến mất. */ .app-reviewer { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .app-reviewer img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; } .app-reviewer__who { display: flex; flex-direction: column; min-width: 0; } .app-reviewer__label { font-size: 12px; line-height: 20px; color: var(--muted); } .app-reviewer__line { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 20px; } .app-reviewer__name { font-weight: 500; color: var(--text); } .app-reviewer__role { font-size: 12px; color: var(--muted); } /* Dòng tóm tắt in đậm ngay trên phần mô tả. */ /* Bản gốc giữ đúng MỘT dòng (cao 28), dài quá thì cắt bằng dấu ba chấm. */ .app-short-desc { margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 28px; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- 9.10 Nội dung bài + thu gọn --------------------------------------- */ .prose { color: var(--text); line-height: 1.7; } .prose p { margin: 0 0 12px; } .prose h2, .prose h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 700; } .prose ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; } .prose ol { list-style: decimal; padding-left: 20px; margin: 0 0 12px; } .prose img { border-radius: var(--r-md); margin: 12px 0; } .prose a { color: var(--brand-dark); } .clamp { position: relative; overflow: hidden; } .clamp[data-collapsed="true"] { max-height: 240px; } .clamp[data-collapsed="true"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--surface)); } .clamp-toggle { margin-top: 10px; color: var(--link); font-size: 14px; line-height: 21px; } /* ========================================================================== 9.12 TRANG DANH MỤC (danh mục lá) Đo từ bản tham chiếu /game_action: MỘT CỘT 1200, không sidebar. Mỗi khối là hộp trắng; dòng app cao 66 xếp lưới 3 cột (mục chính đo được 381 × 66, khe 12). ========================================================================== */ /* Các con số dưới đây lấy THẲNG từ CSS nguồn của bản tham chiếu, không phải đo mắt: .crumbs{font-size:12px;line-height:16px;padding:4px 0;margin-left:16px; margin-bottom:4px} */ .catpage__crumbs { padding: 4px 0; margin: 0 0 4px 16px; } .catpage__crumbs .breadcrumb { font-size: 12px; line-height: 16px; color: var(--text); } /* .category-apk-list-box{background-color:#fff;margin-bottom:4px;padding:8px 0 12px} */ .catbox { margin-bottom: 4px; padding: 8px 0 12px; } /* .category-module-title{align-items:center;display:flex;justify-content:space-between;padding:0 16px} */ .catbox__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; } /* .title-text{color:#3c4043;font-size:16px;font-weight:500;line-height:22px;padding:4px 0} + @media(min-width:996px){...font-size:20px;line-height:28px} */ .catbox__title { padding: 4px 0; font-size: 16px; font-weight: 500; line-height: 22px; color: var(--head); } @media (min-width: 996px) { .catbox__title { font-size: 20px; line-height: 28px; } } /* .tab-list>span{color:#4b4b4b;font-size:13px;font-weight:400;line-height:22px;padding:4px 0 10px;text-align:center} .tab-list>span.active{color:#24cd77;font-weight:500} .tab-list>span.active:before{background-color:#24cd77} <- GẠCH CHÂN 2px, đo mắt không thấy */ .catbox__tabs { display: flex; align-items: center; margin-top: 10px; flex: 0 0 auto; } .catbox__tabs a { position: relative; padding: 4px 12px 10px; font-size: 13px; font-weight: 400; line-height: 22px; color: #4b4b4b; text-align: center; white-space: nowrap; } .catbox__tabs a::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: transparent; } .catbox__tabs a[aria-current="true"] { font-weight: 500; color: var(--brand); } .catbox__tabs a[aria-current="true"]::before, .catbox__tabs a:hover::before { background: var(--brand); } .catbox__tabs a:hover { color: var(--brand); font-weight: 500; } /* Băng chuyền banner đầu trang danh mục: thẻ 384×218, 3 thẻ nhìn thấy cùng lúc, cuộn ngang (khe 8 — đo từ nguồn: item ở x=81/473/865, bước 392). */ .cswipe { margin-bottom: 4px; padding: 16px 0; } /* Không dùng scroll-snap: nó kéo băng chuyền trôi đúng bằng phần đệm 16px nên thẻ đầu dán sát mép (đo: thẻ ở x=65 thay vì 81). Bản gốc cuộn trơn. */ .cswipe__track { display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .cswipe__track::-webkit-scrollbar { display: none; } /* Số đo lấy thẳng từ CSS nguồn: .swiper-item{width:328px;border-radius:8px;background:#f8f9fa} (desktop 384) .swiper-item+.swiper-item{margin-left:8px} .swiper-banner{background-size:cover;background-position:50%;padding-bottom:56.75%} .swiper-item:after{bottom:0;height:33.33%;background:linear-gradient(rgba(0,0,0,.01),rgba(0,0,0,.8));z-index:3} .swiper-banner-bg{bottom:0;height:33.33%;background-size:cover;background-position:50% bottom;filter:blur(30px);z-index:4} .swiper-item-info{bottom:0;padding:4px 12px;z-index:4} */ .chero { position: relative; flex: 0 0 328px; width: 328px; border-radius: 8px; overflow: hidden; background: #f8f9fa; } @media (min-width: 996px) { .chero { flex-basis: 384px; width: 384px; } } /* Nền phủ kín: ảnh banner thì để nguyên (cover, đúng nguồn); dùng screenshot thì làm mờ + phóng nhẹ để lấp hai bên, ảnh thật nằm nguyên tấm phía trên. */ .chero__back { position: absolute; inset: 0; background-size: cover; background-position: 50%; background-repeat: no-repeat; } .chero--fit .chero__back { filter: blur(24px); transform: scale(1.15); } .chero__art { position: relative; z-index: 2; display: block; width: 100%; padding-bottom: 56.75%; } .chero__shot { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Lớp tối 1/3 dưới, nằm dưới dải mờ. */ .chero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 33.33%; background: linear-gradient(rgba(0, 0, 0, .01), rgba(0, 0, 0, .8)); z-index: 3; } /* Dải đáy = CHÍNH ảnh đó, lấy phần dưới, làm mờ 30px -> mỗi thẻ một tông màu. */ .chero__blur { position: absolute; left: 0; bottom: 0; width: 100%; height: 33.33%; background-size: cover; background-position: 50% bottom; background-repeat: no-repeat; filter: blur(30px); z-index: 4; } .chero__bar { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 5; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; } .chero__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 14px; font-weight: 500; line-height: 22px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } .chero__name:hover { color: #fff; text-decoration: underline; } .chero__btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 12px; line-height: 18px; } .chero__btn:hover { background: var(--brand-hover); color: #fff; } /* Mũi tên cuộn của băng chuyền: dùng lại component .shots-nav của trang chi tiết (JS data-shots bật/tắt .is-on khi còn chỗ cuộn). */ .cswipe { position: relative; } .cswipe .shots-nav--prev { left: 24px; } .cswipe .shots-nav--next { right: 24px; } /* Nút "Show More" của TRANG DANH MỤC: bản chính là nút xanh ĐẶC, chữ trắng, rộng đúng một cột (381) và canh giữa — khác nút nền nhạt ở trang tìm kiếm, nên chỉ chỉnh trong .catbox để không đụng trang kia. */ .catbox .smore { margin: 16px 0 0; padding: 0 16px; text-align: center; } .catbox .smore__btn { display: inline-flex; align-items: center; justify-content: center; width: 381px; max-width: 100%; height: 40px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 500; } .catbox .smore__btn:hover { background: var(--brand-hover); color: #fff; } /* Chưa có điểm: vẫn giữ dòng sao nhưng sao XÁM và không có số (bản gốc y vậy). */ .crow__score--none svg { fill: var(--chevron); } /* Khe theo ĐÚNG CSS nguồn: .grid-col+.grid-col{margin-left:12px} (ngang 12) và .grid-row+.grid-row{margin-top:16px} (dọc 16) — không phải 12 cả hai. Cột: nguồn dùng calc(33.33333% - 8px) + lề 12; grid 3 cột khe 12 ra đúng cùng bề rộng (1168 -> 381.3). */ .crow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; padding: 12px 16px; } /* Dòng app dùng LẠI component .crow của cat-row.php (icon 64 + viền 1 = 66 đúng bằng bản gốc, tên 14/500 #4b4b4b, biến thể 'developer' = NPH + điểm, nút tải ẩn ở desktop). Từng thử dựng .crow riêng ở đây -> TRÙNG TÊN CLASS với component cũ, rule sau đè rule trước và nút tải bị display:none. */ /* Nguồn: 3 cột từ 720px trở lên, dưới đó 1 cột. KHÔNG có nấc 2 cột cho lưới thường (nấc 50% chỉ dành cho biến thể .no-grid), nên bỏ nấc 1100 tôi tự thêm. */ @media (max-width: 719px) { .crow-grid { grid-template-columns: 1fr; } .catbox__head { flex-wrap: wrap; } .catbox__tabs { width: 100%; overflow-x: auto; } } /* ========================================================================== 10. TRANG DOWNLOAD ========================================================================== */ .version { display: grid; grid-template-columns: 48px minmax(0, 1fr) max-content; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .version:last-of-type { border-bottom: 0; } .version__icon img { width: 48px; height: 48px; border-radius: var(--r-icon); } .version__name { font-weight: 500; } .version__meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 1px 7px; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; font-size: 11px; } .pill--xapk { background: var(--pill-xapk-bg); color: var(--pill-xapk-fg); } /* --- 10.1 TRANG CHỌN PHIÊN BẢN (/download) ------------------------------ Đo từ bản tham chiếu /versions: thẻ app đầu trang 868x106 (icon 80, khe 12, nút 212x38 canh giữa theo chiều dọc), hộp trắng tiêu đề 16/500 + đoạn dẫn 14/400, rồi danh sách dòng cao 68 ngăn nhau bằng vạch 1px. Dòng dùng lại .vitem của khối Old Versions trang chi tiết — hai nơi đo ra giống hệt nhau nên không tách component thứ hai. */ /* Dải breadcrumb riêng của trang này: bản gốc đệm 12/16 và chữ 13px, cao 46 — khác trang chi tiết (12px, cao 16, không đệm). */ /* Dải breadcrumb NẰM TRONG mạch thẻ trắng — bản gốc để nền trắng, liền một khối với thẻ app bên dưới (đo được khe 0). Trước đây để trong suốt nên lòi nền xám #f2f5f9 ra, nhìn như thẻ trắng bắt đầu lệch xuống. */ .vercrumbs { padding: 12px 16px; background: var(--surface); } .vercrumbs .breadcrumb { font-size: 13px; line-height: 22px; color: var(--text); } .vercrumbs .breadcrumb li { line-height: 22px; } /* Thẻ app: cột chữ cao 94 = tên 24 + khe 8 + NPH 22 + khe 4 + mô tả 2 dòng 36. Icon 80 nên phải canh TRÊN, không canh giữa. Nút tải canh giữa theo cột chữ. */ .verhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px 12px; } .verhead__app { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .verhead__icon { flex: 0 0 auto; width: 80px; height: 80px; border-radius: 15%; border: 1px solid var(--line-2); background: var(--surface-2); box-sizing: border-box; } .verhead__id { display: flex; flex-direction: column; min-width: 0; } .verhead__name { margin-bottom: 8px; font-size: 14px; line-height: 24px; color: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .verhead__dev { margin-bottom: 4px; font-size: 13px; line-height: 22px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .verhead__desc { font-size: 13px; line-height: 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .verhead__dl { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 212px; height: 38px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 14px; line-height: 20px; } /* Bản gốc cả hai nút tải đều có icon mũi tên xuống trước chữ. */ .verhead__dl svg { flex: 0 0 auto; width: 16px; height: 16px; } .vitem__btn svg { flex: 0 0 auto; width: 12px; height: 12px; } .vitem__btn { gap: 4px; } .verhead__dl:hover { background: var(--brand-hover); color: #fff; } /* Bản gốc ngăn các thẻ trắng bằng khe 4px (margin-bottom của từng hộp), không dính liền. Riêng breadcrumb -> thẻ app là khe 0, cố ý liền mạch. */ .verhead { margin-bottom: 4px; } .verbox { margin-bottom: 4px; } .verbox__head { padding: 12px 16px 0; } .verbox__title { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--head); } .verbox__desc { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--text); } /* Danh sách dòng cả trang: mỗi dòng tự kẻ vạch, không dùng .vlist__sep. */ /* Dòng cao đúng 68 = 10 đệm + 24 (tên) + 8 + 16 (dòng phụ) + 10 đệm. */ .vlist--page { gap: 0; padding: 0 16px; } .vlist--page .vitem { padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .vlist--page .vitem:last-child { border-bottom: 0; } .vlist--page .vitem__info { gap: 8px; } .vlist--page .vitem__name { color: #4b4b4b; } .vlist--page .vitem__meta { line-height: 16px; } /* Thẻ APK/XAPK cao đúng 16 kể cả viền; chữ trong lòng 14. */ .vlist--page .vtag { box-sizing: border-box; height: 16px; line-height: 14px; border-radius: 4px; } .vlist--page .vitem__btn { width: 90px; } .getfile { text-align: center; padding: 40px 20px; } .getfile__spinner { width: 34px; height: 34px; margin: 0 auto 16px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .getfile__spinner { animation: none; } } /* ========================================================================== 11. ARCHIVE / TRẠNG THÁI TRỐNG / PHÂN TRANG ========================================================================== */ .page-head { margin-bottom: var(--module-gap); padding: 16px; } .page-head__title { font-size: 20px; font-weight: 700; } .page-head__count { color: var(--muted); font-size: 13px; margin-top: 2px; } .sorts { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; } .sorts a { padding: 6px 14px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted); background: var(--surface-2); white-space: nowrap; } .sorts a:hover { color: var(--text); } .sorts a[aria-current="true"] { background: var(--brand); color: var(--on-brand); } .empty { padding: 48px 20px; text-align: center; color: var(--muted); } .empty__title { font-size: 17px; color: var(--text); margin-bottom: 6px; } .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 20px; } .pagination .page-numbers { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--surface); font-weight: 500; } .pagination .page-numbers.current { background: var(--brand); color: var(--on-brand); } .pagination .dots { background: none; } /* ========================================================================== 12. FOOTER ========================================================================== */ .site-footer { background: var(--surface); border-top: 1px solid #e7e7e7; padding: 24px 0 0; margin-top: 8px; } /* Chân trang co giãn theo lề 5% GIỐNG HEADER, không bị chặn 1232 như thân trang. Bản gốc: ở khổ 2453px header và chân trang đều 122..2316, còn nội dung giữa thì chặn 1200 và căn giữa. Để chân trang bị chặn thì trên màn rộng nó lệch khỏi header gần 500px, nhìn cả trang mất cân. */ @media (min-width: 720px) { .site-footer > .wrap { max-width: none; margin: 0 5%; padding: 0; } } .site-footer a { color: #8b8b8b; } .site-footer a:hover { color: var(--brand-dark); } /* MỘT hàng: cột thương hiệu 320 + các nhóm link, dàn đều hai mép. */ /* Bản gốc chừa 12px phía trên trong mỗi cột (logo và tiêu đề đều bắt đầu ở 13). */ .site-footer__cols { display: flex; justify-content: space-between; gap: 32px; } .site-footer__cols > * { padding-top: 12px; } .site-footer__brand { width: 320px; flex: none; } .site-footer__brand .brand--img img { height: 18px; } .site-footer__about { margin: 12px 0 0; font-size: 13px; line-height: 22px; color: #8b8b8b; } /* Mạng xã hội: ô chạm 25×25, glyph 16×16, không nền. */ .site-footer__social { display: flex; flex-wrap: wrap; margin-top: 8px; } .site-footer__social li { margin: 8px 6px 0 0; } .site-footer__social a { display: grid; place-items: center; width: 25px; height: 25px; color: #8b8b8b; } .site-footer__social a:hover { color: var(--brand-dark); } .site-footer__social svg { display: block; } .site-footer__group-title { font-size: 16px; font-weight: 500; line-height: 18px; color: #777; margin: 0; } .site-footer__group li { margin: 8px 6px 0 0; } .site-footer__group a { font-size: 13px; line-height: 22px; } /* Hàng cuối: bản quyền TRÁI, chọn ngôn ngữ PHẢI, cùng một dòng. */ .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 25px; padding: 8px 0; border-top: 1px solid #e7e7e7; } .lang-picker { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; height: 30px; border: 1px solid #e7e7e7; border-radius: 4px; font-size: 14px; color: #6f6f6f; } .lang-picker a[aria-current="true"] { color: var(--text); font-weight: 500; } .site-footer__copy { margin: 0; color: #a6a6a6; font-size: 12px; line-height: 16px; } .site-footer__legal a { color: #a6a6a6; } .site-footer__legal a::before { content: " | "; } @media (max-width: 995px) { /* Chân trang về một cột; hàng cuối tự xuống dòng thay vì ép hai mép. */ .site-footer__cols { flex-wrap: wrap; gap: 24px; } .site-footer__brand { width: 100%; } .site-footer__group { min-width: 140px; } .site-footer__bottom { flex-wrap: wrap; gap: 12px; } } /* ========================================================================== 14. TRANG LANDING DANH MỤC GỐC (Games / Apps) Bản tham chiếu: MỘT CỘT tràn 1200, không sidebar, không phân trang. Mỗi khối nền trắng, cách nhau 4px. ========================================================================== */ .landing { margin-top: 16px; background: var(--surface); } /* Thanh tiêu đề: 20px/500, nền trắng, đệm 10/16/0 (đo từ nguồn). */ .landing__head { padding: 10px 16px 0; background: var(--surface); font-size: 20px; font-weight: 500; line-height: 28px; color: var(--head); } .landing__head h1 { display: inline; font-size: 20px; font-weight: 500; } /* --- 14.1 Băng chuyền app nổi bật ------------------------------------- */ .cswiper { position: relative; padding: 8px 0; margin-bottom: 4px; background: var(--surface); } /* Hai dải trắng che hai mép để thẻ không ló ra ngoài máng 16px. */ .cswiper::before, .cswiper::after { content: ""; position: absolute; top: 0; left: 0; z-index: 5; width: 16px; height: 100%; background: var(--surface); } .cswiper::after { left: auto; right: 0; } .cswiper__list { display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .cswiper__list::-webkit-scrollbar { display: none; } /* 3 thẻ/khung: (100% − 2×8)/3 = 33.333% − 5.333 */ .cslide { position: relative; flex: 0 0 auto; width: calc(33.3333% - 5.3333px); overflow: hidden; border-radius: 8px; background: var(--surface-2); } /* Ảnh băng chuyền: bản gốc là 56.75% chứ không phải 16:9 (56.25%) — lệch nửa phần trăm nhưng đủ làm thẻ thấp đi 2px so với nguồn. */ .cslide__img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 227; object-fit: cover; } /* Dải chữ nằm đè đáy ảnh, nền chuyển tối dần để chữ trắng đọc được. */ .cslide__bar { position: absolute; left: 0; bottom: 0; z-index: 2; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 12px; background: linear-gradient(rgba(0, 0, 0, .01), rgba(0, 0, 0, .8)); } .cslide__name { flex: 1; min-width: 0; color: #fff; font-size: 14px; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cslide__btn { flex: 0 0 auto; padding: 5px 8px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 12px; line-height: 16px; } .cslide:hover .cslide__btn { background: var(--brand-hover); } /* Nút lùi/tiến: viên tròn 40 nổi trên mép, chỉ desktop (xem media ở dưới). */ .cswiper__nav { position: absolute; top: 50%; margin-top: -16px; z-index: 6; display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); cursor: pointer; box-shadow: 0 0 4px rgba(0, 0, 0, .12); } .cswiper__nav.is-on { display: block; } .cswiper__nav::before { /* mũi nhọn vẽ bằng 2 cạnh viền */ content: ""; position: absolute; top: 14px; width: 10px; height: 10px; border: 2px solid #868686; border-bottom: 0; border-right: 0; } .cswiper__nav--prev { left: 0; } .cswiper__nav--prev::before { right: 12px; transform: rotate(-45deg); } .cswiper__nav--next { right: 0; } .cswiper__nav--next::before { right: 16px; transform: rotate(135deg); } .cswiper__nav:hover::before { border-color: var(--link); } /* --- 14.2 Khối danh mục ------------------------------------------------ */ .cbox { padding: 8px 0 12px; margin-bottom: 4px; background: var(--surface); } .cbox__title { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .cbox__link { display: flex; align-items: center; } .cbox__text { padding: 4px 0 10px; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--head); } .cbox__arrow { align-self: center; flex: none; width: 6px; height: 6px; margin-left: 8px; border: 1.5px solid var(--chevron); border-bottom: 0; border-right: 0; transform: rotate(135deg); } .cbox__link:hover .cbox__text { color: var(--link); } .cbox__link:hover .cbox__arrow { border-color: var(--link); } /* --- 14.3 Kiểu GRID: 3 cột × 3 dòng, chảy DỌC từng cột ----------------- */ .clist--grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: calc(33.3333% - 8px); gap: 16px 12px; padding: 0 16px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; } .clist--grid::-webkit-scrollbar { display: none; } .crow { display: flex; align-items: center; justify-content: space-between; } .crow__icon { flex: 0 0 auto; width: 64px; height: 64px; box-sizing: content-box; border: 1px solid var(--line-soft); border-radius: var(--r-icon); background: var(--surface); } .crow__text { flex: 1; min-width: 0; margin: 0 12px; } .crow__name, .crow__ver, .crow__date, .crow__dev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crow__name { font-size: 14px; font-weight: 500; line-height: 22px; color: #4b4b4b; } .crow__ver { margin: 4px 0; font-size: 12px; line-height: 16px; color: var(--muted); } .crow__date { margin: 4px 0; font-size: 12px; line-height: 16px; color: var(--text); } /* Biến thể "theo danh mục": nhà phát hành + điểm sao thay cho phiên bản + ngày. */ .crow__dev { margin: 4px 0; font-size: 12px; line-height: 16px; color: var(--text); } .crow__score { display: flex; align-items: center; gap: 4px; margin-left: -2px; font-size: 12px; line-height: 16px; color: var(--star); } .crow__score svg { width: 11px; height: 11px; fill: var(--star); } .crow:hover .crow__name { color: var(--link); } /* Nút tải chỉ có ở MOBILE — bản gốc ẩn hẳn từ 720px trở lên. */ .crow__btn { display: none; flex: 0 0 auto; padding: 6px 8px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 12px; line-height: 16px; } /* --- 14.4 Kiểu SCROLL: cuộn ngang, icon 104 ---------------------------- */ /* Khe trên 8 (lưới là 10) và khe dưới 4: bản gốc dùng