/* ===================================================================== DARK MODE cho giao diện client (trang chủ shop) Kích hoạt khi . Chỉ override biến màu nền/chữ/viền (giữ nguyên --white cho chữ-trên-nút-màu, --primary cho màu thương hiệu). ===================================================================== */ html[data-theme="dark"] { /* Nền & bề mặt */ --body: #0e1116; --surface: #171a21; /* card, section trắng cũ */ --surface-2: #1f232c; /* input, ô nổi phụ */ --chalk: #1f232c; /* vùng xám nhạt cũ */ --intro-bg: #12151b; --green-chalk: #10331f; /* nền badge success nhạt cũ */ --green-dark: #b8f5d0; /* Chữ — tăng độ sáng để tương phản tốt trên nền tối */ --heading: #f3f5f8; --sub-heading: #d3d8e1; --text: #d6dae2; --gray: #aeb4bf; --gray-chalk: #444b55; /* Viền & bóng */ --border: #2a2f39; --primary-bshadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* --- Nền trang & body --- */ html[data-theme="dark"] body { background: var(--body); color: var(--text); } /* --- Chữ mặc định, tiêu đề --- */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .title, html[data-theme="dark"] .heading { color: var(--heading); } html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] label, html[data-theme="dark"] .text { color: var(--text); } html[data-theme="dark"] a { color: var(--sub-heading); } html[data-theme="dark"] a:hover { color: var(--primary); } /* Bootstrap util màu chết cần đảo trên nền tối */ html[data-theme="dark"] .text-dark { color: var(--heading) !important; } html[data-theme="dark"] .text-muted { color: var(--gray) !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--surface) !important; color: var(--text) !important; } /* --- Viền chung --- */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--border) !important; } html[data-theme="dark"] hr { border-color: var(--border); background: var(--border); opacity: 1; } /* --- Header / Nav --- */ html[data-theme="dark"] header, html[data-theme="dark"] .header, html[data-theme="dark"] .header-top, html[data-theme="dark"] .header-bottom, html[data-theme="dark"] .main-menu, html[data-theme="dark"] .navbar, html[data-theme="dark"] .mobile-menu, html[data-theme="dark"] .header-widget span { background-color: transparent; color: var(--text); } html[data-theme="dark"] .header-bottom, html[data-theme="dark"] .header-area, html[data-theme="dark"] .sticky-header.sticky { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .header-widget span { color: var(--sub-heading); } /* --- Card / khung sản phẩm / section --- */ html[data-theme="dark"] .card, html[data-theme="dark"] .single-product, html[data-theme="dark"] .product-card, html[data-theme="dark"] .product-wrapper, html[data-theme="dark"] .category-item, html[data-theme="dark"] .box, html[data-theme="dark"] .widget, html[data-theme="dark"] .panel, html[data-theme="dark"] .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); } /* --- Form: input / select / textarea --- */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .nice-select { background-color: var(--surface-2); border-color: var(--border); color: var(--heading); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] .form-control::placeholder { color: var(--gray); opacity: 1; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] .form-control:focus { background-color: var(--surface-2); color: var(--heading); border-color: var(--primary); box-shadow: none; } /* nice-select dropdown */ html[data-theme="dark"] .nice-select .list, html[data-theme="dark"] .nice-select .option { background: var(--surface-2); color: var(--text); } html[data-theme="dark"] .nice-select .option:hover, html[data-theme="dark"] .nice-select .option.selected, html[data-theme="dark"] .nice-select .option.focus { background: var(--chalk); } /* --- Dropdown (bootstrap) --- */ html[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); } html[data-theme="dark"] .dropdown-item { color: var(--text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--chalk); color: var(--heading); } /* --- Bảng (đơn hàng, ví...) --- */ html[data-theme="dark"] .table { color: var(--text); border-color: var(--border); } html[data-theme="dark"] .table thead th { color: var(--heading); border-color: var(--border); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, 0.03); color: var(--text); } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.05); } /* --- Modal --- */ html[data-theme="dark"] .modal-content { background: var(--surface); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--border); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* --- Pagination --- */ html[data-theme="dark"] .page-link { background: var(--surface); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: var(--white); } /* --- Nút phụ (secondary/light) --- */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background: var(--surface-2); border-color: var(--border); color: var(--heading); } html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--chalk); } /* --- Alert / badge nền nhạt --- */ html[data-theme="dark"] .alert { background: var(--surface-2); border-color: var(--border); color: var(--text); } /* --- Ảnh sản phẩm nền trắng: thêm nền sáng nhẹ để không chói --- */ html[data-theme="dark"] .product-thumb img, html[data-theme="dark"] .product-image img { background: #ffffff0d; border-radius: 6px; } /* --- Footer --- */ html[data-theme="dark"] footer, html[data-theme="dark"] .footer, html[data-theme="dark"] .footer-area, html[data-theme="dark"] .footer-top, html[data-theme="dark"] .footer-bottom { background: var(--intro-bg); color: var(--text); border-color: var(--border); } /* --- SweetAlert2 / cute-alert trên nền tối --- */ html[data-theme="dark"] .swal2-popup { background: var(--surface); color: var(--text); } html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--heading); } /* --- Scrollbar --- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--body); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333a45; border-radius: 6px; } /* ===================================================================== NÚT CHUYỂN SÁNG/TỐI ===================================================================== */ #themeToggleClient { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--heading); cursor: pointer; transition: all .2s; font-size: 17px; line-height: 1; } #themeToggleClient:hover { border-color: var(--primary); color: var(--primary); } /* ===================================================================== LOGO theo theme: sáng dùng logo_light, tối dùng logo_dark ===================================================================== */ .site-logo--dark { display: none; } html[data-theme="dark"] .site-logo--light { display: none; } html[data-theme="dark"] .site-logo--dark { display: inline-block; } /* ===================================================================== VÁ TƯƠNG PHẢN CÁC COMPONENT TRANG CHỦ ===================================================================== */ /* Nút lọc danh mục ở trang chủ */ html[data-theme="dark"] .btn-category-home { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--heading) !important; } html[data-theme="dark"] .btn-category-home:hover { border-color: var(--primary) !important; color: var(--primary) !important; } html[data-theme="dark"] .btn-category-home.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } html[data-theme="dark"] .btn-category-home *, html[data-theme="dark"] .btn-category-home.active * { color: inherit !important; } /* Tiêu đề & mô tả sản phẩm cho rõ */ html[data-theme="dark"] .product-card .product-title, html[data-theme="dark"] .product-title a, html[data-theme="dark"] .product-name, html[data-theme="dark"] .product-name a, html[data-theme="dark"] .card-title, html[data-theme="dark"] .card-title a { color: var(--heading) !important; } html[data-theme="dark"] .product-desc, html[data-theme="dark"] .product-description, html[data-theme="dark"] .product-card p { color: var(--text) !important; } /* Chữ trong các badge/nút nền tối cần rõ */ html[data-theme="dark"] .navbar-link, html[data-theme="dark"] .dropdown-arrow, html[data-theme="dark"] .navbar-info p, html[data-theme="dark"] .navbar-info span, html[data-theme="dark"] .header-top-list a, html[data-theme="dark"] .header-top-welcome p { color: var(--sub-heading) !important; } html[data-theme="dark"] .navbar-link:hover { color: var(--primary) !important; } /* Ô tìm kiếm ở header */ html[data-theme="dark"] .header-form input { background: var(--surface-2); color: var(--heading); border-color: var(--border); } html[data-theme="dark"] .header-form input::placeholder { color: var(--gray); } /* Chọn ngôn ngữ / tiền tệ ở top */ html[data-theme="dark"] .header-select select, html[data-theme="dark"] .header-top-select select { background: var(--surface-2); color: var(--heading); border-color: var(--border); } /* Nút tròn (giỏ hàng, yêu thích...) ở header */ html[data-theme="dark"] .header-widget { color: var(--heading); } /* --- Số dư ví ở header (trước đây color:blue cứng, tối trên nền tối) --- */ .wallet-amount { color: #2f6fed; font-weight: 600; } html[data-theme="dark"] .wallet-amount, html[data-theme="dark"] .text-wallet { color: #6aa8ff !important; } /* --- Badge phương thức API (GET/POST) ở document-api: xanh lá, chữ trắng rõ --- */ html[data-theme="dark"] .input-group-text { background: #157347; border-color: #1a8a55; color: #ffffff; font-weight: 600; } /* --- Nút chuyển theme trên MOBILE (trong header-media-group) --- */ .theme-toggle-mobile { background: transparent; border: none; color: var(--heading); font-size: 18px; padding: 6px 8px; cursor: pointer; line-height: 1; } .theme-toggle-mobile:hover { color: var(--primary); } /* --- Patch chung: chữ inline màu tối (blue/green/xám) cho sáng trên nền tối --- */ html[data-theme="dark"] [style*="color: blue"], html[data-theme="dark"] [style*="color:blue"] { color: #6aa8ff !important; } html[data-theme="dark"] [style*="color: green"], html[data-theme="dark"] [style*="color:green"] { color: #4ade80 !important; } html[data-theme="dark"] [style*="color: #2d3748"], html[data-theme="dark"] [style*="color:#2d3748"], html[data-theme="dark"] [style*="color: #2c5282"] { color: var(--heading) !important; } /* --- Trang nạp tiền Crypto (.crypto-*) --- */ html[data-theme="dark"] .crypto-input-field { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--heading) !important; } html[data-theme="dark"] .crypto-input-field:disabled, html[data-theme="dark"] .crypto-input-field:read-only { background: var(--surface-2) !important; color: #ff8a8a !important; } html[data-theme="dark"] .crypto-received-amount { background: var(--surface) !important; color: #ff8a8a !important; } html[data-theme="dark"] .crypto-info-box { background: rgba(49, 130, 206, 0.16) !important; border-left-color: #3182ce !important; } html[data-theme="dark"] .crypto-info-text { color: #bcdcff !important; } html[data-theme="dark"] .crypto-received-box { background: rgba(236, 201, 75, 0.14) !important; border-color: rgba(236, 201, 75, 0.4) !important; } html[data-theme="dark"] .crypto-received-label { color: #f6e05e !important; }