/* ======================================== BRANDING COLOR SYSTEM — Hệ thống thương hiệu Mỗi tenant chọn 1 bộ màu + font chữ Sử dụng: ======================================== */ /* ======================================== FONT FAMILIES ======================================== */ [data-font="inter"], [data-font="inter"] .sidebar-wrapper.sidebar-theme, [data-font="inter"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Inter', sans-serif !important; } [data-font="be-vietnam"], [data-font="be-vietnam"] .sidebar-wrapper.sidebar-theme, [data-font="be-vietnam"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Be Vietnam Pro', sans-serif !important; } [data-font="lexend"], [data-font="lexend"] .sidebar-wrapper.sidebar-theme, [data-font="lexend"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Lexend', sans-serif !important; } [data-font="plus-jakarta"], [data-font="plus-jakarta"] .sidebar-wrapper.sidebar-theme, [data-font="plus-jakarta"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Plus Jakarta Sans', sans-serif !important; } [data-font="space-grotesk"], [data-font="space-grotesk"] .sidebar-wrapper.sidebar-theme, [data-font="space-grotesk"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Space Grotesk', sans-serif !important; } [data-font="dm-sans"], [data-font="dm-sans"] .sidebar-wrapper.sidebar-theme, [data-font="dm-sans"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'DM Sans', sans-serif !important; } [data-font="mulish"], [data-font="mulish"] .sidebar-wrapper.sidebar-theme, [data-font="mulish"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Mulish', sans-serif !important; } [data-font="momo-trust"], [data-font="momo-trust"] .sidebar-wrapper.sidebar-theme, [data-font="momo-trust"] .sidebar-wrapper.sidebar-theme *:not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class*="ph-"]) { font-family: 'Momo Trust Sans', sans-serif !important; } /* Icon font-family restoration – đảm bảo icon libraries luôn dùng đúng font */ .sidebar-wrapper .fas, .sidebar-wrapper .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } .sidebar-wrapper .far, .sidebar-wrapper .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; } .sidebar-wrapper .fab, .sidebar-wrapper .fa-brands { font-family: "Font Awesome 6 Brands" !important; } .sidebar-wrapper .bi { font-family: "bootstrap-icons" !important; } .sidebar-wrapper [class*="ph-bold"] { font-family: "Phosphor-Bold" !important; } /* ======================================== BRANDING SCHEME DEFINITIONS (CSS Variables) Mỗi scheme define variables, phần layout auto apply ======================================== */ /* 1. OCEAN BLUE — Biển xanh chuyên nghiệp */ [data-branding="ocean-blue"] { --brand-primary: #2196f3; --brand-primary-hover: #1976d2; --brand-primary-light: #e3f2fd; --brand-primary-lighter: rgba(33, 150, 243, 0.08); --brand-primary-rgb: 33, 150, 243; --brand-primary-shadow: rgba(33, 150, 243, 0.35); --brand-gradient: linear-gradient(135deg, #2196f3 0%, #1565c0 100%); --brand-gradient-soft: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #0a2647 0%, #051b33 100%); --brand-sidebar-active-bg: rgba(33, 150, 243, 0.15); --brand-sidebar-active-border: #2196f3; --brand-sidebar-icon-active: #2196f3; --brand-sidebar-hover-bg: rgba(33, 150, 243, 0.08); } /* 2. ROYAL PURPLE — Tím hoàng gia */ [data-branding="royal-purple"] { --brand-primary: #7c3aed; --brand-primary-hover: #6d28d9; --brand-primary-light: #ede9fe; --brand-primary-lighter: rgba(124, 58, 237, 0.08); --brand-primary-rgb: 124, 58, 237; --brand-primary-shadow: rgba(124, 58, 237, 0.35); --brand-gradient: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); --brand-gradient-soft: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #1a0a2e 0%, #10061c 100%); --brand-sidebar-active-bg: rgba(124, 58, 237, 0.15); --brand-sidebar-active-border: #7c3aed; --brand-sidebar-icon-active: #7c3aed; --brand-sidebar-hover-bg: rgba(124, 58, 237, 0.08); } /* 3. FOREST GREEN — Xanh lá rừng */ [data-branding="forest-green"] { --brand-primary: #10b981; --brand-primary-hover: #059669; --brand-primary-light: #d1fae5; --brand-primary-lighter: rgba(16, 185, 129, 0.08); --brand-primary-rgb: 16, 185, 129; --brand-primary-shadow: rgba(16, 185, 129, 0.35); --brand-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%); --brand-gradient-soft: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #0b2118 0%, #06140f 100%); --brand-sidebar-active-bg: rgba(16, 185, 129, 0.15); --brand-sidebar-active-border: #10b981; --brand-sidebar-icon-active: #10b981; --brand-sidebar-hover-bg: rgba(16, 185, 129, 0.08); } /* 4. CRIMSON RED — Đỏ thẫm */ [data-branding="crimson-red"] { --brand-primary: #ef4444; --brand-primary-hover: #dc2626; --brand-primary-light: #fee2e2; --brand-primary-lighter: rgba(239, 68, 68, 0.08); --brand-primary-rgb: 239, 68, 68; --brand-primary-shadow: rgba(239, 68, 68, 0.35); --brand-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); --brand-gradient-soft: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #2a0a0a 0%, #1a0505 100%); --brand-sidebar-active-bg: rgba(239, 68, 68, 0.15); --brand-sidebar-active-border: #ef4444; --brand-sidebar-icon-active: #ef4444; --brand-sidebar-hover-bg: rgba(239, 68, 68, 0.08); } /* 5. MIDNIGHT BLACK — Đen huyền bí */ [data-branding="midnight-black"] { --brand-primary: #6366f1; --brand-primary-hover: #4f46e5; --brand-primary-light: #e0e7ff; --brand-primary-lighter: rgba(99, 102, 241, 0.08); --brand-primary-rgb: 99, 102, 241; --brand-primary-shadow: rgba(99, 102, 241, 0.35); --brand-gradient: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); --brand-gradient-soft: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #111111 0%, #0a0a0a 100%); --brand-sidebar-active-bg: rgba(99, 102, 241, 0.15); --brand-sidebar-active-border: #6366f1; --brand-sidebar-icon-active: #6366f1; --brand-sidebar-hover-bg: rgba(99, 102, 241, 0.08); } /* 6. SUNSET ORANGE — Hoàng hôn cam */ [data-branding="sunset-orange"] { --brand-primary: #f59e0b; --brand-primary-hover: #d97706; --brand-primary-light: #fef3c7; --brand-primary-lighter: rgba(245, 158, 11, 0.08); --brand-primary-rgb: 245, 158, 11; --brand-primary-shadow: rgba(245, 158, 11, 0.35); --brand-gradient: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); --brand-gradient-soft: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); --brand-btn-text: #1a1a1a; --brand-sidebar-bg: linear-gradient(180deg, #2d1b0e 0%, #1c1008 100%); --brand-sidebar-active-bg: rgba(245, 158, 11, 0.15); --brand-sidebar-active-border: #f59e0b; --brand-sidebar-icon-active: #f59e0b; --brand-sidebar-hover-bg: rgba(245, 158, 11, 0.08); } /* 7. TEAL FRESH — Xanh ngọc tươi mới */ [data-branding="teal-fresh"] { --brand-primary: #14b8a6; --brand-primary-hover: #0d9488; --brand-primary-light: #ccfbf1; --brand-primary-lighter: rgba(20, 184, 166, 0.08); --brand-primary-rgb: 20, 184, 166; --brand-primary-shadow: rgba(20, 184, 166, 0.35); --brand-gradient: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); --brand-gradient-soft: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #042f2e 0%, #021c1b 100%); --brand-sidebar-active-bg: rgba(20, 184, 166, 0.15); --brand-sidebar-active-border: #14b8a6; --brand-sidebar-icon-active: #14b8a6; --brand-sidebar-hover-bg: rgba(20, 184, 166, 0.08); } /* 8. ROSE GOLD — Hồng ánh vàng */ [data-branding="rose-gold"] { --brand-primary: #ec4899; --brand-primary-hover: #db2777; --brand-primary-light: #fce7f3; --brand-primary-lighter: rgba(236, 72, 153, 0.08); --brand-primary-rgb: 236, 72, 153; --brand-primary-shadow: rgba(236, 72, 153, 0.35); --brand-gradient: linear-gradient(135deg, #ec4899 0%, #be185d 100%); --brand-gradient-soft: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #2e1320 0%, #1c0b14 100%); --brand-sidebar-active-bg: rgba(236, 72, 153, 0.15); --brand-sidebar-active-border: #ec4899; --brand-sidebar-icon-active: #ec4899; --brand-sidebar-hover-bg: rgba(236, 72, 153, 0.08); } /* 9. SLATE MODERN — Xám hiện đại */ [data-branding="slate-modern"] { --brand-primary: #0ea5e9; --brand-primary-hover: #0284c7; --brand-primary-light: #e0f2fe; --brand-primary-lighter: rgba(14, 165, 233, 0.08); --brand-primary-rgb: 14, 165, 233; --brand-primary-shadow: rgba(14, 165, 233, 0.35); --brand-gradient: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); --brand-gradient-soft: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --brand-sidebar-active-bg: rgba(14, 165, 233, 0.15); --brand-sidebar-active-border: #0ea5e9; --brand-sidebar-icon-active: #0ea5e9; --brand-sidebar-hover-bg: rgba(14, 165, 233, 0.08); } /* 10. COFFEE BROWN — Nâu cà phê */ [data-branding="coffee-brown"] { --brand-primary: #b45309; --brand-primary-hover: #92400e; --brand-primary-light: #fef3c7; --brand-primary-lighter: rgba(180, 83, 9, 0.08); --brand-primary-rgb: 180, 83, 9; --brand-primary-shadow: rgba(180, 83, 9, 0.35); --brand-gradient: linear-gradient(135deg, #b45309 0%, #78350f 100%); --brand-gradient-soft: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); --brand-btn-text: #fff; --brand-sidebar-bg: linear-gradient(180deg, #291711 0%, #1a0e09 100%); --brand-sidebar-active-bg: rgba(180, 83, 9, 0.15); --brand-sidebar-active-border: #b45309; --brand-sidebar-icon-active: #b45309; --brand-sidebar-hover-bg: rgba(180, 83, 9, 0.08); } /* ======================================== UNIVERSAL OVERRIDES — Auto từ --brand-* variables ======================================== */ /* —————————————————————————————————————— SIDEBAR — Complete Override —————————————————————————————————————— */ /* Sidebar CSS variable injection — map --brand-sidebar-* → --sidebar-* */ [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme { --sidebar-bg: var(--brand-sidebar-bg); --sidebar-active-bg: var(--brand-sidebar-active-bg); --sidebar-active-border: var(--brand-sidebar-active-border); --sidebar-icon-active: var(--brand-sidebar-icon-active); --sidebar-hover-bg: var(--brand-sidebar-hover-bg); } .sidebar-wrapper.sidebar-theme #sidebar {background: unset!important;} /* Sidebar background (old structure.css fallback) */ [data-branding]:not([data-branding=""]) .sidebar-theme, [data-branding]:not([data-branding=""]) #sidebar .theme-brand { background: var(--brand-sidebar-bg) !important; border-color: transparent !important; } /* Sidebar active menu */ [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle { background-color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg, [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle span { color: var(--brand-btn-text) !important; } [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories ul.submenu > li.active:before { background-color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu > .dropdown-toggle:hover svg:not(.badge-icon), [data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu > .dropdown-toggle[aria-expanded=true]:hover svg { fill: rgba(var(--brand-primary-rgb), 0.04) !important; } /* Sidebar balance box */ [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .bg-light-info { background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1) 0%, rgba(var(--brand-primary-rgb), 0.15) 100%) !important; border-color: rgba(var(--brand-primary-rgb), 0.2) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .bg-light-info .btn-primary { background: var(--brand-gradient) !important; border: none !important; box-shadow: 0 2px 8px var(--brand-primary-shadow) !important; color: var(--brand-btn-text) !important; } /* Sidebar active glow + border */ [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .menu.active > .dropdown-toggle { background: var(--brand-sidebar-active-bg) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .menu.active > .dropdown-toggle::before { background: var(--brand-sidebar-active-border) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .menu.active > .dropdown-toggle svg { color: var(--brand-sidebar-icon-active) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a { background: var(--brand-sidebar-active-bg) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a::before { background: var(--brand-sidebar-active-border) !important; box-shadow: 0 0 6px var(--brand-sidebar-active-border) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li a:hover::before { background: var(--brand-sidebar-active-border) !important; } [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a svg, [data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a img { color: var(--brand-sidebar-icon-active) !important; } /* —————————————————————————————————————— BUTTONS — All Variants —————————————————————————————————————— */ /* btn-primary */ [data-branding]:not([data-branding=""]) .btn-primary { background: var(--brand-gradient) !important; border-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; box-shadow: 0 2px 6px var(--brand-primary-shadow); transition: all 0.25s ease; } [data-branding]:not([data-branding=""]) .btn-primary:hover, [data-branding]:not([data-branding=""]) .btn-primary:active, [data-branding]:not([data-branding=""]) .btn-primary:focus { background: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: var(--brand-btn-text) !important; box-shadow: 0 4px 14px var(--brand-primary-shadow) !important; transform: translateY(-1px); } [data-branding]:not([data-branding=""]) .btn-primary:active { transform: translateY(0); } [data-branding]:not([data-branding=""]) .btn-primary.disabled, [data-branding]:not([data-branding=""]) .btn-primary:disabled { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; opacity: 0.55; box-shadow: none; transform: none; } /* btn-outline-primary */ [data-branding]:not([data-branding=""]) .btn-outline-primary { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; background: transparent !important; } [data-branding]:not([data-branding=""]) .btn-outline-primary:hover, [data-branding]:not([data-branding=""]) .btn-outline-primary:active, [data-branding]:not([data-branding=""]) .btn-outline-primary:focus { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; box-shadow: 0 4px 12px var(--brand-primary-shadow) !important; } /* btn-light-primary */ [data-branding]:not([data-branding=""]) .btn-light-primary { background: var(--brand-primary-lighter) !important; color: var(--brand-primary) !important; border-color: transparent !important; } [data-branding]:not([data-branding=""]) .btn-light-primary:hover { background: var(--brand-primary) !important; color: var(--brand-btn-text) !important; } /* btn-sm smaller shadow */ [data-branding]:not([data-branding=""]) .btn-sm.btn-primary { box-shadow: 0 1px 3px var(--brand-primary-shadow); } /* btn-link */ [data-branding]:not([data-branding=""]) .btn-link { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .btn-link:hover { color: var(--brand-primary-hover) !important; } /* —————————————————————————————————————— FORM ELEMENTS — Input, Select, Checkbox, Switch, TomSelect —————————————————————————————————————— */ /* Input & Select focus */ [data-branding]:not([data-branding=""]) .form-control:focus, [data-branding]:not([data-branding=""]) .form-select:focus, [data-branding]:not([data-branding=""]) .ts-wrapper.focus .ts-control { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.12) !important; } /* Checkbox / Radio (checked) */ [data-branding]:not([data-branding=""]) .form-check-input:checked { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .form-check-input:focus { box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb), 0.25) !important; border-color: var(--brand-primary) !important; } /* Switch / Toggle */ [data-branding]:not([data-branding=""]) .form-switch .form-check-input:checked, [data-branding]:not([data-branding=""]) .switch-input:checked { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } /* Tom Select items */ [data-branding]:not([data-branding=""]) .ts-wrapper .ts-control .item { background: var(--brand-primary-lighter) !important; color: var(--brand-primary) !important; border-color: rgba(var(--brand-primary-rgb), 0.2) !important; } [data-branding]:not([data-branding=""]) .ts-wrapper .ts-dropdown .option.active { background-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; } /* Input group addon */ [data-branding]:not([data-branding=""]) .input-group:focus-within .input-group-text { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; } /* Range slider */ [data-branding]:not([data-branding=""]) .form-range::-webkit-slider-thumb { background: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .form-range::-moz-range-thumb { background: var(--brand-primary) !important; } /* Floating label (focused) */ [data-branding]:not([data-branding=""]) .form-floating > .form-control:focus ~ label { color: var(--brand-primary) !important; } /* —————————————————————————————————————— TYPOGRAPHY & LINKS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .text-primary { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) a:not(.btn):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebarCollapse):not([data-fill-bg]) { color: var(--brand-primary); } [data-branding]:not([data-branding=""]) a:not(.btn):hover { color: var(--brand-primary-hover); } /* —————————————————————————————————————— BADGES —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .badge.badge-primary, [data-branding]:not([data-branding=""]) .badge.bg-primary { background: var(--brand-gradient) !important; color: var(--brand-btn-text) !important; } [data-branding]:not([data-branding=""]) .badge.badge-light-primary { background: var(--brand-primary-lighter) !important; color: var(--brand-primary) !important; } /* —————————————————————————————————————— BACKGROUNDS & BORDERS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .bg-primary { background: var(--brand-gradient) !important; } [data-branding]:not([data-branding=""]) .bg-light-primary { background: var(--brand-gradient-soft) !important; } [data-branding]:not([data-branding=""]) .border-primary { border-color: var(--brand-primary) !important; } /* —————————————————————————————————————— CARDS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .card .card-header { border-bottom-color: rgba(var(--brand-primary-rgb), 0.1) !important; } /* —————————————————————————————————————— TABLES —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .table-hover tbody tr:hover { background-color: rgba(var(--brand-primary-rgb), 0.03) !important; } [data-branding]:not([data-branding=""]) table.dataTable thead .sorting_asc::after, [data-branding]:not([data-branding=""]) table.dataTable thead .sorting_desc::after { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) table.dataTable tbody tr.selected { background-color: var(--brand-primary-lighter) !important; } /* —————————————————————————————————————— PAGINATION —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .page-item.active .page-link { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; box-shadow: 0 2px 6px var(--brand-primary-shadow); } [data-branding]:not([data-branding=""]) .page-link:hover { color: var(--brand-primary) !important; background-color: var(--brand-primary-lighter) !important; } [data-branding]:not([data-branding=""]) .page-link { color: var(--brand-primary); } /* —————————————————————————————————————— ALERTS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .alert-primary { background: var(--brand-primary-lighter) !important; border-color: rgba(var(--brand-primary-rgb), 0.2) !important; color: var(--brand-primary-hover) !important; } /* —————————————————————————————————————— PROGRESS BAR —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .progress-bar, [data-branding]:not([data-branding=""]) .progress-bar.bg-primary { background: var(--brand-gradient) !important; } /* —————————————————————————————————————— NAVS & TABS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .nav-tabs .nav-link.active { color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .nav-tabs .nav-link:hover { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .nav-pills .nav-link.active { background: var(--brand-gradient) !important; color: var(--brand-btn-text) !important; box-shadow: 0 2px 6px var(--brand-primary-shadow); } /* —————————————————————————————————————— DROPDOWNS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .dropdown-item.active, [data-branding]:not([data-branding=""]) .dropdown-item:active { background-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; } /* —————————————————————————————————————— SPINNERS / LOADERS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .spinner-border.text-primary, [data-branding]:not([data-branding=""]) .spinner-grow.text-primary { color: var(--brand-primary) !important; } /* —————————————————————————————————————— ACCORDION —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .accordion-button:not(.collapsed) { color: var(--brand-primary) !important; background-color: var(--brand-primary-lighter) !important; } [data-branding]:not([data-branding=""]) .accordion-button:focus { box-shadow: 0 0 0 0.15rem rgba(var(--brand-primary-rgb), 0.25) !important; } /* —————————————————————————————————————— LIST GROUP —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .list-group-item.active { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; } /* —————————————————————————————————————— BREADCRUMB —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .breadcrumb-item.active { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .breadcrumb-item a { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .breadcrumb-item a:hover { color: var(--brand-primary-hover) !important; } /* —————————————————————————————————————— TOOLTIPS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .tooltip-inner { background-color: var(--brand-primary); } [data-branding]:not([data-branding=""]) .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--brand-primary); } [data-branding]:not([data-branding=""]) .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--brand-primary); } /* —————————————————————————————————————— DASHBOARD WIDGETS —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .widget-custom.bg-light-primary { background: var(--brand-gradient-soft) !important; } [data-branding]:not([data-branding=""]) .widget-custom.bg-light-primary .text-primary, [data-branding]:not([data-branding=""]) .widget-custom.bg-light-primary svg { color: var(--brand-primary) !important; } /* —————————————————————————————————————— SWEETALERT2 —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .swal2-styled.swal2-confirm { background: var(--brand-gradient) !important; border-color: var(--brand-primary) !important; box-shadow: 0 2px 6px var(--brand-primary-shadow) !important; } [data-branding]:not([data-branding=""]) .swal2-styled.swal2-confirm:hover { background: var(--brand-primary-hover) !important; } /* —————————————————————————————————————— TEXT SELECTION —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) ::selection { background: rgba(var(--brand-primary-rgb), 0.2); color: var(--brand-primary-hover); } [data-branding]:not([data-branding=""]) ::-moz-selection { background: rgba(var(--brand-primary-rgb), 0.2); color: var(--brand-primary-hover); } /* —————————————————————————————————————— NAVBAR / HEADER —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .navbar .navbar-item .nav-item .dropdown-toggle:hover svg { color: var(--brand-primary) !important; } /* —————————————————————————————————————— AUTH PAGES (Login / Register) —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .auth-container .btn-primary, [data-branding]:not([data-branding=""]) body.form .btn-primary { background: var(--brand-gradient) !important; border-color: var(--brand-primary) !important; color: var(--brand-btn-text) !important; box-shadow: 0 2px 6px var(--brand-primary-shadow) !important; } [data-branding]:not([data-branding=""]) .auth-container .btn-primary:hover, [data-branding]:not([data-branding=""]) body.form .btn-primary:hover { background: var(--brand-primary-hover) !important; box-shadow: 0 4px 12px var(--brand-primary-shadow) !important; } [data-branding]:not([data-branding=""]) .auth-container a, [data-branding]:not([data-branding=""]) body.form a:not(.btn) { color: var(--brand-primary); } [data-branding]:not([data-branding=""]) .auth-container .form-control:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15) !important; } /* —————————————————————————————————————— SCROLLBAR —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) ::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-primary-rgb), 0.3) !important; } /* —————————————————————————————————————— UTILITY CLASSES —————————————————————————————————————— */ [data-branding]:not([data-branding=""]) .text-brand { color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .bg-brand { background: var(--brand-gradient) !important; } [data-branding]:not([data-branding=""]) .border-brand { border-color: var(--brand-primary) !important; } [data-branding]:not([data-branding=""]) .shadow-brand { box-shadow: 0 4px 15px var(--brand-primary-shadow) !important; } /* ======================================== SIDEBAR MODE — dark (default) | white | brand data-sidebar="white" hoặc data-sidebar="brand" ======================================== */ /* —————————————————————————————————————— WHITE SIDEBAR — nền trắng, chữ đen, icon màu thương hiệu —————————————————————————————————————— */ [data-sidebar="white"] .sidebar-wrapper.sidebar-theme, [data-sidebar="white"] #sidebar .theme-brand, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-theme, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar .theme-brand { background: #ffffff !important; border-right: 1px solid #e8e8e8 !important; } [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .bg-light-info .fw-bold { color: var(--brand-primary) !important; } [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .theme-brand { border-bottom: 1px solid #eee !important; } /* Logo text */ [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .theme-brand p, [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .theme-brand small { color: #333 !important; } /* Collapse toggle */ [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .sidebarCollapse svg, [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .sidebarCollapse i, [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .sidebarCollapse img { color: #555 !important; filter: none; } /* Menu labels / headings */ [data-sidebar="white"] #sidebar ul.menu-categories li.menu-heading .heading span { color: #999 !important; } /* Normal menu items — text dark */ [data-sidebar="white"] #sidebar ul.menu-categories li.menu > .dropdown-toggle span { color: #333 !important; } [data-sidebar="white"] #sidebar ul.menu-categories li.menu > .dropdown-toggle svg { color: #888 !important; } /* Chevron icon */ [data-sidebar="white"] #sidebar ul.menu-categories li.menu > .dropdown-toggle > div:last-child svg { color: #bbb !important; } /* Icon font elements — muted brand color */ [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle svg, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .fas, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .far, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .fab, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .bi, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle [class*="ph-bold"] { color: rgba(var(--brand-primary-rgb), 0.5) !important; } /* Hover */ [data-sidebar="white"] #sidebar ul.menu-categories li.menu > .dropdown-toggle:hover { background: #f5f5f5 !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover svg, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .fas, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .far, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .fab, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .bi, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover [class*="ph-bold"] { color: rgba(var(--brand-primary-rgb), 0.75) !important; } /* Active parent — brand primary bg */ [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle { background: var(--brand-gradient) !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle span, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .fas, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .far, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .fab, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .bi, [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle [class*="ph-bold"] { color: #fff !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle img { filter: brightness(0) invert(1) !important; } /* Active border (left bar) */ [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .menu.active > .dropdown-toggle::before { background: var(--brand-primary) !important; } /* Submenu */ [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .submenu li a { color: #555 !important; } [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .submenu li a:hover { color: #333 !important; background: #f8f9fa !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a { background: rgba(var(--brand-primary-rgb), 0.08) !important; color: var(--brand-primary) !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a::before { background: var(--brand-primary) !important; } [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a svg, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .fas, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .far, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .fab, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .bi, [data-sidebar="white"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a [class*="ph-bold"] { color: var(--brand-primary) !important; } /* Balance box */ [data-sidebar="white"] .sidebar-wrapper.sidebar-theme .bg-light-info { background: #f0f4ff !important; border-color: #dce3f7 !important; } /* White sidebar without branding — use default blue accent */ [data-sidebar="white"]:not([data-branding]):not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle, [data-sidebar="white"][data-branding=""] #sidebar ul.menu-categories li.menu.active > .dropdown-toggle { background: linear-gradient(135deg, #4361ee 0%, #3651d4 100%) !important; } [data-sidebar="white"]:not([data-branding]):not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle span, [data-sidebar="white"]:not([data-branding]):not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg, [data-sidebar="white"][data-branding=""] #sidebar ul.menu-categories li.menu.active > .dropdown-toggle span, [data-sidebar="white"][data-branding=""] #sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg { color: #fff !important; } [data-sidebar="white"]:not([data-branding]):not([data-branding=""]) #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle svg, [data-sidebar="white"][data-branding=""] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle svg { color: rgba(67, 97, 238, 0.5) !important; } [data-sidebar="white"]:not([data-branding]):not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a, [data-sidebar="white"][data-branding=""] .sidebar-wrapper.sidebar-theme .submenu li.active a { background: rgba(67, 97, 238, 0.08) !important; color: #4361ee !important; } /* —————————————————————————————————————— BRAND SIDEBAR — nền = màu thương hiệu, chữ trắng —————————————————————————————————————— */ [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar .theme-brand { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), var(--brand-gradient) !important; border-color: transparent !important; } /* Logo text trắng */ [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .theme-brand p, [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .theme-brand small { color: rgba(255,255,255,0.9) !important; } /* Collapse toggle */ [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .sidebarCollapse svg, [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .sidebarCollapse i { color: rgba(255,255,255,0.7) !important; filter: brightness(0) invert(1); opacity: 0.7; } /* Menu headings */ [data-sidebar="brand"] #sidebar ul.menu-categories li.menu-heading .heading span { color: rgba(255,255,255,0.45) !important; } /* Normal menu items — white muted */ [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle span { color: rgba(255,255,255,0.75) !important; } [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle svg, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .fas, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .far, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .fab, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle .bi, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle [class*="ph-bold"], [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle img { color: rgba(255,255,255,0.55) !important; opacity: 0.65; } /* Chevron */ [data-sidebar="brand"] #sidebar ul.menu-categories li.menu > .dropdown-toggle > div:last-child svg { color: rgba(255,255,255,0.4) !important; } /* Hover */ [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover { background: rgba(255,255,255,0.1) !important; } [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover span { color: #fff !important; } [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover svg, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .fas, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .far, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .fab, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover .bi, [data-sidebar="brand"] #sidebar ul.menu-categories li.menu:not(.active) > .dropdown-toggle:hover [class*="ph-bold"] { color: rgba(255,255,255,0.85) !important; } /* Active — trắng semi-transparent */ [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle { background: rgba(255,255,255,0.2) !important; } [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle span, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle svg, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .fas, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .far, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .fab, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle .bi, [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle [class*="ph-bold"] { color: #fff !important; } [data-sidebar="brand"][data-branding]:not([data-branding=""]) #sidebar ul.menu-categories li.menu.active > .dropdown-toggle img { opacity: 1 !important; filter: brightness(0) invert(1) !important; } /* Active border */ [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .menu.active > .dropdown-toggle::before { background: #fff !important; } /* Submenu */ [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .submenu li a { color: rgba(255,255,255,0.65) !important; } [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .submenu li a:hover { color: #fff !important; background: rgba(255,255,255,0.08) !important; } [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a { background: rgba(255,255,255,0.15) !important; color: #fff !important; } [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a::before { background: #fff !important; } [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a svg, [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .fas, [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .far, [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .fab, [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a .bi, [data-sidebar="brand"][data-branding]:not([data-branding=""]) .sidebar-wrapper.sidebar-theme .submenu li.active a [class*="ph-bold"] { color: #fff !important; } /* Balance box */ [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .bg-light-info { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.15) !important; } [data-sidebar="brand"] .sidebar-wrapper.sidebar-theme .bg-light-info td { color: rgba(255,255,255,0.85) !important; }