/* =========================================================================
   DARK MODE — client (giao diện tối) — gated by html[data-theme="dark"]
   Tự động theo biến CSS + override các surface/hardcoded. Bật/tắt bằng nút ở header.
   ========================================================================= */
html[data-theme="dark"] {
  --body: #0c121c;
  --text: #c4ccdb;
  --heading: #eef2f9;
  --sub-heading: #aeb8c9;
  --gray: #94a1b4;
  --gray-chalk: #3a4557;
  --border: #2f3b54;
  --chalk: #253149;
  --intro-bg: #14202f;
  --green-chalk: #12331f;
  --green-dark: #d7ffe6;
  --primary-bshadow: 0px 15px 35px 0px rgba(0,0,0,0.55);
  --primary-tshadow: 2px 3px 8px rgba(0,0,0,0.55);
  /* surface tokens riêng cho dark */
  --surface: #182233;
  --surface2: #253149;
  --surface-hover: #303e5a;
  color-scheme: dark;
}

html[data-theme="dark"] body { background: var(--body); color: var(--text); }
/* (đã gỡ rule h1-h6: CSS gốc đã dùng var(--heading); rule này từng xoá màu của tiêu đề có màu riêng) */
html[data-theme="dark"] hr { border-color: var(--border); opacity: .5; }

/* ---- surfaces (nền panel/card/sidebar/modal/dropdown...) ---- */
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .dropdown-list li a,
html[data-theme="dark"] .dropdown-position-list,
html[data-theme="dark"] .dropdown-position-list::before,
html[data-theme="dark"] .dropdown-position-list li a,
html[data-theme="dark"] .megamenu,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dandik,
html[data-theme="dark"] .bamdik,
html[data-theme="dark"] .table-shop .action-plus i,
html[data-theme="dark"] .table-shop .action-minus i,
html[data-theme="dark"] .table-action .view i,
html[data-theme="dark"] .table-action .wish i,
html[data-theme="dark"] .table-action .trash i,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .modal-form,
html[data-theme="dark"] .order-track-item::before,
html[data-theme="dark"] .order-track-item i,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .sidebar_profile,
html[data-theme="dark"] .product-standard,
html[data-theme="dark"] .brand-media::before,
html[data-theme="dark"] .choose-icon i,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .offer-div,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .team-overlay a,
html[data-theme="dark"] .header-part,
html[data-theme="dark"] .header-part.active,
html[data-theme="dark"] .header-part.active .header-form,
html[data-theme="dark"] .header-form:focus-within,
html[data-theme="dark"] .navbar-part,
html[data-theme="dark"] .nav-sidebar,
html[data-theme="dark"] .nav-close i,
html[data-theme="dark"] .cart-sidebar,
html[data-theme="dark"] .cart-close i,
html[data-theme="dark"] .category-sidebar,
html[data-theme="dark"] .category-close i,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .product-view,
html[data-theme="dark"] .news-form,
html[data-theme="dark"] .intro-icon i,
html[data-theme="dark"] .footer-social li a,
html[data-theme="dark"] .blog-widget,
html[data-theme="dark"] .shop-filter,
html[data-theme="dark"] .shop-widget,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .table-product-list tr,
html[data-theme="dark"] .card-hot-deal,
html[data-theme="dark"] .card-price-product-list,
html[data-theme="dark"] .label_favorite,
html[data-theme="dark"] thead,
html[data-theme="dark"] tfoot,
html[data-theme="dark"] .user-form-card,
html[data-theme="dark"] .user-form-remind,
html[data-theme="dark"] .footer-part,
html[data-theme="dark"] .product-box4,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .box-img-product,
html[data-theme="dark"] .box-intro,
html[data-theme="dark"] .skeleton-card,
html[data-theme="dark"] #openModal .modal-dialog.modal-xl .modal-content,
html[data-theme="dark"] .pv-container,
html[data-theme="dark"] .pv-uid-list,
html[data-theme="dark"] .pv-coupon-input,
html[data-theme="dark"] .lb-header,
html[data-theme="dark"] .lb-tab,
html[data-theme="dark"] .lb-row {
  background: var(--surface) !important;
  border-color: var(--border);
}

/* =========================================================================
   v4 AUTO — sinh tự động từ quét TOÀN BỘ 30 file CSS client (extract_all.py).
   Mọi selector có nền sáng thật (var(--white)/hex/rgb/named/gradient) -> tối.
   Nền trơn: chỉ đè background-color (giữ icon/mũi tên ở background-image).
   Gradient sáng: đè cả background. Trạng thái hover/active: --surface-hover.
   ========================================================================= */
html[data-theme="dark"],
html[data-theme="dark"] .brand-slider li,
html[data-theme="dark"] .author-single,
html[data-theme="dark"] .blog-details-content,
html[data-theme="dark"] .blog-details-profile,
html[data-theme="dark"] .blog-details-navigate,
html[data-theme="dark"] .blog-details-comment,
html[data-theme="dark"] .comment-reply input,
html[data-theme="dark"] .blog-details-form,
html[data-theme="dark"] .coming-form input,
html[data-theme="dark"] .coming-form button i,
html[data-theme="dark"] .coming-social a,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .contact-map,
html[data-theme="dark"] .faq-child,
html[data-theme="dark"] .header-top p a,
html[data-theme="dark"] .banner-category,
html[data-theme="dark"] .banner-category-dropdown,
html[data-theme="dark"] .banner-wrap,
html[data-theme="dark"] .bg1,
html[data-theme="dark"] .bg2,
html[data-theme="dark"] .bg3,
html[data-theme="dark"] .table-scroll,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .dropdown-list li a,
html[data-theme="dark"] .dropdown-position-list,
html[data-theme="dark"] .dropdown-position-list::before,
html[data-theme="dark"] .dropdown-position-list li a,
html[data-theme="dark"] .megamenu,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dandik,
html[data-theme="dark"] .bamdik,
html[data-theme="dark"] .table-shop .action-plus i,
html[data-theme="dark"] .table-shop .action-minus i,
html[data-theme="dark"] .table-action .view i,
html[data-theme="dark"] .table-action .wish i,
html[data-theme="dark"] .table-action .trash i,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .modal-form,
html[data-theme="dark"] .order-track-item::before,
html[data-theme="dark"] .order-track-item i,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .sidebar_profile,
html[data-theme="dark"] .product-standard,
html[data-theme="dark"] .brand-media::before,
html[data-theme="dark"] .choose-icon i,
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .offer-div,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .profile-card ul li button,
html[data-theme="dark"] .payment-card button,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .team-overlay a,
html[data-theme="dark"] .header-part,
html[data-theme="dark"] .navbar-part,
html[data-theme="dark"] .nav-sidebar,
html[data-theme="dark"] .nav-close i,
html[data-theme="dark"] .cart-sidebar,
html[data-theme="dark"] .cart-close i,
html[data-theme="dark"] .category-sidebar,
html[data-theme="dark"] .category-close i,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .product-view,
html[data-theme="dark"] .news-form,
html[data-theme="dark"] .intro-icon i,
html[data-theme="dark"] .footer-social li a,
html[data-theme="dark"] .blog-widget,
html[data-theme="dark"] .shop-filter,
html[data-theme="dark"] .shop-widget,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-default.disabled,
html[data-theme="dark"] .btn-default:disabled,
html[data-theme="dark"] #top-menu li a,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .progress-container,
html[data-theme="dark"] .table-product-list tr,
html[data-theme="dark"] .card-hot-deal,
html[data-theme="dark"] .card-price-product-list,
html[data-theme="dark"] .slider::after,
html[data-theme="dark"] .label_favorite,
html[data-theme="dark"] thead,
html[data-theme="dark"] tfoot,
html[data-theme="dark"] .btn-more-new,
html[data-theme="dark"] .orderlist-filter,
html[data-theme="dark"] .orderlist,
html[data-theme="dark"] .product-navigation,
html[data-theme="dark"] .product-nav-popup,
html[data-theme="dark"] .product-nav-popup::before,
html[data-theme="dark"] .details-content,
html[data-theme="dark"] .product-details-frame,
html[data-theme="dark"] .review-reply input,
html[data-theme="dark"] .user-form-card,
html[data-theme="dark"] .user-form-divider p,
html[data-theme="dark"] .user-form-remind,
html[data-theme="dark"] .footer-part,
html[data-theme="dark"] #top-menu-left li a,
html[data-theme="dark"] #top-menu-right li a,
html[data-theme="dark"] .product-box4,
html[data-theme="dark"] .product-head-box4,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .box-img-product,
html[data-theme="dark"] .btn-see-more,
html[data-theme="dark"] .row-menu-home .form-provide-home,
html[data-theme="dark"] .box-intro,
html[data-theme="dark"] .skeleton-card,
html[data-theme="dark"] #openModal .modal-dialog.modal-xl .modal-content,
html[data-theme="dark"] .pv-container,
html[data-theme="dark"] .pv-close,
html[data-theme="dark"] .pv-uid-list,
html[data-theme="dark"] .pv-uid-list thead th,
html[data-theme="dark"] .pv-uid-list tbody tr.pv-selected,
html[data-theme="dark"] .pv-pagination button,
html[data-theme="dark"] .pv-payment,
html[data-theme="dark"] .pv-coupon-input,
html[data-theme="dark"] .lb-header,
html[data-theme="dark"] .lb-tab,
html[data-theme="dark"] .lb-row {
  background-color: var(--surface) !important;
  border-color: var(--border);
}
html[data-theme="dark"] .countdown-part,
html[data-theme="dark"] .skeleton-image,
html[data-theme="dark"] .skeleton-title,
html[data-theme="dark"] .skeleton-text,
html[data-theme="dark"] .skeleton-stock,
html[data-theme="dark"] .skeleton-sales,
html[data-theme="dark"] .skeleton-price,
html[data-theme="dark"] .skeleton-button,
html[data-theme="dark"] .skeleton-menu-title,
html[data-theme="dark"] .skeleton-menu-item,
html[data-theme="dark"] .skeleton-category-btn {
  background: var(--surface) !important;
  border-color: var(--border);
}
html[data-theme="dark"] .btn-inline:hover,
html[data-theme="dark"] .category-overlay a i:hover,
html[data-theme="dark"] .brand-overlay a i:hover,
html[data-theme="dark"] .contact-card:hover i,
html[data-theme="dark"] .contact-card.active i,
html[data-theme="dark"] .header-part.active,
html[data-theme="dark"] .header-part.active .header-form,
html[data-theme="dark"] .header-form:focus-within,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default.focus,
html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .box-product-main .btn-see-more:hover,
html[data-theme="dark"] .pv-uid-list tbody tr:hover,
html[data-theme="dark"] .pv-pagination button:hover {
  background-color: var(--surface-hover) !important;
}
/* lớp phủ bán trong suốt: giữ alpha 0.6, chỉ đổi trắng -> tối */
html[data-theme="dark"] #top-menu i,
html[data-theme="dark"] .product-disable::after,
html[data-theme="dark"] #top-menu-left i,
html[data-theme="dark"] #top-menu-right i {
  background-color: rgba(12, 18, 28, 0.6) !important;
}
/* lớp phủ bán trong suốt: giữ alpha 0.9, chỉ đổi trắng -> tối */
html[data-theme="dark"] .cart-media button i {
  background-color: rgba(12, 18, 28, 0.9) !important;
}

