/** * Storefront LIGHT — load sau client-dark-neutral + storefront-retail-shop-promo. * Chữ đen thống nhất; sửa menu header trắng / xám nhạt trên nền sáng. */ html[data-pc-theme="light"] { --bs-body-color: #0f172a; --bs-heading-color: #0f172a; --bs-emphasis-color: #0f172a; --bs-secondary-color: #64748b; --pc-header-color: #0f172a; } html[data-pc-theme="light"].pc-storefront-html body.pc-storefront-body { color: #0f172a !important; } html[data-pc-theme="light"] header.customer-site-header nav.navbar-light, html[data-pc-theme="light"] header.customer-site-header nav.navbar-light .navbar-nav { --bs-navbar-color: #0f172a; --bs-navbar-hover-color: var(--bs-primary); --bs-navbar-active-color: var(--bs-primary); --bs-navbar-brand-color: #0f172a; --bs-navbar-brand-hover-color: var(--bs-primary); --bs-nav-link-color: #0f172a; --bs-nav-link-hover-color: var(--bs-primary); } html[data-pc-theme="light"] header.customer-site-header { color: #0f172a !important; } html[data-pc-theme="light"] header.customer-site-header .customer-header-main-nav .nav-link, html[data-pc-theme="light"] header.customer-site-header .customer-header-main-nav .nav-link.dropdown-toggle, html[data-pc-theme="light"] header.customer-site-header .menu-retail, html[data-pc-theme="light"] header.customer-site-header .menu-retail .menu-retail__label { color: #0f172a !important; } html[data-pc-theme="light"] header.customer-site-header .customer-header-main-nav .nav-link:hover, html[data-pc-theme="light"] header.customer-site-header .customer-header-main-nav .nav-link:focus-visible, html[data-pc-theme="light"] header.customer-site-header .menu-retail:hover, html[data-pc-theme="light"] header.customer-site-header .menu-retail:focus-visible { color: var(--bs-primary) !important; text-shadow: none !important; } html[data-pc-theme="light"] header.customer-site-header .customer-header-main-nav .nav-link.active, html[data-pc-theme="light"] header.customer-site-header .menu-retail.active { color: var(--bs-primary) !important; } html[data-pc-theme="light"] header.customer-site-header .top-navbar, html[data-pc-theme="light"] header.customer-site-header .customer-header-util-nav .nav-link, html[data-pc-theme="light"] header.customer-site-header .customer-header-util-nav a.text-reset, html[data-pc-theme="light"] header.customer-site-header .customer-header-util-nav .dropdown-toggle, html[data-pc-theme="light"] header.customer-site-header .customer-header-util-nav .dropdown-toggle span { color: #334155 !important; } html[data-pc-theme="light"] #menuOffcanvas.offcanvas .customer-offcanvas-nav-link, html[data-pc-theme="light"] #menuOffcanvas.offcanvas .offcanvas-body > a.text-reset, html[data-pc-theme="light"] #menuOffcanvas.offcanvas .offcanvas-body > h5, html[data-pc-theme="dark"] #menuOffcanvas.offcanvas .customer-offcanvas-nav-link, html[data-pc-theme="dark"] #menuOffcanvas.offcanvas .offcanvas-body > a.text-reset, html[data-pc-theme="dark"] #menuOffcanvas.offcanvas .offcanvas-body > h5 { color: #0f172a !important; } html[data-pc-theme="light"] .content-wrapper, html[data-pc-theme="light"] .content-wrapper .card.modern-card, html[data-pc-theme="light"] .modern-card, html[data-pc-theme="light"] .dropdown-menu .dropdown-item:not(.active) { color: #0f172a; } html[data-pc-theme="light"] .imei-lp-retail-featured__title { color: #334155 !important; } /* ------------------------------------------------------------------ Light theme — soft surfaces (giảm chói mắt, tăng tương phản nhẹ) ------------------------------------------------------------------ */ html[data-pc-theme="light"] { /* Body xám nhạt — header/footer trắng — thẻ nội dung trắng nổi trên nền */ --sf-light-page: #f0f2f5; --sf-light-surface: #ffffff; --sf-light-surface-raised: #ffffff; --sf-light-border: #e2e8f0; --sf-light-border-soft: #eef1f6; --sf-light-text: #0f172a; --sf-light-muted: #64748b; --sf-light-accent: color-mix(in srgb, var(--bs-primary) 82%, #1e40af); --sf-light-accent-deep: color-mix(in srgb, var(--bs-primary) 72%, #0f172a); --sf-light-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04); --sf-light-shadow-hover: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); --sf-chrome-bg: #ffffff; --sf-chrome-border: #e8ecf1; } html[data-pc-theme="light"].pc-storefront-html:not(:has(.pc-global-site-bg)), html[data-pc-theme="light"].pc-storefront-html:not(:has(.pc-global-site-bg)) body.pc-storefront-body { background: var(--sf-light-page) !important; background-color: var(--sf-light-page) !important; color: var(--sf-light-text) !important; } html[data-pc-theme="light"] .content-wrapper, html[data-pc-theme="light"] .pc-storefront-sticky-root, html[data-pc-theme="light"] .pc-storefront-page-column, html[data-pc-theme="light"] .sv-checkout-wrap.retail-o89-wrap { background: transparent !important; background-color: transparent !important; } html[data-pc-theme="light"]:not(:has(.pc-global-site-bg)) header.customer-site-header, html[data-pc-theme="light"]:not(:has(.pc-global-site-bg)) header.customer-site-header nav.navbar-light { background: #ffffff !important; background-color: #ffffff !important; backdrop-filter: none; border-bottom: 1px solid var(--sf-chrome-border) !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } html[data-pc-theme="light"] header.customer-site-header .top-navbar { border-bottom-color: var(--sf-chrome-border) !important; } html[data-pc-theme="light"]:not(:has(.pc-global-site-bg)) footer.gt-footer.gt-footer--client-app, html[data-pc-theme="light"]:not(:has(.pc-global-site-bg)) .pc-storefront-page-column > footer.gt-footer { background: #ffffff !important; background-color: #ffffff !important; border-top: 1px solid var(--sf-chrome-border) !important; color: var(--sf-light-muted) !important; box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.03); } html[data-pc-theme="light"] .modern-card:not(.waiting-action-card):not(.inprocess-card):not(.success-card):not(.rejected-card):not(.total-order-card), html[data-pc-theme="light"] .card.modern-card:not(.balance-card):not(.waiting-action-card):not(.inprocess-card):not(.success-card):not(.rejected-card):not(.total-order-card), html[data-pc-theme="light"] .card:not(.content-wrapper):not(.balance-card):not(.waiting-action-card):not(.inprocess-card):not(.success-card):not(.rejected-card):not(.total-order-card) { background: var(--sf-light-surface) !important; background-color: var(--sf-light-surface) !important; border-color: var(--sf-light-border) !important; box-shadow: var(--sf-light-shadow) !important; color: var(--sf-light-text); } /* Balance card — giữ gradient primary + chữ trắng (tránh .card{} light override) */ html[data-pc-theme="light"] .balance-card { background: linear-gradient( 135deg, rgb(var(--bs-primary-rgb)), color-mix(in srgb, rgb(var(--bs-primary-rgb)) 62%, white 38%) ) !important; background-color: transparent !important; border: none !important; box-shadow: var(--sf-light-shadow-hover) !important; color: #fff !important; } html[data-pc-theme="light"] .balance-card h2, html[data-pc-theme="light"] .balance-card h5, html[data-pc-theme="light"] .balance-card h6 { color: #ffffff !important; } html[data-pc-theme="light"] .balance-card small { color: rgba(255, 255, 255, 0.88) !important; } html[data-pc-theme="light"] .balance-card .balance-sub { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.32) !important; } html[data-pc-theme="light"] .balance-card .balance-sub h5 { color: #ffffff !important; } html[data-pc-theme="light"] .balance-card .btn { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(255, 255, 255, 0.95) !important; color: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 58%, #0f172a) !important; font-weight: 700 !important; } html[data-pc-theme="light"] .balance-card .btn:hover { background: color-mix(in srgb, rgb(var(--bs-primary-rgb)) 78%, #0f172a) !important; color: #fff !important; } html[data-pc-theme="light"] .modern-card h4, html[data-pc-theme="light"] .modern-card h6 { color: var(--sf-light-text) !important; } html[data-pc-theme="light"] .form-control, html[data-pc-theme="light"] .form-select { background-color: var(--sf-light-surface-raised) !important; border-color: var(--sf-light-border) !important; color: var(--sf-light-text) !important; } html[data-pc-theme="light"] .form-control:focus, html[data-pc-theme="light"] .form-select:focus { border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--sf-light-border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 14%, transparent) !important; } /* Service list / retail catalog */ html[data-pc-theme="light"] .service-list-page .sl-retail-group, html[data-pc-theme="light"] .service-list-page .sl-retail-group.modern-card { background: var(--sf-light-surface) !important; border-color: var(--sf-light-border) !important; box-shadow: var(--sf-light-shadow) !important; } html[data-pc-theme="light"] .service-list-page .sl-retail-group__head { border-bottom-color: var(--sf-light-border-soft) !important; } html[data-pc-theme="light"] .service-list-page .sl-retail-grid .imei-lp-retail-card.imei-lp-retail-card--provider, html[data-pc-theme="light"] .imei-lp-retail-card.imei-lp-retail-card--provider, html[data-pc-theme="light"] .imei-lp-retail-featured__box .imei-lp-retail-card.imei-lp-retail-card--provider { background: var(--sf-light-surface-raised) !important; border-color: var(--sf-light-border) !important; box-shadow: var(--sf-light-shadow) !important; } html[data-pc-theme="light"] .service-list-page .sl-retail-grid .imei-lp-retail-card.imei-lp-retail-card--provider:hover, html[data-pc-theme="light"] .imei-lp-retail-featured__box .imei-lp-retail-card.imei-lp-retail-card--provider:hover { background: color-mix(in srgb, var(--sf-light-surface-raised) 88%, var(--bs-primary) 12%) !important; border-color: color-mix(in srgb, var(--sf-light-border) 70%, var(--bs-primary) 30%) !important; box-shadow: var(--sf-light-shadow-hover) !important; } html[data-pc-theme="light"] .imei-lp-retail-card.imei-lp-retail-card--provider .imei-lp-retail-card__price-main, html[data-pc-theme="light"] .imei-lp-retail-card__price-main--hot { color: #ef4444 !important; } html[data-pc-theme="light"] .imei-lp-retail-card__order-btn { background: linear-gradient( 135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 78%, #334155) 100% ) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 18%, transparent) !important; } html[data-pc-theme="light"] .imei-lp-retail-card__order-btn:not(.is-disabled):hover, html[data-pc-theme="light"] .imei-lp-retail-card__order-btn:not(.is-disabled):focus-visible { filter: none !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--bs-primary) 28%, transparent), 0 0 16px color-mix(in srgb, var(--bs-primary) 20%, transparent) !important; transform: translateY(-1px); } html[data-pc-theme="light"] .sv-checkout-wrap.retail-o89-wrap .retail-o89-hero, html[data-pc-theme="light"] .sv-checkout-wrap .retail-o89-card, html[data-pc-theme="light"] .sv-checkout-wrap .group-section .modern-card { background: var(--sf-light-surface) !important; border-color: var(--sf-light-border) !important; box-shadow: var(--sf-light-shadow) !important; } html[data-pc-theme="light"] .sv-checkout-wrap.retail-o89-wrap .retail-o89-hero-title { background: none !important; -webkit-text-fill-color: var(--sf-light-text) !important; color: var(--sf-light-text) !important; } html[data-pc-theme="light"] .sv-checkout-wrap.retail-o89-wrap .retail-o89-hero .breadcrumb-item a { color: var(--sf-light-accent) !important; } html[data-pc-theme="light"] .imei-lp-retail-featured__box { background: var(--sf-light-surface) !important; border-color: var(--sf-light-border) !important; box-shadow: var(--sf-light-shadow) !important; } html[data-pc-theme="light"] .imei-lp-retail-featured__box::before { content: none !important; display: none !important; } html[data-pc-theme="light"] .btn-primary { background-color: var(--sf-light-accent) !important; border-color: color-mix(in srgb, var(--sf-light-accent) 85%, #000) !important; box-shadow: 0 2px 6px color-mix(in srgb, var(--bs-primary) 16%, transparent); } html[data-pc-theme="light"] .btn-primary:hover, html[data-pc-theme="light"] .btn-primary:focus { background-color: color-mix(in srgb, var(--sf-light-accent) 92%, #000) !important; border-color: color-mix(in srgb, var(--sf-light-accent) 80%, #000) !important; } html[data-pc-theme="light"] .imei-lp-retail-featured--v2 .imei-lp-retail-featured__box { background: var(--sf-light-surface-raised) !important; } html[data-pc-theme="light"] .imei-lp-retail-featured--v2 .imei-lp-retail-featured__title { color: var(--sf-light-text) !important; } html[data-pc-theme="light"] .imei-lp-retail-featured--v2 .imei-lp-retail-card--v2 .imei-lp-retail-card__hot--corner, html[data-pc-theme="light"] .imei-lp-retail-featured--v2 .imei-lp-retail-card--v2 .imei-lp-retail-card__hot--provider { background: transparent !important; box-shadow: none !important; }