/* ============================================================
 *  FAB — Floating Action Buttons (Zalo / Showroom / Hotline)
 *  PROMPT FAB-001 (2026-10-11) — Desktop pill dọc bên phải.
 *  PROMPT FAB-002 (2026-10-11) — Mobile bottom-bar (Menu + 3 nút).
 *
 *  Rule sử dụng selector `.gtsg-fab*` — KHÔNG đụng chạm global.
 *  Desktop:
 *    - Thanh nền xanh dương đậm liền khối, sát phải, căn giữa dọc.
 *    - Đầu trên / dưới cong mềm mại (border-radius).
 *    - 3 nút xếp dọc, icon trên — nhãn dưới, căn giữa.
 *    - Hotline rung nhẹ, tôn trọng prefers-reduced-motion.
 *  Mobile (<= 767px):
 *    - Ẩn cụm dọc, chuyển thành bottom-bar ngang sát đáy màn hình.
 *    - Bên trái: nút Menu (dùng chung .mobile-menu-toggle với header).
 *    - Bên phải: 3 nút Zalo / Showroom / Hotline trong grid 3 cột đều.
 *    - Hỗ trợ env(safe-area-inset-bottom) cho iPhone tai thỏ / Home Indicator.
 *    - Thêm padding-bottom cho body để nội dung cuối trang không bị che.
 * ============================================================ */

/* --- Container -------------------------------------------------- */
.gtsg-fab {
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;             /* thấp hơn .mobile-navigation (z-index: 100) để menu mở không bị FAB đè lên */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    pointer-events: none;    /* container trong suốt click; chỉ nút nhận click */
}

.gtsg-fab *,
.gtsg-fab *::before,
.gtsg-fab *::after {
    box-sizing: border-box;
}

/* Ẩn nút Menu trong FAB khi ở desktop (header đã có toggle riêng). */
.gtsg-fab__item--menu {
    display: none;
}

.gtsg-fab__list {
    list-style: none;
    margin: 0;
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;    /* khôi phục click cho từng nút */
}

/* --- Thanh nền xanh liền khối ----------------------------------
 *  Đầu trên / dưới cong mềm mại bằng `border-radius`. Thanh nền
 *  cao bằng tổng chiều cao các nút + padding, nên cụm trông liền
 *  khối như ảnh tham chiếu. */
.gtsg-fab__list::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0f225a;
    border-radius: 22px 0px 0px 22px;
    z-index: -1;
    box-shadow: 0 6px 18px rgba(15, 38, 75, 0.18);
}

/* --- Nút ------------------------------------------------------- */
.gtsg-fab__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gtsg-fab__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    padding: 10px 6px 8px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 14px;
    transition: background-color 160ms ease, transform 160ms ease;
    font-family: var(--font-arimo, Arial, Helvetica, sans-serif);
    line-height: 1.1;
    text-align: center;
    /* Giữ nguyên kích thước khi hover — không dịch chuyển cụm. */
}

.gtsg-fab__btn:hover,
.gtsg-fab__btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
}

.gtsg-fab__btn:focus {
    outline: none;
}

.gtsg-fab__btn:focus-visible {
    outline: 2px solid #ffd54a;
    outline-offset: 2px;
    border-radius: 14px;
}

/* --- Icon ------------------------------------------------------ */
.gtsg-fab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.gtsg-fab__icon > svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Không áp filter / opacity để tránh biến dạng màu icon. */
}

/* Icon Zalo: SVG gốc đã có sẵn background xanh Zalo (#2962ff) với
 * speech-bubble màu trắng (#eee) ở chính giữa. Để bám sát ảnh tham
 * chiếu (icon nằm gọn trong vùng trắng tròn), hiển thị nguyên bản
 * không bo viền, để phần bubble trắng của SVG tự nổi bật trên nền
 * xanh dương đậm của thanh FAB. Kích thước khớp với 2 icon còn lại. */
