/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* 1. Tạo khoảng trống hợp lý cho thanh tiêu đề để chứa ảnh đại diện */
.chatbot-top-bar {
    position: relative !important;
    padding-left: 65px !important; /* Đẩy chữ qua phải nhường không gian cho avatar */
    min-height: 65px !important;   /* Đảm bảo thanh tiêu đề đủ cao và cân đối */
    display: flex !important;
    align-items: center !important;
}

/* 2. Ép chèn ảnh đại diện OanhOanh vào góc trái thanh tiêu đề bằng thuộc tính CSS Pseudo */
.chatbot-top-bar::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important; /* Vị trí căn lề trái của ảnh */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Cấu hình kích thước hiển thị vòng tròn Avatar */
    width: 42px !important;   
    height: 42px !important;  
    
    /* Gọi đường dẫn ảnh của bạn */
    background-image: url('https://tienphongdienmay.com/wp-content/uploads/2026/09/OanhOanh.png') !important;
    background-size: cover !important;       /* Ép ảnh lấp đầy vòng tròn không bị khoảng trống */
    background-position: center top !important; /* Ưu tiên lấy từ đỉnh đầu xuống để thấy rõ khuôn mặt */
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;     /* Nền trắng nhẹ phía sau ảnh đã xóa nền */
    
    /* Bo tròn ảnh hoàn hảo và tạo viền trắng nổi bật trên nền đen */
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3) !important;
    z-index: 9999 !important;
}

/* 3. Khắc phục triệt để lỗi chữ "Điện Máy Tiên Phong" bị đẩy xuống dòng */
.chatbot-title-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    max-width: 170px !important;
}

.chatbot-title-group {
    margin: 0 !important;
    padding: 0 !important;
}

.chatbot-title {
    font-size: 15px !important;      /* Kích thước chữ vừa vặn */
    font-weight: bold !important;
    white-space: nowrap !important;  /* Ép toàn bộ tên thương hiệu nằm trên một dòng */
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Ẩn hoàn toàn khung avatar cũ bị lỗi hiển thị */
.chatbot-top-bar img, 
.chatbot-top-bar [class*="avatar"] {
    display: none !important;
}


/* Nâng toàn bộ khung chat và nút bong bóng MX Chat lên cao thêm 100px */
#floating-chatbot-default,
.floating-chatbot,
.mxchat-chatbot-wrapper,
[id*="floating-chatbot"] {
    bottom: 170px !important; /* Mặc định khoảng 20px, tăng lên 120px để cao hơn 100px */
}

/* Điều chỉnh lại vị trí nút bong bóng chat hình tròn khi chưa bấm mở */
.mxchat-welcome-container,
.mxchat-launcher-container,
[class*="mxchat-launcher"] {
    bottom: 170px !important;
}

/* Dịch chuyển toàn bộ khung cửa sổ chat và nút bong bóng sang bên trái thêm 40px */
#floating-chatbot-default,
.floating-chatbot,
.mxchat-chatbot-wrapper,
[id*="floating-chatbot"],
.mxchat-welcome-container,
.mxchat-launcher-container,
[class*="mxchat-launcher"] {
    right: 44px !important; /* Tăng từ 20px lên 60px để đẩy sang trái 40px */
}


/* Đổi chữ "Online" sang màu xanh lá cây trực tuyến */
.chat-mode-indicator#chat-mode-indicator-default,
.chat-mode-indicator,
[id*="chat-mode-indicator"] {
    color: #4CAF50 !important; /* Mã màu xanh lá cây chuyên dùng cho nút Online */
    font-weight: bold !important; /* Làm chữ đậm lên cho dễ nhìn */
}

/* 1. Đổi chữ "Online" sang màu xanh lá và căn chỉnh không gian chứa dấu chấm */
.chat-mode-indicator#chat-mode-indicator-default {
    color: #4CAF50 !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important; /* Khoảng cách giữa chấm tròn và chữ Online */
}

/* 2. Tạo chấm tròn màu xanh lá cây */
.chat-mode-indicator#chat-mode-indicator-default::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #4CAF50 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #4CAF50 !important;
    
    /* Gọi hiệu ứng nhấp nháy */
    animation: mxchatBlink 1.5s infinite ease-in-out !important;
}

/* 3. Định nghĩa hiệu ứng nhấp nháy sinh động cho dấu chấm */
@keyframes mxchatBlink {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 4px #4CAF50;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 10px #4CAF50, 0 0 15px #4CAF50;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 4px #4CAF50;
    }
}




// 1. Đăng ký 2 Sidebar riêng biệt cho Blog và Tuyển Dụng

//-------------------------------------


function swwordpress_oft_custom_get_price_html( $price, $product ) {
    global $product;
    if ( !is_admin() && !$product->is_in_stock()) {
       $price = '<span class="amount">' . __( 'Liên hệ', 'woocommerce' ) . '</span>';
    }
    return $price;
}
add_filter( 'woocommerce_get_price_html', 'wordpress_oft_custom_get_price_html', 99, 2 );

//-----------------------------

/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */
/**  Hết FYmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm    */