@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Regular.woff2') format('woff2');
    font-display: swap;
}

:root {
    /* Colors */
    --fd-color-on-secondary-fixed: #061d2e;
    --fd-color-tertiary: #06121e;
    --fd-color-on-tertiary-fixed-variant: #3c4856;
    --fd-color-error: #ba1a1a;
    --fd-color-on-primary-container: #828e9d;
    --fd-color-on-secondary: #ffffff;
    --fd-color-tertiary-container: #1b2734;
    --fd-color-primary-container: #1b2733;
    --fd-color-outline-variant: #c4c6cc;
    --fd-color-moss-accent: #446084;
    --fd-color-on-primary: #ffffff;
    --fd-color-surface-container-lowest: #ffffff;
    --fd-color-on-secondary-fixed-variant: #34495b;
    --fd-color-cream-surface: #FFFFFF;
    --fd-color-outline: #74777c;
    --fd-color-secondary-fixed-dim: #b3c9df;
    --fd-color-tertiary-fixed: #d7e3f5;
    --fd-color-inverse-surface: #2f3132;
    --fd-color-primary: #06121d;
    --fd-color-secondary-container: #cce2f9;
    --fd-color-on-secondary-container: #506578;
    --fd-color-surface-container: #eeeef0;
    --fd-color-surface-container-high: #e8e8ea;
    --fd-color-on-tertiary-container: #828e9e;
    --fd-color-error-container: #ffdad6;
    --fd-color-background: #f9f9fb;
    --fd-color-on-surface: #1a1c1d;
    --fd-color-surface-container-highest: #e2e2e4;
    --fd-color-secondary-fixed: #cfe5fc;
    --fd-color-surface-bright: #f9f9fb;
    --fd-color-primary-fixed-dim: #bbc8d8;
    --fd-color-surface-dim: #d9dadc;
    --fd-color-surface-container-low: #f3f3f5;
    --fd-color-inverse-primary: #bbc8d8;
    --fd-color-on-error-container: #93000a;
    --fd-color-surface: #f9f9fb;
    --fd-color-on-tertiary: #ffffff;
    --fd-color-on-tertiary-fixed: #111c29;
    --fd-color-on-surface-variant: #44474b;
    --fd-color-on-primary-fixed-variant: #3c4855;
    --fd-color-on-error: #ffffff;
    --fd-color-tertiary-fixed-dim: #bbc7d9;
    --fd-color-on-primary-fixed: #101d28;
    --fd-color-surface-variant: #e2e2e4;
    --fd-color-forest-deep: #161E26;
    --fd-color-sage-wash: #E9EDEB;
    --fd-color-surface-tint: #53606d;
    --fd-color-primary-fixed: #d7e4f4;
    --fd-color-inverse-on-surface: #f0f0f2;
    --fd-color-secondary: #4c6174;
    --fd-color-on-background: #1a1c1d;

    /* Border Radius */
    --fd-radius-default: #0.125rem;
    --fd-radius-lg: 0.25rem;
    --fd-radius-xl: 0.5rem;
    --fd-radius-full: 0.75rem;
    --fd-radius-brand: 25px;

    /* Spacing */
    --fd-gutter: 24px;
    --fd-margin-desktop: 64px;
    --fd-container-max: 1280px;
    --fd-margin-mobile: 16px;
    --fd-unit: 8px;
    --fd-stack-sm: 16px;
    --fd-stack-lg: 80px;
    --fd-stack-md: 32px;
}

/* --- Base Reset Elements --- */
.ft-footer * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- Typography Helpers (Tiền tố ft-) --- */
.ft-font-headline-md {
    font-family: 'Noto Serif', serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.ft-font-body-md {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.937rem;
    font-weight: 400;
}

.ft-font-body-sm {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
}

.ft-font-label-caps {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* --- Main Layout Components (Tiền tố ft-) --- */
.ft-footer {
    width: 100%;
    background-color: var(--fd-color-surface-container-low);
    border-top: 1px solid rgba(196, 198, 204, 0.3);
    border-top-left-radius: var(--fd-radius-brand);
    border-top-right-radius: var(--fd-radius-brand);
    margin-top: var(--fd-stack-lg);
}

/* Dark-mode support */
.dark .ft-footer {
    background-color: var(--fd-color-tertiary-container);
}

.ft-footer-container {
    max-width: var(--fd-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: var(--fd-stack-lg) var(--fd-margin-mobile);

    /* Grid mặc định cho thiết bị di động (1 cột) */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-gutter);
}

/* Cột thương hiệu */
.ft-brand-link {
    color: var(--fd-color-primary);
    text-decoration: none;
    display: block;
    margin-bottom: 1.5rem;
}

.dark .ft-brand-link {
    color: var(--fd-color-primary-fixed);
}

.ft-brand-desc {
    color: var(--fd-color-on-surface-variant);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.ft-social-group {
    display: flex;
    gap: 1rem;
}

.ft-social-icon {
    color: var(--fd-color-forest-deep);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease-in-out;
}

.ft-social-icon:hover {
    color: var(--fd-color-moss-accent);
}

/* Tiêu đề nhóm cột */
.ft-column-title {
    color: var(--fd-color-forest-deep);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Danh sách link liên kết */
.ft-link-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ft-link-item {
    color: var(--fd-color-on-surface-variant);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.ft-link-item:hover {
    color: var(--fd-color-moss-accent);
}

/* Bản tin Newsletter */
.ft-newsletter-desc {
    color: var(--fd-color-on-surface-variant);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.ft-input-group {
    display: flex;
    gap: 0.5rem;
}

.ft-email-input {
    width: 100%;
    background-color: #ffffff;
    border: none;
    border-radius: var(--fd-radius-brand);
    padding: 0.75rem 1rem;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.ft-email-input:focus {
    box-shadow: 0 0 0 1px var(--fd-color-forest-deep);
}

.ft-submit-btn {
    background-color: var(--fd-color-forest-deep);
    color: #ffffff;
    padding: 0.75rem;
    border: none;
    border-radius: var(--fd-radius-brand);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
}

.ft-submit-btn:hover {
    background-color: var(--fd-color-moss-accent);
}

/* --- Hàng thông tin Copyright cuối trang --- */
.ft-copyright-bar {
    max-width: var(--fd-container-max);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem var(--fd-margin-mobile);
    border-top: 1px solid rgba(196, 198, 204, 0.2);

    /* Flex mặc định sắp xếp dọc trên thiết bị di động */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.ft-copyright-bar p,
.ft-copyright-bar span {
    color: var(--fd-color-on-surface-variant);
    font-size: 10px;
    text-align: center;
}

.ft-extra-info-group {
    display: flex;
    gap: 1.5rem;
}


/* --- Hệ thống Responsive Media Queries --- */

/* Thiết bị Máy tính bảng và Máy tính (từ 768px trở lên) */
@media (min-width: 768px) {
    .ft-footer-container {
        padding-left: var(--fd-margin-desktop);
        padding-right: var(--fd-margin-desktop);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* Chia làm 4 cột ngang bằng nhau */
    }

    .ft-copyright-bar {
        padding-left: var(--fd-margin-desktop);
        padding-right: var(--fd-margin-desktop);
        flex-direction: row;
        /* Xếp hàng ngang */
        justify-content: space-between;
        /* Đẩy ra hai đầu */
        gap: 0;
    }

    .ft-copyright-bar p,
    .ft-copyright-bar span {
        text-align: left;
    }
}



/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Noto+Serif:wght@500;600&display=swap');