/* CPM Contact 1.7 */

/* --- HIỆU ỨNG RUNG --- */
@keyframes cpm-extreme-shake {
    0% { transform: scale(1) rotate(0); }
    12% { transform: scale(1.2) rotate(-8deg); }
    24% { transform: scale(1.2) rotate(8deg); }
    36% { transform: scale(1.2) rotate(-8deg); }
    48% { transform: scale(1.2) rotate(8deg); }
    60% { transform: scale(1) rotate(0); }
    100% { transform: scale(1) rotate(0); }
}

/* CONTAINER CHÍNH */
.cpm-main-container {
    pointer-events: none;
    position: fixed !important;
    bottom: var(--cpm-bottom, 10px) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

.cpm-pos-left { left: var(--cpm-side, 10px) !important; align-items: flex-start !important; }
.cpm-pos-right { right: var(--cpm-side, 10px) !important; align-items: flex-end !important; }

/* KHỐI TỪNG NÚT */
.cpm-block {
    margin-bottom: 7px !important;
    pointer-events: auto;
    display: block !important;
    width: fit-content !important;
    position: relative !important;
    z-index: 2147483647 !important;
}

.cpm-action-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
}
.cpm-action-link:focus-visible { outline: 3px solid #ffb400; outline-offset: 2px; }

/* ICON BOX - TỈ LỆ 1.15, KÍCH THƯỚC CHUẨN 44PX */
.cpm-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10;
    position: relative;
    transform: scale(1.15) !important;
}

.cpm-mode-1 .cpm-icon-box {
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}

.cpm-icon-box img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    animation: cpm-extreme-shake 2.2s infinite;
}

/* TEXT BOX */
.cpm-text-box {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    z-index: 5;
    padding: 8px 15px 8px 25px !important;
}

/* VỊ TRÍ TRÁI/PHẢI */
.cpm-pos-left .cpm-text-box {
    margin-left: -20px !important;
    border-radius: 0 40px 40px 0 !important;
}

.cpm-pos-right .cpm-action-link { flex-direction: row-reverse !important; }
.cpm-pos-right .cpm-text-box {
    padding: 8px 25px 8px 15px !important;
    margin-right: -20px !important;
    margin-left: 0 !important;
    border-radius: 40px 0 0 40px !important;
}

/* HỆ THỐNG MÀU NỀN */
.cpm-main-container { --cpm-orange: #f39c12; --cpm-red: #e74c3c; --cpm-red-light: #ff5e4d; --cpm-blue: #0180c7; --cpm-blue-light: #2e62f0; }
.cpm-bg-orange { background: var(--cpm-orange) !important; }
.cpm-bg-red { background: var(--cpm-red) !important; }
.cpm-bg-red-light { background: var(--cpm-red-light) !important; }
.cpm-bg-blue { background: var(--cpm-blue) !important; }
.cpm-bg-blue-light { background: var(--cpm-blue-light) !important; }

/* TYPE 3 & 4 */
.cpm-mode-3 .cpm-action-link, .cpm-mode-4 .cpm-action-link { border-radius: 10px !important; }
.cpm-mode-3 .cpm-text-box, .cpm-mode-4 .cpm-text-box { margin: 0 !important; padding: 8px 12px !important; background: transparent !important; }
.cpm-mode-4 .cpm-action-link { background: var(--cpm-blue) !important; }

/* Ẩn nút khi popup Flatsome (Magnific Popup) đang mở để không che form */
html.mfp-active .cpm-main-container,
body:has(.mfp-ready) .cpm-main-container { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .cpm-icon-box img { animation: none; }
}

/* ==========================================================================
   MOBILE: THANH NGANG CỐ ĐỊNH ĐÁY MÀN HÌNH (mặc định từ 1.7)
   Tắt trong Cài đặt → CPM Contact → "Kiểu trên mobile: Nút nổi"
   ========================================================================== */
@media (max-width: 849px) {
    .cpm-main-container.cpm-mobile-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 6px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        pointer-events: auto;
    }
    .cpm-mobile-bar .cpm-block { flex: 1 1 0 !important; width: auto !important; min-width: 0; margin: 0 !important; }
    .cpm-mobile-bar .cpm-action-link {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 6px;
        height: 46px;
        padding: 0 6px;
        border-radius: 10px !important;
        overflow: hidden;
    }
    .cpm-mobile-bar .cpm-c-orange { background: var(--cpm-orange) !important; }
    .cpm-mobile-bar .cpm-c-red { background: var(--cpm-red) !important; }
    .cpm-mobile-bar .cpm-c-red-light { background: var(--cpm-red-light) !important; }
    .cpm-mobile-bar .cpm-c-blue { background: var(--cpm-blue) !important; }
    .cpm-mobile-bar .cpm-c-blue-light { background: var(--cpm-blue-light) !important; }
    .cpm-mobile-bar .cpm-icon-box {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        transform: none !important;
        background: #fff !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }
    .cpm-mobile-bar .cpm-icon-box img { width: 20px !important; height: 20px !important; }
    .cpm-mobile-bar .cpm-text-box {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    body.cpm-has-mobile-bar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    body.cpm-has-mobile-bar .back-to-top { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 389px) {
    .cpm-mobile-bar .cpm-icon-box { width: 24px !important; height: 24px !important; min-width: 24px !important; }
    .cpm-mobile-bar .cpm-icon-box img { width: 16px !important; height: 16px !important; }
    .cpm-mobile-bar .cpm-action-link { gap: 4px; padding: 0 4px; }
    .cpm-mobile-bar .cpm-text-box { font-size: 11px !important; }
}