/* ============================================================================ Dino4VN — dino4vn.com Một file duy nhất cho cả 4 trang. Không build step, không thư viện ngoài. ⚠️ QUY TẮC: không bao giờ thêm @import hay link tới CDN. Giữ Content-Security-Policy `default-src 'self'` nguyên vẹn là quyết định MỘT LẦN, khó đảo ngược — nới CSP cho Google Fonts bây giờ thì sau này không ai nới lại. ============================================================================ */ /* ── TOKEN ───────────────────────────────────────────────────────────────── 5 màu BRAND lấy từ assets/brand/make-cover.ps1 (script gốc làm ảnh bìa). Các màu còn lại là MỚI, suy ra — vì bộ gốc chỉ có MỘT nền, không phân tầng được card/bảng/hover nên mọi thứ phẳng lì như trang lỗi. */ :root{ --bg-0:#060C09; /* BRAND · nền trang */ --bg-1:#0B1310; /* MỚI · card */ --bg-2:#121C18; /* MỚI · header bảng, hover nav */ --bg-3:#1A2621; /* MỚI · hover trên bề mặt */ --fg:#F5F3EC; /* BRAND · 17.77:1 trên bg-0 AAA */ --fg-muted:#BEC8B6; /* BRAND · 11.39:1 AAA */ --fg-dim:#8A968A; /* MỚI · 6.40:1 AA — timestamp, chú thích */ --gold:#E2A83E; /* BRAND · 9.31:1 AAA */ --gold-hover:#F0BC57; /* MỚI · trên nền tối, hover phải SÁNG lên */ --gold-line:#D69E3A; /* BRAND · viền huy hiệu logo */ --gold-ink:#1A1204; /* MỚI · chữ TRÊN nút vàng — 8.75:1 */ --gold-wash:rgba(226,168,62,.10); --line:#22302A; --line-strong:#33453C; /* TRẠNG THÁI ⚠️ --warn CỐ Ý là đỏ-cam, KHÔNG dùng lại vàng. Nếu cảnh báo cũng màu vàng thì nó lẫn với --gold (màu nút) → người đọc mất khả năng phân biệt "đây là nút bấm" và "đây là cảnh báo". */ --ok:#5FD08A; --ok-wash:rgba(95,208,138,.12); --ok-line:rgba(95,208,138,.34); --unknown:#9AA79B; --unknown-wash:rgba(154,167,155,.10); --unknown-line:rgba(154,167,155,.28); --warn:#E8794F; --warn-wash:rgba(232,121,79,.12); --warn-line:rgba(232,121,79,.34); --danger:#E8705F; --scrim:6,12,9; /* RGB thô để pha alpha lên ảnh */ --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px; --pad:16px; --maxw:1060px; --sh-1:0 1px 2px rgba(0,0,0,.5); /* Font hệ thống — 0 request bên thứ ba. Windows → Segoe UI (đúng font trong make-cover.ps1 gốc), iOS → SF, Android → Roboto. Cả ba dựng dấu tiếng Việt chuẩn. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, monospace; --step--1:.875rem; --step-0:1rem; --step-1:1.0625rem; --step-2:clamp(1.25rem,1.13rem + .55vw,1.5rem); --step-3:clamp(1.5rem,1.26rem + 1.1vw,2rem); --step-4:clamp(1.875rem,1.42rem + 2.1vw,3rem); /* ⚠️ line-height KHÔNG BAO GIỜ dưới 1.18 — chữ Ộ, Ẫ, ệ chiếm ~1.3em chiều cao mực. Đây là lỗi số 1 khi bê design Anh–Mỹ sang tiếng Việt. */ --lh-display:1.20; --lh-head:1.30; --lh-body:1.65; } /* ── NỀN TẢNG ──────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--bg-0); -webkit-text-size-adjust:100%; } body{ margin:0; color:var(--fg); background:var(--bg-0); font:var(--step-0)/var(--lh-body) var(--font); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--gold); text-underline-offset:.18em; text-decoration-thickness:1px; } a:hover{ color:var(--gold-hover); } h1,h2,h3{ margin:0 0 .5em; } h1{ font-size:var(--step-4); line-height:var(--lh-display); letter-spacing:-.015em; font-weight:800; text-wrap:balance; } h2{ font-size:var(--step-3); line-height:var(--lh-head); letter-spacing:-.01em; font-weight:700; text-wrap:balance; } h3{ font-size:var(--step-2); line-height:var(--lh-head); font-weight:700; } p,li{ max-width:66ch; text-wrap:pretty; } /* ⚠️ uppercase CHỈ dùng cho nhãn ≤3 từ. Câu dài viết hoa + dấu chồng (kiểu "ĐỪNG ĐỂ MẤT") rất mệt mắt và bị cắt dấu trên nhiều font. */ .eyebrow{ font-size:var(--step--1); line-height:1.45; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--gold); margin:0 0 .6em; } .num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } :where(a,button,summary,[tabindex]):focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r-sm); } .skip{ position:absolute; left:-9999px; } .skip:focus{ left:12px; top:12px; z-index:99; padding:10px 16px; background:var(--gold); color:var(--gold-ink); border-radius:var(--r-sm); font-weight:700; } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:max(var(--pad),env(safe-area-inset-left)); } section{ padding-block:clamp(40px,8vw,72px); } .lead{ font-size:var(--step-1); color:var(--fg-muted); } .muted{ color:var(--fg-muted); } .dim{ color:var(--fg-dim); font-size:var(--step--1); } .stack > * + *{ margin-top:1em; } /* ── HEADER: không hamburger, không JS ───────────────────────────────────── 4 trang, 3 nhãn ngắn → tổng ~250px, vừa màn 360px. Hamburger ở đây là chi phí thuần: thêm một cú chạm, thêm rủi ro trong in-app browser của Facebook. */ .site-header{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; min-height:56px; padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left)); background:var(--bg-0); border-bottom:1px solid var(--line); } .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--fg); font-weight:800; letter-spacing:-.01em; flex:none; } .brand:hover{ color:var(--fg); } .brand__txt{ font-size:var(--step-1); } .nav{ margin-left:auto; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; } .nav::-webkit-scrollbar{ display:none; } .nav a{ display:inline-flex; align-items:center; white-space:nowrap; min-height:44px; padding:0 11px; border-radius:var(--r-sm); color:var(--fg-muted); text-decoration:none; font-size:var(--step--1); font-weight:600; } .nav a:hover{ color:var(--fg); background:var(--bg-2); } .nav a[aria-current="page"]{ color:var(--gold); box-shadow:inset 0 -2px 0 var(--gold); border-radius:0; } @media (max-width:359px){ .brand__txt{ display:none; } } /* ── NÚT ───────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:var(--r-pill); font:700 var(--step-0)/1.2 var(--font); text-decoration:none; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,transform .06s ease; } .btn--primary{ background:var(--gold); color:var(--gold-ink); box-shadow:var(--sh-1); } .btn--primary:hover{ background:var(--gold-hover); color:var(--gold-ink); } .btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); } .btn--ghost:hover{ background:var(--bg-2); border-color:var(--gold-line); color:var(--fg); } .btn:active{ transform:translateY(1px); } .cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } @media (max-width:479px){ .cta .btn{ flex:1 1 100%; } } /* ── HERO ────────────────────────────────────────────────────────────────── Độ sáng ĐO ĐƯỢC trên cover-1640x856.png: đáy ảnh y 749–856 : TB 23.8 p95 74 ← tối nhất cột trái x 0–205 : TB 16.7 p95 58 mặt trời x 1025–1230: TB 113.6 p95 221 ← sáng nhất, TRÁNH đặt chữ → chữ ở ĐÁY (mobile) hoặc CỘT TRÁI (desktop). Overlay alpha tối thiểu .72 (đo: .55 chỉ cho tương phản 3.25 với --fg-muted = KHÔNG ĐẠT). */ .hero{ position:relative; isolation:isolate; overflow:clip; min-height:min(86svh,640px); display:grid; align-content:end; padding:88px var(--pad) 44px; /* chiều cao do NỘI DUNG quyết định → CLS = 0 */ } .hero__img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; background:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAAAwBACdASoYAA0APt1cp00opSOiMAgBEBuJaACw7CLRwCjja4Hu2BT7EPwA/vFxLa57liMLQtiZr3ntZuhPhlY1NCevvLq1cgJARoxP5DQN9aXOw8drBfyMa+lwr7alDodnX12rpJQdSb48TGxHursCPlx9UX08D1lUdLL6DmqgOr88fUIVAAAA) center/cover no-repeat; /* LQIP 156 byte, 0 request */ } .hero__scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgb(var(--scrim)) 0%, rgba(var(--scrim),.93) 16%, rgba(var(--scrim),.80) 40%, rgba(var(--scrim),.44) 72%, rgba(var(--scrim),.30) 100%); } .hero__inner{ max-width:640px; margin-inline:auto; width:100%; } .hero__logo{ margin:0 0 18px; filter:drop-shadow(0 4px 18px rgba(0,0,0,.65)); } .hero h1{ margin-bottom:.45em; } .hero__sub{ color:var(--fg-muted); font-size:var(--step-1); margin:0 0 .9em; } .hero__note{ color:var(--fg-muted); margin:0; } @media (min-width:720px){ .hero{ min-height:min(78svh,560px); align-content:center; padding:64px 5vw; } .hero__inner{ max-width:600px; margin-inline:0; } .hero__scrim{ background: linear-gradient(to right, rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.86) 34%, rgba(var(--scrim),.40) 62%, rgba(var(--scrim),.26) 100%), linear-gradient(to top, rgb(var(--scrim)) 0%, rgba(var(--scrim),0) 34%); } } /* ── CARD / LƯỚI ───────────────────────────────────────────────────────── */ .card{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 18px; } .card--accent{ border-color:var(--gold-line); background:linear-gradient(var(--gold-wash),var(--gold-wash)),var(--bg-1); } .card h3{ margin-top:0; } .grid{ display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:720px){ .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } } /* ── BADGE TRẠNG THÁI ────────────────────────────────────────────────────── ⚠️ Trạng thái KHÔNG BAO GIỜ chỉ dựa vào màu — chấm luôn đi kèm CHỮ. Bắt buộc cho người mù màu. */ .badge{ display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 10px; border-radius:var(--r-pill); font-size:var(--step--1); font-weight:700; line-height:1.45; border:1px solid var(--unknown-line); background:var(--unknown-wash); color:var(--unknown); } .badge .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; } [data-state="open"] .badge,[data-state="busy"] .badge{ border-color:var(--ok-line); background:var(--ok-wash); color:var(--ok); } [data-state="offline"] .badge{ border-color:var(--warn-line); background:var(--warn-wash); color:var(--warn); } [data-state="open"] .dot,[data-state="busy"] .dot{ animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(95,208,138,.55) } 70%{ box-shadow:0 0 0 7px rgba(95,208,138,0) } } /* ── KHỐI TRẠNG THÁI SERVER ────────────────────────────────────────────── */ .status__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .status__name{ margin:0; font-size:var(--step-1); font-weight:600; color:var(--fg-muted); font-family:var(--font-num); letter-spacing:-.01em; } .status__lead{ margin:0 0 6px; font-size:var(--step-3); line-height:1.25; font-weight:800; color:var(--gold); letter-spacing:-.01em; } [data-state="offline"] .status__lead,[data-state="unknown"] .status__lead{ color:var(--fg); } .status__sub{ margin:0 0 10px; color:var(--fg-muted); } .status__meta{ margin:0; color:var(--fg-dim); font-size:var(--step--1); font-variant-numeric:tabular-nums; min-height:1.4em; } [data-state="loading"] .status__lead{ color:transparent; border-radius:var(--r-sm); background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2)); background-size:200% 100%; animation:shim 1.4s linear infinite; } @keyframes shim{ to{ background-position:-200% 0 } } /* ── BẢNG THÔNG SỐ ─────────────────────────────────────────────────────── */ .spec{ width:100%; border-collapse:collapse; } .spec th,.spec td{ padding:13px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .spec th{ width:34%; color:var(--gold); font-weight:700; } .spec td{ color:var(--fg-muted); } .spec tr:last-child :is(th,td){ border-bottom:0; } @media (max-width:559px){ /* xếp chồng — KHÔNG cuộn ngang */ .spec,.spec tbody,.spec tr,.spec th,.spec td{ display:block; width:auto; } .spec tr{ padding:12px 0; border-bottom:1px solid var(--line); } .spec th{ padding:0 0 4px; border:0; } .spec td{ padding:0; border:0; } } /* ── FAQ:
thuần, không JS ──────────────────────────────────────── Bàn phím, screen reader, Ctrl+F đều chạy sẵn. Google index được nội dung bên trong. name="faq" = accordion loại trừ; trình duyệt cũ chỉ mở được nhiều mục cùng lúc — vô hại. */ .faq{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .faq + .faq{ margin-top:10px; } .faq > summary{ list-style:none; cursor:pointer; position:relative; min-height:44px; padding:15px 48px 15px 16px; font-weight:700; font-size:var(--step-1); line-height:1.5; } .faq > summary::-webkit-details-marker{ display:none; } .faq > summary:hover{ background:var(--bg-2); } .faq > summary::after{ content:""; position:absolute; right:19px; top:50%; width:9px; height:9px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:translateY(-70%) rotate(45deg); transition:transform .18s ease; } .faq[open] > summary{ background:var(--bg-2); } .faq[open] > summary::after{ transform:translateY(-25%) rotate(-135deg); } .faq__body{ padding:2px 16px 16px; color:var(--fg-muted); } .faq__body > :first-child{ margin-top:0; } .faq__body > :last-child{ margin-bottom:0; } /* ── CÁC BƯỚC / DANH SÁCH LUẬT ─────────────────────────────────────────── */ .steps{ list-style:none; counter-reset:s; padding:0; margin:0; } .steps > li{ counter-increment:s; position:relative; padding:0 0 26px 50px; max-width:70ch; } .steps > li::before{ content:counter(s); position:absolute; left:0; top:-2px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--gold-wash); border:1px solid var(--gold-line); color:var(--gold); font-weight:800; font-size:var(--step--1); } .steps h3{ font-size:var(--step-1); margin:0 0 .35em; } .steps p{ margin:0 0 .5em; color:var(--fg-muted); } .steps p:last-child{ margin-bottom:0; } .rules{ list-style:none; padding:0; margin:0; } .rules li{ padding:12px 14px 12px 16px; border-left:3px solid var(--danger); margin-bottom:10px; background:var(--bg-1); border-radius:0 var(--r-sm) var(--r-sm) 0; max-width:none; color:var(--fg-muted); } .rules--ok li{ border-left-color:var(--ok); } .rules b{ color:var(--fg); } .species{ display:grid; gap:18px; grid-template-columns:1fr; margin:0; } @media (min-width:640px){ .species{ grid-template-columns:repeat(2,1fr); } } .species dt{ color:var(--gold); font-weight:700; margin-bottom:.3em; } .species dd{ margin:0; color:var(--fg-muted); } /* ── FOOTER ────────────────────────────────────────────────────────────── */ .site-footer{ margin-top:clamp(48px,8vw,88px); padding:32px 0 max(32px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-1); color:var(--fg-dim); font-size:var(--step--1); } .site-footer a{ color:var(--fg-muted); text-decoration:none; } .site-footer a:hover{ color:var(--gold); text-decoration:underline; } .site-footer ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; } .site-footer p{ margin:0 0 8px; max-width:70ch; } /* ── HIỆU NĂNG ─────────────────────────────────────────────────────────── */ section:not(.hero){ content-visibility:auto; contain-intrinsic-size:auto 600px; } /* ── GIẢM CHUYỂN ĐỘNG ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ── TIỆN ÍCH KHOẢNG CÁCH ────────────────────────────────────────────────── Thay cho style="" inline. Lý do KHÔNG dùng inline: Content-Security-Policy đặt `style-src 'self'` sẽ chặn thuộc tính style. Giữ CSP chặt quan trọng hơn là tiện tay. */ .mt-0{ margin-top:0 !important; } .mt-1{ margin-top:12px; } .mt-2{ margin-top:20px; } .mt-3{ margin-top:32px; }