/* ========== SGDIEN Contact Footer (Frontend – FREE lite) ========== */
/* Version: 2.8.6-lite - Fix by Gemini Dễ Thương */
/* Chỉnh sửa: Phủ kín Safe Area iPhone, chống hở chân footer */

:root {
    --sgcf-bar-h: 65px;
    --sgcf-safe: env(safe-area-inset-bottom, 0px);
    --sgcf-bg-url: url('https://vestnam.vn/wp-content/uploads/2026/05/footer_white.png');
}

/* 1. CONTAINER CHÍNH - CẬP NHẬT PHỦ NỀN XUỐNG ĐÁY */
#sangiaodienptvn-contact-footer-outer {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999 !important;
    bottom: 0;
    /* Dùng padding để đẩy nội dung lên trên thanh điều hướng iPhone */
    padding-bottom: var(--sgcf-safe);
    display: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    
    /* QUAN TRỌNG: Đưa hình nền ra đây để nó phủ kín cả phần padding hở */
    background-image: var(--sgcf-bg-url);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 2. NỘI DUNG FOOTER BÊN TRONG */
#sangiaodienptvn-contact-footer {
    display: flex;
    max-width: 1200px;
    margin: auto;
    position: relative;
    height: var(--sgcf-bar-h);
    /* Để background transparent vì đã có lớp outer gánh hình nền */
    background: transparent !important; 
}

/* Xóa bỏ pseudo-element */
#sangiaodienptvn-contact-footer:before,
#sangiaodienptvn-contact-footer:after {
    content: none !important;
}

/* 3. CÁC NÚT CHỨC NĂNG (20% mỗi nút) */
#sangiaodienptvn-contact-footer > a {
    position: relative;
    display: block;
    width: 20%; 
    text-align: center;
    padding: 12px 0 0 0;
    color: #ffffff !important;
    text-decoration: none;
    touch-action: manipulation;
    z-index: 2;
}

#sangiaodienptvn-contact-footer span { display: block; }

.sangiaodienptvn-contact-footer-btn-label {
    padding: 0 2px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

#sangiaodienptvn-contact-footer > a img {
    height: 24px; 
    width: 24px;
}

/* 4. NÚT CHÍNH GIỮA (LÕM) */
#sangiaodienptvn-contact-footer-btn-center {
    position: relative;
    background: transparent !important;
}

#sangiaodienptvn-contact-footer-btn-center .sangiaodienptvn-contact-footer-btn-label {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 100%;
}

#sangiaodienptvn-contact-footer-btn-center .sangiaodienptvn-contact-footer-btn-label > span {
    padding: 0 8px;
    background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);
    border-radius: 30px;
    color: #fff;
    display: inline-block;
}

.sangiaodienptvn-contact-footer-btn-center-icon {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    background-image: linear-gradient(92.83deg, #f90000 0, #950099 100%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    top: -30px; 
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 4px solid #fff;
    will-change: transform;
}

.sangiaodienptvn-contact-footer-btn-center-icon img {
    max-width: 20px;
    height: auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 5. HIỆU ỨNG RIPPLE */
.phone-vr-circle-fill {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 0 #0E68C8;
    animation: zoom 1.3s infinite;
}

@keyframes zoom {
    70% { box-shadow: 0 0 0 15px transparent }
    100% { box-shadow: 0 0 0 0 transparent }
}

/* 6. RESPONSIVE */
@media only screen and (max-width: 850px) {
    #sangiaodienptvn-contact-footer-outer { display: block; }
}

@media (min-width: 851px) {
    #sangiaodienptvn-contact-footer-outer { display: none !important; }
}

/* 7. SAFE-AREA FIX TRIỆT ĐỂ */
@supports (padding: max(0px)) {
    #sangiaodienptvn-contact-footer-outer {
        /* Đảm bảo phần đệm luôn có màu nền lấp đầy khoảng hở trên iOS */
        padding-bottom: max(var(--sgcf-safe), 10px);
    }
}

/* Desktop Hotline */
.sgdh {
    position: fixed;
    bottom: 16px;
    z-index: 10000;
    display: flex;
    align-items: center;
    background: #ff3b30;
    color: #fff;
    border-radius: 999px;
    height: 40px;
}
.sgdh.pos-right { right: 16px; }
.sgdh.pos-left { left: 16px; }
.sgdh .sgdh-link { display:flex; align-items:center; gap:10px; padding: 0 12px; text-decoration:none; color:inherit; }
.sgdh .sgdh-text { font-weight:700; white-space:nowrap; font-size:14px; }