/* ============================================================================ つなぐノート — bảng kiểu dùng chung cho toàn bộ landing page. VÌ SAO file này trông "cũ kỹ" (một file CSS thuần, không build step): người đọc trang này là 園長 người Nhật, thường 50–60 tuổi, mở trang từ máy tính để bàn đời cũ trong phòng hành chính của trường hoặc từ điện thoại qua mạng 3G. Ràng buộc sản phẩm là trang phải vẽ xong dưới 1 giây. Một framework CSS kéo theo 200–400KB và một vòng request tới CDN ngoài — đủ để phá mốc đó, và CDN ngoài cũng bị CSP của trang chặn thẳng. Một file duy nhất, tải một lần rồi cache cho cả chín trang còn lại. ⚠️ File này KHÔNG áp cho `site/g/` (màn hình Tầng 0 cho ông bà). Thư mục đó có `style.css` riêng với ràng buộc riêng (chữ ≥22px, tương phản ≥7:1) và không được kéo theo bất cứ thay đổi nào ở đây. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Biến màu — MỘT chế độ sáng duy nhất VÌ SAO BỎ HẲN CHẾ ĐỘ TỐI. Bản trước khai `prefers-color-scheme: dark` và đổi nền thành #15181a. Kết quả thật: máy khách để chế độ tối (mặc định của nhiều máy Windows văn phòng) mở trang bán hàng ra một trang gần như đen. Với người mua là 園長 50–60 tuổi, một trang marketing tối om đọc như trang lỗi, không phải như một nhà cung cấp đáng tin. Cả hai đối thủ dẫn đầu thị trường (CoDMON 25.548 cơ sở, ルクミー) đều chỉ có MỘT chế độ sáng. Trang giới thiệu là tài liệu bán hàng, không phải công cụ dùng tám tiếng mỗi ngày — lập luận "đỡ mỏi mắt" của chế độ tối không áp ở đây. `color-scheme: light` là phần bắt buộc thứ hai: thiếu nó, Chrome/Edge ở chế độ "auto dark theme" trên Android tự đảo màu cả trang và phá mọi cặp tương phản đã đo bên dưới. ⛔ MỌI cặp chữ/nền dưới đây đã đo bằng công thức tương phản WCAG 2.1 (relative luminance), không ước lượng bằng mắt. Sàn: 4.5:1 cho thân bài, 3:1 cho chữ lớn. Bản cũ có --green #2e7d32 chỉ đạt 5.13:1 trên nền trắng trong khi tài liệu dự án tự đặt mốc 7:1 — bảng dưới đây đã sửa chỗ đó. Đổi bất kỳ giá trị nào thì phải tính lại và ghi lại số đo. --------------------------------------------------------------------------- */ :root { /* Một chế độ sáng. Không khai `dark` — xem giải thích ở trên. */ color-scheme: light; /* --- Nền -------------------------------------------------------------- */ --paper: #ffffff; --paper-soft: #f3f8f5; /* dải nghỉ mắt, ánh xanh lá rất nhạt */ --paper-warm: #fff8ec; /* dải ấm — あたたかさ */ --paper-tint: #fff7f2; /* nền cột "おすすめ" trong bảng giá */ /* --- Chữ -------------------------------------------------------------- */ /* Không dùng #000: tương phản 21:1 quá gắt, gây lóa khi đọc dài. */ --ink: #16201b; /* /trắng 16.71:1 · /#f3f8f5 15.56:1 · /#fff8ec 15.83:1 */ --ink-muted: #465049; /* /trắng 8.39:1 · /#f3f8f5 7.81:1 · /#fff8ec 7.94:1 */ /* --- Xanh lá — 成長・安心 (giữ nguyên ý nghĩa màu của dự án) ----------- */ --green: #14654a; /* /trắng 7.02:1 · /#f3f8f5 6.54:1 · /#e6f2ec 6.11:1 */ --green-strong: #0f5a42; /* /trắng 8.20:1 · /#e6f2ec 7.14:1 — chữ nút phụ */ --green-deep: #08503c; /* nền dải đậm: trắng /nó 9.45:1 */ --green-mid: #146b50; /* điểm sáng nhất của gradient: trắng /nó 6.46:1 */ --green-ink: #0a4a38; /* /trắng 10.25:1 · /#d9f0e5 8.56:1 — chữ trên nền bạc hà */ --green-soft: #e6f2ec; --green-chip: #d9f0e5; --green-line: #bcdccb; /* --- Xanh dương — 信頼 -------------------------------------------------- */ --blue: #0f5ea8; /* /trắng 6.59:1 · /#f3f8f5 6.14:1 · /#d9f0e5 5.51:1 */ --blue-soft: #e8f1fa; /* --- Cam đất — MÀU HÀNH ĐỘNG ------------------------------------------- Bản cũ chỉ có xanh lá trên nền trắng: nút chính chìm vào phần còn lại của trang. CoDMON dùng hồng đậm trên nền xanh ngọc chính vì lý do này — nút mua phải là thứ duy nhất trong tầm mắt mang màu đó. Chọn cam đất thay vì hồng: nó là màu đối của xanh lá trên vòng tròn màu (nổi tối đa so với nền thương hiệu), và giữ được giọng ấm áp của một sản phẩm cho nhà trẻ thay vì giọng bán lẻ tiêu dùng. */ --accent: #b3400f; /* chữ trắng /nó 5.74:1 · nó /trắng 5.74:1 */ --accent-dark: #8f3009; /* chữ trắng /nó 8.09:1 — trạng thái hover */ /* --- Cảnh báo / ghi chú bắt buộc --------------------------------------- */ --warn-bg: #fff4e0; --warn-line: #a35b00; /* /trắng 5.18:1 — bản cũ #e6a23c chỉ 1.9:1 */ /* --- Đường kẻ ---------------------------------------------------------- Hai mức: `--line` cho viền thẻ (thuần trang trí) và `--line-strong` cho ô bảng. Bảng giá và bảng so sánh là chỗ người đọc phải dò theo hàng bằng mắt; kẻ quá nhạt là chỗ mất dòng thường gặp nhất ở tuổi lão thị. */ --line: #d7e2dc; --line-strong: #78958a; /* /trắng 3.25:1 */ /* --- Chữ trên nền đậm --------------------------------------------------- */ --on-deep: #ffffff; /* /#08503c 9.45:1 · /#146b50 6.46:1 */ --on-deep-muted: #d7ece1; /* /#08503c 7.64:1 · /#146b50 5.23:1 */ --on-deep-mark: #ffe6a8; /* /#08503c 7.71:1 · /#146b50 5.27:1 — chữ nhấn */ /* --- Chân trang --------------------------------------------------------- */ --foot-bg: #0c3c2d; --foot-ink: #d7e8e0; /* /#0c3c2d 9.71:1 */ /* --- Đổ bóng ------------------------------------------------------------ Rất nhẹ và có ánh xanh lá thay vì đen thuần: bóng đen trên nền kem trông bẩn trên màn hình TN cũ của máy văn phòng. */ --shadow: 0 1px 2px rgba(16, 36, 28, .06), 0 8px 20px -14px rgba(16, 36, 28, .28); --shadow-lift: 0 2px 4px rgba(16, 36, 28, .07), 0 18px 36px -20px rgba(16, 36, 28, .38); --radius: 14px; --radius-lg: 22px; /* --- Nền sáng bổ sung --------------------------------------------------- VÌ SAO THÊM. Bản trước chỉ có hai dải nghỉ (#f3f8f5 và #fff8ec), nên mười section chạy liên tiếp trông như một khối chữ dài không có nhịp. Ba tông dưới đây đủ nhạt để chữ thân bài giữ nguyên mọi số đo tương phản ở trên, nhưng khác nhau đủ để mắt nhận ra "vừa sang phần mới" mà không cần đọc. Đây chính là thủ pháp CoDMON dùng: nền đổi màu rất nhẹ theo từng chủ đề, không dùng đường kẻ ngang. Đã đo lại toàn bộ trên ba nền này: --ink #16201b /mint 15.61 · /sky 14.90 · /cream 15.58 --ink-muted #465049 /mint 7.83 · /sky 7.48 · /cream 7.82 --green #14654a /mint 6.56 · /sky 6.26 · /cream 6.55 */ --mint: #eefaf4; /* dải "sản phẩm làm được gì" */ --mint-2: #e2f5ec; /* nền thẻ con bên trong dải mint */ --sky: #eaf3fc; /* dải "chế độ, pháp lý" — xanh dương = 信頼 */ --cream: #fff6e6; /* dải "tiền" — ấm, dễ chịu khi nói về giá */ /* --- Bảng màu cho BIỂU ĐỒ ------------------------------------------------ Năm màu, dùng theo đúng thứ tự này ở mọi biểu đồ để một màu luôn có một nghĩa trên toàn trang. Tất cả đều ≥4.5:1 trên cả bốn nền sáng ở trên, nên nhãn chữ đặt ngay cạnh cột vẫn đọc được; cột màu cũng vượt xa sàn 3:1 của WCAG 1.4.11 cho đối tượng đồ hoạ. --c1 #14654a trắng 7.02 · mint 6.56 · sky 6.26 · cream 6.55 --c2 #0f5ea8 trắng 6.59 · mint 6.16 · sky 5.88 · cream 6.14 --c3 #b3400f trắng 5.74 · mint 5.36 · sky 5.12 · cream 5.35 --c4 #7a3d8f trắng 7.26 · mint 6.78 · sky 6.48 · cream 6.77 --c5 #8a5a00 trắng 5.93 · mint 5.54 · sky 5.28 · cream 5.53 ⛔ Màu KHÔNG BAO GIỜ là thông tin duy nhất. Mọi cột, mọi lát bánh, mọi ô ma trận đều mang thêm chữ hoặc dấu ✓/✕ ngay tại chỗ. Khoảng 1/20 nam giới Nhật bị rối loạn sắc giác đỏ-lục, và trang này bán cho hiệu trưởng ở đúng nhóm tuổi mà thị lực đã bắt đầu kém. */ --c1: #14654a; --c2: #0f5ea8; --c3: #b3400f; --c4: #7a3d8f; --c5: #8a5a00; /* Nền nhạt đi kèm từng màu — chỉ làm nền, luôn có nét viền màu đậm bên trên. */ --c1-bg: #ddf0e7; --c2-bg: #dfebf8; --c3-bg: #fbe6dc; --c4-bg: #efe2f4; --c5-bg: #f6ecd6; /* Vàng nắng — chỉ dùng trang trí (vầng sáng, ngôi sao, nét nhấn dưới tiêu đề). Không bao giờ dùng làm màu chữ: #ffc94d trên trắng chỉ 1.58:1. */ --sun: #ffc94d; --sun-soft: #ffe9b8; } /* --------------------------------------------------------------------------- 2. Nền chữ Font stack chỉ gồm font CÓ SẴN trong hệ điều hành. Không tải Google Fonts: một file WOFF2 tiếng Nhật nặng 2–6MB vì phải chứa hàng nghìn chữ Hán — trên 3G nó khiến chữ không hiện trong nhiều giây. Hiragino có sẵn trên macOS/iOS, Yu Gothic trên Windows 8.1 trở lên, Noto Sans JP trên Android và trên máy Linux đã cài font Nhật. --------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif; /* ⛔ 17px là sàn cứng cho thân bài. Người đọc trang bán hàng này cũng ở tuổi lão thị; 16px mặc định của trình duyệt là quá nhỏ với họ. */ font-size: 17px; line-height: 1.9; word-break: normal; overflow-wrap: anywhere; /* Ngắt dòng tiếng Nhật đúng chỗ: không để 「。」 hay 「、」 mở đầu dòng. */ line-break: strict; } h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .6em; font-weight: 700; letter-spacing: .01em; } h1 { font-size: 31px; } h2 { font-size: 26px; } h3 { font-size: 21px; } h4 { font-size: 19px; } @media (min-width: 700px) { h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 23px; } } /* Gạch nhấn dưới tiêu đề section — nhịp thị giác rẻ nhất có thể: người đọc biết ngay mình vừa sang một phần mới mà không tốn một byte ảnh nào. */ section > .wrap > h2:first-child, section > .wrap-narrow > h2:first-child { position: relative; padding-bottom: 14px; margin-bottom: 26px; } section > .wrap > h2:first-child::after, section > .wrap-narrow > h2:first-child::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 999px; background: var(--accent); } p { margin: 0 0 1.1em; } a { color: var(--blue); text-underline-offset: .2em; } a:hover, a:focus { color: var(--green-strong); } /* Viền focus rõ ràng — người dùng bàn phím và người dùng lớn tuổi hay lạc con trỏ; viền mặc định của một số trình duyệt gần như vô hình trên nền kem. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } /* Trên dải nền đậm, viền focus xanh dương gần như biến mất. Đổi sang vàng kem (tương phản 7.71:1 trên --green-deep). */ .band-deep :focus-visible, .site-foot :focus-visible { outline-color: var(--on-deep-mark); } /* Cỡ chữ chú thích. Vẫn 17px — tài liệu thiết kế đặt sàn ở thân bài, và ở trang này phần chú thích chính là phần nói về pháp lý và nguồn số liệu, tức là phần người đọc cần đọc kỹ nhất. */ small, .note { display: block; font-size: 17px; color: var(--ink-muted); line-height: 1.75; } /* Số liệu quan trọng không được chìm trong câu văn. Class này phóng con số ngay tại chỗ nó đứng trong câu, giữ nguyên ngữ pháp tiếng Nhật xung quanh. `tabular-nums` để hàng chữ số không nhảy khi đứng cạnh nhau. */ .stat-num { font-size: 1.55em; font-weight: 700; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --------------------------------------------------------------------------- 3. Bố cục --------------------------------------------------------------------------- */ .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; } .wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; } /* Không còn đường kẻ ngang giữa các section: nhịp điệu do DẢI NỀN tạo ra. Thứ tự nền trên mọi trang đang là trắng → nhạt → trắng → kem → trắng, nên hai section liền nhau không bao giờ cùng màu. */ section { padding: 52px 0; } @media (min-width: 700px) { section { padding: 72px 0; } } .band-alt { background: var(--paper-soft); } .band-cream { background: linear-gradient(180deg, #fffbf3 0%, var(--paper-warm) 100%); } /* Hai dải sáng bổ sung. Màu gắn với CHỦ ĐỀ chứ không luân phiên máy móc: bạc hà = "sản phẩm làm được gì", xanh trời = "chế độ và pháp lý", kem = "tiền". Người đọc lướt lần hai tìm lại được phần mình cần theo màu. */ .band-mint { background: linear-gradient(180deg, #f6fdfa 0%, var(--mint) 100%); } .band-sky { background: linear-gradient(180deg, #f5faff 0%, var(--sky) 100%); } /* Vạch nhấn dưới tiêu đề đổi màu theo dải, để cái gạch không còn là một vệt cam giống hệt nhau lặp lại mười lần. */ .band-mint > .wrap > h2:first-child::after, .band-mint > .wrap-narrow > h2:first-child::after { background: var(--c1); } .band-sky > .wrap > h2:first-child::after, .band-sky > .wrap-narrow > h2:first-child::after { background: var(--c2); } .band-cream > .wrap > h2:first-child::after, .band-cream > .wrap-narrow > h2:first-child::after { background: var(--c5); } /* Dải đậm — dùng cho CTA cuối trang. Đây là chỗ DUY NHẤT ngoài hero được phép dùng nền đậm: mắt cần một điểm dừng nặng ở cuối, nhưng cả trang tối thì không. */ .band-deep { background: linear-gradient(158deg, var(--green-deep) 0%, var(--green-mid) 100%); color: var(--on-deep); } .band-deep h2, .band-deep h3 { color: var(--on-deep); } .band-deep > .wrap > h2:first-child::after, .band-deep > .wrap-narrow > h2:first-child::after { background: var(--on-deep-mark); } .band-deep .lead, .band-deep > .wrap > p, .band-deep > .wrap-narrow > p { color: var(--on-deep-muted); } .band-deep strong { color: var(--on-deep-mark); } /* `:not(.btn)` là bắt buộc: không có nó, quy tắc này thắng .btn-secondary về độ ưu tiên và nút phụ (nền trắng) hiện chữ vàng kem trên nền trắng. */ .band-deep a:not(.btn) { color: var(--on-deep-mark); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 12px; top: 12px; z-index: 30; background: var(--green-deep); color: #fff; padding: 10px 16px; border-radius: 6px; } /* --------------------------------------------------------------------------- 4. Đầu trang và chân trang Không có hamburger menu. Menu ẩn sau biểu tượng ba gạch là rào cản thật với người dùng lớn tuổi, và mở nó ra đòi JavaScript — thứ mà CSP của các trang giới thiệu chặn hoàn toàn (script-src 'none'). Nav ở đây chỉ là danh sách liên kết, tự xuống dòng khi màn hình hẹp. ⛔ VÌ THẾ, THỨ PHẢI GIỮ NGẮN LÀ DANH SÁCH, KHÔNG PHẢI CÁCH HIỂN THỊ NÓ. Bản trước có chín mục và xuống ba dòng ngay cả trên màn hình rộng, vì nó mang cả 「プライバシーポリシー」 và 「特定商取引法に基づく表記」 lên đầu trang. Hai thứ đó là văn bản pháp lý bắt buộc phải CÓ MẶT trên site, nhưng không ai lên trang bán hàng để đọc chúng — chỗ của chúng là chân trang. Nhét chúng vào menu chính là lấy chỗ của đúng những liên kết mà người mua đang tìm. Danh sách còn sáu mục, vừa một dòng ở 1040px. 「トップ」 cũng bỏ: tên sản phẩm ở góc trái đã là liên kết về trang chủ — quy ước này phổ quát tới mức một mục 「トップ」 riêng chỉ là một mục nữa để đọc lướt qua. ⚠️ Ba trang từng mang ba phiên bản menu KHÁC NHAU (9 mục / 7 mục / 5 mục). Một thanh điều hướng đổi nội dung theo từng trang làm người đọc mất bản đồ trong đầu về site. Nay mọi trang dùng đúng một khối, khác nhau đúng một thuộc tính `aria-current`. --------------------------------------------------------------------------- */ .site-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 0; } /* Dính đỉnh màn hình CHỈ trên màn rộng, và dùng CHUNG ngưỡng với bố cục một hàng bên dưới — một ngưỡng, một câu chuyện. 1000px là số ĐO ĐƯỢC chứ không phải số tròn cho đẹp: thương hiệu 164px + menu 560px + nút 159px + hai khoảng cách = 967px nội dung, cộng 40px lề. Ở ngưỡng 900px cũ, nút hành động rớt xuống một hàng riêng nằm lẻ bên trái — xấu hơn hẳn bố cục hai hàng gọn của màn hẹp. Dư ra hơn 30px là cố ý: số đo trên lấy từ Hiragino của macOS, còn 園長 mở trang bằng máy Windows văn phòng với Yu Gothic — cùng một chuỗi tiếng Nhật, Yu Gothic dựng rộng hơn. Ngưỡng sát quá là vỡ bố cục ở đúng nhóm máy đông nhất mà ta không nhìn thấy. */ @media (min-width: 1000px) { .site-head { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--line), 0 6px 18px -16px rgba(16, 36, 28, .5); } } .site-head .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; } /* Ở màn hẹp: hàng 1 là thương hiệu + nút, hàng 2 là menu chiếm trọn bề ngang. Nút hành động KHÔNG bao giờ bị đẩy xuống dưới menu — nó là thứ duy nhất ở đầu trang có việc để làm, nên nó phải nằm trong tầm mắt đầu tiên. */ .site-nav { order: 3; flex: 1 1 100%; } .nav-cta { order: 2; margin-left: auto; } @media (min-width: 1000px) { .site-nav { order: 0; flex: 1 1 auto; } .site-nav ul { justify-content: flex-end; } .nav-cta { margin-left: 0; } } .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 700; color: var(--green-strong); text-decoration: none; white-space: nowrap; } /* Dấu hiệu thương hiệu. Trước đây vẽ bằng CSS cho tiết kiệm một request, nhưng hình CSS đó KHÁC hẳn biểu tượng của ứng dụng — trang web và app đang mang hai dấu hiệu khác nhau. Nay dùng chung đúng một file với nguồn gốc là mobile/assets/branding/icon.svg. Tên sản phẩm vẫn là chữ HTML thật chứ không nhét vào ảnh: trình đọc màn hình đọc được, người dùng chọn copy được, và nét chữ do hệ thống dựng nên sắc ở mọi cỡ và mọi độ phân giải. */ .brand::before { content: ""; width: 30px; height: 21px; /* 736:496 của biểu tượng */ flex: 0 0 auto; background: url("/assets/brand/symbol.svg") center / contain no-repeat; } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; } .site-nav a { display: inline-block; padding: 6px 2px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current="page"] { color: var(--green-strong); border-bottom-color: var(--accent); } .brand[aria-current="page"] { color: var(--green-ink); } /* Nút hành động ở đầu trang. ⚠️ KHÔNG dùng lại `.btn`: `.btn` cao tối thiểu 60px cho thân bài, và một thanh đầu trang cao 60px+ dính trên đỉnh ăn mất quá nhiều màn hình điện thoại. 46px vẫn trên sàn 44px của vùng chạm, nên không đánh đổi gì về khả năng bấm — chỉ đổi tỉ lệ cho đúng vai trò. */ .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; box-sizing: border-box; } .nav-cta:hover, .nav-cta:focus { background: var(--accent-dark); color: #fff; } .site-foot { background: var(--foot-bg); color: var(--foot-ink); padding: 40px 0 32px; } .site-foot a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); } .site-foot a:hover, .site-foot a:focus { color: var(--on-deep-mark); border-bottom-color: var(--on-deep-mark); } .site-foot small { color: var(--foot-ink); } /* ── Chân trang: bốn nhóm có tiêu đề, không phải một dải mười bốn liên kết ── Bản trước xếp cả mười bốn liên kết thành MỘT danh sách ngang, mọi mục gạch chân và cùng sức nặng. Mắt không có chỗ bám: 「機能」 nằm ngang hàng với 「特定商取引法に基づく表記」 dù một cái là thứ người mua tìm và một cái là nghĩa vụ pháp lý. Chia nhóm không làm chân trang ngắn đi — nó làm chân trang ĐỌC ĐƯỢC, và đó mới là vấn đề. Bốn cột ở 1040px là 260px mỗi cột; chuỗi dài nhất 「特定商取引法に基づく表記」 rộng khoảng 204px nên không gãy dòng. */ .foot-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; font-size: 21px; font-weight: 700; color: var(--paper); text-decoration: none; border-bottom: 0; } .foot-brand::before { content: ""; width: 30px; height: 21px; flex: 0 0 auto; /* Bản một màu: biểu tượng nhiều màu đặt trên nền xanh đậm bị chìm mảng tối. */ background: url("/assets/brand/symbol-reverse.svg") center / contain no-repeat; } /* ⚠️ Phải đủ nặng để thắng `.site-foot a` (0,1,1) — viết `.foot-brand` trần (0,1,0) là thua, và tên thương hiệu hiện ra có gạch chân như một mục menu. */ .site-foot .foot-brand, .site-foot .foot-brand:hover, .site-foot .foot-brand:focus { border-bottom: 0; } .foot-brand:hover, .foot-brand:focus { color: var(--on-deep-mark); } .foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-bottom: 28px; } @media (min-width: 760px) { .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .foot-col-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.5; /* Tiêu đề nhóm KHÔNG phải liên kết, nên phải khác hẳn liên kết về màu — nếu không người dùng bấm vào nó rồi tưởng trang hỏng. */ color: var(--on-deep-mark); } .site-foot ul { list-style: none; margin: 0; padding: 0; } .foot-nav li + li { margin-top: 8px; } /* Vùng chạm của liên kết chân trang: 8px trên dưới + dòng cao 1.6 ở 17px cho ra khoảng 44px. Người lớn tuổi chạm không chính xác, và chân trang là chỗ các liên kết pháp lý bắt buộc phải bấm được thật. */ .foot-nav a { display: inline-block; padding: 4px 0; font-size: 17px; line-height: 1.6; /* Gạch chân chỉ hiện khi rê/lấy nét. Mười bốn liên kết gạch chân sẵn biến chân trang thành một mảng vạch ngang. Ở đây bỏ được vì các liên kết đã xếp thành danh sách dưới tiêu đề nhóm — người đọc nhận ra "đây là menu" từ bố cục, không cần từng dòng tự khai. Trong khối pháp nhân bên dưới thì KHÁC: ở đó địa chỉ thư và số điện thoại nằm giữa câu văn, nên vẫn giữ gạch chân sẵn. */ border-bottom-color: transparent; } .foot-nav a:hover, .foot-nav a:focus { border-bottom-color: var(--on-deep-mark); } /* --------------------------------------------------------------------------- 5. Nút bấm Cao ≥56px và rộng thoải mái: ngón tay người lớn tuổi chạm không chính xác, và trên màn hình cảm ứng nút nhỏ hơn 44px là nguồn lỗi chạm nhầm. Bo tròn hẳn (viên thuốc) theo đúng ngôn ngữ hình mà cả CoDMON lẫn ルクミー dùng — ở thị trường này nút vuông góc đọc như phần mềm nội bộ, không như dịch vụ dành cho trường mầm non. --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 15px 30px; border: 2px solid transparent; border-radius: 999px; font-size: 19px; font-weight: 700; font-family: inherit; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 22px -14px rgba(143, 48, 9, .9); } .btn-primary:hover, .btn-primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } /* ⚠️ Trên dải nền xanh đậm, cam và xanh lá chỉ chênh nhau 1.7:1 — viền nút biến mất, tức là nút không còn đọc ra là một nút. Vòng trắng bên ngoài đưa ranh giới lên >8:1 mà không đổi màu nhận diện của nút. */ .band-deep .btn-primary { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 12px 26px -14px rgba(0, 0, 0, .6); } .btn-secondary { background: var(--paper); border-color: var(--green-strong); color: var(--green-strong); } .btn-secondary:hover, .btn-secondary:focus { background: var(--green-soft); color: var(--green-ink); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0; } /* --------------------------------------------------------------------------- 6. Thẻ, lưới, biểu tượng --------------------------------------------------------------------------- */ /* ⛔ `minmax(0, 1fr)` chứ KHÔNG phải `1fr`. Ô lưới mặc định có `min-width: auto`: nó không được phép co nhỏ hơn nội dung bên trong. Trong ô đó trang này đặt một sơ đồ SVG khai `width="640"` và một bảng khai `min-width: 620px` — cả hai kéo cột rộng ra theo. Số đo trên chính trang này, khung nhìn 390px (iPhone): `grid-template-columns: 1fr` → document.scrollWidth = 640px `grid-template-columns: minmax(0,1fr)` → document.scrollWidth = 390px 640px trên màn hình 390px không phải "sơ đồ hơi to": cả trang trượt sang phải, nên mọi dòng chữ — menu, tiêu đề, thân bài — đều bị cắt ở mép phải, kể cả những phần chẳng liên quan gì tới sơ đồ. */ .grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 24px 22px; box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .22s ease; } /* Nhấc nhẹ khi rê chuột. Chỉ 3px — đủ để thẻ trả lời "tôi là một khối", không đủ để làm giật trang. Trên cảm ứng không có :hover nên không ảnh hưởng gì. */ @media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } } .card h3 { margin-top: 0; } .card > :last-child { margin-bottom: 0; } /* Ô biểu tượng: hình vuông bo tròn nền bạc hà, chứa một SVG vẽ tay nội tuyến. ⛔ Không tải ảnh từ Internet — không ảnh stock chưa rõ bản quyền, không ảnh trẻ em. SVG tự vẽ vừa sạch bản quyền vừa giữ được mốc "vẽ xong dưới 1 giây". Vẫn chấp nhận emoji cho các thẻ chưa kịp vẽ icon. */ .card-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 0 14px; border-radius: 16px; background: var(--green-chip); color: var(--green-ink); font-size: 28px; line-height: 1; } .card-icon svg { width: 32px; height: 32px; display: block; } /* Icon nội tuyến dùng `currentColor`, nên đổi màu chữ của khối cha là icon đổi theo — không cần bản thứ hai của mỗi hình. */ .icon { width: 28px; height: 28px; display: block; flex: 0 0 auto; } .trust-bar { background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius); padding: 14px 18px; margin-top: 22px; } .trust-bar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; font-weight: 700; color: var(--green-ink); } /* --------------------------------------------------------------------------- 7. Hero ⛔ ĐÃ ĐỔI TỪ NỀN ĐẬM SANG NỀN SÁNG. Bản trước là gradient xanh đậm, chữ trắng. Lý do đổi, theo đúng thứ tự quan trọng: 1. Trang bị kêu là "tối". Hero chiếm trọn màn hình đầu tiên, nên nó một mình quyết định ấn tượng "sáng hay tối" của cả trang. Đổi mười section còn lại mà giữ hero đậm thì không giải quyết được gì. 2. Bản trước lập luận "CoDMON cũng dùng hero đậm" — lập luận đó đọc sai trang của họ. Hero CoDMON là ẢNH một cô giáo đang cười, chiếm 2/3 khung; mảng xanh ngọc chỉ là nền phía sau ảnh. Thứ làm hero của họ sáng là khuôn mặt người, không phải màu nền. Ta chưa có ảnh thật và sẽ không dùng ảnh stock trẻ em, nên ta không sao chép được vế đó — sao chép mỗi mảng màu đậm thì chỉ còn lại phần tối. 3. Ngành này là giáo dục mầm non. Bảng màu của toàn ngành là màu phấn sáng. Một hero đậm đọc như phần mềm quản trị doanh nghiệp. Nền mới: chuyển sắc bạc hà → xanh trời → kem, cả ba đều rất nhạt nên chữ --ink giữ nguyên 14.9–15.9:1 (đo ở mục 1). --------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(152deg, #f1fbf6 0%, var(--sky) 46%, #fff7ea 100%); color: var(--ink); padding: 34px 0 54px; } @media (min-width: 700px) { .hero { padding: 52px 0 76px; } } /* Ba vầng màu mờ — chiều sâu và cảm giác "ấm" mà không tốn một byte ảnh nào. Để ở z-index -1 nên không bao giờ chắn chữ. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 52% at 84% 6%, rgba(255, 201, 77, .30), transparent 68%), radial-gradient(44% 50% at 4% 92%, rgba(20, 101, 74, .13), transparent 70%), radial-gradient(38% 44% at 96% 88%, rgba(15, 94, 168, .12), transparent 70%); } /* Mép dưới cong mềm nối hero vào dải kế tiếp. Vẽ bằng một hình bầu dục CSS. */ .hero::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -36px; height: 72px; z-index: -1; background: var(--paper); border-radius: 50%; } /* `:has()` chưa có ở trình duyệt rất cũ; khi đó hình bầu dục vẫn màu trắng — chênh lệch nhỏ tới mức không nhận ra trên các nền nhạt bên dưới. */ .hero:has(+ .band-alt)::after { background: var(--paper-soft); } .hero:has(+ .band-cream)::after { background: #fffbf3; } .hero:has(+ .band-mint)::after { background: var(--mint); } .hero:has(+ .band-sky)::after { background: var(--sky); } .hero h1 { margin-bottom: .45em; color: var(--ink); text-wrap: balance; } /* Nét bút dạ dưới cụm chữ quan trọng nhất. Đây là quy ước đọc của web tiếng Nhật: người đọc lướt tìm đúng chỗ được "tô" trước khi đọc câu. Dùng background-image nên chữ vẫn là chữ — máy đọc màn hình và công cụ dịch của trình duyệt không bị ảnh hưởng. */ .hero strong { color: var(--accent); background-image: linear-gradient(transparent 62%, var(--sun-soft) 62%); padding: 0 .12em; } .hero .lead { color: var(--ink-muted); } .hero a:not(.btn) { color: var(--blue); } .lead { font-size: 20px; line-height: 1.8; } @media (min-width: 700px) { .lead { font-size: 23px; } } /* Nhãn nhỏ phía trên tiêu đề. Trên nền đậm phải là chip sáng — chữ trắng trên nền trong suốt không đủ tách khỏi gradient. */ .kicker { display: inline-block; background: var(--green-chip); color: var(--green-ink); border-radius: 999px; padding: 5px 16px; font-weight: 700; margin-bottom: 14px; } /* Hero hai cột: chữ bên trái, hình minh hoạ bên phải. Dưới 900px xếp dọc. */ .hero-grid { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; } } .hero-art { margin: 0; } .hero-art svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .3)); } /* Bảng trắng chứa nút hành động. VÌ SAO phải là một thẻ trắng chứ không đặt nút thẳng lên nền xanh: nút cam trên nền xanh đậm chỉ chênh 1.7:1, ranh giới nút biến mất. Đặt trên nền trắng, nút cam đạt 5.74:1 và người đọc thấy ngay đâu là bước tiếp theo. */ .hero-panel { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 20px 22px 22px; margin-top: 28px; box-shadow: var(--shadow-lift); } .hero-panel a:not(.btn) { color: var(--blue); } .hero-panel .btn-row { margin-top: 0; } .hero-panel > :last-child { margin-bottom: 0; } .hero-panel :focus-visible { outline-color: var(--blue); } /* --------------------------------------------------------------------------- 8. Dải số liệu Con số quan trọng (97,2% / 50,5% / 30万円 / 39.600円) không được chìm trong câu văn — 園長 quét trang trước khi đọc, và những con số này chính là lý do họ dừng lại. --------------------------------------------------------------------------- */ .stat-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); text-align: center; } .stat-figure { display: block; font-size: 38px; font-weight: 700; line-height: 1.15; color: var(--accent); font-variant-numeric: tabular-nums; } @media (min-width: 700px) { .stat-figure { font-size: 46px; } } .stat-label { display: block; font-size: 17px; line-height: 1.6; color: var(--ink-muted); } /* --------------------------------------------------------------------------- 9. Ba mũi nhọn (理由1/2/3) Mỗi lý do là một khối có biểu tượng riêng, thay vì ba khối chữ giống hệt nhau chạy liên tiếp. --------------------------------------------------------------------------- */ .reason-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 22px; padding: 24px 0 4px; border-top: 1px solid var(--line); } .reason-item:first-of-type { border-top: 0; padding-top: 6px; } @media (min-width: 760px) { .reason-item { grid-template-columns: 78px minmax(0, 1fr); } } .reason-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0; border-radius: 20px; background: var(--green-chip); color: var(--green-ink); } .reason-icon svg { width: 38px; height: 38px; display: block; } .reason-body > :last-child { margin-bottom: 0; } .reason-body h3 { margin-top: 0; } /* --------------------------------------------------------------------------- 10. Bảng Bảng giá và bảng so sánh phải cuộn ngang được trên điện thoại thay vì bóp chữ xuống 12px — bóp chữ là cách nhanh nhất để mất người đọc 60 tuổi. --------------------------------------------------------------------------- */ .table-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--paper); } table { border-collapse: collapse; width: 100%; min-width: 620px; background: var(--paper); } caption { text-align: left; font-weight: 700; padding: 16px 18px 12px; color: var(--ink); } th, td { border: 1px solid var(--line-strong); padding: 13px 15px; text-align: left; vertical-align: top; } thead th { background: var(--green); color: var(--on-deep); border-color: var(--green); font-size: 19px; white-space: nowrap; } /* ⚠️ Cột nhãn hàng phải có chiều rộng sàn. Không có nó, ở 375px trình duyệt bóp cột đầu xuống còn một chữ mỗi dòng (「月」「額」「（」「税」…) — đọc được về mặt kỹ thuật, nhưng không ai đọc nổi. Bảng đã cuộn ngang được nên rộng thêm không làm tràn trang. */ tbody th { background: var(--paper-soft); font-weight: 700; min-width: 172px; } .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .big-num { display: block; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--green-strong); font-variant-numeric: tabular-nums; } @media (min-width: 700px) { .big-num { font-size: 34px; } } /* Hàng kết quả của phép tính 加算 — con số người đọc thật sự đến để tìm. */ .row-total th, .row-total td { background: var(--green-soft); border-color: var(--green); } .row-total .big-num { color: var(--accent); font-size: 32px; } @media (min-width: 700px) { .row-total .big-num { font-size: 40px; } } /* Bảng giá — làm nổi cột gói khuyến nghị 「そだつ」 (cột thứ 3). ⛔ Không chỉ dùng màu: bản thân tiêu đề cột đã ghi rõ 「（おすすめ）」. */ .plan-table thead th:nth-child(3) { background: var(--accent); border-color: var(--accent); } .plan-table tbody td:nth-child(3) { background: var(--paper-tint); font-weight: 700; } /* Khung cam chạy dọc cột: cột được khuyến nghị phải nhận ra được ngay cả khi in đen trắng hoặc khi người đọc không phân biệt được sắc độ. Bản thân tiêu đề cột cũng đã ghi 「（おすすめ）」 — không bao giờ chỉ dựa vào màu. */ .plan-table thead th:nth-child(3), .plan-table tbody td:nth-child(3) { border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); } /* Bảng so sánh đối thủ — cột 「つなぐノート」 (cột thứ 2) là cột của ta. A社/B社/C社 giữ ẩn danh, không tô màu tiêu cực lên cột của họ. */ .compare-table thead th:nth-child(2) { background: var(--green-deep); border-color: var(--green-deep); } .compare-table tbody td:nth-child(2) { background: var(--green-soft); font-weight: 700; } .compare-table thead th:nth-child(2), .compare-table tbody td:nth-child(2) { border-left: 3px solid var(--green-deep); border-right: 3px solid var(--green-deep); } /* --------------------------------------------------------------------------- 11. Accordion — dùng
của HTML, không JavaScript Các trang giới thiệu chạy dưới CSP script-src 'none'.
/ cho đúng hành vi "bấm để mở" mà không cần một dòng script nào, và vẫn đọc được bằng trình đọc màn hình. --------------------------------------------------------------------------- */ details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow); } summary { cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 19px; list-style-position: outside; border-radius: 12px; } summary:hover { color: var(--green-strong); } details[open] summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; } .details-body { padding: 18px 22px; } .details-body > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- 12. Khối cảnh báo / ghi chú bắt buộc --------------------------------------------------------------------------- */ .callout { background: var(--warn-bg); border: 1px solid var(--warn-line); border-left: 7px solid var(--warn-line); border-radius: 12px; padding: 18px 22px; margin: 22px 0; } .callout > :last-child { margin-bottom: 0; } .callout-quiet { background: var(--blue-soft); border-color: #9dc3e6; border-left-color: var(--blue); } /* 導入第1期園の募集 — ta có 0 khách hàng thật. ⛔ Không logo trường giả, không testimonial giả, không huy hiệu chứng nhận chưa có. Khối này phải trông tử tế bằng bố cục, không bằng bằng chứng xã hội bịa ra. */ .recruit { position: relative; background: var(--paper); border: 2px solid var(--green); border-radius: 18px; padding: 30px 26px 26px; box-shadow: var(--shadow-lift); } .recruit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--green), var(--accent)); } .recruit > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- 13. Danh sách có dấu kiểm --------------------------------------------------------------------------- */ .check-list { list-style: none; margin: 0 0 1.1em; padding: 0; } .check-list li { padding: 7px 0 7px 38px; position: relative; } /* Dấu kiểm trong một vòng tròn xanh đầy — dễ bắt mắt hơn hẳn một ký tự ✓ trần, và vẫn là ký tự thật nên trình đọc màn hình bỏ qua đúng cách. */ .check-list li::before { content: "✓"; position: absolute; left: 0; top: 10px; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; } /* --------------------------------------------------------------------------- 14. Biểu mẫu Ô nhập cao 56px, nhãn nằm TRÊN ô (không phải placeholder bên trong): placeholder biến mất khi bắt đầu gõ, và người dùng lớn tuổi thường quên mất ô đó hỏi gì. font-size 17px cũng chặn iOS tự phóng to trang khi chạm vào ô. --------------------------------------------------------------------------- */ .field { margin-bottom: 22px; } .field label { display: block; font-weight: 700; margin-bottom: 6px; } .req { display: inline-block; background: var(--accent); color: #fff; font-size: 17px; border-radius: 6px; padding: 0 9px; margin-left: 8px; vertical-align: middle; } input[type="text"], input[type="email"], textarea, select { width: 100%; box-sizing: border-box; min-height: 56px; padding: 12px 14px; font-size: 17px; font-family: inherit; line-height: 1.6; color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 10px; } textarea { min-height: 220px; line-height: 1.9; resize: vertical; } input:focus, textarea:focus, select:focus { border-color: var(--blue); } .consent { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 22px; } .consent input[type="checkbox"] { width: 28px; height: 28px; margin: 4px 0 0; flex: 0 0 auto; } .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow-lift); } /* --------------------------------------------------------------------------- 15. Công cụ 加算診断 (/kasan) --------------------------------------------------------------------------- */ /* Dùng của HTML chứ không dựng thanh bằng hai thẻ div: nó tự có ngữ nghĩa cho trình đọc màn hình, và vẫn hiện ra một thanh tiến trình dùng được ngay cả khi file CSS này chưa tải xong. */ progress { display: block; width: 100%; height: 16px; margin: 10px 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--paper-soft); -webkit-appearance: none; appearance: none; } progress::-webkit-progress-bar { background: var(--paper-soft); } progress::-webkit-progress-value { background: var(--green); } progress::-moz-progress-bar { background: var(--green); } .q-title { font-size: 23px; margin: 18px 0 20px; } @media (min-width: 700px) { .q-title { font-size: 27px; } } /* Mỗi lựa chọn là một nút chiếm hết chiều ngang. Một câu hỏi một màn hình, một hàng một lựa chọn: không bắt người đọc so sánh sáu ô chữ nhỏ cùng lúc. */ .choice-list { display: grid; gap: 12px; margin-bottom: 24px; } .choice { display: block; width: 100%; text-align: left; min-height: 64px; padding: 16px 20px; font-size: 19px; font-family: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); } .choice:hover, .choice:focus { border-color: var(--green); background: var(--green-soft); } .choice .choice-note { display: block; font-weight: 400; font-size: 17px; color: var(--ink-muted); } .result-score { font-size: 25px; font-weight: 700; margin-bottom: 8px; } @media (min-width: 700px) { .result-score { font-size: 32px; } } .req-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; } @media (min-width: 620px) { /* `minmax(0, 1fr)` chứ KHÔNG phải `1fr` — cùng lý do đã ghi ở mục lưới bên trên: ô lưới mặc định có `min-width: auto` nên không co nhỏ hơn nội dung. Nội dung ở đây là 「キャッシュレス決済」 kèm nhãn 「未対応（兼任でも構いま せん。資格は不要です）」 do /kasan/ sinh ra lúc chạy, tức là chuỗi có thể dài ra bất cứ lúc nào mà không ai xem lại CSS. */ .req-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ⛔ Không bao giờ chỉ dùng màu để báo trạng thái: mỗi dòng có biểu tượng và chữ 「対応済み」/「未対応」. Khoảng 5% đàn ông Nhật mù màu đỏ–lục, và 園長 phần lớn ở tuổi đã giảm khả năng phân biệt sắc độ. */ .req-list li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--paper); box-shadow: var(--shadow); } .req-list li.ok { border-left: 7px solid var(--green); } .req-list li.ng { border-left: 7px solid var(--warn-line); } .req-state { display: block; font-size: 17px; color: var(--ink-muted); } .money { font-size: 25px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .hidden { display: none; } /* --------------------------------------------------------------------------- 16. Công cụ やさしい日本語 (/yasashii) --------------------------------------------------------------------------- */ .tool-columns { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 860px) { .tool-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .tool-pane { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .tool-pane h2 { font-size: 21px; margin-top: 0; } .output-box { background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-height: 180px; white-space: pre-wrap; line-height: 1.95; } .quota { font-weight: 700; margin: 10px 0 0; } .tool-message { border-radius: 10px; padding: 14px 18px; margin: 14px 0; border: 1px solid var(--warn-line); background: var(--warn-bg); } .lang-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .lang-tab { min-height: 48px; padding: 10px 18px; font-size: 17px; font-family: inherit; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 999px; cursor: pointer; } .lang-tab[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; } /* --------------------------------------------------------------------------- 17. Tôn trọng cài đặt giảm chuyển động --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── Khối pháp nhân ở chân trang ────────────────────────────────────────── Số điện thoại và tên pháp nhân là thứ 園長 lớn tuổi tìm để biết "có gặp được người thật không". Đặt trên dòng bản quyền, tách khỏi menu bằng một đường kẻ mảnh để mắt thấy đây là khối thông tin chứ không phải liên kết. */ .foot-company { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(215, 232, 224, .28); } .foot-company-name { margin: 0 0 .4rem; font-weight: 700; color: #fff; /* /#0c3c2d 12.35:1 */ } .foot-contact { margin: 0 0 .5rem; /* Số máy và địa chỉ thư không được co nhỏ hơn thân bài: đây đúng là dòng mà người cần nó nhất lại nhìn kém nhất. */ font-size: 1rem; line-height: 1.9; } /* Cắt dòng giữa hai phần liên hệ trên màn hình hẹp thay vì để chúng dính vào nhau thành một dải chữ dài. */ .foot-contact a { white-space: nowrap; } .foot-note { margin: 0; font-size: .875rem; color: var(--foot-ink); /* /#0c3c2d 9.71:1 */ max-width: 46em; } /* Địa chỉ pháp nhân — bắt buộc theo 特定商取引法, và cũng là thứ 園長 lớn tuổi tìm để biết đây có phải công ty thật không. */ .foot-addr { margin: 0 0 .5rem; font-size: .9375rem; color: var(--foot-ink); } /* Ghi chú dưới một câu hỏi của công cụ chẩn đoán. */ .q-note { margin: -.4rem 0 1.2rem; color: var(--ink-muted); font-size: .9375rem; } /* Kết quả bị LOẠI TRỪ — không phải "thiếu vài chức năng" mà là "năm nay không nhận được". Khác màu với khối số tiền để mắt không đọc nhầm thành tin tốt. */ .money-excluded { background: var(--warn-bg); border-left: 4px solid var(--warn-line); padding: .9rem 1rem; border-radius: 6px; font-weight: 600; } /* --------------------------------------------------------------------------- 18. BIỂU ĐỒ, SƠ ĐỒ, DÒNG THỜI GIAN VÌ SAO CÓ MỤC NÀY. Trang cũ trình bày mọi thứ bằng đoạn văn: ba "lý do được chọn" là ba khối chữ dài bằng nhau, quy trình triển khai là bốn thẻ chữ, cơ chế chặn dịch máy là năm câu. Người mua ở đây là hiệu trưởng đang xem trang giữa giờ làm, trên điện thoại, và họ QUÉT chứ không đọc. Một con số đứng trong câu văn thì không tồn tại với người quét. Nguyên tắc của cả mục: - Mọi hình đều vẽ bằng HTML/SVG nội tuyến. Không ảnh, không thư viện biểu đồ. Ràng buộc sản phẩm vẫn là vẽ xong dưới 1 giây trên 3G, và CSP của trang là `script-src 'none'` — không có JavaScript để mà chạy một thư viện vẽ biểu đồ. - ⛔ Màu không bao giờ là thông tin duy nhất: cột nào cũng có trị số bằng chữ ngay cạnh, ô ma trận nào cũng có ✓/✕. - Mọi hình phải đọc được khi CSS chưa tải xong. Vì thế SVG nội tuyến luôn có `width`/`height` — thiếu hai thuộc tính đó, SVG không có kích thước nội tại sẽ giãn ra bằng chiều rộng khối cha và trang vỡ thành một chuỗi hình khổng lồ. Đây là lỗi đã thấy tận mắt trên bản trước. --------------------------------------------------------------------------- */ /* ── Khung chung cho một hình ────────────────────────────────────────────── */ .viz { margin: 0 0 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px 18px; box-shadow: var(--shadow); } .viz > :last-child { margin-bottom: 0; } .viz-title { margin: 0 0 16px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--ink); } /* Chú thích nguồn/điều kiện nằm ngay dưới hình chứ không dồn xuống cuối section: người đọc phải thấy "số này ở đâu ra" mà không phải đi tìm. */ .viz-note { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-muted); } /* ── Dải số liệu sản phẩm ngay dưới hero ───────────────────────────────── ⛔ Ở ĐÂY KHÔNG BAO GIỜ ĐƯỢC ĐẶT SỐ CƠ SỞ ĐÃ TRIỂN KHAI. Đối thủ đặt 「25,548施設」 đúng chỗ này; con số của ta là 0 và trang đã nói thẳng điều đó ở mục 導入実績. Sáu ô dưới đây chỉ chứa thuộc tính của sản phẩm — thứ kiểm chứng được bằng cách mở phần mềm ra đếm. */ .stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } @media (min-width: 640px) { .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .stat-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .stat-strip li { background: var(--paper); padding: 18px 10px 16px; text-align: center; } .strip-num { display: block; font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--c1); font-variant-numeric: tabular-nums; } .strip-num .unit { font-size: 19px; font-weight: 700; margin-left: 2px; } .strip-label { display: block; margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--ink-muted); } /* ── Biểu đồ cột ngang ─────────────────────────────────────────────────── Cột là chứ không phải SVG: chiều rộng đặt bằng `style="width:…%"` (thuộc tính duy nhất mà cổng html-validate cho phép nội tuyến), nên trị số nằm ngay trong HTML — máy đọc màn hình và người xem mã nguồn đều thấy. */ .bar-list { margin: 0; padding: 0; list-style: none; } .bar-list li + li { margin-top: 18px; } .bar-label { display: block; margin-bottom: 7px; font-size: 17px; line-height: 1.5; color: var(--ink); } .bar-row { display: flex; align-items: center; gap: 12px; } .bar-track { flex: 1 1 auto; height: 26px; border-radius: 999px; background: var(--paper-soft); border: 1px solid var(--line); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--c1); transform-origin: left center; } /* ⛔ CHIỀU DÀI CỘT PHẢI KHAI Ở ĐÂY, KHÔNG ĐƯỢC VIẾT `style="width:…"` TRONG HTML. Lý do không phải khẩu vị mà là CSP: trang khai `style-src 'self'`, và chỉ thị đó chặn luôn thuộc tính `style` nội tuyến — trình duyệt ghi 「Applying inline style violates the following Content Security Policy directive」 ra console rồi BỎ QUA chiều rộng. Kiểu hỏng này im lặng đúng theo nghĩa xấu nhất: cột không biến mất, nó lấy chiều rộng mặc định 100%. Tức là biểu đồ vẫn vẽ ra, trông vẫn đẹp, và mọi cột dài bằng nhau — 39.600円 trông to ngang 300.000円. Một biểu đồ nói sai tỉ lệ còn tệ hơn không có biểu đồ. (Cổng `npm run check` từng CHO PHÉP `style` nội tuyến với riêng thuộc tính `width`. Đã siết lại trong tools/check.mjs — xem chú thích ở đó.) Bảng trị số đang dùng. Thêm cột mới thì thêm một lớp ở đây: 13.2% = 39.600円 trên trục 300.000円 (mục 費用) 50.5% = 50,5% 報告値 (mục お悩み) 97.2% = 97,2% 報告値 (mục お悩み) 100% = 300.000円 trên trục 300.000円 (mục 費用) */ .bar-fill.pct-13-2 { width: 13.2%; } .bar-fill.pct-50-5 { width: 50.5%; } .bar-fill.pct-97-2 { width: 97.2%; } .bar-fill.pct-100 { width: 100%; } .bar-fill.c2 { background: var(--c2); } .bar-fill.c3 { background: var(--c3); } .bar-fill.c4 { background: var(--c4); } .bar-fill.c5 { background: var(--c5); } /* Cột "đối chứng" — thứ ta so sánh với, cố ý vẽ nhạt để mắt bám vào cột chính. */ .bar-fill.muted { background: repeating-linear-gradient( 135deg, #c7d6ce 0 7px, #d9e4de 7px 14px ); } .bar-value { flex: 0 0 auto; min-width: 96px; text-align: right; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; } /* ── Sơ đồ các bước ────────────────────────────────────────────────────── Dọc trên điện thoại, ngang trên màn hình rộng. Mũi tên là ::after của từng bước nên không cần thêm phần tử rỗng nào vào HTML. */ .flow { display: grid; /* Khe 26px chứ không phải 14px: mũi tên nối nằm trong khe này, và ở 14px thì hình thoi xoay 45° của nó thò sang đè lên mép hai thẻ hai bên. */ gap: 26px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: flow; } @media (min-width: 780px) { .flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .flow li { position: relative; counter-increment: flow; background: var(--paper); border: 2px solid var(--c1-bg); border-radius: var(--radius-lg); padding: 44px 18px 18px; } /* Số thứ tự trong một vòng tròn đặt đè lên mép trên của thẻ. */ .flow li::before { content: counter(flow); position: absolute; top: -3px; left: 18px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--c1); color: #fff; font-size: 19px; font-weight: 700; line-height: 1; } /* Mũi tên nối: trỏ xuống khi xếp dọc, trỏ sang phải khi xếp ngang. */ .flow li + li::after { content: ""; position: absolute; left: 50%; /* Tâm mũi tên đặt ở giữa khe 26px ⇒ cách mép thẻ 13px. Cạnh 11px xoay 45° cho đường chéo ~15,6px, tức thò ra mỗi bên 7,8px — vẫn còn 5px trống tới mép thẻ ở cả hai phía. */ top: -18px; width: 11px; height: 11px; border-right: 3px solid var(--c1); border-bottom: 3px solid var(--c1); transform: translateX(-50%) rotate(45deg); } @media (min-width: 780px) { .flow li + li::after { left: -18px; top: 50%; transform: translateY(-50%) rotate(-45deg); } } .flow h4 { margin: 0 0 6px; font-size: 19px; color: var(--c1); } .flow p { margin: 0; font-size: 17px; line-height: 1.7; } .flow p + p { margin-top: 8px; } /* ── Dòng thời gian chế độ ───────────────────────────────────────────────── */ .timeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; } /* Trục dọc chạy suốt các mốc. */ .timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--c2) 0%, var(--c5) 55%, var(--c3) 100%); } .timeline li { position: relative; padding: 0 0 22px; } .timeline li:last-child { padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -29px; top: 7px; width: 18px; height: 18px; border-radius: 999px; background: var(--paper); border: 4px solid var(--c2); box-sizing: border-box; } .timeline li.is-deadline::before { border-color: var(--c3); } .timeline-when { display: block; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--c2); font-variant-numeric: tabular-nums; } .timeline li.is-deadline .timeline-when { color: var(--c3); } .timeline-what { display: block; font-size: 17px; line-height: 1.7; color: var(--ink); } .timeline-risk { display: block; margin-top: 4px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); } /* ── Ma trận có dấu kiểm ───────────────────────────────────────────────── Dùng cho 4 chức năng của 保育ICT推進加算: bốn ô, mỗi ô một dấu ✓ to. Đây là thứ hiệu trưởng cần đối chiếu trong ba giây, không phải một danh sách gạch đầu dòng bốn dòng. */ .matrix { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (min-width: 780px) { .matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .matrix li { background: var(--c1-bg); border: 2px solid var(--c1); border-radius: var(--radius); padding: 16px 14px 14px; text-align: center; } .matrix-mark { display: block; font-size: 30px; line-height: 1; color: var(--c1); } .matrix-name { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--green-ink); } /* ── Thẻ so sánh "sai / đúng" ──────────────────────────────────────────── Dùng cho ví dụ dịch sai về dị ứng. Hai thẻ cạnh nhau, thẻ sai có viền đỏ đất và dấu ✕, thẻ đúng có viền xanh và dấu ✓ — không chỉ dựa vào màu. */ .vs { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0 0 18px; } @media (min-width: 720px) { .vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .vs-card { border-radius: var(--radius-lg); padding: 18px 18px 16px; border: 2px solid var(--line-strong); background: var(--paper); } .vs-card.is-bad { border-color: var(--c3); background: var(--c3-bg); } .vs-card.is-good { border-color: var(--c1); background: var(--c1-bg); } .vs-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 4px 13px; border-radius: 999px; font-size: 17px; font-weight: 700; line-height: 1.5; color: #fff; } .vs-card.is-bad .vs-tag { background: var(--c3); } .vs-card.is-good .vs-tag { background: var(--c1); } .vs-ja { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--ink); } .vs-vi { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-muted); } /* ── Hàng thẻ ngôn ngữ ───────────────────────────────────────────────────── */ .chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .chip-row li { background: var(--mint-2); border: 1px solid var(--green-line); border-radius: 999px; padding: 6px 15px; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--green-ink); } /* ── Sơ đồ SVG nội tuyến ─────────────────────────────────────────────────── */ .diagram { display: block; width: 100%; height: auto; max-width: 100%; } /* ── Sơ đồ rộng: cuộn ngang trên màn hình hẹp ──────────────────────────── ⛔ Đây là một phép đo, không phải phỏng đoán. Sơ đồ quan hệ và sơ đồ rẽ nhánh khai viewBox rộng 640. Trên iPhone khổ 390px, khối chứa chúng rộng 308px, tức tỉ lệ thu 0,48 — chữ khai 19 đơn vị SVG hiện ra còn 9px. Không ai ở tuổi 50–60 đọc được 9px, và một sơ đồ không đọc được thì tệ hơn không có sơ đồ: nó chiếm chỗ và làm người đọc tưởng mình đã hiểu. Sàn 560px giữ tỉ lệ thu ở 0,875 ⇒ chữ 19 đơn vị hiện ra 16,6px. Đổi lại phải cuộn ngang — đúng thao tác mà các bảng trên trang này vốn đã đòi hỏi, nên không thêm một quy ước mới nào cho người dùng. */ .viz-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .viz-scroll .diagram { min-width: 560px; } /* Câu gợi ý chỉ hiện đúng lúc thật sự phải cuộn. Nó là chữ thật trong HTML nên trình đọc màn hình cũng đọc được — người dùng bàn phím và người dùng VoiceOver cũng cần biết khối này cuộn được. */ .scroll-hint { display: none; } @media (max-width: 640px) { .scroll-hint { display: block; margin: 0 0 10px; font-size: 17px; line-height: 1.5; color: var(--ink-muted); } } /* Nét tự vẽ: `stroke-dasharray` khai bằng thuộc tính SVG, còn quãng dịch lúc bắt đầu khai ở đây. 300 dài hơn mọi đường nối đang dùng, nên lúc chưa cuộn tới thì cả nét nằm trong nửa "off" của hoa văn và không hiện — đúng thứ ta muốn, mà không phải đo độ dài từng đường. */ .draw { --dash: 300; } /* --------------------------------------------------------------------------- 19. CHUYỂN ĐỘNG Ba ràng buộc, theo thứ tự ưu tiên: 1. KHÔNG CÓ JAVASCRIPT. CSP của trang là `script-src 'none'`. Hiện ra khi cuộn tới làm bằng `animation-timeline: view()` — chuyển động do trình duyệt tự chạy theo vị trí cuộn. 2. TRÌNH DUYỆT CŨ KHÔNG ĐƯỢC MẤT NỘI DUNG. Mọi quy tắc đặt `opacity: 0` đều nằm TRONG `@supports (animation-timeline: view())`. Trình duyệt không hiểu thì không bao giờ áp dòng nào trong đó, và trang hiện đầy đủ ngay từ đầu. Đây là điểm dễ sai nhất của kỹ thuật này: viết opacity 0 ở ngoài là trang trắng trơn trên Safari cũ. 3. TÔN TRỌNG prefers-reduced-motion. Mục 17 hạ mọi `animation-duration` xuống .001ms, nhưng cách đó KHÔNG tắt được chuyển động theo cuộn: khi có `animation-timeline`, tiến trình do vị trí cuộn quyết định chứ không do thời lượng. Vì vậy bên dưới có một khối riêng tắt hẳn bằng `animation: none`. Chuyển động ở đây cố ý rất nhỏ (dịch 14px, 0.5s). Người đọc trang này 50–60 tuổi; hiệu ứng lớn gây khó chịu và làm chậm việc đọc. --------------------------------------------------------------------------- */ @keyframes tn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes tn-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes tn-draw { from { stroke-dashoffset: var(--dash, 400); } to { stroke-dashoffset: 0; } } @keyframes tn-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } /* Chấm chạy dọc đường nối trong sơ đồ "1通 → 12言語" — thứ duy nhất chạy lặp vô hạn trên trang. Nó nằm ở hero, nơi mắt dừng lâu nhất, và nó kể đúng câu chuyện của sản phẩm: một tin nhắn đi tới nhiều gia đình cùng lúc. Chấm đi ĐÚNG theo đường cong bằng `offset-path`, không phải dịch ngang cho giống. Bản dịch ngang trông sai ngay: đường nối cong, chấm đi thẳng, và ở khung hình đứng yên chúng đọng lại thành mấy chấm cam lạc lõng cạnh chiếc điện thoại. Vì thế `opacity: 0` là trạng thái NỀN, và chấm chỉ hiện bên trong khối @supports. Trình duyệt không có `offset-path` thì không thấy chấm nào — đúng ý đồ: chúng thuần trang trí, mất đi không mất thông tin gì. */ @keyframes tn-flow { 0% { offset-distance: 0%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .hero-art .travel-dot { opacity: 0; } @supports (offset-path: path("M0 0")) { .hero-art .travel-dot { transform-box: view-box; offset-rotate: 0deg; animation: tn-flow 3s ease-in-out infinite; } /* Đường phải KHỚP TỪNG KÝ TỰ với thuộc tính `d` của nét nối tương ứng trong index.html. Sửa một bên mà quên bên kia thì chấm chạy lệch khỏi đường — không có cách nào để máy bắt lỗi đó hộ. */ .hero-art .travel-dot.p1 { offset-path: path("M180 176C205 176 213 73 238 73"); } .hero-art .travel-dot.p2 { offset-path: path("M180 176C205 176 213 137 238 137"); animation-delay: .35s; } .hero-art .travel-dot.p3 { offset-path: path("M180 176C205 176 213 201 238 201"); animation-delay: .7s; } .hero-art .travel-dot.p4 { offset-path: path("M180 176C205 176 213 265 238 265"); animation-delay: 1.05s; } } /* Lúc tải trang: hero đi lên nhẹ. Không dùng theo-cuộn vì hero đã ở trong khung nhìn ngay từ đầu. */ .hero-copy > *, .hero-panel { animation: tn-rise .5s ease-out both; } .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-panel { animation-delay: .16s; } @supports (animation-timeline: view()) { /* Hiện dần khi cuộn tới. `both` giữ khung đầu khi chưa vào tầm nhìn. */ .reveal { animation: tn-rise .6s linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; } /* Cột biểu đồ mọc ra theo cuộn. */ .bar-fill { animation: tn-bar .6s linear both; animation-timeline: view(); animation-range: entry 12% cover 34%; } /* Dấu ✓ của ma trận 4 chức năng nảy lên lần lượt. */ .matrix li .matrix-mark { animation: tn-pop .5s linear both; animation-timeline: view(); animation-range: entry 14% cover 40%; } /* Nét SVG tự vẽ. `--dash` khai riêng cho từng hình theo độ dài đường. */ .draw { animation: tn-draw .8s linear both; animation-timeline: view(); animation-range: entry 10% cover 44%; } } /* ⛔ Khối này là phần bắt buộc, không phải phần tuỳ chọn — xem lý do 3 ở trên. */ @media (prefers-reduced-motion: reduce) { .reveal, .bar-fill, .draw, .matrix li .matrix-mark, .hero-copy > *, .hero-panel { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } /* ⛔ Chấm chạy phải về 0 chứ KHÔNG về 1. Chúng được đặt ở gốc toạ độ của SVG và chỉ có `offset-path` mới đưa chúng lên đường nối; cho hiện mà không cho chạy là bốn chấm cam chồng lên nhau ở góc trên bên trái. */ .hero-art .travel-dot { animation: none !important; opacity: 0 !important; } } /* --------------------------------------------------------------------------- 20. ẢNH MINH HOẠ VÀ BĂNG CHUYỀN ẢNH ⛔ MỌI ẢNH TRÊN SITE NÀY LÀ ẢNH DỰNG BẰNG AI, VÀ PHẢI ĐƯỢC KHAI LÀ THẾ. Trang này bán cho 園長 người Nhật. Ảnh dựng bằng AI trông như ảnh chụp thật một ngôi trường có tên trên biển — nếu để trần, người xem đọc nó thành bằng chứng đã có trường dùng sản phẩm. Vì vậy mỗi ảnh BẮT BUỘC đi kèm một dòng 「AI生成のイメージ画像です」, và dòng đó là chữ HTML thật chứ không nung vào ảnh: nung vào ảnh thì công cụ dịch của trình duyệt bỏ qua, trình đọc màn hình không đọc được, và phóng to là nhoè. ⛔ Không bao giờ nung CHỮ vào ảnh. Cả luận điểm bán hàng của sản phẩm này là "chữ đến được với mọi gia đình bằng 12 thứ tiếng"; chữ nằm trong ảnh thì không dịch được, không chọn được, không đọc màn hình được. Mọi câu chữ đặt bằng HTML phủ lên trên hoặc đặt cạnh ảnh. Định dạng: AVIF, có WebP dự phòng qua . Bộ ảnh gốc 59 MB xuống còn 303 KB cho cả bảy ảnh ở khổ hiển thị thật (gấp đôi bề rộng thật cho màn Retina, không hơn) — ràng buộc sản phẩm vẫn là vẽ xong dưới 1 giây trên 3G. ⛔ `width`/`height` là BẮT BUỘC trên mọi thẻ img: thiếu chúng, trình duyệt không biết chừa chỗ và trang nhảy khi ảnh tải xong. --------------------------------------------------------------------------- */ .shot { margin: 0 0 18px; } /* Khối bọc ảnh. Tồn tại chỉ để làm MỐC ĐỊNH VỊ cho nhãn AI — nhãn phải bám vào mép ảnh, không phải mép
(figure còn chứa cả dòng chú thích bên dưới, bám vào đó thì nhãn rơi xuống cạnh chữ). Viền và bo góc chuyển lên đây cùng `overflow: hidden` để nhãn bị cắt gọn theo góc bo. */ .shot-media { position: relative; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: var(--paper-soft); /* Ảnh là phần tử inline: thiếu dòng này thì phần thân chữ để lại một vạch trắng vài px dưới đáy ảnh, và nhãn trông như lệch khỏi góc. */ line-height: 0; } .shot-media img { display: block; width: 100%; height: auto; } .shot figcaption { margin-top: 9px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); } /* ── Nhãn AI ───────────────────────────────────────────────────────────── Đè vào góc dưới phải ảnh, KHÔNG nằm trong luồng nội dung — trước đây nó là một dòng riêng dưới mỗi ảnh nên bảy cái nhãn đẩy chữ xuống bảy lần và cắt vụn mạch đọc. ⛔ CỠ CHỮ GIỮ 17px, KHÔNG HẠ XUỐNG 10px. Hai lý do, lý do thứ hai nặng hơn: 1. Cổng `npm run check` chặn mọi font-size dưới 17px trong CSS — sàn đặt cho người đọc 50–60 tuổi, là đúng nhóm mua sản phẩm này. 2. Nhãn này tồn tại để chống 優良誤認 theo 景品表示法. Hướng dẫn của 消費者庁 về 打消し表示 lấy đúng "chữ nhỏ đặt ở góc" làm ví dụ mẫu của lời khai KHÔNG có hiệu lực. Một lời khai mà người ta phải căng mắt mới đọc được thì về mặt pháp lý không khác gì không khai — mà rủi ro thì vẫn còn nguyên, chỉ có cảm giác an toàn là giả. Muốn nhãn bớt chiếm chỗ thì rút NGẮN chuỗi (đã rút còn 「AI生成画像」) và đưa ra khỏi luồng, không phải bóp nhỏ chữ. Nền đen mờ .70 cho chữ trắng 8.45:1 ở trường hợp xấu nhất — khi lớp phủ nằm trên vùng ảnh trắng. Đo bằng công thức tương phản WCAG 2.1, không ước lượng: ảnh phía dưới đổi theo từng tấm nên không thể trông cậy vào màu ảnh. */ .ai-note { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .70); color: #fff; /* gate:small-font — chủ dự án quyết định 2026-09-13: nhãn khai nguồn ảnh không phải nội dung cần làm nổi bật, hạ về 10px cho khỏi nhiễu nội dung. ⚠️ Giữ lại lo ngại đã nêu để người sau có đủ dữ kiện, KHÔNG phải để đảo quyết định: hướng dẫn của 消費者庁 về 打消し表示 lấy "chữ nhỏ đặt ở góc" làm ví dụ mẫu của lời khai bị coi là không đủ. Nếu pháp vụ soát lại điểm này thì đây là dòng cần sửa đầu tiên. Bù lại phần đọc được: tương phản giữ 8.45:1 (trắng trên nền đen mờ .70, đo ở trường hợp xấu nhất khi lớp phủ nằm trên vùng ảnh trắng) — gấp gần hai lần sàn 4.5:1, nên chữ tuy nhỏ nhưng không mờ. */ font-size: 10px; font-weight: 400; line-height: 1.35; white-space: nowrap; /* Nhãn không bao giờ là đích bấm — để nó ăn cú chạm là chặn mất liên kết hoặc thao tác vuốt băng chuyền nằm dưới nó. */ pointer-events: none; } /* ── Băng chuyền ảnh ───────────────────────────────────────────────────── ⛔ KHÔNG CÓ JAVASCRIPT. CSP của trang là `script-src 'none'`, nên mọi thư viện carousel đều không chạy được ở đây. Cuộn theo điểm dừng (scroll-snap) là thứ trình duyệt tự làm: vuốt trên điện thoại, lăn chuột ngang hoặc kéo thanh cuộn trên máy tính, và phím mũi tên khi khối đã lấy nét. ⛔ KHÔNG tự động chạy slide. Một băng chuyền tự đổi ảnh cướp quyền điều khiển của người đọc — với người 50–60 tuổi đang dò từng dòng thì nó là thứ gây bực, không phải thứ gây thích. Người đọc tự quyết khi nào sang ảnh kế. Ở khổ hẹp mỗi slide chiếm 86% bề ngang: 14% còn lại để lộ mép slide sau, đó là thứ duy nhất nói cho người dùng biết "còn nữa, vuốt sang đi" mà không tốn một chữ hướng dẫn nào. */ .slider { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; margin: 0 0 14px; padding: 4px 4px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } @media (min-width: 720px) { .slider { grid-auto-columns: 47%; } } @media (min-width: 1060px) { .slider { grid-auto-columns: 31.5%; } } .slider:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--radius); } .slide { /* ⛔ `figure` mang lề mặc định `1em 40px` của trình duyệt. Trong ô lưới rộng 86% của khổ điện thoại, 80px lề ăn mất hơn một phần tư slide — nhìn ra thành "slide bị hụt" chứ không thành "có lề". */ margin: 0; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .slide .shot-media { border: 0; border-radius: 0; } .slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .slide-body { padding: 16px 18px 18px; flex: 1 1 auto; } .slide-who { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: var(--c1-bg); font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--green-ink); } .slide h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.55; } .slide p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-muted); } /* Chấm điều hướng là LIÊN KẾT NEO thật, không phải nút giả. Bấm vào là trình duyệt tự cuộn khối tới đúng slide — lại là việc trình duyệt làm sẵn, không cần JavaScript. Vùng chạm 44×44 theo đúng sàn của cả trang. */ .slider-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .slider-dots a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; border-radius: 12px; font-size: 17px; font-weight: 700; color: var(--green-strong); text-decoration: none; border: 2px solid var(--green-line); background: var(--paper); } .slider-dots a:hover, .slider-dots a:focus { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); } /* Trên màn rộng cả ba slide đã hiện cùng lúc ⇒ chấm điều hướng thành thừa. */ @media (min-width: 1060px) { .slider-dots { display: none; } } @media (prefers-reduced-motion: reduce) { .slider { scroll-behavior: auto; } } /* Ảnh dọc cắt về khung 16:9 thì mặc định lấy dải giữa — với ảnh chân dung, dải giữa là thân người và khuôn mặt bị cắt mất. Kéo điểm neo lên 20%. */ .slide img.top { object-position: center 20%; } /* --------------------------------------------------------------------------- 21. MÀN HÌNH HẸP: BỎ CUỘN NGANG, VÀ BẤM ĐỂ PHÓNG TO Số đo ở khung nhìn 320px trước khi sửa: SÁU khối cuộn ngang, mỗi khối chỉ hiện 43–45% nội dung. Trang không hề tràn ở cấp tài liệu (scrollWidth = clientWidth), nên nhìn bằng công cụ thì "xanh" — nhưng trên máy thật, hơn một nửa mỗi bảng và mỗi sơ đồ nằm ngoài màn hình, và vuốt ngang ở bất kỳ đâu trên chúng đọc ra thành "trang bị trôi sang ngang". Ba việc, theo thứ tự giá trị: 1. SƠ ĐỒ THÔI CUỘN NGANG — bỏ sàn 560px ở màn hẹp. Sơ đồ nhỏ lại nhưng hiện ĐỦ. Nhỏ mà thấy hết vẫn hơn to mà mất một nửa, vì cái mất là phần người đọc không biết là mình đang mất. 2. BẤM ĐỂ PHÓNG TO cho sơ đồ, bảng và ảnh — chi tiết lấy lại ở đây. 3. BẢNG GIỮ CUỘN NGANG. Bảng cần bề ngang thật: bóp cột xuống cho vừa 320px là mỗi ô còn một chữ mỗi dòng. Nhưng nay nó có lối thoát là nút phóng to. ⛔ KHÔNG hạ cỡ chữ xuống dưới 17px. Cổng `npm run check` chặn, và lý do có cổng đó là người mua sản phẩm này ở tuổi lão thị — thu nhỏ chữ trên chính thiết bị họ hay đọc nhất là chữa triệu chứng bằng cách làm nặng thêm bệnh. Chỗ chật thì bỏ bớt thứ chiếm chỗ, không bóp chữ. ⛔ KHÔNG JAVASCRIPT. Lớp phủ dùng `:target` của CSS — bấm liên kết neo là trình duyệt tự bật. Nút đóng trỏ về neo của SECTION chứa nó, không trỏ về `#`: trỏ `#` là đóng xong trang nhảy vọt lên đầu, mất chỗ đang đọc. --------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Sơ đồ: thà nhỏ mà đủ, còn hơn to mà khuất. */ .viz-scroll { overflow-x: visible; } .viz-scroll .diagram { min-width: 0; } .scroll-hint { display: none; } } .zoom { position: relative; } /* Nút mở phủ kín khối — ngón tay người lớn tuổi chạm không chính xác nên đích bấm là cả tấm hình. Là