@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; /* Scoped vào body.theme-auto-sale (KHÔNG dùng :root): - CSS của mọi theme đều bị bundle global, khai báo :root sẽ đè nhau tùy thứ tự bundle (webpack vs Turbopack ra màu khác nhau). - var(--color-primary) do layout gắn inline trên , nên :root không nhìn thấy — phải resolve ngay trên body thì màu tenant mới ăn. */ body.theme-auto-sale { /* Auto Sale — palette mẫu (orange primary, navy secondary) */ --color-brand-primary: var(--color-primary, #FF4500); --color-brand-light: var(--color-primary, #FF6A33); --color-brand-pale: #FFEAE0; --color-brand-dark: var(--color-secondary, #CC3700); --color-brand-orange: var(--color-primary, #FF4500); --color-brand-orange-h: var(--color-secondary, #CC3700); --color-brand-bg: #FFFFFF; --color-brand-bg-alt: #F5F7FA; --color-brand-border: #E2E8F0; --color-brand-text: #1A2744; --color-brand-body: #4A5568; --color-brand-muted: #8A9BB0; --shadow-card: 0 2px 16px rgba(40, 58, 94, 0.10); --shadow-hover: 0 8px 32px rgba(40, 58, 94, 0.18); --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #FFFFFF; /* brand.bg */ color: #4A5568; /* brand.body */ line-height: 1.7; } /* Global Styles & Overrides */ html { scroll-behavior: smooth; } .auto-sale-theme { font-family: var(--font-sans); } /* Image fallback placeholder styling */ .theme-auto-sale .img-fallback-gradient { background: linear-gradient(135deg, #F5F7FA 0%, #FFEAE0 100%); position: relative; overflow: hidden; } .theme-auto-sale .img-fallback-gradient::before { content: "Chưa có ảnh"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #FF4500; /* brand.primary */ opacity: 0.35; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* Dùng cho ảnh thumbnail quá nhỏ (VD: sidebar "Video mới", "Sản phẩm nổi bật", "Bài Viết Phổ Biến") — chỉ nền gradient, KHÔNG hiện chữ tên thương hiệu vì diện tích quá nhỏ, chữ đè lên sẽ bị che khuất/khó đọc. */ .theme-auto-sale .img-fallback-plain { background: linear-gradient(135deg, #F5F7FA 0%, #FFEAE0 100%); position: relative; overflow: hidden; } /* Hide scrollbar for tabs */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* FAQ transition utilities */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .faq-active .faq-content { max-height: 300px; } .faq-active .faq-icon { transform: rotate(180deg); } .faq-icon { transition: transform 0.2s ease; } /* Floating widget scales */ .floating-widget:hover { transform: scale(1.08); } /* Custom Fade In Keyframe and Utilities */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }