/*
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.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* CSS LÀM NỔI BẬT CÁC Ô DỊCH VỤ TRANG CHỦ */
/* Áp dụng cho cả 3 ô: Internet, Sim, Doanh nghiệp */

/* 1. Định dạng chung cho các ô */
.ux-box .box-text, /* Chọn lớp chứa nội dung của ô */
.text-boxes .box-text {
    background: white !important; /* Nền trắng */
    border-radius: 12px !important; /* Bo góc */
    box-shadow: 0 5px 20px rgba(0, 115, 230, 0.15) !important; /* Đổ bóng màu xanh nhẹ */
    padding: 25px !important;
    border: 1px solid #e0e0e0 !important; /* Viền nhẹ */
    transition: all 0.3s ease !important; /* Hiệu ứng chuyển động mượt */
    height: auto !important;
}

/* 2. Hiệu ứng khi di chuột (Hover) - Rất quan trọng để thu hút */
.ux-box:hover .box-text,
.text-boxes .box-text:hover {
    transform: translateY(-5px) !important; /* Nâng ô lên nhẹ */
    box-shadow: 0 15px 30px rgba(0, 115, 230, 0.2) !important; /* Đổ bóng đậm hơn */
    border-color: #0073e6 !important; /* Viền đổi màu xanh VNPT */
}

/* 3. Định dạng tiêu đề các ô */
.ux-box .box-text h4, /* Nếu tiêu đề là h4 */
.ux-box .box-text h3, /* Nếu tiêu đề là h3 */
.text-boxes .box-text h4,
.text-boxes .box-text h3 {
    color: #0073e6 !important; /* Màu xanh VNPT */
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 15px !important;
}

/* 4. Định dạng đoạn mô tả */
.ux-box .box-text p,
.text-boxes .box-text p {
    color: #576C8A !important; /* Màu chữ xám đậm, dễ đọc */
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* 5. Định dạng nút "Xem chi tiết" - BIẾN NÓ THÀNH ĐIỂM NHẤN */
.ux-box .box-text a.button, /* Chọn nút trong ô */
.text-boxes .box-text a.button {
    background-color: #f75e03 !important; /* Nền màu CAM */
    color: white !important; /* Chữ trắng */
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    margin-top: 15px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* 6. Hiệu ứng hover cho nút */
.ux-box .box-text a.button:hover,
.text-boxes .box-text a.button:hover {
    background-color: #e55402 !important; /* Màu cam đậm hơn khi hover */
    transform: scale(1.05) !important; /* Phóng to nhẹ */
}