/* ═══════════════════════════════════════════════════════════
   FLOATING ACTION BUTTONS — Luxury Cruise · v3 (Bigger + Auto-pulse)
   ⭐ Auto animation chạy NGAY khi load page (không cần hover)
   ⭐ Icon to hơn 30% (1.6rem) - dễ nhìn
   ═══════════════════════════════════════════════════════════ */

:root {
    --fab-gold:        #d4a373;
    --fab-gold-dark:   #b8854a;
    --fab-sea:         #1e6091;
    --fab-sea-deep:    #0a3d62;
    --fab-white:       #ffffff;
    --fab-shadow:      rgba(10, 61, 98, 0.25);
}

/* ─── CONTAINER ─── */
.fab {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    animation: fab-float 4s ease-in-out infinite;
}

@keyframes fab-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ─── STACK ─── */
.fab-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 16px;             /* ⬆ tăng gap chút */
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON — TO HƠN: 60px (desktop), 56px (mobile)
═══════════════════════════════════════════════════════════ */
.fab-btn {
    position: relative;
    width: 60px;            /* ⬆ +8px so với version trước (52→60) */
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    box-shadow:
        0 8px 32px var(--fab-shadow),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* ⭐ Bounce CHẠY NGAY — không cần hover */
    animation: fab-bounce 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Glass shine highlight */
.fab-btn::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    height: 38%;
    border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

@keyframes fab-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-3px) scale(1.05); }
}

/* Stagger các nút lệch pha */
.fab-stack > .fab-btn:nth-child(1) { animation-delay: 0s; }
.fab-stack > .fab-btn:nth-child(2) { animation-delay: 0.3s; }
.fab-stack > .fab-btn:nth-child(3) { animation-delay: 0.6s; }
.fab-stack > .fab-btn:nth-child(4) { animation-delay: 0.9s; }
.fab-stack > .fab-btn:nth-child(5) { animation-delay: 1.2s; }
.fab-stack > .fab-btn:nth-child(6) { animation-delay: 1.5s; }
.fab-stack > .fab-btn:nth-child(7) { animation-delay: 1.8s; }
.fab-stack > .fab-btn:nth-child(8) { animation-delay: 2.1s; }

/* HOVER — chỉ tăng scale + glow, không stop animation chính */
.fab-btn:hover {
    transform: translateY(-2px) scale(1.12);
    box-shadow:
        0 16px 48px var(--fab-shadow),
        0 8px 20px rgba(0, 0, 0, 0.2),
        0 0 35px var(--btn-glow, var(--fab-gold)),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   ⭐ RIPPLE RADAR — 3 vòng sóng CHẠY NGAY KHI LOAD
   Dùng pseudo + .fab-wave element
═══════════════════════════════════════════════════════════ */

/* Wave 1 — bằng pseudo ::after */
.fab-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--btn-color, var(--fab-gold));
    transform: translate(-50%, -50%);
    opacity: 0.55;
    z-index: -1;
    animation: fab-ripple 2.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    pointer-events: none;
}

/* Wave 2 + Wave 3 — render từ blade <span class="fab-wave"> */
.fab-wave,
.fab-wave-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--btn-color, var(--fab-gold));
    transform: translate(-50%, -50%);
    opacity: 0.55;
    z-index: -1;
    animation: fab-ripple 2.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation-delay: 0.9s;
    pointer-events: none;
}

.fab-wave-2 {
    animation-delay: 1.8s;
}

@keyframes fab-ripple {
    0% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
}

/* ═══════════════════════════════════════════════════════════
   ICON — TO HƠN: 1.6rem (default 1.25rem) + wiggle tự chạy
═══════════════════════════════════════════════════════════ */
.fab-icon {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;     /* ⭐ TĂNG 28% từ 1.25rem → 1.6rem */
    color: #fff;
    /* ⭐ Wiggle chạy ngay */
    animation: fab-wiggle 2.5s ease-in-out infinite;
}

