/* 
Theme Name: Lê Quốc Kiên by RU Media
Theme URI: https://rumedia.vn
Description: Lê Quốc Kiên theme by RU Media
Author: RU Media Team
Author URI: https://rumedia.vn
Template: hello-elementor
Version: 1.0.14
Text Domain: rumedia.vn
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.lqk-text-color {
    background: linear-gradient(90deg, #274E75 0%, #E32026 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.lqk-gradient-bg {
    background: linear-gradient(180deg, #E32026 0%, #274E75 100%);
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

/* Chỉ nhắm vào icon nằm trong widget có class lqk-icon-gradient */
.lqk-icon-gradient .elementor-icon svg path,
.lqk-icon-gradient .elementor-icon svg {
    fill: url(#lqk-brand-gradient) !important;
}

/* Dự phòng nếu icon là dạng Font (FontAwesome) */
.lqk-icon-gradient .elementor-icon i:before {
    background: linear-gradient(180deg, #E32026 0%, #274E75 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Class tạo đường gạch chân gradient */
.lqk-line-under .elementor-heading-title::after {
    content: "";
    display: block;
    width: 60px;
    /* Độ dài của thanh line */
    height: 4px;
    /* Độ dày của thanh line */
    background: linear-gradient(90deg, #274E75 0%, #E32026 100%);
    /* Màu từ Xanh sang Đỏ */
    margin: 15px auto 0;
    /* Khoảng cách 15px dưới chữ và căn giữa */
    border-radius: 50px;
    /* Bo tròn hai đầu thanh */
}

/* Tùy chỉnh căn trái nếu tiêu đề căn trái */
.lqk-line-under.elementor-align-left .elementor-heading-title::after {
    margin-left: 0;
    margin-right: auto;
}

/* Tùy chỉnh căn phải nếu tiêu đề căn phải */
.lqk-line-under.elementor-align-right .elementor-heading-title::after {
    margin-left: auto;
    margin-right: 0;
}

/* 1. Reset bộ đếm ở Container cha */
.lqk-step-container {
    counter-reset: lqk-num;
    display: flex;
    flex-direction: column;
}

/* 2. Cấu trúc chung cho số thứ tự */
.lqk-step-heading .elementor-heading-title::before {
    counter-increment: lqk-num;
    content: counter(lqk-num);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    font-size: 22px;
    font-weight: bold;
    flex-shrink: 0;
}

/* --- ĐỔI MÀU XEN KẼ DỰA TRÊN CLASS (CHÍNH XÁC 100%) --- */

/* Chỉ đếm các phần tử có class .lqk-step-heading, bỏ qua các thẻ rác của Elementor */
.lqk-step-heading:nth-child(odd of .lqk-step-heading) .elementor-heading-title::before {
    background-color: #E32026 !important;
    /* Đỏ cho số 1, 3, 5... */
}

.lqk-step-heading:nth-child(even of .lqk-step-heading) .elementor-heading-title::before {
    background-color: #274E75 !important;
    /* Xanh cho số 2, 4, 6... */
}

/* Căn giữa tiêu đề và số */
.lqk-step-heading .elementor-heading-title {
    display: flex;
    align-items: center;
}

/* Class cho tiêu đề khóa học */
.lqk-title-course .elementor-heading-title {
    color: #666666;
    /* Màu xám cho chữ KHÓA HỌC */
    font-size: 40px;
    /* Chỉnh theo Figma */
    line-height: 1.2;
}

.lqk-title-course .elementor-heading-title span {
    color: #20A9B7;
    /* Màu xanh đậm thương hiệu */
    display: block;
    /* Ép rớt dòng */
    margin-top: 5px;
    position: relative;
    padding-bottom: 15px;
    /* Khoảng cách để hiện đường gạch chân */
    width: fit-content;
    /* Đường gạch chỉ dài bằng chữ */
}

/* Responsive cho Mobile */
@media (max-width: 767px) {
    .lqk-title-course .elementor-heading-title {
        font-size: 28px;
    }
}

/* Container của ảnh đại diện */
.format-video .elementor-post__thumbnail__link {
    position: relative;
    display: block;
}

/* Tạo nút Play bằng CSS */
.format-video .elementor-post__thumbnail__link::after {
    content: '\f04b'; /* Mã icon Play của FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.8); /* Màu đỏ đặc trưng video */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    pointer-events: none; /* Tránh cản trở việc click vào ảnh */
    z-index: 2;
}

/* Hiệu ứng hover */
.format-video .elementor-post__thumbnail__link:hover::after {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}
/* Mặc định ẩn nút Play đi */
.icon-play-feature {
    display: none !important;
}

/* Chỉ khi bài viết có class is-video-post thì mới hiện nút Play */
.is-video-post .icon-play-feature {
    display: flex !important;
}