@tailwind base; @tailwind components; @tailwind utilities; /* Scoped vào body.theme-fast-doors (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-fast-doors { --color-brand-primary: var(--color-primary, #0052CC); --color-brand-light: var(--color-primary, #2684FF); --color-brand-pale: #DEEBFF; --color-brand-dark: var(--color-secondary, #003D99); --color-brand-orange: var(--color-tertiary, #E05C00); --color-brand-orange-h: var(--color-tertiary, #FF6B1A); --color-brand-bg: #F8FAFF; --color-brand-bg-alt: #EEF3FB; --color-brand-border: #DFE1E6; --color-brand-text: #172B4D; --color-brand-body: #344563; --color-brand-muted: #6B778C; --shadow-card: 0 2px 12px rgba(0, 82, 204, 0.10); --shadow-hover: 0 8px 32px rgba(0, 82, 204, 0.18); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #F8FAFF; /* brand.bg */ color: #344563; /* brand.body */ line-height: 1.7; } /* Global Styles & Overrides */ html { scroll-behavior: smooth; } /* Image fallback placeholder styling */ .theme-fast-doors .img-fallback-gradient { background: linear-gradient(135deg, #EEF3FB 0%, #DEEBFF 100%); position: relative; overflow: hidden; } .theme-fast-doors .img-fallback-gradient::before { content: var(--brand-fallback-text, ""); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--color-brand-primary, #0052CC); 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-fast-doors .img-fallback-plain { background: linear-gradient(135deg, #EEF3FB 0%, #DEEBFF 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; }