/* retail-2026-d.css — 21/09/2026 15:35. * * Dựng theo HAI ẢNH THIẾT KẾ Minh gửi (trang danh mục + trang chi tiết). * Nạp SAU retail-2026-c.css, nên mọi luật ở đây đè được bản trước mà không * cần một dấu !important nào. * * FILE MỚI chứ không sửa `-c`: bản `-c` đã phát tán từ 14:18 và edge cache giữ * file tĩnh 7 ngày. Lần sửa sau đặt `-e`. * * BẢY KHỐI: * 1. Nút đặc (thay nút viền của khối chữ trang danh mục) * 2. Dải giá "PRICE - $" trên trang chi tiết * 3. Nhóm chọn cỡ một hàng "SIZE, EU" + nút Buy now * 4. Dải "Why We Love …" — 5 cột icon * 5. Dải "SIGNATURE COLLECTION" nền đậm + hai nút mũi tên * 6. Dải "THE TOGASHYAMO WORLD" trên trang danh mục * 7. Thân accordion — tiểu mục và danh sách gạch đầu dòng */ /* =========================================================================== 1 · NÚT ĐẶC — "Explore the collection" =========================================================================== * Ảnh thiết kế vẽ nút này là KHỐI ĐEN ĐẶC chữ trắng, không phải khung rỗng. * Đè lên luật viền ở retail-2026-c.css. */ .tgs-rt-gt__lien { color: #FFFFFF; background: var(--ink, #0B0B0B); border-color: var(--ink, #0B0B0B); font-size: 12px; letter-spacing: 2.4px; padding: 20px 38px; } .tgs-rt-gt__lien:hover, .tgs-rt-gt__lien:focus-visible { color: var(--ink, #0B0B0B); background: transparent; border-color: var(--ink, #0B0B0B); } @media (max-width: 860px) { .tgs-rt-gt__lien { padding: 18px 30px; font-size: 11px; letter-spacing: 2px; } } /* =========================================================================== 2 · DẢI GIÁ TRANG CHI TIẾT =========================================================================== * Ảnh thiết kế: một dòng "PRICE - $" nằm giữa hai đường kẻ ngang mảnh, chữ * nhỏ giãn rộng như nhãn eyebrow. Thay cho dải cũ "Price on enquiry | … finish". */ .tgs-rt-sp__gia { margin: 30px 0 0; padding: 18px 0; border-top: 1px solid rgba(11, 11, 11, 0.16); border-bottom: 1px solid rgba(11, 11, 11, 0.16); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ink, #0B0B0B); } /* =========================================================================== 3 · CHỌN CỠ — một nhóm, một hàng =========================================================================== * Ảnh thiết kế gộp trẻ em và người lớn thành MỘT nhóm nhãn "SIZE, EU", năm ô * vuông viền mảnh nằm ngang. Không còn hai nhãn "Children, EU"/"Adults, EU". */ .tgs-rt-sp__nhan-co { margin: 26px 0 12px; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(11, 11, 11, 0.55); } .tgs-rt-sp__co { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; } .tgs-rt-sp__so { appearance: none; min-width: 68px; padding: 13px 10px; font: inherit; font-size: 13px; line-height: 1; text-align: center; color: var(--ink, #0B0B0B); background: transparent; border: 1px solid rgba(11, 11, 11, 0.28); cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .tgs-rt-sp__so:hover { border-color: rgba(11, 11, 11, 0.7); } .tgs-rt-sp__so[aria-pressed="true"] { color: #FFFFFF; background: var(--ink, #0B0B0B); border-color: var(--ink, #0B0B0B); } /* Nút mua — khối đen đặc, đúng ảnh thiết kế. Dùng lại cho cả nút "Discover the world of TOGASHYAMO" ở dải World để hai nút cùng một hạng. */ .tgs-rt-nut--mua { display: inline-block; margin-top: 30px; padding: 20px 46px; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; text-decoration: none; color: #FFFFFF; background: var(--ink, #0B0B0B); border: 1px solid var(--ink, #0B0B0B); transition: color 0.35s ease, background-color 0.35s ease; } .tgs-rt-nut--mua:hover, .tgs-rt-nut--mua:focus-visible { color: var(--ink, #0B0B0B); background: transparent; } /* =========================================================================== 4 · DẢI "WHY WE LOVE …" — 5 CỘT ICON =========================================================================== * `auto-fit` + `minmax(180px, 1fr)`: máy tính ra đúng 5 cột như ảnh thiết kế, * khung hẹp thì tự rớt xuống 3 rồi 2 rồi 1 cột. KHÔNG viết cứng * `repeat(5, 1fr)` — 5 cột trên điện thoại là năm cột chữ rộng 60px. */ .tgs-rt-vs { padding: 96px 0 104px; } .tgs-rt-vs__tieu { margin: 0; font-weight: 300; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; text-wrap: balance; } .tgs-rt-vs__dan { margin: 22px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: rgba(11, 11, 11, 0.72); } .tgs-rt-vs__ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px 32px; margin: 64px 0 0; padding: 0; list-style: none; } .tgs-rt-vs__muc { margin: 0; } .tgs-rt-vs__icon { display: block; width: 30px; height: 30px; margin-bottom: 18px; color: var(--ink, #0B0B0B); } .tgs-rt-vs__ten { margin: 0 0 10px; font-weight: 400; font-size: 15px; line-height: 1.3; } .tgs-rt-vs__mo { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(11, 11, 11, 0.7); } @media (max-width: 860px) { .tgs-rt-vs { padding: 64px 0 70px; } .tgs-rt-vs__ds { gap: 34px 24px; margin-top: 44px; } } /* =========================================================================== 5 · DẢI "SIGNATURE COLLECTION" — phối màu khác =========================================================================== * Ảnh thiết kế: nền ngà ĐẬM hơn thân trang, nhãn cam giãn rộng bên trái, hai * nút mũi tên bên phải, ba thẻ ngang. * * HAI NÚT MŨI TÊN CHỈ CÓ TÁC DỤNG KHI CÓ THANH CUỘN NGANG. Với 3 thẻ trên * máy tính thì không cuộn được — nên chúng để `disabled` sẵn từ HTML chứ * không vẽ ra rồi bấm không thấy gì. */ .tgs-rt-khac { padding: 88px 0 96px; background: #E7E1D5; } .tgs-rt-khac__dau { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 44px; } .tgs-rt-khac__nhan { margin: 0; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: 5px; text-transform: uppercase; color: #B4552F; } .tgs-rt-khac__dieu { display: flex; gap: 10px; flex: 0 0 auto; } .tgs-rt-khac__mui { appearance: none; width: 42px; height: 42px; font: inherit; font-size: 16px; line-height: 1; color: var(--ink, #0B0B0B); background: transparent; border: 1px solid rgba(11, 11, 11, 0.3); cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .tgs-rt-khac__mui:hover:not(:disabled) { color: #FFFFFF; background: var(--ink, #0B0B0B); border-color: var(--ink, #0B0B0B); } .tgs-rt-khac__mui:disabled { opacity: 0.3; cursor: default; } .tgs-rt-khac__ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 860px) { .tgs-rt-khac { padding: 60px 0 64px; } .tgs-rt-khac__ds { grid-template-columns: 1fr; gap: 24px; } } /* =========================================================================== 6 · DẢI "THE TOGASHYAMO WORLD" — trang danh mục =========================================================================== * Ảnh trái, chữ phải. Thay cho dải "Sizing" cũ. */ .tgs-rt-tg { padding: 96px 0 104px; } .tgs-rt-tg__doi { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 72px; align-items: center; } .tgs-rt-tg__anh { display: block; width: 100%; height: auto; } .tgs-rt-tg__tieu { margin: 0 0 26px; font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; } .tgs-rt-tg__doan { margin: 0 0 18px; font-size: 15px; line-height: 1.75; color: rgba(11, 11, 11, 0.74); } .tgs-rt-tg__nut { margin: 0; } @media (max-width: 860px) { .tgs-rt-tg { padding: 60px 0 64px; } .tgs-rt-tg__doi { grid-template-columns: 1fr; gap: 36px; } } /* =========================================================================== 7 · THÂN ACCORDION — tiểu mục và danh sách =========================================================================== * Nội dung ba mục nay là HTML nhiều đoạn (mô tả sản phẩm, thông số kỹ thuật, * hướng dẫn bảo quản). Bản cũ chỉ có đúng một thẻ

nên chưa có luật nào * cho