/* ---- v12 AUTO: viền/vạch kẻ xám sáng -> var(--border) (quét CSS + <style> trong views) ---- */
html[data-theme="dark"] ' + '.pfx-alt-item,
html[data-theme="dark"] ' + '.pfx-foot-btn,
html[data-theme="dark"] .bank-card,
html[data-theme="dark"] .bank-info-row .info-value .copy-btn,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .comment-avatar img,
html[data-theme="dark"] .crypto-input-field,
html[data-theme="dark"] .details-thumb li img,
html[data-theme="dark"] .filter-select:focus-within,
html[data-theme="dark"] .header-part.active .header-widget sup,
html[data-theme="dark"] .header-widget sup,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .nav-user img,
html[data-theme="dark"] .policy-modal .btn-secondary,
html[data-theme="dark"] .posterd,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .profile-image a img,
html[data-theme="dark"] .pv-close,
html[data-theme="dark"] .pv-coupon-input,
html[data-theme="dark"] .pv-pagination button,
html[data-theme="dark"] .pv-payment,
html[data-theme="dark"] .review-avatar img,
html[data-theme="dark"] .row-menu-home .form-provide-home,
html[data-theme="dark"] .shop-widget,
html[data-theme="dark"] .testi-img img {
  border-color: var(--border) !important;
}
html[data-theme="dark"] .bank-info-row,
html[data-theme="dark"] .header-select .nice-select::after,
html[data-theme="dark"] .policy-modal .policy-modal-header,
html[data-theme="dark"] .product-body-box4,
html[data-theme="dark"] .product-footer-box4,
html[data-theme="dark"] .pv-header,
html[data-theme="dark"] .pv-payment-title,
html[data-theme="dark"] .pv-uid-list,
html[data-theme="dark"] .pv-uid-list tbody tr,
html[data-theme="dark"] .pv-uid-list thead th,
html[data-theme="dark"] .table-product-list tbody tr {
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .border-end-box4,
html[data-theme="dark"] .header-select .nice-select::after {
  border-right-color: var(--border) !important;
}
html[data-theme="dark"] .bank-card-footer,
html[data-theme="dark"] .policy-modal .policy-modal-footer,
html[data-theme="dark"] .pv-divider,
html[data-theme="dark"] .pv-divider-bold,
html[data-theme="dark"] .pv-uid-list {
  border-top-color: var(--border) !important;
}

/* ---- v17 AUTO: khôi phục HOVER (rule !important ở trạng thái thường từng đè mất :hover gốc) ---- */
html[data-theme="dark"] .author-social li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .author-meta li:hover {
  background: var(--primary) !important;
  color: var(--white) !important;
}
html[data-theme="dark"] .author-meta li:hover i {
  color: var(--white) !important;
}
html[data-theme="dark"] .blog-details-meta li a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-details-share li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-details-tag li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-details-profile ul li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-details-prev h4 a:hover,
html[data-theme="dark"] .blog-details-next h4 a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-details-prev .nav-arrow:hover,
html[data-theme="dark"] .blog-details-next .nav-arrow:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .comment-meta a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .comment-reply button:hover {
  background: var(--heading) !important;
}
html[data-theme="dark"] .blog-btn:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .coming-form button i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .coming-social a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .faq-child:hover .faq-que button {
  color: var(--primary) !important;
}
html[data-theme="dark"] .header-top p a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .navbar-select:hover i {
  color: var(--primary) !important;
}
html[data-theme="dark"] .banner-category-item a:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .breadcrumb-item a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .backtop:hover {
  color: var(--white) !important;
}
html[data-theme="dark"] .btn-inline:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .btn-outline:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .dropdown-arrow:hover::before {
  color: var(--primary) !important;
}
html[data-theme="dark"] .dropdown-link:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .dropdown-link:hover::before {
  color: var(--primary) !important;
}
html[data-theme="dark"] .dropdown-list li a:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .dropdown-position-list li a:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .megamenu-list li a:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .form-control[type=file]::-webkit-file-upload-button:hover,
html[data-theme="dark"] .form-control[type=file]::file-selector-button:hover {
  background-color: transparent !important;
}
html[data-theme="dark"] .tab-link:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .page-link:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .dandik:hover,
html[data-theme="dark"] .bamdik:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .product-action button i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .table-vendor a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .table-action .view i:hover {
  color: var(--white) !important;
  background: var(--green) !important;
}
html[data-theme="dark"] .table-action .trash i:hover {
  color: var(--white) !important;
  background: var(--red) !important;
}
html[data-theme="dark"] .modal-close:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .suggest-card:hover::before {
  background: rgba(17, 151, 68, 0.9) !important;
}
html[data-theme="dark"] .product-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .product-card:hover .product-add {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .product-rating a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .product-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .product-disable:hover {
  border-color: #4a5874 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .product-disable:hover .product-add {
  color: var(--heading) !important;
  background: var(--border) !important;
}
html[data-theme="dark"] .feature-card:hover {
  border: 1px solid var(--primary) !important;
  box-shadow: 10px 6px 17px 3px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .feature-card:hover .feature-add {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .feature-rating a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .feature-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .sidebar_profile:hover {
  border-color: var(--primary) !important;
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .sidebar_profile:hover .standard-add {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .product-standard:hover {
  border-color: var(--primary) !important;
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .product-standard:hover .standard-add {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .standard-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .standard-rating a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .standard-action button i:hover,
html[data-theme="dark"] .standard-action a i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .category-overlay a i:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .brand-wrap:hover .brand-media::before {
  border-color: var(--primary) !important;
}
html[data-theme="dark"] .brand-overlay a i:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .choose-card:hover i {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-meta li a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-title a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .account-title button:hover,
html[data-theme="dark"] .account-title a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .profile-card ul .edit:hover {
  color: var(--white) !important;
  background: var(--green) !important;
}
html[data-theme="dark"] .profile-card ul .trash:hover {
  color: var(--white) !important;
  background: var(--red) !important;
}
html[data-theme="dark"] .payment-card .trash:hover {
  color: var(--white) !important;
  background: var(--red) !important;
}
html[data-theme="dark"] .contact-card:hover {
  background: var(--primary) !important;
}
html[data-theme="dark"] .contact-card:hover i {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .contact-card:hover h4,
html[data-theme="dark"] .contact-card:hover p,
html[data-theme="dark"] .contact-card:hover a {
  color: var(--white) !important;
}
html[data-theme="dark"] .branch-card:hover::before {
  background: rgba(17, 151, 68, 0.85) !important;
}
html[data-theme="dark"] .team-meta h5 a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .header-top-list li a:hover {
  color: var(--green-chalk) !important;
}
html[data-theme="dark"] .header-part.active .header-widget:hover i {
  background: var(--primary) !important;
}
html[data-theme="dark"] .header-widget:hover i {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .header-widget:hover span {
  color: var(--primary) !important;
}
html[data-theme="dark"] .header-form button i:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .header-user i:hover,
html[data-theme="dark"] .header-src i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .navbar-link:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .navbar-focus-list li a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .nav-close i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .nav-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .nav-link:hover {
  color: var(--primary) !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .cart-close i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .cart-media button i:hover {
  color: var(--white) !important;
  background: var(--red) !important;
}
html[data-theme="dark"] .cart-checkout-btn:hover {
  background: var(--heading) !important;
}
html[data-theme="dark"] .category-close i:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .mobile-menu a:hover,
html[data-theme="dark"] .mobile-menu button:hover {
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .mobile-menu a:hover i,
html[data-theme="dark"] .mobile-menu button:hover i {
  color: var(--primary) !important;
}
html[data-theme="dark"] .mobile-menu a:hover span,
html[data-theme="dark"] .mobile-menu button:hover span {
  color: var(--primary) !important;
}
html[data-theme="dark"] .view-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .view-meta a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .view-rating a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .view-tag-list li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .view-share-list li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .intro-wrap:hover .intro-icon i {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .footer-social li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .footer-links ul li a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-widget-text a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-widget-category li:hover a {
  color: var(--primary) !important;
}
html[data-theme="dark"] .blog-widget-category li:hover a span {
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-widget-tag li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .blog-widget-social li a:hover {
  background: var(--primary) !important;
}
html[data-theme="dark"] .shop-widget-btn:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .shop-widget-list li:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .filter-action a i:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .filter-action .active i:hover {
  color: var(--white) !important;
}
html[data-theme="dark"] .btn-more:hover {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] .btn-buy:hover {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] .slideshow-prev:hover,
html[data-theme="dark"] .slideshow-next:hover {
  background-color: rgba(0, 0, 0, 0.8) !important;
}
html[data-theme="dark"] .slideshow-dot:hover {
  background-color: #717171 !important;
}
html[data-theme="dark"] .btn:hover {
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="dark"] .btn-default:hover {
  color: var(--heading) !important;
  background-color: var(--surface-hover) !important;
  border-color: #b7b7b7 !important;
}
html[data-theme="dark"] .dropdown-menu a:hover {
  background-color: var(--surface-hover) !important;
  color: var(--heading) !important;
}
html[data-theme="dark"] .btn-save:hover {
  box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff !important;
}
html[data-theme="dark"] .details-preview li img:hover {
  border: 1px solid var(--primary) !important;
  box-shadow: 10px 6px 17px 3px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .product-navigation li a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .details-content:hover {
  border: 1px solid var(--primary) !important;
  box-shadow: 10px 6px 17px 3px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="dark"] .details-name a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .details-meta a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .details-rating a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .details-tag-list li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .details-share-list li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .details-action-group a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .details-wish.active:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .review-meta a:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] .review-reply button:hover {
  background: var(--heading) !important;
}
html[data-theme="dark"] .profile-btn a:hover {
  background: var(--green) !important;
}
html[data-theme="dark"] .wallet-card:hover {
  background: var(--primary) !important;
}
html[data-theme="dark"] .wallet-card:hover p,
html[data-theme="dark"] .wallet-card:hover h3 {
  color: var(--white) !important;
}
html[data-theme="dark"] .wallet-suggest ul li a:hover {
  color: var(--white) !important;
  background: var(--primary) !important;
}
html[data-theme="dark"] .box-product-main .btn-see-more:hover {
  background-color: var(--surface-hover) !important;
}
html[data-theme="dark"] .btn-custom-sold:hover {
  background-color: #2e2e2e !important;
  color: #fff !important;
}
html[data-theme="dark"] .btn-custom-available:hover {
  background-color: #f64444 !important;
  color: #fff !important;
}
html[data-theme="dark"] .btn-category-home:hover {
  background-color: #555 !important;
  color: #fff !important;
}
html[data-theme="dark"] .pv-close:hover {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}
html[data-theme="dark"] .pv-uid-list tbody tr:hover {
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .pv-pagination button:hover {
  background: var(--surface-hover) !important;
  border-color: #9ca3af !important;
}
html[data-theme="dark"] .pv-btn-pay:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}
html[data-theme="dark"] .modal-close-mobile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .leaderboard-btn:hover {
  color: var(--white) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25) !important;
}
html[data-theme="dark"] .lb-tab:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .lb-row:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}
html[data-theme="dark"] .hotline-bar>a:hover {
  color: #fff !important;
}
html[data-theme="dark"] .cmsnt-tgw:hover {
  color: #fff !important;
}
html[data-theme="dark"] .tg-btn:hover {
  color: #fff !important;
}
html[data-theme="dark"] #exportAccountColumnsList .list-group-item:hover {
  border-color: rgba(102, 126, 234, 0.5) !important;
  background-color: rgba(102, 126, 234, 0.03) !important;
}
html[data-theme="dark"] .bank-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12) !important;
}
html[data-theme="dark"] .bank-info-row .info-value .copy-btn:hover {
  background: var(--surface-hover) !important;
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}
html[data-theme="dark"] .transfer-content-box .tc-value .copy-btn:hover {
  background: #dc2626 !important;
  color: #fff !important;
}
html[data-theme="dark"] ' + '.pfx-alt-item:hover {
  border-color: #2563eb !important;
  background: var(--surface-hover) !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.12) !important;
}
html[data-theme="dark"] ' + '.pfx-alt-item:hover .pfx-alt-ic {
  background: #2563eb !important;
  color: #fff !important;
}
html[data-theme="dark"] ' + '.pfx-alt-item:hover .pfx-alt-go {
  color: #2563eb !important;
}
html[data-theme="dark"] ' + '.pfx-foot-btn:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] .crypto-submit-btn:hover {
  box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.5) !important;
}
html[data-theme="dark"] #cnetList .cnet-opt:hover {
  background: var(--surface-hover) !important;
}
html[data-theme="dark"] #cnetBtn:hover {
  border-color: var(--primary) !important;
}
html[data-theme="dark"] .copy-btn:hover {
  background: #138496 !important;
}
html[data-theme="dark"] .pp-btn-secondary:hover {
  background: #5a6268 !important;
}
html[data-theme="dark"] .pp-btn-primary:hover {
  background: #0069d9 !important;
}
html[data-theme="dark"] .qr-wrapper:hover {
  border-color: #007bff !important;
  background-color: var(--surface-hover) !important;
}
html[data-theme="dark"] .method-card:hover {
  border-color: #0d6efd !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
}
html[data-theme="dark"] #vatTabs .nav-link:hover:not(.active) {
  color: var(--heading) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

/* ---- buttons/chips nền trắng -> surface2 ---- */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-inline:hover,
html[data-theme="dark"] .btn-see-more,
html[data-theme="dark"] .btn-more-new,
html[data-theme="dark"] .profile-card ul li button,
html[data-theme="dark"] .payment-card button,
html[data-theme="dark"] .pv-pagination button,
html[data-theme="dark"] .btn-category-home,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .page-link {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}

/* ---- chữ tối -> sáng ---- */
html[data-theme="dark"] .home-heading h3,
html[data-theme="dark"] #top-menu li a,
html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .btn-more-new,
html[data-theme="dark"] #top-menu-left li a,
html[data-theme="dark"] #top-menu-right li a,
html[data-theme="dark"] .btn-category-home,
html[data-theme="dark"] .btn-category-home:focus {
  color: var(--text) !important;
}

/* ---- form controls ---- */
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .nice-select {
  background-color: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .header-form input { background: transparent !important; }
html[data-theme="dark"] ::placeholder { color: var(--gray) !important; opacity: 1; }
html[data-theme="dark"] .nice-select .list { background-color: var(--surface2) !important; border-color: var(--border); }
html[data-theme="dark"] .nice-select .option { background-color: transparent !important; color: var(--text) !important; }
html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus { background-color: var(--surface-hover) !important; }

/* ---- Bootstrap components ---- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; }
html[data-theme="dark"] .card { background-color: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer { background-color: var(--surface2); border-color: var(--border); }
html[data-theme="dark"] .list-group-item { background-color: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .table { color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--border); }
html[data-theme="dark"] .dropdown-menu { background-color: 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-color: var(--surface-hover); color: var(--heading); }
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"] .text-dark { color: var(--text) !important; }
html[data-theme="dark"] .text-muted { color: var(--gray) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--surface); border-color: var(--border) var(--border) var(--surface); color: color-mix(in srgb, var(--primary) 60%, #fff); }
html[data-theme="dark"] .nav-link.active { background: color-mix(in srgb, var(--primary) 18%, transparent); color: color-mix(in srgb, var(--primary) 60%, #fff); }

/* ---- SweetAlert2 / cute-alert / notyf ---- */
html[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: var(--text) !important; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .cute-alert .body { background: var(--surface) !important; color: var(--text) !important; }
html[data-theme="dark"] .notyf__toast { color: #fff; }

/* ---- 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: var(--surface2); border-radius: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--surface-hover); }

/* =========================================================================
   NÚT BẬT/TẮT DARK MODE (theme toggle) — hiển thị ở header-widget-group
   ========================================================================= */
.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


/* =========================================================================
   VÁ THÊM (v2) — bắt inline-style nền sáng + class per-page (recharge...) để
   không còn mảng trắng. TẤT CẢ scope html[data-theme="dark"] nên KHÔNG đụng
   giao diện sáng. Ảnh (QR) được chừa lại nền trắng.
   ========================================================================= */

/* ---- Inline background trắng -> surface (chừa img/svg/canvas = QR/logo) ---- */
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: white" i] {
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--border) !important;
}

/* ---- Inline background xám nhạt -> surface2 ---- */
html[data-theme="dark"] *[style*="background:#f7fafc" i],
html[data-theme="dark"] *[style*="background: #f7fafc" i],
html[data-theme="dark"] *[style*="background:#f8fafc" i],
html[data-theme="dark"] *[style*="background: #f8fafc" i],
html[data-theme="dark"] *[style*="background:#f1f5f9" i],
html[data-theme="dark"] *[style*="background: #f1f5f9" i],
html[data-theme="dark"] *[style*="background:#fafafa" i],
html[data-theme="dark"] *[style*="background:#f9fafb" i],
html[data-theme="dark"] *[style*="background:#f8f9fa" i] {
  background-color: var(--surface2) !important;
  border-color: var(--border) !important;
}

/* ---- Hộp cảnh báo/ghi chú màu hổ phách (amber) -> nền tối ánh hổ phách ---- */
html[data-theme="dark"] *[style*="#fff7ed" i],
html[data-theme="dark"] *[style*="#fffbeb" i],
html[data-theme="dark"] *[style*="#fff3cd" i],
html[data-theme="dark"] *[style*="#fef3c7" i] {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.38) !important;
  color: #f2c98a !important;
}
html[data-theme="dark"] *[style*="#fff7ed" i] b,
html[data-theme="dark"] *[style*="#fffbeb" i] b,
html[data-theme="dark"] *[style*="#fff3cd" i] b { color: #ffd9a0 !important; }

/* ---- Chừa nền trắng cho ẢNH (QR) & khối bọc QR ---- */
html[data-theme="dark"] img[style*="background" i] { background:#fff !important; }
/* Chỉ ẢNH QR (ảnh tự có nền + lề trắng để quét) và ô logo ngân hàng giữ trắng; khối bọc theo nền tối */
html[data-theme="dark"] .bank-card-header .bank-icon.has-logo { background:#fff !important; }
html[data-theme="dark"] .bank-qr-wrap { background: var(--surface) !important; }
html[data-theme="dark"] .bank-qr-wrap img { background:#fff !important; border-color: var(--border) !important; }

/* =========================================================================
   TRANG NẠP CRYPTO (.crypto-*)
   ========================================================================= */
html[data-theme="dark"] .crypto-form-inner { background: var(--surface) !important; }
html[data-theme="dark"] .crypto-input-field { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .crypto-input-field:focus { background: var(--surface-hover) !important; }
html[data-theme="dark"] .crypto-received-amount { background: var(--surface2) !important; color: var(--heading) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .crypto-tabs { background: var(--surface2) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .crypto-tab-btn { color: var(--gray); }
html[data-theme="dark"] .crypto-tab-btn.active { background: var(--surface) !important; color: color-mix(in srgb, var(--primary) 60%, #fff) !important; }
html[data-theme="dark"] .crypto-input-label,
html[data-theme="dark"] .crypto-received-label { color: var(--sub-heading) !important; }
html[data-theme="dark"] .crypto-info-box { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* =========================================================================
   TRANG NẠP BANK (.bank-*)
   ========================================================================= */
html[data-theme="dark"] .bank-card { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .bank-card-footer { background: var(--surface2) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .bank-info-row .info-value .copy-btn { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .bank-info-row,
html[data-theme="dark"] .bank-info-label { color: var(--text) !important; }
html[data-theme="dark"] .pfx-alt-item { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* ---- Bọc chung: card/box còn nền trắng do class per-page (an toàn, dark-scoped) ---- */
html[data-theme="dark"] .export-radio-box,
html[data-theme="dark"] .box-white,
html[data-theme="dark"] .white-box,
html[data-theme="dark"] .content-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); }

/* ---- Alert Bootstrap trong dark ---- */
html[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.38) !important; color: #f2c98a !important; }
html[data-theme="dark"] .alert-info { background: color-mix(in srgb, var(--primary) 14%, transparent) !important; border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important; color: color-mix(in srgb, var(--primary) 45%, #fff) !important; }
html[data-theme="dark"] .alert-info p { color: color-mix(in srgb, var(--primary) 60%, #fff) !important; }
html[data-theme="dark"] .alert-success { background: rgba(17,183,107,.12) !important; border-color: rgba(17,183,107,.38) !important; color: #9be7c2 !important; }
html[data-theme="dark"] .alert-danger { background: rgba(239,56,56,.12) !important; border-color: rgba(239,56,56,.4) !important; color: #ffb3b3 !important; }

/* ---- Hộp ghi chú/nội dung chuyển khoản (đỏ) -> nền tối ánh đỏ ---- */
html[data-theme="dark"] .transfer-content-box,
html[data-theme="dark"] *[style*="#fee2e2" i],
html[data-theme="dark"] *[style*="#fef3f2" i],
html[data-theme="dark"] *[style*="#fff1f0" i],
html[data-theme="dark"] *[style*="#fef2f2" i] {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
}
html[data-theme="dark"] .transfer-content-box .tc-label,
html[data-theme="dark"] .transfer-content-box .tc-value,
html[data-theme="dark"] #bpNote,
html[data-theme="dark"] *[style*="#fee2e2" i] > div { color: #fca5a5 !important; }
/* ---- v19 AUTO: HTML chủ shop tự nhập (dạng rgb(...) của trình soạn thảo, thẻ <font color>) ---- */
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(255, 255, 255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(255, 255, 255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(255, 255, 255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(255, 255, 255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(255,255,255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(255,255,255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(255,255,255)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(255,255,255)" i] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(248, 249, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(248, 249, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(248, 249, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(248, 249, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(250, 250, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(250, 250, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(250, 250, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(250, 250, 250)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(245, 245, 245)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(245, 245, 245)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(245, 245, 245)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(245, 245, 245)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(244, 244, 244)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(244, 244, 244)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(244, 244, 244)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(244, 244, 244)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(246, 246, 246)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(246, 246, 246)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(246, 246, 246)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(246, 246, 246)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(247, 247, 247)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(247, 247, 247)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(247, 247, 247)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(247, 247, 247)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(249, 249, 249)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(249, 249, 249)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(249, 249, 249)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(249, 249, 249)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(241, 241, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(241, 241, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(241, 241, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(241, 241, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(240, 240, 240)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(240, 240, 240)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(240, 240, 240)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(240, 240, 240)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(238, 238, 238)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(238, 238, 238)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(238, 238, 238)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(238, 238, 238)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:rgb(236, 240, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: rgb(236, 240, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:rgb(236, 240, 241)" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: rgb(236, 240, 241)" i] {
  background-color: var(--surface2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] [style^="color:rgb(0, 0, 0)" i],
html[data-theme="dark"] [style*=";color:rgb(0, 0, 0)" i],
html[data-theme="dark"] [style*="; color:rgb(0, 0, 0)" i],
html[data-theme="dark"] [style^="color: rgb(0, 0, 0)" i],
html[data-theme="dark"] [style*=";color: rgb(0, 0, 0)" i],
html[data-theme="dark"] [style*="; color: rgb(0, 0, 0)" i],
html[data-theme="dark"] [style^="color:rgb(0,0,0)" i],
html[data-theme="dark"] [style*=";color:rgb(0,0,0)" i],
html[data-theme="dark"] [style*="; color:rgb(0,0,0)" i],
html[data-theme="dark"] [style^="color: rgb(0,0,0)" i],
html[data-theme="dark"] [style*=";color: rgb(0,0,0)" i],
html[data-theme="dark"] [style*="; color: rgb(0,0,0)" i],
html[data-theme="dark"] [style^="color:rgb(17, 17, 17)" i],
html[data-theme="dark"] [style*=";color:rgb(17, 17, 17)" i],
html[data-theme="dark"] [style*="; color:rgb(17, 17, 17)" i],
html[data-theme="dark"] [style^="color: rgb(17, 17, 17)" i],
html[data-theme="dark"] [style*=";color: rgb(17, 17, 17)" i],
html[data-theme="dark"] [style*="; color: rgb(17, 17, 17)" i],
html[data-theme="dark"] [style^="color:rgb(34, 34, 34)" i],
html[data-theme="dark"] [style*=";color:rgb(34, 34, 34)" i],
html[data-theme="dark"] [style*="; color:rgb(34, 34, 34)" i],
html[data-theme="dark"] [style^="color: rgb(34, 34, 34)" i],
html[data-theme="dark"] [style*=";color: rgb(34, 34, 34)" i],
html[data-theme="dark"] [style*="; color: rgb(34, 34, 34)" i],
html[data-theme="dark"] [style^="color:rgb(51, 51, 51)" i],
html[data-theme="dark"] [style*=";color:rgb(51, 51, 51)" i],
html[data-theme="dark"] [style*="; color:rgb(51, 51, 51)" i],
html[data-theme="dark"] [style^="color: rgb(51, 51, 51)" i],
html[data-theme="dark"] [style*=";color: rgb(51, 51, 51)" i],
html[data-theme="dark"] [style*="; color: rgb(51, 51, 51)" i],
html[data-theme="dark"] [style^="color:rgb(33, 37, 41)" i],
html[data-theme="dark"] [style*=";color:rgb(33, 37, 41)" i],
html[data-theme="dark"] [style*="; color:rgb(33, 37, 41)" i],
html[data-theme="dark"] [style^="color: rgb(33, 37, 41)" i],
html[data-theme="dark"] [style*=";color: rgb(33, 37, 41)" i],
html[data-theme="dark"] [style*="; color: rgb(33, 37, 41)" i],
html[data-theme="dark"] [style^="color:rgb(17, 24, 39)" i],
html[data-theme="dark"] [style*=";color:rgb(17, 24, 39)" i],
html[data-theme="dark"] [style*="; color:rgb(17, 24, 39)" i],
html[data-theme="dark"] [style^="color: rgb(17, 24, 39)" i],
html[data-theme="dark"] [style*=";color: rgb(17, 24, 39)" i],
html[data-theme="dark"] [style*="; color: rgb(17, 24, 39)" i],
html[data-theme="dark"] [style^="color:rgb(31, 41, 55)" i],
html[data-theme="dark"] [style*=";color:rgb(31, 41, 55)" i],
html[data-theme="dark"] [style*="; color:rgb(31, 41, 55)" i],
html[data-theme="dark"] [style^="color: rgb(31, 41, 55)" i],
html[data-theme="dark"] [style*=";color: rgb(31, 41, 55)" i],
html[data-theme="dark"] [style*="; color: rgb(31, 41, 55)" i] { color: var(--heading) !important; }
html[data-theme="dark"] [style^="color:rgb(68, 68, 68)" i],
html[data-theme="dark"] [style*=";color:rgb(68, 68, 68)" i],
html[data-theme="dark"] [style*="; color:rgb(68, 68, 68)" i],
html[data-theme="dark"] [style^="color: rgb(68, 68, 68)" i],
html[data-theme="dark"] [style*=";color: rgb(68, 68, 68)" i],
html[data-theme="dark"] [style*="; color: rgb(68, 68, 68)" i],
html[data-theme="dark"] [style^="color:rgb(85, 85, 85)" i],
html[data-theme="dark"] [style*=";color:rgb(85, 85, 85)" i],
html[data-theme="dark"] [style*="; color:rgb(85, 85, 85)" i],
html[data-theme="dark"] [style^="color: rgb(85, 85, 85)" i],
html[data-theme="dark"] [style*=";color: rgb(85, 85, 85)" i],
html[data-theme="dark"] [style*="; color: rgb(85, 85, 85)" i],
html[data-theme="dark"] [style^="color:rgb(102, 102, 102)" i],
html[data-theme="dark"] [style*=";color:rgb(102, 102, 102)" i],
html[data-theme="dark"] [style*="; color:rgb(102, 102, 102)" i],
html[data-theme="dark"] [style^="color: rgb(102, 102, 102)" i],
html[data-theme="dark"] [style*=";color: rgb(102, 102, 102)" i],
html[data-theme="dark"] [style*="; color: rgb(102, 102, 102)" i],
html[data-theme="dark"] [style^="color:rgb(55, 65, 81)" i],
html[data-theme="dark"] [style*=";color:rgb(55, 65, 81)" i],
html[data-theme="dark"] [style*="; color:rgb(55, 65, 81)" i],
html[data-theme="dark"] [style^="color: rgb(55, 65, 81)" i],
html[data-theme="dark"] [style*=";color: rgb(55, 65, 81)" i],
html[data-theme="dark"] [style*="; color: rgb(55, 65, 81)" i],
html[data-theme="dark"] [style^="color:rgb(73, 80, 87)" i],
html[data-theme="dark"] [style*=";color:rgb(73, 80, 87)" i],
html[data-theme="dark"] [style*="; color:rgb(73, 80, 87)" i],
html[data-theme="dark"] [style^="color: rgb(73, 80, 87)" i],
html[data-theme="dark"] [style*=";color: rgb(73, 80, 87)" i],
html[data-theme="dark"] [style*="; color: rgb(73, 80, 87)" i],
html[data-theme="dark"] [style^="color:rgb(52, 58, 64)" i],
html[data-theme="dark"] [style*=";color:rgb(52, 58, 64)" i],
html[data-theme="dark"] [style*="; color:rgb(52, 58, 64)" i],
html[data-theme="dark"] [style^="color: rgb(52, 58, 64)" i],
html[data-theme="dark"] [style*=";color: rgb(52, 58, 64)" i],
html[data-theme="dark"] [style*="; color: rgb(52, 58, 64)" i] { color: var(--text) !important; }
html[data-theme="dark"] [style^="color:rgb(0, 0, 255)" i],
html[data-theme="dark"] [style*=";color:rgb(0, 0, 255)" i],
html[data-theme="dark"] [style*="; color:rgb(0, 0, 255)" i],
html[data-theme="dark"] [style^="color: rgb(0, 0, 255)" i],
html[data-theme="dark"] [style*=";color: rgb(0, 0, 255)" i],
html[data-theme="dark"] [style*="; color: rgb(0, 0, 255)" i],
html[data-theme="dark"] [style^="color:navy" i],
html[data-theme="dark"] [style*=";color:navy" i],
html[data-theme="dark"] [style*="; color:navy" i],
html[data-theme="dark"] [style^="color: navy" i],
html[data-theme="dark"] [style*=";color: navy" i],
html[data-theme="dark"] [style*="; color: navy" i],
html[data-theme="dark"] [style^="color:darkblue" i],
html[data-theme="dark"] [style*=";color:darkblue" i],
html[data-theme="dark"] [style*="; color:darkblue" i],
html[data-theme="dark"] [style^="color: darkblue" i],
html[data-theme="dark"] [style*=";color: darkblue" i],
html[data-theme="dark"] [style*="; color: darkblue" i],
html[data-theme="dark"] [style^="color:#000080" i],
html[data-theme="dark"] [style*=";color:#000080" i],
html[data-theme="dark"] [style*="; color:#000080" i],
html[data-theme="dark"] [style^="color: #000080" i],
html[data-theme="dark"] [style*=";color: #000080" i],
html[data-theme="dark"] [style*="; color: #000080" i],
html[data-theme="dark"] [style^="color:#00008b" i],
html[data-theme="dark"] [style*=";color:#00008b" i],
html[data-theme="dark"] [style*="; color:#00008b" i],
html[data-theme="dark"] [style^="color: #00008b" i],
html[data-theme="dark"] [style*=";color: #00008b" i],
html[data-theme="dark"] [style*="; color: #00008b" i],
html[data-theme="dark"] [style^="color:rgb(13, 110, 253)" i],
html[data-theme="dark"] [style*=";color:rgb(13, 110, 253)" i],
html[data-theme="dark"] [style*="; color:rgb(13, 110, 253)" i],
html[data-theme="dark"] [style^="color: rgb(13, 110, 253)" i],
html[data-theme="dark"] [style*=";color: rgb(13, 110, 253)" i],
html[data-theme="dark"] [style*="; color: rgb(13, 110, 253)" i],
html[data-theme="dark"] [style^="color:#0d6efd" i],
html[data-theme="dark"] [style*=";color:#0d6efd" i],
html[data-theme="dark"] [style*="; color:#0d6efd" i],
html[data-theme="dark"] [style^="color: #0d6efd" i],
html[data-theme="dark"] [style*=";color: #0d6efd" i],
html[data-theme="dark"] [style*="; color: #0d6efd" i],
html[data-theme="dark"] [style^="color:#0000cd" i],
html[data-theme="dark"] [style*=";color:#0000cd" i],
html[data-theme="dark"] [style*="; color:#0000cd" i],
html[data-theme="dark"] [style^="color: #0000cd" i],
html[data-theme="dark"] [style*=";color: #0000cd" i],
html[data-theme="dark"] [style*="; color: #0000cd" i],
html[data-theme="dark"] [style^="color:mediumblue" i],
html[data-theme="dark"] [style*=";color:mediumblue" i],
html[data-theme="dark"] [style*="; color:mediumblue" i],
html[data-theme="dark"] [style^="color: mediumblue" i],
html[data-theme="dark"] [style*=";color: mediumblue" i],
html[data-theme="dark"] [style*="; color: mediumblue" i] { color: #60a5fa !important; }
html[data-theme="dark"] [style^="color:rgb(255, 0, 0)" i],
html[data-theme="dark"] [style*=";color:rgb(255, 0, 0)" i],
html[data-theme="dark"] [style*="; color:rgb(255, 0, 0)" i],
html[data-theme="dark"] [style^="color: rgb(255, 0, 0)" i],
html[data-theme="dark"] [style*=";color: rgb(255, 0, 0)" i],
html[data-theme="dark"] [style*="; color: rgb(255, 0, 0)" i],
html[data-theme="dark"] [style^="color:darkred" i],
html[data-theme="dark"] [style*=";color:darkred" i],
html[data-theme="dark"] [style*="; color:darkred" i],
html[data-theme="dark"] [style^="color: darkred" i],
html[data-theme="dark"] [style*=";color: darkred" i],
html[data-theme="dark"] [style*="; color: darkred" i],
html[data-theme="dark"] [style^="color:#8b0000" i],
html[data-theme="dark"] [style*=";color:#8b0000" i],
html[data-theme="dark"] [style*="; color:#8b0000" i],
html[data-theme="dark"] [style^="color: #8b0000" i],
html[data-theme="dark"] [style*=";color: #8b0000" i],
html[data-theme="dark"] [style*="; color: #8b0000" i],
html[data-theme="dark"] [style^="color:maroon" i],
html[data-theme="dark"] [style*=";color:maroon" i],
html[data-theme="dark"] [style*="; color:maroon" i],
html[data-theme="dark"] [style^="color: maroon" i],
html[data-theme="dark"] [style*=";color: maroon" i],
html[data-theme="dark"] [style*="; color: maroon" i],
html[data-theme="dark"] [style^="color:#800000" i],
html[data-theme="dark"] [style*=";color:#800000" i],
html[data-theme="dark"] [style*="; color:#800000" i],
html[data-theme="dark"] [style^="color: #800000" i],
html[data-theme="dark"] [style*=";color: #800000" i],
html[data-theme="dark"] [style*="; color: #800000" i] { color: #ff6b6b !important; }
html[data-theme="dark"] [style^="color:rgb(0, 128, 0)" i],
html[data-theme="dark"] [style*=";color:rgb(0, 128, 0)" i],
html[data-theme="dark"] [style*="; color:rgb(0, 128, 0)" i],
html[data-theme="dark"] [style^="color: rgb(0, 128, 0)" i],
html[data-theme="dark"] [style*=";color: rgb(0, 128, 0)" i],
html[data-theme="dark"] [style*="; color: rgb(0, 128, 0)" i],
html[data-theme="dark"] [style^="color:darkgreen" i],
html[data-theme="dark"] [style*=";color:darkgreen" i],
html[data-theme="dark"] [style*="; color:darkgreen" i],
html[data-theme="dark"] [style^="color: darkgreen" i],
html[data-theme="dark"] [style*=";color: darkgreen" i],
html[data-theme="dark"] [style*="; color: darkgreen" i],
html[data-theme="dark"] [style^="color:#006400" i],
html[data-theme="dark"] [style*=";color:#006400" i],
html[data-theme="dark"] [style*="; color:#006400" i],
html[data-theme="dark"] [style^="color: #006400" i],
html[data-theme="dark"] [style*=";color: #006400" i],
html[data-theme="dark"] [style*="; color: #006400" i] { color: #4ade80 !important; }
html[data-theme="dark"] [style^="color:purple" i],
html[data-theme="dark"] [style*=";color:purple" i],
html[data-theme="dark"] [style*="; color:purple" i],
html[data-theme="dark"] [style^="color: purple" i],
html[data-theme="dark"] [style*=";color: purple" i],
html[data-theme="dark"] [style*="; color: purple" i],
html[data-theme="dark"] [style^="color:#800080" i],
html[data-theme="dark"] [style*=";color:#800080" i],
html[data-theme="dark"] [style*="; color:#800080" i],
html[data-theme="dark"] [style^="color: #800080" i],
html[data-theme="dark"] [style*=";color: #800080" i],
html[data-theme="dark"] [style*="; color: #800080" i],
html[data-theme="dark"] [style^="color:rgb(128, 0, 128)" i],
html[data-theme="dark"] [style*=";color:rgb(128, 0, 128)" i],
html[data-theme="dark"] [style*="; color:rgb(128, 0, 128)" i],
html[data-theme="dark"] [style^="color: rgb(128, 0, 128)" i],
html[data-theme="dark"] [style*=";color: rgb(128, 0, 128)" i],
html[data-theme="dark"] [style*="; color: rgb(128, 0, 128)" i],
html[data-theme="dark"] [style^="color:indigo" i],
html[data-theme="dark"] [style*=";color:indigo" i],
html[data-theme="dark"] [style*="; color:indigo" i],
html[data-theme="dark"] [style^="color: indigo" i],
html[data-theme="dark"] [style*=";color: indigo" i],
html[data-theme="dark"] [style*="; color: indigo" i],
html[data-theme="dark"] [style^="color:#4b0082" i],
html[data-theme="dark"] [style*=";color:#4b0082" i],
html[data-theme="dark"] [style*="; color:#4b0082" i],
html[data-theme="dark"] [style^="color: #4b0082" i],
html[data-theme="dark"] [style*=";color: #4b0082" i],
html[data-theme="dark"] [style*="; color: #4b0082" i] { color: #d8b4fe !important; }
html[data-theme="dark"] font[color="#000000" i],
html[data-theme="dark"] font[color="#000" i],
html[data-theme="dark"] font[color="black" i],
html[data-theme="dark"] font[color="#333333" i],
html[data-theme="dark"] font[color="#333" i],
html[data-theme="dark"] font[color="#222222" i],
html[data-theme="dark"] font[color="#111111" i] { color: var(--heading) !important; }
html[data-theme="dark"] font[color="#555555" i],
html[data-theme="dark"] font[color="#555" i],
html[data-theme="dark"] font[color="#666666" i],
html[data-theme="dark"] font[color="#444444" i] { color: var(--text) !important; }
html[data-theme="dark"] font[color="#0000ff" i],
html[data-theme="dark"] font[color="blue" i],
html[data-theme="dark"] font[color="navy" i],
html[data-theme="dark"] font[color="#000080" i],
html[data-theme="dark"] font[color="darkblue" i] { color: #60a5fa !important; }
html[data-theme="dark"] font[color="#ff0000" i],
html[data-theme="dark"] font[color="red" i],
html[data-theme="dark"] font[color="darkred" i],
html[data-theme="dark"] font[color="#8b0000" i],
html[data-theme="dark"] font[color="maroon" i] { color: #ff6b6b !important; }
html[data-theme="dark"] font[color="#008000" i],
html[data-theme="dark"] font[color="green" i],
html[data-theme="dark"] font[color="darkgreen" i],
html[data-theme="dark"] font[color="#006400" i] { color: #4ade80 !important; }

/* =========================================================================
   v4 MANUAL — sửa theo kết quả AUDIT runtime (quét DOM thật mọi trang) +
   các chỗ biến CSS bị dùng "sai vai trò" (biến nền dùng làm màu chữ & ngược lại).
   ========================================================================= */

/* ---- Biến dùng sai vai trò: trả lại đúng ý đồ gốc ---- */
/* breadcrumb nằm trên banner ảnh tối: gốc dùng --chalk/--gray-chalk làm CHỮ sáng */
html[data-theme="dark"] .breadcrumb-item a { color: #f1f4f9 !important; }
html[data-theme="dark"] .breadcrumb .active,
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #cfd6e2 !important; }
/* chữ xanh nhạt trên thanh màu thương hiệu */
html[data-theme="dark"] .header-top-list li a:hover,
html[data-theme="dark"] .footer-copytext a,
html[data-theme="dark"] .blog-details-quote footer { color: #ddffd5 !important; }
/* icon tim mặc định */
html[data-theme="dark"] .product-wish,
html[data-theme="dark"] .feature-wish { color: #7c889c; }
html[data-theme="dark"] .lb-empty i { color: #4a5670; }
/* gốc dùng --heading (xám đậm) làm NỀN -> giữ nền đậm */
html[data-theme="dark"] .blog-details-quote,
html[data-theme="dark"] .cart-checkout-btn:hover,
html[data-theme="dark"] .blog-widget-category li a span,
html[data-theme="dark"] .blog-widget-social li a,
html[data-theme="dark"] .comment-reply button:hover,
html[data-theme="dark"] .review-reply button:hover { background: #2a3750 !important; color: #fff !important; }

/* ---- Nền xanh lá rất nhạt inline (bảng khuyến mãi nạp bank) ---- */
html[data-theme="dark"] [style*="#f0fdf4" i],
html[data-theme="dark"] [style*="#ecfdf5" i],
html[data-theme="dark"] [style*="#dcfce7" i] {
  background: rgba(17, 183, 107, 0.14) !important;
  color: #9be7c2 !important;
  border-color: rgba(17, 183, 107, 0.35) !important;
}
/* xanh dương rất nhạt inline */
html[data-theme="dark"] [style*="#eff6ff" i],
html[data-theme="dark"] [style*="#e0f2fe" i],
html[data-theme="dark"] [style*="#dbeafe" i],
html[data-theme="dark"] [style*="#f0f9ff" i] {
  background: rgba(59, 130, 246, 0.13) !important;
  color: #a9c9ff !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ---- Bootstrap: màu chữ tiện ích & input-group & checkbox ---- */
html[data-theme="dark"] .text-primary { color: #6ea8fe !important; }  /* bản sáng: xanh Bootstrap #0d6efd (theme không đổi) */
html[data-theme="dark"] .text-danger { color: #f87171 !important; }
html[data-theme="dark"] .text-success { color: #4ade80 !important; }
html[data-theme="dark"] .text-info { color: #67e8f9 !important; }
html[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] .text-secondary { color: var(--gray) !important; }
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black { color: var(--text) !important; }
html[data-theme="dark"] .input-group-text { background-color: var(--surface-hover) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .form-check-input { background-color: var(--surface2) !important; border-color: #4a5670 !important; }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: var(--chalk) !important; color: var(--gray) !important; }

/* ---- Trang nạp: chữ đậm trong <style> riêng ---- */
html[data-theme="dark"] .crypto-logo-box h4 { color: var(--heading) !important; }
html[data-theme="dark"] .crypto-info-text { color: #93c5fd !important; }
html[data-theme="dark"] .transfer-content-box .copy-btn,
html[data-theme="dark"] .transfer-content-box .tc-value .copy-btn { background: var(--surface2) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,.5) !important; }
/* tab VAT (gradient trắng) */
html[data-theme="dark"] #vatTabs .nav-link { color: var(--gray) !important; border-color: var(--border) !important; }
html[data-theme="dark"] #vatTabs .nav-link.active { background: var(--surface-hover) !important; color: #6ea8fe !important; }

/* ---- Widget nổi: Zalo "Chat hỗ trợ" & menu nổi phải (#top-menu-right) ---- */
html[data-theme="dark"] div.fcta-zalo-mess { background: var(--surface2) !important; box-shadow: 0 2px 10px rgba(0,0,0,.45) !important; }
html[data-theme="dark"] div.fcta-zalo-mess span,
html[data-theme="dark"] #fcta-zalo-tracking { color: #5b9dff !important; }
html[data-theme="dark"] #top-menu-right li a,
html[data-theme="dark"] #top-menu-right .menu-item { background: var(--surface2) !important; border-color: var(--border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] #top-menu-right i { background: transparent !important; }

/* ---- Liên hệ: icon card đang active (nền trắng) ---- */
html[data-theme="dark"] .contact-card.active i { background: var(--primary) !important; color: #fff !important; }

/* ---- Màu chữ inline (sinh tự động, chỉ khớp thuộc tính color:, KHÔNG khớp background-color/border-color) ---- */
html[data-theme="dark"] [style^="color:#111827" i],
html[data-theme="dark"] [style*=";color:#111827" i],
html[data-theme="dark"] [style*="; color:#111827" i],
html[data-theme="dark"] [style^="color: #111827" i],
html[data-theme="dark"] [style*=";color: #111827" i],
html[data-theme="dark"] [style*="; color: #111827" i],
html[data-theme="dark"] [style^="color:#1f2937" i],
html[data-theme="dark"] [style*=";color:#1f2937" i],
html[data-theme="dark"] [style*="; color:#1f2937" i],
html[data-theme="dark"] [style^="color: #1f2937" i],
html[data-theme="dark"] [style*=";color: #1f2937" i],
html[data-theme="dark"] [style*="; color: #1f2937" i],
html[data-theme="dark"] [style^="color:#1e3a5f" i],
html[data-theme="dark"] [style*=";color:#1e3a5f" i],
html[data-theme="dark"] [style*="; color:#1e3a5f" i],
html[data-theme="dark"] [style^="color: #1e3a5f" i],
html[data-theme="dark"] [style*=";color: #1e3a5f" i],
html[data-theme="dark"] [style*="; color: #1e3a5f" i],
html[data-theme="dark"] [style^="color:#2d3748" i],
html[data-theme="dark"] [style*=";color:#2d3748" i],
html[data-theme="dark"] [style*="; color:#2d3748" i],
html[data-theme="dark"] [style^="color: #2d3748" i],
html[data-theme="dark"] [style*=";color: #2d3748" i],
html[data-theme="dark"] [style*="; color: #2d3748" i],
html[data-theme="dark"] [style^="color:#0f172a" i],
html[data-theme="dark"] [style*=";color:#0f172a" i],
html[data-theme="dark"] [style*="; color:#0f172a" i],
html[data-theme="dark"] [style^="color: #0f172a" i],
html[data-theme="dark"] [style*=";color: #0f172a" i],
html[data-theme="dark"] [style*="; color: #0f172a" i],
html[data-theme="dark"] [style^="color:#1e293b" i],
html[data-theme="dark"] [style*=";color:#1e293b" i],
html[data-theme="dark"] [style*="; color:#1e293b" i],
html[data-theme="dark"] [style^="color: #1e293b" i],
html[data-theme="dark"] [style*=";color: #1e293b" i],
html[data-theme="dark"] [style*="; color: #1e293b" i],
html[data-theme="dark"] [style^="color:#3c4043" i],
html[data-theme="dark"] [style*=";color:#3c4043" i],
html[data-theme="dark"] [style*="; color:#3c4043" i],
html[data-theme="dark"] [style^="color: #3c4043" i],
html[data-theme="dark"] [style*=";color: #3c4043" i],
html[data-theme="dark"] [style*="; color: #3c4043" i],
html[data-theme="dark"] [style^="color:#000000" i],
html[data-theme="dark"] [style*=";color:#000000" i],
html[data-theme="dark"] [style*="; color:#000000" i],
html[data-theme="dark"] [style^="color: #000000" i],
html[data-theme="dark"] [style*=";color: #000000" i],
html[data-theme="dark"] [style*="; color: #000000" i],
html[data-theme="dark"] [style^="color:black" i],
html[data-theme="dark"] [style*=";color:black" i],
html[data-theme="dark"] [style*="; color:black" i],
html[data-theme="dark"] [style^="color: black" i],
html[data-theme="dark"] [style*=";color: black" i],
html[data-theme="dark"] [style*="; color: black" i],
html[data-theme="dark"] [style^="color:#333;" i],
html[data-theme="dark"] [style*=";color:#333;" i],
html[data-theme="dark"] [style*="; color:#333;" i],
html[data-theme="dark"] [style^="color:#333 " i],
html[data-theme="dark"] [style*=";color:#333 " i],
html[data-theme="dark"] [style*="; color:#333 " i],
html[data-theme="dark"] [style="color:#333" i],
html[data-theme="dark"] [style$=";color:#333" i],
html[data-theme="dark"] [style$="; color:#333" i],
html[data-theme="dark"] [style^="color: #333;" i],
html[data-theme="dark"] [style*=";color: #333;" i],
html[data-theme="dark"] [style*="; color: #333;" i],
html[data-theme="dark"] [style^="color: #333 " i],
html[data-theme="dark"] [style*=";color: #333 " i],
html[data-theme="dark"] [style*="; color: #333 " i],
html[data-theme="dark"] [style="color: #333" i],
html[data-theme="dark"] [style$=";color: #333" i],
html[data-theme="dark"] [style$="; color: #333" i],
html[data-theme="dark"] [style^="color:#222;" i],
html[data-theme="dark"] [style*=";color:#222;" i],
html[data-theme="dark"] [style*="; color:#222;" i],
html[data-theme="dark"] [style^="color:#222 " i],
html[data-theme="dark"] [style*=";color:#222 " i],
html[data-theme="dark"] [style*="; color:#222 " i],
html[data-theme="dark"] [style="color:#222" i],
html[data-theme="dark"] [style$=";color:#222" i],
html[data-theme="dark"] [style$="; color:#222" i],
html[data-theme="dark"] [style^="color: #222;" i],
html[data-theme="dark"] [style*=";color: #222;" i],
html[data-theme="dark"] [style*="; color: #222;" i],
html[data-theme="dark"] [style^="color: #222 " i],
html[data-theme="dark"] [style*=";color: #222 " i],
html[data-theme="dark"] [style*="; color: #222 " i],
html[data-theme="dark"] [style="color: #222" i],
html[data-theme="dark"] [style$=";color: #222" i],
html[data-theme="dark"] [style$="; color: #222" i],
html[data-theme="dark"] [style^="color:#000;" i],
html[data-theme="dark"] [style*=";color:#000;" i],
html[data-theme="dark"] [style*="; color:#000;" i],
html[data-theme="dark"] [style^="color:#000 " i],
html[data-theme="dark"] [style*=";color:#000 " i],
html[data-theme="dark"] [style*="; color:#000 " i],
html[data-theme="dark"] [style="color:#000" i],
html[data-theme="dark"] [style$=";color:#000" i],
html[data-theme="dark"] [style$="; color:#000" i],
html[data-theme="dark"] [style^="color: #000;" i],
html[data-theme="dark"] [style*=";color: #000;" i],
html[data-theme="dark"] [style*="; color: #000;" i],
html[data-theme="dark"] [style^="color: #000 " i],
html[data-theme="dark"] [style*=";color: #000 " i],
html[data-theme="dark"] [style*="; color: #000 " i],
html[data-theme="dark"] [style="color: #000" i],
html[data-theme="dark"] [style$=";color: #000" i],
html[data-theme="dark"] [style$="; color: #000" i] { color: var(--heading) !important; }
html[data-theme="dark"] [style^="color:#374151" i],
html[data-theme="dark"] [style*=";color:#374151" i],
html[data-theme="dark"] [style*="; color:#374151" i],
html[data-theme="dark"] [style^="color: #374151" i],
html[data-theme="dark"] [style*=";color: #374151" i],
html[data-theme="dark"] [style*="; color: #374151" i],
html[data-theme="dark"] [style^="color:#4b5563" i],
html[data-theme="dark"] [style*=";color:#4b5563" i],
html[data-theme="dark"] [style*="; color:#4b5563" i],
html[data-theme="dark"] [style^="color: #4b5563" i],
html[data-theme="dark"] [style*=";color: #4b5563" i],
html[data-theme="dark"] [style*="; color: #4b5563" i],
html[data-theme="dark"] [style^="color:#475569" i],
html[data-theme="dark"] [style*=";color:#475569" i],
html[data-theme="dark"] [style*="; color:#475569" i],
html[data-theme="dark"] [style^="color: #475569" i],
html[data-theme="dark"] [style*=";color: #475569" i],
html[data-theme="dark"] [style*="; color: #475569" i],
html[data-theme="dark"] [style^="color:#334155" i],
html[data-theme="dark"] [style*=";color:#334155" i],
html[data-theme="dark"] [style*="; color:#334155" i],
html[data-theme="dark"] [style^="color: #334155" i],
html[data-theme="dark"] [style*=";color: #334155" i],
html[data-theme="dark"] [style*="; color: #334155" i],
html[data-theme="dark"] [style^="color:#4a5568" i],
html[data-theme="dark"] [style*=";color:#4a5568" i],
html[data-theme="dark"] [style*="; color:#4a5568" i],
html[data-theme="dark"] [style^="color: #4a5568" i],
html[data-theme="dark"] [style*=";color: #4a5568" i],
html[data-theme="dark"] [style*="; color: #4a5568" i],
html[data-theme="dark"] [style^="color:#555;" i],
html[data-theme="dark"] [style*=";color:#555;" i],
html[data-theme="dark"] [style*="; color:#555;" i],
html[data-theme="dark"] [style^="color:#555 " i],
html[data-theme="dark"] [style*=";color:#555 " i],
html[data-theme="dark"] [style*="; color:#555 " i],
html[data-theme="dark"] [style="color:#555" i],
html[data-theme="dark"] [style$=";color:#555" i],
html[data-theme="dark"] [style$="; color:#555" i],
html[data-theme="dark"] [style^="color: #555;" i],
html[data-theme="dark"] [style*=";color: #555;" i],
html[data-theme="dark"] [style*="; color: #555;" i],
html[data-theme="dark"] [style^="color: #555 " i],
html[data-theme="dark"] [style*=";color: #555 " i],
html[data-theme="dark"] [style*="; color: #555 " i],
html[data-theme="dark"] [style="color: #555" i],
html[data-theme="dark"] [style$=";color: #555" i],
html[data-theme="dark"] [style$="; color: #555" i],
html[data-theme="dark"] [style^="color:#666;" i],
html[data-theme="dark"] [style*=";color:#666;" i],
html[data-theme="dark"] [style*="; color:#666;" i],
html[data-theme="dark"] [style^="color:#666 " i],
html[data-theme="dark"] [style*=";color:#666 " i],
html[data-theme="dark"] [style*="; color:#666 " i],
html[data-theme="dark"] [style="color:#666" i],
html[data-theme="dark"] [style$=";color:#666" i],
html[data-theme="dark"] [style$="; color:#666" i],
html[data-theme="dark"] [style^="color: #666;" i],
html[data-theme="dark"] [style*=";color: #666;" i],
html[data-theme="dark"] [style*="; color: #666;" i],
html[data-theme="dark"] [style^="color: #666 " i],
html[data-theme="dark"] [style*=";color: #666 " i],
html[data-theme="dark"] [style*="; color: #666 " i],
html[data-theme="dark"] [style="color: #666" i],
html[data-theme="dark"] [style$=";color: #666" i],
html[data-theme="dark"] [style$="; color: #666" i],
html[data-theme="dark"] [style^="color:#444;" i],
html[data-theme="dark"] [style*=";color:#444;" i],
html[data-theme="dark"] [style*="; color:#444;" i],
html[data-theme="dark"] [style^="color:#444 " i],
html[data-theme="dark"] [style*=";color:#444 " i],
html[data-theme="dark"] [style*="; color:#444 " i],
html[data-theme="dark"] [style="color:#444" i],
html[data-theme="dark"] [style$=";color:#444" i],
html[data-theme="dark"] [style$="; color:#444" i],
html[data-theme="dark"] [style^="color: #444;" i],
html[data-theme="dark"] [style*=";color: #444;" i],
html[data-theme="dark"] [style*="; color: #444;" i],
html[data-theme="dark"] [style^="color: #444 " i],
html[data-theme="dark"] [style*=";color: #444 " i],
html[data-theme="dark"] [style*="; color: #444 " i],
html[data-theme="dark"] [style="color: #444" i],
html[data-theme="dark"] [style$=";color: #444" i],
html[data-theme="dark"] [style$="; color: #444" i] { color: var(--text) !important; }
html[data-theme="dark"] [style^="color:#6b7280" i],
html[data-theme="dark"] [style*=";color:#6b7280" i],
html[data-theme="dark"] [style*="; color:#6b7280" i],
html[data-theme="dark"] [style^="color: #6b7280" i],
html[data-theme="dark"] [style*=";color: #6b7280" i],
html[data-theme="dark"] [style*="; color: #6b7280" i],
html[data-theme="dark"] [style^="color:#64748b" i],
html[data-theme="dark"] [style*=";color:#64748b" i],
html[data-theme="dark"] [style*="; color:#64748b" i],
html[data-theme="dark"] [style^="color: #64748b" i],
html[data-theme="dark"] [style*=";color: #64748b" i],
html[data-theme="dark"] [style*="; color: #64748b" i],
html[data-theme="dark"] [style^="color:#777;" i],
html[data-theme="dark"] [style*=";color:#777;" i],
html[data-theme="dark"] [style*="; color:#777;" i],
html[data-theme="dark"] [style^="color:#777 " i],
html[data-theme="dark"] [style*=";color:#777 " i],
html[data-theme="dark"] [style*="; color:#777 " i],
html[data-theme="dark"] [style="color:#777" i],
html[data-theme="dark"] [style$=";color:#777" i],
html[data-theme="dark"] [style$="; color:#777" i],
html[data-theme="dark"] [style^="color: #777;" i],
html[data-theme="dark"] [style*=";color: #777;" i],
html[data-theme="dark"] [style*="; color: #777;" i],
html[data-theme="dark"] [style^="color: #777 " i],
html[data-theme="dark"] [style*=";color: #777 " i],
html[data-theme="dark"] [style*="; color: #777 " i],
html[data-theme="dark"] [style="color: #777" i],
html[data-theme="dark"] [style$=";color: #777" i],
html[data-theme="dark"] [style$="; color: #777" i],
html[data-theme="dark"] [style^="color:#888;" i],
html[data-theme="dark"] [style*=";color:#888;" i],
html[data-theme="dark"] [style*="; color:#888;" i],
html[data-theme="dark"] [style^="color:#888 " i],
html[data-theme="dark"] [style*=";color:#888 " i],
html[data-theme="dark"] [style*="; color:#888 " i],
html[data-theme="dark"] [style="color:#888" i],
html[data-theme="dark"] [style$=";color:#888" i],
html[data-theme="dark"] [style$="; color:#888" i],
html[data-theme="dark"] [style^="color: #888;" i],
html[data-theme="dark"] [style*=";color: #888;" i],
html[data-theme="dark"] [style*="; color: #888;" i],
html[data-theme="dark"] [style^="color: #888 " i],
html[data-theme="dark"] [style*=";color: #888 " i],
html[data-theme="dark"] [style*="; color: #888 " i],
html[data-theme="dark"] [style="color: #888" i],
html[data-theme="dark"] [style$=";color: #888" i],
html[data-theme="dark"] [style$="; color: #888" i],
html[data-theme="dark"] [style^="color:#999;" i],
html[data-theme="dark"] [style*=";color:#999;" i],
html[data-theme="dark"] [style*="; color:#999;" i],
html[data-theme="dark"] [style^="color:#999 " i],
html[data-theme="dark"] [style*=";color:#999 " i],
html[data-theme="dark"] [style*="; color:#999 " i],
html[data-theme="dark"] [style="color:#999" i],
html[data-theme="dark"] [style$=";color:#999" i],
html[data-theme="dark"] [style$="; color:#999" i],
html[data-theme="dark"] [style^="color: #999;" i],
html[data-theme="dark"] [style*=";color: #999;" i],
html[data-theme="dark"] [style*="; color: #999;" i],
html[data-theme="dark"] [style^="color: #999 " i],
html[data-theme="dark"] [style*=";color: #999 " i],
html[data-theme="dark"] [style*="; color: #999 " i],
html[data-theme="dark"] [style="color: #999" i],
html[data-theme="dark"] [style$=";color: #999" i],
html[data-theme="dark"] [style$="; color: #999" i] { color: var(--gray) !important; }
html[data-theme="dark"] [style^="color:blue" i],
html[data-theme="dark"] [style*=";color:blue" i],
html[data-theme="dark"] [style*="; color:blue" i],
html[data-theme="dark"] [style^="color: blue" i],
html[data-theme="dark"] [style*=";color: blue" i],
html[data-theme="dark"] [style*="; color: blue" i],
html[data-theme="dark"] [style^="color:#0000ff" i],
html[data-theme="dark"] [style*=";color:#0000ff" i],
html[data-theme="dark"] [style*="; color:#0000ff" i],
html[data-theme="dark"] [style^="color: #0000ff" i],
html[data-theme="dark"] [style*=";color: #0000ff" i],
html[data-theme="dark"] [style*="; color: #0000ff" i],
html[data-theme="dark"] [style^="color:#00f;" i],
html[data-theme="dark"] [style*=";color:#00f;" i],
html[data-theme="dark"] [style*="; color:#00f;" i],
html[data-theme="dark"] [style^="color:#00f " i],
html[data-theme="dark"] [style*=";color:#00f " i],
html[data-theme="dark"] [style*="; color:#00f " i],
html[data-theme="dark"] [style="color:#00f" i],
html[data-theme="dark"] [style$=";color:#00f" i],
html[data-theme="dark"] [style$="; color:#00f" i],
html[data-theme="dark"] [style^="color: #00f;" i],
html[data-theme="dark"] [style*=";color: #00f;" i],
html[data-theme="dark"] [style*="; color: #00f;" i],
html[data-theme="dark"] [style^="color: #00f " i],
html[data-theme="dark"] [style*=";color: #00f " i],
html[data-theme="dark"] [style*="; color: #00f " i],
html[data-theme="dark"] [style="color: #00f" i],
html[data-theme="dark"] [style$=";color: #00f" i],
html[data-theme="dark"] [style$="; color: #00f" i] { color: #60a5fa !important; }
html[data-theme="dark"] [style^="color:green" i],
html[data-theme="dark"] [style*=";color:green" i],
html[data-theme="dark"] [style*="; color:green" i],
html[data-theme="dark"] [style^="color: green" i],
html[data-theme="dark"] [style*=";color: green" i],
html[data-theme="dark"] [style*="; color: green" i],
html[data-theme="dark"] [style^="color:#008000" i],
html[data-theme="dark"] [style*=";color:#008000" i],
html[data-theme="dark"] [style*="; color:#008000" i],
html[data-theme="dark"] [style^="color: #008000" i],
html[data-theme="dark"] [style*=";color: #008000" i],
html[data-theme="dark"] [style*="; color: #008000" i] { color: #4ade80 !important; }
html[data-theme="dark"] [style^="color:red" i],
html[data-theme="dark"] [style*=";color:red" i],
html[data-theme="dark"] [style*="; color:red" i],
html[data-theme="dark"] [style^="color: red" i],
html[data-theme="dark"] [style*=";color: red" i],
html[data-theme="dark"] [style*="; color: red" i],
html[data-theme="dark"] [style^="color:#ff0000" i],
html[data-theme="dark"] [style*=";color:#ff0000" i],
html[data-theme="dark"] [style*="; color:#ff0000" i],
html[data-theme="dark"] [style^="color: #ff0000" i],
html[data-theme="dark"] [style*=";color: #ff0000" i],
html[data-theme="dark"] [style*="; color: #ff0000" i],
html[data-theme="dark"] [style^="color:#f00;" i],
html[data-theme="dark"] [style*=";color:#f00;" i],
html[data-theme="dark"] [style*="; color:#f00;" i],
html[data-theme="dark"] [style^="color:#f00 " i],
html[data-theme="dark"] [style*=";color:#f00 " i],
html[data-theme="dark"] [style*="; color:#f00 " i],
html[data-theme="dark"] [style="color:#f00" i],
html[data-theme="dark"] [style$=";color:#f00" i],
html[data-theme="dark"] [style$="; color:#f00" i],
html[data-theme="dark"] [style^="color: #f00;" i],
html[data-theme="dark"] [style*=";color: #f00;" i],
html[data-theme="dark"] [style*="; color: #f00;" i],
html[data-theme="dark"] [style^="color: #f00 " i],
html[data-theme="dark"] [style*=";color: #f00 " i],
html[data-theme="dark"] [style*="; color: #f00 " i],
html[data-theme="dark"] [style="color: #f00" i],
html[data-theme="dark"] [style$=";color: #f00" i],
html[data-theme="dark"] [style$="; color: #f00" i] { color: #ff6b6b !important; }
/* ---- Màu chữ đậm của phần tử con trong hộp màu (xanh lá/đỏ/cam/xanh dương) ---- */
html[data-theme="dark"] [style^="color:#065f46" i],
html[data-theme="dark"] [style*=";color:#065f46" i],
html[data-theme="dark"] [style*="; color:#065f46" i],
html[data-theme="dark"] [style^="color: #065f46" i],
html[data-theme="dark"] [style*=";color: #065f46" i],
html[data-theme="dark"] [style*="; color: #065f46" i],
html[data-theme="dark"] [style^="color:#047857" i],
html[data-theme="dark"] [style*=";color:#047857" i],
html[data-theme="dark"] [style*="; color:#047857" i],
html[data-theme="dark"] [style^="color: #047857" i],
html[data-theme="dark"] [style*=";color: #047857" i],
html[data-theme="dark"] [style*="; color: #047857" i],
html[data-theme="dark"] [style^="color:#166534" i],
html[data-theme="dark"] [style*=";color:#166534" i],
html[data-theme="dark"] [style*="; color:#166534" i],
html[data-theme="dark"] [style^="color: #166534" i],
html[data-theme="dark"] [style*=";color: #166534" i],
html[data-theme="dark"] [style*="; color: #166534" i],
html[data-theme="dark"] [style^="color:#14532d" i],
html[data-theme="dark"] [style*=";color:#14532d" i],
html[data-theme="dark"] [style*="; color:#14532d" i],
html[data-theme="dark"] [style^="color: #14532d" i],
html[data-theme="dark"] [style*=";color: #14532d" i],
html[data-theme="dark"] [style*="; color: #14532d" i],
html[data-theme="dark"] [style^="color:#15803d" i],
html[data-theme="dark"] [style*=";color:#15803d" i],
html[data-theme="dark"] [style*="; color:#15803d" i],
html[data-theme="dark"] [style^="color: #15803d" i],
html[data-theme="dark"] [style*=";color: #15803d" i],
html[data-theme="dark"] [style*="; color: #15803d" i],
html[data-theme="dark"] [style^="color:#064e3b" i],
html[data-theme="dark"] [style*=";color:#064e3b" i],
html[data-theme="dark"] [style*="; color:#064e3b" i],
html[data-theme="dark"] [style^="color: #064e3b" i],
html[data-theme="dark"] [style*=";color: #064e3b" i],
html[data-theme="dark"] [style*="; color: #064e3b" i] { color: #86efac !important; }
html[data-theme="dark"] [style^="color:#991b1b" i],
html[data-theme="dark"] [style*=";color:#991b1b" i],
html[data-theme="dark"] [style*="; color:#991b1b" i],
html[data-theme="dark"] [style^="color: #991b1b" i],
html[data-theme="dark"] [style*=";color: #991b1b" i],
html[data-theme="dark"] [style*="; color: #991b1b" i],
html[data-theme="dark"] [style^="color:#7f1d1d" i],
html[data-theme="dark"] [style*=";color:#7f1d1d" i],
html[data-theme="dark"] [style*="; color:#7f1d1d" i],
html[data-theme="dark"] [style^="color: #7f1d1d" i],
html[data-theme="dark"] [style*=";color: #7f1d1d" i],
html[data-theme="dark"] [style*="; color: #7f1d1d" i],
html[data-theme="dark"] [style^="color:#b91c1c" i],
html[data-theme="dark"] [style*=";color:#b91c1c" i],
html[data-theme="dark"] [style*="; color:#b91c1c" i],
html[data-theme="dark"] [style^="color: #b91c1c" i],
html[data-theme="dark"] [style*=";color: #b91c1c" i],
html[data-theme="dark"] [style*="; color: #b91c1c" i],
html[data-theme="dark"] [style^="color:#dc2626" i],
html[data-theme="dark"] [style*=";color:#dc2626" i],
html[data-theme="dark"] [style*="; color:#dc2626" i],
html[data-theme="dark"] [style^="color: #dc2626" i],
html[data-theme="dark"] [style*=";color: #dc2626" i],
html[data-theme="dark"] [style*="; color: #dc2626" i],
html[data-theme="dark"] [style^="color:#c2410c" i],
html[data-theme="dark"] [style*=";color:#c2410c" i],
html[data-theme="dark"] [style*="; color:#c2410c" i],
html[data-theme="dark"] [style^="color: #c2410c" i],
html[data-theme="dark"] [style*=";color: #c2410c" i],
html[data-theme="dark"] [style*="; color: #c2410c" i] { color: #fca5a5 !important; }
html[data-theme="dark"] [style^="color:#9a3412" i],
html[data-theme="dark"] [style*=";color:#9a3412" i],
html[data-theme="dark"] [style*="; color:#9a3412" i],
html[data-theme="dark"] [style^="color: #9a3412" i],
html[data-theme="dark"] [style*=";color: #9a3412" i],
html[data-theme="dark"] [style*="; color: #9a3412" i],
html[data-theme="dark"] [style^="color:#92400e" i],
html[data-theme="dark"] [style*=";color:#92400e" i],
html[data-theme="dark"] [style*="; color:#92400e" i],
html[data-theme="dark"] [style^="color: #92400e" i],
html[data-theme="dark"] [style*=";color: #92400e" i],
html[data-theme="dark"] [style*="; color: #92400e" i],
html[data-theme="dark"] [style^="color:#78350f" i],
html[data-theme="dark"] [style*=";color:#78350f" i],
html[data-theme="dark"] [style*="; color:#78350f" i],
html[data-theme="dark"] [style^="color: #78350f" i],
html[data-theme="dark"] [style*=";color: #78350f" i],
html[data-theme="dark"] [style*="; color: #78350f" i],
html[data-theme="dark"] [style^="color:#b45309" i],
html[data-theme="dark"] [style*=";color:#b45309" i],
html[data-theme="dark"] [style*="; color:#b45309" i],
html[data-theme="dark"] [style^="color: #b45309" i],
html[data-theme="dark"] [style*=";color: #b45309" i],
html[data-theme="dark"] [style*="; color: #b45309" i],
html[data-theme="dark"] [style^="color:#854d0e" i],
html[data-theme="dark"] [style*=";color:#854d0e" i],
html[data-theme="dark"] [style*="; color:#854d0e" i],
html[data-theme="dark"] [style^="color: #854d0e" i],
html[data-theme="dark"] [style*=";color: #854d0e" i],
html[data-theme="dark"] [style*="; color: #854d0e" i],
html[data-theme="dark"] [style^="color:#a16207" i],
html[data-theme="dark"] [style*=";color:#a16207" i],
html[data-theme="dark"] [style*="; color:#a16207" i],
html[data-theme="dark"] [style^="color: #a16207" i],
html[data-theme="dark"] [style*=";color: #a16207" i],
html[data-theme="dark"] [style*="; color: #a16207" i] { color: #f2c98a !important; }
html[data-theme="dark"] [style^="color:#1e40af" i],
html[data-theme="dark"] [style*=";color:#1e40af" i],
html[data-theme="dark"] [style*="; color:#1e40af" i],
html[data-theme="dark"] [style^="color: #1e40af" i],
html[data-theme="dark"] [style*=";color: #1e40af" i],
html[data-theme="dark"] [style*="; color: #1e40af" i],
html[data-theme="dark"] [style^="color:#1d4ed8" i],
html[data-theme="dark"] [style*=";color:#1d4ed8" i],
html[data-theme="dark"] [style*="; color:#1d4ed8" i],
html[data-theme="dark"] [style^="color: #1d4ed8" i],
html[data-theme="dark"] [style*=";color: #1d4ed8" i],
html[data-theme="dark"] [style*="; color: #1d4ed8" i],
html[data-theme="dark"] [style^="color:#1e3a8a" i],
html[data-theme="dark"] [style*=";color:#1e3a8a" i],
html[data-theme="dark"] [style*="; color:#1e3a8a" i],
html[data-theme="dark"] [style^="color: #1e3a8a" i],
html[data-theme="dark"] [style*=";color: #1e3a8a" i],
html[data-theme="dark"] [style*="; color: #1e3a8a" i],
html[data-theme="dark"] [style^="color:#0c4a6e" i],
html[data-theme="dark"] [style*=";color:#0c4a6e" i],
html[data-theme="dark"] [style*="; color:#0c4a6e" i],
html[data-theme="dark"] [style^="color: #0c4a6e" i],
html[data-theme="dark"] [style*=";color: #0c4a6e" i],
html[data-theme="dark"] [style*="; color: #0c4a6e" i],
html[data-theme="dark"] [style^="color:#075985" i],
html[data-theme="dark"] [style*=";color:#075985" i],
html[data-theme="dark"] [style*="; color:#075985" i],
html[data-theme="dark"] [style^="color: #075985" i],
html[data-theme="dark"] [style*=";color: #075985" i],
html[data-theme="dark"] [style*="; color: #075985" i],
html[data-theme="dark"] [style^="color:#2c5282" i],
html[data-theme="dark"] [style*=";color:#2c5282" i],
html[data-theme="dark"] [style*="; color:#2c5282" i],
html[data-theme="dark"] [style^="color: #2c5282" i],
html[data-theme="dark"] [style*=";color: #2c5282" i],
html[data-theme="dark"] [style*="; color: #2c5282" i],
html[data-theme="dark"] [style^="color:#1e429f" i],
html[data-theme="dark"] [style*=";color:#1e429f" i],
html[data-theme="dark"] [style*="; color:#1e429f" i],
html[data-theme="dark"] [style^="color: #1e429f" i],
html[data-theme="dark"] [style*=";color: #1e429f" i],
html[data-theme="dark"] [style*="; color: #1e429f" i] { color: #93c5fd !important; }
/* ---- Tiêu đề bảng: chữ sáng (kể cả thead nền màu thương hiệu) ---- */
html[data-theme="dark"] thead th:not([style*="color" i]),
html[data-theme="dark"] .table > thead > tr > th:not([style*="color" i]) { color: var(--heading) !important; }
/* ---- Tiêu đề danh mục trang chủ nằm trên dải gradient thương hiệu ---- */
html[data-theme="dark"] .home-heading h3 { color: #ffffff !important; }
/* ---- Phân trang bị vô hiệu ---- */
html[data-theme="dark"] .page-item.disabled .page-link { color: #8a94a6 !important; background-color: var(--surface2) !important; }
html[data-theme="dark"] .page-link { color: var(--text); border-color: var(--border) !important; }
html[data-theme="dark"] .page-item.active .page-link { background-color: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
/* ---- recharge-xipay: thẻ chọn phương thức thanh toán ---- */
html[data-theme="dark"] .method-card { background-color: var(--surface2) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .method-card:hover { border-color: var(--primary) !important; }
html[data-theme="dark"] .method-card.active { background-color: var(--surface-hover) !important; border-color: var(--primary) !important; }
/* ---- chữ trắng trên nền vàng (bg-warning text-white — lỗi sẵn có của theme gốc) ---- */
html[data-theme="dark"] .bg-warning.text-white { color: #1f2937 !important; }
/* ---- chữ đậm bên trong nút kế thừa màu nút ---- */
html[data-theme="dark"] .btn b,
html[data-theme="dark"] .btn strong { color: inherit !important; }
/* ---- nút xám Bootstrap: nền đã tối thì chữ phải sáng (gốc #333) ---- */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark { color: var(--heading) !important; }
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover { background: var(--surface-hover) !important; color: #fff !important; }

/* ---- v4: catch-all nền sáng INLINE sinh tự động (mọi biến thể dấu cách / background / background-color) ---- */
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#ffffff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#FFFFFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#fff;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#FFF;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#fff " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:#fff!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:white;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:white " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background:white!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background:#fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background:#FFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background:white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #ffffff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #FFFFFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #fff;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #FFF;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #fff " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: #fff!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: white;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: white " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background: white!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background: #fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background: #FFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background: white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#ffffff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#FFFFFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#fff;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#FFF;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#fff " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:#fff!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:white;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:white " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color:white!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color:#fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color:#FFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color:white" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #ffffff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #FFFFFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #fff;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #FFF;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #fff " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: #fff!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: white;" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: white " i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style*="background-color: white!" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color: #fff" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color: #FFF" i],
html[data-theme="dark"] *:not(img):not(svg):not(canvas)[style$="background-color: white" i] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] *[style*="background:#fafafa" i],
html[data-theme="dark"] *[style*="background: #fafafa" i],
html[data-theme="dark"] *[style*="background-color:#fafafa" i],
html[data-theme="dark"] *[style*="background-color: #fafafa" i],
html[data-theme="dark"] *[style*="background:#f9fafb" i],
html[data-theme="dark"] *[style*="background: #f9fafb" i],
html[data-theme="dark"] *[style*="background-color:#f9fafb" i],
html[data-theme="dark"] *[style*="background-color: #f9fafb" i],
html[data-theme="dark"] *[style*="background:#f8f9fa" i],
html[data-theme="dark"] *[style*="background: #f8f9fa" i],
html[data-theme="dark"] *[style*="background-color:#f8f9fa" i],
html[data-theme="dark"] *[style*="background-color: #f8f9fa" i],
html[data-theme="dark"] *[style*="background:#f8fafc" i],
html[data-theme="dark"] *[style*="background: #f8fafc" i],
html[data-theme="dark"] *[style*="background-color:#f8fafc" i],
html[data-theme="dark"] *[style*="background-color: #f8fafc" i],
html[data-theme="dark"] *[style*="background:#f7fafc" i],
html[data-theme="dark"] *[style*="background: #f7fafc" i],
html[data-theme="dark"] *[style*="background-color:#f7fafc" i],
html[data-theme="dark"] *[style*="background-color: #f7fafc" i],
html[data-theme="dark"] *[style*="background:#f1f5f9" i],
html[data-theme="dark"] *[style*="background: #f1f5f9" i],
html[data-theme="dark"] *[style*="background-color:#f1f5f9" i],
html[data-theme="dark"] *[style*="background-color: #f1f5f9" i],
html[data-theme="dark"] *[style*="background:#f5f5f5" i],
html[data-theme="dark"] *[style*="background: #f5f5f5" i],
html[data-theme="dark"] *[style*="background-color:#f5f5f5" i],
html[data-theme="dark"] *[style*="background-color: #f5f5f5" i],
html[data-theme="dark"] *[style*="background:#fcfcfc" i],
html[data-theme="dark"] *[style*="background: #fcfcfc" i],
html[data-theme="dark"] *[style*="background-color:#fcfcfc" i],
html[data-theme="dark"] *[style*="background-color: #fcfcfc" i],
html[data-theme="dark"] *[style*="background:#fdfdfd" i],
html[data-theme="dark"] *[style*="background: #fdfdfd" i],
html[data-theme="dark"] *[style*="background-color:#fdfdfd" i],
html[data-theme="dark"] *[style*="background-color: #fdfdfd" i],
html[data-theme="dark"] *[style*="background:#f3f4f6" i],
html[data-theme="dark"] *[style*="background: #f3f4f6" i],
html[data-theme="dark"] *[style*="background-color:#f3f4f6" i],
html[data-theme="dark"] *[style*="background-color: #f3f4f6" i],
html[data-theme="dark"] *[style*="background:#f6f6f6" i],
html[data-theme="dark"] *[style*="background: #f6f6f6" i],
html[data-theme="dark"] *[style*="background-color:#f6f6f6" i],
html[data-theme="dark"] *[style*="background-color: #f6f6f6" i],
html[data-theme="dark"] *[style*="background:#efefef" i],
html[data-theme="dark"] *[style*="background: #efefef" i],
html[data-theme="dark"] *[style*="background-color:#efefef" i],
html[data-theme="dark"] *[style*="background-color: #efefef" i],
html[data-theme="dark"] *[style*="background:#fefefe" i],
html[data-theme="dark"] *[style*="background: #fefefe" i],
html[data-theme="dark"] *[style*="background-color:#fefefe" i],
html[data-theme="dark"] *[style*="background-color: #fefefe" i],
html[data-theme="dark"] *[style*="background:#fbfbfb" i],
html[data-theme="dark"] *[style*="background: #fbfbfb" i],
html[data-theme="dark"] *[style*="background-color:#fbfbfb" i],
html[data-theme="dark"] *[style*="background-color: #fbfbfb" i],
html[data-theme="dark"] *[style*="background:#f2f2f2" i],
html[data-theme="dark"] *[style*="background: #f2f2f2" i],
html[data-theme="dark"] *[style*="background-color:#f2f2f2" i],
html[data-theme="dark"] *[style*="background-color: #f2f2f2" i],
html[data-theme="dark"] *[style*="background:#f0f0f0" i],
html[data-theme="dark"] *[style*="background: #f0f0f0" i],
html[data-theme="dark"] *[style*="background-color:#f0f0f0" i],
html[data-theme="dark"] *[style*="background-color: #f0f0f0" i],
html[data-theme="dark"] *[style*="background:#eeeeee" i],
html[data-theme="dark"] *[style*="background: #eeeeee" i],
html[data-theme="dark"] *[style*="background-color:#eeeeee" i],
html[data-theme="dark"] *[style*="background-color: #eeeeee" i],
html[data-theme="dark"] *[style*="background:#eee;" i],
html[data-theme="dark"] *[style*="background: #eee;" i],
html[data-theme="dark"] *[style*="background-color:#eee;" i],
html[data-theme="dark"] *[style*="background-color: #eee;" i],
html[data-theme="dark"] *[style*="background:#f4f4f4" i],
html[data-theme="dark"] *[style*="background: #f4f4f4" i],
html[data-theme="dark"] *[style*="background-color:#f4f4f4" i],
html[data-theme="dark"] *[style*="background-color: #f4f4f4" i],
html[data-theme="dark"] *[style*="background:#f5f6f7" i],
html[data-theme="dark"] *[style*="background: #f5f6f7" i],
html[data-theme="dark"] *[style*="background-color:#f5f6f7" i],
html[data-theme="dark"] *[style*="background-color: #f5f6f7" i],
html[data-theme="dark"] *[style*="background:#f5f7fa" i],
html[data-theme="dark"] *[style*="background: #f5f7fa" i],
html[data-theme="dark"] *[style*="background-color:#f5f7fa" i],
html[data-theme="dark"] *[style*="background-color: #f5f7fa" i],
html[data-theme="dark"] *[style*="background:#f7f7f7" i],
html[data-theme="dark"] *[style*="background: #f7f7f7" i],
html[data-theme="dark"] *[style*="background-color:#f7f7f7" i],
html[data-theme="dark"] *[style*="background-color: #f7f7f7" i],
html[data-theme="dark"] *[style*="background:#f8f8f8" i],
html[data-theme="dark"] *[style*="background: #f8f8f8" i],
html[data-theme="dark"] *[style*="background-color:#f8f8f8" i],
html[data-theme="dark"] *[style*="background-color: #f8f8f8" i],
html[data-theme="dark"] *[style*="background:#f9f9f9" i],
html[data-theme="dark"] *[style*="background: #f9f9f9" i],
html[data-theme="dark"] *[style*="background-color:#f9f9f9" i],
html[data-theme="dark"] *[style*="background-color: #f9f9f9" i],
html[data-theme="dark"] *[style*="background:#fafbfc" i],
html[data-theme="dark"] *[style*="background: #fafbfc" i],
html[data-theme="dark"] *[style*="background-color:#fafbfc" i],
html[data-theme="dark"] *[style*="background-color: #fafbfc" i],
html[data-theme="dark"] *[style*="background:#f6f8fa" i],
html[data-theme="dark"] *[style*="background: #f6f8fa" i],
html[data-theme="dark"] *[style*="background-color:#f6f8fa" i],
html[data-theme="dark"] *[style*="background-color: #f6f8fa" i],
html[data-theme="dark"] *[style*="background:#f0f2f5" i],
html[data-theme="dark"] *[style*="background: #f0f2f5" i],
html[data-theme="dark"] *[style*="background-color:#f0f2f5" i],
html[data-theme="dark"] *[style*="background-color: #f0f2f5" i],
html[data-theme="dark"] *[style*="background:#e9ecef" i],
html[data-theme="dark"] *[style*="background: #e9ecef" i],
html[data-theme="dark"] *[style*="background-color:#e9ecef" i],
html[data-theme="dark"] *[style*="background-color: #e9ecef" i],
html[data-theme="dark"] *[style*="background:#f1f3f5" i],
html[data-theme="dark"] *[style*="background: #f1f3f5" i],
html[data-theme="dark"] *[style*="background-color:#f1f3f5" i],
html[data-theme="dark"] *[style*="background-color: #f1f3f5" i] {
  background-color: var(--surface2) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] img[style*="background" i] { background:#fff !important; }  /* QR giữ trắng (đặt lại sau catch-all) */
/* ---- popup xuất tài khoản (product-order): selector theo id mạnh hơn ---- */
html[data-theme="dark"] #exportAccountColumnsList .list-group-item { background-color: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] #exportAccountColumnsList .list-group-item:hover { background-color: var(--surface-hover) !important; }
html[data-theme="dark"] .list-group-item { background-color: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .card-header { background-color: var(--surface2) !important; border-color: var(--border) !important; }
/* ---- alert riêng trang PaymentPoint ---- */
html[data-theme="dark"] .pp-alert-success { background: rgba(17,183,107,.14) !important; color: #9be7c2 !important; border-color: rgba(17,183,107,.35) !important; }
html[data-theme="dark"] .pp-alert-warning { background: rgba(245,158,11,.12) !important; color: #f2c98a !important; border-color: rgba(245,158,11,.38) !important; }
html[data-theme="dark"] .pp-alert-info { background: rgba(59,130,246,.13) !important; color: #a9c9ff !important; border-color: rgba(59,130,246,.35) !important; }
html[data-theme="dark"] .pp-alert-danger { background: rgba(239,68,68,.12) !important; color: #fca5a5 !important; border-color: rgba(248,113,113,.45) !important; }
/* ---- nút "Thêm vào yêu thích" trong popup mua ---- */
html[data-theme="dark"] .input_favorite + label .action span.option-1 { color: var(--text) !important; }
/* ---- Trả lại MÀU NHẤN cho trạng thái active (phát hiện bằng so sánh light<->dark) ---- */
html[data-theme="dark"] .contact-card.active { background: var(--primary) !important; border-color: var(--primary) !important; }
html[data-theme="dark"] .contact-card.active h4,
html[data-theme="dark"] .contact-card.active p,
html[data-theme="dark"] .contact-card.active a { color: #fff !important; }
html[data-theme="dark"] .contact-card.active i { background: #fff !important; color: var(--primary) !important; }
html[data-theme="dark"] #top-menu-right li a.active,
html[data-theme="dark"] #top-menu-right .menu-item.active { background: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .page-link.active,
html[data-theme="dark"] .page-item.active > .page-link,
html[data-theme="dark"] .paginate_button.active > .page-link { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .crypto-info-box { background: rgba(59,130,246,.13) !important; border-color: rgba(59,130,246,.35) !important; }
/* =========================================================================
   NÚT BẬT/TẮT TRÊN MOBILE (header-media-group) — áp dụng cả sáng & tối
   (nhóm nút desktop .header-widget-group bị ẩn khi <=991px)
   ========================================================================= */
.header-media-right { display: flex; align-items: center; gap: 8px; }
.header-theme { background: transparent; border: none; padding: 0; cursor: pointer; }
.header-theme i {
  width: 40px; height: 40px; font-size: 15px; line-height: 40px; text-align: center;
  border-radius: 50%; color: var(--text); background: var(--chalk); transition: all linear .3s;
}
.header-theme i:hover { color: #fff; background: var(--primary); }

/* =========================================================================
   v8 PHÂN TẦNG — sửa theo audit mode 5 (khối tách ở bản sáng nhưng hoà lẫn ở bản tối)
   ========================================================================= */
/* ô ví: khối con trên card (gốc var(--chalk)) */
html[data-theme="dark"] .wallet-card { background: var(--chalk) !important; }
html[data-theme="dark"] .wallet-card:hover { background: var(--primary) !important; }
html[data-theme="dark"] .wallet-card:hover p,
html[data-theme="dark"] .wallet-card:hover h3 { color: #fff !important; }
/* danh sách chọn ngôn ngữ/tiền tệ: tách khỏi ô select cha */
html[data-theme="dark"] .nice-select .list { background-color: var(--surface-hover) !important; border: 1px solid #3d4c6b !important; box-shadow: 0 10px 28px rgba(0,0,0,.55) !important; }
html[data-theme="dark"] .nice-select .option.selected { background-color: transparent !important; font-weight: 700; }  /* như bản gốc: mục đang chọn chỉ in đậm */
html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus { background-color: #3a4968 !important; }
/* nút đen Bootstrap trên card tối */
html[data-theme="dark"] .btn-dark { background-color: #34425e !important; border-color: #45557a !important; color: #fff !important; }
html[data-theme="dark"] .btn-dark:hover { background-color: #3f4f70 !important; }
/* icon mạng xã hội footer (gốc trắng + bóng đổ trên nền trắng) */
html[data-theme="dark"] .footer-social li a { background: var(--chalk) !important; }
/* nút viền Bootstrap: màu gốc đậm (#0d6efd, #198754...) thiếu tương phản trên khối tối -> tông sáng hơn */
html[data-theme="dark"] .btn-outline-primary { color: #6ea8fe !important; border-color: #6ea8fe !important; }
html[data-theme="dark"] .btn-outline-success { color: #75d9a7 !important; border-color: #75d9a7 !important; }
html[data-theme="dark"] .btn-outline-danger { color: #f1868f !important; border-color: #f1868f !important; }
html[data-theme="dark"] .btn-outline-warning { color: #ffd166 !important; border-color: #ffd166 !important; }
html[data-theme="dark"] .btn-outline-info { color: #6edff6 !important; border-color: #6edff6 !important; }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: #0d6efd !important; color: #fff !important; }
html[data-theme="dark"] .btn-outline-success:hover { background-color: #198754 !important; color: #fff !important; }
html[data-theme="dark"] .btn-outline-danger:hover { background-color: #dc3545 !important; color: #fff !important; }
html[data-theme="dark"] .btn-outline-warning:hover { background-color: #ffc107 !important; color: #1f2937 !important; }
html[data-theme="dark"] .btn-outline-info:hover { background-color: #0dcaf0 !important; color: #1f2937 !important; }

/* ---- trả màu nhấn CHỮ (phát hiện bằng so light<->dark màu chữ) ---- */
html[data-theme="dark"] .btn-category-home.active { color: #6fb3d9 !important; }
/* #1e3a5f là xanh navy (màu nhấn) -> xanh sáng, không phải xám trắng */
html[data-theme="dark"] [style*="; color: #1e3a5f" i],
html[data-theme="dark"] [style*="; color:#1e3a5f" i],
html[data-theme="dark"] [style*=";color: #1e3a5f" i],
html[data-theme="dark"] [style*=";color:#1e3a5f" i],
html[data-theme="dark"] [style^="color: #1e3a5f" i],
html[data-theme="dark"] [style^="color:#1e3a5f" i] { color: #93c5fd !important; }

/* ---- v12: viền bảng Bootstrap (dùng currentColor = màu chữ sáng) + khung QR canvas giữ sáng để quét ---- */
html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] .table > :not(:first-child),
html[data-theme="dark"] .table tr,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th { border-color: var(--border) !important; }
html[data-theme="dark"] .qr-wrapper { background: #fff !important; border-color: var(--border) !important; }

/* =========================================================================
   v15 — phản hồi 25/09: (2) select thanh đầu trang, (3) hết hàng bớt mờ,
   (4) QR bớt lóa, (5) mục sidebar đang chọn. Màu thương hiệu dùng var(--primary)
   để đi theo "Màu chủ đạo" trong cài đặt admin — KHÔNG ghi cứng hex.
   ========================================================================= */
/* (2) Ngôn ngữ / Tiền tệ trên thanh màu chủ đạo: trong suốt, chữ trắng như bản sáng */
html[data-theme="dark"] .header-top .nice-select,
html[data-theme="dark"] .header-select .nice-select,
html[data-theme="dark"] .header-top select,
html[data-theme="dark"] .header-select select {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}
html[data-theme="dark"] .header-select .nice-select .current { color: #fff !important; }
html[data-theme="dark"] .header-select .nice-select::after { border-color: #fff !important; }
html[data-theme="dark"] .header-top select option { background: var(--surface-hover); color: var(--heading); }

/* (3) Sản phẩm hết hàng: lớp phủ nhẹ hơn (0.6 -> 0.35) để vẫn đọc được tên/giá */
html[data-theme="dark"] .product-disable::after { background-color: rgba(12, 18, 28, 0.35) !important; }

/* (4) Ảnh QR: giữ nền sáng để quét nhưng giảm lóa trên nền tối (trắng -> ~#e0e0e0, tương phản ~16:1) */
html[data-theme="dark"] .bank-qr-wrap img,
html[data-theme="dark"] .qr-wrapper,
html[data-theme="dark"] img[alt*="QR"],
html[data-theme="dark"] img[id^="vietqr-"] { filter: brightness(0.88); }

/* (5) Sidebar tài khoản: mục đang chọn (.mobile-menu-active) + hover — theo màu chủ đạo admin */
html[data-theme="dark"] .sidebar_profile:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}
html[data-theme="dark"] .sidebar_profile.mobile-menu-active,
html[data-theme="dark"] .sidebar_profile.active {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
  border-top: 2px solid var(--primary) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
html[data-theme="dark"] .sidebar_profile.mobile-menu-active h6,
html[data-theme="dark"] .sidebar_profile.mobile-menu-active i { color: color-mix(in srgb, var(--primary) 70%, #fff) !important; }
/* .mobile-menu-active dùng chung (vd menu dưới mobile): giữ viền trên màu chủ đạo */
html[data-theme="dark"] .mobile-menu-active { border-top-color: var(--primary) !important; }

/* ---- v17: hover của nút Bootstrap (vendor/bootstrap không nằm trong bộ quét hover tự động) ---- */
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-dark:hover,
html[data-theme="dark"] .btn-light:hover { border-color: #5a6b90 !important; }
html[data-theme="dark"] .btn-outline-primary:hover { border-color: #0d6efd !important; }
html[data-theme="dark"] .btn-outline-success:hover { border-color: #198754 !important; }
html[data-theme="dark"] .btn-outline-danger:hover { border-color: #dc3545 !important; }
html[data-theme="dark"] .btn-outline-warning:hover { border-color: #ffc107 !important; }
html[data-theme="dark"] .btn-outline-info:hover { border-color: #0dcaf0 !important; }
html[data-theme="dark"] .modal-close:hover { color: #fff !important; }

/* =========================================================================
   v19 — chế độ hiển thị trang chủ + bảng xếp hạng (theo báo cáo agent)
   ========================================================================= */
/* Bảng xếp hạng: tab đang chọn (gốc var(--primary)) bị nền surface !important đè */
html[data-theme="dark"] .lb-tab.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
/* top 1-2-3: viền trái màu huy chương (gốc main.css cố định) bị border-color chung đè */
html[data-theme="dark"] .lb-row.lb-top-1 { border-left-color: #f59e0b !important; }
html[data-theme="dark"] .lb-row.lb-top-2 { border-left-color: #94a3b8 !important; }
html[data-theme="dark"] .lb-row.lb-top-3 { border-left-color: #ea580c !important; }
/* tên của chính mình (gốc đỏ #dc3545): sáng hơn để đọc được trên nền tối */
html[data-theme="dark"] .lb-is-me .lb-name { color: #ff7b89 !important; }
/* BOX_4: icon dấu tích xanh lá đậm */
html[data-theme="dark"] .product-body-box4 p i { color: #86c35a !important; }
/* LIST/BOX_5/BOX_6: ô giá giữ viền chấm hồng như bản sáng */
html[data-theme="dark"] .card-price-product-list { border-color: rgba(233, 30, 99, 0.6) !important; }

/* ---- v19: menu danh mục BÊN TRÁI (menu_category_right=2) — sao y bên phải ---- */
html[data-theme="dark"] #top-menu-left li a,
html[data-theme="dark"] #top-menu-left .menu-item { background: var(--surface2) !important; border-color: var(--border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] #top-menu-left i { background: transparent !important; }
html[data-theme="dark"] #top-menu-left li a.active,
html[data-theme="dark"] #top-menu-left .menu-item.active { background: var(--primary) !important; color: #fff !important; }
/* ---- nút danh mục trang chủ: focus + mục đang chọn có nền riêng như bản sáng ---- */
html[data-theme="dark"] .btn-category-home:focus { background-color: #3a4968 !important; color: #fff !important; }
html[data-theme="dark"] .btn-category-home.active { background-color: var(--surface-hover) !important; }
/* ---- v21: phân tầng (ma trận chế độ hiển thị) ---- */
/* BOX_4: đầu thẻ (gốc #f5f5f5 trên thẻ trắng) -> khối con */
html[data-theme="dark"] .product-head-box4 { background: var(--chalk) !important; }
/* nút "Thêm vào mục yêu thích" trong popup mua: tách khỏi nền popup */
html[data-theme="dark"] .label_favorite { background: var(--chalk) !important; border: 1px solid var(--border) !important; }
/* ---- v22: popup/modal tách khỏi trang phía sau (nền tối -> lớp phủ 50% gần như vô hình, popup hoà vào header) ---- */
html[data-theme="dark"] .modal-backdrop.show { opacity: .78 !important; }
html[data-theme="dark"] .modal-content { border: 1px solid #3d4c6b !important; box-shadow: 0 24px 70px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) !important; }

/* =========================================================================
   v23 — THÔNG BÁO (toast): Simple Notify (showMessage, dùng ở 30 file) + cute-alert.
   Nạp từ CDN/thư viện ngoài bộ quét -> dark mode từng để NỀN TRẮNG + CHỮ SÁNG (gần như vô hình).
   Giữ viền/màu nhấn theo loại (thành công xanh, lỗi đỏ...). Dạng "filled" (nền màu) giữ nguyên.
   ========================================================================= */
html[data-theme="dark"] .sn-notify.sn-notify-outline,
html[data-theme="dark"] .sn-notify:not(.sn-notify-filled) {
  background-color: var(--surface2) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6) !important;
}
html[data-theme="dark"] .sn-notify:not(.sn-notify-filled) .sn-notify-title { color: var(--heading) !important; }
html[data-theme="dark"] .sn-notify:not(.sn-notify-filled) .sn-notify-text { color: var(--text) !important; }
html[data-theme="dark"] .sn-notify:not(.sn-notify-filled) .sn-notify-close { color: var(--gray) !important; }
/* cute-alert */
html[data-theme="dark"] .alert-frame { background: var(--surface2) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, .65) !important; }
html[data-theme="dark"] .alert-title { color: var(--heading) !important; }
html[data-theme="dark"] .alert-message { color: var(--text) !important; }
html[data-theme="dark"] .alert-close,
html[data-theme="dark"] .toast-close { color: rgba(255, 255, 255, .35) !important; }
html[data-theme="dark"] .alert-close:hover,
html[data-theme="dark"] .toast-close:hover { color: rgba(255, 255, 255, .7) !important; }
html[data-theme="dark"] .alert-close-circle { background: var(--surface-hover) !important; color: var(--heading) !important; }
html[data-theme="dark"] .alert-close-circle:hover { background: #3a4968 !important; }