/* ============================================================ THEME SÁNG DOANH NGHIỆP — VN-Mods Ghi đè màu cho chế độ sáng, accent → xanh dương chủ đạo. Chỉ có hiệu lực khi KHÔNG có class "dark". Dark mode giữ nguyên giao diện tối. ============================================================ */ /* ---------- Nền & thanh cuộn ---------- */ html:not(.dark) body { background-color: #f5f8fc; color: #1e293b; } html:not(.dark) ::-webkit-scrollbar-track { background: #eef2f8; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #c4cfdd; } /* ---------- Nền card / khối ---------- */ html:not(.dark) .bg-dark-950 { background-color: #f5f8fc; } html:not(.dark) .bg-dark-900 { background-color: #ffffff; } html:not(.dark) .bg-dark-800 { background-color: #eef2f8; } html:not(.dark) .bg-dark-700 { background-color: #e3e9f2; } html:not(.dark) .bg-dark-900\/60 { background-color: rgba(248,250,253,.75); } html:not(.dark) .bg-dark-900\/95 { background-color: rgba(255,255,255,.97); } html:not(.dark) .bg-dark-950\/40 { background-color: rgba(255,255,255,.45); } html:not(.dark) .bg-dark-950\/50 { background-color: rgba(255,255,255,.55); } html:not(.dark) .bg-dark-950\/60 { background-color: rgba(255,255,255,.65); } html:not(.dark) .bg-dark-950\/70 { background-color: rgba(255,255,255,.75); } html:not(.dark) .bg-dark-950\/80 { background-color: rgba(255,255,255,.88); } html:not(.dark) .bg-dark-950\/90 { background-color: rgba(255,255,255,.95); } /* ---------- Viền ---------- */ html:not(.dark) .border-white\/5 { border-color: #e9eef5; } html:not(.dark) .border-white\/10 { border-color: #dde4ee; } html:not(.dark) .border-white\/15 { border-color: #d4dde9; } html:not(.dark) .border-white\/20 { border-color: #cbd5e1; } html:not(.dark) .border-white\/30 { border-color: #b9c5d5; } html:not(.dark) .divide-white\/5 > * + * { border-color: #e9eef5; } /* ---------- Chữ ---------- */ html:not(.dark) .text-white { color: #0f172a; } html:not(.dark) .bg-red-600 .text-white, html:not(.dark) .bg-red-500 .text-white, html:not(.dark) .bg-red-600.text-white, html:not(.dark) .bg-red-500.text-white, html:not(.dark) .bg-gradient-to-br .text-white, html:not(.dark) .bg-gradient-to-r .text-white { color: #ffffff; } html:not(.dark) .text-slate-100 { color: #1e293b; } html:not(.dark) .text-slate-200 { color: #334155; } html:not(.dark) .text-slate-300 { color: #475569; } html:not(.dark) .text-slate-400 { color: #64748b; } html:not(.dark) .text-slate-500 { color: #7d8ca3; } html:not(.dark) .text-slate-600 { color: #64748b; } html:not(.dark) .text-slate-700 { color: #475569; } /* ---------- Màu chính: ĐỎ → XANH DƯƠNG ---------- */ html:not(.dark) .bg-red-600 { background-color: #1d4ed8; } html:not(.dark) .bg-red-500 { background-color: #2563eb; } html:not(.dark) .bg-red-600\/10 { background-color: rgba(29,78,216,.09); } html:not(.dark) .bg-red-600\/15 { background-color: rgba(29,78,216,.13); } html:not(.dark) .bg-red-500\/10 { background-color: rgba(37,99,235,.09); } html:not(.dark) .bg-red-500\/20 { background-color: rgba(37,99,235,.15); } html:not(.dark) .text-red-400 { color: #2563eb; } html:not(.dark) .text-red-500 { color: #1d4ed8; } html:not(.dark) .text-red-300 { color: #60a5fa; } html:not(.dark) .border-red-600 { border-color: #2563eb; } html:not(.dark) .border-red-500\/20 { border-color: rgba(37,99,235,.2); } html:not(.dark) .border-red-500\/30 { border-color: rgba(37,99,235,.32); } html:not(.dark) .border-red-500\/35 { border-color: rgba(37,99,235,.4); } html:not(.dark) .border-red-500\/40 { border-color: rgba(37,99,235,.45); } html:not(.dark) .border-red-500\/50 { border-color: rgba(37,99,235,.55); } html:not(.dark) .hover\:bg-red-600:hover { background-color: #1d4ed8; } html:not(.dark) .hover\:bg-red-500:hover { background-color: #2563eb; } html:not(.dark) .hover\:bg-red-400:hover { background-color: #3b82f6; } html:not(.dark) .hover\:text-red-400:hover { color: #2563eb; } html:not(.dark) .hover\:text-red-300:hover { color: #3b82f6; } html:not(.dark) .hover\:border-red-500\/30:hover { border-color: rgba(37,99,235,.35); } html:not(.dark) .hover\:border-red-500\/40:hover { border-color: rgba(37,99,235,.45); } html:not(.dark) .hover\:border-red-500\/50:hover { border-color: rgba(37,99,235,.55); } html:not(.dark) .focus\:border-red-500:focus { border-color: #2563eb; } html:not(.dark) .shadow-red-600\/40 { box-shadow: 0 12px 20px -6px rgba(29,78,216,.28); } html:not(.dark) .shadow-red-600\/30 { box-shadow: 0 10px 18px -8px rgba(29,78,216,.22); } html:not(.dark) .shadow-red-600\/10 { box-shadow: 0 8px 22px -10px rgba(29,78,216,.16); } /* ---------- Gradient logo / banner ---------- */ html:not(.dark) .from-red-500 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .from-red-600 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .to-rose-700 { --tw-gradient-to: #1e3a8a; } html:not(.dark) .to-red-700 { --tw-gradient-to: #1e40af; } html:not(.dark) .via-rose-600 { --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to); } /* ---------- Tile ảnh sản phẩm: gradient tối → sáng ---------- */ html:not(.dark) .from-sky-500\/25 { --tw-gradient-from: rgba(14,165,233,.14); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .via-dark-950 { --tw-gradient-stops: var(--tw-gradient-from), #eef4fb, var(--tw-gradient-to); } html:not(.dark) .to-dark-950 { --tw-gradient-to: #eef4fb; } /* ---------- Card shadow nhẹ, chuyên nghiệp ---------- */ html:not(.dark) .bg-dark-900 { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -14px rgba(15,23,42,.10); } html:not(.dark) .bg-dark-950 { box-shadow: none; } /* ---------- Overlay modal: tối vừa phải ---------- */ html:not(.dark) .fixed.inset-0 > .bg-dark-950\/80, html:not(.dark) .bg-dark-950\/80 { background-color: rgba(15,23,42,.5); } html:not(.dark) .bg-dark-950\/90 { background-color: rgba(15,23,42,.55); } /* ---------- Tắt hiệu ứng phụ ---------- */ html:not(.dark) .shimmer-badge::after { display: none; } html:not(.dark) .live-dot { background-color: #16a34a; } /* ---------- Form ---------- */ html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select { color-scheme: light; } html:not(.dark) input:focus, html:not(.dark) textarea:focus, html:not(.dark) select:focus { border-color: #2563eb !important; } /* ---------- Chữ đỏ nhạt (banner khuyến mãi) → xanh nhạt ---------- */ html:not(.dark) .text-red-100 { color: #dbeafe; } html:not(.dark) .text-red-50 { color: #eff6ff; } html:not(.dark) .text-red-200 { color: #bfdbfe; } /* ---------- Selection ---------- */ html:not(.dark) ::selection { background-color: #2563eb; color: #ffffff; } /* Màu nóng còn sót → xanh (chỉ chế độ sáng) */ /* Chữ & viền đỏ còn sót */ html:not(.dark) .text-red-600 { color: #1d4ed8; } html:not(.dark) .border-red-500 { border-color: #2563eb; } html:not(.dark) .border-red-500\/60 { border-color: rgba(37,99,235,.6); } /* Nền đỏ trong suốt → nền xanh pha loãng */ html:not(.dark) .bg-red-950\/30 { background-color: rgba(29,78,216,.12); } html:not(.dark) .bg-red-500\/5 { background-color: rgba(37,99,235,.05); } html:not(.dark) .hover\:bg-red-50:hover { background-color: rgba(37,99,235,.08); } html:not(.dark) .hover\:bg-red-500\/10:hover { background-color: rgba(37,99,235,.1); } /* Bóng đổ đỏ → xanh */ html:not(.dark) .shadow-red-600\/50 { box-shadow: 0 14px 24px -8px rgba(29,78,216,.34); } html:not(.dark) .hover\:shadow-red-600\/10:hover { box-shadow: 0 10px 22px -8px rgba(29,78,216,.18); } /* Gradient hồng/da cam → xanh (stat chip, chart bar ở admin) */ html:not(.dark) .from-rose-500 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .to-rose-600 { --tw-gradient-to: #2563eb; } html:not(.dark) .to-rose-400 { --tw-gradient-to: #3b82f6; } html:not(.dark) .to-rose-300 { --tw-gradient-to: #60a5fa; } html:not(.dark) .to-orange-600 { --tw-gradient-to: #1d4ed8; } html:not(.dark) .to-pink-600 { --tw-gradient-to: #1e40af; } /* Chart bar admin: hover theo nhóm cũng phải xanh */ html:not(.dark) .group\/bar:hover .group-hover\/bar\:from-red-500 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .group\/bar:hover .group-hover\/bar\:to-rose-300 { --tw-gradient-to: #60a5fa; } /* Nền slate tối lọt trong theme sáng (badge/chip) */ html:not(.dark) .bg-slate-950 { background-color: #eef2f8; } html:not(.dark) .bg-slate-800 { background-color: #e3e9f2; } html:not(.dark) .bg-slate-950\/80 { background-color: rgba(243,245,249,.88); } /* Card hover viền xanh thay vì hồng; chấm LIVE phát sáng xanh lá */ html:not(.dark) .card-rise:hover { border-color: rgba(37,99,235,.35); } html:not(.dark) .live-dot { animation-name: livePulseGreen; } @keyframes livePulseGreen { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 50% { opacity: .7; box-shadow: 0 0 0 5px rgba(22,163,74,0); } } /* Làm rõ nét trên nền trắng: hover chữ, viền trắng, nền đậm, accent form */ /* Hover chữ: trắng → xanh dương (khỏi mất hút trên nền trắng) */ html:not(.dark) .hover\:text-white:hover { color: #1d4ed8; } html:not(.dark) .bg-red-600 .hover\:text-white:hover, html:not(.dark) .bg-red-500 .hover\:text-white:hover, html:not(.dark) .bg-red-600.hover\:text-white:hover, html:not(.dark) .bg-red-500.hover\:text-white:hover, html:not(.dark) .bg-gradient-to-r .hover\:text-white:hover, html:not(.dark) .bg-gradient-to-br .hover\:text-white:hover, html:not(.dark) .bg-gradient-to-t .hover\:text-white:hover { color: #ffffff; } /* Hover nền/viền trắng → xanh nhạt */ html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(37,99,235,.06); } html:not(.dark) .hover\:border-white\/15:hover { border-color: rgba(37,99,235,.25); } html:not(.dark) .hover\:border-white\/20:hover { border-color: rgba(37,99,235,.35); } /* Viền trắng thuần trên nền trắng → xám nhạt cho thấy rõ card */ html:not(.dark) .border-white { border-color: #dde4ee; } /* Chữ trắng trên nền màu đậm phải GIỮ trắng (badge xanh lá/xanh dương/vàng) */ html:not(.dark) .bg-emerald-600.text-white, html:not(.dark) .bg-emerald-600 .text-white, html:not(.dark) .bg-sky-600.text-white, html:not(.dark) .bg-sky-600 .text-white, html:not(.dark) .bg-amber-500.text-white, html:not(.dark) .bg-amber-500 .text-white { color: #ffffff; } /* Accent màu của checkbox/radio */ html:not(.dark) .accent-red-600 { accent-color: #2563eb; } /* Nền đỏ đậm phòng hờ */ html:not(.dark) .bg-red-950 { background-color: #eef2f8; } /* Gradient cam/tím lạc tông → xanh */ html:not(.dark) .from-orange-600 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .from-violet-500 { --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .to-purple-600 { --tw-gradient-to: #1e40af; } html:not(.dark) .text-purple-400 { color: #2563eb; } html:not(.dark) .hover\:shadow-red-600:hover { box-shadow: 0 10px 22px -8px rgba(29,78,216,.18); } /* Gradient tint trên card sản phẩm — sản phẩm cũ trong DB còn lưu from-red/orange/purple-600/25 */ html:not(.dark) .from-red-600\/25 { --tw-gradient-from: rgba(37,99,235,.25); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .from-orange-600\/25 { --tw-gradient-from: rgba(37,99,235,.25); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html:not(.dark) .from-purple-600\/25 { --tw-gradient-from: rgba(59,130,246,.25); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }