/* ==========================================================================
   MỤC LỤC - FOOTER.CSS (CHUẨN MATERIAL DESIGN 3)
   1. Bề mặt Footer (Surface & Background)
   2. Menu Footer & Accordion Mobile (Typography & Transitions)
   3. Bản quyền & Mạng xã hội (Copyright & Social Cards)
   4. Thanh Điều Hướng Mobile (Bottom App Bar M3)
   ========================================================================== */

/* ==========================================================================
   1. BỀ MẶT FOOTER (SURFACE & BACKGROUND)
   ========================================================================== */
#footer {
    /* Sử dụng Surface Container để tạo phân lớp mượt mà với nội dung trang */
    background-color: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.absolute-footer {
    background-color: var(--md-sys-color-surface-container) !important;
    font: var(--md-sys-typescale-body-small) !important;
    color: var(--md-sys-color-secondary) !important;
    padding: 10px 0 15px;
}
#footer .payment-icons .payment-icon { opacity: 1; }

/* ==========================================================================
   2. MENU FOOTER & ACCORDION MOBILE
   ========================================================================== */
.footer-session .ux-menu .ux-menu-link:first-child { margin-top: 12px !important; }
.footer-session .ux-menu .ux-menu-link:last-child { margin-bottom: 12px !important; }

/* Tiêu đề cột Menu (Title Medium) */
.footer-menu-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
    position: relative;
    padding-right: 20px;
    margin-bottom: 16px;
}

/* Link Menu (Body Medium cho văn bản đọc) */
#footer .ux-menu-link__link {
    min-height: 2.5em;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-secondary);
    transition: color var(--md-sys-duration-short) ease;
}

#footer .ux-menu-link__link:hover {
    color: var(--md-sys-color-primary);
}

/* Icon Toggle cho Mobile */
.toggle-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    line-height: 46px;
    visibility: hidden;
}

/* Responsive Footer Accordion Mobile */
@media (max-width: 769px) {
    #footer {
        /* Chừa 80px ở đáy để không bị Bottom App Bar che khuất */
        padding-bottom: 80px;
        background-color: var(--md-sys-color-surface-container-high); 
    }

    .footer-section { padding-bottom: 0px !important; }
    .footer-section .col-inner { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
    .footer-menu-title { line-height: 46px; margin-bottom: 0px;}
    .footer-title { cursor: pointer; }
    .toggle-icon { visibility: visible; }

    /* Hiệu ứng trượt đóng/mở menu Mobile (M3 Standard Motion) */
    .footer-menu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--md-sys-duration-short) var(--md-sys-motion-standard), 
                    opacity var(--md-sys-duration-short) var(--md-sys-motion-standard);
    }
    .footer-menu.open {
        max-height: 500px;
        opacity: 1;
    }
}

.footer-chip-group {
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow: visible !important;
    margin-top: 8px;
}

.footer-list-menu {
    background-color: transparent !important; 
    padding: 0 !important;
}

/* ==========================================================================
   3. BẢN QUYỀN & MẠNG XÃ HỘI (SOCIAL CARDS)
   ========================================================================== */
.footer-copyright-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    padding-top: 24px;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

/* Copyright (Body Small) */
.footer-copyright {
    flex: 1;
    font: var(--md-sys-typescale-body-small) !important;
    color: var(--md-sys-color-secondary) !important;
    margin: 0 16px 0 0;
}

@media (max-width: 45rem) {
    .footer-copyright-wrap {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .footer-copyright { margin: 0 0 16px 0 !important; }
    .social-icons a { margin: 0 8px 0 0 !important; }
}

/* Các Icon Chứng nhận */
.social-icons { overflow: auto; }
.social-icons a { float: left; margin: 0 0 0 8px; text-decoration: none; }
.social-icons .gov { height: 26px; width: 68px; }
.social-icons .dmca { height: 26px; width: 52px; }
.social-icons svg, .social-icons img {
    width: 100%; height: 100%;
    transition: transform var(--md-sys-duration-short) ease, fill var(--md-sys-duration-short) ease;
}

/* Nút Mạng Xã Hội (M3 Standard Icon Button) */
.social-links { display: flex; gap: 12px; justify-content: flex-start; align-items: center; padding: 20px 0; }
.social-box {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; /* Tăng kích thước chạm chuẩn */
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full); /* Bo tròn hoàn toàn chuẩn M3 */
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
    cursor: pointer; 
    color: var(--md-sys-color-secondary);
}
.social-box svg { width: 24px; height: 24px; fill: currentColor; }
.social-box:hover {
    transform: translateY(-2px);
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: var(--md-sys-elevation-level-1);
    border-color: var(--md-sys-color-outline);
    color: var(--md-sys-color-primary); 
}

/* ==========================================================================
   4. THANH ĐIỀU HƯỚNG MOBILE (BOTTOM APP BAR M3)
   ========================================================================== */
#menu-bottom-tabs { display: none; }

@media (max-width: 849px) {
    /* Khung ngoài cùng - Nổi khối */
    #menu-bottom-tabs.tabs {
        background-color: var(--md-sys-color-surface-container);
        border-radius: var(--md-sys-shape-corner-lg) var(--md-sys-shape-corner-lg) 0 0; 
        bottom: 0; left: 0; width: 100%;
        box-shadow: var(--md-sys-elevation-level-2); /* Bóng đổ cấp 2 */
        display: flex; padding: 8px 0; position: fixed; z-index: 100; border: none;
    }

    .tabs {
        -webkit-overflow-scrolling: touch;
        display: flex; align-items: stretch; justify-content: space-between;
        overflow: hidden; overflow-x: auto; white-space: nowrap;
    }

    #menu-bottom-tabs.tabs ul {
        background-color: transparent; border: none; margin: 0; padding: 0; z-index: 130;
        display: flex; align-items: center; flex-grow: 1; flex-shrink: 0; justify-content: space-around;
    }

    .tabs li { display: block; margin: 0; padding: 0; width: 20%; }

    /* Nút tương tác Tab */
    #menu-bottom-tabs.tabs ul li.menu-bottom-item a {
        display: flex; align-items: center; flex-flow: column; justify-content: center;
        border: none; padding: 4px 0; position: relative;
        font: var(--md-sys-typescale-label-medium) !important; 
        color: var(--md-sys-color-secondary) !important;
        transition: color var(--md-sys-duration-short) ease;
    }

    /* Đổi màu chữ khi Active */
    #menu-bottom-tabs.tabs ul li.menu-bottom-item.active a {
        color: var(--md-sys-color-on-surface) !important; 
        font-weight: 600;
    }

    /* Pill shape - M3 Active Indicator */
    #menu-bottom-tabs.tabs ul li.menu-bottom-item a .icon{
        height: 32px; width: 64px; /* Tỷ lệ vàng của M3 */
        margin: 0 auto 4px auto;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 16px; 
        transition: background-color var(--md-sys-duration-short) ease;
    }

    /* Active Indicator màu cam nhạt */
    #menu-bottom-tabs.tabs ul li.menu-bottom-item a svg,
    #menu-bottom-tabs.tabs ul li.menu-bottom-item a img {
        height: 24px; width: 24px;
        fill: var(--md-sys-color-secondary);
        transition: fill var(--md-sys-duration-short) ease;
        border-radius: var(--md-sys-shape-corner-full);
    }

    #menu-bottom-tabs.tabs ul li.menu-bottom-item.active a svg,
    #menu-bottom-tabs.tabs ul li.menu-bottom-item.active a img {
        background-color: var(--md-sys-color-primary-container);
        height: 24px; width: 24px;
        fill: var(--md-sys-color-secondary);
        transition: fill var(--md-sys-duration-short) ease;
        border-radius: var(--md-sys-shape-corner-full);
    }

    /* Tạo khoảng trống giả để Bottom Bar không đè lên text cuối trang */
    .page-title-inner { position: relative; min-height: 80px; }
}