/* retail-2026-c.css — 21/09/2026. * * HAI KHỐI MỚI CỦA TRANG RETAIL SPACE: * 1. `.tgs-rt-gt` — khối chữ giới thiệu, THAY cho khối "Colour stories". * 2. `.tgs-rt-trang` — thanh phân trang của lưới sản phẩm. * * SỬA 14:35 cùng ngày: nút "Explore the collection" đổi từ kiểu gạch chân sang * ĐÓNG KHUNG, theo yêu cầu của Minh. Xem mục 1c bên dưới. * * GHI ĐÈ CÙNG TÊN FILE, có chủ ý: file này mới tạo lúc 14:18 cùng ngày nên * gần như chưa có ai tải về, và `purge_wordpress_cache(domain)` đã được chứng * minh là dọn cả file tĩnh (nhật ký 21/09 sáng). Quy ước "đổi tên mỗi lần sửa" * là để phòng edge cache 7 ngày với file đã phát tán — không áp cho file vừa * ra đời trong cùng phiên. Lần sửa sau, nếu đã qua ngày, thì đổi thành `-d`. * * --------------------------------------------------------------------------- * VÌ SAO CHÉP LUẬT CHỨ KHÔNG NẠP LẠI CSS TRANG CHỦ * --------------------------------------------------------------------------- * Minh yêu cầu khối chữ "căn giữa cho giống text ở trang chủ". Dải làm mẫu là * `#sec-story` của trang chủ. Nhưng luật của nó nằm trong `tg2026-r2.css` và * TOÀN BỘ đều bị giới hạn trong `.tg26` — một lớp mà trang Retail Space không * có. Đã kiểm bằng phần tử dò trên chính trang Retail đang chạy: chèn một khối * mang đủ class `.tg-story / .tg-story__dau / .tg-chang__doan / .tg-mat` rồi * đọc getComputedStyle — mọi giá trị đều rơi về mặc định (16px, align start, * max-width none). Tức nạp thêm file đó cũng vô ích trừ khi thêm cả lớp * `.tg26` vào trang này, mà làm vậy là kéo theo hàng trăm luật của trang chủ * đè lên một trang có bố cục khác hẳn. * * Nên chép ĐÚNG những con số đã đo được trên trang chủ ngày 21/09: * .tg-chang__doan → 19px / line-height 1.75 / rộng 900px / căn giữa * / màu rgba(11,11,11,.82) / text-wrap: balance * .tg-story__dau → text-align: center; margin: 0 auto * .tg-story__di → text-align: center; margin-top: 56px * .tg-h2 → clamp(30px, 3.6vw, 52px) / line-height 1.06 / 300 * * KHÔNG chép luật làm mờ chữ của trang chủ * (`.tg26-co-js .tg-chang:not(.dang-xem) .tg-chang__doan { color: var(--mo-chang) }`): * đó là hiệu ứng hiện dần theo cuộn, gắn với script riêng của trang chủ. Khối * này không có cơ chế đó, chép sang là chữ xám vĩnh viễn. * * Nạp SAU cùng (deps 'tgs-retail-2026-va' trong inc/pro-space.php). */ /* =========================================================================== 1 · KHỐI CHỮ GIỚI THIỆU ======================================================================== */ .tgs-rt-gt { padding: 100px 0; } .tgs-rt-gt__trong { text-align: center; } .tgs-rt-gt__tieu { margin: 0 auto; max-width: 900px; font-weight: 300; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; text-wrap: balance; } .tgs-rt-gt__doan { margin: 0 auto 22px; max-width: 900px; font-size: 19px; line-height: 1.75; color: rgba(11, 11, 11, 0.82); text-wrap: pretty; } /* Khoảng thở giữa tiêu đề và đoạn đầu tiên — bằng nhịp của trang chủ (26px). */ .tgs-rt-gt__tieu + .tgs-rt-gt__doan { margin-top: 34px; } .tgs-rt-gt__phu { margin: 48px auto 18px; max-width: 900px; font-weight: 300; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; } /* * Câu kết. Đậm hơn đoạn thường một bậc về MÀU chứ không về cân nặng: cả trang * dùng font-weight 300, một chỗ 600 sẽ lạc khỏi hệ chữ. */ .tgs-rt-gt__ket { margin: 40px auto 0; max-width: 900px; font-size: 19px; line-height: 1.75; color: var(--ink, #0B0B0B); } .tgs-rt-gt__di { margin-top: 56px; text-align: center; } /* --- 1c · NÚT ĐÓNG KHUNG ------------------------------------------------- * * Minh chốt 14:35 ngày 21/09: "phần explore the collection đóng khung". * Bản trước là kiểu gạch chân (`border-bottom`) chép từ `.tg-lien-ket` của * trang chủ. Nay là khung kín. * * KÍCH THƯỚC KHÁC `.tgs-rt-nut--vien` CÓ SẴN TRÊN TRANG, và đây là chủ ý chứ * không phải quên đối chiếu. Số đo thật của hai nút: * * .tgs-rt-nut--vien đệm 16px 28px · chữ 10px · giãn 2.4px * .tgs-rt-gt__lien đệm 18px 44px · chữ 15px · giãn 3px * * Lý do để nó to hơn: `.tgs-rt-nut--vien` là nút phụ nằm cạnh chữ trong khối * Sizing và trang chi tiết; còn nút này là CTA duy nhất kết lại một dải dài * 100px trên/dưới, đứng một mình giữa trang. Cỡ 15px/giãn 3px cũng đúng bằng * cỡ Minh yêu cầu phóng to cho `.tg-lien-ket` ngày 20/09 — tức cùng một hạng * "nút kết dải", nhất quán với trang chủ. * * NẾU MINH MUỐN HAI NÚT GIỐNG HỆT NHAU thì đổi ba giá trị trên cho khớp * `.tgs-rt-nut--vien` là xong, không đụng gì khác. * * Vùng bấm 18px trên dưới + chữ 15px → cao 64px (đã đo), vượt ngưỡng 44px tối * thiểu cho ngón tay trên điện thoại. */ .tgs-rt-gt__lien { display: inline-block; padding: 18px 44px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; color: var(--ink, #0B0B0B); background: transparent; border: 1px solid rgba(11, 11, 11, 0.45); transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; } .tgs-rt-gt__lien:hover, .tgs-rt-gt__lien:focus-visible { color: #FFFFFF; background: var(--ink, #0B0B0B); border-color: var(--ink, #0B0B0B); } @media (max-width: 860px) { .tgs-rt-gt { padding: 64px 0; } .tgs-rt-gt__doan, .tgs-rt-gt__ket { font-size: 17px; line-height: 1.7; } .tgs-rt-gt__phu { margin-top: 36px; } .tgs-rt-gt__di { margin-top: 40px; } /* Khung hẹp thì bớt đệm ngang, giữ nguyên đệm dọc cho đủ vùng bấm. */ .tgs-rt-gt__lien { padding: 16px 30px; font-size: 14px; letter-spacing: 2px; } } /* =========================================================================== 2 · THANH PHÂN TRANG =========================================================================== * * JS dựng các nút bên trong; HTML do PHP in ra là một