/* Trang BỘ SƯU TẬP giống hồng ngoại (V059) — `/bo-suu-tap`. * * Bản thiết kế của anh Đạo KHÔNG có màn này (nó chỉ có khối 3 ô trên trang chủ, nay đã gỡ), nên * theo luật mục 11 nhánh (a) đoạn cuối: màn thiếu thì dựng thêm, nhưng BÁM ĐÚNG token màu/chữ * của chính bản thiết kế cho khớp bộ. Mã màu dưới đây lấy từ * `tainguyencu/giaodienmoi/Hang Nga Flower - Desktop.dc.html` — không thêm sắc mới nào, chỉ ép * đậm đúng hai màu vì lý do tương phản (xem khối ngay dưới). * * Bố cục lưới theo đúng công thức V050 (auto-fill + minmax(min(Npx,100%),1fr)): `repeat(N, 1fr)` * từ chối co nhỏ hơn min-content nên sinh cuộn ngang trên màn hẹp — đã phải đi sửa một lần rồi. */ /* Bảng màu lấy từ bản thiết kế, có ÉP ĐẬM hai màu — y hệt quyết định đã ghi trong * `static/thu-vien/tokens-hangnga.css`: bản vẽ dùng #C4707E cho chữ nhấn và #7A8C6E cho chữ phụ, * cả hai đều KHÔNG đạt 4,5:1 trên nền kem. Ở đó đã đổi thành #B05A6A và #5A6B50 để giữ đúng sắc * mà đọc được; ở đây theo cùng con số, không tự chế màu mới. (Luật mục 11: phần TIẾP CẬN thì * nhánh nào cũng phải đạt.) */ :root { --bst-nen: #FDFBF8; --bst-nen-2: #F7F1EA; --bst-muc: #2C362F; --bst-muc-2: #33403A; --bst-nhat: #6B7267; --bst-hong: #B05A6A; --bst-hong-nhat: #F3DADD; --bst-la: #5A6B50; --bst-vien: #EFE6DE; --bst-vien-2: #E5DCD3; } /* Nền kem chỉ cho TRANG ĐỨNG RIÊNG (``). Tệp này còn được nạp vào trang cửa hàng ở chế độ NHÚNG, mà bản điện thoại có nền khác (#FBF6ED) — đặt luật lên thẳng `body` là đổi nền cả trang cửa hàng. */ .bst-trang { background: var(--bst-nen); color: var(--bst-muc); } /* ================================================================ CHẾ ĐỘ NHÚNG (V061) Anh Đạo: *"giữ nguyên header và chỉ load bộ sưu tập vào thay thế đúng trang chủ luôn, để tạo cảm giác như là trên một trang duy nhất chứ không phải là phải chuyển trang."* Cách làm: KHÔNG rời trang. Ruột bộ sưu tập được thả vào chính trang cửa hàng, còn phần ruột của cửa hàng thì GIẤU đi bằng mấy luật dưới đây — header, thanh trên cùng và (bản điện thoại) thanh điều hướng đáy vẫn nguyên vị, vẫn là DOM sống của ứng dụng nên nút giỏ hàng, số món trong giỏ, đăng nhập… chạy tiếp không gián đoạn. Vì sao GIẤU chứ không XOÁ: phần ruột cửa hàng do runtime của bản thiết kế dựng và nó vẽ lại bất cứ lúc nào (đổi giỏ, đổi phiên…). Xoá tay là đánh nhau với runtime; giấu bằng CSS thì runtime muốn vẽ lại bao nhiêu lần cũng được, và đóng bộ sưu tập là hiện lại y nguyên kèm đúng chỗ đang cuộn. `!important` là BẮT BUỘC: diện mạo của bản thiết kế nằm ở style NỘI TUYẾN (đặc hiệu cao nhất), thiếu !important là luật câm — đúng bài học V050. `:not(#bst-nhung)` KHÔNG phải cho đẹp: ô nhúng nằm NGAY TRONG `.hn-goc` (phải thế thì nó mới chảy ngay dưới header), nên luật giấu bên dưới nuốt luôn chính nó — đã dính thật, phép đo báo "ô nhúng hiện: false, số thẻ hoa: 0" trong khi mọi thứ khác đều đúng. */ body.bst-mo .hn-goc > *:not(.hn-topbar):not(.hn-header) { display: none !important; } body.bst-mo.bst-mb [data-screen-label] { display: none !important; } /* Bản MÁY TÍNH: ô nhúng treo ở `body` (ngoài vùng runtime quản — xem `nhung-bo-suu-tap.js`), nên thanh đầu phải được GHIM mới còn đứng trên đầu lúc cuộn bộ sưu tập. Ghim bằng CSS theo LỚP chứ không bằng JavaScript đặt style: runtime dựng lại `.hn-goc` bao nhiêu lần thì luật này vẫn áp đúng vào cái mới, còn style đặt tay là mất theo cụm cũ. */ body.bst-mo:not(.bst-mb) .hn-goc { position: fixed !important; top: 0; left: 0; right: 0; z-index: 40; } /* …và ô nhúng là một TẤM PHỦ cố định ngay dưới thanh đầu, TỰ cuộn. Không thả theo dòng chảy của `body`: đo thật thấy ô nhúng bị đẩy xuống đúng một khung nhìn (top = 520 trên khung cao 520) vì trong `body` còn thứ khác của runtime chiếm chỗ. Tấm phủ cố định thì vị trí do MÌNH quyết, không phụ thuộc runtime dựng thêm gì. `top` do JavaScript đặt theo chiều cao thật của thanh đầu — thanh đó xuống dòng ở khổ hẹp nên cao thấp khác nhau. */ body.bst-mo:not(.bst-mb) #bst-nhung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; overflow-y: auto; background: var(--bst-nen); } #bst-nhung { display: none; } body.bst-mo #bst-nhung { display: block !important; } /* Bản điện thoại là một khung ứng dụng cao đúng màn hình (`flex-direction: column`, `overflow: hidden`): ô nhúng phải TỰ cuộn, nếu không nội dung dài bị cắt cụt và cả trang không cuộn được vì thẻ bọc gốc đã chặn cuộn. */ body.bst-mo.bst-mb #bst-nhung { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bst-nen); } /* ---------------------------------------------------------------- thanh đầu trang */ .bst-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 40px; background: var(--bst-nen); border-bottom: 1px solid var(--bst-vien); position: sticky; top: 0; z-index: 20; } .bst-hieu { display: flex; align-items: center; gap: 14px; text-decoration: none; } .bst-hieu img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid #EFE0DB; } .bst-hieu-ten { display: flex; flex-direction: column; } .bst-hieu-ten b { font-family: "Playfair Display", serif; font-size: 21px; font-weight: 500; letter-spacing: .02em; color: var(--bst-muc-2); } .bst-hieu-ten span { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--bst-hong); } .bst-ve { border: 1px solid var(--bst-vien-2); border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 500; color: var(--bst-muc-2); text-decoration: none; white-space: nowrap; } .bst-ve:hover { background: var(--bst-hong-nhat); border-color: var(--bst-hong-nhat); } /* ---------------------------------------------------------------- lời mở đầu */ .bst-mo-dau { max-width: 900px; margin: 0 auto; padding: 56px 40px 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .bst-nhan-tren { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--bst-hong); font-weight: 600; } .bst-mo-dau h1 { font-family: "Playfair Display", serif; font-size: 42px; font-weight: 500; margin: 0; color: var(--bst-muc); text-wrap: pretty; } .bst-mo-dau p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--bst-nhat); font-weight: 300; max-width: 640px; text-wrap: pretty; } .bst-dem { font-size: 13px; color: var(--bst-nhat); } /* ---------------------------------------------------------------- ô tìm (V060) */ .bst-tim { max-width: 720px; margin: 0 auto; padding: 28px 40px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bst-tim-o { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px solid var(--bst-vien-2); border-radius: 999px; padding: 0 18px; background: #fff; color: var(--bst-nhat); } .bst-tim-o:focus-within { border-color: var(--bst-hong); box-shadow: 0 0 0 3px var(--bst-hong-nhat); } .bst-tim-o svg { flex-shrink: 0; } .bst-tim-o input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 15px; color: var(--bst-muc); padding: 14px 0; } .bst-tim-nut { flex-shrink: 0; border: none; border-radius: 999px; padding: 14px 26px; background: var(--bst-hong); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; } .bst-tim-nut:hover { background: var(--bst-muc-2); } .bst-tim-xoa { flex-shrink: 0; font-size: 13.5px; color: var(--bst-nhat); text-underline-offset: 3px; } /* ---------------------------------------------------------------- chip lọc */ .bst-loc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1440px; margin: 0 auto; padding: 26px 40px 6px; } .bst-chip { border: 1px solid var(--bst-vien-2); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 500; color: var(--bst-muc-2); text-decoration: none; background: none; white-space: nowrap; } .bst-chip:hover { background: var(--bst-nen-2); } .bst-chip[aria-current="true"] { background: var(--bst-hong); border-color: var(--bst-hong); color: #fff; } .bst-chip b { font-weight: 600; } .bst-chip i { font-style: normal; opacity: .7; } /* ---------------------------------------------------------------- lưới thẻ hoa */ .bst-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 26px; max-width: 1440px; margin: 0 auto; padding: 30px 40px 20px; box-sizing: border-box; overflow-wrap: anywhere; } .bst-luoi > * { min-width: 0; } .bst-the { background: #fff; border: 1px solid var(--bst-vien); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; } .bst-anh { position: relative; aspect-ratio: 1 / 1; background: var(--bst-hong-nhat); } .bst-anh img { width: 100%; height: 100%; object-fit: cover; display: block; } .bst-nhan { position: absolute; top: 12px; left: 12px; background: var(--bst-hong); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 5px 11px; pointer-events: none; } .bst-than { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; } .bst-xuat-xu { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bst-la); font-weight: 600; } .bst-ten { font-family: "Playfair Display", serif; font-size: 21px; font-weight: 500; margin: 0; color: var(--bst-muc); } .bst-mo-ta { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--bst-nhat); font-weight: 300; } .bst-tt { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; border-top: 1px dashed var(--bst-vien-2); padding-top: 12px; } /* Chữ ở đây nằm trên nền kem đậm hơn (#F7F1EA) chứ không phải nền trắng, nên dùng mực ĐẬM: màu chữ phụ #6B7267 chỉ còn ~4,4:1 trên nền đó — hụt chuẩn đúng một chút. */ .bst-tt span { font-size: 12px; color: var(--bst-muc-2); background: var(--bst-nen-2); border-radius: 999px; padding: 5px 11px; } .bst-tt b { font-weight: 600; color: var(--bst-muc-2); } /* ---------------------------------------------------------------- đáy: chờ tải / hết */ .bst-day { max-width: 1440px; margin: 0 auto; padding: 10px 40px 64px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 14px; color: var(--bst-nhat); } .bst-them { border: 1px solid var(--bst-vien-2); border-radius: 999px; padding: 12px 28px; background: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--bst-muc-2); cursor: pointer; } .bst-them:hover { background: var(--bst-hong-nhat); border-color: var(--bst-hong-nhat); } .bst-cho { display: none; } .bst-cho[data-hien="1"] { display: block; } .bst-trong { margin: 22px 0; font-size: 15px; color: var(--bst-nhat); text-align: center; max-width: 460px; } .bst-chan { background: #33403A; color: #E8EBE4; padding: 30px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; } .bst-chan a { color: #E8EBE4; text-underline-offset: 3px; } @media (max-width: 859px) { /* Khổ điện thoại: tên shop + nút quay lại KHÔNG đủ chỗ trên một hàng — đo thật ở 430px thấy khối thương hiệu tràn 5px khỏi hộp của chính nó (tràn ở mức PHẦN TỬ, trang thì vẫn 0px nên nhìn số tổng là bỏ lọt — bài học V050). Cho xuống hàng thay vì ép co. */ .bst-header { padding: 14px 18px; flex-wrap: wrap; row-gap: 10px; } .bst-hieu { min-width: 0; flex: 1 1 auto; } .bst-hieu-ten { min-width: 0; } .bst-hieu-ten b, .bst-hieu-ten span { overflow-wrap: anywhere; } .bst-ve { flex: 1 1 100%; text-align: center; } .bst-mo-dau { padding: 36px 20px 4px; } .bst-mo-dau h1 { font-size: 30px; } .bst-tim { padding: 20px 16px 0; } .bst-tim-nut { padding: 14px 20px; } .bst-loc { padding: 16px 16px 4px; } .bst-luoi { padding: 22px 16px 16px; gap: 18px; } .bst-day { padding: 8px 16px 44px; } .bst-chan { padding: 24px 18px; } }