.gtsg-fab__btn--zalo .gtsg-fab__icon {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}
.gtsg-fab__btn--zalo .gtsg-fab__icon > svg {
    width: 100%;
    height: 100%;
}

/* Nút Menu trong FAB (button, không phải anchor) — chỉ hiện trên mobile.
 * Ở desktop bị ẩn bằng `.gtsg-fab__item--menu { display: none; }` ở trên.
 * Reset các thuộc tính mặc định của <button> để giống .gtsg-fab__btn. */
.gtsg-fab__btn--menu {
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    margin: 0;
    padding: 10px 6px 8px;
    color: #ffffff;
}

.gtsg-fab__icon--menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #ffffff; /* icon-menu.svg dùng currentColor */
}

.gtsg-fab__icon--menu > img {
    display: block;
    width: 24px;
    height: 24px;
    /* icon-menu.svg gốc 24x24; không co giãn để giữ tỉ lệ */
}

/* --- Nhãn ------------------------------------------------------ */
.gtsg-fab__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1.1;
    /* Đảm bảo chữ không bị tràn / xuống dòng ngoài ý muốn. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
}

/* --- Hotline rung nhẹ -----------------------------------------
 *  Hiệu ứng rung dùng transform — không thay đổi kích thước / vị trí.
 *  Tôn trọng prefers-reduced-motion. */
@keyframes gtsg-fab-rung {
    0%, 60%, 100% { transform: rotate(0deg); }
    62%           { transform: rotate(-8deg); }
    64%           { transform: rotate(7deg); }
    66%           { transform: rotate(-5deg); }
    68%           { transform: rotate(4deg); }
    70%           { transform: rotate(-2deg); }
    72%           { transform: rotate(0deg); }
}

.gtsg-fab__icon--rung {
    animation: gtsg-fab-rung 4s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .gtsg-fab__icon--rung {
        animation: none;
    }
    .gtsg-fab__btn,
    .gtsg-fab__list::before {
        transition: none;
    }
}

/* ============================================================
 *  Responsive
 * ============================================================ */

/* Tablet nhỏ / mobile lớn — vẫn giữ pill dọc, chỉ thu nhỏ. */
@media (max-width: 1024px) {
    .gtsg-fab__btn {
        width: 58px;
        padding: 9px 5px 7px;
    }
    .gtsg-fab__list {
        gap: 12px;
    }
    .gtsg-fab__label {
        font-size: 10.5px;
    }
}

/* Mobile — chuyển sang bottom-bar ngang sát đáy màn hình.
 *  - Ẩn pill dọc (reset gap, ::before, padding, v.v.).
 *  - Hiển thị nút Menu.
 *  - Tạo thanh ngang: Menu (trái) + grid 3 cột đều cho 3 nút (phải).
 *  - Dùng env(safe-area-inset-bottom) cho iPhone tai thỏ / Home Indicator.
 *  - Thêm padding-bottom cho body để nội dung cuối trang không bị che. */
