/* ============================================================ THEME SYSTEM — Light / Dark Mode Màu chính: Xanh lá (#2fb362 / #1c6d3a) Áp dụng class "dark-mode" lên để kích hoạt chế độ tối ============================================================ */ /* ---------- Light Mode (mặc định) ---------- */ :root { --primary-200-color: #2fb362; --primary-600-color: #1c6d3a; --url-background: url(/webbg.png); /* Nền */ --bg-body: #ffffff; --bg-secondary: #f6f9fe; --bg-card: #ffffff; --bg-header: #ffffff; --bg-footer: #0a1e10; --bg-input: #ffffff; --bg-hover: #f0faf4; --bg-badge: rgba(47, 179, 98, 0.12); /* Văn bản */ --text-body: #444444; --text-heading: #1a1a2e; --text-muted: #6c757d; --text-on-primary: #ffffff; --text-link: var(--primary-200-color); --text-link-hover: var(--primary-600-color); /* Đường viền & bóng */ --border-color: #dee2e6; --border-subtle: rgba(47, 179, 98, 0.2); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-header: 0 2px 15px rgba(0, 0, 0, 0.1); /* Navbar */ --nav-link-color: #555555; --nav-link-hover: var(--primary-200-color); --nav-active-color: var(--primary-200-color); --nav-mobile-bg: #ffffff; /* Nút toggle */ --toggle-bg: #e9ecef; --toggle-color: #495057; --toggle-hover-bg: var(--primary-200-color); --toggle-hover-color: #ffffff; /* Divider / section */ --section-bg-alt: #f6f9fe; /* Code / syntax */ --code-bg: #f4f7f6; --code-border: #dde4e0; /* Toast / Alert */ --toast-bg: #ffffff; --toast-border: rgba(47, 179, 98, 0.3); /* Scrollbar */ --scrollbar-thumb: #2fb362; --scrollbar-track: #f1f1f1; } /* ---------- Dark Mode ---------- */ html.dark-mode { --bg-body: #0f1a13; --bg-secondary: #162119; --bg-card: #1a2d1f; --bg-header: #0f1a13; --bg-footer: #080f0a; --bg-input: #1e2d22; --bg-hover: #1e3326; --bg-badge: rgba(47, 179, 98, 0.18); --text-body: #d4e8d8; --text-heading: #e8f5ec; --text-muted: #8aab90; --text-on-primary: #ffffff; --text-link: #47e475; --text-link-hover: #2fb362; --border-color: #2a3d2f; --border-subtle: rgba(47, 179, 98, 0.25); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-header: 0 2px 15px rgba(0, 0, 0, 0.5); --nav-link-color: #b8d4be; --nav-link-hover: #47e475; --nav-active-color: #47e475; --nav-mobile-bg: #162119; --toggle-bg: #2a3d2f; --toggle-color: #d4e8d8; --toggle-hover-bg: var(--primary-200-color); --toggle-hover-color: #ffffff; --section-bg-alt: #162119; --code-bg: #0d1f11; --code-border: #2a3d2f; --toast-bg: #1a2d1f; --toast-border: rgba(71, 228, 117, 0.3); --scrollbar-thumb: #1c6d3a; --scrollbar-track: #162119; } /* ============================================================ ÁP DỤNG BIẾN VÀO CÁC THÀNH PHẦN CHUNG ============================================================ */ body { background-color: var(--bg-body); color: var(--text-body); transition: background-color 0.3s ease, color 0.3s ease; } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } /* Header */ #header { background: var(--bg-header); box-shadow: var(--shadow-header); transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 1030 !important; } /* Hamburger icon — hiển thị đúng màu theo theme */ html:not(.dark-mode) .mobile-nav-toggle { color: var(--primary-600-color) !important; } html.dark-mode .mobile-nav-toggle { color: #7edd9e !important; } /* Khi overlay mở thì hamburger (X) luôn trắng */ .navbar-mobile .mobile-nav-toggle { color: #ffffff !important; } /* Header khi scroll — ghi đè màu xanh dương cũ */ #header.header-scrolled, #header.header-inner-pages { background: rgba(15, 26, 19, 0.98); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } html:not(.dark-mode) #header.header-scrolled, html:not(.dark-mode) #header.header-inner-pages { background: rgba(255, 255, 255, 0.99); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); } #header .logo a { color: var(--primary-200-color); } /* Nav user button — light mode: nền đậm hơn, chữ tối */ html:not(.dark-mode) .navbar .nav-user-dropdown > a.nav-user-btn, html:not(.dark-mode) .navbar .nav-user-dropdown > a.nav-user-btn:focus { background: var(--primary-200-color) !important; border-color: var(--primary-600-color) !important; color: #ffffff !important; } html:not(.dark-mode) .navbar .nav-user-dropdown > a.nav-user-btn:hover { background: var(--primary-600-color) !important; border-color: var(--primary-600-color) !important; } html:not(.dark-mode) .nav-user-name { color: #ffffff !important; } html:not(.dark-mode) .nav-user-balance { color: #d4f5df !important; } html:not(.dark-mode) .nav-chevron { color: rgba(255, 255, 255, 0.8) !important; } /* Nav user dropdown menu — light mode */ html:not(.dark-mode) .navbar .nav-user-dropdown ul.nav-user-menu { background: #ffffff !important; border-color: rgba(47, 179, 98, 0.2) !important; } /* Navbar links */ #navbar .nav-link, #navbar > ul > li > a { color: var(--nav-link-color); transition: color 0.3s ease; } #navbar .nav-link:hover, #navbar > ul > li > a:hover, #navbar .active > a, #navbar li:hover > a { color: var(--nav-link-hover); } @media (max-width: 991px) { /* Chỉ áp dụng nền khi overlay đang mở */ #navbar.navbar-mobile { background: rgba(10, 28, 16, 0.97) !important; z-index: 1040 !important; } html:not(.dark-mode) .navbar-mobile ul { background-color: #ffffff !important; } html.dark-mode .navbar-mobile ul { background-color: #1a2d1f !important; } /* Theme toggle trên mobile */ #theme-toggle { margin-left: 0; margin-right: 6px; width: 32px; height: 32px; font-size: 14px; } } /* Cards */ .card { background-color: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); transition: background-color 0.3s ease, border-color 0.3s ease; } /* Form inputs */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { background-color: var(--bg-input); color: var(--text-body); border-color: var(--border-color); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .form-control:focus, .form-select:focus { background-color: var(--bg-input); color: var(--text-body); border-color: var(--primary-200-color); box-shadow: 0 0 0 0.2rem rgba(47, 179, 98, 0.25); } .form-control::placeholder { color: var(--text-muted); } /* Section backgrounds */ .section-bg, section.section-bg { background-color: var(--section-bg-alt); } /* Dropdown menu */ .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-md); } .dropdown-item { color: var(--text-body); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--nav-link-hover); } .dropdown-divider { border-color: var(--border-color); } /* Table */ .table { color: var(--text-body); border-color: var(--border-color); } .table thead th { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-heading); } .table tbody tr:hover { background-color: var(--bg-hover); } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(47, 179, 98, 0.05); } /* Badge */ .badge { background-color: var(--bg-badge); } /* Toast */ .toast { background-color: var(--toast-bg); border-color: var(--toast-border); color: var(--text-body); } .toast-header { background-color: var(--bg-secondary); color: var(--text-heading); border-bottom-color: var(--border-color); } /* Modal */ .modal-content { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-body); } .modal-header, .modal-footer { border-color: var(--border-color); } /* List group */ .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-body); } .list-group-item:hover { background-color: var(--bg-hover); } /* HR / divider */ hr { border-color: var(--border-color); } /* Text utilities */ .text-muted { color: var(--text-muted) !important; } /* Scrollbar (Webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* ============================================================ NÚT TOGGLE SÁNG / TỐI ============================================================ */ /* Li wrapper cho theme toggle trong navbar */ .nav-theme-toggle-item { display: flex !important; align-items: center !important; list-style: none; padding: 0 !important; } @media (max-width: 991px) { .nav-theme-toggle-item { justify-content: center; padding: 8px 0 !important; border-top: 1px solid var(--border-subtle); margin-top: 4px; } } #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--border-subtle); background: var(--toggle-bg); color: var(--toggle-color); cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; margin-left: 12px; font-size: 16px; flex-shrink: 0; } #theme-toggle:hover { background: var(--toggle-hover-bg); color: var(--toggle-hover-color); border-color: var(--primary-200-color); transform: scale(1.1); } #theme-toggle i { pointer-events: none; transition: transform 0.4s ease; } html.dark-mode #theme-toggle i { transform: rotate(20deg); } /* ============================================================ DARK MODE — GHI ĐÈ CÁC THÀNH PHẦN CỤ THỂ ============================================================ */ html.dark-mode #preloader { background: var(--bg-body); } html.dark-mode #header { border-bottom: 1px solid var(--border-color); } /* Footer top — xanh nhạt sáng */ #footer .footer-top { background: #e8f5ee; } #footer .footer-top .footer-contact h3, #footer .footer-top h4 { color: var(--primary-600-color); } #footer .footer-top .footer-links ul a, #footer .footer-top .footer-contact p, #footer .footer-top .footer-contact span { color: #333333; } #footer .footer-top .footer-links ul i { color: var(--primary-200-color); } #footer .footer-top .footer-links ul a:hover { color: var(--primary-200-color); } #footer .footer-top .social-links a { background: var(--primary-200-color); color: #fff; } #footer .footer-top .social-links a:hover { background: var(--primary-600-color); } /* Footer — dark mode (tham khảo màu Quiz: #0a1c10) */ html.dark-mode #footer { background: #071209; } html.dark-mode #footer .footer-top { background: #0a1c10; } html.dark-mode #footer .footer-top .footer-contact h3, html.dark-mode #footer .footer-top h4 { color: #7edd9e; } html.dark-mode #footer .footer-top .footer-links ul a, html.dark-mode #footer .footer-top .footer-contact p, html.dark-mode #footer .footer-top .footer-contact span { color: #b8d4be; } html.dark-mode #footer .footer-top .footer-links ul a:hover { color: #47e475; } html.dark-mode #footer .footer-top .footer-links ul i { color: #2fb362; } html.dark-mode #footer .footer-bottom { background: #071209; } html.dark-mode #footer .copyright, html.dark-mode #footer .credits { color: #8aab90; } html.dark-mode #footer .credits a { color: #7edd9e; } /* Page loader */ html.dark-mode #page-loader { background: var(--bg-body); } html.dark-mode .loader-box { background: var(--bg-card); } /* Section about / why-us / pricing dark fix */ html.dark-mode .why-us, html.dark-mode .about, html.dark-mode .pricing { background-color: var(--bg-secondary); } /* Alert colors */ html.dark-mode .alert-success { background-color: rgba(47, 179, 98, 0.15); border-color: rgba(47, 179, 98, 0.3); color: #7edd9e; } html.dark-mode .alert-danger { background-color: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); color: #f19aa0; } html.dark-mode .alert-warning { background-color: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.3); color: #f0d070; } html.dark-mode .alert-info { background-color: rgba(13, 202, 240, 0.12); border-color: rgba(13, 202, 240, 0.3); color: #6dd8ed; } /* ============================================================ DARK MODE — CÁC CARD NỀN TRẮNG HARDCODED ============================================================ */ /* Services / Features cards */ html.dark-mode .services .icon-box { background: #1a2d1f; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } html.dark-mode .services .icon-box h4 a, html.dark-mode .services .icon-box h4 { color: #7edd9e; } html.dark-mode .services .icon-box p { color: #b8d4be; } /* Why Us accordion list */ html.dark-mode .why-us .accordion-list li { background: #1a2d1f; } html.dark-mode .why-us .accordion-list a { color: #7edd9e; } html.dark-mode .why-us .accordion-list p { color: #b8d4be; } /* Pricing cards */ html.dark-mode .pricing .box { background: #1a2d1f; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.4); } html.dark-mode .pricing .box h3 { color: #d4e8d8; } html.dark-mode .pricing .box h4 { color: #7edd9e; } html.dark-mode .pricing .box .description { color: #8aab90; } html.dark-mode .pricing .box ul li { color: #b8d4be; } html.dark-mode .pricing .box ul .na { color: #4a6b50; } /* FAQ list items */ html.dark-mode .faq .faq-list li { background: #1a2d1f; } html.dark-mode .faq .faq-list a { color: #7edd9e; } html.dark-mode .faq .faq-list p { color: #b8d4be; } /* Contact info & form containers */ html.dark-mode .contact .info, html.dark-mode .contact .php-email-form { background: #1a2d1f; } html.dark-mode .contact .info h4 { color: #7edd9e; } html.dark-mode .contact .info p { color: #b8d4be; } /* Card trắng hardcoded — giữ text tối trong dark mode */ html.dark-mode .team .member { background: #1a2d1f; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } html.dark-mode .team .member h4 { color: #7edd9e; } html.dark-mode .team .member span { color: #a8c8b0; } html.dark-mode .team .member p { color: #b8d4be; } /* Button overrides dark */ html.dark-mode .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-color); } html.dark-mode .btn-outline-secondary:hover { background-color: var(--bg-hover); color: var(--text-body); border-color: var(--primary-200-color); } html.dark-mode .btn-light { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-body); } html.dark-mode .btn-light:hover { background-color: var(--bg-hover); border-color: var(--primary-200-color); } /* Input group */ html.dark-mode .input-group-text { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } /* Nav pills */ html.dark-mode .nav-pills .nav-link { color: var(--text-muted); } html.dark-mode .nav-pills .nav-link.active { background-color: var(--primary-200-color); color: #ffffff; } html.dark-mode .nav-tabs { border-color: var(--border-color); } html.dark-mode .nav-tabs .nav-link { color: var(--text-muted); } html.dark-mode .nav-tabs .nav-link.active { background-color: var(--bg-card); border-color: var(--border-color) var(--border-color) var(--bg-card); color: var(--primary-200-color); } /* Code blocks */ html.dark-mode pre, html.dark-mode code { background-color: var(--code-bg); border-color: var(--code-border); color: #a8d8b0; } /* Breadcrumb */ html.dark-mode .breadcrumb { background-color: var(--bg-secondary); } html.dark-mode .breadcrumb-item.active { color: var(--text-muted); } html.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }