:root {
    /* ===== MH Brand Light Theme ===== */
    /* Palette: Deep Red #8B1A0A → Red #C0200A → Red-Orange #E03010 → Orange #E86020 → Amber #F09030 */

    --color-bg: #faf7f5;
    /* Nền chính - kem trắng ấm */
    --color-bg-primary: #ffffff;
    /* Nền phụ (card, section) */
    --color-text: #1a0805;
    /* Text chính - nâu đen ấm */
    --color-muted: #7a5a50;
    /* Text mờ - nâu đất */
    --color-primary: #C0200A;
    /* Brand đỏ chính */
    --color-secondary: #E86020;
    /* Brand cam phụ */
    --color-accent: #F09030;
    /* Accent vàng cam */
    --color-brand-dark: #8B1A0A;
    /* Đỏ đậm nhất */
    --color-border: #e8d5cf;
    /* Viền - hồng đất nhạt */
    --color-input-bg: #ffffff;
    /* Nền input/card */
    --color-hover: #E03010;
    /* Hover nút/link */

    /* Gradient brand */
    --gradient-brand: linear-gradient(135deg, #8B1A0A 0%, #C0200A 30%, #E03010 55%, #E86020 80%, #F09030 100%);
    --gradient-brand-h: linear-gradient(90deg, #8B1A0A 0%, #C0200A 30%, #E03010 55%, #E86020 80%, #F09030 100%);

    --color-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent);
    --color-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-12: color-mix(in srgb, var(--color-primary) 12%, transparent);
    --color-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --color-primary-16: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --color-primary-18: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --color-primary-22: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --color-primary-25: color-mix(in srgb, var(--color-primary) 25%, transparent);
    --color-primary-26: color-mix(in srgb, var(--color-primary) 26%, transparent);

    --color-text-primary: var(--color-text);
    --color-text-secondary: var(--color-muted);

    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

    /* ── Bootstrap primary override (light) ── */
    --bs-primary: #C0200A;
    --bs-primary-rgb: 192, 32, 10;
    --bs-primary-bg-subtle: #fde8e5;
    --bs-primary-border-subtle: #f5b3aa;
    --bs-primary-text-emphasis: #8B1A0A;
    --bs-link-color: #C0200A;
    --bs-link-hover-color: #E03010;
}

[data-theme="dark"] {
    /* ===== MH Brand Dark Theme ===== */
    /* Nền tối ấm theo tone đỏ đất */

    --color-bg: #100806;
    /* Nền chính - đen đỏ sâu */
    --color-bg-primary: #1c0f0a;
    /* Nền phụ (card, section) */
    --color-text: #f0e8e4;
    /* Text chính - trắng kem ấm */
    --color-muted: #a88070;
    /* Text mờ - nâu cam nhạt */
    --color-primary: #E86020;
    /* Brand cam đỏ - nổi trên nền tối */
    --color-secondary: #F09030;
    /* Brand vàng cam - phụ */
    --color-accent: #C0200A;
    /* Accent đỏ */
    --color-brand-dark: #F09030;
    /* Vàng cam sáng nhất */
    --color-border: #3a1810;
    /* Viền - đỏ nâu đậm */
    --color-input-bg: #1c0f0a;
    /* Nền input/card */
    --color-hover: #F09030;
    /* Hover nút/link */

    /* Gradient brand (giữ nguyên) */
    --gradient-brand: linear-gradient(135deg, #8B1A0A 0%, #C0200A 30%, #E03010 55%, #E86020 80%, #F09030 100%);
    --gradient-brand-h: linear-gradient(90deg, #8B1A0A 0%, #C0200A 30%, #E03010 55%, #E86020 80%, #F09030 100%);

    --color-primary-06: color-mix(in srgb, var(--color-primary) 6%, transparent);
    --color-primary-08: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-12: color-mix(in srgb, var(--color-primary) 12%, transparent);
    --color-primary-14: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --color-primary-16: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --color-primary-18: color-mix(in srgb, var(--color-primary) 18%, transparent);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --color-primary-22: color-mix(in srgb, var(--color-primary) 22%, transparent);
    --color-primary-25: color-mix(in srgb, var(--color-primary) 25%, transparent);
    --color-primary-26: color-mix(in srgb, var(--color-primary) 26%, transparent);

    --color-text-primary: var(--color-text);
    --color-text-secondary: var(--color-muted);

    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

    /* ── Bootstrap primary override (dark) ── */
    --bs-primary: #E86020;
    --bs-primary-rgb: 232, 96, 32;
    --bs-primary-bg-subtle: #2a1408;
    --bs-primary-border-subtle: #7a2e0a;
    --bs-primary-text-emphasis: #F09030;
    --bs-link-color: #E86020;
    --bs-link-hover-color: #F09030;
}

/* ================== Body ================== */

/* Override Bootstrap bg-body-tertiary để theo theme */
.bg-body-tertiary {
    background-color: var(--color-bg-primary) !important;
}

body.app-body,
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================== Sections ================== */
.hero,
.features,
.video-section,
.contact-section {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* ================== Card ================== */
.card,
.feature-card {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tiêu đề và đoạn văn trong card */
.card h5,
.card p,
.feature-card h5,
.feature-card p {
    color: var(--color-text) !important;
}

/* Text muted trong card */
.card .text-muted,
.feature-card .text-muted {
    color: var(--color-muted) !important;
}


/* ================== Buttons ================== */
.theme-toggle {
    background: var(--gradient-brand);
    color: #fff;
    border: none;
}

.theme-toggle:hover {
    background: var(--gradient-brand-h);
    filter: brightness(1.1);
}

.btn-primary {
    background: var(--gradient-brand);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: filter 0.2s, box-shadow 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gradient-brand-h);
    border: none;
    filter: brightness(1.12);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
    color: #fff;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
}

/* Brand gradient text utility */
.text-gradient-brand {
    background: var(--gradient-brand-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brand gradient border accent */
.border-gradient-brand {
    border-image: var(--gradient-brand-h) 1;
}

/* ================== Text & Colors ================== */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-dark {
    color: var(--color-text) !important;
}

.text-muted {
    color: var(--color-muted) !important;
}

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

/* ================== Navbar ================== */
.nav-link {
    color: var(--color-text);
    transition: color 0.3s, background-color 0.3s;
}

.nav-link:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-08);
    font-weight: bold;
}

.nav-link.active {
    font-weight: bold;
    background: var(--gradient-brand-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: 2px solid var(--color-primary);
}

/* ================== Footer ================== */
footer h5 {
    font-weight: 600;
    background: var(--gradient-brand-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

footer ul li {
    margin-bottom: 5px;
}

footer a {
    color: var(--color-text);
}

footer a:hover {
    color: var(--color-secondary);
}

/* ================== List ================== */
ul,
li,
a {
    color: var(--color-text);
}

[data-theme="dark"] ul,
[data-theme="dark"] li,
[data-theme="dark"] a {
    color: #f0f0f0;
}

/* ================== Shake animation ================== */
@keyframes shake-rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    16% {
        transform: rotate(10deg) scale(1.1);
    }

    33% {
        transform: rotate(20deg) scale(1.2);
    }

    50% {
        transform: rotate(0deg) scale(1);
    }

    66% {
        transform: rotate(-10deg) scale(1.1);
    }

    84% {
        transform: rotate(-20deg) scale(1.2);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.shake-button {
    display: inline-block;
    animation: shake-rotate 1s infinite ease-in-out;
    transform-origin: center;
}