@media (max-width: 768px) {
    .gtsg-fab {
        /* Neo xuống đáy, full-width */
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;

        /* Layout ngang */
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;

        /* Nền trắng + shadow tách khỏi nội dung */
        background: #ffb000;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        padding: 0;
    }

    .gtsg-fab__list {
        /* Layout ngang full-width */
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0px  15px 0px 0px;
    }

    /* Ẩn pseudo-element nền xanh dọc */
    .gtsg-fab__list::before {
        display: none;
    }

    /* Hiện nút Menu ở mobile (ẩn ở desktop).
     * Flex container: căn giữa nút bên trong, width cố định 64px.
     * `order: 99` đẩy nút Menu xuống cuối (bên phải theo flex-direction: row). */
    .gtsg-fab__item--menu {
        display: flex !important;
        flex: 0 0 64px;
        min-width: 64px;
        max-width: 64px;
        width: 64px;
        order: 99;
        align-items: center;
        justify-content: center;
    }

    /* Item liên hệ — cùng style cho mọi nút (Zalo, Showroom, Hotline) */
    .gtsg-fab__item {
        display: flex !important;
        flex: 1 1 0%;
        min-width: 0;
        min-height: 60px;
        align-items: center;
        justify-content: center;
    }

    /* Nút — reset width/padding cũ để vừa grid ngang */
    .gtsg-fab__btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 60px;
        padding: 6px 2px 5px;
        gap: 3px;
        color: #1a1a1a;          /* màu chữ tối trên nền trắng */
        border-radius: 0;
        background: transparent;
        text-decoration: none;
    }

    /* Nút Menu — style riêng cho button (reset các thuộc tính mặc định của <button>) */
    .gtsg-fab__btn--menu {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: transparent;
        box-shadow: none;
        outline: none;
        cursor: pointer;
        color: #1a1a1a;
    }

    .gtsg-fab__btn:focus-visible {
        outline: 2px solid #1f4e91;
        outline-offset: -2px;
    }

    /* Icon — 24px (giảm từ 30px để vừa bottom bar) */
    .gtsg-fab__icon {
        width: 30px;
        height: 30px;
    }
    .gtsg-fab__btn--zalo .gtsg-fab__icon {
        width: 30px;
        height: 30px;
    }
    .gtsg-fab__icon--menu {
        width: 30px;
        height: 30px;
        background: white;
        border-radius: 10px;
    }
    .gtsg-fab__icon--menu > img {
        width: 22px;
        height: 22px;
    }

    /* Nhãn — font 10-11px, tối, không xuống dòng */
    .gtsg-fab__label {
        font-size: 10.5px;
        font-weight: 500;
        color: #1a1a1a;
        letter-spacing: 0;
    }

    /* Hotline rung — đặt transform-origin trên icon */
    .gtsg-fab__icon--rung {
        animation-duration: 5s;
    }

    /* Safe area cho iPhone (tai thỏ / Home Indicator) */
    .gtsg-fab {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Đẩy nội dung cuối trang lên để không bị bottom bar che.
     * Chiều cao thanh ≈ 60px (nội dung) + safe area. */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Nút Gọi ngay (.gtsg-fab__btn--hotline) — nền đậm hơn để nổi bật CTA.
     * Dùng :has() để nền của <li> cũng đậm theo (phủ kín ô).
     * !important để thắng rule `.gtsg-fab__btn { background: transparent }` ở trên. */
    .gtsg-fab__item:has(.gtsg-fab__btn--hotline) {
        background-color: #1f4e91 !important;
    }
    .gtsg-fab__btn--hotline {
        background-color: #1f4e91 !important;
        color: #ffffff !important;
    }
    .gtsg-fab__btn--hotline .gtsg-fab__label {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
}

/* Mobile rất nhỏ (iPhone SE / Android compact) — tinh chỉnh spacing. */
@media (max-width: 380px) {
    .gtsg-fab__item--menu {
        flex: 0 0 56px;
        min-width: 56px;
    }
    .gtsg-fab__btn {
        min-height: 56px;
        padding: 5px 1px 4px;
    }
    .gtsg-fab__icon {
        width: 22px;
        height: 22px;
    }
    .gtsg-fab__icon--menu {
        width: 22px;
        height: 22px;
    }
    .gtsg-fab__icon--menu > img {
        width: 20px;
        height: 20px;
    }
    .gtsg-fab__label {
        font-size: 9.5px;
    }
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* Màn hình thấp (landscape mobile) — pill dọc không phù hợp,
 * giữ nguyên bottom-bar từ media query ở trên. Riêng màn hình
 * rất thấp (≤ 380px height) thu gọn padding. */
@media (max-height: 380px) {
    .gtsg-fab__btn {
        min-height: 50px;
    }
}

/* LƯU Ý: KHÔNG ẩn .mobile-menu-toggle ở header.
 * Header giữ nguyên nút menu gốc, FAB chỉ bổ sung thêm nút menu
 * (chỉ hiện ở mobile). Hai nút đều được JS bind đồng bộ qua
 * initMobileNav() đã được nâng cấp (querySelectorAll). */