/**
 * Màu thương hiệu tím sáng (#7367f0 — Vuexy-style), đồng bộ Bootstrap + ghi đè Sneat theme-default.
 */
:root,
[data-bs-theme='light'] {
    --tk-brand: #7367f0;
    --tk-brand-hover: #685dd5;
    --tk-brand-active: #5e52d4;
    --tk-brand-rgb: 115, 103, 240;
    --bs-primary: #7367f0;
    --bs-purple: #7367f0;
    --bs-primary-rgb: 115, 103, 240;
}

[data-bs-theme='dark'],
body.dark-mode {
    --tk-brand: #7367f0;
    --tk-brand-hover: #8578f2;
    --tk-brand-active: #685dd5;
    --bs-primary: #7367f0;
    --bs-purple: #7367f0;
    --bs-primary-rgb: 115, 103, 240;
}

/* Sneat theme-default dùng màu cứng cho .btn-primary — bắt buộc ghi đè */
.btn-primary {
    color: #fff !important;
    background-color: var(--tk-brand) !important;
    border-color: var(--tk-brand) !important;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: var(--tk-brand-hover) !important;
    border-color: var(--tk-brand-hover) !important;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    color: #fff !important;
    background-color: var(--tk-brand-hover) !important;
    border-color: var(--tk-brand-hover) !important;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--tk-brand-active) !important;
    border-color: var(--tk-brand-active) !important;
}

.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--tk-brand-rgb), 0.35) !important;
}

.btn-outline-primary {
    color: var(--tk-brand) !important;
    border-color: var(--tk-brand) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--tk-brand) !important;
    border-color: var(--tk-brand) !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: #fff !important;
    background-color: var(--tk-brand-active) !important;
    border-color: var(--tk-brand-active) !important;
}

/* Nhãn / badge primary */
.bg-label-primary {
    background-color: rgba(var(--tk-brand-rgb), 0.12) !important;
    color: var(--tk-brand) !important;
}

.btn-label-primary,
.btn-icon.btn-label-primary {
    color: var(--tk-brand) !important;
    border-color: rgba(var(--tk-brand-rgb), 0.2) !important;
    background-color: rgba(var(--tk-brand-rgb), 0.08) !important;
}

.btn-label-primary:hover,
.btn-icon.btn-label-primary:hover {
    color: var(--tk-brand) !important;
    border-color: rgba(var(--tk-brand-rgb), 0.28) !important;
    background-color: rgba(var(--tk-brand-rgb), 0.16) !important;
}

.page-item.active .page-link,
.pagination li.active > a:not(.page-link) {
    border-color: var(--tk-brand) !important;
    background-color: var(--tk-brand) !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(var(--tk-brand-rgb), 0.4) !important;
}

.progress-bar {
    background-color: var(--tk-brand) !important;
}

.text-primary {
    color: var(--tk-brand) !important;
}

.bg-primary {
    background-color: var(--tk-brand) !important;
}

.border-primary {
    border-color: var(--tk-brand) !important;
}