/** * GizaData — light theme overrides. * Chỉ đổi màu sắc; giữ nguyên layout và hiệu ứng. * Áp dụng khi . */ /* ── site.css tokens ── */ html[data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --border: #e2e8f0; --text: #1e293b; --muted: #64748b; --accent: #0891b2; --accent2: #2563eb; } html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.92); } /* ── Page-scoped variables ── */ html[data-theme="light"] #view-profile { --qldv-bg: #f8fafc; --qldv-text: #334155; --qldv-muted: #64748b; --qldv-dark: #94a3b8; --qldv-white: #0f172a; --qldv-glass-bg: rgba(255, 255, 255, 0.9); --qldv-glass-border: rgba(15, 23, 42, 0.08); } html[data-theme="light"] #view-proxy { --px-bg-deep: #f8fafc; --px-bg-glass: rgba(255, 255, 255, 0.85); --px-text-white: #0f172a; --px-text-slate: #64748b; --px-text-slate-light: #334155; --px-border-glass: rgba(15, 23, 42, 0.08); --px-border-glass-light: rgba(15, 23, 42, 0.12); --px-shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .thongtinvps-root, html[data-theme="light"] #view-thongtinvps { --bg-body: #f8fafc; --text-main: #0f172a; --text-muted: #64748b; --text-dim: #334155; --text-dark: #94a3b8; --glass-bg: rgba(255, 255, 255, 0.9); --border-faint: rgba(15, 23, 42, 0.08); --border-light: rgba(15, 23, 42, 0.12); } html[data-theme="light"] #view-giavps, html[data-theme="light"] .giavps-page { --gv-bg-dark: #f8fafc; --gv-bg-glass: rgba(255, 255, 255, 0.9); --gv-text-main: #0f172a; --gv-text-muted: #334155; --gv-text-darker: #64748b; --gv-border-glass: rgba(15, 23, 42, 0.1); --gv-border-light: rgba(15, 23, 42, 0.14); } html[data-theme="light"] #ticket-root { --bg-deep-midnight: #f8fafc; --bg-dark-slate: #ffffff; --text-white: #0f172a; --glass-bg: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 23, 42, 0.1); } html[data-theme="light"] #view-phanmem { --bg-color: #f8fafc; --surface-color: rgba(255, 255, 255, 0.9); --surface-solid: #ffffff; --text-main: #334155; --text-muted: #64748b; --text-white: #0f172a; --slate-700: #cbd5e1; --slate-800: #e2e8f0; --slate-900: #f1f5f9; --border-light: rgba(15, 23, 42, 0.08); --border-hover: rgba(15, 23, 42, 0.14); } html[data-theme="light"] #twofa-root.twofa-surface { --tfa-bg-color: #f8fafc; --tfa-surface-color: rgba(255, 255, 255, 0.92); --tfa-surface-border: rgba(15, 23, 42, 0.1); --tfa-text-primary: #0f172a; --tfa-text-secondary: #64748b; } html[data-theme="light"] #utm-root.utm-surface { --utm-bg: #f8fafc; --utm-surface: rgba(255, 255, 255, 0.92); --utm-border: rgba(15, 23, 42, 0.1); --utm-text-primary: #0f172a; --utm-text-secondary: #64748b; } html[data-theme="light"] #xulydulieu-root .xd-surface { --xd-bg: #f8fafc; --xd-card: rgba(255, 255, 255, 0.92); --xd-border: rgba(15, 23, 42, 0.1); --xd-text: #334155; --xd-muted: #64748b; } html[data-theme="light"] #view-thietkeweb { --bg-dark: #f8fafc; --text-main: #0f172a; --text-muted: #64748b; --glass-bg: rgba(255, 255, 255, 0.9); --glass-border: rgba(15, 23, 42, 0.08); --glass-hover-border: rgba(8, 145, 178, 0.35); } html[data-theme="light"] #checkproxy-root .checkproxy-surface { --cp-bg-dark: #f8fafc; --cp-bg-card: rgba(255, 255, 255, 0.92); --cp-bg-card-hover: rgba(241, 245, 249, 0.98); --cp-border-light: rgba(15, 23, 42, 0.1); --cp-border-lighter: rgba(15, 23, 42, 0.14); --cp-text-main: #334155; --cp-text-muted: #64748b; --cp-text-white: #0f172a; } html[data-theme="light"] #pass-root { --pass-bg: #f8fafc; } html[data-theme="light"] .vps-seo-below, html[data-theme="light"] .hosting-seo-below, html[data-theme="light"] .email-seo-below, html[data-theme="light"] .proxy-seo-below { --bg-body: #f8fafc; --bg-card: rgba(255, 255, 255, 0.9); --bg-card-hover: rgba(241, 245, 249, 0.95); --bg-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98)); --text-white: #0f172a; --text-light: #1e293b; --text-main: #334155; --text-muted: #64748b; --border-light: rgba(15, 23, 42, 0.12); } html[data-theme="light"] #settings-panel .ttv-member-root { --bg-card: #ffffff; --bg-surface: #f8fafc; --border-color: rgba(15, 23, 42, 0.08); --border-hover: rgba(15, 23, 42, 0.14); --text-primary: #0f172a; --text-secondary: #64748b; --text-muted: #94a3b8; } html[data-theme="light"] #view-thietkeweb [style*="color: #fff"], html[data-theme="light"] #view-thietkeweb [style*="color:#fff"], html[data-theme="light"] #view-giavps [style*="color: #fff"], html[data-theme="light"] #view-giavps [style*="color:#fff"] { color: #0f172a !important; } /* ── Tailwind utility overrides ── */ html[data-theme="light"] .bg-slate-950 { background-color: #f8fafc !important; } html[data-theme="light"] .bg-slate-900 { background-color: #f1f5f9 !important; } html[data-theme="light"] .bg-slate-800 { background-color: #e2e8f0 !important; } html[data-theme="light"] .bg-slate-700 { background-color: #cbd5e1 !important; } html[data-theme="light"] .bg-slate-900\/50 { background-color: rgba(241, 245, 249, 0.85) !important; } html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(255, 255, 255, 0.92) !important; } html[data-theme="light"] .bg-slate-900\/40 { background-color: rgba(241, 245, 249, 0.75) !important; } html[data-theme="light"] .bg-slate-900\/80 { background-color: rgba(241, 245, 249, 0.9) !important; } html[data-theme="light"] .bg-cyan-500\/10 { background-color: rgba(8, 145, 178, 0.1) !important; } html[data-theme="light"] .bg-cyan-500\/15 { background-color: rgba(8, 145, 178, 0.12) !important; } html[data-theme="light"] .bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.1) !important; } html[data-theme="light"] .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; } html[data-theme="light"] .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .text-cyan-200 { color: #0891b2 !important; } html[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; } html[data-theme="light"] .text-cyan-300\/90 { color: rgba(14, 116, 144, 0.9) !important; } html[data-theme="light"] .text-emerald-300 { color: #059669 !important; } html[data-theme="light"] .border-slate-600 { border-color: #cbd5e1 !important; } html[data-theme="light"] .border-slate-500 { border-color: #cbd5e1 !important; } html[data-theme="light"] .border-slate-800\/90 { border-color: rgba(226, 232, 240, 0.95) !important; } html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #cbd5e1 !important; } html[data-theme="light"] .hover\:border-slate-600:hover { border-color: #94a3b8 !important; } html[data-theme="light"] .hover\:text-slate-200:hover { color: #1e293b !important; } /* Nút màu đậm — giữ chữ trắng */ html[data-theme="light"] .bg-green-500.text-white, html[data-theme="light"] .bg-emerald-500.text-white, html[data-theme="light"] .bg-emerald-600.text-white, html[data-theme="light"] .bg-cyan-500.text-white:not(.text-slate-950), html[data-theme="light"] .bg-cyan-400.text-white, html[data-theme="light"] .bg-cyan-600.text-white, html[data-theme="light"] .bg-indigo-600.text-white, html[data-theme="light"] .bg-indigo-500.text-white, html[data-theme="light"] .bg-red-500.text-white, html[data-theme="light"] .bg-purple-600.text-white, html[data-theme="light"] .bg-blue-600.text-white, html[data-theme="light"] .lucky-wheel-segment-label, html[data-theme="light"] .btn-primary, html[data-theme="light"] .vps-header__deposit { color: #ffffff !important; } html[data-theme="light"] .bg-black\/60 { background-color: rgba(15, 23, 42, 0.4) !important; } html[data-theme="light"] .bg-black\/70 { background-color: rgba(15, 23, 42, 0.45) !important; } html[data-theme="light"] .text-white { color: #0f172a !important; } html[data-theme="light"] .text-slate-200 { color: #1e293b !important; } html[data-theme="light"] .text-slate-300 { color: #334155 !important; } html[data-theme="light"] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .text-slate-500 { color: #64748b !important; } html[data-theme="light"] .text-slate-600 { color: #475569 !important; } html[data-theme="light"] .text-slate-700 { color: #334155 !important; } html[data-theme="light"] .text-slate-800 { color: #1e293b !important; } html[data-theme="light"] .text-slate-900 { color: #0f172a !important; } html[data-theme="light"] .text-white\/80 { color: rgba(15, 23, 42, 0.8) !important; } html[data-theme="light"] .text-white\/90 { color: rgba(15, 23, 42, 0.9) !important; } html[data-theme="light"] .border-slate-700 { border-color: #cbd5e1 !important; } html[data-theme="light"] .border-slate-800 { border-color: #e2e8f0 !important; } html[data-theme="light"] .border-slate-900 { border-color: #e2e8f0 !important; } html[data-theme="light"] .border-slate-900\/50 { border-color: rgba(226, 232, 240, 0.9) !important; } html[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: #e2e8f0 !important; } html[data-theme="light"] .hover\:bg-slate-900:hover { background-color: #f1f5f9 !important; } html[data-theme="light"] .hover\:text-slate-400:hover { color: #475569 !important; } html[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; } html[data-theme="light"] .ring-slate-800 { --tw-ring-color: #e2e8f0 !important; } html[data-theme="light"] .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important; } /* CTA gradient sections giữ màu — chữ trắng trên nền gradient */ html[data-theme="light"] .bg-gradient-to-br.from-cyan-600 .text-white, html[data-theme="light"] .bg-gradient-to-br.from-cyan-600 h2, html[data-theme="light"] .bg-gradient-to-br.from-cyan-600 p, html[data-theme="light"] [class*="from-cyan-600"][class*="to-blue"] .text-white, html[data-theme="light"] [class*="from-cyan-600"][class*="to-blue"] h2, html[data-theme="light"] [class*="from-cyan-600"][class*="to-blue"] p.text-white\/80 { color: #ffffff !important; } /* ── gizadata-v2.css components ── */ html[data-theme="light"] .glass-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .vps-header { background: var(--giza-header-bg); border-bottom-color: rgba(15, 23, 42, 0.08); color: #334155; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } html[data-theme="light"] .vps-header__logo { color: #0f172a; } html[data-theme="light"] .vps-header__logo-bubble { background: #f1f5f9; } html[data-theme="light"] .vps-header__dock { background: rgba(15, 23, 42, 0.04); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .vps-header__tab { color: #64748b; } html[data-theme="light"] .vps-header__tab:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); } html[data-theme="light"] .vps-header__tab.active { color: #0891b2; background: rgba(8, 145, 178, 0.1); } html[data-theme="light"] .vps-header__tab::after { background: #0891b2; box-shadow: 0 0 8px rgba(8, 145, 178, 0.5); } html[data-theme="light"] .vps-header__user-pill, html[data-theme="light"] .vps-header-user-pill { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .vps-mnav { background: rgba(255, 255, 255, 0.98); border-color: #e2e8f0; } html[data-theme="light"] .vps-mnav__link { color: #475569; } html[data-theme="light"] .plan-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .plan-card:hover { border-color: #cbd5e1; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); } html[data-theme="light"] .plan-price { color: #0f172a; } html[data-theme="light"] .plan-specs li { color: #334155; } html[data-theme="light"] .plan-divider { border-color: #e2e8f0; } html[data-theme="light"] .plan-meta-row, html[data-theme="light"] .plan-day-note, html[data-theme="light"] .plan-pricing-mini { color: #64748b; } html[data-theme="light"] .pricing-chip { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .service-tabs .tab-btn { color: #64748b; border-color: #e2e8f0; background: #ffffff; } html[data-theme="light"] .service-tabs .tab-btn.is-active { background: #f0fdfa; border-color: rgba(8, 145, 178, 0.35); color: #0891b2; } html[data-theme="light"] .catalog-toolbar, html[data-theme="light"] .catalog-filters { background: #ffffff; border-color: #e2e8f0; } html[data-theme="light"] .vps-modal__panel, html[data-theme="light"] .vps-modal-panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .vps-modal__backdrop { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] .site-footer-v2 { background: #f1f5f9 !important; border-top-color: #e2e8f0 !important; } /* Home hero */ html[data-theme="light"] #view-home .home-hero-bg-vignette { background: radial-gradient(ellipse 88% 75% at 50% 40%, transparent 0%, rgba(248, 250, 252, 0.4) 72%, rgba(248, 250, 252, 0.85) 100%); } html[data-theme="light"] #view-home .home-hero-bg-orb--cyan { opacity: 0.22; } html[data-theme="light"] #view-home .home-hero-bg-orb--emerald, html[data-theme="light"] #view-home .home-hero-bg-orb--violet { opacity: 0.14; } html[data-theme="light"] #view-home .home-hero-bg-grid { background-image: linear-gradient(rgba(100, 116, 139, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 116, 139, 0.08) 1px, transparent 1px); opacity: 0.6; } html[data-theme="light"] #view-home .home-hero-btn-secondary { background: rgba(255, 255, 255, 0.85); border-color: #cbd5e1; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } html[data-theme="light"] #view-home .home-hero-btn-secondary:hover { background: #ffffff; border-color: #0891b2; color: #0891b2 !important; } html[data-theme="light"] #view-home .home-sys-monitor { background: #ffffff; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1); } html[data-theme="light"] .home-sys-monitor .bg-slate-900\/50 { background-color: #f1f5f9 !important; } /* Deposit / nạp tiền */ html[data-theme="light"] .deposit-modal__backdrop { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] .deposit-modal__panel { background: #ffffff; border-color: #e2e8f0; color: #334155; box-shadow: 0 18px 60px rgba(15, 23, 42, 0.15); } html[data-theme="light"] .deposit-modal__footer { border-top-color: #e2e8f0; } html[data-theme="light"] .deposit-label { color: #64748b; } html[data-theme="light"] .deposit-input, html[data-theme="light"] .deposit-select { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; } html[data-theme="light"] .deposit-quick-btn { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .deposit-quick-btn:hover, html[data-theme="light"] .deposit-quick-btn.is-active { background: #ecfeff; border-color: #0891b2; color: #0891b2; } /* Bank transfer modal */ html[data-theme="light"] .btp-modal__panel, html[data-theme="light"] .bank-transfer-panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .btp-modal__backdrop { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] button.btp-switch { border-color: #e2e8f0; color: #334155; background: #f8fafc; } /* Toast & notifications */ html[data-theme="light"] .toast-item { background: #ffffff; border-color: #e2e8f0; color: #334155; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); } html[data-theme="light"] .svc-notif { background: #ffffff; border-color: #e2e8f0; color: #334155; } /* Lucky wheel */ html[data-theme="light"] .lucky-wheel-modal__panel, html[data-theme="light"] .lucky-modal__panel { background: #ffffff; border-color: #e2e8f0; } /* Contact FAB */ html[data-theme="light"] .contact-menu-pc-btn { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1); } /* Chat widget */ html[data-theme="light"] .chat-widget-container { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12); } html[data-theme="light"] .chat-widget-header { background: linear-gradient(135deg, #0891b2, #0284c7); } html[data-theme="light"] .chat-messages { background: #f8fafc; } html[data-theme="light"] .chat-message.admin .chat-message-content { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .chat-input-area { background: #ffffff; border-top-color: #e2e8f0; } html[data-theme="light"] .chat-input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; } /* Checkout */ html[data-theme="light"] .checkout-proxy-keys__terminal { background: #f1f5f9; border-color: #e2e8f0; color: #059669; } html[data-theme="light"] .checkout-proxy-keys__terminal:hover { background: #ecfdf5; border-color: rgba(8, 145, 178, 0.35); } /* Inputs chung trong JS-generated HTML */ html[data-theme="light"] input.bg-slate-950, html[data-theme="light"] select.bg-slate-950, html[data-theme="light"] textarea.bg-slate-950, html[data-theme="light"] input.bg-slate-900, html[data-theme="light"] select.bg-slate-900, html[data-theme="light"] textarea.bg-slate-900 { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* Group hover icon trên home — giữ hover đảo màu */ html[data-theme="light"] .group:hover .group-hover\:text-slate-950 { color: #0f172a !important; } /* Logo partner trên hero — tăng contrast nhẹ */ html[data-theme="light"] #view-home .opacity-40 { opacity: 0.65 !important; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } /* SEO cards */ html[data-theme="light"] .service-seo-card { background: #ffffff; border-color: #e2e8f0; } html[data-theme="light"] .service-seo-card h3, html[data-theme="light"] .service-seo-card h4 { color: #0f172a; } html[data-theme="light"] .service-seo-card p { color: #64748b; } /* Affiliate panel */ html[data-theme="light"] .aff-panel-card { background: #ffffff; border-color: #e2e8f0; } /* Checkproxy */ html[data-theme="light"] .checkproxy-result-box { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } /* Profile ambient glows — giảm trên nền sáng */ html[data-theme="light"] #view-profile .qldv-ambient__glow-1, html[data-theme="light"] #view-profile .qldv-ambient__glow-2, html[data-theme="light"] #view-profile .qldv-ambient__glow-3 { opacity: 0.35; } /* Nút cyan primary — chữ tối trên nền sáng vẫn dùng slate-950 (OK) */ html[data-theme="light"] .bg-cyan-500.text-slate-950, html[data-theme="light"] a.bg-cyan-500.text-slate-950 { color: #0f172a !important; } /* text-white trong plan stock — đổi sang heading */ html[data-theme="light"] .plan-stock .text-white, html[data-theme="light"] .plan-stock .font-bold.text-white { color: #0f172a !important; } /* Catalog loading skeleton */ html[data-theme="light"] .catalog-skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); } /* VNC modal */ html[data-theme="light"] .vps-vnc-modal__panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } /* Pass page */ html[data-theme="light"] .pass-page-card { background: #ffffff; border-color: #e2e8f0; } /* License page */ html[data-theme="light"] .license-card { background: #ffffff; border-color: #e2e8f0; } /* Profile modals */ html[data-theme="light"] .qldv-modal__panel, html[data-theme="light"] .profile-modal-panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .qldv-modal__backdrop { background: rgba(15, 23, 42, 0.35); } /* Datacenter selector */ html[data-theme="light"] .dc-pill { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .dc-pill.is-active { background: #ecfeff; border-color: #0891b2; color: #0891b2; } /* Order modal */ html[data-theme="light"] .order-modal__panel { background: #ffffff; border-color: #e2e8f0; } /* text-glow trên gradient title — giữ hiệu ứng */ html[data-theme="light"] .text-glow { text-shadow: 0 0 20px rgba(8, 145, 178, 0.25); } /* Grayscale logos */ html[data-theme="light"] .grayscale { filter: grayscale(0.3); } html[data-theme="light"] .hover\:grayscale-0:hover { filter: grayscale(0); } /* ── Checkout (gizadata-v2 hardcoded) ── */ html[data-theme="light"] :is(#view-checkout, #checkout-root) .bg-slate-900 { background: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-billing-mode-wrap { background: #f8fafc; border-color: #e2e8f0; } html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-billing-mode-btn { background: #ffffff; border-color: #cbd5e1; color: #64748b; } html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-billing-mode-btn.active { color: #0e7490; border-color: #0891b2; background: rgba(8, 145, 178, 0.1); } html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-day-preset, html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-day-stepper-btn { background: #ffffff; border-color: #cbd5e1; color: #334155; } html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-day-preset:hover, html[data-theme="light"] :is(#view-checkout, #checkout-root) .order-day-stepper-btn:hover { border-color: #0891b2; color: #0f172a; } html[data-theme="light"] .checkout-empty-state__inner { background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .checkout-empty-state__title { color: #0f172a; } html[data-theme="light"] .checkout-empty-state__lead { color: #64748b; } html[data-theme="light"] .checkout-empty-state__btn--secondary { background: #ffffff; border-color: #e2e8f0; color: #334155; } /* PayPal checkout — bg-indigo-* / text-sky-* không có trong tailwind.build.css */ html[data-theme="light"] .bg-indigo-600 { background-color: #4f46e5 !important; } html[data-theme="light"] .hover\:bg-indigo-500:hover { background-color: #6366f1 !important; } html[data-theme="light"] .border-indigo-500 { border-color: #6366f1 !important; } html[data-theme="light"] #btn-submit-paypal, html[data-theme="light"] :is(#view-checkout, #checkout-root) #btn-submit-paypal, html[data-theme="light"] .bank-transfer-modal a.bg-indigo-600, html[data-theme="light"] :is(#view-checkout, #checkout-root) a.bg-indigo-600 { background-color: #4f46e5 !important; border-color: #6366f1 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25); } html[data-theme="light"] #btn-submit-paypal:hover:not(:disabled), html[data-theme="light"] :is(#view-checkout, #checkout-root) #btn-submit-paypal:hover:not(:disabled), html[data-theme="light"] .bank-transfer-modal a.bg-indigo-600:hover, html[data-theme="light"] :is(#view-checkout, #checkout-root) a.bg-indigo-600:hover { background-color: #6366f1 !important; } html[data-theme="light"] #btn-submit-paypal .inline-flex, html[data-theme="light"] .bank-transfer-modal a.bg-indigo-600 .inline-flex, html[data-theme="light"] #btn-submit-paypal svg, html[data-theme="light"] .bank-transfer-modal a.bg-indigo-600 svg { color: #ffffff !important; } html[data-theme="light"] .text-sky-300 { color: #0284c7 !important; } html[data-theme="light"] .border-sky-500\/40 { border-color: rgba(14, 165, 233, 0.35) !important; } html[data-theme="light"] .bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.1) !important; } html[data-theme="light"] .btp-status-badge.text-sky-300 { background: #e0f2fe !important; border-color: #7dd3fc !important; color: #0369a1 !important; } html[data-theme="light"] .backup-option-card { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .backup-option-card:hover { border-color: #cbd5e1; background: #f8fafc; } html[data-theme="light"] .backup-option-card.active { border-color: #0891b2; background: rgba(8, 145, 178, 0.08); } html[data-theme="light"] .backup-option-card__title { color: #0f172a; } html[data-theme="light"] .backup-option-card__desc { color: #64748b; } html[data-theme="light"] .backup-option-card.active .backup-option-card__desc { color: #0e7490; } /* ── Lucky wheel (đúng class) ── */ html[data-theme="light"] .lucky-modal__panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .lucky-modal__header { border-bottom-color: #e2e8f0; } html[data-theme="light"] .lucky-modal__close { color: #64748b; } html[data-theme="light"] .lucky-modal__backdrop { background: rgba(15, 23, 42, 0.35); } html[data-theme="light"] .lucky-modal__desc, html[data-theme="light"] .lucky-deposit-info { color: #64748b; } html[data-theme="light"] .lucky-wheel-result { background: #f8fafc; border-color: #e2e8f0; color: #334155; } /* ── Giá VPS page gradient ── */ html[data-theme="light"] .giavps-page { background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%); } /* ── Pass page glass ── */ html[data-theme="light"] #pass-root .pass-glass, html[data-theme="light"] #pass-root .pass-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); } html[data-theme="light"] #pass-root .pass-card--featured { background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); } html[data-theme="light"] #pass-root .pass-search-wrap { background: #f1f5f9; border-color: #e2e8f0; } html[data-theme="light"] #pass-root .pass-input { color: #0f172a; } html[data-theme="light"] #pass-root .pass-card-name { color: #0f172a; } html[data-theme="light"] #pass-root .pass-btn-primary { background: #0891b2; color: #ffffff; } html[data-theme="light"] #pass-root .pass-btn-primary:hover:not(:disabled) { background: #0e7490; color: #ffffff; } /* ── License page ── */ html[data-theme="light"] #view-license .license-page-root, html[data-theme="light"] .license-page-root { color: #334155; } html[data-theme="light"] .license-panel, html[data-theme="light"] .license-card, html[data-theme="light"] .license-form-card { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] .license-panel h1, html[data-theme="light"] .license-panel h2, html[data-theme="light"] .license-card-title { color: #0f172a; } /* ── Profile glass boxes ── */ html[data-theme="light"] #view-profile .qldv-glass-box, html[data-theme="light"] .qldv-glass-box, html[data-theme="light"] #view-profile .qldv-service-card, html[data-theme="light"] #view-profile .qldv-bento-cell { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.1); } html[data-theme="light"] #view-profile .qldv-vnc-chrome { background: #f1f5f9; border-color: #e2e8f0; color: #334155; } /* ── Affiliate panel ── */ html[data-theme="light"] #affiliate-panel .aff-stat { background: #ffffff; border-color: #e2e8f0; color: #334155; } html[data-theme="light"] #affiliate-panel .aff-stat-value { color: #0f172a; } html[data-theme="light"] #affiliate-panel .aff-stat-label { color: #64748b; } /* ── Checkproxy / proxy checklive table ── */ html[data-theme="light"] .proxy-checklive-table thead, html[data-theme="light"] #view-proxy .proxy-page-surface table thead { background: #f1f5f9 !important; color: #334155; } html[data-theme="light"] .proxy-checklive-table thead th { background-color: #f1f5f9 !important; color: #334155 !important; border-bottom-color: #e2e8f0 !important; } html[data-theme="light"] .proxy-checklive-table tbody td { border-bottom-color: #e2e8f0 !important; color: #334155; } html[data-theme="light"] .proxy-checklive-table .proxy-checklive-cell--idx { color: #64748b; } html[data-theme="light"] .proxy-checklive-table .proxy-checklive-cell--proxy { color: #047857; } html[data-theme="light"] .proxy-checklive-table .proxy-checklive-cell--ip { color: #334155; } html[data-theme="light"] .proxy-checklive-table .proxy-checklive-cell--loc { color: #64748b; } html[data-theme="light"] .proxy-checklive-overlay .bg-slate-900 { background-color: #ffffff !important; } /* ── Home section hardcoded backgrounds ── */ html[data-theme="light"] #view-home section.py-24.bg-slate-900 { background-color: #f1f5f9 !important; } /* ── Muataikhoan modal ── */ html[data-theme="light"] #mtk-buy-modal .mtk-modal-panel, html[data-theme="light"] #view-muataikhoan .mtk-modal-panel { background: #ffffff; border-color: #e2e8f0; color: #334155; } /* ── Popup naptien extras ── */ html[data-theme="light"] .deposit-v2-panel, html[data-theme="light"] .deposit-v2-card { background: #ffffff; border-color: #e2e8f0; color: #334155; } /* ── Profile dashboard qldv nav ── */ html[data-theme="light"] #view-profile .qldv-nav-item { color: #64748b; } html[data-theme="light"] #view-profile .qldv-nav-item.is-active, html[data-theme="light"] #view-profile .qldv-nav-item:hover { color: #0891b2; background: rgba(8, 145, 178, 0.08); } /* ── Auth verify 2FA standalone page ── */ html[data-theme="light"] body.auth-verify-2fa { background: var(--bg); color: var(--text); } html[data-theme="light"] .catalog-v2 .plan-card, html[data-theme="light"] .catalog-grid .plan-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); } html[data-theme="light"] .catalog-v2 .plan-card:hover, html[data-theme="light"] .catalog-grid .plan-card:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1); } html[data-theme="light"] body.auth-verify-2fa .card { background: var(--surface); border-color: var(--border); }