/*
Theme Name: cloudzone
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: cloudzone_Mobiphone
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Cloudzone Mobifone là một theme con được tạo ra để tùy chỉnh và mở rộng các chức năng cũng như giao diện của theme Cloudzone Mobifone gốc. Nó cho phép bạn thực hiện các thay đổi về code (CSS, PHP, JavaScript) mà không làm ảnh hưởng trực tiếp đến các tệp tin của theme cha. Điều này đảm bảo rằng khi theme Cloudzone Mobifone nhận được các bản cập nhật, những tùy chỉnh của bạn vẫn được giữ nguyên, tránh được tình trạng mất tùy biến.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.1.1747305518
Updated: 2025-02-15 10:38:38

*/
.textprice .jkit-heading{justify-content: center !important}
.benefit-box .title{text-transform:capitalize}
.jkit-post-title {
  
    line-height: 1.3em; /* Khoảng cách dòng, điều chỉnh nếu cần */
    
    /* Các thuộc tính để giới hạn dòng và thêm dấu ba chấm */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Thêm dấu ba chấm */
  }

/* ------------------------------------ */
/* Phần chính cho tính năng ẩn/hiện */
/* ------------------------------------ */
/* Styling chung cho icon-box để dễ nhìn */




/* ------------------------------------ */
/* Phần chính cho tính năng ẩn/hiện */
/* ------------------------------------ */
/* Đảm bảo chiều rộng cho icon-box-body nếu nó chưa có */
.benefit-box .jeg-elementor-kit .icon-box-body {
    width: 100%; /* Hoặc một giá trị cố định nếu bạn muốn */
    box-sizing: border-box; /* Quan trọng để padding không làm tăng chiều rộng */
    padding: 20px; /* Ví dụ padding, điều chỉnh theo thiết kế của bạn */
}

/* Phần chính để giới hạn chiều cao ban đầu cho mô tả và thêm dấu ba chấm */
/* CHỈ ÁP DỤNG CHO BENEFIT-BOX */
.benefit-box .jeg-elementor-kit .icon-box-description {
    /* Các thuộc tính để giới hạn dòng và thêm dấu ba chấm */
    display: -webkit-box; /* Kích hoạt chế độ box của Webkit */
    -webkit-line-clamp: 3; /* Giới hạn tối đa 3 dòng */
    -webkit-box-orient: vertical; /* Đảm bảo định hướng theo chiều dọc */
    overflow: hidden; /* Ẩn nội dung tràn */
    text-overflow: ellipsis; /* Thêm dấu ba chấm */

    /* Các thuộc tính khác đã có */
    line-height: 1.6; /* Khoảng cách dòng để văn bản dễ đọc. Quan trọng để line-clamp tính toán chính xác */
    max-height: 90px; /* Chiều cao ban đầu bạn muốn hiển thị.
                         Lưu ý: -webkit-line-clamp thường được ưu tiên hơn max-height
                         khi cả hai cùng được đặt. Nếu bạn muốn kiểm soát chặt chẽ bằng pixel,
                         hãy kiểm tra kỹ kết quả hiển thị. Với line-height 1.6 và font-size ~16px,
                         3 dòng sẽ xấp xỉ 80px (16px * 1.6 * 3 = 76.8px).
                      */
    transition: max-height 0.4s ease-out; /* Tạo hiệu ứng mở rộng/thu gọn mượt mà */
    /* Quan trọng: Đảm bảo không có max-height inline trong HTML */
}

/* Khi nội dung được mở rộng, loại bỏ các thuộc tính giới hạn dòng */
.benefit-box .jeg-elementor-kit .icon-box-description.expanded-content {
    -webkit-line-clamp: unset !important; /* Bỏ giới hạn dòng */
    display: block !important; /* Đổi về display block bình thường */
    overflow: visible !important; /* Hiển thị toàn bộ nội dung */
    text-overflow: unset !important; /* Loại bỏ dấu ba chấm */
    max-height: fit-content !important; /* Hoặc một giá trị đủ lớn để chứa toàn bộ nội dung */
}
/* Điều chỉnh style cho nút Read More */
/* CHỈ ÁP DỤNG CHO BENEFIT-BOX */
.benefit-box .jeg-elementor-kit .icon-box-button {
    
    display: none; /* Mặc định ẩn, JavaScript sẽ hiển thị khi cần */
}

/* Styling cho link và SVG bên trong nút */
.benefit-box .jeg-elementor-kit .icon-box-link {
    display: inline-flex; /* Để căn chỉnh văn bản và SVG */
    align-items: center;
    color: #007bff; /* Màu xanh mặc định cho liên kết */
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    transition: color 0.2s ease;
}

.benefit-box .jeg-elementor-kit .icon-box-link:hover {
    color: #0056b3; /* Màu xanh đậm hơn khi hover */
}

.benefit-box .jeg-elementor-kit .icon-box-link svg {
    width: 14px; /* Kích thước icon */
    height: 14px;
    fill: currentColor; /* Icon sẽ dùng màu của text */
    margin-left: 8px; /* Khoảng cách giữa text và icon */
    transition: transform 0.2s ease;
}

/* Rotate icon khi ở trạng thái "Show Less" */
.benefit-box .jeg-elementor-kit .icon-box-link.show-less svg {
    transform: rotate(180deg);
}