/* VHHC Agritech Premium — component & layout styles, built on ported design tokens. */ /* Thang chữ/nút mới, chủ site duyệt 29/09/2026 (docs/ux/sizing-audit-2026-09-29.md). Ghi đè biến token tại đây (không sửa tokens/*.css). Điểm neo: 375 và 1280. */ :root { --text-display: clamp(32px, 22.055px + 2.6519vw, 56px); --text-h1: clamp(30px, 22.542px + 1.9890vw, 48px); --text-h2: clamp(24px, 20.685px + .8840vw, 32px); --text-h3: clamp(18px, 1rem + .3vw, 20px); --text-micro: 13px; --control-h-lg: 48px; } .vhhc-skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: var(--text-inverse); padding: var(--space-3) var(--space-4); z-index: 100; } .vhhc-skip-link:focus { left: var(--space-4); top: var(--space-4); } /* ---------- Layout ---------- */ .vhhc-container { max-width: calc(var(--layout-max) + 2 * var(--layout-gutter)); margin: 0 auto; padding: 0 var(--layout-gutter); } .vhhc-section { padding: var(--section-pad-y) 0; } .vhhc-section--sm { padding: var(--section-pad-y-sm) 0; } .vhhc-section--soft { background: var(--color-surface-soft); } .vhhc-section--full-bleed { padding-left: 0; padding-right: 0; } /* One rhythm, one separator: consecutive sections get a hairline instead of alternating backgrounds/padding tricks (§3.3). Every section element must carry the base .vhhc-section class (in addition to --sm/--soft modifiers) for this to apply. */ .vhhc-section + .vhhc-section { border-top: 1px solid var(--border-subtle); } img { max-width: 100%; display: block; } /* ---------- Type helpers ---------- */ /* GĐ3 vòng 6, 17/09/2026 (T5): inline-flex để eyebrow ngồi cùng dòng với link email lớn theo sau (Contact header, khối báo giá Home) thay vì xuống dòng riêng như thiết kế — luôn đứng đầu khối, đổi sang flex (khối riêng). */ .vhhc-eyebrow { display: flex; align-items: center; gap: var(--space-2); font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); } /* 17/09/2026 GĐ2 Đợt 4: dropped the repeating Lime dot (modernize-2026-09-17.md §3.5/§3.10) — it read as a template flourish stamped on every label. */ /* GĐ3 vòng 2, 17/09/2026 (V9): tránh mồ côi 1 chữ ở dòng cuối tiêu đề; tiếng Việt nhiều dấu/thanh điệu cần line-height rộng hơn và ngắn dòng hơn tiếng Anh. */ h1, h2, h3 { text-wrap: balance; } :lang(vi) .vhhc-display, :lang(vi) .vhhc-h1 { line-height: 1.14; } :lang(vi) .vhhc-display { max-width: 13em; } .vhhc-h1 { font: var(--type-h1); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); } .vhhc-display { font: var(--type-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); } .vhhc-h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); max-width: 22ch; } .vhhc-h3 { font: var(--type-h3); margin: 0 0 var(--space-3); } /* T12, GĐ3 vòng 6, 17/09/2026: thay 4 style="margin-top:...;font-size:..." giống hệt nhau (page-products-services.php) bằng 1 class dùng chung. */ .vhhc-h3--subsection { margin-top: var(--space-6); } /* Body copy defaults to Deep Canopy, not Moss Grey — Moss Grey is reserved for captions/meta/secondary text (§3.6). Elements that need the muted tone add .vhhc-caption or set color explicitly (e.g. inverse CTA bands). */ .vhhc-body { font: var(--type-body); color: var(--text-primary); max-width: 64ch; } /* 29/09/2026: cột 1 hàng ở tablet dài 100+ ký tự/dòng */ .vhhc-body + .vhhc-body { margin-top: 1em; } .vhhc-param-line { margin-top: var(--space-5, 1.5rem); } .vhhc-param-line__label { margin: 0 0 var(--space-2); font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); } .vhhc-param-line__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); } .vhhc-param-line__list li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-5); color: var(--text-primary); font-size: var(--text-body); line-height: 1.4; } .vhhc-param-line__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; background: var(--color-accent-growth); } .vhhc-param-line__unit { margin-left: var(--space-1); font-size: 13px; color: var(--text-secondary); } @media (max-width: 639px) { .vhhc-param-line__list { grid-template-columns: 1fr; } } .vhhc-sample__list { list-style: none; margin: 0; padding: 0; max-width: 28rem; } .vhhc-sample__list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); line-height: 1.4; } .vhhc-sample__val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .vhhc-sample__ratio { font-weight: var(--weight-semibold); } .vhhc-sample .vhhc-link-cta { margin-top: var(--space-2); } .vhhc-caption { font: var(--type-caption); color: var(--text-secondary); } figcaption.vhhc-caption { max-width: 80ch; } /* Rà soát mobile 23/09/2026 (docs/ux/mobile-audit-2026-09-23.md): link mailto "Or email trade@vhhc.vn" trong .vhhc-caption (Products, mã hàng riêng) chỉ cao ~19px. vẫn là inline mặc định (không đổi display) — padding dọc mở rộng vùng bấm/vẽ nhưng không cộng vào chiều cao dòng theo spec CSS inline, nên không đẩy "Or email" hay dòng dưới. */ .vhhc-caption a[href^="mailto:"] { padding: 13px 0; } .vhhc-lead { font-size: var(--text-body-lg); line-height: var(--leading-lead, 1.5); color: var(--text-primary); max-width: 60ch; margin: 0; } /* ---------- NavBar ---------- */ .vhhc-navbar { position: sticky; top: 0; z-index: 40; height: 72px; display: flex; align-items: center; /* Solid Clean Grain, no translucent veil/blur (§3.7) — a header that's always legible instead of only "mostly" opaque over content. */ background: var(--color-surface); border-bottom: 1px solid var(--border-subtle); } .vhhc-navbar__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* GĐ3 vòng 2, 17/09/2026 (V7):