/* * GIAO DIỆN TỐI - dùng chung cho trang quản trị và trang người dùng. * * Cách hoạt động: khi bật, thẻ được gắn data-theme="dark". * Toàn bộ luật bên dưới chỉ áp dụng khi có thuộc tính đó, * nên giao diện sáng giữ nguyên 100%, không ảnh hưởng gì. */ [data-theme="dark"] { --nen-0: #14171c; /* nền ngoài cùng */ --nen-1: #1b1f26; /* nền khối, thẻ */ --nen-2: #232830; /* nền nổi hơn: input, bảng kẻ */ --nen-3: #2c323c; /* viền, đường kẻ */ --chu-1: #e3e6ea; /* chữ chính */ --chu-2: #a8b0ba; /* chữ phụ */ --chu-3: #7d8590; /* chữ mờ */ --xanh: #4a9eff; /* link */ color-scheme: dark; } /* ---------- NỀN & CHỮ CHUNG ---------- */ [data-theme="dark"] body, [data-theme="dark"] .content-wrapper, [data-theme="dark"] .wrapper, [data-theme="dark"] .main-footer { background-color: var(--nen-0) !important; color: var(--chu-1) !important; } /* * CHỮ: chỉ đổi màu cho những thẻ KHÔNG tự đặt màu nền riêng. * Tuyệt đối không dùng luật quét chung cho span/div, vì sẽ phá màu của * các nhãn, huy hiệu, nút bấm vốn đã có nền màu riêng (chữ bị lẫn vào nền). */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--chu-1); } /* * Các thẻ chứa chữ thuần (không có nền màu riêng) thì đổi sang màu sáng. * Không dùng !important để những luật riêng bên dưới vẫn đè lên được. */ [data-theme="dark"] label, [data-theme="dark"] .control-label, [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] dt, [data-theme="dark"] dd, [data-theme="dark"] small, [data-theme="dark"] strong, [data-theme="dark"] b, [data-theme="dark"] em, [data-theme="dark"] legend, [data-theme="dark"] figcaption, [data-theme="dark"] blockquote { color: var(--chu-1); } [data-theme="dark"] .help-block, [data-theme="dark"] .text-muted, [data-theme="dark"] .form-text { color: var(--chu-3) !important; } [data-theme="dark"] a { color: var(--xanh); } [data-theme="dark"] a:hover { color: #7ab8ff; } /* Link dạng NÚT phải giữ chữ trắng, không bị luật màu link ở trên đè lên */ [data-theme="dark"] a.btn, [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-warning, [data-theme="dark"] .btn-info, [data-theme="dark"] .btn-mylib, [data-theme="dark"] .sp-nut, [data-theme="dark"] .btn-premium, [data-theme="dark"] .kho-nut-them, [data-theme="dark"] .small-box-footer, [data-theme="dark"] .label, [data-theme="dark"] .badge { color: #fff !important; } [data-theme="dark"] a.btn:hover, [data-theme="dark"] .btn-mylib:hover, [data-theme="dark"] .sp-nut:hover, [data-theme="dark"] .btn-premium:hover { color: #fff !important; } /* ---------- KHỐI, THẺ, HỘP ---------- */ [data-theme="dark"] .box, [data-theme="dark"] .panel, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .nav-tabs-custom, [data-theme="dark"] .small-box, [data-theme="dark"] .info-box, [data-theme="dark"] .callout { background-color: var(--nen-1) !important; color: var(--chu-1) !important; border-color: var(--nen-3) !important; } [data-theme="dark"] .box-header, [data-theme="dark"] .box-footer, [data-theme="dark"] .panel-heading, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .box-title, [data-theme="dark"] .box-header .box-title { color: var(--chu-1) !important; } /* ---------- BẢNG ---------- */ [data-theme="dark"] .table, [data-theme="dark"] table { color: var(--chu-1) !important; border-color: var(--nen-3) !important; } [data-theme="dark"] .table > thead > tr > th, [data-theme="dark"] .table > tbody > tr > td, [data-theme="dark"] .table > tbody > tr > th, [data-theme="dark"] .table > tfoot > tr > td { border-color: var(--nen-3) !important; background-color: transparent !important; } [data-theme="dark"] .table > thead > tr > th { background-color: var(--nen-2) !important; color: var(--chu-1) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .028) !important; } [data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(74, 158, 255, .10) !important; } /* Dòng tô màu cảnh báo trong bảng */ [data-theme="dark"] .table > tbody > tr.warning, [data-theme="dark"] tr.warning { background-color: rgba(240, 173, 78, .14) !important; } [data-theme="dark"] .table > tbody > tr.info, [data-theme="dark"] tr.info { background-color: rgba(74, 158, 255, .12) !important; } /* ---------- Ô NHẬP ---------- */ [data-theme="dark"] .form-control, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--nen-2) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--xanh) !important; box-shadow: 0 0 0 2px rgba(74, 158, 255, .18) !important; } [data-theme="dark"] ::placeholder { color: var(--chu-3) !important; opacity: 1; } [data-theme="dark"] .input-group-addon { background-color: var(--nen-3) !important; border-color: var(--nen-3) !important; color: var(--chu-2) !important; } /* ---------- NÚT ---------- */ [data-theme="dark"] .btn-default { background-color: var(--nen-2) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .btn-default:hover { background-color: var(--nen-3) !important; } /* ---------- ADMIN: THANH ĐẦU & MENU TRÁI ---------- */ [data-theme="dark"] .main-header .navbar, [data-theme="dark"] .main-header .logo { background-color: #171b21 !important; color: var(--chu-1) !important; } [data-theme="dark"] .main-header .logo { border-bottom-color: var(--nen-3) !important; } [data-theme="dark"] .main-sidebar, [data-theme="dark"] .left-side { background-color: #12151a !important; } [data-theme="dark"] .sidebar-menu > li > a { color: var(--chu-2) !important; } [data-theme="dark"] .sidebar-menu > li:hover > a, [data-theme="dark"] .sidebar-menu > li.active > a { background-color: #1d222a !important; color: #fff !important; } [data-theme="dark"] .sidebar-menu .treeview-menu { background-color: #0e1116 !important; } [data-theme="dark"] .sidebar-menu .treeview-menu > li > a { color: var(--chu-3) !important; } [data-theme="dark"] .sidebar-menu .treeview-menu > li > a:hover { color: #fff !important; } [data-theme="dark"] .user-panel > .info, [data-theme="dark"] .user-panel > .info > a { color: var(--chu-1) !important; } [data-theme="dark"] .content-header > h1, [data-theme="dark"] .content-header > h1 > small { color: var(--chu-1) !important; } [data-theme="dark"] .breadcrumb { background-color: transparent !important; } [data-theme="dark"] .breadcrumb > li > a { color: var(--xanh) !important; } /* ---------- ADMIN: THANH TÌM KIẾM, BỘ LỌC & NAVBAR DEFAULT ---------- */ [data-theme="dark"] .search_bar, [data-theme="dark"] nav.search_bar, [data-theme="dark"] .navbar-default, [data-theme="dark"] .navbar-form, [data-theme="dark"] .navbar-collapse, [data-theme="dark"] .filter-bar, [data-theme="dark"] .well, [data-theme="dark"] .panel-default { background-color: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .search_bar .search_title, [data-theme="dark"] .search_bar label, [data-theme="dark"] .search_bar .control-label, [data-theme="dark"] .navbar-default .navbar-brand, [data-theme="dark"] .navbar-default .navbar-nav > li > a, [data-theme="dark"] .navbar-default label { color: var(--chu-1) !important; font-weight: 600; } [data-theme="dark"] .search_bar p, [data-theme="dark"] .search_bar small, [data-theme="dark"] .search_bar span, [data-theme="dark"] .search_bar em, [data-theme="dark"] .search_bar div, [data-theme="dark"] .navbar-default p, [data-theme="dark"] .navbar-default small, [data-theme="dark"] .navbar-default em { color: var(--chu-2) !important; } [data-theme="dark"] .search_bar input[type="text"], [data-theme="dark"] .search_bar input[type="search"], [data-theme="dark"] .search_bar select, [data-theme="dark"] .search_bar .form-control, [data-theme="dark"] .navbar-default input, [data-theme="dark"] .navbar-default select, [data-theme="dark"] .navbar-default .form-control { background-color: var(--nen-2) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .search_bar .btn-primary, [data-theme="dark"] .search_bar .btn-success, [data-theme="dark"] .search_bar .btn-info, [data-theme="dark"] .navbar-default .btn-primary { color: #fff !important; } [data-theme="dark"] .navbar-default .navbar-toggle { border-color: var(--nen-3) !important; background-color: var(--nen-2) !important; } [data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background-color: var(--chu-1) !important; } /* ---------- PHÂN TRANG (PAGINATION) ---------- */ [data-theme="dark"] .pagination > li > a, [data-theme="dark"] .pagination > li > span { background-color: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .pagination > li > a:hover, [data-theme="dark"] .pagination > li > span:hover { background-color: var(--nen-2) !important; border-color: var(--xanh) !important; color: #fff !important; } [data-theme="dark"] .pagination > .active > a, [data-theme="dark"] .pagination > .active > span, [data-theme="dark"] .pagination > .active > a:hover, [data-theme="dark"] .pagination > .active > span:hover { background-color: var(--xanh) !important; border-color: var(--xanh) !important; color: #fff !important; } [data-theme="dark"] .pagination > .disabled > span, [data-theme="dark"] .pagination > .disabled > a { background-color: var(--nen-0) !important; border-color: var(--nen-3) !important; color: var(--chu-3) !important; } /* ---------- ADMIN: TAB ---------- */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--nen-3) !important; } [data-theme="dark"] .nav-tabs > li > a { color: var(--chu-2) !important; background: transparent !important; } [data-theme="dark"] .nav-tabs > li.active > a, [data-theme="dark"] .nav-tabs > li.active > a:hover { background-color: var(--nen-1) !important; border-color: var(--nen-3) var(--nen-3) transparent !important; color: #fff !important; } [data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--xanh) !important; } /* ---------- TRÌNH SOẠN THẢO ---------- */ [data-theme="dark"] .tox-tinymce { border-color: var(--nen-3) !important; } [data-theme="dark"] .tox .tox-toolbar, [data-theme="dark"] .tox .tox-toolbar__primary, [data-theme="dark"] .tox .tox-menubar, [data-theme="dark"] .tox .tox-statusbar { background-color: var(--nen-2) !important; } [data-theme="dark"] .tox .tox-mbtn__select-label, [data-theme="dark"] .tox .tox-tbtn svg { color: var(--chu-1) !important; fill: var(--chu-1) !important; } /* ---------- TRANG NGƯỜI DÙNG: HEADER TOP & MENU ---------- */ [data-theme="dark"] header, [data-theme="dark"] .box-warpper-inner, [data-theme="dark"] .warpper-single-post, [data-theme="dark"] .box-single-pages, [data-theme="dark"] .single-detail-product, [data-theme="dark"] .membership-wrapper, [data-theme="dark"] .kho-wrap { background-color: var(--nen-0) !important; color: var(--chu-1) !important; } [data-theme="dark"] .header-top { background-color: #14171c !important; color: #e3e6ea !important; border-bottom: 1px solid #232830 !important; } [data-theme="dark"] .header-top-infomation--menu ul li a, [data-theme="dark"] .header-top-infomation--hotline p, [data-theme="dark"] .header-top-infomation--hotline a { color: #e3e6ea !important; } [data-theme="dark"] .header-top-infomation--menu ul li a:hover, [data-theme="dark"] .header-top-infomation--hotline a:hover { color: #4a9eff !important; } /* Thanh Menu chính (không bị trắng toát giữa nền tối) */ [data-theme="dark"] .header-top--menu-main, [data-theme="dark"] .wsmainwp, [data-theme="dark"] .wsmenu, [data-theme="dark"] .wsmenu-list, [data-theme="dark"] .wsmenu-list > li { background-color: #1b1f26 !important; border-color: #2c323c !important; } [data-theme="dark"] .wsmenu-list > li > a { color: #e3e6ea !important; background-color: transparent !important; } [data-theme="dark"] .wsmenu-list > li:hover > a, [data-theme="dark"] .wsmenu-list > li > a:hover, [data-theme="dark"] .wsmenu-list > li.active > a { color: #4a9eff !important; background-color: #232830 !important; } [data-theme="dark"] .wsmenu-submenu, [data-theme="dark"] .wsmenu-submenu-sub, [data-theme="dark"] .wsmenu-submenu-sub-sub, [data-theme="dark"] .megamenu { background-color: #1b1f26 !important; border-color: #2c323c !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important; } [data-theme="dark"] .wsmenu-submenu li a, [data-theme="dark"] .megamenu li a { color: #e3e6ea !important; } [data-theme="dark"] .wsmenu-submenu li a:hover, [data-theme="dark"] .megamenu li a:hover { color: #4a9eff !important; background-color: #232830 !important; } /* Banner tiêu đề xanh lá & Breadcrumb (chữ trắng/vàng, không bị đổi thành màu xanh dương chói mắt) */ [data-theme="dark"] .box-breadcrumb { background-color: #008744 !important; color: #ffffff !important; } [data-theme="dark"] .box-breadcrumb h1, [data-theme="dark"] .box-breadcrumb h2, [data-theme="dark"] .box-breadcrumb h3, [data-theme="dark"] .box-breadcrumb h4, [data-theme="dark"] .box-breadcrumb .block-title h3, [data-theme="dark"] .box-breadcrumb .breadcrumb, [data-theme="dark"] .box-breadcrumb .breadcrumb li, [data-theme="dark"] .box-breadcrumb .breadcrumb li a { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .box-breadcrumb .breadcrumb li a:hover { color: #ffdf00 !important; text-decoration: underline !important; } /* ---------- TRANG CHI TIẾT SẢN PHẨM & NỘI DUNG (Khắc phục chữ tối xám đen) ---------- */ [data-theme="dark"] .box-single-product--content h1, [data-theme="dark"] .single-detail-product h1, [data-theme="dark"] .single-detail-product h2, [data-theme="dark"] .single-detail-product h3, [data-theme="dark"] .single-detail-product h4, [data-theme="dark"] .single-detail-product h5, [data-theme="dark"] .single-detail-product h6, [data-theme="dark"] .detail-product--content-producted .block-title h3, [data-theme="dark"] .content-producted--detail .block-title h3, [data-theme="dark"] .content-producted--used-manual .block-title h3, [data-theme="dark"] .box-product-related .block-title h3, [data-theme="dark"] .block-title h3, [data-theme="dark"] .block-title h2, [data-theme="dark"] .block-title h1 { color: #ffffff !important; } /* Đè mọi style nội tuyến màu đen/xám của CKEditor trong nội dung sản phẩm, hướng dẫn sử dụng */ [data-theme="dark"] .block-content, [data-theme="dark"] .block-content *, [data-theme="dark"] .content-producted--detail, [data-theme="dark"] .content-producted--detail *, [data-theme="dark"] .content-producted--used-manual, [data-theme="dark"] .content-producted--used-manual *, [data-theme="dark"] .box-single-product--content, [data-theme="dark"] .box-single-product--content p, [data-theme="dark"] .box-single-product--content span, [data-theme="dark"] .box-single-product--content div, [data-theme="dark"] .box-single-product--content label, [data-theme="dark"] .box-single-product--content strong, [data-theme="dark"] .box-single-product--content b { color: #e3e6ea !important; background-color: transparent !important; } [data-theme="dark"] .block-content a, [data-theme="dark"] .content-producted--detail a, [data-theme="dark"] .content-producted--used-manual a { color: #4a9eff !important; } [data-theme="dark"] .block-content a:hover, [data-theme="dark"] .content-producted--detail a:hover, [data-theme="dark"] .content-producted--used-manual a:hover { color: #7ab8ff !important; } /* Giá bán & Giá gốc */ [data-theme="dark"] .box-price .price, [data-theme="dark"] .price { color: #ff5252 !important; font-weight: 700 !important; } [data-theme="dark"] .box-price .price-sale, [data-theme="dark"] .price-sale { color: #99a1ab !important; } /* Nút thao tác Mua hàng / Tải về */ [data-theme="dark"] .btn-success:not(#btnThanhToan):not(#add), [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-info, [data-theme="dark"] #btnTaiVeNgay { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] #btnThanhToan, [data-theme="dark"] #add { color: #800000 !important; font-weight: 700 !important; } /* Hộp hiển thị link tải sau khi bấm TẢI VỀ NGAY */ [data-theme="dark"] #boxTaiVe { background-color: #16261b !important; border-color: #28a745 !important; color: #e3e6ea !important; } [data-theme="dark"] #boxTaiVe p, [data-theme="dark"] #boxTaiVe span, [data-theme="dark"] #boxTaiVe div { color: #e3e6ea !important; } [data-theme="dark"] #boxTaiVe a { color: #ffffff !important; background-color: #1e7e34 !important; } [data-theme="dark"] #boxTaiVe a:hover { background-color: #28a745 !important; } /* ---------- DANH SÁCH SẢN PHẨM & THẺ BÀI VIẾT ---------- */ [data-theme="dark"] .project-card, [data-theme="dark"] .sp-item, [data-theme="dark"] .mylib-card, [data-theme="dark"] .kho-thanh, [data-theme="dark"] .search-box, [data-theme="dark"] .empty-note { background-color: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .sp-anh { background-color: var(--nen-2) !important; } [data-theme="dark"] .sp-ten, [data-theme="dark"] .sp-ten a, [data-theme="dark"] .mylib-title, [data-theme="dark"] .mylib-title a, [data-theme="dark"] .project-title, [data-theme="dark"] .project-title a { color: #9fc9ff !important; } [data-theme="dark"] .sp-ten a:hover, [data-theme="dark"] .mylib-title a:hover, [data-theme="dark"] .project-title a:hover { color: #ffffff !important; } [data-theme="dark"] .sp-dm, [data-theme="dark"] .mylib-meta, [data-theme="dark"] .project-desc, [data-theme="dark"] .section-sub { color: #b4bcc8 !important; } /* ---------- FOOTER ---------- */ [data-theme="dark"] footer, [data-theme="dark"] .footer-top, [data-theme="dark"] .footer-bottom { background-color: #14171c !important; color: #a8b0ba !important; border-color: #232830 !important; } [data-theme="dark"] footer h1, [data-theme="dark"] footer h2, [data-theme="dark"] footer h3, [data-theme="dark"] footer h4, [data-theme="dark"] footer h5, [data-theme="dark"] footer h6 { color: #ffffff !important; } [data-theme="dark"] footer a { color: #a8b0ba !important; } [data-theme="dark"] footer a:hover { color: #4a9eff !important; } /* ---------- KHUNG "KHO TÀI LIỆU ĐÃ TẢI" (trang Sửa thông tin cá nhân) ---------- */ /* Khung này đặt nền trắng ngay trong style nội tuyến nên cần !important */ [data-theme="dark"] .khung-kho-tai-lieu { background: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .khung-kho-tai-lieu h3 { color: var(--chu-1) !important; border-bottom-color: var(--nen-3) !important; } [data-theme="dark"] .khung-kho-tai-lieu li { border-bottom-color: var(--nen-3) !important; } [data-theme="dark"] .khung-kho-tai-lieu a { color: #7ab8ff !important; } [data-theme="dark"] .khung-kho-tai-lieu p { color: var(--chu-3) !important; } /* ---------- NHÃN, HUY HIỆU, CHIP LỌC ---------- */ /* Nhãn TÀI LIỆU / SẢN PHẨM: nền sáng chữ đậm -> đổi thành nền đậm chữ sáng */ [data-theme="dark"] .mylib-tag { background: rgba(40, 167, 69, .18) !important; color: #6ee7a0 !important; } /* Nút màu: nền tối hơn một chút để chữ trắng nổi rõ trên nền đen */ [data-theme="dark"] .btn-mylib, [data-theme="dark"] .btn-success { background: #1a7030 !important; border-color: #17652b !important; } [data-theme="dark"] .btn-mylib:hover, [data-theme="dark"] .btn-success:hover { background: #158a38 !important; } [data-theme="dark"] .btn-primary { background: #23548f !important; border-color: #1e4a7f !important; } [data-theme="dark"] .btn-danger { background: #a83232 !important; border-color: #932c2c !important; } [data-theme="dark"] .btn-warning { background: #a9762a !important; border-color: #966826 !important; } /* Nhãn trên ảnh sản phẩm: giữ nền màu đặc, chữ trắng */ [data-theme="dark"] .lb-goi, [data-theme="dark"] .lb-dacbiet, [data-theme="dark"] .lb-moi { color: #fff !important; } /* Chip lọc: nền sáng chữ đậm -> nền tối chữ sáng */ [data-theme="dark"] .filter-chip { background: var(--nen-2) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } [data-theme="dark"] .filter-chip.active { background: #2a5298 !important; border-color: #2a5298 !important; color: #fff !important; } /* Khung "chưa có gì" và ô tìm kiếm trên trang Membership */ [data-theme="dark"] .empty-note { background: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-2) !important; } [data-theme="dark"] .search-hint { color: var(--chu-3) !important; } [data-theme="dark"] .search-count { color: #7ab8ff !important; } [data-theme="dark"] .section-heading { color: var(--chu-1) !important; } /* Giá tiền và giá gạch ngang trong thẻ sản phẩm */ [data-theme="dark"] .sp-gia .gia { color: #ff8a84 !important; } [data-theme="dark"] .sp-gia .gia-cu { color: var(--chu-3) !important; } /* Thẻ ngày tháng, chữ phụ */ [data-theme="dark"] .mylib-meta, [data-theme="dark"] .kho-dem, [data-theme="dark"] .kho-het, [data-theme="dark"] .kho-tai { color: var(--chu-3) !important; } /* ---------- TRANG LIÊN HỆ ---------- */ /* Khối này đặt nền trắng cố định trong style.css nên phải đè lại */ [data-theme="dark"] .block-contact-page { background-color: var(--nen-1) !important; color: var(--chu-1) !important; } [data-theme="dark"] .block-contact-page h2 { color: var(--chu-1) !important; } [data-theme="dark"] .block-contact-page p, [data-theme="dark"] .block-contact-page div, [data-theme="dark"] .block-contact-page span { color: var(--chu-1); } [data-theme="dark"] .block-contact-page a { color: #7ab8ff !important; } /* Viền quanh bản đồ */ [data-theme="dark"] .block-contact-page .embed-map { border-color: var(--nen-3) !important; } /* ---------- CHÂN TRANG ---------- */ [data-theme="dark"] .box-footer, [data-theme="dark"] .box-footer .footer-content, [data-theme="dark"] .box-footer .footer-content p, [data-theme="dark"] .box-footer .footer-content div { color: var(--chu-2) !important; } [data-theme="dark"] .box-footer .footer-title h3 { color: var(--chu-1) !important; } [data-theme="dark"] .box-footer a { color: #7ab8ff !important; } /* ---------- TRANG BỘ ĐẾM / ĐỒNG HỒ / CÂN ---------- */ /* * Bảng dữ liệu ở các trang này tô dòng xen kẽ bằng class .border2 * với nền sáng cố định #eef1f2, nên ở giao diện tối chữ sáng nằm trên * nền sáng -> không đọc được. Đổi sang nền tối hơn nền bảng một chút. */ [data-theme="dark"] .border2, [data-theme="dark"] tr.border2, [data-theme="dark"] tr.border2 > td { background-color: #202631 !important; color: var(--chu-1) !important; } [data-theme="dark"] .border1, [data-theme="dark"] tr.border1 > td { color: var(--chu-1) !important; } /* Đường kẻ ô trong bảng được ghi thẳng vào style nội tuyến (#ccc) */ [data-theme="dark"] .border2 > td, [data-theme="dark"] table td[style*="#ccc"], [data-theme="dark"] table th[style*="#ccc"] { border-color: var(--nen-3) !important; } [data-theme="dark"] .titleBoDem { color: #58d68d !important; } /* Khối sản phẩm bộ đếm: nền aliceblue cố định */ [data-theme="dark"] .boDemProductBox { background-color: var(--nen-2) !important; border-color: #2f6f8f !important; color: var(--chu-1) !important; } /* ---------- BIỂU TƯỢNG DẠNG ẢNH NỀN ---------- */ /* * Mấy biểu tượng này là ảnh PNG màu đen đặt làm nền của ::before, * không phải thẻ nên luật chỉnh ảnh bên dưới không với tới được. * Dùng brightness(0) invert(1) để biến icon đen thành trắng. */ [data-theme="dark"] .header-top-infomation--hotline::before, [data-theme="dark"] .box-header .header-top .header-top--infomation .header-top-infomation--hotline::before { filter: brightness(0) invert(1) !important; opacity: .85; } /* Chữ "Call us" và số điện thoại ở thanh đầu trang */ [data-theme="dark"] .header-top--infomation .header-top-infomation--hotline p { color: var(--chu-1) !important; } [data-theme="dark"] .header-top--infomation .header-top-infomation--hotline p a { color: #7ab8ff !important; } /* Ảnh nền trang trí ở chân trang cho dịu lại */ [data-theme="dark"] .box-footer, [data-theme="dark"] footer { background-blend-mode: luminosity; } /* Ảnh và video dịu bớt cho đỡ chói */ [data-theme="dark"] img:not(.giu-nguyen-mau) { filter: brightness(.92); } /* ---------- Ô TÌM KIẾM ADMIN & BẢNG CHỌN FILE ---------- */ /* Hai chỗ này đặt màu ngay trong style nội tuyến nên cần !important để đè lại */ [data-theme="dark"] #ad-tim { background: rgba(255, 255, 255, .10) !important; color: var(--chu-1) !important; } [data-theme="dark"] #ad-tim::placeholder { color: var(--chu-3) !important; } [data-theme="dark"] #ad-kq, [data-theme="dark"] #file-picker { background: var(--nen-1) !important; border-color: var(--nen-3) !important; } [data-theme="dark"] #ad-kq .ad-dong, [data-theme="dark"] #file-picker .fp-dong { background: var(--nen-1) !important; border-bottom-color: var(--nen-3) !important; } [data-theme="dark"] #ad-kq .ad-dong:hover, [data-theme="dark"] #file-picker .fp-dong:hover { background: rgba(74, 158, 255, .14) !important; } [data-theme="dark"] #file-picker > div:first-child, [data-theme="dark"] #file-picker > div:last-child { background: var(--nen-2) !important; border-color: var(--nen-3) !important; } [data-theme="dark"] #fp-tim { background: var(--nen-1) !important; border-color: var(--nen-3) !important; color: var(--chu-1) !important; } /* ---------- KHỐI TÀI KHOẢN TRONG MENU ĐIỆN THOẠI ---------- */ /* Menu trượt chỉ xuất hiện trên màn hình nhỏ, nên khối này cũng chỉ hiện ở đó */ .chi-hien-dien-thoai { display: none !important; } @media (max-width: 991px) { .chi-hien-dien-thoai { display: block !important; } .menu-tai-khoan .tieu-de-nhom { display: block; padding: 14px 18px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #8a93a5; border-top: 1px solid rgba(128, 128, 128, .28); margin-top: 8px; } .chi-hien-dien-thoai > a i { width: 22px; text-align: center; margin-right: 4px; } } [data-theme="dark"] .menu-tai-khoan .tieu-de-nhom { color: var(--chu-3); border-top-color: var(--nen-3); } /* ---------- NÚT CHUYỂN GIAO DIỆN ---------- */ .nut-giao-dien { background: none; border: 1px solid rgba(128, 128, 128, .45); border-radius: 20px; padding: 5px 14px; font-size: 13px; cursor: pointer; color: inherit; line-height: 1.4; white-space: nowrap; } .nut-giao-dien:hover { background: rgba(128, 128, 128, .18); } [data-theme="dark"] .nut-giao-dien { border-color: rgba(255, 255, 255, .28); color: #e3e6ea; }