/* Theme Name: Himeros Theme URI: Author: Linkk Author URI: Description: Block theme cho website thương hiệu Himeros. Hệ thiết kế lấy từ brand concept: cẩm thạch, nhũ vàng, serif tương phản cao. Requires at least: 7.0 Tested up to: 7.0 Requires PHP: 5.7 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: himeros Tags: */ /* ============================================================ NỘI DUNG DÁN VÀO style.css CỦA THEME QUAN TRỌNG: KHÔNG xoá phần chú thích ở đầu file style.css (Theme Name, Author, Version...). WordPress đọc phần đó để nhận diện theme - xoá đi là theme biến mất khỏi danh sách. Cách làm: mở themes/himeros/style.css, kéo xuống cuối cùng, dán toàn bộ nội dung dưới đây vào. ============================================================ */ /* ============================================================ 1. CẦU NỐI - ánh xạ biến WordPress sang tên --hm-* ------------------------------------------------------------ Đây là mắt xích quan trọng nhất của cả hệ thống. theme.json sinh ra các biến tên dài --wp--preset--*. Đoạn dưới đổi chúng thành tên ngắn --hm-* mà các trang vibe code đang dùng. Không có đoạn này, mọi var(--hm-...) trong HTML dán vào WordPress sẽ rỗng và trang mất sạch màu. ============================================================ */ :root { /* ---------- Màu: lấy từ palette trong theme.json ---------- */ --hm-marble: var(--wp--preset--color--marble); --hm-marble-light: var(--wp--preset--color--marble-light); --hm-marble-deep: var(--wp--preset--color--marble-deep); --hm-white: var(--wp--preset--color--white); --hm-noir: var(--wp--preset--color--noir); --hm-noir-soft: var(--wp--preset--color--noir-soft); --hm-ink: var(--wp--preset--color--ink); --hm-body: var(--wp--preset--color--body); --hm-muted: var(--wp--preset--color--muted); --hm-gold: var(--wp--preset--color--gold); --hm-gold-text: var(--wp--preset--color--gold-text); --hm-gold-light: var(--wp--preset--color--gold-light); --hm-line: var(--wp--preset--color--line); --hm-line-strong: var(--wp--preset--color--line-strong); /* ---------- Chữ: lấy từ fontFamilies trong theme.json ---------- */ --hm-font-display: var(--wp--preset--font-family--display); --hm-font-body: var(--wp--preset--font-family--body); --hm-font-mono: ui-monospace, Menlo, Consolas, monospace; /* ============================================================ 2. CÁC TOKEN KHÔNG CÓ TRONG theme.json ------------------------------------------------------------ Những giá trị này chỉ CSS tuỳ biến mới dùng tới, trình soạn thảo khối không cần biết - nên khai trực tiếp ở đây thay vì nhét vào theme.json cho rối. ============================================================ */ /* Màu chỉ dùng trên nền tối */ --hm-on-noir: #E8E5DE; --hm-on-noir-muted: #A9A196; --hm-line-dark: #33302B; /* Trạng thái */ --hm-success: #2E6B45; --hm-error: #9A3B33; /* Lớp phủ */ --hm-overlay: rgba(20, 18, 16, .55); --hm-overlay-deep: rgba(20, 18, 16, .78); /* Độ đậm cho font tiêu đề - đừng dùng 300, quá mảnh */ --hm-weight-display: 500; --hm-weight-display-bold: 600; /* ---------- Thang chữ (mục 2.4) ---------- Mỗi clamp có thành phần rem để chữ vẫn co giãn theo cài đặt cỡ chữ của trình duyệt. Dùng thuần vw sẽ khoá cứng cỡ chữ và vi phạm tiêu chí tiếp cận. Cỡ ghi trong chú thích: mobile 375px -> desktop 1440px. */ --hm-text-hero: clamp(2.5rem, 1.4437rem + 4.5070vw, 5.5rem); /* 40 -> 88 */ --hm-text-h1: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); /* 32 -> 56 */ --hm-text-h2: clamp(1.625rem, 1.3169rem + 1.3146vw, 2.5rem); /* 26 -> 40 */ --hm-text-h3: clamp(1.3125rem, 1.1585rem + 0.6573vw, 1.75rem); /* 21 -> 28 */ --hm-text-h4: clamp(1.1875rem, 1.1215rem + 0.2817vw, 1.375rem); /* 19 -> 22 */ --hm-text-lead: clamp(1.0625rem, 0.9745rem + 0.3756vw, 1.3125rem); /* 17 -> 21 */ --hm-text-body: 1.0625rem; /* 17px - cố định, không co giãn */ --hm-text-small: 0.9375rem; /* 15px */ --hm-text-caption: 0.8125rem; /* 13px */ --hm-text-eyebrow: 0.6875rem; /* 11px - chỉ dùng khi IN HOA + giãn chữ */ /* Chiều cao dòng - tối thiểu đã tính cho dấu chồng tiếng Việt */ --hm-leading-tight: 1.2; /* chỉ cho tiêu đề MỘT dòng */ --hm-leading-head: 1.25; /* tiêu đề nhiều dòng */ --hm-leading-lead: 1.55; /* đoạn dẫn cỡ lớn */ --hm-leading-body: 1.75; /* nội dung */ --hm-track-hero: .04em; --hm-track-eyebrow: .34em; /* ---------- Khoảng cách (mục 2.5) ---------- Hai nhóm tách bạch, đừng dùng lẫn: space-* : cố định, dùng BÊN TRONG một thành phần section-* : co giãn, dùng GIỮA các phần lớn của trang */ --hm-space-1: 4px; --hm-space-2: 8px; --hm-space-3: 12px; --hm-space-4: 16px; --hm-space-5: 24px; --hm-space-6: 32px; --hm-space-7: 48px; --hm-space-8: 64px; --hm-section-sm: clamp(3rem, 2.2958rem + 3.0047vw, 5rem); /* 48 -> 80 */ --hm-section: clamp(4.5rem, 3.2676rem + 5.2582vw, 8rem); /* 72 -> 128 */ --hm-section-lg: clamp(6rem, 4.1514rem + 7.8873vw, 11.25rem); /* 96 -> 180 */ /* Bố cục */ --hm-width-text: 680px; --hm-width-content: 1080px; --hm-width-wide: 1440px; --hm-gutter: clamp(20px, 5vw, 64px); /* Chuyển động */ --hm-ease: cubic-bezier(.22, .61, .36, 1); --hm-dur-fast: .25s; --hm-dur: .6s; --hm-dur-slow: 1.1s; /* Khác */ --hm-radius: 2px; /* Thành phần tương tác (mục 2.8) */ --hm-focus-width: 2px; --hm-focus-offset: 3px; --hm-tap-min: 44px; /* vùng chạm tối thiểu trên điện thoại */ --hm-field-height: 52px; } /* Tôn trọng người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành */ @media (prefers-reduced-motion: reduce) { :root { --hm-dur-fast: .01ms; --hm-dur: .01ms; --hm-dur-slow: .01ms; } } /* ============================================================ 3. NỀN CƠ BẢN ------------------------------------------------------------ Chỉ vài dòng tối thiểu. Phần lớn kiểu dáng do theme.json lo, ở đây chỉ xử lý những thứ theme.json không diễn đạt được. ============================================================ */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tiêu đề tiếng Việt cần khoảng thở cho dấu chồng */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* Chỉ định rõ độ đậm để Safari không tự làm đậm giả trên serif */ h1, h2 { font-weight: var(--hm-weight-display-bold); } h3, h4, h5, h6 { font-weight: var(--hm-weight-display); } /* Áp thang chữ cho các cấp tiêu đề */ h1 { font-size: var(--hm-text-h1); letter-spacing: var(--hm-track-hero); } h2 { font-size: var(--hm-text-h2); } h3 { font-size: var(--hm-text-h3); } h4 { font-size: var(--hm-text-h4); } /* h5 và h6 rơi xuống dưới ngưỡng 20px của Cormorant -> chuyển sang font nội dung */ h5, h6 { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); font-weight: 600; letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-text); } /* Bất cứ chữ nào dưới 20px đều không được dùng font tiêu đề */ small, .wp-block-post-date, figcaption { font-family: var(--hm-font-body); } img { height: auto; } ::selection { background: var(--hm-gold); color: var(--hm-marble); } /* ============================================================ 4. TIÊU ĐIỂM BÀN PHÍM ------------------------------------------------------------ Dùng :focus-visible chứ không dùng :focus - người bấm chuột sẽ không thấy viền, người dùng bàn phím thì thấy rõ. Viền vàng trên nền marble đạt 4.06:1, vượt ngưỡng 3:1 mà WCAG 1.4.11 yêu cầu cho thành phần tương tác. TUYỆT ĐỐI KHÔNG viết outline:none mà không thay bằng gì khác. ============================================================ */ :focus-visible { outline: var(--hm-focus-width) solid var(--hm-gold); outline-offset: var(--hm-focus-offset); border-radius: var(--hm-radius); } /* Trên nền tối phải đổi sang vàng sáng, vàng thường chìm mất */ .hm-on-dark :focus-visible, .has-noir-background-color :focus-visible { outline-color: var(--hm-gold-light); } /* ============================================================ 5. NÚT ------------------------------------------------------------ theme.json đã lo cho khối Nút của trình soạn thảo. Phần dưới đây dành cho các trang vibe code, dùng class .hm-btn. ============================================================ */ .hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hm-space-2); min-height: var(--hm-tap-min); padding: var(--hm-space-4) var(--hm-space-7); font-family: var(--hm-font-body); font-size: var(--hm-text-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap; border: 1px solid transparent; border-radius: var(--hm-radius); cursor: pointer; transition: background-color var(--hm-dur-fast) var(--hm-ease), color var(--hm-dur-fast) var(--hm-ease), border-color var(--hm-dur-fast) var(--hm-ease); } /* Chính - dùng cho hành động quan trọng nhất trên mỗi màn hình. Mỗi màn hình chỉ nên có MỘT nút loại này. 14.86:1 */ .hm-btn--primary { background: var(--hm-noir); color: var(--hm-marble); } .hm-btn--primary:hover { background: var(--hm-gold-text); } /* Vàng - hành động thương mại (đặt mua, đăng ký). 6.00:1 Lưu ý dùng gold-text chứ không dùng gold: nền vàng thương hiệu với chữ sáng chỉ đạt 4.06:1, trượt chuẩn AA. */ .hm-btn--gold { background: var(--hm-gold-text); color: var(--hm-marble); } .hm-btn--gold:hover { background: var(--hm-noir); } /* Viền rỗng - hành động phụ. 11.95:1 */ .hm-btn--ghost { background: transparent; color: var(--hm-ink); border-color: var(--hm-line-strong); } .hm-btn--ghost:hover { border-color: var(--hm-gold-text); color: var(--hm-gold-text); } /* Trên nền tối */ .hm-btn--on-dark { background: var(--hm-marble); color: var(--hm-noir); } .hm-btn--on-dark:hover { background: var(--hm-gold-light); color: var(--hm-noir); } .hm-btn--ghost-dark { background: transparent; color: var(--hm-on-noir); border-color: var(--hm-line-dark); } .hm-btn--ghost-dark:hover { border-color: var(--hm-gold-light); color: var(--hm-gold-light); } .hm-btn[disabled], .hm-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ============================================================ 6. FORM ------------------------------------------------------------ theme.json không diễn đạt được style form, phải viết tay. Các quy tắc dưới đây áp cho cả thẻ gốc lẫn form do plugin sinh ra (Fluent Forms dựng bằng thẻ input/textarea gốc). ============================================================ */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select { width: 100%; min-height: var(--hm-field-height); padding: var(--hm-space-4) var(--hm-space-5); font-family: var(--hm-font-body); font-size: var(--hm-text-body); /* 17px - dưới 16px là iOS tự phóng to */ line-height: 1.5; color: var(--hm-ink); background: var(--hm-white); border: 1px solid var(--hm-line-strong); /* 3.12:1 - đạt WCAG 1.4.11 */ border-radius: var(--hm-radius); transition: border-color var(--hm-dur-fast) var(--hm-ease); appearance: none; } textarea { min-height: 150px; padding-top: var(--hm-space-5); resize: vertical; line-height: var(--hm-leading-body); } input:hover, textarea:hover, select:hover { border-color: var(--hm-gold-text); } /* Chữ gợi ý phải phân biệt được với chữ người dùng đã gõ */ ::placeholder { color: var(--hm-muted); /* 5.01:1 - vẫn đọc được, không phải chữ mờ tịt */ opacity: 1; /* Firefox tự giảm độ mờ, phải ép lại */ } /* Nhãn */ label, .ff-el-input--label label { display: block; margin-bottom: var(--hm-space-2); font-family: var(--hm-font-body); font-size: var(--hm-text-small); font-weight: 500; color: var(--hm-ink); } /* Dấu bắt buộc - không chỉ dùng màu, vì người mù màu không thấy */ label .required, .ff-el-is-required.asterisk-right label:after { color: var(--hm-error); margin-left: 3px; } /* Ô chọn và ô tick */ input[type="checkbox"], input[type="radio"] { width: 19px; height: 19px; min-height: 0; accent-color: var(--hm-gold-text); cursor: pointer; } /* Mũi tên của select - vẽ bằng SVG nội tuyến để đúng màu thương hiệu */ select { padding-right: var(--hm-space-8); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B4F2E' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--hm-space-5) center; cursor: pointer; } /* Trạng thái lỗi - phải có CẢ màu VÀ chữ, không chỉ màu (WCAG 1.4.1) */ input[aria-invalid="true"], textarea[aria-invalid="true"], .ff-el-is-error input, .ff-el-is-error textarea { border-color: var(--hm-error); border-width: 2px; } .hm-field-error, .error.text-danger { display: block; margin-top: var(--hm-space-2); font-size: var(--hm-text-small); color: var(--hm-error); } /* Nút gửi của Fluent Forms - kế thừa dáng nút vàng */ .ff-btn-submit, input[type="submit"], button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hm-tap-min); padding: var(--hm-space-4) var(--hm-space-7); font-family: var(--hm-font-body); font-size: var(--hm-text-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1; background: var(--hm-gold-text); color: var(--hm-marble); border: 1px solid transparent; border-radius: var(--hm-radius); cursor: pointer; transition: background-color var(--hm-dur-fast) var(--hm-ease); } .ff-btn-submit:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--hm-noir); } /* Form đặt trên nền tối */ .hm-on-dark input, .hm-on-dark textarea, .hm-on-dark select { background: transparent; color: var(--hm-on-noir); border-color: var(--hm-line-dark); } .hm-on-dark ::placeholder { color: var(--hm-on-noir-muted); } .hm-on-dark label { color: var(--hm-on-noir); } .hm-on-dark input:hover, .hm-on-dark textarea:hover { border-color: var(--hm-gold-light); } /* ============================================================ HIMEROS - Header & menu điện thoại (mục 3.1 + 3.2) Dán vào cuối style.css của theme. Ba trạng thái của header: mặc định - nền marble đặc, chữ tối, logo lớn body:has(.hm-hero) - trong suốt, chữ sáng (khi trang CÓ hero, chưa cuộn) .is-scrolled - nền mờ, thanh tiện ích thu hết, logo và menu co còn khoảng một nửa Class .is-scrolled do header.js gắn, dựa trên window.scrollY, có độ trễ giữa ngưỡng bật và ngưỡng tắt để không dao động. HEADER LUÔN position:fixed - KHÔNG dùng sticky. Sticky khiến header chiếm chỗ trong luồng; khi thu lại, nội dung dịch lên, trình duyệt bù lại vị trí cuộn, scrollY tụt xuống dưới ngưỡng, header giãn ra, scrollY lại vượt ngưỡng - lặp vô tận và menu giật liên tục ở đoạn gần đầu trang. Fixed thì header không chiếm chỗ, thu hay giãn cũng không làm dịch chuyển gì cả. Đổi lại phải tự chừa khoảng trống: header.js đo chiều cao lúc chưa thu rồi ghi vào biến --hm-header-h, templates.css dùng biến đó làm padding-top cho .hm-main. Chế độ trong suốt bật bằng :has(.hm-hero) chứ không bằng class trên body. Lý do: nó tự đúng. Trang nào có khối hero thì header trong suốt, trang nào không có thì header nền đặc - không cần PHP đoán hộ, không bao giờ lệch. ============================================================ */ /* ---------- Mốc neo không bị header che ---------- Header cố định ở đỉnh nên khi nhảy tới một #id, phần đầu của nó sẽ chui xuống dưới header. Chừa sẵn đúng chiều cao header cộng một khoảng thở. Biến --hm-header-h do header.js đo và ghi vào . */ [id] { scroll-margin-top: calc(var(--hm-header-h, 210px) + var(--hm-space-5)); } /* ---------- Skip links (mô hình Hermès) ---------- Ẩn khỏi mắt nhưng KHÔNG ẩn khỏi trình đọc màn hình. Bấm Tab từ đầu trang sẽ thấy chúng hiện ra. */ .hm-skip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200; padding: var(--hm-space-4) var(--hm-space-6); background: var(--hm-noir); color: var(--hm-marble); font-size: var(--hm-text-small); font-weight: 500; text-decoration: none; transition: transform var(--hm-dur-fast) var(--hm-ease); } .hm-skip:focus-visible { transform: translate(-50%, 0); } /* ============================================================ HEADER ============================================================ */ .hm-header { position: fixed; /* KHÔNG đổi sang sticky - xem ghi chú đầu file */ top: 0; left: 0; right: 0; z-index: 100; padding-block: 0; background: var(--hm-marble); border-bottom: 1px solid var(--hm-line); transition: background-color var(--hm-dur) var(--hm-ease), border-color var(--hm-dur) var(--hm-ease), backdrop-filter var(--hm-dur) var(--hm-ease); } /* Dùng khi cần đo chiều cao thật mà không để người dùng thấy hiệu ứng */ .hm-header.hm-no-transition, .hm-header.hm-no-transition * { transition: none !important; } /* Trang có hero: header trong suốt, đè lên ảnh hero. :not(.is-scrolled) ở đây là BẮT BUỘC, không phải cho gọn. Bản đầu tiên viết là `body:has(.hm-hero) .hm-header` - độ đặc hiệu (0,2,1). Quy tắc nền mờ khi cuộn là `.hm-header.is-scrolled` - chỉ (0,2,0). Selector nào đặc hiệu hơn thì thắng, bất kể thứ tự, nên trên MỌI trang có hero, header không bao giờ nhận được nền đặc. Triệu chứng rất khó lần ra vì nửa còn lại vẫn chạy đúng: thanh tiện ích vẫn thu, logo vẫn co, và màu chữ vẫn đảo về màu tối - chỉ riêng cái nền là không đổi. Kết quả là menu chữ tối nằm trên ảnh tối, gần như vô hình, và trông y như header bị "chìm vào hero". */ body:has(.hm-hero) .hm-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; } /* Màn che dưới header khi đang ở chế độ trong suốt. Ảnh hero không bao giờ đủ tối đều để chữ trắng luôn đọc được - một góc sáng lên là mất chữ ngay. Dải chuyển màu này bảo đảm nền dưới menu luôn tối, mà vẫn giữ được cảm giác header nổi trên ảnh. Đây là cách Hermès và Vacheron Constantin làm. Đặt ở lớp giả thay vì đổi thẳng background: dải chuyển màu không chuyển động mượt được, còn độ mờ của lớp giả thì có - nhờ vậy lúc đổi sang nền đặc không bị nháy. z-index -1: nằm sau nền của chính header nhưng vẫn trong phạm vi xếp lớp của nó, nên vẫn phủ lên ảnh hero và vẫn ở dưới chữ. */ body:has(.hm-hero) .hm-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--hm-noir) 72%, transparent) 0%, color-mix(in srgb, var(--hm-noir) 38%, transparent) 62%, transparent 100%); transition: opacity var(--hm-dur) var(--hm-ease); } body:has(.hm-hero) .hm-header.is-scrolled::before { opacity: 0; } /* Sau khi cuộn: nền mờ, có đường viền và đổ bóng rất nhẹ */ .hm-header.is-scrolled { background: color-mix(in srgb, var(--hm-marble) 92%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--hm-line); box-shadow: 0 1px 24px -12px rgba(20, 18, 16, .35); } /* Trình duyệt cũ không hiểu color-mix thì rơi về nền đặc */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .hm-header.is-scrolled { background: var(--hm-marble); } } /* ---------- Thanh tiện ích ---------- Hiện khi ở đầu trang, thu lại hoàn toàn khi cuộn. Dùng max-height + opacity + padding để thu mượt; overflow ẩn phần tràn trong lúc đang co. */ .hm-header__utility { padding: var(--hm-space-3) var(--hm-gutter); border-bottom: 1px solid color-mix(in srgb, var(--hm-line) 60%, transparent); overflow: hidden; max-height: 60px; transition: max-height var(--hm-dur) var(--hm-ease), padding var(--hm-dur) var(--hm-ease), opacity var(--hm-dur) var(--hm-ease), border-color var(--hm-dur) var(--hm-ease); } .hm-nav-utility { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); letter-spacing: .2em; text-transform: uppercase; font-weight: 500; } .hm-nav-utility a { color: var(--hm-muted); text-decoration: none; transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-nav-utility a:hover { color: var(--hm-gold-text); } /* Cuộn xuống -> thu lại hoàn toàn */ .hm-header.is-scrolled .hm-header__utility { max-height: 0; padding-block: 0; opacity: 0; border-bottom-color: transparent; pointer-events: none; /* không cho Tab lọt vào link đã ẩn */ } /* ---------- Hàng logo ---------- */ .hm-header__brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--hm-space-7) var(--hm-gutter) var(--hm-space-5); transition: padding var(--hm-dur) var(--hm-ease); } .hm-header.is-scrolled .hm-header__brand { padding-block: var(--hm-space-3) var(--hm-space-1); } .hm-wordmark { grid-column: 2; margin: 0; text-align: center; line-height: 0; /* bỏ khoảng thừa dưới SVG */ } .hm-wordmark a { display: inline-block; color: var(--hm-ink); /* SVG dùng currentColor -> đổi theo dòng này */ text-decoration: none; transition: color var(--hm-dur) var(--hm-ease); } /* SVG logo. Chiều cao do CSS quyết định, viewBox lo tỷ lệ. Tỷ lệ gốc 1197 x 301.5, tức rộng gấp ~3,97 lần chiều cao. */ .hm-wordmark .hm-logo { display: block; height: clamp(2.5rem, 4.8vw, 3.5rem); /* 40 -> 56px */ width: auto; transition: height var(--hm-dur) var(--hm-ease); } /* Thu còn khoảng một nửa. Cùng với việc thanh tiện ích thu hết, chiều cao header đi từ khoảng 210px xuống còn khoảng 80px. */ .hm-header.is-scrolled .hm-wordmark .hm-logo { height: clamp(1.5rem, 2.4vw, 1.875rem); /* 24 -> 30px */ } .hm-header__slot { grid-column: 3; } /* ---------- Menu chính ---------- */ .hm-header__nav { padding: 0 var(--hm-gutter) var(--hm-space-6); transition: padding var(--hm-dur) var(--hm-ease); } .hm-header.is-scrolled .hm-header__nav { padding-bottom: var(--hm-space-4); } .hm-nav-main { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; gap: clamp(var(--hm-space-5), 2.6vw, var(--hm-space-8)); transition: font-size var(--hm-dur) var(--hm-ease), letter-spacing var(--hm-dur) var(--hm-ease), gap var(--hm-dur) var(--hm-ease); } /* Menu cũng co lại theo, nhưng nhẹ hơn logo để vẫn đọc được */ .hm-header.is-scrolled .hm-nav-main { font-size: .625rem; /* 11 -> 10px */ letter-spacing: .18em; gap: clamp(var(--hm-space-5), 2.2vw, var(--hm-space-7)); } .hm-nav-main a { position: relative; color: var(--hm-ink); text-decoration: none; padding-block: var(--hm-space-2); transition: color var(--hm-dur-fast) var(--hm-ease); } /* Gạch chân chạy từ giữa ra - chậm và có kiểm soát, không giật */ .hm-nav-main a::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: var(--hm-gold); transform: translateX(-50%); transition: width var(--hm-dur) var(--hm-ease); } .hm-nav-main a:hover::after, .hm-nav-main .current-menu-item > a::after { width: 100%; } .hm-nav-main a:hover { color: var(--hm-gold-text); } /* ---------- Chế độ chữ sáng khi header trong suốt trên hero ---------- */ body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-wordmark a, body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-nav-main a { color: var(--hm-on-noir); } /* Ngôi sao trong logo phải đổi màu theo nền. Vàng của logo (#BFA87F) chỉ đạt 1.83:1 trên nền marble - gần như vô hình. Trên nền tối thì đạt 8.12:1 và rất đẹp. */ body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-wordmark { --hm-logo-accent: var(--hm-gold-light); } body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-nav-utility a { color: var(--hm-on-noir-muted); } body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-nav-main a:hover, body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-nav-utility a:hover { color: var(--hm-gold-light); } body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-header__utility { border-bottom-color: color-mix(in srgb, var(--hm-on-noir) 22%, transparent); } body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-nav-main a::after { background: var(--hm-gold-light); } body:has(.hm-hero) .hm-header:not(.is-scrolled) .hm-burger__bar { background: var(--hm-on-noir); } /* Tiêu điểm bàn phím trên nền tối phải đổi màu */ body:has(.hm-hero) .hm-header:not(.is-scrolled) :focus-visible { outline-color: var(--hm-gold-light); } /* ============================================================ NÚT MỞ MENU + MENU ĐIỆN THOẠI (mục 3.2) ============================================================ */ .hm-burger { grid-column: 1; justify-self: start; display: none; /* chỉ hiện dưới 900px */ flex-direction: column; justify-content: center; gap: 6px; width: var(--hm-tap-min); height: var(--hm-tap-min); padding: 0; margin-left: calc(var(--hm-space-4) * -1); background: none; border: none; cursor: pointer; } .hm-burger__bar { display: block; width: 24px; height: 1px; background: var(--hm-ink); transition: transform var(--hm-dur-fast) var(--hm-ease), opacity var(--hm-dur-fast) var(--hm-ease), background-color var(--hm-dur) var(--hm-ease); } /* Đang mở thì hai gạch chụm thành dấu X */ .hm-header.is-menu-open .hm-burger__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .hm-header.is-menu-open .hm-burger__bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } .hm-mobile { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--hm-noir); opacity: 0; visibility: hidden; transition: opacity var(--hm-dur) var(--hm-ease), visibility var(--hm-dur) var(--hm-ease); } .hm-mobile.is-open { opacity: 1; visibility: visible; } .hm-mobile__inner { width: 100%; padding: 0 var(--hm-gutter); text-align: center; } .hm-mobile__list, .hm-mobile__utility { list-style: none; margin: 0; padding: 0; } .hm-mobile__list li { opacity: 0; transform: translateY(14px); transition: opacity var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease); } .hm-mobile.is-open .hm-mobile__list li { opacity: 1; transform: none; } /* Các mục hiện lần lượt - chậm, có nhịp, không đồng loạt */ .hm-mobile.is-open .hm-mobile__list li:nth-child(1) { transition-delay: .10s; } .hm-mobile.is-open .hm-mobile__list li:nth-child(2) { transition-delay: .16s; } .hm-mobile.is-open .hm-mobile__list li:nth-child(3) { transition-delay: .22s; } .hm-mobile.is-open .hm-mobile__list li:nth-child(4) { transition-delay: .28s; } .hm-mobile.is-open .hm-mobile__list li:nth-child(5) { transition-delay: .34s; } .hm-mobile__list a { display: block; padding: var(--hm-space-4) 0; font-family: var(--hm-font-display); font-size: var(--hm-text-h3); font-weight: var(--hm-weight-display); line-height: var(--hm-leading-head); color: var(--hm-on-noir); text-decoration: none; transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-mobile__list a:hover { color: var(--hm-gold-light); } .hm-mobile__utility { display: flex; gap: var(--hm-space-6); justify-content: center; margin-top: var(--hm-space-7); padding-top: var(--hm-space-6); border-top: 1px solid var(--hm-line-dark); } .hm-mobile__utility a { font-size: var(--hm-text-eyebrow); letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--hm-on-noir-muted); text-decoration: none; } .hm-mobile__utility a:hover { color: var(--hm-gold-light); } .hm-mobile__tagline { margin: var(--hm-space-7) 0 0; font-size: var(--hm-text-eyebrow); letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-light); } /* ============================================================ KHỔ MÀN HÌNH ============================================================ */ @media (max-width: 899px) { .hm-burger { display: flex; } .hm-header__utility, .hm-header__nav { display: none; } .hm-header__brand { padding-block: var(--hm-space-4); } } @media (min-width: 900px) { .hm-mobile { display: none; } } /* Người dùng đã tắt hiệu ứng trong hệ điều hành */ @media (prefers-reduced-motion: reduce) { .hm-mobile__list li { opacity: 1; transform: none; transition-delay: 0s !important; } .hm-nav-main a::after { transition: none; } } /* ============================================================ HIMEROS - Footer (mục 3.3) Dán vào cuối style.css của theme. ============================================================ */ .hm-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ DẸP KHOẢNG TRẮNG GIỮA CÁC KHỐI WordPress tự chèn margin giữa các block anh em bằng biến --wp--style--block-gap. Bốn tầng footer là bốn khối wp:html anh em nên bị chèn khoảng trắng màu nền vào giữa - đó là các dải sáng nhìn thấy giữa các mảng tối. Cũng gỡ luôn phần đệm ngang mà useRootPaddingAwareAlignments áp lên template part, vì mỗi tầng footer tự lo phần đệm của mình. ============================================================ */ .hm-footer { margin-block: 0; padding-inline: 0 !important; } .hm-footer > *, .hm-footer > * + * { margin-block: 0 !important; } /* Header cũng dính lỗi tương tự */ .hm-header { margin-block: 0; padding-inline: 0 !important; } .hm-header > *, .hm-header > * + * { margin-block: 0 !important; } .hm-footer__inner { max-width: var(--hm-width-wide); margin: 0 auto; padding-inline: var(--hm-gutter); } /* ============================================================ 1. DẢI CAM KẾT Đặt trên nền marble-deep để tách khỏi nội dung, nhưng chưa chuyển sang nền tối - tạo bước đệm thị giác vào footer. ============================================================ */ .hm-promise { background: var(--hm-marble-deep); border-top: 1px solid var(--hm-line); padding-block: var(--hm-section-sm); } .hm-promise__inner { max-width: var(--hm-width-wide); margin: 0 auto; padding-inline: var(--hm-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hm-space-7); } .hm-promise__item h3 { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); font-weight: 600; letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-text); margin: 0 0 var(--hm-space-3); } .hm-promise__item p { margin: 0; font-size: var(--hm-text-small); line-height: 1.7; color: var(--hm-body); } /* Cam kết đầu tiên là lý do chốt đơn của cả ngành hàng - cho nó nhiều trọng lượng hơn ba cái còn lại. */ .hm-promise__item:first-child h3 { color: var(--hm-gold-text); } .hm-promise__item:first-child p { color: var(--hm-ink); font-weight: 500; } /* ============================================================ 2. KHỐI CHÍNH ============================================================ */ .hm-footer__main { background: var(--hm-noir); color: var(--hm-on-noir-muted); padding-block: var(--hm-section); /* Đường kẻ này thay cho đường kẻ đã mất cùng dải cam kết. Trước đây tầng đầu chân trang là dải cam kết nền cẩm thạch sẫm, tự nó đã tách khỏi phần trên. Bỏ dải đó đi thì chân trang bắt đầu bằng một mảng đen - và khối cuối trang chủ cũng nền đen. Hai mảng dính vào nhau thành một vùng tối dài gần 500px, trong đó có khoảng 260px hoàn toàn trống, và không ai đọc ra ranh giới. line-dark là #33302B trên nền #141210 - đủ thấy, không đủ để thành một cái gạch ngang giữa trang. */ border-top: 1px solid var(--hm-line-dark); } .hm-footer__main .hm-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--hm-space-8) var(--hm-space-7); } /* Footer luôn nền tối -> logo dùng vàng sáng */ .hm-footer__mark { --hm-logo-accent: var(--hm-gold-light); color: var(--hm-on-noir); line-height: 0; } .hm-footer__mark .hm-logo { display: block; height: 2.5rem; width: auto; } /* Dự phòng khi chưa gắn SVG, vẫn hiển thị bằng chữ */ .hm-footer__mark:not(:has(.hm-logo)) { font-family: var(--hm-font-display); font-size: 1.75rem; font-weight: var(--hm-weight-display); letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; line-height: 1; } .hm-footer__tagline { margin: var(--hm-space-3) 0 var(--hm-space-5); font-size: var(--hm-text-eyebrow); letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-light); } .hm-footer__blurb { margin: 0; font-size: var(--hm-text-small); line-height: 1.75; font-weight: 300; max-width: 34ch; } .hm-footer__h { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); font-weight: 600; letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-light); margin: 0 0 var(--hm-space-5); } .hm-footer__col ul { list-style: none; margin: 0; padding: 0; } .hm-footer__col li + li { margin-top: var(--hm-space-4); } .hm-footer__col a { font-size: var(--hm-text-small); color: var(--hm-on-noir-muted); text-decoration: none; transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-footer__col a:hover { color: var(--hm-gold-light); } .hm-footer__signup p { margin: 0 0 var(--hm-space-5); font-size: var(--hm-text-small); line-height: 1.7; font-weight: 300; } .hm-footer__form { display: flex; gap: var(--hm-space-2); flex-wrap: wrap; } .hm-footer__form input { flex: 1 1 180px; min-height: var(--hm-tap-min); padding: var(--hm-space-3) var(--hm-space-4); background: transparent; border: 1px solid var(--hm-line-dark); border-radius: var(--hm-radius); color: var(--hm-on-noir); font-family: var(--hm-font-body); font-size: var(--hm-text-small); transition: border-color var(--hm-dur-fast) var(--hm-ease); } .hm-footer__form input::placeholder { color: var(--hm-on-noir-muted); opacity: 1; } .hm-footer__form input:hover { border-color: var(--hm-gold-light); } .hm-footer__form button { min-height: var(--hm-tap-min); padding-inline: var(--hm-space-6); background: var(--hm-marble); color: var(--hm-noir); border: 1px solid transparent; border-radius: var(--hm-radius); font-family: var(--hm-font-body); font-size: var(--hm-text-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color var(--hm-dur-fast) var(--hm-ease); } .hm-footer__form button:hover { background: var(--hm-gold-light); } /* ============================================================ 3. DÒNG CUỐI - gộp chính sách, bản quyền và mạng xã hội Bản đầu chia làm hai tầng: một tầng chính sách, một tầng bản quyền. Hai dòng ngang nhau, cùng nền đen, chỉ cách nhau một đường kẻ - trông như một chỗ bị chia đôi mà không vì lý do gì. Gộp lại thành một dòng: bản quyền bên trái, phần còn lại dồn sang phải. Ít chiều cao hơn, và mắt chỉ phải dừng một lần. ============================================================ */ .hm-footer__bottom { background: var(--hm-noir); border-top: 1px solid var(--hm-line-dark); padding-block: var(--hm-space-5); } .hm-footer__bottom .hm-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-space-4) var(--hm-space-7); flex-wrap: wrap; } .hm-footer__copy { margin: 0; font-size: var(--hm-text-caption); color: var(--hm-on-noir-muted); } /* Nhóm bên phải: chính sách, nút cookie, rồi icon mạng xã hội */ .hm-footer__meta { display: flex; align-items: center; gap: var(--hm-space-4) var(--hm-space-6); flex-wrap: wrap; } .hm-footer__policies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hm-space-3) var(--hm-space-6); } .hm-footer__policies a, .hm-footer__cookie-btn { font-family: var(--hm-font-body); font-size: var(--hm-text-caption); color: var(--hm-on-noir-muted); transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-footer__policies a { text-decoration: none; } .hm-footer__policies a:hover, .hm-footer__cookie-btn:hover { color: var(--hm-gold-light); } /* Nút mở lại bảng cài đặt cookie. Phải là thẻ button chứ không phải link: nó mở một hộp thoại, không đi tới trang nào. Gạch chân để phân biệt với các chính sách bên cạnh - đây là thứ bấm vào thì có chuyện xảy ra ngay tại chỗ. */ .hm-footer__cookie-btn { background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .hm-footer__bct img { opacity: .75; transition: opacity var(--hm-dur-fast) var(--hm-ease); } .hm-footer__bct:hover img { opacity: 1; } /* ---------- Mạng xã hội: chỉ còn icon ---------- Chữ "Facebook Instagram TikTok" chiếm gần một phần ba dòng cuối mà không nói thêm được gì - ba biểu tượng ấy đã quá quen. Đổi sang icon thì dòng cuối gọn hẳn. Tên vẫn còn trong HTML dưới dạng chữ ẩn cho trình đọc màn hình, nên bỏ chữ đi không mất gì về mặt tiếp cận. Vùng bấm 44px theo WCAG 2.5.8, nhưng icon chỉ 18px - khoảng trống quanh icon vẫn bấm được, chỉ là không nhìn thấy. */ .hm-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--hm-space-2); } .hm-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--hm-tap-min); height: var(--hm-tap-min); margin: calc(var(--hm-space-3) * -1) 0; /* không làm dòng cuối cao thêm */ color: var(--hm-on-noir-muted); transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-footer__social a:hover { color: var(--hm-gold-light); } .hm-footer__social svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* ============================================================ KHỔ MÀN HÌNH ============================================================ */ @media (max-width: 1024px) { .hm-promise__inner { grid-template-columns: repeat(2, 1fr); gap: var(--hm-space-7) var(--hm-space-6); } .hm-footer__main .hm-footer__inner { grid-template-columns: 1fr 1fr; } .hm-footer__brand, .hm-footer__signup { grid-column: 1 / -1; } } @media (max-width: 600px) { .hm-promise__inner { grid-template-columns: 1fr; gap: var(--hm-space-6); } .hm-footer__main .hm-footer__inner { grid-template-columns: 1fr; } .hm-footer__bottom .hm-footer__inner { flex-direction: column; align-items: flex-start; } .hm-footer__meta { flex-direction: column; align-items: flex-start; gap: var(--hm-space-4); } .hm-footer__social a { margin-inline-start: calc(var(--hm-space-3) * -1); } } /* ============================================================ HIMEROS - Cổng 18+ và thanh cookie Dán vào cuối style.css của theme. ============================================================ */ /* ============================================================ CỔNG 18+ ============================================================ */ .hm-age { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--hm-gutter); background: var(--hm-noir); animation: hm-fade-in var(--hm-dur-slow) var(--hm-ease) both; } .hm-age.is-leaving { animation: hm-fade-out var(--hm-dur) var(--hm-ease) both; } @keyframes hm-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes hm-fade-out { from { opacity: 1 } to { opacity: 0; visibility: hidden } } .hm-age__box { width: 100%; max-width: 620px; text-align: center; } .hm-age__mark { font-family: var(--hm-font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--hm-weight-display); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--hm-on-noir); } .hm-age__rule { width: 52px; height: 1px; margin: var(--hm-space-5) auto var(--hm-space-7); background: linear-gradient(90deg, transparent, var(--hm-gold-light), transparent); } .hm-age__title { font-family: var(--hm-font-display); font-size: var(--hm-text-h2); font-weight: var(--hm-weight-display-bold); line-height: var(--hm-leading-head); color: var(--hm-on-noir); margin: 0 0 var(--hm-space-5); } .hm-age__text { font-size: var(--hm-text-body); font-weight: 300; line-height: var(--hm-leading-body); color: var(--hm-on-noir-muted); max-width: 44ch; margin: 0 auto var(--hm-space-7); } .hm-age__actions { display: flex; gap: var(--hm-space-4); justify-content: center; flex-wrap: wrap; } .hm-age__note { margin: var(--hm-space-7) 0 0; font-size: var(--hm-text-caption); color: var(--hm-on-noir-muted); opacity: .75; } /* ============================================================ THANH COOKIE Đặt ở đáy màn hình, KHÔNG chặn nội dung phía sau. ============================================================ */ .hm-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: var(--hm-noir); border-top: 1px solid var(--hm-gold); color: var(--hm-on-noir-muted); transform: translateY(100%); transition: transform var(--hm-dur) var(--hm-ease); max-height: 90dvh; overflow-y: auto; } .hm-cookie.is-open { transform: translateY(0); } .hm-cookie__inner { max-width: var(--hm-width-wide); margin: 0 auto; padding: var(--hm-space-6) var(--hm-gutter); } .hm-cookie__head { display: flex; gap: var(--hm-space-7); align-items: center; justify-content: space-between; flex-wrap: wrap; } .hm-cookie__copy { flex: 1 1 420px; } .hm-cookie__title { font-family: var(--hm-font-display); font-size: var(--hm-text-h4); font-weight: var(--hm-weight-display-bold); line-height: var(--hm-leading-head); color: var(--hm-on-noir); margin: 0 0 var(--hm-space-3); } .hm-cookie__copy p { margin: 0; font-size: var(--hm-text-small); line-height: 1.7; max-width: 70ch; } .hm-cookie__copy a { color: var(--hm-gold-light); text-decoration: underline; text-underline-offset: 3px; } .hm-cookie__actions { display: flex; gap: var(--hm-space-3); align-items: center; flex-wrap: wrap; } /* Nút "Tùy chỉnh" cố tình để dạng chữ thường - nó là lựa chọn thứ ba, không phải lựa chọn chính. Nhưng "Chỉ cookie cần thiết" thì PHẢI cùng kích thước và độ nổi bật với "Đồng ý tất cả". */ .hm-cookie__toggle { background: none; border: none; padding: var(--hm-space-3) var(--hm-space-4); font-family: var(--hm-font-body); font-size: var(--hm-text-caption); letter-spacing: .1em; color: var(--hm-on-noir-muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: var(--hm-tap-min); transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-cookie__toggle:hover { color: var(--hm-gold-light); } /* ---------- Bảng tùy chỉnh ---------- */ .hm-cookie__details { margin-top: var(--hm-space-6); padding-top: var(--hm-space-6); border-top: 1px solid var(--hm-line-dark); display: grid; gap: var(--hm-space-5); } .hm-cookie__row { display: grid; grid-template-columns: 240px 1fr; gap: var(--hm-space-5); align-items: start; } .hm-cookie__row p { margin: 0; font-size: var(--hm-text-small); line-height: 1.7; } .hm-cookie__switch { display: flex; align-items: center; gap: var(--hm-space-3); min-height: var(--hm-tap-min); } .hm-cookie__switch input { accent-color: var(--hm-gold-light); } .hm-cookie__switch label { margin: 0; font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-on-noir); cursor: pointer; } .hm-cookie__switch input:disabled + label { opacity: .6; cursor: default; } .hm-cookie__save-row { padding-top: var(--hm-space-2); } @media (max-width: 780px) { .hm-cookie__head { gap: var(--hm-space-5); } .hm-cookie__actions { width: 100%; } .hm-cookie__actions .hm-btn { flex: 1 1 100%; } .hm-cookie__toggle { width: 100%; } .hm-cookie__row { grid-template-columns: 1fr; gap: var(--hm-space-2); } } @media (prefers-reduced-motion: reduce) { .hm-age { animation: none; } .hm-cookie { transition: none; } } /* ============================================================ HIMEROS - Template trang, bài viết, danh mục, 404 (mục 3.4 - 3.7). Dán vào cuối style.css của theme. ============================================================ */ .hm-eyebrow, .hm-article__head .hm-eyebrow a, .hm-grid .hm-eyebrow a { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); font-weight: 600; letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-text); text-decoration: none; } /* Header là position:fixed nên không chiếm chỗ - .hm-main phải tự chừa khoảng trống bằng đúng chiều cao header lúc chưa thu gọn. Biến --hm-header-h do header.js đo và ghi vào thẻ . Giá trị dự phòng 210px dùng khi JS chưa chạy xong. Đệm dưới dùng --hm-section, KHÔNG dùng --hm-section-lg: footer đã có dải cam kết làm khoảng đệm thị giác rồi. margin-block-start:0 - WordPress chèn margin-top cho MỌI con của .wp-site-blocks trừ :first-child. Vì header là position:fixed nên bị coi như không chiếm chỗ, nhưng CSS :first-child tính theo DOM, không tính theo luồng hiển thị - header VẪN là :first-child, nên .hm-main (đứa con thứ hai) không được miễn, ăn nhầm margin-top 24px của WordPress. Hệ quả: một dải nền marble thừa ở đỉnh mọi trang, rõ nhất ở trang có hero vì hero đã bỏ hết padding-top. */ .hm-main { padding-top: calc(var(--hm-header-h, 210px) + var(--hm-section)); padding-bottom: var(--hm-section); margin-block-start: 0 !important; } /* Trang có hero: hero tràn từ mép trên, header trong suốt đè lên */ body:has(.hm-hero) .hm-main { padding-top: 0; } /* ---------- Trang vibe code (template page-vibe.html) ---------- Ba việc phải gỡ để HTML dán vào tự quyết định từ mép này sang mép kia: 1. Đệm ngang - trang thường có, trang vibe code không, vì mỗi khối trong HTML tự bọc bằng .hm-wrap của riêng nó. 2. Khoảng cách giữa các khối - WordPress chèn margin giữa các khối con. Trang vibe code chỉ có đúng một khối Custom HTML nên khoảng cách đó chỉ tạo ra một dải trắng thừa ở đầu trang. 3. Bề rộng - đã gỡ trong chính template bằng layout "default". Cùng cách xử lý với header và footer ở Khối 3, cùng lý do. */ .hm-vibe { padding-inline: 0 !important; /* Và bỏ luôn đệm dưới. .hm-main có padding-bottom: var(--hm-section) - khoảng 128px - để nội dung trang thường không dính vào chân trang. Trên trang vibe code thì khối cuối cùng đã tự có đệm của riêng nó, nên 128px đó hiện ra thành một dải nền trơn giữa khối cuối và chân trang. Trang chủ để lộ đúng lỗi này: khối "Thư từ Himeros" nền đen, chân trang cũng nền đen, mà ở giữa lại có một vệt cẩm thạch không thuộc về khối nào cả. Đệm TRÊN thì giữ nguyên - trang vibe code không có hero vẫn cần chừa chỗ cho header cố định. Trang có hero đã được body:has(.hm-hero) .hm-main lo rồi. */ padding-bottom: 0 !important; } .hm-vibe > *, .hm-vibe > * + * { margin-block: 0 !important; } .hm-vibe .wp-block-post-content > *, .hm-vibe .wp-block-post-content > * + * { margin-block: 0 !important; } /* ---------- 3.4 Trang tĩnh ---------- */ .hm-page__head { text-align: center; max-width: var(--hm-width-text); margin: 0 auto var(--hm-section-sm); } .hm-page__head h1 { letter-spacing: var(--hm-track-hero); text-wrap: balance; } .hm-page .wp-block-post-content > * { margin-block: var(--hm-space-5); } .hm-page .wp-block-post-content > h2 { margin-top: var(--hm-space-8); } .hm-page .wp-block-post-content > h3 { margin-top: var(--hm-space-7); } /* ---------- 3.5 Bài viết ---------- */ .hm-article__head { text-align: center; max-width: var(--hm-width-text); margin: 0 auto var(--hm-space-8); } .hm-article__head h1 { margin-block: var(--hm-space-4); letter-spacing: var(--hm-track-hero); text-wrap: balance; } .hm-article__date { color: var(--hm-muted); } .hm-article__cover { margin-block: var(--hm-space-8); } .hm-article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hm-radius); } /* Chiều rộng dòng chữ trong bài đọc phải hẹp hơn trang thường. Khoảng 65-75 ký tự mỗi dòng là ngưỡng dễ đọc nhất. */ .hm-article .wp-block-post-content { max-width: var(--hm-width-text); margin-inline: auto; } .hm-article .wp-block-post-content > * { margin-block: var(--hm-space-5); } .hm-article .wp-block-post-content > h2 { margin-top: var(--hm-space-8); } .hm-article .wp-block-post-content > h3 { margin-top: var(--hm-space-7); } .hm-article blockquote { margin: var(--hm-space-8) 0; padding-left: var(--hm-space-6); border-left: 2px solid var(--hm-gold); font-family: var(--hm-font-display); font-size: var(--hm-text-h3); font-style: italic; line-height: 1.45; color: var(--hm-ink); } .hm-article__foot, .hm-article__nav { max-width: var(--hm-width-text); margin-inline: auto; } .hm-article__foot { margin-top: var(--hm-space-8); padding-top: var(--hm-space-6); border-top: 1px solid var(--hm-line); } .hm-article__tags a { display: inline-block; margin: 0 var(--hm-space-2) var(--hm-space-2) 0; padding: var(--hm-space-2) var(--hm-space-4); background: var(--hm-marble-deep); border-radius: var(--hm-radius); font-size: var(--hm-text-caption); color: var(--hm-body); text-decoration: none; } .hm-article__tags a:hover { background: var(--hm-gold-text); color: var(--hm-marble); } .hm-article__nav { margin-top: var(--hm-space-8); padding-top: var(--hm-space-6); border-top: 1px solid var(--hm-line); gap: var(--hm-space-5); } .hm-article__nav a { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--hm-gold-text); text-decoration: none; } .hm-article__nav a:hover { color: var(--hm-ink); } /* ---------- 3.6 Danh mục và lưu trữ ---------- */ .hm-grid { gap: var(--hm-space-7) var(--hm-space-6) !important; } .hm-grid > li img, .hm-grid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--hm-radius); transition: opacity var(--hm-dur) var(--hm-ease); } .hm-grid > li:hover img { opacity: .82; } .hm-grid .wp-block-post-title { margin-block: var(--hm-space-2) 0; } .hm-grid .wp-block-post-title a { text-decoration: none; color: var(--hm-ink); } .hm-grid .wp-block-post-title a:hover { color: var(--hm-gold-text); } .hm-grid .wp-block-post-terms { margin-top: var(--hm-space-4); } .hm-pagination { margin-top: var(--hm-section-sm); padding-top: var(--hm-space-6); border-top: 1px solid var(--hm-line); font-size: var(--hm-text-small); gap: var(--hm-space-4); } .hm-pagination a, .hm-pagination .current { min-width: var(--hm-tap-min); min-height: var(--hm-tap-min); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--hm-body); } .hm-pagination .current { color: var(--hm-gold-text); font-weight: 600; } .hm-pagination a:hover { color: var(--hm-gold-text); } /* ---------- 3.7 Trang 404 ---------- */ .hm-404 { display: grid; place-items: center; min-height: 62vh; } .hm-404__inner { text-align: center; max-width: 46ch; padding-inline: var(--hm-gutter); } .hm-404__title { font-family: var(--hm-font-display); font-size: var(--hm-text-h1); font-weight: var(--hm-weight-display-bold); line-height: var(--hm-leading-head); letter-spacing: var(--hm-track-hero); color: var(--hm-ink); margin: var(--hm-space-5) 0 var(--hm-space-5); text-wrap: balance; } .hm-404__text { font-size: var(--hm-text-body); line-height: var(--hm-leading-body); color: var(--hm-body); margin: 0 0 var(--hm-space-7); } .hm-404__actions { display: flex; gap: var(--hm-space-4); justify-content: center; flex-wrap: wrap; } @media (max-width: 780px) { .hm-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .hm-grid { grid-template-columns: 1fr !important; } } /* ============================================================ HIMEROS - Khối nội dung (Khối 4, bản song ngữ - Khối 6) Dán vào cuối style.css, SAU templates.css. ------------------------------------------------------------ NGUYÊN TẮC KIẾN TRÚC ------------------------------------------------------------ Toàn bộ CSS của các khối nội dung nằm ở ĐÂY, một chỗ duy nhất. Có hai đường tạo trang: 1. Block pattern - ghép trong Gutenberg. Dùng cho trang đơn giản. 2. Vibe code - viết HTML tay, dán vào Custom HTML block. Dùng cho Trang chủ, Bộ Sưu Tập, Triết lý thiết kế. ------------------------------------------------------------ VÌ SAO PHẢI CÓ BẢN SONG NGỮ ------------------------------------------------------------ Bản đầu tiên của file này mượn CSS bố cục của lõi WordPress. Cụ thể là .wp-block-columns cấp display:flex cho mọi hàng ngang - dải tín nhiệm, lưới bộ sưu tập, chữ kèm ảnh, hai ảnh lớn. File này chỉ ghi mỗi gap. Hệ quả: HTML viết tay dùng đúng class .hm-* vẫn xếp dọc thành một hàng dài, vì .wp-block-columns không có ở đó. Và phản xạ tự nhiên lúc đó là viết CSS bù ngay trong khối HTML - đúng thứ mà nguyên tắc "CSS chỉ tồn tại một chỗ" được dựng ra để ngăn. Từ bản này, mọi class .hm-* TỰ ĐỨNG ĐƯỢC. Cùng một class cho ra cùng một pixel, dù markup đến từ Gutenberg hay viết tay. Cách đọc: chỗ nào thấy hai selector nhóm lại với nhau, ví dụ .hm-hero__inner, .hm-hero .wp-block-cover__inner-container { ... } thì cái thứ nhất dành cho HTML viết tay, cái thứ hai dành cho markup Gutenberg. Giữ nguyên cả hai. ĐỪNG viết lại CSS cho trang vibe code. Chỉ dùng lại class ở đây. Cần một thành phần mới thì thêm vào file này trước, rồi mới dùng. ============================================================ */ /* ============================================================ PHẦN CHUNG - chỉ HTML viết tay cần, Gutenberg tự lo ============================================================ */ /* Khung bề rộng. Trong Gutenberg việc này do theme.json làm; HTML viết tay không có ai làm hộ nên phải tự bọc. Đối chiếu tên gọi - hai bên đặt tên lệch nhau một bậc, nhớ kỹ: .hm-wrap--text 680px = contentSize = không align gì cả .hm-wrap 1080px = wideSize = alignwide .hm-wrap--wide 1440px = (không có) = chỉ dùng ở trang vibe code .hm-wrap--full tràn = alignfull Dùng nhầm .hm-wrap--wide ở chỗ lẽ ra là .hm-wrap sẽ làm khối đó rộng hơn phần còn lại của trang 360px mà không ai nhận ra ngay. */ .hm-wrap, .hm-wrap--text, .hm-wrap--wide, .hm-wrap--full { margin-inline: auto; padding-inline: var(--hm-gutter); } .hm-wrap { max-width: var(--hm-width-content); } .hm-wrap--text { max-width: var(--hm-width-text); } .hm-wrap--wide { max-width: var(--hm-width-wide); } .hm-wrap--full { max-width: none; } /* Hàng nút. Tương đương .wp-block-buttons của Gutenberg. */ .hm-actions { display: flex; gap: var(--hm-space-4); flex-wrap: wrap; } .hm-actions--center { justify-content: center; } /* Nền khối. Tương đương các class has-*-background-color mà Gutenberg sinh ra từ bảng màu trong theme.json. Trang vibe code dùng bộ này để không phải viết style nội tuyến. */ .hm-dark { background: var(--hm-noir); color: var(--hm-on-noir); } /* Tiêu đề trên nền tối phải khai màu riêng, không thừa kế được. theme.json đặt màu cho MỌI thẻ tiêu đề trên toàn site bằng một quy tắc nhắm thẳng vào h1..h6. Quy tắc đó thắng thừa kế, nên đặt color lên thẻ cha không có tác dụng gì với tiêu đề bên trong - chỉ đoạn văn đổi màu, còn tiêu đề vẫn giữ màu chữ tối. Kết quả là tiêu đề chữ tối nằm trên nền đen: nhìn thì thấy mờ mờ nên dễ tưởng là hiệu ứng, thực ra là 1.2:1 và gần như không đọc được. Đây là cùng một lỗi với chuyện header chìm vào hero. */ .hm-dark :is(h1, h2, h3, h4, h5, h6), .hm-dark .wp-block-heading { color: var(--hm-on-noir); } /* Vàng thương hiệu chỉ đạt 3.1:1 trên nền đen. Trên nền tối dùng vàng nhạt của logo - 8.12:1, và đúng màu hơn về mặt thị giác. */ .hm-dark .hm-features__num, .hm-dark .hm-eyebrow { color: var(--hm-gold-light); } .hm-tone-marble { background: var(--hm-marble); } .hm-tone-deep { background: var(--hm-marble-deep); } .hm-tone-light { background: var(--hm-marble-light); } /* ---------- Ngăn cách giữa các khối ---------- Nguyên tắc: đổi nền làm việc chia khối, đường kẻ chỉ làm việc tinh chỉnh. Ngược lại thì trang thành cái thang. Khối ảnh tràn viền tự tách được, không cần gì thêm. Chỉ những khối chữ trên cùng một nền mới cần. Ba mức, dùng theo thứ tự ưu tiên: 1. Đổi tông nền - hai khối liền nhau là hai ý khác nhau 2. Đường kẻ mảnh - hai khối cùng một ý nhưng cần ngắt nhịp 3. Không gì cả - khối sau là phần chứng minh của khối trước Đường kẻ đặt giữa hai khối, nằm trong khoảng trắng sẵn có. Nó không phải cái hộp ngăn đôi trang, mà là dấu lấy hơi giữa hai câu. */ .hm-rule { border: 0; border-top: 1px solid var(--hm-line); width: calc(100% - var(--hm-gutter) * 2); max-width: var(--hm-width-content); margin: 0 auto; } /* Ngắt mạnh hơn: một đoạn ngắn màu vàng, căn giữa. Dùng rất tiết chế - nhiều quá là thành hoa văn. */ .hm-rule--short { width: 72px; border-top-color: var(--hm-gold); } /* Thang cỡ chữ, dùng khi cấp thẻ tiêu đề không khớp cỡ nhìn thấy. Bình thường cứ viết

là đủ - theme.json đã tạo dáng cho mọi thẻ tiêu đề, kể cả thẻ viết tay. */ .hm-t-hero { font-size: var(--hm-text-hero); } .hm-t-h1 { font-size: var(--hm-text-h1); } .hm-t-h2 { font-size: var(--hm-text-h2); } .hm-t-h3 { font-size: var(--hm-text-h3); } .hm-t-h4 { font-size: var(--hm-text-h4); } .hm-t-lead { font-size: var(--hm-text-lead); } .hm-t-small { font-size: var(--hm-text-small); } .hm-center { text-align: center; } /* ---------- Nhãn nhỏ dùng chung ---------- */ .hm-eyebrow { font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); font-weight: 600; letter-spacing: var(--hm-track-eyebrow); text-transform: uppercase; color: var(--hm-gold-text); margin-bottom: var(--hm-space-4); } .hm-eyebrow--on-dark { color: var(--hm-gold-light); } /* ============================================================ BỐ CỤC HÀNG NGANG - phần quan trọng nhất của bản song ngữ Gutenberg cấp display:flex qua .wp-block-columns và flex:1 1 0 qua .wp-block-column. Năm hàng dưới đây tự khai báo lại đúng như vậy, nên HTML viết tay không cần .wp-block-columns nữa. Khai báo trùng với lõi WordPress là cố ý, không phải thừa: nó khiến hai đường không thể trôi khỏi nhau. ============================================================ */ .hm-trust__row, .hm-cards, .hm-split, .hm-features__row, .hm-duo { display: flex; flex-wrap: wrap; } /* Nhắm CON TRỰC TIẾP, không nhắm tên class. Lý do: trong pattern, class .hm-* không phải lúc nào cũng nằm trên cột. Ở duo.php và split.php nó nằm trên thẻ
bên trong, còn cột thì trống trơn. Ở features.php cột cũng không có class nào. Liệt kê tên class ở đây là chép lại một danh sách sẽ sai ngay lần đầu ai đó sửa pattern. Con trực tiếp thì luôn đúng, cả hai đường. */ .hm-trust__row > *, .hm-cards > *, .hm-split > *, .hm-features__row > *, .hm-duo > * { flex: 1 1 0; min-width: 0; } /* Dưới 782px mọi cột xếp dọc - giống hệt cách Gutenberg xử lý, để hai đường cho ra cùng kết quả trên điện thoại. Dải tín nhiệm là ngoại lệ, xem mục 4.2. */ @media (max-width: 781px) { .hm-cards > *, .hm-split > *, .hm-features__row > *, .hm-duo > * { flex-basis: 100%; } } /* ============================================================ 4.1 HERO Class .hm-hero cũng là công tắc bật chế độ header trong suốt - xem body:has(.hm-hero) trong khối header của style.css. ============================================================ */ .hm-hero { position: relative; overflow: hidden; min-height: 100svh; /* svh: không nhảy khi thanh địa chỉ ẩn/hiện trên mobile */ display: flex; align-items: center; padding-block: var(--hm-section-lg); } .hm-hero__inner, .hm-hero .wp-block-cover__inner-container { max-width: var(--hm-width-content); margin-inline: auto; text-align: center; } /* Gutenberg đã cấp ba dòng này cho .wp-block-cover__inner-container. HTML viết tay thì chưa, nên khai báo riêng. */ .hm-hero__inner { position: relative; z-index: 1; width: 100%; padding-inline: var(--hm-gutter); } .hm-hero__title { line-height: var(--hm-leading-tight); letter-spacing: var(--hm-track-hero); color: var(--hm-on-noir); max-width: 16ch; margin-inline: auto; text-wrap: balance; } .hm-hero__lead { color: var(--hm-on-noir-muted); font-weight: 300; max-width: 48ch; margin: var(--hm-space-5) auto 0; } .hm-hero__actions { display: flex; gap: var(--hm-space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--hm-space-7); } /* Ảnh hero là ảnh lớn nhất trang - đây là chỉ số LCP. Không lazy-load, luôn khai báo width/height để không giật layout, và thêm fetchpriority="high" khi viết tay. */ .hm-hero__bg, .hm-hero .wp-block-cover__image-background { object-fit: cover; object-position: center; } .hm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Lớp phủ tối. Gutenberg gọi là .wp-block-cover__background và tự sinh ra từ thiết lập độ mờ của khối Cover. */ .hm-hero__veil { position: absolute; inset: 0; z-index: 0; background: var(--hm-noir); opacity: .58; } /* ============================================================ 4.2 DẢI TÍN NHIỆM (mô hình PlayAh) Icon bên trái, chữ bên phải. Bộ icon Hy Lạp, không dùng icon thương mại điện tử chung chung: rương gỗ có khoá - đóng gói kín đáo, hộp đóng kín không nhãn vòng nguyệt quế - đạt chuẩn ISO, biểu tượng vinh danh Hy Lạp cổ cuộn sắc lệnh - công bố tiêu chuẩn, văn bản chính thức cánh + mũi tên - giao hàng, vừa là tốc độ vừa là mũi tên Eros ============================================================ */ .hm-trust { padding-block: var(--hm-space-7); } .hm-trust__row { gap: var(--hm-space-6) var(--hm-space-5) !important; margin-bottom: 0 !important; max-width: var(--hm-width-content); /* bằng alignwide - xem bảng đối chiếu ở đầu file */ margin-inline: auto; padding-inline: var(--hm-gutter); } .hm-trust__col { display: flex; align-items: center; gap: var(--hm-space-4); } /* Icon dùng currentColor nên tự đổi màu theo chữ bên cạnh. Bộ icon này nhiều chi tiết nên phải để 42px - dưới 36px là nét dính vào nhau, nhìn thành một vệt. */ .hm-trust__icon { flex: 0 0 auto; width: 42px; height: 42px; color: var(--hm-gold); } .hm-trust__item { margin: 0; font-size: var(--hm-text-caption); font-weight: 600; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; color: var(--hm-gold-text); } /* Hai cột trên máy tính bảng, một cột trên điện thoại - nhưng vẫn giữ nguyên hàng ngang icon-chữ, không xếp icon lên trên. Hai selector và một !important cho mỗi mốc, đều là bắt buộc. Lõi WordPress ép flex-basis:100%!important cho mọi .wp-block-column dưới 782px. Quy tắc đó có độ đặc hiệu (0,3,0) vì nó viết là .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column. Một selector .hm-trust__col đơn lẻ chỉ có (0,1,0) nên dù thêm !important vẫn thua. Phải có một selector đủ nặng để đấu ngang cơ, rồi thắng nhờ style.css nạp sau lõi. Không có đoạn này thì bản Gutenberg mất bố cục hai cột trong khoảng 561-781px, còn bản viết tay vẫn hai cột - hai đường lệch nhau đúng ở dải bề rộng máy tính bảng, chỗ ít ai nghĩ tới kiểm tra. trust.php cũng đã thêm is-not-stacked-on-mobile để lõi không chen vào ngay từ đầu. Giữ cả hai lớp phòng thủ: pattern có thể bị sửa, còn CSS thì luôn ở đây. */ @media (max-width: 900px) { .hm-trust__row > *, .wp-block-columns.hm-trust__row > .wp-block-column { flex: 1 1 44% !important; } } @media (max-width: 560px) { .hm-trust__row > *, .wp-block-columns.hm-trust__row > .wp-block-column { flex: 1 1 100% !important; } } /* ============================================================ 4.3 TUYÊN NGÔN Đoạn văn đặt ở cỡ tiêu đề - mô hình Vacheron Constantin. ============================================================ */ .hm-statement { padding-block: var(--hm-section); text-align: center; } .hm-statement__text { font-family: var(--hm-font-display); font-size: var(--hm-text-h2); font-weight: var(--hm-weight-display); line-height: var(--hm-leading-head); color: var(--hm-ink); max-width: 22ch; margin-inline: auto; text-wrap: balance; } /* Trên nền tối */ .hm-dark .hm-statement__text, .has-noir-background-color .hm-statement__text { color: var(--hm-on-noir); } /* ============================================================ 4.4 CHỮ KÈM ẢNH ============================================================ */ .hm-split { padding-block: var(--hm-section); gap: var(--hm-space-8) !important; align-items: center; } .hm-split__img { margin: 0; } .hm-split__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--hm-radius); display: block; } .hm-split__body > * + * { margin-top: var(--hm-space-5); } .hm-split__body :is(h1, h2, h3, h4, .wp-block-heading) { margin-bottom: var(--hm-space-4); } .hm-split__body p { max-width: 46ch; } .hm-split__body :is(.hm-actions, .wp-block-buttons) { margin-top: var(--hm-space-7); } /* Biến thể ảnh bên phải: thêm class hm-split--reverse */ @media (min-width: 782px) { .hm-split--reverse { flex-direction: row-reverse; } } /* ============================================================ 4.5 LƯỚI BỘ SƯU TẬP ============================================================ */ .hm-grid-section { padding-block: var(--hm-section); } /* Hai mức lồng nhau, cả hai đều phải liệt kê. Khối này có hai cách dựng. Khi nền cùng màu với trang, chính thẻ section mang luôn class .hm-wrap và tiêu đề là con trực tiếp. Khi khối cần nền riêng, section phải tràn hết chiều ngang để dải màu chạy từ mép này sang mép kia, nên phải có thêm một lớp .hm-wrap bên trong và tiêu đề tụt xuống một bậc. Không thể dùng selector hậu duệ chung, vì như vậy nó sẽ với tới cả tiêu đề nằm trong từng thẻ bộ sưu tập. */ .hm-grid-section > :is(h1, h2, h3, .wp-block-heading), .hm-grid-section > .hm-wrap > :is(h1, h2, h3, .wp-block-heading) { text-wrap: balance; margin-bottom: var(--hm-space-8); } /* Câu dẫn một dòng dưới tiêu đề khối. Khi có nó, tiêu đề nhường phần khoảng trống phía dưới lại cho nó - nếu không, câu dẫn bị đẩy xuống tận đáy và trông như lạc khỏi tiêu đề. */ .hm-grid-section > :is(h1, h2, h3, .wp-block-heading):has(+ .hm-section__lead), .hm-grid-section > .hm-wrap > :is(h1, h2, h3, .wp-block-heading):has(+ .hm-section__lead) { margin-bottom: var(--hm-space-4); } .hm-section__lead { max-width: 52ch; margin-inline: auto; margin-bottom: var(--hm-space-8); color: var(--hm-muted); } .hm-cards { gap: var(--hm-space-6) !important; } .hm-card__img { margin: 0 0 var(--hm-space-4) !important; } .hm-card__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--hm-radius); display: block; transition: opacity var(--hm-dur) var(--hm-ease); } .hm-card:hover .hm-card__img img { opacity: .84; } .hm-card .hm-eyebrow { margin-bottom: var(--hm-space-2); } .hm-card :is(h1, h2, h3, h4, .wp-block-heading) { margin: 0; } /* Khi cả thẻ là một liên kết - chỉ dùng ở bản viết tay */ a.hm-card { display: block; text-decoration: none; color: inherit; } /* ============================================================ 4.6 DẢI KÊU GỌI ============================================================ */ .hm-cta { padding-block: var(--hm-section); text-align: center; } .hm-cta__title { color: var(--hm-on-noir); max-width: 20ch; margin-inline: auto; text-wrap: balance; } .hm-cta__text { color: var(--hm-on-noir-muted); font-weight: 300; max-width: 44ch; margin: var(--hm-space-5) auto var(--hm-space-7); } /* ---------- 4.6b Ô đăng ký nhận thư trong dải kêu gọi ---------- Kiểu dáng ô nhập, nhãn và nút bấm đã nằm ở đầu style.css và dùng chung cho toàn site, kể cả biểu mẫu do Fluent Forms sinh ra. Ở đây chỉ có phần bố cục riêng của dải kêu gọi. Bọc cả khối trong .hm-on-dark để ô nhập đổi sang bảng màu nền tối. */ .hm-cta__form { max-width: 480px; margin-inline: auto; text-align: left; } .hm-cta__row { display: flex; gap: var(--hm-space-3); flex-wrap: wrap; } .hm-cta__row input[type="email"] { flex: 1 1 220px; } .hm-cta__row .hm-btn, .hm-cta__row input[type="submit"] { flex: 0 0 auto; } /* Dòng đồng ý. Ô tích phải đủ lớn để bấm được bằng ngón tay và không bao giờ được tích sẵn - xem Luật 91/2025 về dữ liệu cá nhân. */ .hm-cta__consent { display: flex; align-items: flex-start; gap: var(--hm-space-3); margin-top: var(--hm-space-5); font-size: var(--hm-text-caption); line-height: 1.6; color: var(--hm-on-noir-muted); } .hm-cta__consent input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; } .hm-cta__consent a { color: var(--hm-gold-light); } .hm-cta__note { margin-top: var(--hm-space-4); font-size: var(--hm-text-caption); color: var(--hm-on-noir-muted); text-align: center; } /* ============================================================ 4.7 CÂU HỎI THƯỜNG GẶP Dùng thẻ
gốc: chạy được cả khi tắt JavaScript, và trình đọc màn hình hiểu sẵn trạng thái đóng/mở. ============================================================ */ .hm-faq { padding-block: var(--hm-section); } .hm-faq > :is(h1, h2, h3, .wp-block-heading), .hm-faq > .hm-wrap > :is(h1, h2, h3, .wp-block-heading) { margin-bottom: var(--hm-space-7); } .hm-faq__item { border-top: 1px solid var(--hm-line); padding-block: var(--hm-space-5); } /* Tiêu đề nhóm đứng ngay sau một câu hỏi thì cần khoảng thở phía trên, nếu không nó dính vào nhóm vừa hết và người đọc tưởng nó là câu trả lời của câu cuối. Dùng cho trang Hỗ trợ - mười tám câu chia năm nhóm. */ .hm-faq__item + :is(h3, h4) { margin-top: var(--hm-space-8); } .hm-faq__item:last-of-type { border-bottom: 1px solid var(--hm-line); } .hm-faq__item summary { cursor: pointer; list-style: none; position: relative; padding-right: var(--hm-space-8); min-height: var(--hm-tap-min); display: flex; align-items: center; font-family: var(--hm-font-display); font-size: var(--hm-text-h4); font-weight: var(--hm-weight-display); line-height: var(--hm-leading-head); color: var(--hm-ink); transition: color var(--hm-dur-fast) var(--hm-ease); } .hm-faq__item summary::-webkit-details-marker { display: none; } .hm-faq__item summary:hover { color: var(--hm-gold-text); } /* Dấu cộng tự vẽ, xoay thành dấu trừ khi mở */ .hm-faq__item summary::after { content: ''; position: absolute; right: var(--hm-space-3); top: 50%; width: 14px; height: 1px; background: var(--hm-gold); box-shadow: 0 0 0 0 transparent; } .hm-faq__item summary::before { content: ''; position: absolute; right: calc(var(--hm-space-3) + 6.5px); top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--hm-gold); transition: opacity var(--hm-dur-fast) var(--hm-ease), transform var(--hm-dur-fast) var(--hm-ease); } .hm-faq__item[open] summary::before { opacity: 0; transform: rotate(90deg); } .hm-faq__item > *:not(summary) { margin-top: var(--hm-space-4); max-width: 62ch; color: var(--hm-body); } /* ============================================================ 4.8 DANH SÁCH ĐẶC ĐIỂM ============================================================ */ .hm-features { padding-block: var(--hm-section); } .hm-features__row { gap: var(--hm-space-7) !important; } .hm-features__num { font-family: var(--hm-font-display); font-size: var(--hm-text-h3); font-weight: var(--hm-weight-display); color: var(--hm-gold); margin-bottom: var(--hm-space-3); line-height: 1; } .hm-features :is(h1, h2, h3, h4, .wp-block-heading) { margin-bottom: var(--hm-space-3); } .hm-features p:not(.hm-features__num) { font-size: var(--hm-text-small); } /* ============================================================ 4.9 HAI ẢNH LỚN ============================================================ */ .hm-duo { gap: 0 !important; margin-block: 0 !important; } .hm-duo__img { margin: 0 !important; position: relative; display: block; overflow: hidden; } .hm-duo__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* Chữ đè lên ảnh - chỉ dùng ở bản viết tay. Nền chuyển từ trong suốt sang tối ở đáy để chữ sáng luôn đọc được, bất kể ảnh sáng hay tối. Đây là chỗ dễ trượt chuẩn tương phản nhất trên trang. */ .hm-duo__cap { position: absolute; inset: auto 0 0 0; padding: var(--hm-space-8) var(--hm-space-6) var(--hm-space-6); background: linear-gradient(to top, rgba(20, 18, 16, .82), rgba(20, 18, 16, 0)); color: var(--hm-on-noir); } /* display:block là bắt buộc: nhãn nhỏ ở đây nằm trong thẻ span để cả khối chữ vẫn hợp lệ bên trong thẻ liên kết, mà margin dưới thì không có tác dụng với phần tử nội tuyến. */ .hm-duo__cap .hm-eyebrow { display: block; margin-bottom: var(--hm-space-2); } .hm-duo__cap h3 { margin: 0; color: var(--hm-on-noir); } a.hm-duo__img { text-decoration: none; } a.hm-duo__img img { transition: transform var(--hm-dur-slow) var(--hm-ease); } a.hm-duo__img:hover img { transform: scale(1.03); } @media (max-width: 781px) { .hm-duo__img img { aspect-ratio: 4 / 3; } } /* ============================================================ THÀNH PHẦN CHO TRANG TRONG (Khối 8) Bảy thành phần dùng cho Thế Giới Himeros, Triết lý thiết kế, Đền Thiêng và bốn trang bộ sưu tập. Tiêu chuẩn để được vào file này: phải dùng lại được ở nhiều chỗ. Thứ nào chỉ dùng đúng một lần ở một trang thì không phải thành phần - và nếu buộc phải có thì đó là dấu hiệu bố cục đang sai chứ không phải thiếu class. ============================================================ */ /* ---------- 4.10 Hero trang trong ---------- Vẫn mang class .hm-hero nên header tự chuyển sang chế độ trong suốt như cũ. Đó là lý do làm biến thể chứ không đặt tên mới: công tắc body:has(.hm-hero) phải tiếp tục ăn. 62svh thay vì 100svh. Trang trong không nên bắt người đọc cuộn hết một màn hình mới tới chữ - họ đã bấm vào đây có chủ đích, không cần thuyết phục lại từ đầu. */ .hm-hero--short { min-height: 62svh; } @media (max-width: 781px) { .hm-hero--short { min-height: 52svh; } } /* ---------- 4.11 Cột đọc dài ---------- Hai trang Thế Giới Himeros và Triết lý thiết kế có nhiều chữ hơn hẳn trang chủ, nên cần một khối chuyên cho việc đọc. Bề rộng 680px cho ra khoảng 65-75 ký tự mỗi dòng. Dài hơn thì mắt lạc dòng khi xuống hàng, ngắn hơn thì phải nhảy dòng liên tục - cả hai đều làm người ta bỏ dở giữa chừng. */ /* Khối TRÀN HẾT CHIỀU NGANG, cột chữ nằm giữa nhờ đệm hai bên. Bản đầu đặt max-width thẳng lên thẻ section. Hệ quả: khi khối có nền riêng, dải màu chỉ rộng 680px và nổi lên như một cái hộp lửng lơ giữa trang - khối trong khối, đúng như đã thấy. max() lo cả hai đầu: màn hình rộng thì đệm bằng nửa phần thừa nên cột chữ đứng giữa, màn hình hẹp thì đệm tối thiểu bằng gutter nên chữ không chạm mép. Không cần thêm một lớp div nào. */ .hm-prose { padding-block: var(--hm-section); padding-inline: max(var(--hm-gutter), calc((100% - var(--hm-width-text)) / 2)); } .hm-prose > * + * { margin-top: var(--hm-space-5); } .hm-prose p { max-width: none; } /* bề rộng do khối lo, không do từng đoạn lo */ .hm-prose :is(h2, h3, .wp-block-heading) { margin-top: var(--hm-space-8); } .hm-prose > :first-child { margin-top: 0; } .hm-prose__lead { font-size: var(--hm-text-lead); color: var(--hm-ink); } /* Hai khối chữ liền nhau thì khối sau không cần đệm trên nữa */ .hm-prose + .hm-prose { padding-top: 0; } /* ---------- 4.12 Trích dẫn lớn ---------- Khác .hm-statement ở ba điểm: luôn nền tối, không có nhãn nhỏ phía trên, và rộng hơn một chút (26ch so với 22ch) vì câu trích thường dài hơn câu tuyên ngôn. */ .hm-pull { background: var(--hm-noir); padding-block: var(--hm-section); text-align: center; } .hm-pull__text { font-family: var(--hm-font-display); font-size: var(--hm-text-h2); font-weight: var(--hm-weight-display); line-height: var(--hm-leading-head); color: var(--hm-on-noir); max-width: 26ch; margin-inline: auto; padding-inline: var(--hm-gutter); text-wrap: balance; } /* ---------- 4.13 Nhiều dòng cùng nhịp ---------- Bốn dòng định vị. Sức mạnh của chúng nằm ở nhịp lặp, nên phải là bốn dòng riêng biệt chứ không gộp thành một đoạn - gộp lại là mất sạch. Dùng thẻ ul để trình đọc màn hình biết đây là bốn mục ngang hàng nhau, rồi bỏ dấu chấm đầu dòng đi. */ .hm-litany { list-style: none; margin: 0; padding: 0; text-align: center; } .hm-litany li { font-family: var(--hm-font-display); font-size: var(--hm-text-h3); font-weight: var(--hm-weight-display); line-height: var(--hm-leading-head); color: var(--hm-ink); margin: 0; padding-block: var(--hm-space-3); text-wrap: balance; } /* Dòng cuối là dòng chốt - cho nó màu khác để mắt dừng lại */ .hm-litany li:last-child { color: var(--hm-gold-text); } .hm-dark .hm-litany li { color: var(--hm-on-noir); } .hm-dark .hm-litany li:last-child { color: var(--hm-gold-light); } /* ---------- 4.14 Dải mẫu màu ---------- */ .hm-swatches { display: flex; flex-wrap: wrap; gap: var(--hm-space-6); } .hm-swatch { flex: 1 1 220px; min-width: 0; } .hm-swatch__chip { height: 132px; border-radius: var(--hm-radius); border: 1px solid var(--hm-line); margin-bottom: var(--hm-space-4); } /* Màu của từng ô phải là class, không phải style nội tuyến. Trang vibe code không được chứa giá trị màu - nếu bảng màu đổi, ba ô này phải đổi theo mà không ai phải nhớ là có chúng ở đó. */ .hm-swatch__chip--marble { background: var(--hm-marble); } .hm-swatch__chip--noir { background: var(--hm-noir); } .hm-swatch__chip--gold { background: var(--hm-gold); } .hm-swatch__name { font-family: var(--hm-font-display); font-size: var(--hm-text-h4); font-weight: var(--hm-weight-display-bold); color: var(--hm-ink); margin: 0 0 var(--hm-space-2); } .hm-swatch__hex { font-family: var(--hm-font-mono); font-size: var(--hm-text-caption); letter-spacing: .08em; color: var(--hm-gold-text); margin: 0 0 var(--hm-space-3); } .hm-swatch p:last-child { font-size: var(--hm-text-small); margin: 0; } /* ---------- 4.15 Nhãn trạng thái trên thẻ ---------- Dùng ở trang Đền Thiêng: một đền đang mở, ba đền sắp mở. Viền dùng line-strong chứ không dùng line: đây là nhãn mang thông tin, không phải đường trang trí, nên phải đạt 3:1 theo WCAG 1.4.11. */ .hm-card__status { display: inline-block; margin-top: var(--hm-space-3); padding: 3px 10px; border: 1px solid var(--hm-line-strong); border-radius: var(--hm-radius); font-family: var(--hm-font-body); font-size: var(--hm-text-eyebrow); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--hm-muted); } .hm-card__status--open { border-color: var(--hm-gold-text); color: var(--hm-gold-text); } /* ---------- 4.16 Bảng quy cách ---------- Bốn trang bộ sưu tập, và về sau là trang sản phẩm. Đây là khối duy nhất trong các trang đó chạm tới quy định về trang thiết bị y tế: tên, chủng loại, hãng sản xuất, nước sản xuất, số công bố, đơn vị chịu trách nhiệm. Nội dung lấy nguyên từ hồ sơ công bố, không diễn đạt lại. */ .hm-spec { width: 100%; border-collapse: collapse; max-width: var(--hm-width-text); margin-inline: auto; } .hm-spec :is(th, td) { text-align: left; padding-block: var(--hm-space-4); border-bottom: 1px solid var(--hm-line); font-size: var(--hm-text-small); line-height: 1.6; vertical-align: top; } .hm-spec th { width: 38%; padding-right: var(--hm-space-5); font-family: var(--hm-font-body); font-weight: 600; color: var(--hm-muted); } .hm-spec td { color: var(--hm-ink); } .hm-spec tr:last-child :is(th, td) { border-bottom: 0; } @media (max-width: 560px) { .hm-spec :is(th, td) { display: block; width: auto; padding-right: 0; } .hm-spec th { border-bottom: 0; padding-bottom: var(--hm-space-1); } } /* ============================================================ HIỆN DẦN KHI CUỘN TỚI Dùng chung cho mọi khối. Thêm class hm-reveal. Nếu người dùng đã tắt hiệu ứng trong hệ điều hành thì bỏ qua. ============================================================ */ @media (prefers-reduced-motion: no-preference) { .hm-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--hm-dur) var(--hm-ease), transform var(--hm-dur) var(--hm-ease); } .hm-reveal.is-in { opacity: 1; transform: none; } /* Trễ dần cho các phần tử cùng một hàng */ .hm-reveal--d1 { transition-delay: .08s; } .hm-reveal--d2 { transition-delay: .16s; } .hm-reveal--d3 { transition-delay: .24s; } } /* ============================================================ KIỂU NÚT Bản Gutenberg dùng .wp-block-button.is-style-hm-*, đăng ký trong functions.php để hiện ra trong trình soạn thảo. Bản viết tay dùng .hm-btn .hm-btn--*, định nghĩa ở phần đầu style.css. Hai bộ cho ra cùng kết quả. ============================================================ */ .wp-block-button.is-style-hm-on-dark .wp-block-button__link { background: var(--hm-marble); color: var(--hm-noir); } .wp-block-button.is-style-hm-on-dark .wp-block-button__link:hover { background: var(--hm-gold-light); color: var(--hm-noir); } .wp-block-button.is-style-hm-ghost .wp-block-button__link { background: transparent; color: var(--hm-ink); border: 1px solid var(--hm-line-strong); } .wp-block-button.is-style-hm-ghost .wp-block-button__link:hover { border-color: var(--hm-gold-text); color: var(--hm-gold-text); background: transparent; } .wp-block-button.is-style-hm-gold .wp-block-button__link { background: var(--hm-gold-text); color: var(--hm-marble); } .wp-block-button.is-style-hm-gold .wp-block-button__link:hover { background: var(--hm-noir); }