/*
Theme Name: Porto
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive Wordpress Multi Purpose + eCommerce Theme.
Version: 7.6.2
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: woocommerce, business, corporate, e-commerce, blog, news, education, food-and-drink, portfolio, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, block-styles, custom-background, custom-colors, custom-header, custom-logo, footer-widgets, template-editing, grid-layout, one-column, wide-blocks
Text Domain: porto
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

.bypostauthor { display: block; }
/* Định dạng chung và vị trí cố định (Fixed Position) */
.zalo-chat-button {
    /* Vị trí cố định (luôn nổi) */
    position: fixed;
    bottom: 120px; /* Cách đáy màn hình 20px */
    right: 15px;  /* Cách lề phải 20px */
    z-index: 9999; /* Đảm bảo nút nằm trên tất cả nội dung khác */
    
    /* Hình dạng và màu sắc */
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang (trục X) */
    align-items: center;     /* Căn giữa theo chiều dọc (trục Y) */
    
    /* Màu Zalo (Xanh dương/Xanh ngọc) */
    background-color:#0180C7 ; 
    color: white;
    border-radius: 50%; /* Làm hình tròn */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Đổ bóng nhẹ tạo hiệu ứng 3D nổi */
    text-decoration: none; /* Bỏ gạch chân link */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    /* Đảm bảo transition (chuyển động) vẫn mượt mà */
    transition: all 0.5s ease-in-out; 

    /* 💥 ÁP DỤNG HIỆU ỨNG NHẤP NHÁY 💥 */
    /* Cấu trúc: [tên hoạt ảnh] [thời gian] [lặp lại vô hạn] [kiểu chuyển động] */
    animation: blink-zalo 2.5s infinite ease-in-out;
}

/* Hiệu ứng khi di chuột (Hover) */
.zalo-chat-button:hover {
    transform: scale(1.1); /* Phóng to nhẹ 10% */
    background-color: #009e5c; /* Có thể đổi sang màu Xanh thương hiệu của bạn khi hover */
}

/* Ẩn chữ 'Zalo' và chuẩn bị để chứa icon */
.zalo-icon-text {
    /* Thường thì ta sẽ ẩn chữ này và dùng icon thực tế */
    font-size: 0; 
}
/* Thay thế bằng Icon (nếu bạn dùng Font Awesome hoặc ảnh) */
.zalo-chat-button::after {
    /* Đây là nơi bạn đặt Icon Zalo (ví dụ: dùng Font Awesome, hoặc background image) */
    content: ''; /* Bỏ trống nếu dùng ảnh nền */
    /* Hoặc: content: '💬'; nếu dùng emoji/unicode */
}


/* --- Tùy chỉnh cho Giao diện Điện thoại (Mobile) --- */
@media (max-width: 768px) {
    .zalo-chat-button {
        width: 55px;
        height: 55px;
        line-height: 45px;
        bottom: 150px; 
        right: 15px;
    }
}
/* Định nghĩa hoạt ảnh "blink-zalo" */
@keyframes blink-zalo {
    0% {
        transform: scale(1);
        opacity: 0.9;
        /* Ánh sáng glow mờ xung quanh nút */
        box-shadow: 0 0 0 0 rgba(1, 128, 199, 0.7); 
    }
    50% {
        transform: scale(1.1); /* Phóng to 10% */
        opacity: 1;
        /* Ánh sáng glow mạnh hơn khi nút to lên */
        box-shadow: 0 0 15px 5px rgba(1, 128, 199, 0.7); 
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
        box-shadow: 0 0 0 0 rgba(1, 128, 199, 0.7);
    }
}