/* ============================================================ theme.css — Soft & Luxe variant overrides Trích từ prototype index.html, áp lên hoặc . Default = var-soft. ============================================================ */ body { margin: 0; background: #E8E4DC; } /* ---------- VARIANT B — K-beauty Soft (DEFAULT) ---------- */ body.var-soft { --mint-50: #F3F9F6; --mint-100: #DDECE3; --mint-200: #B8D5C6; --mint-300: #8FB8A2; --mint-500: #5B8F7A; --mint-700: #3F6E5A; --mint-900: #2A5345; --ivory: #FFFCF7; --cream: #FBF2E5; --sand: #F2E4D1; --blush: #F8DDD5; --gold: #D4A574; --radius: 16px; --radius-lg: 28px; --radius-xl: 36px; } body.var-soft .pcard, body.var-soft .btn, body.var-soft .badge, body.var-soft .pd-price-card, body.var-soft .art-card, body.var-soft .inline-product, body.var-soft .expert-card, body.var-soft .callout, body.var-soft .pd-fact, body.var-soft .aff-disclose, body.var-soft .hero-card-main, body.var-soft .expert-band, body.var-soft .cmp-table, body.var-soft .feature-lead, body.var-soft .feature-card { border-radius: 24px !important; } body.var-soft .icon-btn { background: #F8F3EA; } body.var-soft .search-input { background: #FEF7EC; border-color: #F2E4D1; } /* ---------- VARIANT C — Luxe Minimal (toggle) ---------- */ body.var-luxe { --mint-50: #F5F2ED; --mint-100: #EBE4D8; --mint-200: #D4C9B5; --mint-300: #A89275; --mint-500: #6B5B42; --mint-700: #3A2F1F; --mint-900: #1A1410; --ivory: #F8F5EF; --cream: #EDE7DA; --sand: #DBCFB8; --gold: #C9A961; --blush: #E8CFC4; --font-display: 'Playfair Display', Georgia, serif; } body.var-luxe .pcard, body.var-luxe .expert-card, body.var-luxe .art-card, body.var-luxe .inline-product, body.var-luxe .cmp-table, body.var-luxe .feature-lead, body.var-luxe .feature-card, body.var-luxe .hero-card-main, body.var-luxe .pd-price-card { border-radius: 4px !important; } body.var-luxe .btn { border-radius: 2px !important; } body.var-luxe .badge, body.var-luxe .search-tag, body.var-luxe .cat-pill, body.var-luxe .swatch, body.var-luxe .tag-ingredient { border-radius: 2px !important; } body.var-luxe .section-title, body.var-luxe .pcard-title, body.var-luxe .hero-title { letter-spacing: -0.02em; } body.var-luxe .pcard-title { text-transform: uppercase; font-size: 13px !important; letter-spacing: 0.12em !important; font-family: var(--font-sans) !important; font-weight: 700 !important; } body.var-luxe .icon-btn { border-radius: 2px; } body.var-luxe .topbar { background: #000; color: var(--mint-200); } body.var-luxe .hero-eyebrow { background: var(--mint-900); color: var(--ivory); border-color: var(--mint-900); } body.var-luxe .hero-blob { background: var(--gold); opacity: 0.1; } /* ---------- THEME TOGGLE button ---------- */ .theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: inline-flex; align-items: center; gap: 4px; padding: 6px; background: var(--ivory); border: 1px solid var(--ink-200); border-radius: 999px; box-shadow: var(--shadow); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; } .theme-toggle button { border: 0; background: transparent; color: var(--ink-500); padding: 6px 14px; border-radius: 999px; cursor: pointer; font: inherit; letter-spacing: inherit; } .theme-toggle button.is-on { background: var(--mint-900); color: var(--ivory); } body.var-luxe .theme-toggle { border-radius: 2px; } body.var-luxe .theme-toggle button { border-radius: 2px; } /* ---------- Affiliate disclosure block ---------- */ .aff-disclose-strip { background: var(--mint-100); border: 1px dashed var(--mint-300); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--mint-900); display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; } /* ---------- Generic stack utilities prototype dùng ---------- */ .stack-md > * + * { margin-top: 16px; } .stack-lg > * + * { margin-top: 28px; } /* ---------- "Empty state" cho list rỗng ---------- */ .empty-state { padding: 60px 20px; text-align: center; background: var(--mint-50); border: 1px dashed var(--mint-200); border-radius: var(--radius); } .empty-state-icon { font-size: 36px; opacity: 0.4; margin-bottom: 12px; } .empty-state-msg { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--ink-500); }