:root {
    interpolate-size: allow-keywords;
}

/* Chỉ có hiệu lực trong lúc đang chuyển theme */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition:
        background-color var(--theme-transition-duration, 1.5s) ease,
        color var(--theme-transition-duration, 1.5s) ease,
        border-color var(--theme-transition-duration, 1.5s) ease,
        box-shadow var(--theme-transition-duration, 1.5s) ease,
        fill var(--theme-transition-duration, 1.5s) ease,
        stroke var(--theme-transition-duration, 1.5s) ease !important;
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Ẩn mặc định */
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition:
        opacity 0.3s,
        transform 0.3s,
        visibility 0.3s;
    z-index: 1000;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #1d4ed8;
}

#list-example .theme-primary.active {
    background-color: var(--bs-primary-bg);
}

#list-example .theme-accent.active {
    background-color: var(--bs-accent-bg);
}

#list-example .theme-success.active {
    background-color: var(--bs-success-bg);
}

#list-example .theme-danger.active {
    background-color: var(--bs-danger-bg);
}

#list-example .theme-warning.active {
    background-color: var(--bs-warning-bg);
}

#list-example .theme-info.active {
    background-color: var(--bs-info-bg);
}

#list-example .theme-inverse.active {
    background-color: var(--bs-inverse-bg);
}

#list-example .theme-secondary.active {
    background-color: var(--bs-secondary-bg);
}

dialog.dialog:not([open]) {
    display: none;
}