/* home.css — trang chủ MỚI dulieuxuatnhapkhau.com (tầng anon, P2c-2). Độc lập với gioi-thieu.css/tier-a.css (trang này KHÔNG nạp 2 file đó) — vì vậy .wrap/.legal-note tương đương được định nghĩa LẠI ở đây (namespace hm-) theo đúng convention "mỗi trang tự định nghĩa .wrap riêng" đã có ở tier-a.css (xem DESIGN.md §c). Token màu/font lấy từ style.css :root (đã nạp trước file này trong ). Class chung (.stat-cards/.stat-card/ .badge/.tb-nav...) TÁI DÙNG nguyên từ style.css, không định nghĩa lại. */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; } /* ===== Hero — split 2 cột (trái chữ, phải visual) ===== */ .hm-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: 54px 0 30px; } .hm-hero-left { display: flex; flex-direction: column; } .hm-hero-right { display: flex; align-items: center; justify-content: center; width: 100%; } .hm-hero .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .hm-hero .eyebrow::before { content: "● "; } .hm-hero h1 { font-size: clamp(34px, 4.5vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 16px; } .hm-hero h1 .g { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .hm-hero .lead { font-size: 16.5px; color: var(--text-2); max-width: 54ch; line-height: 1.65; margin: 0 0 16px; } .hm-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .hm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: 0.16s; border: 1px solid transparent; cursor: pointer; } .hm-btn-primary { background: var(--grad-accent); color: #04231f; box-shadow: var(--glow); } .hm-btn-primary:hover { filter: brightness(1.08); } .hm-btn-outline { background: var(--surface-2); border-color: var(--border); color: var(--text-2); } .hm-btn-outline:hover { border-color: var(--accent-2); color: var(--accent); } .hm-hero .micro { font-size: 12px; color: var(--text-3); margin-top: 14px; font-weight: 600; } .hm-hero-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .hm-hero-kpi .kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .hm-hero-kpi .kpi-v { font-size: 26px; font-weight: 800; font-family: "JetBrains Mono", monospace; letter-spacing: -0.5px; color: var(--accent); margin: 4px 0 2px; } .hm-hero-kpi .kpi-l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } /* Coverage grid — phía phải hero: 7 series × 18 cột năm, cell aspect vuông, đủ 18 cột */ #coverage-grid { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: radial-gradient(ellipse 120% 120% at 50% 45%, rgba(52, 211, 194, 0.05) 0%, transparent 58%); box-shadow: none; width: 100%; min-width: 0; align-self: center; } #coverage-grid .grid-title { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } #coverage-grid .grid-title b { color: var(--accent); } .coverage-table { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .coverage-row { display: flex; gap: 3px; align-items: center; min-width: 0; flex: 1; } .coverage-label { font-size: 10px; font-weight: 600; color: var(--text-2); min-width: 70px; white-space: nowrap; flex-shrink: 0; } .coverage-cells { display: flex; gap: 3px; flex-wrap: nowrap; flex: 1; min-width: 0; } .coverage-cell { flex: 1 1 0; min-width: 10px; aspect-ratio: 1; border-radius: 2px; background: var(--border); cursor: pointer; transition: all 0.15s; } .coverage-cell.has { background: var(--accent); opacity: 0.9; } .coverage-cell.has:hover { opacity: 1; filter: brightness(1.1); } .coverage-header { display: flex; gap: 3px; margin-bottom: 6px; margin-left: 70px; flex: 1; min-width: 0; } .coverage-header span { flex: 1 1 0; min-width: 10px; font-size: 8px; color: var(--text-3); text-align: center; font-weight: 600; } .coverage-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-2); margin-top: 8px; justify-content: center; flex-wrap: wrap; } .coverage-legend-item { display: flex; align-items: center; gap: 5px; } .coverage-legend-square { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .coverage-legend-square.has { background: var(--accent); } .coverage-legend-square.empty { background: var(--border); } /* Strip 6 số dưới hero */ .hm-strip-sec { padding: 24px 0; background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin-bottom: 40px; overflow: hidden; } .hm-strip-container { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; } .hm-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 14px; } .hm-strip-value { font-size: 18px; font-weight: 800; font-family: "JetBrains Mono", monospace; color: var(--accent); letter-spacing: -0.4px; } .hm-strip-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } /* ===== Headline kỳ mới nhất — tái dùng .stat-cards/.stat-card/.stat-value (style.css) ===== */ .hm-headline-sec { padding: 8px 0 40px; } .hm-headline-sec h2 { font-size: 15px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; } .hm-headline-sec .stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .hm-headline-sec .stat-card { min-width: 0; } /* Số USD dài (vd "53.095.475.046 USD") không có khoảng trắng để trình duyệt tự ngắt dòng — ép overflow-wrap để không tràn card trên màn hẹp (bug đo được ở 375px: .stat-value nguyên hàng dài đẩy .stat-card vượt cột grid). */ .hm-headline-sec .stat-value, .hm-headline-sec .stat-label { overflow-wrap: anywhere; } .hm-semimonthly-note { margin-top: 14px; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 16px; } .hm-semimonthly-note b { color: var(--accent); } /* ===== Catalog kho dữ liệu (chữ) — vũ khí SEO/AI-search chính ===== */ .hm-catalog-sec { padding: 38px 0; } .hm-catalog-sec .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .hm-catalog-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; margin: 8px 0 6px; } .hm-catalog-sec .sub { color: var(--text-2); font-size: 14px; max-width: 76ch; line-height: 1.65; } .hm-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 30px; } .hm-cat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; } .hm-cat-card .n { font-size: 24px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; } .hm-cat-card .l { font-size: 12px; color: var(--text-3); margin-top: 4px; } .hm-series-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .hm-series-list li { font-size: 13.5px; color: var(--text-2); line-height: 1.55; padding-left: 18px; position: relative; } .hm-series-list li::before { content: "·"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .hm-series-list b { color: var(--text); } .hm-method-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .hm-method-list li { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--text-2); line-height: 1.5; } .hm-method-list .no { display: block; font-weight: 800; color: var(--accent); font-size: 12px; margin-bottom: 6px; } .hm-tickers h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; } .hm-tickers .sub { font-size: 13px; color: var(--text-3); margin-bottom: 16px; } .hm-ticker-group { margin-bottom: 16px; } .hm-ticker-group h4 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin: 0 0 8px; } .hm-ticker-list { display: flex; flex-wrap: wrap; gap: 8px; } .hm-ticker-list a { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; transition: 0.15s; } .hm-ticker-list a:hover { color: var(--accent); border-color: var(--accent-2); } /* ===== 3 tầng truy cập ===== */ .hm-tiers-sec { padding: 38px 0; } .hm-tiers-sec .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .hm-tiers-sec h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.6px; margin: 8px 0 6px; } .hm-tiers-sec .sub { color: var(--text-2); font-size: 14px; max-width: 70ch; margin-bottom: 26px; line-height: 1.6; } .hm-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hm-tier-card { border-radius: 16px; padding: 20px; border: 1px solid var(--border-soft); background: var(--surface); } .hm-tier-card.anon { border-color: var(--border); } .hm-tier-card.free { border-color: var(--accent-2); } .hm-tier-card.paid { border-color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); } .hm-tier-card .ft { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .hm-tier-card.anon .ft { color: var(--text-3); } .hm-tier-card.free .ft { color: var(--accent); } .hm-tier-card.paid .ft { color: var(--gold); } .hm-tier-card .fp { font-size: 13px; color: var(--text-3); margin: 4px 0 12px; } .hm-tier-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; } .hm-tier-card li { font-size: 13px; color: var(--text-2); line-height: 1.5; padding-left: 16px; position: relative; } .hm-tier-card li::before { content: "·"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .hm-tier-card .hm-btn { width: 100%; justify-content: center; padding: 10px; font-size: 13px; } /* ===== Miễn trừ trách nhiệm — mirror .legal-note (tier-a.css), không nạp file đó nên định nghĩa lại ===== */ .hm-legal { margin-top: 8px; padding: 13px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--gold-deep); font-size: 12.5px; color: var(--text-2); line-height: 1.6; } .hm-legal b { color: var(--gold); } .hm-foot-mst { font-size: 11px; color: var(--text-3); margin-top: 8px; } /* ===== Motion — 6 tier effects (gate: prefers-reduced-motion) ===== */ @media (prefers-reduced-motion: no-preference) { /* (4) Marquee loop — strip 6 số chạy ngang chậm, duplicate 2x */ .hm-strip-container.marquee-loop { display: flex; animation: marquee-scroll 18s linear infinite; gap: 16px; /* nội dung nhân đôi phải nối NGANG một dòng, không rơi xuống hàng 2 */ flex-wrap: nowrap; width: max-content; justify-content: flex-start; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .hm-strip-container.marquee-loop:hover { animation-play-state: paused; } /* (3) Sweep sáng quét qua lại đã GỠ theo lệnh user 2026-08-15 ("tắt nó đi, rối mắt mà không đẹp") — chỉ giữ stagger-in cell lúc load. */ /* (5) Hover effects — card translateY + border teal + glow */ .hm-hero-kpi .kpi:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 0 16px rgba(52, 211, 194, 0.18); transition: all 0.18s ease-out; } .hm-cat-card:hover { border-color: var(--accent-2); transform: translateY(-2px); transition: all 0.18s ease-out; } .hm-btn:hover { transition: all 0.18s ease-out; } .tb-nav a:hover { border-color: var(--accent-2); transform: translateY(-1px); transition: all 0.18s ease-out; } } @media (max-width: 860px) { .hm-hero { grid-template-columns: 1fr; } .hm-hero-kpi { grid-template-columns: repeat(2, 1fr); } .hm-hero h1 { font-size: clamp(28px, 5vw, 40px); } .hm-headline-sec .stat-cards { grid-template-columns: 1fr 1fr; } .hm-cat-grid { grid-template-columns: repeat(2, 1fr); } .hm-series-list, .hm-method-list, .hm-tier-grid { grid-template-columns: 1fr; } .hm-strip-container { flex-wrap: nowrap; overflow-x: auto; } .hm-strip-item { flex-shrink: 0; } } @media (max-width: 640px) { .hm-hero { padding: 40px 0 24px; } .hm-hero h1 { font-size: clamp(24px, 6vw, 32px); } .hm-hero-kpi { grid-template-columns: 1fr; gap: 10px; } .hm-hero-right { display: none; } .hm-strip-value { font-size: 16px; } .hm-strip-label { font-size: 9px; } }