/* ============================================================================ clothing.css, KHU CHO THUÊ QUẦN ÁO PHÍA KHÁCH (PROMPT 26, Pha 3) Nạp ở: club.html, workshop.html, art.html, index.html, clothing-detail.html ⛔ KHÔNG nạp ở sinhvien.html. Chủ dự án chốt 12/07/2026: sinh viên tạm bỏ qua. 🔴 TIỀN TỐ `cl-`, KHÔNG PHẢI `ci-`. `ci-` đã bị css/clothing-shop.css (Pha 2, Kho đồ phía shop) chiếm hết. Đặt trùng tiền tố là hai file đè nhau, mà chúng nó khác nền hoàn toàn: Kho đồ nằm trên dashboard TRẮNG, còn khu này nằm trên nền của TỪNG NHÁNH. 🔴 MÀU LẤY TỪ BIẾN CỦA NHÁNH, KHÔNG HARDCODE. css/club.css, ws.css, art.css đã khai báo sẵn (PROMPT 21): --b-accent · --b-card-bg · --b-card-border · --b-muted Đã đọc lại giá trị thật trước khi viết file này: club : accent #d14828 · card #101010 · nền trang #000000 · chữ #ffffff ws : accent #8d2d2b · card #ffffff · nền trang #f1ede4 · chữ #3b3b3b art : accent #e3d6b8 · card #2a2015 · nền trang #211910 · chữ #ffffff home : không có --b-*, nên fallback trong var() sẽ ăn (accent #b14a2f, nền trắng, chữ #1c1726). Xem css/index.css body.home. ⛔ ĐỪNG dùng màu đỏ của sàn thương mại điện tử. Chủ dự án cấm. ⚠ VÌ SAO `color: inherit` AN TOÀN Ở ĐÂY (khác vụ .noti-box hỏng trước đây): nền thẻ (--b-card-bg) LUÔN cùng tông với nền trang của nhánh đó, nên chữ thừa kế từ body luôn tương phản đúng. .noti-box thì ngược lại: nó bị ép tối #1b1b1f trên MỌI trang, kể cả trang nền sáng, nên inherit ăn phải chữ #3b3b3b của ws và chìm nghỉm. Ở đây không có chuyện đó. ============================================================================ */ .cl-card, .cl-card *, .cl-det, .cl-det *, .cl-home, .cl-home * { box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════════════════ 0. BẢNG MÀU CHO TRANG CHI TIẾT (clothing-detail.html) Trên club.html / workshop.html / art.html thì --b-* ĐÃ CÓ SẴN từ css của nhánh, ba lớp dưới đây không dùng tới. Nhưng clothing-detail.html là trang MỚI, nó không nạp css/club.css hay ws.css hay art.css. Nạp cả ba là ba khối `:root` đè nhau, cái cuối thắng, và cả trang lệch màu. Nên trang chi tiết tự khai biến qua lớp trên , do js/clothing-detail.js gắn sau khi đọc `activityId` của món đồ. Giá trị copy ĐÚNG từ css/club.css, css/ws.css, css/art.css (PROMPT 21), đã mở từng file đọc lại, không chép từ trí nhớ. ══════════════════════════════════════════════════════════════════════════ */ body.cl-club { --b-accent: #d14828; --b-muted: rgba(255, 255, 255, .55); --b-card-bg: #101010; --b-card-border: rgba(255, 255, 255, .16); background: #000000; color: #ffffff; } body.cl-ws { --b-accent: #8d2d2b; --b-muted: rgba(59, 59, 59, .60); --b-card-bg: #ffffff; --b-card-border: rgba(141, 45, 43, .28); background: #f1ede4; color: #3b3b3b; } body.cl-art { --b-accent: #e3d6b8; --b-muted: rgba(243, 234, 210, .62); --b-card-bg: #2a2015; --b-card-border: rgba(178, 155, 127, .38); background: #211910; color: #ffffff; } /* ══════════════════════════════════════════════════════════════════════════ 1. THẺ MÓN ĐỒ. Dùng chung cho 3 nhánh và trang chủ. ══════════════════════════════════════════════════════════════════════════ */ .cl-card { display: flex; flex-direction: column; background: var(--b-card-bg, #ffffff); border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; transition: transform .16s ease, border-color .16s ease; } .cl-card:hover { transform: translateY(-3px); border-color: var(--b-accent, #b14a2f); } /* Ảnh 3:4, đúng tỉ lệ của thẻ sự kiện nổi bật (css/index.css .fh-cover) */ .cl-cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; background: rgba(128, 128, 128, .16); overflow: hidden; } .cl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Huy hiệu. CHUẨN BỊ SẴN, Pha 8 mới bật thuật toán. Rules cấm shop tự đặt boost/hotScore (firestore.rules), nên hai nhãn này chỉ admin mới bật được. */ .cl-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; z-index: 1; } .cl-badge { font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 3px 7px; border-radius: 4px; color: #fff; line-height: 1.4; } .cl-badge-hot { background: #b8342a; } .cl-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cl-name { font-size: 13.5px; line-height: 1.35; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; } /* 🔴 GIÁ: chữ to, màu accent CỦA NHÁNH. Định dạng tiền GIỮ NGUYÊN kiểu Việt (250.000đ) kể cả khi bật tiếng Anh. Quyết định của Chủ dự án ở PROMPT 25. */ .cl-price { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--b-accent, #b14a2f); } .cl-price span { font-size: 12px; font-weight: 400; color: var(--b-muted, rgba(28, 23, 38, .62)); } .cl-dep, .cl-meta { font-size: 11.5px; color: var(--b-muted, rgba(28, 23, 38, .62)); } .cl-shop { font-size: 11px; color: var(--b-muted, rgba(28, 23, 38, .62)); border-top: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); padding-top: 7px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ══════════════════════════════════════════════════════════════════════════ 2. KHU QUẦN ÁO TRÊN TRANG CHỦ Đặt ngay dưới mục Sự kiện nổi bật. Nền trắng (body.home). Cuộn ngang, y hệt .fh-row của css/index.css để hai khối trông cùng một nhà. ══════════════════════════════════════════════════════════════════════════ */ .cl-home { flex: 1 0 auto; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px 72px; } .cl-home-head { margin: 0 0 14px; } .cl-home-head h2 { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 23px; color: #1c1726; margin: 0; } .cl-home-sub { display: block; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 300; font-size: 13px; color: #8b8597; margin-top: 5px; } .cl-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .cl-row::-webkit-scrollbar { height: 6px; } .cl-row::-webkit-scrollbar-thumb { background: #e7e4ee; border-radius: 999px; } .cl-row::-webkit-scrollbar-track { background: transparent; } .cl-row .cl-card { flex: 0 0 calc((100% - 20px) / 3); scroll-snap-align: start; } .cl-home .cl-empty { text-align: center; color: #8b8597; font-size: 14px; padding: 30px 0; margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ 3. LƯỚI TRONG 3 NHÁNH .shop-clothes-grid ĐÃ CÓ SẴN trong club.css / ws.css / art.css: grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; ⛔ KHÔNG định nghĩa lại nó ở đây. Chỉ lo phần bên trong thẻ. ══════════════════════════════════════════════════════════════════════════ */ .shop-clothes-grid .cl-card { width: 100%; } /* ══════════════════════════════════════════════════════════════════════════ 4. TRANG CHI TIẾT MÓN ĐỒ (clothing-detail.html) ══════════════════════════════════════════════════════════════════════════ */ .cl-det { max-width: 900px; margin: 0 auto; padding: 20px 20px 40px; } .cl-back { display: inline-block; background: transparent; border: none; color: var(--b-muted, rgba(28, 23, 38, .62)); font-size: 13.5px; font-family: inherit; cursor: pointer; padding: 6px 0 12px; } .cl-back:hover { color: var(--b-accent, #b14a2f); } .cl-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; } .cl-gallery::-webkit-scrollbar { display: none; } .cl-shot { position: relative; flex: 0 0 auto; width: 74%; max-width: 340px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; scroll-snap-align: center; background: rgba(128, 128, 128, .16); } .cl-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cl-det-price { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--b-accent, #b14a2f); margin: 18px 0 2px; } .cl-det-price span { font-size: 15px; font-weight: 400; color: var(--b-muted, rgba(28, 23, 38, .62)); } .cl-det-dep { font-size: 14px; color: var(--b-muted, rgba(28, 23, 38, .62)); } .cl-det-name { font-size: 19px; font-weight: 600; margin: 14px 0 6px; color: inherit; } .cl-det-stats { font-size: 13px; color: var(--b-muted, rgba(28, 23, 38, .62)); } .cl-h { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; color: inherit; margin: 24px 0 10px; } /* Size: mảng CHUỖI trong Firestore (['S','M','L']). ⚠ Schema KHÔNG có tồn kho theo từng size, nên KHÔNG có trạng thái "hết hàng". Đừng vẽ nút mờ giả vờ hết hàng: đó là bịa dữ liệu không tồn tại. */ .cl-sizes { display: flex; gap: 8px; flex-wrap: wrap; } .cl-size { min-width: 52px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); background: transparent; color: inherit; font-size: 14px; font-family: inherit; cursor: pointer; transition: all .15s ease; } .cl-size:hover { border-color: var(--b-accent, #b14a2f); } .cl-size.on { background: var(--b-accent, #b14a2f); border-color: var(--b-accent, #b14a2f); color: #fff; font-weight: 600; } .cl-art .cl-size.on { color: #211910; } .cl-days { display: flex; align-items: center; gap: 14px; } .cl-day-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); background: transparent; color: inherit; font-size: 19px; line-height: 1; font-family: inherit; cursor: pointer; } .cl-day-btn:hover:not(:disabled) { border-color: var(--b-accent, #b14a2f); } .cl-day-btn:disabled { opacity: .3; cursor: not-allowed; } .cl-day-n { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 20px; min-width: 84px; text-align: center; } .cl-day-hint { font-size: 12px; color: var(--b-muted, rgba(28, 23, 38, .62)); margin-top: 8px; } .cl-sum { background: var(--b-card-bg, #ffffff); border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); border-radius: 12px; padding: 14px 16px; } .cl-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--b-muted, rgba(28, 23, 38, .62)); padding: 5px 0; } .cl-sum-row b { color: inherit; font-weight: 600; } .cl-sum-now { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); margin-top: 8px; padding-top: 11px; } .cl-sum-now-l { font-size: 13.5px; font-weight: 600; } .cl-sum-now-v { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 22px; color: var(--b-accent, #b14a2f); white-space: nowrap; } .cl-sum-note { font-size: 12px; line-height: 1.55; color: var(--b-muted, rgba(28, 23, 38, .62)); margin-top: 7px; } .cl-chips { display: flex; gap: 7px; flex-wrap: wrap; } .cl-chip { font-size: 12px; padding: 5px 11px; border-radius: 50px; border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); color: var(--b-muted, rgba(28, 23, 38, .62)); } /* Mô tả: shop gõ tiếng gì hiện tiếng đó. KHÔNG dịch tự động. */ .cl-desc { font-size: 14px; line-height: 1.65; color: var(--b-muted, rgba(28, 23, 38, .62)); white-space: pre-line; word-break: break-word; } .cl-shopbox { display: flex; align-items: center; gap: 12px; padding: 13px; background: var(--b-card-bg, #ffffff); border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); border-radius: 12px; } .cl-shopbox-n { font-size: 14.5px; font-weight: 600; min-width: 0; } /* 🔴 KHỐI GIỚI HẠN TRÁCH NHIỆM. BẮT BUỘC CÓ, VÀ PHẢI ĐỨNG TRƯỚC NÚT ĐẶT CỌC. PROMPT 26 mục 1.4. Câu chữ còn CHỜ BAN PHÁP CHẾ DUYỆT. Đừng tự sửa lời. */ .cl-liab { background: var(--b-card-bg, #ffffff); border: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); border-left: 3px solid var(--b-accent, #b14a2f); border-radius: 10px; padding: 14px 16px; } .cl-liab-h { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .cl-liab ul { margin: 0; padding-left: 17px; } .cl-liab li { font-size: 12.5px; line-height: 1.75; color: var(--b-muted, rgba(28, 23, 38, .62)); } /* Nút chính. ⛔ Nhãn nút TUYỆT ĐỐI không được mang nghĩa mua bán. DILO không bán hàng, DILO cho thuê. Chữ đúng nằm ở i18n.json khoá `cl.cta`. */ .cl-stick { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px 0 10px; border-top: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); background: inherit; } .cl-cta { flex: 1; height: 46px; border: none; border-radius: 11px; background: var(--b-accent, #b14a2f); color: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .5px; cursor: pointer; } .cl-art .cl-cta { color: #211910; } /* ── Đánh giá của khách (PROMPT 26, Pha 7) ── Tên đã được Cloud Function viết tắt (J**u), phía này không có tên đầy đủ. */ .cl-rev { border-top: 1px solid var(--b-card-border, rgba(28, 23, 38, .14)); padding: 13px 0; } .cl-rev:first-child { border-top: none; padding-top: 4px; } .cl-rev-top { display: flex; align-items: center; gap: 8px; } .cl-rev-who { font-size: 13px; font-weight: 600; color: inherit; } .cl-rev-star { font-size: 12px; color: #e0a030; letter-spacing: 1px; } .cl-rev-txt { font-size: 13.5px; line-height: 1.6; color: var(--b-muted, rgba(28, 23, 38, .62)); margin-top: 5px; word-break: break-word; } .cl-empty, .cl-state { grid-column: 1 / -1; text-align: center; color: var(--b-muted, rgba(28, 23, 38, .62)); font-size: 15px; padding: 40px 0; margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ 5. MÀN HÌNH TO ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .cl-home { padding: 0 24px 90px; } .cl-home-head h2 { font-size: 28px; } .cl-row { gap: 16px; } .cl-row .cl-card { flex: 0 0 calc((100% - 48px) / 4); } .cl-shot { width: 46%; } .cl-det { padding: 24px 20px 40px; } } /* PROMPT 34: giá chỉ là THAM KHẢO do shop công bố, không phải giao dịch trên DILO. */ .cl-det-ref { font-size: 12.5px; color: var(--b-muted, #999); margin-top: 4px; line-height: 1.5; }