/* ============================================================ Clickbuy Member — single stylesheet · zero build Vùng (south/north) và chế độ màu (light/dark) là 2 attribute độc lập trên . Cascade lo phần còn lại. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap'); /* ---------- BẤT BIẾN: giống nhau ở mọi vùng / chế độ ---------- */ :root { --bs-body-font-family: 'Be Vietnam Pro', system-ui, sans-serif; --bs-border-radius-sm: 4px; --bs-border-radius: 6px; --bs-border-radius-lg: 8px; --cb-shadow: 0 1px 3px rgb(0 0 0 / .08); /* Placeholder ảnh SP (product/warranty card) — resolve token theo chế độ màu tại điểm dùng */ --cb-hatch: repeating-linear-gradient(45deg, var(--cb-surface-2), var(--cb-surface-2) 6px, var(--cb-border) 6px, var(--cb-border) 7px); /* Trạng thái đơn — 5 khe, né cả đỏ lẫn gold (light) */ --cb-st1-bg:#EDE9FE; --cb-st1-fg:#5B21B6; /* Chờ · tím */ --cb-st2-bg:#DBEAFE; --cb-st2-fg:#1E40AF; /* Đang xử lý · xanh */ --cb-st3-bg:#DCFCE7; --cb-st3-fg:#166534; /* Hoàn tất · lá */ --cb-st4-bg:#F1F5F9; --cb-st4-fg:#475569; /* Đã hủy · xám */ --cb-st5-bg:#FDE7E9; --cb-st5-fg:#B91C1C; /* Cần chú ý · đỏ báo */ /* Hạng — thang phi sắc 4 bậc (KHÔNG gold) */ --cb-tier1-from:#E2E8F0; --cb-tier1-to:#CBD5E1; --cb-tier1-fg:#334155; --cb-tier2-from:#B8C2CE; --cb-tier2-to:#94A3B8; --cb-tier2-fg:#1F2937; /* CONCERN-017: chữ tối trên bạc sáng — AA 5.72:1 (trắng cũ fail 2.56:1) */ --cb-tier3-from:#475569; --cb-tier3-to:#334155; --cb-tier3-fg:#F8FAFC; --cb-tier4-from:#1F2937; --cb-tier4-to:#0F172A; --cb-tier4-fg:#F8FAFC; /* CONCERN-019: bỏ --cb-tier-locked-* (#F1F5F9 cố định ở :root → vỡ dark). Nhóm khóa dùng .cb-tier-locked-box theme-aware (DESIGN_SYSTEM §11/§12). */ /* Edu — hạng NGOÀI thang tích lũy ⇒ bộ token RIÊNG (chàm), CỐ Ý khác cả thang phi sắc lẫn tím --cb-st1 của trạng thái đơn, để một màu không mang hai nghĩa. ⚠️ KHÁC 4 token hạng ở trên: bộ này CÓ override dark (bên dưới) vì nó phủ cả nền thẻ lẫn viền — cặp sáng #EEF2FF/#E0E7FF trên nền tối sẽ chói và viền biến mất. Contrast đo: fg #3730A3 trên đầu tối #E0E7FF ≈ 8.1:1 (AA ✅). */ --cb-edu-from:#EEF2FF; --cb-edu-to:#E0E7FF; --cb-edu-fg:#3730A3; --cb-edu-border:#C7D2FE; /* Tiền */ --cb-money-discount:#166534; --cb-money-due:#B91C1C; --cb-money-paid:#475569; /* Sao đánh giá — xám cố định (né đỏ/gold — DESIGN_SYSTEM §6) */ --cb-star-on:#475569; } /* ---------- VÙNG: chỉ brand · LUÔN đi thành CẶP ---------- 2 gradient, 2 vai trò KHÁC NHAU — đừng gộp: · --cb-brand-gradient = nền THANH thương hiệu (site header / mobile bar): dải rộng, có accent sáng ở đỉnh. · --cb-primary-gradient = nền NÚT/tab active: dải hẹp quanh --bs-primary, để nút không sáng hơn thanh header. ⚠️ Hai gradient Miền Bắc lệch nhau ở ĐIỂM GIỮA (50% vs 45%) — giá trị PO cấp, KHÔNG phải lỗi copy. --bs-primary PHẲNG vẫn giữ nguyên vai trò: icon · viền · thanh progress · badge đếm · vạch accent nav · outline thẻ hạng hiện tại (chỗ cần MỘT màu đặc, không phải một dải). */ [data-cb-region="south"] { --bs-primary:#D70019; --bs-primary-rgb:215,0,25; --cb-on-primary:#FFFFFF; /* ← lật theo vùng */ --cb-brand-accent:#ED2526; --cb-brand-gradient:linear-gradient(180deg,#ED2526 0%,#D70019 55%,#B30015 100%); --cb-primary-gradient:linear-gradient(180deg,#DE0A1C 0%,#D70019 100%); --cb-logo:url('/assets/clickbuy-logo-red.png'); --cb-logo-on-brand:url('/assets/clickbuy-logo-white.png'); } [data-cb-region="north"] { --bs-primary:#FFB301; --bs-primary-rgb:255,179,1; --cb-on-primary:#1F2937; /* ← KHÔNG BAO GIỜ trắng */ --cb-brand-accent:#FFC92B; --cb-brand-gradient:linear-gradient(180deg,#FFDE55 0%,#FFC92B 50%,#FFB301 100%); --cb-primary-gradient:linear-gradient(180deg,#FFDE55 0%,#FFC92B 45%,#FFB301 100%); --cb-logo:url('/assets/clickbuy-logo-gold.png'); --cb-logo-on-brand:url('/assets/clickbuy-logo-white.png'); } /* ---------- CHẾ ĐỘ MÀU ---------- */ [data-bs-theme="light"] { --cb-body-bg:#F1F3F5; --cb-body-color:#1F2937; --cb-surface:#FFFFFF; --cb-surface-2:#F8FAFC; --cb-border:#E5E7EB; --cb-muted:#6B7280; --cb-money-total:#111827; } [data-bs-theme="dark"] { --cb-body-bg:#0B1220; --cb-body-color:#E2E8F0; --cb-surface:#1E293B; --cb-surface-2:#0F172A; --cb-border:#334155; --cb-muted:#94A3B8; --cb-money-total:#F8FAFC; --cb-st1-bg:#2E1065; --cb-st1-fg:#C4B5FD; --cb-st2-bg:#1E3A5F; --cb-st2-fg:#93C5FD; --cb-st3-bg:#14532D; --cb-st3-fg:#86EFAC; --cb-st4-bg:#1E293B; --cb-st4-fg:#94A3B8; --cb-st5-bg:#4C1119; --cb-st5-fg:#FDA4AF; /* CONCERN-020: money + sao vỡ dark-on-dark ở :root (chỉ money-total được override trước đây). Override để né nền tối — tái dùng palette dark semantic đã có, tất cả ≥5:1 trên surface. */ --cb-money-discount:#86EFAC; /* lá sáng (= st3 dark) · 10.4:1 */ --cb-money-due:#FDA4AF; /* đỏ nhạt (= st5 dark) · 7.7:1 */ --cb-money-paid:#94A3B8; /* xám (= muted dark) · 5.7:1 */ --cb-star-on:#94A3B8; /* sao xám sáng · 5.7:1 (bản #475569 chìm dark) */ /* Edu dark — giữ đúng hệ chàm, đảo sáng↔tối. fg #C7D2FE trên đầu sáng #312E81 ≈ 7.7:1 (AA ✅). */ --cb-edu-from:#1E1B4B; --cb-edu-to:#312E81; --cb-edu-fg:#C7D2FE; --cb-edu-border:#3730A3; } /* Đỏ mận CHÌM trên nền tối (3.00) → sáng lên. Gold không cần. */ [data-bs-theme="dark"][data-cb-region="south"] { --bs-primary:#E11D30; --bs-primary-rgb:225,29,48; --cb-on-primary:#FFFFFF; } /* ---------- BASE ---------- */ body { font-family: var(--bs-body-font-family); background: var(--cb-body-bg); color: var(--cb-body-color); -webkit-font-smoothing: antialiased; } .cb-num, .price, .amount, .qty { font-variant-numeric: tabular-nums; } .cb-surface { background: var(--cb-surface); } .cb-card { background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: var(--bs-border-radius-lg); box-shadow: var(--cb-shadow); } /* ---------- NÚT: LUÔN dùng cặp, không hardcode ---------- Nền nút primary = --cb-primary-gradient (§3). Viền vẫn --bs-primary PHẲNG: border-color không nhận gradient, và một đường viền đặc quanh dải màu là đúng thứ ta muốn (khoá mép nút). .cb-auth-submit dùng CHUNG class này (markup auth là `cb-auth-submit btn-primary`) ⇒ submitStyle màn auth theo miễn phí, không khai lần hai. §7: nút CTA + nút phụ về 500 — đặt qua chính biến của Bootstrap để mọi .btn (gồm .btn-sm phân trang) theo cùng. */ /* §9: vùng chạm ≥ 44px cho MỌI nút, ở MỌI khổ (gồm cả .btn-sm phân trang / "Mua lại"). inline-flex vì min-height trên inline-block chỉ nới hộp mà không canh giữa nội dung. Utility Bootstrap (.d-flex/.w-100) vẫn thắng nhờ !important. 🔴 `gap` là BẮT BUỘC ĐI KÈM `inline-flex`, không phải trang trí: markup nút là ` Mua lại` — dấu cách nằm ở ĐẦU text node. Flexbox biến text node đó thành anonymous flex item và **cắt khoảng trắng đầu/cuối** ⇒ icon dính chữ ("⟳Mua lại") ở 11 nút. gap:4px trả lại đúng bề rộng dấu cách đã mất (đo: 79.36 → 83.36px, lệch +0.16px so với mốc inline-block trước task). ⛔ Đừng "sửa" bằng cách thêm ` ` vào markup. */ /* 🔴 `min-width` ĐI CẶP với `min-height`, không phải thừa: nút CHỈ CÓ ICON đạt 44 chiều cao nhưng vẫn hụt chiều ngang — đo P9-T03 ở 390px: 2 mũi tên phân trang (`_Pagination`, `.btn-sm` + 1 icon) ra **32×44**. Ràng buộc §10.1 #4 là 44×44, không phải 44 một chiều. Mọi .btn khác đều đã rộng hơn 44 ⇒ đặt ở đây không xê dịch cái nào. */ .btn { --bs-btn-font-weight: 500; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .btn-primary { background: var(--cb-primary-gradient); color: var(--cb-on-primary); /* ← điểm chết nếu quên */ border-color: var(--bs-primary); } .btn-primary:hover, .btn-primary:focus { background: var(--cb-primary-gradient); color: var(--cb-on-primary); border-color: var(--bs-primary); filter: brightness(.94); } /* Hành động phá hủy: LUÔN viền, không bao giờ tô đặc */ .btn-destructive { background: transparent; border: 1px solid var(--bs-primary); color: var(--bs-primary); } .btn-destructive:hover { background: rgba(var(--bs-primary-rgb), .08); } /* Nút phụ trung tính (Chỉ đường/Gọi/Zalo/Sửa) */ .btn-neutral { background: transparent; border: 1px solid var(--cb-border); color: var(--cb-body-color); } /* ---------- BADGE trạng thái đơn (icon bắt buộc trong markup) ---------- */ .cb-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--bs-border-radius-sm); padding: 3px 10px; font-size: 12px; font-weight: 500; /* §7: badge trạng thái đơn 600 → 500 */ } .cb-badge--st1 { background: var(--cb-st1-bg); color: var(--cb-st1-fg); } .cb-badge--st2 { background: var(--cb-st2-bg); color: var(--cb-st2-fg); } .cb-badge--st3 { background: var(--cb-st3-bg); color: var(--cb-st3-fg); } .cb-badge--st4 { background: var(--cb-st4-bg); color: var(--cb-st4-fg); } .cb-badge--st5 { background: var(--cb-st5-bg); color: var(--cb-st5-fg); } /* Badge nguồn đơn — viền trung tính + icon, không màu brand */ .cb-source-badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cb-border); color: var(--cb-muted); border-radius: var(--bs-border-radius-sm); padding: 2px 8px; font-size: 11px; font-weight: 500; } /* ---------- HẠNG — thang phi sắc ---------- */ .cb-tier--1 { background: linear-gradient(135deg, var(--cb-tier1-from), var(--cb-tier1-to)); color: var(--cb-tier1-fg); } .cb-tier--2 { background: linear-gradient(135deg, var(--cb-tier2-from), var(--cb-tier2-to)); color: var(--cb-tier2-fg); } .cb-tier--3 { background: linear-gradient(135deg, var(--cb-tier3-from), var(--cb-tier3-to)); color: var(--cb-tier3-fg); } .cb-tier--4 { background: linear-gradient(135deg, var(--cb-tier4-from), var(--cb-tier4-to)); color: var(--cb-tier4-fg); } /* CONCERN-019: .cb-tier--locked deprecated (nền #F1F5F9 cố định → vỡ dark). Nhóm khóa dùng .cb-tier-locked-box (theme-aware, cuối file §P4). */ /* ---------- TIỀN ---------- */ .cb-money-total { color: var(--cb-money-total); font-weight: 700; } .cb-money-discount { color: var(--cb-money-discount); } .cb-money-due { color: var(--cb-money-due); } .cb-money-paid { color: var(--cb-money-paid); } /* ---------- SAO ĐÁNH GIÁ — xám, né đỏ/gold ---------- */ .cb-star-on { color: var(--cb-star-on); } .cb-star-off { color: var(--cb-border); } /* ---------- NAV (aside + offcanvas dùng CHUNG) ---------- */ .cb-nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: transparent; color: var(--cb-body-color); border-radius: var(--bs-border-radius); font-weight: 500; min-height: 44px; /* §9: vùng chạm ≥44px (was 42) */ } .cb-nav-item.active::before { content: ""; position: absolute; inset: 0; background: var(--bs-primary); opacity: .09; border-radius: var(--bs-border-radius); } .cb-nav-item.active::after { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--bs-primary); } /* ---------- LOGO region-dependent (background-image — KHÔNG `content:`) ---------- 🔴 `content:` trên KHÔNG chạy trên Firefox (chỉ Blink/WebKit thay ảnh kiểu đó) ⇒ bản cũ hiện logo ĐỎ ở cả Miền Bắc. background-image chạy mọi trình duyệt ⇒ phần tử render là , không còn . Ảnh nguồn lệch tỉ lệ (đỏ 3.83 · gold/trắng 3.98) so khung 4.00 ⇒ `contain` (letterbox trong khung), ⛔ KHÔNG `cover` (cắt mất chữ), ⛔ không ép méo. 🔴 --cb-logo (đỏ/gold) CHỈ an toàn trên nền TRẮNG: bản đỏ có trắng đục NƯỚNG trong glyph (33,7% pixel đặc là trắng) ⇒ đặt lên nền màu là mất nét. Nền thương hiệu PHẢI dùng --cb-logo-on-brand (bản trắng). */ .cb-logo { display: block; flex: none; background-image: var(--cb-logo); background-size: contain; background-repeat: no-repeat; background-position: left center; } .cb-logo--on-brand { background-image: var(--cb-logo-on-brand); } /* ---------- A11y & motion ---------- */ :focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================ FOUNDATION SHELL (P1B) — layout · hero · nav · states. Chỉ component class + token. Vùng/chế độ do cascade ở trên lo. ============================================================ */ /* ---------- Utilities ---------- */ .cb-muted { color: var(--cb-muted); } /* ---------- VÙNG CHẠM ≥ 44px (§9) — áp ở MỌI khổ, ⛔ KHÔNG bọc trong media query ---------- .cb-tap là khe dùng chung; các class component bên dưới gộp vào cùng một rule để markup không phải rắc class thêm ở 20 chỗ. Nút