/* Bio public page styles — /u/{slug} * Phase 1.5: brand orange header, product card, platform badge, social icons, deals section, footer CTA. * Phase 2: biến theme (--bio-*) + thanh lọc danh mục/tìm kiếm. * * Theme hoạt động thế nào: mọi màu đổi theo theme đều đọc từ biến CSS khai báo ở * body.bio-page; mỗi .bio-theme-{code} chỉ ghi đè đúng mấy biến đó (xem cuối file). * Thêm theme = thêm 1 khối biến ở đây + 1 dòng trong src/Services/BioThemeConfig.php. */ *, *::before, *::after { box-sizing: border-box; } /* Trang này có RIÊNG, KHÔNG nạp riohub-theme.css / mobile-optimizations.css / Bootstrap — nên không thừa hưởng bất kỳ reset nào của site. Mọi rule phòng thủ phải nằm ngay trong file này. * * Nội dung đều do KOC tự nhập và KHÔNG có giới hạn ký tự ở tầng hiển thị: handle * dài không dấu cách, link dán thẳng làm tiêu đề... Đo 11/09 @390px với handle 54 ký * tự liền: `.bio-name` thò tới x=488 và CẢ TRANG cuộn ngang (scrollWidth 605/390). * Đây là trang KOC gửi cho khách — vỡ ở đây là vỡ trước mặt người mua. * * `anywhere` chứ không phải `break-word`: break-word vẫn giữ nguyên chiều rộng * min-content khi tính layout, nên vẫn phồng khung. Đặt ở base (không bọc @media) * vì lỗi có ở MỌI bề rộng; với chữ ngắn bình thường rule này không đổi gì. */ .bio-name, .bio-headline, .bio-section-title, .bio-deals-title, .bio-deals-sub, .bio-block-title, .bio-footer-brand { overflow-wrap: anywhere; } body.bio-page { /* Mặc định = theme cam RioHub */ --bio-page-bg: #f5f5f5; --bio-header-bg: linear-gradient(160deg, #f97316 0%, #fb923c 55%, #fdba74 100%); --bio-accent: #f97316; --bio-accent-grad: linear-gradient(90deg, #f97316, #fb923c); --bio-accent-grad-hover: linear-gradient(90deg, #ea6c0a, #f97316); --bio-chip-bg: #fff; --bio-chip-border: #e5e7eb; margin: 0; min-height: 100vh; background: var(--bio-page-bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111827; } .bio-wrap { max-width: 600px; margin: 0 auto; padding: 0 0 3rem; } /* ============================================================ HEADER — brand orange gradient background ============================================================ */ .bio-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 1.5rem 1.75rem; background: var(--bio-header-bg); border-radius: 0 0 1.5rem 1.5rem; margin-bottom: 1.5rem; } .bio-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 4px 18px rgba(0,0,0,.18); margin-bottom: .75rem; background: #fed7aa; } /* Fallback: initials circle (white on orange) */ .bio-avatar-placeholder { width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; color: #fff; margin-bottom: .75rem; border: 3px solid rgba(255,255,255,.6); box-shadow: 0 4px 16px rgba(0,0,0,.12); letter-spacing: .02em; } .bio-name { font-size: 1.35rem; font-weight: 900; color: #fff; margin: 0 0 .35rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.12); } .bio-headline { font-size: .92rem; color: rgba(255,255,255,.9); margin: 0; max-width: 340px; line-height: 1.5; } /* ============================================================ SOCIAL ICONS ROW ============================================================ */ .bio-socials-row { display: flex; gap: .65rem; margin-top: .9rem; flex-wrap: wrap; justify-content: center; } .bio-social-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; text-decoration: none; transition: background .15s, transform .15s; backdrop-filter: blur(4px); border: 1.5px solid rgba(255,255,255,.35); } .bio-social-icon:hover { background: rgba(255,255,255,.38); transform: translateY(-2px); } /* ============================================================ SECTION HEADERS (Nổi bật, etc.) ============================================================ */ .bio-section-featured, .bio-section-deals { padding: 0 1.5rem; margin-bottom: 1.25rem; } .bio-section-title { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #92400e; margin: 0 0 .75rem; display: flex; align-items: center; gap: .35rem; } .bio-section-title-icon { font-style: normal; } /* ============================================================ PRODUCT CARDS GRID ============================================================ */ .bio-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; } .bio-product-card { background: #fff; border-radius: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; } .bio-product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.11); } /* Ảnh sản phẩm: khung 4:3 chứ không vuông — ảnh vuông rộng bằng thẻ chiếm gần hết màn điện thoại, cuộn mãi mới qua được 1 sản phẩm. contain chứ không cover: ảnh sàn thường là ảnh vuông có chữ khuyến mãi sát mép, cover cắt mất phần chữ đó. Viền hai bên lấy nền sáng cho lẫn vào thẻ. */ .bio-card-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f9fafb; display: block; } .bio-card-body { flex: 1; padding: .6rem .65rem .5rem; display: flex; flex-direction: column; gap: .3rem; } .bio-card-top { display: flex; align-items: center; gap: .35rem; min-height: 1.4rem; } /* Platform badge — color set inline via BioPlatformConfig */ .bio-platform-badge { display: inline-block; font-size: .62rem; font-weight: 800; padding: .12rem .45rem; border-radius: .3rem; letter-spacing: .03em; white-space: nowrap; } .bio-card-title { font-size: .82rem; font-weight: 700; color: #111827; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } .bio-card-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .bio-card-stars { font-size: .68rem; color: #f59e0b; white-space: nowrap; } /* Dải sao 2 lớp: lớp xám đứng yên, lớp vàng cắt theo phần trăm điểm đánh giá. */ .bio-stars { position: relative; display: inline-block; vertical-align: -1px; letter-spacing: .5px; } .bio-stars-empty { color: #d1d5db; } .bio-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #f59e0b; } .bio-card-sold { font-size: .68rem; color: #9ca3af; white-space: nowrap; } .bio-card-prices { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; } /* Current price — red-orange accent */ .bio-card-price { font-size: .9rem; font-weight: 900; color: var(--bio-accent); } /* Original price — strikethrough gray */ .bio-card-orig-price { font-size: .72rem; color: #9ca3af; text-decoration: line-through; } /* Buy button */ .bio-card-btn { display: block; text-align: center; background: var(--bio-accent-grad); color: #fff; font-size: .8rem; font-weight: 800; padding: .5rem .5rem; text-decoration: none; border-top: 1px solid #fed7aa; transition: background .15s; border-radius: 0 0 1rem 1rem; } .bio-card-btn:hover { background: var(--bio-accent-grad-hover); color: #fff; } /* ============================================================ GENERIC BLOCK LIST (non-product blocks in rest section) ============================================================ */ .bio-blocks { display: flex; flex-direction: column; gap: .75rem; padding: 0 1.5rem; margin-bottom: 1.25rem; } .bio-block-link { display: flex; align-items: center; gap: .85rem; background: #fff; border-radius: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); padding: .75rem; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; } .bio-block-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.11); color: inherit; } .bio-block-thumb { width: 56px; height: 56px; border-radius: .6rem; object-fit: cover; flex-shrink: 0; background: #f3f4f6; } .bio-block-thumb-placeholder { width: 56px; height: 56px; border-radius: .6rem; background: linear-gradient(135deg, #fed7aa, #fdba74); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .bio-block-info { flex: 1; min-width: 0; } .bio-block-title { font-weight: 700; font-size: .92rem; color: #111827; margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bio-block-subtitle { font-size: .78rem; color: #6b7280; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bio-block-arrow { color: #f97316; font-size: .95rem; font-weight: 900; flex-shrink: 0; } .bio-block-heading { text-align: center; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; padding: .25rem 0; } .bio-block-text { background: #fff; border-radius: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.07); padding: .85rem 1rem; font-size: .88rem; color: #374151; line-height: 1.55; } /* ============================================================ DEALS SECTION — riokupon.com ============================================================ */ .bio-deals-card { display: flex; align-items: center; gap: .85rem; background: linear-gradient(135deg, #fff7ed, #fff); border: 1.5px solid #fed7aa; border-radius: 1rem; padding: .85rem 1rem; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; } .bio-deals-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.12); color: inherit; } .bio-deals-icon { font-size: 1.8rem; flex-shrink: 0; } .bio-deals-info { flex: 1; min-width: 0; } .bio-deals-title { font-size: .92rem; font-weight: 800; color: #c2410c; margin: 0 0 .15rem; } .bio-deals-sub { font-size: .76rem; color: #9a3412; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ FOOTER CTA ============================================================ */ .bio-footer { text-align: center; padding: 1.5rem 1.5rem 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; } .bio-footer-cta { display: inline-block; background: linear-gradient(90deg, #f97316, #fb923c); color: #fff; font-size: .88rem; font-weight: 800; padding: .65rem 1.5rem; border-radius: 2rem; text-decoration: none; box-shadow: 0 4px 14px rgba(249,115,22,.35); transition: background .15s, box-shadow .15s; } .bio-footer-cta:hover { background: linear-gradient(90deg, #ea6c0a, #f97316); box-shadow: 0 6px 18px rgba(249,115,22,.45); color: #fff; } .bio-footer-brand { font-size: .72rem; color: #9ca3af; margin: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 480px) { .bio-header { padding: 1.75rem 1rem 1.5rem; } .bio-name { font-size: 1.2rem; } .bio-cards-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .bio-section-featured, .bio-section-deals { padding: 0 1rem; } .bio-blocks { padding: 0 1rem; } } @media (max-width: 320px) { .bio-cards-grid { grid-template-columns: 1fr; } } /* ============================================================ FILTER BAR — chip danh mục + ô tìm kiếm (Phase 2) Chỉ render khi ≥2 danh mục hoặc ≥6 thẻ (xem bio_render_filter_bar). ============================================================ */ .bio-filter-bar { padding: 0 1rem; margin-bottom: 1rem; } .bio-filter-search { width: 100%; background: #fff; border: 1.5px solid var(--bio-chip-border); border-radius: .7rem; padding: .55rem .9rem; font-size: .88rem; font-family: inherit; color: #111827; } .bio-filter-search:focus { outline: none; border-color: var(--bio-accent); } .bio-filter-chips { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0 .2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bio-filter-chips::-webkit-scrollbar { display: none; } .bio-filter-chip { flex-shrink: 0; background: var(--bio-chip-bg); border: 1.5px solid var(--bio-chip-border); border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; font-weight: 700; font-family: inherit; color: #374151; cursor: pointer; white-space: nowrap; } .bio-filter-chip.is-active { background: var(--bio-accent); border-color: var(--bio-accent); color: #fff; } .bio-filter-empty { text-align: center; color: #9ca3af; font-size: .85rem; margin: 1.5rem 0 0; } /* ============================================================ THEMES — chỉ ghi đè biến, không đụng vào selector nào khác ============================================================ */ body.bio-page.bio-theme-dark { --bio-page-bg: #0f172a; --bio-header-bg: linear-gradient(160deg, #111827 0%, #1f2937 55%, #334155 100%); --bio-accent: #f59e0b; --bio-accent-grad: linear-gradient(90deg, #f59e0b, #fbbf24); --bio-accent-grad-hover: linear-gradient(90deg, #d97706, #f59e0b); --bio-chip-bg: #1e293b; --bio-chip-border: #334155; } body.bio-page.bio-theme-mint { --bio-page-bg: #f0fdfa; --bio-header-bg: linear-gradient(160deg, #0d9488 0%, #14b8a6 55%, #5eead4 100%); --bio-accent: #0d9488; --bio-accent-grad: linear-gradient(90deg, #0d9488, #14b8a6); --bio-accent-grad-hover: linear-gradient(90deg, #0f766e, #0d9488); --bio-chip-bg: #fff; --bio-chip-border: #ccfbf1; } body.bio-page.bio-theme-rose { --bio-page-bg: #fff1f2; --bio-header-bg: linear-gradient(160deg, #e11d48 0%, #fb7185 55%, #fecdd3 100%); --bio-accent: #e11d48; --bio-accent-grad: linear-gradient(90deg, #e11d48, #fb7185); --bio-accent-grad-hover: linear-gradient(90deg, #be123c, #e11d48); --bio-chip-bg: #fff; --bio-chip-border: #fecdd3; } /* Theme tối: chữ trên nền tối phải sáng lên, nếu không thẻ đọc không nổi */ body.bio-page.bio-theme-dark .bio-product-card, body.bio-page.bio-theme-dark .bio-block-link, body.bio-page.bio-theme-dark .bio-deals-card { background: #1e293b; border-color: #334155; color: #e2e8f0; } body.bio-page.bio-theme-dark .bio-card-title, body.bio-page.bio-theme-dark .bio-block-title, body.bio-page.bio-theme-dark .bio-block-heading, body.bio-page.bio-theme-dark .bio-block-text, body.bio-page.bio-theme-dark .bio-section-title, body.bio-page.bio-theme-dark .bio-deals-title { color: #f1f5f9; } body.bio-page.bio-theme-dark .bio-filter-search { background: #1e293b; border-color: #334155; color: #e2e8f0; } body.bio-page.bio-theme-dark .bio-filter-chip { color: #cbd5e1; }