.fab-icon i {
    color: #fff;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.fab-icon svg {
    color: #fff;
    width: 28px !important;   /* ⭐ SVG to hơn (22 → 28) */
    height: 28px !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

@keyframes fab-wiggle {
    0%, 70%, 100% { transform: rotate(0deg); }
    10%           { transform: rotate(-15deg); }
    20%           { transform: rotate(12deg); }
    30%           { transform: rotate(-10deg); }
    40%           { transform: rotate(8deg); }
    50%           { transform: rotate(-4deg); }
    60%           { transform: rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════
   LABEL — Trượt ngang khi hover
═══════════════════════════════════════════════════════════ */
.fab-label {
    position: absolute;
    right: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(20px) scale(0.85);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--fab-sea-deep);
    padding: 10px 20px;
    border-radius: 100px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 10px 30px rgba(10, 61, 98, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 10;
}

.fab-label::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right: none;
    border-left-color: rgba(255, 255, 255, 0.96);
}

.fab-btn:hover .fab-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   COLORS
═══════════════════════════════════════════════════════════ */
.fab-phone {
    background: linear-gradient(135deg, #e8b87d 0%, #c9985b 50%, #a87a45 100%);
    --btn-color: #d4a373;
    --btn-glow: rgba(212, 163, 115, 0.6);
}

.fab-zalo {
    background: linear-gradient(135deg, #4a90c7 0%, #1e6091 50%, #0a3d62 100%);
    --btn-color: #1e6091;
    --btn-glow: rgba(30, 96, 145, 0.5);
}

.fab-whatsapp {
    background: linear-gradient(135deg, #6fdb8f 0%, #25d366 50%, #0fb84b 100%);
    --btn-color: #25d366;
    --btn-glow: rgba(37, 211, 102, 0.5);
}

.fab-messenger {
    background: linear-gradient(135deg, #5dafff 0%, #0084ff 50%, #0066cc 100%);
    --btn-color: #0084ff;
    --btn-glow: rgba(0, 132, 255, 0.5);
}

.fab-facebook {
    background: linear-gradient(135deg, #4a90e2 0%, #1877f2 50%, #0d5fc7 100%);
    --btn-color: #1877f2;
    --btn-glow: rgba(24, 119, 242, 0.5);
}

.fab-sms {
    background: linear-gradient(135deg, #80deea 0%, #00acc1 50%, #006064 100%);
    --btn-color: #00acc1;
    --btn-glow: rgba(0, 172, 193, 0.5);
}

.fab-map {
    background: linear-gradient(135deg, #4fc3f7 0%, #1a73e8 50%, #0d47a1 100%);
    --btn-color: #1a73e8;
    --btn-glow: rgba(26, 115, 232, 0.5);
}

.fab-top {
    background: linear-gradient(135deg, #ffffff 0%, #faf6f0 50%, #f3ebdc 100%);
    color: var(--fab-gold-dark);
    --btn-color: #d4a373;
    --btn-glow: rgba(212, 163, 115, 0.45);
    border: 2px solid var(--fab-gold);
}

.fab-top .fab-icon { color: var(--fab-gold-dark); }
.fab-top .fab-icon i {
    color: var(--fab-gold-dark);
    filter: drop-shadow(0 1px 2px rgba(184, 133, 74, 0.3));
}

/* Back-to-top — hidden by default */
.fab-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.6);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab.fab-scrolled .fab-top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE TOGGLE
═══════════════════════════════════════════════════════════ */
.fab-toggle {
    position: relative;
    width: 64px;            /* ⬆ to hơn */
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;       /* ⬆ */
    color: var(--fab-sea-deep);
    background: linear-gradient(135deg, #f4d59a 0%, #d4a373 50%, #b8854a 100%);
    box-shadow:
        0 10px 32px rgba(212, 163, 115, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    animation: fab-bounce 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.fab-toggle::before,
.fab-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fab-gold);
    transform: translate(-50%, -50%);
    opacity: 0.55;
    z-index: -1;
    animation: fab-ripple 2.4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    pointer-events: none;
}

.fab-toggle::after { animation-delay: 1.2s; }

.fab-toggle:hover { transform: scale(1.1); }

.fab-toggle-icon,
.fab-toggle-close {
    position: absolute;
    transition: opacity 0.25s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fab-toggle-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.fab-open .fab-toggle-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.fab-open .fab-toggle-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (min-width: 993px) {
    .fab {
        right: 28px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        animation: fab-float-vertical 4s ease-in-out infinite;
    }

    .fab-stack {
        flex-direction: column;
        margin-bottom: 0;
        gap: 18px;
    }

    .fab-btn {
        width: 48px;      /* ⬆ desktop to nhất */
        height: 48px;
    }

    .fab-icon { font-size: 1.7rem; }
    .fab-icon svg { width: 30px !important; height: 30px !important; }

    .fab-toggle { display: none; }
}

@keyframes fab-float-vertical {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% - 6px)); }
}

@media (max-width: 992px) {
    .fab {
        right: 18px;
        bottom: 22px;
        top: auto;
    }

    .fab-stack {
        gap: 13px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition:
            max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .fab-open .fab-stack {
        max-height: 700px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

    .fab-label { display: none; }

    .fab-btn {
        width: 56px;     /* ⬆ mobile cũng to hơn */
        height: 56px;
    }

    .fab-icon { font-size: 1.5rem; }
    .fab-icon svg { width: 26px !important; height: 26px !important; }
}

/* ═══════════════════════════════════════════════════════════
   HIDE ON SCROLL DOWN
═══════════════════════════════════════════════════════════ */
.fab-hidden {
    transform: translateY(120px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 993px) {
    .fab-hidden {
        transform: translateY(-50%) translateX(120px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .fab, .fab-btn, .fab-icon, .fab-toggle,
    .fab-btn::after, .fab-wave, .fab-wave-2,
    .fab-toggle::before, .fab-toggle::after {
        animation: none !important;
    }
    .fab-btn::after, .fab-wave, .fab-wave-2 { opacity: 0; }
}