/* ========================================================== DARK MODE — imuabanbds.vn Override layer — load AFTER ui-upgrade.css Kích hoạt: (opt-in, nhớ qua localStorage + cookie) Sáng = mặc định (không có attribute). v1: trang công khai cốt lõi. Version: 1.0.1 ========================================================== */ /* ---------- 1. Token redefinition ---------- ui-upgrade.css dùng var(--color-*) ở ~150 chỗ → định nghĩa lại là lật tự động. */ html[data-theme="dark"] { --color-primary: #4a9de0; /* brand blue lighten cho contrast trên nền tối */ --color-primary-dark: #12283b; /* navTop giữ xanh sâu */ --color-primary-light: #16324a; /* tint surface */ --color-accent: #26c281; /* CTA xanh lá sáng hơn */ --color-accent-dark: #1ba36a; --color-text: #e6eaef; /* near-white, không trắng tinh */ --color-text-secondary: #9aa7b4; --color-text-disabled: #5b6672; --color-bg: #0f141a; /* nền trang */ --color-card: #1a2027; /* bề mặt nổi (card/panel) */ --color-border: #2b3540; --color-success: #34d399; --color-warning: #fbbf24; --color-error: #ff6b6b; /* giá + diện tích + lỗi — đỏ dịu trên nền tối */ /* Shadow trên nền tối: dùng shadow đậm để card NỔI KHỐI như light mode (card sáng hơn nền + đổ bóng) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.45); --shadow-md: 0 2px 10px rgba(0,0,0,0.55); --shadow-lg: 0 10px 30px rgba(0,0,0,0.65); --shadow-card: 0 2px 12px rgba(0,0,0,0.55); /* trước chưa định nghĩa → var(--shadow-card) rơi về fallback .08 vô hình; định nghĩa để mọi card dùng var nổi khối */ color-scheme: dark; /* scrollbar + form control native tối */ background: var(--color-bg); } /* ---------- 2. Layout core ---------- */ html[data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-text); } html[data-theme="dark"] .wrapper, html[data-theme="dark"] .main-layout, html[data-theme="dark"] .ColCenter, html[data-theme="dark"] .ColLeft, html[data-theme="dark"] .ColRight { background: transparent !important; } /* Header (logo + banner) — ui-upgrade set #fff !important */ html[data-theme="dark"] .header { background: var(--color-card) !important; border-bottom: 1px solid var(--color-border); } /* navTop giữ nền xanh sâu (đã dùng var), chỉ chắc chắn chữ sáng */ html[data-theme="dark"] .navTop { color: rgba(255,255,255,0.85) !important; } html[data-theme="dark"] .navTop .address { color: rgba(255,255,255,0.7) !important; } /* Logo ảnh nền trắng → làm dịu trên nền tối (giữ nhận diện, bớt chói) */ html[data-theme="dark"] .header .logo img { filter: brightness(0.95); } /* Menu chính (thanh nav) */ html[data-theme="dark"] .menu, html[data-theme="dark"] .menu ul { background: var(--color-primary-dark) !important; } html[data-theme="dark"] .menu a { color: #e6eaef !important; } html[data-theme="dark"] .menu .sub-menu, html[data-theme="dark"] .menu ul ul { background: var(--color-card) !important; border: 1px solid var(--color-border); } /* Footer + menu dưới + hộp link tỉnh */ html[data-theme="dark"] .footer, html[data-theme="dark"] .menubot, html[data-theme="dark"] .nhadattt, html[data-theme="dark"] .footer .wrapper { background: var(--color-card) !important; color: var(--color-text-secondary) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .footer a, html[data-theme="dark"] .menubot a, html[data-theme="dark"] .nhadattt a { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .footer a:hover, html[data-theme="dark"] .menubot a:hover { color: var(--color-primary) !important; } /* ---------- 3. Panels / content boxes trắng (theme.min.css) ---------- */ html[data-theme="dark"] .ContentPagePadd, html[data-theme="dark"] .tabsC, html[data-theme="dark"] .tabs_content, html[data-theme="dark"] .borderwhite, html[data-theme="dark"] .HomeTitle, html[data-theme="dark"] .HomeTitleFont, html[data-theme="dark"] .HDuAn, html[data-theme="dark"] .HTinhot, html[data-theme="dark"] .DetailC, html[data-theme="dark"] .box-content, html[data-theme="dark"] .__box-wrap, html[data-theme="dark"] .register-card, html[data-theme="dark"] .ct-card { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Trang sửa tin (.ContentPagePadd--flush đã bỏ viền): container nền tối hơn (--color-bg) để .__box-wrap card (--color-card, sáng hơn) NỔI lên như light mode (card trắng trên nền xám). */ html[data-theme="dark"] .ContentPagePadd.ContentPagePadd--flush { background: var(--color-bg) !important; } /* Card border-based nổi khối như light mode: thêm shadow (var-cards đã có qua --shadow-card). CPP flush là wrapper nền tối → KHÔNG shadow. */ html[data-theme="dark"] .__box-wrap, html[data-theme="dark"] .ContentPagePadd:not(.ContentPagePadd--flush), html[data-theme="dark"] .register-card, html[data-theme="dark"] .ct-card { box-shadow: var(--shadow-card) !important; } html[data-theme="dark"] .HomeTitle, html[data-theme="dark"] .HomeTitle h1, html[data-theme="dark"] .HomeTitle h2, html[data-theme="dark"] .HomeTitle a { color: var(--color-text) !important; } /* ---------- 4. Listing cards (.bdsItem*) ---------- */ html[data-theme="dark"] .bdsItem { background: var(--color-card) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .bdsItemContent, html[data-theme="dark"] .bdsItemBody, html[data-theme="dark"] .bdsCardFooter { background: transparent !important; } html[data-theme="dark"] .bdsItemTitle, html[data-theme="dark"] .bdsItemTitle a, html[data-theme="dark"] .bdsCardPosterNameTxt { color: var(--color-text) !important; } html[data-theme="dark"] .bdsItemLocation, html[data-theme="dark"] .bdsCardFooter, html[data-theme="dark"] .bdsCardTime, html[data-theme="dark"] .bdsAttrSep { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .bdsCardFooter { border-top-color: var(--color-border) !important; } /* Related grid cards */ html[data-theme="dark"] .relatedCard { background: var(--color-card) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .relatedCardTitle, html[data-theme="dark"] .relatedCardTitle a { color: var(--color-text) !important; } html[data-theme="dark"] .relatedCardLoc, html[data-theme="dark"] .relatedCardMeta { color: var(--color-text-secondary) !important; } /* Project cards (du-an) */ html[data-theme="dark"] .daCard, html[data-theme="dark"] .ttCard { background: var(--color-card) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .daCardTitle a, html[data-theme="dark"] .ttCardTitle a { color: var(--color-text) !important; } /* ---------- 5. Sidebar search + preset filter ---------- */ html[data-theme="dark"] .search, html[data-theme="dark"] .searchBox, html[data-theme="dark"] .searchItem, html[data-theme="dark"] .presetFilterBox, html[data-theme="dark"] .left-box, html[data-theme="dark"] .sidebar-box { background: var(--color-card) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html[data-theme="dark"] .presetFilterBox a, html[data-theme="dark"] .pf-prov, html[data-theme="dark"] .pf-item { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .presetFilterBox a:hover, html[data-theme="dark"] .pf-more-toggle:hover { background: var(--color-primary-light) !important; color: var(--color-primary) !important; } /* active preset row: light-blue bg (#eef5ff) from light mode → primary bg + white text */ html[data-theme="dark"] .presetFilterBox a.is-active { background: var(--color-primary) !important; color: #fff !important; } html[data-theme="dark"] .pf-cnt { color: var(--color-text-disabled) !important; } /* search empty-state secondary button (white in light) */ html[data-theme="dark"] .searchEmptyBtn--ghost { background: var(--color-card) !important; color: var(--color-primary) !important; border-color: var(--color-border) !important; } /* search-result header: sort bar + filter chips + save button (all light in light mode) */ html[data-theme="dark"] .searchSortBar { background: var(--color-card) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .searchResultCount { color: var(--color-text) !important; } html[data-theme="dark"] .searchSortRight label { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .searchSortRight select { background: #10161d !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .filterChip { background: var(--color-primary-light) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } html[data-theme="dark"] .chipClearAll { background: rgba(255,107,107,.12) !important; border-color: var(--color-error) !important; color: var(--color-error) !important; } html[data-theme="dark"] .chipClearAll:hover { background: rgba(255,107,107,.2) !important; } html[data-theme="dark"] .btnSaveSearch { background: var(--color-card) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .btnSaveSearch:hover { background: var(--color-primary-light) !important; } html[data-theme="dark"] .btnSaveSearch.saved { background: var(--color-primary) !important; color: #fff !important; } html[data-theme="dark"] .searchTitle, html[data-theme="dark"] .presetFilterBox .pf-head { color: var(--color-text) !important; } /* ---------- 6. Form controls ---------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .refineText, html[data-theme="dark"] .wpc-input, html[data-theme="dark"] .cssSelectbox { background: #10161d !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--color-text-disabled) !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] .refineText:focus { border-color: var(--color-primary) !important; outline-color: var(--color-primary) !important; } /* Dropdown panel (autocomplete / custom select) */ html[data-theme="dark"] .autocomplete-suggestions, html[data-theme="dark"] .wpc-list, html[data-theme="dark"] .select-list, html[data-theme="dark"] .propsel-panel, html[data-theme="dark"] ul.ui-autocomplete { background: var(--color-card) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html[data-theme="dark"] .autocomplete-suggestion:hover, html[data-theme="dark"] .wpc-list li:hover, html[data-theme="dark"] .select-list li:hover { background: var(--color-primary-light) !important; } /* Highlighted/keyboard-active item: light-blue bg from light mode makes light text invisible → force primary bg + white text */ html[data-theme="dark"] .wpc-list li.wpc-active, html[data-theme="dark"] .autocomplete-suggestion.selected, html[data-theme="dark"] .select-list li.active, html[data-theme="dark"] .select-list li.selected { background: var(--color-primary) !important; color: #fff !important; } html[data-theme="dark"] .wpc-list li.wpc-empty { color: var(--color-text-secondary) !important; } /* ---------- 7. Detail page ---------- */ html[data-theme="dark"] .detail-info-table, html[data-theme="dark"] .detail-info-table td, html[data-theme="dark"] .detail-post-meta, html[data-theme="dark"] .dps-poster, html[data-theme="dark"] .price-chart-modal, html[data-theme="dark"] .pcm-panel, html[data-theme="dark"] .lcm-panel, html[data-theme="dark"] .loan-calc-modal, html[data-theme="dark"] .nearby-amenities, html[data-theme="dark"] .na-summary, html[data-theme="dark"] .phaply-box { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .detail-info-table th, html[data-theme="dark"] .detail-info-label, html[data-theme="dark"] .dps-label { color: var(--color-text-secondary) !important; } /* Trang chi tiết 2-cột: CPP wrapper TRONG SUỐT (như light — lộ nền tối) để các box info con (Thông tin chung / Pháp lý & Liên hệ / Thông tin đất...) NỔI KHỐI (card sáng hơn nền + shadow). */ html[data-theme="dark"] .detail-2col-layout .ContentPagePadd { background: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .detail-2col-layout .detail-info-table, html[data-theme="dark"] .detail-2col-layout .detail-post-meta, html[data-theme="dark"] .detail-2col-layout .nearby-amenities, html[data-theme="dark"] .detail-2col-layout .phaply-box { box-shadow: 0 2px 8px rgba(0,0,0,0.55) !important; } /* Phần mô tả chi tiết (.DetailC): nền TRÙNG nền trang (như light — nằm trên background trang, không phải box riêng). */ html[data-theme="dark"] .detail-2col-layout .DetailC { background: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .detail-info-value, html[data-theme="dark"] .dps-poster-name { color: var(--color-text) !important; } /* Gallery letterbox nền xám → tối lại */ html[data-theme="dark"] .dgs-stage { background: #0b0f14 !important; } html[data-theme="dark"] .dgs-counter { background: rgba(0,0,0,0.7) !important; } /* Chips (tiện ích/đặc điểm) */ html[data-theme="dark"] .feature-chips span, html[data-theme="dark"] .bdsChip, html[data-theme="dark"] .detail-chip { background: var(--color-primary-light) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Price-chart + Loan-calc modals: inner card + form + table + buttons (all white/light in light mode) */ html[data-theme="dark"] .pcm-card, html[data-theme="dark"] .lcm-card { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .pcm-period-btn, html[data-theme="dark"] .lcm-field input[type=text], html[data-theme="dark"] .lcm-field select { background: #10161d !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .pcm-period-btn.is-active { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .pcm-close:hover, html[data-theme="dark"] .lcm-close:hover { background: var(--color-primary-light) !important; color: var(--color-text) !important; } html[data-theme="dark"] .pcm-msg, html[data-theme="dark"] .lcm-err, html[data-theme="dark"] .lcm-rate-note, html[data-theme="dark"] .lcm-disclaimer, html[data-theme="dark"] .lcm-srow span { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .lcm-summary, html[data-theme="dark"] .lcm-srow, html[data-theme="dark"] .lcm-table-scroll { border-color: var(--color-border) !important; } html[data-theme="dark"] .lcm-srow.lcm-total { background: var(--color-primary-light) !important; } html[data-theme="dark"] .lcm-table th { background: #10161d !important; color: var(--color-text-secondary) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .lcm-table td { border-color: var(--color-border) !important; } html[data-theme="dark"] .lcm-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; } html[data-theme="dark"] .lcm-table-toggle:hover { background: var(--color-primary-light) !important; } /* Related "Xem thêm" button */ html[data-theme="dark"] .related-more { background: var(--color-card) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .related-more:hover { background: var(--color-primary) !important; color: #fff !important; } /* ---------- 8. Tables ---------- */ html[data-theme="dark"] table { color: var(--color-text); } html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--color-border) !important; } html[data-theme="dark"] tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; } /* ---------- 9. Pagination ---------- */ /* Nút trang render dạng
  • TRẦN (số nằm thẳng trong li, không có ) — batdongsan-style (CLAUDE.md #52). Phải nhắm cả `.pagination li` chứ không chỉ li>a/span. */ html[data-theme="dark"] .pagination li, html[data-theme="dark"] .pagination li a, html[data-theme="dark"] .pagination li span { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .pagination li.active, html[data-theme="dark"] .pagination li.current, html[data-theme="dark"] .pagination li.active a, html[data-theme="dark"] .pagination li.active span, html[data-theme="dark"] .pagination li.current a { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .pagination li.dots, html[data-theme="dark"] .pagination .dots { background: transparent !important; border: 0 !important; color: var(--color-text-secondary) !important; } /* ---------- 10. Modals / overlays ---------- */ html[data-theme="dark"] .login-modal, html[data-theme="dark"] .register-card, html[data-theme="dark"] .price-chart-modal, html[data-theme="dark"] .loan-calc-modal { background: var(--color-card) !important; color: var(--color-text) !important; } html[data-theme="dark"] .login-field, html[data-theme="dark"] .register-field { background: #10161d !important; border-color: var(--color-border) !important; } /* ---------- 11. Mobile: bottom nav + search hero ---------- */ html[data-theme="dark"] .bottom-nav-upgrade { background: var(--color-card) !important; border-top-color: var(--color-border) !important; } html[data-theme="dark"] .bni { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .bni--active, html[data-theme="dark"] .bni.active { color: var(--color-primary) !important; } html[data-theme="dark"] .category-drawer, html[data-theme="dark"] .category-drawer-panel { background: var(--color-card) !important; color: var(--color-text) !important; } html[data-theme="dark"] .msh-input { background: #10161d !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .msh-chip { background: var(--color-card) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } html[data-theme="dark"] .msh-chip--active { background: var(--color-primary) !important; color: #fff !important; } /* ---------- 12. SEO description blocks + intro ---------- */ html[data-theme="dark"] .seo-description-top, html[data-theme="dark"] #seo-description-bottom, html[data-theme="dark"] #seo-description-bottom .inner-content, html[data-theme="dark"] .provinceIntro { background: var(--color-card) !important; color: var(--color-text-secondary) !important; border-color: var(--color-border) !important; } /* ---------- 13. Theme toggle button (top bar) ---------- */ #themeToggle i { transition: transform var(--transition-fast); } #themeToggle:hover i { transform: rotate(20deg); } /* ---------- 14. Generic safety: hairline borders + hr ---------- */ html[data-theme="dark"] hr { border-color: var(--color-border) !important; } html[data-theme="dark"] .clear { background: transparent !important; } /* Divider/line phân chia — theme.min.css để màu sáng (#e2e8f0/#f0f0f0) → chói trên nền tối. Đổi về màu border card (--color-border #2b3540) đủ để tách thành phần mà không gắt. */ html[data-theme="dark"] #toggleAdvanced, html[data-theme="dark"] .searchAdvancedToggle, html[data-theme="dark"] #searchAdvanced, html[data-theme="dark"] .thitruongbdsItem, html[data-theme="dark"] .thitruongbdsM, html[data-theme="dark"] .thitruongbds .view, html[data-theme="dark"] .httt ul li, html[data-theme="dark"] .tabs li, html[data-theme="dark"] .tabtin li, html[data-theme="dark"] .pf-item, html[data-theme="dark"] .pf-prov, html[data-theme="dark"] .pf-more-item, html[data-theme="dark"] .pf-more-toggle, html[data-theme="dark"] .dividerLine { border-color: var(--color-border) !important; } /* ---------- 15. Patch v1.0.1: bề mặt sáng còn sót ---------- */ /* Property-type custom dropdown (.propsel) sidebar search */ html[data-theme="dark"] .propsel, html[data-theme="dark"] .propsel-label, html[data-theme="dark"] .propsel-panel, html[data-theme="dark"] .propsel-panel li { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .propsel-panel li:hover { background: var(--color-primary-light) !important; } /* Home tab bar (Nhà đất bán / Cho thuê) */ html[data-theme="dark"] .tabs, html[data-theme="dark"] ul.tabs { background: var(--color-primary-dark) !important; } html[data-theme="dark"] .tabs li a { color: var(--color-text-secondary) !important; } html[data-theme="dark"] .tabs li a:hover, html[data-theme="dark"] .tabs li.active a, html[data-theme="dark"] .tabs li a.active { color: #fff !important; } /* AdvanceHiddenDropbox (Diện tích / Mức giá) */ html[data-theme="dark"] .show_text, html[data-theme="dark"] .dropbox, html[data-theme="dark"] .select-list, html[data-theme="dark"] .select-items { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* .select-text: keep transparent so the .comboboxs wrapper's bottom border shows (opaque bg was covering it) */ html[data-theme="dark"] .select-text { background: transparent !important; color: var(--color-text) !important; } html[data-theme="dark"] .select-list li:hover { background: var(--color-primary-light) !important; } /* Category drawer (mobile) — class BEM đúng là __panel */ html[data-theme="dark"] .category-drawer__panel, html[data-theme="dark"] .category-drawer__overlay, html[data-theme="dark"] .category-drawer__item { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .category-drawer__item:hover { background: var(--color-primary-light) !important; } /* Box "Bạn có biết..." (.HTinhot): link tin (trừ tiêu đề đỏ li:first-child) màu #4e4d4d chìm → sáng lên */ html[data-theme="dark"] .HTinhot li:not(:first-child) a { color: #b8c2cc !important; } html[data-theme="dark"] .HTinhot li:not(:first-child) a:hover { color: var(--color-primary) !important; } /* Logo box (theme.min.css cho nền trắng) → trong suốt để header tối lộ qua */ html[data-theme="dark"] .header .logo { background: transparent !important; } /* WOW slider cover (nền trắng DƯỚI ảnh slide) — KHÔNG đụng .ws-title (caption overlay): ép .ws-title nền đặc sẽ chặn ảnh phía sau → box caption thành xám đặc, mất opacity như light. */ html[data-theme="dark"] .ws_cover, html[data-theme="dark"] #wowslider-container1 { background: var(--color-bg) !important; } /* Ảnh slide fill đầy (object-fit:cover, không letterbox) nhưng ảnh sáng (trời/toà nhà trắng) chói trên dark theme → dim ~22% để hòa với nền tối. Chỉ ảnh, không đụng caption/bullet. */ html[data-theme="dark"] #wowslider-container1 .ws_images img, html[data-theme="dark"] #wowslider-container1 img { filter: brightness(0.78); } /* SweetAlert box (login-guard "CHƯA ĐĂNG NHẬP" + notice sweetalert còn sót) nền trắng */ html[data-theme="dark"] .sweet-alert { background: var(--color-card) !important; color: var(--color-text) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; } html[data-theme="dark"] .sweet-alert h2 { color: var(--color-text) !important; } html[data-theme="dark"] .sweet-alert p, html[data-theme="dark"] .sweet-alert .lead { color: var(--color-text-secondary) !important; } /* Nút phụ trang chi tiết (Biến động giá / Tính lãi vay) — nền trắng → card tối, viền + chữ primary */ html[data-theme="dark"] .price-chart-btn, html[data-theme="dark"] .loan-calc-btn { background: var(--color-card) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Ảnh card "BĐS bạn quan tâm" — placeholder nền tối thay vì trắng */ html[data-theme="dark"] .relatedCardImg { background: #0b0f14 !important; } /* Nút gọi nổi (mobile detail) */ html[data-theme="dark"] .detail-float-cta { background: var(--color-card) !important; border-top: 1px solid var(--color-border) !important; } /* Thẻ người đăng detail (#95 right-detail.php) — class thật .dps-poster + nút Nhắn tin nền trắng. Nút "Hiện số" (.dps-btn--phone) giữ nền xanh lá. */ html[data-theme="dark"] .dps-poster { border-color: var(--color-border) !important; } html[data-theme="dark"] .dps-btn--msg { background: transparent !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Input trần / mọi input nhập liệu — nâng specificity để thắng rule #fff của theme.min.css */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=search], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input[type=number], html[data-theme="dark"] .search input, html[data-theme="dark"] form input { background: #10161d !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* ========================================================== DARK v2 — các trang/thành phần còn lại (ngoài core public v1) ========================================================== */ /* ----- /dang-tin/ (quan-ly_new) ----- */ /* Section heading trắng ("Vị trí"/"Bản đồ"/"Hồ sơ pháp lý"/...) — giữ accent xanh trái. Specificity cao (.__dang-tin-page .__box-wrap .__heading) để thắng rule trắng của style.css. */ html[data-theme="dark"] .__dang-tin-page .__heading, html[data-theme="dark"] .__box-wrap .__heading, html[data-theme="dark"] .__dang-tin-page .__box-wrap .__heading { background: var(--color-card) !important; color: var(--color-text) !important; border-bottom-color: var(--color-border) !important; } /* Tab kênh (radio + label): inactive dark, active(:checked) dark-green tint */ html[data-theme="dark"] .__danh-muc-tin-wrap label { background: #10161d !important; color: var(--color-text-secondary) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .__danh-muc-tin-wrap input:checked + label { background: rgba(38,194,129,0.14) !important; color: var(--color-accent) !important; border-color: var(--color-accent) !important; } /* Rich text editor (Nội dung) */ html[data-theme="dark"] .rte-wrap, html[data-theme="dark"] .rte-toolbar { background: var(--color-card) !important; border-color: var(--color-border) !important; } html[data-theme="dark"] .rte-toolbar button, html[data-theme="dark"] .rte-toolbar a, html[data-theme="dark"] .rte-toolbar i { color: var(--color-text) !important; } /* Nút "Quay lại" (#btn_back, ID+!important trong ui-upgrade) — cần specificity ≥ để thắng */ html[data-theme="dark"] .__dang-tin-page #btn_back { background: var(--color-card) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Step progress bar: vòng tròn INACTIVE trắng → tối. KHÔNG !important để .is-active/.is-done (xanh) vẫn thắng */ html[data-theme="dark"] .dt-steps__circle { background: #10161d; border-color: var(--color-border); color: var(--color-text-secondary); } html[data-theme="dark"] .dt-steps__line { background: var(--color-border); } html[data-theme="dark"] .rte-wrap [contenteditable], html[data-theme="dark"] .rte-editor { background: #10161d !important; color: var(--color-text) !important; } /* Fine Uploader (Hình ảnh) */ html[data-theme="dark"] .qq-uploader-selector, html[data-theme="dark"] .qq-upload-button-selector, html[data-theme="dark"] .qq-upload-button, html[data-theme="dark"] .qq-upload-drop-area, html[data-theme="dark"] .qq-upload-list { background: #10161d !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* AI title chips */ html[data-theme="dark"] .ai-title-chip { background: var(--color-primary-light) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Sidebar tài khoản (divider + avatar border) — các